Added stylesheet and favicon. Static data put into own auto-generated header.

ESP-Weather.ino

@@ -25,8 +25,11 @@
 #include <WiFiManager.h>
 #include "config.h"
 #include "ntp.h"
+#include "static.h"
 #include "storage.h"
 
+#define DEBUG
+
 SHT21 sensor;
 ESP8266WebServer server(WEB_PORT);
 WiFiServer serverSocket(WEBSOCKET_PORT);
@@ -41,8 +44,10 @@ byte storeAtBoot = 1;
 unsigned long lastTime = 0;
 bool waitingForReplies = false;
 
-void handleRoot() {
+static void handleRoot() {
+#ifdef DEBUG
     Serial.println("Sending UDP Broadcast...");
+#endif // DEBUG
 
     // Send UDP broadcast to other modules
     udp.beginPacket(broadcastIP, BROADCAST_PORT);
@@ -54,12 +59,21 @@ void handleRoot() {
     waitingForReplies = true;
 }
 
-void handleJS() {
+static void handleJS() {
     String message = F(JS_FILE);
     server.send(200, "text/javascript", message);
 }
 
-void handleNotFound() {
+static void handleCSS() {
+    String message = F(CSS_FILE);
+    server.send(200, "text/css", message);
+}
+
+static void handleFavicon() {
+    server.send_P(200, faviconMimeType, (PGM_P)favicon, faviconSize);
+}
+
+static void handleNotFound() {
     String message = "File Not Found\n\n";
     message += "URI: ";
     message += server.uri();
@@ -75,10 +89,12 @@ void handleNotFound() {
 }
 
 void setup(void) {
-    // Debugging
-    Serial.begin(115200);
+    Serial.begin(DEBUG_BAUDRATE);
+
+#ifdef DEBUG
     Serial.println();
     Serial.println("ESP-Weather init...");
+#endif // DEBUG
 
     //sensor.begin();
     // The SHT library is simpy calling Wire.begin(), but the default
@@ -100,28 +116,36 @@ void setup(void) {
     if (WiFi.status() != WL_CONNECTED) {
         while (WiFi.status() != WL_CONNECTED) {
             delay(500);
+#ifdef DEBUG
             Serial.print(".");
+#endif // DEBUG
         }
+#ifdef DEBUG
         Serial.println("");
+#endif // DEBUG
     }
 
+#ifdef DEBUG
     Serial.print("IP address: ");
     Serial.println(WiFi.localIP());
+#endif // DEBUG
 
     broadcastIP = ~WiFi.subnetMask() | WiFi.gatewayIP();
 
     server.on("/", handleRoot);
     server.on("/index.html", handleRoot);
     server.on("/view.js", handleJS);
+    server.on("/style.css", handleCSS);
+    server.on("/favicon.ico", handleFavicon);
     server.onNotFound(handleNotFound);
     server.begin();
-
     serverSocket.begin();
-
     ntpInit();
-
     udp.begin(BROADCAST_PORT);
+
+#ifdef DEBUG
     Serial.println("ESP-Weather ready!");
+#endif // DEBUG
 }
 
 void loop(void) {
@@ -152,8 +176,10 @@ void loop(void) {
         }
         json += "]}";
 
+#ifdef DEBUG
         Serial.println("WebSocket Response:");
         Serial.println(json);
+#endif // DEBUG
 
         webSocketServer.sendData(json);
         client.flush();
@@ -163,7 +189,9 @@ void loop(void) {
     // EEPROM-Schreiben jede Stunde
     if ((((((millis() - timeReceived) / 1000) + timestamp) % 3600) == 0)
             && (timestamp != 0) && (((millis() - lastStorageTime) > 100000) || storeAtBoot) ) {
+#ifdef DEBUG
         Serial.println("Storing new data packet...");
+#endif // DEBUG
         lastStorageTime = millis();
         storeAtBoot = 0;
         if (storage.header.count < MAX_STORAGE) {
@@ -188,11 +216,15 @@ void loop(void) {
             packetBuffer[len] = 0;
         }
 
+#ifdef DEBUG
         Serial.print("Got UDP packet: ");
         Serial.println(packetBuffer);
+#endif // DEBUG
 
         if (strcmp(packetBuffer, UDP_PING_CONTENTS) == 0) {
+#ifdef DEBUG
             Serial.println("Broadcast");
+#endif // DEBUG
             udp.beginPacket(udp.remoteIP(), udp.remotePort());
             udp.print(UDP_ECHO_CONTENTS);
             udp.endPacket();
@@ -202,7 +234,10 @@ void loop(void) {
     }
 
     if (((millis() - lastTime) >= MAX_BROADCAST_WAIT_TIME) && (waitingForReplies == true)) {
+#ifdef DEBUG
         Serial.println("Timeout, sending response...");
+#endif // DEBUG
+
         waitingForReplies = false;
         String message = F(HTML_BEGIN);
         message += "var clients = Array(";

README.md

@@ -4,6 +4,8 @@ This [started out as a project](https://github.com/g40st/Systemadministration) f
 
 ## Dependencies
 
+The included Favicon is ['weather' by 'jkeks'](http://www.favicon.cc/?action=icon&file_id=757061).
+
 ### ESP8266
 
 Download and install the following libraries to your `Arduino/libraries` folder. Of course, you also need the [Arduino core for the ESP8266 WiFi chip](https://github.com/esp8266/Arduino) installed from the IDE Board Manager.

client-script.js

@@ -1,3 +1,15 @@
+// This is the client-side Javascript that receives the IPs of all available
+// local ESP-Weather modules, reads their values using the Websocket interface
+// and renders the graphs to visualize them.
+//
+// ----------------------------------------------------------------------------
+// "THE BEER-WARE LICENSE" (Revision 42):
+// <xythobuz@xythobuz.de> & <ghost-ghost@web.de> wrote this file.  As long as
+// you retain this notice you can do whatever you want with this stuff. If we
+// meet some day, and you think this stuff is worth it, you can buy us a beer
+// in return.                                   Thomas Buck & Christian Högerle
+// ----------------------------------------------------------------------------
+
 var arrSensor = Array();
 
 textAvailableSensors = "Available Sensors";
@@ -8,7 +20,7 @@ $(document).ready(function() {
         <div class="row" id="contentDiv">
             <div class="col-md-5 col-lg-5">
                 <div class="panel panel-primary">
-                    <div class="panel-heading" id="listSensorsHeading" style="font-size: 18px;">
+                    <div class="panel-heading" id="listSensorsHeading">
                         ` + textAvailableSensors + ` (0/0)
                     </div>
                     <div class="panel-body">
@@ -232,3 +244,4 @@ function getRandomColor() {
     }
     return color;
 }
+

client-style.css

@@ -0,0 +1,12 @@
+// ----------------------------------------------------------------------------
+// "THE BEER-WARE LICENSE" (Revision 42):
+// <xythobuz@xythobuz.de> & <ghost-ghost@web.de> wrote this file.  As long as
+// you retain this notice you can do whatever you want with this stuff. If we
+// meet some day, and you think this stuff is worth it, you can buy us a beer
+// in return.                                   Thomas Buck & Christian Högerle
+// ----------------------------------------------------------------------------
+
+#listSensorsHeading {
+    font-size: 18px;
+}
+

convert-static.py

@@ -13,6 +13,8 @@
 # in return.                                   Thomas Buck & Christian Högerle
 # ----------------------------------------------------------------------------
 
+import binascii
+
 def fileToString(filename, js = False):
     f = open(filename, "r")
     sf = ""
@@ -44,21 +46,80 @@ def minify(text, js = False):
     text = text.replace("> <", "><")
     if js == True:
         text = text.replace("\\n ", "\\n")
+        text = text.replace("\\n\\n", "\\n")
     if (text[-1:] == ' '):
         text = text[:-1]
+    if (text[-2:] == '\\n'):
+        text = text[:-2]
+    if (text[0] == ' '):
+        text = text[1:]
+    if (text[0] == '\\') and (text[1] == 'n'):
+        text = text[2:]
     return text
 
+def getBinaryFile(filename, id):
+    f = open(filename, "rb")
+    s = "const static unsigned char " + id + "[] PROGMEM = {\n";
+    i = 0
+    c = 0
+    while True:
+        d = f.read(1)
+        if not d:
+            break
+        if i == 0:
+            s += "    "
+        s += "0x" + binascii.hexlify(d).decode("utf-8") + ", "
+        i += 1
+        c += 1
+        if i >= 8:
+            i = 0
+            s += "\n"
+    if i == 0:
+        s = s[:-3]
+    else:
+        s = s[:-2]
+    s += "\n"
+    s += "};"
+    s = "const static unsigned int " + id + "Size = " + str(c) + ";\n" + "const static char faviconMimeType[] PROGMEM = \"image/x-icon\";\n" + s;
+    return s
+
 def getAsDefine(name, text):
     return "#define " + name + " \"" + text.replace("\"", "\\\"") + "\""
 
+print("Preparing static.h output file...")
+f = open("static.h", "w")
+f.write("// !!DO NOT EDIT, AUTO-GENERATED FILE!!\n")
+f.write("// Use convert-static.py to recreate this.\n")
+f.write("\n")
+f.write("#ifndef __STATIC_H__\n")
+f.write("#define __STATIC_H__\n")
+f.write("\n")
+
+print("Processing template.html...")
 template = fileToString("template.html")
 template = minify(template)
 templates = template.split(" /* %% INSERT_CLIENT_LIST_HERE %% */ ")
 
-print(getAsDefine("HTML_BEGIN", templates[0]))
-print(getAsDefine("HTML_END", templates[1]))
+f.write(getAsDefine("HTML_BEGIN", templates[0]) + "\n")
+f.write(getAsDefine("HTML_END", templates[1]) + "\n")
 
+print("Processing client-script.js...")
 js = fileToString("client-script.js", True)
 js = minify(js, True)
-print(getAsDefine("JS_FILE", js))
+f.write(getAsDefine("JS_FILE", js) + "\n")
+
+print("Processing client-style.css...")
+css = fileToString("client-style.css", True)
+css = minify(css)
+f.write(getAsDefine("CSS_FILE", css) + "\n")
+f.write("\n")
+
+print("Processing favicon.ico...")
+f.write(getBinaryFile("favicon.ico", "favicon") + "\n")
+
+print("Done!")
+f.write("\n")
+f.write("#endif // __STATIC_H__\n")
+f.write("\n")
+f.close()
 

template.html

@@ -25,6 +25,8 @@
             href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
             integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
             crossorigin="anonymous">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <link rel="icon" href="favicon.ico" type="image/x-icon">
     </head>
     <body>
         <script type="text/javascript">