From 489ba045fb63926faf9c4b14dc5ba7bdfcdac49f Mon Sep 17 00:00:00 2001 From: Lukas Bachschwell Date: Wed, 29 Nov 2017 14:36:19 +0100 Subject: [PATCH] File system upload highly simplified and documented --- README.md | 18 ++- .../prepareFilesystem/prepareFilesystem.ino | 9 ++ src/ESPUI.cpp | 103 ++++++++++++------ src/uploadDataSlider.h | 2 +- 4 files changed, 95 insertions(+), 37 deletions(-) create mode 100644 examples/prepareFilesystem/prepareFilesystem.ino diff --git a/README.md b/README.md index 1c50dca..1a006ae 100644 --- a/README.md +++ b/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 diff --git a/examples/prepareFilesystem/prepareFilesystem.ino b/examples/prepareFilesystem/prepareFilesystem.ino new file mode 100644 index 0000000..c65abb1 --- /dev/null +++ b/examples/prepareFilesystem/prepareFilesystem.ino @@ -0,0 +1,9 @@ +#include + +void setup(void) { + Serial.begin(115200); + ESPUI.prepareFileSystem(); +} + +void loop() { +} diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp index 3460327..ce2054f 100644 --- a/src/ESPUI.cpp +++ b/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 #include -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) diff --git a/src/uploadDataSlider.h b/src/uploadDataSlider.h index f3b7423..b443db8 100644 --- a/src/uploadDataSlider.h +++ b/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='
0
';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)}}}; )=====";