FHEMWEB/MiniChart

MiniChart – kompaktes Chart-Widget (Line & Bar)

Das MiniChart-Widget visualisiert Messwertverläufe als kompaktes Liniendiagramm oder Balkendiagramm für die Darstellung im FHEMWEB (PGM2) Frontend. Zusätzlich zeigt es drei aktuelle Werte, die aus Label, Reading und Einheit bestehen. Zum Einrichten sind drei Schritte notwendig.

Hilfe

Forenthread zum MiniChart Widget

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

Zuerst wird eine Subroutine in 99_myUtils.pm 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/fhemweb_minichart.js', '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 benötigt 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):

dann wird automatisch line@#3b82f6@#3b82f6 gesetzt

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

Abschnitt	Bedeutung	Beschreibung
`<beliebigerName>`	webCmd-Zuweisung	Definiert die Instanz des Widgets.
`minichart`	Widget-Typ	Aktiviert das MiniChart-Widget.
`Label1@Reading1@Einheit1`	Anzeigezeilen	Drei frei definierbare Werte-/Statusfelder; mit komplett ausblendbar.
`Label2@Reading2@Einheit2`	Anzeigezeilen	Drei frei definierbare Werte-/Statusfelder; mit komplett ausblendbar.
`Label3@Reading3@Einheit3`	Anzeigezeilen	Drei frei definierbare Werte-/Statusfelder; mit komplett ausblendbar.
`ChartReading`	Datenquelle	Liefert Array-Werte für das Diagramm .
`chartType@colorPos@colorNeg`	Chart-Optionen	line oder bar; Farben optional.