FHEMWEB/Gauge - Versionsgeschichte

Schwatter am 4. Juli 2026 um 08:40 Uhr

2026-07-04T08:40:17Z

← Nächstältere Version		Version vom 4. Juli 2026, 10:40 Uhr
Zeile 4:		Zeile 4:
	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.		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 ==		== gauge – Bogen-Widget für Einzelwerte ==

Schwatter am 4. Juli 2026 um 08:30 Uhr

2026-07-04T08:30:26Z

← Nächstältere Version		Version vom 4. Juli 2026, 10:30 Uhr
Zeile 1:		Zeile 1:
			[[Datei:gaugewidgets.png\|Mini\|rechts]]
	== Gauge – Bogen-Widgets für Werte ==		== Gauge – Bogen-Widgets für Werte ==

Schwatter am 4. Juli 2026 um 08:04 Uhr

2026-07-04T08:04:22Z

← Nächstältere Version		Version vom 4. Juli 2026, 10:04 Uhr
Zeile 69:		Zeile 69:
	* Nicht benötigte Alarme im `multigauge` auf `none` setzen.		* 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>).		* Nach dem Update der JS-Dateien bitte den Browser-Cache leeren (z.B. <code>Strg + F5</code>).

			== Links ==
			* [[FHEMWEB/Widgets\|FHEMWEB Widgets]]

	[[Kategorie:Code Snippets]]		[[Kategorie:Code Snippets]]
	[[Kategorie:FHEM Frontends]]		[[Kategorie:FHEM Frontends]]
	~~[[FHEMWEB/Widgets\| Widget-Übersicht]]~~

Schwatter am 4. Juli 2026 um 08:02 Uhr

2026-07-04T08:02:08Z

← Nächstältere Version		Version vom 4. Juli 2026, 10:02 Uhr
Zeile 72:		Zeile 72:
	[[Kategorie:Code Snippets]]		[[Kategorie:Code Snippets]]
	[[Kategorie:FHEM Frontends]]		[[Kategorie:FHEM Frontends]]
			[[FHEMWEB/Widgets\| Widget-Übersicht]]

Schwatter: Die Seite wurde neu angelegt: „== 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. --- == gauge – Bogen-Widget für Einzelw…“

2026-07-04T07:56:02Z

Die Seite wurde neu angelegt: „== 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. --- == gauge – Bogen-Widget für Einzelw…“

Neue Seite

== 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.

---

== 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-Datei aus contrib laden ===
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/fhemweb_gauge.js', 'www/pgm2/fhemweb_gauge.js') }
</syntaxhighlight>

=== 2️⃣ Widget im Device einrichten ===
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
|-
| <code>Reading</code> || Name des Readings, dessen Wert angezeigt wird.
|-
| <code>Einheit</code> || Anzeige-Einheit (z. B. kWh, %).
|-
| <code>Min / Max</code> || Start- und Endpunkt der Skala.
|-
| <code>Farbe/Modus</code> || Farbwert (z.B. #ff0000) ODER Hue-Modus: <code>hue:start:ende:alarmMin:alarmMax</code>
|-
| <code>Skalierung</code> || Optional: Skalierungsfaktor (Standard: 1.0).
|}

=== 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 ==

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 ===
<syntaxhighlight lang="Perl">
{ Svn_GetFile('contrib/fhemweb_multigauge.js', 'www/pgm2/fhemweb_multigauge.js') }
</syntaxhighlight>

=== 2️⃣ Widget im Device einrichten ===
:<code>attr <devicename> widgetOverride cmd<X>:multigauge,<Ring1>,<Ring2>,<Ring3>,<Label>,<Skalierung></code>

=== Parameter-Syntax der Ringe ===
Jeder Bogen folgt dem Schema: <code>Reading:Einheit:Farbe:Min-Max-AlarmMin-AlarmMax</code>

* '''Reading''': Name des FHEM-Readings.
* '''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).

=== Beispiel ===
<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 ==
* 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>).

[[Kategorie:Code Snippets]]
[[Kategorie:FHEM Frontends]]