FHEM Forum

<edit> Ich habe, nach zwei Monaten Arbeit, den Beitrag angepasst.</edit>

Ich habe ein Modul erstellt, das Grafiken mit Javascript erstellt. Es ist ähnlich angenehm anzuschauen wie Grafana, aber es gab zwei Gründe, weshalb ich grafana nicht mehr nutze: 1) ich konnte auf einem RPi keine Grafiken rendern und dann per Telegram versenden (das ist ein bekanntes Problem) und 2) ich hatte immer etwas Schwierigkeiten mit der SQL-Sprache.

Dann lief mir eCharts über den Weg (Link zu Beispielen (https://echarts.apache.org/examples/en/index.html#chart-type-line)) und ich wollte ein Modul bauen, bei dem man möglichst die Syntax von SVG nutzt und daraus ohne viel Aufwand eCharts erzeugt, also in etwa so
## SVG Definition
defmod myChart   SVG   GartentorLog:GartentorSVG:CURRENT
## eCharts Definition
defmod myChart eCharts GartentorLog:GartentorSVG:CURRENT

Ich kann inzwischen alle meine Grafiken mit ihren Besonderheiten in eCharts umwandeln: Ich kann Maxima und Minima auszeichnen, vertikale Linien integrieren, ich kann die Grafiken rendern und per Telegram verschicken. Es gibt die Möglichkeit, analog zu SVG in den Datenreihen "zu wandern", also sich frühere und spätere Datenreihen durch Mausklick anzuschauen (man muss dazu auf die x-Achse klicken und vorher ein Attribut auswählen).

Es gibt aber für die Anwender ein paar Risiken, und deshalb habe ich auch nicht vor, dass Modul als offizielles Modul in FHEM einzuspielen:

• Ich werde den Support für Dinge, die SVG leistet, nicht leisten können: Ich überblicke nämlich nicht, was SVG kann und was eCharts noch können müsste. Ich bin ja kein Programmierer, mein Code ist schwierig lesbar und ich gehe für meine Ziele immer so vor, dass ich mir einen funktionierenden Code nehme und den so lange anpasse, bis es passt. Das ist nicht systematisch.
• eCharts nutzt eine javascript-Bibliothek, die man einbinden muss. Ich habe keine Ahnung, ob das mit anderen Tools von FHEM interagiert. Bei mir tut es das nicht, aber ich weiß über FHEM zu wenig. Der damit verbundene Aufwand ist sicher nicht für jeden etwas.

Am schönsten wäre es natürlich, wenn jemand wie Richard da mal draufschaut und das auf Vordermann bringt, aber es kann ja nicht immer Weihnachten sein.

Ich habe sehr viel Erläuterung in der Hilfedatei abgelegt, da ich (wegen inoffiziellem Modul) weder commandref noch Wiki bemühen werde. Zudem füge ich zwei Screenshots an, die zeigen, was ich meine. Hier ein kurzes Einführungsvideo (mit zwei kleinen Macken, die ich jetzt nicht mehr repariere): https://www.youtube.com/watch?v=Pay4DYlaPF8 (https://www.youtube.com/watch?v=Pay4DYlaPF8)

Man muss unter diesem Link (https://echarts.apache.org/en/download.html) die Installationsdateien herunterladen. Ich habe sie bei mir in ...www/tablet/eCharts/dist/echarts.js gelegt (Groß- und Kleinschreibung beachten!), wenn man das woanders hinlegen will, muss etwa in Zeile 309f. der Code angepasst werden.

---------------------------------------------------------------------
aktuell hier: Version 0.0.12.1, 

ACHTUNG: In Version 11.1 (10.3.2024) habe ich einen Fehler ausgemerzt, wenn die gplot-Dateien nicht existieren. Je nach Installation führt das aber dazu, dass vor diesem Termin angelegte eCharts-Devices gelöscht werden. Also diese bitte vorher sichern, dann  die neue Version einspielen und dann die Devices erneut anlegen.

Also ich habe das mal getestet.
Ich bekomme einen  Fehler im UI(siehe Bild) und im log steht:
2024.02.10 03:20:14 5: eCharts rendering: defining filter
2024.02.10 03:20:14 5: eCharts rendering: getting plot data
2024.02.10 03:20:14 5: eCharts rendering: defining options

Angezeigt wird natürlich nichts.

Gruß

Hubert

Hallo Hubert,

ich war letzte Woche krank und ich habe ja geschrieben, dass ich da ziemlich anfängerhaft herangehe. Ich schaue mir das aber in jedem Fall an, nur wird es etwas dauern!

So, jetzt habe ich mir das mal angeschaut, und ich verstehe den Fehler nicht. Kannst Du mir mal die Logdaten zukommen lassen? Mein File hat keine 657 Zeilen und das scheint eher so zu sein, dass in den Daten was nicht passt.

Am einfachsten ist es vielleicht, wenn Du eine Zeile einfügst in Deinen Code:
  ######################
  # finished
  ######################
  eCharts_pO '</script>'; # js-Umgebung schliessen
Log3($name, 5, "debug: ".$eCharts_RET); # <=== das ist neu
  return;
denn da wird mir angezeigt, was er eigentlich darstellen will. Oder es geht auch noch einfacher. Du gehst (bei Chrome) auf Anzeigen->Entwickler->Quelltext und suchst
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));und schreibst die nächsten Zeilen bis </script> auf. Da wird nämlich die Grafik erzeugt.

Mich stört momentan auch, dass bei mir die Zeitschiene nicht richtig dargestellt wird. Da ist also mehrfach ein Wurm drin.

Da kommt eine ewig lange Ausgabe.
Hier nur der Anfang und das Ende:

2024.02.12 15:10:53 5: debug: <div id="main" style="width: 160px;height:800px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option ={"title":{"text":"mySenec-2024-02.log"},"tooltip":{"axisPointer":{"type":"cross"},"trigger":"axis"},"xAxis":{"type":"time","boundaryGap":"false"},"series":[{"data":[["2024-02-01T00:00:25Z","0.00"],["2024-02-01T00:01:22Z","0.00"],["2024-02-01T00:02:24Z","0.00"],["2024-02-01T00:03:22Z","0.00"],["2024-02-01T00:04:24Z","0.00"],["2024-02-01T00:05:23Z","0.00"],["2024-02-01T00:06:25Z","0.00"],["2024-02-01T00:07:24Z","0.00"],["2024-02-01T00:08:25Z","0.00"],["2024-02-01T00:09:25Z","0.00"],["2024-02-01T00:10:25Z","0.00"],["2024-02-01T00:11:23Z","0.00"],["2024-02-01T00:12:24Z","0.00"],["2024-02-01T00:13:24Z","0.00"],["2024-02-01T00:14:25Z","0.00"],["2024-02-01T00:15:25Z","0.00"],["2024-02-01T00:16:25Z","0.00"],["2024-02-01T00:17:25Z","0.00"],

........


2-12T14:58:05Z","0.00"],["2024-02-12T14:59:05Z","0.00"],["2024-02-12T15:00:08Z","0.00"],["2024-02-12T15:01:06Z","0.00"],["2024-02-12T15:02:05Z","0.00"],["2024-02-12T15:03:05Z","0.00"],["2024-02-12T15:04:06Z","0.00"],["2024-02-12T15:05:05Z","0.00"],["2024-02-12T15:06:05Z","0.00"],["2024-02-12T15:07:05Z","0.00"],["2024-02-12T15:08:05Z","0.00"],["2024-02-12T15:09:06Z","0.00"],["2024-02-12T15:10:07Z","0.00"]],"smooth":"0.6","type":"line"}],"yAxis":{"type":"value"}};myChart.setOption(option);
</script>


Gruß

Hubert

Nur zur Sicherheit: wo liegt bei Dir
www/tablet/eCharts/dist/echarts.jsUnd kannst du mal schauen, ob in der Quelldatei der Dateiname echarts.js erwähnt wird? Vor dem riesigen Text, den du kopiert hast?

Problem gelöst, schreibfehler:

www/tablet/echarts/dist/echarts.js
versus

www/tablet/eCharts/dist/echarts.js
Kaum macht man es richtig, geht's.

Danke für die Hilfe.

<edit>Alle hier genannten Probleme sind in der Version oben behoben.</edit>

Ich schaffe es nicht, die Zeitschiene auf der x-Achse einzustellen. Was geht ist, dieser Achse die Kategorie "category" zuzuweisen, wenn ich da "time" nehme, sieht man nichts.

Ärgerlich ist an category, dass man anscheinend die Format-Funktionen nicht nutzen kann. Dennoch sieht man wenigstens irgendwelche Daten auf der x-Achse. Ich verlinke oben die Version 0.0.0.2.

So, jetzt klappt das mit der zeit und ich habe auch einen Zoom installieren können; muss als Attribut angegeben werden. Oben im ersten Post ist Version 0.0.0.3.

Anscheinend hat FHEMApp das Tool eCharts integriert, https://forum.fhem.de/index.php?topic=119470.0

Ich muss mal schauen, ob es sich dann lohnt hier weiter zu machen. Ich habe ein paar Kleinigkeiten verbessert (die meisten Dinge werden jetzt aus der Konfigurationsdatei von SVG eingelesen wie grid, tics etc.), aber ich kann nach wie vor nicht mehrere Daten zusammen einlesen, was natürlich echt schwach ist. Wenn das FHEMApp kann, wäre das super.

Nun habe ich es geschafft, auch mehrere Datensätze in einer Grafik zu integrieren, danke auch an Beta-User (siehe hier (https://forum.fhem.de/index.php?topic=137176.msg1304158)). Was ich als nächstes machen will sind zwei y-Achsen (links und rechts) und dann will ich mal bei logProxy schauen, das geht bisher auch nicht.

Es gibt auch noch zwei Probleme, von denen ich wenigstens eines nicht auf dem Schirm hatte:

• Ich kann bisher nicht die Zeiträume auswählen, das kommt irgendwie aus der gplot-Datei. Das heißt, manchmal werden sehr viele Daten geladen und das führt zu dem nächsten Problem:
• Bei mir dauert der Aufruf relativ lang und das ist etwas, womit ich nicht gerechnet habe und wo ich auch keine Idee habe, wie man das handelt.

Die neue Version 0.0.5 ist im ersten Post.

Ich habe noch ein wenig gespielt und eigentlich relativ viel geschafft von den Dingen, die ich mir vorgenommen habe:

• man kann jetzt mehrere Grafiken auf einer Seite darstellen (war vorher ein bug)
• ich kann inzwischen auch die Farbe aus der entsprechenden svg.css holen, da gibt es noch die eine oder andere Kleinigkeit (beim füllen sieht die Linie anders aus als die Füllung)
• man kann so genannte marker einfügen, die minimum, maximum und average angeben (sieht man im Bild unten, im Modul gibt es dazu Erläuterungen)
• mehrere Achsen sollten gehen, jedenfalls so lange man sie in der gplot-Datei mit x1y1 und x1y2 angibt

Nach wie vor habe ich das mit dem Zeitraum nicht im Griff, so dass immer alle Daten angezeigt werden - was sehr lange dauern kann. Zum einen sehe ich Licht am Ende des Tunnels, merke aber auch immer mehr, dass ich nun wirklich an meine Grenzen komme. Die Sache ist doch sehr schnell sehr komplex. Ich will wenigstens versuchen die Dinge umzusetzen, die ich brauche. Anbei noch zwei Screenshots - einmal SVG und einmal eCharts.

Version 0.0.6 ist oben im ersten Post.

Schön dass du immer weiter machst. Ich bin bis jetzt stiller Tester.
Aber gefällt mir bis jetzt sehr gut, dein modul.
In der Version hat sich ein Fehler eingeschlichen:

my @attrList = qw(
      captionLeft:1,0"
..

das muss wohl so lauten:

my @attrList = qw(
      captionLeft:1,0
..

Gruß

Hubert

Das hat mich schon bei SVG gewundert, da steht das nämlich auch so da. Ich werde die Attribute mal bereinigen und nur diejenigen in dem Modul drin lassen, die ich auch implementiert habe.

So, wieder was hinbekommen. Am schwierigsten fand ich das ja mit der Festlegung der Daten, die angezeigt werden (also $from und $to). In SVG ist das so gelöst, dass diese Daten aus der URL ausgelesen werden. Das ergibt auch Sinn, weil man dort Links hat, und wenn man die anklickt, werden aus den Links die neuen Daten für $from und $to ausgelesen. Alternativ gibt es noch Attribute, die das festlegen (fixedrange usw.).

In eCharts geht das mit den Links nicht. Es müssen bei der Definition der Grafik alle Daten bereits vorhanden sein, und man kann nur "in" den Daten zoomen. Es gibt auch keine Möglichkeit, in der eChart-Grafik URLs anzugeben, so dass man durch anklicken andere Daten einladen kann. Jedenfalls habe ich nichts dergleichen gesehen.

Deswegen habe ich das jetzt so gemacht, dass ich mich auf Attribute verlassen und die auslese (war ja alles schon super programmiert vom Chef). Und wenn keine da sind, wird ein Tag genommen. Alles getestet habe ich nicht, aber es sollte gehen. Sonst melden. Und ein paar kleinere Bugs habe ich beseitigt (zB Marker jetzt in der Farbe der Linien selbst usw). Neueste Version 0.0.7 im ersten Post.

Es wäre doch so schön, wenn sich mal ein richtiger Programmierer dieser Sache annehmen könnte. Es gibt so coole Sachen in eCharts, zB "gauge" als Batterienanzeige usw. Aber na ja, muss man halt mit meinem Code leben. Vielleicht reizt es irgendwann jemanden, da mal aufzuräumen.

Letzter Schritt von mir wird noch speichern sein. Deswegen habe ich das ja alles gemacht, damit ich das per TelegramBot schicken kann. Da muss ich jetzt mal suchen.

Sieht cool aus, ist die intigration von DBLog geplant?

Gruß
Max

Hallo,

ich habe das einfach mal auskommentiert, prinzipiell funktioniert DBLog also ;)
Du verwendest ja die funktion von SVG.

    #if(!IsDevice($1, "FileLog")) {
    #    return "failed: LogDevice ".$1." does not exist or is not of TYPE=FileLog"; #cannot handle DbLog at the moment
    #}

Die Min/Max werte werden wohl nicht übernommen.

Gruß
Max

Gruß
Max

Zitat von: MadMax am 25 Februar 2024, 15:25:24Sieht cool aus, ist die intigration von DBLog geplant?

Hallo Max, ich habe derzeit kein DbLog und hatte das deshalb auskommentiert. Bei der nächsten Version mache ich das rein, dann schauen wir mal. Nur etwas Vorsicht: Ich hatte (gerade wieder) Abstürze von FHEM, weil ich da Fehler mache. Also wenn du das produktiv einsetzt, und ich kann das ja nicht testen, kann es den einen oder anderen Absturz geben, besser gut sichern.

Das mit den Minima und Maxima verstehe ich nicht. Die wurden bei SVG separat ermittelt, das macht aber inzwischen eCharts für mich. Ich muss nur die Daten holen und mW ist der Prozess so, dass es fast egal ist, ob die Daten im Format FileLog oder DbLog vorliegen. Es gibt da eine interne Variable ($da), da sind die Daten drin und mehr brauche ich eigentlich nicht. Theoretisch (siehe oben) sollte das also gehen.

Sobald ich das rendern (da verstehe ich nämlich etwas nicht (https://forum.fhem.de/index.php?topic=137238.0)) hinkriege, gibt es eine neue Version und da ist dann DbLog freigegeben. 

Zitat von: MadMax am 25 Februar 2024, 15:45:51Die Min/Max werte werden wohl nicht übernommen.

Ach so, das musst Du einstellen:
attr myChart marker <ich kenne jetzt den 'title' der Datenreihe in der gplot-Datei nicht>:max,avg
wobei der title aus dieser Zeile sein muss
plot "<IN>" using 1:2 axes x1y1 title 'Kern' ls l0 lw 1 with lines(Steht alles in der Hilfedatei des Moduls)

Ich meine damals das die Skala immer beo 0 beginnt und nicht bei z.b. 3000mV in meinem beispiel.

Ich konnte das mit
min => 'dataMin', max => 'dataMax'

In Zeile 574 und 580 lösen.

Eventuell kannst du das eleganter übernehmen.

Gruß
Max

Gute Idee, danke!

Wenn da feste Werte gegeben sind, werde ich versuchen die aus ,,y2range" etc zu übernehmen. Aber wie erkenne ich die Anwendung von dataMin? Man könnte das aus ,,y2range=[min:max]" auslesen - ich weiß aber, dass andere da halsbrecherische Konstruktionen haben. Da weiß ich nicht, wie ich die erkennen soll; evtl. finde ich den Code in SVG.pm.

Habe ich jetzt eingebaut. Das ist wie folgt:

• Man kann das direkt in der gplot-Datei eingeben, da wird nun auch min:max erkannt (was mW bei gplot nicht geht).
• Man kann das aber auch mit einem Attribut überschreiben, das Attribut heißt yrange und gilt für beide y-Achsen.

Details stehen in dem Hilfetext, wenn man das Attribut aufruft. Das erkläre ich gern noch ausführlicher, wenn der Text nicht klar ist.

Ist jetzt Version 0.0.8, oben.

Ich war etwas faul und habe getrickst, da bleibt ein TODO. Ich kann derzeit nur die ersten beiden y-Achsen (also yrange und y2range) so beeinflussen. Mir ist inhaltlich nicht klar, wieso man mehr als zwei y-Achsen haben sollte, das wird ja total unübersichtlich. Also habe ich da etwas zweimal programmiert (einmal yrange, einmal y2range) und nicht eine Schleife über alle möglichen 8 y-Achsen geschrieben. Ist, wie gesagt, ein TODO.

Hallo andies,

ich war mal so frech ein wenig zu basteln.

Zeile 398, zwei neue Arrays für die Legende, Name und Farbe.
Zeile 423, befüllen des Namen für die Legende
Zeile 483, befüllen der Farbe für die Legende (Positiver Nebeneffekt, die Farbe beim Moseover in der Tooltip Box werden auch korrekt angezeigt)
Zeile 541, neues Attribus für die Hintergrundfarbe
Zeile 543, übergebend er Colors
Zeile 544, übergebend er Legende
Zeile 584, hmin und hmax mit "dataMin" und "dataMax" vorbelegen (Verhalten wie beim SVG)
Zeile 616, hmin und hmax mit "dataMin" und "dataMax" vorbelegen (Verhalten wie beim SVG)
Zeile 740, attribut backgroundColor hinzugefügt


So finde ich das jetzt brauchbar und beser als die SVGs.
Danke dafür!

Das einzige was noch nicht geht und was ich jetzt noch nicht rausgefunden habe ich das ich wie im SVG auf den vorherigen Tag wechsel kann.
eCharts_3.JPG

Gruß
Max

Super, danke dafür! Das stelle ich oben als Version 0.0.8.1 ein, richtig?

Ja, das mit den Links in der SVG ist mir auch schon aufgefallen. Da ist das Problem, dass sich SVG den Bereich der herauszulesenden Daten aus einem GET holt - was bei eCharts ja nicht geht. Hier müssen alle Daten im Voraus geladen werden. Ich habe momentan keine Idee, wie man das lösen kann (natürlich so, wie das in den  ersten Versionen war - ich lade das ganze Jahr und das dauert dann ewig). Buttons in der eChart bringen ja nichts, man muss auf eine neue HTML-Seite kommen.

Ich kämpfe noch mit dem rendern, weil ich die Bilder per Telegram verschicken will. Das will ich noch einbauen, da werde ich wohl auf Node.js zurückgreifen. Das ganze war bei SVG einfacher, da gab es einfache Bibliotheken und fertig.

PS Mir juckt das so ein wenig in den Finger, wenn man sich das mal anschaut:
mehrere x-Achsen in eCharts (https://echarts.apache.org/examples/en/editor.html?c=multiple-x-axis)
Da könnte man zB Daten aus zwei (identischen) Zeitperioden miteinander vergleichen. Wie war der Stromverbrauch gestern und vorgestern? Wie war die Regenmenge dieses Jahr und letztes Jahr usw usf. Man müsste dazu nur die Daten etwas anders speichern (derzeit sind die in einem array, also Datum und Wert zusammen - das müsste man trennen) und dann wäre das auch möglich.

Leider habe ich keinen richtigen Anwendungsfall dafür und vor allem fehlt mir eine Idee, wie der Nutzer halbwegs vernünftig eingibt, dass er so etwas haben will und man diesen doch speziellen Fall leicht erkennt. Eine Variante wäre "x1y1" und "x2y1" in der gplot-Datei zum Beispiel, dann muss aber auch gesagt werden, wie zeitversetzt das ist (Tage? Wochen? XTage?...). Es gibt so viele Möglichkeiten in eCharts, da ist die richtige GUI für den Nutzer das größere Problem. Das muss ja bedienbar bleiben und nicht eine Programmieraufgabe für jeden Anwender.

Das klingt alles sehr interessant.
Wo holt das SVG mit einem GET die zeitspanne? Habe ich in der 98_SVG.pm so nicht gefunden.
Wenn es ok für dich ist würde ich ein wenig mit basteln und die Änderungen hier mit posten?

Ich habe hier noch ein Problem mit den Umlauten.
Im svg steht "Füllstand".

Gruß

Hubert

Zitat von: MadMax am 27 Februar 2024, 17:28:26Wo holt das SVG mit einem GET die zeitspanne?...
Wenn es ok für dich ist würde ich ein wenig mit basteln und die Änderungen hier mit posten?

Sehr gern - wir müssen nur koordinieren, dass wir uns nicht in die Quere kommen (sonst ändern wir parallel und müssen das zusammenführen, geht aber auch). Da ich die nächste Zeit nicht unendlich viel daran arbeiten kann, passt das schon und wir können uns ja absprechen, wer woran bastelt.

Zu dem Zeitholen. Die Daten aus den Logfiles bzw DbLog werden durch einen FHEM-Befehl ausgelesen, Zeile 1271 (Zeilennummern in SVG.pm)
    my $cmd = "get $src $fname INT $f $t ".$s->{arg};
(so einen Befehl kann man ja auch in die Kommandozeile eingeben,
get FileLog_GartentorTemp CURRENT INT 2024-02-27_01:35:00 2024-02-27_16:34:59 4:Gartentor.temperatur.*::)
und $f und $t oben sind dann $from und $to. Dieser Befehl schreibt die Daten dann in $da (Zeile ca. 1168), und dort werden sie dann weiterverarbeitet.

Die Variablen $f und $t wiederum werden übergeben in SVG_getData($$$$$). Und diese Funktion kommt aus verschiedenen Quellen, aber markant ist zB Zeile 649ff.
# Debugging: show the data received from GET
sub SVG_showData()oder Zeile 1159, da wird das auch geholt, oder Zeile 975 (Definition $SVG_devs{$d}{from}) usw usf.

Zitat von: carlos am 27 Februar 2024, 17:46:13Ich habe hier noch ein Problem mit den Umlauten.

Ja, das habe ich auch. Das scheint ein encoding-Problem zu sein. Ich weiß nicht Recht, wie man das in den Griff bekommt. Intern schreibe ich jetzt ue statt ü, nicht die beste Lösung.

Beim SVG wird die Zeitspanne und der Anfang ja über den link im Browser übertragen. Ich habe nur nicht gefunden wie das beim SVG ausgelesen wird.

Das mit dem Koprdinieren und zusammen führen sollten wir doch hinbekommen.

Gruß
Max

Zitat von: MadMax am 27 Februar 2024, 18:33:04Ich habe nur nicht gefunden wie das beim SVG ausgelesen wird.

Hier werden die Links erzeugt, oder?
# Generate the zoom and scroll images with links if appropriate
sub SVG_zoomLink($$$)
und dann vermute ich, dass die Daten durch die Variable $FW_pos{off} geholt werden.

Wo die links erzeugt werden habe ich gesehen. Ich werde mir das Morgen nochmal genauer ansehen.

ZitatDa könnte man zB Daten aus zwei (identischen) Zeitperioden miteinander vergleichen.

Bei der SVG kann man das durch Copy&Paste loesen (rechte Maustaste ueber die jeweilige Legende).
Nur so als Idee, womoeglich inspiriert das.

@rudolfkoenig,

könntest du und eventuell unterstützen wie du das mit dem Offset und dem Zoom über den Link gelöst hast?
Ich habe im SVG "$FW_webArgs" gefunden aber ich komme nicht drauf wie die dort den Offset rein bekommst.

Danke.

Gruß
Max

Wenn ich mich recht erinnere, kommt der Offset kommt nicht aus $FW_webArgs.

Schau mal in SVG_calcOffsets($$) vielleicht bringt Dich das weiter.

Zitatkönntest du und eventuell unterstützen wie du das mit dem Offset und dem Zoom über den Link gelöst hast?

Die Funktion SVG_FwFn wird von FHEMWEB beim Erstellen der Seite aufgerufen, da sie als FW_summaryFn bzw. FW_detailFn eingetragen ist.
Hier werden die (bis zu) 4 Knoepfe fuer zoom und offset generiert, die jeweils ein HTML Link beinhalten, mit der aktuellen FHEM-Raum und zusaetzlich der geaenderten Aufloesung bzw. offset in der pos CGI Attribut, was FHEMWEB beim Aufruf (aus historischen Gruenden) in %FW_pos speichert.

Auf diese %FW_pos greift SVG_calcOffset zu, um fuer jede der auf der Seite angezeigten SVGs die from/to Werte zu berechnen.
Diese werden dann an die get Routine des Datenlieferanten uebermittelt.

Danke an rudolfkoenig und betateilchen,

ich habe die stelle gefunden ist due in die eCharts mit übernommen.
Das funktioniert sowei.
eCharts_4.JPG

Ich werde jetzt weitere Plots in eChars umstellen und weiter testen.

Gruß
Max

Nabend,

gerade getestet. Das ist schon schön anzuschauen  :)
Vorschlag, das attr plotsize aus FHEMWEB auslesen. Ich z.B habe 3 Instanzen,
und in jeder eine andere Größe definiert.

Gruß schwatter

@MadMax

Ich habe so 10 min nach Nulluhr gemerkt, das mein Fhem nicht erreichbar war.
Ich denke das hängt mit dem Tageswechsel vom Modul zusammen, denn nach dem löschen des definierten Devices ist bis jetzt alles i.O.
Hatte deine letzte Version.
Heute Abend schaue ich, ob etwas im Log zu finden ist.

Gruß schwatter

Ok, zu solchen Zeiten schaue ich nicht rein ;D
Wie war die Definition? Eventuell gab es noch keine Daten.

Zitat von: schwatter am 28 Februar 2024, 22:58:12Vorschlag, das attr plotsize aus FHEMWEB auslesen. Ich z.B habe 3 Instanzen,
und in jeder eine andere Größe definiert.

Das muss einfach gehen. Allerdings wundert mich das, denn in Zeile 383 bei eCharts.pm steht
  my ($w, $h) = split(",", SVG_getplotsize($name));
und damit wird plotsize ja genau so wie bei SVG geholt - in SVG.pm wiederum wird zuerst bei WEB und dann im device gesucht, wenn ich das richtig sehe
sub
SVG_getplotsize($)
{
  my ($d) = @_;
  return $FW_webArgs{plotsize} ?
                $FW_webArgs{plotsize} :
                AttrVal($d,"plotsize", $FW_plotsize ? $FW_plotsize : "800,400");
}
Das müsste also schon so implementiert sein?

Nabend,

das steht im Log.

2024.02.28 22:47:45 1: PERL WARNING: given is experimental at ./FHEM/98_eCharts.pm line 441.
2024.02.28 22:47:45 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 442.
2024.02.28 22:47:45 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 449.
2024.02.28 22:47:45 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 454.
2024.02.28 22:47:45 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 459.
2024.02.28 22:47:45 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 464.
2024.02.28 22:47:45 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 467.
2024.02.28 22:47:45 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 471.
2024.02.28 22:47:45 1: PERL WARNING: "my" variable $data masks earlier declaration in same scope at ./FHEM/98_eCharts.pm line 781.
2024.02.28 22:47:45 1: PERL WARNING: Prototype mismatch: sub main::eCharts_plotAsPng (@) vs none at ./FHEM/98_eCharts.pm line 790.
2024.02.28 23:01:10 1: PERL WARNING: Use of uninitialized value $attr_value in concatenation (.) or string at ./FHEM/98_eCharts.pm line 267.
Can't use an undefined value as an ARRAY reference at ./FHEM/98_eCharts.pm line 508.
2024.02.29 00:03:34 1: PERL WARNING: given is experimental at ./FHEM/98_eCharts.pm line 441, <$fh> line 5543.
2024.02.29 00:03:34 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 442, <$fh> line 5543.
2024.02.29 00:03:34 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 449, <$fh> line 5543.
2024.02.29 00:03:34 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 454, <$fh> line 5543.
2024.02.29 00:03:34 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 459, <$fh> line 5543.
2024.02.29 00:03:34 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 464, <$fh> line 5543.
2024.02.29 00:03:34 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 467, <$fh> line 5543.
2024.02.29 00:03:34 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 471, <$fh> line 5543.
2024.02.29 00:03:34 1: PERL WARNING: "my" variable $data masks earlier declaration in same scope at ./FHEM/98_eCharts.pm line 781, <$fh> line 5543.
2024.02.29 00:03:34 1: PERL WARNING: Prototype mismatch: sub main::eCharts_plotAsPng (@) vs none at ./FHEM/98_eCharts.pm line 790, <$fh> line 5543.
Can't use an undefined value as an ARRAY reference at ./FHEM/98_eCharts.pm line 508.
2024.02.29 00:06:22 1: PERL WARNING: given is experimental at ./FHEM/98_eCharts.pm line 441, <$fh> line 5543.
2024.02.29 00:06:22 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 442, <$fh> line 5543.
2024.02.29 00:06:22 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 449, <$fh> line 5543.
2024.02.29 00:06:22 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 454, <$fh> line 5543.
2024.02.29 00:06:22 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 459, <$fh> line 5543.
2024.02.29 00:06:22 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 464, <$fh> line 5543.
2024.02.29 00:06:22 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 467, <$fh> line 5543.
2024.02.29 00:06:22 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 471, <$fh> line 5543.
2024.02.29 00:06:22 1: PERL WARNING: "my" variable $data masks earlier declaration in same scope at ./FHEM/98_eCharts.pm line 781, <$fh> line 5543.
2024.02.29 00:06:22 1: PERL WARNING: Prototype mismatch: sub main::eCharts_plotAsPng (@) vs none at ./FHEM/98_eCharts.pm line 790, <$fh> line 5543.
Can't use an undefined value as an ARRAY reference at ./FHEM/98_eCharts.pm line 508.
2024.02.29 00:08:02 1: PERL WARNING: given is experimental at ./FHEM/98_eCharts.pm line 441, <$fh> line 5543.
2024.02.29 00:08:02 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 442, <$fh> line 5543.
2024.02.29 00:08:02 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 449, <$fh> line 5543.
2024.02.29 00:08:02 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 454, <$fh> line 5543.
2024.02.29 00:08:02 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 459, <$fh> line 5543.
2024.02.29 00:08:02 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 464, <$fh> line 5543.
2024.02.29 00:08:02 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 467, <$fh> line 5543.
2024.02.29 00:08:02 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 471, <$fh> line 5543.
2024.02.29 00:08:02 1: PERL WARNING: "my" variable $data masks earlier declaration in same scope at ./FHEM/98_eCharts.pm line 781, <$fh> line 5543.
2024.02.29 00:08:02 1: PERL WARNING: Prototype mismatch: sub main::eCharts_plotAsPng (@) vs none at ./FHEM/98_eCharts.pm line 790, <$fh> line 5543.
Can't use an undefined value as an ARRAY reference at ./FHEM/98_eCharts.pm line 508.
2024.02.29 00:11:18 1: PERL WARNING: given is experimental at ./FHEM/98_eCharts.pm line 441, <$fh> line 5543.
2024.02.29 00:11:18 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 442, <$fh> line 5543.
2024.02.29 00:11:18 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 449, <$fh> line 5543.
2024.02.29 00:11:18 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 454, <$fh> line 5543.
2024.02.29 00:11:18 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 459, <$fh> line 5543.
2024.02.29 00:11:18 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 464, <$fh> line 5543.
2024.02.29 00:11:18 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 467, <$fh> line 5543.
2024.02.29 00:11:18 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 471, <$fh> line 5543.
2024.02.29 00:11:18 1: PERL WARNING: "my" variable $data masks earlier declaration in same scope at ./FHEM/98_eCharts.pm line 781, <$fh> line 5543.
2024.02.29 00:11:18 1: PERL WARNING: Prototype mismatch: sub main::eCharts_plotAsPng (@) vs none at ./FHEM/98_eCharts.pm line 790, <$fh> line 5543.
Can't use an undefined value as an ARRAY reference at ./FHEM/98_eCharts.pm line 508.
2024.02.29 00:15:06 1: PERL WARNING: given is experimental at ./FHEM/98_eCharts.pm line 441, <$fh> line 5543.
2024.02.29 00:15:06 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 442, <$fh> line 5543.
2024.02.29 00:15:06 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 449, <$fh> line 5543.
2024.02.29 00:15:06 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 454, <$fh> line 5543.
2024.02.29 00:15:06 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 459, <$fh> line 5543.
2024.02.29 00:15:06 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 464, <$fh> line 5543.
2024.02.29 00:15:06 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 467, <$fh> line 5543.
2024.02.29 00:15:06 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 471, <$fh> line 5543.
2024.02.29 00:15:06 1: PERL WARNING: "my" variable $data masks earlier declaration in same scope at ./FHEM/98_eCharts.pm line 781, <$fh> line 5543.
2024.02.29 00:15:06 1: PERL WARNING: Prototype mismatch: sub main::eCharts_plotAsPng (@) vs none at ./FHEM/98_eCharts.pm line 790, <$fh> line 5543.
Can't use an undefined value as an ARRAY reference at ./FHEM/98_eCharts.pm line 508.
2024.02.29 00:17:12 1: PERL WARNING: given is experimental at ./FHEM/98_eCharts.pm line 441, <$fh> line 5543.
2024.02.29 00:17:12 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 442, <$fh> line 5543.
2024.02.29 00:17:12 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 449, <$fh> line 5543.
2024.02.29 00:17:12 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 454, <$fh> line 5543.
2024.02.29 00:17:12 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 459, <$fh> line 5543.
2024.02.29 00:17:12 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 464, <$fh> line 5543.
2024.02.29 00:17:12 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 467, <$fh> line 5543.
2024.02.29 00:17:12 1: PERL WARNING: when is experimental at ./FHEM/98_eCharts.pm line 471, <$fh> line 5543.
2024.02.29 00:17:12 1: PERL WARNING: "my" variable $data masks earlier declaration in same scope at ./FHEM/98_eCharts.pm line 781, <$fh> line 5543.
2024.02.29 00:17:12 1: PERL WARNING: Prototype mismatch: sub main::eCharts_plotAsPng (@) vs none at ./FHEM/98_eCharts.pm line 790, <$fh> line 5543.
Can't use an undefined value as an ARRAY reference at ./FHEM/98_eCharts.pm line 508.


Angelegt ist der eChart so

defmod myChart eCharts FileLog_HmIP_FALMOT_C12:SVG_FileLog_HmIP_FALMOT_C12_1:CURRENT
attr myChart plotsize 300,500
attr myChart room 01.Heizung_UG
Im Anhang der Log vom HmIP_FALMOT_C12. Einen Abriss erkenne ich nicht, aber größere Abstände.
Genauer, es geht um die Level-Readings im Log. Diese zeigen mir die Öffnungsgrad der Stellventile an.
Das es dann keine Daten gab, wäre plausibel.

event-on-change or ähnliches habe ich nicht gesetzt. Vielleicht addLog verwenden. Dann wäre es kein Thema mehr für hier.
SVG_Filelog kommt damit klar. Vielleicht könnt ihr das abfangen.


Gruß schwatter

@andies

Bei mir schaut das so aus. Wenn ich die Größe nicht definiere.


Gruß schwatter

Zeigt dein Plot nur den aktuellen Tag an? Also von 0Uhr bis jetzt?

Zitat von: MadMax am 29 Februar 2024, 18:24:46Zeigt dein Plot nur den aktuellen Tag an? Also von 0Uhr bis jetzt?

Ja, muss so sein du hast ja nicht endplotnow gesetzt damit beginnst du 0uhr.
Dann kommt der Fehler wenn es keine Daten in dem Zeitraum gibt.

Das heißt, "keine Daten" sollte man abfangen?

Weiter: "PERL WARNING: when is experimental" ist auf meinem Mist gewachsen, war ich in Pascal/Delphi so gewöhnt.

Und "line 781" sind meine nicht sonderlich erfolgreichen Versuche, das Speichern (eigentlich: rendern) richtig hinzukriegen. Da bekommt eher betateilchen Popcorn übers Internet geliefert bevor ich das schaffe.

Mir ist auch noch was aufgefallen bei wo wir gerade beim Daten prüfen sind. Ich hatte das jetzt auf die schnelle finden können.

Im SVG geht die Leistung um 13:30 auf 0 und im eChart nicht. Im SVG gibt mir "Show process input" die Daten aus und da sind definitiv Nullen drin.

Andersrum habe ich auch Charts wo Werte von Positiv und Negativ wechseln. Da passt alles.

Hast du eine Idee?

komisch. Wie sind denn die Rohdaten in DbLog/FileLog in dem Zeitraum?

Die sind definitiv 0,merkwürdig ist such das das Chart als min Wert 3,4 anzeigt.


Hier alle Werte der letzten 24h.
3,4W ist der niedrigste Wert abgesehen von 0W.
get DbLog.SMA_EM HISTORY INT 2024-02-28_20:35:00 2024-02-29_20:34:59 EV_CHarger_22:Leistung_Bezug:::

2024-02-28_20:42:08 0
2024-02-28_20:52:24 0
2024-02-28_21:02:41 0
2024-02-28_21:12:56 0
2024-02-28_21:23:13 0
2024-02-28_21:33:28 0
2024-02-28_21:43:44 0
2024-02-28_21:54:01 0
2024-02-28_22:04:17 0
2024-02-28_22:14:33 0
2024-02-28_22:24:49 0
2024-02-28_22:35:07 0
2024-02-28_22:45:21 0
2024-02-28_22:55:39 0
2024-02-28_23:05:55 0
2024-02-28_23:16:09 0
2024-02-28_23:26:25 0
2024-02-28_23:36:42 0
2024-02-28_23:46:58 0
2024-02-28_23:57:15 0
2024-02-29_00:07:33 0
2024-02-29_00:17:46 0
2024-02-29_00:28:04 0
2024-02-29_00:38:18 0
2024-02-29_00:48:35 0
2024-02-29_00:58:51 0
2024-02-29_01:09:07 0
2024-02-29_01:19:23 0
2024-02-29_01:29:39 0
2024-02-29_01:39:58 0
2024-02-29_01:50:12 0
2024-02-29_02:00:29 0
2024-02-29_02:10:44 0
2024-02-29_02:21:00 0
2024-02-29_02:31:15 0
2024-02-29_02:41:31 0
2024-02-29_02:51:48 0
2024-02-29_03:02:05 0
2024-02-29_03:12:25 0
2024-02-29_03:22:38 0
2024-02-29_03:32:56 0
2024-02-29_03:43:10 0
2024-02-29_03:53:26 0
2024-02-29_04:03:43 0
2024-02-29_04:13:59 0
2024-02-29_04:24:15 0
2024-02-29_04:34:31 0
2024-02-29_04:44:49 0
2024-02-29_04:55:03 0
2024-02-29_05:05:22 0
2024-02-29_05:15:36 0
2024-02-29_05:25:51 0
2024-02-29_05:36:07 0
2024-02-29_05:46:24 0
2024-02-29_05:56:40 0
2024-02-29_06:06:57 0
2024-02-29_06:17:13 0
2024-02-29_06:27:28 0
2024-02-29_06:37:46 0
2024-02-29_06:48:01 0
2024-02-29_06:58:16 0
2024-02-29_07:08:34 0
2024-02-29_07:18:50 0
2024-02-29_07:29:06 0
2024-02-29_07:39:22 0
2024-02-29_07:49:39 0
2024-02-29_07:59:54 0
2024-02-29_08:10:12 0
2024-02-29_08:20:27 0
2024-02-29_08:30:43 0
2024-02-29_08:40:59 0
2024-02-29_08:51:16 0
2024-02-29_09:01:32 0
2024-02-29_09:11:48 0
2024-02-29_09:22:04 0
2024-02-29_09:32:20 0
2024-02-29_09:42:38 0
2024-02-29_09:52:53 0
2024-02-29_10:03:09 0
2024-02-29_10:13:25 0
2024-02-29_10:23:41 0
2024-02-29_10:33:58 0
2024-02-29_10:44:14 0
2024-02-29_10:54:31 0
2024-02-29_11:04:46 0
2024-02-29_11:15:03 0
2024-02-29_11:25:18 0
2024-02-29_11:35:34 0
2024-02-29_11:37:26 7108.3
2024-02-29_11:37:29 7031.7
2024-02-29_11:37:44 7026.7
2024-02-29_11:37:59 7104.9
2024-02-29_11:38:14 11122.2
2024-02-29_11:38:30 11102.5
2024-02-29_11:38:44 11216
2024-02-29_11:38:59 11182.7
2024-02-29_11:39:15 10380.6
2024-02-29_11:39:29 10412.8
2024-02-29_11:39:44 10431.5
2024-02-29_11:39:59 10423.3
2024-02-29_11:40:14 10694.6
2024-02-29_11:40:29 10692.4
2024-02-29_11:40:44 10697.7
2024-02-29_11:40:59 10705.8
2024-02-29_11:41:14 11100.8
2024-02-29_11:41:29 11099.5
2024-02-29_11:41:44 11105.9
2024-02-29_11:41:59 11114
2024-02-29_11:42:14 11112
2024-02-29_11:42:29 11108.7
2024-02-29_11:42:44 11106.2
2024-02-29_11:42:59 11115.5
2024-02-29_11:43:14 11113.5
2024-02-29_11:43:29 11108.7
2024-02-29_11:43:44 11113.3
2024-02-29_11:43:59 11120.6
2024-02-29_11:44:14 11118.1
2024-02-29_11:44:30 11116.4
2024-02-29_11:44:44 11124.3
2024-02-29_11:44:59 11123.8
2024-02-29_11:45:15 11014.6
2024-02-29_11:45:29 11010.5
2024-02-29_11:45:44 11103.5
2024-02-29_11:45:59 11029.3
2024-02-29_11:46:14 11214.7
2024-02-29_11:46:29 11217.9
2024-02-29_11:46:44 11225.6
2024-02-29_11:46:59 11226.5
2024-02-29_11:47:14 11226.6
2024-02-29_11:47:29 11224.4
2024-02-29_11:47:44 11231.3
2024-02-29_11:47:59 11232.4
2024-02-29_11:48:14 11229.3
2024-02-29_11:48:29 11220.5
2024-02-29_11:48:44 11234
2024-02-29_11:48:59 11233.5
2024-02-29_11:49:14 11228.9
2024-02-29_11:49:29 11228.1
2024-02-29_11:49:44 11233
2024-02-29_11:49:59 11247.1
2024-02-29_11:50:14 11210.6
2024-02-29_11:50:29 11203.5
2024-02-29_11:50:44 11213.8
2024-02-29_11:50:59 11215.6
2024-02-29_11:51:14 11261
2024-02-29_11:51:29 11241.8
2024-02-29_11:51:44 11267.6
2024-02-29_11:51:59 11255.8
2024-02-29_11:52:14 11265.7
2024-02-29_11:52:29 11249
2024-02-29_11:52:44 11251.6
2024-02-29_11:52:59 11262.2
2024-02-29_11:53:14 11246.4
2024-02-29_11:53:29 11247.7
2024-02-29_11:53:44 11260.6
2024-02-29_11:53:59 11271.4
2024-02-29_11:54:14 11259
2024-02-29_11:54:29 11251.9
2024-02-29_11:54:44 11263.4
2024-02-29_11:54:59 11262.4
2024-02-29_11:55:14 11261.2
2024-02-29_11:55:29 11261.1
2024-02-29_11:55:44 11269.7
2024-02-29_11:55:59 11275.4
2024-02-29_11:56:14 11264.6
2024-02-29_11:56:29 11261.4
2024-02-29_11:56:44 11275.8
2024-02-29_11:56:59 11275.2
2024-02-29_11:57:14 11264.8
2024-02-29_11:57:29 11269.5
2024-02-29_11:57:44 11278
2024-02-29_11:57:59 11258.8
2024-02-29_11:58:14 11246.2
2024-02-29_11:58:29 11245.8
2024-02-29_11:58:44 11256.7
2024-02-29_11:58:59 11249.5
2024-02-29_11:59:14 11243.6
2024-02-29_11:59:29 11245.4
2024-02-29_11:59:44 11248
2024-02-29_11:59:59 11233.5
2024-02-29_12:00:15 11234.2
2024-02-29_12:00:30 11237.9
2024-02-29_12:00:44 11204.8
2024-02-29_12:00:59 11193.4
2024-02-29_12:01:14 11182.6
2024-02-29_12:01:29 11181.3
2024-02-29_12:01:44 11187.9
2024-02-29_12:01:59 11189.5
2024-02-29_12:02:15 11181.1
2024-02-29_12:02:29 11161.8
2024-02-29_12:02:44 11172.5
2024-02-29_12:02:59 11152.1
2024-02-29_12:03:14 11146.1
2024-02-29_12:03:29 11156.2
2024-02-29_12:03:44 11158.7
2024-02-29_12:03:59 11151.7
2024-02-29_12:04:14 11145.5
2024-02-29_12:04:29 11149
2024-02-29_12:04:44 11152.8
2024-02-29_12:04:59 11151.3
2024-02-29_12:05:14 11141.9
2024-02-29_12:05:30 11143.1
2024-02-29_12:05:44 11139.9
2024-02-29_12:05:59 11118.3
2024-02-29_12:06:14 11088.2
2024-02-29_12:06:29 11064.9
2024-02-29_12:06:44 11067.8
2024-02-29_12:06:59 11072.7
2024-02-29_12:07:14 11085.8
2024-02-29_12:07:29 11097.5
2024-02-29_12:07:44 11097.1
2024-02-29_12:07:59 11108
2024-02-29_12:08:14 11108.5
2024-02-29_12:08:29 11114.5
2024-02-29_12:08:44 11119.2
2024-02-29_12:08:59 11080.1
2024-02-29_12:09:14 11133.4
2024-02-29_12:09:29 11139.4
2024-02-29_12:09:44 11148.1
2024-02-29_12:09:59 11146.9
2024-02-29_12:10:14 11146.4
2024-02-29_12:10:29 11160.6
2024-02-29_12:10:45 11158.4
2024-02-29_12:10:59 11161.5
2024-02-29_12:11:14 11159.4
2024-02-29_12:11:29 11167
2024-02-29_12:11:44 11172.8
2024-02-29_12:11:59 11178.6
2024-02-29_12:12:14 11174.6
2024-02-29_12:12:29 11177.5
2024-02-29_12:12:44 11182.1
2024-02-29_12:12:59 11184.5
2024-02-29_12:13:14 11186.7
2024-02-29_12:13:29 11188.8
2024-02-29_12:13:44 11193.4
2024-02-29_12:13:59 11186.2
2024-02-29_12:14:14 11190.5
2024-02-29_12:14:29 11195.4
2024-02-29_12:14:44 11197.4
2024-02-29_12:14:59 11198.3
2024-02-29_12:15:14 11157.3
2024-02-29_12:15:29 11159.6
2024-02-29_12:15:44 11181.8
2024-02-29_12:16:00 11162
2024-02-29_12:16:14 11207.4
2024-02-29_12:16:29 11210
2024-02-29_12:16:44 11205.3
2024-02-29_12:16:59 11166.7
2024-02-29_12:17:14 11158.6
2024-02-29_12:17:29 11178.5
2024-02-29_12:17:44 11173.6
2024-02-29_12:17:59 11170.5
2024-02-29_12:18:14 11160.2
2024-02-29_12:18:29 11167.7
2024-02-29_12:18:44 11175
2024-02-29_12:18:59 11144.6
2024-02-29_12:19:14 11151.6
2024-02-29_12:19:29 11168.5
2024-02-29_12:19:44 11163.5
2024-02-29_12:19:59 11152.8
2024-02-29_12:20:14 11169.4
2024-02-29_12:20:29 11174.6
2024-02-29_12:20:44 11160.7
2024-02-29_12:20:59 11174.9
2024-02-29_12:21:16 11163.2
2024-02-29_12:21:29 11150.8
2024-02-29_12:21:44 11152.1
2024-02-29_12:21:59 11151.4
2024-02-29_12:22:14 11152
2024-02-29_12:22:29 11157.8
2024-02-29_12:22:44 11165.6
2024-02-29_12:22:59 11155.8
2024-02-29_12:23:14 11155.4
2024-02-29_12:23:29 11163.1
2024-02-29_12:23:44 11162.2
2024-02-29_12:23:59 11158.3
2024-02-29_12:24:14 11168.9
2024-02-29_12:24:29 11165.8
2024-02-29_12:24:44 11166.3
2024-02-29_12:24:59 11146.6
2024-02-29_12:25:14 11153.5
2024-02-29_12:25:29 11167.9
2024-02-29_12:25:44 11179.5
2024-02-29_12:25:59 11144.9
2024-02-29_12:26:14 11158
2024-02-29_12:26:31 11177.6
2024-02-29_12:26:44 11147.1
2024-02-29_12:26:59 11125.8
2024-02-29_12:27:14 11173.9
2024-02-29_12:27:29 11166.5
2024-02-29_12:27:44 11173.9
2024-02-29_12:27:59 11164.1
2024-02-29_12:28:14 11144.3
2024-02-29_12:28:29 11181.2
2024-02-29_12:28:44 11191.8
2024-02-29_12:28:59 11197.2
2024-02-29_12:29:14 11197.7
2024-02-29_12:29:29 11206.3
2024-02-29_12:29:44 11207
2024-02-29_12:29:59 11204
2024-02-29_12:30:14 11204.5
2024-02-29_12:30:29 11216.7
2024-02-29_12:30:44 11199.1
2024-02-29_12:30:59 11205.6
2024-02-29_12:31:14 11214.7
2024-02-29_12:31:29 11228.7
2024-02-29_12:31:45 11233.2
2024-02-29_12:31:59 11208.2
2024-02-29_12:32:14 11213.3
2024-02-29_12:32:29 11232.8
2024-02-29_12:32:44 11220.1
2024-02-29_12:32:59 11198.1
2024-02-29_12:33:14 11185.8
2024-02-29_12:33:29 11191.4
2024-02-29_12:33:45 11190.8
2024-02-29_12:33:59 11182.5
2024-02-29_12:34:14 11176.7
2024-02-29_12:34:29 11187.9
2024-02-29_12:34:44 11196.5
2024-02-29_12:34:59 11181.2
2024-02-29_12:35:14 11165.1
2024-02-29_12:35:29 11184.9
2024-02-29_12:35:44 11183.1
2024-02-29_12:35:59 11186.8
2024-02-29_12:36:14 11163.6
2024-02-29_12:36:29 11187.4
2024-02-29_12:36:44 11173.1
2024-02-29_12:37:00 11161.2
2024-02-29_12:37:14 11141.9
2024-02-29_12:37:29 11145.7
2024-02-29_12:37:44 11139.8
2024-02-29_12:37:59 11131.2
2024-02-29_12:38:14 11151.9
2024-02-29_12:38:29 11158.8
2024-02-29_12:38:44 11158.3
2024-02-29_12:38:59 11152.9
2024-02-29_12:39:14 11157.8
2024-02-29_12:39:29 11132.4
2024-02-29_12:39:44 11144.6
2024-02-29_12:39:59 11105.2
2024-02-29_12:40:14 11126.4
2024-02-29_12:40:29 11131.4
2024-02-29_12:40:44 11134.4
2024-02-29_12:40:59 11187.1
2024-02-29_12:41:14 11191.1
2024-02-29_12:41:29 11189.1
2024-02-29_12:41:45 11189.3
2024-02-29_12:41:59 11190.7
2024-02-29_12:42:16 11193
2024-02-29_12:42:29 11190.7
2024-02-29_12:42:44 11174.7
2024-02-29_12:42:59 11187.1
2024-02-29_12:43:14 11195.5
2024-02-29_12:43:29 11201.3
2024-02-29_12:43:45 11202.9
2024-02-29_12:43:59 11200.2
2024-02-29_12:44:14 11206.6
2024-02-29_12:44:29 11213.9
2024-02-29_12:44:44 11215.4
2024-02-29_12:44:59 11210.6
2024-02-29_12:45:14 11207.3
2024-02-29_12:45:29 11210.3
2024-02-29_12:45:44 11208.5
2024-02-29_12:45:59 11207.2
2024-02-29_12:46:14 11204.2
2024-02-29_12:46:29 11211.4
2024-02-29_12:46:44 11180.4
2024-02-29_12:46:59 11178.5
2024-02-29_12:47:14 11183.5
2024-02-29_12:47:31 11191.9
2024-02-29_12:47:44 11182.1
2024-02-29_12:47:59 11182.9
2024-02-29_12:48:14 11184.9
2024-02-29_12:48:29 11195.4
2024-02-29_12:48:44 11193.3
2024-02-29_12:48:59 11191.8
2024-02-29_12:49:14 11194.2
2024-02-29_12:49:29 11199.7
2024-02-29_12:49:44 11199.2
2024-02-29_12:49:59 11195.5
2024-02-29_12:50:14 11178.4
2024-02-29_12:50:29 11194.9
2024-02-29_12:50:44 11183.8
2024-02-29_12:50:59 11189.8
2024-02-29_12:51:14 11169.1
2024-02-29_12:51:29 11191.2
2024-02-29_12:51:44 11168.6
2024-02-29_12:51:59 11159.7
2024-02-29_12:52:14 11190.2
2024-02-29_12:52:29 11182.5
2024-02-29_12:52:46 11163.1
2024-02-29_12:52:59 11160.5
2024-02-29_12:53:14 11167
2024-02-29_12:53:29 11208.5
2024-02-29_12:53:44 11201.5
2024-02-29_12:53:59 11190.2
2024-02-29_12:54:14 11149.8
2024-02-29_12:54:29 11123.7
2024-02-29_12:54:44 11113.6
2024-02-29_12:55:00 11137.4
2024-02-29_12:55:14 11179
2024-02-29_12:55:29 11182.4
2024-02-29_12:55:44 11175.5
2024-02-29_12:55:59 11172.8
2024-02-29_12:56:14 11179.5
2024-02-29_12:56:29 11209
2024-02-29_12:56:44 11187.4
2024-02-29_12:56:59 11204.8
2024-02-29_12:57:14 11221.8
2024-02-29_12:57:29 11217.8
2024-02-29_12:57:44 11219.2
2024-02-29_12:58:00 11218.5
2024-02-29_12:58:14 11221.8
2024-02-29_12:58:29 11229.7
2024-02-29_12:58:44 11224.3
2024-02-29_12:58:59 11227.1
2024-02-29_12:59:14 11221.6
2024-02-29_12:59:29 11237.1
2024-02-29_12:59:59 11227.6
2024-02-29_13:00:14 11221.1
2024-02-29_13:00:29 11201.7
2024-02-29_13:00:44 11196.9
2024-02-29_13:00:59 11201
2024-02-29_13:01:14 11205.1
2024-02-29_13:01:29 11210.7
2024-02-29_13:01:44 11209.4
2024-02-29_13:01:59 11201
2024-02-29_13:02:14 11209.1
2024-02-29_13:02:29 11214.1
2024-02-29_13:02:44 11206.8
2024-02-29_13:02:59 11207.9
2024-02-29_13:03:16 11210.8
2024-02-29_13:03:29 11213.1
2024-02-29_13:03:44 11213.9
2024-02-29_13:03:59 11201.8
2024-02-29_13:04:14 11215.2
2024-02-29_13:04:29 11218.7
2024-02-29_13:04:44 11223.1
2024-02-29_13:04:59 11226.4
2024-02-29_13:05:14 11231.8
2024-02-29_13:05:29 11237.1
2024-02-29_13:05:44 11220.6
2024-02-29_13:05:59 11221.4
2024-02-29_13:06:14 11231.3
2024-02-29_13:06:29 11235.6
2024-02-29_13:06:44 11227
2024-02-29_13:06:59 11227.5
2024-02-29_13:07:14 11233.6
2024-02-29_13:07:29 11224
2024-02-29_13:07:44 11226.4
2024-02-29_13:07:59 11231.3
2024-02-29_13:08:15 11236.5
2024-02-29_13:08:31 11233.8
2024-02-29_13:08:44 11226.6
2024-02-29_13:08:59 11227.8
2024-02-29_13:09:14 11236.9
2024-02-29_13:09:29 11239.6
2024-02-29_13:09:44 11234.3
2024-02-29_13:09:59 11239.1
2024-02-29_13:10:14 11237.9
2024-02-29_13:10:29 11242.2
2024-02-29_13:10:44 11133
2024-02-29_13:10:59 11152.6
2024-02-29_13:11:14 11149
2024-02-29_13:11:29 11171.2
2024-02-29_13:11:44 11143.2
2024-02-29_13:11:59 11150.2
2024-02-29_13:12:14 11166
2024-02-29_13:12:29 11173
2024-02-29_13:12:44 11154.6
2024-02-29_13:12:59 11139.8
2024-02-29_13:13:14 11151.1
2024-02-29_13:13:29 11160.8
2024-02-29_13:13:45 11139.2
2024-02-29_13:13:59 11198.5
2024-02-29_13:14:14 11223.8
2024-02-29_13:14:29 11239.1
2024-02-29_13:14:44 11194.9
2024-02-29_13:14:59 11191.9
2024-02-29_13:15:14 11220.2
2024-02-29_13:15:29 11222.7
2024-02-29_13:15:44 11217.3
2024-02-29_13:15:59 11213.5
2024-02-29_13:16:14 11150.7
2024-02-29_13:16:29 11126.6
2024-02-29_13:16:45 11113.1
2024-02-29_13:16:59 11195.8
2024-02-29_13:17:14 11204.1
2024-02-29_13:17:29 11229.9
2024-02-29_13:17:44 11225.4
2024-02-29_13:17:59 11197.8
2024-02-29_13:18:14 11207.7
2024-02-29_13:18:29 11209.1
2024-02-29_13:18:44 11198.2
2024-02-29_13:19:01 11200.2
2024-02-29_13:19:14 11212.8
2024-02-29_13:19:29 11223.2
2024-02-29_13:19:44 11196.9
2024-02-29_13:19:59 11204
2024-02-29_13:20:14 11076.4
2024-02-29_13:20:29 11065
2024-02-29_13:20:44 11066
2024-02-29_13:20:59 11050.9
2024-02-29_13:21:14 11251.9
2024-02-29_13:21:29 11247.9
2024-02-29_13:21:44 11239.4
2024-02-29_13:21:59 11244.9
2024-02-29_13:22:14 11254
2024-02-29_13:22:29 11234
2024-02-29_13:22:44 11217.7
2024-02-29_13:22:59 11229.2
2024-02-29_13:23:14 11227.9
2024-02-29_13:23:29 11234.1
2024-02-29_13:23:44 11223.3
2024-02-29_13:23:59 11229
2024-02-29_13:24:16 11244.4
2024-02-29_13:24:29 11259.1
2024-02-29_13:24:44 11258.5
2024-02-29_13:24:59 11261.5
2024-02-29_13:25:14 11264.6
2024-02-29_13:25:29 11249.5
2024-02-29_13:25:44 11253.3
2024-02-29_13:25:59 11206.7
2024-02-29_13:26:14 11211.7
2024-02-29_13:26:29 11225.1
2024-02-29_13:26:44 11204.1
2024-02-29_13:26:59 11206.7
2024-02-29_13:27:14 11213.1
2024-02-29_13:27:29 11211.3
2024-02-29_13:27:44 11253.7
2024-02-29_13:27:59 11246.9
2024-02-29_13:28:14 11260.3
2024-02-29_13:28:29 11209.3
2024-02-29_13:28:44 11246
2024-02-29_13:29:00 11242.8
2024-02-29_13:29:14 0
2024-02-29_13:39:30 0
2024-02-29_13:49:47 0
2024-02-29_14:00:03 0
2024-02-29_14:10:20 0
2024-02-29_14:20:35 0
2024-02-29_14:30:51 0
2024-02-29_14:41:07 0
2024-02-29_14:51:25 0
2024-02-29_15:01:39 0
2024-02-29_15:11:55 0
2024-02-29_15:22:12 0
2024-02-29_15:32:27 0
2024-02-29_15:42:44 0
2024-02-29_15:53:00 0
2024-02-29_16:03:16 0
2024-02-29_16:13:32 0
2024-02-29_16:23:48 0
2024-02-29_16:26:36 4190.2
2024-02-29_16:26:44 4181.8
2024-02-29_16:26:59 4181.4
2024-02-29_16:27:14 4318.2
2024-02-29_16:27:30 4297.6
2024-02-29_16:27:44 4297.4
2024-02-29_16:27:59 4277.7
2024-02-29_16:28:14 3541.9
2024-02-29_16:28:29 3525.1
2024-02-29_16:28:44 3523.1
2024-02-29_16:28:59 3526.4
2024-02-29_16:29:15 3867.8
2024-02-29_16:29:29 3870.5
2024-02-29_16:29:44 3872.1
2024-02-29_16:29:59 3875.8
2024-02-29_16:30:16 4174.2
2024-02-29_16:30:29 4185.5
2024-02-29_16:30:44 4181.2
2024-02-29_16:30:59 4185.4
2024-02-29_16:31:14 4055.3
2024-02-29_16:31:29 4052.7
2024-02-29_16:31:44 4051.6
2024-02-29_16:31:59 4054.5
2024-02-29_16:32:14 4020.8
2024-02-29_16:32:29 3988.1
2024-02-29_16:32:44 4004
2024-02-29_16:32:59 4007.1
2024-02-29_16:33:14 4047.8
2024-02-29_16:33:29 4043.6
2024-02-29_16:33:44 4041.4
2024-02-29_16:33:59 4060.9
2024-02-29_16:34:14 4017.2
2024-02-29_16:34:29 4008.1
2024-02-29_16:34:44 4007.7
2024-02-29_16:34:59 4011.7
2024-02-29_16:35:14 4014
2024-02-29_16:35:31 4010.7
2024-02-29_16:35:44 4013.4
2024-02-29_16:35:59 4018.8
2024-02-29_16:36:14 3931.5
2024-02-29_16:36:29 3924.6
2024-02-29_16:36:44 3924
2024-02-29_16:36:59 3917.3
2024-02-29_16:37:14 3889.4
2024-02-29_16:37:29 3883
2024-02-29_16:37:44 3882.9
2024-02-29_16:37:59 3889.8
2024-02-29_16:38:14 3889
2024-02-29_16:38:29 3881.6
2024-02-29_16:38:44 3882.7
2024-02-29_16:38:59 3890.8
2024-02-29_16:39:14 3962.6
2024-02-29_16:39:29 3968.7
2024-02-29_16:39:44 3955.7
2024-02-29_16:39:59 3960.2
2024-02-29_16:40:14 3922.9
2024-02-29_16:40:29 3.6
2024-02-29_16:40:47 3.4
2024-02-29_16:40:59 3899.9
2024-02-29_16:41:14 0
2024-02-29_16:51:31 0
2024-02-29_17:01:48 0
2024-02-29_17:12:02 0
2024-02-29_17:22:20 0
2024-02-29_17:32:36 0
2024-02-29_17:42:53 0
2024-02-29_17:53:08 0
2024-02-29_18:03:24 0
2024-02-29_18:13:42 0
2024-02-29_18:23:56 0
2024-02-29_18:34:13 0
2024-02-29_18:44:28 0
2024-02-29_18:54:44 0
2024-02-29_19:05:01 0
2024-02-29_19:15:17 0
2024-02-29_19:25:33 0
2024-02-29_19:35:49 0
2024-02-29_19:46:07 0
2024-02-29_19:56:21 0
2024-02-29_20:06:37 0
2024-02-29_20:16:53 0
2024-02-29_20:27:09 0


2024-02-29_13:29:00 11242.8
2024-02-29_13:29:14 0
Da passiert das. Kannst du nicht mal die Daten beim einlesen ausgeben lassen, also sowas hier (Zeile ca 520)
# built up of 'data_array' (time, value)
$l =~ s/_/T/g;
     my ($datum, $wert) = split(" ", $l, 2);
  if ($wert) {
  $datum =~ s/T/ /g;
  push @{$data_array[$series_index]}, [$datum, $wert];
Log3 undef, 1, "debug: datum ".$datum." wert ".$wert; # <== NEU
}
Das müllt einem natürlich den Log zu, aber so habe ich das die ganze Zeit gemacht  :-\ . Vielleicht sehen wir, was da passiert?

PS: Sag mal, könnte es sein, dass ($wert) natürlich abgelehnt wird, wenn $wert==0 ist? Das ist es doch, oder? (Ich wollte so was sagen wie "wenn der split erfolgreich ist".)

Ich würde das mal loggen aber
if ($wert) {
Würde Werte mit 0 raus werfen.
Eventuell auf Datum prüfen?
Oder auf defined prüfen?

Zitat von: MadMax am 29 Februar 2024, 21:27:55Oder auf defined prüfen?

Das trifft es, oder?

Hast Du da schon was im Code verändert? Sonst mache ich das? Sag einfach, ich will nur Durcheinander vermeiden.

Ja ich denke  :)

Nimm bitte die Version 0.0.9 aus Post 35 von mir fürs überarbeiten.
Ich würde mir dann mal überlegen wie man die Buttons vernünftig intigriert für offset und zoom..

Zitat von: MadMax am 29 Februar 2024, 21:33:10Nimm bitte die Version 0.0.9 aus Post 35 von mir fürs überarbeiten.

Erledigt, im ersten Post ganz oben.

Top, werde ich morgen testen.

Klasse, funktioniert  :)

Bist du gerade am Text? Ich will eine größere Änderung vornehmen: mein wichtigstes Ziel war es ja, die Grafiken zu rendern, damit sie in Telegram verschickt werden können. Dazu kann aber der Code nicht so erzeugt werden, wie er gerade erzeugt wird. Ich muss die Funktion ShowLog (oder wie die heißt) in zwei Teile teilen.

Wenn wir uns da jetzt in die Quere kommen, wäre das echt Mist. Ich denke, dass ich das spätestens morgen fertig haben sollte.

Ich mache das in jedem Fall mit meiner Version zu Hause, müsste aber wissen, wohin ich das übertragen kann?

Ich ändere aktuell nix, du kannst loslegen.

So, nun habe ich die sub eCharts_render zerlegt. Die Darstellung aller Javascript-Optionen geschieht jetzt in einer neuen sub mit dem Namen eCharts_generateJS in der Hoffnung, dass das irgendwann mal fürs rendern genutzt werden kann.

Ich habe noch eine kleine Änderungen vorgenommen: Wenn keine Daten vorliegen, wird nichts gezeichnet. Das war der bug von schwatter (https://forum.fhem.de/index.php?msg=1305071).

Bei so vielen Änderungen besteht immer die Gefahr, dass sich ein bug eingeschlichen hat. Also bei Produktivsystemen bitte testen, bei mir lief das durch, was nichts heißt. Die Datei ist wieder im ersten Post.

PS Ich wollte noch etwas anderes testen. Beim rendern spielt es wohl eine Rolle, ob man mit SVG oder canvas das javascript einbindet. Beides geht bei meinem Browser. Das hatte ich bisher hard verdrahtet drin, habe ich aber erstmal herausgenommen. Ich werde das wieder einsetzen, wenn das mit dem rendern klappt.

Kleine Änderung im ersten Post: Ich hatte width und height verwechselt, das hatte schon mal jemand angemerkt. Außerdem gibt es Vorbereitungen für das Rendern mit Node.js, aber das klappt selbst nicht. Ich habe versucht ein issue zu eröffnen (https://github.com/apache/echarts/issues/19670), vermute aber, dass ich da was falsch mache (die Doku ist aber auch sehr spartanisch).

Also ich habe den Samstag damit zugebracht, Veränderungen im Code zu schreiben, damit ich endlich die Bilder rendern und in Telegram senden kann. Aber das geht nicht. Es scheint wirklich so zu sein, dass eCharts kein echtes Server-Side-Rendering zulässt, sondern man einen externen Browser braucht (mal schauen, was hier (https://github.com/apache/echarts/issues/19670) herauskommt - <edit> Das kam da heraus (https://forum.fhem.de/index.php?msg=1306166)).

Meine derzeitige Lösung ist eigentlich ziemlicher Mist und hat nur den Vorteil, dass sie funktioniert. Also ich habe installiert: NodeJS sowie puppeteer und dann lasse ich folgendes Script laufen:
// Diese Datei wird von FHEM genutzt zum Scrappen der eCharts Bilder
// Aufruf mit node Scrapper.js <Devicename der eChart-Datei>
const puppeteer = require('puppeteer');
const myVariable =process.argv[2];
const selector = '#eCharts_' + myVariable;

(async () => {
  const browser = await puppeteer.launch({
      executablePath: '/usr/bin/chromium-browser'
  });

  const page = await browser.newPage();
  try {
      page.on('error', msg => {
        throw msg;
      });

      await page.goto('http://localhost:8083/fhem?detail=' + myVariable);
      await page.waitForSelector(selector);

      const element = await page.$(selector);

      const screenShot = await element.screenshot({
//        encoding: 'base64'
          path: myVariable+'.jpg'
      });
      //console.log(screenShot);
    }catch (error) {
    throw error;
    }finally{
    await browser.close();
    }
  })().catch((error) => {
  console.log(error);
});Man ruft einfach "node Scrapper.js <eChart devicename>" auf und kriegt dann eine jpg in dem Verzeichnis. (Ich habe keine Sicherheitsmerkmale bei FHEM, weil ich nur mit VPN an den Server komme.)

Geschieht das innerhalb von FHEM, kommt es wegen der blockierenden Ausführung eigentlich immer zu einem Timeout. Also das geht nur außerhalb von FHEM und dann sammelt man die Bilder ein. Wirklich keine elegante Lösung, und wenn mir die Grafiken nicht gefallen würden, hätte ich das jetzt begraben. So muss man eben zwei Programme parallel warten.

Das ist ja ein riesiger Umweg um an die Charts zu kommen.

Noch eine Änderung, Version 10.3. Die Farbe der Legende war falsch, siehe Anhang.

Zitat von: MadMax am 03 März 2024, 10:13:40Das ist ja ein riesiger Umweg um an die Charts zu kommen.

Ja, total nervig. Ich versuche ja von den eCharts-Leuten herauszubekommen, ob es einfacher geht. Sonst ist das eigentlich indiskutabel.

PS Mir ist noch etwas aufgefallen. Ich hätte das mit den Farben anders machen müssen, von vornherein. Das habe ich jetzt geändert (danke nochmal für den array @colors):
Zeile 535 ${$eCharts_options_ref}{color} = \@colors;
und dann stimmt das mit den Farben in der Legende, dem Tooltip und so weiter. Das einzeln einzustellen, so wie ich das gemacht habe, ist viel zu anstrengend.

Hallo andies,

bei mir schein alles zu passen.
Die Farben scheinen nicht funktioniert zu haben wenn man im Chart fill Farben verwendet hatte.
Jetzt passt es, war mir vorher aber noch gar nicht aufgefallen.

Gruß

Zitat von: schwatter am 29 Februar 2024, 08:40:37Ich habe so 10 min nach Nulluhr gemerkt, das mein Fhem nicht erreichbar war.

Nimm mal die neueste Version 0.0.10.4 im ersten Post; mir ist aufgefallen, dass man bei leeren Datensätzen die Abfrage anders gestalten muss. Mir ist heute beim Testen mehrfach FHEM abgestürzt, weil ich die Stelle nicht richtig getestet hatte. Jetzt sollte es gehen.

Ok super,

lasse ich laufen  :)

Kleine Anmerkung, ihr habt ja shortnames für euren Log. Bei mir steht da der ganze  lange Name vom File im Title.
Vielleicht einen Zeilenumbruch an der Stelle?
Sieht auf dem Handy Banane aus.

Edit:
Sorry, egal ob Handy oder Desktop. Der Filelogname überlagert.

Gruß schwatter

Zitat von: schwatter am 03 März 2024, 16:37:13Kleine Anmerkung, ihr habt ja shortnames für euren Log. Bei mir steht da der ganze  lange Name vom File im Title.
Vielleicht einen Zeilenumbruch an der Stelle?

Ich verstehe gar nicht, wo das herkommt. Ist das eine Art Zweittitel? Oder ist das von der Legende? Wenn es von der Legende kommt, kannst Du das ja selbst einstellen, zB
plot "<IN>" using 1:2 axes x1y1 title 'Banane' ls l1fill lw 0.2 with step
                                       ******


Zitat von: carlos am 27 Februar 2024, 17:46:13Ich habe hier noch ein Problem mit den Umlauten.

Ich kann mir nach wie vor nicht erklären, wieso das im SVG geht und bei mir nicht. Ich habe jetzt eine mögliche Lösung, die bei mir funktioniert:
attr <eChartsName> encoding 1musst aber die Version 10.5 im ersten Post nehmen.

Hallo,

Ich hatte heute ein Absturz und diese Meldung im Log.

Can't use an undefined value as an ARRAY reference at ./FHEM/98_eCharts.pm line 404.

Aber dort greifst du auf das Daten Array zu um dies zu Prüfen. Solltest du hier eventuell auch auf defined prüfen?

Gruß
Max

Zitat von: MadMax am 04 März 2024, 18:30:10

Code Auswählen Erweitern

Can't use an undefined value as an ARRAY reference at ./FHEM/98_eCharts.pm line 404.


Kannst du mal schauen, welchen Code du in Zeile 404 hast? Es muss so sein
if (@{ $data_array[$series_index] // []}){ und nur durch diese kryptischen // [] wird das defined geprüft. Sonst stürzt FHEM (manchmal) ab.

Ich habe noch Version 0.0.10.3 am laufen.

Zeile 404
if (@{$data_array[$series_index]}){

Das hast du scheinbar schon gefixt.

Zitat von: andies am 03 März 2024, 21:43:01

Zitat von: schwatter am 03 März 2024, 16:37:13Kleine Anmerkung, ihr habt ja shortnames für euren Log. Bei mir steht da der ganze  lange Name vom File im Title.
Vielleicht einen Zeilenumbruch an der Stelle?

Ich verstehe gar nicht, wo das herkommt. Ist das eine Art Zweittitel? Oder ist das von der Legende? Wenn es von der Legende kommt, kannst Du das ja selbst einstellen, zB

Code Auswählen Erweitern

plot "<IN>" using 1:2 axes x1y1 title 'Banane' ls l1fill lw 0.2 with step
                                       ******


Nabend,

mh Legende? Ich weiß jetzt wo es herkommt, wahrscheinlich meinen wir das gleiche.
Aus meinem dazugehörigen SVG, "Plot title". Lösche ich den, ist nix da.
Für den Moment oder auch für die zukünftige Koexistenz müsste da eine bessere Lösung her?

Jetzt habe ich eben auf die 0.0.10.5 geupdatet, da ich Umlaute vernommen habe.
Update und nun knallt er mir mehrere Tage rein und ich hab SlowMo beim Aufbau des eCharts.
Bei der 0.0.10.4 wurde einfach der Tag genommen. Muss ich jetzt etwas explizit setzen für
den Tag?

Gruß schwatter

Zitat von: andies am 29 Februar 2024, 18:09:07

Zitat von: schwatter am 28 Februar 2024, 22:58:12Vorschlag, das attr plotsize aus FHEMWEB auslesen. Ich z.B habe 3 Instanzen,
und in jeder eine andere Größe definiert.

Das muss einfach gehen. Allerdings wundert mich das, denn in Zeile 383 bei eCharts.pm steht

Code Auswählen Erweitern

  my ($w, $h) = split(",", SVG_getplotsize($name));
und damit wird plotsize ja genau so wie bei SVG geholt - in SVG.pm wiederum wird zuerst bei WEB und dann im device gesucht, wenn ich das richtig sehe

Code Auswählen Erweitern

sub
SVG_getplotsize($)
{
  my ($d) = @_;
  return $FW_webArgs{plotsize} ?
                $FW_webArgs{plotsize} :
                AttrVal($d,"plotsize", $FW_plotsize ? $FW_plotsize : "800,400");
}
Das müsste also schon so implementiert sein?

Ich hab das Problem gefunden. Ist ein Typo.

&SVG_getplotsize
zu

SVG_getplotsize
Da hat sich ein & bei dir eingeschlichen.


Gruß schwatter

Zitat von: MadMax am 29 Februar 2024, 21:33:10Ich würde mir dann mal überlegen wie man die Buttons vernünftig intigriert für offset und zoom..

Ich habe wieder ein bischen gespielt und inzwischen eine Idee, wo die Buttons hinkönnen. Aber das kann ich nicht in Perl integrieren. Aber der Reihe nach.

eCharts erlaubt in der Toolbox, dass man eigene Buttons definiert, hier ein kurzes Video (https://www.youtube.com/watch?v=YymbTHiKpW4) dazu. An sich ganz einfach. Man müsste dann etwa in Zeile 545 den Code ändern,
    ${$eCharts_options_ref}{toolbox} = {feature =>{saveAsImage => {}}, name => $title, backgroundColor => 'transparent', pixelRatio => 2,
    myBackButton => {show => 'true', title => 'back',
    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"', # und hier wird " oben falsch übermittelt
    #onclick => {function() => alert("forward - to be implemented")} ## das geht nicht
},
    myForwardButton => {show => 'true', title => 'forward',
    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() => alert("forward - to be implemented")} ## das geht nicht
}}; # dataView => {title => 'Rohdaten'}
(als Icons habe ich Pfeile nach links und rechts genommen). Wenn man das macht, stürzt FHEM gnadenlos ab. Inzwischen ist auch klar, warum. Alle bisherigen Einträge sind hashes oder array von strings. Hier soll nun ein key-value Paar übergeben werden, wo aber der value anscheinend kein String mehr ist, sondern selbst eine Funktion darstellt. Ich habe ein wenig in den JSON-Definitionen geblättert, das scheint gar nicht von den entsprechenden Standards gedeckt zu sein. Kein Wunder dann, dass  encode_json das auch nicht hinbekommt.

Ich habe da momentan keine Idee, wie man das machen kann.

Das bedeutet du bekommst die Buttons hin aber kannst die links die aufgerufen werden sollen nicht übergeben?

Zitat von: MadMax am 06 März 2024, 19:20:46Das bedeutet du bekommst die Buttons hin aber kannst die links die aufgerufen werden sollen nicht übergeben?

Mit paar Tricks gelingt es unter Umständen, dass rechts oben Buttons erscheinen - so wie unten, da steht derzeit nur "Save image". Aber die "dahinter" liegende Aktion kriege ich nicht programmiert.

Also so soll das im Original aussehen
toolbox: {
    feature: {
        myFeature: {
            show: 'true',
            title: 'My custom feature',
            icon: 'image:path/to/image-inactive.png'
            onclick: function (){
                // und das Wort function steht oben nicht in Anfuehrungszeichen!
            }
        }
    }
},

Ah du bekommst die function nicht übergeben.

Zitat von: andies am 03 März 2024, 11:43:29

Zitat von: MadMax am 03 März 2024, 10:13:40Das ist ja ein riesiger Umweg um an die Charts zu kommen.

Ja, total nervig. Ich versuche ja von den eCharts-Leuten herauszubekommen, ob es einfacher geht.

Und es geht tatsächlich. Der angebliche Fehler von mir ist keiner, siehe hier (https://github.com/apache/echarts/issues/19670). Das heißt, ich kann wieder versuchen lokal zu rendern. Man muss halt richtig node/npm installieren können  8)

Ich habe auch noch ein paar Kleinigkeiten, das mache ich dann hoffentlich am Wochenende fertig. Fehlen bloß noch die buttons.

So, ich habe es endlich geschafft, dass Bilder gerendert werden (und ganz einfach mit Telegram verschickt werden können, also set myTelegramBot cmdSend { eCharts_plotAsPng('myEChartName')} - das war ja mein Hauptziel!).

Ebenso habe ich ein paar Kleinigkeiten verändert, zB war mir die Strichstärke doch zu dick und ich habe das fest verdrahtete "width+1" geändert (man kann ja immer Stichstärken erhöhen, indem man in der gplot einfach die richtige Strichstärke einträgt), außerdem habe ich weitere Attribute für opacity etc eingefügt und man kann die Position des Titels und der Legende verändern. Steht alles in der "Help for eCharts".

Ein paar Anmerkungen, wie man das rendern einrichtet (bei Fehlermeldungen wird übrigens auf diesen Forumseintrag verwiesen). Das ist nämlich nicht ganz so einfach:

• Damit eCharts überhaupt als device definiert werden kann, muss eCharts.js installiert sein. Im ersten Post habe ich geschrieben, dass man das unterhalb des www-Ordners von FHEM machen muss. In (etwa) Zeile 310 wird die Variable $data{FWEXT}{'eCharts'}{SCRIPT} initiiert und sie enthält (relativ zum www-Ordern von FHEM) das Verzeichnis, wo eCharts.js liegt. Das hat noch nichts mit dem rendern zu tun, das braucht man nur, um die Grafiken am Bildschirm (im Browser) zu sehen.
• Wenn man plotAsPng verwenden will, benötigt man nun weitere Programme: node sowie, zum installieren, npm. Ich habe das anhand dieser Seite (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) gemacht und kann nur hoffen, dass dieser Link auch in einigen Jahren noch aktuell bleibt. Das reicht aber nicht.
• Diese Version von node wird dann durch FHEM aufgerufen, um das Bild zu rendern. Damit müssen bei der binary (meist im Unterordner bin) die Rechte so gesetzt werden, dass FHEM dieses Programm aufrufen darf. Üblicherweise "sudo chmod 777 node" und ich weiß, dass jetzt einige Amok laufen, weil das unter Umständen ein Sicherheitsrisiko ist...
• Das Chart-device muss nun noch den Pfad zu diesem node kennen. Da habe ich keine richtig gute Idee, weil man das bei jedem Device angeben muss, das aber über alle devices ja einheitlich ist - der Pfad ist ja immer der gleiche! Man könnte das als Attribut bei FHEMWEB angeben, dann mische ich mich da aber ein und das wollte ich nicht, weil ich ungern außerhalb dieses Moduls Änderungen vornehmen möchte. Daher ist derzeit bei jedem Chart, das gerendert werden soll, noch notwendig
  
  Code Auswählen Erweitern
  attr <eChartsDevice> pathToNode <und dann der Pfad zu node>Der Pfad muss auch das eigentliche Programm enthalten, also bei mir ist das beispielsweise
  
  Code Auswählen Erweitern
  <und dann der Pfad zu node> = /home/pi/node-v21.7.0-linux-arm64/bin/node
• Zuletzt entsteht noch ein Problem. Dieses node kann das Modul eCharts nicht finden, denn das liegt ja woanders - nämlich in einem Ordner unterhalb von FHEM und ist damit für node gar nicht erreichbar! Also muss man diesem node noch ein weiteres Mal eCharts installieren und man besitzt damit zwei Installationen auf dem Rechner. Das ist immer eine unangenehme Fehlerquelle, weil beide Versionen ja aktuell gehalten werden sollten. Ich habe das so gemacht, dass ich in der Kommandozeile von FHEM folgenden Befehl ausgeführt habe:
  
  Code Auswählen Erweitern
  `npm install echarts --save` (das sind backticks (https://stackoverflow.com/questions/799968/whats-the-difference-between-perls-backticks-system-and-exec), keine Anführungszeichen). Danach war eCharts.js so installiert, dass es von FHEM genutzt werden konnte.

Version 10.6 lege ich heute abend wieder in den ersten Post. Was ich immer noch nicht hinbekomme sind die Buttons für "zurück" und "vorwärts" bei den Daten, die es bei SVG gibt. Das versuche ich beim nächsten Mal.

Ich habe jetzt ein Minimalbeispiel mit einem button, der (k)eine Reaktion auslöst. So in etwa muss das Modul dann den Javascript-Code konstruieren:
var option={
'series':[{'data':[['2024-03-07 18:22:16','46.2'],['2024-03-07 18:23:29','49.4'],['2024-03-07 18:44:15','46.2'],['2024-03-07 18:45:20','47.8'],['2024-03-07 19:36:53','43.5']],'yAxisIndex':'1','type':'line'}],
'yAxis':[{'axisLabel':{'formatter':'{value}'}},{'axisLabel':{'formatter':'{value}'}}],
'toolbox':{
'feature':{
 'myBackButton':{'title':'back',
  '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': () => this.dummy(),
  'show':'true'}
}
},
'xAxis':{'type':'time'},
};Man sieht den Button, der reagiert natürlich nicht. Im Moment habe ich keine richtige Idee, wie es weitergehen kann. Die auszulösende Aktion muss sein "öffne URL mit usw".

Bekommst du das schon auf Fhem raus übergeben?

Also wenn ich die Funktionen nutze, die derzeit im Modul sind, dann erhalte ich da buchstäblich:
"myBackButton":{"title":"back",
"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",
"show":"true"}und man sieht, dass der Button angelegt wird. Im Original sieht das aber so aus:
'myBackButton':{'title':'back',
 '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 () { alert('Hallo')},
 'show':'true'}und es gelingt mir nicht, den Zusatz "function () { alert('Hallo')}," zu übergeben. Das darf kein String sein, sobald da Anführungszeichen auftauchen, stürzt entweder FHEM ab oder man sieht nix.

Ich habe keine richtige Idee, wie ich da weiter machen kann. (Das rendern  und senden mit Telegram klappt übrigens.)

Man könnte natürlich auch versuchen, dass man das mit Klicken auf der Zeitachse simuliert, also nicht mit buttons oben rechts. So wie hier (https://stackoverflow.com/questions/61315486/echarts-xaxis-labels-click-event).

Ich habe eine Idee. Keine Buttons oben, sondern man macht die x-Achse "klickbar", also
${$eCharts_options_ref}{xAxis}{triggerEvent} = 'true';
und fügt dann am Ende einen entsprechenden Code ein
  eCharts_pO 'myChart_'.$name.'.on(\'click\', params => {if(params.targetType === \'axisLabel\'){alert(params.value);}})';
 
Ich habe mal auf einem Video aufgezeichnet, wie das aussieht.

Das bedeutet folgendes

• Der Nutzer kann die x-Achse klickbar machen, es aber auch lassen.
• Wenn er sie klickbar macht und wenn er links von der Mitte klickt, geht man nach links (also zurück). Klickt er rechts, geht man vorwärts.

Das ist eigentlich sogar intuitiver als Buttons oben an der Grafik, finde ich. Immerhin bewegen wir uns in der Zeitachse.

Dann musst du aber immer mehr Daten laden?

Nee, das würde ich so wie beim SVG machen wollen. Man ruft dann eine komplett neue HTML-Seite auf, die im GET die neuen Begrenzungen für die Zeitachse haben. So hat das Rudi im SVG programmiert, wenn ich das richtig kapiere. Es gibt eine neue Seite, die Daten werden (neu, weil anders) geladen.

Man kann dann nicht ohne weiteres zoomen, zum Beispiel. Wenn ich eine Zeitlänge von einem Tag eingestellt habe und links klicke, kriege ich den Tag vorher. Und dann wieder den Tag vorher. Will ich zwei Tage haben, muss ich das in den Attributen festlegen.

Jetzt überlege ich gerade, ob das nicht noch raffinierter geht. Man klickt ja direkt auf ein Datum. Dann könnte man dafür sorgen, dass dieses Datum das neue Enddatum ist, zum Beispiel. Und bei einem Doppelklick das neue Anfangsdatum. Sonst müsste ich da ständig schauen "ist das jetzt links oder rechts" usw

Das klingt sehr cool wenn das so klappt. Ich weiß nur nicht wie du das umsetzen willst aber die Idee gefällt mir.

Ich hatte mich schon gefreut wegen des renderns, und dann stürzte mir heute früh FHEM ab. Ich habe gestern nur das rendern von kleinen Bilder getestet und als das mal größer wurde, gab es Ärger (eine Odyssee (https://forum.fhem.de/index.php?topic=137422.0) war das). Jetzt sollten auch große Bilder gehen. Da das ganze nur blockierend klappt, habe ich auf dem Loglevel 3 eine Warnung ausgegeben.

(Ich sende mir sechs Bilder zu. Das mache ich aber nicht direkt, sondern ich setze sechs at-Kommandos, die zeitversetzt über eine Minute erst auslösen. Und das ganze irgendwann morgens, wenn Ruhe herrscht. Aber das nur nebenbei.)

Also das rendern habe ich im ersten Post repariert und völlig neu geschrieben. Immer noch umständlich, aber wenigstens stürzt nichts mehr ab. Ansonsten habe ich die Idee von dem vorigen Post oben umgesetzt. Leider nicht ganz so, wie ich mir das ursprünglich vorgenommen habe, das ist mir einfach zu umständlich und viel zu viel Arbeit (ich kann leider nur durch probieren herausbekommen, wie das ganze funktioniert; ich verstehe zu wenig von Perl und kenne FHEM nicht gut genug - am einfachsten ist immer noch copy-und-paste). Also es geht jetzt so:

• Wenn man mit der linken Maustaste auf die x-Achse klickt, geht man (wie bei SVG mit dem Previous-Button) eine Zeitzone zurück. Und zwar so viel, wie auch bei SVG eingestellt war.
• Wenn man mit der rechten Maustaste auf die x-Achse klickt (erscheint danach das Kontextmenü, das kann ich leider nicht ausstellen) und man geht (wie bei SVG mit dem Next-Button) eine Zeitzone nach vorn. Und zwar so viel, wie auch bei SVG eingestellt war.

Wenn keine Daten vorhanden sind, passiert nichts. Damit das ganze überhaupt geht, muss aber vorher das Attribut "onclick_x_axis" auf 1 gestellt sein.

Im Anhang ein Video, wie das geht. Neueste Version im ersten Post.

Ich habe, nach zwei Monaten Arbeit, den ersten Post angepasst und die neueste Version (11.1) eingestellt. Da waren noch kleinere Bugs drin, die mir aufgefallen waren und die ich beseitigt habe. Ich werde wohl in der nächsten Zeit nicht mehr dazu kommen, an dem Code etwas zu machen (aber wie gesagt - die doppelten x-Achsen würden mich nochmal reizen), zudem geht eigentlich all das, was ich in meinen SVGs installiert hatte. Ich kann mit dem Modul inzwischen ganz gut leben.

Zitat von: MadMax am 06 März 2024, 19:59:03Ah du bekommst die function nicht übergeben.

Ich kann doch nicht lassen und hatte heute etwas Zeit. Also habe ich mir mal überlegt, wie man das mit den ticks for val macht (war eines Deiner ToDos). Ich nutze das selbst nicht, brauche also mal Testhilfe. Wenn ich das richtig verstehe, erscheint das in den gplot-files. Das ist dann eine Liste von regex=>value, wobei regex aus dem Logfile gelesen werden und für die Anzeige durch value ersetzt werden sollen? Ist das richtig?

Wenn ja, dann brauche ich einen array of regex und muss dann bei der Übergabe, etwa Zeile 571, etwas ändern. Derzeit steht da
push @{$data_array[$series_index]}, [$datum, $wert];
und statt $wert muss $value gelesen werden. Dank KI habe ich mir einen kurzen Code compilieren lassen,
###Vorher
my @regex_strings = (<das muss aus gplot kommen>);# da steht sowas wie ytics ("on" 1, "off" 0)
# Kompiliere jeden String zu einem Regex-Objekt
my @regexes = map { qr/$_/ } @regex_strings;
...
# Der zu prüfende String aus $da, der Datenliste
#my $wert;
...
##Etwa Zeile 571
# Prüfe, welcher Regex passt
for (my $i = 0; $i < @regexes; $i++) {
    if ($string =~ $regexes[$i]) {
        push @{$data_array[$series_index]}, [$datum, $i];
        last; # Beendet die Schleife nach dem ersten Treffer
    }
}Habe ich das richtig verstanden?

Genau, im Prinzip bekommt jeder Wert einen Text zugewiesen.

"Heizen" 6, "Kuehlen" 7, "Off" 5, "Standby" 0, "Heizen" 1, "Kuehlen" 2, "Abtauen" 3, "WW" 4, "off" 9, "on" 10, "off" 11, "on" 12

Umgekehrt kann aus dem Log/DB auch der Text geholt werden und in eine Zahl gewandelt werden wenn dieser als Text gespeichert wird.

val=($val=~'Heizen'?1:$val=~'Kuehlen'?2:$val=~'Abtauen'?3:$val=~'Warmwasserbereitung'?4:0)

Gruß
Max

Ich frage mich gerade, ob man hier überhaupt etwas programmieren muss. Ich sammle einfach als Werte auf der y-Achse die Strings ein ("on", "off" usw) und definiere dann auf der y-Achse den Typen "category", der kennt dann eben nur "on", "off" usw. Ich muss mir dann keine Zahlen dazu ausdenken, umwandeln, darstellen usw. ME müsste das gehen, denn wenn man sich dieses Beispiel (https://echarts.apache.org/examples/en/editor.html?c=scatter-punchCard) anschaut, dann verweist ja die Doku (auf der x-Achse allerdings) auf
When a dimension corresponds to a category axis (axis.type is 'category'):
The value should be the ordinal of the axis.data (based on 0), the string value of the axis.data.

Das klingt plausibel SVG kann das leider nicht.

Zitat von: MadMax am 06 März 2024, 19:59:03Ah du bekommst die function nicht übergeben.

Auf dem Heimweg gelangweilt und ein wenig gespielt. Man kann die options in eCharts mehrfach übergeben und damit kriege ich das in den Griff. Rechts oben sind nun die Buttons wie bei SVG und man wandert genau so wiein der klassischen Ansicht, Buttons siehe Anhang. Der rechte wird ausgeblendet, wenn man am Ende ist. Das entsprechende Attribut habe ich gelöscht; Modul im ersten Post.

Ich überlege mal, in den Ferien ein kleines Video mit allen Details zu machen. Wer das hier im Forum liest wird ja wahnsinnig, dieses Hin und Her.

Ich habe ein kleines Video erstellt, wo ich die wichtigsten Dinge nochmal zusammenfasse. Das Video hat leider zwei kleine Macken zwischendrin, aber da das nur Sekunden sind, die Botschaft weiterhin verständlich ist und das mich jetzt wieder eine halbe Stunde oder mehr Arbeit kosten würde, belasse ich es dabei
https://www.youtube.com/watch?v=Pay4DYlaPF8 (https://www.youtube.com/watch?v=Pay4DYlaPF8)

Hallo Andies,

erstmal danke für die fortlaufende Entwicklung.
Mir geföllt das sehr gut und ich habe auch schon eine eCharts in benutzung.

Ich habe mir mal das Beispiel angeschaut, trotzdem weiß ich nicht wie ich mit dem Beispiel diese Grafik umstellen könnte.

SVG.jpg

Gruß
Max

So kommen die Daten vom DBLog.
eCharts macht da ein leeres Diagramm draus.

get DbLog.WP HISTORY INT 2024-03-12_17:35:00 2024-03-13_17:34:59 WP.HPSU:HPSU.Aktive_Betriebsart:::

2024-03-12_17:43:51 Heizen
2024-03-12_18:04:05 Heizen
2024-03-12_18:24:15 Heizen
2024-03-12_18:44:18 Heizen
2024-03-12_19:04:27 Heizen
2024-03-12_19:24:30 Heizen
2024-03-12_19:44:32 Heizen
2024-03-12_20:04:40 Heizen
2024-03-12_20:24:43 Heizen
2024-03-12_20:44:47 Heizen
2024-03-12_21:04:48 Heizen
2024-03-12_21:24:53 Heizen
2024-03-12_21:38:43 Standby
2024-03-12_21:58:52 Standby
2024-03-12_22:19:00 Standby
2024-03-12_22:39:11 Heizen
2024-03-12_22:59:18 Heizen
2024-03-12_23:19:25 Heizen
2024-03-12_23:39:30 Heizen
2024-03-12_23:59:35 Heizen
2024-03-13_00:19:46 Heizen
2024-03-13_00:39:53 Heizen
2024-03-13_00:59:56 Heizen
2024-03-13_01:20:04 Heizen
2024-03-13_01:40:14 Heizen
2024-03-13_02:00:17 Heizen
2024-03-13_02:20:27 Heizen
2024-03-13_02:40:36 Heizen
2024-03-13_03:00:48 Heizen
2024-03-13_03:20:54 Heizen
2024-03-13_03:41:04 Heizen
2024-03-13_04:01:11 Heizen
2024-03-13_04:09:01 Abtauen
2024-03-13_04:15:57 Heizen
2024-03-13_04:36:07 Heizen
2024-03-13_04:56:19 Heizen
2024-03-13_05:07:12 Abtauen
2024-03-13_05:13:12 Heizen
2024-03-13_05:33:13 Heizen
2024-03-13_05:53:17 Heizen
2024-03-13_06:13:29 Heizen
2024-03-13_06:14:12 Warmwasserbereitung
2024-03-13_06:25:52 Abtauen
2024-03-13_06:31:01 Warmwasserbereitung
2024-03-13_06:51:02 Warmwasserbereitung
2024-03-13_06:53:18 Standby
2024-03-13_06:55:10 Heizen
2024-03-13_06:59:52 Standby
2024-03-13_07:00:19 Heizen
2024-03-13_07:20:32 Heizen
2024-03-13_07:29:43 Abtauen
2024-03-13_07:35:33 Heizen
2024-03-13_07:55:41 Heizen
2024-03-13_08:15:48 Heizen
2024-03-13_08:35:52 Heizen
2024-03-13_08:55:58 Heizen
2024-03-13_09:16:08 Heizen
2024-03-13_09:36:12 Heizen
2024-03-13_09:56:18 Heizen
2024-03-13_10:16:25 Heizen
2024-03-13_10:36:35 Standby
2024-03-13_10:56:41 Standby
2024-03-13_11:16:45 Standby
2024-03-13_11:36:02 Heizen
2024-03-13_11:40:43 Standby
2024-03-13_11:41:39 Heizen
2024-03-13_11:46:18 Standby
2024-03-13_11:58:34 Heizen
2024-03-13_12:03:20 Standby
2024-03-13_12:04:04 Heizen
2024-03-13_12:08:46 Standby
2024-03-13_12:09:53 Heizen
2024-03-13_12:14:30 Standby
2024-03-13_12:34:34 Standby
2024-03-13_12:53:22 Heizen
2024-03-13_13:13:30 Heizen
2024-03-13_13:20:31 Standby
2024-03-13_13:40:38 Standby
2024-03-13_13:54:40 Heizen
2024-03-13_14:14:47 Heizen
2024-03-13_14:19:12 Standby
2024-03-13_14:19:22 Heizen
2024-03-13_14:19:46 Standby
2024-03-13_14:39:57 Standby
2024-03-13_15:00:03 Standby
2024-03-13_15:20:13 Standby
2024-03-13_15:40:15 Standby
2024-03-13_16:00:27 Standby
2024-03-13_16:20:36 Standby
2024-03-13_16:40:42 Standby
2024-03-13_16:51:13 Heizen
2024-03-13_17:11:21 Heizen
2024-03-13_17:31:23 Heizen
#WP.HPSU:HPSU.Aktive_Betriebsart:::


Zitat von: MadMax am 13 März 2024, 17:34:55Ich habe mir mal das Beispiel angeschaut, trotzdem weiß ich nicht wie ich mit dem Beispiel diese Grafik umstellen könnte.
eCharts macht da ein leeres Diagramm draus.

Das hatte ich bisher noch gar nicht implementiert, das konnte also gar nicht gehen. Ich habe das eingebaut, kann das aber nicht testen und meine Versuche, derartige Logdateien hausintern nachzubauen, hat nicht funktioniert. Kannst du das mal testen? Ich sehe da nichts.

Es gibt noch zwei kleinere Probleme, die werde ich nicht so leicht in den Griff kriegen:

• Wenn ich ytics in der .gplot auslese, sehe ich keinen Unterschied, ob die Zeile "set ytics" da steht oder nicht steht: In beiden Fällen steht in der %hash:
  Code Auswählen Erweitern
  ytics=undefMan kann also an der %hash nicht erkennen, ob jemand jetzt ticks haben will oder nicht. 
• Wenn ich Daten mit Text und nicht mit Zahlen aufrufen lassen will (das geschieht ja durch einen SVG-Befehl), erscheinen bei mir nur die Zahlenwerte. Ich kann damit gar nicht die Texte wie "Heizung" oder "Standby" auswerten.  Die fehlen einfach! Ich muss mal nachforschen, ob das schon in der SVG geregelt ist (dann muss ich diesen Befehl nämlich selbst schreiben) oder ob das nur meine Installation hier ist.

Ich habe von Beta-User noch ein paar Tipps (vielen Dank dafür!), die diskutiere ich hier mal offen.

Zitat- Die Festverdrahtung ist an sich ok, aber uU. nicht jedermanns Sache. Ich würde (u.a.) das daher konfigurierbar machen, aber nicht per Attribut, sondern per parseParams im define der Instanz. Damit kann man im Prinzip eine beliebige Anzahl von Einstellungen möglich machen, ohne immer eine Tonne an Attributen erklären zu müssen, die in der Regel nur für wenige interessant sind. Wie sowas gehen könnte? Siehe den RHASSPY-Code.

Das ist natürlich ein no-brainer, klar. Ich hatte mich damals leiten lassen davon, dass ich dieses Modul möglichst ohne Interaktion mit der Außenwelt schreibe. Aber systematisch wäre sicherlich, ein userattr in global oder so anzubringen (ich wollte ja die Definitionen von SVG ohne Änderung nutzen).

Zitat- die node-Installation müßte doch eigentlich nur wissen, wo die echarts-js-e liegen, oder? Dann sollte sich die Doppelinstallation erledigen? Auch da würde ich ggf. versuchen, den Pfade zu node im Modul zu hinterlegen (unterhalb fhem?) und die echart-Funktionen dann mit dem relativen Pfad aufrufen? (Sollte auch rechtemäßig kein Problem sein, wenn der Aufrufende und der script-Owner jeweils fhem ist (?)). Ist aber nur ein erster Eindruck, ohne, dass ich mit sowas irgendwelche Erfahrungen habe...

Ja, das sollte irgendwie möglich sein. Ich müsste erstmal richtig kapieren, wie node sich die Module holt. Danach sollte das eigentlich konfigurierbar sein. Einige sind ja vorinstalliert, und dann muss man sagen, dass man noch eines dazu haben will und das liegt dann eben hier-und-dort.

Zitat- plotAsPng() sollte man m.E. so aufbohren, dass es entweder den bisherigen Code ausführt, oder eben die passende Funktion aus eCharts.pm. Da das (zumindest auf die Schnelle) ja leicht anhand des TYPE-Internals festgestellt werden kann, sollte das kein großes Ding sein, Rudi dafür einen patch zukommen zu lassen.

Auch da: Dann interagiere ich mit dem Rest von FHEM. Ich bin schon der Meinung, dass dafür der Code mal von jemanden durchgeschaut werden muss, der mehr Ahnung hat als ich. Und Rudi hat sicher andere Sorgen, zumal ich deutlich sehen kann, wie viele <irone>Fans von JavaScript</ironie> es hier gibt.

Mir persönlich fällt die Darstellung von eCharts (viel) besser. Aber "gefallen" ist subjektiv und darüber kann man schwer sachlich diskutieren.

Zitat von: andies am 14 März 2024, 17:58:02Das hatte ich bisher noch gar nicht implementiert, das konnte also gar nicht gehen. Ich habe das eingebaut, kann das aber nicht testen und meine Versuche, derartige Logdateien hausintern nachzubauen, hat nicht funktioniert. Kannst du das mal testen? Ich sehe da nichts.

Leider funktioniert das nicht, wo hast du das eingebaut? Konnte dazu nix im Code finden.

Zitat von: andies am 14 März 2024, 17:58:02Es gibt noch zwei kleinere Probleme, die werde ich nicht so leicht in den Griff kriegen:

• Wenn ich ytics in der .gplot auslese, sehe ich keinen Unterschied, ob die Zeile "set ytics" da steht oder nicht steht: In beiden Fällen steht in der %hash:
  Code Auswählen Erweitern
  ytics=undefMan kann also an der %hash nicht erkennen, ob jemand jetzt ticks haben will oder nicht. 

Ich denke das steht auch hier in der Zeile mit den Tics
set grid ytics y2ticsset grid y2ticsset grid yticsset grid
Gruß
Max[/list]

Zitat von: MadMax am 14 März 2024, 18:49:36Leider funktioniert das nicht, wo hast du das eingebaut? Konnte dazu nix im Code finden.

Zeile 395
    #regex als tics?
    if ($conf_ticks =~ /"/) {
        $new_hash_ref->{"type"} = 'category';
        my @matches = $conf_ticks =~ /"([^"]*)"/g;
        $new_hash_ref->{"data"} = \@matches;
    } else {
        $new_hash_ref->{"type"} = 'value';       
        $new_hash_ref->{"axisLabel"} = {formatter => '{value}'};
    }
conf_ticks ist identisch $conf{ytics}. Wenn da keine Zahlen drin stehen, sollte das sinngemäß so etwas wie  $conf_tics "Heizen" "Standby"sein. Und diese Werte werden dann als "data" in die y-Achse mit der Kategorie "type" eingelesen und dann sollten die entsprechenden Werte aus der Log-Datei dort eine Markierung bekommen, wo diese regex-Werte stehen.

Hallo andies,

das funktioniert bedingt ganz gut  ;)

Erst ist das Chart leer bis ich unten im Zoom den bereich en wenig eingrenze.

Wie du siehst sieht der Tooltip merkwürdig aus, damit könnte ich aber Leben :)

Gruß
Max

Wenn du mir mal Logfile und gplot schickst, kann ich mir das mal genauer anschauen. (Sonst kurze PM, dann schicke ich Dir da meine E-Mail, muss ja nicht jeder sehen.)

Hier das Log
2024.03.15 18:37:37 5: eCharts rendering: defining filter
2024.03.15 18:37:37 5: eCharts rendering: from: 2024-03-14_18:40:00 to: 2024-03-15_18:39:59
2024.03.15 18:37:37 5: eCharts rendering: defining header
2024.03.15 18:37:37 5: eCharts generating javascript code
2024.03.15 18:37:37 5: eCharts javascript generation: defining options
2024.03.15 18:37:37 5: eCharts rendering: converting options
2024.03.15 18:37:37 5: eCharts rendering: defining filter
2024.03.15 18:37:37 5: eCharts rendering: from: 2024-03-14_18:40:00 to: 2024-03-15_18:39:59
2024.03.15 18:37:37 5: eCharts rendering: defining header
2024.03.15 18:37:37 5: eCharts generating javascript code
2024.03.15 18:37:37 5: eCharts javascript generation: defining options
2024.03.15 18:37:37 5: eCharts rendering: converting options
2024.03.15 18:37:40 5: eCharts rendering: defining filter
2024.03.15 18:37:40 5: eCharts rendering: from: 2024-03-14_18:40:00 to: 2024-03-15_18:39:59
2024.03.15 18:37:40 5: eCharts rendering: defining header
2024.03.15 18:37:40 5: eCharts generating javascript code
2024.03.15 18:37:40 5: eCharts javascript generation: defining options
2024.03.15 18:37:40 5: eCharts rendering: converting options

Hier noch das gplot
# Created by FHEM/98_SVG.pm, 2024-03-15 18:31:31
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title 'HPSU'
set ytics
set y2tics "Standby", "Heizen", "Kuehlen", "Abtauen", "WW", "off", "on"
set grid
set ylabel ""
set y2label ""

#DbLog.WP WP.HPSU:HPSU.Aktive_Betriebsart:::
#DbLog.Anwesenheit WP.HPSU:HPSU.Betriebsart:::
#DbLog.Anwesenheit WP.HPSU:HPSU.Betrieb_Kompressor:::
#DbLog.Anwesenheit WP.HPSU:HPSU.Betrieb_UWPumpe:::

plot "<IN>" using 1:2 axes x1y2 title 'Aktive_Betriebsart' ls l0 lw 1 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'Betriebsart' ls l3 lw 1 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'Kompressor' ls l1 lw 1 with steps,\
     "<IN>" using 1:2 axes x1y2 title 'UWPumpe' ls l2 lw 1 with steps


Sorry, ich meinte den Logfile des Gerätes, also mit den Einträgen wann "Off", "Standby" usw.

Bei DbLog gibt es keinen Logfile. Und ich habe ja die daten im vorigen Post!

Achso  :)
Aber hast jetzt was du brauchst?

Ja, alles da. Brauche aber etwas Zeit.

Kein Stress

Hmm. Ich komme nicht weiter, weil ich kein Db nutze. Also, es muss ungefähr Zeile 357 sein. Dort steht bei mir
      my $da = SVG_getData($name, $f, $t, $srcDesc, 0);und nach diesem Befehl sollte $da ein riesiger String mit den Daten sein. In etwa so:
1: da $VAR1 = [
2024-03-13_18:09:17 50.5
2024-03-13_18:09:17 50.5
2024-03-13_18:19:05 52.1
2024-03-13_18:19:05 52.1
2024-03-13_18:21:06 53.7
2024-03-13_18:21:08 53.7
2024-03-13_19:21:02 47.8
2024-03-13_19:21:02 48.3
2024-03-13_20:21:04 47.2
2024-03-13_20:21:05 47.8(habe ich mir ausgegeben mit "Log3 undef, 1, "da ".Dumper(\$da)", wenn ich das richtig erinnere)

Dieser String ist bei mir und wahrscheinlich auch bei Dir leer. Bei mir liegt es an den übergebenen Variablen in der Funktion SVG_getData. Das sind insgesamt fünf,
$name, devicename des Charts
$f,    ab wann anzeigen
$t,    bis wann anzeigen
$srcDesc das ist ein hash mit mehreren keys "order", "all" uswBei mir ist "Dein" srcDesc leer. Bei Dir stand aber da was drin, und nach diesem Post (https://forum.fhem.de/index.php?msg=1307039) müsste da sogar etwas angekommen sein. Wenn ich meine FileLog-Geräte nehme, dann habe ich da Einträge der Form
src $VAR1 = \{
            'all' => ' 4:.*::',
            'src' => {
                       'FileLog_GartentorTemp' => {
                                                    'num' => 0,
                                                    'idx' => 0,
                                                    'arg' => '4:.*::'
                                                  }
                     },
            'rev' => {
                       '0' => {
                                '0' => 0
                              }
                     },
            'order' => [
                         'FileLog_GartentorTemp'
                       ]
          };
Wenn in $da nichts steht, wird nichts angezeigt. Wenn da etwas steht, könnte ich was machen. Also du müsstest mir mal sagen, ob in Zeile ca 357 bei Deinem $da etwas zu sehen ist. Mit einem eingefügten Befehl zB
Log3 undef, 1, "da= ".Dumper(\$da);

Hallo Andies,

die Daten kommen, die werden auch angezeiht aber erst nachdem ich den Zoombalken etwas bewegt habe.

Hier die daten von $da.
2024.03.16 16:36:51 5: eCharts rendering: defining filter
2024.03.16 16:36:51 5: eCharts rendering: from: 2024-03-15_16:40:00 to: 2024-03-16_16:39:59
2024.03.16 16:36:51 5: eCharts rendering: defining header
2024.03.16 16:36:51 5: eCharts generating javascript code
2024.03.16 16:36:51 5: eCharts javascript generation: defining options
2024.03.16 16:36:51 5: eCharts rendering: converting options
2024.03.16 16:36:51 1: da= $VAR1 = \[
    \"2024-03-15_16:52:43 Standby\n2024-03-15_17:12:56 Standby\n2024-03-15_17:33:09 Standby\n2024-03-15_17:53:16 Standby\n2024-03-15_18:05:10 Heizen\n2024-03-15_18:25:16 Heizen\n2024-03-15_18:45:24 Heizen\n2024-03-15_19:05:30 Heizen\n2024-03-15_19:25:39 Heizen\n2024-03-15_19:45:54 Heizen\n2024-03-15_20:06:02 Heizen\n2024-03-15_20:21:22 Standby\n2024-03-15_20:38:45 Heizen\n2024-03-15_20:43:16 Standby\n2024-03-15_20:44:04 Heizen\n2024-03-15_20:48:49 Standby\n2024-03-15_20:49:24 Heizen\n2024-03-15_20:54:03 Standby\n2024-03-15_20:54:50 Heizen\n2024-03-15_20:59:31 Standby\n2024-03-15_21:19:38 Standby\n2024-03-15_21:33:17 Heizen\n2024-03-15_21:38:11 Standby\n2024-03-15_21:38:42 Heizen\n2024-03-15_21:58:52 Heizen\n2024-03-15_22:19:05 Heizen\n2024-03-15_22:39:08 Heizen\n2024-03-15_22:59:14 Heizen\n2024-03-15_23:19:27 Heizen\n2024-03-15_23:39:35 Heizen\n2024-03-15_23:59:42 Heizen\n2024-03-16_00:19:58 Heizen\n2024-03-16_00:40:09 Heizen\n2024-03-16_01:00:14 Heizen\n2024-03-16_01:20:25 Heizen\n2024-03-16_01:40:34 Heizen\n2024-03-16_02:00:45 Heizen\n2024-03-16_02:20:46 Heizen\n2024-03-16_02:40:57 Heizen\n2024-03-16_03:01:10 Heizen\n2024-03-16_03:21:14 Heizen\n2024-03-16_03:41:22 Heizen\n2024-03-16_03:41:31 Standby\n2024-03-16_04:01:31 Standby\n2024-03-16_04:14:32 Heizen\n2024-03-16_04:19:12 Standby\n2024-03-16_04:20:01 Heizen\n2024-03-16_04:24:40 Standby\n2024-03-16_04:25:28 Heizen\n2024-03-16_04:30:13 Standby\n2024-03-16_04:30:59 Heizen\n2024-03-16_04:35:43 Standby\n2024-03-16_04:55:49 Standby\n2024-03-16_05:13:13 Heizen\n2024-03-16_05:33:20 Heizen\n2024-03-16_05:53:30 Heizen\n2024-03-16_06:13:38 Heizen\n2024-03-16_06:33:46 Heizen\n2024-03-16_06:53:51 Heizen\n2024-03-16_07:14:02 Heizen\n2024-03-16_07:34:10 Heizen\n2024-03-16_07:54:19 Heizen\n2024-03-16_08:14:29 Heizen\n2024-03-16_08:34:37 Heizen\n2024-03-16_08:54:46 Heizen\n2024-03-16_09:09:09 Standby\n2024-03-16_09:29:19 Standby\n2024-03-16_09:49:26 Standby\n2024-03-16_10:09:34 Standby\n2024-03-16_10:29:43 Standby\n2024-03-16_10:49:52 Standby\n2024-03-16_11:10:01 Standby\n2024-03-16_11:30:03 Standby\n2024-03-16_11:50:06 Standby\n2024-03-16_12:02:28 Heizen\n2024-03-16_12:22:29 Heizen\n2024-03-16_12:42:34 Heizen\n2024-03-16_12:44:01 Standby\n2024-03-16_12:45:19 Heizen\n2024-03-16_13:05:21 Heizen\n2024-03-16_13:25:27 Heizen\n2024-03-16_13:45:35 Heizen\n2024-03-16_13:56:32 Standby\n2024-03-16_14:16:37 Standby\n2024-03-16_14:26:37 Heizen\n2024-03-16_14:31:20 Standby\n2024-03-16_14:32:11 Heizen\n2024-03-16_14:36:55 Standby\n2024-03-16_14:37:50 Heizen\n2024-03-16_14:42:32 Standby\n2024-03-16_14:43:31 Heizen\n2024-03-16_14:48:11 Standby\n2024-03-16_15:08:12 Standby\n2024-03-16_15:21:19 Heizen\n2024-03-16_15:26:00 Standby\n2024-03-16_15:26:39 Heizen\n2024-03-16_15:46:49 Heizen\n2024-03-16_16:07:03 Heizen\n2024-03-16_16:27:08 Heizen\n#WP.HPSU:HPSU.Aktive_Betriebsart:::\n",
    \"2024-03-15_16:58:22 Heizen\n2024-03-15_17:19:21 Heizen\n2024-03-15_17:40:12 Heizen\n2024-03-15_18:01:21 Heizen\n2024-03-15_18:22:18 Heizen\n2024-03-15_18:42:55 Heizen\n2024-03-15_19:04:05 Heizen\n2024-03-15_19:24:33 Heizen\n2024-03-15_19:46:18 Heizen\n2024-03-15_20:07:37 Heizen\n2024-03-15_20:28:22 Heizen\n2024-03-15_20:49:06 Heizen\n2024-03-15_20:59:46 Sommer\n2024-03-15_21:20:26 Sommer\n2024-03-15_21:31:45 Heizen\n2024-03-15_21:53:22 Heizen\n2024-03-15_22:14:22 Heizen\n2024-03-15_22:34:56 Heizen\n2024-03-15_22:56:23 Heizen\n2024-03-15_23:17:17 Heizen\n2024-03-15_23:38:25 Heizen\n2024-03-15_23:59:18 Heizen\n2024-03-16_00:20:22 Heizen\n2024-03-16_00:41:06 Heizen\n2024-03-16_01:01:21 Heizen\n2024-03-16_01:22:21 Heizen\n2024-03-16_01:43:22 Heizen\n2024-03-16_02:03:59 Heizen\n2024-03-16_02:25:19 Heizen\n2024-03-16_02:46:22 Heizen\n2024-03-16_03:07:19 Heizen\n2024-03-16_03:28:11 Heizen\n2024-03-16_03:49:03 Heizen\n2024-03-16_04:10:21 Heizen\n2024-03-16_04:31:03 Heizen\n2024-03-16_04:35:55 Sommer\n2024-03-16_04:56:47 Sommer\n2024-03-16_05:11:45 Heizen\n2024-03-16_05:32:31 Heizen\n2024-03-16_05:54:01 Heizen\n2024-03-16_06:15:05 Heizen\n2024-03-16_06:36:12 Heizen\n2024-03-16_06:57:01 Heizen\n2024-03-16_07:17:33 Heizen\n2024-03-16_07:38:37 Heizen\n2024-03-16_07:59:12 Heizen\n2024-03-16_08:20:16 Heizen\n2024-03-16_08:40:28 Heizen\n2024-03-16_09:01:48 Heizen\n2024-03-16_09:09:00 Sommer\n2024-03-16_09:30:27 Sommer\n2024-03-16_09:51:46 Sommer\n2024-03-16_10:12:49 Sommer\n2024-03-16_10:33:47 Sommer\n2024-03-16_10:55:04 Sommer\n2024-03-16_11:15:32 Sommer\n2024-03-16_11:36:23 Sommer\n2024-03-16_11:58:19 Sommer\n2024-03-16_12:00:59 Heizen\n2024-03-16_12:21:56 Heizen\n2024-03-16_12:43:22 Heizen\n2024-03-16_13:04:19 Heizen\n2024-03-16_13:25:04 Heizen\n2024-03-16_13:45:20 Heizen\n2024-03-16_14:06:22 Heizen\n2024-03-16_14:16:56 Heizen\n2024-03-16_14:37:26 Heizen\n2024-03-16_14:48:18 Sommer\n2024-03-16_15:09:20 Sommer\n2024-03-16_15:19:25 Heizen\n2024-03-16_15:19:26 Sommer\n2024-03-16_15:19:26 Heizen\n2024-03-16_15:40:30 Heizen\n2024-03-16_16:01:29 Heizen\n2024-03-16_16:22:10 Heizen\n#WP.HPSU:HPSU.Betriebsart:::\n2024-03-15_16:53:51 off\n2024-03-15_17:14:08 off\n2024-03-15_17:34:24 off\n2024-03-15_17:54:28 off\n2024-03-15_18:14:43 off\n2024-03-15_18:34:59 off\n2024-03-15_18:55:17 off\n2024-03-15_19:15:17 off\n2024-03-15_19:23:01 on\n2024-03-15_19:43:16 on\n2024-03-15_20:03:26 on\n2024-03-15_20:21:28 off\n2024-03-15_20:41:39 off\n2024-03-15_20:42:50 on\n2024-03-15_20:43:26 off\n2024-03-15_20:48:21 on\n2024-03-15_20:48:56 off\n2024-03-15_20:53:33 on\n2024-03-15_20:54:14 off\n2024-03-15_20:59:02 on\n2024-03-15_20:59:46 off\n2024-03-15_21:20:01 off\n2024-03-15_21:37:27 on\n2024-03-15_21:38:22 off\n2024-03-15_21:42:49 on\n2024-03-15_22:02:59 on\n2024-03-15_22:23:05 on\n2024-03-15_22:43:19 on\n2024-03-15_23:03:23 on\n2024-03-15_23:23:30 on\n2024-03-15_23:43:38 on\n2024-03-16_00:03:52 on\n2024-03-16_00:24:16 on\n2024-03-16_00:44:18 on\n2024-03-16_01:04:30 on\n2024-03-16_01:24:36 on\n2024-03-16_01:44:42 on\n2024-03-16_02:04:56 on\n2024-03-16_02:25:18 on\n2024-03-16_02:45:23 on\n2024-03-16_03:05:36 on\n2024-03-16_03:25:47 on\n2024-03-16_03:41:33 off\n2024-03-16_04:01:35 off\n2024-03-16_04:18:41 on\n2024-03-16_04:19:17 off\n2024-03-16_04:24:13 on\n2024-03-16_04:24:47 off\n2024-03-16_04:29:44 on\n2024-03-16_04:30:20 off\n2024-03-16_04:35:06 on\n2024-03-16_04:35:55 off\n2024-03-16_04:56:04 off\n2024-03-16_05:16:12 off\n2024-03-16_05:17:27 on\n2024-03-16_05:37:34 on\n2024-03-16_05:57:41 on\n2024-03-16_06:17:54 on\n2024-03-16_06:38:07 on\n2024-03-16_06:58:20 on\n2024-03-16_07:18:29 on\n2024-03-16_07:38:48 on\n2024-03-16_07:58:58 on\n2024-03-16_08:19:06 on\n2024-03-16_08:39:18 on\n2024-03-16_08:59:41 on\n2024-03-16_09:09:08 off\n2024-03-16_09:29:31 off\n2024-03-16_09:49:32 off\n2024-03-16_10:09:49 off\n2024-03-16_10:30:07 off\n2024-03-16_10:50:21 off\n2024-03-16_11:10:33 off\n2024-03-16_11:30:48 off\n2024-03-16_11:50:57 off\n2024-03-16_12:11:11 off\n2024-03-16_12:31:26 off\n2024-03-16_12:51:30 off\n2024-03-16_13:08:37 on\n2024-03-16_13:28:56 on\n2024-03-16_13:49:15 on\n2024-03-16_13:56:43 off\n2024-03-16_14:16:52 off\n2024-03-16_14:30:45 on\n2024-03-16_14:31:32 off\n2024-03-16_14:36:17 on\n2024-03-16_14:37:06 off\n2024-03-16_14:42:03 on\n2024-03-16_14:42:40 off\n2024-03-16_14:47:42 on\n2024-03-16_14:48:18 off\n2024-03-16_15:08:29 off\n2024-03-16_15:25:28 on\n2024-03-16_15:26:17 off\n2024-03-16_15:30:42 on\n2024-03-16_15:50:50 on\n2024-03-16_16:00:40 off\n2024-03-16_16:20:54 off\n#WP.HPSU:HPSU.Betrieb_Kompressor:::\n2024-03-15_16:54:31 off\n2024-03-15_17:14:43 off\n2024-03-15_17:35:04 off\n2024-03-15_17:55:26 off\n2024-03-15_18:04:04 on\n2024-03-15_18:24:15 on\n2024-03-15_18:44:27 on\n2024-03-15_19:04:30 on\n2024-03-15_19:24:41 on\n2024-03-15_19:44:43 on\n2024-03-15_20:05:04 on\n2024-03-15_20:25:19 on\n2024-03-15_20:45:31 on\n2024-03-15_20:59:55 off\n2024-03-15_21:20:16 off\n2024-03-15_21:32:02 on\n2024-03-15_21:52:21 on\n2024-03-15_22:12:31 on\n2024-03-15_22:32:49 on\n2024-03-15_22:52:53 on\n2024-03-15_23:12:59 on\n2024-03-15_23:33:04 on\n2024-03-15_23:53:14 on\n2024-03-16_00:13:36 on\n2024-03-16_00:33:53 on\n2024-03-16_00:54:04 on\n2024-03-16_01:14:25 on\n2024-03-16_01:34:35 on\n2024-03-16_01:54:42 on\n2024-03-16_02:15:00 on\n2024-03-16_02:35:03 on\n2024-03-16_02:55:16 on\n2024-03-16_03:15:36 on\n2024-03-16_03:35:51 on\n2024-03-16_03:56:04 on\n2024-03-16_04:16:23 on\n2024-03-16_04:36:02 off\n2024-03-16_04:56:14 off\n2024-03-16_05:12:03 on\n2024-03-16_05:32:14 on\n2024-03-16_05:52:25 on\n2024-03-16_06:12:33 on\n2024-03-16_06:32:39 on\n2024-03-16_06:52:59 on\n2024-03-16_07:13:13 on\n2024-03-16_07:33:22 on\n2024-03-16_07:53:33 on\n2024-03-16_08:13:44 on\n2024-03-16_08:34:01 on\n2024-03-16_08:54:16 on\n2024-03-16_09:09:13 off\n2024-03-16_09:29:27 off\n2024-03-16_09:49:29 off\n2024-03-16_10:09:40 off\n2024-03-16_10:29:50 off\n2024-03-16_10:50:05 off\n2024-03-16_11:10:25 off\n2024-03-16_11:30:40 off\n2024-03-16_11:51:00 off\n2024-03-16_12:01:16 on\n2024-03-16_12:21:26 on\n2024-03-16_12:41:35 on\n2024-03-16_12:44:02 off\n2024-03-16_12:45:14 on\n2024-03-16_13:05:30 on\n2024-03-16_13:25:47 on\n2024-03-16_13:45:59 on\n2024-03-16_14:06:11 on\n2024-03-16_14:16:15 on\n2024-03-16_14:36:27 on\n2024-03-16_14:48:25 off\n2024-03-16_15:08:37 off\n2024-03-16_15:19:49 on\n2024-03-16_15:40:05 on\n2024-03-16_16:00:16 on\n2024-03-16_16:20:25 on\n#WP.HPSU:HPSU.Betrieb_UWPumpe:::\n"
  ];

Außerdem ein Logfile für dich zum testen.

Danke und Gruß
Max

@andies

Nabend,

bis jetzt läuft es ein paar Tage stabil. Top  :)
Das arrangieren mit position_legend und position_title ist super.

Nutzt du zufällig auch f18 als skin? Wäre super, wenn du die Farben noch mit einlesen könntest.
Bzw Foreground, ist wichtig. Gegenfalls noch andere. Mal sehen.
Falls das für dich zu schwierig ist, vielleicht Farben zulassen per attr.
Deine Defaultfarbe ist in meinem Fall ungünstig


Gruß schwatter

Ich habe wieder ein wenig gebastelt und mir die Sachen von schwatter und MadMax angeschaut. Außerdem habe ich intern einiges geändert:

• Die Daten werden jetzt per Dataset gespeichert. Damit soll man perspektivisch besser zB farblich ändernde Linien hinbekommen. Das ist aber unter der Motorhaube, sieht man nicht direkt.
• Ich habe zoom-Button wie in SVG hinzugefügt.
• visualMap gibt es jetzt auch (da kann man eine Linie verschiedenfarbig einfärben, also niedrige Werte schwarz und hohe Werte rot), aber das ist sehr experimentell. Siehe Anhang

Bevor ich das vorn wieder einstellen, zwei Anmerkungen.

Zitat von: schwatter am 16 März 2024, 20:50:16Nutzt du zufällig auch f18 als skin? Wäre super, wenn du die Farben noch mit einlesen könntest.
Bzw Foreground, ist wichtig. Gegenfalls noch andere. Mal sehen.
Falls das für dich zu schwierig ist, vielleicht Farben zulassen per attr.

Ich weiß jetzt nicht genau, wo foreground vorkommt. Was ich eingestellt hatte war "backgroundColor" und das war default. Diese Hintergrundfarbe wird aber im style-file definiert, also sollte man die besser da herholen (wobei man sie immer noch durch das Attribut überschreiben könnte). Das habe ich geändert. Also background nicht mehr transparent, sondern aus dem style-File. Du musst also mal schauen, ob das passt oder was es genau ist.

Zitat von: MadMax am 16 März 2024, 16:39:31die Daten kommen, die werden auch angezeiht aber erst nachdem ich den Zoombalken etwas bewegt habe.

Also das scheint was Größeres zu sein. Soweit bin ich schon: Es könnte sein, dass das in (jetzt) Zeile 467 passiert
     my $dp = $da->[$dIdx];
      next if(ref $dp ne "SCALAR");       # Avoid Crash, Forum #34523 <== Das wurde schonmal diskutiert!
      my ($dpl,$dpoff,$l) = (length($$dp), 0, ""); # $dp scheint alle Daten zu enthalten
Ich habe mir $dp, $dpl und $dpoff angeschaut. Während $dp noch zeilweise die Einträge aus dem Logging enthält, ist dann bei $dpl und $dploff nichts mehr da. Das kann jetzt an mir liegen, weil ich nach wie vor kein DbLog habe. Die Zeile mit "next" hat folgenden Hintergrund. $da ist nämlich eine komplexe Sache (in $da stehen die Daten aus dem Logfile):

ZitatThe Dumper(\$da) output shows that $da is a reference to an array containing a single element. This element is a scalar reference (\') pointing to a large multiline string, each line of which appears to consist of a timestamp followed by a numeric value, separated by a space.

Wieso jetzt nur deshalb, weil da keine numeric values drin stehen, ein Problem entsteht, weiß ich nicht. Da müssten wir genauer nachforschen.

Es kann aber auch sein, dass ich total auf dem Holzweg bin. Wenn du (zB) in Zeile 478 gehst
if($l =~ m/^#/){ erscheinen denn dann die einzelnen Einträge in $l noch? Dann müsste ich da weiter schauen. Nach Deinem Eintrag Nr. 99 liegen diese Angaben eigentlich vor und $wert ist dann eben keine Zahl, sondern ein Wort ("Heizen"). 

Nabend,

so funktioniert es noch nicht mit den Farben.
Ich habe nachgeschaut, f18 special werden in "attr WEB styleData ..." gespeichert.

zugreifen per

{ AttrVal($FW_wname, "styleData", "") }

Gruß schwatter

Zitat von: schwatter am 17 März 2024, 21:56:42zugreifen per

Code Auswählen Erweitern

{ AttrVal($FW_wname, "styleData", "") }

Da muss ich mal nachfragen, denn eigentlich orientiert sich der Hintergrund am stylefile. Was hast du denn als Style in FHEMWEB (attr stylesheetPrefix) gesetzt?

Da hole ich das her, und das erscheint mir auch systematisch. Ansonsten kannst du mit dem Attribut background ja direkt in die Grafik eingreifen.

Mahlzeit,

Background. Ja, das funktioniert auch nicht so.
Muss ich mir heut Abend nochmal anschauen.

Das ist die Ausgabe von "attr styleData ..."

Die Ausgabe is in Json.

{
 "f18": {
  "Pinned.menu": false,
  "hidePin": true,
  "hideLogo": true,
  "savePinChanges": false,
  "cols.bg": "555555",
  "cols.fg": "cccccc",
  "cols.link": "cccccc",
  "cols.evenrow": "333333",
  "cols.oddrow": "111111",
  "cols.header": "222222",
  "cols.menu": "111111",
  "cols.sel": "333333",
  "cols.inpBack": "444444",
  "showDragger": false,
  "rightMenu": false,
  "snapToGrid": false,
  "fixedInput": true,
  "Pos.Room_1__20Heizung_grp_CUL_HM": {
  "left": 0,
  "top": 0,
  "width": 1660,
  "height": 160,
  "oTop": 34,
  "oLeft": 3
  },
  "Pos.Room_1__20Heizung_grp_THSensor": {
  "left": 0,
  "top": 200,
  "width": 1660,
  "height": 40,
  "oTop": 54,
  "oLeft": 3
  },
  "Pinned.Room.1%2e%20Heizung.grp.CUL_HM": true,
  "hideInput": false,
  "Pinned.style.list.f18 special": true,
  "Pos.Room_CUL_5fTX_grp_FileLog": {
  "left": 0,
  "top": 0,
  "width": 541,
  "height": 26,
  "oTop": 21,
  "oLeft": 1
  },
  "Pos.Room_CUL_5fTX_grp_THSensor": {
  "left": 0,
  "top": 50,
  "width": 541,
  "height": 38,
  "oTop": 41,
  "oLeft": 1
  },
  "wrapcolumns": true,
  "widePortrait": true,
  "hideMenu": false,
  "hideTextInput": false,
  "Pos.style_list_Styles": {
  "left": 0,
  "top": 0,
  "width": 1346,
  "height": 450,
  "oTop": -372,
  "oLeft": 0
  },
  "Pos.style_list_f18_special": {
  "left": 0,
  "top": 80,
  "width": 1346,
  "height": 151,
  "oTop": 48,
  "oLeft": 0
  },
  "Pos.style_list_f18__Room_specific": {
  "left": 0,
  "top": 281,
  "width": 1346,
  "height": 714,
  "oTop": 48,
  "oLeft": 0
  }
 },
 "flex": {
  "colorPreset": {},
  "menuOrder": {},
  "devices": {
  "6c1cd7e5e36df770cf7ac0e48942a838": {
    "color": {
    "HeaderBG": "#2E5E87",
    "HeaderIcon": "#FFF",
    "HeaderText": "#FFF",
    "HeaderBorder": "#2E5E87",
    "MenuBG": "#000",
    "MenuBorder": "#2E5E87",
    "MenuIcon": "#FFF",
    "MenuIconBG": "#2E5E87",
    "MenuRoomIcon": "#FFF",
    "MenuText": "#FFF",
    "MenuHoverLink": "#2E5E87",
    "MainBG": "#EEE",
    "TableHeaderBG": "#2E5E87",
    "TableHeaderText": "#FFF",
    "TableBorder": "#2E5E87",
    "TableOdd": "#EEE",
    "TableEven": "#DDD",
    "TableText": "#000",
    "TableLink": "#000",
    "TableLinkFirstCol": "#000",
    "TableHoverRow": "#AAA",
    "TableHoverLink": "#2E5E87",
    "TableNewEvent": "#F00",
    "TableIcon": "#2E5E87",
    "TableShadow": "#000",
    "SetGetAttrBG": "#CCC",
    "SubmitButtonBG": "#2E5E87",
    "SubmitButtonBorder": "#2E5E87",
    "SubmitButtonText": "#FFF",
    "WidgetBorder": "#2E5E87",
    "WidgetText": "#000",
    "WidgetHighlight": "#2E5E87",
    "LogDate": "#000",
    "LogTime": "#000",
    "LogVerbose0": "#000",
    "LogVerbose1": "#F00",
    "LogVerbose2": "#FFA500",
    "LogVerbose3": "#008000",
    "LogVerbose4": "#1E90FF",
    "LogVerbose5": "#00F",
    "plotBG": "#EEE",
    "plotBGgradient": "#EEE",
    "plotBorder": "#2E5E87",
    "plotText": "#000",
    "plotGrid": "#555",
    "plotMarker": "#F00",
    "plotLine0": "#F00",
    "plotLine1": "#0F0",
    "plotLine2": "#00F",
    "plotLine3": "#F0F",
    "plotLine4": "#A52A2A",
    "plotLine5": "#000",
    "plotLine6": "#808000",
    "plotLine7": "#808080",
    "plotLine8": "#FF0",
    "plotLinePasted": "#000"
    },
    "title": "fhem",
    "myUtilsFileName": "99_myUtils.pm",
    "plotMinWidth": "250px",
    "plotMaxWidth": "100%",
    "fontFamily": "Arial",
    "showClock": true,
    "showLogoButton": false,
    "showRebootButton": true,
    "showUpdateButton": true,
    "showUpdateCheckButton": true,
    "showRereadIconsButton": false,
    "showRawInputButton": true,
    "showSaveButton": true,
    "showRoomDeviceName": true,
    "showMenuAlways": true,
    "showFirstColBold": true,
    "enableCommandHistory": true,
    "enableDeviceSearch": true,
    "hideWebcmdOnSmallScreen": false,
    "colorOptionsDetailed": false,
    "multiColumnLayout": "dual",
    "enableAnimations": false,
    "improvePerformance": false,
    "enableLogLineWrap": true,
    "enableRoundedEdges": true,
    "enableTableShadow": false,
    "showRoomIconsRight": false,
    "enableCodeMirror": true,
    "enableDayTimeStyle": false,
    "enableExperimental": false,
    "dayStyle": "bright",
    "nightStyle": "dark",
    "currentStyle": "bright",
    "newSettings": {},
    "scalePage": "1",
    "enableTableBehaviour": false
  },
  "195fe5627d9dc038583167eb8629ad4f": {
    "color": {
    "HeaderBG": "#2E5E87",
    "HeaderIcon": "#FFF",
    "HeaderText": "#FFF",
    "HeaderBorder": "#2E5E87",
    "MenuBG": "#000",
    "MenuBorder": "#2E5E87",
    "MenuIcon": "#FFF",
    "MenuIconBG": "#2E5E87",
    "MenuRoomIcon": "#FFF",
    "MenuText": "#FFF",
    "MenuHoverLink": "#2E5E87",
    "MainBG": "#EEE",
    "TableHeaderBG": "#2E5E87",
    "TableHeaderText": "#FFF",
    "TableBorder": "#2E5E87",
    "TableOdd": "#EEE",
    "TableEven": "#DDD",
    "TableText": "#000",
    "TableLink": "#000",
    "TableLinkFirstCol": "#000",
    "TableHoverRow": "#AAA",
    "TableHoverLink": "#2E5E87",
    "TableNewEvent": "#F00",
    "TableIcon": "#2E5E87",
    "TableShadow": "#000",
    "SetGetAttrBG": "#CCC",
    "SubmitButtonBG": "#2E5E87",
    "SubmitButtonBorder": "#2E5E87",
    "SubmitButtonText": "#FFF",
    "WidgetBorder": "#2E5E87",
    "WidgetText": "#000",
    "WidgetHighlight": "#2E5E87",
    "LogDate": "#000",
    "LogTime": "#000",
    "LogVerbose0": "#000",
    "LogVerbose1": "#F00",
    "LogVerbose2": "#FFA500",
    "LogVerbose3": "#008000",
    "LogVerbose4": "#1E90FF",
    "LogVerbose5": "#00F",
    "plotBG": "#EEE",
    "plotBGgradient": "#EEE",
    "plotBorder": "#2E5E87",
    "plotText": "#000",
    "plotGrid": "#555",
    "plotMarker": "#F00",
    "plotLine0": "#F00",
    "plotLine1": "#0F0",
    "plotLine2": "#00F",
    "plotLine3": "#F0F",
    "plotLine4": "#A52A2A",
    "plotLine5": "#000",
    "plotLine6": "#808000",
    "plotLine7": "#808080",
    "plotLine8": "#FF0",
    "plotLinePasted": "#000"
    },
    "title": "fhem",
    "myUtilsFileName": "99_myUtils.pm",
    "plotMinWidth": "250px",
    "plotMaxWidth": "100%",
    "fontFamily": "Arial",
    "showClock": true,
    "showLogoButton": false,
    "showRebootButton": true,
    "showUpdateButton": true,
    "showUpdateCheckButton": true,
    "showRereadIconsButton": false,
    "showRawInputButton": true,
    "showSaveButton": true,
    "showRoomDeviceName": true,
    "showMenuAlways": true,
    "showFirstColBold": true,
    "enableCommandHistory": true,
    "enableDeviceSearch": true,
    "hideWebcmdOnSmallScreen": false,
    "colorOptionsDetailed": false,
    "multiColumnLayout": "dual",
    "enableAnimations": false,
    "improvePerformance": false,
    "enableLogLineWrap": true,
    "enableRoundedEdges": true,
    "enableTableShadow": false,
    "showRoomIconsRight": false,
    "enableCodeMirror": true,
    "enableDayTimeStyle": false,
    "enableExperimental": false,
    "dayStyle": "bright",
    "nightStyle": "dark",
    "currentStyle": "bright",
    "newSettings": {},
    "scalePage": "1",
    "enableTableBehaviour": false
  }
  }
 }
}

Bei der Schriftfarbe handelt es sich um diesen Wert.

"cols.fg": "cccccc"


Gruß schwatter

Hallo Andies,

ich habe noch ein kleines Manko  ;)
Da die Daten nicht immer Zeitlich Synchron sind zeigt der Tooltip nicht immer Werte an, das wäre aber schön.
Eine Lösung habe ich dafür auch gefunden aber bekomme die nicht eingebaut.

https://github.com/apache/echarts/issues/15488
https://stackoverflow.com/questions/55238820/how-can-i-show-all-series-in-tooltip-when-series-does-not-have-same-time-values/72026277#72026277

Dachte das es eigentlich hiermit gehen könnte aber nö...
    ######################
    # Options -> axisPointer
    ######################
    ${$eCharts_options_ref}{axisPointer} = {snap => 'true'};

Danke.

Gruß
Max

Zitat von: MadMax am 19 März 2024, 17:42:30ich habe noch ein kleines Manko  ;)

Also wenn die Lösung aus stackoverflow richtig wäre (da fehlen aber schon offensichtlich Semikola oder wie man den Plural bildet), dann müsste es gehen, wenn du das hier vor "finished" im Code eingibst, ca 890 oder so:
  eCharts_pO 'var MadMaxoption_'.$name.' = {"toolbox": {"formatter" : (params) => { var xTime = new Date(params[0].axisValue); let tooltip = `<p>${xTime.toLocaleString()}</p> `; series.forEach((serie, index) => { value = serie.data.reduce((prev, curr) => Math.abs(new Date(curr.value[0]).valueOf() - xTime.valueOf()) < Math.abs(new Date(prev.value[0]).valueOf() - xTime.valueOf()) ? curr : prev).value[1];    tooltip += `<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color: ${myChart.getVisual({ seriesIndex: index }, "color")}"></span>`; tooltip += `${serie.name} &emsp;&emsp; <b>${value}</b></p>`; }); return tooltip; }}}';
  eCharts_pO 'myChart_'.$name.'.setOption(MadMaxoption_'.$name.');';
Geht bei mir aber nicht. Also müsste der workaround falsch sein, oder?

Also auf die Art würde ich das einbauen können?
Dann schaue ich mir das nochmal in Ruhe an.

Das würde umsetzen, was in stackoverflow als Lösung angegeben wird, ja.

Ich verstehe zB nicht, warum in JS diese merkwürdigen Anführungsstriche nötig sind. Aber ich kenne die Sprache nicht, ich frage gleich mal ChatGPT...

MW sind das keine backticks in der Lösung, aber AI sagt

ZitatIn JavaScript, the backtick (`) characters are used to define template literals, a feature introduced in ECMAScript 2015 (ES6). Template literals provide an easy syntax to create strings and to perform string interpolation, where expressions can be embedded into string literals.

Here are some key functions and features of template literals:

1. **Multi-line strings**: Prior to ES6, creating multi-line strings required concatenating strings with the `+` operator or including newline characters (`\n`). With template literals, you can create multi-line strings more naturally, simply by including the line breaks within the backticks.

2. **String interpolation**: Template literals allow embedding expressions within strings. The expressions are enclosed in `${}` and are evaluated, with the result being converted to a string and included in the surrounding text. This makes constructing strings with dynamic content more readable and concise.

3. **Tagged template literals**: A more advanced use of template literals involves tagged templates. This feature allows you to parse template literals through a function, enabling custom processing of the template literals' text and embedded expressions.

Here's a quick example demonstrating multi-line strings and string interpolation with template literals:

```javascript
const name = "Jane";
const greeting = `Hello, ${name}!
Welcome to our website.
Enjoy your stay!`;

console.log(greeting);
```

This example will output:

```
Hello, Jane!
Welcome to our website.
Enjoy your stay!
```

This showcases how backticks (`) and the features of template literals can simplify working with strings in JavaScript.

Hallo andies,

ich habe mal ein wenig experimentiert.
erstmal hatte ich dies abegändet.

${myChart.getVisual({ seriesIndex: index }
${myChart_'.$name.'.getVisual({ seriesIndex: index }

und

{"toolbox": {"formatter" : (params) => {
{legend: {}, tooltip: {trigger: "axis", formatter :

tooltop, nicht toolbox.

  eCharts_pO 'var MadMaxoption_'.$name.' = {legend: {}, tooltip: {trigger: "axis", formatter : (params) => {var xTime = new Date(params[0].axisValue); let tooltip = `<p>${xTime.toLocaleString()}</p> `; series.forEach((serie, index) => { value = serie.data.reduce((prev, curr) => Math.abs(new Date(curr.value[0]).valueOf() - xTime.valueOf()) < Math.abs(new Date(prev.value[0]).valueOf() - xTime.valueOf()) ? curr : prev).value[1]; tooltip += `<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color: ${myChart_'.$name.'.getVisual({ seriesIndex: index }, "color")}"></span>`; tooltip += `${serie.name} &emsp;&emsp; <b>${value}</b></p>`;}); return tooltip; }}}';
  eCharts_pO 'myChart_'.$name.'.setOption(MadMaxoption_'.$name.');';

Leider findet das script die series nicht, diese werden aber vorher angelegt  ::)
Hast du eine idee?

Gruß
Max

Ah, im beispiel sind die als var angelegt, darum kommt das sript da dran.

var series = [{
    "name": "sensor 1",
    //step: "end",
    "data": [{
        "value": [
          "2019-02-20T11:47:44.000Z",
          22.2
        ]
      },

und dann wird die var übergeben.

series: series,


Genau, und so lange wir die var nicht haben, geht das nicht.

Meinst du mann könnte den weg gehen und die series erst in eine Variable speichern und dann zuweisen?

Das hatte ich vorher und ich habe die Daten jetzt in eine Dataset ausgelagert, weil ich verschiedene x- und y-Achsen zulassen will. Das wäre mit series nicht oder nur sehr umständlich gegangen.

Ich muss mal schauen, ob es da noch einen anderen Weg gibt. Anscheinend geht es ja grundsätzlich, man muss nur den Datensatz "irgendwie" bestimmen. Ich bastle gerade an etwas anderem, werde mir das aber danach mal anschauen.

Cool, danke.
Wenn ich Zeit finde experimentieren ich auch noch ein wenig.

Ich habe mir mal von ChatGPT erklären lassen, was da passiert:

ZitatThis JavaScript code snippet appears to be part of a custom tooltip formatter function for an ECharts chart, a popular open-source visualization library. The function dynamically generates HTML content for the tooltip based on the data point closest to the cursor's x-axis position. Let's break it down step by step:

1. Initialization of `xTime`:
   

Code Auswählen Erweitern

   var xTime = new Date(params[0].axisValue);
   This line initializes `xTime` as a JavaScript `Date` object using `params[0].axisValue`, which likely represents the x-axis value (e.g., a timestamp) of the point nearest to the cursor or selected by the user. `params` is an array of data passed to the tooltip formatter by ECharts, where each item contains information about the corresponding series at the current cursor position.

2. Starting the Tooltip HTML:
 

Code Auswählen Erweitern


   let tooltip = `<p>${xTime.toLocaleString()}</p> `;
 
 This line begins constructing the `tooltip` HTML string with a paragraph that displays the localized string representation of `xTime`. It sets the foundation for appending additional series information.

3. Iterating Over Series:
   

Code Auswählen Erweitern

   series.forEach((serie, index) => { ... });
      Here, the code iterates over each series in the chart. For each series, it performs operations to determine the closest data point to `xTime` and constructs part of the tooltip HTML string with specific series information.

4. Finding the Closest Data Point:

Code Auswählen Erweitern


   value = serie.data.reduce((prev, curr) => ... ).value[1];
   
   Within the `forEach` loop, `reduce` is used to iterate over the `data` array of the current series to find the data point (`curr`) closest to `xTime` by comparing the absolute differences in their x-axis values (`value[0]`). It then selects either the current data point (`curr`) or the previous closest data point (`prev`) based on which is closer to `xTime`. The result is the `value[1]` of the closest data point, which is used to display in the tooltip.

5. Appending Series Information to the Tooltip:
   

Code Auswählen Erweitern

   tooltip += `<p><span ... ></span>`;
   tooltip += `${serie.name} &emsp;&emsp; <b>${value}</b></p>`;
 
   For each series, this part appends HTML to the `tooltip` string that includes a colored square (indicating the series color) and the series name followed by the value of the closest data point. `myChart_...getVisual({ seriesIndex: index }, "color")` is used to retrieve the series color, which is then set as the background color of the span acting as the colored square. The `&emsp;` entities are used for spacing.

6. Return Statement:
   The function ends with a `return` statement (implied but not fully shown in the snippet), which likely returns the completed `tooltip` HTML string to be displayed as the tooltip content.

Jetzt muss man nur noch schauen, wie man statt series dafür dataset einsetzt. Denn dort sind die Daten abgelegt. Vielleicht kann man in series auf dataset verweisen und dann klappt der Code oder man regelt das oben, indem man nicht series ausliest, sondern dataset ausliest. Aber wie das genau geht, entzieht sich meiner Kenntnis.   

Ich habe mal wieder was gebastelt (allerdings ist es mir nicht gelungen, das Problem von MadMax zu lösen, siehe vorigen Post). Es gibt ein neues Attribut, das split heißt. Dabei werden dann die Daten genau in der Mitte geteilt und als zwei Reihen statt einer dargestellt. Das kann man zB benutzen, um die Temperaturen zweier aufeinanderfolgender Tage anzuzeigen o.Ä. Man kann nur in der Mitte teilen, d.h. wahrscheinlich macht das nur Sinn in Verbindung mit fixedrange=2days oder so.

Mir gelingt es noch nicht, die obere x-Achse einzufärben, aber man sieht schon eine ganze Menge. Anbei zwei Fotos im Anhang. Die neueste Version ist wieder im ersten Post.

Tag,

ich habe heute versucht die 0.0.12.1 zu starten. Nach dem "reload 98_eCharts.pm" kommt folgende Fehlermeldung.

Not enough arguments for main::eCharts_render at ./FHEM/98_eCharts.pm line 794, near "$noHeader)"
BEGIN not safe after errors--compilation aborted at ./FHEM/98_eCharts.pm line 1129.
Gruß schwatter

Zitat von: schwatter am 01 April 2024, 11:05:06ich habe heute versucht die 0.0.12.1 zu starten. Nach dem "reload 98_eCharts.pm" kommt folgende Fehlermeldung.

Ja, an den Fehler erinnere ich mich. Der kommt mE so zustande, dass ich die Definition dieser Funktion geändert habe, aber im Speicher noch die alte Fassung ist. Ich musste da FHEM neu starten, erst danach ging das. Zur Sicherheit habe ich trotzdem die Datei im ersten Post nochmal überschrieben, weil diese Stelle bei mir in Zeile 791 ist. Also lade die nochmal herunter.  Sorry!

Ok,

neu geladen und neu gestartet. Danach funktioniert ein reload in Fhem auch wieder.


Gruß schwatter

Kann mir jemand sagen, wo die aktuelle Version des Moduls steht?

LG

pah

https://forum.fhem.de/index.php?msg=1302859
ganz vorn (immer)