ESPUI/src/uploadDataControls.h

const char JS_CONTROLS[] PROGMEM = R"=====(
function colorClass(e){switch(e=Number(e)){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:default:return""}}function start(){websock=new WebSocket("ws://"+window.location.hostname+"/ws"),websock.onopen=function(e){console.log("websock open"),$("#conStatus").addClass("color-green"),$("#conStatus").text("Connected")},websock.onclose=function(e){console.log("websock close"),$("#conStatus").removeClass("color-green"),$("#conStatus").addClass("color-red"),$("#conStatus").text("Error / No Connection")},websock.onerror=function(e){console.log(e),$("#conStatus").removeClass("color-green"),$("#conStatus").addClass("color-red"),$("#conStatus").text("Error / No Connection")},websock.onmessage=function(e){console.log(e);var c=JSON.parse(e.data),o=(document.body,"");switch(c.type){case UI_TITEL:document.title=c.label,$("#mainHeader").html(c.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+colorClass(c.color)+"'><h5 id='"+c.id+"'>"+c.label+"</h5><hr /><span id='l"+c.id+"' class='label'>"+c.value+"</span></div>");break;case UI_BUTTON:$("#row").append("<div class='one columns card tcenter "+colorClass(c.color)+"'><h5>"+c.label+"</h5><hr/><button onmousedown='buttonclick("+c.id+", true)' onmouseup='buttonclick("+c.id+", false)' id='"+c.id+"'>"+c.value+"</button></div>"),$("#"+c.id).on({touchstart:function(e){e.preventDefault(),buttonclick(c.id,!0)}}),$("#"+c.id).on({touchend:function(e){e.preventDefault(),buttonclick(c.id,!1)}});break;case UI_SWITCHER:var s="<label id='sl"+c.id+"' class='switch checked'>",n="<div class='in'><input type='checkbox' id='s"+c.id+"' onClick='switcher("+c.id+",null)' checked></div>";"0"==c.value&&(s="<label id='sl"+c.id+"' class='switch'>",n="<div class='in'><input type='checkbox' id='s"+c.id+"' onClick='switcher("+c.id+",null)' ></div>"),$("#row").append("<div id='"+c.id+"' class='one columns card tcenter "+colorClass(c.color)+"'><h5>"+c.label+"</h5><hr/>"+s+n+"</label></div>");break;case UI_CPAD:o="<a class='confirm' onmousedown='padclick(CENTER, "+c.id+", true)' onmouseup='padclick(CENTER, "+c.id+", false)' href='#' id='pc"+c.id+"'>OK</a>";case UI_PAD:$("#row").append("<div class='two columns card tcenter "+colorClass(c.color)+"'><h5>"+c.label+"</h5><hr/><nav class='control'><ul><li><a onmousedown='padclick(FOR, "+c.id+", true)' onmouseup='padclick(FOR, "+c.id+", false)' href='#' id='pf"+c.id+"'>▲</a></li><li><a onmousedown='padclick(RIGHT, "+c.id+", true)' onmouseup='padclick(RIGHT, "+c.id+", false)' href='#' id='pr"+c.id+"'>▲</a></li><li><a onmousedown='padclick(LEFT, "+c.id+", true)' onmouseup='padclick(LEFT, "+c.id+", false)' href='#' id='pl"+c.id+"'>▲</a></li><li><a onmousedown='padclick(BACK, "+c.id+", true)' onmouseup='padclick(BACK, "+c.id+", false)' href='#' id='pb"+c.id+"'>▲</a></li></ul>"+o+"</nav></div>"),$("#pf"+c.id).on({touchstart:function(e){e.preventDefault(),padclick(FOR,c.id,!0)}}),$("#pf"+c.id).on({touchend:function(e){e.preventDefault(),padclick(FOR,c.id,!1)}}),$("#pl"+c.id).on({touchstart:function(e){e.preventDefault(),padclick(LEFT,c.id,!0)}}),$("#pl"+c.id).on({touchend:function(e){e.preventDefault(),padclick(LEFT,c.id,!1)}}),$("#pr"+c.id).on({touchstart:function(e){e.preventDefault(),padclick(RIGHT,c.id,!0)}}),$("#pr"+c.id).on({touchend:function(e){e.preventDefault(),padclick(RIGHT,c.id,!1)}}),$("#pb"+c.id).on({touchstart:function(e){e.preventDefault(),padclick(BACK,c.id,!0)}}),$("#pb"+c.id).on({touchend:function(e){e.preventDefault(),padclick(BACK,c.id,!1)}}),$("#pc"+c.id).on({touchstart:function(e){e.preventDefault(),padclick(CENTER,c.id,!0)}}),$("#pc"+c.id).on({touchend:function(e){e.preventDefault(),padclick(CENTER,c.id,!1)}});break;case UPDATE_LABEL:$("#l"+c.id).html(c.value);break;case UPDATE_SWITCHER:"0"==c.value?switcher(c.id,0):switcher(c.id,1);break;case UI_SLIDER:$("#row").append("<div class='two columns card tcenter card-slider "+
)=====";