use inline multilayer battery SVG

components/wifi-manager/CMakeLists.txt

@@ -2,7 +2,7 @@ idf_component_register(SRCS "dns_server.c" "http_server.c" "wifi_manager.c"
                        INCLUDE_DIRS .
                        REQUIRES esp_common 
                        PRIV_REQUIRES newlib freertos  spi_flash nvs_flash mdns pthread wpa_supplicant cmd_system 
-                       EMBED_FILES style.css code.js index.html bootstrap.min.css.gz jquery.min.js.gz popper.min.js.gz bootstrap.min.js.gz battery0.svg battery1.svg battery2.svg battery3.svg battery4.svg
+                       EMBED_FILES style.css code.js index.html bootstrap.min.css.gz jquery.min.js.gz popper.min.js.gz bootstrap.min.js.gz
 
 
 )

components/wifi-manager/battery0.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6z"/></svg>

components/wifi-manager/battery1.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6z"/></svg>

components/wifi-manager/battery2.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6zm4 0h-3v6h3v-6z"/></svg>

components/wifi-manager/battery3.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6zm4 0h-3v6h3v-6zm4 0h-3v6h3v-6z"/></svg>

components/wifi-manager/battery4.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6zm4 0h-3v6h3v-6zm4 0h-3v6h3v-6zm4 0h-3v6h3v-6z"/></svg>

components/wifi-manager/code.js

@@ -708,20 +708,20 @@ function checkStatus(){
         }
         if (data.hasOwnProperty('Voltage')) {
             var voltage = data['Voltage'];
-            var i;
+            var layer;
             if (voltage > 0) {
                 if (inRange(voltage, 5.8, 6.2) || inRange(voltage, 8.8, 9.2)) {
-                    i = 0;
+                    layer = bat0;
                 } else if (inRange(voltage, 6.2, 6.8) || inRange(voltage, 9.2, 10.0)) {
-                    i = 1;
+                    layer = bat1;
                 } else if (inRange(voltage, 6.8, 7.1) || inRange(voltage, 10.0, 10.5)) {
-                    i = 2;
+                    layer = bat2;
                 } else if (inRange(voltage, 7.1, 7.5) || inRange(voltage, 10.5, 11.0)) {
-                    i = 3;
+                    layer = bat3;
                 } else {
-                    i = 4;
+                    layer = bat4;
                 }
-                $("#battery").html('<img src="battery'+i+'.svg" />');
+                layer.setAttribute("display","inline");
             }
         }
         blockAjax = false;

components/wifi-manager/component.mk

@@ -6,7 +6,7 @@
 # lib(subdirectory_name).a in the build directory. This behaviour is entirely configurable,
 # please read the SDK documents if you need to do this.
 #
-COMPONENT_EMBED_FILES := style.css code.js index.html bootstrap.min.css.gz jquery.min.js.gz popper.min.js.gz bootstrap.min.js.gz battery0.svg battery1.svg battery2.svg battery3.svg battery4.svg
+COMPONENT_EMBED_FILES := style.css code.js index.html bootstrap.min.css.gz jquery.min.js.gz popper.min.js.gz bootstrap.min.js.gz
 
 #CFLAGS += -D LOG_LOCAL_LEVEL=ESP_LOG_DEBUG 
 CFLAGS += -D LOG_LOCAL_LEVEL=ESP_LOG_INFO \

components/wifi-manager/http_server.c

@@ -77,16 +77,6 @@ extern const uint8_t code_js_start[] asm("_binary_code_js_start");
 extern const uint8_t code_js_end[] asm("_binary_code_js_end");
 extern const uint8_t index_html_start[] asm("_binary_index_html_start");
 extern const uint8_t index_html_end[] asm("_binary_index_html_end");
-extern const uint8_t battery0_svg_start[] asm("_binary_battery0_svg_start");
-extern const uint8_t battery0_svg_end[] asm("_binary_battery0_svg_end");
-extern const uint8_t battery1_svg_start[] asm("_binary_battery1_svg_start");
-extern const uint8_t battery1_svg_end[] asm("_binary_battery1_svg_end");
-extern const uint8_t battery2_svg_start[] asm("_binary_battery2_svg_start");
-extern const uint8_t battery2_svg_end[] asm("_binary_battery2_svg_end");
-extern const uint8_t battery3_svg_start[] asm("_binary_battery3_svg_start");
-extern const uint8_t battery3_svg_end[] asm("_binary_battery3_svg_end");
-extern const uint8_t battery4_svg_start[] asm("_binary_battery4_svg_start");
-extern const uint8_t battery4_svg_end[] asm("_binary_battery4_svg_end");
 
 
 /* const http headers stored in ROM */
@@ -404,26 +394,6 @@ void http_server_netconn_serve(struct netconn *conn) {
 				else if(strstr(line, "GET /bootstrap.css ")) {
 					http_server_send_resource_file(conn,bootstrap_css_gz_start, bootstrap_css_gz_end, "text/css", "gzip" );
 				}
-				else if(strstr(line, "GET /battery0.svg ")) {
-					netconn_write(conn, http_svg_hdr, sizeof(http_svg_hdr) - 1, NETCONN_NOCOPY);
-					netconn_write(conn, battery0_svg_start, battery0_svg_end - battery0_svg_start, NETCONN_NOCOPY);
-				}
-				else if(strstr(line, "GET /battery1.svg ")) {
-					netconn_write(conn, http_svg_hdr, sizeof(http_svg_hdr) - 1, NETCONN_NOCOPY);
-					netconn_write(conn, battery1_svg_start, battery1_svg_end - battery1_svg_start, NETCONN_NOCOPY);
-				}
-				else if(strstr(line, "GET /battery2.svg ")) {
-					netconn_write(conn, http_svg_hdr, sizeof(http_svg_hdr) - 1, NETCONN_NOCOPY);
-					netconn_write(conn, battery2_svg_start, battery2_svg_end - battery2_svg_start, NETCONN_NOCOPY);
-				}
-				else if(strstr(line, "GET /battery3.svg ")) {
-					netconn_write(conn, http_svg_hdr, sizeof(http_svg_hdr) - 1, NETCONN_NOCOPY);
-					netconn_write(conn, battery3_svg_start, battery3_svg_end - battery3_svg_start, NETCONN_NOCOPY);
-				}
-				else if(strstr(line, "GET /battery4.svg ")) {
-					netconn_write(conn, http_svg_hdr, sizeof(http_svg_hdr) - 1, NETCONN_NOCOPY);
-					netconn_write(conn, battery4_svg_start, battery4_svg_end - battery4_svg_start, NETCONN_NOCOPY);
-				}
 
                 //dynamic stuff
 				else if(strstr(line, "GET /scan.json ")) {

components/wifi-manager/index.html

@@ -24,7 +24,25 @@
     </head>
 
     <body>
-        <div id="battery"></div>
+        <div id="battery">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <g id="bat0" display="none">
+                    <path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6z"/>
+                </g>
+                <g id="bat1" display="none">
+                    <path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6z"/>
+                </g>
+                <g id="bat2" display="none">
+                    <path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6zm4 0h-3v6h3v-6z"/>
+                </g>
+                <g id="bat3" display="none">
+                    <path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6zm4 0h-3v6h3v-6zm4 0h-3v6h3v-6z"/>
+                </g>
+                <g id="bat4" display="none">
+                    <path d="M19 8v8h-17v-8h17zm2-2h-21v12h21v-12zm1 9h.75c.69 0 1.25-.56 1.25-1.25v-3.5c0-.69-.56-1.25-1.25-1.25h-.75v6zm-16-6h-3v6h3v-6zm4 0h-3v6h3v-6zm4 0h-3v6h3v-6zm4 0h-3v6h3v-6z"/>
+                </g>
+            </svg>
+        </div>
         <ul id="navbar" class="nav nav-tabs">
             <li class="nav-item">
                 <a class="nav-link active" data-toggle="tab" href="#tab-wifi">WiFi</a>