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

Begonnen von xanker, 24 Juni 2019, 20:28:37

Vorheriges Thema - Nächstes Thema

binford6000

Zitat von: Maui am 24 August 2019, 22:52:14
Moin Sebastian,

Ich hab noch ein Problem mit codemirror und flex.
Aber nur in Kombi mit brave.
Wenn ich in codemirror bin, bekomme ich beim klicken in den Code immer folgende FM:

codemirror.js line 106:
Uncaught TypeError: Cannot set property 'viewChanged' of null

Gruß
Maui

Ah noch einer mit codemirror-Problemen...
Aber was ist "brave"?  ::)

VG Sebastian

Maui


binford6000

#572
Zitat von: Maui am 26 August 2019, 12:15:08
https://brave.com/
Ah danke, wieder was gelernt  ;)
VG Sebastian


Gesendet von iPhone mit Tapatalk

eisenhauer1987

#573
Hi

ich mit der neusten Version ein Problem mit Weblinks. Im Raum werden sie nur noch sehr klein und nicht mehr wie im Device angegeben auf 100% Breite ausgegeben. Ist das Problem schon bekannt? Hier ein List:

Internals:
   DEF        iframe http://192.168.xxxxxxxx
   FUUID      5d39544d-f33f-899f-ca81-4bf08fca03c1db89
   FVERSION   98_weblink.pm:0.162930/2018-02-28
   LINK       http://192.168.xxxxxxxx
   NAME       HWR.Serverschrank.USV.Grafana
   NR         60
   STATE      initialized
   TYPE       weblink
   WLTYPE     iframe
Attributes:
   DbLogExclude .*
   group      USV.Cyberpower
   htmlattr   width="100%" height="300" frameborder="0"
   room       Funktion - Energie,Gerät - CyperpowerUSV,Raum - HWR

FunkOdyssey

Zitat von: FunkOdyssey am 21 August 2019, 17:56:55
Ich greife bei einer FHEM-Installation ohne Reverse Proxy direkt auf FHEMWEB zu und es erscheint sporadisch folgender Fehler in einer DialogBox:

line 0:
Script error.


@xanker: Hast du da eine Idee?

Dies resultiert wohl aus dem FHEMWEB-Attribut: longpoll=1.
Ich habe auf websocket umgestellt und dann war der Fehler weg.

Maui

Moin, hab grad festgestellt, dass der Fehler bei codemirror auch mit chrome auftritt. Bei Firefox geht es problemlos.

Gruss
Maui

FunkOdyssey

Dann könnte das auch an longpoll/websocket liegen, oder?

Maui


xanker

Hallo zusammen,

ist schon eine Weile her, dass ich mich gemeldet habe. Ich war u.A. im Urlaub und habe noch andere Projekte laufen :)
Hier nun mal ein paar Antworten auf die aufgelaufenen Fragen/Probleme:


Zitat von: Invers am 20 August 2019, 15:50:54
Ich verwende einen Date –Time - Picker aus dem DOIF-Labor. Hier ist leider die Darstellung nicht so, wie in anderen Styles. Ich habe mal zum Vergleich Bild 4 (f18) und Bild 1 (Flex) angehängt. Die Schaltflächen sind nicht mehr lesbar und die Anordnung der Widgets untereinander ist in dieser Form auch nicht wirklich schön. Kann ich da etwas einstellen? Die Anordnung, wie in Bild 2 dargestellt, würde mir schon zusagen, aber dafür muss ich das gesamte Browserfenster verkleinern. Das geht natürlich nicht.
Das liegt daran, dass Geräte-Gruppen nicht mehr als Tabelle, sondern als Flex-Container behandelt werden. Vorteil: Zellen (in dem Fall Webcmds) können in eine neue Zeile umbrechen, was für eine mobile Nutzung unabdingbar ist. Das von dir beschriebene Verhalten lässt sich entsprechend nicht ändern. Lösungsvorschläge: Entweder das Mehrspalten-Layout auf "single" setzen, dadurch sollte in der Breite genug Platz sein, sodass der Date/Time Picker nicht umbricht. Alternativ, Mehrspalten-Layout auf custom setzen und so viele Spalten nutzen, dass die Date/Time Picker dann untereinandersind.

Zitat von: Invers am 20 August 2019, 15:50:54
Codeanzeigen (Bild 3) sind leider viel kleiner dargestellt, als der Rest aller Texte. Beim Eventmonitor ist die Textgröße normal. Im Log ist sie ebenfalls zu klein. Da ich schlecht sehen kann, ist das für mich nicht optimal. Kann ich die Textgröße des Codes irgendwie einstellen?
Das lässt sich über "Zusätzlicher CSS Code" definieren. Dort folgendes eintragen/hinzufügen:
pre, pre *, .CodeMirror span, div.CodeMirror-linenumber, div[id*="-history"], div[id*="-history"] a { font-size: 1.1em }
wobei die Größe entsprechend angepasst werden kann (Standard: 1em)

Zitat von: Invers am 20 August 2019, 15:50:54
Ich würde gerne die im Bild 4 gezeigte Uhr weiterhin verwenden. Leider liegt bei Flex nun das Menü darüber. Mit welchem Trick oder mit welcher Einstellung lässt sich das verhindern?
Eine Uhr bzw. ein Logo habe ich dem Style nicht vorgesehen, da es das Menü mMn. unnötig nach unten verschiebt. Es wird ja aber die Uhrzeit im Header angezeigt, warum also noch eine Analoguhr?

Zitat von: Invers am 20 August 2019, 15:50:54
Readingsgroups in f18 (Bild 6) sehen anders aus, als in Flex (Bild 7), wo leider die gewollte Optik zerstört wird. Die Option zweispaltig scheint hier ignoriert zu werden. Kann man da eine Zwangsbreite angeben? Wenn 2spaltig dargestellt wird, sollten doch eigentlich die RGs nicht auseinandergezogen werden; sondern ebenfalls die Spaltenbreite behalten?
Das liegt daran dass alle Gruppen/Tabellen auf die gleiche Breite skaliert werden, was ich optisch wesentlich schöner finde. Beim f18 sind die alle unterschiedlich breit (wie bei deinem Bild 6 zu sehen). Lösungsvorschlag wäre hier auch wieder das Mehrspalten-Layout auf custom zu setzen und mehrere Spalten zu nutzen. Damit eine Readingsgroup allerding in Spalten sortiert werden kann, muss das group-Attribut gesetzt werden, wenn dann der doppelte Header stört, noch das noheading-Attribut auf 1 setzen.

Zitat von: Invers am 20 August 2019, 15:50:54
Ich will nicht nerven, aber du hast ja geschrieben, dass Fragen willkommen sind. Sicherlich habe ich die meisten Sachen durch meine Unkenntnis selber verursacht.
Ich fühle mich absolut nicht genervt :)



Zitat von: speed am 21 August 2019, 16:47:44
Ich habe gerade mal den neuen Style flex ausprobiert.
Super genial , einfach klasse gemacht.
Vielen Dank dafür. :)
Freut mich und gerne doch :)

Zitat von: speed am 21 August 2019, 16:47:44
Nur ein Problem habe ich, in meinem Floorplan sind manche Symbole jetzt riesen groß  :-\.
Da ich kein Floorplan verwende, ist mir das noch gar nicht aufgefallen, ich werde das bei Gelegenheit mal noch anpassen, bis dahin hilft der Lösungsvorschlagvon Reinhart.




Zitat von: binford6000 am 24 August 2019, 12:13:48
wäre es möglich, in der DEF auch codemirror einzubauen? Momentan ja nur in RAW.
Oder hab ich da bei mir was nicht korrekt konfiguriert?
Zitat von: Icinger am 24 August 2019, 18:23:30
Also, bei mir ist der Codemirror auch im Def-Feld vorhanden :O
Das Problem habe ich ein paar Seiten vorher mal angesprochen. Der CodeMirror macht Probleme mit dem CSS column-Attribut (was beim dual Layout verwendet wird), der Inhalt wird dann über den Rand hinaus angezeigt. Ich habe noch keine Lösung dafür gefunden, daher habe ich den CodeMirror für den Fall deaktiviert.



Zitat von: Maui am 24 August 2019, 22:52:14
Ich hab noch ein Problem mit codemirror und flex.
Aber nur in Kombi mit brave.
Wenn ich in codemirror bin, bekomme ich beim klicken in den Code immer folgende FM:

codemirror.js line 106:
Uncaught TypeError: Cannot set property 'viewChanged' of null

Zitat von: Maui am 30 August 2019, 10:42:41
Moin, hab grad festgestellt, dass der Fehler bei codemirror auch mit chrome auftritt. Bei Firefox geht es problemlos.
Das Problem kann ich nicht nachstellen, hat noch jemand das Problem? In wie weit äußert sich der Fehler. Wird der nur in der Javascript Konsole angezeigt oder poppt ein Dialog auf? Hat das sonstige Beeinträchtigungen mit dem Code-Mirror zur Folge?



Zitat von: eisenhauer1987 am 30 August 2019, 09:59:22
ich mit der neusten Version ein Problem mit Weblinks. Im Raum werden sie nur noch sehr klein und nicht mehr wie im Device angegeben auf 100% Breite ausgegeben. Ist das Problem schon bekannt? Hier ein List:

Internals:
   DEF        iframe http://192.168.xxxxxxxx
   FUUID      5d39544d-f33f-899f-ca81-4bf08fca03c1db89
   FVERSION   98_weblink.pm:0.162930/2018-02-28
   LINK       http://192.168.xxxxxxxx
   NAME       HWR.Serverschrank.USV.Grafana
   NR         60
   STATE      initialized
   TYPE       weblink
   WLTYPE     iframe
Attributes:
   DbLogExclude .*
   group      USV.Cyberpower
   htmlattr   width="100%" height="300" frameborder="0"
   room       Funktion - Energie,Gerät - CyperpowerUSV,Raum - HWR

Da greift wohl noch die maximale Spaltenbreite für einen Devicenamen, das werde ich demnächst noch fixen. Danke.



Zitat von: FunkOdyssey am 30 August 2019, 10:10:12
Dies resultiert wohl aus dem FHEMWEB-Attribut: longpoll=1.
Ich habe auf websocket umgestellt und dann war der Fehler weg.
Das ist dann wohl ein FHEMWEB Problem, das Fenster poppt dann auf weil ich einen Dialog für alle Fehlermeldungen eingebaut habe, das werde ich wieder raus nehmen, war eigentlich auch nur mal zum Testen gedacht.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Maui

Moin,

Es poppt wirklich ein Dialog auf und macht somit das Editieren/Kopieren unmöglich.

Gruß
Maui

sash.sc

Hallo zusammen.

Mir ist ausgefallen, wenn die Google fonts mit angegeben werden, wird nur der aktuelle mit in der Liste gespeichert. Ich habe ein paar fonts ausprobiert dies waren auch in der Liste geblieben. Nach nem reboot sind die getesteten Schriften nicht mehr in der liste geblieben. Nur noch die aktivierte.

Ist das so gewollt?

Gruß Sascha

Gesendet von meinem MI 9 mit Tapatalk

Raspi 4B+ Bullseye ;LaCrosse; HomeMatic; MapleCUL; ZigBee; Signalduino ESP32 ; Shellys; MQTT2; Grafana mit Influxdb

the ratman

servus,

da ich seit kurzen flex für mein handy zu schätzen gelernt hab, hab ich eine frage:

irgendwie macht der firefox auf android probleme mit plots. mit z.b. fully wird alles korrekt angezeigt. was der ff abhält, will ich in 2 screenshots zeigen.
gibts da eine lösung für?
→do↑p!dnʇs↓shit←

Invers

#582
Vielen Dank für die ausführliche Antwort.
Vergleiche bitte mal mein Bild 3 mit Bild 4. Es geht hier hauptsächlich um die Steuerelemente, die man nicht mehr sehen kann.

Alle anderen Vorschläge hatte ich bereits umgesetzt.
Den Vorschlag mit der Schriftgröße probiere ich noch.

EDIT: Schriftgröße ändern hat geklappt. Das war für mich sehr wichtig. Danke dir.
Pi3B+ mit SSD/ Bullseye | FB7590 AX | 12 x Dect200 | CUL433+868 | SDuino | HM-LAN | 3 x Heizung FHT + FKontakte | KeyMatic + 4 FB | HM Wandtaster 2-fach m. LED | 6 x Türkont. TFK-TI | HM-Bew.-Melder innen | 3 x Smoked. HM-SEC-SD-2

xanker

Zitat von: Maui am 03 September 2019, 10:48:04
Es poppt wirklich ein Dialog auf und macht somit das Editieren/Kopieren unmöglich.
Ich habe den Dialog nun rausgenommen, ich hoffe dein Problem ist damit behoben.


Zitat von: sash.sc am 03 September 2019, 11:17:13
Mir ist ausgefallen, wenn die Google fonts mit angegeben werden, wird nur der aktuelle mit in der Liste gespeichert. Ich habe ein paar fonts ausprobiert dies waren auch in der Liste geblieben. Nach nem reboot sind die getesteten Schriften nicht mehr in der liste geblieben. Nur noch die aktivierte.

Ist das so gewollt?
Ja, das ist gewollt, ansonsten müsste ich ja noch die Möglichkeit implementieren um die Schriftarten wieder zu löschen. Ich bin davon ausgegangen, dass man testet welche Schriftart einem gefällt und dann auch bei der Schriftart bleibt :)


Zitat von: the ratman am 03 September 2019, 11:17:52
irgendwie macht der firefox auf android probleme mit plots. mit z.b. fully wird alles korrekt angezeigt. was der ff abhält, will ich in 2 screenshots zeigen.
gibts da eine lösung für?
Das mit den Plots ist echt eine verfluchte Angelegenheit. Erklärung: es gibt in Fhemweb zwei Möglichkeiten Plots einzubinden, entweder direkt im HTML als SVG oder über ein Embed-Tag. Letzteres bedeutet, dass der Plot (asynchron) über eine eigene URL geladen wird, was bedeutet, dass er nicht direkt Teil der eigentlichen Seite ist. Das hat zwar den Vorteil, dass ein Plot unabhängig von der eigentlichen Seite aktualisiert werden kann, hat aber den Nachteil dass man nicht direkt per Javascript auf den Plot zugreifen kann, was aber zum Stylen notwendig ist. Stattdessen muss man eine Callback Funktion setzen, welchen dann sozusagen vom Plots selbst aufgerufen wird. Wenn diese Funktion aber noch nicht gesetzt ist, wenn der Plot sie aufruft, wird der Plot nicht gestyled. Da Flex aber erst alle Einstellungen (Farben) laden muss, bevor die Callback Funktion gesetzt werden kann, kann es schon zu spät sein. Komischerweise gibt es das Problem aktuell nur noch beim Firefox.
Lange Rede kurzer Sinn: Im FHEMWEB Device das plotEmbed-Attribut auf 0 setzen, dann funktioniert es.


Zitat von: Invers am 03 September 2019, 15:28:43
Vergleiche bitte mal mein Bild 3 mit Bild 4. Es geht hier hauptsächlich um die Steuerelemente, die man nicht mehr sehen kann.
Huch, das ist mir gar nicht aufgefallen, habe es gefixed.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

xanker

Zitat von: eisenhauer1987 am 30 August 2019, 09:59:22
ich mit der neusten Version ein Problem mit Weblinks. Im Raum werden sie nur noch sehr klein und nicht mehr wie im Device angegeben auf 100% Breite ausgegeben. Ist das Problem schon bekannt? Hier ein List:
Ist gefixed
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...