FHEMWEB/Gauge: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 5. Juli 2026, 08:22 Uhr

Gauge – Bogen-Widgets für Werte

Die Gauge-Widgets visualisieren einen einzelnen oder mehrere numerische Werte als bogenförmige Instrumente im FHEMWEB (PGM2) Frontend. Die Farbe der Fortschrittsbögen passt sich dabei dynamisch an (Hue-Farbverlauf) oder bleibt statisch. Zudem werden Alarm-Grenzwerte unterstützt, die bei Unter- oder Überschreitung einen visuellen Pulse-Effekt auslösen.

Hilfe

Forenthread zum Gauge-Widgets

gauge – Bogen-Widget für Einzelwerte

Das gauge-Widget visualisiert einen einzelnen numerischen Wert als bogenförmiges Instrument. Die Farbe des Fortschrittsbogens passt sich dynamisch an (Hue-Farbverlauf) oder bleibt statisch. Zudem werden Alarm-Grenzwerte unterstützt, die bei Überschreitung einen Pulse-Effekt auslösen.

1️⃣ Widget im Device einrichten

Die Einrichtung erfolgt über das Attribut `widgetOverride`.

attr <devicename> widgetOverride cmd<X>:gauge,<Reading>,<Einheit>,<Min>,<Max>,<Farbe/Modus>,<Skalierung>

2️⃣ Parameter

Parameter	Beschreibung
`Reading`	Name des Readings, dessen Wert angezeigt wird.
`Einheit`	Anzeige-Einheit (z. B. kWh, %).
`Min / Max`	Start- und Endpunkt der Skala.
`Farbe/Modus`	Farbwert (z.B. #ff0000) ODER Hue-Modus: `hue:start:ende:alarmMin:alarmMax`
`Skalierung`	Optional: Skalierungsfaktor (Standard: 1.0).

3️⃣ Beispiel

attr <device> widgetOverride cmd1:gauge,kWh,kWh,0,10000,hue:0:120:3000:none,1.3

multigauge – Mehrfach-Bogen-Widget

Das multigauge-Widget erlaubt die Anzeige von bis zu drei Werten in konzentrischen Bögen. Jedes Reading ist individuell konfigurierbar (Einheit, Farbverlauf, Alarmgrenzen).

1️⃣ Widget im Device einrichten

attr <devicename> widgetOverride cmd<X>:multigauge,<Ring1>,<Ring2>,<Ring3>,<Label>,<Skalierung>

2️⃣ Parameter

Parameter	Beschreibung
`Ring 1-3`	Definition pro Bogen: `Reading:Einheit:Farbe:Min-Max-AlarmMin-AlarmMax`
`Farbe`	Farbwert (z.B. #ff0000) ODER Hue-Modus: `hue-start-ende` (z.B. `hue-240-0`).
`Limits`	Min-Max-AlarmMin-AlarmMax (Werte mit `none` deaktivierbar).
`Label`	Beschriftung für das gesamte Widget.
`Skalierung`	Optional: Skalierungsfaktor (Standard: 1.0).

3️⃣ Beispiel

Alle Ringe aktiviert

attr <device> widgetOverride cmd:multigauge,humidity:%:hue-0-240:0-100-29-61,temperature:°C:hue-240-0:0-35-none-none,ppm:ppm:hue-120-0:0-5000-none-1401,Keller,1.1

Ein Ring aktiviert

attr <device> widgetOverride cmd:multigauge,none,temperature:°C:hue-240-0:0-35-none-none,none,Balkon,1.0

Links

FHEMWEB Widgets

@@ Zeile 35: / Zeile 35: @@
 attr <device> widgetOverride cmd1:gauge,kWh,kWh,0,10000,hue:0:120:3000:none,1.3
 </syntaxhighlight>
----
 == multigauge – Mehrfach-Bogen-Widget ==
@@ Zeile 45: / Zeile 43: @@
 :<code>attr <devicename> widgetOverride cmd<X>:multigauge,<Ring1>,<Ring2>,<Ring3>,<Label>,<Skalierung></code>
-=== 2️⃣ Parameter-Syntax der Ringe ===
+=== 2️⃣ Parameter ===
-Jeder Bogen folgt dem Schema: <code>Reading:Einheit:Farbe:Min-Max-AlarmMin-AlarmMax</code>
+{| class="wikitable"
+! Parameter !! Beschreibung
+|-
+| <code>Ring 1-3</code> || Definition pro Bogen: <code>Reading:Einheit:Farbe:Min-Max-AlarmMin-AlarmMax</code>
+|-
+| <code>Farbe</code> || Farbwert (z.B. #ff0000) ODER Hue-Modus: <code>hue-start-ende</code> (z.B. <code>hue-240-0</code>).
+|-
+| <code>Limits</code> || Min-Max-AlarmMin-AlarmMax (Werte mit <code>none</code> deaktivierbar).
+|-
+| <code>Label</code> || Beschriftung für das gesamte Widget.
+|-
+| <code>Skalierung</code> || Optional: Skalierungsfaktor (Standard: 1.0).
+|}
-* '''Reading''': Name des FHEM-Readings.
+=== 3️⃣ Beispiel ===
-* '''Einheit''': Text (z.B. °C, %).
-* '''Farbe''': Hex-Code oder HUE-Bereich <code>hue-START-ENDE</code> (z.B. <code>hue-240-0</code>).
-* '''Limits''': Min-Max-AlarmMin-AlarmMax (Werte mit <code>none</code> deaktivierbar).
-=== 3️⃣ Beispiel ===
+Alle Ringe aktiviert
 <syntaxhighlight lang="Perl">
 attr <device> widgetOverride cmd:multigauge,humidity:%:hue-0-240:0-100-29-61,temperature:°C:hue-240-0:0-35-none-none,ppm:ppm:hue-120-0:0-5000-none-1401,Keller,1.1
 </syntaxhighlight>
-== Hinweise ==
+Ein Ring aktiviert
-* Nicht benötigte Alarme im `multigauge` auf `none` setzen.
+<syntaxhighlight lang="Perl">
-* Nach dem Update der JS-Dateien bitte den Browser-Cache leeren (z.B. <code>Strg + F5</code>).
+attr <device> widgetOverride cmd:multigauge,none,temperature:°C:hue-240-0:0-35-none-none,none,Balkon,1.0
+</syntaxhighlight>
 == Links ==