Cleaning up prepareFileSystem, changing button style

Alfiszcze · May 26, 2018 · 3533620 · 3533620
1 parent d964815
commit 3533620
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -51,7 +51,7 @@ Download the [Repository](https://github.com/s00500/ESPUI/archive/master.zip), G
 ESPUI **NEEDS** its files burnt on the SPIFFS filesystem on the ESP. **Without this ESPUI will NOT work at all**
 There are now two ways to do this: you can either use the upload tool or you use the library function `ESPUI.prepareFileSystem()`
 
-#### Simple filesystem preparation (recomended, but currently not working well on esp32, see issues)
+#### Simple filesystem preparation (recomended)
 
 Just open the example sketch **prepareFileSystem** and run it on the ESP, (give it 5 - 10 seconds),
 The library will create all needed files.
@@ -80,14 +80,17 @@ Now you are set to go and use any code you want to with this library
 
 - ~~Setup SPIFFS using values in program memory~~
 - ~~ESP8266 support~~
+- ~~PlattformIO Integration~~
+- Datagraph output -> *WIP*
+- Number input -> *WIP*
+- GZip Files to improve loadspeed and reduce server load
 - Document slider
 - New images in docu
 - proper return value (as int and not as string) for slider
 - Maybe a slider range setting, meanwhile please use map()
 - Improve slider stability
 - Improve general stability
 - Multiline Labels
-- PlattformIO Integration
 
 ## Documentation
 

diff --git a/examples/gui/data/css/style.css b/examples/gui/data/css/style.css
@@ -322,6 +322,7 @@
     padding: 10px;
     border-radius: 3px;
     color: #fff;
+    background-color: #999999;
   }
 
   /* Main Head Part

diff --git a/examples/gui/data/css/style.min.css b/examples/gui/data/css/style.min.css
diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp
@@ -85,7 +85,7 @@ void ESPUIClass::list() {
 }
 
 void deleteFile(const char *path) {
-  Serial.print(SPIFFS.exists(path));
+  if (debug) Serial.print(SPIFFS.exists(path));
   if (!SPIFFS.exists(path)) {
     Serial.printf("File: %s does not exist, not deleting\n", path);
     return;
@@ -145,18 +145,14 @@ void ESPUIClass::prepareFileSystem() {
   Serial.println("SPIFFS Mount ESP8266 Done");
 #endif
 
-  // TODO: This is a workaround, have to find out why SPIFFS on ESP32 behaves
-  // incredibly strangely, see issue #6
-  /*
-     deleteFile("/index.htm");
+  deleteFile("/index.htm");
 
-     deleteFile("/css/style.css");
-     deleteFile("/css/normalize.css");
+  deleteFile("/css/style.css");
+  deleteFile("/css/normalize.css");
 
-     deleteFile("/js/zepto.min.js");
-     deleteFile("/js/controls.js");
-     deleteFile("/js/slider.js");
-   */
+  deleteFile("/js/zepto.min.js");
+  deleteFile("/js/controls.js");
+  deleteFile("/js/slider.js");
 
   Serial.println("Cleanup done");
 
@@ -173,7 +169,7 @@ void ESPUIClass::prepareFileSystem() {
   Serial.println("Done Initializing filesystem :-)");
 
 #if defined(ESP32)
-  listDir("/", 1);
+  if(debug) listDir("/", 1);
 #endif
 
   SPIFFS.end();

diff --git a/src/uploadDataControls.h b/src/uploadDataControls.h
@@ -1,3 +1,3 @@
 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)}}}};
+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 "+colorClass(c.color)+"'><h5 id='"+c.id+"'>"+c.label+"</h5><hr /><div id='sl"+c.id+"' class='rkmd-slider slider-discrete slider-"+colorClass(c.color)+"'><input type='range' min='0' max='100' value='"+c.value+"'></div></div>"),$("#row").append("<script>rkmd_rangeSlider('#sl"+c.id+"');<\/script>");break;case UPDATE_SLIDER:slider_move($("#sl"+c.id),c.value,"100",!1);break;default:console.error("Unknown type or event")}}}function buttonclick(e,c){c?websock.send("bdown:"+e):websock.send("bup:"+e)}function padclick(e,c,o){switch(e){case CENTER:o?websock.send("pcdown:"+c):websock.send("pcup:"+c);break;case FOR:o?websock.send("pfdown:"+c):websock.send("pfup:"+c);break;case BACK:o?websock.send("pbdown:"+c):websock.send("pbup:"+c);break;case LEFT:o?websock.send("pldown:"+c):websock.send("plup:"+c);break;case RIGHT:o?websock.send("prdown:"+c):websock.send("prup:"+c)}}function switcher(e,c){null==c?$("#s"+e).is(":checked")?(websock.send("sactive:"+e),$("#sl"+e).addClass("checked")):(websock.send("sinactive:"+e),$("#sl"+e).removeClass("checked")):1==c?($("#sl"+e).addClass("checked"),$("#sl"+e).prop("checked",!0)):0==c&&($("#sl"+e).removeClass("checked"),$("#sl"+e).prop("checked",!1))}const UI_TITEL=0,UI_LABEL=1,UI_BUTTON=2,UI_SWITCHER=3,UI_PAD=4,UI_CPAD=5,UPDATE_LABEL=6,UPDATE_SWITCHER=7,UI_SLIDER=8,UPDATE_SLIDER=9,FOR=0,BACK=1,LEFT=2,RIGHT=3,CENTER=4,C_TURQUOISE=0,C_EMERALD=1,C_PETERRIVER=2,C_WETASPHALT=3,C_SUNFLOWER=4,C_CARROT=5,C_ALIZARIN=6,C_NONE=7;var websock;
 )=====";