From b5999364e2cb0eabda7484c59d563e3578141277 Mon Sep 17 00:00:00 2001
From: RaffaelW <rfflwlf@gmail.com>
Date: Thu, 19 Dec 2024 23:35:45 +0100
Subject: [PATCH] Add connection icons for signal strength

---
 data/index.html |  7 +++++--
 data/status.js  | 30 ++++++++++++++++++++++++++++++
 data/style.css  |  6 ++++++
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/data/index.html b/data/index.html
index 6d48ada..7d22b8c 100644
--- a/data/index.html
+++ b/data/index.html
@@ -33,7 +33,8 @@
 
             <section class="content hidden">
                 <div class="status">
-                    <span>Signalstärke: <span class="rssi"></span> dBm</span>
+                    <!-- placeholder for wifi icon -->
+                    <img class="connection-icon" src="" alt="" />
                     <span>Temp.: <span class="cpu-temp"></span> °C</span>
                     <span>Heap: <span class="heap-percentage"></span> %</span>
                     <span>PSRAM: <span class="psram-percentage"></span> %</span>
@@ -48,7 +49,9 @@
                     <div class="dialog-status-content">
                         <div class="card">
                             <span>Signalstärke</span>
-                            <span class="rssi"> dBm</span>
+                            <!-- placeholder for wifi icon -->
+                            <img class="connection-icon" src="" alt="" />
+                            <span><span class="rssi"></span> dBm</span>
                         </div>
 
                         <div class="card">
diff --git a/data/status.js b/data/status.js
index 806c0c5..ff95fa1 100644
--- a/data/status.js
+++ b/data/status.js
@@ -1,3 +1,5 @@
+import { data } from "./load-data.js";
+
 const statusDialog = document.querySelector(".dialog-status");
 const expandButton = document.querySelector(".expand-status");
 
@@ -30,6 +32,10 @@ function setStatus(status) {
     setValue("sdk-version", status.sdkVersion);
 
     setValue("rssi", status.connection.signalStrength);
+    const icon = selectConnectionIcon(status.connection.signalStrength);
+    document.querySelectorAll(".connection-icon").forEach((img) => {
+        img.src = `/icons/${icon}`;
+    });
 
     setValue("cpu-freq", status.chip.cpuFreqMHz);
     setValue("cpu-cycle-count", status.chip.cycleCount);
@@ -86,4 +92,28 @@ function formatBytes(bytes) {
     return `${Math.round(value * 10) / 10} ${units[index]}`;
 }
 
+function selectConnectionIcon(signalStrength) {
+    // access point
+    if (data.connection == 1) {
+        return "hotspot.svg";
+    }
+
+    // ethernet
+    if (data.connection == 2) {
+        return "lan.svg";
+    }
+
+    // station
+    if (signalStrength >= -50) {
+        return "signal4.svg";
+    }
+    if (signalStrength >= -60) {
+        return "signal3.svg";
+    }
+    if (signalStrength >= -70) {
+        return "signal2.svg";
+    }
+    return "signal1.svg";
+}
+
 setStatus(await loadStatus());
diff --git a/data/style.css b/data/style.css
index d663279..c18fca5 100644
--- a/data/style.css
+++ b/data/style.css
@@ -302,3 +302,9 @@ div:has(.range-value) {
     margin: 0 auto;
     margin-top: 32px;
 }
+
+.connection-icon {
+    width: 24px;
+    height: 24px;
+    padding: 8px;
+}