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

[xanker]

Oh, danke. Darauf muss man erst einmal kommen.

Du bist nicht der erste, der das nicht bemerkt hat. Ich gebe zu, es ist nicht optimal, aber eine zusätzliche Checkbox ist ja eigentlich nicht nötig. Und eigentlich gibt es dafür ja die Tooltips.

[FunkOdyssey]

Hallo, ich will dir nicht auf den Keks gehen. Wenn das so ist, dann sag mir das bitte.
Ich will einfach nur die Dinge melden, die mir aufgefallen sind.
Da bin ich wieder bei den SVG-Plots. Die sehen seit deinen gestrigen Änderungen nun viel besser aus.
Aber die verwendete Schriftgröße lässt die Beschriftung sehr gequetscht aussehen. Die Zeilen in der Beschriftung rücken dadurch nah aneinander und die Achsenbeschriftung überschneidet sich mit der Skala.
Die Skalierung ändert nichts daran.

[xanker]

Hallo, ich will dir nicht auf den Keks gehen. Wenn das so ist, dann sag mir das bitte.
Ich will einfach nur die Dinge melden, die mir aufgefallen sind.

Quatsch, im Gegenteil, ich bin froh über die Beteiligung hier. Ich will ja auch dass der Style "perfekt" funktioniert und bei den unendlichen Konfigurationsmöglichkeiten von FHEM, kann ich ja nicht alles alleine testen..

Da bin ich wieder bei den SVG-Plots. Die sehen seit deinen gestrigen Änderungen nun viel besser aus.

Sehr gut, ich habe auch keine Probleme mehr mit der Darstellung. Lediglich Gisbert hatte gestern noch ein Problem.

Aber die verwendete Schriftgröße lässt die Beschriftung sehr gequetscht aussehen. Die Zeilen in der Beschriftung rücken dadurch nah aneinander und die Achsenbeschriftung überschneidet sich mit der Skala.
Die Skalierung ändert nichts daran.

Das ist ein Problem vom SVG Modul, die Abstände sind statisch. Da kann ich leider nichts dran ändern, das müsste der Modul Autor machen. So muss man aktuell mit dem Tradeoff zwischen "zu kleiner Schrift" und "zu kleinen Abständen" leben. Ich verwende aktuell plotsize 600,200, damit passen zweistellige Achsenbeschriftungen gerade noch so, ohne dass sie mit dem Achsen-Label überschneiden und für mich ist die Schriftgröße dann auch auf dem Smartphone noch halbwegs gut lesbar.

[FunkOdyssey]

Das ist ein Problem vom SVG Modul, die Abstände sind statisch. Da kann ich leider nichts dran ändern, das müsste der Modul Autor machen. So muss man aktuell mit dem Tradeoff zwischen "zu kleiner Schrift" und "zu kleinen Abständen" leben. Ich verwende aktuell plotsize 600,200, damit passen zweistellige Achsenbeschriftungen gerade noch so, ohne dass sie mit dem Achsen-Label überschneiden und für mich ist die Schriftgröße dann auch auf dem Smartphone noch halbwegs gut lesbar.

Hiermit sieht es gut aus:

Code Auswählen Erweitern

text.title, text.ylabel, text.y2label {
    font-size: 0.8em;
}

text.legend {
    font-size: 0.8em;
}


plotsize = 800,160
plotMinWidth = 300px
plotMaxWidth  = 800px

[FunkOdyssey]

Nächste Frage: Man kann Link im TableText nicht innerhalb des Testes erkennen.
Wäre das eine Option für dich, die Farbe konfigurierbar zu machen?

[FunkOdyssey]

Du lieferst keine scheinbar svg_defs.svg mit, so dass irgendwelche Default-Werte genommen werden.
svg_style.css kann man ja scheinbar über deine Optionen/JS konfigurieren.
Aber spätestens beim Gradient und den Fill-Effekten sieht es dann unschön aus, da man nur einen Farbwert geändert hat.
Hast du eine Idee, wie man das lösen kann? Oder auch jeder selbst über "additional CSS" und einer flexsvg_defs.svg?

[FunkOdyssey]

Bei der Nutzung von CodeMirror (z.B. über edit files), fehlt der vertikale Scrollbalken.

[xanker]

Nächste Frage: Man kann Link im TableText nicht innerhalb des Testes erkennen.
Wäre das eine Option für dich, die Farbe konfigurierbar zu machen?

Werde ich gleich hinzufügen.
Edit: erledigt

Du lieferst keine scheinbar svg_defs.svg mit, so dass irgendwelche Default-Werte genommen werden.
svg_style.css kann man ja scheinbar über deine Optionen/JS konfigurieren.
Aber spätestens beim Gradient und den Fill-Effekten sieht es dann unschön aus, da man nur einen Farbwert geändert hat.
Hast du eine Idee, wie man das lösen kann? Oder auch jeder selbst über "additional CSS" und einer flexsvg_defs.svg?

Jepp, es wird die standard svg_def genutzt, warum auch eine eigene erstellen?! Die Farben werden dann per Javascript modifiziert. Man kann zwar nur einzelne Farben definieren, aber ich habe es so implementiert, dass automatisch ein Gradient errechnet wird. Ausgehend von der definierten Farbe wird eine zweite errechnet indem #555 addiert (bzw. wenn die Farbe dann weiß ist, subtrahiert) wird...das habe ich gerade nochmal geupdated, da gabs einen Fehler. Somit wird der Gradient heller bzw. dunkler. Ich könnte es zwar ermöglichen für die Gradienten eine zweite Farbe zu definieren, aber brauch man wirklich einen Gradient zwischen zwei (komplett) unterschiedlichen Farben?

Bei der Nutzung von CodeMirror (z.B. über edit files), fehlt der vertikale Scrollbalken.

Jo, mit dem CodeMirror gibt es noch ein paar Probleme, das habe ich auf der TODO Liste.

[choetzu]

Gewollt ist das nicht, aber das ist das reguläre Verhalten einer Tabelle, wenn die Zeilen ungleich viele Zellen/Spalten haben. Abhilfe schafft hier "colspan", um einer Zelle zu sagen, dass sie sich über mehrere Spalten strecken soll. Kurzes googlen ergab, dass das bei Readingsgroups mit dem valueColumns-Attribut einstellbar sein müsste.

danke, hab ich schon vermutet, dass ich da nicht um die (für mich ungeliebten) geschweiften Klammern komme..  Habs mal grad versucht, aber nicht geschafft..Shit.
Aber danke für den Hinweis...

[xanker]

Bezüglich Logo habe ich mir gedacht. Wieso nicht einfach bei Bedarf ein Logo in den MenuIcons ganz links platzieren. Dann könnte das Logo auch die Funktion des HOmeButtons übernehmen. Natürlich in der selben Grösse wie die Menu Icons oder so... Nur kleiner Hinweis.

Ich habe nun den logo <div> container (id: "logo") den menu Icons voran gestellt. Den Inhalt muss man dann halt per Javascript setzen, ich wüsste nicht wie ich das sinnvoll als Option machen soll.
Es funktioniert somit jetzt auch z.B. niceclocks (https://forum.fhem.de/index.php?topic=31912.0). Der Inhalt ist aber auf 30px Breite UND Höhe beschränkt. Zudem habe ich den Container mit der "Home" Seite verlinkt.

Solange kein Inhalt (per Javascript) definiert wird, wird auch nichts angezeigt.

[xanker]

danke, hab ich schon vermutet, dass ich da nicht um die (für mich ungeliebten) geschweiften Klammern komme..  Habs mal grad versucht, aber nicht geschafft..Shit.
Aber danke für den Hinweis...

Ich habe mal etwas implementiert: sofern es Reihen gibt, die weniger Zellen/Spalten haben wie andere (in der gleichen Readingsgroup), dann wird automatisch die jeweils letzte Zelle getreckt.

[FunkOdyssey]

Werde ich gleich hinzufügen.
Edit: erledigt

Danke dir. Jetzt sind auch die Links bei den bereits vorhandenen Attributen gleichermaßen eingefärbt.
Hast du Lust das anzupassen, so dass die erste Spalte die ursprüngliche Farbe behält?



Zum Thema SVG-Farben:
Schau doch bitte noch einmal auf meinen Screenshot von heute: https://forum.fhem.de/index.php/topic,101749.msg961096.html#msg961096
Es ist l2fill ausgewählt und das sollte (hier noch default) #0000FF sein. Doch die Grafik ist lila eingefärbt.

[choetzu]

Ich habe nun den logo <div> container (id: "logo") den menu Icons voran gestellt. Den Inhalt muss man dann halt per Javascript setzen, ich wüsste nicht wie ich das sinnvoll als Option machen soll.
Es funktioniert somit jetzt auch z.B. niceclocks (https://forum.fhem.de/index.php?topic=31912.0). Der Inhalt ist aber auf 30px Breite UND Höhe beschränkt. Zudem habe ich den Container mit der "Home" Seite verlinkt.

Solange kein Inhalt (per Javascript) definiert wird, wird auch nichts angezeigt.

Sehr cool!!! Und wie kann ein Javascript-Unfähiger am besten ein Logo platzieren? Ich habe etwas html Erfahrung, und css. Aber Javascript noch nie was gemacht..

[choetzu]

Ich habe mal etwas implementiert: sofern es Reihen gibt, die weniger Zellen/Spalten haben wie andere (in der gleichen Readingsgroup), dann wird automatisch die jeweils letzte Zelle getreckt.

Funktioniert!!!!! Der Hammer! Danke Meister!

[xanker]

Danke dir. Jetzt sind auch die Links bei den bereits vorhandenen Attributen gleichermaßen eingefärbt.
Hast du Lust das anzupassen, so dass die erste Spalte die ursprüngliche Farbe behält?

ich habe dazu eine neue Farb-Auswahl hinzugefügt: TableLinkFirstCol

Zum Thema SVG-Farben:
Schau doch bitte noch einmal auf meinen Screenshot von heute: https://forum.fhem.de/index.php/topic,101749.msg961096.html#msg961096
Es ist l2fill ausgewählt und das sollte (hier noch default) #0000FF sein. Doch die Grafik ist lila eingefärbt.

Das ist schon richtig so. #0000FF ist blau, und der der Gradient verläuft dann zu #5555FF (was ein helles blau in Richtung lila ist). Zudem ist ja regulär eine Transparenz definiert, weswegen (bei dem hellen Plot hintergrund) das Blau noch heller wird.