FHEMWEB/MiniChart - Versionsgeschichte

Schwatter am 2. Januar 2026 um 16:01 Uhr

2026-01-02T16:01:56Z

← Nächstältere Version		Version vom 2. Januar 2026, 18:01 Uhr
Zeile 26:		Zeile 26:
	Mit einem `[[at]]`-Timer werden die Werte der Messgeräte regelmäßig in die `chartArray`-Readings geschrieben.		Mit einem `[[at]]`-Timer werden die Werte der Messgeräte regelmäßig in die `chartArray`-Readings geschrieben.
	<syntaxhighlight lang="Perl">		<syntaxhighlight lang="Perl">
	defmod chartUpdate at +*00:05 {\		defmod chartUpdate at +*00:05 {\
	my ~~$val~~ = ~~ReadingsVal~~(~~"Smartmeter_2E1F50", "APOX_Power", 0);;~~\		my @devices = (\
	~~my $new = AppendToFixedArray(~~"~~Smartmeter_2E1F50~~", "~~chartArray~~"~~, $val);;~~\		# ["Devicename", "Readingname"]\
	~~fhem(~~"~~setreading~~ Smartmeter_2E1F50 ~~chartArray $new");;\~~		["Smartmeter_2E1F50", "APOX_Power"],\
	\		["OpenDTU", "power"],\
	~~my $val1 = ReadingsVal("OpenDTU~~", "~~power~~", ~~0);;~~\		["Kuehlschrank", "power"],\
	~~my $new1 = AppendToFixedArray(~~"OpenDTU", "~~chartArray~~", ~~$val1);;~~\		["Luftentfeuchter", "ENERGY_Power"],\
	~~fhem("setreading OpenDTU chartArray $new1");;\~~		["Geschirrspueler", "power"],\
	\		["Trockner", "power"],\
	~~my $val2 = ReadingsVal(~~"Kuehlschrank", "power", ~~0);;~~\		["Waschmaschine", "power"],\
	~~my $new2 = AppendToFixedArray("Kuehlschrank", "chartArray", $val2);;\~~		["Pumpe_FBH_Pwr", "power"],\
	~~fhem("setreading Kuehlschrank chartArray $new2");;\~~		["Heizstab_BW_Pwr", "power"],\
	\		);;\
	~~my $val3 = ReadingsVal(~~"Luftentfeuchter", "ENERGY_Power", ~~0);;\~~		\
	~~my $new3 = AppendToFixedArray("Luftentfeuchter", "chartArray", $val3);;~~\		for my $d (@devices) {\
	~~fhem("setreading Luftentfeuchter chartArray $new3");;\~~		my ($dev, $reading) = @$d;;\
	\		\
	~~my $val4 = ReadingsVal(~~"Geschirrspueler", "power", ~~0);;~~\		my $val = ReadingsVal($dev, $reading, 0);;\
	~~my $new4 = AppendToFixedArray("Geschirrspueler", "chartArray", $val4);;\~~		my $new = AppendToFixedArray($dev, "chartArray", $val);;\
	~~fhem("setreading Geschirrspueler chartArray $new4");;\~~		fhem("setreading $dev chartArray $new");;\
	\		}\
	~~my $val5 = ReadingsVal(~~"Trockner", "power", ~~0);;~~\		}\
	~~my $new5 = AppendToFixedArray(~~"~~Trockner~~", "~~chartArray~~", ~~$val5);;\~~
	~~fhem("setreading Trockner chartArray $new5");;~~\
	\
	~~my $val6 = ReadingsVal(~~"~~Waschmaschine~~", "power", ~~0);;~~\
	~~my $new6 = AppendToFixedArray(~~"~~Waschmaschine~~", "~~chartArray~~", ~~$val6);;~~\
	~~fhem("setreading Waschmaschine chartArray $new6"~~);;\
	\
	my $~~val7 = ReadingsVal~~(~~"Pumpe_FBH_Pwr", "power", 0~~);;\
	my $~~new7 = AppendToFixedArray("Pumpe_FBH_Pwr", "chartArray"~~, $~~val7~~)~~;;\~~
	~~fhem("setreading Pumpe_FBH_Pwr chartArray~~ $~~new7")~~;;\
	\
	my $~~val8~~ = ReadingsVal(~~"Heizstab_BW_Pwr"~~, ~~"power"~~, 0);;\
	my $~~new8~~ = AppendToFixedArray(~~"Heizstab_BW_Pwr"~~, "chartArray", $~~val8~~);;\
	fhem("setreading ~~Heizstab_BW_Pwr~~ chartArray $~~new8~~");;\
	}
	</syntaxhighlight>		</syntaxhighlight>

Ph1959de: Seite Kategorisiert und wikifiziert, Code-Beispiele kompakter dargestellt, teilweise mit syntax-highlighting, Gliederungsebenen bereinigt

2025-12-08T15:49:36Z

Seite Kategorisiert und wikifiziert, Code-Beispiele kompakter dargestellt, teilweise mit syntax-highlighting, Gliederungsebenen bereinigt

Änderungen zeigen

Schwatter am 7. Dezember 2025 um 18:13 Uhr

2025-12-07T18:13:14Z

← Nächstältere Version		Version vom 7. Dezember 2025, 20:13 Uhr
Zeile 108:		Zeile 108:
	* bar – Balkendiagramm mit positiver/negativer Farbgebung		* bar – Balkendiagramm mit positiver/negativer Farbgebung

	Das Chart-Reading ~~liefert~~ eine kommagetrennte Zahlenliste, z. B.:		Das Chart-Reading benötigt eine kommagetrennte Zahlenliste, z. B.:
	10,20,15,18,25		10,20,15,18,25

Zeile 119:		Zeile 119:

	Fallback (nur ChartReading angegeben):		Fallback (nur ChartReading angegeben):
	line@#3b82f6@#3b82f6		dann wird automatisch line@#3b82f6@#3b82f6 gesetzt

	=== Einrichtung im Device ===		=== Einrichtung im Device ===
Zeile 131:		Zeile 131:

	Beispiel Balkendiagramm:		Beispiel Balkendiagramm:
	..., chartArray, bar@#00cc88@#cc0044		...,chartArray,bar@#00cc88@#cc0044

	Fallback (Standard line + Standardfarbe):		Fallback (Standard line + Standardfarbe):
	..., chartArray		...,chartArray

	=== Parameterübersicht ===		=== Parameterübersicht ===

Schwatter am 7. Dezember 2025 um 17:50 Uhr

2025-12-07T17:50:31Z

← Nächstältere Version		Version vom 7. Dezember 2025, 19:50 Uhr
Zeile 7:		Zeile 7:

	=== Hilfe ===		=== Hilfe ===
	Forenthread zum [https://forum.fhem.de/index.php?topic=~~142831~~.0 ~~ControlMiniDash~~ Widget]		Forenthread zum [https://forum.fhem.de/index.php?topic=141857.0 MiniChart Widget]

Schwatter am 7. Dezember 2025 um 17:34 Uhr

2025-12-07T17:34:04Z

← Nächstältere Version		Version vom 7. Dezember 2025, 19:34 Uhr
Zeile 77:		Zeile 77:
	Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.		Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.

	{ Svn_GetFile('contrib/fhemweb_minichart.js', '~~/fhem/~~www/pgm2/fhemweb_minichart.js') }		{ Svn_GetFile('contrib/fhemweb_minichart.js', 'www/pgm2/fhemweb_minichart.js') }

	==== 2. Widget im Device mit widgetOverride einrichten ====		==== 2. Widget im Device mit widgetOverride einrichten ====

Schwatter am 7. Dezember 2025 um 16:22 Uhr

2025-12-07T16:22:13Z

← Nächstältere Version		Version vom 7. Dezember 2025, 18:22 Uhr
Zeile 77:		Zeile 77:
	Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.		Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.

	{ Svn_GetFile('contrib~~/schwatter~~/fhemweb_minichart.js', '/fhem/www/pgm2/fhemweb_minichart.js') }		{ Svn_GetFile('contrib/fhemweb_minichart.js', '/fhem/www/pgm2/fhemweb_minichart.js') }

	==== 2. Widget im Device mit widgetOverride einrichten ====		==== 2. Widget im Device mit widgetOverride einrichten ====

Schwatter am 7. Dezember 2025 um 10:57 Uhr

2025-12-07T10:57:39Z

← Nächstältere Version		Version vom 7. Dezember 2025, 12:57 Uhr
Zeile 164:		Zeile 164:
	\|-		\|-
	\| <code>ChartReading</code>		\| <code>ChartReading</code>
	\| Datenquelle		\| Datenquelle
	\| ~~Kommagetrennte Zahlenliste~~ für das ~~Chart~~.		\| Liefert Array-Werte für das Diagramm .
	\|-		\|-
	\| <code>chartType@colorPos@colorNeg</code>		\| <code>chartType@colorPos@colorNeg</code>

Schwatter am 7. Dezember 2025 um 10:51 Uhr

2025-12-07T10:51:49Z

← Nächstältere Version		Version vom 7. Dezember 2025, 12:51 Uhr
Zeile 151:		Zeile 151:
	\| Aktiviert das MiniChart-Widget.		\| Aktiviert das MiniChart-Widget.
	\|-		\|-
	\| <code>~~Label~~@~~Reading~~@~~Einheit~~</code>		\| <code>Label1@Reading1@Einheit1</code>
			\| Anzeigezeilen
			\| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
			\|-
			\| <code>Label2@Reading2@Einheit2</code>
			\| Anzeigezeilen
			\| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
			\|-
			\| <code>Label3@Reading3@Einheit3</code>
	\| Anzeigezeilen		\| Anzeigezeilen
	\| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.		\| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.

Schwatter am 7. Dezember 2025 um 10:49 Uhr

2025-12-07T10:49:31Z

← Nächstältere Version		Version vom 7. Dezember 2025, 12:49 Uhr
Zeile 1:		Zeile 1:
			[[Datei:Minichart flex mobile.png]]

	== MiniChart – kompaktes Chart-Widget (Line & Bar) ==		== MiniChart – kompaktes Chart-Widget (Line & Bar) ==

	Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm.		Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm.
	Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen.		Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind 3 Schritte notwendig.

	~~Zum Einrichten sind 3 Schritte notwendig~~.		=== Hilfe ===
			Forenthread zum [https://forum.fhem.de/index.php?topic=142831.0 ControlMiniDash Widget]

Schwatter: Die Seite wurde neu angelegt: „== MiniChart – kompaktes Chart-Widget (Line & Bar) == Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm. Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind 3 Schritte notwendig. == 1️⃣ 99_myUtils.pm – Hilfsfunktion zum Speichern von historischen Werten == Zuerst wird eine Subroutine angelegt, die neue Werte an ein Fixed-Array anhängt un…“

2025-12-07T10:40:53Z

Die Seite wurde neu angelegt: „== MiniChart – kompaktes Chart-Widget (Line & Bar) == Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm. Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind 3 Schritte notwendig. == 1️⃣ 99_myUtils.pm – Hilfsfunktion zum Speichern von historischen Werten == Zuerst wird eine Subroutine angelegt, die neue Werte an ein Fixed-Array anhängt un…“

Neue Seite

== MiniChart – kompaktes Chart-Widget (Line & Bar) ==

Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm.
Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen.

Zum Einrichten sind 3 Schritte notwendig.

== 1️⃣ 99_myUtils.pm – Hilfsfunktion zum Speichern von historischen Werten ==

Zuerst wird eine Subroutine angelegt, die neue Werte an ein Fixed-Array anhängt und alte Werte entfernt, falls die maximale Größe überschritten wird.

sub AppendToFixedArray {
my ($dev, $reading, $newVal, $maxSize) = @_;
$maxSize //= 250; # Standard: 250 Werte
my $current = ReadingsVal($dev, $reading, '');
my @values = split(',', $current);
if (@values >= $maxSize) {
@values = @values[-($maxSize - 1) .. -1]; # Älteste Werte entfernen
}
push @values, $newVal;
return join(',', @values);
}

== 2️⃣ at-Timer zum regelmäßigen Aktualisieren ==

Mit einem `at`-Timer werden die Werte der Messgeräte regelmäßig in die `chartArray`-Readings geschrieben.

defmod chartUpdate at +*00:05 {\
my $val = ReadingsVal("Smartmeter_2E1F50", "APOX_Power", 0);;\
my $new = AppendToFixedArray("Smartmeter_2E1F50", "chartArray", $val);;\
fhem("setreading Smartmeter_2E1F50 chartArray $new");;\
\
my $val1 = ReadingsVal("OpenDTU", "power", 0);;\
my $new1 = AppendToFixedArray("OpenDTU", "chartArray", $val1);;\
fhem("setreading OpenDTU chartArray $new1");;\
\
my $val2 = ReadingsVal("Kuehlschrank", "power", 0);;\
my $new2 = AppendToFixedArray("Kuehlschrank", "chartArray", $val2);;\
fhem("setreading Kuehlschrank chartArray $new2");;\
\
my $val3 = ReadingsVal("Luftentfeuchter", "ENERGY_Power", 0);;\
my $new3 = AppendToFixedArray("Luftentfeuchter", "chartArray", $val3);;\
fhem("setreading Luftentfeuchter chartArray $new3");;\
\
my $val4 = ReadingsVal("Geschirrspueler", "power", 0);;\
my $new4 = AppendToFixedArray("Geschirrspueler", "chartArray", $val4);;\
fhem("setreading Geschirrspueler chartArray $new4");;\
\
my $val5 = ReadingsVal("Trockner", "power", 0);;\
my $new5 = AppendToFixedArray("Trockner", "chartArray", $val5);;\
fhem("setreading Trockner chartArray $new5");;\
\
my $val6 = ReadingsVal("Waschmaschine", "power", 0);;\
my $new6 = AppendToFixedArray("Waschmaschine", "chartArray", $val6);;\
fhem("setreading Waschmaschine chartArray $new6");;\
\
my $val7 = ReadingsVal("Pumpe_FBH_Pwr", "power", 0);;\
my $new7 = AppendToFixedArray("Pumpe_FBH_Pwr", "chartArray", $val7);;\
fhem("setreading Pumpe_FBH_Pwr chartArray $new7");;\
\
my $val8 = ReadingsVal("Heizstab_BW_Pwr", "power", 0);;\
my $new8 = AppendToFixedArray("Heizstab_BW_Pwr", "chartArray", $val8);;\
fhem("setreading Heizstab_BW_Pwr chartArray $new8");;\
}

== 3️⃣ Minichart ==

==== 1. Widget-Datei aus contrib laden ====

Bevor das MiniChart-Widget genutzt werden kann, muss die JS-Datei ins FHEM-Webverzeichnis kopiert werden.
Dies kann mit der Perlfunktion { Svn_GetFile('from SVN Path', 'to local Path') } direkt in der FHEM Kommandozeile erfolgen.

{ Svn_GetFile('contrib/schwatter/fhemweb_minichart.js', '/fhem/www/pgm2/fhemweb_minichart.js') }

==== 2. Widget im Device mit widgetOverride einrichten ====

==== Werteanzeige ====
Drei Textzeilen können angezeigt werden, jeweils im Format:
Label@Reading@Einheit

Beispiel:
Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh

===== Ausblenden einzelner Zeilen =====
Jede der drei Zeilen kann vollständig oder teilweise ausgeblendet werden, indem das jeweilige Element
leer gelassen wird. Das Widget setzt intern automatisch ein geschütztes Leerzeichen ( ).

Beispiele:
* Nur Label ausblenden:
@reading@W
* Nur Reading ausblenden:
Label@@W
* Nur Einheit ausblenden:
Label@reading@
* Ganze Zeile ausblenden:
 

==== Diagrammtypen ====
MiniChart unterstützt zwei Diagrammtypen:

* line – geglättetes Liniendiagramm mit Farbverlauf
* bar – Balkendiagramm mit positiver/negativer Farbgebung

Das Chart-Reading liefert eine kommagetrennte Zahlenliste, z. B.:
10,20,15,18,25

Chartoptionen:
chartType@colorPositive@colorNegative

Beispiele:
line@#3b82f6@#ff0000
bar@#00cc88@#cc0044

Fallback (nur ChartReading angegeben):
line@#3b82f6@#3b82f6

=== Einrichtung im Device ===

Syntax:
<webCmd>:minichart,Label1@Reading1@Einheit,Label2@Reading2@Einheit,Label3@Reading3@Einheit,ChartReading,chartType@colorPos@colorNeg

Beispiel Liniendiagramm:
attr <device> webCmd minichart
attr <device> widgetOverride minichart:minichart,Jetzt@power@W,Heute@yieldday@kWh,Gesamt@yieldtotal@kWh,chartArray,line@#3b82f6@#ff0000

Beispiel Balkendiagramm:
..., chartArray, bar@#00cc88@#cc0044

Fallback (Standard line + Standardfarbe):
..., chartArray

=== Parameterübersicht ===

{| class="wikitable"
! Abschnitt
! Bedeutung
! Beschreibung
|-
| <code><beliebigerName></code>
| webCmd-Zuweisung
| Definiert die Instanz des Widgets.
|-
| <code>minichart</code>
| Widget-Typ
| Aktiviert das MiniChart-Widget.
|-
| <code>Label@Reading@Einheit</code>
| Anzeigezeilen
| Drei frei definierbare Werte-/Statusfelder; mit <code> </code> komplett ausblendbar.
|-
| <code>ChartReading</code>
| Datenquelle
| Kommagetrennte Zahlenliste für das Chart.
|-
| <code>chartType@colorPos@colorNeg</code>
| Chart-Optionen
| line oder bar; Farben optional.
|}