FHEMWEB/MiniChart

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.

Hilfe

Forenthread zum MiniChart Widget

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/fhemweb_minichart.js', 'www/pgm2/fhemweb_minichart.js') } 

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.