FHEMWEB/Gauge - Versionsgeschichte

Schwatter am 5. Juli 2026 um 06:41 Uhr

2026-07-05T06:41:22Z

← Nächstältere Version		Version vom 5. Juli 2026, 08:41 Uhr
Zeile 20:		Zeile 20:

	=== 1️⃣ Widget im Device einrichten ===		=== 1️⃣ Widget im Device einrichten ===
	Die Einrichtung erfolgt über das Attribut `widgetOverride`.		Die Einrichtung erfolgt über das Attribut `webCmd` und `widgetOverride`.
			<syntaxhighlight lang="Perl">
	:<~~code~~>attr <devicename> widgetOverride cmd<X>:gauge,<Reading>,<Einheit>,<Min>,<Max>,<Farbe/Modus>,<Skalierung></~~code~~>		attr <devicename> webCmd cmd<X>
			attr <devicename> widgetOverride cmd<X>:gauge,<Reading>,<Einheit>,<Min>,<Max>,<Farbe/Modus>,<Skalierung>
			</syntaxhighlight>

	=== 2️⃣ Parameter ===		=== 2️⃣ Parameter ===
Zeile 50:		Zeile 52:

	=== 1️⃣ Widget im Device einrichten ===		=== 1️⃣ Widget im Device einrichten ===
	:<~~code~~>attr <devicename> widgetOverride cmd<X>:multigauge,<Ring1>,<Ring2>,<Ring3>,<Label>,<Skalierung></~~code~~>		Die Einrichtung erfolgt über das Attribut `webCmd` und `widgetOverride`.
			<syntaxhighlight lang="Perl">
			attr <devicename> webCmd cmd<X>
			attr <devicename> widgetOverride cmd<X>:multigauge,<Ring1>,<Ring2>,<Ring3>,<Label>,<Skalierung>
			</syntaxhighlight>

	=== 2️⃣ Parameter ===		=== 2️⃣ Parameter ===

Schwatter am 5. Juli 2026 um 06:27 Uhr

2026-07-05T06:27:06Z

← Nächstältere Version		Version vom 5. Juli 2026, 08:27 Uhr
Zeile 3:		Zeile 3:

	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 ===		=== Hilfe ===
	* Forenthread zum {{Link2Forum\|Topic=145001\|LinkText= Gauge-Widgets}}		* Forenthread zum {{Link2Forum\|Topic=145001\|LinkText= Gauge-Widgets}}





	== gauge – Bogen-Widget für Einzelwerte ==		== gauge – Bogen-Widget für Einzelwerte ==
Zeile 35:		Zeile 43:
	attr <device> widgetOverride cmd1:gauge,kWh,kWh,0,10000,hue:0:120:3000:none,1.3		attr <device> widgetOverride cmd1:gauge,kWh,kWh,0,10000,hue:0:120:3000:none,1.3
	</syntaxhighlight>		</syntaxhighlight>


	== multigauge – Mehrfach-Bogen-Widget ==		== multigauge – Mehrfach-Bogen-Widget ==

Schwatter am 5. Juli 2026 um 06:25 Uhr

2026-07-05T06:25:13Z

← Nächstältere Version		Version vom 5. Juli 2026, 08:25 Uhr
Zeile 9:		Zeile 9:
	== gauge – Bogen-Widget für Einzelwerte ==		== 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 im Device einrichten ===		=== 1️⃣ Widget im Device einrichten ===

Schwatter am 5. Juli 2026 um 06:22 Uhr

2026-07-05T06:22:10Z

← Nächstältere Version		Version vom 5. Juli 2026, 08:22 Uhr
Zeile 35:		Zeile 35:
	attr <device> widgetOverride cmd1:gauge,kWh,kWh,0,10000,hue:0:120:3000:none,1.3		attr <device> widgetOverride cmd1:gauge,kWh,kWh,0,10000,hue:0:120:3000:none,1.3
	</syntaxhighlight>		</syntaxhighlight>

	~~---~~

	== multigauge – Mehrfach-Bogen-Widget ==		== multigauge – Mehrfach-Bogen-Widget ==
Zeile 45:		Zeile 43:
	:<code>attr <devicename> widgetOverride cmd<X>:multigauge,<Ring1>,<Ring2>,<Ring3>,<Label>,<Skalierung></code>		:<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">		<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,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>		</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 ==		== Links ==

Schwatter am 4. Juli 2026 um 20:01 Uhr

2026-07-04T20:01:23Z

← Nächstältere Version		Version vom 4. Juli 2026, 22:01 Uhr
Zeile 11:		Zeile 11:
	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. 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 ===~~		=== 1️⃣ Widget im Device einrichten ===
	~~<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`.		Die Einrichtung erfolgt über das Attribut `widgetOverride`.

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

	=== Parameter ===		=== 2️⃣ Parameter ===
	{\| class="wikitable"		{\| class="wikitable"
	! Parameter !! Beschreibung		! Parameter !! Beschreibung
Zeile 36:		Zeile 31:
	\|}		\|}

	=== Beispiel ===		=== 3️⃣ Beispiel ===
	<syntaxhighlight lang="Perl">		<syntaxhighlight lang="Perl">
	attr <device> widgetOverride cmd1:gauge,kWh,kWh,0,10000,hue:0:120:3000:none,1.3		attr <device> widgetOverride cmd1:gauge,kWh,kWh,0,10000,hue:0:120:3000:none,1.3
Zeile 47:		Zeile 42:
	Das '''multigauge'''-Widget erlaubt die Anzeige von bis zu drei Werten in konzentrischen Bögen. Jedes Reading ist individuell konfigurierbar (Einheit, Farbverlauf, Alarmgrenzen).		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 ===
	~~<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>		:<code>attr <devicename> widgetOverride cmd<X>:multigauge,<Ring1>,<Ring2>,<Ring3>,<Label>,<Skalierung></code>

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

Zeile 63:		Zeile 53:
	* '''Limits''': Min-Max-AlarmMin-AlarmMax (Werte mit <code>none</code> deaktivierbar).		* '''Limits''': Min-Max-AlarmMin-AlarmMax (Werte mit <code>none</code> deaktivierbar).

	=== Beispiel ===		=== 3️⃣ Beispiel ===
	<syntaxhighlight lang="Perl">		<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,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

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