Style change again

README.md

@@ -1,6 +1,7 @@
 # ESPUI
 
-![ESPUI](https://github.com/s00500/ESPUI/blob/master/docs/ui_complete.png)
+![ESPUI](https://github.com/s00500/ESPUI/blob/master/docs/ui_complete.png) //
+TODO: Update Logo
 
 ESPUI is a simple library to make a web user interface for your projects using
 the **ESP8266** or the **ESP32** It uses web sockets and lets you create,
@@ -14,13 +15,11 @@ So if you either don't know how or just don't want to waste time: this is your
 simple solution user interface without the need of internet connectivity or any
 additional servers.
 
-I completely rewrote the EasyUI Library created by ayushsharma82
+The Library runs fine on any kind of ESP8266 and ESP32 (NodeMCU Boards, usw)
-[Here](https://github.com/ayushsharma82/) Now it uses ESPAsyncWebserver and is
-mainly to be used with the ESP32 Processor.
 
 # Important notes
 
-THIS IS THE 2.0.0 development branch
+THIS IS THE 2.0.0 DEVELOPMENT BRANCH, NOT GUARANTIED TO WORK
 
 **Roadmap for 2.0.0:**
 
@@ -35,10 +34,10 @@ THIS IS THE 2.0.0 development branch
 - Min Max on slider
 - Accelerometer Widget
 - Cleanup Example
-- New Documentation
+- Cleanup and extend Documentation
-  - Numberfield
+  - Number field ✅
-  - Textfield
+  - Text field ✅
-  - Data directory
+  - Data directory ✅
   - Graph Usage
   - Accelerometer
   - Slider
@@ -51,10 +50,8 @@ THIS IS THE 2.0.0 development branch
 This library is dependent on the following libraries to function properly.
 
 - [ESPAsyncWebserver](https://github.com/me-no-dev/ESPAsyncWebServer)
-- [ArduinoJson](https://github.com/bblanchon/ArduinoJson) **(VERSIONS 5.x only
+- [ArduinoJson](https://github.com/bblanchon/ArduinoJson) (Last tested with
-  currently)**
+  version 6.10.0) **Plus for ESP8266**
-
-**Plus for ESP8266**
 
 - [ESPAsyncTCP](https://github.com/me-no-dev/ESPAsyncTCP)
 
@@ -92,16 +89,16 @@ Go to Sketch>Include Library>Add .zip Library> Select the Downloaded .zip File.
 
 ## Getting started
 
-ESPUI serves several files to the browser to build up its webinterface. This can
+ESPUI serves several files to the browser to build up its web interface. This
-be achieved in 2 ways: _PROGMEM_ or _SPIFFS_
+can be achieved in 2 ways: _PROGMEM_ or _SPIFFS_
 
 _When `ESPUI.begin()` is called the default is serving files from Memory and
 ESPUI should work out of the box!_
 
-But if this causes your program to _use too much memory_ you can burn the files
+**OPTIONAL:** But if this causes your program to _use too much memory_ you can
-into the SPIFFS filesystem on the ESP. There are now two ways to do this: you
+burn the files into the SPIFFS filesystem on the ESP. There are now two ways to
-can either use the ESP file upload tool or you use the library function
+do this: you can either use the ESP file upload tool or you use the library
-`ESPUI.prepareFileSystem()`
+function `ESPUI.prepareFileSystem()`
 
 #### Simple filesystem preparation (_recommended_)
 
@@ -111,19 +108,8 @@ 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
+unnecessary strings that are already saved in the chip's filesystem and you have
-programm memory to work with.
+more program 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)
-or for ESP8266
-[ESP8266 sketch data uploader](https://github.com/esp8266/arduino-esp8266fs-plugin)
-
-Then open the **gui** example sketch and select "Upload Sketch Data" from the
-Tools menu for your processor. Now you are set to go and use any code you want
-to with this library
 
 ## User interface Elements
 
@@ -235,6 +221,28 @@ realtime data, are touch compatible and can be used to for example control a
 Servo. The current value is shown while the slider is dragged in a little bubble
 over the handle.
 
+#### Number Input
+
+TODO: Add image
+
+The numberinput can be used to directly input numbers to your program. You can
+enter a Value into it and when you are done with your change it is sent to the
+ESP.
+
+#### Text Input
+
+TODO: Add image
+
+The textinput works very similar like the number input but with a string. You
+can enter a String into it and when you are done with your change it is sent to
+the ESP.
+
+#### Using Tabs
+
+TODO: Add image
+
+// TODO: add Text for tabs
+
 #### Initialisation of the UI
 
 After all the elements are configured you can use `ESPUI.begin(“Some Title”);`
@@ -244,11 +252,24 @@ example). The web interface can then be used from multiple devices at once and
 also shows an connection status in the top bar. The library is designed to be
 easy to use and can still be extended with a lot of more functionality.
 
+#### Log output
+
+ESPUI has several different log levels. You can set them using the
+`ESPUI.setVerbosity(Verbosity::VerboseJSON)` function.
+
+Loglevels are:
+
+- Verbosity::Quiet (default)
+- Verbosity::Verbose
+- Verbosity::VerboseJSON
+
+// TODO: Add some more notes here
+
 # Notes for Development
 
-If you want to work on the HTML/CSS/JS files, do make changes in the
+If you want to work on the HTML/CSS/JS files, do make changes in the `data`
-`examples/gui/data` directory. When you need to transfer that code to the ESP,
+directory. When you need to transfer that code to the ESP, run
-run `tools/prepare_static_ui_sources.py -a` (this script needs python3 with the
+`tools/prepare_static_ui_sources.py -a` (this script needs python3 with the
 modules htmlmin, jsmin and csscompressor). This will generate a) minified files
 next to the original files to be uploaded with the ESP32 sketch data uploader
 mentioned above and b) the C header files in `src` that contain the minified and
@@ -271,3 +292,5 @@ commits.
 
 Liked this Library? You can **support** me by sending me a :coffee:
 [Coffee](https://paypal.me/lukasbachschwell/3).
+
+Otherwise I really welcome **Pull Requests**.

src/ESPUI.cpp

@@ -253,8 +253,7 @@ void ESPUIClass::prepareFileSystem() {
 }
 
 // Handle Websockets Communication
-void onWsEvent(AsyncWebSocket* server, AsyncWebSocketClient* client,
+void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
-               AwsEventType type, void* arg, uint8_t* data, size_t len) {
   switch (type) {
   case WS_EVT_DISCONNECT: {
     if (ESPUI.verbosity) {
@@ -384,12 +383,9 @@ void onWsEvent(AsyncWebSocket* server, AsyncWebSocketClient* client,
   }
 }
 
-uint16_t ESPUIClass::addControl(ControlType type, const char* label,
+uint16_t ESPUIClass::addControl(ControlType type, const char *label, String value, ControlColor color, uint16_t parentControl,
-                                String value, ControlColor color,
-                                uint16_t parentControl,
                                 void (*callback)(Control *, int)) {
-  Control* control =
+  Control *control = new Control(type, label, callback, value, color, parentControl);
-      new Control(type, label, callback, value, color, parentControl);
 
   if (this->controls == nullptr) {
     this->controls = control;
@@ -406,53 +402,36 @@ uint16_t ESPUIClass::addControl(ControlType type, const char* label,
   return control->id;
 }
 
-int ESPUIClass::label(const char* label, ControlColor color, String value) {
+int ESPUIClass::label(const char *label, ControlColor color, String value) { return addControl(ControlType::Label, label, value, color); }
-  return addControl(ControlType::Label, label, value, color);
+
+int ESPUIClass::graph(const char *label, ControlColor color) { return addControl(ControlType::Graph, label, "", color); }
+
+int ESPUIClass::slider(const char *label, void (*callback)(Control *, int), ControlColor color, String value) {
+  return addControl(ControlType::Slider, label, "", color, Control::noParent, callback);
 }
 
-int ESPUIClass::graph(const char* label, ControlColor color) {
+int ESPUIClass::button(const char *label, void (*callback)(Control *, int), ControlColor color, String value) {
-  return addControl(ControlType::Graph, label, "", color);
+  return addControl(ControlType::Button, label, value, color, Control::noParent, callback);
 }
 
-int ESPUIClass::slider(const char* label, void (*callback)(Control*, int),
+int ESPUIClass::switcher(const char *label, bool startState, void (*callback)(Control *, int), ControlColor color) {
-                       ControlColor color, String value) {
+  return addControl(ControlType::Switcher, label, "", color, Control::noParent, callback);
-  return addControl(ControlType::Slider, label, "", color, Control::noParent,
-                    callback);
 }
 
-int ESPUIClass::button(const char* label, void (*callback)(Control*, int),
+int ESPUIClass::pad(const char *label, bool center, void (*callback)(Control *, int), ControlColor color) {
-                       ControlColor color, String value) {
-  return addControl(ControlType::Button, label, value, color, Control::noParent,
-                    callback);
-}
-
-int ESPUIClass::switcher(const char* label, bool startState,
-                         void (*callback)(Control*, int), ControlColor color) {
-  return addControl(ControlType::Switcher, label, "", color, Control::noParent,
-                    callback);
-}
-
-int ESPUIClass::pad(const char* label, bool center,
-                    void (*callback)(Control*, int), ControlColor color) {
   if (center) {
-    return addControl(ControlType::PadWithCenter, label, "", color,
+    return addControl(ControlType::PadWithCenter, label, "", color, Control::noParent, callback);
-                      Control::noParent, callback);
   } else {
-    return addControl(ControlType::Pad, label, "", color, Control::noParent,
+    return addControl(ControlType::Pad, label, "", color, Control::noParent, callback);
-                      callback);
   }
 }
 
-int ESPUIClass::number(const char* label, void (*callback)(Control*, int),
+int ESPUIClass::number(const char *label, void (*callback)(Control *, int), ControlColor color, int number, int min, int max) {
-                       ControlColor color, int number, int min, int max) {
+  return addControl(ControlType::Number, label, String(number), color, Control::noParent, callback);
-  return addControl(ControlType::Number, label, String(number), color,
-                    Control::noParent, callback);
 }
 
-int ESPUIClass::text(const char* label, void (*callback)(Control*, int),
+int ESPUIClass::text(const char *label, void (*callback)(Control *, int), ControlColor color, String value) {
-                     ControlColor color, String value) {
+  return addControl(ControlType::Text, label, value, color, Control::noParent, callback);
-  return addControl(ControlType::Text, label, value, color, Control::noParent,
-                    callback);
 }
 
 Control *ESPUIClass::getControl(uint16_t id) {
@@ -520,8 +499,7 @@ void ESPUIClass::updateControl(uint16_t id, int clientId) {
     updateControl(control, clientId);
   } else {
     if (this->verbosity) {
-      Serial.println(String("Error: There is no control with ID ") +
+      Serial.println(String("Error: There is no control with ID ") + String(id));
-                     String(id));
     }
   }
 }
@@ -542,37 +520,24 @@ void ESPUIClass::updateControl(uint16_t id, String value, int clientId) {
     updateControl(control, value, clientId);
   } else {
     if (this->verbosity) {
-      Serial.println(String("Error: There is no control with ID ") +
+      Serial.println(String("Error: There is no control with ID ") + String(id));
-                     String(id));
     }
   }
 }
 
 void ESPUIClass::print(uint16_t id, String value) { updateControl(id, value); }
 
-void ESPUIClass::updateLabel(uint16_t id, String value) {
+void ESPUIClass::updateLabel(uint16_t id, String value) { updateControl(id, value); }
-  updateControl(id, value);
-}
 
-void ESPUIClass::updateSlider(uint16_t id, int nValue, int clientId) {
+void ESPUIClass::updateSlider(uint16_t id, int nValue, int clientId) { updateControl(id, String(nValue), clientId); }
-  updateControl(id, String(nValue), clientId);
-}
 
-void ESPUIClass::updateSwitcher(uint16_t id, bool nValue, int clientId) {
+void ESPUIClass::updateSwitcher(uint16_t id, bool nValue, int clientId) { updateControl(id, String(nValue ? "1" : "0"), clientId); }
-  updateControl(id, String(nValue ? "1" : "0"), clientId);
-}
 
-void ESPUIClass::updateNumber(uint16_t id, int number, int clientId) {
+void ESPUIClass::updateNumber(uint16_t id, int number, int clientId) { updateControl(id, String(number), clientId); }
-  updateControl(id, String(number), clientId);
-}
 
-void ESPUIClass::updateText(uint16_t id, String text, int clientId) {
+void ESPUIClass::updateText(uint16_t id, String text, int clientId) { updateControl(id, text, clientId); }
-  updateControl(id, text, clientId);
-}
 
-void ESPUIClass::updateSelect(uint16_t id, String text, int clientId) {
+void ESPUIClass::updateSelect(uint16_t id, String text, int clientId) { updateControl(id, text, clientId); }
-  updateControl(id, text, clientId);
-}
 
 /*
 Convert & Transfer Arduino elements to JSON elements
@@ -628,8 +593,7 @@ void ESPUIClass::jsonDom(AsyncWebSocketClient* client) {
   client->text(json);
 }
 
-void ESPUIClass::beginSPIFFS(const char* _title, const char* username,
+void ESPUIClass::beginSPIFFS(const char *_title, const char *username, const char *password) {
-                             const char* password) {
   ui_title = _title;
   this->basicAuthUsername = username;
   this->basicAuthPassword = password;
@@ -645,9 +609,7 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username,
 
   if (!SPIFFS.begin()) {
     if (ESPUI.verbosity) {
-      Serial.println(
+      Serial.println("SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO PREPARE YOUR ESP!!!!!!!");
-          "SPIFFS Mount Failed, PLEASE CHECK THE README ON HOW TO "
-          "PREPARE YOUR ESP!!!!!!!");
     }
 
     return;
@@ -659,9 +621,7 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username,
 
   if (!SPIFFS.exists("/index.htm")) {
     if (ESPUI.verbosity) {
-      Serial.println(
+      Serial.println("Please read the README!!!!!!!, Make sure to ESPUI.prepareFileSystem() once in an empty sketch");
-          "Please read the README!!!!!!!, Make sure to "
-          "ESPUI.prepareFileSystem() once in an empty sketch");
     }
 
     return;
@@ -675,27 +635,21 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username,
       ws->setAuthentication(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword);
     }
 
-    server->serveStatic("/", SPIFFS, "/")
+    server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm").setAuthentication(username, password);
-        .setDefaultFile("index.htm")
-        .setAuthentication(username, password);
-
   } else {
     server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
   }
 
   // Heap for general Servertest
   server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
-    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
-                                                  ESPUI.basicAuthPassword)) {
       return request->requestAuthentication();
     }
 
-    request->send(200, "text/plain",
+    request->send(200, "text/plain", String(ESP.getFreeHeap()) + " In SPIFFSmode");
-                  String(ESP.getFreeHeap()) + " In SPIFFSmode");
   });
 
-  server->onNotFound(
+  server->onNotFound([](AsyncWebServerRequest *request) { request->send(404); });
-      [](AsyncWebServerRequest* request) { request->send(404); });
 
   server->begin();
 
@@ -704,8 +658,7 @@ void ESPUIClass::beginSPIFFS(const char* _title, const char* username,
   }
 }
 
-void ESPUIClass::begin(const char* _title, const char* username,
+void ESPUIClass::begin(const char *_title, const char *username, const char *password) {
-                       const char* password) {
   basicAuthUsername = username;
   basicAuthPassword = password;
 
@@ -723,69 +676,56 @@ void ESPUIClass::begin(const char* _title, const char* username,
   ws->onEvent(onWsEvent);
   server->addHandler(ws);
 
-  if (basicAuth && WS_AUTHENTICATION) ws->setAuthentication(username, password);
+  if (basicAuth && WS_AUTHENTICATION)
+    ws->setAuthentication(username, password);
 
   server->on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
-    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
-                                                  ESPUI.basicAuthPassword)) {
       return request->requestAuthentication();
     }
 
-    AsyncWebServerResponse* response =
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", HTML_INDEX);
-        request->beginResponse_P(200, "text/html", HTML_INDEX);
     request->send(response);
   });
 
   // Javascript files
 
   server->on("/js/zepto.min.js", HTTP_GET, [](AsyncWebServerRequest *request) {
-    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
-                                                  ESPUI.basicAuthPassword)) {
       return request->requestAuthentication();
     }
 
-    AsyncWebServerResponse* response = request->beginResponse_P(
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
-        200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
     response->addHeader("Content-Encoding", "gzip");
     request->send(response);
   });
 
   server->on("/js/controls.js", HTTP_GET, [](AsyncWebServerRequest *request) {
-    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
-                                                  ESPUI.basicAuthPassword)) {
       return request->requestAuthentication();
     }
 
-    AsyncWebServerResponse* response =
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
-        request->beginResponse_P(200, "application/javascript",
-                                 JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
     response->addHeader("Content-Encoding", "gzip");
     request->send(response);
   });
 
   server->on("/js/slider.js", HTTP_GET, [](AsyncWebServerRequest *request) {
-    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
-                                                  ESPUI.basicAuthPassword)) {
       return request->requestAuthentication();
     }
 
-    AsyncWebServerResponse* response = request->beginResponse_P(
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
-        200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
     response->addHeader("Content-Encoding", "gzip");
     request->send(response);
   });
 
-  server->on("/js/tabbedcontent.js", HTTP_GET,
+  server->on("/js/tabbedcontent.js", HTTP_GET, [](AsyncWebServerRequest *request) {
-             [](AsyncWebServerRequest* request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
-               if (ESPUI.basicAuth &&
-                   !request->authenticate(ESPUI.basicAuthUsername,
-                                          ESPUI.basicAuthPassword)) {
       return request->requestAuthentication();
     }
 
-               AsyncWebServerResponse* response = request->beginResponse_P(
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", JS_TABBEDCONTENT_GZIP, sizeof(JS_TABBEDCONTENT_GZIP));
-                   200, "application/javascript", JS_TABBEDCONTENT_GZIP,
-                   sizeof(JS_TABBEDCONTENT_GZIP));
     response->addHeader("Content-Encoding", "gzip");
     request->send(response);
   });
@@ -793,44 +733,35 @@ void ESPUIClass::begin(const char* _title, const char* username,
   // Stylesheets
 
   server->on("/css/style.css", HTTP_GET, [](AsyncWebServerRequest *request) {
-    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
-                                                  ESPUI.basicAuthPassword)) {
       return request->requestAuthentication();
     }
 
-    AsyncWebServerResponse* response = request->beginResponse_P(
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
-        200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
     response->addHeader("Content-Encoding", "gzip");
     request->send(response);
   });
 
-  server->on(
+  server->on("/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest *request) {
-      "/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest* request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
-        if (ESPUI.basicAuth &&
-            !request->authenticate(ESPUI.basicAuthUsername,
-                                   ESPUI.basicAuthPassword)) {
       return request->requestAuthentication();
     }
 
-        AsyncWebServerResponse* response = request->beginResponse_P(
+    AsyncWebServerResponse *response = request->beginResponse_P(200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
-            200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
     response->addHeader("Content-Encoding", "gzip");
     request->send(response);
   });
 
   // Heap for general Servertest
   server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
-    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword)) {
-                                                  ESPUI.basicAuthPassword)) {
       return request->requestAuthentication();
     }
 
-    request->send(200, "text/plain",
+    request->send(200, "text/plain", String(ESP.getFreeHeap()) + " In Memorymode");
-                  String(ESP.getFreeHeap()) + " In Memorymode");
   });
 
-  server->onNotFound(
+  server->onNotFound([](AsyncWebServerRequest *request) { request->send(404); });
-      [](AsyncWebServerRequest* request) { request->send(404); });
 
   server->begin();