-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html.min
64 lines (64 loc) · 4.94 KB
/
form.html.min
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>
<head>
<title>PicoW NeoPixel</title>
<style>.grid{display:grid;column-gap:20px;row-gap:10px;grid-template-columns:100px auto auto}legend{font-style:italic;font-weight:700}fieldset{margin-bottom:7px}canvas{border:1px solid #000;height:20;width:256;grid-column:2}input[type=range]{width:256px;grid-column:2}label{grid-column:1}.c3{grid-column:3}.r1{grid-row:1}.r2{grid-row:2}.r3{grid-row:3}.r4{grid-row:4}</style>
<script>var baseURI=document.baseURI,hue=0,saturation=1,value=1,white=0,hue1=0,hue2=.5,rValue=1,inc=1,count=2,rWhite=0;function hsvToRgb(e,t,n){let o=g=b=0;e>1&&(e=1),t>1&&(t=1),n>1&&(n=1);const u=Math.floor(6*e),c=6*e-u,a=n*(1-t),h=n*(1-c*t),l=n*(1-(1-c)*t);function i(e){let t=Math.floor(e).toString(16);return 1==t.length?"0"+t:t}0==u?(o=n,g=l,b=a):1==u?(o=h,g=n,b=a):2==u?(o=a,g=n,b=l):3==u?(o=a,g=h,b=n):4==u?(o=l,g=a,b=n):u<=6&&(o=n,g=a,b=h);return"#"+i(255*o)+i(255*g)+i(255*b)}function h2RGB(e,t,n){let o=g=b=0;e>1&&(e=1);let u=Math.floor(6*e),c=6*e-u,a=1-c;0==u?(o=1,g=c,b=0):1==u?(o=a,g=1,b=0):2==u?(o=0,g=1,b=c):3==u?(o=0,g=a,b=1):4==u?(o=c,g=0,b=1):u<=6&&(o=1,g=0,b=a),t[n+0]=Math.floor(255*o),t[n+1]=Math.floor(255*g),t[n+2]=Math.floor(255*b),t[n+3]=255}function drawRGB(e,t){var n=document.getElementById(e),o=n.getContext("2d");const u=o.getImageData(0,0,n.width,n.height),c=u.data;let a=0;for(let e=0;e<u.height;e++)for(let e=0;e<u.width;e++)h2RGB(e/u.width,c,a),a+=4;o.putImageData(u,0,0),n.addEventListener("click",(e=>function(e){const o=n.getBoundingClientRect(),u=e.clientX-o.left,c=(e.clientY,o.top,u/o.width);return t&&t(c),c}(e)))}function sendCB(){const e=new URL("/set",baseURI),t=hsvToRgb(hue,saturation,value);e.search=`?rgb=${t}&white=${Math.floor(255*white)}`;fetch(e,{method:"GET"})}function setBright(e){value=e,sendCB()}function setSat(e){saturation=e,sendCB()}function setWhite(e){white=e,sendCB()}function sendRipple(e){let t=document.getElementById("value");const n=t.value;t=document.getElementById("inc");const o=t.value;t=document.getElementById("count");const u=t.value;t=document.getElementById("w2");const c=t.value,a=new URL(e,baseURI);a.search=`?hue=${hue1}&hue2=${hue2}&value=${n}&white=${Math.floor(255*c)}&count=${u}&inc=${o}`;fetch(a,{method:"GET"})}function sendRate(){const e=document.getElementById("rate").value,t=new URL("/cycle",baseURI);t.search=`?rate=${e}`;fetch(t,{method:"GET"})}function sendSparkle(){const e=new URL("/sparkle",baseURI);fetch(e,{method:"GET"})}function sendColours(){let e=document.getElementById("value3");const t=e.value;e=document.getElementById("inc3");const n=e.value/1e3;e=document.getElementById("w3");const o=e.value,u=new URL("/colour",baseURI);u.search=`?value=${t}&white=${Math.floor(255*o)}&inc=${n}`;fetch(u,{method:"GET"})}function configure(){drawRGB("rgbPicker",(function(e){hue=e,sendCB()})),drawRGB("hue1",(function(e){hue1=e})),drawRGB("hue2",(function(e){hue2=e}))}</script>
</head>
<body onload=configure()>
<fieldset>
<legend>Set colour and brightness</legend>
<div class=grid>
<label for=rgbPicker>Colour</label>
<canvas id=rgbPicker> </canvas>
<label for=brightness>Brightness</label>
<input id=brightness type=range min=0 max=1.0 step=0.001 value=0.5 onchange=setBright(this.value)>
<label for=sat>Saturation</label>
<input id=sat type=range min=0 max=1.0 step=0.001 value=0.5 onchange=setSat(this.value)>
<label for=white>White</label>
<input id=white type=range min=0 max=1.0 step=0.001 value=0.5 onchange=setWhite(this.value)>
</div>
</fieldset>
<fieldset>
<legend>Animated Waves</legend>
<div class=grid>
<label for=hue1>Colour</label>
<canvas id=hue1> </canvas>
<label for=hue2>Back Colour</label>
<canvas id=hue2> </canvas>
<label for=value>Brightness</label>
<input id=value type=range min=0 max=1.0 step=0.001 value=0.5>
<label for=inc>Increment</label>
<input type=number id=inc value=1 min=0 max=255 name=brt><br>
<label for=count>count</label>
<input type=number id=count value=2 min=0 max=255 name=brt><br>
<label for=w2>White</label>
<input id=w2 type=range min=0 max=1.0 step=0.001 value=0>
<button class="r1 c3" onclick='sendRipple("/ripples")'>Ripples</button>
<button class="r2 c3" onclick='sendRipple("/spokes")'>Spokes</button>
<button class="r3 c3" onclick='sendRipple("/horizontal")'>Horizontal</button>
<button class="r4 c3" onclick='sendRipple("/vertical")'>Vertical</button>
</div>
</fieldset>
<fieldset>
<legend>Other</legend>
<div class=grid>
<button class=r1 onclick=sendSparkle()>Sparkle</button>
<label for=value3>Brightness</label>
<input id=value3 type=range min=0 max=1.0 step=0.001 value=0.5>
<label for=inc3>Increment</label>
<input type=number id=inc3 value=1 min=0 max=100 name=inc3><br>
<label for=w3>White</label>
<input id=w3 type=range min=0 max=1.0 step=0.001 value=0>
<button class="r2 c3" onclick=sendColours()>Colours</button>
</div>
</fieldset>
<fieldset>
<legend>Update rate</legend>
<div class=grid>
<label for=rate>Increment</label>
<input type=number id=rate value=1 min=0 max=255 name=brt><br>
<button class="r1 c3" onclick=sendRate()>Set Rate</button>
</div>
</fieldset>
</body>
</html>