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 "+
)=====";

const uint8_t JS_CONTROLS_GZIP[1568] PROGMEM = { 31,139,8,0,0,0,0,0,0,3,205,88,235,110,226,70,20,254,223,167,112,103,171,197,22,94,46,109,183,219,2,78,68,8,219,208,165,144,2,105,164,170,82,52,216,67,176,98,102,220,153,49,236,54,202,107,244,65,250,72,125,146,158,25,95,48,216,100,201,166,43,245,79,2,246,57,223,249,230,220,56,115,22,17,117,165,207,168,225,178,128,241,94,128,133,48,137,117,47,54,190,116,151,38,113,70,209,106,78,56,60,178,238,93,44,136,209,187,153,93,77,126,185,26,15,166,253,22,39,50,226,20,193,159,63,34,230,11,130,218,137,72,255,231,254,164,59,60,79,5,200,138,112,28,120,217,235,203,254,172,63,153,12,126,237,79,82,137,144,72,194,185,191,38,60,19,186,238,207,186,211,203,139,238,112,150,10,109,136,196,34,92,226,64,102,66,211,171,209,219,225,248,122,11,36,34,186,8,216,38,135,211,235,78,38,227,12,195,197,156,179,173,126,119,56,248,173,59,25,140,210,215,56,240,255,196,220,167,153,192,104,60,234,183,60,178,192,81,32,83,33,244,240,176,72,189,38,36,230,210,180,238,55,100,46,152,123,231,80,178,49,174,201,124,10,159,137,52,209,70,180,234,117,84,221,248,212,99,155,90,192,92,172,180,106,75,38,36,197,43,82,69,245,141,64,150,157,104,215,24,101,33,161,78,138,174,2,225,50,42,88,64,64,247,22,224,98,57,67,73,129,218,87,38,122,1,239,167,18,203,8,96,106,216,243,226,0,34,29,204,87,183,156,148,202,73,242,30,184,245,24,165,196,149,196,67,214,67,142,129,27,48,65,62,78,65,139,149,96,115,178,98,107,114,20,141,125,186,92,81,57,64,182,15,97,227,70,221,24,49,35,225,13,228,118,137,19,37,114,144,56,249,63,81,93,17,33,240,237,97,47,19,171,189,198,220,112,157,159,166,227,81,45,196,92,16,147,212,60,44,177,101,51,199,244,152,27,173,8,149,181,57,243,62,216,8,89,237,164,92,221,154,252,16,146,164,82,175,6,55,179,193,172,63,108,101,226,210,151,1,113,220,90,128,231,36,208,236,87,216,167,23,4,123,80,47,86,109,41,87,129,153,188,181,218,115,78,240,93,59,69,26,118,207,0,73,169,112,182,81,14,9,33,5,61,19,117,60,127,13,185,0,174,113,42,114,195,84,23,137,86,84,24,80,103,158,33,93,176,74,184,129,170,185,230,226,214,244,23,171,138,42,39,157,229,107,195,247,156,10,8,212,124,79,61,81,159,52,129,42,234,212,151,175,65,2,92,121,210,17,33,166,90,50,200,68,83,171,90,58,86,92,227,32,34,74,81,137,159,116,234,192,237,4,237,159,228,236,106,54,27,143,62,114,20,200,166,167,31,165,140,60,112,159,71,82,66,167,128,168,179,72,16,232,3,212,169,196,207,220,192,119,239,204,244,68,182,33,121,68,172,74,42,25,133,135,228,22,56,16,74,176,232,186,204,3,177,98,230,3,29,236,88,212,130,252,51,239,37,139,220,165,110,94,173,124,18,146,90,200,201,26,142,122,30,183,60,211,178,243,20,148,190,253,101,195,122,120,56,128,8,142,124,58,94,83,225,237,69,105,122,61,152,245,46,160,175,171,58,16,14,234,104,191,234,19,139,98,14,196,233,111,128,125,104,187,30,184,194,166,206,78,60,125,10,17,242,105,24,73,67,85,136,83,209,162,115,246,62,118,162,216,34,50,218,83,212,82,76,248,233,203,252,78,163,32,0,175,39,86,82,223,182,81,3,57,78,226,250,151,47,205,35,201,126,102,146,187,145,47,73,244,157,220,249,12,105,143,170,162,74,213,3,253,230,80,49,246,46,187,231,45,6,110,192,41,5,104,131,11,159,175,42,187,245,18,98,47,206,152,94,127,4,179,131,109,60,86,52,143,8,167,149,179,228,100,225,84,94,196,142,13,221,109,17,141,223,117,234,248,4,101,4,21,191,207,208,245,14,180,10,138,215,57,63,72,206,160,177,117,34,240,94,224,159,128,139,202,93,242,118,124,172,63,246,36,203,157,177,216,58,227,159,191,254,86,222,128,24,250,143,83,152,12,126,188,152,29,73,162,32,91,78,131,127,2,141,97,255,237,177,44,246,69,203,73,4,159,64,226,172,219,123,119,36,137,125,209,114,18,243,3,36,234,144,24,168,202,84,2,65,222,236,22,124,26,197,167,54,251,157,84,217,239,246,37,160,71,244,251,18,200,230,22,50,120,38,79,29,199,2,209,34,234,83,136,230,48,115,76,249,51,153,198,121,95,160,90,132,125,10,213,60,104,142,235,252,153,92,117,98,22,168,22,81,159,66,53,135,153,99,234,62,147,105,210,226,11,92,139,184,79,225,186,131,90,28,79,46,207,187,179,126,110,36,206,210,45,153,160,245,40,80,166,146,77,53,249,153,225,52,251,17,215,246,26,86,107,247,65,179,48,27,13,7,231,128,241,137,63,75,234,203,43,17,248,222,127,50,152,167,163,68,201,156,195,239,86,153,161,2