[FHEM-Tablet-UI] Chart

[curt]

Code: [Auswählen]

Hallo @eki
[quote author=eki link=topic=45864.msg920948#msg920948 date=1552980778]
data-ptype='["fa-star"]'...
data-ptype='["fa-circle"]'[/code]
[/quote]

Beide Symbole funktionieren (bei mir) nicht. In https://xxx:8083/fhem/ftui/icons_table.html werden sie dargestellt, in FTUI nicht. Eine ähnliche Situation hatte ich schon mal: "wi-rain" vs. "wi wi-rain". Das scheint hier aber nicht zu helfen.

Die Frage ist, ob Du dem Widget nicht doch einen schönen Punkt spenden könntest - ein Dateiaufruf weniger. Denn Meine Doppelgrafik der neuen Wetterstation baut jetzt schon unendlich langsam auf.

[eki]

Wie üblich, ohne eine Kopie Deines Codes würde helfen (in dem Fall möglichst ein komplettes HTML mit dem Header), das Problem einzugrenzen, das mit den Symbolen sollte eigentlich funktionieren.

Deinen zweiten Hinweis verstehe ich nicht so ganz, wo soll ich denn etwas einsparen? Was meinst Du mit Dateiaufruf? Ich lasse mir da gerne helfen, aber ich versuche eigentlich keine unnötigen get oder sonstig Aufrufe zu machen.

[curt]

Wie üblich, ohne eine Kopie Deines Codes würde helfen (in dem Fall möglichst ein komplettes HTML mit dem Header), das Problem einzugrenzen, das mit den Symbolen sollte eigentlich funktionieren.

Das wird schon sehr lang, ich muss leider gleich weg. Ok, das wäre auch aus anderem Grund sinnvoll: Da schaut dann ein neutraler Blick drüber.

Deinen zweiten Hinweis verstehe ich nicht so ganz, wo soll ich denn etwas einsparen? Was meinst Du mit Dateiaufruf? Ich lasse mir da gerne helfen, aber ich versuche eigentlich keine unnötigen get oder sonstig Aufrufe zu machen.

Naja, die Grafikdatei steht ja erstmal auf der Platte. Datei öffnen, Datei lesen, Datei schließen. Also für einen schnöden Punkt (bzw. Kreis) wäre es aus meiner ganz bescheidenen Sicht deutlich schlauer, wenn das Widget den Punkt gleich selbst setzen könnte. Und den Zirkus "da ist irgend ein Pfad falsch" spart man sich auch noch.

[eki]

Jetzt fange ich an zu verstehen, und natürlich geht das schon. Wenn Du tatsächlich nur einen Kreis und kein spezielles Symbol haben willst, dann geht das natürlich auch mit data-pytpe='["points"]'.

Das wird meines Erachtens aber nicht viel für die Ladezeit bringen, die Fonts werden einmal geladen (und dann normalerweise sogar im Cache des Browsers gehalten, wenn Du die Seite wieder aufrufst), da gewinnt man nicht viel. Warum das bei Dir so lange dauert liegt sicher an etwas anderem.

Ich muss zu meiner und zur Schande aller anderen Wiki Autoren gestehen, dass das bisher im Chart Wiki noch nicht beschrieben war, werde ich (oder andere Freiwillige) bei Gelegenheit ergänzen müssen.

[curt]

Schick. - Wenn ich es nicht verdränge, trage ich das im Wiki nach.

Unabhängig davon würde ich Dir gern meinen Code zeigen - und das zuständige Log: Ich habe es bei diesem Wettersensor (ws980) geschafft, dass der Aufbau der Grafik gefühlte 10 Sekunden geht und anschließend die CPU-Last noch einige Zeit bei 100% ist.

Das ist ja eher untypisch für das/Dein Widget.

[Stütti]

Hallo @eki
Beide Symbole funktionieren (bei mir) nicht. In https://xxx:8083/fhem/ftui/icons_table.html werden sie dargestellt, in FTUI nicht. Eine ähnliche Situation hatte ich schon mal: "wi-rain" vs. "wi wi-rain". Das scheint hier aber nicht zu helfen.

[...]

@curt: Das Problem hatte ich auch. Mit ein wenig Modifikation funktioniert es nun:
https://forum.fhem.de/index.php/topic,48450.msg901151.html#msg901151

[curt]

Jetzt fange ich an zu verstehen, und natürlich geht das schon. Wenn Du tatsächlich nur einen Kreis und kein spezielles Symbol haben willst, dann geht das natürlich auch mit data-pytpe='["points"]'.

Das funktioniert sehr fein. (Habe ich im Wiki ergänzt.)

Hast Du auch noch einen versteckten Parameter, um die Größe des Punkts zu beeinflussen? (Mir ist der zu groß.)

[eki]

das geht über styles.

Wenn Du eine beliebige Größe einstellen willst, ist das Einfachste, einen der '..sym' Einträge aus dem ftui_chart.css heraus zu kopieren, umzubenennen und angepasst (stroke-width gibt die Dicke der Punkte vor) in Deine fhem-tablet-ui-user.css Datei hinein zu setzen (vorausgesetzt, Du hast die auch in dein HTML eingebunden). Der Eintrag in fhem-tablet-ui-user.css würde dann z.B. so aussehen:

.ftui.l99sym      { stroke:#DDA400; stroke-width:8px; fill:none;}

In der Chart Definition müsste dann natürlich bei data-style entsprechend ftui l99sym stehen.

[curt]

@eki
Das hatte ich mir jetzt einfacher vorgestellt, ohne Bruch auf irgendwelche individuellen Dinge. Langfristig halte ich sowas für gefährlich.

Der Weg zur Hölle ist mit guten Vorsätzen gepflastert - schau mal, wie schön das jetzt mit meiner Wetterstation aussieht.

Oben ist nebst Temperatur und Luftfeuchte in türkis der Regen und gelb die kaum vorhandene Sonne.

Unten ist die Windgeschwindigkeit, rot sind die Windspitzen dazu. Die himmelblauen Punkte zeigen die Windrichtung (wenn gar kein Wind weht, ergibt das einen Strich, weil der Windzeiger in immer gleicher Position steht).

[eki]

Leider verstehe ich nicht was Du meinst. Was ist gefährlich und was meinst Du mit "Bruch auf irgendwelche individuellen Dinge".

Mein Grundkonzept war mal, wie man das bei HTML eben so macht, alles was den Inhalt des Charts betrifft kommt ins HTML und alles, was mit Templates der Details des Aussehens zu tun hat, ins CSS. Die als Standard mitgelieferten Templates (im ftui-chart.css) kann man erweitern, indem man eben Zusätzliche ins user CSS einfügt. Wo soll da eine Gefahr liegen.

Deine Charts sehen übrigens sehr gut aus und sind sicher schon "hohe Schule" was das Ausnutzen der Features vom Chart Widget betrifft. Da muss man dann eben auch schon mal ein bisschen in die Trickkiste greifen ;-).

[curt]

Ich dachte an ein Attribut für die Dicke/Stärke/Durchmesser des Kreises/Punktes innerhalb Deines Widgets.

Sowas hier

Code: [Auswählen]

.ftui.l99sym      { stroke:#DDA400; stroke-width:8px; fill:none;}

halte ich für mich für gefährlich: Aus meiner Sicht ist das ein Philosophie-Bruch. Und vor allem sehe ich irgendwann nicht mehr durch ... mal hier was zu ändern, mal da was zu ändern, mal dort oder da drüben ...

Ja, das ist eine eher akademische Diskussion.

(Die angehängte Grafik sollte nicht zeigen, dass irgendwas nicht ginge - das sollte im Gegenteil so eine Art Erfolgsmeldung sein: "Schau mal wie schön das jetzt ist.")

[eki]

Für mich wäre gerade das direkte Ändern der Strichstärke im HTML ein Philosophi-Bruch. Aber ich stimme Dir zu, das ist Ansichtssache und eher akademisch.

[sn0000py]

Frage @curt, in dem Bild sieht man das untere chart hat keinen header (Navigation und co),ist da das untere chart mit dem oberen Verknüpft?

Ich würde das auch gerne haben, im oberen Chart Temperaturen und im unteren die Feuchte dazu. (jeweils 4)

[eki]

Ist relativ einfach. Beim unteren Chart die Klasse 'nobuttons' setzen. Und für die Synchronisation bei beiden Charts folgende Settings machen:

data-scrollgroup = "1"
data-cursorgroup = "1"

Setzen.

[sn0000py]

hmmmm, alkso nobuttons und das scrollen und zoomen funktioniert.

Allerdings das data-cursorgroup="1" bewirkt nichts, das solle ja bewirken, das wenn ich oben den Cursor aktiviere auch im unteren Chart den Cursor sehe oder?