Optional Wifi strength indicator in WebUI status line (#23352)

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to this project will be documented in this file.
 - Command `JsonPP <command>|backlog <command>;...` to enable JSON PP only once
 - WebUI status line for MQTT and TLS, added `FUNC_WEB_STATUS` event (#23326)
 - Wireguard VPN (#23347)
+- Optional Wifi strength indicator in WebUI status line
 
 ### Breaking Changed
 

tasmota/html_compressed/HTTP_HEAD_STYLE_WIFI.h

@@ -0,0 +1,20 @@
+/////////////////////////////////////////////////////////////////////
+// compressed by tools/unishox/compress-html-uncompressed.py
+// input sha256: 23556064f72413980f725cc78bd44f100d9f6fdc73a629871154b2aaeef79710
+/////////////////////////////////////////////////////////////////////
+
+const size_t HTTP_HEAD_STYLE_WIFI_SIZE = 362;    // compressed size 225 bytes
+const char HTTP_HEAD_STYLE_WIFI_COMPRESSED[] PROGMEM = "\x3A\x0F\xE9\x8D\x3D\xA3\xFA\x25\x0A\x3C\xCE\x4F\x90\xC3\x61\xE0\x53\xD1\xE1\x54"
+                             "\x08\x32\x06\x67\xB6\xB7\x38\xF3\xFB\x0A\xEB\x4C\xD9\xEE\x3A\x5F\xC3\x3D\xA3\x2C"
+                             "\x41\x37\x87\x8F\x33\x8C\x81\x16\xED\x8E\xF6\x04\x2E\x99\xE0\x76\x7C\x47\xF3\xCC"
+                             "\xE5\x10\xC3\x62\xF6\x05\xA2\x2A\x2B\xFD\xF7\x86\x5F\xDF\x50\x21\x59\x3A\xFF\x62"
+                             "\x68\xBF\x1E\x67\x35\x9F\x47\xD1\x02\x1C\xFA\xC1\x87\x58\x78\x16\x7C\xF3\x3C\x8F"
+                             "\xA3\x8F\x88\x8D\x87\xB8\xE9\x67\x19\x02\x16\xE2\x72\x88\x11\x77\x03\x96\x43\x0D"
+                             "\x87\x8A\xC1\x87\x99\xC8\xC8\x61\xB0\xF0\x13\x31\x47\x99\xC9\x08\x61\xB0\xF7\x1D"
+                             "\x2C\xE4\x20\x42\xC2\x0E\x71\x02\x2E\x10\x73\x88\x10\xB0\x83\x9E\x20\x43\xC1\xCE"
+                             "\x22\x18\x6C\x3D\xC7\x4B\x39\x44\x08\x7C\x23\x82\x36\x66\x72\x51\x02\x16\x10\x73"
+                             "\x08\x10\xF0\x83\x9C\x43\x0D\x87\xB8\xE9\x67\x2C\x81\x4F\x87\x3A\xC1\x87\x99\xC8"
+                             "\x40\x87\x84\x1C\xB2\x18\x6C\x3D\xC7\x4B\xF8\x67\x4B\x0E\xB4\xCD\x9E\xD0\x4D\xE0"
+                             "\xB5\xDB\xB7\x67\xB8";
+
+#define  HTTP_HEAD_STYLE_WIFI       Decompress(HTTP_HEAD_STYLE_WIFI_COMPRESSED,HTTP_HEAD_STYLE_WIFI_SIZE).c_str()

tasmota/html_uncompressed/HTTP_HEAD_STYLE_WIFI.h

@@ -0,0 +1,9 @@
+const char HTTP_HEAD_STYLE_WIFI[] PROGMEM =
+  ".wifi{width:18px;height:18px;position:relative}"
+  ".arc{padding:0;position:absolute;border:2px solid transparent;border-radius:50%%;border-top-color:#%06X}"
+  ".a0{width:2px;height:3px;top:10px;left:11px}"
+  ".a1{width:6px;height:6px;top:7px;left:9px}"
+  ".a2{width:12px;height:12px;top:4px;left:6px}"
+  ".a3{width:18px;height:18px;top:1px;left:3px}"
+  ".arc.active{border-top-color:#eaeaea}"
+  ;

tasmota/my_user_config.h

@@ -508,6 +508,7 @@
 //  #define DISABLE_REFERER_CHK                     // [SetOption128] Disable HTTP API
   #define USE_ENHANCED_GUI_WIFI_SCAN             // Enable Wi-Fi scan output with BSSID (+0k5 code)
   #define USE_WEB_STATUS_LINE                      // Enable upper status line in web UI (+0k5 code)
+//    #define USE_WEB_STATUS_LINE_WIFI               // Enable upper left wifi indicator in main page (+0k5 code)
 //  #define USE_ALPINEJS                           // Enable AlpineJS v2.8.2 (+8k8 code)
 //  #define USE_WEBSEND_RESPONSE                   // Enable command WebSend response message (+1k code)
 //  #define USE_WEBGETCONFIG                       // Enable restoring config from external webserver (+0k6)

tasmota/tasmota_xdrv_driver/xdrv_01_9_webserver.ino

@@ -222,11 +222,13 @@ const char HTTP_SCRIPT_INFO_END[] PROGMEM =
   #include "./html_compressed/HTTP_HEAD_LAST_SCRIPT32.h"
   #include "./html_compressed/HTTP_HEAD_STYLE1.h"
   #include "./html_compressed/HTTP_HEAD_STYLE2.h"
+  #include "./html_compressed/HTTP_HEAD_STYLE_WIFI.h"
 #else
   #include "./html_uncompressed/HTTP_HEAD_LAST_SCRIPT.h"
   #include "./html_uncompressed/HTTP_HEAD_LAST_SCRIPT32.h"
   #include "./html_uncompressed/HTTP_HEAD_STYLE1.h"
   #include "./html_uncompressed/HTTP_HEAD_STYLE2.h"
+  #include "./html_uncompressed/HTTP_HEAD_STYLE_WIFI.h"
 #endif
 
 #ifdef USE_ZIGBEE
@@ -985,6 +987,9 @@ void WSContentSendStyle_P(const char* formatP, ...) {
   WSContentSend_P(HTTP_HEAD_STYLE2, WebColor(COL_BUTTON), WebColor(COL_BUTTON_TEXT), WebColor(COL_BUTTON_HOVER),
                   WebColor(COL_BUTTON_RESET), WebColor(COL_BUTTON_RESET_HOVER), WebColor(COL_BUTTON_SAVE), WebColor(COL_BUTTON_SAVE_HOVER),
                   WebColor(COL_BUTTON));
+#ifdef USE_WEB_STATUS_LINE_WIFI
+  WSContentSend_P(HTTP_HEAD_STYLE_WIFI, WebColor(COL_FORM), WebColor(COL_TITLE));
+#endif
 #ifdef USE_ZIGBEE
   WSContentSend_P(HTTP_HEAD_STYLE_ZIGBEE);
 #endif // USE_ZIGBEE
@@ -1927,8 +1932,24 @@ bool HandleRootStatusRefresh(void) {
   }
 
 #ifdef USE_WEB_STATUS_LINE
-  // create a DIV for the upper status bar, positioned right-justified
+#ifdef USE_WEB_STATUS_LINE_WIFI
-  WSContentSend_P(PSTR("<div style='font-size:9px;font-weight:bold;text-align:right;position:absolute;top:0;right:0;display:inline-flex;'>"));
+  // create a first DIV for the upper left status bar, positioned left-justified
+  // we use the same string literal for both lines to reduce Flash
+  WSContentSend_P(PSTR("<div style='font-size:9px;font-weight:bold;text-align:%s;position:absolute;top:0;%s:0;display:inline-flex;'>"), PSTR("left"), PSTR("left"));
+  if (Settings->flag4.network_wifi) {
+    int32_t rssi = WiFi.RSSI();
+    WSContentSend_P(PSTR("<div class='wifi' title='" D_RSSI " %d%%, %d dBm'><div class='arc a3 %s'></div><div class='arc a2 %s'></div><div class='arc a1 %s'></div><div class='arc a0 active'></div></div>"),
+                          WifiGetRssiAsQuality(rssi), rssi,
+                          rssi >= -55 ? "active" : "",
+                          rssi >= -70 ? "active" : "",
+                          rssi >= -85 ? "active" : "");
+  }
+  // display here anything that goes on the left side
+  WSContentSend_P(PSTR("</div>"));
+#endif // USE_WEB_STATUS_LINE_WIFI
+
+  // create a second DIV for the upper right status bar, positioned right-justified
+  WSContentSend_P(PSTR("<div style='font-size:9px;font-weight:bold;text-align:%s;position:absolute;top:0;%s:0;display:inline-flex;'>"), PSTR("right"), PSTR("right"));
   XsnsXdrvCall(FUNC_WEB_STATUS);
   WSContentSend_P(PSTR("</div>"));
 #endif // USE_WEB_STATUS_LINE