[FHEM Tablet-UI] Dokumentation (Diskussionsthread)

[eki]

Endlich ist im Chart-Widget auch LogProxy enthalten (wenn auch rudimentär) und ein Beispiel für die Wettervorhersage mit Proplanta: https://wiki.fhem.de/wiki/FTUI_Widget_Chart#7-Tage-Wettervorhersage_mit_Proplanta

Ist echt nicht einfach, wenn man alle 3 (Chart, LogProxy & Proplanta) bisher kaum, oder noch nie benutzt hat.

Am meisten Zeit hat mich das hier gekostet:

Code Auswählen Erweitern

"ConstX:(split/\\s/,FmtDateTime(time+86400*2))[0].\\x22_00:00:00\\x22,0,100",

^^ein Eintrag in der columnspec, der <morgen> um 0:00 Uhr eine senkrechte Linie hinzufügt, um die Tage besser voneinander abzugrenzen.

Vielen Dank erst mal für Deine Erklärungen zum Chart Widget. Das stand bei mir schon lange auf der Liste, bin aber bisher nicht dazu gekommen. Ich schau mal ob und was ich da noch ergänzen kann, ich habe inzwischen noch eine ganze Menge Lösungen aus diversen Threads, die man da ja auch zusammenfassen kann. Ich muss zugeben, dass die vielen Möglichkeiten, die ich inzwischen in das Widget eingebaut habe, manchmal ganz schön schwer zu bedienen sind  . Hier mal ein Beispiel, weil Du ja auch zum Thema Proplanta geschrieben hast.

Noch ne Frage bezüglich "rudimentär": Was genau fehlt denn bei logProxy?

[Thyraz]

Das mit dem Chart Widget ist super geworden.

Was mir noch unklar ist: Was muss ich bei den CSS Klassen setzen?
z.B. chart-background um einen einfarbigen Hintergrund zu bekommen?

Wäre an sich noch interessant die jeweiligen Paramter dazuzuschreiben.
Also z.B. ob es fill, color oder background-color ist

[Leeloo_Dallas]

Mann, Mann, Mann,..... Hut ab !!!!!
Das sieht super aus.

[eki]

Das mit dem Chart Widget ist super geworden.

Was mir noch unklar ist: Was muss ich bei den CSS Klassen setzen?
z.B. chart-background um einen einfarbigen Hintergrund zu bekommen?

Wäre an sich noch interessant die jeweiligen Paramter dazuzuschreiben.
Also z.B. ob es fill, color oder background-color ist

Es kann eigentlich alles gesetzt werden was css so hergibt (und hier noch mal html und css zu erklären macht wenig Sinn  ). Ob das dann wirklich einen Einfluss hat, hängt eben vom Zeichenobjekt selbst ab. Also wenn Du z.B. beim chart-background irgend etwas am Font änderst, z.B. die font-size, wirst Du nichts sehen, weil zu dem Hintergrund kein Text gehört, sondern eben nur die Fläche (letztlich ein gemaltes Rechteck) das den Hintergrund darstellt.
Zu Deiner konkreten Frage: Wenn Du den Hintergrund einfarbig und nicht gefüllt haben willst, must Du statt:

Code Auswählen Erweitern

fill:url(#gr_bgftui);
z.B.

Code Auswählen Erweitern

fill: red
setzen. In der urspünglichen Version wird der Hintergrund mit einem Verlauf gefüllt, der im Chart definiert ist, im zweiten Fall eben einfarbig mit rot. Die Farbe kann entweder durch einen für css bekannten Namen angegeben werden (red, green, ...) oder als RGB (z.B. '#AACCAA', also 3 als Hex angegebene Werte zwischen 0 und 256 für die Farbanteile rot grün und blau). Welche Parameter es gibt musst Du in den einschlägigen HTML bzw. CSS Beschreibungen nachschauen. Z.B. unter https://www.w3schools.com/css/ aber da hilft Google prima weiter  .

[Thyraz]

Das ist mir schon klar, mir ging es genau um das was du jetzt geschrieben hast:
Das Detailwissen was Charts Widget intern verwendet.

In diesem Fall eben fill.

Das ist ja durchaus was, dass sich im Wiki gut machen würde.
Denn ansonsten bekomme ich das nur raus wenn ich den Sourcecode des Widgets anschaue,
oder wenn ich mich z.B. mit Chrome Developer Tools durch die Seitenelemente klicke.

[eki]

OK, dann müsste man am besten beschreiben, aus welchen Primitiv-HTML Elementen das chart aufgebaut ist. Das könnte dann wohl am besten ich, der das Ding verbrochen hat 

[Thyraz]

Bevor du da ne Doktorarbeit darüber verfasst:

Mir ging es nur um die Klassen, welche in der Wiki beschrieben sind unter dem Punkt:
Folgende Widget-spezifsche Klassen können zusätzlich in einer eigenen CSS-Datei definiert werden

Größe kann man ja erstmal ignorieren, da man da evtl. wirklich besser mit den Chrome Entwicklertools schaut was da wirklich alles drauf einwirkt.
Schriftart und -größe ist ja auch einfach, hier gibt es ja nicht viele Alternativen bei CSS.

Nur bei den Farben gäbe es eben unterschiedliche Möglichkeiten.

[Ulm32b]

Naja damit war ja auch eher die bisherige Darstellung des Departure Widget gemeint, das sieht halt aus wie ein Bushaltestellenschild.

Ich brauche es nicht extra, nur wenn es andere haben wollrn zusammen mit dem Modul.

Gruß Constantin

Gesendet von meinem ONEPLUS A3003 mit Tapatalk

Wir befinden uns hier im Doku-Thread. Es wäre doch schön, wenn die in den Diskussionsbeiträgen angedeuteten Möglichkeiten von Departure_98 (z.B. Filterung, Ausgabe über Label etc.) in einer Anleitung mit einem durchgängigen Beispiel einschl. HTML-Code zusammengefasst dokumentiert werden. Im Wiki könnte das unter dem Titel FTUI_Beispiel_xxx laufen. Alternativ, vielleicht sogar besser könnte das Wiki zu Departure_98 aufgebohrt werden. Das würde dann sicher manchen ins Boot holen.

P.S. Gibt es Neuigkeiten im VRS-Topic?

[Thyraz]

Bevor du da ne Doktorarbeit darüber verfasst:

Mir ging es nur um die Klassen, welche in der Wiki beschrieben sind unter dem Punkt:
Folgende Widget-spezifsche Klassen können zusätzlich in einer eigenen CSS-Datei definiert werden

Größe kann man ja erstmal ignorieren, da man da evtl. wirklich besser mit den Chrome Entwicklertools schaut was da wirklich alles drauf einwirkt.
Schriftart und -größe ist ja auch einfach, hier gibt es ja nicht viele Alternativen bei CSS.

Nur bei den Farben gäbe es eben unterschiedliche Möglichkeiten.

Es ist sogar noch einfacher.

Weiter unten im Wikieintrag wird auf css/ftui_chart.css hingewiesen wegen den Linien-Styles.
Dort finden sich ja auch die ganzen Vorgaben für die CSS Klassen wie ich eben gesehen habe.

Wenn man nun oben auch darauf hinweist, dass sich in dieser Datei die Default-Werte dieser Klassen finden,
dürfte damit jeder zurecht kommen.

[Standarduser]

OK, dann müsste man am besten beschreiben, aus welchen Primitiv-HTML Elementen das chart aufgebaut ist. Das könnte dann wohl am besten ich, der das Ding verbrochen hat 

Ach du hast das Chart-Widget verbrochen? Sehr geile Arbeit [emoji16][emoji1303]

Mich würde mal interessieren, wie du die Icons da rein bekommen hast. Das wollte ich eigentlich mal angehen und hab im Forum nach einem Beispiel dafür gesucht. Aber da du das ja offensichtlich schon hast, wäre ich dir für deinen Code oder eine entsprechende Ergänzung im Wiki echt sehr dankbar.

Hast du eigentlich auch das Highchart gemacht? Da habe ich gestern mal die ganzen Plot-Styles ausprobiert, und manche sehen echt sehr interessant aus. Vor allem das Pie-Chart ist sicher für viele interessant, die den Anteil an selbst erzeugter Energie im Verhältnis zum Gesamtenergieverbrauch anzeigen wollen.

[eki]

Mit Highchart habe ich nichts zu tun. Das ist eine externe library (hinter der wahrscheinlich etwas mehr Manpower steckt) die letzendlich nur über das highchart Widget ins FTUI eingebunden wird.

Wenn Du mal Deine "Use Cases" genauer beschreibst (also welche FHEM Daten willst Du wie darstellen) kann ich mal schauen, was noch ins Chart Widget reingebaut werden kann.

Das mit den Icons sprengt wahrscheinlich den Rahmen dieses Threads, schreib mir da mal eine private Nachricht offline und erkläre was Du genau machen willst, dann kann ich evtl. helfen.

[drhirn]

So, habe noch die letzten Widgets der Startseite übernommen (Pagetab, Popup und Circlemenu).

Jetzt sind nur noch Medialist, Classchanger, Eventmonitor und "3rd Party Widgets" offen, wenn ich das richtig sehe.

[SirMarco]

Cool Pagetab.... oder lieber Pagebutton? 

Was soll ich nur nehmen?

[All-Ex]

Oder vielleicht Link? So hat es setstate in diesem Beispiel gebaut: https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil/index_nav_fixed_mobil.html

In dem Beispiel gibt es im Link Widget auch die Klassen "default" und "nocache", die fehlen im Wiki (und round und square geben dort eine Fehlermeldung)...

Was sind die Unterschiede einer Menü-Implementierung mit pagebutton, pagetab oder link?

[drhirn]

In dem Beispiel gibt es im Link Widget auch die Klassen "default" und "nocache", die fehlen im Wiki (und round und square geben dort eine Fehlermeldung)...

Ist ergänzt/korrigiert.