FTUI Neue Version chart_widget

Begonnen von eki, 31 Januar 2016, 00:17:26

Vorheriges Thema - Nächstes Thema

eki

#600
Zitat von: curt am 18 September 2020, 03:52:05
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

Zitat von: eki am 18 September 2020, 08:26:59
"ftui l3fillfull" kenne ich selber nicht,

<lacht laut> Es lebt, es lebt!

Zitat von: eki am 18 September 2020, 08:26:59
Wie mein grundsätzliches Vorgehen bezüglich neuer Versionen ist, habe ich hier:

Ich habe hier 'Version 2.10.0'.

Zitat von: eki am 18 September 2020, 08:26:59
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
RPI 4 - Jeelink HomeMatic Z-Wave

wcraffonara

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

/* 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:
.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):
.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:
.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:
.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:
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ß
Ich bin kein Programmierer und habe keine Ahnung.

Raspberry PI 3B+ mit HM-MOD-RPI-PCB,     
HM-TC-IT-WM-W-EU, HM-CC-RT-DN, HM-SEC-SCo
Raspberry PI 3B+ mit 7" Touchdisplay

curt

@wcraffonara @eki

Danke für eure Beispiele!

(Ich hatte viel zu kompliziert gedacht, ich vermutete eine hochkomplexe Datei.)
RPI 4 - Jeelink HomeMatic Z-Wave

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
Zitat von: wcraffonara am 19 September 2020, 18:50:01
  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:

Zitat von: eki am 21 September 2020, 08:23:57
Für normale Linien:
.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

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

RPI 4 - Jeelink HomeMatic Z-Wave

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...
Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...