1.6.1

#44 Adding define to reenable WS BasicAuth
#44 Adding Basic Auth
2025-07-03 09:40:19 +00:00 · 2018-12-27 11:37:50 +01:00 · 2018-12-27 11:34:28 +01:00 · 2018-12-26 13:38:38 +01:00 · 2018-12-26 12:35:35 +01:00 · 2018-12-02 14:22:43 +01:00
9 changed files with 303 additions and 252 deletions
--- a/examples/gui/data/js/controls.js
+++ b/examples/gui/data/js/controls.js
@ -1,3 +1,4 @@
+const UI_INITIAL_GUI = 100;
 const UI_TITEL = 0;

 const UI_LABEL = 1;
@ -112,26 +113,37 @@ function handleVisibilityChange() {
 function start() {
  document.addEventListener("visibilitychange", handleVisibilityChange, false);
  websock = new WebSocket("ws://" + window.location.hostname + "/ws");
-  websock.onopen = function(evt) {
+  websock.onopen = function (evt) {
    console.log("websock open");
    $("#conStatus").addClass("color-green");
    $("#conStatus").text("Connected");
    websockConnected = true;
  };
-  websock.onclose = function(evt) {
+
+  websock.onclose = function (evt) {
    console.log("websock close");
    conStatusError();
  };
-  websock.onerror = function(evt) {
+
+  websock.onerror = function (evt) {
    console.log(evt);
    conStatusError();
  };
-  websock.onmessage = function(evt) {
-    console.log(evt);
+
+  var handleEvent = function (evt) {
+    //console.log(evt);
    var data = JSON.parse(evt.data);
    var e = document.body;
    var center = "";
    switch (data.type) {
+      case UI_INITIAL_GUI:
+        data.controls.forEach(element => {
+          var fauxEvent = {
+            data: JSON.stringify(element)
+          };
+          handleEvent(fauxEvent);
+        });
+        break;
      case UI_TITEL:
        document.title = data.label;
        $("#mainHeader").html(data.label);
@ -139,42 +151,42 @@ function start() {
      case UI_LABEL:
        $("#row").append(
          "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr /><span id='l" +
-            data.id +
-            "' class='label label-wrap'>" +
-            data.value +
-            "</span></div>"
+          colorClass(data.color) +
+          "'><h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr /><span id='l" +
+          data.id +
+          "' class='label label-wrap'>" +
+          data.value +
+          "</span></div>"
        );
        break;
      case UI_BUTTON:
        $("#row").append(
          "<div class='one columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5>" +
-            data.label +
-            "</h5><hr/><button onmousedown='buttonclick(" +
-            data.id +
-            ", true)' onmouseup='buttonclick(" +
-            data.id +
-            ", false)' id='" +
-            data.id +
-            "'>" +
-            data.value +
-            "</button></div>"
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/><button onmousedown='buttonclick(" +
+          data.id +
+          ", true)' onmouseup='buttonclick(" +
+          data.id +
+          ", false)' id='" +
+          data.id +
+          "'>" +
+          data.value +
+          "</button></div>"
        );
        $("#" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            buttonclick(data.id, true);
          }
        });
        $("#" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            buttonclick(data.id, false);
          }
@ -199,16 +211,16 @@ function start() {
        }
        $("#row").append(
          "<div id='" +
-            data.id +
-            "' class='one columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5>" +
-            data.label +
-            "</h5><hr/>" +
-            label +
-            input +
-            "</label>" +
-            "</div>"
+          data.id +
+          "' class='one columns card tcenter " +
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/>" +
+          label +
+          input +
+          "</label>" +
+          "</div>"
        );
        break;
      case UI_CPAD:
@ -220,106 +232,106 @@ function start() {
          ", false)' href='#' id='pc" +
          data.id +
          "'>OK</a>";
-      //NO BREAK
+        //NO BREAK
      case UI_PAD:
        $("#row").append(
          "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'><h5>" +
-            data.label +
-            "</h5><hr/>" +
-            "<nav class='control'>" +
-            "<ul>" +
-            "<li><a onmousedown='padclick(FOR, " +
-            data.id +
-            ", true)' onmouseup='padclick(FOR, " +
-            data.id +
-            ", false)' href='#' id='pf" +
-            data.id +
-            "'>▲</a></li>" +
-            "<li><a onmousedown='padclick(RIGHT, " +
-            data.id +
-            ", true)' onmouseup='padclick(RIGHT, " +
-            data.id +
-            ", false)' href='#' id='pr" +
-            data.id +
-            "'>▲</a></li>" +
-            "<li><a onmousedown='padclick(LEFT, " +
-            data.id +
-            ", true)' onmouseup='padclick(LEFT, " +
-            data.id +
-            ", false)' href='#' id='pl" +
-            data.id +
-            "'>▲</a></li>" +
-            "<li><a onmousedown='padclick(BACK, " +
-            data.id +
-            ", true)' onmouseup='padclick(BACK, " +
-            data.id +
-            ", false)' href='#' id='pb" +
-            data.id +
-            "'>▲</a></li>" +
-            "</ul>" +
-            center +
-            "</nav>" +
-            "</div>"
+          colorClass(data.color) +
+          "'><h5>" +
+          data.label +
+          "</h5><hr/>" +
+          "<nav class='control'>" +
+          "<ul>" +
+          "<li><a onmousedown='padclick(FOR, " +
+          data.id +
+          ", true)' onmouseup='padclick(FOR, " +
+          data.id +
+          ", false)' href='#' id='pf" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(RIGHT, " +
+          data.id +
+          ", true)' onmouseup='padclick(RIGHT, " +
+          data.id +
+          ", false)' href='#' id='pr" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(LEFT, " +
+          data.id +
+          ", true)' onmouseup='padclick(LEFT, " +
+          data.id +
+          ", false)' href='#' id='pl" +
+          data.id +
+          "'>▲</a></li>" +
+          "<li><a onmousedown='padclick(BACK, " +
+          data.id +
+          ", true)' onmouseup='padclick(BACK, " +
+          data.id +
+          ", false)' href='#' id='pb" +
+          data.id +
+          "'>▲</a></li>" +
+          "</ul>" +
+          center +
+          "</nav>" +
+          "</div>"
        );

        $("#pf" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            padclick(FOR, data.id, true);
          }
        });
        $("#pf" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            padclick(FOR, data.id, false);
          }
        });
        $("#pl" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            padclick(LEFT, data.id, true);
          }
        });
        $("#pl" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            padclick(LEFT, data.id, false);
          }
        });
        $("#pr" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            padclick(RIGHT, data.id, true);
          }
        });
        $("#pr" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            padclick(RIGHT, data.id, false);
          }
        });
        $("#pb" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            padclick(BACK, data.id, true);
          }
        });
        $("#pb" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            padclick(BACK, data.id, false);
          }
        });
        $("#pc" + data.id).on({
-          touchstart: function(e) {
+          touchstart: function (e) {
            e.preventDefault();
            padclick(CENTER, data.id, true);
          }
        });
        $("#pc" + data.id).on({
-          touchend: function(e) {
+          touchend: function (e) {
            e.preventDefault();
            padclick(CENTER, data.id, false);
          }
@ -336,23 +348,23 @@ function start() {
      case UI_SLIDER:
        $("#row").append(
          "<div class='two columns card tcenter card-slider " +
-            colorClass(data.color) +
-            "'>" +
-            "<h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr />" +
-            "<div id='sl" +
-            data.id +
-            "' class='rkmd-slider slider-discrete slider-" +
-            colorClass(data.color) +
-            "'>" +
-            "<input type='range' min='0' max='100' value='" +
-            data.value +
-            "'>" +
-            "</div>" +
-            "</div>"
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<div id='sl" +
+          data.id +
+          "' class='rkmd-slider slider-discrete slider-" +
+          colorClass(data.color) +
+          "'>" +
+          "<input type='range' min='0' max='100' value='" +
+          data.value +
+          "'>" +
+          "</div>" +
+          "</div>"
        );
        $("#row").append(
          "<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
@ -366,21 +378,21 @@ function start() {
      case UI_NUMBER:
        $("#row").append(
          "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'>" +
-            "<h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr />" +
-            "<input style='color:black;' id='num" +
-            data.id +
-            "' type='number' value='" +
-            data.value +
-            "' onchange='numberchange(" +
-            data.id +
-            ")' />" +
-            "</div>"
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<input style='color:black;' id='num" +
+          data.id +
+          "' type='number' value='" +
+          data.value +
+          "' onchange='numberchange(" +
+          data.id +
+          ")' />" +
+          "</div>"
        );
        break;

@ -391,21 +403,21 @@ function start() {
      case UI_TEXT_INPUT:
        $("#row").append(
          "<div class='two columns card tcenter " +
-            colorClass(data.color) +
-            "'>" +
-            "<h5 id='" +
-            data.id +
-            "'>" +
-            data.label +
-            "</h5><hr />" +
-            "<input style='color:black;' id='text" +
-            data.id +
-            "' value='" +
-            data.value +
-            "' onchange='textchange(" +
-            data.id +
-            ")' />" +
-            "</div>"
+          colorClass(data.color) +
+          "'>" +
+          "<h5 id='" +
+          data.id +
+          "'>" +
+          data.label +
+          "</h5><hr />" +
+          "<input style='color:black;' id='text" +
+          data.id +
+          "' value='" +
+          data.value +
+          "' onchange='textchange(" +
+          data.id +
+          ")' />" +
+          "</div>"
        );
        break;

@ -418,6 +430,8 @@ function start() {
        break;
    }
  };
+
+  websock.onmessage = handleEvent;
 }

 function numberchange(number) {
@ -478,4 +492,4 @@ function switcher(number, state) {
    $("#sl" + number).removeClass("checked");
    $("#sl" + number).prop("checked", false);
  }
-}
+}
--- a/examples/gui/data/js/controls.min.js
+++ b/examples/gui/data/js/controls.min.js
@ -1,8 +1,8 @@
-const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;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(colorId){colorId=Number(colorId);switch(colorId){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"";}}
+const UI_INITIAL_GUI=100;const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;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(colorId){colorId=Number(colorId);switch(colorId){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;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();}
 function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection &#8635;");$("#conStatus").off();$("#conStatus").on({click:restart});}
 function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
-function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};websock.onmessage=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+
+function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element)};handleEvent(fauxEvent);});break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+
 colorClass(data.color)+
 "'><h5 id='"+
 data.id+
@ -134,7 +134,7 @@ data.value+
 "' onchange='textchange("+
 data.id+
 ")' />"+
-"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};}
+"</div>");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};websock.onmessage=handleEvent;}
 function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);console.log(val);}
 function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);console.log(val);}
 function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);}
--- a/examples/gui/gui.ino
+++ b/examples/gui/gui.ino
@ -157,11 +157,19 @@ void setup(void) {

  /*
     .begin loads and serves all files from PROGMEM directly.
-     If you want to serve the files from SPIFFS use .beginSPIFFS
+     If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
     (.prepareFileSystem has to be run in an empty sketch before)
   */

  dnsServer.start(DNS_PORT, "*", apIP);
+
+  /*
+   * Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
+   SECURE way of limiting access.
+   * Anyone who is able to sniff traffic will be able to intercept your password
+   since it is transmitted in cleartext ESPUI.begin("ESPUI Control", "myuser",
+   "mypassword");
+  */
  ESPUI.begin("ESPUI Control");
 }

--- a/library.json
+++ b/library.json
@ -6,16 +6,13 @@
    "type": "git",
    "url": "https://github.com/s00500/ESPUI.git"
  },
-  "authors": [
-    {
-      "name": "Lukas Bachschwell",
-      "email": "lukas@lbsfilm.at",
-      "url": "https://lbsfilm.at",
-      "maintainer": true
-    }
-  ],
-  "dependencies": [
-    {
+  "authors": [{
+    "name": "Lukas Bachschwell",
+    "email": "lukas@lbsfilm.at",
+    "url": "https://lbsfilm.at",
+    "maintainer": true
+  }],
+  "dependencies": [{
      "name": "ESP Async WebServer",
      "authors": "Hristo Gochkov",
      "frameworks": "arduino"
@ -26,7 +23,7 @@
      "frameworks": "arduino"
    }
  ],
-  "version": "1.6.0",
+  "version": "1.6.1",
  "frameworks": "arduino",
  "platforms": "*"
-}
+}
--- a/library.properties
+++ b/library.properties
@ -1,5 +1,5 @@
 name=ESPUI
-version=1.6.0
+version=1.6.1
 author=Lukas Bachschwell
 maintainer=Lukas Bachschwell <lukas@lbsfilm.at>
 sentence=ESP32 and ESP8266 Web Interface Library
--- a/src/ESPUI.cpp
+++ b/src/ESPUI.cpp
@ -492,6 +492,16 @@ void ESPUIClass::updateSlider(int id, int nValue, int clientId) {
  }
 }

+void ESPUIClass::updateSlider(String label, int nValue, int clientId) {
+  if (!labelExists(label)) {
+    if (DEBUG_ESPUI)
+      Serial.println("UI ERROR: Element does not " + String(label) +
+                     " exist, cannot update!");
+    return;
+  }
+  updateSlider(getIdByLabel(label), nValue, clientId);
+}
+
 void ESPUIClass::updateSwitcher(int id, bool nValue, int clientId) {
  if (id < cIndex && controls[id]->type == UI_SWITCHER) {
    controls[id]->value = nValue ? 1 : 0;
@ -603,28 +613,48 @@ bool ESPUIClass::labelExists(String label) {
  return false;
 }

-// Convert & Transfer Arduino elements to JSON elements
+/*
+Convert & Transfer Arduino elements to JSON elements
+Initially this function used to send the control element data individually.
+Due to a change in the ESPAsyncWebserver library this had top be changed to be
+sent as one blob at the beginning. Therefore a new type is used as well
+*/
 void ESPUIClass::jsonDom(AsyncWebSocketClient *client) {
+  String json;
+  DynamicJsonBuffer jsonBuffer(2000);
+  JsonObject &root = jsonBuffer.createObject();
+  root["type"] = UI_INITIAL_GUI;
+  JsonArray &items = jsonBuffer.createArray();
+
  for (int i = -1; i < cIndex; i++) {
-    String json;
-    StaticJsonBuffer<200> jsonBuffer;
-    JsonObject &root = jsonBuffer.createObject();
+    JsonObject &item = jsonBuffer.createObject();
+
    if (i == -1) {
-      root["type"] = UI_TITEL;
-      root["label"] = String(ui_title);
+      item["type"] = UI_TITEL;
+      item["label"] = String(ui_title);
    } else {
-      root["type"] = controls[i]->type;
-      root["label"] = String(controls[i]->label);
-      root["value"] = String(controls[i]->value);
-      root["color"] = String(controls[i]->color);
-      root["id"] = String(i);
+      item["type"] = controls[i]->type;
+      item["label"] = String(controls[i]->label);
+      item["value"] = String(controls[i]->value);
+      item["color"] = String(controls[i]->color);
+      item["id"] = String(i);
    }
-    root.printTo(json);
-    client->text(json);
+    items.add(item);
  }
+
+  // Send as one big bunch
+  root["controls"] = items;
+  root.printTo(json);
+  client->text(json);
 }

 void ESPUIClass::beginSPIFFS(const char *_title) {
+  begin(_title, NULL, NULL);
+  basicAuth = false;
+}
+
+void ESPUIClass::beginSPIFFS(const char *_title, const char *username,
+                             const char *password) {
  ui_title = _title;
  server = new AsyncWebServer(80);
  ws = new AsyncWebSocket("/ws");
@ -646,10 +676,29 @@ void ESPUIClass::beginSPIFFS(const char *_title) {

  ws->onEvent(onWsEvent);
  server->addHandler(ws);
-  server->serveStatic("/", SPIFFS, "/").setDefaultFile("index.htm");
+
+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+    if (WS_AUTHENTICATION)
+      ws->setAuthentication(this->basicAuthUsername, this->basicAuthPassword);
+    server->serveStatic("/", SPIFFS, "/")
+        .setDefaultFile("index.htm")
+        .setAuthentication(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword);
+
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  } 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,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    request->send(200, "text/plain",
                  String(ESP.getFreeHeap()) + " In SPIFFSmode");
  });
@ -657,26 +706,50 @@ void ESPUIClass::beginSPIFFS(const char *_title) {
  server->onNotFound(
      [](AsyncWebServerRequest *request) { request->send(404); });

-  server->on("/zepto.js", HTTP_GET, [](AsyncWebServerRequest *request) {
-    AsyncWebServerResponse *response = request->beginResponse_P(
-        200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
-    response->addHeader("Content-Encoding", "gzip");
-    request->send(response);
-  });
-
  server->begin();
  if (DEBUG_ESPUI) Serial.println("UI Initialized");
 }

 void ESPUIClass::begin(const char *_title) {
+  begin(_title, NULL, NULL);
+  basicAuth = false;
+}
+
+void ESPUIClass::begin(const char *_title, const char *username,
+                       const char *password) {
+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  }
+
  ui_title = _title;
+
  server = new AsyncWebServer(80);
  ws = new AsyncWebSocket("/ws");

  ws->onEvent(onWsEvent);
  server->addHandler(ws);

+  if (basicAuth && username != NULL && password != NULL) {
+    basicAuthPassword = password;
+    basicAuthUsername = username;
+    basicAuth = true;
+    if (WS_AUTHENTICATION)
+      ws->setAuthentication(this->basicAuthUsername, this->basicAuthPassword);
+
+  } else if (basicAuth) {
+    Serial.println(
+        "Could not enable BasicAuth: Username or password are not set");
+  }
+
  server->on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    AsyncWebServerResponse *response =
        request->beginResponse_P(200, "text/html", HTML_INDEX);
    request->send(response);
@ -685,6 +758,9 @@ void ESPUIClass::begin(const char *_title) {
  // Javascript files

  server->on("/js/zepto.min.js", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    AsyncWebServerResponse *response = request->beginResponse_P(
        200, "application/javascript", JS_ZEPTO_GZIP, sizeof(JS_ZEPTO_GZIP));
    response->addHeader("Content-Encoding", "gzip");
@ -692,6 +768,9 @@ void ESPUIClass::begin(const char *_title) {
  });

  server->on("/js/controls.js", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    AsyncWebServerResponse *response =
        request->beginResponse_P(200, "application/javascript",
                                 JS_CONTROLS_GZIP, sizeof(JS_CONTROLS_GZIP));
@ -700,6 +779,9 @@ void ESPUIClass::begin(const char *_title) {
  });

  server->on("/js/slider.js", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    AsyncWebServerResponse *response = request->beginResponse_P(
        200, "application/javascript", JS_SLIDER_GZIP, sizeof(JS_SLIDER_GZIP));
    response->addHeader("Content-Encoding", "gzip");
@ -709,6 +791,9 @@ void ESPUIClass::begin(const char *_title) {
  // Stylesheets

  server->on("/css/style.css", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    AsyncWebServerResponse *response = request->beginResponse_P(
        200, "text/css", CSS_STYLE_GZIP, sizeof(CSS_STYLE_GZIP));
    response->addHeader("Content-Encoding", "gzip");
@ -717,6 +802,9 @@ void ESPUIClass::begin(const char *_title) {

  server->on(
      "/css/normalize.css", HTTP_GET, [](AsyncWebServerRequest *request) {
+        if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                      ESPUI.basicAuthPassword))
+          return request->requestAuthentication();
        AsyncWebServerResponse *response = request->beginResponse_P(
            200, "text/css", CSS_NORMALIZE_GZIP, sizeof(CSS_NORMALIZE_GZIP));
        response->addHeader("Content-Encoding", "gzip");
@ -725,6 +813,9 @@ void ESPUIClass::begin(const char *_title) {

  // Heap for general Servertest
  server->on("/heap", HTTP_GET, [](AsyncWebServerRequest *request) {
+    if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername,
+                                                  ESPUI.basicAuthPassword))
+      return request->requestAuthentication();
    request->send(200, "text/plain",
                  String(ESP.getFreeHeap()) + " In Memorymode");
  });
--- a/src/ESPUI.h
+++ b/src/ESPUI.h
@ -2,6 +2,7 @@
 #define ESPUI_h

 #define DEBUG_ESPUI true
+#define WS_AUTHENTICATION false

 #include "Arduino.h"
 #include "ArduinoJson.h"
@ -40,6 +41,7 @@ typedef struct Control {
 } Control;

 // Message Types (and control types)
+#define UI_INITIAL_GUI 100
 #define UI_TITEL 0

 #define UI_LABEL 1
@ -100,8 +102,12 @@ typedef struct Control {

 class ESPUIClass {
 public:
-  void begin(const char *_title);        // Setup servers and page in Memorymode
+  void begin(const char *_title);  // Setup servers and page in Memorymode
+  void begin(const char *_title, const char *username, const char *password);
+
  void beginSPIFFS(const char *_title);  // Setup servers and page in SPIFFSmode
+  void beginSPIFFS(const char *_title, const char *username,
+                   const char *password);

  void prepareFileSystem();  // Initially preps the filesystem and loads a lot
                             // of stuff into SPIFFS
@ -159,6 +165,9 @@ class ESPUIClass {
  bool labelExists(String label);

 private:
+  const char *basicAuthUsername;
+  const char *basicAuthPassword;
+  bool basicAuth = true;
  AsyncWebServer *server;
  AsyncWebSocket *ws;
 };
--- a/src/dataControlsJS.h
+++ b/src/dataControlsJS.h
--- a/tools/prepare_static_ui_sources.py
+++ b/tools/prepare_static_ui_sources.py
@ -1,42 +1,15 @@
 #!/usr/bin/env python3

-### import always available modules
+from jsmin import jsmin as jsminify
+from htmlmin import minify as htmlminify
+from csscompressor import compress as cssminify
+import gzip
 import sys
 import os.path
 import argparse
 import re
 from glob import glob

-### import not always installed modules
-missing = []
-try:
-    from jsmin import jsmin as jsminify
-except ModuleNotFoundError as e:
-    missing.append(e)
-try:
-    from htmlmin import minify as htmlminify
-except ModuleNotFoundError as e:
-    missing.append(e)
-try:
-    from csscompressor import compress as cssminify
-except ModuleNotFoundError as e:
-    missing.append(e)
-try:
-    import gzip
-except ModuleNotFoundError as e:
-    missing.append(e)
-if len(missing) > 0:
-    # ERROR: at least one module is missing
-    for m in missing:
-        print("Cannot find module '%s'." % m.name)
-    print("Can't find %s required python module%s. Please install %s. If you're not sure how, a web search" % (len(missing), "s" if len(missing) > 1 else "", "them" if len(missing) > 1 else "it"))
-    print("for 'python', your operating system/python distribution and 'install modules' should help.")
-    print("For most people on unix-y systems, this line should work (possibly w/o the '3'):\n  pip3 install %s" % " ".join(m.name for m in missing))
-    print("Here's the long documentation: https://packaging.python.org/tutorials/installing-packages/")
-    sys.exit(0)
-
-
-### String template for C header files
 TARGET_TEMPLATE = '''const char {constant}[] PROGMEM = R"=====(
 {minidata}
 )=====";
@ -44,9 +17,7 @@ TARGET_TEMPLATE = '''const char {constant}[] PROGMEM = R"=====(
 const uint8_t {constant}_GZIP[{gziplen}] PROGMEM = {{ {gzipdata} }};
 '''

-
 def parse_arguments(args=None):
-    """ Command line argument parser definitions """
    parser = argparse.ArgumentParser(
        description="Prepares ESPUI header files by minifying and gzipping HTML, JS and CSS source files.")
    parser.add_argument("--auto", "--all", "-a", dest="auto", action="store_true",
@ -65,20 +36,6 @@ def parse_arguments(args=None):
    return args

 def get_context(infile, outfile):
-    """ This function creates a 'context object': a dictionary containing all the data needed. 
-    Dictionary members:
-        infile:		Full path to the input file or directory as given or autodetected
-        indir:		Full path to the infile parent.
-        dir:		Full path to the input directory tree (indir or parent of indir).
-        name:		Filename of infile excluding extension (i.e. filename up until the first dot)
-        type:		Lowercase extension of infile; one of: html, js, css.
-        outfile:	Full path to the output file or directory as given or autodetected.
-        outdir:		Full path to output directory.
-        outfilename:	Filename of outfile.
-        minifile:	Full path and filename of the intermediary minified file.
-        constant:	C header file constant name derived from infile.
-    If infile == minifile, the input file already is minified (contains ".min.")
-    """
    infile	= os.path.realpath(infile)
    dir, name, type 	= (os.path.basename(os.path.dirname(infile)), os.path.basename(infile).split(os.path.extsep)[0], os.path.basename(infile).split(os.path.extsep)[-1] )
    type = type.strip(".").lower()
@ -101,11 +58,6 @@ def get_context(infile, outfile):
    return locals()
    
 def perform_gzip(c):
-    """ Performs GZIP on c['minidata'].
-    The returned context object will contain additional fields:
-        gzipdata:	Comma-separated string of decimal byte values representing gzipped data.
-        gziplen:	Count of decimal byte values in gzipdata.
-    """
    compressed = gzip.compress(bytes(c['minidata'], 'utf-8'))
    c['gzipdata'] = ','.join([ str(b) for b in compressed ])
    c['gziplen'] = len(compressed)
@ -113,9 +65,6 @@ def perform_gzip(c):
    return c
    
 def perform_minify(c):
-    """ Performs minification on c['infile'].
-    The returned context object contains the additional field minidata: A string of minified file contents.
-    """
    with open(c['infile']) as infile:
        minifier = {
            'css': cssminify, 
@ -124,27 +73,19 @@ def perform_minify(c):
        }.get(c['type']) or htmlminify
        print("  Using %s minifier" % c['type'])
        c['minidata'] = minifier(infile.read())
-    return c
+    return perform_gzip(c)

 def process_file(infile, outdir, storemini=True):
-    """ Processes one file """
    print("Processing file %s" % infile)
-    # Evaluate file and target context
    c = get_context(infile, outdir)
-    # Minify file data
    c = perform_minify(c)
-    # Gzip minified data
-    c = perform_gzip(c)
-    
    if storemini:
-        # Write intermediary minified file
        if c['infile'] == c['minifile']:
            print("  Original file is already minified, refusing to overwrite it")
        else:
            print("  Writing minified file %s" % c['minifile'])
            with open(c['minifile'], 'w+') as minifile:
                minifile.write(c['minidata'])
-    # Write minified and gzipped data to C header file
    with open(c['outfile'], 'w+') as outfile:
        print("  Using C constant names %s and %s_GZIP" % (c['constant'], c['constant']))
        print("  Writing C header file %s" % c['outfile'])
@ -154,10 +95,6 @@ def filenamefilter(pattern, strings):
    return filter(re.compile(pattern).search, strings)        
        
 def process_dir(sourcedir, outdir, recursive=True, storemini=True):
-    """ Processes a directory tree, recursively. Calls process_file on each HTML/CSS/JS file found.
-    Skips intermediary minified files. Standalone minified files (i.e. files containing ".min." that
-    do not have a full version) are processed without minifying again.
-    """
    pattern = r'/*\.(css|js|htm|html)$'
    files = glob(sourcedir + "/**/*", recursive=True)+glob(sourcedir + "/*") if recursive else glob(sourcedir + "/*")
    files = filenamefilter(pattern, files)
@ -168,7 +105,6 @@ def process_dir(sourcedir, outdir, recursive=True, storemini=True):
            process_file(f, outdir, storemini)
            
 def check_args(args):
-    """ Checks argumental sanity and exits if the arguments are insane. """
    abort = 0
    if not os.path.exists(args.sources):
        print("ERROR: Source %s does not exist" % args.sources)
@ -184,12 +120,8 @@ def check_args(args):
        sys.exit(abort)

 def main(args):
-    """ main entry point. """
-    # default source if not given: realpath(../examples/gui/data)
    args.sources = os.path.realpath(args.sources or os.sep.join((os.path.dirname(os.path.realpath(__file__)), "..", "examples", "gui", "data")))
-    # default target if not given: realpath(../src)
    args.target  = os.path.realpath(args.target  or os.sep.join((os.path.dirname(os.path.realpath(__file__)), "..", "src")))
-    # check arguments
    check_args(args)
    if os.path.isfile(args.sources):
        print("Source %s is a file, will process one file only." % args.sources)
Author	SHA1	Message	Date
Lukas Bachschwell	b21c5d3b2c	1.6.1	2018-12-27 11:37:50 +01:00
Lukas Bachschwell	98d1215d7a	#44 Adding define to reenable WS BasicAuth	2018-12-27 11:34:28 +01:00
Lukas Bachschwell	7a10457f99	#44 Adding Basic Auth - Also authing websockets - Implemented on begin and beginSpiffs - Added notes to Gui example	2018-12-26 13:38:38 +01:00
Lukas Bachschwell	f31575b50c	#43 Sending Initial GUI as one big array - Added new INITIAL_GUI Type - spliting GUI Blob to events in controls js - formating the json in jsonDom into one big array	2018-12-26 12:35:35 +01:00
Lukas Bachschwell	980e20818f	Merge pull request #42 from don41382/patch-2 udpateSlider implementation with label was missing	2018-12-02 14:22:43 +01:00
Felix Eckhardt	e9aca78c9c	udpateSlider implementation with label was missing	2018-12-02 11:41:45 +01:00