[Frage] Tablet UI Formatierung

[B.Stromberg]

Hallo!
Bin hier am verzweifeln.
Ich habe ein Userreading von meinem Mähroboter. Die Ausgabe sieht in FHEM gut aus. Allerdings in der Tablet UI sieht es aus, als wäre die class auf center festgemeißelt. Egal ob ich diese auf left oder right setze, die Ausgabe erfolgt immer zentriert.
Ich hätte die Ausgabe sehr gern links in Blöcken.
Wo ist mein Denkfehler?
Achja, wie bekomme ich bei der Ausgabe "RobbyStatus" weg? Ich benötige nur die Uhrzeit und den eigentlichen Event.

Hier die cfg:

fhem.cfg:

Code Auswählen Erweitern


define Robby Robonect 192.168.2.55
setuuid Robby 5c7d6315-f33f-0855-eb2d-466bac51dcc3aafa
attr Robby alias Robby
attr Robby basicAuth guano:passpass
attr Robby icon scene_robo_lawnmower
attr Robby pollInterval 121
attr Robby room Robonect
attr Robby stateFormat { ReadingsVal("Robby","state",0).sprintf(" | %.0f"." %", ReadingsVal("Robby","allgemein-batteriezustand",0)).sprintf(" | %.0f"." %", ReadingsVal("Robby","wlan-signal-prozent",0)) }
attr Robby timestamp-on-change-reading 1
attr Robby useHealth 1
attr Robby userReadings Maehzeiten { `awk -F_ '{print \$2}'  $defs{FileLog_RobbyStatus}{currentlogfile}` }
attr Robby verbose 3
attr Robby webCmd auto:start:stop:home:feierabend
define FileLog_RobbyStatus FileLog ./log/RobbyStatus-%Y-%m-%d.log RobbyStatus
setuuid FileLog_RobbyStatus 5cabea77-f33f-0855-beae-9f0ebfc3bc9eb33f
attr FileLog_RobbyStatus logtype text
attr FileLog_RobbyStatus nrarchive 3
attr FileLog_RobbyStatus room Robonect
define RobbyStatus dummy
setuuid RobbyStatus 5c7d6315-f33f-0855-77b3-0d469c877bfcf546
attr RobbyStatus event-on-change-reading state
define StatusAnDummy at +*00:01:00 { my $d= ReadingsVal("Robby","state",0);; fhem("set RobbyStatus $d")}
setuuid StatusAnDummy 5c7d6315-f33f-0855-22d9-0fe991a9f624c4a0


index.html von FTUI:

Code Auswählen Erweitern


<li class="halbTransparent" data-row="7" data-col="4" data-sizex="5" data-sizey="15">
<header><div data-type="label" class="medium orange">Robonect</div></header>
<table width="100%" class="">
<tr><td><div class="inline small left">Status</div></td><td><div data-type="label" data-device="Robby" data-get="state" class="right"></div></td></tr>
<tr><td><div class="inline small left">Akku</div></td><td><div data-type="label" data-device="Robby" data-get="allgemein-batteriezustand" data-unit="%" class="right"></div></td></tr>
<tr><td><div class="inline small left">Wlan</div></td><td><div data-type="label" data-device="Robby" data-get="wlan-signal-prozent" data-unit="%" class="right"></div></td></tr>
<tr><td><div class="inline small left">Mähen</div></td><td><div data-type="label" data-device="Robby" data-get="timer-startdatum" class="right"></div></td></tr>
<tr><td><div class="inline small left">Uhrzeit</div></td><td><div data-type="label" data-device="Robby" data-get="timer-startzeit" data-unit="Uhr" class="right"></div></td></tr>
<tr><td><div class="inline small left">Betriebsstunden</div></td><td><div data-type="label" data-device="Robby" data-get="allgemein-betriebsstunden" data-unit="h" class="right"></div></td></tr>
</table>
<div data-type="label" data-device="Robby" data-get="Maehzeiten" class=""></div>
</li>


hier noch der Inhalt vom Filelog:

2019-04-14_00:27:04 RobbyStatus parken
2019-04-14_00:29:04 RobbyStatus schlafen
2019-04-14_00:37:04 RobbyStatus parken
2019-04-14_00:39:04 RobbyStatus schlafen
2019-04-14_04:37:04 RobbyStatus parken
2019-04-14_04:39:04 RobbyStatus schlafen
2019-04-14_07:47:06 RobbyStatus parken
2019-04-14_07:49:04 RobbyStatus schlafen
2019-04-14_11:07:04 RobbyStatus parken
2019-04-14_11:10:04 RobbyStatus schlafen
2019-04-14_11:18:04 RobbyStatus parken
2019-04-14_11:20:04 RobbyStatus schlafen
2019-04-14_16:04:04 RobbyStatus parken
2019-04-14_16:06:04 RobbyStatus schlafen
2019-04-14_20:14:04 RobbyStatus parken
2019-04-14_20:16:04 RobbyStatus schlafen

Kann mir bitte jemand helfen?

[OdfFhem]

Hallo,

zunächst einmal kann ich Dein Problem mit der Formatierung nachvollziehen, da Du ja keine class-Angabe im entsprechenden label-Widget gemacht hast  . Standardmäßig wird beim label-Widget wohl mittig ausgerichtet; gibt man die entsprechende class (in meinem Fall left-align bzw. right-align) an, wird das Label erwartungsgemäß links bzw. rechts ausgerichtet.

Desweiteren gibt es ein filelog-Widget (s. https://forum.fhem.de/index.php/topic,63759.msg917282.html#msg917282), mit dem man Logdaten recht einfach ins FTUI integrieren kann. Mit den richtigen Attribut-Einstellungen sollte damit auch das Entfernen von "RobbyStatus" funktionieren ...

[B.Stromberg]

Hallo,

zunächst einmal kann ich Dein Problem mit der Formatierung nachvollziehen, da Du ja keine class-Angabe im entsprechenden label-Widget gemacht hast  . Standardmäßig wird beim label-Widget wohl mittig ausgerichtet; gibt man die entsprechende class (in meinem Fall left-align bzw. right-align) an, wird das Label erwartungsgemäß links bzw. rechts ausgerichtet.

Oh super, danke für den Tipp...
left-align war es also.... weil ein left allein nicht gereicht hat


Okay, mit data-substitution scheint das zu gehen....
Nur
"lösche" ich damit RobbyStatus, habe ich mehrere Events in einer Reihe und alles ist durcheinander.... Ein Teufelskreis

Die Sache mit dem Widget scheint sehr komplex zu sein, bin in der Materie echt ein Noob.

Hast du für mich einen anderen Tipp, wie ich noch das RobbyStatus wegbekommen kann und jeder Event in einer neuen Reihe steht?

[OdfFhem]

Das mit dem Widget ist gar nicht so schwer. Du musst eigentlich nur folgende Schritte ausführen:

• Die widget_filelog.js-Datei aus dem weiter oben verlinkten Beitrag herunterladen
• Die heruntergeladene Datei ins js-Verzeichnis kopieren und die dort bereits vorhandene Datei gleichen Namens überschreiben. Das js-Verzeichnis befindet sich unterhalb vom www/tablet-Verzeichnis
• Den unten stehenden div-Tag in Deine HTML-Datei kopieren und anpassen; die aktuell angegebene data-substitution filtert Datum und RobbyStatus heraus.
• Anschließend solltest Du - gemäß Deinen Attribut-Einstellungen - die aktuellsten Logeinträge im FTUI sehen

Code Auswählen Erweitern


      <div data-type="filelog" data-device="FileLog_RobbyStatus"
                               data-max-items="20"
                               data-ago="10"
                               data-newest-first="1"
                               data-substitution="s/(^.{4}-.{2}-.{2}_|RobbyStatus)//g"
                               data-height="450px"
                               data-width="750px"
                               data-disable-update-event="0"
                               data-refresh-btn="0"
                               class="left-align bold darker truncate blue"></div>


[B.Stromberg]

Das mit dem Widget ist gar nicht so schwer. Du musst eigentlich nur folgende Schritte ausführen:

OKAY

Kommando von eben zurück, bekomme nun zumindest den letzten Event angezeigt.......aber nicht die davor........
Muss ich wohl noch ein wenig lesen

EDIT:

Okay, das liegt am data-ago.....

Finde da leider nichts in der Command Ref....
Gibt es da eine Option, dass er immer den kompletten Filelog nimmt ? Aktueller Tag wäre ja unnötig, da es eh immer ein neuer Log je Tag ist. 24*60=1440 wäre ja auch zu einfach.... Da zeigt er gar keine Events mehr an...

EDIT2:
Leider hat bei dem Widget die class mit left oder right allign keine Wirkung....
Guckst du unten:

EDIT3:
Um 0 Uhr wird auch nicht auf das neue Logfile gewechselt...

Alles wohl doch etwas komplexer als gedacht

[OdfFhem]

@B.Stromberg

zu EDIT: Es sieht so aus, dass vom Logdevice immer nur Daten aus einer Logdatei zurückgegeben werden können.

Dies sorgt dafür, dass in Deinem Fall bei täglichen Logdateien entweder Daten von gestern oder Daten von heute dargestellt werden können - beides geht  nicht.

• data-ago=1440 (entspricht [jetzt - 24 Stunden]) führt dazu, dass eigentlich nie Daten von heute zurückgegeben werden - ganztägig liegt der Startzeitpunkt in der Logdatei vom vorherigen Tag
• data-ago=360 (entspricht [jetzt - 6 Stunden]) führt dazu, dass erst ab 06:00 Daten vom heutigen Tag zurückgegeben werden - vor 06:00 liegt der Startzeitpunkt in der Logdatei vom vorherigen Tag

Um den aktuellen Tag - sollte immer nur eine Logdatei sein - und nicht die letzten 24 Stunden - kann mehr als eine Logdatei sein - sehen zu können, habe ich eine neue Option "today" für data-ago ins Widget integriert.
Das Einspielen der (temporär) angehängten widget_filelog.js-Datei und die Verwendung der untenstehenden Attribut-Einstellung (nur heutige Daten und zwar alle) sollte dieses Problem lösen.

Code Auswählen Erweitern


data-ago="today"
data-max-items="-1"


zu EDIT2:
konnte ich nachvollziehen, aber mangels Zeit bislang noch nicht prüfen ...


zu EDIT3:

In der Definition des Filelog-Devices muss das Attribut eventOnThreshold auf "1" gesetzt werden, damit bei einer Änderung ein linesInTheFile-Event für das Widget ausgelöst wird.

[B.Stromberg]

Hallo und vielen Dank, dass du dich weiterhin mit meinen Problemen auseinandersetzt!

Hier nun der aktuelle Stand:
Betreffender Code aus index.html

Code Auswählen Erweitern


<div data-type="filelog" data-device="FileLog_RobbyStatus" data-max-items="-1" data-ago="today" data-newest-first="1" class="left-align" data-substitution="s/(^.{4}-.{2}-.{2}_|RobbyStatus)//g" data-height="450px" data-width="750px" data-disable-update-event="0" data-refresh-btn="0"></div>


Und hier der Code vom Filelog aus der fhem.cfg

Code Auswählen Erweitern


define FileLog_RobbyStatus FileLog ./log/RobbyStatus-%Y-%m-%d.log RobbyStatus
setuuid FileLog_RobbyStatus 5cabea77-f33f-0855-beae-9f0ebfc3bc9eb33f
attr FileLog_RobbyStatus eventOnThreshold 1
attr FileLog_RobbyStatus logtype text
attr FileLog_RobbyStatus nrarchive 3
attr FileLog_RobbyStatus room Robonect
define RobbyStatus dummy
setuuid RobbyStatus 5c7d6315-f33f-0855-77b3-0d469c877bfcf546
attr RobbyStatus event-on-change-reading state


Was mir noch aufgefallen ist, dass Events nicht zur Tablet UI gepushed werden.... Fehlt da nicht eigentlich ein eventonchange anstelle des eventonthreshold ?

Drücke ich F5 in Chrome wird aktualisiert.... Vorher nicht.

Nur um Fehler bezüglich meiner Tablet UI auszuschließen. Robonect ist dort nur ein Bestandteil, die anderen pushen, sollte eine Änderung stattfinden. Liegt also definitiv an der Auswertung.

[OdfFhem]

Die commandref sagt zum Attribut eventOnThreshold

Falls es auf eine (nicht Null-) Zahl gesetzt ist, dann wird das linesInTheFile-Event generiert, falls die Anzahl der Zeilen in der Datei ein Mehrfaches der gesetzen Zahl ist.

Dieses linesInTheFile-Event wird vom filelog-widget abonniert und die Anzeige dann beim Auftreten eines solchen Events aktualisiert.

Deine Einstellungen stimmen - soweit ich das auf den ersten Blick sehe - mit meinen überein. Ich verwende das filelog-widget an verschiedenen Stellen und die Aktualisierung funktioniert automatisch - F5 drücken ist normalerweise nicht notwendig.

[OdfFhem]

@B.Stromberg

zu EDIT2: Mittlerweile hatte ich Gelegenheit, das unerwartete Verhalten zu prüfen. Herausgekommen ist, dass in der ursprünglichen widget-Fassung wohl zu viel von einem anderen widget kopiert wurde. Dadurch ist die css-Klasse events (fix vordefiniert mit u.a. linksbündig und 20px Einrückung) auch Bestandteil vom filelog-widget geworden.

Ich habe widget_filelog.js noch einmal überarbeitet und (temporär) hier angehangen. Damit sollte Dein Formatierungsvorhaben umsetzbar sein ...


P.S.: Kannst Du bitte noch diesen Thread von Anfängerfragen in Frontends | TabletUI verschieben?

[B.Stromberg]

@OdfFhem

Super!
Und vielen, vielen Dank das du mir geholfen hast.

Die Geschichte mit dem Aktualisieren hatte sich irgendwie den nächsten Tag eingespielt, das Widget läuft nun so, wie ich mir das vorgestellt habe
Auch die Formatierung ist nun links.

Wünsche dir ein schönes Osterfest!