FTUI Neue Version chart_widget

[eki]

Hallo @eki und alle,

wenn ich mir völlig unbekannte "ftui l3fillfull" sehe, denke ich, dass sich offenbar viel getan hat. Kann ich denn irgendwo (Wiki-Artikel wäre sensationell) geballt nachlesen, was alles in der Zwischenzeit neu ist?

Und eine Frage, die mir gerade auf den Nägeln brennt: Ich brauche mehr Farben. SVG-Farben gehen wohl, werden aber nirgendwo erklärt. Oder ich kann im zuständigen css-File rumpfuschen, da ist dann aber die Frage, ob das nächste Update mir das wieder weghaut.

P.S: Wird das Widget während des FHEM-Updates aktualisiert oder muss ich das händisch machen?

"ftui l3fillfull" kenne ich selber nicht, das hat @wcraffonara dann wohl selber gebaut. Wie mein grundsätzliches Vorgehen bezüglich neuer Versionen ist, habe ich hier: https://forum.fhem.de/index.php/topic,48450.msg1027052.html#msg1027052 beschrieben. Die letzte "offizielle" Version, die dann auch mit den normalen Updates mitkommt, ist vom Mai dieses Jahres. Ich werde demnächst auch mal wieder eine neue Version freigeben. Die Beschreibungen zu den neuen Features sind immer im 1. Beitrag dieses Threads zu finden.

Wenn Du eigene Stile generieren willst, die nicht mit Updates verloren gehen, dann empfehle ich diese in die Datei fhem-tablet-ui-user.css einzubinden (die muss natürlich im HTML Header entsprechend geladen werden). Als Beispiel kannst Du die Standarddefinitionen aus ftui_chart.css (ganz am Ende des Files) verwenden.

[curt]

"ftui l3fillfull" kenne ich selber nicht,

<lacht laut> Es lebt, es lebt!

Wie mein grundsätzliches Vorgehen bezüglich neuer Versionen ist, habe ich hier:

Ich habe hier 'Version 2.10.0'.

Wenn Du eigene Stile generieren willst, die nicht mit Updates verloren gehen, dann empfehle ich diese in die Datei fhem-tablet-ui-user.css einzubinden (die muss natürlich im HTML Header entsprechend geladen werden). Als Beispiel kannst Du die Standarddefinitionen aus ftui_chart.css (ganz am Ende des Files) verwenden.

fhem-tablet-ui-user.css habe ich nicht. Beziehungsweise schon, da steht nur was von l99sym drin. Keine Ahnung woher das kommt, ich war das nicht, heiliges Pionierehrenwort!

Nun hilf bitte einem alten Mann mal über die Straße, für Dich ist das cut-paste: Wie müsste diese Datei denn für "ftui l7" aussehen?

Nicht jammern, ich habe Dich im Gegenzug ganz dolle gelobt, schau: https://forum.fhem.de/index.php/topic,112955.45.html

[wcraffonara]

Servus,
  hier meine Definition in der ftui-table-ui-user.css:

Code Auswählen Erweitern

/* Filled graphs */
.ftui.l0fillfull { fill:#DDA400; fill-opacity:1.0 }
.ftui.l1fillfull { fill:#BBBBBB; fill-opacity:1.0 }
.ftui.l2fillfull { fill:#FF4D4D; fill-opacity:1.0 }
.ftui.l3fillfull { fill:#CCCC00; fill-opacity:1.0 }
.ftui.l4fillfull { fill:#33CC33; fill-opacity:1.0 }
.ftui.l5fillfull { fill:#33CCCC; fill-opacity:1.0 }
.ftui.l6fillfull { fill:#3333CC; fill-opacity:1.0 }

/* hide graphs */
.ftui.l0hide { fill:#FFFFFF; fill-opacity:0.0 }


[eki]

Zur Erklärung, ich habe das in den "original" Stilen für das Chart folgendermaßen gemacht:

Für normale Linien:

Code Auswählen Erweitern

.ftui.l0 { stroke:#DDA400; stroke-width:2px; fill:none; }

dabei steht hinter stroke die Farbe (es kann alles angegeben werden, was CSS bzw. HTML so frisst, also zum Beispiel auch "red" oder eben # und dann jeweils eine hex zahl für Rot-, Grün- und Gelbanteil). Stroke-width gibt die Dicke der Linie in pixeln an.

Für Symbole (wenn bei der Definition des Graphen z.B. für data-ptype ein Icon Name verwendet wird):

Code Auswählen Erweitern

.ftui.l0sym { stroke:#DDA400; stroke-width:12px; fill:none; }

Hier gibt die stroke-width dann die Größe der Symbole an.

Für gestrichelte (oder gepunktete) Linien:

Code Auswählen Erweitern

.ftui.l0dash { stroke:#DDA400; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }

Hier gibt stroke-dasharray an, wie die Strichelung erfolgen soll (hier also 5 Pixel Linie, dann 3 Pixel Lücke)

Für gefüllte Graphen:

Code Auswählen Erweitern

.ftui.l0fill { stroke:#DDA400; fill:#DDA400; stroke-width:2px; fill-opacity:0.8 }

Mit fill wird die Füllfarbe angegeben, mit fill-opacity die "Durchsichtigkeit". Man kann hier auch Verläufe angeben, allerdings muss ich die vorher im Code anlegen, weil die verwendeten SVG Graphiken das sonst irgendwie nicht packen. Eine weitere Möglichkeit für Verläufe ist auch die Verwendung von arrays in data-style (ist im Wiki beschrieben)

Damit die Legendeneinträge richtig funktionieren, emfehle ich noch folgende Zeilen für jede der Definitionen hinzuzufügen:

Code Auswählen Erweitern

text.ftui.l0, text.ftui.l0sym, text.ftui.l0dot, text.ftui.l0dash, text.ftui.l0fill { stroke:none; fill:#DDA400; }
tspan.ftui.l0, tspan.ftui.l0sym, tspan.ftui.l0dot, tspan.ftui.l0dash, tspan.ftui.l0fill { stroke:none; fill:#DDA400; }

[Knallkopp_02]

@eki, ich habe deine Testversion nun seit einigen Wochen am laufen und keine Probleme feststellen können was die Anzeige der Daten angeht.

Gruß

[curt]

@wcraffonara @eki

Danke für eure Beispiele!

(Ich hatte viel zu kompliziert gedacht, ich vermutete eine hochkomplexe Datei.)

[TimoD]

Gibt es eigentlich eine Möglichkeit die X Achse auch auf Minuten zu beschränken also zum Beispiel nur die letzten 30 Minuten anzuzeigen? (mit m wählt man ja Monate)

[eki]

das müsste mit 0.5h gehen (also eine halbe Stunde). Minuten direkt geht nicht.

[TimoD]

Danke für die Antwort. Funktioniert aber leider bei mir nicht.  noch eine andere Idee?

[eki]

Ich habe noch mal probiert. Das geht mit der aktuellen Version des Chart tatsächlich nicht. Ich habe den Fehler korrigiert, probier mal die hier angehängte Version des Charts, damit sollte es hoffentlich klappen. Ich werde demnächst mal wieder eine neue Version freigeben, da wäre, vorausgesetzt es funktioniert, dann auch diese Korrektur enthalten.

[curt]

@wcraffonara @eki

  hier meine Definition in der ftui-table-ui-user.css:

Ich habe eine ftui-table-ui-user.css angelegt. Leider funktioniert das nicht. Ok, es funktioniert schon - leider nicht wie erwartet.

Ich taste mich ganz langsam heran:

Für normale Linien:

Code Auswählen Erweitern

.ftui.l0 { stroke:#DDA400; stroke-width:2px; fill:none; }


EXAKT diese Definition schrieb ich in ftui-table-ui-user.css, ich nannte sie ".ftui.l11". Und ich versuchte, sie als "ftui l11" zu nutzen. Das Ergebnis ist, dass es diesen Graph zwar (farblos) gibt - aber unterhalb des Graphen ist alles pechschwarz, dabei werden andere Graphen faktisch "gelöscht".

Ich habe wirklich alles so gemacht, wie ihr gesagt habt. Was ist da jetzt kaputt? Bzw. was mache ich da falsch?

So sieht das File bei mir aus:
cat css/ftui-table-ui-user.css

Code Auswählen Erweitern


.ftui.l11 { stroke:#DDA400; stroke-width:2px; fill:none; }
.ftui.l21fill { fill:#99FF99; fill-opacity:1.0 }


[eki]

Kannst Du bitte noch Dein HTML mit der Chart Definition posten, dann kann ich versuchen das nachzuvollziehen.

[dirk.k]

Hallo zusammen,
ist eigentlich die Funktion "lastyear" (... Es gibt künftig eine Schaltoption "lastyear" mit 0 und 1...) implementiert worden?
In der Doku finde ich nix.
Ich würde gern aktuelle Werte mit denen des letzten Jahres vergleichen.
Wie wird so etwas von euch realisiert?
Danke, Dirk

[eki]

Da das relativ auwändig wäre, hatte ich ja eine Alternative vorgeschlagen (https://forum.fhem.de/index.php/topic,48450.msg769158.html#msg769158), allerdings kein Feedback bekommen und daher bis dato nichts angefangen. Es gäbe auch noch die Alternativen zwei Charts mit jeweils um ein Jahr versetzten Zeitachsen zu setzen und untereinander zu zeichnen.

[Thyraz]

Weiß jetzt gerade nicht wie das beim chart widget mit der Signalkonfiguration aussieht, daher nur mal als kleiner Gedankenanstoß:

Evtl. wäre es möglich mit logproxy und extend + offset das Vorjahr mit zu fetchen und dann mit einem 12 Monate Offset in den aktuellen Zeitbereich zu schieben.
Wenn man das Signal in der Legende dann "Vorjahr" oder so nennt, sollte das auch nicht verwirren.

Hab allerdings keine Ahnung ob sich logproxy beim chart widget so frei pro Signal konfigurieren lässt...