HTML and JS now minified and put into sketch using python script, JS served from ESP

ESP-Weather.ino

@@ -54,6 +54,11 @@ void handleRoot() {
     waitingForReplies = true;
 }
 
+void handleJS() {
+    String message = F(JS_FILE);
+    server.send(200, "text/javascript", message);
+}
+
 void handleNotFound() {
     String message = "File Not Found\n\n";
     message += "URI: ";
@@ -106,6 +111,8 @@ void setup(void) {
     broadcastIP = ~WiFi.subnetMask() | WiFi.gatewayIP();
 
     server.on("/", handleRoot);
+    server.on("/index.html", handleRoot);
+    server.on("/view.js", handleJS);
     server.onNotFound(handleNotFound);
     server.begin();
 
@@ -197,7 +204,7 @@ void loop(void) {
     if (((millis() - lastTime) >= MAX_BROADCAST_WAIT_TIME) && (waitingForReplies == true)) {
         Serial.println("Timeout, sending response...");
         waitingForReplies = false;
-        String message = HTML_BEGIN;
+        String message = F(HTML_BEGIN);
         message += "var clients = Array(";
         message += "\"" + WiFi.localIP().toString() + "\"";
         if (vecClients.size() > 0) {
@@ -210,7 +217,7 @@ void loop(void) {
             }
         }
         message += ");";
-        message += HTML_END;
+        message += F(HTML_END);
 
         vecClients.clear();
 

README.md

@@ -20,8 +20,6 @@ The JavaScript client code includes the following libraries, using their officia
 * [jQuery](https://jquery.com/)
 * [Chart.js](https://github.com/chartjs/Chart.js)
 
-The client script from this repository is served using the [RawGit Service](https://rawgit.com) development URLs. Consider using their production CDN when using this project seriously.
-
 ## License
 
     ----------------------------------------------------------------------------

client-script.js

@@ -1,37 +1,34 @@
 var arrSensor = Array();
 
-$(document).ready(function() {
+textAvailableSensors = "Available Sensors";
+textButtonNext = "Continue";
 
-    $('body').append(`<div class="container-fluid">
-            <div class="page-header">
-                <h2>Systemadministration</h2>
-            </div>
-            <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;">Verf&uuml;gbare Sensoren (0/0)</div>
-                        <div class="panel-body">
-                            <ul class="list-group" id="listSensors"></ul>
-                            <div id="alertDiv"></div>
-                            <button class="btn btn-primary" disabled="" id="btnSubmit">Weiter</button>
-                        </div>
+$(document).ready(function() {
+    $('#main-part').append(`
+        <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;">
+                        ` + textAvailableSensors + ` (0/0)
+                    </div>
+                    <div class="panel-body">
+                        <ul class="list-group" id="listSensors"></ul>
+                        <div id="alertDiv"></div>
+                        <button class="btn btn-primary" disabled="" id="btnSubmit">
+                            ` + textButtonNext + `
+                        </button>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="footer">
-            <div class="container-fluid">
-                <p class="text-muted">&copy; Copyright 2016 by Christian H&ouml;gerle und Thomas Buck</p>
-            </div>
         </div>`);
 
     // aktuelle Uhrzeit fuer die Graphen ermitteln
     var actTime = new Date();
-    actTime = actTime.getHours() + ":" + (actTime.getMinutes() < 10 ? '0':'') + actTime.getMinutes(); 
+    actTime = actTime.getHours() + ":" + (actTime.getMinutes() < 10 ? '0':'') + actTime.getMinutes();
 
     $('#listSensorsHeading').empty();
-    $('#listSensorsHeading').html("Verf&uuml;gbare Sensoren (0/" + clients.length + ")");
-    
+    $('#listSensorsHeading').html(textAvailableSensors + " (0/" + clients.length + ")");
+
     // Alle clients im Array iterieren und Websocket abfragen
     var count = [0];
     jQuery.each(clients, function(index, client) {
@@ -59,12 +56,12 @@ function webSocket(wsUri, wsPort, count, clientsCount) {
         });
         sensor.arrEEPROM = arrEEPROM;
         arrSensor.push(sensor);
-        $('#listSensorsHeading').html("Verf&uuml;gbare Sensoren (" + sensor.id + "/" + clientsCount + ")");
+        $('#listSensorsHeading').html(textAvailableSensors + " (" + sensor.id + "/" + clientsCount + ")");
         $('#listSensors').append('<li class="list-group-item">' +
-                                    ' Sensor ' + sensor.id +  
-                                    ' | IP: ' + sensor.ip + 
-                                    ' | aktuelle Temperatur: ' + sensor.actualTemp + 
-                                    ' | aktuelle Luftfeuchtigkeit: ' + sensor.actualHum + 
+                                    ' Sensor ' + sensor.id +
+                                    ' | IP: ' + sensor.ip +
+                                    ' | aktuelle Temperatur: ' + sensor.actualTemp +
+                                    ' | aktuelle Luftfeuchtigkeit: ' + sensor.actualHum +
                                 '</li>');
 
         // Alle Sensoren erfolgreich abgefragt
@@ -82,7 +79,7 @@ function webSocket(wsUri, wsPort, count, clientsCount) {
         }
         console.log(evt.data);
     };
-} 
+}
 
 function generateView(arrSensor, actTime) {
     $('#contentDiv').append(`<div class="col-md-12 col-lg-12">
@@ -100,10 +97,10 @@ function generateView(arrSensor, actTime) {
     jQuery.each(arrSensor, function(index, sensor) {
         $('.nav-pills').append('<li><a class="navtab" data-toggle="tab" href="#' + sensor.id + '">Sensor ' + sensor.id + '</a></li>');
     });
-    
+
     // Flag fuer gemeinsamer Graph -> true
     generateGraph(true, arrSensor, actTime);
-    
+
     $(".navtab").click(function(event) {
         $('#contentPanel').empty();
         if(event.target.text == "Home") {
@@ -126,17 +123,17 @@ function generateGraph(flag, sensor, actTime) {
                             </div>`);
     if(flag) { // ein Graph für alle Sensoren
         var length = 0;
-        jQuery.each(sensor, function(index, tmp) { 
+        jQuery.each(sensor, function(index, tmp) {
             if(length < tmp.arrEEPROM.length) {
                 length = tmp.arrEEPROM.length;
             }
         });
 
-        var labels = Array();       
+        var labels = Array();
         actHour = actTime.split(":")[0];
         for(var i = length; i > 0; i--) {
-            labels.unshift(actHour + ":00"); 
-            actHour = (actHour - 1).mod(24); 
+            labels.unshift(actHour + ":00");
+            actHour = (actHour - 1).mod(24);
         }
         labels.push(actTime);
 
@@ -145,18 +142,18 @@ function generateGraph(flag, sensor, actTime) {
 
         var tmpDataTemperature = Array();
         var tmpDataHumidity = Array();
-        jQuery.each(sensor, function(index, tmp) { 
+        jQuery.each(sensor, function(index, tmp) {
             for(var i = 0; i < (length - tmp.arrEEPROM.length); i++) {
                 tmpDataTemperature.push([]);
                 tmpDataHumidity.push([]);
             }
-            jQuery.each(tmp.arrEEPROM, function(index, value) { 
+            jQuery.each(tmp.arrEEPROM, function(index, value) {
                 tmpDataTemperature.push(value['T']);
-                tmpDataHumidity.push(value['H']);  
+                tmpDataHumidity.push(value['H']);
             });
             tmpDataTemperature.push(tmp.actualTemp);
             tmpDataHumidity.push(tmp.actualHum);
-            
+
             var lineColor = getRandomColor();
             dataTemperature.push({label: "Sensor " + tmp.id, data: tmpDataTemperature, fill: false,
                 borderWidth: 3, borderColor : lineColor,});
@@ -168,31 +165,31 @@ function generateGraph(flag, sensor, actTime) {
         });
     } else { // Graph für einzelnen Sensor
         var labels = Array();
-        
+
         var tmpDataTemperature = Array();
         var tmpDataHumidity = Array();
         actHour = actTime.split(":")[0];
         actHour = (actHour - sensor.arrEEPROM.length).mod(24);
-        jQuery.each(sensor.arrEEPROM, function(index, value) { 
+        jQuery.each(sensor.arrEEPROM, function(index, value) {
             actHour = (actHour + 1).mod(24);
-            labels.push(actHour + ":00");  
+            labels.push(actHour + ":00");
             tmpDataTemperature.push(value['T']);
-            tmpDataHumidity.push(value['H']);  
+            tmpDataHumidity.push(value['H']);
         });
-        
+
         labels.push(actTime);
         tmpDataTemperature.push(sensor.actualTemp);
         tmpDataHumidity.push(sensor.actualHum);
 
-        var dataTemperature = [{label: 'Temperatur [C]', data: tmpDataTemperature, 
+        var dataTemperature = [{label: 'Temperatur [C]', data: tmpDataTemperature,
+                                fill: false, borderWidth: 3, borderColor: '#337ab7',}];
+        var dataHumidity = [{label: 'Luftfeuchtigkeit [%RH]', data: tmpDataHumidity,
                                 fill: false, borderWidth: 3, borderColor: '#337ab7',}];
-        var dataHumidity = [{label: 'Luftfeuchtigkeit [%RH]', data: tmpDataHumidity, 
-                                fill: false, borderWidth: 3, borderColor: '#337ab7',}]; 
     }
 
     var tempCtx = $('#temperaturChart');
     var humCtx = $('#humidityChart');
-    
+
     var tempChart = new Chart(tempCtx, {
         type: 'line',
         data: {
@@ -234,4 +231,4 @@ function getRandomColor() {
         color += letters[Math.floor(Math.random() * 16)];
     }
     return color;
-}
+}

convert-static.py

@@ -0,0 +1,64 @@
+#!/usr/bin/env python3
+
+# convert-static.py
+#
+# This program reads the static html and js files and converts them into
+# minified strings defined in a C header file.
+#
+# ----------------------------------------------------------------------------
+# "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
+# ----------------------------------------------------------------------------
+
+def fileToString(filename, js = False):
+    f = open(filename, "r")
+    sf = ""
+    for s in f.readlines():
+        st = s
+        if js == True:
+            ss = s.split("//", 1)
+            if ss[0][-1:] == ':':
+                st = ss[0] + '//' + ss[1]
+            else:
+                st = ss[0]
+        sf += st
+    return sf
+
+def minify(text, js = False):
+    text = text.replace("\r", "")
+    text = text.replace("\t", "")
+    text = text.replace("  ", " ")
+    if js == True:
+        text = text.replace("\\", "\\\\")
+        text = text.replace("\n", "\\n")
+    else:
+        text = text.replace("\n", " ")
+    text = text.replace("  ", " ")
+    text = text.replace("  ", " ")
+    text = text.replace("  ", " ")
+    text = text.replace("  ", " ")
+    text = text.replace("  ", " ")
+    text = text.replace("> <", "><")
+    if js == True:
+        text = text.replace("\\n ", "\\n")
+    if (text[-1:] == ' '):
+        text = text[:-1]
+    return text
+
+def getAsDefine(name, text):
+    return "#define " + name + " \"" + text.replace("\"", "\\\"") + "\""
+
+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]))
+
+js = fileToString("client-script.js", True)
+js = minify(js, True)
+print(getAsDefine("JS_FILE", js))
+

template.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>ESP-Weather</title>
+        <script src="https://code.jquery.com/jquery-3.1.1.min.js"
+                integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
+                crossorigin="anonymous"
+                defer>
+        </script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
+            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
+            crossorigin="anonymous"
+            defer>
+        </script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"
+            integrity="sha256-RASNMNlmRtIreeznffYMDUxBXcMRjijEaaGF/gxT6vw="
+            crossorigin="anonymous"
+            defer>
+        </script>
+        <script src="view.js" defer>
+        </script>
+        <link rel="stylesheet"
+            href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+            crossorigin="anonymous">
+    </head>
+    <body>
+        <script type="text/javascript">
+            /* %% INSERT_CLIENT_LIST_HERE %% */
+        </script>
+
+        <div id="main-part" class="container-fluid">
+            <div class="page-header">
+                <h2>ESP-Weather</h2>
+            </div>
+        </div>
+        <div class="footer">
+            <div class="container-fluid">
+                <p class="text-muted">
+                    &copy; Copyright 2016 by Christian H&ouml;gerle und Thomas Buck
+                </p>
+            </div>
+        </div>
+    </body>
+</html>
+