const char JS_CONTROLS[] PROGMEM = R"=====(
const UI_TITEL=0;const UI_LABEL=1;const UI_BUTTON=2;const UI_SWITCHER=3;const UI_PAD=4;const UI_CPAD=5;const UPDATE_LABEL=6;const UPDATE_SWITCHER=7;const UI_SLIDER=8;const UPDATE_SLIDER=9;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;function colorClass(a){a=Number(a);switch(a){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;default:return""}}var websock;function start(){websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(a){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected")};websock.onclose=function(a){console.log("websock close");$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").text("Error / No Connection")};websock.onerror=function(a){console.log(a);$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").text("Error / No Connection")};websock.onmessage=function(b){console.log(b);var f=JSON.parse(b.data);var g=document.body;var a="";switch(f.type){case UI_TITEL:document.title=f.label;$("#mainHeader").html(f.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+colorClass(f.color)+"'><h5 id='"+f.id+"'>"+f.label+"</h5><hr /><span id='l"+f.id+"' class='label'>"+f.value+"</span></div>");break;case UI_BUTTON:$("#row").append("<div class='one columns card tcenter "+colorClass(f.color)+"'><h5>"+f.label+"</h5><hr/><button onmousedown='buttonclick("+f.id+", true)' onmouseup='buttonclick("+f.id+", false)' id='"+f.id+"'>"+f.value+"</button></div>");$("#"+f.id).on({touchstart:function(h){h.preventDefault();buttonclick(f.id,true)}});$("#"+f.id).on({touchend:function(h){h.preventDefault();buttonclick(f.id,false)}});break;case UI_SWITCHER:var d="<label id='sl"+f.id+"' class='switch checked'>";var c="<input type='checkbox' id='s"+f.id+"' onClick='switcher("+f.id+",null)' checked>";if(f.value=="0"){d="<label id='sl"+f.id+"' class='switch'>";c="<input type='checkbox' id='s"+f.id+"' onClick='switcher("+f.id+",null)' >"}$("#row").append("<div id='"+f.id+"' class='one columns card tcenter "+colorClass(f.color)+"'><h5>"+f.label+"</h5><hr/>"+d+"<i class='icon-ok'></i><i class='icon-remove'></i>"+c+"</label></div>");break;case UI_CPAD:a="<a class='confirm' onmousedown='padclick(CENTER, "+f.id+", true)' onmouseup='padclick(CENTER, "+f.id+", false)' href='#' id='pc"+f.id+"'>OK</a>";case UI_PAD:$("#row").append("<div class='two columns card tcenter "+colorClass(f.color)+"'><h5>"+f.label+"</h5><hr/><nav class='control'><ul><li><a onmousedown='padclick(FOR, "+f.id+", true)' onmouseup='padclick(FOR, "+f.id+", false)' href='#' id='pf"+f.id+"'>▲</a></li><li><a onmousedown='padclick(RIGHT, "+f.id+", true)' onmouseup='padclick(RIGHT, "+f.id+", false)' href='#' id='pr"+f.id+"'>▲</a></li><li><a onmousedown='padclick(LEFT, "+f.id+", true)' onmouseup='padclick(LEFT, "+f.id+", false)' href='#' id='pl"+f.id+"'>▲</a></li><li><a onmousedown='padclick(BACK, "+f.id+", true)' onmouseup='padclick(BACK, "+f.id+", false)' href='#' id='pb"+f.id+"'>▲</a></li></ul>"+a+"</nav></div>");$("#pf"+f.id).on({touchstart:function(h){h.preventDefault();padclick(FOR,f.id,true)}});$("#pf"+f.id).on({touchend:function(h){h.preventDefault();padclick(FOR,f.id,false)}});$("#pl"+f.id).on({touchstart:function(h){h.preventDefault();padclick(LEFT,f.id,true)}});$("#pl"+f.id).on({touchend:function(h){h.preventDefault();padclick(LEFT,f.id,false)}});$("#pr"+f.id).on({touchstart:function(h){h.preventDefault();padclick(RIGHT,f.id,true)}});$("#pr"+f.id).on({touchend:function(h){h.preventDefault();padclick(RIGHT,f.id,false)}});$("#pb"+f.id).on({touchstart:function(h){h.preventDefault();padclick(BACK,f.id,true)}});$("#pb"+f.id).on({touchend:function(h){h.preventDefault();padclick(BACK,f.id,false)}});$("#pc"+f.id).on({touchstart:function(h){h.preventDefault();padclick(CENTER,f.id,true)}});$("#pc"+f.id).on({touchend:function(h){h.preventDefault();padclick(CENTER,f.id,false)}});break;case UPDATE_LABEL:$("#l"+f.id).html(f.value);break;case UPDATE_SWITCHER:if(f.value=="0"){switcher(f.id,0)}else{switcher(f.id,1)}break;case UI_SLIDER:$("#row").append("<div class='two columns card tcenter card-slider "+colorClass(f.color)+"'><h5 id='"+f.id+"'>"+f.label+"</h5><hr /><div id='sl"+f.id+"' class='rkmd-slider slider-discrete slider-"+colorClass(f.color)+"'><input type='range' min='0' max='100' value='"+f.value+"'></div></div>");$("#row").append("<script>rkmd_rangeSlider('#sl"+f.id+"');<\/script>");break;case UPDATE_SLIDER:slider_move($("#sl"+f.id),f.value,"100",false);break;default:console.error("Unknown type or event");break}}}function buttonclick(b,a){if(a){websock.send("bdown:"+b)}else{websock.send("bup:"+b)}}function padclick(b,c,a){switch(b){case CENTER:if(a){websock.send("pcdown:"+c)}else{websock.send("pcup:"+c)}break;case FOR:if(a){websock.send("pfdown:"+c)}else{websock.send("pfup:"+c)}break;case BACK:if(a){websock.send("pbdown:"+c)}else{websock.send("pbup:"+c)}break;case LEFT:if(a){websock.send("pldown:"+c)}else{websock.send("plup:"+c)}break;case RIGHT:if(a){websock.send("prdown:"+c)}else{websock.send("prup:"+c)}break}}function switcher(a,b){if(b==null){if($("#s"+a).is(":checked")){websock.send("sactive:"+a);$("#sl"+a).addClass("checked")}else{websock.send("sinactive:"+a);$("#sl"+a).removeClass("checked")}}else{if(b==1){$("#sl"+a).addClass("checked");$("#sl"+a).prop("checked",true)}else{if(b==0){$("#sl"+a).removeClass("checked");$("#sl"+a).prop("checked",false)}}}};
)=====";