SDK update

Firmware/WEBFiles/colorpicker.min.js

@@ -0,0 +1,56 @@
+function KellyColorPicker(ca){function S(){w={};w.size;w.sizePercentage=10;w.position;w.paddingY=4;w.paddingX=4;w.imageData=[];w.lineWidth=2;w.color="#c1ebf5";w.updateSize=function(){this.size=parseInt(u-u/100*(100-this.sizePercentage));16>this.size&&(this.size=16);this.position={x:this.paddingX,y:this.paddingY}};w.draw=function(){var a,b;if(this.imageData[B])e.putImageData(this.imageData[B],this.position.x,this.position.y);else{var c=Y(this.color);v.width=this.size;v.height=this.size;f.clearRect(0,
+0,this.size,this.size);f.beginPath();var d="triangle";"triangle"==B&&(d="quad");f.beginPath();35>this.size?b=a=v.width/2:(a=v.width/2-this.lineWidth,f.arc(this.size/2,this.size/2,a,0,2*G),f.strokeStyle="rgba(0, 0, 0, 0.4)",f.lineWidth=this.lineWidth,f.stroke(),b=a-6,f.closePath(),f.beginPath(),f.arc(this.size/2,this.size/2,b,0,2*G),f.strokeStyle="rgba(0, 0, 0, 0.4)",f.lineWidth=this.lineWidth,f.stroke(),f.closePath());f.beginPath();if("quad"==d)d=Math.floor((2*b-4)/Math.sqrt(2)),b=(this.size-d)/2,
+a=b+d,b=b+d/2-d/2,f.moveTo(a,b),f.lineTo(a-d,b),f.lineTo(a-d,b+d),f.lineTo(a,b+d);else{d=Math.floor((2*b-4)*Math.sin(G/180*60));a=2*b+(a-b);b=this.size/2;var ga=Math.sqrt(3)/2*d;f.moveTo(a,b);f.lineTo(a-ga,b-d/2);f.lineTo(a-ga,b+d/2);f.lineTo(a,b)}f.lineTo(a,b);f.fillStyle="rgba("+c.r+","+c.g+","+c.b+", 1)";f.fill();f.lineWidth=this.lineWidth;f.strokeStyle="rgba(0, 0, 0, 0.6)";f.stroke();f.closePath();this.imageData[B]=f.getImageData(0,0,v.width,v.width);e.drawImage(v,this.position.x,this.position.y)}};
+w.isDotIn=function(a){return a.x>=this.position.x&&a.x<=this.position.x+this.size&&a.y>=this.position.y&&a.y<=this.position.y+this.size?!0:!1}}function V(a,b,c){b=b?!0:!1;var d={};d.width;d.widthPercentage=22;d.imageData=null;d.align=a;d.selected=b;d.color="#ffffff";d.position;d.paddingY=-4;d.paddingX=4;d.lineWidth=1;d.selectSize=4;"right"==a&&(d.paddingX*=-1);d.selected&&(d.color=H);c&&(d.color=c);d.updateSize=function(){this.width=parseInt(u-u/100*(100-this.widthPercentage));"left"==this.align?
+this.position={x:0,y:u-this.width}:"right"==this.align&&(this.position={x:u-this.width,y:u-this.width})};d.calcS=function(a){return Math.abs((a[1].x-a[0].x)*(a[2].y-a[0].y)-(a[2].x-a[0].x)*(a[1].y-a[0].y))/2};d.isDotIn=function(a){var b=[];"left"==this.align?(b[0]={x:this.position.x,y:this.position.y},b[1]={x:this.position.x,y:this.position.y+this.width},b[2]={x:this.position.x+this.width,y:this.position.y+this.width}):(b[0]={x:this.position.x+this.width,y:this.position.y},b[1]={x:b[0].x,y:b[0].y+
+this.width},b[2]={x:b[0].x-this.width,y:this.position.y+this.width});for(var c=0;c<=b.length-1;++c)b[c].x+=this.paddingX,b[c].y+=this.paddingY;c=this.calcS(b);a=[{x:b[0].x,y:b[0].y},{x:b[1].x,y:b[1].y},{x:a.x,y:a.y}];var d=this.calcS(a);a[1]={x:b[2].x,y:b[2].y};d+=this.calcS(a);a[0]={x:b[1].x,y:b[1].y};d+=this.calcS(a);return Math.ceil(d)==Math.ceil(c)?!0:!1};d.draw=function(){v.width=this.width;v.height=this.width;f.clearRect(0,0,this.width,this.width);f.beginPath();"left"==this.align&&(f.moveTo(this.lineWidth/
+2,this.width-this.lineWidth),f.lineTo(this.width,this.width-this.lineWidth),f.lineTo(this.lineWidth,this.lineWidth),f.lineTo(this.lineWidth,this.width-this.lineWidth));"right"==this.align&&(f.moveTo(this.lineWidth/2,this.width-this.lineWidth),f.lineTo(this.width-this.lineWidth,this.width-this.lineWidth),f.lineTo(this.width-this.lineWidth,this.lineWidth),f.lineTo(this.lineWidth,this.width-this.lineWidth));this.selected&&(f.fillStyle="rgba(255,255,255, 1)",f.fill(),f.strokeStyle="rgba(0, 0, 0, 1)",
+f.stroke(),f.closePath(),f.beginPath(),f.lineWidth=this.lineWidth,"left"==this.align&&(f.moveTo(this.selectSize,this.width-this.selectSize),f.lineTo(this.width-2*this.selectSize,this.width-this.selectSize),f.lineTo(this.selectSize,2*this.selectSize),f.lineTo(this.selectSize,this.width-this.selectSize)),"right"==this.align&&(f.moveTo(2*this.selectSize,this.width-this.selectSize),f.lineTo(this.width-this.selectSize,this.width-this.selectSize),f.lineTo(this.width-this.selectSize,2*this.selectSize),f.lineTo(2*
+this.selectSize,this.width-this.selectSize)));var a=Y(this.color);f.fillStyle="rgba("+a.r+","+a.g+","+a.b+", 1)";f.fill();f.strokeStyle="rgba(0, 0, 0, 1)";f.stroke();this.imageData=f.getImageData(0,0,this.width,this.width);e.drawImage(v,this.position.x+this.paddingX,this.position.y+this.paddingY)};k[k.length]=d}function R(a){var b=a.getBoundingClientRect(),c=0,d=0;C&&(d=r.width+2*r.padding);a===n?b.width<=b.height?c=b.height:b.height<b.width&&(c=b.width):Z?"height"==Z?c=b.height:"width"==Z&&(c=b.width):
+b.width>b.height?c=b.height:b.height>=b.width&&(c=b.width);c=parseInt(c);C&&(c-=d);return 0>=c?!1:c}function N(a,b){var c=1,d=!1;a=a.trim(a);if(7>=a.length)"#"==a.charAt(0)&&(a=a.slice(1)),3==a.length?d=a+a:6==a.length&&(d=a);else if("rgb"==a.substring(0,3)){var e=a.split(",");if(3<=e.length&&4>=e.length){e[0]=e[0].replace("rgba(","");e[0]=e[0].replace("rgb(","");var f={r:parseInt(e[0]),g:parseInt(e[1]),b:parseInt(e[2])};if(255>=f.r&&255>=f.g&&255>=f.b&&(d=da(f),4==e.length)){c=parseFloat(e[3]);if(!c||
+0>c)c=0;1<c&&(c=1)}}}if(!1===d&&b)return!1;!1===d&&(d="000000");"#"!=d.charAt(0)&&(d="#"+d);return{h:d,a:c}}function ha(){if(T.quad)return T.quad;var a={};a.size;a.padding=2;a.path;a.imageData=null;a.dotToSv=function(a){return{s:Math.abs(this.path[3].x-a.x)/this.size,v:Math.abs(this.path[3].y-a.y)/this.size}};a.svToDot=function(a){var c=this.path[0].x,d=this.path[0].y,e=.02;150>u?e=.07:100>u&&(e=.16);for(var f=0;f<this.size;f++)for(var g=0;g<this.size;g++){var h={x:g+c,y:f+d},k=this.dotToSv(h),l=
+Math.abs(k.v-a.v);if(Math.abs(k.s-a.s)<e&&l<e)return h}return{x:0,y:0}};a.limitDotPosition=function(a){var c=a.x;a=a.y;c<this.path[0].x&&(c=this.path[0].x);c>this.path[0].x+this.size&&(c=this.path[0].x+this.size);a<this.path[0].y&&(a=this.path[0].y);a>this.path[0].y+this.size&&(a=this.path[0].y+this.size);return{x:c,y:a}};a.draw=function(){this.imageData||(this.imageData=e.createImageData(this.size,this.size));for(var a=0,c=this.path[0].x,d=this.path[0].y,f=0;f<this.size;f++)for(var g=0;g<this.size;g++){var h=
+this.dotToSv({x:g+c,y:f+d}),h=U(m.h,h.s,h.v);this.imageData.data[a+0]=h.r;this.imageData.data[a+1]=h.g;this.imageData.data[a+2]=h.b;this.imageData.data[a+3]=255;a+=4}e.putImageData(this.imageData,c,d);e.beginPath();e.strokeStyle="rgba(0,0,0, 0.2)";e.lineWidth=2;for(a=0;a<=this.path.length-1;++a)0==a?e.moveTo(this.path[a].x,this.path[a].y):e.lineTo(this.path[a].x,this.path[a].y);e.stroke();e.closePath()};a.updateSize=function(){this.size=Math.floor((2*h.innerRadius-2*x.paddingX-2*this.padding)/Math.sqrt(2));
+this.path=[];this.path[0]={x:this.size/2*-1,y:this.size/2*-1};this.path[1]={x:this.path[0].x+this.size,y:this.path[0].y};this.path[2]={x:this.path[1].x,y:this.path[1].y+this.size};this.path[3]={x:this.path[2].x-this.size,y:this.path[2].y};this.path[4]={x:this.path[0].x,y:this.path[0].y};for(var a=0;a<=this.path.length-1;++a)this.path[a].x+=h.pos.x,this.path[a].y+=h.pos.y};a.isDotIn=function(a){return a.x<this.path[0].x||a.x>this.path[0].x+this.size||a.y<this.path[0].y||a.y>this.path[0].y+this.size?
+!1:!0};return T.quad=a}function ia(){if(T.triangle)return T.triangle;var a={};a.size;a.padding=2;a.path;a.imageData=null;a.followWheel=!0;a.s;a.sOnTop=!1;a.outerRadius;a.limitDotPosition=function(a){var c=a.x;a=a.y;var d=this.path[2].x,e,f=a;e=Math.min(Math.max(d,c),this.path[0].x);var g=(this.path[0].y-this.path[1].y)/(this.path[0].x-this.path[1].x),h=Math.ceil(this.path[1].y+g*(e-this.path[1].x)),g=(this.path[0].y-this.path[2].y)/(this.path[0].x-this.path[2].x),g=Math.floor(this.path[2].y+g*(e-
+this.path[2].x));c<d&&(f=a);f=Math.min(Math.max(h,f),g);return{x:e,y:f}};a.svToDot=function(a){var c=.02;150>u?c=.07:100>u&&(c=.16);for(var d=0;d<this.size;d++)for(var e=0;e<this.size;e++){var f={x:this.path[1].x+e,y:this.path[1].y+d};if(y.isDotIn(f)){var g=this.dotToSv(f),h=Math.abs(g.v-a.v);if(Math.abs(g.s-a.s)<c&&h<c)return f}}return{x:0,y:0}};a.draw=function(){this.imageData||(this.imageData=f.createImageData(this.size,this.size));v.width=this.size;v.height=this.size;for(var a=this.path[1].x,
+c=this.path[1].y,d=0,g=0;g<this.size;g++)for(var h=0;h<this.size;h++){var k={x:this.path[1].x+h,y:this.path[1].y+g};y.isDotIn(k)?(k=this.dotToSv(k),k=U(m.h,k.s,k.v),this.imageData.data[d+0]=k.r,this.imageData.data[d+1]=k.g,this.imageData.data[d+2]=k.b,this.imageData.data[d+3]=255):(this.imageData.data[d+0]=0,this.imageData.data[d+1]=0,this.imageData.data[d+2]=0,this.imageData.data[d+3]=0);d+=4}f.putImageData(this.imageData,0,0);e.drawImage(v,a,c);e.beginPath();e.strokeStyle="rgba(0, 0, 0, 0.3)";e.lineWidth=
+2;a=this.path;for(d=0;d<=a.length-1;++d)0==d?e.moveTo(a[d].x,a[d].y):e.lineTo(a[d].x,a[d].y);e.stroke();e.closePath()};a.calcS=function(a){return Math.abs((a[1].x-a[0].x)*(a[2].y-a[0].y)-(a[2].x-a[0].x)*(a[1].y-a[0].y))/2};a.dotToSv=function(a){var c=this.vol,d=((a.x-c[0].x)*(c[1].x-c[0].x)+(a.y-c[0].y)*(c[1].y-c[0].y))/((c[0].x-c[1].x)*(c[0].x-c[1].x)+(c[0].y-c[1].y)*(c[0].y-c[1].y));0>d&&(d=0);1<d&&(d=1);var e=this.vol[0],c=Math.sqrt(Math.pow(c[0].x+d*(c[1].x-c[0].x)-e.x,2)+Math.pow(c[0].y+d*(c[1].y-
+c[0].y)-e.y,2));1>c&&(c=Math.floor(c));c>this.h-1&&(c=this.h);c/=this.h;a=Math.abs(ja(a,this.sSide));30>a&&(a=30);return{s:(60-(a-30))/60,v:c}};a.isDotIn=function(a){a=[{x:this.path[0].x,y:this.path[0].y},{x:this.path[1].x,y:this.path[1].y},{x:a.x,y:a.y}];var c=this.calcS(a);a[1]={x:this.path[2].x,y:this.path[2].y};c+=this.calcS(a);a[0]={x:this.path[1].x,y:this.path[1].y};c+=this.calcS(a);return Math.ceil(c)==Math.ceil(this.s)?!0:!1};a.updateSize=function(){this.outerRadius=h.innerRadius-x.paddingX-
+this.padding;this.size=Math.floor(2*this.outerRadius*Math.sin(G/180*60));var a=Math.sqrt(3)/2*this.size;this.h=Math.sqrt(3)/2*this.size;this.path=[];this.path[0]={x:this.outerRadius,y:0};this.path[1]={x:this.path[0].x-a,y:this.size/2*-1};this.path[2]={x:this.path[1].x,y:this.size/2};this.path[3]={x:this.path[0].x,y:this.path[0].y};for(a=0;a<=this.path.length-1;++a)this.path[a].x+=h.pos.x,this.path[a].y+=h.pos.y;this.vol=[];this.s=this.calcS(this.path);this.sOnTop?(a=ka(this.path[0],this.path[2]),
+this.vol[0]={x:this.path[1].x,y:this.path[1].y},this.vol[1]={x:a.x,y:a.y},this.sSide=this.path[1]):(a=ka(this.path[0],this.path[1]),this.vol[0]={x:this.path[2].x,y:this.path[2].y},this.vol[1]={x:a.x,y:a.y},this.sSide=this.path[2])};return T.triangle=a}function z(a,b,c,d){"object"!==typeof a&&(a=document.getElementById(a));if(!a)return!1;d||(d="");P[d+b]=c;a.addEventListener?a.addEventListener(b,P[d+b]):a.attachEvent("on"+b,P[d+b]);return!0}function q(a,b,c){"object"!==typeof a&&(a=document.getElementById(a));
+if(!a)return!1;c||(c="");if(!P[c+b])return!1;a.removeEventListener?a.removeEventListener(b,P[c+b]):a.detachEvent("on"+b,P[c+b]);P[c+b]=null;return!0}function U(a,b,c){var d,e,f,g,h,k;a&&void 0===b&&void 0===c&&(b=a.s,c=a.v,a=a.h);g=Math.floor(6*a);h=6*a-g;a=c*(1-b);k=c*(1-h*b);b=c*(1-(1-h)*b);switch(g%6){case 0:d=c;e=b;f=a;break;case 1:d=k;e=c;f=a;break;case 2:d=a;e=c;f=b;break;case 3:d=a;e=k;f=c;break;case 4:d=b;e=a;f=c;break;case 5:d=c,e=a,f=k}return{r:Math.floor(255*d),g:Math.floor(255*e),b:Math.floor(255*
+f)}}function la(a,b,c){a&&void 0===b&&void 0===c&&(b=a.g,c=a.b,a=a.r);a/=255;b/=255;c/=255;var d=Math.max(a,b,c),e=Math.min(a,b,c),f,g=d-e;if(d==e)f=0;else{switch(d){case a:f=(b-c)/g+(b<c?6:0);break;case b:f=(c-a)/g+2;break;case c:f=(a-b)/g+4}f/=6}return{h:f,s:0==d?0:g/d,v:d}}function Y(a){a=parseInt("#"==a.charAt(0)?a.slice(1):a,16);return{r:a>>16,g:a>>8&255,b:a&255}}function da(a){var b=function(a){a=a.toString(16);return 1===a.length?"0"+a:a};return"#"+b(a.r)+b(a.g)+b(a.b)}function ka(a,b){return{x:(a.x+
+b.x)/2,y:(a.y+b.y)/2}}function ja(a,b,c){b||(b={x:0,y:0});a=180*Math.atan2(a.y-b.y,a.x-b.x)/G;c&&0>a&&(a=360+a);return a}function ea(){ma=2+x.paddingX;K=!1;h.imageData=null;I=u/2;h.pos={x:I,y:I};h.outerRadius=I-ma;h.innerRadius=h.outerRadius-h.width;x.path=[{x:h.innerRadius-x.paddingX,y:-1*x.height},{x:h.outerRadius+x.paddingX,y:-1*x.height},{x:h.outerRadius+x.paddingX,y:x.height},{x:h.innerRadius-x.paddingX,y:x.height},{x:h.innerRadius-x.paddingX,y:-1*x.height}];var a=u;C&&(a+=r.width+2*r.padding);
+"CANVAS"!=D.tagName&&(D.style.width=a+"px",D.style.height=u+"px");n.width=a;n.height=u;O!=n&&(n.style.width=a+"px",n.style.height=u+"px");for(a=0;a<=k.length-1;++a)k[a].updateSize();w&&(w.imageData.triangle=null,w.imageData.quad=null,w.updateSize());y.updateSize();C&&r.updateSize()}function W(a){if(t&&(!l.updateinput||(0,l.updateinput)(g,t,a))){var b="rgba("+E.r+", "+E.g+", "+E.b+", "+F.toFixed(2)+")";a||(t.value=1>F&&"mixed"===aa?b:"hex"===aa||"mixed"===aa?H:b);na&&(t.style.color=.5>m.v?"#FFF":"#000",
+t.style.background=b)}}function ta(){if(!D)return!1;"CANVAS"!=D.tagName?(n=document.createElement("CANVAS"),D.appendChild(n)):n=D;"undefined"!=typeof window.G_vmlCanvasManager&&(n=window.G_vmlCanvasManager.initElement(n),v=window.G_vmlCanvasManager.initElement(v));return n.getContext&&n.getContext("2d")?(e=n.getContext("2d"),f=v.getContext("2d"),!0):!1}function ba(){z(n,"mousedown",function(a){g.mouseDownEvent(a)},"wait_action_");z(n,"touchstart",function(a){g.mouseDownEvent(a)},"wait_action_");z(n,
+"mouseout",function(a){g.mouseOutEvent(a)},"wait_action_");z(window,"touchmove",function(a){g.touchMoveEvent(a)},"wait_action_");z(n,"mousemove",function(a){g.mouseMoveRest(a)},"wait_action_")}function oa(){q(n,"mousedown","wait_action_");q(n,"touchstart","wait_action_");q(n,"mouseout","wait_action_");q(window,"touchmove","wait_action_");q(n,"mousemove","wait_action_")}function Q(a){a=a||window.event;var b,c=document.body.scrollLeft+document.documentElement.scrollLeft,d=document.body.scrollTop+document.documentElement.scrollTop;
+"touchend"==event.type?(b=a.changedTouches[0].clientX+c,a=a.changedTouches[0].clientY+d):"touchmove"==event.type||a.touches?(b=a.touches[0].clientX+c,a=a.touches[0].clientY+d):(b=a.clientX+c,a=a.clientY+d);var e=n.getBoundingClientRect();b-=e.left+c;a-=e.top+d;return{x:b,y:a}}function pa(a){for(var b=!1,c=0;c<=k.length-1;++c)k[c].selected&&(b=c),k[c].selected=!1;for(var d=!1,c=0;c<=k.length-1;++c)if(c==a){k[c].selected=!0;g.setColorByHex(k[c].color);d=!0;break}d&&l.selectcolorsaver&&(0,l.selectcolorsaver)(g,
+k[a]);d||!1===b||(k[b].selected=!0);return d}function fa(){for(var a=0;a<=k.length-1;++a)k[a].selected&&(k[a].color=H)}function qa(){if(k.length)for(var a=0;a<=k.length-1;++a)k[a].draw()}function ua(){if(!e)return!1;e.clearRect(0,0,n.width,n.height);if(K)return e.putImageData(X,0,0),qa(),!0;h.draw();y.draw();C&&r.draw();qa();w&&w.draw();A||(X=e.getImageData(0,0,n.width,n.height),K=!0);return!0}function M(){if(!ua())return!1;var a=360*m.h-h.startAngle;C&&(e.beginPath(),e.rect(r.pos.x-2,r.padding+r.height*
+(1-F)-1,r.width+4,2),e.strokeStyle="rgba(0,0,0, 0.8)",e.lineWidth=2,e.stroke(),e.closePath());e.beginPath();var b=x.path,c;c=G/180*a;for(var a=[],d=0;d<=b.length-1;++d)a[d]={x:b[d].x*Math.cos(c)-b[d].y*Math.sin(c),y:b[d].x*Math.sin(c)+b[d].y*Math.cos(c)};for(b=0;b<=a.length-1;++b)a[b].x+=h.pos.x,a[b].y+=h.pos.y,0==b?e.moveTo(a[b].x,a[b].y):e.lineTo(a[b].x,a[b].y);e.strokeStyle="rgba(0,0,0,0.8)";e.lineWidth=x.lineWeight;e.stroke();e.closePath();e.strokeStyle=.5<m.v&&.5>m.s?"rgba(0, 0, 0, 1)":"rgba(255, 255, 255, 1)";
+e.beginPath();e.lineWidth=2;e.arc(m.x,m.y,ra.radius,0,2*G);e.stroke();e.closePath();return!1}var G=Math.PI,y,sa=!0,ra={radius:4},n=!1,e=!1,B="quad",C=!1,A=!1,J=!0,P=[],l=[],v=document.createElement("canvas"),f=!1,K=!1,X=null,t=!1,na=!0,aa="mixed",p={tag:!1,margin:6},D=!1,g=this,ma,u=200,I,m,E,H="#000000",F=1,O=!1,Z=!1,k=[],w=!1,T=[],h={width:18,imageData:null};h.innerRadius;h.startAngle=0;h.outerRadius;h.outerStrokeStyle="rgba(0,0,0,0.2)";h.innerStrokeStyle="rgba(0,0,0,0.2)";h.pos;h.draw=function(){if(this.imageData)e.putImageData(this.imageData,
+0,0);else{for(var a=this.startAngle,b=0;360>=b;b++){var c=G/180*(b-2),d=G/180*b;e.beginPath();e.moveTo(I,I);e.arc(I,I,this.outerRadius,c,d,!1);e.closePath();c=U(a/360,1,1);e.fillStyle="rgb("+c.r+", "+c.g+", "+c.b+")";e.fill();a++;360<=a&&(a=0)}e.globalCompositeOperation="destination-out";e.beginPath();e.arc(I,I,this.innerRadius,0,2*G);e.fill();e.globalCompositeOperation="source-over";e.strokeStyle=this.innerStrokeStyle;e.lineWidth=2;e.stroke();e.closePath();e.beginPath();e.arc(I,I,this.outerRadius,
+0,2*G);e.strokeStyle=this.outerStrokeStyle;e.lineWidth=2;e.stroke();e.closePath();this.imageData=e.getImageData(0,0,u,u)}};h.isDotIn=function(a){return Math.pow(this.pos.x-a.x,2)+Math.pow(this.pos.y-a.y,2)<Math.pow(this.outerRadius,2)&&Math.pow(this.pos.x-a.x,2)+Math.pow(this.pos.y-a.y,2)>Math.pow(this.innerRadius,2)?!0:!1};var x={lineWeight:2,height:4,paddingX:2};x.path;var r={width:18,padding:4,outerStrokeStyle:"rgba(0,0,0,0.2)",innerStrokeStyle:"rgba(0,0,0,0.2)"};r.height;r.pos;r.updateSize=function(){this.pos=
+{x:u+r.padding,y:r.padding};this.height=u-2*r.padding};r.draw=function(){var a=e.createLinearGradient(0,0,0,this.height),b=U(m.h,1,1);a.addColorStop(0,"rgba("+b.r+","+b.g+","+b.b+",1)");a.addColorStop(1,"rgba("+b.r+","+b.g+","+b.b+",0)");e.beginPath();e.rect(this.pos.x,this.pos.y,this.width,this.height);e.fillStyle="white";e.fill();e.fillStyle=a;e.fill();e.strokeStyle="rgba(0,0,0, 0.2)";e.lineWidth=2;e.stroke();e.closePath()};r.dotToAlpha=function(a){return 1-Math.abs(this.pos.y-a.y)/this.height};
+r.alphaToDot=function(a){return{x:0,y:this.height-this.height*a}};r.limitDotPosition=function(a){a=a.y;a<this.pos.y&&(a=this.pos.y);a>this.pos.y+this.height&&(a=this.pos.y+this.height);return{x:this.pos.x,y:a}};r.isDotIn=function(a){return a.x<this.pos.x||a.x>this.pos.x+r.width||a.y<this.pos.y||a.y>this.pos.y+this.height?!1:!0};var L={svCursorData:null,stCursor:null,curType:0,size:16,initSvCursor:function(){if(!n)return!1;var a=document.body;this.curType=1;this.stCursor||(this.stCursor=a.style.cursor);
+this.stCursor||(this.stCursor="auto");if(this.svCursorData)return a.style.cursor=this.svCursorData,!0;if(!v)return!1;var b=this.size+2;v.width=b;v.height=b;f.clearRect(0,0,this.size,this.size);f.strokeStyle="rgba(255, 255, 255, 1)";f.beginPath();f.lineWidth=2;f.arc(b/2,b/2,this.size/2,0,2*G);f.stroke();f.closePath();var c=v.toDataURL();this.svCursorData="url("+c+") "+b/2+" "+b/2+", auto";if(!this.svCursorData)return!1;a.style.cursor=this.svCursorData;-1===a.style.cursor.indexOf(c)&&(this.svCursorData=
+"crosshair",a.style.cursor="crosshair");return!0},initStandartCursor:function(){this.stCursor&&(L.curType=0,document.body.style.cursor=this.stCursor)},updateCursor:function(a){sa&&(KellyColorPicker.cursorLock||(y.isDotIn(a)?L.initSvCursor():L.initStandartCursor()))}};this.popUpClose=function(a){if(!1!==p.tag){if(a&&(a.target==t||a.target==n||a.target==p.tag))return!1;p.tag.style.display="none";KellyColorPicker.activePopUp==g&&(KellyColorPicker.activePopUp=!1)}};this.popUpShow=function(a){if(!1!==
+p.tag&&(!l.popupshow||(0,l.popupshow)(g,a))){KellyColorPicker.popupEventsInclude||(z(document,"click",function(a){return KellyColorPicker.activePopUp?KellyColorPicker.activePopUp.popUpClose(a):!1},"popup_close_"),z(window,"resize",function(a){if(KellyColorPicker.activePopUp)return KellyColorPicker.activePopUp.popUpShow(a)},"popup_resize_"),KellyColorPicker.popupEventsInclude=!0);KellyColorPicker.activePopUp&&KellyColorPicker.activePopUp.popUpClose(!1);a=g.getCanvas().width;var b=g.getAlphaFig();b&&
+(a-=b.width+b.padding);b=parseInt(p.tag.style.paddingBottom)+parseInt(p.tag.style.paddingTop);0>=b&&(b=0);var c=t.getBoundingClientRect(),d=c.left+(window.scrollX||window.pageXOffset||document.body.scrollLeft);p.tag.style.top=c.top+(window.scrollY||window.pageYOffset||document.body.scrollTop)-b-a-p.margin+"px";p.tag.style.left=d+"px";p.tag.style.display="block";KellyColorPicker.activePopUp=g;return!1}};this.setHueByDot=function(a){a=ja(a,h.pos)+h.startAngle;0>a&&(a=360+a);m.h=a/360;E=U(m.h,m.s,m.v);
+H=da(E);fa();l.change&&(0,l.change)(g);W();K=!1;M()};this.setColorForColorSaver=function(a,b){var c=N(a,!0);if(c){var d=g.getColorSaver(b);d.selected?this.setColorByHex(a,!1):(d.color=c.h,M());return!0}};this.setColorByHex=function(a,b){b||(b=!1);var c=F;if(!1!==a){if(!a||!a.length)return;var d=N(a,!0);if(!d)return;a=d.h;C&&(c=d.a)}else a=H;C&&a==H&&K&&c!=F?(F=c,M()):H&&a==H&&K||(F=c,E=Y(a),H=a,m=la(E),c=y.svToDot(m),m.x=c.x,m.y=c.y,K=!1,fa(),M(),l.change&&(0,l.change)(g),W(b))};this.setAlphaByDot=
+function(a){F=r.dotToAlpha(a);l.change&&(0,l.change)(g);W();M()};this.setAlpha=function(a){F=a;W();M()};this.setColorByDot=function(a){var b=y.dotToSv(a);m.s=b.s;m.v=b.v;m.x=a.x;m.y=a.y;1<m.s&&(m.s=1);0>m.s&&(m.s=0);1<m.v&&(m.v=1);0>m.v&&(m.v=0);E=U(m.h,m.s,m.v);H=da(E);fa();l.change&&(0,l.change)(g);W();M()};this.mouseOutEvent=function(a){0<L.curType&&!KellyColorPicker.cursorLock&&L.initStandartCursor()};this.mouseMoveRest=function(a){if(!A&&J){J=!1;var b=Q(a);L.updateCursor(b);requestAnimationFrame(function(){J=
+!0});l.mousemoverest&&(0,l.mousemoverest)(a,g,b)}};this.touchMoveEvent=function(a){A&&event.preventDefault()};this.mouseDownEvent=function(a){a.preventDefault();var b,c=!1,d=Q(a);if(h.isDotIn(d))A="wheel",g.setHueByDot(d),b=function(a){g.wheelMouseMove(a,d)},c=function(a){KellyColorPicker.cursorLock=!1;g.wheelMouseUp(a,d)};else if(y.isDotIn(d))A="sv",g.setColorByDot(d),b=function(a){g.svMouseMove(a,d)},c=function(a){KellyColorPicker.cursorLock=!1;g.svMouseUp(a,d)};else if(C&&r.isDotIn(d))A="alpha",
+g.setAlphaByDot(d),b=function(a){g.alphaMouseMove(a,d)},c=function(a){KellyColorPicker.cursorLock=!1;g.alphaMouseUp(a,d)};else if(w&&w.isDotIn(d))g.setMethod();else if(k.length)for(a=0;a<=k.length-1;++a)if(k[a].isDotIn(d)){pa(a);break}b&&c&&(oa(),KellyColorPicker.cursorLock=g,z(document,"mouseup",c,"action_process_"),z(document,"mousemove",b,"action_process_"),z(document,"touchend",c,"action_process_"),z(document,"touchmove",b,"action_process_"))};this.wheelMouseMove=function(a,b){a.preventDefault();
+if(A&&J){J=!1;var c=Q(a);requestAnimationFrame(function(){J=!0});g.setHueByDot(c);l.mousemoveh&&(0,l.mousemoveh)(a,g,c)}};this.wheelMouseUp=function(a,b){a.preventDefault();if(A){q(document,"mouseup","action_process_");q(document,"mousemove","action_process_");q(document,"touchend","action_process_");q(document,"touchmove","action_process_");ba();K=A=!1;M();var c=Q(a);L.updateCursor(c);l.mouseuph&&(0,l.mouseuph)(a,g,c)}};this.alphaMouseMove=function(a,b){a.preventDefault();if(A&&J){J=!1;var c=Q(a),
+c=r.limitDotPosition(c);requestAnimationFrame(function(){J=!0});g.setAlphaByDot(c);l.mousemovealpha&&(0,l.mousemovealpha)(a,g,c)}};this.alphaMouseUp=function(a,b){a.preventDefault();if(A){q(document,"mouseup","action_process_");q(document,"mousemove","action_process_");q(document,"touchend","action_process_");q(document,"touchmove","action_process_");ba();A=!1;var c=Q(a);L.updateCursor(c);l.mouseupalpha&&(0,l.mouseupalpha)(a,g,c)}};this.svMouseMove=function(a,b){a.preventDefault();if(A&&J){J=!1;var c=
+Q(a),c=y.limitDotPosition(c);requestAnimationFrame(function(){J=!0});g.setColorByDot(c);l.mousemovesv&&(0,l.mousemovesv)(a,g,c)}};this.svMouseUp=function(a,b){a.preventDefault();if(A){q(document,"mouseup","action_process_");q(document,"mousemove","action_process_");q(document,"touchend","action_process_");q(document,"touchmove","action_process_");ba();A=!1;var c=Q(a);L.updateCursor(c);C&&(K=!1,M());l.mouseupsv&&(0,l.mouseupsv)(a,g,c)}};this.addUserEvent=function(a,b){l[a]=b;return!0};this.removeUserEvent=
+function(a){if(!l[a])return!1;l[a]=null;return!0};this.getCanvas=function(){return e?n:!1};this.getCtx=function(){return e?e:!1};this.getInput=function(){return t};this.getSvFig=function(){return y};this.getSvFigCursor=function(){return ra};this.getWheel=function(){return h};this.getWheelCursor=function(){return x};this.getCurColorHsv=function(){return m};this.getCurColorRgb=function(){return E};this.getCurColorHex=function(){return H};this.getCurColorRgba=function(){return{r:E.r,g:E.g,b:E.b,a:F}};
+this.getCurAlpha=function(){return F};this.getAlphaFig=function(){return C?r:!1};this.getPopup=function(){return p};this.getSize=function(){return u};this.getColorSaver=function(a){for(var b=0;b<=k.length-1;++b)if(!a&&k[b].selected||k[b].align==a)return k[b].rgb=Y(k[b].color),k[b].hsv=la(k[b].rgb.r,k[b].rgb.g,k[b].rgb.b),k[b]};this.setColorSaver=function(a){if(!a)return!1;for(var b=0;b<=k.length-1;++b)if(k[b].align==a)return pa(b),k[b]};this.updateView=function(a){if(!e)return!1;a&&(h.imageData=null,
+X=y.imageData=null);K=!1;ea();M();return!0};this.resize=function(a,b){if(!e)return!1;if(a==u&&!b)return!0;K=!1;h.imageData=null;X=y.imageData=null;u=a;ea();g.setColorByHex(!1);return!1};this.syncSize=function(a){if(!O)return!1;(a=R(O))&&g.resize(a);return!1};this.setMethod=function(a){a||(a="triangle","triangle"==B&&(a="quad"));if(a==B||"quad"!=B&&"triangle"!=B)return!1;B=a;"quad"==B&&(y=ha());"triangle"==B&&(y=ia());g.resize(u,!0);l.setmethod&&(0,l.setmethod)(g,B);return!0};this.destroy=function(){if(!g)return!1;
+0<L.curType&&(KellyColorPicker.cursorLock=!1,L.initStandartCursor());A&&(q(document,"mouseup","action_process_"),q(document,"mousemove","action_process_"),q(document,"touchend","action_process_"),q(document,"touchmove","action_process_"),A=!1);p.tag&&q(t,"click","popup_");t&&(q(t,"click","input_edit_"),q(t,"change","input_edit_"),q(t,"keyup","input_edit_"),q(t,"keypress","input_edit_"));KellyColorPicker.popupEventsInclude&&P.popup_close_click&&(KellyColorPicker.activePopUp&&KellyColorPicker.activePopUp.popUpClose(!1),
+q(document,"click","popup_close_"),q(window,"resize","popup_resize_"),KellyColorPicker.popupEventsInclude=!1);h.imageData=null;v=X=y.imageData=null;D&&D.parentNode&&D.parentNode.removeChild(D);O&&q(window,"resize","canvas_");oa();g=null};(function(a){var b="",c="";void 0!==a.alpha_slider&&(a.alphaSlider=a.alpha_slider);void 0!==a.input_color&&(a.inputColor=a.input_color);void 0!==a.input_format&&(a.inputFormat=a.input_format);a.input&&"object"!==typeof a.input?(a.input=document.getElementById(a.input),
+t=a.input):"object"===typeof a.input&&(t=a.input);void 0!==a.changeCursor&&(sa=a.changeCursor);void 0!==a.alpha&&(F=a.alpha);void 0!==a.alphaSlider&&(C=a.alphaSlider);void 0!==a.inputColor&&(na=a.inputColor);void 0!==a.inputFormat&&(aa=a.inputFormat);a.userEvents&&(l=a.userEvents);a.place&&"object"!==typeof a.place&&(c=a.place,a.place=document.getElementById(a.place));a.place?D=a.place:t?(p.tag=document.createElement("div"),p.tag.className="popup-kelly-color",a.popupClass?p.tag.className=a.inputClassName:
+(p.tag.className="popup-kelly-color",p.tag.style.position="absolute",p.tag.style.bottom="0px",p.tag.style.left="0px",p.tag.style.display="none",p.tag.style.backgroundColor="#e1e1e1",p.tag.style.border="1px solid #bfbfbf",p.tag.style.boxShadow="7px 7px 14px -3px rgba(0,0,0,0.24)",p.tag.style.borderTopLeftRadius="4px",p.tag.style.borderTopRightRadius="4px",p.tag.style.borderBottomLeftRadius="4px",p.tag.style.borderBottomRightRadius="4px",p.tag.style.padding="12px",p.tag.style.boxSizing="content-box"),
+D=p.tag,document.getElementsByTagName("body")[0].appendChild(p.tag),z(t,"click",function(a){return g.popUpShow(a)},"popup_")):b+='| "place" ('+c+") not not found";c=!1;a.color?c=N(a.color):t&&t.value&&(c=N(t.value));c&&(H=c.h,C&&(F=c.a));!a.method||"triangle"!=a.method&&"quad"!=a.method||(B=a.method);ta()||(b+=" | cant init canvas context");a.resizeWith&&("object"!==typeof a.resizeWith&&(a.resizeWith=document.getElementById(a.resizeWith)),O=!0===O?n:a.resizeWith,a.resizeSide&&(Z=a.resizeSide),O&&
+(R(O)&&(a.size=R(O)),z(window,"resize",function(a){return g.syncSize(a)},"canvas_")));a.size&&0<a.size&&(u=a.size);b?"undefined"!==typeof console&&console.log("KellyColorPicker : "+b):("quad"==B&&(y=ha()),"triangle"==B&&(y=ia()),t&&(b=function(a){a=a||window.event;a.target||(a.target=a.srcElement);g.setColorByHex(a.target.value,!0)},z(t,"click",b,"input_edit_"),z(t,"change",b,"input_edit_"),z(t,"keyup",b,"input_edit_"),z(t,"keypress",b,"input_edit_")),a.colorSaver&&(V("left",!0),V("right")),a.methodSwitch&&
+S(),ba(),ea(),g.setColorByHex(!1))})(ca)}KellyColorPicker.cursorLock=!1;KellyColorPicker.activePopUp=!1;KellyColorPicker.popupEventsInclude=!1;KellyColorPicker.attachToInputByClass=function(ca,S){for(var V=[],R=document.getElementsByClassName(ca),N=0;N<R.length;N++)S?S.input=R[N]:S={input:R[N],size:150},V.push(new KellyColorPicker(S));return V};

Firmware/WEBFiles/elements.css

@@ -0,0 +1,278 @@
+body {font-family: Arial;}
+form{
+	width:100%;
+}
+#child_page{
+	margin:0 auto;
+	width:700px;
+	height:800px;
+	display: block;
+}
+
+#picker-wrapper{
+	position:relative;
+	float:left;
+	width:100%;
+	
+}
+#picker{
+	margin:0 auto;
+	width:300px;
+	display: block;
+}
+.hblockcont { 
+    text-align:center;
+	align:center;
+}
+
+fieldset { 
+    display: block;
+    border: 0px;
+	margin: 20px;
+}
+
+.on, .off { 
+    width: 80px;
+	height: 80px;
+}
+.range { 
+    max-width: 600px;
+}
+
+.tab {
+    overflow: hidden;
+    height: 45px;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+}
+
+.tab button {
+    background-color: inherit;
+    // float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    font-size: 17px;
+}
+
+.tab button:hover {
+    background-color: #dddddd;
+}
+
+.tab button.active {
+    background-color: #00cc99;
+}
+
+.tabcontent {
+    /*display: none;*/
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-top: none;
+}
+.tabcontentframe {
+   border-style:none;
+   width:100%;
+   margin-top:20px;
+   height:1150px;
+   border-spacing:0px;
+}
+
+.filtercontent {
+    display: none;
+    padding: 6px 6px;
+    max-width: 700px;
+    border: 1px solid #ccc;
+}
+
+.button {
+    background-color: #00cc99;
+    border: none;
+    color: black;
+    padding: 10px 15px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+}
+
+.select {
+   //background-color:#00cc99;
+   width: 180px;
+   padding: 5px;
+   font-size: 16px;
+   border: 1px solid #ccc;
+   height: 28px;
+}
+
+.inputtext {
+   width: 180px;
+   font-size: 16px;
+   border: 1px solid #ccc;
+   text-align: center;
+   height: 26px;
+}
+
+/* https://www.w3schools.com/html/html_tables.asp */
+
+table {
+    font-family: arial, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+	
+}
+
+.td1st {
+    border: 0px solid #dddddd;
+    text-align: left;
+    padding: 4px;
+}
+
+td {
+    border: 0px solid #dddddd;
+    text-align: right;
+    padding: 4px;
+}
+
+/* http://dimox.name/custom-checkboxes-and-radio-buttons-using-css-only/ */
+
+.checkbox + label {
+  cursor: pointer;
+}
+
+.checkbox:not(checked) {
+  position: absolute;
+  opacity: 0;
+}
+
+.checkbox:not(checked) + label {
+  position: relative;
+  padding: 0 0 0 60px;
+}
+
+.checkbox:not(checked) + label:before {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: 0;
+  width: 50px;
+  height: 26px;
+  border-radius: 13px;
+  background: #f1f1f1;
+  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
+}
+
+.checkbox:checked + label:before {
+  background: #00cc99;
+}
+
+.checkbox:not(checked) + label:after {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: 2px;
+  width: 22px;
+  height: 22px;
+  border-radius: 10px;
+  background: #FFF;
+  box-shadow: 0 2px 5px rgba(0,0,0,.3);
+  transition: all .2s;
+}
+
+.checkbox:checked + label:after {
+  left: 26px;
+}
+
+/* http://www.cssportal.com/style-input-range/ */
+
+input[type=range] {
+  height: 30px;
+  -webkit-appearance: none;
+  width: 100%;
+}
+input[type=range]:focus {
+  outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 22px;
+  cursor: pointer;
+  animate: 1.0s;
+  box-shadow: 1px 1px 3px #787878;
+  background: #F1F1F1;
+  border-radius: 10px;
+  border: 1px solid #D4D4D4;
+}
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: 1px 1px 2px #787878;
+  border: 1px solid #787878;
+  height: 22px;
+  width: 22px;
+  border-radius: 11px;
+  background: #FFFFFF;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -1px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: #F1F1F1;
+}
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 22px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 1px 1px 3px #787878;
+  background: #F1F1F1;
+  border-radius: 10px;
+  border: 1px solid #D4D4D4;
+}
+input[type=range]::-moz-range-thumb {
+  box-shadow: 1px 1px 2px #787878;
+  border: 1px solid #787878;
+  height: 22px;
+  width: 22px;
+  border-radius: 11px;
+  background: #FFFFFF;
+  cursor: pointer;
+}
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 22px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: #F1F1F1;
+  border: 1px solid #D4D4D4;
+  border-radius: 20px;
+  box-shadow: 1px 1px 3px #787878;
+}
+input[type=range]::-ms-fill-upper {
+  background: #F1F1F1;
+  border: 1px solid #D4D4D4;
+  border-radius: 20px;
+  box-shadow: 1px 1px 3px #787878;
+}
+input[type=range]::-ms-thumb {
+  margin-top: 1px;
+  box-shadow: 1px 1px 2px #787878;
+  border: 1px solid #787878;
+  height: 22px;
+  width: 22px;
+  border-radius: 11px;
+  background: #FFFFFF;
+  cursor: pointer;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: #F1F1F1;
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: #F1F1F1;
+}

Firmware/WEBFiles/elements.js

@@ -0,0 +1,168 @@
+/*
+function openTab(evt, tabID)
+{
+	// Показываем выбранный контент
+    var i, tabcontent, tablinks;
+    tabcontent = document.getElementsByClassName("tabcontent");
+    for (i = 0; i < tabcontent.length; i++) 
+	{     
+		if (tabcontent[i].id == tabID)
+			tabcontent[i].style.display = "block";
+		else
+			tabcontent[i].style.display = "none";
+    }   
+	
+	// Выделяем выбранную кнопку
+	tablinks = document.getElementsByClassName("tablinks");
+    for (i = 0; i < tablinks.length; i++) 
+	{
+        tablinks[i].className = tablinks[i].className.replace(" active", "");
+    }   
+    evt.currentTarget.className += " active";
+}
+*/
+function openFilterSettings(chkbx)
+{
+	var i, content;
+	content = document.getElementsByClassName("filtercontent");
+	for (i = 0; i < content.length; i++) 
+	{
+        if (content[i].id == chkbx.id)
+		{
+			if(chkbx.checked == "1")
+				content[i].style.display = "block";
+			else
+				content[i].style.display = "none";
+		}
+    }
+	// chkbx.value = chkbx.checked ?
+	sendFilterState(chkbx.name, chkbx.checked);
+}
+
+function changeOnOff(field)
+{
+    if (field.className === 'off')
+    {
+        sendFilterParam('ws_isenable', "1");
+        field.src = 'on.gif';
+        field.className = 'on';
+    }
+    else
+    {
+        sendFilterParam('ws_isenable', "0");
+        field.src = 'off.gif';
+        field.className = 'off';
+    }
+}
+
+function setFormValues(form, cfg)
+{
+    var name, field;
+    for (name in cfg)
+    {
+        if (form[name])
+        {
+            field = form[name];
+            if (field[1] && field[1].type === 'checkbox')
+            {
+                field = field[1];
+            }
+            if (field.type === 'checkbox')
+            {
+                field.checked = cfg[name] === '1' ? true : false;
+                openFilterSettings(field);
+            }
+            else
+            {
+                field.value = cfg[name];
+            }
+        }
+    }
+}
+
+function sendFilterState(filtName, en) 
+{
+	var xhr = new XMLHttpRequest();
+	var send = en === true ? '1' : '0';
+	var params = filtName + '=' + encodeURIComponent(send);
+	xhr.open("POST", '/index.html', true);
+	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+	xhr.onreadystatechange = function () 
+	{
+	    //if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200)
+	    //console.log(xhr.responseText);
+	};
+	xhr.send(params);
+}
+
+function sendHSV(HSV)
+{
+    var xhr = new XMLHttpRequest();
+    var hue = Math.round(255 * HSV.h);
+    var sat = Math.round(255 * HSV.s);
+    var val = Math.round(255 * HSV.v);
+
+    var params = 'ws_filt_const_hue=' + encodeURIComponent(hue) +
+                 '&ws_filt_const_sat=' + encodeURIComponent(sat) +
+                 '&ws_filt_const_value=' + encodeURIComponent(val) +
+                 '&ws_filt_const_update=' + encodeURIComponent('1');
+    xhr.open("POST", '/index.html', true);
+    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    xhr.onreadystatechange = function () {
+
+    };
+    xhr.send(params);
+}
+
+function loadHSV(picker, HSV)
+{
+    var hue = HSV.ws_filt_const_hue / 255;
+    var sat = HSV.ws_filt_const_sat / 255;
+    var val = HSV.ws_filt_const_value / 255;
+
+    var rgb = hsvToRgb(hue, sat, val);
+    var hex = '#' + byteToHex(rgb[0]) + byteToHex(rgb[1]) + byteToHex(rgb[2]);
+
+    picker.setColorByHex(hex);
+}
+
+function byteToHex(d)
+{
+    var hex = d.toString(16);
+    hex = "00".substr(0, 2 - hex.length) + hex;
+    return hex;
+}
+
+function hsvToRgb(h, s, v) {
+    var r, g, b;
+
+    var i = Math.floor(h * 6);
+    var f = h * 6 - i;
+    var p = v * (1 - s);
+    var q = v * (1 - f * s);
+    var t = v * (1 - (1 - f) * s);
+
+    switch (i % 6) {
+        case 0: r = v, g = t, b = p; break;
+        case 1: r = q, g = v, b = p; break;
+        case 2: r = p, g = v, b = t; break;
+        case 3: r = p, g = q, b = v; break;
+        case 4: r = t, g = p, b = v; break;
+        case 5: r = v, g = p, b = q; break;
+    }
+
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+function sendFilterParam(filtParam, val)
+{
+    var xhr = new XMLHttpRequest();
+    var params = filtParam + '=' + encodeURIComponent(val);
+    xhr.open("POST", '/index.html', true);
+    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    xhr.onreadystatechange = function ()
+    {
+
+    };
+    xhr.send(params);
+}

Firmware/WEBFiles/filters.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <title>Глупая гирлянда - Фильтры</title>
+    <link href="elements.css" rel="stylesheet">
+    <style></style>
+</head>
+<body>
+    <form method="post">
+        <fieldset>
+            <input type="checkbox" class="checkbox" id="filt0" name='ws_filt_rbw_enbl' onclick="openFilterSettings(this)" />
+            <label for="filt0">Радуга</label>
+            <input type="checkbox" class="checkbox" id="filt1" name='ws_filt_const_enbl' onclick="openFilterSettings(this)" />
+            <label for="filt1">Оттенок</label>
+            <input type="checkbox" class="checkbox" id="filt2" name='ws_filt_fd_enbl' onclick="openFilterSettings(this)" />
+            <label for="filt2">Выцветание</label>
+            <input type="checkbox" class="checkbox" id="filt3" name='ws_filt_wave_enbl' onclick="openFilterSettings(this)" />
+            <label for="filt3">Волна</label>
+        </fieldset>
+
+        <div id="filt0" class="filtercontent">
+            <h4 align="center">Радуга</h4>
+            Разместить полную радугу на пикселях, ед. :<br>
+            <input type="range" class="range" step="1" min="10" name='ws_filt_rbw_huesteps' max="~ws_striplen~" onchange="sendFilterParam(this.name, this.value)" /><br>
+            Скорость смены оттенка:<br>
+            <input type="range" class="range" min="1" name='ws_filt_rbw_cyclesteps' max="10" onchange="sendFilterParam(this.name, this.value)" /><br>
+        </div>
+
+        <div id="filt1" class="filtercontent">
+            <h4 align="center">Оттенок</h4>
+            <canvas id="picker"></canvas><br>
+            <input id="color" value="#00ffdb">
+        </div>
+
+        <div id="filt2" class="filtercontent">
+            <h4 align="center">Выцветание</h4>
+            Скорость смены яркости:<br>
+            <input type="range" class="range" min="1" name='ws_filt_fd_cyclesteps' max="127" onchange="sendFilterParam(this.name, this.value)" /><br>
+            Минимальная яркость:<br>
+            <input type="range" class="range" min="0" name='ws_filt_fd_min' max="254" onchange="sendFilterParam(this.name, this.value)" /><br>
+            Максимальная яркость:<br>
+            <input type="range" class="range" min="1" name='ws_filt_fd_max' max="255" onchange="sendFilterParam(this.name, this.value)" /><br>
+            <!--
+            Шанс срабатывания:<br>
+            <input type="range" class="range" min="1" name='ws_filt_fd_chance' onchange="sendFilterParam(this.name, this.value)"/><br>
+            -->
+        </div>
+
+        <div id="filt3" class="filtercontent">
+            <h4 align="center">Волна</h4>
+            Скорость:<br>
+            <input type="range" class="range" min="1" name='ws_filt_wave_step' max="10" onchange="sendFilterParam(this.name, this.value)" /><br>
+            Длина волны :<br>
+            <input type="range" class="range" step="1" min="10" max="128" name='ws_filt_wave_wavesteps' max="~ws_striplen~" onchange="sendFilterParam(this.name, this.value)" /><br>
+        </div>
+    </form>
+
+    <script src="colorpicker.min.js"></script>
+    <script src="elements.js"></script>
+    <script type="text/javascript">
+        /* https://github.com/NC22/HTML5-Color-Picker/wiki/Документация */
+        var colorPickerT = new KellyColorPicker(
+        {
+            place: 'picker',
+            input: 'color',
+            size: 300,
+        });
+
+        var onchange = function (self) {
+            var hsv = colorPickerT.getCurColorHsv();
+            sendHSV(hsv);
+        };
+        //colorPickerT.addUserEvent("change", onchange);
+        colorPickerT.addUserEvent("mouseuph", onchange);
+        colorPickerT.addUserEvent("mouseupsv", onchange);
+
+        var cfg_hsv =
+        {
+            ws_filt_const_hue: "~ws_filt_const_hue~",
+            ws_filt_const_sat: "~ws_filt_const_sat~",
+            ws_filt_const_value: "~ws_filt_const_value~"
+        }
+        loadHSV(colorPickerT, cfg_hsv);
+
+        var cfg_f1 =
+        {
+            ws_filt_rbw_enbl: "~ws_filt_rbw_enbl~",
+            ws_filt_rbw_huesteps: "~ws_filt_rbw_huesteps~",
+            ws_filt_rbw_cyclesteps: "~ws_filt_rbw_cyclesteps~",
+
+            ws_filt_fd_enbl: "~ws_filt_fd_enbl~",
+            ws_filt_fd_cyclesteps: "~ws_filt_fd_cyclesteps~",
+            ws_filt_fd_min: "~ws_filt_fd_min~",
+            ws_filt_fd_max: "~ws_filt_fd_max~",
+            //ws_filt_fd_chance: "~ws_filt_fd_chance~",
+
+            ws_filt_wave_enbl: "~ws_filt_wave_enbl~",
+            ws_filt_wave_step: "~ws_filt_wave_step~",
+            ws_filt_wave_wavesteps: "~ws_filt_wave_wavesteps~",
+
+            ws_filt_const_enbl: "~ws_filt_const_enbl~",
+        }
+        setFormValues(document.forms[0], cfg_f1);
+
+
+    </script>
+</body>
+</html> 

Firmware/WEBFiles/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <title>Глупая гирлянда</title>
+    <link href="elements.css" rel="stylesheet">
+    <style>	</style>
+</head>
+<body>
+
+	<div class="hblockcont"> 
+		<input type="image" src="off.gif" class='off' id="ws_isenable" onclick="changeOnOff(this)" />	
+	</div>
+	
+	<div class="tab" align="center">       
+        <button class="tablinks" onclick="page_select(event, 0)">Режим работы</button>
+        <button class="tablinks" onclick="page_select(event, 1)">Настройки Wi-Fi</button>
+    </div>
+	
+    <div style="width:100%;">
+        <iframe id="child_page" frameborder="0" scrolling="auto" ></iframe>
+    </div>
+
+	<script src="elements.js"></script>
+	<script type="text/javascript">
+        function page_select(evt, tabID)
+        {
+            // Выделяем выбранную кнопку
+            tablinks = document.getElementsByClassName("tablinks");
+            for (i = 0; i < tablinks.length; i++) {
+                tablinks[i].className = tablinks[i].className.replace(" active", "");
+            }
+            evt.currentTarget.className += " active";
+
+            // Показываем выбранный контент
+            if (tabID == '0') document.getElementById("child_page").src = "filters.html";
+            else if (tabID == '1') document.getElementById("child_page").src = "settings.html";
+        }
+
+        function isenable_select(elem, val) {    
+            if (val.ws_isenable == '0') {
+                elem.src = 'off.gif';
+                elem.className = 'off';
+            }
+            else {
+                elem.src = 'on.gif';
+                elem.className = 'on';
+            }
+        }
+
+        var cfg_f0 =
+        {
+            ws_isenable: "~ws_isenable~",
+        }
+        isenable_select(document.getElementById("ws_isenable"), cfg_f0);
+	</script>
+</body>
+</html> 

Firmware/WEBFiles/multirange.css

@@ -0,0 +1,45 @@
+@supports (--css: variables) {
+	input[type="range"].multirange {
+		padding: 0;
+		margin: 0;
+		display: inline-block;
+		vertical-align: top;
+	}
+
+	input[type="range"].multirange.original {
+		position: absolute;
+	}
+
+		input[type="range"].multirange.original::-webkit-slider-thumb {
+			position: relative;
+			z-index: 2;
+		}
+
+		input[type="range"].multirange.original::-moz-range-thumb {
+			transform: scale(1); /* FF doesn't apply position it seems */
+			z-index: 1;
+		}
+
+		input[type="range"].multirange::-moz-range-track {
+			border-color: transparent; /* needed to switch FF to "styleable" control */
+		}
+
+	input[type="range"].multirange.ghost {
+		position: relative;
+		background: var(--track-background);
+		--track-background: linear-gradient(to right,
+				transparent var(--low), var(--range-color) 0,
+				var(--range-color) var(--high), transparent 0
+			) no-repeat 0 45% / 100% 40%;
+		--range-color: hsl(190, 80%, 40%);
+	}
+
+		input[type="range"].multirange.ghost::-webkit-slider-runnable-track {
+			background: var(--track-background);
+		}
+
+		input[type="range"].multirange.ghost::-moz-range-track {
+			background: var(--track-background);
+		}
+
+}

Firmware/WEBFiles/multirange.js

@@ -0,0 +1,86 @@
+(function() {
+"use strict";
+
+var supportsMultiple = self.HTMLInputElement && "valueLow" in HTMLInputElement.prototype;
+
+var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
+
+self.multirange = function(input) {
+	if (supportsMultiple || input.classList.contains("multirange")) {
+		return;
+	}
+
+	var value = input.getAttribute("value");
+	var values = value === null ? [] : value.split(",");
+	var min = +(input.min || 0);
+	var max = +(input.max || 100);
+	var ghost = input.cloneNode();
+
+	input.classList.add("multirange", "original");
+	ghost.classList.add("multirange", "ghost");
+
+	input.value = values[0] || min + (max - min) / 2;
+	ghost.value = values[1] || min + (max - min) / 2;
+
+	input.parentNode.insertBefore(ghost, input.nextSibling);
+
+	Object.defineProperty(input, "originalValue", descriptor.get ? descriptor : {
+		// Fuck you Safari >:(
+		get: function() { return this.value; },
+		set: function(v) { this.value = v; }
+	});
+
+	Object.defineProperties(input, {
+		valueLow: {
+			get: function() { return Math.min(this.originalValue, ghost.value); },
+			set: function(v) { this.originalValue = v; },
+			enumerable: true
+		},
+		valueHigh: {
+			get: function() { return Math.max(this.originalValue, ghost.value); },
+			set: function(v) { ghost.value = v; },
+			enumerable: true
+		}
+	});
+
+	if (descriptor.get) {
+		// Again, fuck you Safari
+		Object.defineProperty(input, "value", {
+			get: function() { return this.valueLow + "," + this.valueHigh; },
+			set: function(v) {
+				var values = v.split(",");
+				this.valueLow = values[0];
+				this.valueHigh = values[1];
+				update();
+			},
+			enumerable: true
+		});
+	}
+
+	if (typeof input.oninput === "function") {
+		ghost.oninput = input.oninput.bind(input);
+	}
+
+	function update() {
+		ghost.style.setProperty("--low", 100 * ((input.valueLow - min) / (max - min)) + 1 + "%");
+		ghost.style.setProperty("--high", 100 * ((input.valueHigh - min) / (max - min)) - 1 + "%");
+	}
+
+	input.addEventListener("input", update);
+	ghost.addEventListener("input", update);
+
+	update();
+}
+
+multirange.init = function() {
+	[].slice.call(document.querySelectorAll("input[type=range][multiple]:not(.multirange)")).forEach(multirange);
+}
+
+if (document.readyState == "loading") {
+	document.addEventListener("DOMContentLoaded", multirange.init);
+}
+else {
+	multirange.init();
+}
+
+})();

Firmware/WEBFiles/multirange.min.js

@@ -0,0 +1 @@
+!function(){"use strict";var e=self.HTMLInputElement&&"valueLow"in HTMLInputElement.prototype,t=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");self.multirange=function(n){function i(){o.style.setProperty("--low",100*((n.valueLow-a)/(r-a))+1+"%"),o.style.setProperty("--high",100*((n.valueHigh-a)/(r-a))-1+"%")}if(!e&&!n.classList.contains("multirange")){var u=n.getAttribute("value"),l=null===u?[]:u.split(","),a=+(n.min||0),r=+(n.max||100),o=n.cloneNode();n.classList.add("multirange","original"),o.classList.add("multirange","ghost"),n.value=l[0]||a+(r-a)/2,o.value=l[1]||a+(r-a)/2,n.parentNode.insertBefore(o,n.nextSibling),Object.defineProperty(n,"originalValue",t.get?t:{get:function(){return this.value},set:function(e){this.value=e}}),Object.defineProperties(n,{valueLow:{get:function(){return Math.min(this.originalValue,o.value)},set:function(e){this.originalValue=e},enumerable:!0},valueHigh:{get:function(){return Math.max(this.originalValue,o.value)},set:function(e){o.value=e},enumerable:!0}}),t.get&&Object.defineProperty(n,"value",{get:function(){return this.valueLow+","+this.valueHigh},set:function(e){var t=e.split(",");this.valueLow=t[0],this.valueHigh=t[1],i()},enumerable:!0}),"function"==typeof n.oninput&&(o.oninput=n.oninput.bind(n)),n.addEventListener("input",i),o.addEventListener("input",i),i()}},multirange.init=function(){[].slice.call(document.querySelectorAll("input[type=range][multiple]:not(.multirange)")).forEach(multirange)},"loading"==document.readyState?document.addEventListener("DOMContentLoaded",multirange.init):multirange.init()}();

Firmware/WEBFiles/settings.html

@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <title>Глупая гирлянда - Настройки</title>
+    <link href="elements.css" rel="stylesheet">
+    <style></style>
+</head>
+<body>
+    <form method="post">
+        <table>
+            <tr>
+                <td class="td1st"><b>Настройки пользовательской кнопки:</b></td>
+            </tr>
+            <tr>
+                <td class="td1st">Кратковременное нажатие</td>
+                    <td>
+                        <select class="select" name='button_shortmode'>
+                            <option value='0'>Отключено</option>
+                        </select>
+                    </td>
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st">Долговременное нажатие</td>
+                    <td>
+                        <select class="select" name='button_longmode'>
+                            <option value='0'>Отключено</option>
+                        </select>
+                    </td>
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st"><b>Настройки светодиодов:</b></td>
+            </tr>
+            <tr>
+                <td class="td1st">Светодиод нотификации (зел.)</td>
+                    <td>
+                        <select class="select" name='button_longmode'>
+                            <option value='0'>Отключен</option>
+                        </select>
+                    </td>
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st">Светодиод ошибки (кр.)</td>
+                    <td>
+                        <select class="select" name='button_longmode'>
+                            <option value='0'>Отключен</option>
+                        </select>
+                    </td>
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st"><b>Общие настройки Wi-Fi:</b></td>
+            </tr>
+            <tr>
+                <td class="td1st">Режим Wi-Fi</td>
+                <td>
+                    <select class="select" name='wifi_mode'>
+                        <option value='1'>Клиент</option>
+                        <option value='2'>Точка доступа</option>
+                        <option value='3'>Клиент + Точка доступа</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st">IEEE PHY</td>
+                <td>
+                    <select class="select" name='wifi_bgn'>
+                        <option value='1'>802.11b</option>
+                        <option value='3'>802.11g</option>
+                        <option value='11'>802.11n</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st">Мощность передачи</td>
+                <td>
+                    <select class="select" name='wifi_txpow'>
+                        <option value='0'>100%</option>
+                        <option value='1'>75%</option>
+                        <option value='2'>50%</option>
+                        <option value='3'>25%</option>
+                        <option value='4'>12.5%</option>
+                    </select>
+                </td>
+            </tr>
+
+            <tr>
+                <td class="td1st"><b>Настройки клиента:</b></td>
+            </tr>
+            <tr>
+                <td class="td1st">SSID</td>
+                <td>
+                    <input name="wifi_st_ssid" class="inputtext" maxlength='31' value='~wifi_st_ssid~' />
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st">Пароль</td>
+                <td>
+                    <input name="wifi_st_psw" class="inputtext" maxlength='63' value='~wifi_st_psw~' />
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st">Аутентификация</td>
+                <td>
+                    <select class="select" name='wifi_st_auth'>
+                        <option value='0'>Open</option>
+                        <option value='1'>WEP PSK</option>
+                        <option value='2'>WEP Shared</option>
+                        <option value='3'>WPA TKIP</option>
+                        <option value='4'>WPA AES</option>
+                        <option value='5'>WPA2 TKIP</option>
+                        <option value='6'>WPA2 AES</option>
+                        <option value='7'>WPA2 Mixed</option>
+                        <option value='8'>WPA2/WPA AES</option>
+                        <option value='9'>Unknown</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st">IP</td>
+                <td>
+                    <input name="wifi_st_ip" class="inputtext" maxlength='31' value='~wifi_st_ip~' />
+                </td>
+            </tr>
+
+            <tr>
+                <td class="td1st"><b>Настройки точки доступа:</b></td>
+            </tr>
+            <tr>
+                <td class="td1st">SSID</td>
+                <td>
+                    <input name="wifi_ap_ssid" class="inputtext" maxlength='31' value='~wifi_ap_ssid~' />
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st">Пароль</td>
+                <td>
+                    <input name="wifi_ap_psw" class="inputtext" maxlength='63' value='~wifi_ap_psw~' />
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st">Аутентификация</td>
+                <td>
+                    <select class="select" name='wifi_ap_auth'>
+                        <option value='0'>Open</option>
+                        <option value='1'>WPA\WPA2\PSK</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td class="td1st">IP</td>
+                <td>
+                    <input name="wifi_ap_ip" class="inputtext" maxlength='31' value='~wifi_ap_ip~' />
+                </td>
+            </tr>
+
+            <tr>
+                <td></td>
+                <td>
+                    <input type='hidden' name='wifi_newcfg' value='0xffff' />
+                    <button class="button">Применить...</button>
+                </td>
+            </tr>
+        </table>
+    </form>
+
+    <script src="colorpicker.min.js"></script>
+    <script src="elements.js"></script>
+	<script type="text/javascript">
+        var cfg_wifi =
+        {
+            wifi_mode: "~wifi_mode~",
+            wifi_bgn: "~wifi_bgn~",
+            wifi_txpow: "~wifi_txpow~",
+            wifi_st_ssid: "~wifi_st_ssid~",
+            wifi_st_psw: "~wifi_st_psw~",
+            wifi_st_auth: "~wifi_st_auth~",
+            wifi_st_ip: "~wifi_st_ip~",
+            wifi_ap_ssid: "~wifi_ap_ssid~",
+            wifi_ap_psw: "~wifi_ap_psw~",
+            wifi_ap_auth: "~wifi_ap_auth~",
+            wifi_ap_ip: "~wifi_ap_ip~"
+        }
+        setFormValues(document.forms[0], cfg_wifi);
+    </script>
+</body>
+</html>