Neuer Style: flex. Flexibel für alle Geräte

[Icinger]

Habs grade ausprobiert:
Irgendwo ist noch ein Fehler drinnen:
Bei den anderen Styles werden Devices, welche zwar im selben Raum sind aber nicht in der Columns-List, einfach danach angereiht.
Das ist jetzt bei der neuen Version nicht der Fall (Siehe Screenshot). Oder hab ich wieder irgendwo nen Fehler?
Bild 1 mit

Code Auswählen Erweitern

attr WEB column Erdgeschoß:Temp_WZ,Küche
Bild 2 OHNE column-Attribut

[xanker]

Habs grade ausprobiert:
Irgendwo ist noch ein Fehler drinnen:
Bei den anderen Styles werden Devices, welche zwar im selben Raum sind aber nicht in der Columns-List, einfach danach angereiht.
Das ist jetzt bei der neuen Version nicht der Fall (Siehe Screenshot). Oder hab ich wieder irgendwo nen Fehler?
Bild 1 mit

Code Auswählen Erweitern

attr WEB column Erdgeschoß:Temp_WZ,Küche
Bild 2 OHNE column-Attribut

Das ist schon richtig so, sonst könnte man ja keine Gruppen ausblenden. Du musst das Attribut so definieren:

Code Auswählen Erweitern

attr WEB column Erdgeschoß:Temp_WZ,Küche,.*
also noch ein Regex anhängen welches auf alles matched.

[nuccleon]

Hallo xanker,

von meiner Seite auch erst mal ein dickes Lob für flex!

Einen Anmerkung zurm Thema Logfiles / EventLog. Meiner Ansicht nach sind die Zeilnumbrüche auf kleinen Bildschirmen für die Lesbarkeit von Logs schon sehr hinderlich.
Ich weiß, dass das erklärte Zeil war, horizontales scrollen zu verhindern, hier würde ich mir selbiges aber zürückwünschen (oder gibts andere creative Ideen?)
Gerade bei Logs ist es doch hilfreich, wenn die Zeitstempel untereinander stehen.

Grüße,
Claus

[xanker]

von meiner Seite auch erst mal ein dickes Lob für flex!

Vielen Dank! 

Einen Anmerkung zurm Thema Logfiles / EventLog. Meiner Ansicht nach sind die Zeilnumbrüche auf kleinen Bildschirmen für die Lesbarkeit von Logs schon sehr hinderlich.

Damit war ich auch noch nicht so zufrieden. Ich habe mir nun mal was überlegt und implementiert: Datum und Uhrzeit werden jetzt fett geschrieben und bei einem Zeilenumbruch wird ein Indent hinzugefügt.
Ich finde, dass die Übersichtlichkeit jetzt deutlich besser ist. Falls gewünscht kann ich aber auch noch eine Option hinzufügen, dass die Zeilen nicht umgebrochen werden und der Log/Eventmonitor dann horizontal scrollbar wird.

[nuccleon]

Datum und Uhrzeit werden jetzt fett geschrieben und bei einem Zeilenumbruch wird ein Indent hinzugefügt.

Das ist grundsätzlich eine gute Idee. Auf einem großen Monitor steigt da die Übersichtlichkeit enorm.
Auf dem Smartphone bin ich ehrlich gesagt nicht ganz glücklich.

Falls gewünscht kann ich aber auch noch eine Option hinzufügen, dass die Zeilen nicht umgebrochen werden und der Log/Eventmonitor dann horizontal scrollbar wird.

Ich würde solch eine Option sehr begrüßen 

Mir sind noch so Zwei / Drei Dinge aufgefallen, die noch nicht rund sind (Bitte nicht als mekern, sondern als konstruktive Kritik verstehen)

* Beim Betrachten des Logfiles, sollte 'jump to the end' in einer eigenen Zeile stehen und idealerweise als Link erkennbar sein (s. screenshot)
* Der Eventmonitor scrollt nicht automatisch mit (sehr unschön)
* Der Style bricht die Gruppe HOMEMATIC um obwohl auf dem Bildschirm ausreichend Platz ist (s. screenshot). Absicht?
* Das Raw Input Feld scrollt nicht korrekt horizontal mit. Konkret heißt das: Auf meinem Android Telefon mit installiertem Chrome verschwinden die zuletzt getippten 3 Buchstaben hinter dem rechten Rand. Das Feld scrollt zwar automatisch horizontal, aber 3 Buchtstaben zu wenig. Unter MINT und Firefox 67 funktioniert das korrekt.
* Mit dem Multiline Raw Input Feld geht die Befehlshistory verloren (das ist sehr unschön)
* Mir persönlich ist das im Raw Input Feld viel zu viel geklicke. Ich würde gerne nen Befehl eigeben und mit Enter ausführen und nicht erst Execute clicken müssen (Zeilenumbruch vielleicht mit Shift-Enter???). Auch das Bestätigungs PopUp mit zwingendem Klick auf ok finde ich überflüssig.

Beispiel: Für ein einfaches list muss ich bei dem style 4x klicken!
+: damit RawInput Feld erscheint
Execute: damit list ausgeführt wird
ok: Ausgabe bestätigen
close: RawInput Feld schließen

Im F18 Style ist kein einziger Click notwendig.

Das RawInput Feld ist, so wie es jetzt ist extrem benutzerunfreundlich (ehrlich gesagt würde ich mir das 'alte' wünschen).

Viele Grüße,
Claus

[Icinger]

Beispiel: Für ein einfaches list muss ich bei dem style 4x klicken!
+: damit RawInput Feld erscheint
Execute: damit list ausgeführt wird
ok: Ausgabe bestätigen
close: RawInput Feld schließen

Wozu nimmst du für ein einfaches List denn das Multiine-Input?

Klick doch einfach in die "normale" Kommandozeile (Bei dir "FTK // Uhrzeit")

@xanker:
Dass mit Fett beim Log ist eine tolle Sache. Könntest du die Uhrzeit evtl. auch farblich hervorheben? Evtl. konfigurierbar?
Könntest du in der Device-Übersicht evt. das Attr-Feld zusammen mit den Attributen umbrechen?
In 90% der Fälle hab ich die Attribut-Auflistung in der rechten Spalte, das Eingabefeld dazu aber in der linken.
Ansich kein Beinbruch, ich denke einfach, es wäre übersichtlicher/logischer.

lg, Stefan

[xanker]

Ich würde solch eine Option sehr begrüßen 
...
* Beim Betrachten des Logfiles, sollte 'jump to the end' in einer eigenen Zeile stehen und idealerweise als Link erkennbar sein (s. screenshot)
* Der Eventmonitor scrollt nicht automatisch mit (sehr unschön)
...
* Das Raw Input Feld scrollt nicht korrekt horizontal mit. Konkret heißt das: Auf meinem Android Telefon mit installiertem Chrome verschwinden die zuletzt getippten 3 Buchstaben hinter dem rechten Rand. Das Feld scrollt zwar automatisch horizontal, aber 3 Buchtstaben zu wenig. Unter MINT und Firefox 67 funktioniert das korrekt.

Danke, alles erledigt. Zu ersterem: Standard ist, dass gewrapped wird. Du musst also die Option "enableLogLineWrap" deaktivieren.

(Bitte nicht als mekern, sondern als konstruktive Kritik verstehen)

Absolut nicht. Im Gegenteil, ich bin immer offen für Vorschläge!

* Der Style bricht die Gruppe HOMEMATIC um obwohl auf dem Bildschirm ausreichend Platz ist (s. screenshot). Absicht?

Das sollte eigentlich nicht passieren. Tritt das bei dir auch bei anderen Gruppen auf? Ich kann das Problem nämlich nicht nachstellen.
Edit: Ich habe einen zusätzlich CSS Befehl hinzugefügt, der dies verhindern soll. Je nach Browser werden hierfür nämlich unterschiedliche Befehle verwendet. Ich hoffe das Problem ist damit gelöst

* Mit dem Multiline Raw Input Feld geht die Befehlshistory verloren (das ist sehr unschön)
* Mir persönlich ist das im Raw Input Feld viel zu viel geklicke. Ich würde gerne nen Befehl eigeben und mit Enter ausführen und nicht erst Execute clicken müssen (Zeilenumbruch vielleicht mit Shift-Enter???). Auch das Bestätigungs PopUp mit zwingendem Klick auf ok finde ich überflüssig.
...
Das RawInput Feld ist, so wie es jetzt ist extrem benutzerunfreundlich (ehrlich gesagt würde ich mir das 'alte' wünschen).

Wie von Stefan schon angemerkt, warum nimmst du dafür den Multiline-Input? Du hast wohl übersehen, dass der Header (wo Raumname, Uhrzeit, etc. angezeigt wird) die Commandline ist. Einfach anklicken, Befehl eingeben und ENTER drücken

Dass mit Fett beim Log ist eine tolle Sache. Könntest du die Uhrzeit evtl. auch farblich hervorheben? Evtl. konfigurierbar?

Gute Idee, habe ich implementiert. Es lässt sich jetzt die Farbe von Datum, Uhrzeit und zusätzlich von jedem Verbose Level definieren.

Könntest du in der Device-Übersicht evt. das Attr-Feld zusammen mit den Attributen umbrechen?
In 90% der Fälle hab ich die Attribut-Auflistung in der rechten Spalte, das Eingabefeld dazu aber in der linken.
Ansich kein Beinbruch, ich denke einfach, es wäre übersichtlicher/logischer.

Ja, das will ich eigentlich auch. Es gibt nur das Problem, dass die dafür zuständigen CSS Befehle (-webkit-column-break-after, page-break-after, break-after) alle nicht funktionieren. Mal schauen ob ich das noch irgendwie hinbekommen. Ich könnte das zwar per Javascript lösen, aber das wäre wieder nur rumgepfusche.

[Icinger]

Code Auswählen Erweitern

Gute Idee, habe ich implementiert. Es lässt sich jetzt die Farbe von Datum, Uhrzeit und zusätzlich von jedem Verbose Level definieren.

Echt super Sache

Kleiner Schönheitsvorschlag: Die RegEx fürs Datum dürfte zu locker sein. Es werden auch die ersten drei Octette einer IP eingefärbt

lg, Stefan

[xanker]

Kleiner Schönheitsvorschlag: Die RegEx fürs Datum dürfte zu locker sein. Es werden auch die ersten drei Octette einer IP eingefärbt

da ist was dran 
Habe es gefixed, matched jetzt nur noch auf ein gültiges Datum/Uhrzeit

[nuccleon]

Danke, alles erledigt. Zu ersterem: Standard ist, dass gewrapped wird. Du musst also die Option "enableLogLineWrap" deaktivieren.

Super danke! Funktioniert

Wie von Stefan schon angemerkt, warum nimmst du dafür den Multiline-Input? Du hast wohl übersehen, dass der Header (wo Raumname, Uhrzeit, etc. angezeigt wird) die Commandline ist. Einfach anklicken, Befehl eingeben und ENTER drücken

Hab ich tatsächlich übersehen dass sich hinter dem Datum noch ein Eingabefeld verbirgt 

Das sollte eigentlich nicht passieren. Tritt das bei dir auch bei anderen Gruppen auf? Ich kann das Problem nämlich nicht nachstellen.

Ich hab es tatsächlich nur bei dieser Gruppe beobachtet. Mit Chrome tritt das Problem nicht auf. Sehe es nur bei Firefox. Firefox meckert auch eine ungültige CSS Eigenschaft an. (s. screenshot)

Das multiline RawInput ist jetzt auf smartphone allerdings kaputt (s. screenshot)

[xanker]

Hab ich tatsächlich übersehen dass sich hinter dem Datum noch ein Eingabefeld verbirgt 

Kann ja passieren 

Ich hab es tatsächlich nur bei dieser Gruppe beobachtet. Mit Chrome tritt das Problem nicht auf. Sehe es nur bei Firefox. Firefox meckert auch eine ungültige CSS Eigenschaft an. (s. screenshot)

letzteres ist schon richtig, da Firefox kein webkit browser ist, somit ignoriert er das einfach. Eigenartig ist nur, dass es nur bei einer Tabelle nicht funktioniert 
Ich werde mir das aber eh nochmal genauer anschauen müssen, da Firefox sich mit den "columns" eh etwas komisch verhält. Zudem gibt es auch (bei allen Browsern) Probleme mit page-break-after etc. (siehe meine Antwort auf Stefans Frage).

Das multiline RawInput ist jetzt auf smartphone allerdings kaputt (s. screenshot)

Hatte kurz bevor du geschrieben hast, das Problem selbst bemerkt, sollte jetzt schon gefixed sein.

[nuccleon]

Mit dem letzten Update schreibt mir FHEMWEB jetzt das Logfile voll mit folgender Meldung:

Code Auswählen Erweitern


2019.07.13 20:01:42 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:43 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:43 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:44 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:44 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:45 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:45 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:46 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:46 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:47 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:47 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:48 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:48 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:49 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:49 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:50 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:50 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:51 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:51 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:52 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:52 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:53 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:53 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.
2019.07.13 20:01:54 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.


Setz doch mal im Eventlog den Hacken bei 'FHEM log'.

• Zeilen werden umgebrochen bei den Logfile Einträgen und bei echten Events nicht
• Fettschrift funktioniert nicht für die Logfile Einträge
• Mit deinem regex passt was noch nicht (der sollte nach dem ersten Datum / Uhrzeit Match nicht nochmal matchen: 2019-07-13 20:07:34 at at_MQTT2_espeasy_dht_k3.connected Next: 20:07:36

Edit files:
Der Editor hat auch noch ein Problem in Firefox (Chrome geht) (s. screenshot)

[xanker]

Mit dem letzten Update schreibt mir FHEMWEB jetzt das Logfile voll mit folgender Meldung:

Code Auswählen Erweitern


2019.07.13 20:01:42 3: FHEMWEB WEBFLEX CSRF error: csrf_472612150558404 ne csrf_386426747542299 for client WEBFLEX_192.168.178.2_49357 / command {time()}. For details see the csrfToken FHEMWEB attribute.


Kann nicht am update liegen. Hast du irgendwo noch ein (alten) Browser Tab offen, mit ungültigem CSRF Token? Die Logs treten auf, da die Uhrzeit mit dem Rechner auf dem Fhem läuft synchronisiert wird. Ich muss wohl den Timeout etwas anpassen wenn er das Command nicht ausführen kann, bzw. ein Fallback auf die lokale Zeit einbauen...werde ich gleich machen.

Setz doch mal im Eventlog den Hacken bei 'FHEM log'.

• Zeilen werden umgebrochen bei den Logfile Einträgen und bei echten Events nicht
• Fettschrift funktioniert nicht für die Logfile Einträge
• Mit deinem regex passt was noch nicht (der sollte nach dem ersten Datum / Uhrzeit Match nicht nochmal matchen: 2019-07-13 20:07:34 at at_MQTT2_espeasy_dht_k3.connected Next: 20:07:36

Danke, das werde ich auch gleich fixen. Habe mir bisher noch nie die Logeinträge im Eventmonitor angeschaut  Die werden nicht als reiner Text, sondern noch zusätzlich in einem <div> gewrapped...Zudem wird Tag/Monat/Jahr mit "." im Log und mit "-" im Eventmonitor getrennt. Wie leider so häufig: inkonsistent.


Edit: ist nun alles gefixed.

[choetzu]

Im Stundentakt verbessert sich der Style Flex.. Ich bin begeistert... Doch, leider nimmt es mir die Farbwahl nicht ab. Soll ich eher dunkel, hell, etc...?? Ist wie beim Schuhekaufen mit der Frau..

Kleinigkeiten:
- Bei der Eingabe von Befehlen, erscheint ein vertikaler Balken in einer anderen Farbe. In welcher?
- Ich habe nun auf 0.8 scaliert (scalePage). Alles tiptop, bis auf die Dropdowns, die sind enorm klein für meine Augen. Geht das Euch auch so?
- enableLogLineWrap: Das funktioniert auch gut. Doch ich habe ein cmdalias das die letzten Loglines anzeigt (siehe Code). Ist es möglich, dass enableLogLineWrap auch hier greift?

Ganz anderes: ist es eigentlich generell möglich im Menu Gruppen zu ordnen? Nun kommt als erstes "Tablet Ui", dann die Räume, dann Logfile/Commandref&Co und dann die CMDALias oder andere Links... Ich finde nichts passendes dazu. Wenn nicht, dann evtl. in deinem Style machbar? Heisst ja flex

Danke.. Lg C

CMDAlias

Code Auswählen Erweitern

Internals:
   ALIAS      logs
   DEF        logs .* AS {qx(tail -n $EVENT $currlogfile)}
   FUUID      5c4f09cf-f33f-8001-8fc1-2564c985652c2bbe
   NAME       c_lastloglines
   NEWCMD     {qx(tail -n $EVENT $currlogfile)}
   NR         286
   PARAM      .*
   STATE      defined
   TYPE       cmdalias
Attributes:
   comment    Zeigt die letzten Zeilen aus dem FHEM Logfile an. Mit dem Aufruf\ lastloglines 10
   group      Kommando
   room       10_System->Kommando

[nuccleon]

Edit: ist nun alles gefixed.

Super Einsatz xanker, Danke!
Aaaber kuck dir mal den screenshot an.

Links ist Firefox, rechts Chrome.
Firefox: keine Fettschrift der Zeitstempel und Zeilenumbruch.
Chrome: Fettschrift funktioniert, aber die Zeile wird trotz deaktierter Option umgebrochen

Eine Sache noch die ich im F18 sehr praktisch finde. Die History im command Feld. Kannst du die auch für flex reaktivieren?