FHEMWEB/Gauge: Unterschied zwischen den Versionen

Aktuelle Version vom 5. Juli 2026, 08:41 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.

1️⃣ Widget im Device einrichten

Die Einrichtung erfolgt über das Attribut `webCmd` und `widgetOverride`.

attr <devicename> webCmd cmd<X>
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

Die Einrichtung erfolgt über das Attribut `webCmd` und `widgetOverride`.

attr <devicename> webCmd cmd<X>
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 1: / Zeile 1: @@
+[[Datei:gaugewidgets.png|Mini|rechts]]
 == 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 {{Link2Forum|Topic=145001|LinkText= 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.
+Das '''gauge'''-Widget visualisiert einen einzelnen numerischen Wert als bogenförmiges Instrument.
-=== 1️⃣ Widget-Datei aus contrib laden ===
+=== 1️⃣ Widget im Device einrichten ===
+Die Einrichtung erfolgt über das Attribut `webCmd` und `widgetOverride`.
 <syntaxhighlight lang="Perl">
-{ Svn_GetFile('contrib/fhemweb_gauge.js', 'www/pgm2/fhemweb_gauge.js') }
+attr <devicename> webCmd cmd<X>
+attr <devicename> widgetOverride cmd<X>:gauge,<Reading>,<Einheit>,<Min>,<Max>,<Farbe/Modus>,<Skalierung>
 </syntaxhighlight>
-=== 2️⃣ Widget im Device einrichten ===
+=== 2️⃣ Parameter ===
-Die Einrichtung erfolgt über das Attribut `widgetOverride`.
-:<code>attr <devicename> widgetOverride cmd<X>:gauge,<Reading>,<Einheit>,<Min>,<Max>,<Farbe/Modus>,<Skalierung></code>
-=== Parameter ===
 {| class="wikitable"
 ! Parameter !! Beschreibung
@@ Zeile 34: / Zeile 41: @@
 |}
-=== Beispiel ===
+=== 3️⃣ Beispiel ===
 <syntaxhighlight lang="Perl">
 attr <device> widgetOverride cmd1:gauge,kWh,kWh,0,10000,hue:0:120:3000:none,1.3
 </syntaxhighlight>
----
 == multigauge – Mehrfach-Bogen-Widget ==
@@ Zeile 45: / Zeile 51: @@
 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-Datei aus contrib laden ===
+=== 1️⃣ Widget im Device einrichten ===
+Die Einrichtung erfolgt über das Attribut `webCmd` und `widgetOverride`.
 <syntaxhighlight lang="Perl">
-{ Svn_GetFile('contrib/fhemweb_multigauge.js', 'www/pgm2/fhemweb_multigauge.js') }
+attr <devicename> webCmd cmd<X>
+attr <devicename> widgetOverride cmd<X>:multigauge,<Ring1>,<Ring2>,<Ring3>,<Label>,<Skalierung>
 </syntaxhighlight>
-=== 2️⃣ Widget im Device einrichten ===
+=== 2️⃣ Parameter ===
-:<code>attr <devicename> widgetOverride cmd<X>:multigauge,<Ring1>,<Ring2>,<Ring3>,<Label>,<Skalierung></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).
+|}
-=== Parameter-Syntax der Ringe ===
+=== 3️⃣ Beispiel ===
-Jeder Bogen folgt dem Schema: <code>Reading:Einheit:Farbe:Min-Max-AlarmMin-AlarmMax</code>
-* '''Reading''': Name des FHEM-Readings.
+Alle Ringe aktiviert
-* '''Einheit''': Text (z.B. °C, %).
+<syntaxhighlight lang="Perl">
-* '''Farbe''': Hex-Code oder HUE-Bereich <code>hue-START-ENDE</code> (z.B. <code>hue-240-0</code>).
+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
-* '''Limits''': Min-Max-AlarmMin-AlarmMax (Werte mit <code>none</code> deaktivierbar).
+</syntaxhighlight>
-=== Beispiel ===
+Ein Ring 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
+attr <device> widgetOverride cmd:multigauge,none,temperature:°C:hue-240-0:0-35-none-none,none,Balkon,1.0
 </syntaxhighlight>
-== Hinweise ==
-* Nicht benötigte Alarme im `multigauge` auf `none` setzen.
-* Nach dem Update der JS-Dateien bitte den Browser-Cache leeren (z.B. <code>Strg + F5</code>).
 == Links ==