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

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

Vorheriges Thema - Nächstes Thema

Icinger

Na, dann mach ich mal den Anfang:

Ich finde ja grün angenehmer fürs Auge als Blau  :D

{"HeaderBG":"#207a00","HeaderIcon":"#FFF","HeaderText":"#FFF","HeaderBorder":"#207a00","MenuBG":"#000","MenuBorder":"#207a00","MenuIcon":"#FFF","MenuRoomIcon":"#FFF","MenuText":"#FFF","MenuHoverLink":"#35c900","MainBG":"#000","TableHeaderBG":"#207a00","TableHeaderText":"#FFF","TableBorder":"#207a00","TableOdd":"#000","TableEven":"#002200","TableText":"#FFF","TableHoverRow":"#103b00","TableHoverLink":"#35c900","TableNewEvent":"#F00","TableIcon":"#FFF","SetGetAttrBG":"#000","SubmitButtonBG":"#000","SubmitButtonBorder":"#207a00","SubmitButtonText":"#FFF","WidgetBorder":"#207a00","WidgetText":"#FFF","WidgetHighlight":"#35c900","LogDate":"#08ff08","LogTime":"#08ff08","LogVerbose0":"#4f4f4f","LogVerbose1":"#F00","LogVerbose2":"#FFA500","LogVerbose3":"#008000","LogVerbose4":"#1E90FF","LogVerbose5":"#00F","plotBG":"#000","plotBorder":"#207a00","plotText":"#FFF","plotGrid":"#999","plotMarker":"#F00","plotLine0":"#F00","plotLine1":"#0F0","plotLine2":"#0883ff","plotLine3":"#F0F","plotLine4":"#A52A2A","plotLine5":"#FFF","plotLine6":"#b8b800","plotLine7":"#808080","plotLine8":"#FF0","plotLinePasted":"#FFF"}

Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho

Gisbert

Hallo Sebastian,

vielen Dank für die Info zu "plotEmbed 0" - damit sehen die Diagramme schon sehr viel besser aus.

Kann man an der Diagrammhöhe noch was ändern? So sieht es auf dem Handy gestaucht aus. Gut finde ich, dass das Diagramm in der gesamten Breite dargestellt wird.

Die Unterschrift "Bearbeiten" bzw. der Name oder alias ist in der Schriftgröße deutlich zu groß geraten.

Viele​ Grüße​ Gisbert​
Aktuelles FHEM | PROXMOX | Fujitsu Futro S740 | Debian 12 | UniFi | Homematic, VCCU, HMUART | ESP8266 | ATtiny85 | Wasser-, Stromzähler | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21/22RF | RHASSPY

Icinger

Ich schon wieder :)

Bin grad noch über einen Fehler gestolpert:
Bei einem
list TYPE=notify
sind die Links zu den Devices nicht mehr anklickbar.
In den Link ist ein
<br></a>
miteingearbeitet.

Siehe Screenshot. Betrifft alle list-Befehle.

lg, Stefan
Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho

xanker

Zitat von: Gisbert am 14 Juli 2019, 17:08:42
vielen Dank für die Info zu "plotEmbed 0" - damit sehen die Diagramme schon sehr viel besser aus.
Kann man an der Diagrammhöhe noch was ändern? So sieht es auf dem Handy gestaucht aus. Gut finde ich, dass das Diagramm in der gesamten Breite dargestellt wird.
Die Unterschrift "Bearbeiten" bzw. der Name oder alias ist in der Schriftgröße deutlich zu groß geraten.
Geht jetzt auch mit "plotEmbed 1". Die Diagrammhöhe bzw. besser gesagt das Seitenverhältnis kann man über das plotsize-Attribut vom FHEMWEB device beeinflussen. Die "Unterschrift" wirkt nur so groß, weil der Plot klein skaliert wird (die Unterschrift ist nicht Teil des Plots). Die Schrift ist so groß wie der andere Text auch. Ich kann bei den skalierten Plots nicht die Schriftgröße gleich lassen, das würde den ganzen Plot verzerren. Man muss sich den Plot einfach wie ein Bild vorstellen.
Wenn du aber beim plotsize-Attribut kleiner Werte setzt, wird der Inhalt (somit auch die Schrift) größer, dann würde es auf dem Smartphone besser aussehen, aber auf dem Desktop (wo der Plot groß skaliert) wäre dann halt alles riesig. Man kann aber in den Einstellungen plotMinWidth und plotMaxWidth definieren, somit kann man das Skalieren limitieren. Ich verwende "plotsize 800,250" mit "plotMinWidth 500px" und "plotMaxWidth 800px". Wenn der Plot dann von der Breite nicht mehr genug Platz hat, wird er scrollbar.


Zitat von: Icinger am 14 Juli 2019, 18:05:42
Ich schon wieder :)
immer wieder gerne  ;D

Zitat von: Icinger am 14 Juli 2019, 18:05:42
Bei einem
list TYPE=notify
sind die Links zu den Devices nicht mehr anklickbar.
In den Link ist ein
<br></a>
miteingearbeitet.
Danke, der Regex war falsch, statt "\r?\n" war es "[\r?\n]" somit hat er auf ein Fragezeichen gematched anstatt nur auf einen Zeilenumbruch ;D
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

xanker

#139
Zitat von: Icinger am 14 Juli 2019, 11:03:07
Bei der letzten Änderung zum Thema Logfile hat sich irgendwo ein kleiner Fehler eingeschlichen:
Seihter ist zw. jeder Logzeile eine Leerzeile.

Das war davor noch nicht :)

PS: Wobei das jetzt auf den zweiten Blick gar nicht mal so schlecht aussieht :D
besteht das Problem eigentlich noch?

und zu deinem Preset: ist schon sehr giftig grün   :o
was mir aber gut gefällt, dass du in der Reihen-Färbung (odd bzw. even) das Grün mit aufgenommen hast. Je nachdem wie viele hier ihre Presets teilen, sollte ich vielleicht nen eigenen Thread dafür aufmachen, sonst geht das hier nur unter...
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Icinger

Zitatbesteht das Problem eigentlich noch?

Ahh, nein. Wie du vermutet hast, ich vermutlich irgendwas im Cache gehangen.
Normalerweise mach ich bei solchen Updates eh immer automatisch ein Ctrl+F5, diesmal aber vermutlich nicht.
Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho

Icinger

Was mir grade noch aifgefalen ist, was evtl. ein wenig inkontinent ist (aber nix weltbewegendes):
Links im Menü ist der komplette <td> anklickbar für einen Eintrag.
In einer Group oder einer RG oder so, muss ich genau auf den Text klicken, da ist nicht der Leerraum vom <td> klickbar.

Hoffe, das ist halbwegs verständlich? gg

lg, Stefan
Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho

Gisbert

#142
ZitatWenn du aber beim plotsize-Attribut kleiner Werte setzt, wird der Inhalt (somit auch die Schrift) größer, dann würde es auf dem Smartphone besser aussehen, aber auf dem Desktop (wo der Plot groß skaliert) wäre dann halt alles riesig. Man kann aber in den Einstellungen plotMinWidth und plotMaxWidth definieren, somit kann man das Skalieren limitieren. Ich verwende "plotsize 800,250" mit "plotMinWidth 500px" und "plotMaxWidth 800px". Wenn der Plot dann von der Breite nicht mehr genug Platz hat, wird er scrollbar.
Ich hab's damit probiert und finde Werte, bei denen die Diagramme auf meinem Smartphone sehr schön aussehen.

Ich habe noch 3 Vorschläge:

  • Wir hatten bereits über die Unterschrift "Bearbeiten" unter den Diagrammen gesprochen (Diagramm-Name bzw. alias). Ich hab verstanden, dass die Schriftart identisch zu den anderen Einträgen sein muss. Könnte man die Stärke der Unterschrift reduzieren?
  • Wenn man ein Device anwählt, dann erscheint unten "Select icon" usw. Bei einem großen Bildschirm stehen die Kästchen nebeneinander, bei einem kleinen Bildschirm gemischt nebeneiander und untereinander. Könnte man letzteres ändern, wobei der Abstand zwischen den Kästchen etwas kleiner sein könnte? Ein Detail, deshalb geringe Priorität.
  • Wenn man eine cfg-Datei unter Edit files anwählt, dann erscheint auf dem Handy eine Datei mit Zeilenumbrüchen, während auf einem großen Bildschirm alles hintereinander in einer Zeile steht und damit kaum lesbar ist.
Viele Grüße Gisbert

Edit:
Noch eine Frage. Ich wollte das Modul updaten und deshalb den update in die Kommandozeile eingeben - nur ich habe keine Kommandozeile und weiß auch nicht, wie ich die zum Vorschein bringen kann.
Ist es beabsichtigt keine Kommandozeile bereitzustellen?
Aktuelles FHEM | PROXMOX | Fujitsu Futro S740 | Debian 12 | UniFi | Homematic, VCCU, HMUART | ESP8266 | ATtiny85 | Wasser-, Stromzähler | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21/22RF | RHASSPY

xanker

#143
Zitat von: Gisbert am 15 Juli 2019, 11:31:35
Ich hab's damit probiert und finde Werte, bei denen die Diagramme auf meinem Smartphone sehr schön aussehen.
das freut mich doch :)

Zitat von: Gisbert am 15 Juli 2019, 11:31:35

  • Wir hatten bereits über die Unterschrift "Bearbeiten" unter den Diagrammen gesprochen (Diagramm-Name bzw. alias). Ich hab verstanden, dass die Schriftart identisch zu den anderen Einträgen sein muss. Könnte man die Stärke der Unterschrift reduzieren?
  • Wenn man ein Device anwählt, dann erscheint unten "Select icon" usw. Bei einem großen Bildschirm stehen die Kästchen nebeneinander, bei einem kleinen Bildschirm gemischt nebeneiander und untereinander. Könnte man letzteres ändern, wobei der Abstand zwischen den Kästchen etwas kleiner sein könnte? Ein Detail, deshalb geringe Priorität.
  • Wenn man eine cfg-Datei unter Edit files anwählt, dann erscheint auf dem Handy eine Datei mit Zeilenumbrüchen, während auf einem großen Bildschirm alles hintereinander in einer Zeile steht und damit kaum lesbar ist.
- habe ich bewusst fett geschrieben um konsistent mit den Device Links in den Tabellen zu sein. Du kannst das aber ändern wenn du im FHEMWEB Device das Css-Attribut mit folgendem Inhalt setzt: ".SVGlabel:not([data-name=svgZoomControl]) a { font-weight: normal; font-size: 0.8em;}". Damit wäre die Schrift nicht fett und auch kleiner (Standardgröße ist 1em).
- Danke, habe ich mit dem neuen Update neu strukturiert.
- Das war ein Firefox Problem, ist gefixed.

Zitat von: Gisbert am 15 Juli 2019, 11:31:35
Edit:
Noch eine Frage. Ich wollte das Modul updaten und deshalb den update in die Kommandozeile eingeben - nur ich habe keine Kommandozeile und weiß auch nicht, wie ich die zum Vorschein bringen kann.
Ist es beabsichtigt keine Kommandozeile bereitzustellen?
Du bist nicht der erste der die Kommandozeile nicht "sieht". Sie ist aber da, einfach auf den Header klicken (dort wo Raum/Devicename und die Uhr angezeigt wird). Wie im ersten Post geschrieben, wird die Kommandozeile auch verwendet um solche Infos und auch Fehlermeldungen anzuzeigen. Sobald Text eingetippt wird, verschwinden die Infos.
Und übrigens gibt es im Menü oben Icons für Sachen wie "update", "update check" usw.


Und wegen der falsch dargestellten Karte bin ich noch am schauen, ich kann das Problem bisher nicht ausfindig machen.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

xanker

Zitat von: Icinger am 14 Juli 2019, 20:18:07
Was mir grade noch aifgefalen ist, was evtl. ein wenig inkontinent ist (aber nix weltbewegendes):
Links im Menü ist der komplette <td> anklickbar für einen Eintrag.
In einer Group oder einer RG oder so, muss ich genau auf den Text klicken, da ist nicht der Leerraum vom <td> klickbar.
Ja, das ist "bewusst" so. Anfangs waren auch die Device Links in den Tabellen als Block, da kann es aber am Smartphone eher mal passieren, dass man beim Scrollen ausversehen einen Link anklickt, deshalb habe ich das wieder auf den Text eingeschränkt. Im Menü habe ich es als Block gelassen, damit man bei kurzen Raumnamen am Smartphone nicht den Daumen verrenken muss ;)

Ist zwar nun etwas inkonsistent, dafür aber durchdacht  ;D
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Gisbert

Hallo Sebastian,

vielen Dank für die Infos.
attr WEBtablet Css .SVGlabel:not([data-name=svgZoomControl]) a { font-weight: normal;; font-size: 0.8em:}
Das ändert leider nichts. Kann es sein, dass beim Kopieren in's Forum etwas verlorengegangen ist?

Viele Grüße Gisbert
Aktuelles FHEM | PROXMOX | Fujitsu Futro S740 | Debian 12 | UniFi | Homematic, VCCU, HMUART | ESP8266 | ATtiny85 | Wasser-, Stromzähler | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21/22RF | RHASSPY

xanker

Zitat von: Gisbert am 15 Juli 2019, 12:37:14
attr WEBtablet Css .SVGlabel:not([data-name=svgZoomControl]) a { font-weight: normal;; font-size: 0.8em:}
Das ändert leider nichts. Kann es sein, dass beim Kopieren in's Forum etwas verlorengegangen ist?
Hatte ausversehen einen Doppelpunkt gesetzt, so geht es:
attr WEBtablet Css .SVGlabel:not([data-name=svgZoomControl]) a { font-weight: normal;; font-size: 0.8em;;}
natürlich unter der Bedingung, dass WEBtablet auch das aktive FHEMWEB Device ist.

Grüße
Sebastian
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Gisbert

Super, hat jetzt funktioniert :)
Vielen Dank
Gisbert
Aktuelles FHEM | PROXMOX | Fujitsu Futro S740 | Debian 12 | UniFi | Homematic, VCCU, HMUART | ESP8266 | ATtiny85 | Wasser-, Stromzähler | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21/22RF | RHASSPY

Icinger

Zitatda kann es aber am Smartphone eher mal passieren, dass man beim Scrollen ausversehen einen Link anklickt, deshalb habe ich das wieder auf den Text eingeschränkt.
Jo, macht natürlich Sinn so.

lg, Stefan
Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho

nuccleon

Es gibt noch ein Problem mit dem 'save' Button im 'edit Files' Editor.
Wenn man den Button (save 99_myUtils.pm) drückt, wird die Datei nicht gespeichernt, sondern die Änderungen werden verworfen.
Browser Firefox 67.0.4