Use Material Design icons for status indicators

This commit is contained in:
2026-07-30 00:24:30 +02:00
parent 73354c4447
commit 302bc3a924
+23 -29
View File
@@ -109,6 +109,16 @@ font:
glyphsets: glyphsets:
- GF_Latin_Kernel - GF_Latin_Kernel
glyphs: ["äöüÄÖÜß"] glyphs: ["äöüÄÖÜß"]
- file: "fonts/materialdesignicons-webfont.ttf"
id: font_icon
size: 24
glyphs:
- "\U000F0306" # mdi:key
- "\U000F091F" # mdi:wifi-strength-1
- "\U000F0922" # mdi:wifi-strength-2
- "\U000F0925" # mdi:wifi-strength-3
- "\U000F0928" # mdi:wifi-strength-4
- "\U000F092D" # mdi:wifi-strength-off
globals: globals:
- id: page_index - id: page_index
@@ -195,41 +205,25 @@ display:
it.printf(260, 10, id(font_small), Color::WHITE, TextAlign::TOP_RIGHT, "--:--"); it.printf(260, 10, id(font_small), Color::WHITE, TextAlign::TOP_RIGHT, "--:--");
} }
// The WireGuard key reflects the remote peer status. // Green means the WireGuard peer is online; red means it is offline.
const bool wireguard_online = id(energymonitor_wireguard).is_peer_up(); const bool wireguard_online = id(energymonitor_wireguard).is_peer_up();
const Color wireguard_color = wireguard_online ? Color(64, 255, 64) : Color(255, 80, 80); const Color wireguard_color = wireguard_online ? Color(64, 255, 64) : Color(255, 80, 80);
it.circle(270, 15, 5, wireguard_color); it.printf(286, 8, id(font_icon), wireguard_color, TextAlign::TOP_RIGHT, "\U000F0306");
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. // Render the requested MDI Wi-Fi strength glyph in green or red when disconnected.
const bool wifi_online = id(wifi_connected); const bool wifi_online = id(wifi_connected);
int wifi_bars = 1;
if (wifi_online && id(wifisignal).has_state()) {
const float rssi = id(wifisignal).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); const Color wifi_color = wifi_online ? Color(64, 255, 64) : Color(255, 80, 80);
it.filled_circle(299, 28, 2, wifi_color); const char *wifi_icon = "\U000F092D"; // mdi:wifi-strength-off
if (wifi_bars >= 2 || !wifi_online) { if (wifi_online) {
it.line(296, 25, 299, 22, wifi_color); if (id(wifisignal).has_state()) {
it.line(299, 22, 302, 25, wifi_color); const float rssi = id(wifisignal).state;
} wifi_icon = rssi >= -55 ? "\U000F0928" : rssi >= -67 ? "\U000F0925"
if (wifi_bars >= 3 || !wifi_online) { : rssi >= -75 ? "\U000F0922" : "\U000F091F";
it.line(293, 23, 299, 17, wifi_color); } else {
it.line(299, 17, 305, 23, wifi_color); wifi_icon = "\U000F091F";
} }
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);
} }
it.printf(312, 8, id(font_icon), wifi_color, TextAlign::TOP_RIGHT, "%s", wifi_icon);
if (id(page_index) == 0) { if (id(page_index) == 0) {
it.printf(12, 12, id(font_small), Color::WHITE, "Netzleistung"); it.printf(12, 12, id(font_small), Color::WHITE, "Netzleistung");