From 31644426fc09bc50538d19841c6a2bd220bc690b Mon Sep 17 00:00:00 2001
From: Commander1024 <commander@commander1024.de>
Date: Wed, 29 Jul 2026 21:51:38 +0200
Subject: [PATCH] Update display network status icons

---
 esphome/energymonitor.yaml | 56 +++++++++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/esphome/energymonitor.yaml b/esphome/energymonitor.yaml
index 17fafde..9d50af1 100644
--- a/esphome/energymonitor.yaml
+++ b/esphome/energymonitor.yaml
@@ -29,6 +29,7 @@ wifi:
     - ssid: "Moppelkotze"
       password: !secret moppelkotze_psk
       priority: 5
+  use_address: 192.168.126.250
   on_connect:
     - lambda: id(wifi_connected) = true;
   on_disconnect:
@@ -124,29 +125,46 @@ display:
       it.fill(Color::BLACK);
 
       if (id(sntp_time).now().is_valid()) {
-        it.strftime(284, 10, id(font_small), Color::WHITE, TextAlign::TOP_RIGHT,
+        it.strftime(260, 10, id(font_small), Color::WHITE, TextAlign::TOP_RIGHT,
                     "%H:%M", id(sntp_time).now());
       } else {
-        it.printf(284, 10, id(font_small), Color::WHITE, TextAlign::TOP_RIGHT, "--:--");
+        it.printf(260, 10, id(font_small), Color::WHITE, TextAlign::TOP_RIGHT, "--:--");
       }
 
-      // Four bars show RSSI quality; a crossed outline means Wi-Fi is disconnected.
-      if (id(wifi_connected)) {
-        int bars = 1;
-        if (id(wifi_rssi).has_state()) {
-          const float rssi = id(wifi_rssi).state;
-          bars = rssi >= -55 ? 4 : rssi >= -67 ? 3 : rssi >= -75 ? 2 : 1;
-        }
-        for (int index = 0; index < 4; index++) {
-          const int height = 5 + index * 5;
-          const Color color = index < bars ? Color(64, 255, 64) : Color(48, 48, 48);
-          it.filled_rectangle(290 + index * 5, 30 - height, 3, height, color);
-        }
-      } else {
-        const Color disconnected_color = Color(255, 80, 80);
-        it.rectangle(290, 10, 19, 19, disconnected_color);
-        it.line(290, 10, 308, 28, disconnected_color);
-        it.line(308, 10, 290, 28, disconnected_color);
+      // The WireGuard key reflects the remote peer status.
+      const bool wireguard_online = id(energymonitor_wireguard).is_peer_up();
+      const Color wireguard_color = wireguard_online ? Color(64, 255, 64) : Color(255, 80, 80);
+      it.circle(270, 15, 5, wireguard_color);
+      it.line(274, 19, 284, 29, wireguard_color);
+      it.line(279, 24, 282, 21, wireguard_color);
+      it.line(282, 27, 285, 24, wireguard_color);
+      if (!wireguard_online) {
+        it.line(265, 30, 285, 10, wireguard_color);
+      }
+
+      // A radio-wave Wi-Fi symbol shows RSSI quality; a red slash means disconnected.
+      const bool wifi_online = id(wifi_connected);
+      int wifi_bars = 1;
+      if (wifi_online && id(wifi_rssi).has_state()) {
+        const float rssi = id(wifi_rssi).state;
+        wifi_bars = rssi >= -55 ? 4 : rssi >= -67 ? 3 : rssi >= -75 ? 2 : 1;
+      }
+      const Color wifi_color = wifi_online ? Color(64, 255, 64) : Color(255, 80, 80);
+      it.filled_circle(299, 28, 2, wifi_color);
+      if (wifi_bars >= 2 || !wifi_online) {
+        it.line(296, 25, 299, 22, wifi_color);
+        it.line(299, 22, 302, 25, wifi_color);
+      }
+      if (wifi_bars >= 3 || !wifi_online) {
+        it.line(293, 23, 299, 17, wifi_color);
+        it.line(299, 17, 305, 23, wifi_color);
+      }
+      if (wifi_bars >= 4 || !wifi_online) {
+        it.line(290, 20, 299, 12, wifi_color);
+        it.line(299, 12, 308, 20, wifi_color);
+      }
+      if (!wifi_online) {
+        it.line(290, 30, 308, 12, wifi_color);
       }
 
       if (id(page_index) == 0) {