Autor Thema: Neuer Style: flex. Flexibel für alle Geräte  (Gelesen 21970 mal)

Offline xanker

  • Full Member
  • ***
  • Beiträge: 260
Neuer Style: flex. Flexibel für alle Geräte
« am: 24 Juni 2019, 20:28:37 »
Hallo zusammen,

ich habe einen Style für FHEMWEB entworfen, mit dem Ziel, dass er für alle Geräte- bzw. Display-Größen gut funktioniert. Ein wichtiger Punkt war für mich, dass kein horizontales Scrollen mehr nötig ist, da dies mMn. die Übersichtlichkeit einschränkt.

Folgende Funktionen/Eigenschaften beinhaltet mein Style:
  • Skaliert für alle Display-Größen (minimale Breite: 350px)
  • Devices/Reading/Attribute sortieren sich je nach Breite selbstständig (auf sinnvolle Weise)
  • Slider, Selects, Inputs, Plots skalieren falls nötig (auf sinnvolle Weise)
  • Tabellen können in zwei Spalten angezeigt werden um den Platz bei größeren Display besser auszunutzen
  • Menü ist ein/ausblendbar. Bei einer Breite von >800px wird das Menü standardmäßig angezeigt, ansonsten automatisch ausgeblendet. Optional kann das Menü auch immer ausgeblendet werden.
  • Menü enthält Icon-Buttons für Reboot, Update, Update check, Reread Icons, Reload myUtils, Save und (falls möglich) Save check. Die Buttons können nach Belieben ein-/ausgeblendet werden.
  • Menü und Haupt-Content sind unabhängig voneinander, lass sich also getrennt scrollen (falls nötig).
  • Alle Menü Eintrage (nicht nur Räume) können beliebig sortiert und gruppiert werden
  • Datum, Uhrzeit und Verbose-Level bei Logs und dem Eventmonitor werden farblich hervorgehoben um die Übersichtlichkeit zu verbessern
  • Device-Groups bzw. alles wo das group-Attribut gesetzt ist, kann per Drag'n'Drop sortiert werden. Neu: Es kann nun zwischen einem Ein-Spalten, Zwei-Spalten und "custom" Layout gewählt werden.
  • Neu: Gruppen können nun ausgeblendet werden. Dazu den Edit-Mode aktivieren, durch langes Drücken des Gruppen-Headers. In den Einstellungen gibt es eine Option um ausgeblendete Gruppen wieder anzuzeigen.
  • Farben sind frei definierbar. Es gibt bisher vier Standard-Presets: bright, dark, black und fhem. Zudem können beliebig viele eigene Presets definiert werden
  • Neu: Einstellungen werden nun IMMER im aktuellen FHEMWEB Device. Durch fingerprintjs2 (https://github.com/Valve/fingerprintjs2) wird ein Fingerprint vom aktuellen Endgerät erstellt, dadurch ist es möglich Endgerät-spezifische Einstellungen zu setzen. Die Einstellungen können aber auch weiterhin global für alle Endgeräte gespeichert werden.
  • Es können verschiedene Farb Presets für Tag/Nacht bestimmt werden. Der Wechsel geschieht dann automatisch zum Sonnenaufgang/-untergang.
  • Beschreibungen der Style Settings werden in Abhängigkeit vom global language-Attribut in Deutsch oder Englisch dargestellt.
  • Command-Bar ist fest an der Oberseite, scrollt also nicht mit und hat mehrere Funktionen:
    • Digital-Uhr wird angezeigt (einstellbar)
    • Zeigt aktuellen Raum bzw. Geräte Namen an (einstellbar)
    • Informationen/Fehlermeldungen wie "Connection lost" werden angezeigt
    • Zusätzlicher Button für Raw-Code Eingabe wie beim f18 Style (einstellbar) (Danke an rudolphkoenig)
    • Command-History wird gespeichert und kann mit den hoch/runter Tasten bedient werden und mit CTRL+ENTER wird die Eingabe in "{}" eingeklammert (einstellbar) (Danke an FHEMAN)
    • Geräte können gesucht werden, ab dem dritten Zeichen werden Geräte in einer Liste vorgeschlagen und können mit den hoch/runter Tasten ausgewählt werden (einstellbar) (Danke an Phill und ThoTo)

Performance:
Der Style nutzt relativ viel Javascript, was aufgrund des nicht ganz so einheitlichen FHEMWEB HTML Outputs nötig ist um es wie gewünscht zu stylen. Dies kann auf schwächeren Geräten zu Performance Problemen führen. Daher gibt es folgende Optionen:
  • "Animationen aktivieren": dadurch wird z.B. das Öffnen/Schließen des Menüs animiert, dies reduziert aber die Performance!
  • "Performance verbessern": wenn diese Option aktiviert wird, wird nicht unbedingt benötigtes Javascript Styling nach 500ms abgebrochen. Genauer gesagt führt dies dazu, dass Webcmds (Slider, Selects, Inputs, etc.) bei einem Zeilenumbruch nicht die optimale Breite haben. Im Gegenzug ist die Seite dann schneller nutzbar. Dies sollte aber nur für Räume mit vielen Devices (wie "Everything") relevant sein.
  • "Mehrspalten Layout": Wenn man dies auf "single" setzt, wird die Performance nochmals verbessert
  • Zusammenfassend: Für schwache Geräte wird empfohlen Animationen zu deaktivieren, "Performance verbessern" zu aktivieren und "Mehrspalten Layout" auf "single" zu setzen

Bekannte Bugs:
  • Das Handle eines Sliders wird beim Skalieren nicht aktualisiert, gibt es hier ein trigger den man anstoßen kann?
  • Die Funktion "Display plot values" ist bei skalierten SVGPlots buggy, da die Funktion wohl immer von der Originalgröße ausgeht.
  • Tooltips und Slider Werte werden im Safari an der falschen Position dargestellt wenn die Zoomfaktor Option ungleich 1 ist.
  • Tooltips werden im Safari abgeschnitten.

Potentielle Bugs:
  • Ich habe bisher nur (ausgiebig) mit Chrome/Firefox unter Windows sowie Android getestet, mit allen denkbaren Breiten. Wie es bei IE/Safari aussieht, weiß ich nicht, ich hoffe wie geplant. Bugreports sind erwünscht, da ich keine Apple Geräte habe.
  • Da es keinen wirklichen HTML Standard für FHEM gibt, könnte es sein, dass gewisse Module HTML-Output erzeugen, der nicht richtig gestyled wird.

Hinweise:
  • Da flex selbst die Möglichkeit bietet Tabellen zur sortieren bzw. automatisch auf zwei Spalten aufzuteilen, wird die Spalteneinteilung vom FHEMWEB column-Attribut ignoriert. Das Attribut kann allerdings weiterhin dazu verwendet werden um Gruppen zu sortieren und auszublenden. Wenn man in den Einstellungen die Option "Mehrspalten Layout" auf custom setzt, dann wird die Spalteneinteilung nun beachtet und kann per Drag'n'Drop bearbeitet werden
  • Die implementierte Zoom-Funktion verursacht teilweise Probleme mit falsch positionierten Elementen (z.B. während der Menü-Sortierung), daher empfehle ich die Zoom Funktion des Browsers zu verwenden!

Installation:

Neue Funktionen / Wünsche:
  • Ich bin offen für Änderungsvorschläge und baue auch gerne neue (sinnvolle) Funktionen ein. Wenn jemand eine Idee hat, einfach hier schreiben.


Bier?
Der Style steht frei und unentgeltlich zur Verfügung. Ich sehe das als mein Tribut an die Community, da ich schließlich auch sehr von FHEM profitiere. Da ich mittlerweile doch schon viele viele viele Stunden arbeit in den Style gesteckt habe, freue ich mich über ein Motivations-Bier  8) Vielen Dank im Voraus!
https://paypal.me/pools/c/8gUXHjxlDP
« Letzte Änderung: 04 August 2019, 18:40:05 von xanker »
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...
Gefällt mir Gefällt mir x 9 Liste anzeigen

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 21009
Antw:Neuer Style: clavo. Flexibel für alle Geräte
« Antwort #1 am: 24 Juni 2019, 20:40:38 »
Zitat
der Style hat den Suffix "touchpad", da das viewport Attribut nur ausgewertet wird, wenn ein Style "touchpad" oder "smallscreen" im Namen hat. Gibt es dafür einen Grund?
Ja, historisch. Ich empfehle es im JavaScript zu machen, wie f18.

Offline xanker

  • Full Member
  • ***
  • Beiträge: 260
Antw:Neuer Style: clavo. Flexibel für alle Geräte
« Antwort #2 am: 24 Juni 2019, 20:45:42 »
Ja, historisch. Ich empfehle es im JavaScript zu machen, wie f18.
Hatte ich anfangs sogar so gemacht, bis ich im Source-Code von FHEM Web nachgeschaut habe. Problem wenn man es über Java-Script setzt, dass es zu kleinen Verzögerungen führen kann, was bedeutet, dass für den Bruchteil einer Sekunde alles die falsche Größe hat...unschön.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Offline Reinhart

  • Hero Member
  • *****
  • Beiträge: 1971
Antw:Neuer Style: clavo. Flexibel für alle Geräte
« Antwort #3 am: 25 Juni 2019, 11:15:10 »
Hallo Xanker!

Danke für deinen neuen Style, gerade in diesem Thema tut sich ja sonst nicht viel.

Ich habe gleich ein paar Anmerkungen. Ich habe in letzter Zeit den f18 lieben gelernt, weil er gerade in der Mobile Ansicht sehr gut lesbar ist.
Bei der automatischen Skalierung des Clavo wird diese Technik aber zum Nachteil weil alles sehr klein und damit schlecht lesbar wird. Ist beim f18 etwas zu groß, so kann ich das Handy drehen (siehe Readinggroup2) und es ist klar und deutlich. Der Abstand zwischen Icon und Text ist sehr groß was letztlich alles sehr klein macht. Beim Clavo kann ich zwar horizontal scrollen ist aber für die Übersicht nicht unbedingt von Vorteil.
Wenn ich nun etwas schalten will und ich sehe durchs scrollen den Text nicht, tapt man da im Dunkeln.

Bei der Ansicht meiner vielen Lichtschalter (das ist keine Readingsgroup) ist das scrollen eher hinderlich weil der Abstand zwischen dem Text und Schaltknopf sehr groß ist, beim f18 klappt es gut. Bei der Ansicht im Browser fallen diese Dinge kaum auf, ich habe ebenfalls mit Chrome getestet.

Ich glaube man sollte die Mobileansicht nicht unterschätzen, den in 70% der Fälle greif ich auf Fhem über das Handy zu (wenn ich im Garten sitze oder auswärts oder auf Urlaub bin) , entweder über HTML oder die Alexa App und lass mir die gewünschten Daten vorlesen.

Ansonsten funktioniert deine erste Version schon sehr gut und er hat er auch ein frisches nettes Aussehen. Eventuell kannst du an den Abständen noch etwas schrauben oder einstellbar gestallten. Wenn du später noch die Farben vorgeben kannst wäre das sicher ein Vorteil, denn die neuen Displays der Handys verbrauchen ja bei schwarzem Hintergrund keinen oder weniger Strom. Ansonsten finde ich deine Blau/Weiß Kombination ja sehr schön gewählt, aber Farbkombinationen sind immer Ansichtssache.

Mobile Test mit Android 9 (EMUI 9.1.0.132)

LG
Reinhart
« Letzte Änderung: 25 Juni 2019, 11:23:19 von Reinhart »
FHEM auf Raspy4 mit Buster + SSD, mit FS20, Homematic, ESP8266, Sonoff, Electrodragon, eBus, RPi mit COC,NanoCUL, MapleCUL, HM-CFG-LAN Adapter, MQTT2, Alexa

Offline xanker

  • Full Member
  • ***
  • Beiträge: 260
Antw:Neuer Style: clavo. Flexibel für alle Geräte
« Antwort #4 am: 25 Juni 2019, 11:59:59 »
Danke für deinen neuen Style, gerade in diesem Thema tut sich ja sonst nicht viel.
gerne doch :)

[...]weil alles sehr klein und damit schlecht lesbar wird. [...] Beim Clavo kann ich zwar horizontal scrollen ist aber für die Übersicht nicht unbedingt von Vorteil.
Genau das sollte nicht sein. Mein Ziel war ja dass KEIN horizontales scrollen nötig ist. Es sollte von der Größe alles so sein, wie es auf den (mobilen) Screenshots von mir aussieht. Du hast ganz klar vergessen den viewport im FHEMWEB-Device zu setzen (siehe "Voraussetzung"). Ich habe sicherheitshalber eine Überprüfung per Javascript eingebaut. Ich empfehle trotzdem den viewport im FHEMWEB Device zu setzten (siehe mein voriger Post).

Ich glaube man sollte die Mobileansicht nicht unterschätzen, den in 70% der Fälle greif ich auf Fhem über das Handy zu.
Ich auch, daher habe ich mir ja auch die Arbeit gemacht den Style zu erstellen :)

Ansonsten funktioniert deine erste Version schon sehr gut und er hat er auch ein frisches nettes Aussehen. Eventuell kannst du an den Abständen noch etwas schrauben oder einstellbar gestallten. Wenn du später noch die Farben vorgeben kannst wäre das sicher ein Vorteil, denn die neuen Displays der Handys verbrauchen ja bei schwarzem Hintergrund keinen oder weniger Strom. Ansonsten finde ich deine Blau/Weiß Kombination ja sehr schön gewählt, aber Farbkombinationen sind immer Ansichtssache.
Wenn sich mehr Leute daran Interesse haben, oder ich einfach nur Lust darauf habe es zu implementieren, dann werde ich das mit den Farben noch machen. Ich hatte mir auch schon überlegt einen "Dark" Style daraus zu machen.

Edit:
Deine Readingsgroup sieht durchaus etwas komisch aus. Der Abstand zwischen den Icons und dem Namen ist viel zu groß. Bei mir sieht eine Readingsgroup wie im angehängten Screenshot aus. Hast du evtl. css-styles (Attribute style, cellStyle, etc.) im Readingsgroup Device gesetzt, welcher das verursacht?

Grüße
xanker
« Letzte Änderung: 25 Juni 2019, 12:12:17 von xanker »
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Offline binford6000

  • Tester
  • Hero Member
  • ****
  • Beiträge: 1072
  • 🏠⚙️💡🛠📱
Antw:Neuer Style: clavo. Flexibel für alle Geräte
« Antwort #5 am: 25 Juni 2019, 13:02:38 »
Hi xanker,
schöne Arbeit. Sieht gut aus.  8)
Änderbare Farben fände ich auch super! Was mir noch aufgefallen ist:
  • Das Logfile wird als Fließtext dargestellt (siehe Screenshot)
  • Gruppierte Räume werden nicht richtig dargestellt (siehe Screenshots)

VG Sebastian
FHEM 5.9 auf Ubuntu LTS-LXC unter Proxmox, IOserver für deconz + CUL via ser2net, Testumgebung: docker pull fhem/fhem
SONOS, alexa-fhem, homebridge, TelegramBot mit msgDialog, livetracking

Offline Reinhart

  • Hero Member
  • *****
  • Beiträge: 1971
Antw:Neuer Style: clavo. Flexibel für alle Geräte
« Antwort #6 am: 25 Juni 2019, 14:10:32 »
Danke für deine Antwort!

Ja, Viewport war nicht gesetzt, sieht jetzt schon viel besser aus. Der Abstand passt beim ersten Eintrag (weil der Text so kurz ist), aber ab der 2.Zeile ist er wieder da. Nur diesmal ist es untereinander und dadurch schon lesbar.

Bei den Readingsgroups habe ich "ValueStyle" gesetzt, da kann ich aber nicht recht aus, weil hier die Balkenanzeige erfolgt. Ich habe auch welche mit cellStyle, der funktioniert aber.
{ "r:1" => 'style="font-weight:bold;;font-size:16px"',"r:2,c:3" => 'style="color:lightgreen;;font-size:18px;;text-align:right"',"r:3,c:3" => 'style="color:green;;font-size:18px;;text-align:right"',"r:4,c:3" => 'style="color:lightgreen;;font-size:18px;;text-align:right"',"r:5,c:3" => 'style="color:green;;font-size:18px;;text-align:right"' }cellStyle

Internals:
   DEF        MQTT2_ebusd_bai:<%sani_supply_temp>,<Vorlauf>,_Vorlauf
 MQTT2_ebusd_bai:<%sani_return_temp>,<Ruecklauf>,_Ruecklauf
 MQTT2_ebusd_bai:<%sani_water_hot>,<Warmwasser>,_Warmwasser
 MQTT2_ebusd_bai:<%sani_buffer_temp_down>,<Speichertemperatur>,_WWSpeicher
 MQTT2_ebusd_bai:<%temp_outside>,<Aussentemperatur>,_Aussentemp
   FUUID      5c928dbe-f33f-27bd-3fef-43624bf26252d954
   NAME       eBusTemperaturBalken
   NR         2758
   NTFY_ORDER 50-eBusTemperaturBalken
   STATE      Initialized
   TYPE       readingsGroup
   mayBeVisible 1
   CONTENT:
     MQTT2_ebusd_bai 1
   CONTENT2:
   DEVICES:
     ARRAY(0x7a35d38)
     ARRAY(0x7545a38)
     ARRAY(0x7545a50)
     ARRAY(0x7545a68)
     ARRAY(0x7b6a1a8)
   fhem:
     lastDefChange 4
     last_update 1561463077.04954
   helper:
     DEF       
     nameStyle  style="color:yellow"
     valueStyle { Balkenanzeige($VALUE) }
     positions:
       MQTT2_ebusd_bai._Aussentemp 5:3
       MQTT2_ebusd_bai._Ruecklauf 2:3
       MQTT2_ebusd_bai._Vorlauf 1:3
       MQTT2_ebusd_bai._WWSpeicher 4:3
       MQTT2_ebusd_bai._Warmwasser 3:3
     values:
       formated:
         undef
         undef
         undef
         ARRAY(0x76357b0)
       orig:
         undef
         undef
         undef
         ARRAY(0x7545ad0)
       prefixsuffix:
         undef
         undef
         undef
         ARRAY(0x7545db8)
Attributes:
   DbLogExclude .*
   model      E_11_eBus_bai_readingsgroup_Status01Balken
   nameStyle  style="color:yellow"
   room       eBus
   valueStyle { Balkenanzeige($VALUE) }
und hier das List mit valueStyle

99_myUtils
sub Balkenanzeige($)
{
    # Zuweisung der übergebenen Variablen
    my ($val) = @_;

    # Konfiguration des maximal übergebenen Werts (hier wäre der höchste zu erwartende Wert = 3)
    my $maxValue = 70;

    # Normalisierung auf 100%-Wert
    my $percent = $val / $maxValue * 100;

    # Definition des valueStyles
    my $stylestring = 'style="'.
        'width: 200px; '.
'text-align:center; '.
'border: 1px solid #ccc ;'.
'background-image: -webkit-linear-gradient(left,red '.$percent.'%, rgba(0,0,0,0) '.$percent.'%); '.
'background-image:    -moz-linear-gradient(left,blue '.$percent.'%, rgba(0,0,0,0) '.$percent.'%); '.
'background-image:     -ms-linear-gradient(left,red '.$percent.'%, rgba(0,0,0,0) '.$percent.'%); '.
'background-image:      -o-linear-gradient(left,red '.$percent.'%, rgba(0,0,0,0) '.$percent.'%); '.
'background-image:         linear-gradient(left,red '.$percent.'%, rgba(0,0,0,0) '.$percent.'%);"';

    # Rückgabe des definierten Strings
    return $stylestring;
}

LG
FHEM auf Raspy4 mit Buster + SSD, mit FS20, Homematic, ESP8266, Sonoff, Electrodragon, eBus, RPi mit COC,NanoCUL, MapleCUL, HM-CFG-LAN Adapter, MQTT2, Alexa

Offline xanker

  • Full Member
  • ***
  • Beiträge: 260
Antw:Neuer Style: clavo. Flexibel für alle Geräte
« Antwort #7 am: 25 Juni 2019, 17:47:58 »
schöne Arbeit. Sieht gut aus.  8)
Vielen Dank  ;D

  • Das Logfile wird als Fließtext dargestellt (siehe Screenshot)
  • Gruppierte Räume werden nicht richtig dargestellt (siehe Screenshots)
Danke, beides gefixed

VG Sebastian
Ein Namensbruder  8)


{ "r:1" => 'style="font-weight:bold;;font-size:16px"',"r:2,c:3" => 'style="color:lightgreen;;font-size:18px;;text-align:right"',"r:3,c:3" => 'style="color:green;;font-size:18px;;text-align:right"',"r:4,c:3" => 'style="color:lightgreen;;font-size:18px;;text-align:right"',"r:5,c:3" => 'style="color:green;;font-size:18px;;text-align:right"' }
Das macht micht stutzig. "c:3" sollte für Spalte 3 stehen, es sollte aber nur 2 Spalten geben (Name und Wert/Balken). Wenn es aber so ist, dass das Icon in der ersten Spalte ist und der Name in der zweiten Spalten, dann liegt da das Problem. Weil erwartet wird, dass in der zweiten Spalte der Wert steht und der wird rechtsbündig gesetzt.

Kannst du mir mal den HTML-Code von einer Zeile schicken. Geht in Chrome, wenn du einen Rechtsklick auf den Namen machst und dann auf "Untersuchen" klickst. Schicke mir alles was zwischen dem am nähsten entfernten <tr> Tag steht. Z.B:
<tr class="odd"><td><div class="dname"><a href="/fhem?detail=BZ_Fenster">BZ_Fenster</a></div></td><td informid="BatterieStatus-BZ_Fenster.battery">...</td></tr>
Hier siehst du, dass der Name innerhalb des ersten <td> Tags steht, also in der ersten Spalte ist, der Wert (...) sollte dann in dem darauffolgenden <td> Tag stehen, also der zweiten Spalten.

Generell kannst du aber überall "text-align:right" entfernen, der Style setzt automatisch eine "sinnvolle" Text-Positionierung.

   nameStyle  style="color:yellow"
das Färbt nur den Text gelb, was so neben schrecklich auf dem hellen Hintergrund aussieht  ;D Ist aber auch kein Grund warum der Text rechtsbündig ist.

99_myUtils
sub Balkenanzeige($)
{
        ...
        'width: 200px; '.
        ...
}
Die Zeile kannst du auch rausnehmen, sofern du willst dass die Balken in der Breite automatisch skalieren.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Offline Reinhart

  • Hero Member
  • *****
  • Beiträge: 1971
Antw:Neuer Style: clavo. Flexibel für alle Geräte
« Antwort #8 am: 25 Juni 2019, 20:51:25 »
Danke für die Tipps!

Ich glaube das mit dem cellStyle hast jetzt verwechselt, der funktioniert ja auch mit deinem Style.
Das mit der gelben Farbe ist klar, das ist für den dunklen f18 optimiert um hier maximalen Kontrast zu bekommen.

sub Balkenanzeige($)
{
        ...
        'width: 200px; '.
        ...
}
die width Anweisung kann ich nicht entfernen, weil die die fixe Breite des Balken bestimmt und gerade bei einer readingsgroup mit unterschiedlichen 100% Werten (Bereichen) würde die dann variieren, siehe Bild. 200 sind schon ein guter Wert, sonst macht ein Balken nicht viel Sinn. Die Routine ist auch aus dem Wiki so entnommen und nicht von mir und funktioniert eigentlich gut.

LG
« Letzte Änderung: 25 Juni 2019, 20:53:08 von Reinhart »
FHEM auf Raspy4 mit Buster + SSD, mit FS20, Homematic, ESP8266, Sonoff, Electrodragon, eBus, RPi mit COC,NanoCUL, MapleCUL, HM-CFG-LAN Adapter, MQTT2, Alexa

Offline binford6000

  • Tester
  • Hero Member
  • ****
  • Beiträge: 1072
  • 🏠⚙️💡🛠📱
Antw:Neuer Style: clavo. Flexibel für alle Geräte
« Antwort #9 am: 25 Juni 2019, 22:12:59 »
Zitat
Danke, beides gefixed

Hallo Sebastian,
hab's gerade ausprobiert. Top  8)
VG Sebastian
FHEM 5.9 auf Ubuntu LTS-LXC unter Proxmox, IOserver für deconz + CUL via ser2net, Testumgebung: docker pull fhem/fhem
SONOS, alexa-fhem, homebridge, TelegramBot mit msgDialog, livetracking

Offline ThomasMagnum

  • Full Member
  • ***
  • Beiträge: 143
Antw:Neuer Style: clavo. Flexibel für alle Geräte
« Antwort #10 am: 26 Juni 2019, 12:31:13 »
Hallo xanker,

vielen Dank für den Style, gefällt mir sehr gut.

Ich hab ihn mir mal installiert und erste Tests vorgenommen. Bei Plots die innerhalb einer Gruppe angezeigt werden, verschwindet dieser teilweise. Woran kann das liegen?
Die Vorgaben von Deiner Anleitung wurden alle umgesetzt.

Weiterhin arbeite ich mit "hiddenroom" und "sortRooms". Hierbei habe ich den Effekt das Dein Menü (Icon-Buttons)  nicht sichtbar ist sobald ich "save config" verstecke. Ebenso sind einige Räume nicht sichtbar. Es sind genau die Räume die eine Unterstruktur haben aber nicht "versteckt" sind.

Ich habe die Dateien aus dem ersten Post genommen und als Browser nutze ich Firefox. Bei einem Test mit dem Brower Iron brachte das gleiche Verhalten.

Gruß, Thomas


Offline xanker

  • Full Member
  • ***
  • Beiträge: 260
Antw:Neuer Style: clavo. Flexibel für alle Geräte
« Antwort #11 am: 26 Juni 2019, 20:22:07 »
Bei Plots die innerhalb einer Gruppe angezeigt werden, verschwindet dieser teilweise. Woran kann das liegen?
Das werde ich mir noch anschauen. Wird sicher nur eine Kleinigkeit sein.

Weiterhin arbeite ich mit "hiddenroom" und "sortRooms". Hierbei habe ich den Effekt das Dein Menü (Icon-Buttons)  nicht sichtbar ist sobald ich "save config" verstecke. Ebenso sind einige Räume nicht sichtbar. Es sind genau die Räume die eine Unterstruktur haben aber nicht "versteckt" sind.
Danke für den Hinweis, sobald "Save config" ausgeblendet wurde, haben sich die css-Klassen verschoben, daher kam es zu einer falschen Anzeige. Habe das in der aktuellen Version abgefangen.


Die neue Version erlaubt jetzt eine (vordefinierte) Farbauswahl. Eine komplett freie Farbauswahl gibt es in der nächsten Version
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Online carlos

  • Full Member
  • ***
  • Beiträge: 267
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #12 am: 26 Juni 2019, 23:25:24 »
Bei mir verschwinden die plots ganz.
Gruß

Carlos

FHEM svn auf Gigabyte BRIX,1 UDOO, 3 Raspberry Pi, signalduino, nanoCUL, div. Homematic Komponenten, toom Baumarkt Funksteckdosen, einige sonoffs, hue

Offline xanker

  • Full Member
  • ***
  • Beiträge: 260
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #13 am: 27 Juni 2019, 14:18:29 »
Bei mir verschwinden die plots ganz.

Interessant. Sie sind schon da, nur winzig klein. Könntest du mir sagen was du bei dem plotsize-Attribut vom FHEMWEB-Device gesetzt hast? Ich muss das noch variabel gestalten. Skalieren von SVGs ist etwas eigenwillig im Gegensatz zu Raster-Grafiken.



Update ist draußen. Es lassen sich jetzt viele Einstellungen vornehmen. Steht alles im ersten Post.
« Letzte Änderung: 27 Juni 2019, 16:43:50 von xanker »
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

Online carlos

  • Full Member
  • ***
  • Beiträge: 267
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #14 am: 27 Juni 2019, 17:24:32 »
Wie empfohlen: attr WEB plotsize 800,160
FHEM svn auf Gigabyte BRIX,1 UDOO, 3 Raspberry Pi, signalduino, nanoCUL, div. Homematic Komponenten, toom Baumarkt Funksteckdosen, einige sonoffs, hue

 

decade-submarginal