eCharts in FHEM (Version 0.0.12.4)

andies · 19 Mai 2025, 14:09:24

Danke an alle, die hier mitmachen - ich bin alles andere als sauer. Es gibt nur ein Problem, für das ich keine echte Lösung habe. Einige hier haben Wünsche, die ich nachverstehen kann, die aber einander teilweise widersprechen oder nicht zusammenpassen. Man kann das "mit Gewalt" in eine Datei pressen, das erfordert aber dann von allen Anpassungen.

Beispielsweise wird (was ich gut finde) aus size besser mobile_size/desktop_size. Wenn das jemand nicht mitbekommt, passt er das nicht an. Also schleppe ich drei sizes mit, damit sich niemand beschwert - das muss aber aufeinander angepasst werden.

Ich bin leider kein Profi so dass ich nicht weiß, wie man mit so etwas umgeht. Deswegen gibt es im allerersten Post eine Version und dann hier hinten zwei weitere, die divergieren. Und das ist auch der Grund, warum ich mit Änderungen zögerlich bin: denn welche Datei soll ich jetzt wie ändern?

Hat jemand hier eine Lösung, die nicht so arbeitsintensiv ist? Wenn ich das richtig sehe, nutzen das Modul nur eine Handvoll Leute. Da liegt es nahe, dass jeder für sich bastelt, oder?

schwatter · 20 Mai 2025, 17:53:04

Tag,

das kann ich nachvollziehen. Ich sag es mal so. Wenn du meine Änderungen auch benutzt, dann würde ich es an deiner
Stelle einfach einbauen. Noch sind es nicht viele User.
Wenn es für dich aber belanglos ist, dann bleibt es draußen

Gruß schwatter

sfancy · 07 Juni 2025, 19:59:16

Ich habe auch das eCharts-Modul getestet. Hat schon recht gut funktioniert. Was mir aufgefallen ist, das Logfile wird ziemlich vollgeschrieben mit den Meldungen "User-Agent: ..." und "is_mobile: ...". Das lässt sich auch durch ein

Code Auswählen

attr eCharts verbose 0

nicht abschalten, da die alte Logfunktion verwendet wurde.

Vielleicht bei Gelegenheit diese vier Zeilen

Code Auswählen

  Log 1, "User-Agent: $FW_userAgent";  # Gibt den User-Agent in das Log aus

  Log 1, "is_mobile: $is_mobile";  # Gibt den Wert der mobilen Bedingung in das Log aus

      Log 1, "$name not found for plotAsPng()";

      Log 1, "No FHEMWEB device using port $port found for plotAsPng($name)";

ändern nach

Code Auswählen

  Log3 $name, 3, "User-Agent: $FW_userAgent";  # Gibt den User-Agent in das Log aus

  Log3 $name, 3, "is_mobile: $is_mobile";  # Gibt den Wert der mobilen Bedingung in das Log aus

      Log3 $name, 1, "$name not found for plotAsPng()";

      Log3 $name, 1, "No FHEMWEB device using port $port found for plotAsPng($name)";

schwatter · 08 Juni 2025, 11:25:38

Morgen,

danke, da fehlte 1 Argument und ein Leerzeichen zu viel. Hab noch 2 andere Stellen ausgemacht und gefixt.
Außerdem habe ich die beiden Erweiterungen von Luc115 aus #160 + #161 hinzugefügt.

@andies
Als Kompromiss könnte ich plotsize_desktop in plotsize umbenennen. Finde ich nicht schön, wäre aber ok.

Gruß schwatter

andies · 09 Juni 2025, 11:07:22

Ich werde im ersten Post darauf hinweisen, dass es Erweiterungen gibt, die sich hier befinden. Da muss dann jeder einfach schauen, was für ihn passt. Umbenennen ist doof, sehe ich auch so.

andies · 02 August 2025, 17:28:25

Seit einigen Tagen gibt es eCharts 6.0.0, siehe hier. Eine Änderung ist die Legende am Boden einer Grafik, siehe Anhang mit leider etwas unterschiedlichen Daten (in meinem Fall wird die Legende vom Zoom-Schalter überlagert). Ich finde das insgesamt besser als vorher, andere Änderungen betreffen uns, glaube ich, nicht.

Wer das ändern will, muss seine Version in dem Unterordner von www einfach überschreiben (das betrifft, wenn ich das richtig sehe, nur den Unterordner dist). Wenn man mit npm installiert hat (siehe dieser Post), dann muss man folgenden Befehl ausführen

Code Auswählen

{`npm install echarts@6.0.0 --save`}Es kann aber sein, dass die internen Vorgaben die Installation verhindern. Das liegt vermutlich daran, dass in der package.json-Datei im Verzeichnis /opt/fhem eine ugrade-Sperre eingestellt ist. Das sieht man daran, dass in der Datei package.json folgendes steht:

Code Auswählen

"echarts": "^5.5.0"und da muss man 6.0.0 eintragen. Danach löscht man die lock-Datei

Code Auswählen

rm -rf node_modules package-lock.jsonund führt die Neuinstallation aus

Code Auswählen

npm installDas war es dann. Test durch den Aufruf

Code Auswählen

{qx(npm ls echarts)}in der FHEM-Befehlszeile, Ausgabe sollte dann sein

Code Auswählen

fhem@ /opt/fhem
└── echarts@6.0.0

schwatter · 02 August 2025, 22:28:05

Danke für die Info.

Hier ein Update um die Legend frei zu positionieren.
Beispiel:

Code Auswählen

attr <devicename> gridBottom 130
attr <devicename> position_legend left:center,top:88%

Gruß schwatter

andies · 03 August 2025, 19:38:21

Ich habe eine Frage zu Deinem Code. Wenn ich das richtig sehe, ist der Teil hinzugefügt:

Code Auswählen

<script type="text/javascript">
function detectDevice() {
  var ua = navigator.userAgent;
  if (/Mobile/i.test(ua)) {
    document.getElementById("eCharts_FrequenzPlot").style.width = "90vw";
    document.getElementById("eCharts_FrequenzPlot").style.height = "45vh";
  } else {
    document.getElementById("eCharts_FrequenzPlot").style.width = "90vw";
    document.getElementById("eCharts_FrequenzPlot").style.height = "75vh";
  }
}
detectDevice();
window.addEventListener("resize", detectDevice);

Ich beobachte nun, dass meine buttons auf dem Desktop angezeigt, aber auf dem mobile unterdrückt werden, siehe Anhang. Das muss doch eigentlich an dem Code liegen, oder? Hast Du eine Idee, wie es dazu kommt?

schwatter · 03 August 2025, 20:51:54

Nabend,

schön das du mal reingeschaut hast. Weiter unten ist eine Prüfung auf mobile. Da werden dann die Buttons ausgeblendet:

Code Auswählen

  # Überprüft, ob der User-Agent auf ein mobiles Gerät hinweist
  my $is_mobile = ($FW_userAgent =~ /Mobile/i) ? "true" : "false";  # Setzt "true" oder "false"
  Log3 $name, 3, "User-Agent: $FW_userAgent";  # Gibt den User-Agent in das Log aus

  # Je nachdem, ob es ein mobiles Gerät ist oder nicht, unterschiedliche Werte setzen
  my $show_feature = ($is_mobile eq "true") ? "false" : "true";  # Verwendet die Zeichenketten "true" oder "false"
  Log3 $name, 3, "is_mobile: $is_mobile";  # Gibt den Wert der mobilen Bedingung in das Log aus

  my $Links = 'var newbuttonoption_'.$name.' = { "toolbox": { "feature": { ';
  my $zoomlink2 = eCharts_zoomLink("zoom=1"); 
  if ($zoomlink2) {$Links .= '"myTool3": { "show": ' . $show_feature . ', "title": "more", "icon": "path://M14.776,10c0,0.239-0.195,0.434-0.435,0.434H5.658c-0.239,0-0.434-0.195-0.434-0.434s0.195-0.434,0.434-0.434h8.684C14.581,9.566,14.776,9.762,14.776,10 M18.25,10c0,4.558-3.693,8.25-8.25,8.25c-4.557,0-8.25-3.691-8.25-8.25c0-4.557,3.693-8.25,8.25-8.25C14.557,1.75,18.25,5.443,18.25,10 M17.382,10c0-4.071-3.312-7.381-7.382-7.381C5.929,2.619,2.619,5.93,2.619,10c0,4.07,3.311,7.382,7.381,7.382C14.07,17.383,17.382,14.07,17.382,10", "onclick": function (){window.location="'.$zoomlink2.'"} },'};

  my $zoomlink1 = eCharts_zoomLink("zoom=-1"); 
  $Links .= '"myTool4": { "show": ' . $show_feature . ', "title": "less", "icon": "path://M14.613,10c0,0.23-0.188,0.419-0.419,0.419H10.42v3.774c0,0.23-0.189,0.42-0.42,0.42s-0.419-0.189-0.419-0.42v-3.774H5.806c-0.23,0-0.419-0.189-0.419-0.419s0.189-0.419,0.419-0.419h3.775V5.806c0-0.23,0.189-0.419,0.419-0.419s0.42,0.189,0.42,0.419v3.775h3.774C14.425,9.581,14.613,9.77,14.613,10 M17.969,10c0,4.401-3.567,7.969-7.969,7.969c-4.402,0-7.969-3.567-7.969-7.969c0-4.402,3.567-7.969,7.969-7.969C14.401,2.031,17.969,5.598,17.969,10 M17.13,10c0-3.932-3.198-7.13-7.13-7.13S2.87,6.068,2.87,10c0,3.933,3.198,7.13,7.13,7.13S17.13,13.933,17.13,10", "onclick": function (){window.location="'.$zoomlink1.'"} },';

  my $previouslink = eCharts_zoomLink("off=-1"); 
  $Links .= '"myTool1": { "show": ' . $show_feature . ', "title": "earlier", "icon": "path://M11.739,13.962c-0.087,0.086-0.199,0.131-0.312,0.131c-0.112,0-0.226-0.045-0.312-0.131l-3.738-3.736c-0.173-0.173-0.173-0.454,0-0.626l3.559-3.562c0.173-0.175,0.454-0.173,0.626,0c0.173,0.172,0.173,0.451,0,0.624l-3.248,3.25l3.425,3.426C11.911,13.511,11.911,13.789,11.739,13.962 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.148,3.374,7.521,7.521,7.521C14.147,17.521,17.521,14.148,17.521,10", "onclick": function (){window.location="'.$previouslink.'"} },';

	my $nextlink = eCharts_zoomLink("off=1"); # nach rechts nur aufbauen, wenn nicht am Ende der Zeitperiode 
	if ($nextlink) { $Links .= '"myTool2": { "show": ' . $show_feature . ', "title": "later", "icon": "path://M12.522,10.4l-3.559,3.562c-0.172,0.173-0.451,0.176-0.625,0c-0.173-0.173-0.173-0.451,0-0.624l3.248-3.25L8.161,6.662c-0.173-0.173-0.173-0.452,0-0.624c0.172-0.175,0.451-0.175,0.624,0l3.738,3.736C12.695,9.947,12.695,10.228,12.522,10.4 M18.406,10c0,4.644-3.764,8.406-8.406,8.406c-4.644,0-8.406-3.763-8.406-8.406S5.356,1.594,10,1.594C14.643,1.594,18.406,5.356,18.406,10M17.521,10c0-4.148-3.374-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.147,17.521,17.521,14.147,17.521,10", "onclick": function (){window.location="'.$nextlink.'"} },';};
	
  eCharts_pO $Links.'"saveAsImage": { "show": ' . $show_feature . ' }} }};';

Der Grund dafür ist, das bei einer zu kleinen Box, Legend und Bottons sich überlagerten. Nachdem ich jetzt aber position_legend um left:"",top:"" erweitert habe, könnte position_legend noch um right,bottom erweitert werden. So könnte das überlagern wahrscheinlich verhindert werden. Außerdem werde ich
dann wohl auch gridLeft, gridRight, gridTop und gridBottom zusammenfassen unter position_grid.

Gruß schwatter

schwatter · 04 August 2025, 19:44:53

Nabend,

ich habe einzelne attr wieder entfernt. Darunter fallen z.B gridLeft,gridTop,gridBottom. Außerdem habe ich position_legend und position_grid
umbenannt und umgebaut. Die neuen attr-Namen sind

attr <devicename> option_grid left:30,top:80,right:50,bottom:80,...,
https://echarts.apache.org/en/option.html#grid

attr <devicename> option_legend left:30,top:20,orient:horizontal,...,
https://echarts.apache.org/en/option.html#legend

Durch den Umbau stehen jetzt eine ganze Batterie Settings zur Auswahl. Die Doku dazu habe ich im Modul eingepflegt.

andies · 05 August 2025, 12:12:19

ich habe bei mir entdeckt, dass jetzt zoom durch die überdeckte Legende nicht mehr angesprochen werden kann. Ist das bei Dir auch so? Dann wäre das ein bug von eCharts.

schwatter · 05 August 2025, 17:36:12

Ich denk das ist so ok. Da die Zoombar durch das Z-Level vom Chart überlagert wird. Und auch wenn ich Beispiele anschaue,
dann ist dataZoom:[{{type: slider,...}}] immer außerhalb vom Chart.

https://echarts.apache.org/en/option.html#dataZoom.

Ich habe das oben in der Version mit https://echarts.apache.org/en/option.html#grid gelöst.
Meine Einstellungen dazu sind:

Code Auswählen

attr <devicename> option_grid left:30,top:80,right:50,bottom:80
attr <devicename> option_legend left:30,top:20

Wichtig, bottom:80 bei option_grid

edit:
Zu deinen Buttons in der Mobileansicht habe ich noch keine Lösung. Hatte gehofft, durch den Umbau kann ich legend: {width: '...', right: '...'} verwenden.
Aber irgendwie funktionieren die nicht so wie gedacht. Gefühlt gar nicht.
Mein Plan war, die Legend auf left:30,top:20,type:scroll,pageButtonPosition:start zu setzen.
So könnte man schön links per type:scroll einen series namen skippen und rechts den Raum begrenzen durch legend: {width: '...', right: '...'}.
Da wäre dann der Platz den ich brauche, aber es will nicht....

Gruß schwatter

andies · 05 August 2025, 19:07:35

Mit grid könnte man mehrere Zeichnungen in einen container packen. Aha, das ist dann noch kompakter. Aber mir fällt da kein wirklicher use-case ein; ich lasse mir per telegram einmal am Tag die Temperaturen im Haus und draußen schicken, sowie Wasserverbrauch und der Rest ist eigentlich unnötige Spielerei. Mir fällt da nichts ein, zumal ich Telegram immer morgens im Bett lese um zu schauen, ob die Systeme laufen.

schwatter · 08 August 2025, 21:59:22

Nabend,

ich habe jetzt mal eine von wahrscheinlich vielen Lösungen gefunden. Dazu musste ich mal wieder Attribute ändern.

- option_legend entfernt
- option_legend_desktop hinzugefügt
- option_legend_mobile hinzugefügt
- option_legend_m_buttons hinzugefügt
- Doku in attr angepasst

Das funktioniert jetzt so. Wird option_legend_desktop mit Einstellungen gesetzt und option_legend_m_buttons auf off, dann werden in Mobile
die Settings von Desktop genommen. Wird option_legend_m_buttons auf on gesetzt, dann werden die EInstellungen von option_legend_mobile übernommen.
Dadurch können die Buttons in Mobile eingeblendet werden. Und mit den richtigen Einstellungen werden diese nicht verdeckt.

Dazu ein Beispiel von einem eChart mit 7 Chartlinien:

Code Auswählen

defmod vitodensChart eCharts FileLog_Vitodens222ws2:SVG_FileLog_Vitodens222ws2:CURRENT
attr vitodensChart axisLabelColor white
attr vitodensChart backgroundColor #212124
attr vitodensChart encoding 1
attr vitodensChart fixedrange_desktop 12hours
attr vitodensChart fixedrange_mobile 8hours
attr vitodensChart legendColor 00
attr vitodensChart option_grid left:30,bottom:30
attr vitodensChart option_legend_desktop left:30,top:15
attr vitodensChart option_legend_m_buttons on
attr vitodensChart option_legend_mobile left:30,top:15,type:scroll,width:300,orient:vertical,height:42,pageButtonPosition:start,itemHeight:20
attr vitodensChart plotsize_desktop 1150,700
attr vitodensChart plotsize_mobile 388,350
attr vitodensChart room 01.Heizung_UG

setstate vitodensChart initialized

Gruß schwatter