refactoring (WEB Server): refactored Web Server Handling

- introduces khoih-prog/WiFiWebServer Library - webserver handling is much cleaner now - splitted CSS and HTML - introduces a small JS File - HTML interface does not reload the whole page for new data - untroduces a small JSON interface which serves the states directly over the webserver - prepared some code for user authentification
mariolukas · Dec 13, 2021 · dc98c6c · dc98c6c
1 parent 886eaee
commit dc98c6c
Show file tree

Hide file tree

Showing 12 changed files with 659 additions and 789 deletions.
diff --git a/CO2-Ampel_Plus/CO2-Ampel_Plus.ino b/CO2-Ampel_Plus/CO2-Ampel_Plus.ino
@@ -65,6 +65,7 @@ void setup() {
   led_set_color(LED_WHITE);
   led_update();
 
+
   modeButton.begin();
   modeButton.read();
 

diff --git a/CO2-Ampel_Plus/Config.h b/CO2-Ampel_Plus/Config.h
@@ -1,7 +1,7 @@
 #ifndef CONFIG_H
 #define CONFIG_H
 
-#define VERSION "v2.2.0"
+#define VERSION "v3.0.0"
 
 #define DEBUG_LOG 0 // 1 = Enable debug log
 
@@ -55,7 +55,7 @@
 #define MQTT_FORMAT 0 
 
 //--- Buzzer configuration ---
-#define BUZZER_ENABLED true
+#define BUZZER_ENABLED false
 #define BUZZER_VOLUME 255 / 128 // 1-255
 
 //--- LED configuration ---
@@ -107,9 +107,20 @@
 #define USE_WIFI_NINA false
 #define USE_WIFI101 true
 #define DEBUG_WIFI_WEBSERVER_PORT Serial
-#define _WIFI_LOGLEVEL_ 3
+
+// WIFI_LOGLEVEL below 4 causes EMPTY HTTP RESPONSE
+// see: https://github.com/khoih-prog/WiFiWebServer/issues/3
+#define _WIFI_LOGLEVEL_ 4
 #define _WIFININA_LOGLEVEL_ 3
 
+#define USE_WIFI_NINA         false
+#define USE_WIFI101           true
+#define USE_WIFI_CUSTOM       false
+
+#define BOARD_TYPE      "CO2 Ampel"
+#define BOARD_NAME      
+#define SHIELD_TYPE     "WiFi101 using WiFi101 Library"
+
 #define HTTP_MAX_DATA_WAIT 5000  // ms to wait for the client to send the request
 #define HTTP_MAX_POST_WAIT 5000  // ms to wait for POST data to arrive
 #define HTTP_MAX_SEND_WAIT 5000  // ms to wait for data chunk to be ACKed

diff --git a/CO2-Ampel_Plus/HTMLAPMode.h b/CO2-Ampel_Plus/HTMLAPMode.h
diff --git a/CO2-Ampel_Plus/HTMLJavaScript.h b/CO2-Ampel_Plus/HTMLJavaScript.h
@@ -0,0 +1,35 @@
+const char javascript[] PROGMEM = R"=====(
+var el = document.getElementById("ampel");
+refreshAmpel();
+setInterval(refreshAmpel, 10000);
+
+function clearAmpel(){
+  el.classList.remove("ampelgruen");
+  el.classList.remove("ampelgelb");
+  el.classList.remove("ampelrot");
+  el.classList.remove("ampelrotblinkend");  
+}
+
+function refreshAmpel() {
+    var xmlhttp = new XMLHttpRequest();
+    var url = "sensors.json";
+    xmlhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+            var state = JSON.parse(this.responseText);
+            clearAmpel();
+            document.getElementById("state").innerHTML = "<b>Co2:</b> "+state.co2+" ppm<br><b>Temperature:</b> "+state.temp + " &ordm;C<br><b>Illumination:</b> "+state.lux+" LUX <br><b>Humidity:</b> "+state.hum+" %<br><b>MQTT connected:</b> "+!!state.mqtt+"<br><br>Firmware: "+state.firmware;
+            if (state.co2 < 800) {
+               el.classList.add("ampelgruen");
+            } else if (state.co2 < 1000) {
+               el.classList.add("ampelgelb");
+            } else if (state.co2 < 1200) {
+               el.classList.add("ampelrot");
+            } else {
+              el.classList.add("ampelrotblinkend");
+            }
+        }
+    };
+    xmlhttp.open("GET", url, true);
+    xmlhttp.send();
+}
+)=====";
diff --git a/CO2-Ampel_Plus/HTMLStatic.h b/CO2-Ampel_Plus/HTMLStatic.h
@@ -0,0 +1,83 @@
+
+/**
+ * Confirmation Page
+ */
+
+const char save_settings_html[] PROGMEM = R"=====(
+<head>
+<meta charset=\"UTF-8\">
+<title>CO2 Ampel Wifi Settings saved</title>
+<meta http-equiv=\"refresh\" content=\"3; URL=/\">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<div class="box">WiFi Settings saved.<br> Device will reboot soon. </div>
+</body>
+</html>
+)=====";
+
+
+/**
+ * Settings Page
+ */
+
+const char settings_header_html[] PROGMEM = R"=====(
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CO2 Ampel Wifi Settings</title>
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<div class="box">
+ <form class="box" action="/save" method="POST" name="loginForm">
+ <h1>Settings</h1>
+)=====";
+
+const char settings_footer_html[] PROGMEM = R"=====(
+</div>
+</body>
+</html>
+)=====";
+
+
+/**
+ * LogIn Page for Settings
+ */
+
+
+const char login_html[] PROGMEM = R"=====(
+<html>
+<head>
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<div class="box">
+<form action="/login" method="POST"><br>
+Password:<input type="password" name="login_password" placeholder="password"><br>
+<input type="submit" name="SUBMIT" value="Submit">
+</form>
+</div>
+<br>
+)=====";
+
+
+/**
+ * Main HTML Page
+ */
+const char root_html[] PROGMEM = R"=====(
+<head>
+<meta charset="UTF-8">
+<title>CO2 Ampel Wifi AP</title>
+<link rel="stylesheet" href="styles.css">
+<link rel="stylesheet" href="ampel.css">
+</head>
+<div class="box"><h1>CO2 Ampel State</h1>
+<span id="ampel" class="css-ampel %s"><span class="cssampelspan"></span></span>
+<br>
+<br>
+<span id="state">Waiting for initial state...</span>
+</div>
+<body></body></html>
+<script type="text/javascript" src="/scripts.js"></script>
+)=====";