Osmiogrzesznik/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webovr modular</title>
</head>

<style>
    div,
    but,
    bit {
        display: inline-block;
        background: black;
        color: white;
        transition: all .5s;
        margin: 9px;
        padding: 7px;
        font-size: 1rem;
        border: 5px inset teal;
        user-select: none;
    }

    h2 {
        width: 80vw;
    }

    bit:active,
    but:active {
        font-size: 2em;
        background: red;
    }

    #fx {
        position: fixed;
        bottom: 0px;
        background: #00000088;
    }
</style>

<body>
    ssid:<input id=ssid>
    <br>
    pass:<input id=pass onchange=c()>
    <but onclick=c()>conn</but>
    <br>
    mqtt:<input id=mqtt onchange=cm()>
    <br>
    <but onclick=b()>SvLoc</but>
    <but onclick=sf()>Svf</but>
    <but onclick=scanf()>scan</but>
    <div>
        <but onclick=webovr(1)>webovron</but>
        <but onclick=webovr(0)>webovroff</but>
        <but onclick=mode(1)>progon</but>
        <but onclick=mode(0)>progoff</but>
        <but onclick=mode(2)>manual</but>
        <but onclick=home()>home</but>
        <but onclick=gPrgA()>gPrgA</but>
        tm:<input id=tm value=1000>
        <br>
        <but onclick=akf()>akf</but>
    </div>

    fm:<input id=fm value=0 onchange=sfc()>
    <br>
    fb:<input id=fb value=1 onchange=sfc()>
    <but onclick=sfc()>setFactor</but>
    <h2 id="pincnt"></h2>
    <br>
    eas:<input id=eas value=0 onchange=sEas(prs(this.value))>
    <br>
    min:<input id=smn value=0 onchange=cbts(prs(step.value),prs(this.value),prs(smx.value))>
    <br>
    max:<input id=smx value=180 onchange=cbts(prs(step.value),prs(smn.value),prs(this.value))>
    <br>
    step:<input id=stp value=30 onchange=cbts(prs(this.value),prs(smn.value),prs(smx.value))>
    <br>
    <input type=range min=1 max=100 value=50 class=slider id=templsrvctr onchange=say(this.value)>
    <br>sv1
    <h2 id="sv0cnt"></h2>
    <br>sv2
    <h2 id="sv1cnt"></h2>
    <br>sv3
    <h2 id="sv2cnt"></h2>
    <br>sv4
    <h2 id="sv3cnt"></h2>
    <op id=fx>

        <pre id=all onclick=clr()>
        </pre>
        <ul id=scan></ul>
    </op>
</body>

<script>
    ss = "/servo?";
    _ = null;
    __ = _ => _;
    na = _ => Array.from({ length: 16 }, _ => 0)
    kfs = {
        0: [], 1: [], 2: [], 3: [],
        akf: (id, ten, veas, ps) => {
            th = this[id]
            th.length < 16 ? th.push([ten, veas, ps]) : 0
        }
    };

    shwprg = _ => {
        say(JSON.stringify(kfs));
    }
    teach = false;

    au = x => new URLSearchParams({ ...x })
    progToString = x => [x.length, x.join(",")].join(",")
    prs = parseInt;
    nw = _ => new Date(Date.now())
    nt = Date.now
    ffa = (i, auo) => fetch(i + auo).then(x => x.text()).then(x => say(x))
    l = localStorage;
    sdb = (o) => l.setItem("n" + l.length, JSON.stringify(o));
    gdb = _ => Object.keys(l).map(k => l[k])
    a = _ => [ssid.value, pass.value]
    a1 = _ => [fm.value, fb.value]
    b = _ => sdb(a())
    c = _ => ff("/connectto?", a())
    cm = _ => ff("/addmqtt?", [mqtt.value])
    webovr = v => ff("/webovr?", [v])
    mode = v => ff("/mode?", [v])
    home = v => ff("/home?", [])
    sfc = _ => ff("/setfactor?", a1())
    sEas = v => ff("/easing?", [v])
    prgX = v => ff("/prog?", v);
    gPrgA = v => prgX([2]);
    prg1Srv = v => prgX([1, v, "2,1000,1,180,1000,1,0"])
    veas = _ => eas.value;
    pinf = (id, v) => ff("/pin?", [id, v])
    akf = x => prgX([1, l_ps, tm.value, veas()])

    svmX = (id, ps) =>
        (id, ps) => {
            if (teach) {
                adkf(id, ten, veas(), ps)
            } else {
                ff(ss, [id, ps, veas()])
            }
        }

    createButton = (wheretoadd, txt, onclickfunc, prms, t = "bit") => {
        let b = document.createElement(t)
        b.innerText = txt
        //b.onclick = _ => onclickfunc(...prms)
        b.ontouchstart = x => { say(prms); tst = nt() }
        b.ontouchend = x => {
            ten = nt() - tst;
            say("ten" + ten);
            onclickfunc(...prms)
        }
        wheretoadd.append(b);
    }

    els = [sv0cnt, sv1cnt, sv2cnt, sv3cnt];
    function cpinbts() {
        for (let i = 0; i < 11; i++) {
            createButton(pincnt, "D" + i, __, [], "span");
            createButton(pincnt, "D" + i + " :HIGH", pinf, [i, 1]);
            createButton(pincnt, "D" + i + " :LOW", pinf, [i, 0]);
            createButton(pincnt, "dwell" + i, _, [], "br");
        }
    }
    function cbts(ci, min, max) {
        ci = ci < 1 ? 1 : ci;
        for (let j = 0; j <= 3; j++) {
            els[j].innerHTML = "";
        }
        for (let j = 0; j <= 3; j++) {
            for (let i = min; i <= max; i += ci) {

                createButton(els[j], i, svmX(j, i), [j, i]);
            }
            createButton(els[j], "dwell", svmX(j, -1), [j, -1]);

        }

    }
    scanf = _ => ff("/scan", []).then(x => x.text()).then(x => sayhtml(x))
    function f(o, n) {

        var a = document.createElement('a');
        a.setAttribute('href', 'data:text/plain;charset=utf-u,' + encodeURIComponent(JSON.stringify(o, null, 1)));
        a.setAttribute('download', n);
        a.click();
    }
    clr = x => all.innerText = "";
    sf = _ => f(gl(), nw())
    ff = (s, o) => {
        say(s + au(o)); return f
    }
    say = (...s) => all.innerText += [...s] + "\n"
    sayhtml = (s) => scan.innerHTML = s
    say(gdb())
    say(nt())
    cbts(30, 0, 180)
    cpinbts()
    createButton(fx, "shwprg", shwprg, []);
    uuu = au([1, 2, 3]);
    say(uuu.toString())
    console.log(ff("/a", { ...[1, 2, 3] }))
</script>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>webovr modular</title>
	</head>

	<style>
	div,
	but,
	bit {
	display: inline-block;
	background: black;
	color: white;
	transition: all .5s;
	margin: 9px;
	padding: 7px;
	font-size: 1rem;
	border: 5px inset teal;
	user-select: none;
	}

	h2 {
	width: 80vw;
	}

	bit:active,
	but:active {
	font-size: 2em;
	background: red;
	}

	#fx {
	position: fixed;
	bottom: 0px;
	background: #00000088;
	}
	</style>

	<body>
	ssid:<input id=ssid>
	<br>
	pass:<input id=pass onchange=c()>
	<but onclick=c()>conn</but>
	<br>
	mqtt:<input id=mqtt onchange=cm()>
	<br>
	<but onclick=b()>SvLoc</but>
	<but onclick=sf()>Svf</but>
	<but onclick=scanf()>scan</but>
	<div>
	<but onclick=webovr(1)>webovron</but>
	<but onclick=webovr(0)>webovroff</but>
	<but onclick=mode(1)>progon</but>
	<but onclick=mode(0)>progoff</but>
	<but onclick=mode(2)>manual</but>
	<but onclick=home()>home</but>
	<but onclick=gPrgA()>gPrgA</but>
	tm:<input id=tm value=1000>
	<br>
	<but onclick=akf()>akf</but>
	</div>

	fm:<input id=fm value=0 onchange=sfc()>
	<br>
	fb:<input id=fb value=1 onchange=sfc()>
	<but onclick=sfc()>setFactor</but>
	<h2 id="pincnt"></h2>
	<br>
	eas:<input id=eas value=0 onchange=sEas(prs(this.value))>
	<br>
	min:<input id=smn value=0 onchange=cbts(prs(step.value),prs(this.value),prs(smx.value))>
	<br>
	max:<input id=smx value=180 onchange=cbts(prs(step.value),prs(smn.value),prs(this.value))>
	<br>
	step:<input id=stp value=30 onchange=cbts(prs(this.value),prs(smn.value),prs(smx.value))>
	<br>
	<input type=range min=1 max=100 value=50 class=slider id=templsrvctr onchange=say(this.value)>
	<br>sv1
	<h2 id="sv0cnt"></h2>
	<br>sv2
	<h2 id="sv1cnt"></h2>
	<br>sv3
	<h2 id="sv2cnt"></h2>
	<br>sv4
	<h2 id="sv3cnt"></h2>
	<op id=fx>

	<pre id=all onclick=clr()>
	</pre>
	<ul id=scan></ul>
	</op>
	</body>

	<script>
	ss = "/servo?";
	_ = null;
	__ = _ => _;
	na = _ => Array.from({ length: 16 }, _ => 0)
	kfs = {
	0: [], 1: [], 2: [], 3: [],
	akf: (id, ten, veas, ps) => {
	th = this[id]
	th.length < 16 ? th.push([ten, veas, ps]) : 0
	}
	};

	shwprg = _ => {
	say(JSON.stringify(kfs));
	}
	teach = false;

	au = x => new URLSearchParams({ ...x })
	progToString = x => [x.length, x.join(",")].join(",")
	prs = parseInt;
	nw = _ => new Date(Date.now())
	nt = Date.now
	ffa = (i, auo) => fetch(i + auo).then(x => x.text()).then(x => say(x))
	l = localStorage;
	sdb = (o) => l.setItem("n" + l.length, JSON.stringify(o));
	gdb = _ => Object.keys(l).map(k => l[k])
	a = _ => [ssid.value, pass.value]
	a1 = _ => [fm.value, fb.value]
	b = _ => sdb(a())
	c = _ => ff("/connectto?", a())
	cm = _ => ff("/addmqtt?", [mqtt.value])
	webovr = v => ff("/webovr?", [v])
	mode = v => ff("/mode?", [v])
	home = v => ff("/home?", [])
	sfc = _ => ff("/setfactor?", a1())
	sEas = v => ff("/easing?", [v])
	prgX = v => ff("/prog?", v);
	gPrgA = v => prgX([2]);
	prg1Srv = v => prgX([1, v, "2,1000,1,180,1000,1,0"])
	veas = _ => eas.value;
	pinf = (id, v) => ff("/pin?", [id, v])
	akf = x => prgX([1, l_ps, tm.value, veas()])

	svmX = (id, ps) =>
	(id, ps) => {
	if (teach) {
	adkf(id, ten, veas(), ps)
	} else {
	ff(ss, [id, ps, veas()])
	}
	}

	createButton = (wheretoadd, txt, onclickfunc, prms, t = "bit") => {
	let b = document.createElement(t)
	b.innerText = txt
	//b.onclick = _ => onclickfunc(...prms)
	b.ontouchstart = x => { say(prms); tst = nt() }
	b.ontouchend = x => {
	ten = nt() - tst;
	say("ten" + ten);
	onclickfunc(...prms)
	}
	wheretoadd.append(b);
	}

	els = [sv0cnt, sv1cnt, sv2cnt, sv3cnt];
	function cpinbts() {
	for (let i = 0; i < 11; i++) {
	createButton(pincnt, "D" + i, __, [], "span");
	createButton(pincnt, "D" + i + " :HIGH", pinf, [i, 1]);
	createButton(pincnt, "D" + i + " :LOW", pinf, [i, 0]);
	createButton(pincnt, "dwell" + i, _, [], "br");
	}
	}
	function cbts(ci, min, max) {
	ci = ci < 1 ? 1 : ci;
	for (let j = 0; j <= 3; j++) {
	els[j].innerHTML = "";
	}
	for (let j = 0; j <= 3; j++) {
	for (let i = min; i <= max; i += ci) {

	createButton(els[j], i, svmX(j, i), [j, i]);
	}
	createButton(els[j], "dwell", svmX(j, -1), [j, -1]);

	}

	}
	scanf = _ => ff("/scan", []).then(x => x.text()).then(x => sayhtml(x))
	function f(o, n) {

	var a = document.createElement('a');
	a.setAttribute('href', 'data:text/plain;charset=utf-u,' + encodeURIComponent(JSON.stringify(o, null, 1)));
	a.setAttribute('download', n);
	a.click();
	}
	clr = x => all.innerText = "";
	sf = _ => f(gl(), nw())
	ff = (s, o) => {
	say(s + au(o)); return f
	}
	say = (...s) => all.innerText += [...s] + "\n"
	sayhtml = (s) => scan.innerHTML = s
	say(gdb())
	say(nt())
	cbts(30, 0, 180)
	cpinbts()
	createButton(fx, "shwprg", shwprg, []);
	uuu = au([1, 2, 3]);
	say(uuu.toString())
	console.log(ff("/a", { ...[1, 2, 3] }))
	</script>