Merge pull request #221 from OpenEVSE/jeremypoulter/issue220

Fixes to improve the (re)loading of the GUI after update

scripts/extra_script.py

@@ -1,11 +1,7 @@
 from os.path import join, isfile, isdir, basename
 from os import listdir, system
-import json
 from pprint import pprint
-import re
-import requests
-import subprocess
-import sys
+import hashlib
 
 Import("env")
 
@@ -29,17 +25,21 @@ def text_to_header(source_file):
     for line in original.splitlines():
         output += u"\n  \"{}\\n\"".format(line.replace('\\', '\\\\').replace('"', '\\"'))
     output += ";\n"
+    output += "static const char CONTENT_{}_ETAG[] PROGMEM = \"{}\";\n".format(filename, hashlib.sha256(original.encode('utf-8')).hexdigest())
     return output
 
 def binary_to_header(source_file):
     filename = get_c_name(source_file)
     output = "static const char CONTENT_"+filename+"[] PROGMEM = {\n  "
     count = 0
 
+    etag = hashlib.sha256()
+
     with open(source_file, "rb") as source_fh:
         byte = source_fh.read(1)
         while byte != b"":
             output += "0x{:02x}, ".format(ord(byte))
+            etag.update(byte)
             count += 1
             if 16 == count:
                 output += "\n  "
@@ -48,6 +48,7 @@ def binary_to_header(source_file):
             byte = source_fh.read(1)
 
     output += "0x00 };\n"
+    output += "static const char CONTENT_{}_ETAG[] PROGMEM = \"{}\";\n".format(filename, etag.hexdigest())
     return output
 
 def data_to_header(env, target, source):
@@ -100,7 +101,7 @@ def make_static(env, target, source):
             filetype = "JSON"
 
         c_name = get_c_name(out_file)
-        output += "  { \"/"+out_file+"\", CONTENT_"+c_name+", sizeof(CONTENT_"+c_name+") - 1, _CONTENT_TYPE_"+filetype+" },\n"
+        output += "  { \"/"+out_file+"\", CONTENT_"+c_name+", sizeof(CONTENT_"+c_name+") - 1, _CONTENT_TYPE_"+filetype+", CONTENT_"+c_name+"_ETAG },\n"
 
     output += "};\n"
 

src/web_server_static.cpp

@@ -19,6 +19,7 @@ struct StaticFile
   const char *data;
   size_t length;
   const char *type;
+  const char *etag;
 };
 
 #include "web_static/web_server_static_files.h"
@@ -34,9 +35,6 @@ static const char _HOME_PAGE[] PROGMEM = "/home.html";
 static const char _WIFI_PAGE[] PROGMEM = "/wifi_portal.html";
 #define WIFI_PAGE FPSTR(_WIFI_PAGE)
 
-static const char _BUILD_TIME[] PROGMEM = __DATE__ " " __TIME__ " GMT";
-#define BUILD_TIME FPSTR(_BUILD_TIME)
-
 class StaticFileResponse: public MongooseHttpServerResponse
 {
   private:
@@ -87,8 +85,10 @@ bool web_static_handle(MongooseHttpServerRequest *request)
   {
     MongooseHttpServerResponseBasic *response = request->beginResponse();
 
-    MongooseString ifModified = request->headers("If-Modified-Since");
-    if(ifModified.equals(BUILD_TIME)) {
+    response->addHeader(F("Cache-Control"), F("public, max-age=30, must-revalidate"));
+
+    MongooseString ifNoneMatch = request->headers("If-None-Match");
+    if(ifNoneMatch.equals(file->etag)) {
       request->send(304);
       return true;
     }
@@ -101,7 +101,7 @@ bool web_static_handle(MongooseHttpServerRequest *request)
       response->addHeader(F("Access-Control-Allow-Origin"), F("*"));
     }
 
-    response->addHeader("Last-Modified", BUILD_TIME);
+    response->addHeader("Etag", file->etag);
     response->setContent((const uint8_t *)file->data, file->length);
 
     request->send(response);

src/web_static/web_server.assets.js.h

@@ -1,2 +1,3 @@
 static const char CONTENT_ASSETS_JS[] PROGMEM = 
   "!function(r){var n={};function o(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return r[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=r,o.c=n,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(e,\"__esModule\",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&\"object\"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,\"default\",{enumerable:!0,value:t}),2&e&&\"string\"!=typeof t)for(var n in t)o.d(r,n,function(e){return t[e]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,\"a\",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p=\"\",o(o.s=0)}([function(e,t,r){\"use strict\";r.r(t);r(1)},function(e,t,r){}]);\n";
+static const char CONTENT_ASSETS_JS_ETAG[] PROGMEM = "837f049a68283a7e286faa6915b5c7d8cf49e0fc90152592dd1d0c81b5a3a6bf";

src/web_static/web_server.emoncms.jpg.h

@@ -157,3 +157,4 @@ static const char CONTENT_EMONCMS_JPG[] PROGMEM = {
   0x04, 0x78, 0x86, 0x20, 0x2d, 0x23, 0x9e, 0xf5, 0x0f, 0x9d, 0xa3, 0x86, 0x4e, 0x31, 0x72, 0x61, 
   0x3f, 0xcb, 0x08, 0x7b, 0x92, 0x59, 0x79, 0xe7, 0xc8, 0x53, 0x36, 0x77, 0x0a, 0x33, 0x1a, 0xe0, 
   0x75, 0x7a, 0xac, 0xab, 0xe5, 0x7f, 0x43, 0x5f, 0x9f, 0xff, 0xd9, 0x00 };
+static const char CONTENT_EMONCMS_JPG_ETAG[] PROGMEM = "2d8b327212b657791147a1a0b4f047ea068e97850272d10ce982adcd705d6805";

src/web_static/web_server.favicon-152.png.h

@@ -149,3 +149,4 @@ static const char CONTENT_FAVICON_152_PNG[] PROGMEM = {
   0x54, 0x98, 0x0a, 0x53, 0x61, 0x2a, 0x4c, 0x85, 0xa9, 0x30, 0x15, 0xa6, 0xc2, 0x54, 0x18, 0x36, 
   0xfe, 0x03, 0x41, 0xf7, 0xc7, 0x3c, 0xd0, 0xda, 0x1a, 0x12, 0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 
   0x4e, 0x44, 0xae, 0x42, 0x60, 0x82, 0x00 };
+static const char CONTENT_FAVICON_152_PNG_ETAG[] PROGMEM = "6bb51a4549bd1a410f20cccd544771491b350d22f4d1ddf4ddc726c26faaf3ef";

src/web_static/web_server.favicon-167.png.h

@@ -163,3 +163,4 @@ static const char CONTENT_FAVICON_167_PNG[] PROGMEM = {
   0xa6, 0xd3, 0x74, 0x9a, 0x4e, 0xd3, 0x69, 0x3a, 0x4d, 0xa7, 0xe9, 0x34, 0x9d, 0xa6, 0xd3, 0x74, 
   0x9a, 0xce, 0xbe, 0x8e, 0xff, 0x00, 0xb7, 0x45, 0xa5, 0xa6, 0x7f, 0x7f, 0xa7, 0x4b, 0x00, 0x00, 
   0x00, 0x00, 0x49, 0x45, 0x4e, 0x44, 0xae, 0x42, 0x60, 0x82, 0x00 };
+static const char CONTENT_FAVICON_167_PNG_ETAG[] PROGMEM = "c04aabe76eafbcfc4f9c90b5036359aace07ae2e07f1712311e19c0a87868978";

src/web_static/web_server.favicon-16x16.png.h

@@ -42,3 +42,4 @@ static const char CONTENT_FAVICON_16X16_PNG[] PROGMEM = {
   0x94, 0x1b, 0xf4, 0xf5, 0xf9, 0xf7, 0xc6, 0xfb, 0xb0, 0x00, 0x34, 0x06, 0x06, 0x1a, 0x7e, 0xc7, 
   0xc4, 0x51, 0xbf, 0xf3, 0x2f, 0xa4, 0x85, 0xfd, 0x2b, 0x20, 0x03, 0xac, 0x8a, 0x00, 0x00, 0x00, 
   0x00, 0x49, 0x45, 0x4e, 0x44, 0xae, 0x42, 0x60, 0x82, 0x00 };
+static const char CONTENT_FAVICON_16X16_PNG_ETAG[] PROGMEM = "c282688b944a78e5ccf6a176f3f4b3cfa85fc157cf7eb215d73543b037416cdc";

src/web_static/web_server.favicon-180.png.h

@@ -172,3 +172,4 @@ static const char CONTENT_FAVICON_180_PNG[] PROGMEM = {
   0xd1, 0x26, 0xda, 0x44, 0x9b, 0x68, 0x13, 0x6d, 0xa2, 0x4d, 0xb4, 0x89, 0x36, 0xd1, 0x26, 0xda, 
   0x44, 0x3f, 0xd7, 0xe8, 0xff, 0x01, 0xfb, 0x6b, 0x1c, 0x61, 0xb6, 0x3a, 0x07, 0xa2, 0x00, 0x00, 
   0x00, 0x00, 0x49, 0x45, 0x4e, 0x44, 0xae, 0x42, 0x60, 0x82, 0x00 };
+static const char CONTENT_FAVICON_180_PNG_ETAG[] PROGMEM = "5f88008c6f89bd97a14d56abb3e78c0cf368216a8715b155d6720535159f54fa";

src/web_static/web_server.favicon-32x32.png.h

@@ -77,3 +77,4 @@ static const char CONTENT_FAVICON_32X32_PNG[] PROGMEM = {
   0x94, 0x28, 0x9a, 0xe3, 0xb9, 0x90, 0x59, 0xfb, 0xff, 0xe3, 0xf4, 0x61, 0x0b, 0xf8, 0x1b, 0x89, 
   0xbc, 0xd3, 0x48, 0xe7, 0x1c, 0x1e, 0x4b, 0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 0x4e, 0x44, 0xae, 
   0x42, 0x60, 0x82, 0x00 };
+static const char CONTENT_FAVICON_32X32_PNG_ETAG[] PROGMEM = "b95eba8ce98b49dd982be70a4aaf033cbce086e033b34d2f20f14bfcff25d631";

src/web_static/web_server.home.html.h

@@ -62,7 +62,7 @@ static const char CONTENT_HOME_HTML[] PROGMEM =
   "                  optionsText: 'name',\n"
   "                  optionsValue: 'id',\n"
   "                  value: config.tesla_vehicle_id,\n"
-  "                  visible: vehicle.tesla.vehicles().length > 0\"> </select> <span data-bind=\"visible: 0 == vehicle.tesla.vehicles().length\"> Fetching vehicle info ... </span> </p> </div> <div data-bind=\"visible: 'ovms' == vehicle.type()\"> <hr> <h3>Open Vehicle Monitoring System</h3> </div> <div data-bind=\"visible: 'mqtt' == vehicle.type()\"> <hr> <h3>MQTT</h3> <div class=\"box error\" data-bind=\"visible: !config.mqtt_enabled()\"> <h4>MQTT not enabled.</h4> You need to enable MQTT on the <a href=\"#services\">Services</a> tab. </div> <p data-bind=\"visible: config.mqtt_enabled()\"> <b>State of Charge:</b><br> <input data-bind=\"textInput: config.mqtt_vehicle_soc\" type=\"text\" autocapitalize=\"none\"><br> <span class=\"small-text\">The battery level of charge as a percentage</span> </p> <div data-bind=\"visible: config.mqtt_enabled()\"> <b>Range:</b><br> <div class=\"divert\"> <input data-bind=\"textInput: config.mqtt_vehicle_range\" type=\"text\" autocapitalize=\"none\"> <select data-bind=\"value: vehicle.mqtt_vehicle_range_units\"> <option value=\"km\">km</option> <option value=\"mi\">miles</option> </select><br> <span class=\"small-text\">The range (on electric) of the vehicle based on the current battery level</span> </div> </div> <p data-bind=\"visible: config.mqtt_enabled()\"> <b>Time to charge:</b><br> <input data-bind=\"textInput: config.mqtt_vehicle_eta\" type=\"text\" autocapitalize=\"none\"><br> <span class=\"small-text\">The time until the battery is fully charged in seconds</span> </p> </div> <p data-bind=\"\"> <button data-bind=\"visible: vehicle.show_save(),\n"
+  "                  visible: vehicle.tesla.vehicles().length > 0\"> </select> <span data-bind=\"visible: 0 == vehicle.tesla.vehicles().length\"> Fetching vehicle info ... </span> </p> </div> <div data-bind=\"visible: 'ovms' == vehicle.type()\"> <hr> <h3>Open Vehicle Monitoring System</h3> </div> <div data-bind=\"visible: 'mqtt' == vehicle.type()\"> <hr> <h3>MQTT</h3> <div class=\"box error\" data-bind=\"visible: !config.mqtt_enabled()\"> <h4>MQTT not enabled.</h4> You need to enable MQTT on the <a href=\"#services\">Services</a> tab. </div> <p data-bind=\"visible: config.mqtt_enabled()\"> <b>State of Charge topic:</b><br> <input data-bind=\"textInput: config.mqtt_vehicle_soc\" type=\"text\" autocapitalize=\"none\"><br> <span class=\"small-text\">The battery level of charge as a percentage</span> </p> <div data-bind=\"visible: config.mqtt_enabled()\"> <b>Range topic:</b><br> <div class=\"divert\"> <input data-bind=\"textInput: config.mqtt_vehicle_range\" type=\"text\" autocapitalize=\"none\"> <select data-bind=\"value: vehicle.mqtt_vehicle_range_units\"> <option value=\"km\">km</option> <option value=\"mi\">miles</option> </select><br> <span class=\"small-text\">The range (on electric) of the vehicle based on the current battery level</span> </div> </div> <p data-bind=\"visible: config.mqtt_enabled()\"> <b>Time to charge topic:</b><br> <input data-bind=\"textInput: config.mqtt_vehicle_eta\" type=\"text\" autocapitalize=\"none\"><br> <span class=\"small-text\">The time until the battery is fully charged in seconds</span> </p> </div> <p data-bind=\"\"> <button data-bind=\"visible: vehicle.show_save(),\n"
   "                                 click: vehicleStateGroup.save,\n"
   "                                 text: (vehicleStateGroup.fetching() ? 'Saving' : (vehicleStateGroup.success() ? 'Saved' : 'Save')),\n"
   "                                 disable: vehicleStateGroup.fetching\"> Save </button> <button data-bind=\"visible: !vehicle.tesla.have_credentials(),\n"
@@ -72,3 +72,4 @@ static const char CONTENT_HOME_HTML[] PROGMEM =
   "                                 click: vehicle.tesla.logout,\n"
   "                                 text: (vehicle.tesla.fetching() ? 'Saving' : (vehicle.tesla.success() ? 'Saved' : 'Logout')),\n"
   "                                 disable: vehicle.tesla.fetching\"> Logout </button> </p> </div> <div class=\"box380 right error\" data-bind=\"visible: false !== status.tesla_error()\"> <h4>Error</h4> <span data-bind=\"text: status.tesla_error\"></span> </div> <div class=\"box380 right\" data-bind=\"visible: vehicle.has_status\"> <h2>Status</h2> <table> <tr> <th>Status</th> <th><span data-bind=\"text: formatUpdate(openevse.time.vehicle_state_update()), css: updateClass(openevse.time.vehicle_state_update())\"></span></th> </tr> <tr data-bind=\"visible: false !== status.battery_level()\"> <td>Battery Level:</td> <td><span data-bind=\"text: status.battery_level()+ '%'\"></span></td> </tr> <tr data-bind=\"visible: false !== status.battery_range()\"> <td>Battery Range:</td> <td><span data-bind=\"text: status.battery_range() + ' ' + (vehicle.mqtt_vehicle_range_units())\"></span></td> </tr> <tr data-bind=\"visible: false !== status.time_to_full_charge()\"> <td>Time to full charge:</td> <td><span data-bind=\"text: new Date(status.time_to_full_charge() * 1000).toISOString().substr(11, 8)\"></span></td> </tr> </table> </div> </div> </div> <div id=\"footer\"> <br><b> Powered by <a href=\"http://www.openevse.com\">OpenEVSE</a> and <a href=\"https://openenergymonitor.org\">OpenEnergyMonitor</a></b> <br> <b>Version: </b>V<span data-bind=\"text: config.version\"></span> </div> </div> </div> <script src=\"lib.js\"></script> <script src=\"home.js\"></script> </body> </html> \n";
+static const char CONTENT_HOME_HTML_ETAG[] PROGMEM = "f2b1719419cf72504a973245567519fd45863fda3a42732d11173f27eb44625b";

src/web_static/web_server.ohm.jpg.h

@@ -178,3 +178,4 @@ static const char CONTENT_OHM_JPG[] PROGMEM = {
   0x8b, 0xd5, 0x85, 0xd4, 0x00, 0xb0, 0x18, 0xa7, 0x05, 0x5a, 0x5a, 0x21, 0xf2, 0x07, 0x35, 0x3c, 
   0x55, 0x8a, 0xfa, 0x0a, 0x2f, 0x31, 0x80, 0x10, 0x3a, 0x4d, 0x05, 0x94, 0x97, 0xaf, 0xff, 0xd9, 
   0x00 };
+static const char CONTENT_OHM_JPG_ETAG[] PROGMEM = "80f5dca83f53cf6c0f8be15c3f215a1a61b5624de8e388607c2affcf041f79a8";