Attempt fixing switcher inconsistent state

Signed-off-by: Lukas Bachschwell <lukas@lbsfilm.at>

.clang-format

@@ -0,0 +1,58 @@
+---
+# Based on Webkit style
+BasedOnStyle: Webkit
+IndentWidth: 4
+ColumnLimit: 120
+---
+Language: Cpp
+Standard: Cpp11
+# Pointers aligned to the left
+DerivePointerAlignment: false
+PointerAlignment: Left
+AccessModifierOffset: -4
+AllowShortFunctionsOnASingleLine: Inline
+AlwaysBreakTemplateDeclarations: true
+BreakBeforeBraces: Custom
+BraceWrapping:
+    AfterClass: true
+    AfterControlStatement: true
+    AfterEnum: true
+    AfterFunction: true
+    AfterNamespace: true
+    AfterStruct: true
+    AfterUnion: true
+    AfterExternBlock: true
+    BeforeCatch: true
+    BeforeElse: true
+    SplitEmptyFunction: false
+    SplitEmptyRecord: false
+    SplitEmptyNamespace: false
+BreakConstructorInitializers: BeforeColon
+CompactNamespaces: false
+ConstructorInitializerAllOnOneLineOrOnePerLine: true
+ConstructorInitializerIndentWidth: 4
+Cpp11BracedListStyle: true
+FixNamespaceComments: true
+IncludeBlocks: Regroup
+IncludeCategories:
+    # C++ standard headers (no .h)
+    - Regex: '<[[:alnum:]_-]+>'
+      Priority: 1
+    # Extenal libraries (with .h)
+    - Regex: '<[[:alnum:]_./-]+>'
+      Priority: 2
+    # Headers from same folder
+    - Regex: '"[[:alnum:]_.-]+"'
+      Priority: 3
+    # Headers from other folders
+    - Regex: '"[[:alnum:]_/.-]+"'
+      Priority: 4
+IndentCaseLabels: false
+NamespaceIndentation: All
+SortIncludes: true
+SortUsingDeclarations: true
+SpaceAfterTemplateKeyword: true
+SpacesInAngles: false
+SpacesInParentheses: false
+SpacesInSquareBrackets: false
+UseTab: Never

README.md

@@ -104,7 +104,7 @@ function `ESPUI.prepareFileSystem()`
 Just open the example sketch **prepareFileSystem** and run it on the ESP, (give
 it up to 30 seconds, you can see the status on the Serial Monitor), 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
+just need to do 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 strings that are already saved in the chip's filesystem and you have

data/css/style.css

@@ -12,6 +12,7 @@
 }
 
 .card {
+  min-height: 100px;
   margin-top: 2%;
   border-radius: 6px;
   box-shadow: 0 4px 4px rgba(204, 197, 185, 0.5);
@@ -28,9 +29,7 @@
   }
 }
 
-.card-slider {
-  padding-bottom: 10px;
-}
+.card-slider {}
 
 .turquoise {
   background: #1abc9c;
@@ -80,7 +79,7 @@
   text-align: center;
   color: #ffffff;
   font-weight: 700;
-  line-height: 1;
+  line-height: 1.3;
   margin-bottom: 5px;
   display: inline-block;
   white-space: nowrap;

data/js/controls.js

@@ -380,28 +380,28 @@ function start() {
             data.id +
             ", false)' id='pf" +
             data.id +
-            "'>▲</a></li>" +
+            "'>&#9650;</a></li>" +
             "<li><a onmousedown='padclick(RIGHT, " +
             data.id +
             ", true)' onmouseup='padclick(RIGHT, " +
             data.id +
             ", false)' id='pr" +
             data.id +
-            "'>▲</a></li>" +
+            "'>&#9650;</a></li>" +
             "<li><a onmousedown='padclick(LEFT, " +
             data.id +
             ", true)' onmouseup='padclick(LEFT, " +
             data.id +
             ", false)' id='pl" +
             data.id +
-            "'>▲</a></li>" +
+            "'>&#9650;</a></li>" +
             "<li><a onmousedown='padclick(DOWN, " +
             data.id +
             ", true)' onmouseup='padclick(DOWN, " +
             data.id +
             ", false)' id='pb" +
             data.id +
-            "'>▲</a></li>" +
+            "'>&#9650;</a></li>" +
             "</ul>" +
             (data.type == UI_CPAD
               ? "<a class='confirm' onmousedown='padclick(CENTER," +
@@ -557,7 +557,7 @@ function start() {
 
       case UI_TAB:
         $("#tabsnav").append(
-          "<li><a href='#tab" + data.id + "'>" + data.value + "</a></li>"
+          "<li><a onmouseup='tabclick(" + data.id + ")' href='#tab" + data.id + "'>" + data.value + "</a></li>"
         );
         $("#tabscontent").append("<div id='tab" + data.id + "'></div>");
 
@@ -799,9 +799,11 @@ function start() {
   websock.onmessage = handleEvent;
 }
 
+var sliderCache = {};
 function sliderchange(number) {
   var val = $("#sl" + number).val();
-  websock.send("slvalue:" + val + ":" + number);
+  sliderCache[number] !== val && websock.send("slvalue:" + val + ":" + number);
+  sliderCache[number] = val;
 }
 
 function numberchange(number) {
@@ -814,6 +816,11 @@ function textchange(number) {
   websock.send("tvalue:" + val + ":" + number);
 }
 
+function tabclick(number) {
+  var val = $("#tab" + number).val();
+  websock.send("tabvalue:" + val + ":" + number);
+}
+
 function selectchange(number) {
   var val = $("#select" + number).val();
   websock.send("svalue:" + val + ":" + number);
@@ -854,9 +861,11 @@ function switcher(number, state) {
     if ($("#s" + number).is(":checked")) {
       websock.send("sactive:" + number);
       $("#sl" + number).addClass("checked");
+      $("#sl" + number).prop("checked", true);
     } else {
       websock.send("sinactive:" + number);
       $("#sl" + number).removeClass("checked");
+      $("#sl" + number).prop("checked", false);
     }
   } else if (state == 1) {
     $("#sl" + number).addClass("checked");

data/js/controls.min.js

@@ -80,28 +80,28 @@ data.id+
 data.id+
 ", false)' id='pf"+
 data.id+
-"'>▲</a></li>"+
+"'>&#9650;</a></li>"+
 "<li><a onmousedown='padclick(RIGHT, "+
 data.id+
 ", true)' onmouseup='padclick(RIGHT, "+
 data.id+
 ", false)' id='pr"+
 data.id+
-"'>▲</a></li>"+
+"'>&#9650;</a></li>"+
 "<li><a onmousedown='padclick(LEFT, "+
 data.id+
 ", true)' onmouseup='padclick(LEFT, "+
 data.id+
 ", false)' id='pl"+
 data.id+
-"'>▲</a></li>"+
+"'>&#9650;</a></li>"+
 "<li><a onmousedown='padclick(DOWN, "+
 data.id+
 ", true)' onmouseup='padclick(DOWN, "+
 data.id+
 ", false)' id='pb"+
 data.id+
-"'>▲</a></li>"+
+"'>&#9650;</a></li>"+
 "</ul>"+
 (data.type==UI_CPAD?"<a class='confirm' onmousedown='padclick(CENTER,"+
 data.id+
@@ -162,7 +162,7 @@ data.value+
 "' onchange='textchange("+
 data.id+
 ")' />"+
-"</div>");break;case UI_TAB:$("#tabsnav").append("<li><a href='#tab"+data.id+"'>"+data.value+"</a></li>");$("#tabscontent").append("<div id='tab"+data.id+"'></div>");tabs=$(".tabscontent").tabbedContent({loop:true}).data("api");$("a").filter(function(){return $(this).attr("href")==="#click-to-switch";}).on("click",function(e){var tab=prompt("Tab to switch to (number or id)?");if(!tabs.switchTab(tab)){alert("That tab does not exist :\\");}
+"</div>");break;case UI_TAB:$("#tabsnav").append("<li><a onmouseup='tabclick("+data.id+")' href='#tab"+data.id+"'>"+data.value+"</a></li>");$("#tabscontent").append("<div id='tab"+data.id+"'></div>");tabs=$(".tabscontent").tabbedContent({loop:true}).data("api");$("a").filter(function(){return $(this).attr("href")==="#click-to-switch";}).on("click",function(e){var tab=prompt("Tab to switch to (number or id)?");if(!tabs.switchTab(tab)){alert("That tab does not exist :\\");}
 e.preventDefault();});break;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 parent.append("<div id='id"+
 data.id+
@@ -239,11 +239,12 @@ data.id+
 "'></pre>"+
 "</div>");requestOrientationPermission();break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);break;case UPDATE_ACCEL:break;default:console.error("Unknown type or event");break;}
 if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$("#id"+data.id);if(data.type==UPDATE_SLIDER){element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");element.addClass("slider-"+colorClass(data.color));}else{element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}}};websock.onmessage=handleEvent;}
-function sliderchange(number){var val=$("#sl"+number).val();websock.send("slvalue:"+val+":"+number);}
+var sliderCache={};function sliderchange(number){var val=$("#sl"+number).val();sliderCache[number]!==val&&websock.send("slvalue:"+val+":"+number);sliderCache[number]=val;}
 function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);}
 function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);}
+function tabclick(number){var val=$("#tab"+number).val();websock.send("tabvalue:"+val+":"+number);}
 function selectchange(number){var val=$("#select"+number).val();websock.send("svalue:"+val+":"+number);}
 function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
 function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case UP:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case DOWN:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}}
-function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
+function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}}
 var rangeSlider=function(isDiscrete){var slider=$(".range-slider"),range=$(".range-slider__range"),value=$(".range-slider__value");slider.each(function(){value.each(function(){var value=$(this).prev().attr("value");$(this).html(value);});if(!isDiscrete){range.on({input:function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));},});}else{range.on({input:function(){$(this).next().html(this.value);},change:function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));},});}});};

examples/prepareFilesystem/prepareFilesystem.ino

@@ -1,11 +1,11 @@
 #include <ESPUI.h>
 
-ESPUIClass ESPUI( Verbosity::VerboseJSON );
-
-void setup(void) {
+void setup(void)
+{
   Serial.begin(115200);
   ESPUI.prepareFileSystem();
 }
 
-void loop() {
+void loop()
+{
 }

library.json

@@ -23,7 +23,7 @@
       "frameworks": "arduino"
     }
   ],
-  "version": "2.0.1",
+  "version": "2.0.2",
   "frameworks": "arduino",
   "platforms": "*"
 }

library.properties

@@ -1,5 +1,5 @@
 name=ESPUI
-version=2.0.1
+version=2.0.2
 author=Lukas Bachschwell
 maintainer=Lukas Bachschwell <lukas@lbsfilm.at>
 sentence=ESP32 and ESP8266 Web Interface Library

src/ESPUI.h

@@ -6,16 +6,15 @@
 
 #include "Arduino.h"
 #include "ArduinoJson.h"
-#include "FS.h"
 #include "stdlib_noniso.h"
 
 #if defined(ESP32)
-
-#include "LittleFS.h"
-#include "WiFi.h"
 #include <AsyncTCP.h>
 #include <ESPAsyncWebServer.h>
 
+#include "SPIFFS.h"
+#include "WiFi.h"
+
 #else
 
 #include <ArduinoOTA.h>
@@ -23,8 +22,8 @@
 #include <ESP8266mDNS.h>
 #include <ESPAsyncTCP.h>
 #include <ESPAsyncWebServer.h>
-#include <LittleFS.h>
 #include <Hash.h>
+#include <LittleFS.h>
 #include <SPIFFSEditor.h>
 
 #define FILE_WRITE "w"
@@ -131,25 +130,38 @@ class Control
 public:
     ControlType type;
     uint16_t id; // just mirroring the id here for practical reasons
-  const char *label;
-  void (*callback)(Control *, int);
+    const char* label;
+    void (*callback)(Control*, int);
     String value;
     ControlColor color;
     uint16_t parentControl;
-  Control *next;
+    Control* next;
 
     static constexpr uint16_t noParent = 0xffff;
 
-  Control(ControlType type, const char *label, void (*callback)(Control *, int), String value, ControlColor color,
-          uint16_t parentControl = Control::noParent)
-      : type(type), label(label), callback(callback), value(value), color(color), parentControl(parentControl), next(nullptr)
+    Control(ControlType type, const char* label, void (*callback)(Control*, int), const String& value,
+        ControlColor color, uint16_t parentControl = Control::noParent)
+        : type(type),
+          label(label),
+          callback(callback),
+          value(value),
+          color(color),
+          parentControl(parentControl),
+          next(nullptr)
     {
         id = idCounter++;
     }
 
-  Control(const Control &control)
-      : type(control.type), id(control.id), label(control.label), callback(control.callback), value(control.value), color(control.color),
-        parentControl(control.parentControl), next(control.next) {}
+    Control(const Control& control)
+        : type(control.type),
+          id(control.id),
+          label(control.label),
+          callback(control.callback),
+          value(control.value),
+          color(control.color),
+          parentControl(control.parentControl),
+          next(control.next)
+    { }
 
 private:
     static uint16_t idCounter;
@@ -200,72 +212,84 @@ public:
     bool sliderContinuous;
 
     void setVerbosity(Verbosity verbosity);
-  void begin(const char *_title, const char *username = nullptr, const char *password = nullptr);       // Setup server and page in Memorymode
-  void beginSPIFFS(const char *_title, const char *username = nullptr, const char *password = nullptr); // Setup server and page in SPIFFSmode
+    void begin(const char* _title, const char* username = nullptr,
+        const char* password = nullptr); // Setup server and page in Memorymode
+    void beginSPIFFS(const char* _title, const char* username = nullptr,
+        const char* password = nullptr); // Setup server and page in SPIFFSmode
 
-  void prepareFileSystem(); // Initially preps the filesystem and loads a lot of stuff into SPIFFS
+    void prepareFileSystem(); // Initially preps the filesystem and loads a lot of
+                              // stuff into SPIFFS
     void list(); // Lists SPIFFS directory
 
-  uint16_t addControl(ControlType type, const char *label, String value = String(""), ControlColor color = ControlColor::Turquoise, uint16_t parentControl = Control::noParent, void (*callback)(Control *, int) = nullptr);
+    uint16_t addControl(ControlType type, const char* label, const String& value = String(""),
+        ControlColor color = ControlColor::Turquoise, uint16_t parentControl = Control::noParent,
+        void (*callback)(Control*, int) = nullptr);
     bool removeControl(uint16_t id, bool force_reload_ui = false);
 
     // create Elements
-  uint16_t button(const char *label, void (*callback)(Control *, int), ControlColor color, String value = "");         // Create Event Button
-  uint16_t switcher(const char *label, void (*callback)(Control *, int), ControlColor color, bool startState = false); // Create Toggle Button
-  uint16_t pad(const char *label, void (*callback)(Control *, int), ControlColor color);                               // Create Pad Control
-  uint16_t padWithCenter(const char *label, void (*callback)(Control *, int), ControlColor color);                     // Create Pad Control with Centerbutton
+    uint16_t button(const char* label, void (*callback)(Control*, int), ControlColor color,
+        const String& value = ""); // Create Event Button
+    uint16_t switcher(const char* label, void (*callback)(Control*, int), ControlColor color,
+        bool startState = false); // Create Toggle Button
+    uint16_t pad(const char* label, void (*callback)(Control*, int),
+        ControlColor color); // Create Pad Control
+    uint16_t padWithCenter(const char* label, void (*callback)(Control*, int),
+        ControlColor color); // Create Pad Control with Centerbutton
 
-  uint16_t slider(const char *label, void (*callback)(Control *, int), ControlColor color, int value, int min = 0,
+    uint16_t slider(const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min = 0,
         int max = 100); // Create Slider Control
-  uint16_t number(const char *label, void (*callback)(Control *, int), ControlColor color, int value, int min = 0,
+    uint16_t number(const char* label, void (*callback)(Control*, int), ControlColor color, int value, int min = 0,
         int max = 100); // Create a Number Input Control
-  uint16_t text(const char *label, void (*callback)(Control *, int), ControlColor color, String value = ""); // Create a Text Input Control
+    uint16_t text(const char* label, void (*callback)(Control*, int), ControlColor color,
+        const String& value = ""); // Create a Text Input Control
 
     // Output only
-  uint16_t label(const char *label, ControlColor color, String value = "");                     // Create Label
-  uint16_t graph(const char *label, ControlColor color);                                        // Create Graph display
-  uint16_t gauge(const char *label, ControlColor color, int value, int min = 0, int max = 100); // Create Gauge display
+    uint16_t label(const char* label, ControlColor color,
+        const String& value = ""); // Create Label
+    uint16_t graph(const char* label, ControlColor color); // Create Graph display
+    uint16_t gauge(const char* label, ControlColor color, int value, int min = 0,
+        int max = 100); // Create Gauge display
 
     // Input only
-  uint16_t accelerometer(const char *label, void (*callback)(Control *, int), ControlColor color);
+    uint16_t accelerometer(const char* label, void (*callback)(Control*, int), ControlColor color);
 
     // Update Elements
 
-  Control *getControl(uint16_t id);
+    Control* getControl(uint16_t id);
 
     // Update Elements
-  void updateControlValue(uint16_t id, String value, int clientId = -1);
-  void updateControlValue(Control *control, String value, int clientId = -1);
+    void updateControlValue(uint16_t id, const String& value, int clientId = -1);
+    void updateControlValue(Control* control, const String& value, int clientId = -1);
 
     void updateControl(uint16_t id, int clientId = -1);
-  void updateControl(Control *control, int clientId = -1);
+    void updateControl(Control* control, int clientId = -1);
 
-  void print(uint16_t id, String value);
-  void updateLabel(uint16_t id, String value);
+    void print(uint16_t id, const String& value);
+    void updateLabel(uint16_t id, const String& value);
     void updateSwitcher(uint16_t id, bool nValue, int clientId = -1);
     void updateSlider(uint16_t id, int nValue, int clientId = -1);
     void updateNumber(uint16_t id, int nValue, int clientId = -1);
-  void updateText(uint16_t id, String nValue, int clientId = -1);
-  void updateSelect(uint16_t id, String nValue, int clientId = -1);
+    void updateText(uint16_t id, const String& nValue, int clientId = -1);
+    void updateSelect(uint16_t id, const String& nValue, int clientId = -1);
     void updateGauge(uint16_t id, int number, int clientId);
 
     void clearGraph(uint16_t id, int clientId = -1);
     void addGraphPoint(uint16_t id, int nValue, int clientId = -1);
 
     // Variables
-  const char *ui_title = "ESPUI"; // Store UI Title and Header Name
-  Control *controls = nullptr;
+    const char* ui_title = "ESPUI"; // Store UI Title and Header Name
+    Control* controls = nullptr;
     void jsonReload();
-  void jsonDom(AsyncWebSocketClient *client = nullptr);
+    void jsonDom(AsyncWebSocketClient* client = nullptr);
 
     Verbosity verbosity;
 
-  AsyncWebServer *server;
-  AsyncWebSocket *ws;
+    AsyncWebServer* server;
+    AsyncWebSocket* ws;
 
 private:
-  const char *basicAuthUsername = nullptr;
-  const char *basicAuthPassword = nullptr;
+    const char* basicAuthUsername = nullptr;
+    const char* basicAuthPassword = nullptr;
     bool basicAuth = true;
 };