Finalized live update of meter data in web gui

src/AmsToMqttBridge.ino

@@ -22,6 +22,7 @@
 #include <WiFi.h>
 #endif
 
+#include "AmsWebServer.h"
 #include "HanConfigAp.h"
 #include "HanReader.h"
 #include "HanToJson.h"
@@ -48,6 +49,8 @@ DallasTemperature tempSensor(&oneWire);
 // Object used to boot as Access Point
 HanConfigAp ap;
 
+AmsWebServer ws;
+
 // WiFi client and MQTT client
 WiFiClient *client;
 MQTTClient mqtt(384);
@@ -102,7 +105,7 @@ void setup() {
 		hanReader.compensateFor09HeaderBug = (ap.config.meterType == 1);
 	}
 
-	ap.enableWeb();
+	ws.setup(&ap.config, debugger);
 }
 
 // the loop function runs over and over again until power down or reset
@@ -121,10 +124,7 @@ void loop()
 		// Reconnect to WiFi and MQTT as needed
 		if (!mqtt.connected()) {
 			MQTT_connect();
-		}
-		else
-		{
-			// Read data from the HAN port
+		} else {
 			readHanPort();
 		}
 	}
@@ -134,6 +134,7 @@ void loop()
 		if (millis() / 1000 % 2 == 0)   led_on();
 		else							led_off();
 	}
+	ws.loop();
 }
 
 
@@ -204,7 +205,7 @@ void mqttMessageReceived(String &topic, String &payload)
 
 void readHanPort()
 {
-	if (hanReader.read())
+	if (hanReader.read() && ap.config.hasConfig())
 	{
 		// Flash LED on, this shows us that data is received
 		led_on();
@@ -234,16 +235,14 @@ void readHanPort()
 
 		hanToJson(data, ap.config.meterType, hanReader);
 
-		// Write the json to the debug port
-		if (debugger) {
-			debugger->print("Sending data to MQTT: ");
-			serializeJsonPretty(json, *debugger);
-			debugger->println();
-		}
+		if(ap.config.mqtt != 0 && strlen(ap.config.mqtt) != 0 && ap.config.mqttPublishTopic != 0 && strlen(ap.config.mqttPublishTopic) != 0) {
+			// Write the json to the debug port
+			if (debugger) {
+				debugger->print("Sending data to MQTT: ");
+				serializeJsonPretty(json, *debugger);
+				debugger->println();
+			}
 
-		// Make sure we have configured a publish topic
-		if (! ap.config.mqttPublishTopic == 0 || strlen(ap.config.mqttPublishTopic) == 0)
-		{
 			// Publish the json to the MQTT server
 			String msg;
 			serializeJson(json, msg);
@@ -251,6 +250,7 @@ void readHanPort()
 			mqtt.publish(ap.config.mqttPublishTopic, msg.c_str());
 			mqtt.loop();
 		}
+		ws.setJson(json);
 
 		// Flash LED off
 		led_off();

src/AmsWebServer.cpp

@@ -0,0 +1,354 @@
+#include "AmsWebServer.h"
+#include "version.h"
+
+#include "index_html.h"
+#include "configuration_html.h"
+#include "bootstrap_css.h"
+#include "application_css.h"
+#include "jquery_js.h"
+#include "gaugemeter_js.h"
+#include "index_js.h"
+
+#include "Base64.h"
+
+#if defined(ESP8266)
+ESP8266WebServer server(80);
+#elif defined(ESP32) // ARDUINO_ARCH_ESP32
+WebServer server(80);
+#endif
+
+void AmsWebServer::setup(configuration* config, Stream* debugger) {
+    this->config = config;
+    this->debugger = debugger;
+
+	server.on("/", std::bind(&AmsWebServer::indexHtml, this));
+	server.on("/configuration", std::bind(&AmsWebServer::configurationHtml, this));
+	server.on("/css/bootstrap.css", std::bind(&AmsWebServer::bootstrapCss, this));
+	server.on("/css/application.css", std::bind(&AmsWebServer::applicationCss, this));
+	server.on("/js/jquery.js", std::bind(&AmsWebServer::jqueryJs, this));
+	server.on("/js/gaugemeter.js", std::bind(&AmsWebServer::gaugemeterJs, this)); 
+	server.on("/js/index.js", std::bind(&AmsWebServer::indexJs, this));
+	server.on("/data.json", std::bind(&AmsWebServer::dataJson, this));
+
+	server.on("/save", std::bind(&AmsWebServer::handleSave, this));
+
+	server.begin(); // Web server start
+
+	print("Web server is ready for config at http://");
+	if(WiFi.getMode() == WIFI_AP) {
+		print(WiFi.softAPIP());
+	} else {
+		print(WiFi.localIP());
+	}
+	println("/");
+
+    if(config->hasConfig() && config->fuseSize > 0) {
+        maxPwr = config->fuseSize * 230;
+    } else {
+		maxPwr = 20000;
+	}
+}
+
+void AmsWebServer::loop() {
+	server.handleClient();
+}
+
+void AmsWebServer::setJson(StaticJsonDocument<500> json) {
+    this->json = json;
+}
+
+bool AmsWebServer::checkSecurity(byte level) {
+	bool access = !config->hasConfig() || config->authSecurity < level;
+	if(!access && config->authSecurity >= level && server.hasHeader("Authorization")) {
+		println(" forcing web security");
+		String expectedAuth = String(config->authUser) + ":" + String(config->authPass);
+
+		String providedPwd = server.header("Authorization");
+		providedPwd.replace("Basic ", "");
+		char inputString[providedPwd.length()];
+		providedPwd.toCharArray(inputString, providedPwd.length()+1);
+
+		int inputStringLength = sizeof(inputString);
+		int decodedLength = Base64.decodedLength(inputString, inputStringLength);
+		char decodedString[decodedLength];
+		Base64.decode(decodedString, inputString, inputStringLength);
+		print("Received auth: ");
+		println(decodedString);
+		access = String(decodedString).equals(expectedAuth);
+	}
+
+	if(!access) {
+		println(" no access, requesting user/pass");
+		server.sendHeader("WWW-Authenticate", "Basic realm=\"Secure Area\"");
+		server.send(401, "text/html", "");
+	}
+	return access;
+}
+
+void AmsWebServer::indexHtml() {
+	println("Serving /index.html over http...");
+
+	if(!checkSecurity(2))
+		return;
+
+	String html = INDEX_HTML;
+	html.replace("${version}", VERSION);
+	if(WiFi.getMode() != WIFI_AP) {
+		html.replace("/css/bootstrap.css", "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");
+		html.replace("/js/jquery.js", "https://code.jquery.com/jquery-3.4.1.min.js");
+	}
+
+	server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+	server.sendHeader("Pragma", "no-cache");
+	server.sendHeader("Expires", "-1");
+	server.send(200, "text/html", html);
+}
+
+void AmsWebServer::configurationHtml() {
+	println("Serving /configuration.html over http...");
+
+	if(!checkSecurity(1))
+		return;
+
+	String html = CONFIGURATION_HTML;
+	html.replace("${version}", VERSION);
+	if(WiFi.getMode() != WIFI_AP) {
+		html.replace("/css/bootstrap.css", "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");
+		html.replace("/js/jquery.js", "https://code.jquery.com/jquery-3.4.1.min.js");
+	}
+
+	server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+	server.sendHeader("Pragma", "no-cache");
+	server.sendHeader("Expires", "-1");
+
+	if(config->hasConfig()) {
+		html.replace("${config.ssid}", config->ssid);
+		html.replace("${config.ssidPassword}", config->ssidPassword);
+		html.replace("${config.meterType}", String(config->fuseSize));
+		for(int i = 0; i<4; i++) {
+			html.replace("${config.meterType" + String(i) + "}", config->meterType == i ? "selected"  : "");
+		}
+		html.replace("${config.mqtt}", config->mqtt);
+		html.replace("${config.mqttPort}", String(config->mqttPort));
+		html.replace("${config.mqttClientID}", config->mqttClientID);
+		html.replace("${config.mqttPublishTopic}", config->mqttPublishTopic);
+		html.replace("${config.mqttSubscribeTopic}", config->mqttSubscribeTopic);
+		html.replace("${config.mqttUser}", config->mqttUser);
+		html.replace("${config.mqttPass}", config->mqttPass);
+		html.replace("${config.authUser}", config->authUser);
+		html.replace("${config.authSecurity}", String(config->authSecurity));
+		for(int i = 0; i<3; i++) {
+			html.replace("${config.authSecurity" + String(i) + "}", config->authSecurity == i ? "selected"  : "");
+		}
+		html.replace("${config.authPass}", config->authPass);
+		html.replace("${config.fuseSize}", String(config->fuseSize));
+		for(int i = 0; i<64; i++) {
+			html.replace("${config.fuseSize" + String(i) + "}", config->fuseSize == i ? "selected"  : "");
+		}
+	} else {
+		html.replace("${config.ssid}", "");
+		html.replace("${config.ssidPassword}", "");
+		html.replace("${config.meterType}", "");
+		for(int i = 0; i<4; i++) {
+			html.replace("${config.meterType" + String(i) + "}", i == 0 ? "selected"  : "");
+		}
+		html.replace("${config.mqtt}", "");
+		html.replace("${config.mqttPort}", "1883");
+		html.replace("${config.mqttClientID}", "");
+		html.replace("${config.mqttPublishTopic}", "");
+		html.replace("${config.mqttSubscribeTopic}", "");
+		html.replace("${config.mqttUser}", "");
+		html.replace("${config.mqttPass}", "");
+		html.replace("${config.authSecurity}", "");
+		for(int i = 0; i<3; i++) {
+			html.replace("${config.authSecurity" + String(i) + "}", i == 0 ? "selected"  : "");
+		}
+		html.replace("${config.authUser}", "");
+		html.replace("${config.authPass}", "");
+		html.replace("${config.fuseSize}", "");
+		for(int i = 0; i<64; i++) {
+			html.replace("${config.fuseSize" + String(i) + "}", i == 0 ? "selected"  : "");
+		}
+	}
+	server.send(200, "text/html", html);
+}
+
+void AmsWebServer::bootstrapCss() {
+	println("Serving /bootstrap.css over http...");
+
+	server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+	server.sendHeader("Pragma", "no-cache");
+	server.sendHeader("Expires", "-1");
+	server.send(200, "text/css", BOOTSTRAP_CSS);
+}
+
+void AmsWebServer::applicationCss() {
+	println("Serving /application.css over http...");
+
+	server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+	server.sendHeader("Pragma", "no-cache");
+	server.sendHeader("Expires", "-1");
+	server.send(200, "text/css", APPLICATION_CSS);
+}
+
+void AmsWebServer::jqueryJs() {
+	println("Serving /jquery.js over http...");
+
+	server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+	server.sendHeader("Pragma", "no-cache");
+	server.sendHeader("Expires", "-1");
+	server.send(200, "application/javascript", JQUERY_JS);
+}
+
+void AmsWebServer::gaugemeterJs() {
+	println("Serving /gaugemeter.js over http...");
+
+	server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+	server.sendHeader("Pragma", "no-cache");
+	server.sendHeader("Expires", "-1");
+	server.send(200, "application/javascript", GAUEGMETER_JS);
+}
+
+void AmsWebServer::indexJs() {
+	println("Serving /index.js over http...");
+
+	server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+	server.sendHeader("Pragma", "no-cache");
+	server.sendHeader("Expires", "-1");
+	server.send(200, "application/javascript", INDEX_JS);
+}
+
+void AmsWebServer::dataJson() {
+	println("Serving /data.json over http...");
+
+	if(!checkSecurity(2))
+		return;
+
+    String jsonStr;
+	if(!json.isNull()) {
+		println(" json has data");
+
+		int u1 = json["data"]["U1"].as<int>();
+		int u2 = json["data"]["U2"].as<int>();
+		int u3 = json["data"]["U3"].as<int>();
+		int pwr = json["data"]["P"].as<int>();
+
+		if(config->hasConfig() && u1 > 0) {
+			maxPwr = config->fuseSize * u1;
+			if(u2 > 0) {
+				maxPwr += config->fuseSize * u2;
+				if(u3 > 0) {
+					maxPwr += config->fuseSize * u3;
+				}
+			}
+		}
+
+		json["maxPower"] = maxPwr;
+		json["pct"]     = min(pwr*100/maxPwr, 100);
+		json["meterType"] = config->meterType;
+		json["currentMillis"] = millis();
+
+		serializeJson(json, jsonStr);
+	} else {
+		println(" json is empty");
+		jsonStr = "{}";
+	}
+
+	server.sendHeader("Cache-Control", "no-cache, no-store, must-revalidate");
+	server.sendHeader("Pragma", "no-cache");
+	server.sendHeader("Expires", "-1");
+	server.send(200, "application/json", jsonStr);
+}
+
+void AmsWebServer::handleSave() {
+	String temp;
+
+	temp = server.arg("ssid");
+	config->ssid = new char[temp.length() + 1];
+	temp.toCharArray(config->ssid, temp.length() + 1, 0);
+
+	temp = server.arg("ssidPassword");
+	config->ssidPassword = new char[temp.length() + 1];
+	temp.toCharArray(config->ssidPassword, temp.length() + 1, 0);
+
+	config->meterType = (byte)server.arg("meterType").toInt();
+
+	temp = server.arg("mqtt");
+	config->mqtt = new char[temp.length() + 1];
+	temp.toCharArray(config->mqtt, temp.length() + 1, 0);
+
+	config->mqttPort = (int)server.arg("mqttPort").toInt();
+
+	temp = server.arg("mqttClientID");
+	config->mqttClientID = new char[temp.length() + 1];
+	temp.toCharArray(config->mqttClientID, temp.length() + 1, 0);
+
+	temp = server.arg("mqttPublishTopic");
+	config->mqttPublishTopic = new char[temp.length() + 1];
+	temp.toCharArray(config->mqttPublishTopic, temp.length() + 1, 0);
+
+	temp = server.arg("mqttSubscribeTopic");
+	config->mqttSubscribeTopic = new char[temp.length() + 1];
+	temp.toCharArray(config->mqttSubscribeTopic, temp.length() + 1, 0);
+
+	temp = server.arg("mqttUser");
+	config->mqttUser = new char[temp.length() + 1];
+	temp.toCharArray(config->mqttUser, temp.length() + 1, 0);
+
+	temp = server.arg("mqttPass");
+	config->mqttPass = new char[temp.length() + 1];
+	temp.toCharArray(config->mqttPass, temp.length() + 1, 0);
+
+	config->authSecurity = (byte)server.arg("authSecurity").toInt();
+
+	temp = server.arg("authUser");
+	config->authUser = new char[temp.length() + 1];
+	temp.toCharArray(config->authUser, temp.length() + 1, 0);
+
+	temp = server.arg("authPass");
+	config->authPass = new char[temp.length() + 1];
+	temp.toCharArray(config->authPass, temp.length() + 1, 0);
+
+	config->fuseSize = (int)server.arg("fuseSize").toInt();
+
+	println("Saving configuration now...");
+
+	if (debugger) config->print(debugger);
+	if (config->save())
+	{
+		println("Successfully saved. Will reboot now.");
+		String html = "<html><body><h1>Successfully Saved!</h1><h3>Device is restarting now...</h3><a href=\"/\">Go to index</a></form>";
+		server.send(200, "text/html", html);
+		yield();
+		delay(1000);
+#if defined(ESP8266)
+		ESP.reset();
+#elif defined(ESP32)
+		ESP.restart();
+#endif
+	}
+	else
+	{
+		println("Error saving configuration");
+		String html = "<html><body><h1>Error saving configuration!</h1></form>";
+		server.send(500, "text/html", html);
+	}
+}
+
+
+size_t AmsWebServer::print(const char* text)
+{
+	if (debugger) debugger->print(text);
+}
+size_t AmsWebServer::println(const char* text)
+{
+	if (debugger) debugger->println(text);
+}
+size_t AmsWebServer::print(const Printable& data)
+{
+	if (debugger) debugger->print(data);
+}
+size_t AmsWebServer::println(const Printable& data)
+{
+	if (debugger) debugger->println(data);
+}

src/AmsWebServer.h

@@ -0,0 +1,61 @@
+#ifndef _AMSWEBSERVER_h
+#define _AMSWEBSERVER_h
+
+#include <ArduinoJson.h>
+#include "configuration.h"
+
+#if defined(ARDUINO) && ARDUINO >= 100
+	#include "Arduino.h"
+#else
+	#include "WProgram.h"
+#endif
+
+#if defined(ESP8266)
+	#include <ESP8266WiFi.h>
+	#include <ESP8266WebServer.h>
+#elif defined(ESP32) // ARDUINO_ARCH_ESP32
+	#include <WiFi.h>
+	#include <WebServer.h>
+#else
+	#warning "Unsupported board type"
+#endif
+
+class AmsWebServer {
+public:
+    void setup(configuration* config, Stream* debugger);
+    void loop();
+	void setJson(StaticJsonDocument<500> json);
+
+private:
+    configuration* config;
+	Stream* debugger;
+    StaticJsonDocument<500> json;
+    int maxPwr;
+
+#if defined(ESP8266)
+	ESP8266WebServer server;
+#elif defined(ESP32) // ARDUINO_ARCH_ESP32
+	WebServer server;
+#endif
+
+	bool checkSecurity(byte level);
+
+	void indexHtml();
+	void configurationHtml();
+	void bootstrapCss();
+	void applicationCss();
+	void jqueryJs();
+	void gaugemeterJs();
+	void indexJs();
+    void dataJson();
+
+	void handleSave();
+
+   	size_t print(const char* text);
+	size_t println(const char* text);
+	size_t print(const Printable& data);
+	size_t println(const Printable& data);
+
+};
+
+#endif

src/Base64.cpp

@@ -0,0 +1,142 @@
+/*
+Copyright (C) 2016 Arturo Guadalupi. All right reserved.
+
+This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+*/
+
+#include "Base64.h"
+#include <Arduino.h>
+#if (defined(__AVR__))
+#include <avr\pgmspace.h>
+#else
+#include <pgmspace.h>
+#endif
+const char PROGMEM _Base64AlphabetTable[] = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+		"abcdefghijklmnopqrstuvwxyz"
+		"0123456789+/";
+
+int Base64Class::encode(char *output, char *input, int inputLength) {
+	int i = 0, j = 0;
+	int encodedLength = 0;
+	unsigned char A3[3];
+	unsigned char A4[4];
+
+	while(inputLength--) {
+		A3[i++] = *(input++);
+		if(i == 3) {
+			fromA3ToA4(A4, A3);
+
+			for(i = 0; i < 4; i++) {
+				output[encodedLength++] = pgm_read_byte(&_Base64AlphabetTable[A4[i]]);
+			}
+
+			i = 0;
+		}
+	}
+
+	if(i) {
+		for(j = i; j < 3; j++) {
+			A3[j] = '\0';
+		}
+
+		fromA3ToA4(A4, A3);
+
+		for(j = 0; j < i + 1; j++) {
+			output[encodedLength++] = pgm_read_byte(&_Base64AlphabetTable[A4[j]]);
+		}
+
+		while((i++ < 3)) {
+			output[encodedLength++] = '=';
+		}
+	}
+	output[encodedLength] = '\0';
+	return encodedLength;
+}
+
+int Base64Class::decode(char * output, char * input, int inputLength) {
+	int i = 0, j = 0;
+	int decodedLength = 0;
+	unsigned char A3[3];
+	unsigned char A4[4];
+
+
+	while (inputLength--) {
+		if(*input == '=') {
+			break;
+		}
+
+		A4[i++] = *(input++);
+		if (i == 4) {
+			for (i = 0; i <4; i++) {
+				A4[i] = lookupTable(A4[i]);
+			}
+
+			fromA4ToA3(A3,A4);
+
+			for (i = 0; i < 3; i++) {
+				output[decodedLength++] = A3[i];
+			}
+			i = 0;
+		}
+	}
+
+	if (i) {
+		for (j = i; j < 4; j++) {
+			A4[j] = '\0';
+		}
+
+		for (j = 0; j <4; j++) {
+			A4[j] = lookupTable(A4[j]);
+		}
+
+		fromA4ToA3(A3,A4);
+
+		for (j = 0; j < i - 1; j++) {
+			output[decodedLength++] = A3[j];
+		}
+	}
+	output[decodedLength] = '\0';
+	return decodedLength;
+}
+
+int Base64Class::encodedLength(int plainLength) {
+	int n = plainLength;
+	return (n + 2 - ((n + 2) % 3)) / 3 * 4;
+}
+
+int Base64Class::decodedLength(char * input, int inputLength) {
+	int i = 0;
+	int numEq = 0;
+	for(i = inputLength - 1; input[i] == '='; i--) {
+		numEq++;
+	}
+
+	return ((6 * inputLength) / 8) - numEq;
+}
+
+//Private utility functions
+inline void Base64Class::fromA3ToA4(unsigned char * A4, unsigned char * A3) {
+	A4[0] = (A3[0] & 0xfc) >> 2;
+	A4[1] = ((A3[0] & 0x03) << 4) + ((A3[1] & 0xf0) >> 4);
+	A4[2] = ((A3[1] & 0x0f) << 2) + ((A3[2] & 0xc0) >> 6);
+	A4[3] = (A3[2] & 0x3f);
+}
+
+inline void Base64Class::fromA4ToA3(unsigned char * A3, unsigned char * A4) {
+	A3[0] = (A4[0] << 2) + ((A4[1] & 0x30) >> 4);
+	A3[1] = ((A4[1] & 0xf) << 4) + ((A4[2] & 0x3c) >> 2);
+	A3[2] = ((A4[2] & 0x3) << 6) + A4[3];
+}
+
+inline unsigned char Base64Class::lookupTable(char c) {
+	if(c >='A' && c <='Z') return c - 'A';
+	if(c >='a' && c <='z') return c - 71;
+	if(c >='0' && c <='9') return c + 4;
+	if(c == '+') return 62;
+	if(c == '/') return 63;
+	return -1;
+}
+
+Base64Class Base64;

src/Base64.h

@@ -0,0 +1,26 @@
+/*
+Copyright (C) 2016 Arturo Guadalupi. All right reserved.
+
+This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+*/
+
+#ifndef _BASE64_H
+#define _BASE64_H
+
+class Base64Class{
+  public:
+    int encode(char *output, char *input, int inputLength);
+    int decode(char * output, char * input, int inputLength);
+    int encodedLength(int plainLength);
+    int decodedLength(char * input, int inputLength);
+
+  private:
+    inline void fromA3ToA4(unsigned char * A4, unsigned char * A3);
+    inline void fromA4ToA3(unsigned char * A3, unsigned char * A4);
+    inline unsigned char lookupTable(char c);
+};
+extern Base64Class Base64;
+
+#endif // _BASE64_H

src/application_css.h

@@ -0,0 +1,46 @@
+const char APPLICATION_CSS[] PROGMEM = R"=="==(
+.bg-purple {
+    background-color: var(--purple);
+}
+
+
+.GaugeMeter {
+    position: Relative;
+    text-align: Center;
+    overflow: Hidden;
+    cursor: Default;
+    display: inline-block;
+}
+
+.GaugeMeter SPAN, .GaugeMeter B {
+    width: 54%;
+    position: Absolute;
+    text-align: Center;
+    display: Inline-Block;
+    color: RGBa(0,0,0,.8);
+    font-weight: 100;
+    font-family: "Open Sans", Arial;
+    overflow: Hidden;
+    white-space: NoWrap;
+    text-overflow: Ellipsis;
+    margin: 0 23%;
+}
+
+.GaugeMeter[data-style="Semi"] B {
+    width: 80%;
+    margin: 0 10%;
+}
+
+.GaugeMeter S, .GaugeMeter U {
+    text-decoration: None;
+    font-size: .60em;
+    font-weight: 200;
+    opacity: .6;
+}
+
+.GaugeMeter B {
+    color: #000;
+    font-weight: 200;
+    opacity: .8;
+}
+)=="==";

src/configuration_html.h

@@ -0,0 +1,147 @@
+const char CONFIGURATION_HTML[] PROGMEM = R"=="==(
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>AMS reader - configuration</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"/>
+    <link rel="stylesheet" type="text/css" href="/css/application.css"/>
+</head>
+<body class="bg-light">
+<main role="main" class="container">
+    <div class="d-flex align-items-center p-3 my-2 text-white-50 bg-purple rounded shadow">
+        <div class="lh-100">
+            <h6 class="mb-0 text-white lh-100">AMS reader - configuration</h6>
+            <small>${version}</small>
+        </div>
+    </div>
+    <form method="post" action="/save">
+        <div class="row">
+            <div class="col-md-6 col-lg-4">
+                <div class="my-2 p-3 bg-white rounded shadow">
+                    <h6 class="border-bottom border-gray pb-2 mb-4">WiFi</h6>
+                    <div class="row form-group">
+                        <label class="col-3">SSID</label>
+                        <div class="col-9">
+                            <input type="text" class="form-control" name="ssid" value="${config.ssid}"/>
+                        </div>
+                    </div>
+                    <div class="row form-group">
+                        <label class="col-3">Password</label>
+                        <div class="col-9">
+                            <input type="password" class="form-control" name="ssidPassword" value="${config.ssidPassword}"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="my-3 p-3 bg-white rounded shadow">
+                    <h6 class="border-bottom border-gray pb-2 mb-4">AMS meter</h6>
+                    <div class="row form-group">
+                        <label class="col-4">Meter type</label>
+                        <div class="col-8">
+                            <select class="form-control" name="meterType">
+                                <option value="0" ${config.meterType0} disabled></option>
+                                <option value="1" ${config.meterType1}>Kaifa</option>
+                                <option value="2" ${config.meterType2}>Aidon</option>
+                                <option value="3" ${config.meterType3}>Kamstrup</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row form-group">
+                        <label class="col-4">Main fuse</label>
+                        <div class="col-8">
+                            <select class="form-control" name="fuseSize">
+                                <option value="" ${config.fuseSize0}></option>
+                                <option value="25" ${config.fuseSize25}>25A</option>
+                                <option value="32" ${config.fuseSize32}>32A</option>
+                                <option value="40" ${config.fuseSize40}>40A</option>
+                                <option value="50" ${config.fuseSize50}>50A</option>
+                                <option value="63" ${config.fuseSize63}>63A</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4">
+                <div class="my-2 p-3 bg-white rounded shadow">
+                    <h6 class="border-bottom border-gray pb-2 mb-4">MQTT</h6>
+                    <div class="row form-group">
+                        <label class="col-4">Hostname</label>
+                        <div class="col-8">
+                            <input type="text" class="form-control" name="mqtt" value="${config.mqtt}"/>
+                        </div>
+                    </div>
+                    <div class="row form-group">
+                        <label class="col-4">Port</label>
+                        <div class="col-8">
+                            <input type="text" class="form-control" name="mqttPort" value="${config.mqttPort}"/>
+                        </div>
+                    </div>
+                    <div class="row form-group">
+                        <label class="col-4">Client ID</label>
+                        <div class="col-8">
+                            <input type="text" class="form-control" name="mqttClientID" value="${config.mqttClientID}"/>
+                        </div>
+                    </div>
+                    <div class="row form-group">
+                        <label class="col-4">Topic</label>
+                        <div class="col-8">
+                            <input type="text" class="form-control" name="mqttPublishTopic" value="${config.mqttPublishTopic}"/>
+                        </div>
+                    </div>
+                    <div class="row form-group">
+                        <label class="col-4">Username</label>
+                        <div class="col-8">
+                            <input type="text" class="form-control" name="mqttUser" value="${config.mqttUser}"/>
+                        </div>
+                    </div>
+                    <div class="row form-group">
+                        <label class="col-4">Password</label>
+                        <div class="col-8">
+                            <input type="password" class="form-control" name="mqttPass" value="${config.mqttPass}"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4">
+                <div class="my-2 p-3 bg-white rounded shadow">
+                    <h6 class="border-bottom border-gray pb-2 mb-4">Web server</h6>
+                    <div class="row form-group">
+                        <label class="col-4">Security</label>
+                        <div class="col-8">
+                            <select class="form-control" name="authSecurity">
+                                <option value="0" ${config.authSecurity0}>None</option>
+                                <option value="1" ${config.authSecurity1}>Only configuration</option>
+                                <option value="2" ${config.authSecurity2}>Everything</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row form-group">
+                        <label class="col-4">Username</label>
+                        <div class="col-8">
+                            <input type="text" class="form-control" name="authUser" value="${config.authUser}"/>
+                        </div>
+                    </div>
+                    <div class="row form-group">
+                        <label class="col-4">Password</label>
+                        <div class="col-8">
+                            <input type="password" class="form-control" name="authPass" value="${config.authPass}"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr/>
+        <div class="row form-group">
+            <div class="col-6">
+                <a href="/" class="btn btn-outline-secondary">Back</a>
+            </div>
+            <div class="col-6 text-right">
+                <button class="btn btn-primary">Save</button>
+            </div>
+        </div>
+    </form>
+</main>
+</body>
+</html>
+)=="==";

src/gaugemeter_js.h

@@ -0,0 +1,277 @@
+const char GAUEGMETER_JS[] PROGMEM = R"=="==(
+/*
+ * AshAlom Gauge Meter.  Version 2.0.0
+ * Copyright AshAlom.com  All rights reserved.
+ * https://github.com/AshAlom/GaugeMeter <- Deleted!
+ * https://github.com/githubsrinath/GaugeMeter <- Backup original.
+ *
+ * Original created by Dr Ash Alom
+ *
+ * This is a bug fixed and modified version of the AshAlom Gauge Meter.
+ * Copyright 2018 Michael Wolf (Mictronics)
+ * https://github.com/mictronics/GaugeMeter
+ *
+ */
+!function ($) {
+    $.fn.gaugeMeter = function (t) {
+        var defaults = $.extend({
+            id: "",
+            percent: 0,
+            used: null,
+            min: null,
+            total: null,
+            size: 100,
+            prepend: "",
+            append: "",
+            theme: "Red-Gold-Green",
+            color: "",
+            back: "RGBa(0,0,0,.06)",
+            width: 3,
+            style: "Full",
+            stripe: "0",
+            animationstep: 1,
+            animate_gauge_colors: false,
+            animate_text_colors: false,
+            label: "",
+            label_color: "Black",
+            text: "",
+            text_size: 0.22,
+            fill: "",
+            showvalue: false
+        }, t);
+        return this.each(function () {
+
+            function getThemeColor(e) {
+                var t = "#2C94E0";
+                return e || (e = 1e-14),
+                    "Red-Gold-Green" === option.theme && (e > 0 && (t = "#d90000"), e > 10 && (t = "#e32100"), e > 20 && (t = "#f35100"), e > 30 && (t = "#ff8700"), e > 40 && (t = "#ffb800"), e > 50 && (t = "#ffd900"), e > 60 && (t = "#dcd800"), e > 70 && (t = "#a6d900"), e > 80 && (t = "#69d900"), e > 90 && (t = "#32d900")),
+                    "Green-Gold-Red" === option.theme && (e > 0 && (t = "#32d900"), e > 10 && (t = "#69d900"), e > 20 && (t = "#a6d900"), e > 30 && (t = "#dcd800"), e > 40 && (t = "#ffd900"), e > 50 && (t = "#ffb800"), e > 60 && (t = "#ff8700"), e > 70 && (t = "#f35100"), e > 80 && (t = "#e32100"), e > 90 && (t = "#d90000")),
+                    "Green-Red" === option.theme && (e > 0 && (t = "#32d900"), e > 10 && (t = "#41c900"), e > 20 && (t = "#56b300"), e > 30 && (t = "#6f9900"), e > 40 && (t = "#8a7b00"), e > 50 && (t = "#a75e00"), e > 60 && (t = "#c24000"), e > 70 && (t = "#db2600"), e > 80 && (t = "#f01000"), e > 90 && (t = "#ff0000")),
+                    "Red-Green" === option.theme && (e > 0 && (t = "#ff0000"), e > 10 && (t = "#f01000"), e > 20 && (t = "#db2600"), e > 30 && (t = "#c24000"), e > 40 && (t = "#a75e00"), e > 50 && (t = "#8a7b00"), e > 60 && (t = "#6f9900"), e > 70 && (t = "#56b300"), e > 80 && (t = "#41c900"), e > 90 && (t = "#32d900")),
+                    "DarkBlue-LightBlue" === option.theme && (e > 0 && (t = "#2c94e0"), e > 10 && (t = "#2b96e1"), e > 20 && (t = "#2b99e4"), e > 30 && (t = "#2a9ce7"), e > 40 && (t = "#28a0e9"), e > 50 && (t = "#26a4ed"), e > 60 && (t = "#25a8f0"), e > 70 && (t = "#24acf3"), e > 80 && (t = "#23aff5"), e > 90 && (t = "#21b2f7")),
+                    "LightBlue-DarkBlue" === option.theme && (e > 0 && (t = "#21b2f7"), e > 10 && (t = "#23aff5"), e > 20 && (t = "#24acf3"), e > 30 && (t = "#25a8f0"), e > 40 && (t = "#26a4ed"), e > 50 && (t = "#28a0e9"), e > 60 && (t = "#2a9ce7"), e > 70 && (t = "#2b99e4"), e > 80 && (t = "#2b96e1"), e > 90 && (t = "#2c94e0")),
+                    "DarkRed-LightRed" === option.theme && (e > 0 && (t = "#d90000"), e > 10 && (t = "#dc0000"), e > 20 && (t = "#e00000"), e > 30 && (t = "#e40000"), e > 40 && (t = "#ea0000"), e > 50 && (t = "#ee0000"), e > 60 && (t = "#f30000"), e > 70 && (t = "#f90000"), e > 80 && (t = "#fc0000"), e > 90 && (t = "#ff0000")),
+                    "LightRed-DarkRed" === option.theme && (e > 0 && (t = "#ff0000"), e > 10 && (t = "#fc0000"), e > 20 && (t = "#f90000"), e > 30 && (t = "#f30000"), e > 40 && (t = "#ee0000"), e > 50 && (t = "#ea0000"), e > 60 && (t = "#e40000"), e > 70 && (t = "#e00000"), e > 80 && (t = "#dc0000"), e > 90 && (t = "#d90000")),
+                    "DarkGreen-LightGreen" === option.theme && (e > 0 && (t = "#32d900"), e > 10 && (t = "#33db00"), e > 20 && (t = "#34df00"), e > 30 && (t = "#34e200"), e > 40 && (t = "#36e700"), e > 50 && (t = "#37ec00"), e > 60 && (t = "#38f100"), e > 70 && (t = "#38f600"), e > 80 && (t = "#39f900"), e > 90 && (t = "#3afc00")),
+                    "LightGreen-DarkGreen" === option.theme && (e > 0 && (t = "#3afc00"), e > 10 && (t = "#39f900"), e > 20 && (t = "#38f600"), e > 30 && (t = "#38f100"), e > 40 && (t = "#37ec00"), e > 50 && (t = "#36e700"), e > 60 && (t = "#34e200"), e > 70 && (t = "#34df00"), e > 80 && (t = "#33db00"), e > 90 && (t = "#32d900")),
+                    "DarkGold-LightGold" === option.theme && (e > 0 && (t = "#ffb800"), e > 10 && (t = "#ffba00"), e > 20 && (t = "#ffbd00"), e > 30 && (t = "#ffc200"), e > 40 && (t = "#ffc600"), e > 50 && (t = "#ffcb00"), e > 60 && (t = "#ffcf00"), e > 70 && (t = "#ffd400"), e > 80 && (t = "#ffd600"), e > 90 && (t = "#ffd900")),
+                    "LightGold-DarkGold" === option.theme && (e > 0 && (t = "#ffd900"), e > 10 && (t = "#ffd600"), e > 20 && (t = "#ffd400"), e > 30 && (t = "#ffcf00"), e > 40 && (t = "#ffcb00"), e > 50 && (t = "#ffc600"), e > 60 && (t = "#ffc200"), e > 70 && (t = "#ffbd00"), e > 80 && (t = "#ffba00"), e > 90 && (t = "#ffb800")),
+                    "White" === option.theme && (t = "#fff"),
+                    "Black" === option.theme && (t = "#000"),
+                    t;
+            }
+            /* The label below gauge. */
+            function createLabel(t, a) {
+                if(t.children("b").length === 0){
+                    $("<b></b>").appendTo(t).html(option.label).css({
+                        "line-height": option.size + 5 * a + "px",
+                        color: option.label_color
+                    });
+                }
+            }
+            /* Prepend and append text, the gauge text or percentage value. */
+            function createSpanTag(t) {
+                var fgcolor = "";
+                if (option.animate_text_colors === true){
+                    fgcolor = option.fgcolor;
+                }
+                var child = t.children("span");
+                if(child.length !== 0){
+                    child.html(r).css({color: fgcolor});
+                    return;
+                }
+                if(option.text_size <= 0.0 || Number.isNaN(option.text_size)){
+                    option.text_size = 0.22;
+                }
+                if(option.text_size > 0.5){
+                    option.text_size = 0.5;
+                }
+                $("<span></span>").appendTo(t).html(r).css({
+                    "line-height": option.size + "px",
+                    "font-size": option.text_size * option.size + "px",
+                    color: fgcolor
+                });
+            }
+            /* Get data attributes as options from div tag. Fall back to defaults when not exists. */
+            function getDataAttr(t) {
+                $.each(dataAttr, function (index, element) {
+                    if(t.data(element) !== undefined && t.data(element) !== null){
+                        option[element] = t.data(element);
+                    } else {
+                        option[element] = $(defaults).attr(element);
+                    }
+
+                    if(element === "fill"){
+                        s = option[element];
+                    }
+
+                    if((element === "size" ||
+                        element === "width" ||
+                        element === "animationstep" ||
+                        element === "stripe"
+                        ) && !Number.isInteger(option[element])){
+                        option[element] = parseInt(option[element]);
+                    }
+
+                    if(element === "text_size"){
+                        option[element] = parseFloat(option[element]);
+                    }
+                });
+            }
+            /* Draws the gauge. */
+            function drawGauge(a) {
+		if(M < 0) M = 0;
+                if(M > 100) M = 100;
+                var lw = option.width < 1 || isNaN(option.width) ? option.size / 20 : option.width;
+                g.clearRect(0, 0, b.width, b.height);
+                g.beginPath();
+                g.arc(m, v, x, G, k, !1);
+                if(s){
+                    g.fillStyle = option.fill;
+                    g.fill();
+                }
+                g.lineWidth = lw;
+                g.strokeStyle = option.back;
+                option.stripe > parseInt(0) ? g.setLineDash([option.stripe], 1) : g.lineCap = "round";
+                g.stroke();
+                g.beginPath();
+                g.arc(m, v, x, -I, P * a - I, !1);
+                g.lineWidth = lw;
+                g.strokeStyle = option.fgcolor;
+                g.stroke();
+                c > M && (M += z, requestAnimationFrame(function(){
+                    drawGauge(Math.min(M, c) / 100);
+                }, p));
+            }
+
+            $(this).attr("data-id", $(this).attr("id"));
+            var r,
+                dataAttr = ["percent",
+                    "used",
+                    "min",
+                    "total",
+                    "size",
+                    "prepend",
+                    "append",
+                    "theme",
+                    "color",
+                    "back",
+                    "width",
+                    "style",
+                    "stripe",
+                    "animationstep",
+                    "animate_gauge_colors",
+                    "animate_text_colors",
+                    "label",
+                    "label_color",
+                    "text",
+                    "text_size",
+                    "fill",
+                    "showvalue"],
+                option = {},
+                c = 0,
+                p = $(this),
+                s = false;
+            p.addClass("gaugeMeter");
+            getDataAttr(p);
+
+            if(Number.isInteger(option.used) && Number.isInteger(option.total)){
+                var u = option.used;
+                var t = option.total;
+                if(Number.isInteger(option.min)) {
+                    if(option.min < 0) {
+                        t -= option.min;
+                        u -= option.min;
+                    }
+                }
+                c = u / (t / 100);
+            } else {
+                if(Number.isInteger(option.percent)){
+                    c = option.percent;
+                } else {
+                    c = parseInt(defaults.percent);
+                }
+            }
+            if(c < 0) c = 0;
+            if(c > 100) c = 100;
+
+            if( option.text !== "" && option.text !== null && option.text !== undefined){
+                if(option.append !== "" && option.append !== null && option.append !== undefined){
+                    r = option.text + "<u>" + option.append + "</u>";
+                } else {
+                    r = option.text;
+                }
+                if(option.prepend !== "" && option.prepend !== null && option.prepend !== undefined){
+                    r = "<s>" + option.prepend + "</s>" + r;
+                }
+            } else {
+                if(defaults.showvalue === true || option.showvalue === true){
+                    r = option.used;
+                } else {
+                    r = c.toString();
+                }
+                if(option.prepend !== "" && option.prepend !== null && option.prepend !== undefined){
+                    r = "<s>" + option.prepend + "</s>" + r;
+                }
+
+                if(option.append !== "" && option.append !== null && option.append !== undefined){
+                    r = r + "<u>" + option.append + "</u>";
+                }
+            }
+
+            option.fgcolor = getThemeColor(c);
+            if(option.color !== "" && option.color !== null && option.color !== undefined){
+                option.fgcolor = option.color;
+            }
+
+            if(option.animate_gauge_colors === true){
+                option.fgcolor = getThemeColor(c);
+            }
+            createSpanTag(p);
+
+            if(option.style !== "" && option.style !== null && option.style !== undefined){
+                createLabel(p, option.size / 13);
+            }
+
+            $(this).width(option.size + "px");
+
+            var b = $("<canvas></canvas>").attr({width: option.size, height: option.size}).get(0),
+                    g = b.getContext("2d"),
+                    m = b.width / 2,
+                    v = b.height / 2,
+                    _ = 360 * option.percent,
+                    x = (_ * (Math.PI / 180), b.width / 2.5),
+                    k = 2.3 * Math.PI,
+                    G = 0,
+                    M = 0 === option.animationstep ? c : 0,
+                    z = Math.max(option.animationstep, 0),
+                    P = 2 * Math.PI,
+                    I = Math.PI / 2,
+                    R = option.style;
+            var child = $(this).children("canvas");
+            if(child.length !== 0){
+                /* Replace existing canvas when new percentage was written. */
+                child.replaceWith(b);
+            } else {
+                /* Initially create canvas. */
+                $(b).appendTo($(this));
+            }
+
+            if ("Semi" === R){
+                k = 2 * Math.PI;
+                G = 3.13;
+                P = 1 * Math.PI;
+                I = Math.PI / .996;
+            }
+            if ("Arch" === R){
+                k = 2.195 * Math.PI;
+                G = 1, G = 655.99999;
+                P = 1.4 * Math.PI;
+                I = Math.PI / .8335;
+            }
+            drawGauge(M / 100);
+        });
+    };
+}
+(jQuery);
+)=="==";

src/index_html.h

@@ -0,0 +1,74 @@
+const char INDEX_HTML[] PROGMEM = R"=="==(
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>AMS reader</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"/>
+    <link rel="stylesheet" type="text/css" href="/css/application.css"/>
+    <script src="/js/jquery.js"></script>
+    <script src="/js/gaugemeter.js"></script>
+</head>
+<body class="bg-light">
+<main role="main" class="container">
+    <div class="d-flex align-items-center p-3 my-2 text-white-50 bg-purple rounded shadow">
+        <div class="lh-100">
+            <h6 class="mb-0 text-white lh-100">AMS reader</h6>
+            <small>${version}</small>
+        </div>
+    </div>
+    <div class="my-3 p-3 bg-white rounded shadow">
+        <h6 class="border-bottom border-gray pb-2 mb-4">Current meter values</h6>
+        <div class="row">
+            <div class="col-md-4">
+                <div class="text-center">
+                    <div class="GaugeMeter rounded"
+                         data-size="200px"
+                         data-text_size="0.11"
+                         data-width="25"
+                         data-style="Arch"
+                         data-theme="Green-Gold-Red"
+                         data-animationstep="0"
+                         data-animate_gauge_colors="1"
+
+                         data-percent="0"
+                         data-text="-"
+                         data-label="Consumption"
+                         data-append="W"
+                    ></div>
+                </div>
+            </div>
+            <div class="col-md-4">
+                <div id="P1" class="row" style="display: none;">
+                    <div class="col-2">P1</div>
+                    <div class="col-5 text-right"><span id="U1">-</span> V</div>
+                    <div class="col-5 text-right"><span id="I1">-</span> A</div>
+                </div>
+                <div id="P2" class="row" style="display: none;">
+                    <div class="col-2">P2</div>
+                    <div class="col-5 text-right"><span id="U2">-</span> V</div>
+                    <div class="col-5 text-right"><span id="I2">-</span> A</div>
+                </div>
+                <div id="P3" class="row" style="display: none;">
+                    <div class="col-2">P3</div>
+                    <div class="col-5 text-right"><span id="U3">-</span> V</div>
+                    <div class="col-5 text-right"><span id="I3">-</span> A</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <hr/>
+    <div class="row form-group">
+        <div class="col-6">
+            <a href="https://github.com/gskjold/AmsToMqttBridge/releases" class="btn btn-outline-secondary">Release notes</a>
+        </div>
+        <div class="col-6 text-right">
+            <a href="/configuration" class="btn btn-primary">Configuration</a>
+        </div>
+    </div>
+</main>
+<script src="/js/index.js"></script>
+</body>
+</html>
+)=="==";

src/index_js.h

@@ -0,0 +1,84 @@
+const char INDEX_JS[] PROGMEM = R"=="==(
+$(".GaugeMeter").gaugeMeter();
+
+var wait = 500;
+var nextrefresh = wait;
+var fetch = function() {
+    $.ajax({
+        url: '/data.json',
+        dataType: 'json',
+    }).done(function(json) {
+        var el = $(".GaugeMeter");
+        var rate = 2500;
+        if(json.data) {
+            el.data('percent', json.pct);
+            if(json.data.P) {
+                var num = parseFloat(json.data.P);
+                if(num > 1000) {
+                    num = num / 1000;
+                    el.data('text', num.toFixed(1));
+                    el.data('append','kW');
+                } else {
+                    el.data('text', num);
+                    el.data('append','W');
+                }
+            }
+            el.gaugeMeter();
+
+            for(var id in json.data) {
+                var str = json.data[id];
+                if(isNaN(str)) {
+                    $('#'+id).html(str);
+                } else {
+                    var num = parseFloat(str);
+                    $('#'+id).html(num.toFixed(1));
+                }
+            }
+
+            if(json.data.U1 > 0) {
+                $('#P1').show();
+            }
+
+            if(json.data.U2 > 0) {
+                $('#P2').show();
+            }
+
+            if(json.data.U3 > 0) {
+                $('#P3').show();
+            }
+
+            if(json.meterType == 3) {
+                rate = 10000;
+            }
+            if(json.currentMillis && json.up) {
+                nextrefresh = rate - ((json.currentMillis - json.up) % rate) + wait;
+            } else {
+                nextrefresh = 2500;
+            }
+        } else {
+            el.data('percent', 0);
+            el.data('text', '-');
+            el.gaugeMeter();
+            $('#P1').hide();
+            $('#P2').hide();
+            $('#P3').hide();
+            nextrefresh = 2500;
+        }
+        if(!nextrefresh || nextrefresh < 500) {
+            nextrefresh = 2500;
+        }
+        setTimeout(fetch, nextrefresh);
+    }).fail(function() {
+        el.data('percent', 0);
+        el.data('text', '-');
+        el.gaugeMeter();
+        $('#P1').hide();
+        $('#P2').hide();
+        $('#P3').hide();
+        nextrefresh = 10000;
+        setTimeout(fetch, nextrefresh);
+    });
+}
+setTimeout(fetch, nextrefresh);
+
+)=="==";