File system upload highly simplified and documented

README.md

@@ -44,10 +44,21 @@ Download the [Repository](https://github.com/s00500/ESPUI/archive/master.zip), G
 ## Getting started (Filesystem upload)
 
 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)
+
+Just open the example sketch **prepareFileSystem** and run it on the ESP, (give it 5 - 10 seconds),
+The library will create all needed files.
+Congratulations, you are done, from now on you just need to to this again when there is a library update, or when you want to use another chip :-)
+Now you can upload your normal sketch, when you do not call the `ESPUI.prepareFileSystem()` function the compiler will strip out all the unnecessary that is already saved in the chip's filesystem and you have more programm memory to work with.
+
+
+#### Manual way (mainly for development)
 
 To do this download and install me-no-devs wonderful [ESP32 sketch data uploader](https://github.com/me-no-dev/arduino-esp32fs-plugin)
 
-Then open the example sketch and select "ESP32 Upload Sketch Data" from the Tools menu.
+Then open the **gui** example sketch and select "ESP32 Upload Sketch Data" from the Tools menu.
 Now you are set to go and use any code you want to with this library
 
 ## User interface Elements
@@ -63,7 +74,10 @@ Now you are set to go and use any code you want to with this library
 ## Roadmap :
 
 - Document slider
-- setup spiffs using values in program memory ? (if you have feedback to this idea let me know)
+- proper return value (as int and not as string) for slider
+- Maybe a slider range setting, meanwhile please use map()
+- Improve slider stability
+- ~~setup spiffs using values in program memory~~
 - ESP8266 support
 
 ## Documentation

examples/prepareFilesystem/prepareFilesystem.ino

@@ -0,0 +1,9 @@
+#include <ESPUI.h>
+
+void setup(void) {
+  Serial.begin(115200);
+  ESPUI.prepareFileSystem();
+}
+
+void loop() {
+}

src/ESPUI.cpp

@@ -1,59 +1,83 @@
 #include "ESPUI.h"
 
 #include "uploadDataIndex.h"
-#include "uploadDataControls.h"
-#include "uploadDataStyle.h"
 
-#include "uploadDataZepto.h"
+
+#include "uploadDataStyle.h"
 #include "uploadDataNormalize.h"
 
+#include "uploadDataControls.h"
+#include "uploadDataZepto.h"
+#include "uploadDataSlider.h"
+
 #include <ESPAsyncWebServer.h>
 #include <functional>
 
-void ESPUIClass::prepareFileSystem(){
-// this function should only be used once, maybe even halt the system
-/*
-Needed Things
-index.htm HTML_INDEX
+// ################# Spiffs functions
+void deleteFile(fs::FS &fs, const char * path){
+    if(!fs.exists(path)){
+      Serial.printf("File: %s does not exist, not deleting\n", path);
+      return;
+    }
 
-style/style.css
-stye/normalize.css
+    Serial.printf("Deleting file: %s\n", path);
 
-js/controls.js
-js/zepto.js
-
-
-if(!SPIFFS.begin()){
-    if(debug) Serial.println("SPIFFS Mount Failed");
-    return;
+    if(fs.remove(path)){
+        Serial.println("File deleted");
+    } else {
+        Serial.println("Delete failed");
+    }
 }
 
-SPIFFS.remove(path);
-
-File file = SPIFFS.open(path, FILE_WRITE);
+void writeFile(fs::FS &fs, const char * path, const char * message){
+    Serial.printf("Writing file: %s\n", path);
 
+    File file = fs.open(path, FILE_WRITE);
     if(!file){
         Serial.println("Failed to open file for writing");
         return;
     }
-
     if(file.print(message)){
         Serial.println("File written");
     } else {
         Serial.println("Write failed");
     }
-*/
-/*
-listDir(SPIFFS, "/", 0);
-writeFile(SPIFFS, "/hello.txt", "Hello ");
-appendFile(SPIFFS, "/hello.txt", "World!\n");
-readFile(SPIFFS, "/hello.txt");
-deleteFile(SPIFFS, "/foo.txt");
-renameFile(SPIFFS, "/hello.txt", "/foo.txt");
-readFile(SPIFFS, "/foo.txt");
-testFileIO(SPIFFS, "/test.txt");
-*/
+}
 
+// end Spiffs functions
+
+void ESPUIClass::prepareFileSystem(){
+// this function should only be used once
+
+Serial.println('About to prepare filesystem...');
+if(!SPIFFS.begin()) {
+    Serial.println("SPIFFS Mount Failed");
+    return;
+}
+
+deleteFile(SPIFFS, "/index.htm");
+
+deleteFile(SPIFFS, "/css/style.css");
+deleteFile(SPIFFS, "/css/normalize.css");
+
+deleteFile(SPIFFS, "/js/controls.js");
+deleteFile(SPIFFS, "/js/zepto.js");
+deleteFile(SPIFFS, "/js/slider.js");
+
+Serial.println('Cleanup done');
+
+// Now write
+
+writeFile(SPIFFS, "/index.htm", HTML_INDEX);
+
+writeFile(SPIFFS, "/css/style.css", CSS_STYLE);
+writeFile(SPIFFS, "/css/normalize.css", CSS_NORMALIZE);
+
+writeFile(SPIFFS, "/js/controls.js", JS_CONTROLS);
+writeFile(SPIFFS, "/js/zepto.js", JS_ZEPTO);
+writeFile(SPIFFS, "/js/slider.js", JS_SLIDER);
+
+Serial.println("Done Initializing filesystem :-)");
 }
 
 
@@ -358,7 +382,16 @@ void ESPUIClass::begin(const char *_title) {
   ui_title = _title;
   server = new AsyncWebServer(80);
   ws = new AsyncWebSocket("/ws");
-  SPIFFS.begin();
+  if(!SPIFFS.begin()) {
+      Serial.println("SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO PREPARE YOUR ESP!!!!!!!");
+      return;
+  }
+
+  if(!SPIFFS.exists( "/index.htm")) {
+    Serial.println("Please read the README!!!!!!!, Make sure to ESPUI.prepareFileSystem() once in an empty sketch");
+    return;
+  }
+
   ws->onEvent(onWsEvent);
   server->addHandler(ws);
   server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
@@ -369,7 +402,9 @@ void ESPUIClass::begin(const char *_title) {
   });
 
   server->onNotFound(
-      [](AsyncWebServerRequest *request) { request->send(404); });
+      [](AsyncWebServerRequest *request) {
+        request->send(404);
+      });
 
   server->begin();
   if (debug)

src/uploadDataSlider.h

@@ -1,3 +1,3 @@
-const char JS_SLIDERS[] PROGMEM = R"=====(
+const char JS_SLIDER[] PROGMEM = R"=====(
 function rkmd_rangeSlider(b){var f,e,c,a,g,d,h;f=$(b);e=f.width();c=f.offset().left;g=f;g.each(function(k,j){a=$(this);a.append(sliderDiscrete_tmplt());d=a.find('input[type="range"]');h=a.find(".slider");slider_fill=h.find(".slider-fill");slider_handle=h.find(".slider-handle");slider_label=h.find(".slider-label");var l=parseInt(d.val());slider_fill.css("width",l+"%");slider_handle.css("left",l+"%");slider_label.find("span").text(l)});f.on("mousedown touchstart",".slider-handle",function(o){if(o.button===2){return false}var m=$(this).parents(".rkmd-slider");var l=m.width();var i=m.offset().left;var k=m.find('input[type="range"]').is(":disabled");if(k===true){return false}$(this).addClass("is-active");var p=function(r){var q=r.pageX-i;if(q<=l&&!(q<"0")){slider_move(m,q,l,true)}};var n=function(q){$(this).off(j);m.find(".is-active").removeClass("is-active")};var j={mousemove:p,touchmove:p,mouseup:n,touchend:n};$(document).on(j)});f.on("mousedown touchstart",".slider",function(p){if(p.button===2){return false}var m=$(this).parents(".rkmd-slider");var l=m.width();var i=m.offset().left;var k=m.find('input[type="range"]').is(":disabled");if(k===true){return false}var o=p.pageX-i;if(o<=l&&!(o<"0")){slider_move(m,o,l,true)}var n=function(q){$(this).off(j)};var j={mouseup:n,touchend:n};$(document).on(j)})}function sliderDiscrete_tmplt(){var a='<div class="slider"><div class="slider-fill"></div><div class="slider-handle"><div class="slider-label"><span>0</span></div></div></div>';return a}function slider_move(g,a,h,e){var i=parseInt(Math.round(a/h*100));var b=g.find(".slider-fill");var c=g.find(".slider-handle");var f=g.find('input[type="range"]');b.css("width",i+"%");c.css({left:i+"%",transition:"none","-webkit-transition":"none","-moz-transition":"none"});f.val(i);if(g.find(".slider-handle span").text()!=i){g.find(".slider-handle span").text(i);var d=g.attr("id").substring(2);if(e){websock.send("slvalue:"+i+":"+d)}}};
 )=====";