FHEM Forum

FHEM => Frontends => FHEMWEB => Thema gestartet von: xanker am 24 Juni 2019, 20:28:37

Titel: Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker 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:

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:

Bekannte Bugs:

Potentielle Bugs:

Hinweise:

Installation:

Neue Funktionen / Wünsche:


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
Titel: Antw:Neuer Style: clavo. Flexibel für alle Geräte
Beitrag von: rudolfkoenig 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.
Titel: Antw:Neuer Style: clavo. Flexibel für alle Geräte
Beitrag von: xanker 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.
Titel: Antw:Neuer Style: clavo. Flexibel für alle Geräte
Beitrag von: Reinhart 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
Titel: Antw:Neuer Style: clavo. Flexibel für alle Geräte
Beitrag von: xanker 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
Titel: Antw:Neuer Style: clavo. Flexibel für alle Geräte
Beitrag von: binford6000 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:

VG Sebastian
Titel: Antw:Neuer Style: clavo. Flexibel für alle Geräte
Beitrag von: Reinhart 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
Titel: Antw:Neuer Style: clavo. Flexibel für alle Geräte
Beitrag von: xanker 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.
Titel: Antw:Neuer Style: clavo. Flexibel für alle Geräte
Beitrag von: Reinhart 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
Titel: Antw:Neuer Style: clavo. Flexibel für alle Geräte
Beitrag von: binford6000 am 25 Juni 2019, 22:12:59
Zitat
Danke, beides gefixed

Hallo Sebastian,
hab's gerade ausprobiert. Top  8)
VG Sebastian
Titel: Antw:Neuer Style: clavo. Flexibel für alle Geräte
Beitrag von: ThomasMagnum 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

Titel: Antw:Neuer Style: clavo. Flexibel für alle Geräte
Beitrag von: xanker 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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: carlos am 26 Juni 2019, 23:25:24
Bei mir verschwinden die plots ganz.
Gruß

Carlos

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker 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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: carlos am 27 Juni 2019, 17:24:32
Wie empfohlen: attr WEB plotsize 800,160
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 27 Juni 2019, 19:23:08
Bei Plots die innerhalb einer Gruppe angezeigt werden, verschwindet dieser teilweise. Woran kann das liegen?
...
Ebenso sind einige Räume nicht sichtbar. Es sind genau die Räume die eine Unterstruktur haben aber nicht "versteckt" sind.
Bei mir verschwinden die plots ganz.
sind die Probleme mit der aktuellen Version behoben?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: ThomasMagnum am 28 Juni 2019, 08:18:18
Hallo xanker,

vielen Dank für die neue Version.
Nun sind die Icons noch sichtbar wenn ich "save config" ausblende.

Bei den Plots ist es im Iron Browser nun in Ordnung. In Firefox allerdings ist das Verhalten gleich. Bedeutet die Plots sind halb verschwunden.
Ähnlich verhält es sich mit den Readingsgroups. Im Firefox sind diese fürchterlich verschoben (Anhang), im Iron Browser hingegen sind sie in Ordnung.

Mehr konnte ich leider noch nicht testen.

Gruß, Thomas
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: carlos am 28 Juni 2019, 09:57:48
Bei mir sind die Probleme mit den plots gleich.
Interessanterweise gibt es Unterschiede(nicht bei den plots) im chrome und firefox.
Gruß

Carlos
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 28 Juni 2019, 14:53:31
Bei den Plots ist es im Iron Browser nun in Ordnung. In Firefox allerdings ist das Verhalten gleich. Bedeutet die Plots sind halb verschwunden.
Ähnlich verhält es sich mit den Readingsgroups. Im Firefox sind diese fürchterlich verschoben (Anhang), im Iron Browser hingegen sind sie in Ordnung.
Bei mir sind die Probleme mit den plots gleich.
Interessanterweise gibt es Unterschiede(nicht bei den plots) im chrome und firefox.

Danke für eure Rückmeldung. Ich habe jetzt Firefox durchgetestet. Es gibt ein paar relevante CSS Unterschiede zwischen Chrome und Firefox. Es sollte jetzt alles korrekt in Firefox dargestellt werden. Zudem werden die Plots in Gruppen jetzt auch richtig dargestellt.

Edit:
Gab noch eine Last-Minute Änderung, habe die Breite der SVG Plots bei kleineren Display Größen nicht richtig angepasst
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: carlos am 28 Juni 2019, 15:19:54
Wesentlich besser, aber immer noch Unterschiede.
Firefox ok, aber Chrome zu klein.
Gruß

Carlos
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 28 Juni 2019, 15:38:53
Firefox ok, aber Chrome zu klein.
Danke! Jetzt funktioniert es.

Zudem habe ich die (größer werdenden) Abstände der Plots zum Rand entfernt und stattdessen eine Einstellung "plotMaxWidth" hinzugefügt, damit lässt sich die maximale Plot Breite angeben. Standard sind "100%", aber sinnvoll wäre etwas in die Richtung von "800px", damit die Plots auf großen Monitoren nicht sinnlos riesig werden.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 28 Juni 2019, 21:47:54
Update:
Die Farben für die SVG Plots lassen sich nun auch in den Einstellungen konfigurieren. Falls ihr den dark Style nutzt, müsst ihr ihn nochmal auswählen, da der Plot als default auch den bright Style hat.

In der nächsten Version wird es die Möglichkeit geben eigene Presets zu erstellen, neben den schon bestehenden (bright und dark).
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 29 Juni 2019, 09:27:27
Moin Sebastian,
planst du evtl. noch eine Option das Menü versteckt zu lassen ähnlich wie bei f18?
Oder ist es bereits eingebaut und ich hab's übersehen?  :o

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juni 2019, 09:56:23
Moin Sebastian,
planst du evtl. noch eine Option das Menü versteckt zu lassen ähnlich wie bei f18?
Oder ist es bereits eingebaut und ich hab's übersehen?  :o

VG Sebastian
Hey Sebastian,
klar kann ich schnell einbauen, die Frage ist nur, welche Option:
Ich glaube letzteres ist sinnvoller. Beides würde ich aber nur für die Desktop Ansicht einbauen, denn in der Mobilansicht will man wohl kaum immer das Menü sehen.

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: antonwinden am 29 Juni 2019, 10:09:38
Bei mir meldet
set WEB viewport width=device-width, initial-scale=1.0Unknown argument viewport, choose one of clearSvgCache rereadicons
dann noch eine blöde frage:
wo genau gehören die Files hin damit es funktioniert?
danke anton
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juni 2019, 10:14:08
Bei mir meldet
set WEB viewport width=device-width, initial-scale=1.0Unknown argument viewport, choose one of clearSvgCache rereadicons
dann noch eine blöde frage:
wo genau gehören die Files hin damit es funktioniert?
danke anton
Hups, das war ein Fehler meinerseits, es muss heißen "attr WEB viewport width=device-width, initial-scale=1.0". Es ist mittlerweile aber nicht mehr wirklich nötig das zu setzen. Der viewport lässt sich auch per Javascript setzen, was prinzipiell schlecht ist (siehe Post 3). Ich habe das aber umgangen, dass die Seite jetzt erst angezeigt wird, wenn sie komplett gerendert ist, somit macht das nun keinen Unterschied mehr.
Die Dateien müssen in "www/pgm2", danach sollte der Style unter "Select style" auftauchen
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: antonwinden am 29 Juni 2019, 10:52:53
danke für die prompte antwort - gerade für die ehr blöde frage ;-)
gruß anton
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Esjay am 29 Juni 2019, 11:45:42
Guten Morgen,
Wirklich toll was hier gerade entsteht. Ich würde mir 2 Sachen wünschen wollen, wenn irgendwann mal die Muse da ist.
Einmal wäre das ein dragging active wie bei f18, sowie ein kleines Lupen Symbol, worüber sich Devices suchen lassen.
Einen schönen Samstag noch.

Grüße
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juni 2019, 13:07:58
Wirklich toll was hier gerade entsteht.
Vielen Dank! Der Plan bestand schon länger, aber Zeit war Mangelware. Da ich nun meine Promotion abgeschlossen habe, habe ich im Moment seeehr viel Zeit und investiere sie "sinnvoll" ;D

Ich würde mir 2 Sachen wünschen wollen, wenn irgendwann mal die Muse da ist.
Einmal wäre das ein dragging active wie bei f18, sowie ein kleines Lupen Symbol, worüber sich Devices suchen lassen.
Ersteres werde ich wohl nicht implementieren, da ein dragging für die mobile Ansicht keinen Sinn ergibt. Die Idee hinter dem Style ist ja, dass sich alles selbst "sinnvoll" ausrichtet. Was ich allerdings früher oder später noch hinzufügen werde, ist dass sich bei größeren Displays die verschiedenen Tabellen auch automatisch nebeneinander anordnen, da eine extrem Breite Tabelle ja auch keinen Sinn hat und somit nur Platz verschenkt wird.
Die Idee mit dem Lupen Symbol finde ich super, ich habe dazu selbst schon etwas auf der TODO Liste. Ich verwende aktuell den Mod von Phil (https://forum.fhem.de/index.php?topic=82442.0 (https://forum.fhem.de/index.php?topic=82442.0)), dies hat allerdings den Nachteil, dass man keinen Zugriff mehr auf die letzten Commands hat. Man könnte dies aber kombinieren mit dem Mod von FHEMAN (https://forum.fhem.de/index.php?topic=68945.0 (https://forum.fhem.de/index.php?topic=68945.0)), dann könnte man auf die Command-History wie bei einer Shell zugreifen. Ich werde beides wohl in den Style einbauen.

Ich bin aber immer offen für neue Vorschläge/Wünsche!

Einen schönen Samstag noch.
ebenfalls
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 29 Juni 2019, 13:58:14
Moin.
Teste den Style auch grad mal und bin bisher ziemlich angetan.
Grund design ist aufgeräumt, allerdings auch ein wenig langweilig  ;)
Kann leider nicht genauer erklären warum langweilig. Vermutlich der weiße Hintergrund.
Aber da es in erster Linie funktionieren soll, lasse ich mich erstmal darauf ein.

Was mir auffällt, das beim Anpassen eines Attributs mein Browser die Eingabebox ranzoomt und ich danach wieder händisch raus zoomen muss wenn ich fertig bin.
Kann man das irgendwie umgehen?
Also ich versuche zb setList zu setzen, sobald ich in die Textbox klicke wird auf die Breite der Textbox rangezoomt und dabei bleibt es bis ich raus zoome.

Ach und gute Arbeit.

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juni 2019, 14:07:56
Kann leider nicht genauer erklären warum langweilig. Vermutlich der weiße Hintergrund.
Man kann doch unter "Select style" komplett selbst bestimmen wie die Farben sein sollen. Als Presets habe ich bewusst einen hellen und einen dunklen Style erstellt...und in der nächsten Version kommt noch ein Preset mit den "hübschen" Standard FHEM Farben dazu ;D

Was mir auffällt, das beim Anpassen eines Attributs mein Browser die Eingabebox ranzoomt und ich danach wieder händisch raus zoomen muss wenn ich fertig bin.
Kann man das irgendwie umgehen?
Also ich versuche zb setList zu setzen, sobald ich in die Textbox klicke wird auf die Breite der Textbox rangezoomt und dabei bleibt es bis ich raus zoome.
Welchen Browser verwendest du? Smartphone oder Desktop? Ich kann das "Problem" mit Chrome/Firefox und Windows sowie Android nicht nachstellen. Evtl. eine Einstellung in deinem Browser?

Ach und gute Arbeit.
Vielen Dank  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 29 Juni 2019, 14:14:49
Ah ok danke. Hatte nur den Thread überflogen und da klang es als wäre es erst in der Mache mit den Farben.

Hab grad nochmal genauer geguckt. Ist nicht die Textbox sondern schon vorher beim select des Attributes.
iOS und der Browser dürfte egal sein, da das select Barrel überall gleich ist.

Ich häng mal 2 Screens an. Der rechte Rahmen rutscht beim 2. raus durch zoomen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juni 2019, 14:30:48
Ah ok danke. Hatte nur den Thread überflogen und da klang es als wäre es erst in der Mache mit den Farben.

Hab grad nochmal genauer geguckt. Ist nicht die Textbox sondern schon vorher beim select des Attributes.
iOS und der Browser dürfte egal sein, da das select Barrel überall gleich ist.

Ich häng mal 2 Screens an. Der rechte Rahmen rutscht beim 2. raus durch zoomen.
Da werde ich mal einen Blick drauf werfen, das lässt sich sicher verhindern. Safari bzw. iOS/macOS kann ich leider nicht testen, da mir Apple nicht ins Haus kommt  ;D Ich bin also auf solche Bugreports angewiesen. Dass sich die ganzen Browser nicht mal auf einen Standard einigen können.
Interessant ist auch dass der Safari (wie auch Firefox) Tabellen Ränder richtig rendert. Die sind bei dir nämlich ungleich Dick, was eigentlich nicht sein sollte. Beim Chrom wird ein 1px Rand nicht in jedem Fall gleich dick gerendert, weswegen ich das im CSS Code angepasst habe, dadurch wird es jetzt beim Safari/Firefox falsch dargestellt, das muss ich noch Browser-spezifisch gestalten.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 29 Juni 2019, 17:25:55
Ich weiß nicht ob es hilft aber mit f18 gibt es das Problem nicht unter iOS
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juni 2019, 21:36:46
Gibt ein großes Update. Jetzt können eigene Style-Presets erstellt werden. Das Menü bleibt auf Wunsch immer ausgeblendet. Die Commandbar dient als Device-Suche und hat eine Command-History (Pfeiltasten hoch/runter). Zudem sollten die Tabellen Ränder jetzt bei allen Browsern eine konstante Breite haben.

Ich weiß nicht ob es hilft aber mit f18 gibt es das Problem nicht unter iOS
Kannst du es nochmal testen. Ich habe nun etwas an den Select-Boxen gändert, bin mir aber nicht sicher ob das Einfluss auf dein Problem hat.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 29 Juni 2019, 22:05:00
Hat sich am Zoom leider nix geändert.
Aber die neuen Funktionen sind echt top.
Ich werde wohl erstmal bei flex. bleiben  8)

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juni 2019, 10:11:57
Hat sich am Zoom leider nix geändert.
Versuche mal die Version aus dem Anhang (nur JS, an der CSS Datei hat sich nichts geändert). Jetzt dürfte eigentlich nicht mehr gezoomt werden, zudem sollte die Select Boxen jetzt auch richtig im Safari gestyled werden (und nicht mehr grau sein).

Aber die neuen Funktionen sind echt top.
Ich werde wohl erstmal bei flex. bleiben  8)
Na das freut mich doch  8)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: ThomasMagnum am 30 Juni 2019, 11:29:27
Hallo Xanker,

vielen Dank für die schnellen Fehlerbehebungen! Die Plots werden bei mir nun korrekt angezeigt.
Zwei Kleinigkeiten habe ich nun aber doch noch gefunden.

1. Einige Readinggroups werden nicht richtig angezeigt, sonder sind zur Überschriftenzeile hin verschoben. Anbei ein Screenshot der "Wettervorhersage" im Vergleich zum Style f18.
Die rg vom Modul CallList ist ebenfalls verschoben. Evtl. liegt das einfach an der hohen Gesamtbreite der rg.

2. Die Icongröße ist im Vergleich zum f18 etwas kleiner. Ich kann jetzt nicht zuordnen ob das dem flex Style zuzuzordnen ist und gewünscht ist, oder ein Fehler ist.

Ansonsten noch mal vielen Dank für Deine Mühen und den tollen Style.

Gruß, Thomas
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juni 2019, 12:06:39
1. Einige Readinggroups werden nicht richtig angezeigt, sonder sind zur Überschriftenzeile hin verschoben. Anbei ein Screenshot der "Wettervorhersage" im Vergleich zum Style f18.
Die rg vom Modul CallList ist ebenfalls verschoben. Evtl. liegt das einfach an der hohen Gesamtbreite der rg.
Das liegt daran, dass die Tabellen nicht mehr als Tabellen interpretiert werden, jeder Zeile ist unabhängig von den anderen. Ich werde wohl für die Redings-Groups noch eine Option einbauen, dass man diese auch als Tabelle anzeigen kann. Sofern dann der Platz für den Inhalt der Zellen nicht mehr ausreicht, wird die Tabelle horizontal scrollbar.

2. Die Icongröße ist im Vergleich zum f18 etwas kleiner. Ich kann jetzt nicht zuordnen ob das dem flex Style zuzuzordnen ist und gewünscht ist, oder ein Fehler ist.
klar, das ist alles im Style definiert. Ich habe die Icons bewusst auf Texthöhe angepasst, da es sonst zu ungleich hohen Reihen kommt, oder man müsste alle Zeile unnötig höher machen. Ich finde aber die aktuelle Icongröße ist ausreichend. Falls gewünscht könnte ich auch eine Einstellung hinzufügen mit der man die Icongröße selbst bestimmen kann.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 30 Juni 2019, 15:44:43
Moin,

Hast du schon mal über eine leichtere Installation in Fhem inkl. Updates nachgedacht?
Also zb Fhem svn oder per Github?!

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juni 2019, 16:05:01
1. Einige Readinggroups werden nicht richtig angezeigt, sonder sind zur Überschriftenzeile hin verschoben. Anbei ein Screenshot der "Wettervorhersage" im Vergleich zum Style f18.
Die rg vom Modul CallList ist ebenfalls verschoben. Evtl. liegt das einfach an der hohen Gesamtbreite der rg.
Problem ist mit dem neusten Update behoben, Readings-Groups werden jetzt regulär als Tabelle behandelt.

Hast du schon mal über eine leichtere Installation in Fhem inkl. Updates nachgedacht?
Also zb Fhem svn oder per Github?!
Ziel ist es schon, dass es der Style ins offizielle Repo schafft. Vorab wollte ich aber die größten Bugs beseitigen. So langsam wäre das aber angebracht  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 30 Juni 2019, 16:16:57
Ziel ist es schon, dass es der Style ins offizielle Repo schafft. Vorab wollte ich aber die größten Bugs beseitigen. So langsam wäre das aber angebracht  :)
Schön. Das macht das Update einfacher und senkt für viele die Schwelle beim Ausprobieren.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: ThomasMagnum am 01 Juli 2019, 09:31:59
Hallo xanker,

nach dem Update werden die rgs sauber dargestellt bzw. sind horizontal scrollbar.

Zwei Fragen sind mir jetzt noch gekommen.

1. Kann man eine identische Verhaltensweisen auch für die Plots implementieren? Im Style f18 ist dies so gelöst und erhöht in meinen Augen die Lesbarkeit der gesamten Seite, insbesondere natürlich auf Smartphones oder kleinen Devices.

2. Ich habe mal zwei Vergleichscreenshots von f18 und flex erstellt. Im f18 werden auf schmallen Bildschirmen gewisse Informationen nicht dargestellt (z.b. WebCMD). Wäre ein solches Verhalten auch in flex denkbar? Auch dies erhöht in meinen Augen die Lesbarkeit auf kleinen Displays.
Die Möglichkeit eine setlist zu nutzen aollte allerdings erhalten bleiben (siehe Beispiel "speicher-f18vs.flex").

Ich befürchte das sind Wünsche die nur schwer umzusetzen sind  :-[

Gruß, Thomas

Gruß, Thomas
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 01 Juli 2019, 11:54:30
Hallo Sebastian,
ich habe für mein Wand-Tablet einen extra Raum erstellt wo unterschiedlichste Devices zu finden sind.
Dieser Raum läuft momentan unter f18 mit angepasster CSS.
Zum Test habe ich mal ein neues FHEMWEB mit flextouchpad erstellt zum direkten Vergleich (siehe Screenshots).

Was mir so auffällt:

Hier noch der CSS-Code. Er stammt aus einem der f18 Threads hier im Forum. Weiß aber nicht
mehr woher...  :o
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

html, body, html * {
  font-family: 'Roboto';
}

@font-face {
  font-style: normal;
  font-weight: 300;
}

body, input, select, textarea {
    font-weight: 400;
    font-size: 14px;
}

input, textarea {
    border-style: solid;
    border-width: 2px;
    border-color: #DDDDDD;
    border-radius: 0px;
}

input.maininput {
    border-width: 0px;
    height: 20px;
    color: #333333;
}

input[type="text"] {
    -webkit-appearance: none;
    padding: 2px;
}

body.touch a {
    font-size: 16px;
}

#menuBtn {
    position: absolute;
    top: 14px;
    left: 10px;
    width: 28px;
    height: 28px;
    filter: brightness(3);
}

*:focus {
    outline: none;
}

div.pinHeader {
    color: white;
    height: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 8px 5px 8px;
}

div.pinHeader a {
    color: white !important;
}

svg:not([fill]):not(.jssvg) {
    fill: #B0BEC5 !important;
    height: 25px;
    width: 25px;
    padding-right: 10px;
}

table.room, table.block.wide, table.fileList {
    border-top: 0px;
    border-bottom: 2px solid #333333;
}

table.block.wide {
    font-weight: 300;
}

table.block.wide td > div {
    padding: 4px;
}

td {
    padding: 0px;
}

div#content > table {
    width: 100%;
}

div#content::-webkit-scrollbar {
    display: none;
}

div#menu {
    width: 200px;
}

div#menu::-webkit-scrollbar {
    display: none;
}

div#menu > table, div#content > table {
    border-collapse: collapse;
    width: 100%;
}

div#menu > .col_header {
    fill: #3373a6;
    font-size: 14px;
}

div#menu > .col_header:before {
    content: "Menü";
}

div#menu tr {
    border-width: 0px;
    background-color: #494949;
}

div#menu tr tr:hover {
    background-color: #3373a6;
}

div#menu tr:last-child {
    border-bottom: none !important;
}

.room tr > td {
    padding: 4px 8px 4px 8px;
}

div#menu a {
    color: #fff ! important;   
    padding-left: 5px;
    display: block;
}

body.touch #menu table.room div {
    padding: 4px;
}

.slider {
    background-color: #DDDDDD;
    border-radius: 5px;
    margin: 30px 0px 10px 0px;
    height: 4px;
}

.colorpicker_bri .slider {
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
}

.handle {
    font-size: 13px;
    color: white !important;
    position: relative;
    width: 45px;
    height: 20px;
    padding: 0px;
    background: #3373a6;
    border-radius: 8px;
    border-width: 0px;
    bottom: 32px;
}

.handle:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #CCCCCC transparent;
    display: block;
    width: 0;
    bottom: -4px;
    left: 17px;
}

.handle:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px;
    border-radius: 8px;
    border-color: #3373a6;
    box-shadow: 0px 0px 0px 2px white;
    display: block;
    width: 0;
    bottom: -23px;
    left: 14px;
}

.sysmon table tr td {
    padding: 2px;
}

.makeSelect form {
    padding: 5px;
    display: flex;
    align-items: center;
}

.makeSelect {
    display: flex;
    float: left;
    /* clear: left; */
    height: 35px;
    background: #333333;
    width: 100%;
}

.get, .set, .attr {
    margin-bottom: 0px;
}

.downText {
    margin-top: 0px;
}

input[type="text"] {
    color: #FFFFFF;
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

div#devSpecHelp {
    background: #333333;
    width: 100%;
    padding-top: 5px;
    margin-bottom: 0px;
}

.SVGplot * {
    padding-top: 5px;
}

.border {
    stroke: #fff !important;
    fill: #333333 !important;
}
input#md_freeText {
    color: #000000;
}

.room div:hover svg path {
    fill: #FFFFFF;
}

.roomBlock3 div, .roomBlock5 div {
  height: 30px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 30px;
  overflow: hidden;
}

.roomBlock1 div, .roomBlock2 div, .roomBlock4 div {
  height: 25px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 25px;
  overflow: hidden;
  display: flex;
}

canvas.flot-base {
    width: 100% !important;
}

.panel-title {
    -webkit-box-pack: left !important;
    -ms-flex-pack: left !important;
    justify-content: left !important;
    padding: 4px !important;
}

input.maininput {
    border-radius: 10px;
    border: 1px solid #000000;
}

table.block.wide.readings.wrapcolumns td:nth-last-child(1) {
    width: 200px;
    text-align: right;
    padding-right: 4px;
}

.dval a {
    color: #a6a033 !important;
}

table.block.wide.internals.wrapcolumns a {
    color: #a6a033 !important;
}

a#DEFa {
    padding: 4px;
}
.rc_body {
background: #111111;
}

Vielleicht hilft dir die Gegenüberstellung von f18 zu flex etwas  ;)
Sag Bescheid wenn ich noch was testen soll.

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 01 Juli 2019, 12:12:15
1. Kann man eine identische Verhaltensweisen auch für die Plots implementieren? Im Style f18 ist dies so gelöst und erhöht in meinen Augen die Lesbarkeit der gesamten Seite, insbesondere natürlich auf Smartphones oder kleinen Devices.
2. Ich habe mal zwei Vergleichscreenshots von f18 und flex erstellt. Im f18 werden auf schmallen Bildschirmen gewisse Informationen nicht dargestellt (z.b. WebCMD). Wäre ein solches Verhalten auch in flex denkbar? Auch dies erhöht in meinen Augen die Lesbarkeit auf kleinen Displays.
Die Möglichkeit eine setlist zu nutzen aollte allerdings erhalten bleiben (siehe Beispiel "speicher-f18vs.flex").
Hi Thomas, war beides kein Problem und ist in der aktuellen Version eingebaut (Einstellungssache): "plotMinWidth" erlaubt eine minimale Plot-Breite anzugeben, sofern der Inhalt dann nicht komplett dargestellt werden kann, wird der Plot horizontal scrollbar. "hideWebcmdOnSmallScreen" erlaubt das ausblenden von den Webcmds, dies ist so implementiert, dass bei unter 800px Breite die Webcmds ausgeblendet werden, die nicht mehr angezeigt werden können, bei unter 500px Breite werden dann alle Webcmds ausgeblendet unabhängig davon ob sie theoretisch noch Platz in der Reihe haben würden.

Was mir so auffällt:
  • Die Symbole sind viel kleiner
  • Die RC vom SONOSPLAYER wird neben Slebigen angeziegt: TOP! Leider nur viel zu klein und damit unbedienbar
  • Die Symbole vom WeatherasHTML sind viel zu klein
  • Der QR-Code vom Gäste-WLAN ist auch wiel zu klein
Sag Bescheid wenn ich noch was testen soll.
Das werde ich mir anschauen, ich habe die Selektoren für die Icons wohl nicht strikt genug gesetzt, daher werden alle Icons auf die gleiche Größe gedrückt wie z.B. das Device Icon. Sofern ich noch Informationen brauchen sollte, melde ich mich.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: CoolTux am 01 Juli 2019, 12:41:45
Hallo Xanker,

Dein neuer FHEMWEB Styl wird heute Abend Thema im Monatsrückblick sein. Eventuell magst ja dabei sein und sogar etwas dazu sagen.
https://forum.fhem.de/index.php/topic,101580.0.html


Grüße
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 01 Juli 2019, 13:41:04
Was mir so auffällt:
  • Die Symbole sind viel kleiner
  • Die RC vom SONOSPLAYER wird neben Slebigen angeziegt: TOP! Leider nur viel zu klein und damit unbedienbar
  • Die Symbole vom WeatherasHTML sind viel zu klein
  • Der QR-Code vom Gäste-WLAN ist auch viel zu klein
Hey Sebastian, ich habe nochmal eine neue Version hochgeladen. Nun sollten die Icons nicht mehr zu klein sein, zudem sollten die Tabellen, welche innerhalb einer Tabelle sind jetzt "schöner" angezeigt werden. Ich freue mich über dein Feedback :)

Dein neuer FHEMWEB Styl wird heute Abend Thema im Monatsrückblick sein. Eventuell magst ja dabei sein und sogar etwas dazu sagen.
https://forum.fhem.de/index.php/topic,101580.0.html
Oh, das freut mich, ich wäre sehr gerne dabei, aber ich habe heute Abend leider keine Zeit. Wann anders wäre ich dazu aber gerne bereit!
Danke an der Stelle auch an Maui für den Vorschlag :)

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 01 Juli 2019, 14:28:10
Hey Sebastian, ich habe nochmal eine neue Version hochgeladen. Nun sollten die Icons nicht mehr zu klein sein, zudem sollten die Tabellen, welche innerhalb einer Tabelle sind jetzt "schöner" angezeigt werden. Ich freue mich über dein Feedback :)

Klaro, hier mein Feedback:

Details siehe Screenshot...
VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: carlos am 01 Juli 2019, 17:17:06
Habe gerade gemerkt, dass beim HMCCU device die icons sehr groß sind.

Gruß
Carlos
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 01 Juli 2019, 18:48:22
Was mir noch aufgefallen ist, bei devices mit einem setList on,off wird das on und das off in einer eigenen Zeile dargestellt. Sieht nicht so gewollt aus?!
Vor allem wird das auch in dem Raum so angezeigt und nicht nur in den Details.

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 01 Juli 2019, 18:54:36
  • Die Symbole sind immer noch klein
  • Die RC vom SONOSPLAYER wird neben Selbigen angeziegt: TOP! Du hast es aber zu gut gemeint mit der Größe  ;D
  • Die Symbole vom WeatherasHTML sind korrekt, allerdings wird alles untereinander angezeigt
  • Der QR-Code vom Gäste-WLAN ist korrekt skaliert
Habe gerade gemerkt, dass beim HMCCU device die icons sehr groß sind.
Hups, da habe ich nun für die anderen Icons keine Größen-Limitierung mehr gesetzt, und die unskalierten SVGs haben wohl alle ein riesiges Ausmaß. Habe nochmal eine Version hochgeladen welche die Icon-Größe limitiert auf 150% der "normalen" Icon-Größe. Das Weather-HTML wird jetzt auch richtig angezeigt. Wenn die Breite nicht ausreicht, wird es horizontal scrollbar.

Was mir noch aufgefallen ist, bei devices mit einem setList on,off wird das on und das off in einer eigenen Zeile dargestellt. Sieht nicht so gewollt aus?!
Ja, das ist noch eine Notlösung. Problem: Ich will, dass sobald eine gewisse Breite unterschritten wird, die Webcmd in die zweite Reihe kommen, damit der Status von allen Devices immer rechtsbündig in der ersten Reihe ist. Es gibt für die flex-Container zwar den CSS Befehl "break-after" bzw. "break-before" (https://www.w3.org/TR/css-flexbox-1/#pagination (https://www.w3.org/TR/css-flexbox-1/#pagination)), diese werden aber noch von keinem Browser unterstützt. Daher habe ich es bisher so gemacht, dass dann das erste Webcmd eine Breite von 100% bekommt, dadurch wird auch ein Zeilenumbruch forciert, mit dem Nachteil, dass dann natürlich die zweite Zeile voll eingenommen wird. Ich habe bisher leider noch keine bessere Lösung gefunden. Edit: Problem gelöst
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 01 Juli 2019, 22:30:15
Sehr gut. Danke. Funktioniert.

Was mir grad noch auffällt (schwer zu beschreiben):
Beim scrollen zieht flex auf dem Handy (iOS) nicht nach. Also wenn ich scrolle, dann bewegt er sich nur so lange wie ich aktiv scrolle. Bei f18 zb da zieht er nach bis ich stoppe.
So ist ein schnelles scrollen möglich.
Auch hier im Forum geht das, ich glaube auch das es üblich ist.

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 01 Juli 2019, 22:38:50
Sehr gut. Danke. Funktioniert.

Was mir grad noch auffällt (schwer zu beschreiben):
Beim scrollen zieht flex auf dem Handy (iOS) nicht nach. Also wenn ich scrolle, dann bewegt er sich nur so lange wie ich aktiv scrolle. Bei f18 zb da zieht er nach bis ich stoppe.
So ist ein schnelles scrollen möglich.
Auch hier im Forum geht das, ich glaube auch das es üblich ist.

Gruß
Maui

Den Effekt habe ich auch bemerkt   :o
VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 Juli 2019, 12:20:30
Beim scrollen zieht flex auf dem Handy (iOS) nicht nach. Also wenn ich scrolle, dann bewegt er sich nur so lange wie ich aktiv scrolle. Bei f18 zb da zieht er nach bis ich stoppe. So ist ein schnelles scrollen möglich.
Den Effekt habe ich auch bemerkt   :o
Also ich kann mir erklären warum das so ist: Es ist nicht die ganze Weboberfläche scrollbar, sondern nur das <div> welches den Haupt-Content enthält. Ich habe dies so implementiert, weil sonst die Scrollbar unterhalb bzw. neben der Commandbar sichtbar wäre. Ich verstehe allerdings nicht, warum Safari bei scrollbaren <div> nicht das "normale" Scrollverhalten implementiert hat, denn mit allen anderen Browsern (Chrome,Firefox,IE) funktioniert das einwandfrei. Ich würde das ungern abändern, aber ich schaue mal ob ich eine Lösung finde.

Es gibt übrigens ein neues Update und ab jetzt per Repository (siehe 1. Post).
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 02 Juli 2019, 13:03:42
Auch mit Firefox habe ich den gleichen Effekt.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 Juli 2019, 13:06:14
Auch mit Firefox habe ich den gleichen Effekt.
Dann ist es wohl ein iOS/Apple Problem. Unter Android und Windows (Surface) funktioniert das einwandfrei.

Edit: liegt/lag tatsächlich an iOS (siehe https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/). Habe das nun hinzugefügt, jetzt sollte sich das Scrollen wie gewünscht verhalten.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: andy19850 am 02 Juli 2019, 14:07:28
Gelungene Arbeit!
Sind die Icons (devstate) kleiner als im Standard oder habe ich eine Einstellung übersehen? Die cmd Icons sind "normal".

Bei meinem iPhone überlebt das Menü einen Wechsel Landscape/Protrait nicht. Drehe ich in den Landscape Modus wird das Menü richtigerweise abgeschnitten. Eine Drehung zurück, bleibt es abgeschnitten bis ich Safari hart beende.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 Juli 2019, 14:16:24
Gelungene Arbeit!
Vielen Dank  :)

Sind die Icons (devstate) kleiner als im Standard oder habe ich eine Einstellung übersehen? Die cmd Icons sind "normal".
Ja, die sind kleiner. Ich habe bisher noch keine perfekte Lösung gefunden. Zum einen will ich die Icons nicht zu groß haben (auf jeden Fall nicht so groß wie beim Standard Style, da die mMn viel zu groß sind), auf der anderen Seite müssen sie natürlich groß genug sein um sie "sicher" anklicken zu können. Aktuell sind Device-Icon und Devstate-Icon gleich "klein" alle anderen sind 50% größer. Ich hätte gerne eine konstante Höhe von allen Zeilen, aber es sollte durch die Icons nicht zu viel "Spielraum" entstehen. Ich werde wohl eine Einstellung hinzufügen um die Icon-Größe selbst zu bestimmen. Für andere Vorschläge bin ich aber offen! Aktuell gibt es ja schon die Möglichkeit die komplette Seite zu skalieren.

Bei meinem iPhone überlebt das Menü einen Wechsel Landscape/Protrait nicht. Drehe ich in den Landscape Modus wird das Menü richtigerweise abgeschnitten. Eine Drehung zurück, bleibt es abgeschnitten bis ich Safari hart beende.
Interessant, das höre ich jetzt zum ersten Mal. Was meinst du mit "abgeschnitten"? Könntest du vielleicht ein Screenshot machen? Ich habe kein Apple Gerät zum Testen. Kann der Effekt von anderen iPhone Nutzern bestätigt werden?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 02 Juli 2019, 15:02:15
Sieht nicht schlecht aus, wenn auch nicht wirklich modern. Aber das ist wohl eher FHEMWEB geschuldet.

Ich finde:

Ich möchte Deine Arbeit absolut nicht schlecht machen, aber wirklich schön und modern finde ich diesen Style auch nicht.
Was m.E. für schön und modern fehlt sind:

Das wären dann erst einmal meine Anregungen.
Und bitte verstehe meine Kritik nicht falsch, aber ich denke rein über CSS und JS wird FHEM nie wirklich schön werden. Es müsste an der Basis (FHEMWEB) geschraubt werden.

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 02 Juli 2019, 15:07:22
Ach ja noch was:
in der Detailansicht fehlt hinter get, set und attr der Name des Devices (.downText).

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: rudolfkoenig am 02 Juli 2019, 15:13:54
Zitat
Und bitte verstehe meine Kritik nicht falsch, aber ich denke rein über CSS und JS wird FHEM nie wirklich schön werden. Es müsste an der Basis (FHEMWEB) geschraubt werden.
Seit wann untersagt FHEMWEB ein eigenstaendiges Layout aus dem jsonlist Output aufzubauen?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 Juli 2019, 15:47:02
Sieht nicht schlecht aus, wenn auch nicht wirklich modern. Aber das ist wohl eher FHEMWEB geschuldet.
...
  • neu (und schöner) gestylte Bedienelemente wie Dropdowns, Radiobuttons, Selects und Inputs (checkbox hast Du ja schon überarbeitet)
  • moderner gestylte Widgets,
  • vielleicht eine Überarbeitung (oder neue Version) von FHEMWEB (z.B. FHEMWEBNG) um die Tabellenlayouts los zu werden? (ich weiß, das ist nicht Deine Baustelle)
"Modern" war auch nicht zwingend mein Ziel, dafür gibt es andere Frontends. Ich wollte einen Style erstellen, welcher sowohl am PC als auch Mobil gut zu bedienen ist, ohne Einschränkungen (wie webcmds auszublenden). Die Widgets werde ich früher oder später aber noch anpassen, allerdings sehe ich hier keine Priorität, der Style ist immerhin noch in der Entwicklung.

Ich finde:
  • die Icons zu klein,
  • es unschön dass man keinen Raum (z.B. Event monitor) mehr mit "Rechtsklick->Link in neuem Tab öffnen" in einem neuen Tab öffnen kann, da die Links nun über onclick gesteuert werden - zum konfigurieren brauche ich meist mehrere offene FHEM-Tabs,
  • es nicht schön dass in table.wide die td nun untereinander (block) statt nebeneinander (table-cell) angezeigt werden
Wie schon in anderen Posts geschrieben, für die Icon-Größe muss ich noch eine "schöne" Lösung finden. Der Punkt mit den Links ist mir bisher noch gar nicht aufgefallen, das lag an dem Suffix "touchpad", dadurch hat FHEMWEB alle Links zu "onclicks" gemacht, ich habe den Style nun umbenannt. Vielen Dank für den Hinweis!
Zu den Tabellen: das komplette Layout ist mit Flex-Container gestaltet, somit ist eine Tabelle ohnehin keine Tabelle mehr. Es ist alles auf block gesetzt, da sich hierdurch alle Elemente gleich verhalten, denn die Eigenschaften von einem block können durchaus sehr verschieden zu table-cells, table-rows etc. sein. Zudem sollen sich die einzelnen Elemente bei kleineren Displays auch halbwegs sinnvoll anordnen, ohne dass horizontales Scrollen nötig ist, und das geht nun mal nur wenn sie auch untereinander sind. Allerdings kann dies (aktuell) noch unschöne Effekte auf HTML Output von irgendwelchen Modulen haben. Aber bisher gab es keine weiteren Meldungen, evtl. kannst du ja einen Screenshot liefern was "nicht schön" bei dir ist.

Ich möchte Deine Arbeit absolut nicht schlecht machen, aber wirklich schön und modern finde ich diesen Style auch nicht.
...
Und bitte verstehe meine Kritik nicht falsch, aber ich denke rein über CSS und JS wird FHEM nie wirklich schön werden. Es müsste an der Basis (FHEMWEB) geschraubt werden.
Das habe ich auch nicht so aufgefasst  ;) aber um es nochmal zu betonen: Es war nicht mein Ziel fancy Effekte oder sowas zu implementieren, sondern eine sinnvolle Ausrichtung (aller) Elemente bei allen Display-Größen, und dabei sollte es auch halbwegs "schick" aussehen. Und zudem sind Geschmäcker ja bekanntlich unterschiedlich :)

in der Detailansicht fehlt hinter get, set und attr der Name des Devices (.downText).
Das ist beabsichtigt, im Header steht der Device Name, da muss kein zusätzlicher Platz für redundante Information verschwendet werden.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 02 Juli 2019, 16:59:39
Dann ist es wohl ein iOS/Apple Problem. Unter Android und Windows (Surface) funktioniert das einwandfrei.

Edit: liegt/lag tatsächlich an iOS (siehe https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/). Habe das nun hinzugefügt, jetzt sollte sich das Scrollen wie gewünscht verhalten.
Genau das meine ich. Auf der Seite funktioniert es auch. Leider scrollt flex mit neuestem Update noch nicht smooth.

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 Juli 2019, 17:01:07
Genau das meine ich. Auf der Seite funktioniert es auch. Leider scrollt flex mit neuestem Update noch nicht smooth.
hmm, komisch. hast du auch den Style nochmal ausgewählt? Ich musste ihn von "flextouchpad" in "flex" umbenennen.




Ich habe die Icons nun alles um 35% vergrößert und alle Icons haben nun wieder die gleiche Größe. Eine Rückmeldung ob die Größe ausreichend ist (oder nicht), wäre super  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 02 Juli 2019, 17:33:07
hmm, komisch. hast du auch den Style nochmal ausgewählt? Ich musste ihn von "flextouchpad" in "flex" umbenennen.
My fault. Hatte ich zwar gelesen aber nicht geändert.  ;)
Jetzt flutscht es.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 Juli 2019, 17:40:59
My fault. Hatte ich zwar gelesen aber nicht geändert.  ;)
Jetzt flutscht es.
Nur weil man es liest, heißt das noch lange nicht, dass es auch im Kopf angekommen ist, das Problem kenne ich zu gut  ;D
Aber sehr schön, dass es jetzt funktioniert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: urmel86 am 03 Juli 2019, 12:08:20
Hallo xanker,

spitzen Style, gefällt mir sehr gut. Hab meine Seiten bisher nur überflogen, es sieht aber fast alles gut aus.
Ein Problem habe ich mit meinen RGB Leuchten, in FHEMWEB steuer ich die über HSV Schieber. Am Desktop wenn ausreichend Platz da ist sehe ich allerdings nur einen von drei Schiebern. Wenn der Platz weniger wird tauchen die anderen beiden darunter auch auf. Hab zwei Bilder angehängt um es zu verdeutlichen. In der Detailansicht des Devices sieht es genauso aus.

Gruß Marco

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 03 Juli 2019, 12:14:31
spitzen Style, gefällt mir sehr gut.
Vielen Dank, freut mich wenn auch andere daran ihre Freude haben :)

Ein Problem habe ich mit meinen RGB Leuchten, in FHEMWEB steuer ich die über HSV Schieber. Am Desktop wenn ausreichend Platz da ist sehe ich allerdings nur einen von drei Schiebern. Wenn der Platz weniger wird tauchen die anderen beiden darunter auch auf. Hab zwei Bilder angehängt um es zu verdeutlichen. In der Detailansicht des Devices sieht es genauso aus.
Sehr komisch, ich verwende auch mehrere Slider und die werden alle korrekt dargestellt (siehe Screenshots im ersten Post). Kannst du mal bitte den Inhalt vom webCmd Attribut posten? Ich verwende z.B. "pct:hue:sat:ct 490:ct 380:ct 160"

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: urmel86 am 03 Juli 2019, 12:40:26
Auf deinem Screenshot sehe ich dass die Slider bei dir in einer Reihe angeordnet sind. Ich hab es so eingerichtet:

webCmd rgb:rgb ff0000:rgb FFFF00:rgb 00ff00:rgb 0000ff::on:off
widgetOverride rgb:colorpicker,HSV,0,1,359

damit wurden die drei Slider untereinander angezeigt. wenn ich es richtig erkenne sind sie in deinem Style auch da, nur die Zeile ist nicht hoch genug und schneidet die unteren beiden Slider ab.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 03 Juli 2019, 13:01:34
Auf deinem Screenshot sehe ich dass die Slider bei dir in einer Reihe angeordnet sind. Ich hab es so eingerichtet:

webCmd rgb:rgb ff0000:rgb FFFF00:rgb 00ff00:rgb 0000ff::on:off
widgetOverride rgb:colorpicker,HSV,0,1,359

damit wurden die drei Slider untereinander angezeigt. wenn ich es richtig erkenne sind sie in deinem Style auch da, nur die Zeile ist nicht hoch genug und schneidet die unteren beiden Slider ab.
Hmm ok, das Problem ist widgetOverride, dadurch werden alle drei Slider in einer Zelle angezeigt zudem sind noch <br> Tags (also Zeilenumbrüche) zwischen den Slidern. So einen Fall habe ich noch nicht abgefangen, da sonst immer nur ein Command/Widget in einer Zelle ist. Ich schaue male wie ich das Problem lösen kann.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 03 Juli 2019, 13:48:08
Auf deinem Screenshot sehe ich dass die Slider bei dir in einer Reihe angeordnet sind. Ich hab es so eingerichtet:

webCmd rgb:rgb ff0000:rgb FFFF00:rgb 00ff00:rgb 0000ff::on:off
widgetOverride rgb:colorpicker,HSV,0,1,359

damit wurden die drei Slider untereinander angezeigt. wenn ich es richtig erkenne sind sie in deinem Style auch da, nur die Zeile ist nicht hoch genug und schneidet die unteren beiden Slider ab.
So, der HSV slider wird nun korrekt angezeigt. Ich würde aber empfehlen, sofern das Modul das her gibt, die webCmds getrennt zu definieren (also hue, sat, pct) anstatt den RGB colorpicker zu einem HSV slider zu machen. Problem ist, wie gesagt, dass drei Slider in einer Zelle sind, somit funktioniert das flex-Verhalten nicht. Ich könnte das zwar hacky über Javascript ändern, halte ich aber für quatsch. Es ist jetzt so implementiert, dass die drei Slider nebeneinander angezeigt werden, sofern genug Platz ist, und ansonsten untereinander.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: urmel86 am 03 Juli 2019, 19:54:46
Zitat
So, der HSV slider wird nun korrekt angezeigt. Ich würde aber empfehlen, sofern das Modul das her gibt, die webCmds getrennt zu definieren (also hue, sat, pct) anstatt den RGB colorpicker zu einem HSV slider zu machen. Problem ist, wie gesagt, dass drei Slider in einer Zelle sind, somit funktioniert das flex-Verhalten nicht. Ich könnte das zwar hacky über Javascript ändern, halte ich aber für quatsch. Es ist jetzt so implementiert, dass die drei Slider nebeneinander angezeigt werden, sofern genug Platz ist, und ansonsten untereinander.

Das pass für mich so, vielen Dank für's schnelle Update! Die webCmds getrennt zu definieren werde ich auch noch mal testen.

Gruß Marco
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 04 Juli 2019, 08:26:52
Mir ist noch was aufgefallen. Beim Wechsel auf Querformat kommt man nicht mehr ans Ende des Menüs. Siehe Screenshot.
Wechsel ich dann zurück, so stellt er das Menü auch nur noch auf der halben Höhe dar (alte Höhe beim Querformat)

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 Juli 2019, 08:44:32
Mir ist noch was aufgefallen. Beim Wechsel auf Querformat kommt man nicht mehr ans Ende des Menüs. Siehe Screenshot.
Wechsel ich dann zurück, so stellt er das Menü auch nur noch auf der halben Höhe dar (alte Höhe beim Querformat)
Das werde ich mir mal anschauen, andy19850 hat das auch schon angemerkt. Das ist wohl auch wieder ein spezifisches Safari/iOS Problem, ich kann mir auf Anhieb allerdings nicht erklären woran das liegen könnte.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 Juli 2019, 08:59:49
Mir ist noch was aufgefallen. Beim Wechsel auf Querformat kommt man nicht mehr ans Ende des Menüs. Siehe Screenshot.
Wechsel ich dann zurück, so stellt er das Menü auch nur noch auf der halben Höhe dar (alte Höhe beim Querformat)
Ich habe eine Lösung für ein ähnliches Problem gefunden (https://stackoverflow.com/questions/23893973/webkit-overflow-scrolling-touch-orientation-change-issue). Ich habe das mal eingebaut, weiß aber nicht ob es das Problem löst. Der Hauptcontent lässt sich bei einem Wechseln noch problemlos scrollen? Und wie ist es wenn du im Landscape die Seite öffnest und dann auf Portrait wechselst?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 04 Juli 2019, 11:45:04
Klappt noch nicht.
Es betrifft wirklich nur das Menü und auch nur von Portrait zu Landscape.
Was mir noch aufgefallen ist: beim scrollen ans Ende bleibt er gerne mal kleben wenn man noch weiter scrollt. Hängt vielleicht mit dem smooth zusammen. Ist schwer zu erklären. Wenn man am Ende ist und weiter scrollt dann kommt man erstmal ein paar Sekunden nicht mehr hoch. Meine Vermutung wäre, er scrollt weiter nach unten ins nichts nach?!

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 Juli 2019, 16:55:40
Klappt noch nicht.
Es betrifft wirklich nur das Menü und auch nur von Portrait zu Landscape.
Was mir noch aufgefallen ist: beim scrollen ans Ende bleibt er gerne mal kleben wenn man noch weiter scrollt. Hängt vielleicht mit dem smooth zusammen. Ist schwer zu erklären. Wenn man am Ende ist und weiter scrollt dann kommt man erstmal ein paar Sekunden nicht mehr hoch. Meine Vermutung wäre, er scrollt weiter nach unten ins nichts nach?!
Ich habe das Menü nun nochmal neu strukturiert, ich hoffe dadurch ist das Problem nun gelöst. Zuvor waren die Menü Icons innerhalb des scrollbaren Menü Elements, aber fixiert an der Oberseite, ich könnte mir vorstellen, dass das evtl. das Problem war.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 04 Juli 2019, 18:36:43
Ich habe das Menü nun nochmal neu strukturiert, ich hoffe dadurch ist das Problem nun gelöst. Zuvor waren die Menü Icons innerhalb des scrollbaren Menü Elements, aber fixiert an der Oberseite, ich könnte mir vorstellen, dass das evtl. das Problem war.
Ist behoben Danke. Das kleben ist allerdings noch da.
Ich schaue morgen mal auf einem Androiden ob das ein iOS Ding ist.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 Juli 2019, 18:40:18
Ist behoben Danke. Das kleben ist allerdings noch da.
Ich schaue morgen mal auf einem Androiden ob das ein iOS Ding ist.
Also ich kann unter Android und Windows kein solches "kleben" feststellen. Ist das nur beim Menü, oder auch beim Hauptinhalt?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 05 Juli 2019, 11:01:39
Moin so jetzt konnte ich unter Android auch testen.
Ist ein reines iOS Ding allerdings im Menü als auch auf der Hauptseite möglich.
Gefühlt tritt es nur dann auf, wenn man schon am Ende des Inhalts (gescrollt) ist und dann noch mal nachscrollt.
Bei der css tricks Seite kann ich das nicht nachstellen, da dort sich dann die Hauptseite bewegt.
@binford: kriegst du so ein kleben auch hin?

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 05 Juli 2019, 13:59:57
Moin so jetzt konnte ich unter Android auch testen.
Ist ein reines iOS Ding allerdings im Menü als auch auf der Hauptseite möglich.
Gefühlt tritt es nur dann auf, wenn man schon am Ende des Inhalts (gescrollt) ist und dann noch mal nachscrollt.
Bei der css tricks Seite kann ich das nicht nachstellen, da dort sich dann die Hauptseite bewegt.
@binford: kriegst du so ein kleben auch hin?
Also Google hilft mir da auch nicht weiter, ich finde nichts dazu. Das liegt aber allein schon daran, dass ich nicht weiß wie man dieses Problem am besten benennt. Ich kann mir auch nicht vorstellen an was das liegen könnte.

Ich habe jetzt mal per Javascript einen Check eingebaut: sofern schon bis ganz nach unten gescrollt wurde, werden weitere "scroll-down-Events" unterdrückt. Evtl. hilft das?!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 06 Juli 2019, 23:07:04
Hat leider nicht geholfen.
Könnte es evtl das hier sein?

https://stackoverflow.com/questions/39692337/div-scrolling-freezes-sometimes-if-i-use-webkit-overflow-scrolling
 (https://stackoverflow.com/questions/39692337/div-scrolling-freezes-sometimes-if-i-use-webkit-overflow-scrolling)

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 07 Juli 2019, 10:20:22
Hat leider nicht geholfen.
Könnte es evtl das hier sein?

https://stackoverflow.com/questions/39692337/div-scrolling-freezes-sometimes-if-i-use-webkit-overflow-scrolling
 (https://stackoverflow.com/questions/39692337/div-scrolling-freezes-sometimes-if-i-use-webkit-overflow-scrolling)
Da lag ich gar nicht mal so falsch mit meiner Idee, nur habe ich die "scroll" Events gecancelt anstatt die "touchmove" Events. Ich habe es in einer leicht modifizierten Version eingebaut, ich hoffe das Problem ist damit nun gelöst! Falls nicht, muss ich die Scroll-Richtung doch per "touchstart" Event bestimmen. Einfach mal testen :)

Edit: Habe es nun doch per touchstart-Event gemacht, da das doch wichtig ist!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 07 Juli 2019, 21:38:49
Moin ich denke wir haben's bald aber ist leider noch nicht behoben. Hat aber auch bei mir keine Priorität da es ja "selbstverschuldet" ist.

Edit: Sorry geht doch schon. Mein Fehler. Hatte zuletzt mit Firefox unter iOS getestet aber mit Safari klappt es jetzt.

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 Juli 2019, 21:28:56
Moin ich denke wir haben's bald aber ist leider noch nicht behoben. Hat aber auch bei mir keine Priorität da es ja "selbstverschuldet" ist.

Edit: Sorry geht doch schon. Mein Fehler. Hatte zuletzt mit Firefox unter iOS getestet aber mit Safari klappt es jetzt.
Freut mich, dass es jetzt funktioniert  :)

Ich würde mir 2 Sachen wünschen wollen, wenn irgendwann mal die Muse da ist.
Einmal wäre das ein dragging active wie bei f18, sowie ein kleines Lupen Symbol, worüber sich Devices suchen lassen.
Ich habe nun eine Option hinzugefügt, dass sich die Tabellen auch nebeneinander (in zwei Spalten) anordnen, sofern genug Platz ist. Meiner Meinung nach ist das die bessere Alternative zum "dragging active", zum einen sortiert sich alles selbst um den vorhandenen Platz so sinnvoll wie möglich zu nutzen und zudem wird die mobile Ansicht nicht zerstört. Anstatt dem "Lupen Symbol" ist seit gewisser Zeit auch schon die Funktion eingebaut, dass man Devices über die Commandline suchen kann.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 08 Juli 2019, 21:35:07
Hallo, super toller Style. Genau richtig für Anfänger wie mich.

Fragen:
- in einem Raum werden die ersten 2 Tabellen ohne Abstand aufgelistet?
- wie kann ich die Farbe des Pfeils (siehe Kreis) ändern?
- wie kann ich den Abstand der Zeilen im Menu verkleinern sowie die Schrift verkleinern?

danke für die Hilfe.

Lg C
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 Juli 2019, 23:24:21
Hallo, super toller Style. Genau richtig für Anfänger wie mich.
Vielen Dank. Aber 998 Beiträge und über 3 Jahre Mitglied, klingt nicht nach Anfänger  ;)

- in einem Raum werden die ersten 2 Tabellen ohne Abstand aufgelistet?
- wie kann ich die Farbe des Pfeils (siehe Kreis) ändern?
- wie kann ich den Abstand der Zeilen im Menu verkleinern sowie die Schrift verkleinern?
- Sollte mit der aktuellen Version nicht mehr auftreten
- Danke, war ein Fehler im Code. Der Pfeil bekommt jetzt die gleiche Farbe wie der Text
- Ich habe nun die "scalePage" Einstellung bearbeitet, sodass nun Werte zwischen 0,7 und 1,5 möglich sind. Somit lässt sich die ganze Seite zwischen 70% und 150% skalieren, das ist mMn besser als nur die Schriftgröße zu ändern. Dies funktioniert allerdings nicht mit dem Firefox. Oder geht es dir ausschließlich um das Menü? Dann könnte ich auch noch eine Option hinzufügen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 09 Juli 2019, 05:00:26
Guten Morgen,

habe jetzt auch flex probiert.
Sieht gut aus, allerdings werden in manchen Räumen die Devices 2-3mal angezeigt.

Screenshots anbei. (Habe teilweise auf sehr klein gezoomt, um alles auf das Bild zu bekommen)
Betrifft sowohl Chrome unter Linux als auch Chrome unter Android 8 auf meinem Galaxy S7

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 09 Juli 2019, 08:34:17
Sieht gut aus, allerdings werden in manchen Räumen die Devices 2-3mal angezeigt.
Hmm, da scheint was ordentlich schief zu gehen. Bei mir werden keine doppelten Devices angezeigt, nicht mal unter "Everything"...und ich habe immerhin über 300 Devices.

Um die Tabellen (korrekt) nebeneinander anzuzeigen, werden alle in ein div verschoben. Dies ist nötig, da Readingsgroups im HTML an einer ganz anderen stelle sind wie Groups. An der Stelle muss irgendwo die Ursache des Problems sein. Ich habe nochmal ein Update commited bei dem nun striktere Selektoren verwendet werden. Evtl. hilft das?!

Zudem sollten die gruppierte Readingsgroups die volle Breite haben, bei dir füllt die Readingsgroup nicht die komplette Group-Tabelle aus. Auch deine Plots sind viel zu klein, das kann jetzt aber evtl. auch nur am Zoom liegen.

Grundlegend würde ich sagen, dass die Probleme an zusätzlichem CSS/JS Code liegen. Hast du im FHEMWEB Device zusätzliche CSS/JS Dateien definiert? Die überlagerte Uhr im Menü lässt mich das vermuten.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 09 Juli 2019, 16:37:06
Hier mal ein list von meinem WEB. Ansich denke ich, ist nix "schlimmes" drinnen, was das verurchsachen kann.
Hab grad vorhin auch mal testweise das JavaScript-Attribut gelöscht, Cache gelöscht und neu geladen. --> Keine Änderung.
Dass irgendwo was anderes einstrahlt, kann theoretisch schon möglich sein, mein FHEM ist jetzt über ca. 7 Jahre gewachsen :D Also durchaus möglich, dass irgendwo noch Leichen rumlungern

   PORT       8083
   STATE      Initialized
   TYPE       FHEMWEB
   READINGS:
     vor 9 Tagen   state           Initialized
Attributes:
   CssFiles   raumbaum/raumbaum.css
   DbLogExclude .*
   JavaScripts codemirror/fhem_codemirror.js nicedates/fhem_nicedates.js pgm2/clock.js pgm2/hm.js
   codemirrorParam {"jumpToLine" :true}
   column     Pool:PoolTechnik|PoolLog Erdgeschoß:Wohnzimmer,Küche,D_Schlafzimmer,Sonstiges,Strom_Licht,Fenster|Temp_WZ,Wetterstation|global
   FD         6
   FUUID      5c59c845-f33f-d004-64d0-014993da0dbdb2c3
   NAME       WEB
   NR         10
   NTFY_ORDER 50-WEB
   PORT       8083
   STATE      Initialized
   TYPE       FHEMWEB
   READINGS:
     2019-06-30 19:19:21   state           Initialized
Attributes:
   CssFiles   raumbaum/raumbaum.css
   DbLogExclude .*
   JavaScripts codemirror/fhem_codemirror.js nicedates/fhem_nicedates.js pgm2/clock.js pgm2/hm.js
   codemirrorParam {"jumpToLine" :true}
   column     Pool:PoolTechnik|PoolLog Erdgeschoß:Wohnzimmer,Küche,D_Schlafzimmer,Sonstiges,Strom_Licht,Fenster|Temp_WZ,Wetterstation|Heizung,Vorschau Technik:Diagramme,Strom|Temps,Wasser,Heizung,rg_StromVerbrauch System:Cubietruck,Cubie2,Defines|Stats2,Stats Wetter:Vorschau,Wolkenmovie,Radar|48StdWetter,Unwetter Information:Information,Verkehr|Wetterstation|Vorschau,Kalender
   confirmJSError 0
   csrfToken  none
   defaultRoom Information
   editConfig 1
   hiddenroom FHEMWEB,DashboardRoom,ProfileRoom
   iconPath   fhemSVG:default:openautomation:fhemSVG
   longpoll   1
   menuEntries Restart FHEM,cmd=shutdown+restart,Update FHEM,cmd=update,Updatecheck,cmd=update+check
   nicedatesParam {"locale" : "de", "mode" : "fromNow","verbose" : "4"}
   plotfork   1
   sortRooms  Information Erdgeschoß Garten Pool Wetter Kalender System Technik
   styleData  {
 "f18": {
  "Pinned.menu": "true",
  "hidePin": true,
  "cols.bg": "444444",
  "cols.fg": "CCCCCC",
  "cols.link": "FF9900",
  "cols.evenrow": "333333",
  "cols.oddrow": "111111",
  "cols.header": "222222",
  "cols.menu": "111111",
  "cols.sel": "333333",
  "cols.inpBack": "444444",
  "savePinChanges": true,
  "showDragger": true,
  "Pos.style_list_Styles": {
   "left": 0,
   "top": 0,
   "width": 300,
   "height": 396,
   "oTop": 20,
   "oLeft": 0
  },
  "Pos.style_list_f18_special": {
   "left": -1,
   "top": 411,
   "width": 300,
   "height": 134,
   "oTop": 40,
   "oLeft": 0
  },
  "Pos.style_list_f18__Room_specific": {
   "left": 0,
   "top": 594,
   "width": 300,
   "height": 481,
   "oTop": 40,
   "oLeft": 0
  },
  "hideLogo": false,
  "fixedInput": false,
  "Pos.Room_Pool_grp_PoolTechnik": {
   "left": 0,
   "top": 0,
   "width": 353,
   "height": 308,
   "oTop": 20,
   "oLeft": 0
  },
  "Pos.Room_Pool_grp__PoolTechnik": {
   "left": 0,
   "top": 20,
   "width": 366,
   "height": 269,
   "oTop": 40,
   "oLeft": 0
  },
  "Pos.Room_Pool_grp_PoolLog": {
   "left": 360,
   "top": 21,
   "width": 426,
   "height": 290,
   "oTop": 40,
   "oLeft": 0
  },
  "Pos.Room_Pool_svgZoomControl": {
   "left": 0,
   "top": 351,
   "width": 1765,
   "height": 0,
   "oTop": 0,
   "oLeft": 0
  },
  "Pos.Room_Pool_SVG_PoolLog_1": {
   "left": 0,
   "top": 537,
   "width": 1765,
   "height": 164,
   "oTop": -164,
   "oLeft": 0
  },
  "Pos.Room_Pool_SVG_PoolLog_2": {
   "left": 0,
   "top": 719,
   "width": 1765,
   "height": 164,
   "oTop": -164,
   "oLeft": 0
  },
  "Pos.Room_Pool_SVG_PoolLog_3": {
   "left": 0,
   "top": 901,
   "width": 1765,
   "height": 164,
   "oTop": -164,
   "oLeft": 0
  }
 },
 "flex": {
  "colorPreset": {},
  "title": "fhem",
  "myUtilsFileName": "myUtils.pm",
  "plotMinWidth": "250px",
  "plotMaxWidth": "100%",
  "scalePage": "1",
  "showClock": false,
  "showRebootButton": true,
  "showUpdateButton": true,
  "showUpdateCheckButton": true,
  "showRereadIconsButton": true,
  "showRawInputButton": true,
  "showSaveButton": true,
  "showRoomDeviceName": true,
  "showMenuAlways": true,
  "enableCommandHistory": true,
  "enableDeviceSearch": true,
  "showReadingsGroupAsTable": true,
  "hideWebcmdOnSmallScreen": false,
  "colorOptionsDetailed": false,
  "color": {
   "HeaderBG": "#06A",
   "HeaderIcon": "#FFF",
   "HeaderText": "#FFF",
   "HeaderBorder": "#06A",
   "MenuBG": "#000",
   "MenuBorder": "#06A",
   "MenuIcon": "#FFF",
   "MenuRoomIcon": "#FFF",
   "MenuText": "#FFF",
   "MenuHoverLink": "#06A",
   "MainBG": "#000",
   "TableHeaderBG": "#06A",
   "TableHeaderText": "#FFF",
   "TableBorder": "#06A",
   "TableOdd": "#000",
   "TableEven": "#222222",
   "TableText": "#e3e3e3",
   "TableHoverRow": "#333333",
   "TableHoverLink": "#06A",
   "TableNewEvent": "#F00",
   "TableIcon": "#06A",
   "SetGetAttrBG": "#333333",
   "SubmitButtonBG": "#06A",
   "SubmitButtonBorder": "#06A",
   "SubmitButtonText": "#FFF",
   "WidgetBorder": "#06A",
   "WidgetText": "#e3e3e3",
   "WidgetHighlight": "#06A",
   "plotBG": "#EEE",
   "plotBorder": "#06A",
   "plotText": "#e3e3e3",
   "plotGrid": "#555",
   "plotMarker": "#F00",
   "plotLine0": "#F00",
   "plotLine1": "#0F0",
   "plotLine2": "#00F",
   "plotLine3": "#F0F",
   "plotLine4": "#A52A2A",
   "plotLine5": "#000",
   "plotLine6": "#808000",
   "plotLine7": "#808080",
   "plotLine8": "#FF0",
   "plotLinePasted": "#000"
  },
  "showTablesSideBySide": true
 }
}
   stylesheetPrefix flex
   widgetOverride singularReadings:textFieldNL-long column:textFieldNL-long devStateIcon:textFieldNL-long

Dass die Plots eher klein sind, liegt daran, dass ich sie in der Breite begrenzt habe, das passt schon, da kann flex nix dafür :D
Wobei sich da auch wieder was auftut:
In der Device-Ansicht wird der Plot mega aufgeblasen, trotz
attr plotsize 380,180Siehe Screenshot

Ausserdem (keine Ahnung, ob du das ändern kannst, wurde vielleicht auch eh schon hier besprochen) werden breite Readingsgroups nicht umgebrochen, sondern rechts einfach abgeschnitten.

lg, Stefan

Edit: Falscher Screenshot :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 09 Juli 2019, 17:21:22
   column     Pool:PoolTechnik|PoolLog Erdgeschoß:Wohnzimmer,Küche,D_Schlafzimmer,Sonstiges,Strom_Licht,Fenster|Temp_WZ,Wetterstation|Heizung,Vorschau Technik:Diagramme,Strom|Temps,Wasser,Heizung,rg_StromVerbrauch System:Cubietruck,Cubie2,Defines|Stats2,Stats Wetter:Vorschau,Wolkenmovie,Radar|48StdWetter,Unwetter Information:Information,Verkehr|Wetterstation|Vorschau,Kalender
Das ist das Problem...ich wusste gar nicht, dass FHEMWEB die Möglichkeit bietet  ;D
Das Attribut musst du vorerst mal löschen, da flex selbst die Möglichkeit bietet Tabellen in mehreren Spalten anzuzeigen. Mal schauen ob ich das Attribut irgenwie in flex einbinden kann.

   JavaScripts codemirror/fhem_codemirror.js nicedates/fhem_nicedates.js pgm2/clock.js pgm2/hm.js
   menuEntries Restart FHEM,cmd=shutdown+restart,Update FHEM,cmd=update,Updatecheck,cmd=update+check
codemirror kannst du eigentlich entfernen, das ist schon in flex integriert. Deine menuEntries sind auch nicht mehr nötig, da ich alles als Icons ins Menü eingebaut habe.

In der Device-Ansicht wird der Plot mega aufgeblasen, trotz
attr plotsize 380,180Siehe Screenshot
Das liegt daran, dass flex die SVGPlots skaliert. Wenn du das nicht willst, musst du in den Einstellungen plotMinWidth/plotMaxWidth auf den gleichen Wert setzen, in deinem Fall auf "380px". Über das plotsize Attribut kannst du im allgemeinen dann die Größe der Schrift/Linien definieren. z.B. würde plotsize 760,360 bedeuten, dass alles halb so groß ist (bei gleicher Plot-Breite). Ich verwenden "attr plotsize 800,250" mit plotMaxWidth 800px und plotMinWidth 400px. So sind die Plots sowohl auf dem Desktop, als auch mobil weder zu groß noch zu klein. Wenn ein plotMinWidth übrigens größer ist als die Display-Breite, dann wird der Plot horizontal scrollbar.

Ausserdem (keine Ahnung, ob du das ändern kannst, wurde vielleicht auch eh schon hier besprochen) werden breite Readingsgroups nicht umgebrochen, sondern rechts einfach abgeschnitten.
Das ist schon korrekt so, die Readingsgroup ist dann horizontal scrollbar. Wenn du das nicht willst, dann musst du in den Einstellugen "showReadingsGroupAsTable" deaktivieren. Dann werden die Zeilen (unabhängig von anderen Zeilen) umgebrochen, so wie es bei allen anderen Tabellen der Fall ist. Allerdings will man ja mit Readingsgroups in der Regel Tabellen darstellen, also dass die Werte immer untereinander stehen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 09 Juli 2019, 17:25:12
Ich sag ja, Leichen in den Tiefen der config :D

Zitat
In der Device-Ansicht wird der Plot mega aufgeblasen
Stört mich nicht, war nur zufall, dass ich das gesehen habe.....In der Device-Ansicht bin ich eh nie drinnen.

Zitat
Allerdings will man ja mit Readingsgroups in der Regel Tabellen darstellen, also dass die Werte immer untereinander stehen.
Stimmt schon, da hatte ich nicht drauf geachtet, ob das scrollbar ist :)
Alles richtig und gut so :D

lg, Ici
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 09 Juli 2019, 17:41:40
Attributes:
   CssFiles   raumbaum/raumbaum.css
Das scheint übrigens auch noch so eine "Leiche" zu sein  ;D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 09 Juli 2019, 18:57:03
Jo, kann sein.

Nächste Frage: Warum wird die readingsHistory im Bild umgebrochen, obwohl genug Platz ist?

Hier das List:
Internals:
   DEF        PoolController:Log.* Sonoff_POW3:POWER.*
   FUUID      5c59c89b-f33f-d004-8bee-65f43ba106f36586
   HAS_DataDumper 1
   NAME       rh_PoolMsgs
   NR         456
   NTFY_ORDER 51-rh_PoolMsgs
   STATE      Initialized
   TYPE       readingsHistory
   mayBeVisible 1
   CONTENT:
     PoolController 1
     Sonoff_POW3 1
   DEVICES:
     ARRAY(0x2bdbc558)
     ARRAY(0x2bcfbb08)
   fhem:
     last_update 1562606681.21776
     history:
       ARRAY(0x2fde2a18)
       ARRAY(0x30030740)
       ARRAY(0x2fa947b0)
       ARRAY(0x2f5340f8)
       ARRAY(0x2f30f6f8)
       ARRAY(0x2f334530)
       ARRAY(0x2bd93550)
       ARRAY(0x2f2ec2b0)
       ARRAY(0x2f2a79d8)
       ARRAY(0x2f2a78e0)
       ARRAY(0x2ed60cf0)
       ARRAY(0x2eb72330)
       ARRAY(0x2f210ae8)
       ARRAY(0x2f1fa198)
Attributes:
   DbLogExclude .*
   alias      PoolLog
   group      PoolLog
   room       Pool
   rows       14
   timestampFormat %d.%m. %H:%M

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 09 Juli 2019, 19:46:59
Nächste Frage: Warum wird die readingsHistory im Bild umgebrochen, obwohl genug Platz ist?
Danke, das war ein falscher CSS Selektor. Jetzt wird die volle Breite genutzt.

Edit: oder auch noch nicht...bei gruppierten readingsHistories stimmt noch was nicht...werde ich gleich beheben

Edit2: jetzt aber...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 11 Juli 2019, 06:55:44
Eine Frage/Bitte noch:

Gibts irgendeine Möglichkeit, dass man die Groups innerhalb eines Raumes sortieren kann (Ausser durch den Namen der Group)?
Früher ging das eben mit dem Columns-Attribut im FHEMWEB. Das geht ja eben mit Flex nimmer.

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 11 Juli 2019, 08:02:54
Mir fallen auch noch 1-2 Sachen ein. Bei f18 springt der Browser beim zurück Button direkt an die vorherige Scroll Position. Das ist bei Everything echt praktisch.
Beim Update werden immer die letzten Einträge im changelog angezeigt auch wenn nur eine Änderung im Update ist.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 11 Juli 2019, 11:26:43
Gibts irgendeine Möglichkeit, dass man die Groups innerhalb eines Raumes sortieren kann (Ausser durch den Namen der Group)?
Früher ging das eben mit dem Columns-Attribut im FHEMWEB. Das geht ja eben mit Flex nimmer.
Ich werde noch eine Kompatibilität mit dem columns-Attribut implementieren. Evtl. bekomme ich das heute noch hin.

Mir fallen auch noch 1-2 Sachen ein. Bei f18 springt der Browser beim zurück Button direkt an die vorherige Scroll Position. Das ist bei Everything echt praktisch.
Beim Update werden immer die letzten Einträge im changelog angezeigt auch wenn nur eine Änderung im Update ist.
Ersteres habe ich nun implementiert. Letzteres verstehe ich nicht ganz. Ist doch normal, dass der changelog angezeigt wird?!

Edit: Ok, jetzt weiß ich was du meinst. Ich habe das Format der CHANGED file mal an das vom Haupt-Repository angelehnt, leider ohne Erfolg, es werden immer alle Einträge angezeigt.

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 11 Juli 2019, 14:20:39
Gibts irgendeine Möglichkeit, dass man die Groups innerhalb eines Raumes sortieren kann (Ausser durch den Namen der Group)?
Früher ging das eben mit dem Columns-Attribut im FHEMWEB. Das geht ja eben mit Flex nimmer.
ok, geht jetzt. Allerdings kann das column-Attribut nur noch für das Sortieren und Ausblenden von Gruppen verwendet werden. Es macht also kein Unterschied ob man mit "|" mehrere Spalten definiert, da dies in flex selbst integriet ist.
Beispiel:
attr <FHEMWEB> column Raum:Gruppe1,Gruppe2|Gruppe3,Gruppe4ist das gleiche wie
attr <FHEMWEB> column Raum:Gruppe1,Gruppe2,Gruppe3,Gruppe4Man kann also nicht explizit definieren was in der zweiten Spalte oben steht, da die Tabellen automatisch so auf die beiden Spalten verteilt werden, sodass die Inhalte möglichst gleichmäßig verteilt sind.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 11 Juli 2019, 21:07:23
Zitat
Allerdings kann das column-Attribut nur noch für das Sortieren und Ausblenden von Gruppen verwendet werden.
Cool, danke.
Glaubst du, es wäre noch möglich (kA ob technisch machbar), dass auch ReadingsGroups vom Column berücksichtigt werden?
Das ist bisher leider immer ein Problem gewesen, dass du eine RG noch zusätzlich in eine Grioup stecken musst, um sie mitzusortieren.

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 11 Juli 2019, 21:34:13
Cool, danke.
Glaubst du, es wäre noch möglich (kA ob technisch machbar), dass auch ReadingsGroups vom Column berücksichtigt werden?
Das geht leider nicht, das müsste im FHEMWEB implementiert werden. Ich könnte zwar per Javascript die komplette Sortierung implementieren, das wäre aber unnötiger Overhead. Was ich aber easy machen könnte, wäre eine zusätzliche Einstellungen, dass bei gruppierten Readingsgroups der Header ausgeblendet wird. In dem Fall könnte man die Group so nennen wie die Readingsgroup und das Ergebnis würde genau so aussehen wie ungruppiert.

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 11 Juli 2019, 21:54:34
Zitat
Was ich aber easy machen könnte, wäre eine zusätzliche Einstellungen, dass bei gruppierten Readingsgroups der Header ausgeblendet wird. In dem Fall könnte man die Group so nennen wie die Readingsgroup und das Ergebnis würde genau so aussehen wie ungruppiert.
Na, das wäre ja schon mal super! Dann fällt der Unterschied ja nicht mehr auf :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 11 Juli 2019, 23:20:53
Guten Abend,

ich habe grosse Freude am Style. Nochmals danke für deine Superarbeit, xanker.

Frage: Wo werden die gespeicherten Styles abgelegt? Ich will mein Style (C_Style) gerne auch auf einem anderen Raspi nutzen.

Danke.
Lg c
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 11 Juli 2019, 23:25:11
ich habe grosse Freude am Style. Nochmals danke für deine Superarbeit, xanker.

Frage: Wo werden die gespeicherten Styles abgelegt? Ich will mein Style (C_Style) gerne auch auf einem anderen Raspi nutzen.
Danke, das freut mich :)

Wenn du ein Preset gespeichert hast, wird es im FHEMWEB device im Attribut "styleData" abgelegt. Du musst also nur den kompletten Inhalt von dem Attribut kopieren und bei dem anderen Raspi einfügen.

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 12 Juli 2019, 09:19:31
Na, das wäre ja schon mal super! Dann fällt der Unterschied ja nicht mehr auf :)
Ich habe gerade gesehen, dass es das als Attribut bei den Readingsgroups gibt: einfach "noheading" auf 1 setzten. Ich habe für diesen Fall noch die Tabellen-Ränder angepasst. Somit sieht nun eine gruppierte Readingsgroup (mit noheading 1) genauso aus wie eine ungruppierte Readingsgroup (mit noheading 0). Und somit können sie dann über das column-Attribut sortiert/ausgeblendet werden.

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 12 Juli 2019, 09:44:21
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 attr WEB column Erdgeschoß:Temp_WZ,KücheBild 2 OHNE column-Attribut
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 12 Juli 2019, 10:00:50
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 attr WEB column Erdgeschoß:Temp_WZ,KücheBild 2 OHNE column-Attribut
Das ist schon richtig so, sonst könnte man ja keine Gruppen ausblenden. Du musst das Attribut so definieren:
attr WEB column Erdgeschoß:Temp_WZ,Küche,.*also noch ein Regex anhängen welches auf alles matched.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 12 Juli 2019, 10:12:51
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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 12 Juli 2019, 12:15:02
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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 13 Juli 2019, 00:14:38
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.
Zitat
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  :P

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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 13 Juli 2019, 04:08:59
Zitat
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

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 13 Juli 2019, 11:51:00
Ich würde solch eine Option sehr begrüßen  :P
...
* 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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 13 Juli 2019, 12:35:57
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 :D

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 13 Juli 2019, 18:53:40
Kleiner Schönheitsvorschlag: Die RegEx fürs Datum dürfte zu locker sein. Es werden auch die ersten drei Octette einer IP eingefärbt :D
da ist was dran  ;D
Habe es gefixed, matched jetzt nur noch auf ein gültiges Datum/Uhrzeit
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 13 Juli 2019, 19:48:55
Danke, alles erledigt. Zu ersterem: Standard ist, dass gewrapped wird. Du musst also die Option "enableLogLineWrap" deaktivieren.
Super danke! Funktioniert :-)
Zitat
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  :o

Zitat
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)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 13 Juli 2019, 19:59:31
Hab ich tatsächlich übersehen dass sich hinter dem Datum noch ein Eingabefeld verbirgt  :o
Kann ja passieren  ;D

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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 13 Juli 2019, 20:09:23
Mit dem letzten Update schreibt mir FHEMWEB jetzt das Logfile voll mit folgender Meldung:
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'.


Edit files:
Der Editor hat auch noch ein Problem in Firefox (Chrome geht) (s. screenshot)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 13 Juli 2019, 22:32:29
Mit dem letzten Update schreibt mir FHEMWEB jetzt das Logfile voll mit folgender Meldung:
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  ;D 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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 13 Juli 2019, 23:01:59
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
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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 13 Juli 2019, 23:46:08
Edit: ist nun alles gefixed.

 :o 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?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 14 Juli 2019, 06:39:23
Guten morgen,

Zitat
Die History im command Feld. Kannst du die auch für flex reaktivieren?
Die gibts doch eh, sogar extra zum aktivieren in den Einstellungen :D

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 14 Juli 2019, 08:03:04
Mir ist grad noch eine kleiner kosmetischer Vorschlag eingefallen:

Beim Klick auf "Devicespecific help" wird zwar die Hilfe unter dem Device eingeblendet, es ist aber nicht ersichtlich, weil unterhalb vom Bildschirmrand.
zB das Dark-style scrollt dann runter, damit der Text ersichtlich ist.
Könntest du das auch implementieren? Würde ja genügen, einfach die ersten paar Zeilen anzuzeigen, damit man auch sieht, dass sich was getan hat ^^

War mir grad vorhin im ersten moment nicht sicher, ob der Brwoser den Klick auf Help angenommen hatte :)

Schönen Sonntag,
 Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 14 Juli 2019, 08:20:19
Die gibts doch eh, sogar extra zum aktivieren in den Einstellungen :D
Ja die Option hab ich gefunden. Aber History erscheint bei mir keine. Gibt's da nen Trick?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 14 Juli 2019, 09:27:56
Zitat
Gibt's da nen Trick?
Wird nicht als Dropdown angezeigt, sondern funktioniert so, wie in einer Linux-Konsole.....Cursor rauf scrollt die letzten Befehle durch :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 14 Juli 2019, 09:48:31
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.. ;)
Wie schon ein paar Seiten früher erwähnt, habe ich gerade glücklicherweise viel Zeit mich dem ganzen anzunehmen, geplant war es nämlich schon ewig. Und zur Farbauswahl: wer die Wahl hat, hat die Qual ;)

- 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?
- Das war eine Outline die durch Fokusieren des Input Feldes angezeigt wurde, habe ich nun ausgeblendet.
- Welchen Browser nutzt du, das Aussehen der Dropdown Liste ist mir unbekannt.
- Funktioniert jetzt :)

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 ;)
Also ich glaube in FHEM gibt es dafür keine Einstellung. Ich könnte das per Javascript machen, aber irgendwie sehe ich da jetzt nicht so den riesen Sinn. In welcher Reihenfolge hättest du es denn gerne?



Links ist Firefox, rechts Chrome.
Firefox: keine Fettschrift der Zeitstempel und Zeilenumbruch.
Chrome: Fettschrift funktioniert, aber die Zeile wird trotz deaktierter Option umgebrochen
Hmm, bist du sicher, dass du die aktuelleste Version verwendet hattest? bei mir funktioniert beides wunderbar bei Chrome und Firefox.

Ja die Option hab ich gefunden. Aber History erscheint bei mir keine. Gibt's da nen Trick?
Wie Stefan geschrieben hat (und wie im Tooltip zu lesen ist), wird das mit den Pfeiltasten (hoch/runter) gesteuert. Ich hab das bewusst implementiert, da sich sonst die "normale" Command-History mit der Device-Suche überlagt. Falls du lieber die "normale" Variante haben willst, musst du enableCommandHistory und enableDeviceSearch deaktivieren.



Würde ja genügen, einfach die ersten paar Zeilen anzuzeigen, damit man auch sieht, dass sich was getan hat ^^
...
Schönen Sonntag,
 Stefan
Gibt Sinn, habe ich implementiert. Ebenfalls noch einen schönen Sonntag :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 14 Juli 2019, 10:16:33
Danke für den Style. Die Dashboardoptik macht sich toll auf meinem Tablet  :)

Ein Vorschlag von mir. Bei Eingabe in der Befehlszeile erscheint bei F18 zum Beispiel
die Befehlshistorie. Sowie auch beim anklicken. Vielleicht hast du eine Lösung.

edit:

Ok wurde schon eingebaut? mit "enableCommandHistory"

edit2:

Ok ja, steht sogar weiter oben. Sorry, da waren andere schneller... :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 14 Juli 2019, 10:45:00
- Das war eine Outline die durch Fokusieren des Input Feldes angezeigt wurde, habe ich nun ausgeblendet.
- Welchen Browser nutzt du, das Aussehen der Dropdown Liste ist mir unbekannt.
- Funktioniert jetzt :)

Also ich glaube in FHEM gibt es dafür keine Einstellung. Ich könnte das per Javascript machen, aber irgendwie sehe ich da jetzt nicht so den riesen Sinn. In welcher Reihenfolge hättest du es denn gerne?

- Super, danke.. Funktioniert
- Ich habe es bei Safari und Chrome auf meinem Mac (10.14) probiert
- Top, geht.

Reihenfolge: Wenn du mich so fragst, hätte ich eigentlich alle Menueinträge flexibel gehandhabt, so dass es keine Gruppen bildet, oder dann nur, wenn ich es will... SIehe Bild..

Lg c
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 14 Juli 2019, 10:57:02
Hmm, bist du sicher, dass du die aktuelleste Version verwendet hattest? bei mir funktioniert beides wunderbar bei Chrome und Firefox.
Ok, ich bin wohl einem Irrtum aufgesessen. enableLogLineWrap war bei mir wieder aktiviert. Kann es sein, dass Einstellungen bei einem Update wieder verloren gehen und wieder default Einstellung aktiv ist

Zitat
Wie Stefan geschrieben hat (und wie im Tooltip zu lesen ist), wird das mit den Pfeiltasten (hoch/runter) gesteuert. Ich hab das bewusst implementiert, da sich sonst die "normale" Command-History mit der Device-Suche überlagt. Falls du lieber die "normale" Variante haben willst, musst du enableCommandHistory und enableDeviceSearch deaktivieren.
Also die Device suche ist genial :-D
Aber ist das nicht ein wenig inkonsequent? Bei der Device-Suche popt die Liste auf und für die Commands benötigt man die Pfeiltasten?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag 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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 14 Juli 2019, 11:53:40
- Ich habe es bei Safari und Chrome auf meinem Mac (10.14) probiert
Hmm, da scheint Apple das wohl komisch implementiert zu haben. Da ich keine Apple Geräte habe, weiß ich nicht wie ich das testen/beheben soll...

Reihenfolge: Wenn du mich so fragst, hätte ich eigentlich alle Menueinträge flexibel gehandhabt, so dass es keine Gruppen bildet, oder dann nur, wenn ich es will... SIehe Bild..
Ich werde mir bei Gelegeheit mal was überlegen, aktuell gibt es noch andere (wichtigere) Baustellen :)



Ok, ich bin wohl einem Irrtum aufgesessen. enableLogLineWrap war bei mir wieder aktiviert. Kann es sein, dass Einstellungen bei einem Update wieder verloren gehen und wieder default Einstellung aktiv ist
Die Einstellung gehen eigentlich nicht verloren. ABER: solange du nicht auf "Save global" klickst, werden sie nur lokal als Cookie gespeichert, was bedeutet, dass die Einstellung auch getrennt für jeden Browser gemacht werden müssen, war das evtl. das Problem?

Aber ist das nicht ein wenig inkonsequent? Bei der Device-Suche popt die Liste auf und für die Commands benötigt man die Pfeiltasten?
Naja, wie soll man es anders machen? Ich könnte zwar beides als Pop-Up Liste machen, aber was bringt eine Autovervollständigung bei der Command History? Zudem ist es bei Konsolen (bash, etc.) üblich, dass die Command-History über die Pfeiltasten gesteuert wird. Allerdings gibt es gerade auch noch das Problem, dass wenn man durch die Command-History geht und dann ein Command auf ein Device matched, dass dann die Device-Suche aufpoppt, das muss ich noch irgendwie beheben.



Bei der letzten Änderung zum Thema Logfile hat sich irgendwo ein kleiner Fehler eingeschlichen:
Seihter ist zw. jeder Logzeile eine Leerzeile.
Komisch, tritt bei mir nicht auf, weder bei Chrome noch bei Firefox. Evtl. mal mit STRG+F5 neu geladen? vielleicht war noch was im Browser Cache.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 14 Juli 2019, 12:55:52
Hallo xanker,

ich lese unregelmäßig hier mit und habe mich heute entschlossen deinen style auszuprobieren.
Ich finde ihn auf Anhieb gut und möchte ihn nutzen, deshalb habe ich folgende Fragen und Anregungen:

Falls meine Fragen schon behandelt wurden, reicht ein kurzer Hinweis darauf; beim Suchen hatte ich noch nichts passendes gefunden.
Vielen Dank für deine tolle Arbeit.

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 14 Juli 2019, 13:38:06
  • Die Farben und die Schriftart bei den Diagrammen gefällt mir noch nicht. Gibt es eine Möglichkeit dies zu beeinflussen?
  • Die Schriftart der Diagramme ist unterschiedlich zum Text bei den Devices. Kann man bei den Diagrammen die gleiche (glatte) Schriftart wie bei den Textblöcken einstellen?
Die Schrift sollte so sein wie auf dem Rest der Seite, bei mir ist das auch der Fall (siehe Screenshot). Hast du evtl. irgendwo (z.B. FHEMBWEB Device) anderen CSS Code eingetragen? Es gibt keine Einstellung zum Bearbeiten der Schriftart, dies könnte man aber zusätzlichen CSS Code regeln. Farben kann man aber einstellen, s.u.

  • Bei dem f18-style ist beim Standard-Farbmenu ein gelb eingestellt, und die Diagramme haben ebenfalls einen gelben Hintergrund (Farbverlauf weiß/gelb), das passt gut zusammen.
  • Beim flex-style bekomme ich die gleichen Diagramme, die aber farblich nicht zum Text passen. Ein grau/weißer Farbverlauf wäre schön. Kann ich das selbst einstellen, wenn ja, wie?
In den Einstellungen (unter "Select style") bei Color Options auf "detailed" klicken, weiter unten gibt es dann plot* Einträge zum Einstellen der Farben. Allerdings kann man (aktuell) nur einfarbige Hintergründe wählen.

  • Bei einer Anzeige auf dem Handy, wäre es günstig, wenn die Diagramme kürzer, d.h. die Zeitachse kürzer wäre. Kann man das einstellen?
  • Last but not least: bei den Diagrammen habe ich alias-Namen gewählt, bei den Diagrammen taucht jetzt stattdessen "Bearbeiten" auf. Ließe sich das ändern?
Ersteres geht nicht, da die SVG Pfade vom Modul erstellt werden. Man könnte das zwar per Javascript bearbeiten, das wäre aber sehr viel Aufwand. Letzteres hatte ich bewusst so gemacht, da ich die Bezeichnung für den Plot bei mir in den Titel gepackt habe (siehe Screenshot), das könnte aktuell nur durch zusätzlichen CSS-Code rückgang gemacht werden. Wenn es dich aber sehr stört, könnte ich das Option hinzufügen.

  • Die Einbindung einer Landkarte gelingt noch nicht: Mobile mit Chrome, PC mit Firefox
Danke, das werde ich (heute oder morgen) noch fixen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 14 Juli 2019, 14:16:52
Hallo xanker,

vielen Dank für die superschnelle Antwort.

Bei den Diagrammen bevorzuge ich statt des "Bearbeiten" den Namen des Plots, bzw. den alias-Namen in meinem Fall.

Bezgl. der Schriftart, hier die Defintion des FHEMWEB-Devices mit dem flex-style:
defmod WEBtablet FHEMWEB IPV6:8085 global
attr WEBtablet HTTPS 1
attr WEBtablet editConfig 1
attr WEBtablet endPlotNow 1
attr WEBtablet endPlotToday 1
attr WEBtablet plotEmbed 1
attr WEBtablet plotfork 1
attr WEBtablet sortRooms AMAD Flamingo Traffic Network CUL_HM Rollladen Heizung Weather Unsorted Mobile Everything
attr WEBtablet sslVersion TLSv12:!SSLv3
attr WEBtablet styleData {\
 "flex": {\
  "colorPreset": {},\
  "title": "Fhem",\
  "myUtilsFileName": "",\
  "plotMinWidth": "250px",\
  "plotMaxWidth": "100%",\
  "scalePage": "1",\
  "showClock": true,\
  "showRebootButton": false,\
  "showUpdateButton": false,\
  "showUpdateCheckButton": false,\
  "showRereadIconsButton": false,\
  "showRawInputButton": true,\
  "showSaveButton": true,\
  "showRoomDeviceName": true,\
  "showMenuAlways": true,\
  "enableCommandHistory": true,\
  "enableDeviceSearch": true,\
  "showReadingsGroupAsTable": true,\
  "hideWebcmdOnSmallScreen": false,\
  "colorOptionsDetailed": true,\
  "showTablesSideBySide": false,\
  "enableAnimations": false,\
  "improvePerformance": false,\
  "enableLogLineWrap": true,\
  "color": {\
   "HeaderBG": "#2E5E87",\
   "HeaderIcon": "#FFF",\
   "HeaderText": "#FFF",\
   "HeaderBorder": "#2E5E87",\
   "MenuBG": "#000",\
   "MenuBorder": "#2E5E87",\
   "MenuIcon": "#FFF",\
   "MenuRoomIcon": "#FFF",\
   "MenuText": "#FFF",\
   "MenuHoverLink": "#2E5E87",\
   "MainBG": "#EEE",\
   "TableHeaderBG": "#2E5E87",\
   "TableHeaderText": "#FFF",\
   "TableBorder": "#2E5E87",\
   "TableOdd": "#EEE",\
   "TableEven": "#DDD",\
   "TableText": "#000",\
   "TableHoverRow": "#AAA",\
   "TableHoverLink": "#2E5E87",\
   "TableNewEvent": "#F00",\
   "TableIcon": "#2E5E87",\
   "SetGetAttrBG": "#CCC",\
   "SubmitButtonBG": "#2E5E87",\
   "SubmitButtonBorder": "#555",\
   "SubmitButtonText": "#FFF",\
   "WidgetBorder": "#555",\
   "WidgetText": "#000",\
   "WidgetHighlight": "#2E5E87",\
   "LogDate": "#000",\
   "LogTime": "#000",\
   "LogVerbose0": "#000",\
   "LogVerbose1": "#F00",\
   "LogVerbose2": "#FFA500",\
   "LogVerbose3": "#008000",\
   "LogVerbose4": "#1E90FF",\
   "LogVerbose5": "#00F",\
   "plotBG": "#ff0000",\
   "plotBorder": "#2E5E87",\
   "plotText": "#000",\
   "plotGrid": "#555",\
   "plotMarker": "#F00",\
   "plotLine0": "#F00",\
   "plotLine1": "#0F0",\
   "plotLine2": "#00F",\
   "plotLine3": "#F0F",\
   "plotLine4": "#A52A2A",\
   "plotLine5": "#000",\
   "plotLine6": "#808000",\
   "plotLine7": "#808080",\
   "plotLine8": "#FF0",\
   "plotLinePasted": "#000"\
  }\
 }\
}
attr WEBtablet stylesheetPrefix flex
attr WEBtablet title { if ($FW_room) { "Live: $FW_room" } elsif ($FW_detail) { "Live: $FW_detail" } else { "Live: FHEM" } }
attr WEBtablet verbose 3

Mit dem f18-style:
define WEB FHEMWEB IPV6:8083 global
setuuid WEB 5c8d3f36-f33f-e986-94e6-036534937bb35565
attr WEB HTTPS 1
attr WEB JavaScripts codemirror/fhem_codemirror.js
attr WEB comment Javascript Editor einbinden: attr WEB JavaScripts codemirror/fhem_codemirror.js
attr WEB editConfig 1
attr WEB endPlotNow 1
attr WEB endPlotToday 1
attr WEB plotEmbed 1
attr WEB plotfork 1
attr WEB sortRooms AMAD Flamingo Traffic Network CUL_HM Rollladen Heizung Weather Unsorted Mobile Everything
attr WEB sslVersion TLSv12:!SSLv3
attr WEB styleData {\
 "f18": {\
  "Pinned.menu": "true",\
  "hidePin": "true",\
  "cols.bg": "FFFFE7",\
  "cols.fg": "000000",\
  "cols.link": "278727",\
  "cols.evenrow": "F8F8E0",\
  "cols.oddrow": "F0F0D8",\
  "cols.header": "E0E0C8",\
  "cols.menu": "D7FFFF",\
  "cols.sel": "A0FFFF",\
  "cols.inpBack": "FFFFFF",\
  "savePinChanges": true,\
  "fixedInput": true,\
  "wrapcolumns": true\
 }\
}
attr WEB stylesheetPrefix f18
attr WEB title { if ($FW_room) { "Live: $FW_room" } elsif ($FW_detail) { "Live: $FW_detail" } else { "Live: FHEM" } }
attr WEB verbose 3

Mit dem ios7smallscreen-style:
define WEBphone FHEMWEB IPV6:8084 global
setuuid WEBphone 5cd6fb42-f33f-e986-87b8-0c4525c708dad4b3
attr WEBphone HTTPS 1
attr WEBphone allowedHttpMethods GET|POST|HEAD
attr WEBphone editConfig 1
attr WEBphone endPlotNow 1
attr WEBphone endPlotToday 1
attr WEBphone plotEmbed 1
attr WEBphone plotfork 1
attr WEBphone sortRooms AMAD Flamingo Traffic Network CUL_HM Rollladen Heizung Weather Unsorted Mobile Everything
attr WEBphone sslVersion TLSv12:!SSLv3
attr WEBphone stylesheetPrefix ios7smallscreen
attr WEBphone title { if ($FW_room) { "Live: $FW_room" } elsif ($FW_detail) { "Live: $FW_detail" } else { "Live: FHEM" } }

Eigenartigerweise sind bei f18 und ios7smallscreen die Schriftarten der Diagramme identisch zu übrigen Text (d.h. glatte Schrifttyp).
Ich benutze für diese beiden styles jeweils ein separates FHEMWEB-Device.
Wo müsste ich hier anfangen zu suchen?

Die Farbe des Diagramms (Hintergrund) ändert sich nicht, wenn ich z.B. plotBG auf FF0000 (=rot) ändere und speichere - BG habe ich als Background interpretiert.
Es bleibt bei dem pastellgelben Farbton inkl. der nicht gleichen Schriftart.

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 14 Juli 2019, 14:39:05
Bei den Diagrammen bevorzuge ich statt des "Bearbeiten" den Namen des Plots, bzw. den alias-Namen in meinem Fall.
Ich habe es in der aktuellen Version mal geändert. Ist eigentlich auch besser so, so kann jeder selbst bestimmen was dort stehen soll.

Bezgl. der Schriftart, hier die Defintion des FHEMWEB-Devices mit dem flex-style:
...
Die Farbe des Diagramms (Hintergrund) ändert sich nicht, wenn ich z.B. plotBG auf FF0000 (=rot) ändere und speichere - BG habe ich als Background interpretiert.
Es bleibt bei dem pastellgelben Farbton inkl. der nicht gleichen Schriftart.
Bei dem FHEBWEB Device sieht alles gut aus. Wie ich gerade auch erst gesehen habe, scheint er bei dir die Plots gar nicht zu stylen. Evtl. mal mit STRG+F5 aktualisieren? Wann das nicht hilft, könntest du mal noch ein list von einem Plot posten?
Edit: Problem gefunden. "plotEmbed 1" habe ich nicht betrachtet...Mit "plotEmbed 0" geht es. Das muss ich mir mal noch anschauen

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 14 Juli 2019, 14:41:29
Ich habe nun die Möglichkeit hinzugefügt die Farb-Einstellungen zu exportieren/importieren. Wer eine schöne Farbkomposition erstellt hat, darf sie gerne hier posten. Wenn sie mir gefällt dann füge ich sie gerne zu den Standard-Presets hinzu  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 14 Juli 2019, 16:39:48
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"}

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 14 Juli 2019, 17:08:42
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​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 14 Juli 2019, 18:05:42
Ich schon wieder :)

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

Siehe Screenshot. Betrifft alle list-Befehle.

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 14 Juli 2019, 19:07:56
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.


Ich schon wieder :)
immer wieder gerne  ;D

Bei einem
list TYPE=notifysind 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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 14 Juli 2019, 19:32:47
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...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 14 Juli 2019, 19:54:47
Zitat
besteht 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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag 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.

Hoffe, das ist halbwegs verständlich? gg

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 15 Juli 2019, 11:31:35
Zitat
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.
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:
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?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 15 Juli 2019, 12:09:07
Ich hab's damit probiert und finde Werte, bei denen die Diagramme auf meinem Smartphone sehr schön aussehen.
das freut mich doch :)

  • 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.

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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 15 Juli 2019, 12:15: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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 15 Juli 2019, 12:37:14
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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 15 Juli 2019, 12:40:22
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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 15 Juli 2019, 15:16:38
Super, hat jetzt funktioniert :)
Vielen Dank
Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 15 Juli 2019, 20:24:44
Zitat
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.
Jo, macht natürlich Sinn so.

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 15 Juli 2019, 22:49:22
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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 16 Juli 2019, 14:23:54
Hallo Sebastian,
Weather bringt ja eine Funktion "weather_as_html" mit. Diese wird in f18 korrekt horizontal angezeigt.
Beim aktuellen flex aber vertikal. (Siehe Screenshots).

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 16 Juli 2019, 16:49:58
Hallo Sebastian2, ;D

bei dem "weather_as_html" mache ich folgende Beobachtungen, diese beiden Darstellungen sind waagerecht, sowohl im f18- als auch im flex-style:
define Leverkusen.OpenWeatherMapWeblink weblink htmlCode { WeatherAsHtmlV("Leverkusen.OpenWeatherMap") }
attr Leverkusen.OpenWeatherMapWeblink sortby 997

define Leverkusen.DarkSkyWeblink weblink htmlCode { WeatherAsHtmlV('Leverkusen.DarkSky','d') }
attr Leverkusen.DarkSkyWeblink sortby 998

Bei beiden Darstellung greift auch nicht die Beschränkung bei der Breite auf z.B. 50% wie bei den Diagrammen, sondern es wird die gesamte Bildschirmfläche bei einem großen Bildschirm genutzt. Bei einem kleinen Bildschirm ist die Darstellung scroll- bzw. verschiebbar.

Die folgende Darstellung ist senkrecht, nur im flex-style, im f18-style ist es tabellenartig aufgebaut:
define Wetter.ProplantaWeblink weblink htmlCode {PROPLANTA_Html("Wetter.Proplanta",5)}
attr Wetter.ProplantaWeblink sortby 999

Ich hab extra diese Darstellungen ganz nach hinten sortiert (sortby ...), im flex-style tauchen sie jedoch vor den anderen Diagrammen auf, die alle eine kleinere Nummer haben. Im f18-style ist die Reihenfolge wie erwartet.

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 16 Juli 2019, 19:15:32
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 ;)
Ich habe mir ein bisschen Mühe gemacht: geht jetzt, und zwar genau wie du es wolltest :) Wie es funktioniert wirst du schon selbst rausfinden  ;)


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
Echt verflixed...Ich kann mir absolut nicht erklären woran das liegt, ich habe den ganzen Code durchgesucht, aber mir ist nichts annährend aufgefallen. Aber ich werde das Problem sicher noch ausfindig machen, könnte allerdings noch etwas dauern.


Weather bringt ja eine Funktion "weather_as_html" mit. Diese wird in f18 korrekt horizontal angezeigt.
Beim aktuellen flex aber vertikal. (Siehe Screenshots).
bei dem "weather_as_html" mache ich folgende Beobachtungen, diese beiden Darstellungen sind waagerecht, sowohl im f18- als auch im flex-style:
...
Bei beiden Darstellung greift auch nicht die Beschränkung bei der Breite auf z.B. 50% wie bei den Diagrammen, sondern es wird die gesamte Bildschirmfläche bei einem großen Bildschirm genutzt. Bei einem kleinen Bildschirm ist die Darstellung scroll- bzw. verschiebbar.
...
Die folgende Darstellung ist senkrecht, nur im flex-style, im f18-style ist es tabellenartig aufgebaut:
define Wetter.ProplantaWeblink weblink htmlCode {PROPLANTA_Html("Wetter.Proplanta",5)}
attr Wetter.ProplantaWeblink sortby 999

Ich hab extra diese Darstellungen ganz nach hinten sortiert (sortby ...), im flex-style tauchen sie jedoch vor den anderen Diagrammen auf, die alle eine kleinere Nummer haben. Im f18-style ist die Reihenfolge wie erwartet.
Danke euch zwei, das werde ich noch beheben, wird aber wohl erst morgen klappen. Dafür habe ich heute die Möglichkeit hinzugefügt die Menü Einträge frei zu sortieren  ;D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 16 Juli 2019, 21:58:33
Ich habe mir ein bisschen Mühe gemacht: geht jetzt, und zwar genau wie du es wolltest :) Wie es funktioniert wirst du schon selbst rausfinden  ;)
Cool gemacht! Wenn du mal gar nicht mehr weißt, was du tun sollst: Möglichkeit zum Einfügen einer Trennlinie im Menü implementieren :-D

Der save Button wäre mir schon relativ wichtig, sonst muss ich ja immer den style wechseln (oder die FHEMWEB instanz), wenn ich was programmiren möchte  ::)

Mit Firefox gibt's aber wohl noch ein grundätzliches Problem beim re-orderung von Gruppen.
Kuck dir mal die Gegenüberstellung der Screenshots von Firefox und Chrome an.
Meine Bildschirmauflösung ist übrigens 1920x1080. Ich erwähne es deshalb, da sich die Darstellung der Gruppen in Firefox ändert (Richtung Chrome) sobald ich das Browserfenster schmäler ziehe.

Ansonsten kann ich mich nur wiederholen. Super Job!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 16 Juli 2019, 22:34:14
Ich habe mir ein bisschen Mühe gemacht: geht jetzt, und zwar genau wie du es wolltest :) Wie es funktioniert wirst du schon selbst rausfinden  ;)

GENIALLL!!! Das erleichter vieles, v.a. wenn man nicht vom Fach ist... Ganz herzlichen Dank.

Auch bei mir geht es jedoch noch nciht einwandfrei. Siehe Bild. Ich habe Safari vs Chrome (rechts) gegenübergestellt. Während bei Chrome alles tiptop läuft, gehts bei Safari nicht. Aber gell, das kriegst du noch hin ;)

Lg c

EDIT: Geht nun auch im Safari. Vermutlich lag es am Browsercache... Hat sich also somit erledigt...
Wenn aber nun das mit dem Strich noch ginge, dann ist es perfekt.... ;)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Hellspawn am 17 Juli 2019, 11:09:51
Hallo,

cooles Design, habs bei mir Installiert und es macht richtig Spass.

Ich habe jetzt einmal die Räume bei mir sortiert. Im ersten Moment sieht alles gut aus, allerdings wenn ich die Räume einmal "öffne", schmeisst er die Sortierung bei mir durcheinander.

Ich habe meine Räume wie im Anhang sortiert... vielleicht liegt es an der Sortierung mit Raum -> Unterraum

Ansonsten ist mir nichts aufgefallen , nice, wirklich :)

P.S. doch da ist noch was... wenn man am iPhone "zum HomeBildschirm" macht, dann werden einige Webseiten (FTUI z.B.) als WebApp gespeichert. Ich bin mir nicht ganz sicher, ich glaube das ist folgende Zeile im <head>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

könntest Du das noch hinzufügen.. dann macht er nämlich die Navigationsflächen weg...

Gruß
Carsten
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 17 Juli 2019, 13:21:23
Weather bringt ja eine Funktion "weather_as_html" mit. Diese wird in f18 korrekt horizontal angezeigt.
Beim aktuellen flex aber vertikal. (Siehe Screenshots).
bei dem "weather_as_html" mache ich folgende Beobachtungen, diese beiden Darstellungen sind waagerecht, sowohl im f18- als auch im flex-style:
...
Bei beiden Darstellung greift auch nicht die Beschränkung bei der Breite auf z.B. 50% wie bei den Diagrammen, sondern es wird die gesamte Bildschirmfläche bei einem großen Bildschirm genutzt. Bei einem kleinen Bildschirm ist die Darstellung scroll- bzw. verschiebbar.
...
Die folgende Darstellung ist senkrecht, nur im flex-style, im f18-style ist es tabellenartig aufgebaut:
define Wetter.ProplantaWeblink weblink htmlCode {PROPLANTA_Html("Wetter.Proplanta",5)}
attr Wetter.ProplantaWeblink sortby 999

Ich hab extra diese Darstellungen ganz nach hinten sortiert (sortby ...), im flex-style tauchen sie jedoch vor den anderen Diagrammen auf, die alle eine kleinere Nummer haben. Im f18-style ist die Reihenfolge wie erwartet.
Ist jetzt gefixed, zumindest die Darstellung. Mit dem sortby kann es noch Probleme geben, da flex selbst sortiert.


Cool gemacht! Wenn du mal gar nicht mehr weißt, was du tun sollst: Möglichkeit zum Einfügen einer Trennlinie im Menü implementieren :-D
Das wäre etwas komplizierter. Man kann das aber (wenn auch etwas umständlich) jetzt schon. Bei jedem Klick auf "edit" wird eine neue leere Gruppe angehänge, sofern noch keine leere Gruppe am Ende ist. Somit müsste man halt ein bisschen hin und her schieben, aber das macht man ja nicht so oft.

Der save Button wäre mir schon relativ wichtig, sonst muss ich ja immer den style wechseln (oder die FHEMWEB instanz), wenn ich was programmiren möchte  ::)
Fehler gefunden. geht jetzt.

Mit Firefox gibt's aber wohl noch ein grundätzliches Problem beim re-orderung von Gruppen.
Kuck dir mal die Gegenüberstellung der Screenshots von Firefox und Chrome an.
Meine Bildschirmauflösung ist übrigens 1920x1080. Ich erwähne es deshalb, da sich die Darstellung der Gruppen in Firefox ändert (Richtung Chrome) sobald ich das Browserfenster schmäler ziehe.
Da kann ich leider nichts daran ändern. Firefox unterstützt die "column" CSS Befehle nicht wie es angedacht ist. Ich könnte zwar alles per Javascript sortieren, das wäre aber unnötig viel Aufwand. Bis Firefox das mal korrekt unterstützt, sollt man hier "showTablesSideBySide" deaktivieren (sofern es einen stört). Vielleicht finde ich auch noch einen "hack" dafür.

Ansonsten kann ich mich nur wiederholen. Super Job!
cooles Design, habs bei mir Installiert und es macht richtig Spass.
Vielen Dank :)


Ich habe jetzt einmal die Räume bei mir sortiert. Im ersten Moment sieht alles gut aus, allerdings wenn ich die Räume einmal "öffne", schmeisst er die Sortierung bei mir durcheinander.
Ich habe meine Räume wie im Anhang sortiert... vielleicht liegt es an der Sortierung mit Raum -> Unterraum
...
P.S. doch da ist noch was... wenn man am iPhone "zum HomeBildschirm" macht, dann werden einige Webseiten (FTUI z.B.) als WebApp gespeichert. Ich bin mir nicht ganz sicher, ich glaube das ist folgende Zeile im <head>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
Danke, ist beides erledigt. Gibt zwar noch ein Style Problem beim Draghandler von den gruppierten Räumen, aber das mache ich noch. Zudem sollten (vorerst) nur die Raum-Gruppen vershoben werden, nicht die Räume darin, das kann noch zu Problemen führen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 17 Juli 2019, 18:58:43
Hi Xanker
Darf man weiterhin Wünsch äussern? ;) wenn ja, wäre evtl die Möglichkeit nach Rundungen analog dark Style super!! Ansonsten schweig ich dann mal be Runde ..;)
Lg C
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 17 Juli 2019, 20:21:21
Hi Xanker
Darf man weiterhin Wünsch äussern? ;) wenn ja, wäre evtl die Möglichkeit nach Rundungen analog dark Style super!! Ansonsten schweig ich dann mal be Runde ..;)
Lg C
Klaro, Wünsche darf man immer äußern, ob ich sie einbaue ist eine andere Frage  ;D
Was meinst du mit "nach Rundungen"?! Abgerundete Ecken bei den Tabellen?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 17 Juli 2019, 22:07:15
Klaro, Wünsche darf man immer äußern, ob ich sie einbaue ist eine andere Frage  ;D
Was meinst du mit "nach Rundungen"?! Abgerundete Ecken bei den Tabellen?

Abgerundete Ecken.. Genau... Klingt aber irgendwie komisch:.. abgerundete Ecken sind doch dann keine Ecken mehr.. hmmm.. aber das habe ich gemeint ;)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 17 Juli 2019, 23:00:30
Hallo Sebastian,

ich habe gerade ein update gefahren, da ja anscheinend einige Änderungen im Modul vorgenommen wurden.

Die "weather_as_html"-Darstellungen sehen jetzt gut aus, wobei ich allerdings nicht verstehe, dass die vor den Diagrammen stehen, obwohl sie absichtlich eine höhere Nummer bei dem sortt-by-Attribut haben.
Diese Darstelung ist jetzt tabellenartig, soweit so gut.
define Wetter.ProplantaWeblink weblink htmlCode {PROPLANTA_Html("Wetter.Proplanta",5)}
attr Wetter.ProplantaWeblink sortby 999
Die Tabelle nimmt auf einem großen Bildschirm die ganze Breite ein (Diagramme habe ich auf 55% begrenzt), beim kleinen Bildschirm ist es gut lesbar, aber der größte Teil (rechts) ist abgeschnitten und nicht scrollbar.

Auf dem kleinen Bildschirm gibt es jetzt aber folgende Probleme/Rückschritte nach dem update, welches ich heute gegen 17.Juli - 22:00 durchgeführt habe:

Andere Änderungen, die positiv verlaufen sind, erwähne ich hier nicht separat.
Bei der Vielzahl von Wünschen, die auf dich einprasseln und vermutlich auch noch widersprüchlich sind, ist es gar nicht so leicht hinterherzukommen.
Bitte verstehe es als konstruktive Kritik eines Interssierten, der deinen flex style gerne dauerhaft einsetzen möchte.

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 18 Juli 2019, 15:10:11
Hätte noch eine kleine Bitte:
Genauso wie das kurze Runterscrollen beim Devicespecific Help, könntest du das auch bei der RawDef einbauen?

Danke und lg,

Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 18 Juli 2019, 22:20:26
Abgerundete Ecken.. Genau... Klingt aber irgendwie komisch:.. abgerundete Ecken sind doch dann keine Ecken mehr.. hmmm.. aber das habe ich gemeint ;)
Ich schaue mal ob ich das ohne viel Aufwand eingebaut bekomme. Normalerweise ist das kein Problem, allerdings habe ich alles auf "border-collapse: collapse" aufgebaut, da viele verschachtelte Tabellen durch FHEMWEB erzeugt werden und sich somit sicherstellen lässt, dass die Tabellen Ränder zusammenfallen (collapse) und somit alle gleich dick sind. Das macht allerdings Probleme mit abgerundeten Ecken.

Bei der Vielzahl von Wünschen, die auf dich einprasseln und vermutlich auch noch widersprüchlich sind, ist es gar nicht so leicht hinterherzukommen.
Bitte verstehe es als konstruktive Kritik eines Interssierten, der deinen flex style gerne dauerhaft einsetzen möchte.
Ich verstehe das nicht falsch, im Gegenteil, ich bin froh über Bugreports, da ich unmöglich alles durchtesten kann, schon gar nicht bei jeder kleinen Änderung. Ich habe heute mal angefangen den FHEMWEB HTML Output per Javascript komplett neu zu strukturieren um alles so einheitlich wie möglich zu machen. Das spart am Ende viel CSS-Code ein und Änderungen bzw. deren Effekte sind vorhersehbarer. Da ich dieses Wochenende anderweitig beschäftigt bin, werde ich wohl erst kommende Woche dazu kommen.

Genauso wie das kurze Runterscrollen beim Devicespecific Help, könntest du das auch bei der RawDef einbauen?
Jepp werde ich machen, aber wie zuvor geschrieben, wird das wohl erst nächste Woche klappen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 20 Juli 2019, 14:46:06
Ich habe heute doch noch etwas Zeit gefunden und ein update commited. Es gibt ein paar wesentliche Änderungen:


Mit Firefox gibt's aber wohl noch ein grundätzliches Problem beim re-orderung von Gruppen.
Ich habe eine Lösung gefunden, jetzt funktioniert es auch wie gewünscht beim Firefox.

Abgerundete Ecken.. Genau... Klingt aber irgendwie komisch:.. abgerundete Ecken sind doch dann keine Ecken mehr.. hmmm.. aber das habe ich gemeint ;)
Das gestaltet sich leider - wie erwartet - etwas komplizierter. Ich werde es wohl nicht einbauen (zumindest nicht für die kompletten Tabellen), da das einen Rattenschwanz an Änderungen nach sich ziehen würde. Wenn du möchtest, kann ich aber eine Option hinzufügen um zumindest die oberen Ecken von den Tabellen-Headern abzurunden?!

Auf dem kleinen Bildschirm gibt es jetzt aber folgende Probleme/Rückschritte nach dem update, welches ich heute gegen 17.Juli - 22:00 durchgeführt habe:
  • Die Diagramme werden gefühlt doppelt so groß angezeigt und sind gleichzeitig nicht scrollbar. Wenn plotEmd auf 1 steht, dann sehen die Diagramme wieder toll aus.
  • Der Callmonitor ist schlecht lesbar, alles in einer Spalte, die knapp 8mm breit ist; auf einem großen Bildschirm nimmt er die ganze Bildschirmseite ein, wobei Überschriften und Inhalt nicht übereinander stehen.
  • Die Karte im Blitzer-Modul ist jetzt vorhanden, jedoch wird nur ca. 5% der zur Verfügung stehenden Fläche ausgenutzt, der Rest ist grau
Die Probleme sind alle behoben.

Genauso wie das kurze Runterscrollen beim Devicespecific Help, könntest du das auch bei der RawDef einbauen?
Erledigt. Ich habe es jetzt für beides so implementiert, dass so weit runter gescrollt wird, dass man noch die Buttons sieht. Und ich habe eine Lösung gefunden, dass das attr-Feld immer oberhalb der Attributes-Tabelle ist.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 20 Juli 2019, 17:32:08
Hallo Sebastian,

du hast nicht zuviel versprochen - es sieht jetzt toll aus, deine Lösung ist noch besser, als ich sie erwartet habe.

Vielen Dank, du hast echt was geleistet - und die vielen anderen Entwickler selbstverständlich auch - aber hier geht es um deine Beiträge.
Thumbs up, leider gibt es kein passendes Smiley dafür.

Viele, herzliche Grüße
Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 20 Juli 2019, 18:16:49
Ohne group-Attribut wird bei mir nichts mehr angezeit :(

Siehe Pics.

EDIT: Scheint an was anderem zu liegen.

Im WEB-Device ist
attr columns columns Erdgeschoß:Vorschau,Temp,Wetterstation,Heizung,Wohnzimmer,Küche,rg_Schlafzimmer,Sonstiges hinterlegt.

zB Attribute von rg_Schlafzimmer:
Attributes:
 DbLogExclude .*
 alias Schlafzimmer
 alwaysTrigger 1
 cellStyle { "c:2" => 'style="text-align:center"', "c:3" => 'style="text-align:center"'}
 commands {'posi' => 'state:','override'=>'state:'}
 group Schlafzimmer
 noheading 1
 nonames 1
 room Erdgeschoß
 valueIcon {state=>'%devStateIcon'}
 visibility collapsible

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 20 Juli 2019, 18:27:16
Ich meine das war früher auch schon so gewesen.  :o
Aber ich habe so gut wie keine devices ohne group Attribut. Von daher...

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 20 Juli 2019, 18:29:34
Jetzt taucht ein Gerät ohne group-Attribut mit seinem TYPE auf.
So wie es sein soll  ;)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 20 Juli 2019, 19:11:57
Zitat
Jetzt taucht ein Gerät ohne group-Attribut mit seinem TYPE auf.
So wie es sein soll  ;)
Nein, es taucht eben nix auf (zumindets bei mir). Obwohl die Devices alle ein Group gesetzt haben :(
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 20 Juli 2019, 19:27:55
Interessanterweise kommen aber Daten zu den Readingsgroups rein, nur wird nix angezeigt:
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 20 Juli 2019, 19:33:25
Merkwürdig  :-[
Im Screenshot unten ist das Amazon Account Device ohne group,
alle anderen jeweils mit group-Attribut. Ich habe auch  mal meine Settings angehängt.
VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 20 Juli 2019, 23:25:38
Ohne group-Attribut wird bei mir nichts mehr angezeit :(
Merkwürdig  :-[
Im Screenshot unten ist das Amazon Account Device ohne group,
alle anderen jeweils mit group-Attribut. Ich habe auch  mal meine Settings angehängt.
VG Sebastian
sorry, das war ein Problem mit dem column Attribut, hatte ich bei der Strukturänderung nicht bedacht, da ich selbst das column Attribut nicht verwende. Ich habe es gefixed und zudem habe ich jetzt mal das column Attribut für meinen Test Raum gesetzt, somit wird es bei künftigen Updates mit bedacht...wobei es jetzt keine Probleme mehr geben sollte :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 20 Juli 2019, 23:30:23
du hast nicht zuviel versprochen - es sieht jetzt toll aus, deine Lösung ist noch besser, als ich sie erwartet habe.

Vielen Dank, du hast echt was geleistet - und die vielen anderen Entwickler selbstverständlich auch - aber hier geht es um deine Beiträge.
Thumbs up, leider gibt es kein passendes Smiley dafür.
Vielen Dank für das Lob  ;D
Ich nutze FHEM jetzt seit gut 3 Jahren und muss ja auch mal was zurück geben  8)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 20 Juli 2019, 23:34:36
Es gibt übrigens noch ein Problem mit dem CodeMirror, wenn man bei den Internals auf DEF klickt. Der Text ragt über die Box hinaus, ich kann mir (bisher) nur nicht erklären warum, da es beim Raw Input und bei der Raw definition nicht so ist...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 21 Juli 2019, 09:25:35
Hallo Sebastian,

ich hätte noch 2 Anregungen, die mit der Darstellung auf dem knappen Handyscreen zu tun haben:

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 21 Juli 2019, 09:44:35
  • Das Room-Menu (links) ist sehr breit, wenn es ausgeklappt ist. Könnte man es z.B. halbieren, bzw. auf die Länge der Einträge + etwas Reserve reduzieren?
  • Siehe hierzu den Screenshot. Wenn kein Platz für die states in der 1. Zeile ist, dann muss man in die nächsten Zeilen ausweichen. Hier ist mir aufgefallen, dass immer eine Leerzeile eingefügt wird. Und zusätzlich, könnte man den 1. Eintrag, wenn die Platzverhältnisse es zulassen, in die 1. Zeile bringen, auch wenn andere eine weitere ganze Zeile erzwingen?
- Bei dem Menü habe ich eine feste Breite (300px) gesetzt, damit alle Icons im Menü-Header Platz haben (sofern man alle eingeblendet hat). Ich könnte das noch so abändern, dass es schmäler wird, wenn man Icons ausblendet. Aber da das Menü auf dem Smartphone sowieso den Content überblendet, sehe ich hier nicht besonders viel Sinn.
- Das geht leider nicht, da der komplette State in einer Tabellenzellen stehen und nur die gesamte Zelle umbrechen kann. Das ist übrigens keine Leerzeile, bei den Zellen wird der Innere Abstand (Padding) größer auf kleinen Screens (<900px Breite), damit Links/Icons weit genug voneinander entfernt sind um sie gut anklicken zu können, ohne dass man ausversehen was anderes anklickt.

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 21 Juli 2019, 10:04:17
Abgerundete Ecken.. Genau... Klingt aber irgendwie komisch:.. abgerundete Ecken sind doch dann keine Ecken mehr.. hmmm.. aber das habe ich gemeint ;)
Habe doch noch eine Möglichkeit gefunden das leicht umzusetzen. Gibt jetzt eine Option "enableRoundedEdges"  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 21 Juli 2019, 10:21:11
Hallo Sebastian,

danke für die Erklärung, hab das soweit verstanden.
Zitat
- Das geht leider nicht, da der komplette State in einer Tabellenzellen stehen und nur die gesamte Zelle umbrechen kann. Das ist übrigens keine Leerzeile, bei den Zellen wird der Innere Abstand (Padding) größer auf kleinen Screens (<900px Breite), damit Links/Icons weit genug voneinander entfernt sind um sie gut anklicken zu können, ohne dass man ausversehen was anderes anklickt.
Das erstere verstehe ich, dass letztere aber nicht.
Wenn man ein Device mit nur einer Zeile hat, dann ist der Abstand zum nächsten, anklickbaren Device auch nicht sonderlich viel vergrößert. Dann müsste dies auch innerhalb einer "Zelle" bzw. innerhalb eines Devices möglich sein, oder nicht. Wenn es technisch notwendig ist diesen Platz für den Inneren Abstand (Padding) vorzuhalten, wäre es dann möglich ihn zu reduzieren?

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 21 Juli 2019, 11:30:02
Gerade wieder nen kleinen Bug entdeckt (bei mir mehrmals reproduzierbar):

Wenn man das Room-Attribut öffnet und dann mit dem "x" oben rechts schließt, bleibt das Bild ausgegraut und man kann nur durch Seite neu laden weiterarbeiten.

lg, Stefan

Ansonsten: Echt genial, ich verwende inzwischen nur mehr das Flex.
Vielleicht sollte Rudi ja mal den Menüpunkt "Select style" in "Style" oder so umbenennen, jetzt, wo auch immer mehr Settings in dem Menüpunkt vorkommen (flex, f18....)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 21 Juli 2019, 12:03:33
Habe doch noch eine Möglichkeit gefunden das leicht umzusetzen. Gibt jetzt eine Option "enableRoundedEdges"  :)

Du bist mein Held. Vielen Dank. Kleines Detail mit toller Wirkung danke. Werden die Menu Ecken nicht auch gerundet? Bei mir gings nicht (Safari, Chrome auf Mac)

Liebe Grüsse c
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 22 Juli 2019, 09:08:23
Habe doch noch eine Möglichkeit gefunden das leicht umzusetzen. Gibt jetzt eine Option "enableRoundedEdges"  :)

Top! Das gefällt!
Könntest Du bitte die gleiche Rundung noch auf .makeSelect und .detLink "loslassen"?
Und bitte noch Folgendes (wenn Rundung an):
.slider,.slider .handle,select,input[type=text],input[type=submit] { border-radius: 3px; }
Eventuell sollte das noch auf andere Widget angewendet werden, habe aber hier in meinem Testsystem i.M. keine anderen.

Und noch eine Kleinigkeit, die webCmdLabel könnten ein kleines "margin/padding right" gebrauchen (siehe Screen).

Vielen Dank für Deine Mühen.

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 22 Juli 2019, 10:56:15
Wenn man ein Device mit nur einer Zeile hat, dann ist der Abstand zum nächsten, anklickbaren Device auch nicht sonderlich viel vergrößert. Dann müsste dies auch innerhalb einer "Zelle" bzw. innerhalb eines Devices möglich sein, oder nicht.
Die Abstände zwischen zwei Devices und Device zum umgebrochenen State sind exakt gleich groß (siehe Screenshot). Bei ersterem wirkt er optisch nur etwas kleiner, aufgrund der unterschiedlichen Färbung der Reihen.


Wenn man das Room-Attribut öffnet und dann mit dem "x" oben rechts schließt, bleibt das Bild ausgegraut und man kann nur durch Seite neu laden weiterarbeiten.
Das scheint wohl ein Problem von fhemweb.js oder jquery zu sein. Ich habe das "X" jetzt einfach mal ausgeblendet, da man ja auch mit dem Buttons schließen kann (und das funktioniert ja).

Ansonsten: Echt genial, ich verwende inzwischen nur mehr das Flex.
Danke, so soll das sein ;D


Werden die Menu Ecken nicht auch gerundet? Bei mir gings nicht (Safari, Chrome auf Mac)
Ich nehme an du meinst aufpoppende Menüs/Dialoge? Falls ja, das funktioniert jetzt (siehe unten).


Könntest Du bitte die gleiche Rundung noch auf .makeSelect und .detLink "loslassen"?
Und bitte noch Folgendes (wenn Rundung an):
.slider,.slider .handle,select,input[type=text],input[type=submit] { border-radius: 3px; }Eventuell sollte das noch auf andere Widget angewendet werden, habe aber hier in meinem Testsystem i.M. keine anderen.

Und noch eine Kleinigkeit, die webCmdLabel könnten ein kleines "margin/padding right" gebrauchen (siehe Screen).
Glatt vergessen...Jetzt sollte so ziemlich alles abgerundet werden was möglich ist.
Den Margin habe ich zum webCmdLabel hinzugefügt, danke!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 22 Juli 2019, 11:28:22
Du bist ja auf Zack!!! ;)

Hab da noch was:
select.select_widget { margin-top: -1px; }
button.ui-button { padding: 5px !important; }
Damit wandern die webCmd selects um einen Pixel nach oben und das Ganze sieht irgendwie konsistenter aus. Ebenso wird um die Modal-Buttons noch das Padding gelegt -> sieht auch besser aus.

Und hier noch ein kleiner Schatten der mir persönlich immer sehr gut gefällt (evtl. konfigurierbar machen?):
.makeSelect,.detLink,table.group { box-shadow: 0px 12px 10px -8px rgba(0,0,0,0.4); }
table.group.deviceGroup { margin-bottom: 15px !important; }

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 22 Juli 2019, 11:52:05
select.select_widget { margin-top: -1px; }
button.ui-button { padding: 5px !important; }
Ersteres verstehe ich nicht, bei mir sind die Selects (wie angedacht) exakt mittig in einer Zelle, warum sollte man sie ein Pixel nach oben schieben? Hast du evtl. ein Screenshot was dich daran stört? Padding zu den Buttons habe ich hinzugefügt.

Und hier noch ein kleiner Schatten der mir persönlich immer sehr gut gefällt (evtl. konfigurierbar machen?):
.makeSelect,.detLink,table.group { box-shadow: 0px 12px 10px -8px rgba(0,0,0,0.4); }
table.group.deviceGroup { margin-bottom: 15px !important; }
Ist zwar nicht mein Geschmack, aber ich habe es als Option hinzugefügt :)

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 22 Juli 2019, 12:22:50
Ersteres verstehe ich nicht, bei mir sind die Selects (wie angedacht) exakt mittig in einer Zelle, warum sollte man sie ein Pixel nach oben schieben? Hast du evtl. ein Screenshot was dich daran stört? Padding zu den Buttons habe ich hinzugefügt.

Habe es eben mal selbst nachgeprüft weil ich auch unsicher war, aber mit dem Negativ-Margin sah es für mich optisch einfach besser aus.
Der Beweis anbei als Screen. Oben mit Negativ-Margin unten ohne.

Gruß
Dan

EDIT: Danke für den optionalen Schatten.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 22 Juli 2019, 12:55:08
Habe es eben mal selbst nachgeprüft weil ich auch unsicher war, aber mit dem Negativ-Margin sah es für mich optisch einfach besser aus.
Der Beweis anbei als Screen. Oben mit Negativ-Margin unten ohne.
Das Problem war ein anderes: Ich hatte bei dem scrollable-Container ein margin von 1px gesetzt, weil Chrome den content-Border sonst dünner rendert sobald der content scrollbar wird, allerdings auch nur wenn die Tabellen nebeneinader angezeigt werden (warum auch immer) und das hat interessanter Weise auch irgendeinen Effekt auf das vertical-alignment (warum auch immer). Ich habe den Margin jetzt entfernt, somit passt das jetzt wieder und evtl. finde ich ja noch eine andere Lösung für das rendering Problem.

EDIT: Danke für den optionalen Schatten.
Gerne doch, wenn du weitere Vorschläge hast, nur her damit :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 22 Juli 2019, 13:27:32
Top! Sieht echt cool aus jetzt!
So langsam nähern wir uns doch einem modernen Style für FHEM. ;)
Könntest Du bitte noch die Anzeige des Icons für "reload 99_myUtils.pm" optional machen? Das benötige ich persönlich überhaupt nicht.

Danke im Voraus und für Deine vielen schnellen Bemühungen.

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 22 Juli 2019, 13:30:30
Top! Sieht echt cool aus jetzt!
So langsam nähern wir uns doch einem modernen Style für FHEM. ;)
Das sehe ich auch so  ;D

Könntest Du bitte noch die Anzeige des Icons für "reload 99_myUtils.pm" optional machen? Das benötige ich persönlich überhaupt nicht.
Das geht jetzt schon, einfach den Dateinamen in den Einstellungen löschen

Danke im Voraus und für Deine vielen schnellen Bemühungen.
Gerne doch.

Ps: Die Farbe des Schattens kann jetzt auch in den Einstellungen frei gesetzt werden
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 22 Juli 2019, 13:55:08
Das geht jetzt schon, einfach den Dateinamen in den Einstellungen löschen

Die Farbe des Schattens kann jetzt auch in den Einstellungen frei gesetzt werden

MEGA!

Ein paar Kleinigkeiten sind mir noch aufgefallen:
Event-Monitor:

Könnte man die Hintergrundfarbe vom Menü oben noch anpassbar machen (da wo die update/update check/reboot Icons sind)?

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 22 Juli 2019, 14:10:21
Beim Ändern der Farben kommt in der aktuellen Version ein JS-Error und die Farben werden nicht übernommen.
Zitat
Uncaught TypeError: Cannot read property 'length' of undefined
    at Object.flex.hexToRGB (flex.js:421)
    at Object.flex.createCSS (flex.js:308)
    at Object.flex.applyStyleData (flex.js:902)
    at Object.flex.changeSetting (flex.js:935)
    at flex.js:1044
    at HTMLDivElement.<anonymous> (fhemweb_colorpicker.js:307)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.r.handle (jquery.min.js:3)
    at Object.fireEvent (jscolor.js:142)
    at HTMLDivElement.p.padM.onmouseup.p.padM.onmouseout (jscolor.js:648)

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 22 Juli 2019, 16:02:22
Ein paar Kleinigkeiten sind mir noch aufgefallen:
Event-Monitor:
  • Filter input - Ecken noch nicht gerundet
  • wenn man dann auf input klickt und sich das Modal öffnet fehlt bei den Buttons wieder das padding, selbes beim Modal für ? (letzte Änderungen) und auch beim Raw-Input
Könnte man die Hintergrundfarbe vom Menü oben noch anpassbar machen (da wo die update/update check/reboot Icons sind)?
Der Eventmonitor Filter wird jetzt auch abgerundet. Das Padding hatte ich wohl ausversehen durch zu häufiger STRG+Z wieder entfernt  :o
Hintergrundfarbe von den Menu Icons ist jetzt anpassbar.

Beim Ändern der Farben kommt in der aktuellen Version ein JS-Error und die Farben werden nicht übernommen.
Das Problem kann ich nicht nachstellen, bei mir funktioniert das einwandfrei, auch wenn ich ungültige Farbwerte eingebe. War evtl. noch was im Cache?!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 22 Juli 2019, 16:21:25
Der Eventmonitor Filter wird jetzt auch abgerundet. Das Padding hatte ich wohl ausversehen durch zu häufiger STRG+Z wieder entfernt  :o
Hintergrundfarbe von den Menu Icons ist jetzt anpassbar.

Tip Top!

Das Problem kann ich nicht nachstellen, bei mir funktioniert das einwandfrei, auch wenn ich ungültige Farbwerte eingebe. War evtl. noch was im Cache?!

Am Cache lag es nicht! Egal, ist mit der aktuellen Version wieder voll funktionsfähig.

Danke.

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 22 Juli 2019, 16:22:13
Ich hab auch gerade ein Update gemacht und mir ist noch was beim Event monitor aufgefallen.

Man kann im flex Style nach oben, bzw zurück zu älteren Events scrollen. Sobald ein neues Event eintrifft, wird automatisch wieder an das Ende gescrollt.
Im F18 Style ist das nicht so. Sobald man in F18 einmal zurück scrollt, ist "autoscrollen" deaktiviert und man kann in aller Ruhe vergangene Events analysieren.

Das Verhalten von flex - also dass immer ans Ende gesprungen wird, sobald ein Event eintrifft - ist ziemlich hinderlich. Kann man das an das F18 Verhalten anpassen?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 22 Juli 2019, 16:26:55
Hab doch noch was im Event-Monitor gefunden.
Beim Start des Event-Monitor wird mir immer als ersten (unter der Filter reset/create Zeile) Folgendes angezeigt:
Zitat
[""]

Aktiviere/deaktiviere ich die Checkbox "FHEM log" so kommen mit jedem Klick weitere:
Zitat
[""]
hinzu.

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 22 Juli 2019, 17:38:21
hallo xanker

Zitat
Zitat
Zitat von: choetzu am Gestern um 12:03:33
Werden die Menu Ecken nicht auch gerundet? Bei mir gings nicht (Safari, Chrome auf Mac)
Ich nehme an du meinst aufpoppende Menüs/Dialoge? Falls ja, das funktioniert jetzt (siehe unten).

Danke Meister. Nö, nicht ganz. Siehe Bild in der Anlage...

Zudem ist mir auf dem Mobile (iPhone) in einem Raum etwas aufgefallen (Safari), siehe Bild.
Bekanntes Problem?

Lg c
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 23 Juli 2019, 10:17:32
Das Verhalten von flex - also dass immer ans Ende gesprungen wird, sobald ein Event eintrifft - ist ziemlich hinderlich. Kann man das an das F18 Verhalten anpassen?
Autscroll wird jetzt bei einem manuellen Scroll deaktiviert. Wenn man manuell wieder ans Ende scrollt, wird Autoscroll wieder aktiviert.


Beim Start des Event-Monitor wird mir immer als ersten (unter der Filter reset/create Zeile) Folgendes angezeigt:
[""]
Hmm, bei mir passiert das nicht. Ich habe es unter Windows/Android auf Chrome und Firefox getestet. Kannst du mal in der Browser-Console schauen ob dort etwas gelogged wird was darauf hindeutet?


Danke Meister. Nö, nicht ganz. Siehe Bild in der Anlage...
Wow, man kann echt alles abrunden ;D
An der Stelle sieht es mMn aber eher blöd aus, da Menü und Header ja einen (anderfarbigen) Rand haben können.

Zudem ist mir auf dem Mobile (iPhone) in einem Raum etwas aufgefallen (Safari), siehe Bild.
Bekanntes Problem?
Kein bekanntest Problem. Und zum fixen bräuchte ich mehr Infos, da ich das nicht nachstellen kann:
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 23 Juli 2019, 10:26:55
Hmm, bei mir passiert das nicht. Ich habe es unter Windows/Android auf Chrome und Firefox getestet. Kannst du mal in der Browser-Console schauen ob dort etwas gelogged wird was darauf hindeutet?

Direkt nach dem Start des Event-Monitors stehen die im angehängten Screen ersichtlichen Meldungen in der JS-Konsole.

Gruß
Dan

P.S. Ich administriere mein Testsystem von Windows aus mit Chrome.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 23 Juli 2019, 11:03:50
Wow, man kann echt alles abrunden ;D
An der Stelle sieht es mMn aber eher blöd aus, da Menü und Header ja einen (anderfarbigen) Rand haben können.
Ich bin halt nicht so der Ecken/Kanten Typ... Aber passt natürlich für mich. Die Schattten und Abrundungen machen das Ganze sehr elegant...

Kein bekanntest Problem. Und zum fixen bräuchte ich mehr Infos, da ich das nicht nachstellen kann:
  • Tritt das Problem auch im Raum "Everything" auf
  • Hängt es mit einer der Einstellungen (Schatten, abgerundete Ecken etc.) zusammen
  • Passiert das nur im Hoch- oder auch Querformat
  • Nur bei Safari, oder auch anderen Browsern
- Everything: Ja, tritt auf
- Einstellungen: Nein. Wenn ich Schatten und abgerundete Ecken ausschalte, bleibt das Problem bestehnen
- Hoch-/Querformat: In beiden Formaten.
- Browser: Habe Safari und Chrome auf dem Mobile getestet. Bei Beiden kam es. Auf den Desktop Browsern sowohl Mac wie auch Windows kommt da nix..(Firefox, Chrome)

Hilft das weiter?

Lg c
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 23 Juli 2019, 11:55:59
Xanker, du armer Kerl, ich komme mit einer neuen Frage auf dich zu...;) Vorsicht also... ;)

Ist es möglich, dass man das Alignment der Device-Uebersicht etwas anders gestalten könnte? V.a. die Internals sind bei grossem Monitor schlecht zu lesen. Das selbe gilt für die Timestamps/deleteattr. Siehe Anlage.
Was meinste, wäre doch ein Mehrwert an die Lesbarkeit, oder? ;)

Lg c
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 23 Juli 2019, 11:56:57
Autscroll wird jetzt bei einem manuellen Scroll deaktiviert. Wenn man manuell wieder ans Ende scrollt, wird Autoscroll wieder aktiviert.
Auf Smartphone mit Chrome wird immer noch fleißig gescrollt  :o

Hmm, bei mir passiert das nicht. Ich habe es unter Windows/Android auf Chrome und Firefox getestet. Kannst du mal in der Browser-Console schauen ob dort etwas gelogged wird was darauf hindeutet?
Ich kann das [""] bestätigen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 23 Juli 2019, 12:33:05
Hilft das weiter?
Leider nicht wirklich...scheiß Apple ;D
Komisch ist vor allem, dass es nicht immer auftritt (zumindest hattest du geschrieben "in einem Raum"), das muss dann ja zwangsläufig an einem der Devices liegen. Kannst du das mal durchtesten? Vielleicht erstmal einzelne Gruppen in einen anderen Raum schieben
attr room=11_Automatisierung:FILTER=group=07_Pool room Tempund wenn du eine Gruppe ausgemacht hast, dann selbiges noch mit den einzelnen Devices.

Ist es möglich, dass man das Alignment der Device-Uebersicht etwas anders gestalten könnte? V.a. die Internals sind bei grossem Monitor schlecht zu lesen. Das selbe gilt für die Timestamps/deleteattr. Siehe Anlage.
Was meinste, wäre doch ein Mehrwert an die Lesbarkeit, oder? ;)
Also das bei den Internals war so auch nicht angedacht, war ein CSS Fehler meinerseits und ist gefixed. Die Zeiten bei den Readings und das "deleteattr" Feld habe ich ganz bewusst rechtsbündig, damit die immer untereinander stehen. Da es sich nämlich nicht mehr um eine Tabelle handelt, sondern einen Flex Container. Somit könnte ich zwar eine maximale Breite für die zweite Zelle/Spalte setzen, dann würde der Content aber frühzeitg wrappen, obwohl noch ausreichend Platz ist. Für große Monitore ist ja auch die Option showTablesSideBySide gedacht, damit der Platz sinnvoll genutzt wird.

Auf Smartphone mit Chrome wird immer noch fleißig gescrollt  :o
Dann wird bei dir dann wohl kein "scroll" Event ausgelöst. Es wird jetzt auch bei "touchmove" das autoscroll deaktiviert, allerdings - wie zuvor - wird/bleibt es aktiviert, wenn man bis ganz nach unten scrollt (mit einem Offset von 10px).

Ich kann das [""] bestätigen.
Direkt nach dem Start des Event-Monitors stehen die im angehängten Screen ersichtlichen Meldungen in der JS-Konsole.
Echt merkwürdig. Eigentlich passiert beim Eventmonitor nicht viel von der Flex Seite, außer dass halt Datum/Zeit per Regex in ein <span> gewrapped werden um die Farbe definieren zu können. Ich sehe aber schon richtig, das das nicht nur in der Konsole, sondern auch im HTML auftaucht?
Komisch ist auch, dass das Format von "Console Rcvd" gar nicht stimmt. Normal ist das so:

Console Rcvd: [DATUM] [UHRZEIT] [MESSAGE]<br>Edit: könnt ihr mal schauen ob die Meldungen auch bei anderen Styles in der Konsole auftauchen? falls ja, muss ich einfach nur die Meldungen abfangen.
Edit2: und schickt mir am besten noch einen HTML Auszug von der Zeile

Edit3: Kommando zurück, habe gerade mal ein Update gemacht...liegt an der neusten FHEMWEB Version...ich werde mich drum kümmern
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 23 Juli 2019, 13:02:14
Habe soeben mal andere Styles durchprobiert und das [""] kommt bei allen im Event-Monitor, ist also kein Problem vom flex Style allein.
Evtl. weiß Rudi dazu mehr!?

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 23 Juli 2019, 13:16:02
Habe soeben mal andere Styles durchprobiert und das [""] kommt bei allen im Event-Monitor, ist also kein Problem vom flex Style allein.
Evtl. weiß Rudi dazu mehr!?
Sollte man mal melden. Ich habe mal einen temprären Fix integriert.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 23 Juli 2019, 13:25:02
Sollte man mal melden.

Done! (https://forum.fhem.de/index.php?topic=102483.msg)

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 23 Juli 2019, 13:41:53
Leider nicht wirklich...scheiß Apple ;D
Komisch ist vor allem, dass es nicht immer auftritt (zumindest hattest du geschrieben "in einem Raum"), das muss dann ja zwangsläufig an einem der Devices liegen. Kannst du das mal durchtesten? Vielleicht erstmal einzelne Gruppen in einen anderen Raum schieben
attr room=11_Automatisierung:FILTER=group=07_Pool room Tempund wenn du eine Gruppe ausgemacht hast, dann selbiges noch mit den einzelnen Devices.
Also das bei den Internals war so auch nicht angedacht, war ein CSS Fehler meinerseits und ist gefixed. Die Zeiten bei den Readings und das "deleteattr" Feld habe ich ganz bewusst rechtsbündig, damit die immer

Ich habe es rausgefunden. Es lag an einem ReadingsGroup... Und zwar an folgendem:
DEF TYPE=DOIF:.*error


Wenn ich dieses ReadingsGroup in einen anderen Raum mache, gehts.. Komisch nur, dass ich in anderen Räumen auch ReadingsGroup habe... Hilft ein List?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 23 Juli 2019, 13:50:05
Also das bei den Internals war so auch nicht angedacht, war ein CSS Fehler meinerseits und ist gefixed. Die Zeiten bei den Readings und das "deleteattr" Feld habe ich ganz bewusst rechtsbündig, damit die immer untereinander stehen. Da es sich nämlich nicht mehr um eine Tabelle handelt, sondern einen Flex Container. Somit könnte ich zwar eine maximale Breite für die zweite Zelle/Spalte setzen, dann würde der Content aber frühzeitg wrappen, obwohl noch ausreichend Platz ist. Für große Monitore ist ja auch die Option showTablesSideBySide gedacht, damit der Platz sinnvoll genutzt wird.

Danke. Ich mag die SideBySide funktion nicht, da sie "willkürlich" und nicht schön sortiert die Tabellen nebeneinander platziert. Kann man bestimmt ändern, doch weiss grad nicht wie ;)


Und, mir ist grad noch ein Plot Fehler auf dem Scheiss-Apple ;) aufgefallen. Ich habe 0.8 Scale und 95% PlotMax und 200pxMinWith eingestellt. Sieht wie folgt aus (siehe Bild).

Lg c
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 23 Juli 2019, 14:18:31
Wenn ich dieses ReadingsGroup in einen anderen Raum mache, gehts.. Komisch nur, dass ich in anderen Räumen auch ReadingsGroup habe... Hilft ein List?
Könnte höchstens sein, dass im "error" Reading von einem DOIF HTML Code steht, der das evtl. verursacht.
Statt ein List, schicke mir lieber mal den HTML Code von der Readingsgroup:
<table class="group">...</table>
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 23 Juli 2019, 14:22:03
Und, mir ist grad noch ein Plot Fehler auf dem Scheiss-Apple ;) aufgefallen. Ich habe 0.8 Scale und 95% PlotMax und 200pxMinWith eingestellt. Sieht wie folgt aus (siehe Bild).
Echt interessant was es alles für Effekte gibt...tritt bei mir auch auf...Ich schaue mal wo der Fehler ist.

Edit: Ist nur bei plotEmbed 0 aufgetreten...funktioniert jetzt wie es soll
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 23 Juli 2019, 15:02:55
Könnte höchstens sein, dass im "error" Reading von einem DOIF HTML Code steht, der das evtl. verursacht.
Statt ein List, schicke mir lieber mal den HTML Code von der Readingsgroup:
<table class="group">...</table>

ok, ich versuch es mal. Hilft das?

<table class="group"><tbody><tr><td><div class="devType groupHeader">&nbsp;<a href="/fhem?detail=DOIF_Error">DOIF_Error</a></div></td></tr><tr><td><div class="groupContent"><div class="scrollable"><table><tbody><tr><td class="containsTable"><table id="readingsGroup-DOIF_Error" groupid="atEnd" class="block wide readingsGroup"><tbody><tr class="odd"><td><div class="dname"><a href="/fhem?detail=Batterien_monitoring_DOIF">Batterien Monitoring DOIF:e_Batterie_monitoring_error</a></div></td><td><div informid="DOIF_Error-Batterien_monitoring_DOIF.e_Batterie_monitoring_error"></div></td><td><div informid="DOIF_Error-Batterien_monitoring_DOIF.e_Batterie_monitoring_error-ts">2018-09-08 12:19:12</div></td></tr><tr class="even"><td><div class="dname"><a href="/fhem?detail=Themometer_monitoring_DOIF">Thermometer Monitoring DOIF:e_Thermometer_monitoring_error</a></div></td><td><div informid="DOIF_Error-Themometer_monitoring_DOIF.e_Thermometer_monitoring_error"></div></td><td><div informid="DOIF_Error-Themometer_monitoring_DOIF.e_Thermometer_monitoring_error-ts">2019-06-09 19:45:53</div></td></tr></tbody></table></td></tr></tbody></table></div></div></td></tr></tbody></table>
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 23 Juli 2019, 15:48:37
ok, ich versuch es mal. Hilft das?

<table class="group"><tbody><tr><td><div class="devType groupHeader">&nbsp;<a href="/fhem?detail=DOIF_Error">DOIF_Error</a></div></td></tr><tr><td><div class="groupContent"><div class="scrollable"><table><tbody><tr><td class="containsTable"><table id="readingsGroup-DOIF_Error" groupid="atEnd" class="block wide readingsGroup"><tbody><tr class="odd"><td><div class="dname"><a href="/fhem?detail=Batterien_monitoring_DOIF">Batterien Monitoring DOIF:e_Batterie_monitoring_error</a></div></td><td><div informid="DOIF_Error-Batterien_monitoring_DOIF.e_Batterie_monitoring_error"></div></td><td><div informid="DOIF_Error-Batterien_monitoring_DOIF.e_Batterie_monitoring_error-ts">2018-09-08 12:19:12</div></td></tr><tr class="even"><td><div class="dname"><a href="/fhem?detail=Themometer_monitoring_DOIF">Thermometer Monitoring DOIF:e_Thermometer_monitoring_error</a></div></td><td><div informid="DOIF_Error-Themometer_monitoring_DOIF.e_Thermometer_monitoring_error"></div></td><td><div informid="DOIF_Error-Themometer_monitoring_DOIF.e_Thermometer_monitoring_error-ts">2019-06-09 19:45:53</div></td></tr></tbody></table></td></tr></tbody></table></div></div></td></tr></tbody></table>
also das sieht alles so aus wie es aussehen soll. Ich bin ziemlich ratlos  ???
Tritt das Problem auch beim iPhone mit einem anderen Browser auf?
Schicke mir nochmal den kompletten HTML Code von dem Raum, irgendwo muss da ja was sein...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 23 Juli 2019, 16:29:02
Danke. Ich mag die SideBySide funktion nicht, da sie "willkürlich" und nicht schön sortiert die Tabellen nebeneinander platziert. Kann man bestimmt ändern, doch weiss grad nicht wie ;)
Gibt eine schöne neue Funktion: "enableSortableGroups", damit kann man jetzt einfach per Drag'n'Drop die Gruppen/Tabellen sortieren. Geht aber nur bei DeviceGroups, bzw. bei allem wo das group-Attribut gesetzt ist.

Edit: Gab ein Problem, wenn das column-Attribut (wo die Informationen gespeichert werden) noch nicht gesetzt war. Ist jetzt behoben.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 23 Juli 2019, 17:19:43
also das sieht alles so aus wie es aussehen soll. Ich bin ziemlich ratlos  ???
Tritt das Problem auch beim iPhone mit einem anderen Browser auf?
Schicke mir nochmal den kompletten HTML Code von dem Raum, irgendwo muss da ja was sein...

Also, das komische ist, wenn ich dieses ReadingsGroup Device in einen Raum verschiebe mit anderen ReadingsGroup-Devices, dann wird es schön dargestellt (siehe Bild GEHT). Und wenn ich es mit anderen Devices mische, dann kommt es nicht gut. Anbei auch die HTML codes.. Die sind aber ganz schön lange... Ich hoffe du musst das nicht alles lesen ;)
Das Phänomen tritt auf meinem iPhone8 und bei Safari UND Chrome auf.

Vielleicht ist das einfach ein Schweizerding... in der EU würde es vermutlich funktionieren ;)


Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 23 Juli 2019, 20:40:25
Echt interessant was es alles für Effekte gibt...tritt bei mir auch auf...Ich schaue mal wo der Fehler ist.

Edit: Ist nur bei plotEmbed 0 aufgetreten...funktioniert jetzt wie es soll
Das geht leider auch noch nicht! Hab plotfork 1 und 0 getestet. Sorry.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 23 Juli 2019, 20:46:04
Echt interessant was es alles für Effekte gibt...tritt bei mir auch auf...Ich schaue mal wo der Fehler ist.

Edit: Ist nur bei plotEmbed 0 aufgetreten...funktioniert jetzt wie es soll

Ich habe auch oder immer noch das Problem, mit den abgeschnittenen Plots. Früher wurden sie runter skaliert.
Jetzt wie bei @choetzu, halb abgeschnitten und seitlich nicht scrollbar.

Internals:
   CONNECTS   76
   DEF        8085 global
   FD         7
   FUUID      5c463138-f33f-86cf-2310-794f554b7377e702
   FVERSION   01_FHEMWEB.pm:0.198780/2019-07-21
   NAME       WEBtablet
   NR         10
   NTFY_ORDER 50-WEBtablet
   PORT       8085
   STATE      Initialized
   TYPE       FHEMWEB
   READINGS:
     2019-07-23 15:07:11   state           Initialized
Attributes:
   Css        1
   confirmDelete 1
   csrfToken  none
   iconPath   fhemSVG:openautomation:default
   longpoll   1
   longpollSVG 1
   plotfork   1
   room       08.System
   styleData  {
 "f18": {
  "Pinned.menu": false,
  "hidePin": false,
  "hideLogo": true,
  "savePinChanges": false,
  "cols.bg": "FFFFE7",
  "cols.fg": "000000",
  "cols.link": "278727",
  "cols.evenrow": "F8F8E0",
  "cols.oddrow": "F0F0D8",
  "cols.header": "E0E0C8",
  "cols.menu": "D7FFFF",
  "cols.sel": "A0FFFF",
  "cols.inpBack": "FFFFFF",
  "showDragger": false,
  "rightMenu": false,
  "Pos.SVG_FileLog_Zentralheizung_1": {
   "top": 45,
   "left": 17
  },
  "Pos.SVG_FileLog_ThermoHygro_KU_1": {
   "top": 38,
   "left": -7
  },
  "Pos.Room_1_2e_20Heizung_grp_CUL_HM": {
   "left": 0,
   "top": 0,
   "width": 1470,
   "height": 143,
   "oTop": 34,
   "oLeft": 3
  },
  "Pos.Room_1_2e_20Heizung_grp_THSensor": {
   "left": 0,
   "top": 180,
   "width": 1470,
   "height": 35,
   "oTop": 54,
   "oLeft": 3
  },
  "Pos.Room_1. Heizung_svgZoomControl": {
   "left": 0,
   "top": 293,
   "width": 1476,
   "height": 0,
   "oTop": 0,
   "oLeft": 0
  },
  "Pos.Room_1. Heizung_SVG_FileLog_Zentralheizung_1": {
   "left": 0,
   "top": 479,
   "width": 1476,
   "height": 164,
   "oTop": -164,
   "oLeft": 0
  },
  "fixedInput": false,
  "Pos.Room_3_2e_20Wohnzimmer_grp_MQTT_DEVICE": {
   "left": 0,
   "top": 351,
   "width": 1470,
   "height": 50,
   "oTop": 54,
   "oLeft": 3
  },
  "wrapcolumns": true,
  "hideInput": true,
  "Pinned.style.list.f18 special": true,
  "snapToGrid": false,
  "Pos.Room_01_2eHeizung_grp_CUL_HM": {
   "left": 0,
   "top": 0,
   "width": 415,
   "height": 113,
   "oTop": 20,
   "oLeft": 0
  },
  "Pos.Room_01_2eHeizung_grp_THSensor": {
   "left": 0,
   "top": 135,
   "width": 415,
   "height": 22,
   "oTop": 40,
   "oLeft": 0
  },
  "Pos.Room_01.Heizung_svgZoomControl": {
   "left": 0,
   "top": 217,
   "width": 1660,
   "height": 0,
   "oTop": 0,
   "oLeft": 0
  },
  "Pos.Room_01.Heizung_SVG_FileLog_Zentralheizung_1": {
   "left": 0,
   "top": 417,
   "width": 1660,
   "height": 164,
   "oTop": -164,
   "oLeft": 0
  },
  "Pos.style_list_Styles": {
   "left": 0,
   "top": 0,
   "width": 257,
   "height": 352,
   "oTop": 20,
   "oLeft": 0
  },
  "Pos.style_list_f18_special": {
   "left": 0,
   "top": 374,
   "width": 257,
   "height": 134,
   "oTop": 40,
   "oLeft": 0
  },
  "Pos.style_list_f18__Room_specific": {
   "left": 0,
   "top": 550,
   "width": 257,
   "height": 457,
   "oTop": 40,
   "oLeft": 0
  }
 },
 "flex": {
  "title": "fhem",
  "showClock": true,
  "showRebootButton": true,
  "showUpdateButton": true,
  "showUpdateCheckButton": true,
  "showRereadIconsButton": true,
  "myUtilsFileName": "myUtils.pm",
  "showRawInputButton": true,
  "color": {
   "HeaderBG": "#2E5E87",
   "HeaderIcon": "#FFF",
   "HeaderText": "#FFF",
   "HeaderBorder": "#2E5E87",
   "MenuBG": "#000",
   "MenuBorder": "#2E5E87",
   "MenuIcon": "#FFF",
   "MenuRoomIcon": "#FFF",
   "MenuText": "#FFF",
   "MenuHoverLink": "#2E5E87",
   "MainBG": "#EEE",
   "TableHeaderBG": "#2E5E87",
   "TableHeaderText": "#FFF",
   "TableBorder": "#2E5E87",
   "TableOdd": "#EEE",
   "TableEven": "#DDD",
   "TableText": "#000",
   "TableHoverRow": "#AAA",
   "TableHoverLink": "#2E5E87",
   "TableNewEvent": "#F00",
   "TableIcon": "#2E5E87",
   "SetGetAttrBG": "#CCC",
   "SubmitButtonBG": "#2E5E87",
   "SubmitButtonBorder": "#555",
   "SubmitButtonText": "#FFF",
   "WidgetBorder": "#555",
   "WidgetText": "#000",
   "WidgetHighlight": "#2E5E87",
   "LogDate": "#000",
   "LogTime": "#000",
   "LogVerbose0": "#000",
   "LogVerbose1": "#F00",
   "LogVerbose2": "#FFA500",
   "LogVerbose3": "#008000",
   "LogVerbose4": "#1E90FF",
   "LogVerbose5": "#00F",
   "plotBG": "#EEE",
   "plotBorder": "#2E5E87",
   "plotText": "#000",
   "plotGrid": "#555",
   "plotMarker": "#F00",
   "plotLine0": "#F00",
   "plotLine1": "#0F0",
   "plotLine2": "#00F",
   "plotLine3": "#F0F",
   "plotLine4": "#A52A2A",
   "plotLine5": "#000",
   "plotLine6": "#808000",
   "plotLine7": "#808080",
   "plotLine8": "#FF0",
   "plotLinePasted": "#000"
  },
  "colorHeaderBG": "#06A",
  "colorHeaderIcon": "#FFF",
  "colorHeaderText": "#FFF",
  "colorHeaderBorder": "#FFF",
  "colorMenuBG": "#000",
  "colorMenuBorder": "#FFF",
  "colorMenuIcon": "#FFF",
  "colorMenuRoomIcon": "#FFF",
  "colorMenuText": "#FFF",
  "colorMenuHoverLink": "#06A",
  "colorMainBG": "#EEE",
  "colorTableHeaderBG": "#06A",
  "colorTableHeaderText": "#FFF",
  "colorTableBorder": "#000",
  "colorTableOdd": "#EEE",
  "colorTableEven": "#DDD",
  "colorTableText": "#000",
  "colorTableHoverRow": "#AAA",
  "colorTableHoverLink": "#06A",
  "colorTableNewEvent": "#F00",
  "colorTableIcon": "#06A",
  "colorSetGetAttrBG": "#CCC",
  "colorSubmitButtonBG": "#06A",
  "colorSubmitButtonBorder": "#000",
  "colorSubmitButtonText": "#FFF",
  "colorWidgetBorder": "#555",
  "colorWidgetText": "#000",
  "colorWidgetHighlight": "#06A",
  "showSaveButton": true,
  "showRoomDeviceName": true,
  "plotMaxWidth": "100%",
  "showMenuAlways": false,
  "enableCommandHistory": true,
  "enableDeviceSearch": true,
  "plotMinWidth": "250px",
  "showReadingsGroupAsTable": true,
  "hideWebcmdOnSmallScreen": false,
  "colorPreset": {
   "darkOrange": {
    "HeaderBG": "#424242",
    "HeaderIcon": "#FFF",
    "HeaderText": "#FFF",
    "HeaderBorder": "#424242",
    "MenuBG": "#000",
    "MenuBorder": "#424242",
    "MenuIcon": "#ad7c32",
    "MenuRoomIcon": "#ad7c32",
    "MenuText": "#ad7c32",
    "MenuHoverLink": "#424242",
    "MainBG": "#000",
    "TableHeaderBG": "#424242",
    "TableHeaderText": "#FFF",
    "TableBorder": "#424242",
    "TableOdd": "#000",
    "TableEven": "#222222",
    "TableText": "#ad7c32",
    "TableHoverRow": "#333333",
    "TableHoverLink": "#424242",
    "TableNewEvent": "#F00",
    "TableIcon": "#424242",
    "SetGetAttrBG": "#333333",
    "SubmitButtonBG": "#424242",
    "SubmitButtonBorder": "#424242",
    "SubmitButtonText": "#FFF",
    "WidgetBorder": "#424242",
    "WidgetText": "#ad7c32",
    "WidgetHighlight": "#424242",
    "LogDate": "#ad7c32",
    "LogTime": "#ad7c32",
    "LogVerbose0": "#ad7c32",
    "LogVerbose1": "#F00",
    "LogVerbose2": "#FFA500",
    "LogVerbose3": "#0F0",
    "LogVerbose4": "#1E90FF",
    "LogVerbose5": "#00F",
    "plotBG": "#EEE",
    "plotBorder": "#424242",
    "plotText": "#ad7c32",
    "plotGrid": "#555",
    "plotMarker": "#F00",
    "plotLine0": "#F00",
    "plotLine1": "#0F0",
    "plotLine2": "#00F",
    "plotLine3": "#F0F",
    "plotLine4": "#A52A2A",
    "plotLine5": "#000",
    "plotLine6": "#808000",
    "plotLine7": "#808080",
    "plotLine8": "#FF0",
    "plotLinePasted": "#000"
   }
  },
  "scalePage": "1",
  "colorOptionsDetailed": false,
  "showTablesSideBySide": true,
  "enableAnimations": false,
  "improvePerformance": false,
  "enableLogLineWrap": true,
  "menuOrder": {},
  "enableRoundedEdges": true,
  "enableTableShadow": true
 }
}
   stylesheetPrefix flex
   title      { if($FW_room) { "FHEM: $FW_room" } elsif($FW_detail) { "FHEM: $FW_detail" } else { "Home, Sweet Home" } }
   verbose    4
   viewport   width=device-width, initial-scale=1.0
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 24 Juli 2019, 10:01:10
Also, das komische ist, wenn ich dieses ReadingsGroup Device in einen Raum verschiebe mit anderen ReadingsGroup-Devices, dann wird es schön dargestellt (siehe Bild GEHT). Und wenn ich es mit anderen Devices mische, dann kommt es nicht gut. Anbei auch die HTML codes.. Die sind aber ganz schön lange... Ich hoffe du musst das nicht alles lesen ;)
Das Phänomen tritt auf meinem iPhone8 und bei Safari UND Chrome auf.

Vielleicht ist das einfach ein Schweizerding... in der EU würde es vermutlich funktionieren ;)
War kein Schweizerding ;)
Ich habe ein altes iPhone von einem Freund bekommen und konnte es somit debuggen. Jetzt sollte alles korrekt angezeigt werden.


Das geht leider auch noch nicht! Hab plotfork 1 und 0 getestet. Sorry.
Ich habe auch oder immer noch das Problem, mit den abgeschnittenen Plots. Früher wurden sie runter skaliert.
Jetzt wie bei @choetzu, halb abgeschnitten und seitlich nicht scrollbar.
Das Problem sollte jetzt (hoffentlich) endgültig gelöst sein.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: carlos am 24 Juli 2019, 10:24:56
Hallo,
Vorab der Style gefällt mir gut, vor allem aber wie schnell hier neue features kommen und  Probleme gelöst werden.
Danke dafür.

Ich habe mal eine Frage, wäre es machbar die room icons im Menü rechtsbündig zu machen wie in angehängten Bild ?

Gruß

Carlos
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 24 Juli 2019, 10:45:57
Vorab der Style gefällt mir gut, vor allem aber wie schnell hier neue features kommen und  Probleme gelöst werden.
Danke dafür.
Solange ich noch Zeit habe, werde ich sie auch nutzen...ab Oktober ist das dann nicht mehr möglich  ;D

Ich habe mal eine Frage, wäre es machbar die room icons im Menü rechtsbündig zu machen wie in angehängten Bild ?
Gefällt mir gut! Ich habe eine neue Option eingebaut "showRoomIconsRight".
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: carlos am 24 Juli 2019, 10:58:30
Gefällt mit jetzt auch sehr gut.
Danke dafür.
Gruß

Carlos
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 24 Juli 2019, 12:44:26
War kein Schweizerding ;)
Ich habe ein altes iPhone von einem Freund bekommen und konnte es somit debuggen. Jetzt sollte alles korrekt angezeigt werden.

Das Problem sollte jetzt (hoffentlich) endgültig gelöst sein.

Update durchgeführt und cache vom chrome gelöscht.
Bei mir besteht das Problem weiterhin.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 24 Juli 2019, 13:59:29
Update durchgeführt und cache vom chrome gelöscht.
Bei mir besteht das Problem weiterhin.
Auf ein neues...jetzt aber?!  :o
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 24 Juli 2019, 14:37:03
Jetzt funktionert es, top  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 24 Juli 2019, 15:43:47
Jetzt funktionert es, top  :)
Kann ich bestätigen! Top!!

Auch das ReadingsGroup Problem ist Geschichte! Super! Danke!!


Und sollte es dir langweilig werden ;) , wäre evtl eine Individualisierung der MenuIcons in der Nav Bar plus Ergänzung eines HOME icons ein guter Lückenbüsser ;)

Cheers c
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 24 Juli 2019, 16:44:57
Und sollte es dir langweilig werden ;) , wäre evtl eine Individualisierung der MenuIcons in der Nav Bar plus Ergänzung eines HOME icons ein guter Lückenbüsser ;)
Was stellst du dir genau vor unter "Individualisierung" vor? Frei definierbare Icons/Commands? Und für was ein Home icon ???
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 24 Juli 2019, 16:57:47
Ne Kleinigkeit noch.
Im Style Settings Dialog passt die Darstellung des "Tooltips" nicht (siehe Screenshot).

Im Raw Input Dialog ist das Eingabefeld plötzlich ganz schmal (zweiter Screenshot)

Getestet auf Mobile, Android, Chrome
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 24 Juli 2019, 17:00:52
Ne Kleinigkeit noch.
Im Style Settings Dialog passt die Darstellung des "Tooltips" nicht (siehe Screenshot).
Danke, das habe ich aber vorher schon gefixed ;)


Edit: Ja, mit dem Code Mirror gibt es noch Probleme, daher habe ich es jetzt aktuell optional gemacht, wobei es regulär deaktiviert ist, zumindest solange bis ich das Problem gelöst habe.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 24 Juli 2019, 17:01:56
Was stellst du dir genau vor unter "Individualisierung" vor? Frei definierbare Icons/Commands
Nein, dass man die Standarticons ändern kann im Menu, siehe Bild 1

Und für was ein Home icon ???

so ähnlich wie im Darkstyle, dort gibt es ein Logo(Hier FHEM). Dies ist in deinem Style nicht vorgesehen. Aber das ist nun wirlich nice to have...
Edit: uns so siehst du auch, was ich mit den Rundungen in der Navi, resp. Menue gemeint habe ;)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 24 Juli 2019, 17:02:51
Ich habe heute erstmals dein Skin getestet und bin begeistert.
Ein spiele gerade ein wenig mit dem font-weight rum, da mir die Schrift teilweise zu fett ist. Besteht die Möglichkeit, in der Raumansicht den Fettdruck optional zu machen, aber in der Detailansicht (zur Abgrenzung der Internals & Co.) den Fettdruck aktiv zu lassen oder eine alternative Hervorhebung der ersten Spalte? Ich schätze, dass das schwierig werden könnte, oder?

Die Schriftgröße in den SVG-Plots finde ich sehr extrem und weicht irgendwie vollständig vom Rest ab. Kann man da noch etwas machen?

Siehe:
#svg_title .title
.legend
.y2label und .ylabel

Kann man bei den table.room evtl. ein "margin-bottom: 1em;" einbauen, um die Blöcke im Menü voneinander abzugrenzen?



Nachtrag:
Abgesehen von der globalen Skalierung hat man auf die Schriftgrößen kleinen Einfluss, oder?
Ist so etwas in FHEMWEB realisierbar?

Noch eine Frage:
Könnte man die Menüpunkt mit einer Linie voneinander abgrenzen?

Folgendes sieht zu massiv aus:
.room tr, .room tr td {
    display: block;
    border-bottom: 1px solid #ddd;
}

Und hiermit bekommt man Probleme mit den Untermenüs:
#menu div {
    padding: 4px 8px;
    border-bottom: 1px solid #ddd;
}

Aber nur eine Idee.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 24 Juli 2019, 17:10:32
Nein, dass man die Standarticons ändern kann im Menu, siehe Bild 1
Ich stehe auf dem Schlauch, wo sind da Icons auf deinem Screenshot?

so ähnlich wie im Darkstyle, dort gibt es ein Logo(Hier FHEM). Dies ist in deinem Style nicht vorgesehen. Aber das ist nun wirlich nice to have...
Hmm, generell kein Problem, fraglich ist nur wie/wo ich das integrieren soll. Die Menu Header hat (aus optischen Gründen) die gleiche Höhe wie die Commandline. Wenn man dort ein Logo unterbringt sieht das doch nicht mehr schön aus :o
Ich könnte es darunter platzieren, also zwischen den Menu Icons und den Raum-Blöcken, oder hast du einen Vorschlag?

Edit: uns so siehst du auch, was ich mit den Rundungen in der Navi, resp. Menue gemeint habe ;)
Ich verstehe, aber mein Menü ist ja ganz anders aufgebaut, die Blöcke sind ja nur durch eine Linie getrennt, und eine Linie kann man ja schlecht abrunden  ;D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 24 Juli 2019, 17:19:50
Ich stehe auf dem Schlauch, wo sind da Icons auf deinem Screenshot?

sorry die Verwirrung. Ich meine die Menue Icons .. Nun mit hoffentlich richtigem Screenprint ;)

oder hast du einen Vorschlag?

Oder du machst das neue Home- Icon auf die Höhe der Commandline, gibst ein paar pixel an Höhe (nicht viel) und setzt die Menue-Icons etwas kleiner und vor die Raumübersicht... Das müsste man mal checken, ob dies optisch was hergibt. Wenn nicht, dann lieber drauf verzichten.. wie gesagt, nice to have

EDIT: Suboptima, da das Home_Icon dann auf Mobile nur ersichtlich ist, wenn man das Menue aufmacht. Evtl. wäre noch eine Option rechtsbündig bei der Commandline.. Aber ob das gut aussieht?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 24 Juli 2019, 17:31:38
Ich habe heute erstmals dein Skin getestet und bin begeistert.
Das freut mich  :)

Ein spiele gerade ein wenig mit dem font-weight rum, da mir die Schrift teilweise zu fett ist. Besteht die Möglichkeit, in der Raumansicht den Fettdruck optional zu machen, aber in der Detailansicht (zur Abgrenzung der Internals & Co.) den Fettdruck aktiv zu lassen oder eine alternative Hervorhebung der ersten Spalte? Ich schätze, dass das schwierig werden könnte, oder?
Da du erste bist, baue ich das mal nicht fest ein, aber du erreichst das, mit folgendem CSS
.roomoverview .odd > td:nth-child(1), .roomoverview .even > td:nth-child(1) { font-weight: normal }
Die Schriftgröße in den SVG-Plots finde ich sehr extrem und weicht irgendwie vollständig vom Rest ab. Kann man da noch etwas machen?
Naja, das hängt halt mit der Skalierung zusammen. Du kannst das Skalieren auch deaktivieren, indem du plotMinWidth/plotMaxWidth auf den gleichen Wert setzt (z.B. 800px). Die Größe des Plot Inhalts (also Liniendicke und Schriftgröße) und das Seitenverhältnis kannst du mit dem plotsize-Attribut (vom FHEMWEB device) beeinflussen. Wobei kleinere Werte in einen größeren Inhalt resultieren...einfach mal rumtesten.

Kann man bei den table.room evtl. ein "margin-bottom: 1em;" einbauen, um die Blöcke im Menü voneinander abzugrenzen?
Da überlege ich mir was, das werde ich irgendwie optional einbinden.

Abgesehen von der globalen Skalierung hat man auf die Schriftgrößen kleinen Einfluss, oder?
Ist so etwas in FHEMWEB realisierbar?
Generell könnte man natürlich die Schriftgröße per CSS (im FHEMWEB Device) ändern, allerdings ist das Layout so designed, dass die Widgets der Schrifthöhe gleich sind. Wenn man also nur die Schriftgröße ändert, hätte das unschöne Effekte, daher gibt es die "scalePage" Option. Was würdest du dir denn genau vorstellen?

Noch eine Frage:
Könnte man die Menüpunkt mit einer Linie voneinander abgrenzen?
Hmm, also mit Linien wäre das nicht gut, da die Blöcke ja schon mit einer Linie getrennt werden. Man könnte aber eine Zeilen-Färbung machen:
.room tr:nth-child(2n) { background: #888 }Die Farbe müsstest du natürlich manuell anpassen
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 24 Juli 2019, 17:40:36
ui, mir ist noch was aufgefallen. Bei meinem Style ist die Iconwahl ein Graus... siehe Bild. Wie kann ich das ändern? oder ist das ein Bug?

lg c
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 24 Juli 2019, 17:47:13
EDIT: Suboptima, da das Home_Icon dann auf Mobile nur ersichtlich ist, wenn man das Menue aufmacht. Evtl. wäre noch eine Option rechtsbündig bei der Commandline.. Aber ob das gut aussieht?
Hmm...also ich sehe das schon richtig, dass es dir nur darum geht irgendwo ein kleines Logo zu platzieren? Ich überlege mir was...aber das Layout ist absolut nicht darauf ausgelegt...

ui, mir ist noch was aufgefallen. Bei meinem Style ist die Iconwahl ein Graus... siehe Bild. Wie kann ich das ändern? oder ist das ein Bug?
So sollte das nicht aussehen :)
Habe ich gefixed, ob du damit aber zufrieden bist?  ;D
Es ist halt allgemein problematisch bei sooooo vielen Icons eine übersichtliche Darstellung zu finden.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 24 Juli 2019, 17:47:37
Da du erste bist, baue ich das mal nicht fest ein, aber du erreichst das, mit folgendem CSS
.roomoverview .odd > td:nth-child(1), .roomoverview .even > td:nth-child(1) { font-weight: normal }

Danke. Hast du Lust den Link "additional CSS" wie im f18-Skin einzubauen. Dann spart man sich (auch bei weiteren Änderungen) den Weg zum FHEMWEB-Device.

Naja, das hängt halt mit der Skalierung zusammen. Du kannst das Skalieren auch deaktivieren, indem du plotMinWidth/plotMaxWidth auf den gleichen Wert setzt (z.B. 800px). Die Größe des Plot Inhalts (also Liniendicke und Schriftgröße) und das Seitenverhältnis kannst du mit dem plotsize-Attribut (vom FHEMWEB device) beeinflussen. Wobei kleinere Werte in einen größeren Inhalt resultieren...einfach mal rumtesten.

Nee, das war es leider nicht bzw. nicht direkt. Das SVG ist eigentlich auch in Ordnung. Legende habe ich dank deiner Tipss passend bekommen. Aber das Label oberhalb des SVGs ist riesig.

Da überlege ich mir was, das werde ich irgendwie optional einbinden.
Danke. Es gibt nämlich bestimmt ein paar Anwender mit mehreren Blöcken.


Generell könnte man natürlich die Schriftgröße per CSS (im FHEMWEB Device) ändern, allerdings ist das Layout so designed, dass die Widgets der Schrifthöhe gleich sind. Wenn man also nur die Schriftgröße ändert, hätte das unschöne Effekte, daher gibt es die "scalePage" Option. Was würdest du dir denn genau vorstellen?

Das wird zu komplex. Am besten auch per "additional CSS" übers FHEMWEB-Device.
Ich frage, weil mir die Schrift in vielen Styles viel zu groß ist. Das Menü benötigt auch einfach zu viel Platz. Ich habe mir damit beholfen, die Schriftgröße von 1.2em auf 1em zu ändern.

#menu a {
    text-decoration: none;
    font-size: 1em;
    display: block;
    cursor: pointer;
}

Hmm, also mit Linien wäre das nicht gut, da die Blöcke ja schon mit einer Linie getrennt werden. Man könnte aber eine Zeilen-Färbung machen:
.room tr:nth-child(2n) { background: #888 }Die Farbe müsstest du natürlich manuell anpassen

Guter Tipp. Das macht jedoch spätestens beim ersten Untermenü Probleme, da die Alternierung dann nicht mehr passt. Ich werde mir selber etwas einfallen lassen. Danke.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 24 Juli 2019, 18:19:50
Hmm...also ich sehe das schon richtig, dass es dir nur darum geht irgendwo ein kleines Logo zu platzieren?

Ja, im Grunde schon. Doch ein Logo macht natürlich nur an prominenter Stelle Sinn.

Habe ich gefixed, ob du damit aber zufrieden bist?  ;D

und ob. So passt es bestens!!! Herzlichen Dank Meister..
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 24 Juli 2019, 18:27:14
Danke. Hast du Lust den Link "additional CSS" wie im f18-Skin einzubauen. Dann spart man sich (auch bei weiteren Änderungen) den Weg zum FHEMWEB-Device.
Erledigt.

Nee, das war es leider nicht bzw. nicht direkt. Das SVG ist eigentlich auch in Ordnung. Legende habe ich dank deiner Tipss passend bekommen. Aber das Label oberhalb des SVGs ist riesig.
War in der Tat zu groß, danke, ist erledigt.


Ich frage, weil mir die Schrift in vielen Styles viel zu groß ist. Das Menü benötigt auch einfach zu viel Platz. Ich habe mir damit beholfen, die Schriftgröße von 1.2em auf 1em zu ändern.
Und was spricht dagegen alles kleiner zu skalieren? Oder hatte sich das mit der Schriftgröße jetzt explizit nur auf das Menü bezogen?

Habe einen Margin zu den Menü Blöcken hinzugefügt, gibt schon Sinn...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 24 Juli 2019, 18:55:26
xanker, geht bei dir die Räumesortierung problemlos? Ich habe auf Mac (safari/chrome/) und iPhone 8 (safari/chrome) getestet. Im Verschiebmodus ist der Cursor weiter unten als der Platz, wo es hinverschoben wird... Zudem habe ich Probleme einen Raum zu unterst vor einem Strich zu platzieren.. Bei dir auc?

Sorry, hoffentlich verständlich...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 24 Juli 2019, 19:00:34
xanker, geht bei dir die Räumesortierung problemlos? Ich habe auf Mac (safari/chrome/) und iPhone 8 (safari/chrome) getestet. Im Verschiebmodus ist der Cursor weiter unten als der Platz, wo es hinverschoben wird... Zudem habe ich Probleme einen Raum zu unterst vor einem Strich zu platzieren.. Bei dir auc?
Joa, am PC funktioniert das etwas merkwürdig. Unter Android mit Touch funktioniert es hingegen optimal wie es sein soll. Ich vermute es hat was mit dem jquery Touch Punch Plugin zu tun (welches nötig ist für die korrekte Touch Steuerung). Ich werde das nochmal testen
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 24 Juli 2019, 20:27:33
Hallo Sebastian,

eine Merkwürdigkeit mit einem aktuellem Fhem incl. deinem style - es werden angepasste und zu große (zumindestens fürs Handy) angezeigt, s. Anhang, das gleiche gibt es auch in anderen Räumen.

Noch eine kleine Beobachtung. Wenn man eine Seite neu lädt auf dem Handy, dann springen die Einträge kurz in die falsche Ecke, dann in die richtige. Bei der Hintergrundfarbe der Diagramme lugt manchmal die hellgelbe Farbe des Standard-Fhem hervor.

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 24 Juli 2019, 21:13:04
Hey Gisbert, hatte ich auch nach dem Update. Bei mir hat Cache-Löschen abhilfe gebracht!!

Lg C
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 24 Juli 2019, 22:03:20
Hallo choetzu,

das Cache leeren war es leider noch nicht, da muss wohl xanker ran.
In Chrome und Firefox tritt das identische Verhalten auf, und witzigerweise in Firefox auf dem PC/Large Screen ist die Größe genau andersherum.
Was auf dem Handy klein (gwünscht) ist, ist auf dem Desktopbildschirm groß und vice versa.

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 24 Juli 2019, 22:19:47
Hallo choetzu,

das Cache leeren war es leider noch nicht, da muss wohl xanker ran.
In Chrome und Firefox tritt das identische Verhalten auf, und witzigerweise in Firefox auf dem PC/Large Screen ist die Größe genau andersherum.
Was auf dem Handy klein (gwünscht) ist, ist auf dem Desktopbildschirm groß und vice versa.

Viele Grüße Gisbert
Es gab zuvor schon Meldungen mit dem Problem und ich dachte es ist nun behoben. Ich weiß was das Problem ist, ich weiß nur nicht warum es auftritt. Problem: das viewBox Attribut von den SVGs muss mit den durch plotsize definierten Werten gesetzt werden, damit die Plots skaliert werden können. Wenn plotEmbed 1 ist, damn stehen die Werte im width/height Attribut, bei plotEmbed 0 sind sie im style Attribut als CSS definiert, warum auch immer. Normal ist das straight-forward: Werte auslesen und viewBox setzen, aber komischerweise kommt es gelegentlich dazu, dass in width/height nicht die in plotsize definierten Werte stehen, was dazu führt dass der plot abgeschnitten wird. Ich muss es dann wohl so machen, dass ich plotsize aus dem FHEMWEB device auslesen muss, werde ich morgen erledigen.

Das mit dem hin und her springen der Zelleninhalte liegt daran, dass man nicht per CSS erkennen kann ob eine Zelle umgebrochen ist (dann soll sie nämlich anders ausgerichtet werden), daher muss das per Javascript gemacht werden, was bei der Menge an Zellen nicht so super ist, vor allem weil das Überprüfen bei jedem resize (bzw. allgemein bei jeder Änderung) wiederholt werden muss. Nach dem setzen der passenden CSS Klasse muss der Browser dann neu rendern, daher das "springen". Ich hab die Überprüfungen heute ein wenig angepasst um die Performance zu verbessern. Ich werde wohl noch einen Loading Screen einbauen und den Content erst anzeigen nachdem alles gerendert ist.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 25 Juli 2019, 07:40:52
Moin,

ich hab gerade noch ein Problemchen mit der Device Search Option (enableDeviceSearch) festgestellt. Die Suche kollidiert mit cmdalias.

Und zwar hab ich folgenden cmdalias bei mir definiert:
define c_dellog cmdalias dellog AS {qx(truncate $currlogfile --size 0);;Log 1, "Logfile gelöscht";;}
Wenn ich jetzt dellog eintippe, erscheint das Device statt dass das command ausgeführt wird  :o
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 25 Juli 2019, 08:23:55
täglich grüsst das Murmeltier. Auch ich habe noch was festgestellt.

Bei ReadingsGroup Tabellen werden die Zeilen mit Leerständen nicht bis ans Ende gezogen. Sieht ziemlich komisch aus. Oder ist das gewollt?

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.

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 09:23:01
Wenn ich jetzt dellog eintippe, erscheint das Device statt dass das command ausgeführt wird  :o
Ja, die beiden Funktionen kollidieren allgemein noch unter gewissen Umständen. Ich habe jetzt mal den Autofocus der Device Suche deaktiviert, damit ist dein Problem gelöst. Es gibt aber auch noch das Problem, dass wenn man durch die Command-History geht und dann ein Command auf ein Device matched (was bei dir mit "dellog" der Fall wäre), dass dann die Device Suche aufpoppt, was wiederum bedeutet, dass man dann nicht mit hoch/runter weiter durch die Command-History scrollen kann. Das muss ich auch noch irgendwie lösen.


Bei ReadingsGroup Tabellen werden die Zeilen mit Leerständen nicht bis ans Ende gezogen. Sieht ziemlich komisch aus. Oder ist das gewollt?
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.

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.
Wäre natürlich eine Möglichkeit, aber dann geht das Logo ja auch irgendwie unter...Zudem meintest du ja, dass es im Menü suboptimal ist, da es dann mobil nur sichtbar ist, wenn man das Menü öffnet.

An alle die hier noch mitlesen: gibt es weitere Vorschläge wo ein Logo sinnvoll platziert werden kann, ohne die Optik zu zerstören?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 09:39:27
Es gibt aber auch noch das Problem, dass wenn man durch die Command-History geht und dann ein Command auf ein Device matched (was bei dir mit "dellog" der Fall wäre), dass dann die Device Suche aufpoppt, was wiederum bedeutet, dass man dann nicht mit hoch/runter weiter durch die Command-History scrollen kann. Das muss ich auch noch irgendwie lösen.
Ich habe eine Lösung gefunden, ist implementiert...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 09:52:33
Ich habe gerade aktualisiert und kann in der CommandLine kein Befehle mit ENTER mehr abschicken.
Deaktiviere ich 'enableCommandHistory', dann klappt es.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 10:07:32
Ich habe gerade aktualisiert und kann in der CommandLine kein Befehle mit ENTER mehr abschicken.
Deaktiviere ich 'enableCommandHistory', dann klappt es.
Ich habe das Problem nicht, aber ich habe gerade auch noch daran gearbeitet. Versuche es nochmal mit der aktuellen Version
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 10:17:18
Ja, es läuft nun. Danke schön.

Die Commandhistory nutzt man mit UP|DOWN und wer mag mit STRG-ENTER, oder?
Oder gibt es noch weitere Features? Ich meine, dass ich gerade irgendwie versehentlich ein Listenfeld mit allen Befehlen geöffnet hatte. Kann das sein oder habe ich das falsch in Erinnerung?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 10:18:29
Du bietest ja die Möglichkeit an, die Anzeige diverser Reload-Icons zu konfigurieren.
Könnte man Reload My_Utils vielleicht auch deaktivierbar machen?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 10:23:00
Ja, es läuft nun. Danke schön.

Die Commandhistory nutzt man mit UP|DOWN und wer mag mit STRG-ENTER, oder?
Oder gibt es noch weitere Features? Ich meine, dass ich gerade irgendwie versehentlich ein Listenfeld mit allen Befehlen geöffnet hatte. Kann das sein oder habe ich das falsch in Erinnerung?
Jepp, up/down um durch die History zu iterieren. Mit ENTER wird der Befehlt dann ausgeführt und mit CTRL+ENTER wird alles in "{}" gesetzt, für Perl Code. Dass sich das Listenfeld mit den Befehlen öffnet (was dem Standard Browser Verhalten entspricht), sollte eigentlich nicht sein, da es deaktiviert ist. Aber mir ist auch schon aufgefallen, dass das manchmal passiert, aber ich kann nicht mehr machen wie es zu deaktivieren  ;D

Die Device Suche springt dann ggf. dazwischen, wenn die Liste aufpoppt, dann kann mit up/down das entsprechende Device ausgewählt und mit ENTER geöffnet werden.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 10:23:48
Du bietest ja die Möglichkeit an, die Anzeige diverser Reload-Icons zu konfigurieren.
Könnte man Reload My_Utils vielleicht auch deaktivierbar machen?
Les mal das Tooltip  ;)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 10:30:21
Jepp, up/down um durch die History zu iterieren. Mit ENTER wird der Befehlt dann ausgeführt und mit CTRL+ENTER wird alles in "{}" gesetzt, für Perl Code. Dass sich das Listenfeld mit den Befehlen öffnet (was dem Standard Browser Verhalten entspricht), sollte eigentlich nicht sein, da es deaktiviert ist. Aber mir ist auch schon aufgefallen, dass das manchmal passiert, aber ich kann nicht mehr machen wie es zu deaktivieren  ;D

Die Device Suche springt dann ggf. dazwischen, wenn die Liste aufpoppt, dann kann mit up/down das entsprechende Device ausgewählt und mit ENTER geöffnet werden.

Danke für die Erklärung. Das stört mich nicht. Ich wollte nur kein Feature verpassen. :-)
Die Browser Historie habe ich damals sehr intensiv genutzt, da ich anhand der ersten Buchstaben mir z.B. eine alte FileLog-Def herausgeholt habe. Man ist ja faul.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 10:31:11
Les mal das Tooltip  ;)

Welches? Wo?
In der Konfiguration kann ich nichts zu diesem einem übrig gebliebenen Button finden?
Und der Button ist nur mit dem Alt-Tag "reload myUtils.pm" beschriftet.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 10:32:26
Welches? Wo?
In der Konfiguration kann ich nichts zu diesem einem übrig gebliebenen Button finden?
Und der Button ist nur mit dem Alt-Tag "reload myUtils.pm" beschriftet.
Das Tooltip von "myUtilsFileName" in den Einstellungen. Wenn man dort nichts einträgt, wird der Button ausgeblendet.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 10:33:26
Das Tooltip von "myUtilsFileName" in den Einstellungen. Wenn man dort nichts einträgt, wird der Button ausgeblendet.

Oh, danke. Darauf muss man erst einmal kommen. :-)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 10:36:24
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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 10:52:00
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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 11:13:46
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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 11:50:15
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:

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

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

plotsize = 800,160
plotMinWidth = 300px
plotMaxWidth  = 800px
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 11:51:53
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?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 12:10:02
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?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 12:12:03
Bei der Nutzung von CodeMirror (z.B. über edit files), fehlt der vertikale Scrollbalken.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 13:57:26
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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 25 Juli 2019, 14:54:15
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...

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 16:42:51
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 (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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 17:06:45
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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 17:22:16
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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 25 Juli 2019, 17:27:56
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 (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..
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 25 Juli 2019, 17:28:43
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!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 17:39:38
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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 17:43:06
ich habe dazu eine neue Farb-Auswahl hinzugefügt: TableLinkFirstCol
Perfekt. Danke dir. Bist wirklich sehr engagiert.

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.
Okay, ich verstehe. Ich habe dann den Ursprungsfarbwert so angepasst, dass es im Verlauf hübsch aussieht. Auch hier vielen Dank.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 17:51:08
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..
ich habe nun doch in den Einstellungen ein Option "logoHTML" hinzugefügt, dort kannst du dann einfach dein HTML Code eintragen.

Edit:
Hier noch ein Beispiel wie man z.B: das FHEM Logo anzeigen kann:
<img src="/fhem/images/default/fhemicon.png">
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 18:10:14
In Chrome und Firefox tritt das identische Verhalten auf, und witzigerweise in Firefox auf dem PC/Large Screen ist die Größe genau andersherum.
Was auf dem Handy klein (gwünscht) ist, ist auf dem Desktopbildschirm groß und vice versa.
Ich habe das jetzt noch mehrfach getestet, mit plotEmbed 1 und plotEmbed 0, es funktioniert bestens. Besteht das Problem bei dir noch? Falls ja, muss ich wohl wirklich umstellen, dass plotsize aus dem fhem devices ausgelesen wird.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 25 Juli 2019, 20:29:19
Ich habe das jetzt noch mehrfach getestet, mit plotEmbed 1 und plotEmbed 0, es funktioniert bestens. Besteht das Problem bei dir noch? Falls ja, muss ich wohl wirklich umstellen, dass plotsize aus dem fhem devices ausgelesen wird.

Hallo xanker,

hab gerade ein Update gemacht und Fhem neu gestartet - auf dem PC-Bildschirm sieht es leider immer noch gemischt aus (siehe Screenshot).
Auf dem Handy ist es ebenso, nur dass dort die kleinen Diagramme groß und die großen klein sind, also keine Veränderung.
Bei PlotEmbed 0 wird's auch nicht besser, nur anders. :'(

Kannst du noch auf die Suche gehen?
Welche Infos benötigst du ggf. noch von mir?

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 21:10:37
Große klein und Kleine groß.
Kann es sein, dass du in deinen Plot-Devices auch individuelle "plotsize" gesetzt hast?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 21:26:02
Hallo xanker,

hab gerade ein Update gemacht und Fhem neu gestartet - auf dem PC-Bildschirm sieht es leider immer noch gemischt aus (siehe Screenshot).
Auf dem Handy ist es ebenso, nur dass dort die kleinen Diagramme groß und die großen klein sind, also keine Veränderung.
Bei PlotEmbed 0 wird's auch nicht besser, nur anders. :'(

Kannst du noch auf die Suche gehen?
Welche Infos benötigst du ggf. noch von mir?

Viele Grüße Gisbert
Klaro gehe ich auf dir Suche, es gibt keine unlösbaren Probleme, nur langwierige  ;)
Dein Screenshot verwirrt mich, da der komplette Plot zu sehen ist, damit ist es nicht das zuvor genannte Problem, dass die viewBox falsch gesetzt wird, dann wären die Plots nämlich abgeschnitten (und nicht scrollbar). Ich tippe darauf, dass das viewBox Attribut gar nicht gesetzt wird, alternativ kann es sein, dass plotMinWidth/plotMaxWidth nicht gesetzt wird.
Schau mal das <svg> Tag eines zu großen Plots an ob dort das viewBox Attribut gesetzt ist.

Große klein und Kleine groß.
Kann es sein, dass du in deinen Plot-Devices auch individuelle "plotsize" gesetzt hast?
Das stellt kein Problem dar, ich habe es getestet.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 21:27:50
@xanker:
Zwei Auffälligkeiten im Mobilbetrieb

1) Es ist schwierig, die Webseite herunterzuscrollen.
Irgendwie akzeptiert das Skin die Wischgeste innerhalb der Tables nicht. Ich muss recht nah am Rand wischen, um scrollen zu können. Die Probleme scheinen im Querformat schlimmer zu sein.
Scheinbar wird nicht die Seite, sondern der Inhalt in den Tabellen versucht zu scrollen.

2)
Ich komme fast nie ans Ende der Seite. Ich muss mich schon richtig anstrengen. Es wird immer wieder ein wenig wieder hochgescrollt.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 21:30:55
@xanker:
Zwei Auffälligkeiten im Mobilbetrieb

1) Es ist schwierig, die Webseite herunterzuscrollen.
Irgendwie akzeptiert das Skin die Wischgeste innerhalb der Tables nicht. Ich muss recht nah am Rand wischen, um scrollen zu können. Die Probleme scheinen im Querformat schlimmer zu sein.
Scheinbar wird nicht die Seite, sondern der Inhalt in den Tabellen versucht zu scrollen.

2)
Ich komme fast nie ans Ende der Seite. Ich muss mich schon richtig anstrengen. Es wird immer wieder ein wenig wieder hochgescrollt.
Hmm, das habe ich bis jetzt auch noch nicht gehört  :o
Welchen Browser nutzt du? iOS/Android?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 25 Juli 2019, 21:33:05
Oh, Vergessen.
iOS Safari.

In Chrome unter iOS keine Probleme.

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 21:38:41
Oh, Vergessen.
iOS Safari.

In Chrome unter iOS keine Probleme.
Ich habe nur ein altes iPhone 4s von nem Freund. Dort funktioniert es ganz normal mit dem Safari. Ich wüsste auch nicht an was das liegen soll ???


Funktioniert!!!!! Der Hammer! Danke Meister!
Hast du auch scroll Probleme?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 25 Juli 2019, 22:34:32
Hast du auch scroll Probleme?
Nein, noch nicht aufgefallen. Meine ReadingsGroup Tabellen sind jedoch auch nicht wirklich lang, so dass man extrem scrollen muss.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 25 Juli 2019, 22:39:57
Nein, noch nicht aufgefallen. Meine ReadingsGroup Tabellen sind jedoch auch nicht wirklich lang, so dass man extrem scrollen muss.
Das war nicht auf die Readingsgroups bezogen  ;D
Sondern darauf:
@xanker:
Zwei Auffälligkeiten im Mobilbetrieb

1) Es ist schwierig, die Webseite herunterzuscrollen.
Irgendwie akzeptiert das Skin die Wischgeste innerhalb der Tables nicht. Ich muss recht nah am Rand wischen, um scrollen zu können. Die Probleme scheinen im Querformat schlimmer zu sein.
Scheinbar wird nicht die Seite, sondern der Inhalt in den Tabellen versucht zu scrollen.

2)
Ich komme fast nie ans Ende der Seite. Ich muss mich schon richtig anstrengen. Es wird immer wieder ein wenig wieder hochgescrollt.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 26 Juli 2019, 05:16:07
Hallo xanker,

Zitat
Ich tippe darauf, dass das viewBox Attribut gar nicht gesetzt wird, alternativ kann es sein, dass plotMinWidth/plotMaxWidth nicht gesetzt wird.
Schau mal das <svg> Tag eines zu großen Plots an ob dort das viewBox Attribut gesetzt ist.
Das viewBox Attribut finde ich weder bei den kleinen, passenden Diagrammen, noch bei den großen, wo finde ich das denn?
plotMinWidth/plotMaxWidth steht auf 340px und 55%.

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 08:45:47
Hallo xanker,
Das viewBox Attribut finde ich weder bei den kleinen, passenden Diagrammen, noch bei den großen, wo finde ich das denn?
plotMinWidth/plotMaxWidth steht auf 340px und 55%.
Hallo Gisbert,

das habe ich wohl nicht richtig ausgedrückt. Ich meinte nicht im FHEM device, sondern im HTML code. Wenn du (z.B bei Chrome) einen Rechtklick auf einen Plot (am besten beim Plot Titel) machst und dann auf "Untersuchen" klickst, sollte sich ein kleines Fenster mit dem HTML Code öffnen, wenn du dann ein paar Zeilen drüber schaust, ist dort ein <svg> Tag, das sollte so aussehen:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="SVGPLOT_SVG_BZ_Heizung" data-origin="FHEM" width="100%" viewBox="0 0 600 200" style="display: block;">Hier muss das viewBox Attribut zu sehen sein, wobei die hinteren beiden Zahlen dem plotsize Attribut entsprechen muss.

Zudem: wenn du plotEmbed 0 nutzt, und den <svg> Tag anklickst, siehst du rechts den zugehörigen CSS Code im dritten Block sollte das bei dir stehen:
div.SVGplot.SVG_<DEVICENAME> > svg, div.SVGplot.SVG_<DEVICENAME> > div {
    min-width: 340px;
    max-width: 55%;
}
(wobei <DEVICENAME> dem FHEM SVG Device Namen entspicht)

Wenn du plotEmbed 1 nutzt, dann müsste um den <svg> Tag ein <embed> Tag und darum ein <div> kommen, wenn du das <div> anklickst, dann siehst du hier die min-width und max-width Werte.

Sofern min-width/max-width und/oder viewBox nicht gesetzt sind, funktioniert das Skalieren nicht.

Edit: Ok, ich habe ein potentielles Problem ausgemacht, das ich in jedem Fall noch fixen muss. Problem: Wenn im SVG Fhem Device-Namen ein "." vorkommt, dann greift der CSS Selector nicht mehr, da in CSS nach einem "." ein Klassenname erwartet wird. Damn...

Edit2: Ich habe nun das Problem mit einem "." im Namen gelöst, versuche es mal mit der aktuellen Version, ich hoffe es funktioniert jetzt...

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 26 Juli 2019, 08:47:52
Irgendwas ist dan dem Thema Colspan noch kaputt.
Hab grad eben ein Update gemacht.
Seither kommt bei allen Räumen, welche eine Readingsgroup mit colspan haben, nur mehr das Grau vom darkstyle als Hintergrund und sonst nur ein eeres Fenster.
Siehe Screenshot.

Ein Beispiel eine RG, in welcher das colspan bei mir verwendet wird:
attr valueColumns { Chemie => 'colspan="2"' , Menge => 'colspan="3"'}
lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 09:02:55
Irgendwas ist dan dem Thema Colspan noch kaputt.
Hab grad eben ein Update gemacht.
Seither kommt bei allen Räumen, welche eine Readingsgroup mit colspan haben, nur mehr das Grau vom darkstyle als Hintergrund und sonst nur ein eeres Fenster.
Siehe Screenshot.

Ein Beispiel eine RG, in welcher das colspan bei mir verwendet wird:
attr valueColumns { Chemie => 'colspan="2"' , Menge => 'colspan="3"'}
lg, Stefan
Hups, da habe ich die Anführungszeichen vergessen  ;D
Ist gefixed
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 26 Juli 2019, 09:22:32
Ich habe testweise folgenden Code in logoHTML gesteckt:
<img src="http://www.itoda.com/apple/logos/AppleLogo-152x186.jpg" height="30" width="30" />Leider kommt der Code nicht in #logo an.

Füge ich den Code manuell in #logo ein, wird dieser auch angezeigt.

Füge ich in logoHTML:
<b>DH</b>ein, kommt er an.

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 09:23:38
Ich habe testweise folgenden Code in logoHTML gesteckt:
<img src="http://www.itoda.com/apple/logos/AppleLogo-152x186.jpg" height="30" width="30" />Leider kommt der Code nicht in #logo an.

Füge ich den Code manuell in #logo ein, wird dieser auch angezeigt.

Füge ich in logoHTML:
<b>DH</b>ein, kommt er an.

Gruß
Dan
Ich muss noch an meinem HTML-Check arbeiten, aktuell wird der Self-Close Tag "/>" noch als ungültig erkannt. Wenn du das "/" entfernst, sollte es gehen.

Edit: width und height musst du gar nicht setzen, das wird automatisch erzwungen.

Edit2: und mit einem Leerzeichen vor ">" gibt es wohl auch noch Probleme  :P
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: DeeSPe am 26 Juli 2019, 09:28:34
Ich muss noch an meinem HTML-Check arbeiten, aktuell wird der Self-Close Tag "/>" noch als ungültig erkannt. Wenn du das "/" entfernst, sollte es gehen.

Edit: width und height musst du gar nicht setzen, das wird automatisch erzwungen.

Edit2: und mit einem Leerzeichen vor ">" gibt es wohl auch noch Probleme  :P

Danke, so ginge es:
<img src="http://www.itoda.com/apple/logos/AppleLogo-152x186.jpg">
Brauche es aber nicht und habe es wieder entfernt, war ja nur ein Test. ;)

Gruß
Dan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 09:39:24
Danke, so ginge es:
<img src="http://www.itoda.com/apple/logos/AppleLogo-152x186.jpg">
Brauche es aber nicht und habe es wieder entfernt, war ja nur ein Test. ;)

Gruß
Dan
Trotzdem danke für die Info. Habe den HTML check jetzt gefixed  ;)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 11:59:42
Der CodeMirror ist nun gefixed, es gibt allerdings ein Problem mit den CSS columns (also wenn die Tabellen nebeneinander angezeigt werden), das trifft aber nur auf Internals > DEF zu. Durch columns ragt der Text über den CodeMirror hinaus und es lässt sich kein Text schreiben, daher ist der CodeMirror für diesen Fall deaktiviert! Für alle anderen Fälle (RawDef, Raw input, DEF bei single column) funktioniert es jetzt wie es soll.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: mahowi am 26 Juli 2019, 12:01:48
Das Update schlägt zur Zeit fehl:
2019.07.26 12:00:31.748 1:  fhem-flex
2019.07.26 12:00:31.979 1:  UPD www/pgm2/flex.js
2019.07.26 12:00:32.238 1:  Got 109019 bytes for www/pgm2/flex.js, expected 109071
2019.07.26 12:00:32.239 1:  aborting.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 12:17:54
Das Update schlägt zur Zeit fehl:
2019.07.26 12:00:31.748 1:  fhem-flex
2019.07.26 12:00:31.979 1:  UPD www/pgm2/flex.js
2019.07.26 12:00:32.238 1:  Got 109019 bytes for www/pgm2/flex.js, expected 109071
2019.07.26 12:00:32.239 1:  aborting.
Das tritt wohl auf kurz nachdem ich ein update commited habe, einfach kurz warten, dann sollte es gehen
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: mahowi am 26 Juli 2019, 12:20:18
Hab ich gemacht, aber 15 Minuten später kam derselbe Fehler.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 12:24:39
Hab ich gemacht, aber 15 Minuten später kam derselbe Fehler.
hmm, komisch. Bei mir hat es jetzt funktioniert  ???

FHEM schein wohl irgendwie die control File zu cachen.
Kommt noch immer?
Got 109019 bytes for www/pgm2/flex.js, expected 109071
Denn die erwartete Größe ist aktuell 109018 (siehe https://github.com/nagel86/fhem-flex/blob/master/controls_fhem-flex.txt) und dies entspricht auch exakt der flex.js Größe: (https://github.com/nagel86/fhem-flex/blob/master/www/pgm2/flex.js)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: mahowi am 26 Juli 2019, 12:29:31
Hm, jetzt läuft es durch. Um 12:15 kam:
2019.07.26 12:15:40.575 1: Got 109018 bytes for www/pgm2/flex.js, expected 109017
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 12:31:47
Hm, jetzt läuft es durch. Um 12:15 kam:
2019.07.26 12:15:40.575 1: Got 109018 bytes for www/pgm2/flex.js, expected 109017
Ja, das war, weil ich in der zwischenzeit noch was commited habe  ;D

Ich verstehe nur nicht, warum die controls Datei gecached wird, gibt eigentlich keinen Sinn. Naja, aber Hauptsache es geht jetzt.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: marvin78 am 26 Juli 2019, 12:36:06
Ich glaube auch nicht, dass FHEM das macht.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: mahowi am 26 Juli 2019, 12:40:51
Wahrscheinlich lief mein Update nur gerade zufällig, als die neue flex.js schon auf Github war und die controls.txt gerade aktualisiert wurde. Gecached wird da von FHEM eigentlich nix.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 13:11:52
Wahrscheinlich lief mein Update nur gerade zufällig, als die neue flex.js schon auf Github war und die controls.txt gerade aktualisiert wurde. Gecached wird da von FHEM eigentlich nix.
Ich habe das gerade mal durchgetestet, das ist wirklich kein Problem von FHEM, sondern von github.
Auf
https://github.com/nagel86/fhem-flex/blob/master/controls_fhem-flex.txt
ist der korrekte Inhalt sofort ersichtlich. Aber auf
https://raw.githubusercontent.com/nagel86/fhem-flex/master/controls_fhem-flex.txt
dauert es eine gewisse Zeit bis die aktuelle Datei geladen wird
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 26 Juli 2019, 16:03:39
Danke, so ginge es:
<img src="http://www.itoda.com/apple/logos/AppleLogo-152x186.jpg">
Brauche es aber nicht und habe es wieder entfernt, war ja nur ein Test. ;)

Gruß
Dan
auch bei mir gings...  Auch die Home-Funktion... Danke..
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 18:16:39
Ich habe mal ein wenig das Aussehen der Slider modifiziert...
Besser? Schlechter? Vorschläge?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 26 Juli 2019, 19:41:15
Bug:
Jsonlist2 wird nicht angezeigt. Blankscreen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 26 Juli 2019, 19:41:34
Ich habe mal ein wenig das Aussehen der Slider modifiziert...
Besser? Schlechter? Vorschläge?

Sieht schlank aus! Gefällt mir definitiv besser! Keine besseren Vorschläge!


Ich hätte noch eine Wunschliste, die vielleicht auch andere noch anspricht. Ich will keineswegs unverschämt sein, doch mit dem Appetit kommt bekanntlich der Hunger. Sag einfach wenn es zuviel ist:

- Schriftgrösse Menu sollte skalierbar sein
- Zeilenabstand Menu ebenso
- MenuIcons sollten optional ausgetauscht werden können
- Logo in einen HomeButton-Icon umwandeln und für s Logo eine andere Lösung finden, oder gar keine ;) ist ja offensichtlich nur ein choetzuding ;)
- Roomsort fixen
- evtl hideWebCmdonSmallscreens auf einzelne Devices/Group beschränken. Grad bei Slidern zB Dimmer brauchst du ja webcmd, da geht es ja nicht nur mit devStateIcon. Oder bin ich falsch?
- Wenn ich im Mobile "update all" eingebe, wechselt FHEM auf Eventmonitor, aber es passiert nix. Ist das ein Styleding?


Unverschämt, was? ;) ich hätte noch mehr, aber das grenzt dann an Ungehobelt sein;)

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 26 Juli 2019, 19:44:32
Bug:
Jsonlist2 wird nicht angezeigt. Blankscreen.

geht bei mir sowohl auf Mac/Safari wie auch iPhone8/Safari...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 26 Juli 2019, 19:57:26
Ok, das letzte Update hatte ich noch nicht drinne. Aber auch damit keine Anzeige von jsonlist2.

Getestet mit:

Windows10 + Chrome
AndroidHandy + AndroidTablet + Chrome

Cache geleert.

edit:
Anmerkung zum Slider.
Besser wäre es den veränderten Wert vorab anzuzeigen. Sonst wird das verstellen zum Pokerspiel.

https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1xMAR10aCA6Y1k2Rb_BFKSPW43irH55F-%2Fsliders-usage-whentouse-discrete.png
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 20:14:29
Bug:
Jsonlist2 wird nicht angezeigt. Blankscreen.
Naja, funktioniert hat es schon, es hat nur lange gedauert, das Lag daran, dass über alle Zeilen des command Outputs iteriert wurde, damit man einen "hübschen" Zeilenumbruch darstellen kann (wie beim Log/Eventmonitor) und zudem wird der Content erst angezeigt, wenn alles gerendert ist. Update ist draußen, ich habe das wieder wieder raus genommen, somit bleibt der Command Output unberührt und es läd schneller.

edit:
Anmerkung zum Slider.
Besser wäre es den veränderten Wert vorab anzuzeigen. Sonst wird das verstellen zum Pokerspiel.

https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1xMAR10aCA6Y1k2Rb_BFKSPW43irH55F-%2Fsliders-usage-whentouse-discrete.png
hmm, sinnvoll. Ich schau mal wie ich das am besten einbaue.


Unverschämt, was? ;) ich hätte noch mehr, aber das grenzt dann an Ungehobelt sein;)
Wie immer bin ich offen für Vorschläge und implementiere was mir gefällt bzw. ich für sinnvoll erachte. Von daher, hau alles raus was dir im Kopf rumschwirrt  ;D

- Schriftgrösse Menu sollte skalierbar sein
- Zeilenabstand Menu ebenso
- MenuIcons sollten optional ausgetauscht werden können
- Logo in einen HomeButton-Icon umwandeln und für s Logo eine andere Lösung finden, oder gar keine ;) ist ja offensichtlich nur ein choetzuding ;)
- Roomsort fixen
- evtl hideWebCmdonSmallscreens auf einzelne Devices/Group beschränken. Grad bei Slidern zB Dimmer brauchst du ja webcmd, da geht es ja nicht nur mit devStateIcon. Oder bin ich falsch?
- Wenn ich im Mobile "update all" eingebe, wechselt FHEM auf Eventmonitor, aber es passiert nix. Ist das ein Styleding?
- kann ich machen
- ebenfalls
- nur icons austauschen oder auch commands?
- Joa, ein Logo in der Größe ist schon sinnlos...Homebutton kann ich machen...klingt gut
- das ist so ein Ding...wenn ich nur wüsste woran das liegt. Das ganze ist nämlich ein jquery Plugin...Aber ich habe es auf jeden Fall auf der TODO Liste
- wäre natürlich optimal, aber wie soll das konfiguriert werden?
- öhm also ich habe das gerade auf zwei FHEM Instanzen getestet und das funktioniert wie es soll  :o Ist das schon wieder so ein iPhone Ding  ;D Ich werde das nochmal mit dem hier rumliegenden iPhone testen
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 26 Juli 2019, 20:28:59
Hallo Sebastian,

ein Feedback zu:
Edit2: Ich habe nun das Problem mit einem "." im Namen gelöst, versuche es mal mit der aktuellen Version, ich hoffe es funktioniert jetzt...Nach dem Update sind meine Diagramme alle wieder schön, sowohl auf dem kleinen als auch auf dem großen Bildschirm.
Vielen, lieben Dank.

Ich nehme mal an, dass die Suche nach viewBox Atrribut sich damit erledigt hat, oder?

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 26 Juli 2019, 20:30:21
- Schriftgrösse Menu sollte skalierbar sein
- Zeilenabstand Menu ebenso
Habe mich doch dagegen entschieden, dass ich das als Option hinzufüge, es sei denn es melde sich noch ein paar Interessenten, denn ich will die Settings auch nicht total überfüllen. Und man kann das total einfach per "Additional CSS" setzen:
#menu a { font-size: 1.2em }
#menu div { padding: 4px 8px }
das sind die aktuellen Werte, beim Padding ist der erste Wert für oben/unten und der zweite Wert für links/rechts
Edit: Was ich noch vergessen habe. Padding wird bei kleinen Devices vergrößert, damit man die Räume besser mit dem Finger "trifft". Wenn du dort die Abstände auch ändern willst, musst du auch noch das hinzufügen:
@media all and (max-width: 900px) { #menu div { padding: 8px 8px; } }

Nach dem Update sind meine Diagramme alle wieder schön, sowohl auf dem kleinen als auch auf dem großen Bildschirm.
Vielen, lieben Dank.

Ich nehme mal an, dass die Suche nach viewBox Atrribut sich damit erledigt hat, oder?
Jepp...und gerne doch :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 26 Juli 2019, 23:14:48
Habe mich doch dagegen entschieden, dass ich das als Option hinzufüge, es sei denn es melde sich noch ein paar Interessenten, denn ich will die Settings auch nicht total überfüllen. Und man kann das total einfach per "Additional CSS" setzen:
#menu a { font-size: 1.2em }
#menu div { padding: 4px 8px }
das sind die aktuellen Werte, beim Padding ist der erste Wert für oben/unten und der zweite Wert für links/rechts
Edit: Was ich noch vergessen habe. Padding wird bei kleinen Devices vergrößert, damit man die Räume besser mit dem Finger "trifft". Wenn du dort die Abstände auch ändern willst, musst du auch noch das hinzufügen:
@media all and (max-width: 900px) { #menu div { padding: 8px 8px; } }

Klappt bestens! Herzlichen Dank!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 26 Juli 2019, 23:40:36
- Wenn ich im Mobile "update all" eingebe, wechselt FHEM auf Eventmonitor, aber es passiert nix. Ist das ein Styleding?

Das ist normal, aber ein Bug. Liegt aber nicht man Skin.
Wir ist deine longpoll-Wert in FHEMWEB?
In Safari mit longpoll = websocket funktioniert das bei mir auch nicht. Sobald ich aber einen Proxy (hier: nginx) nutze, klappt das wieder. Intern im LAN nutze ich den Proxy nicht und habe das auch.
Aber nur unter iOS und Safari.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 26 Juli 2019, 23:46:31
Bei mir sehen die colspans ich ein wenig merkwürdig aus.
In allen Browsern und allen Auflösungen. 
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 27 Juli 2019, 05:43:11
Schönen guten Morgen,

Ich vermute mal einfach so, dass meine Plots nicht aufgrund der aktuell herrschenden Hitze geschrumpft sind?    ::) ::)

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: eurofinder am 27 Juli 2019, 08:05:37
@zanker:
Super Style den du hier produzierst und toll auch, dass du ein offenes Ohr für Anregungen der Anwender hast. Danke dafür.

Entweder hab ich noch nicht den richtigen Weg gefunden, wie ich das in deinem Style einstellen kann, aber im Style f18 wird, wenn ich für das Attribut     
devStateStyle den Wert style="text-align:right" setze, die Anzeige rechtsbündig angezeigt. In deinem Style "verbleibt" die Ausgabe eher mittig.

Kann ich das irgendwie ändern und wenn ja wie? Wenn nein, würde ich mich freuen, wenn du das (ggf. optional) mit einbauen könntest.

Gruß
eurofinder
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 27 Juli 2019, 08:18:05
@xanker

Ein Vorschlag.
Zeitgesteuertes setzten von Stylepresets. Zum Beispiel am Tag heller Style,  am Abend/Nachts augenfreundlicher Style.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 27 Juli 2019, 09:01:15
Hallo Sebastian,

mir ist noch auf dem Handybildschirm aufgefallen, dass in einer, ich nenne es mal Box, siehe Screenshots, diese wegen eines langen Eintrags scrollbar ist, der Rahmen aber nicht mitkommt.
Das 1. Bild ist ohne Scrollen, das 2. mit.

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 27 Juli 2019, 09:39:04
Bei mir sehen die colspans ich ein wenig merkwürdig aus.
In allen Browsern und allen Auflösungen.
Das hat nichts mit den colspans zu tun, die werden nur bei Readingsgroup modifiziert. Das Problem ist, dass ich der devState Zelle erlaube bis zu 180px breit zu werden, sodass idR. die webcmds untereinander stehen (bei ungleichen devStates), zumindest solange nach rechts genug Platz ist. Ist das nicht der Fall, wird erst die devState Zelle geschrumpft und dann die Zelle mit dem Device-Namen.
Wenn du willst, dass sich die devState Zelle nicht auf 180px vergrößert, musst du folgendes bei Additional CSS hinzufügen:
table.block[id^=TYPE] > tbody > tr > td:nth-child(2), #ddtable .odd > td:nth-child(2), #ddtable .even > td:nth-child(2) { max-width: fit-content; max-width: -moz-fit-content; }Hinweis: vorab noch ein Update machen, da ich gerade noch hinzugefügt habe, dass die semi-colns automatisch escaped werden.


Ich vermute mal einfach so, dass meine Plots nicht aufgrund der aktuell herrschenden Hitze geschrumpft sind?    ::) ::)
So eine Sch..., ich dachte die Plot Probleme sind endlich mal behoben. Was hast du denn für plotMinWidth/plotMaxWidth gesetzt? Verwendest du "plotEmbed 1" oder "plotEmbed 0"? Zusätzlicher CSS Code?


Super Style den du hier produzierst und toll auch, dass du ein offenes Ohr für Anregungen der Anwender hast. Danke dafür.
Vielen Dank und gerne doch :)

Entweder hab ich noch nicht den richtigen Weg gefunden, wie ich das in deinem Style einstellen kann, aber im Style f18 wird, wenn ich für das Attribut     
devStateStyle den Wert style="text-align:right" setze, die Anzeige rechtsbündig angezeigt. In deinem Style "verbleibt" die Ausgabe eher mittig.
Hmm, das funktioniert schon, aber du bist auch von dem Problem betroffen das ich bei FunkOdyssey angesprochen habe. Die devState Zelle ist auf 180px Breite limitiert, daher fällt das rechtsbündig hier kaum auf. In deinem Fall sollte folgendes funktionieren:
table.block[id^=TYPE] > tbody > tr > td:nth-child(2), #ddtable .odd > td:nth-child(2), #ddtable .even > td:nth-child(2) { max-width: unset; }Hinweis: vorab noch ein Update machen (siehe oben). Und das hat zur Folge, dass alle Webcmds auch nach ganz rechts rutschen!


Zeitgesteuertes setzten von Stylepresets. Zum Beispiel am Tag heller Style,  am Abend/Nachts augenfreundlicher Style.
Hmm, wäre möglich, ich muss mal schauen ob ich das irgendwie schön eingebaut bekomme. Hat aber erstmal keine Priorität, ich schreibe es aber auf die TODO liste.


mir ist noch auf dem Handybildschirm aufgefallen, dass in einer, ich nenne es mal Box, siehe Screenshots, diese wegen eines langen Eintrags scrollbar ist, der Rahmen aber nicht mitkommt.
Das 1. Bild ist ohne Scrollen, das 2. mit.
Hmm, ist das eine Readingsgroup?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 27 Juli 2019, 09:46:54
Hallo,

Zitat
Ich vermute mal einfach so, dass meine Plots nicht aufgrund der aktuell herrschenden Hitze geschrumpft sind?    ::) ::)
So eine Sch..., ich dachte die Plot Probleme sind endlich mal behoben. Was hast du denn für plotMinWidth/plotMaxWidth gesetzt? Verwendest du "plotEmbed 1" oder "plotEmbed 0"? Zusätzlicher CSS Code?

Standard-Flexsettings 150px / 100
Kein zusätzliches CSS
PlotEmbed ist nicht gesetzt
Plotfork=1

Tritt seit gestern abend (zum ersten mal aufgefallen) bei allen Plots auf, ohne das ist irgendetwas geändert habe.

lg, Stefan

PS:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="SVGPLOT_Temps2" data-origin="FHEM" style="width: 100%; height: unset; min-width: 250px; max-width: 100px; display: block;" viewBox="0 0 800 160">

Max-Width ist bei 100px statt 100%??
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 27 Juli 2019, 09:54:02
Standard-Flexsettings 150px / 100
...
Max-Width ist bei 100px statt 100%??
öhm, plotMaxWidth sollte nicht auf "100" sondern auf "100%" stehen. Dann sollte es funktionieren
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 27 Juli 2019, 09:56:59
Hallo Sebastian,

Zitat
Zitat von: Gisbert am Heute um 09:01:15

    mir ist noch auf dem Handybildschirm aufgefallen, dass in einer, ich nenne es mal Box, siehe Screenshots, diese wegen eines langen Eintrags scrollbar ist, der Rahmen aber nicht mitkommt.
    Das 1. Bild ist ohne Scrollen, das 2. mit.

Hmm, ist das eine Readingsgroup?

Nein, das ist ein DOIF-Device, bei dem ich userReadings definiert habe und die per stateformat ausgebe.

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 27 Juli 2019, 10:01:01
Hallo Sebastian,

Nein, das ist ein DOIF-Device, bei dem ich userReadings definiert habe und die per stateformat ausgebe.

Viele Grüße Gisbert
Poste bitte mal deine stateformat Definition, ich vermute da liegt das Problem. Normal sollte nämlich zu langer Text umgebrochen werden
Edit: Das war wohl doch nicht definiert...update ist draußen...jetzt sollte es "richtig" angezeigt werden
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 27 Juli 2019, 10:16:08
Zitat
öhm, plotMaxWidth sollte nicht auf "100" sondern auf "100%" stehen. Dann sollte es funktionieren
Hmm, danke.....Keine Ahnung, wo mein %-Zeichen da hingerutscht ist   ??? ???
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: juergen012 am 27 Juli 2019, 14:53:44
Hallo,
gerade erst enteckt..Installiert..begeistert!!!
Super Arbeit!!!

Lg j.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 27 Juli 2019, 15:01:29
Poste bitte mal deine stateformat Definition, ich vermute da liegt das Problem. Normal sollte nämlich zu langer Text umgebrochen werden
Edit: Das war wohl doch nicht definiert...update ist draußen...jetzt sollte es "richtig" angezeigt werden

Scheint jetzt richtig zu funktionieren, d.h. ein überlanger Eintrag wird am der Zeile in die nächste Zeile umgebrochen. Eine richtige Rechtschreibung wird dabei außer acht gelassen, nun ja, man kann nicht alles haben.
Könnte man am Zeilenende ein "_" anhängen und bei der neuen Zeile ebenfalls ein "_"?
Aber dann müsste man 1-2 Zeichen (2 bei Mehrfachumbruch) dafür reservieren. Ich hab keine Anhnung, ob das technisch geht.

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 27 Juli 2019, 15:08:26
gerade erst enteckt..Installiert..begeistert!!!
Super Arbeit!!!
Vielen Dank! Ich muss aber sagen, ich bin auch angetan was in einem guten Monat entstanden ist :)


Scheint jetzt richt zu funktionieren, d.h. ein überlanger Eintrag wird am der Zeile in die nächste Zeile umgebrochen. Eine richtige Rechtschreibung wird dabei außer acht gelassen, nun ja, man kann nicht alles haben.

Könnte man am Zeilenende ein "_" anhängen und bei der neuen Zeile ebenfalls ein "_"?
Aber dann müsste man 1-2 Zeichen (2 bei Mehrfachumbruch) dafür reservieren. Ich hab keine Anhnung, ob das technisch geht.
Sehr schön, dass es jetzt funktioniert. Auf Rechtschreibung kann man in dem Fall keine Rücksicht nehmen. Wenn du aber ein Leerzeichen nach den Kommas einfügst (du hast den Inhalt ja selbst definiert), dann sollte zuerst bei den Leerzeichen umgebrochen werden. Ein Einfügen von Zeichen vor/nach einem Zeilenumbruch, ist leider nicht möglich.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 27 Juli 2019, 16:01:33
Auf iOS Geräten kann man mit dem Fingertipp auf den oberen Rand, die Webseite wieder hochscrollen . Das funktioniert in Flex irgendwie nicht.
Mit dem Scrollen hatte ich ja bereits eher Probleme gemeldet. Die Seite "klebt" beim Scrollen. Irgendwie merkwürdig.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 27 Juli 2019, 16:36:45
Auf iOS Geräten kann man mit dem Fingertipp auf den oberen Rand, die Webseite wieder hochscrollen . Das funktioniert in Flex irgendwie nicht.
Mit dem Scrollen hatte ich ja bereits eher Probleme gemeldet. Die Seite "klebt" beim Scrollen. Irgendwie merkwürdig.
Regulär beim Scrollen, oder nur wenn man ganz oben/unten ist? Das hatte nämlich Maui schon mal berichtet und dafür hatte ich dann einen Fix eingebaut. Das mit dem Fingertipp geht wahrscheinlich nur wenn der <body> Tag gescrollt wird, ich habe das aber so implementiert, dass nur das #content <div> scrollbar ist. Ich weiß nicht warum Apple damit nicht richtig klar kommt.
Edit: Versuch mal bitte ob es einen unterschied macht ob du zwischen den Tabellen scrollst und "auf" den Tabellen. Jede Tabelle enthält nämlich einen scrollbaren Container, der aber nur scrollbar ist, wenn der Inhalt nicht genug Platz hat, evtl. liegt hier das Problem. Auf einem alten iPhone 4s funktioniert das Scrollen zumindest wunderbar.

Was mir noch aufgefallen ist: beim scrollen ans Ende bleibt er gerne mal kleben wenn man noch weiter scrollt. Hängt vielleicht mit dem smooth zusammen. Ist schwer zu erklären. Wenn man am Ende ist und weiter scrollt dann kommt man erstmal ein paar Sekunden nicht mehr hoch. Meine Vermutung wäre, er scrollt weiter nach unten ins nichts nach?!
Hast du auch das von FunkOdyssey berichtete Problem?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 27 Juli 2019, 17:04:49
So in etwa habe ich das auch vermutet. Am Rand und zwischen den Tabellen scheint es besser zu klappen. Merkwürdig ist aber auch, dass ein Wisch über einen Table erst gar nicht reagiert. Scrolle ich dann aber einmal am Rand, so funktioniert danach auch das Table. Also ich kann dann auch von dort aus wischen. Als würde es erst kleben. 😄
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 27 Juli 2019, 19:06:48
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.
Ich wollte noch kurz mitteilen, dass bei dem Farben Mischen noch ein Bug war, bei manchen Farben wurde falsch gemischt, bzw. der falsche Hex Code zurück gegeben, da ich vergessen hatte die führende "0" voranzustellen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 27 Juli 2019, 23:13:03
Anmerkung zum Slider.
Besser wäre es den veränderten Wert vorab anzuzeigen. Sonst wird das verstellen zum Pokerspiel.
Ich habe die Funktion nun zu den Slidern hinzugefügt. Sobald man den Slider "berührt" wird der aktuelle Wert angezeigt und beim loslassen wieder ausgeblendet. Aus mir nicht ganz erklärlichen Gründen, geht das aber nicht bei den Farbslidern, was ich persönlich aber eh bevorzuge, da mir ein Farbwert eh nicht viel sagt und man sieht ja die Farbe.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: eurofinder am 27 Juli 2019, 23:33:03
@xanker:
Zitat
table.block[id^=TYPE] > tbody > tr > td:nth-child(2), #ddtable .odd > td:nth-child(2), #ddtable .even > td:nth-child(2) { max-width: unset; }
OK, und wo soll das rein? Ins devStateStyle?

Gruß
eurofinder
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 27 Juli 2019, 23:39:59
@xanker:OK, und wo soll das rein? Ins devStateStyle?

Gruß
eurofinder
Bei "Additional CSS", bzw. ins Css-Attribut vom FHEMWEB device
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: eurofinder am 28 Juli 2019, 00:20:16
@xanker:
Danke. Läuft wie erwartet - super.

LG
eurofinder
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 28 Juli 2019, 08:02:41

- 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?

CMDAlias
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

Guten Morgen Xanker
Du hast das schon gefixt gehabt. Nach dem Update geht das nicht mehr. Auch die Formatierungen der Verbose gehen nicht mehr. Und zudem werden die Devices nun grösser geschrieben. Gewollt?
Lg c
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 28 Juli 2019, 08:29:30
Guten Morgen,

bin grad wieder über etwas gestolpert:

Bei notify's ist das Dropdown zu "set condition" nicht innerhalb vom Wizard, sondern darunter, direkt über dem normalen "set"-Befehl.

Siehe Screenshot.

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 28 Juli 2019, 08:40:11
So in etwa habe ich das auch vermutet. Am Rand und zwischen den Tabellen scheint es besser zu klappen. Merkwürdig ist aber auch, dass ein Wisch über einen Table erst gar nicht reagiert. Scrolle ich dann aber einmal am Rand, so funktioniert danach auch das Table. Also ich kann dann auch von dort aus wischen. Als würde es erst kleben. 😄
Moin xanker,
Ich glaube er meint ein anderes kleben. Aber auch das ist mir schon aufgefallen.
Aber mal was anderes: klicke ich auf Edit Files bekomme ich immer TypeError: undefined is not an object (evaluating 'flex.settings.description[flex.language]['Other styles']')
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 28 Juli 2019, 10:03:27
Du hast das schon gefixt gehabt. Nach dem Update geht das nicht mehr. Auch die Formatierungen der Verbose gehen nicht mehr. Und zudem werden die Devices nun grösser geschrieben. Gewollt?
Ja, war gewollt, da das Formatieren auf jeden Code Output angewendet wurde, was bei großem Output (z.B. jsonlist2) relativ lange gedauert hat. Ich habe es nun wieder aktiviert, aber die Formatierungen wird nur angewendet wenn der Output weniger als 5000 Zeilen hat.


Bei notify's ist das Dropdown zu "set condition" nicht innerhalb vom Wizard, sondern darunter, direkt über dem normalen "set"-Befehl.
Aber mal was anderes: klicke ich auf Edit Files bekomme ich immer TypeError: undefined is not an object (evaluating 'flex.settings.description[flex.language]['Other styles']')
Danke, ist beides behoben.


So in etwa habe ich das auch vermutet. Am Rand und zwischen den Tabellen scheint es besser zu klappen. Merkwürdig ist aber auch, dass ein Wisch über einen Table erst gar nicht reagiert. Scrolle ich dann aber einmal am Rand, so funktioniert danach auch das Table. Also ich kann dann auch von dort aus wischen. Als würde es erst kleben. 😄
Ich glaube er meint ein anderes kleben. Aber auch das ist mir schon aufgefallen.
Ich habe (zum Testen) mal eine Option (disableScrollableTables) hinzugefügt um das Scrollen von den Tabellen zu deaktivieren. Ich habe zudem den "smooth" Effekt von den Tabellen entfernt, evtl. hat das auch schon geholfen. Testet also bitt mal mit und ohne disableScrollableTables.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 28 Juli 2019, 10:33:00
Ja, war gewollt, da das Formatieren auf jeden Code Output angewendet wurde, was bei großem Output (z.B. jsonlist2) relativ lange gedauert hat. Ich habe es nun wieder aktiviert, aber die Formatierungen wird nur angewendet wenn der Output weniger als 5000 Zeilen hat.

passt, sieht wieder super aus ;) Danke.


Was mir grad beim Aufräumen aufgefallen ist, dass die Plots innerhalb von Gruppen unterschiedliche Verhalten aufzeigen. Siehe Anlage. Beim einen kommt der Plot Control, beim anderen nicht (mir wäre in der Gruppe lieber ohne). Was bei beiden nicht kommt ist der Device-Name unten. So kann man nicht in die Device-Uebersicht gelangen.

Ist dies ein Style- oder Fhem-Problem?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 28 Juli 2019, 10:44:03
Ist dies ein Style- oder Fhem-Problem?
Das liegt an Fhem, plot control wird vor dem ersten Plot auf einer Seite angezeigt.
Edit: Und dass der Devicename bei einem gruppierten Plot nicht angezeigt wird, liegt auch an Fhem...warum auch immer das so implementiert ist
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 28 Juli 2019, 11:42:55
Und gleich das nächste komische Ding:
Im Eventmonitor werden manche Zeitstempel richtig eingefärbt, und zwischendurch mal auch welche nicht.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 28 Juli 2019, 11:53:08
Und gleich das nächste komische Ding:
Im Eventmonitor werden manche Zeitstempel richtig eingefärbt, und zwischendurch mal auch welche nicht.
Ich bin davon ausgegangen, dass alle Events einzeln kommen, somit habe ich die regexp nicht global angewendet. Habe das jetzt mal geändert, das sollte das Problem beheben

Edit: Das ist wohl noch nicht die Lösung...
Edit2: Vielleicht ist es doch die Lösung...müsste man mal beobachten. Ich bin auf ein anderes Problem gestoßen (https://forum.fhem.de/index.php?topic=102595).
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 28 Juli 2019, 12:58:44
@xanker

Wie hast du die xboxone abgebildet? Per PRESENCE? Also nur Status oder auch schaltbar?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 28 Juli 2019, 12:59:54
@xanker

Wie hast du die xboxone abgebildet? Per PRESENCE? Also nur Status oder auch schaltbar?
Mit dem Logitech Harmony Hub, damit kann man sie dann auch Steuern, wobei ich nur ein/aus nutze.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 28 Juli 2019, 22:31:24
Hey xanker,

nach dem letzen Update ist wohl im Eventlog das Highlighting des Timestamps kaputt gegangen :-/
(s. Anhang)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 28 Juli 2019, 22:53:14
Hey xanker,

nach dem letzen Update ist wohl im Eventlog das Highlighting des Timestamps kaputt gegangen :-/
(s. Anhang)
Das hat Icinger schon berichtet. Komisch ist, dass es erst funktioniert, dann für ein paar Einträge nicht und dann geht es wieder. Ich konnte die genaue Ursache noch nicht ausfindig machen, bin aber dran.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 29 Juli 2019, 08:55:23
Ich wundere mich gerade, dass ich an allen Endgeräten immer wieder die Kennzeichnung mit den "neuen Features" sehe und die eigentlich bereits ausgewählten Optionen wieder deaktiviert waren. Kein FHEM-Neustart oder ähnliches durchgeführt. Wird das irgendwie in den Cookies gespeichert?
Update Gerade getestet. Es waren jetzt sogar am gleichen Gerät die Optionen wieder weg und die "Neu-"Kennzeichnung wieder sichtbar.



Eine weitere Auffälligkeit:
Wenn ich auf einem Smartphone das FHEM-Log betrachtet und ans Ende der Seite springe, dann aber z.B. das Smartphone drehe und in den Landscape-Modus wechsel, so springt die Anzeige wieder einen großen Sprung nach oben. Man befindet sich plötzlich weder am Anfang noch am Ende es Logs. Dann heißt es: Scrollen, scrollen, scrollen.
Kann man irgendwie den Fremdeingriff durch das Javascript deaktivieren? Oder ist das bereits die Option "Log-Zeilen umbrechen"?



Ich habe (zum Testen) mal eine Option (disableScrollableTables) hinzugefügt um das Scrollen von den Tabellen zu deaktivieren. Ich habe zudem den "smooth" Effekt von den Tabellen entfernt, evtl. hat das auch schon geholfen. Testet also bitt mal mit und ohne disableScrollableTables.

Ich konnte dies nun einen Tag testen und bin mir sicher, dass damit das Problem gelöst wurde.
Wobei damit nur Tabellen ausgenommen wurden. Versucht man in SVG-Plots über Wischen zu scrollen, klappt es auch nicht immer. So gut wie unmöglich ist ein Scrollen im Querformat des Smartphones.
Der kleine Nachteil ist jedoch, dass man nun diverse Tabellen nicht mehr horizontal scrollen kann. :-(



Ich komme fast nie ans Ende der Seite. Ich muss mich schon richtig anstrengen. Es wird immer wieder ein wenig wieder hochgescrollt.

Dies ist auch unverändert. Das Ende einer Seite lässt sich schlecht erreichen. Ich merke das häufig an den SVG-Plots.



Auf iOS Geräten kann man mit dem Fingertipp auf den oberen Rand, die Webseite wieder hochscrollen . Das funktioniert in Flex irgendwie nicht.

Dieser Fehler ist noch da.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juli 2019, 09:43:46
Hey FunkOdyssey,

erstmal vielen Dank für deinen ausführlichen Bericht!

Ich wundere mich gerade, dass ich an allen Endgeräten immer wieder die Kennzeichnung mit den "neuen Features" sehe und die eigentlich bereits ausgewählten Optionen wieder deaktiviert waren. Kein FHEM-Neustart oder ähnliches durchgeführt. Wird das irgendwie in den Cookies gespeichert?
Update Gerade getestet. Es waren jetzt sogar am gleichen Gerät die Optionen wieder weg und die "Neu-"Kennzeichnung wieder sichtbar.
Ja, die Einstellungen werden erstmal als Cookie gespeichert, können dann aber in den Einstellungen global gespeichert werden (im FHEMWEB device). Normal sollten die Cookies eine unendliche Gültigkeit haben.
Zu den "Neu" Kennzeichnungen, es wird ein Einstellung als Neu betrachtet, wenn in der aktuellen Konfiguration die Einstellungen noch nicht vorkommt. Wenn du also an einem Endgerät zwar die neuen Einstellungen vorgenommen hast (oder auch nicht), und dann nicht global speicherst, dann werden die Einstellungen auf anderen Endgeräten auch als Neu angezeigt, da dort ja die Einstellungen noch unbekannt sind. Wenn die Cookies "verloren" gehen bzw. gelöscht werden, wird auf die globalen Settings zurück gegriffen, was bedeutet, dass dann wieder alle noch nicht vorhanden Einstellen als neu gekennzeichnet werden. Evtl. stelle ich das um, dass die Informationen auch im FHEMWEB Device gespeichert werden.
Wenn das mit den Cookies bei dir Probleme macht, du aber dennoch unterschiedliche Einstellungen für deine Endgeräte haben willst, dann müsstest du wohl für jedes Endgerät ein eigenes FHEMWEB Device anlegen und dort jeweils global speichern.

Eine weitere Auffälligkeit:
Wenn ich auf einem Smartphone das FHEM-Log betrachtet und ans Ende der Seite springe, dann aber z.B. das Smartphone drehe und in den Landscape-Modus wechsel, so springt die Anzeige wieder einen großen Sprung nach oben. Man befindet sich plötzlich weder am Anfang noch am Ende es Logs. Dann heißt es: Scrollen, scrollen, scrollen.
Kann man irgendwie den Fremdeingriff durch das Javascript deaktivieren? Oder ist das bereits die Option "Log-Zeilen umbrechen"?
Das werde ich mir mal anschauen. Die Option "Log-Zeilen umbrechen" ist nur dafür da, dass beim Log/Eventmonitor die Zeilen nicht über den Rand hinausragen (sondern umgebrochen werden), sodass man nicht horizontal Scrollen muss.

Ich konnte dies nun einen Tag testen und bin mir sicher, dass damit das Problem gelöst wurde.
Wobei damit nur Tabellen ausgenommen wurden. Versucht man in SVG-Plots über Wischen zu scrollen, klappt es auch nicht immer. So gut wie unmöglich ist ein Scrollen im Querformat des Smartphones.
Der kleine Nachteil ist jedoch, dass man nun diverse Tabellen nicht mehr horizontal scrollen kann. :-(
Hast du es auch getestet wenn die Tabellen scrollbar sind? da ich zusätzlich noch den "Smooth" Effekt entfernt habe. Evtl. könnte das auch das Problem gewesen sein. Dass es bei den SVG Plots noch nicht funktioniert, liegt daran, dass ich es bisher nur für die Tabellen (zum Testen) implementiert habe, die SVG Plots haben einen anderen Scroll-Container, da man die minimale/maximale Breite anpassen kann.

Dies ist auch unverändert. Das Ende einer Seite lässt sich schlecht erreichen. Ich merke das häufig an den SVG-Plots.
Meinst du, dass du nicht ans Ende kommst, wenn du "über" einem SVG Plot scrollen musst? Das würde dann ja zu vorigem Problem gehören.

Dieser Fehler ist noch da.
Das ist nicht direkt ein Fehler, sonst von Apple so implementiert, dass dann nur der body gescrollt wird, bei Flex wird aber nur ein div-Container gescrollt. Evtl. stelle ich das dann doch mal um auf body, vielleicht behebt das auch das Scrollproblem. Echt doof, dass Apple/Safari da so bockig ist, mit Chrome/Edge/Firefox funtioniert das nämlich alles wie es soll.

Ich schaue dass ich das heute oder morgen noch implementiere.

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 29 Juli 2019, 11:24:42
Meinst du, dass du nicht ans Ende kommst, wenn du "über" einem SVG Plot scrollen musst? Das würde dann ja zu vorigem Problem gehören.

Ich ziehe dieses Zitat mal vor. Kommando zurück. Das hat wohl nichts mit einem Plot zu tun, sondern ist grundsätzlich so. Siehe nachfolgende Sätze.

Hast du es auch getestet wenn die Tabellen scrollbar sind? da ich zusätzlich noch den "Smooth" Effekt entfernt habe. Evtl. könnte das auch das Problem gewesen sein. Dass es bei den SVG Plots noch nicht funktioniert, liegt daran, dass ich es bisher nur für die Tabellen (zum Testen) implementiert habe, die SVG Plots haben einen anderen Scroll-Container, da man die minimale/maximale Breite anpassen kann.

Oh, danke für die Aufklärung. Das macht tatsächlich keinen Unterschied, ob ich die Tabellen scrollbar habe oder nicht. Scheinbar seitdem der Smooth-Effekt entfernt wurde, klappt das Scrollen im Hochformat wie gewünscht. Im Hochformat habe ich auch KEIN Problem mit dem Scrollen in oder über den SVG-Plots. Das war eine falsche Beobachtung von mir.

Anhang meiner Unterstreichung der Wörter merkst du worauf ich hinaus will, oder?  Die Probleme, die ich aktuell feststelle, habe ich ausschließlich im Querformat/Landscape-Modus. Und das spielt auch keine Rolle, ob SVG oder Tabelle.

Probleme im Querformat:
- Ich erreiche häufig das Seitenende nicht. Wische ich dann am Rand über den (vermutlich) Body-Tag ganz langsam, so erreiche ich das Ende. Aber nicht über die Wischgeste über den normalen Inhalt.
- Das Scrollen blockiert ganz oft. Ich komme ab und zu per Wischgeste nicht runter. Aber sehr häufig per Wischgeste nicht mehr nach oben. Dann muss ich kurz ins Hochformat wechseln. Dann ist das wieder möglich.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juli 2019, 13:57:48
Oh, danke für die Aufklärung. Das macht tatsächlich keinen Unterschied, ob ich die Tabellen scrollbar habe oder nicht. Scheinbar seitdem der Smooth-Effekt entfernt wurde, klappt das Scrollen im Hochformat wie gewünscht.
na das ist doch schon mal ein Teilerfolg :)
Ich habe die Option disableScrollableTable und alle "Smooth-Effekte" enternt, außer vom Hauptcontent, da es dort nötig ist, da sonst (auf iOS) nur so weit gescrollt wird wie man den Finger bewegt.

Probleme im Querformat:
- Ich erreiche häufig das Seitenende nicht. Wische ich dann am Rand über den (vermutlich) Body-Tag ganz langsam, so erreiche ich das Ende. Aber nicht über die Wischgeste über den normalen Inhalt.
- Das Scrollen blockiert ganz oft. Ich komme ab und zu per Wischgeste nicht runter. Aber sehr häufig per Wischgeste nicht mehr nach oben. Dann muss ich kurz ins Hochformat wechseln. Dann ist das wieder möglich.
Warum das im Querformat nicht klappt  ist schon merkwürdig. Könntest du bitte mal testen ob es einen Unterschied macht wenn du die Seite schon im Querformat öffnet, also nicht im Hochformat und dann auf Querformat wechseln.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 29 Juli 2019, 14:15:28
Warum das im Querformat nicht klappt  ist schon merkwürdig. Könntest du bitte mal testen ob es einen Unterschied macht wenn du die Seite schon im Querformat öffnet, also nicht im Hochformat und dann auf Querformat wechseln.

Ich öffne hier die Seiten bereits und ausschließlich im Querformat.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 29 Juli 2019, 14:27:03
Das hat nichts mit den colspans zu tun, die werden nur bei Readingsgroup modifiziert. Das Problem ist, dass ich der devState Zelle erlaube bis zu 180px breit zu werden, sodass idR. die webcmds untereinander stehen (bei ungleichen devStates), zumindest solange nach rechts genug Platz ist. Ist das nicht der Fall, wird erst die devState Zelle geschrumpft und dann die Zelle mit dem Device-Namen.
Wenn du willst, dass sich die devState Zelle nicht auf 180px vergrößert, musst du folgendes bei Additional CSS hinzufügen:
table.block[id^=TYPE] > tbody > tr > td:nth-child(2), #ddtable .odd > td:nth-child(2), #ddtable .even > td:nth-child(2) { max-width: fit-content; max-width: -moz-fit-content; }Hinweis: vorab noch ein Update machen, da ich gerade noch hinzugefügt habe, dass die semi-colns automatisch escaped werden.

Das klappt leider nicht. Ich habe die Spalten mal eingefärbt.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juli 2019, 14:50:07
Ich öffne hier die Seiten bereits und ausschließlich im Querformat.
Ich habe gerade mal ein System Update von dem mir zur Verfügung stehenden iPhone 4s gemacht und siehe da: es zeigen sich die gleichen Problemen - die wohl gemerkt, davor nicht aufgetreten sind. Was auch immer Apple da angestellt hat. Jetzt kann ich das aber immerhin durchtesten und hoffentlich beheben.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juli 2019, 15:06:20
Das klappt leider nicht. Ich habe die Spalten mal eingefärbt.
Hmm, stimmt, in dem Fall reicht das nicht aus da die erste Spalte erst kleiner wird wenn in den restlichen kein Platz mehr ist. Zum Verständnis: Die Zeilen einer Gruppe sind Flex-Container, was bedeutet, das die Spalten einer Zeile unabhängig von einer anderen Zeile sind, nur so ist es auch möglich dass die Webcmds in der Mobilansicht in eine neue Zeile "springen".
Man könnte zwar per Javascript sicherstellen, dass das Tabellenverhalten so lange wie möglich eingehalten wird, aber ich glaube das könnte die Performance beeinträchtigen (ich werde es mal testen).
Zwei andere Lösungsvorschläge:
- maximale Breite der ersten Spalte verringern:
table.block[id^=TYPE] > tbody > tr > td:not([informid]):nth-child(1), #ddtable .odd > td:nth-child(1), #ddtable .even > td:nth-child(1) { max-width: 350px;}z.B. auf 250px;
- oder die unnötigen on/off webcmds entfernen, man kann ja auf das devState Icon klicken :)

Edit Ich will anmerken, dass der anderen CSS Code trotzdem nötig ist!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 29 Juli 2019, 15:28:30
Danke für deine Mühe, aber ich werde das lassen.
Das DevStateIcon rutscht sonst zu weit nach links und ist optisch nicht mehr rechts ausgerichtet im Smartphone-Hochformat.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juli 2019, 16:51:12
Danke für deine Mühe, aber ich werde das lassen.
Das DevStateIcon rutscht sonst zu weit nach links und ist optisch nicht mehr rechts ausgerichtet im Smartphone-Hochformat.
Man kann halt nicht alles haben :) Aber ich werde das wie gesagt mal testen, das Tabellenverhalten so lange beizubehalten, solange kein Webcmd in eine neue Zeile springt.

Zu dem Scrollbug: Problem identifiziert...und man kann eigentlich nur sagen, dass das ein Bug von Apple ist. Im Landscape Modus gibt Safari die falsche Seitenhöhe an, anstatt von Unterkante der URL Eingabe bis unterer Bildschirmrand, wird die URL Eingabe nicht abgezogen. Das bedeutet so lange die URL Eingabe sichtbar ist, geht der Seiteninhalt unter dem Bildschirmrand weiter (in Höhe der URL Eingabe). Das ist grundlegend erstmal kein Problem, das Problem besteht nun darin, dass Safari durch das nach unten Scrollen bei einem <div> Container NICHT die URL Eingabe ausblendet, daher siehst du immer den unteren Teil der Seite nicht. Die URL Eingabe wird nur ausgeblendet wenn der body gescrollt wird. So ein quatsch! Das macht nur Safari so...
Das Problem besteht jedenfalls schon länger, hier ein Bericht von 2017: https://github.com/alvarotrigo/fullPage.js/issues/2637

Ich stelle gerade alles auf einen scrollbaren body um, das hat aber noch ein paar Nachwehen die ich erst beseitigen muss...

Edit: Das Problem besteht übrigens auch beim f18 Style wenn man Menü/Header auf fixed setzt... Und das wird auch bei jeder anderen Webpage bestehen die keinen scrollbaren body nutzt. Da muss Apple eigentlich was dagegen tun!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juli 2019, 22:29:18
Ich öffne hier die Seiten bereits und ausschließlich im Querformat.
Also, ich habe jetzt was commited und es funktioniert auch, aber es ist nicht wirklich optimal. Ich hatte zuerst alles auf einen scrollbaren body umgestellt, dann funktioniert das Scrollen (wie erwartet) super, leider führt das aber zu sehr merkwürdigem Verhalten wenn man per Javascript zu einem Element scrollen will, was mehrfach genutzt wird (zum Attr-Feld, zum Plot control, zu devSpecHelp, usw.). Aus irgendwelchen Gründen gibt mir Javascript nicht immer die korrekte Position von einem Element an, weswegen er dann nicht zur richtigen Position scrollt. Also habe ich alles wieder rückgängig gemacht und nach eine Alternative gesucht.

Dabei ist mir aufgefallen, dass das Landscape Problem (also dass der URL Bereich nicht ausgeblendet wird) durch den Fix zustanden kommt welchen ich für das von Maui beschrieben "Kleben" implementiert habe. Dabei habe ich dann herausgefunden wodurch dieses Kleben zustande kommt: wenn man nach ganz oben bzw. ganz unten scrollt und dann weiter scrollt, will Safari den body scrollen (auch wenn er nicht scrollbar ist) und dabei läuft im Hintergrund die Smooth/Bounce Animation auch wenn optisch davon nichts zu sehen ist (und ich habe auch keine Möglichkeit gefunden das zu deaktivieren). Erst wenn die Animation vorbei ist, kann man wieder scrollen, und genau das ist dann das Kleben. Durch den Fix hatte ich weiteres Scrollen einfach verboten, was dann aber im Landscape zu dem von dir beschriebenen Problem führt.

Ich habe das nun so implementiert, dass der Fix nur im Hochformat angewendet wird, aber nicht im Querformat. Wenn man nun den Content nach ganz unten scrollt, muss man kurz warten (aufgrund der Animation) und dann kann man das fehlende Stück nach unten scrollen. Selbiges gilt dann auch wenn man wieder nach oben scrollt. Wenn du es testet, wirst du merken was ich meine.

Das ist keine optimale Lösung, aber aktuell die beste. Und genau genommen sollte Apple das einfach mal so implementieren wie es alle anderen auch machen...aber das wird wohl nichts...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 29 Juli 2019, 22:42:48
Ich habe deine Commits ständig im Blick und auch direkt getestet.
Mit deiner Beschreibung verstehe ich das auch und habe das auch wirklich direkt gesehen. Wenn man das nicht weiß, dann ist es erst ein wenig komisch.

Du bist wirklich unermüdlich mit deinen Features und Bugfixing. Danke.

Ehrlich gesagt finde ich die Lösung nicht wirklich gut. Es bremst halt. Man fühlt sich fremdgesteuert. Und man kann dadurch auch immer noch nicht nach oben springen.
Aber ich kann dich verstehen. Bei mir waren es früher die ständigen IE-CSS-Hacks, die mich genervt haben.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 29 Juli 2019, 22:47:13
Ich habe deine Commits ständig im Blick und auch direkt getestet.
Mit deiner Beschreibung verstehe ich das auch und habe das auch wirklich direkt gesehen. Wenn man das nicht weiß, dann ist es erst ein wenig komisch.

Du bist wirklich unermüdlich mit deinen Features und Bugfixing. Danke.

Ehrlich gesagt finde ich die Lösung nicht wirklich gut. Es bremst halt. Man fühlt sich fremdgesteuert. Und man kann dadurch auch immer noch nicht nach oben springen.
Aber ich kann dich verstehen. Bei mir waren es früher die ständigen IE-CSS-Hacks, die mich genervt haben.
Das hat mich durchaus ein paar Stunden gekostet heute  :-\
Wenn ich nur wüsste warum mir Javascript oder genauer gesagt Jquery nicht den korrekten Offset angibt (evtl. hat das irgendwas mit den CSS columns zu tun). Wenn der body scrollbar ist, dann funktionert alles bestens mit dem Safari, auch dass man nach oben springen kann.

Edit: Und was auch noch ein Problem ist: durch das iOS Update funktioniert das Remote-Debugging nicht mehr
https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter/issues/138

Somit kann ich jetzt nicht mal mehr debuggen, sondern nur noch optisch testen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Hellspawn am 30 Juli 2019, 10:06:20
Hallo und guten Morgen,

ich habe jetzt folgendes Phänomen (unter iOS und Safari auf dem Mac) :
flex.js line 1785:
TypeError: undefined is not an object (evaluating 'data.Results[0].Attributes')

Wenn ich nun eine Device anwähle wird es mir mit
"please define first" quittiert.

Aber: Ich finds immer noch klasse :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 11:04:54
ich habe jetzt folgendes Phänomen (unter iOS und Safari auf dem Mac) :
flex.js line 1785:
TypeError: undefined is not an object (evaluating 'data.Results[0].Attributes')
Der Fehler ist sehr merkwürdig. Zur Erklärung: In dem Codeblock wird ein jsonlist2 vom aktuellen FHEMWEB device gemacht und danach das columns Attribut ausgelesen um die Gruppen Sortierung zu erhalten. Die einzige Möglichkeit, dass dieser Fehler auftritt ist, dass das FHEMWEB Device nicht definiert ist, was ja nicht sein kann  :o
Wie ist denn der Name von deinem FHEMWEB Device?


Wenn ich nun eine Device anwähle wird es mir mit
"please define first" quittiert.
Das ist noch merkwürdiger, würde aber zu obigem Fehler passen, dass das FHEMWEB Device nicht definiert ist. Das klingt irgendwie so als ob mit deinem FHEM was nicht in Ordnung ist, evtl. mal einen neustart machen?!

Aber: Ich finds immer noch klasse :)
Das freut mich :)


Edit: Ich habe dennoch mal einen Check eingebaut ob das jsonlist2 dem entspricht, was erwartet wird. Auch wenn das eigentlich nicht nötig sein sollte
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Hellspawn am 30 Juli 2019, 11:33:20
sodele... nehme alles zurück und behaupte das Gegenteil....
hatte mir tatsächlich das FHEMweb verbastelt....

sorry für die Falschmeldung und danke für den wink mit dem Zaunpfahl ;)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 30 Juli 2019, 11:56:21
sodele... nehme alles zurück und behaupte das Gegenteil....
hatte mir tatsächlich das FHEMweb verbastelt....

sorry für die Falschmeldung und danke für den wink mit dem Zaunpfahl ;)
Basteln in der config-Datei, was ich vermute, hat halt seine Tücken, deshalb sollte man es lassen, eigentlich ...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Hellspawn am 30 Juli 2019, 12:01:33
nene nix configdatei das mach ich nun wirklich nicht... hatte mit dem "allowed" Modul gespielt gestern Abend... und schon war ich raus... aber gut das ich tägliche backups mache..
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 12:17:24
Aufgrund des Safari Scroll Problems würde ich gerne auf einen scrollbaren body statt auf den scrollbaren <div> Container umstellen. Leider bekomme ich dann aber nicht mehr den korrekten Offset, weder per Jquery noch per "normalem" Javascript.

Im Screenshot habe ich das mal dargestellt. Als Offset wird mir 818 zurück gegeben, was die Oberkante des makeSelects sein sollte. Wenn ich nun das Fenster auf eine Höhe von 818px Stelle, müsste eigentlich das makeSelect gerade so verschwinden, tut es aber nicht. Somit muss der Offset falsch sein. Es ist auch keine statische Differenz, sondern variiert je nach Fenster Breite

Kennt jemand das Problem und kann mir helfen?

Edit: Ok, ich habe das Problem selbst gefunden...wieso passiert das immer erst wenn man nachfragt?!
Problem ist der Zoom-Faktor, der wird von Javascript bei der Offset Berechnung nicht berücksichtigt, warum auch immer. Wenn ich den Zoomfaktor mit dem Offset multipliziere, bekomme ich den korrekten Offset...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 13:47:46
Du bist wirklich unermüdlich mit deinen Features und Bugfixing. Danke.
Und ich gebe nie auf  ;)

Ich habe das Problem mit dem falsche Offset identifizieren und lösen können und habe jetzt entsprechend alles auf einen scrollbaren body umgestellt. Somit ist das Problem gelöst und selbst der Fix für Mauis Problem mit dem "Kleben" ist damit nicht mehr nötig. Ein kleines Problem bleibt aber bestehen: Im Querformat verhält sich das Menü noch wie bei der vorigen Lösung, da das Menü ja nach wie vor ein scrollbarer div-Container ist (und sein muss/soll). Sprich um im Menü nach ganz unten zu kommen, muss man runter scrollen, warten, und dann den Rest runter scrollen. Das lässt sich auch nicht ändern.

Ich habe das Smooth Scrolling nun auch wieder für die Tabellen aktiviert, auf meinem Test-iPhone verursacht das nun keine Probleme mehr. Ich hoffe bei dir auch nicht?!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 30 Juli 2019, 13:59:53
Das ist ja wirklich der Wahnsinn. Ich bin begeistert von deinen Fähigkeiten. Ernsthaft.

Ich muss aber sagen, dass ich im Querformat dein Scrollverhalten nicht nachstellen kann. Bei mir funktioniert ALLES super.  ;D
Oder ist dein Menü geöffnet? Bei mir nicht.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 14:05:58
Das ist ja wirklich der Wahnsinn. Ich bin begeistert von deinen Fähigkeiten. Ernsthaft.
Ich bin einfach nur extrem ehrgeizig, ich hasse halbe Sachen  ;D
Ich habe zuvor nie wirklich viel mit Javascript/HTML/CSS zu tun gehabt, daher sind meine Fähigkeiten eher rudimentär, aber ich weiß mir zu helfen  ;)

Ich muss aber sagen, dass ich im Querformat dein Scrollverhalten nicht nachstellen kann. Bei mir funktioniert ALLES super.  ;D
Oder ist dein Menü geöffnet? Bei mir nicht.
Ja, ich meine wenn man das Menü scrollt.

Mir ist nur gerade etwas aufgefallen. Das mit dem falschen Offset bei gesetzter Skalierung ist wohl ein reines Chrome-Problem. Beim Safari scheint der Offset korrekt zurück gegeben zu werden, merkt man daran, dass die Slider Values jetzt an falscher Position angezeigt werden, das muss ich noch fixen. (Edit: ich korrigiere, Safari ist sogar noch blöder als Chrome, hier ist nicht nur der Offset falsch, sondern auch noch was anderes, was ich bisher nicht ausfindig machen kann, daher werden die Tooltips und die Slider Values falsch angezeigt wenn der Skalierungsfaktor ungleich 1 ist)

Aber schön wenn sonst jetzt alles funktioniert bei dir ;)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: pscl am 30 Juli 2019, 14:36:06
Es ist so toll *.* Danke für die Arbeit  :)

Edit: Sofern noch nicht erwähnt: SVG Plots die nicht gruppiert sind, werden auf die gesamte breite skaliert.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 15:08:19
Es ist so toll *.* Danke für die Arbeit  :)
Danke und gerne doch :)

Edit: Sofern noch nicht erwähnt: SVG Plots die nicht gruppiert sind, werden auf die gesamte breite skaliert.
Sofern in den Einstellungen maxPlotWidth auf 100% steht, ist das auch richtig so. Wenn ich das z.B. auf 800px setze, wird der Plot auch nur 800px breit
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 30 Juli 2019, 15:08:45
Überleg dir mal, einen beerpay-Account oder sowas anzulegen ^^
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 15:23:12
Überleg dir mal, einen beerpay-Account oder sowas anzulegen ^^
Das ein oder andere Motivations-Bier kann nicht schaden, ich habe was im ersten Beitrag verlinkt  ;)


Edit:  :-*
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 30 Juli 2019, 15:27:54
Zitat
Das ein oder andere Motivations-Bier kann nicht schaden

Na, dann Prost!

Aber nicht alles auf einmal, sonst kannst hier nimmer weitermachen  ;D ;D ;D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 30 Juli 2019, 16:20:26
Wenn ich auf einem Smartphone das FHEM-Log betrachtet und ans Ende der Seite springe, dann aber z.B. das Smartphone drehe und in den Landscape-Modus wechsel, so springt die Anzeige wieder einen großen Sprung nach oben. Man befindet sich plötzlich weder am Anfang noch am Ende es Logs. Dann heißt es: Scrollen, scrollen, scrollen.

Dieser Fehler ist übrigens auch weg.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 16:51:17
Dieser Fehler ist übrigens auch weg.
Sehr gut, danke für's mitteilen
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 30 Juli 2019, 18:48:05
Das Tooltip zum Flex-Thread ist halb verdeckt :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 18:57:18
Das Tooltip zum Flex-Thread ist halb verdeckt :)
Danke, zwei Minuten vor deinem Post hatte ich was commited :)
Gab allgemein noch Probleme mit abgeschnittenen Tooltips beim Safari. Sollte jetzt nicht mehr auftreten.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 19:09:35
- Roomsort fixen
Ich habe das Problem identifiziert, zumindest wieso es bei mir auftritt. Wie ich paar Posts vorher schon geschrieben habe, werden von Javascript falsche Offset/Positionsangaben zurück gegeben wenn man einen Zoomfaktor ungleich 1 gesetzt hat (und zwar genau um den Zoomfaktor). Für die von mir implementierten Sachen konnte ich das fixen, aber die Menüsortierung basiert auf eine Jquery Funktion. Ich könnte mich da zwar jetzt einarbeiten und die Funktion selbst neu implementieren, das ist mir für den Fall aber zu viel Arbeit, da man ja nicht ständig das Menü neu sortiert. Ich werde es aber ins Tooltip eintragen.

- evtl hideWebCmdonSmallscreens auf einzelne Devices/Group beschränken. Grad bei Slidern zB Dimmer brauchst du ja webcmd, da geht es ja nicht nur mit devStateIcon. Oder bin ich falsch?
Also mir ist noch nichts wirklich eingefallen wie man das sinnvoll konfigurieren könnte, dir?

Unverschämt, was? ;) ich hätte noch mehr, aber das grenzt dann an Ungehobelt sein;)
Meine TODO List geht dem Ende zu, wenn du Vorschläge hast...nur her damit :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 30 Juli 2019, 19:32:29
Zitat
Meine TODO List geht dem Ende zu, wenn du Vorschläge hast...nur her damit
Na dann:
Pre-Flex hatte ich das dark-style.
Da wurde, wenn ich am Ende vom Log war und F5 machte, direkt wieder an diese Stelle gesprungen, ich hatte also direkt die neuen Logeinträge zur Hand.
Das Flex springt bei einem Reload zum Seitenbeginn hoch.
Kannst du das beim flex auch so implementieren?

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 19:34:33
Na dann:
Pre-Flex hatte ich das dark-style.
Da wurde, wenn ich am Ende vom Log war und F5 machte, direkt wieder an diese Stelle gesprungen, ich hatte also direkt die neuen Logeinträge zur Hand.
Das Flex springt bei einem Reload zum Seitenbeginn hoch.
Kannst du das beim flex auch so implementieren?

lg, Stefan
Das sollte mit den Änderungen von heute (Umstellung auf scrollbaren body) schon gehen, zumindest tut es das bei mir
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 30 Juli 2019, 19:43:42
Zitat
Meine TODO List geht dem Ende zu, wenn du Vorschläge hast...nur her damit
Stimmt, scheint zu gehn....Allerdings hab ich jetzt keinen Scrollbalken mehr (am normalen Desktop-Browser [Chrome wie auch FF]) :(
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 19:46:29
Stimmt, scheint zu gehn....Allerdings hab ich jetzt keinen Scrollbalken mehr (am normalen Desktop-Browser [Chrome wie auch FF]) :(
danke, ist erledigt.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 30 Juli 2019, 20:39:56
Das ein oder andere Motivations-Bier kann nicht schaden, ich habe was im ersten Beitrag verlinkt  ;)
Edit:  :-*
das war längstens fällig. Aber nicht dass du noch zum Alki wirst ;)


Roomsort: Ich habe das Problem identifiziert, zumindest wieso es bei mir auftritt. Wie ich paar Posts vorher schon geschrieben habe, werden von Javascript falsche Offset/Positionsangaben zurück gegeben wenn man einen Zoomfaktor ungleich 1 gesetzt hat (und zwar genau um den Zoomfaktor). Für die von mir implementierten Sachen konnte ich das fixen, aber die Menüsortierung basiert auf eine Jquery Funktion. Ich könnte mich da zwar jetzt einarbeiten und die Funktion selbst neu implementieren, das ist mir für den Fall aber zu viel Arbeit, da man ja nicht ständig das Menü neu sortiert. Ich werde es aber ins Tooltip eintragen.
Mit Zoomfaktor 1.0 funktioniert es bestens. Das reicht längstens.. Wie du schon erwähnt hast, ändert man die Reihenfolge nicht konstant. Und wenn man es weiss, perfekt.. Danke

hideWebCmdonSmallscreens auf einzelne Devices/Group beschränken: Also mir ist noch nichts wirklich eingefallen wie man das sinnvoll konfigurieren könnte, dir?

Ohne zusätzlichem Attribut kann man das vermutlich schwierig lösen.. Ich wollte eigentlich damit das Problem "Slider im State" umgehen. Das wäre ein super Workaround gewesen.. naja.. kein Problem aber..

Meine TODO List geht dem Ende zu, wenn du Vorschläge hast...nur her damit :)

Ui, da lass ich mich nicht 2mal bitten ;) Ist aber Kosmetik auf hohem Niveau und somit nice to have

- Roomsort I
(sorry, schon wieder;): Auch Subräume (z.B. 10_System->Daten)  sortieren können. Gibt bei mir (Safari) noch ein durcheinander..
- Roomsort II: Die Subräume etwas mehr nach rechts einrücken, damit der Unterschied zu den Haupträumen besser sichtbar ist.
- 2-Spalten-Layout/Sortierbare Gruppen: Wenn ich z.B. 4 Gruppen habe, dann sortiert es mir automatisch 2 links und 2 rechts. Manchmal möchte ich jedoch 3 Gruppen links haben und nur 1 Gruppe rechts, der Lesbarkeit halber. Evtl. kann man das mit Sortierbare Gruppen lösen.

lg und schönen Abend
c

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 30 Juli 2019, 21:20:02
Tut mir ja leid, aber die Tooltips sind in dem Skin-Config abgeschnitten.
Jeweils das Tooltip in der ersten Reihe wird vom jeweiligen Table-Header überlagert.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 22:30:56
Zeitgesteuertes setzten von Stylepresets. Zum Beispiel am Tag heller Style,  am Abend/Nachts augenfreundlicher Style.
Ist jetzt implementiert. Man kann je einen Style für Tag/Nacht auswählen. Ob Tag oder Nacht ist wird über ein Sonnenuntergangs/-aufgangs Plugin bestimmt. Dafür ist Zugriff auf den aktuellen Standort nötig um die korrekten Zeiten zu berechnen.

War eine gute Idee, ich finde es ziemlich cool  8)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 30 Juli 2019, 22:36:19
das war längstens fällig. Aber nicht dass du noch zum Alki wirst ;)
Wow, vielen Dank, das reicht in Deutschland sogar fast für 5 Bratwürste  ;D

Ohne zusätzlichem Attribut kann man das vermutlich schwierig lösen.. Ich wollte eigentlich damit das Problem "Slider im State" umgehen. Das wäre ein super Workaround gewesen.. naja.. kein Problem aber..
Vielleicht kommt ja noch jemand mit einer guten Idee

- Roomsort I
(sorry, schon wieder;): Auch Subräume (z.B. 10_System->Daten)  sortieren können. Gibt bei mir (Safari) noch ein durcheinander..
- Roomsort II: Die Subräume etwas mehr nach rechts einrücken, damit der Unterschied zu den Haupträumen besser sichtbar ist.
Bei mir funktioniert das mit den Subräumen, also die Obergruppe kann sortiert werden. Willst du auch die Unterräume sortieren?

- 2-Spalten-Layout/Sortierbare Gruppen: Wenn ich z.B. 4 Gruppen habe, dann sortiert es mir automatisch 2 links und 2 rechts. Manchmal möchte ich jedoch 3 Gruppen links haben und nur 1 Gruppe rechts, der Lesbarkeit halber. Evtl. kann man das mit Sortierbare Gruppen lösen.
Das geht leider nicht, die Aufteilung übernimmt der Browser selbst und teilt sie dabei so gleichmäßig wie möglich ein.

Tut mir ja leid, aber die Tooltips sind in dem Skin-Config abgeschnitten.
Jeweils das Tooltip in der ersten Reihe wird vom jeweiligen Table-Header überlagert.
Hmm, komisch. Bei mir funktioniert das seit der letzten Änderung, auch auf den iPhone  :o
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 30 Juli 2019, 22:38:20
Kommando zurück.
Kein Proxy hier aktiv und Cache hatte ich auch beachtet.
Aber jetzt läuft es tatsächlich. Keine Ahnung woran es lag.
Danke.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 31 Juli 2019, 05:59:05
Bei mir funktioniert das mit den Subräumen, also die Obergruppe kann sortiert werden. Willst du auch die Unterräume sortieren?

Ja, das wäre optimal. Und perfekt wäre, wenn man sogar die Unterräume in andere Oberräume schieben könnte. ;) wie du merkst, bin ich grad an meiner Raumstruktur aufräumen ;)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 31 Juli 2019, 09:29:40
Leider noch etwas gefunden:

Das Menü, welches sich beim Klick auf die Legende in einem Plot öffnet, funktioniert weit oben auf der Seite ganz gut und wird auch unmittelbar am Cursor angezeigt.
Je weiter unten auf der Seite sich die Plots befinden, desto mehr entfernt sich das Menü vom Cursor.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 31 Juli 2019, 09:34:53
Leider noch etwas gefunden:

Das Menü, welches sich beim Klick auf die Legende in einem Plot öffnet, funktioniert weit oben auf der Seite ganz gut und wird auch unmittelbar am Cursor angezeigt.
Je weiter unten auf der Seite sich die Plots befinden, desto mehr entfernt sich das Menü vom Cursor.
Danke, das hängt auch mit dem Zoomfaktor zusammen. Echt doof, dass Javascript damit nicht zurecht kommt. Ich kann das zwar für meinen eigenen Code fixen, aber für anderen Code ist das nur möglich wenn ich ihn reimplementiere. Evtl. muss ich die Funktion raus nehmen und mir was anderes überlegen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 31 Juli 2019, 09:54:06
Ist "Tageszeiten Wechsel" aktiviert, werden die Farbeinstellungen ausgeblendet. Bug oder Feature?
Übrigens cooles Feature  8) Habe Flex mittlerweile fest auf dem Wandtablet im Einsatz  :D

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 31 Juli 2019, 09:56:45
Ist "Tageszeiten Wechsel" aktiviert, werden die Farbeinstellungen ausgeblendet. Bug oder Feature?
Übrigens cooles Feature  8) Habe Flex mittlerweile fest auf dem Wandtablet im Einsatz  :D

VG Sebastian
Das ist ein Feature, da es keinen Sinn macht in dem Modus die Farben anzupassen. Angedacht ist, erst zwei Presets zu erstellen (im normalen Modus) und dann kann man diese im Tagezeiten Modus auswählen.

Ich finde das das Feature auch ziemlich cool. Freut mich dass der Style bei dir im Dauereinsatz ist  8)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 31 Juli 2019, 10:02:30
Angedacht ist, erst zwei Presets zu erstellen (im normalen Modus) und dann kann man diese im Tagezeiten Modus auswählen.

So hab ich es ja dann auch ganz intuitiv gemacht.  8)
VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 31 Juli 2019, 11:13:51
@xanker

Hast mein Wunsch mit Tageszeiten ja schon eingebaut.
Toll vielen Dank !
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 31 Juli 2019, 12:53:39
Leider noch etwas gefunden:

Das Menü, welches sich beim Klick auf die Legende in einem Plot öffnet, funktioniert weit oben auf der Seite ganz gut und wird auch unmittelbar am Cursor angezeigt.
Je weiter unten auf der Seite sich die Plots befinden, desto mehr entfernt sich das Menü vom Cursor.
Ich habe nun die nötigen Jquery Funktionen überschrieben um das offset Problem zu fixen. Das Löst das Problem mit dem Plot Menü. Leider löst das noch nicht das Problem mit der Menü Sortierung.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 31 Juli 2019, 14:13:48
Also ich würde die Zoom Funktion am liebsten raus nehmen, da sich einfach nicht alle Probleme damit beheben lassen, und man muss ja immer vom DAU ausgehen - der nicht mal die Tooltips liest. Firefox und Chrome (zumindest die Desktop Versionen) bieten selbst eine Zoom-Funktion und damit gibt es keinerlei Probleme.

Wenn ich hier in nächster Zeit keinen Aufschrei höre, werde ich die Zoom-Funktion irgendwann entfernen. Oder was vielleicht besser ist, damit auch jeder zufrieden ist, werde ich "beta" Settings einführen, mit einem klaren Hinweis auf evtl. Probleme.

Für die Javascript bewandten, folgendes ist nötig um das meiste zu fixen. Das zeigt deutlich wie beschissen das verhalten dadurch wird, vor allem weil es Unterschiede bei Safari und anderen Browsern gibt. Interessanterweise ist auch nur der top-Offset und die Scroll Position davon betroffen.
// fix scrollTop()
$.fn.oldScrollTop = $.fn.scrollTop;
$.fn.scrollTop = function () {
var c = $.fn.oldScrollTop.apply(this, arguments);
return c/flex.offsetScale;
}
// fix offset()
$.fn.oldOffset = $.fn.offset;
$.fn.offset = function () {
var c = $.fn.oldOffset.apply(this, arguments);
if (!c) return c;
if (flex.browser.isSafari) // safari seem to report correct offset
return c;
else
return {
left: c.left,
top: c.top+(1-flex.offsetScale)*$(window).scrollTop() // only required for top offset
};
}
$.fn.oldPosition = $.fn.position;
$.fn.position = function () {
var c = $.fn.oldPosition.apply(this, arguments);
if (!c) return c;
return {
left: c.left,
top: c.top*flex.offsetScale
};
}
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 31 Juli 2019, 19:38:44
Wenn ich hier in nächster Zeit keinen Aufschrei höre, werde ich die Zoom-Funktion irgendwann entfernen

ca 48db-Aufschrei ;) ich bin eigentlich ganz happy damit. Ich fahre mit 0.8 und dem Menu-Zusatz von dir (additional CSS). was ich aber grad merke, dass ich den Zoom-Faktor nicht mehr ändern kann.. Es bleibt auf 0.9. Sowohl bei Mac Safari und Chrome. Und ja, Cache geslöscht... Gewollt?

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 31 Juli 2019, 20:38:41
Also ich fand den Zoom Factor (gerade wenn man mobil unterwegs ist) auch ganz nett. Hänge aber nicht dran  :o

Was ich noch viel netter fand, war die Darstellung des FHEM log im Event Monitor. Da ist wohl irgendwas kaputt gegangen.

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 31 Juli 2019, 22:04:41
@xanker

Zu Tag/Nachtswitch
Im Popup steht, das der Standortzugriff benötigt wird. Wo setzt ich das?

edit:
Hiermit?
attr global latitude xx.xxxxx
attr global longitude xx.xxxxx
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 01 August 2019, 08:44:51
ca 48db-Aufschrei ;) ich bin eigentlich ganz happy damit. Ich fahre mit 0.8 und dem Menu-Zusatz von dir (additional CSS). was ich aber grad merke, dass ich den Zoom-Faktor nicht mehr ändern kann.. Es bleibt auf 0.9. Sowohl bei Mac Safari und Chrome. Und ja, Cache geslöscht... Gewollt?
Ich habe nun "Experimental Settings" hinzugefügt, wozu diese Einstellung nun gehört. Man muss die experimentellen Einstellungen explizit aktivieren. Zu deinem Fehler: gewollt ist das natürlich nicht und bei mir funktioniert das auch, nach wie vor ???


Also ich fand den Zoom Factor (gerade wenn man mobil unterwegs ist) auch ganz nett. Hänge aber nicht dran  :o

Was ich noch viel netter fand, war die Darstellung des FHEM log im Event Monitor. Da ist wohl irgendwas kaputt gegangen.
Danke, das hängt wohl mit den letzten Änderungen von Rudolf an der console.js zusammen (siehe https://forum.fhem.de/index.php/topic,102595.0.html). Werde ich gleich mal checken und ihm dann berichten.
Edit: Also bei mir funktioniert es mit der aktuellsten Version. Schau mal ob bei "update check" die Datei "console.js" auftaucht, falls ja, musst du ein update machen.


@xanker

Zu Tag/Nachtswitch
Im Popup steht, das der Standortzugriff benötigt wird. Wo setzt ich das?

edit:
Hiermit?
attr global latitude xx.xxxxx
attr global longitude xx.xxxxx
Ne, es wird der Standortzugriff vom Endgerät abgefragt. Ich hatte erst überlegt die Position vom global Attribut auszulesen, aber das wäre ja nicht ganz so sinnvoll, da es ja um die Position des Endgeräts geht.

Ein Problem gibt es aber mit Chrome:
Zitat
Note: As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function.

Von daher sollte ich noch einen Fallback auf die grobe IP Lokalisierung einbauen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 01 August 2019, 09:08:45
Das wird mein Problem gewesen sein.
Die FHEMWEB-Instance auf der ich den Skin
teste hat im Moment kein Https.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 01 August 2019, 09:27:57
Das wird mein Problem gewesen sein.
Die FHEMWEB-Instance auf der ich den Skin
teste hat im Moment kein Https.
Ich habe ein Fallback auf die IP Lokalisierung eingebaut, damit geht es auch ohne HTTPS. Wenn man ein Proxy/VPN (im Ausland) nutzt, wird dann natürlich die falsche Position zurück gegeben, und somit falsche Sonnenaufgangs/-untergangs Zeiten.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 01 August 2019, 10:17:09
Ich habe ein Fallback auf die IP Lokalisierung eingebaut, damit geht es auch ohne HTTPS. Wenn man ein Proxy/VPN (im Ausland) nutzt, wird dann natürlich die falsche Position zurück gegeben, und somit falsche Sonnenaufgangs/-untergangs Zeiten.

Mein Tablet hat eine private IP und keine öffentliche. Also immer Tag  ???
Da es stationär an der Wand hängt, ist auch sämtliches Location-Gedöns ausgeschaltet  ;)
Wäre ein Fallback auf global lat long bei privater IP Möglich?

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 01 August 2019, 10:31:01
Mein Tablet hat eine private IP und keine öffentliche. Also immer Tag  ???
Da es stationär an der Wand hängt, ist auch sämtliches Location-Gedöns ausgeschaltet  ;)
Wäre ein Fallback auf global lat long bei privater IP Möglich?

VG Sebastian
Habe ich eingebaut.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 01 August 2019, 10:57:26
Da es stationär an der Wand hängt
Ich habe nun auch eingebaut, dass der Style automatisch ändert, ohne dass die Seite neu geladen werden muss, das ist für ein Tablet an der Wand durchaus sinnvoll.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 01 August 2019, 10:59:04
Wollte gerade updaten:
2019.08.01 10:57:55 1 : fhem-flex
2019.08.01 10:57:55 1 : UPD www/pgm2/flex.js
2019.08.01 10:57:55 1 : Got 141261 bytes for www/pgm2/flex.js, expected 140911
2019.08.01 10:57:55 1 : aborting.

 :o
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 01 August 2019, 10:59:58
Wollte gerade updaten:
2019.08.01 10:57:55 1 : fhem-flex
2019.08.01 10:57:55 1 : UPD www/pgm2/flex.js
2019.08.01 10:57:55 1 : Got 141261 bytes for www/pgm2/flex.js, expected 140911
2019.08.01 10:57:55 1 : aborting.

 :o
Das liegt an github, du musst ein paar Minuten warten. Irgendwie wird der rawcontent nicht direkt nach commit aktualisiert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 01 August 2019, 14:10:14
- Roomsort I
(sorry, schon wieder;): Auch Subräume (z.B. 10_System->Daten)  sortieren können. Gibt bei mir (Safari) noch ein durcheinander..
- Roomsort II: Die Subräume etwas mehr nach rechts einrücken, damit der Unterschied zu den Haupträumen besser sichtbar ist.
Beides erledigt und auch verschachtelte Räume sind jetzt korrekt sortierbar, logischerweise nur innerhalb der richtigen Obergruppe.

- 2-Spalten-Layout/Sortierbare Gruppen: Wenn ich z.B. 4 Gruppen habe, dann sortiert es mir automatisch 2 links und 2 rechts. Manchmal möchte ich jedoch 3 Gruppen links haben und nur 1 Gruppe rechts, der Lesbarkeit halber. Evtl. kann man das mit Sortierbare Gruppen lösen.
Ich habe nochmal geschaut. Lässt sich doch noch relativ einfach einbauen, werde ich die Tage machen  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 01 August 2019, 18:32:25
Mit dem letzten Update ging 'editFiles' kaputt (s. Anhang)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 01 August 2019, 18:36:37
Mit dem letzten Update ging 'editFiles' kaputt (s. Anhang)
Danke, geht wieder.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 01 August 2019, 18:44:10
Das "Show neighbor map" im Z-Wave-Dongle funktioniert leider nicht.

Innerhalb vom DIV#ZWDongleNrSVG kommt ein SVG.zw_nr, welches aufgrund folgender Angaben sich nicht "ausbreiten" kann. Es müsste scheinbar width=960px; height=960px sein.

#content svg:not([id^=SVGPLOT]), #content img.icon, #content .col2 img {
    min-width: 1.35em;
    max-width: 1.35em;
    max-height: 1.35em;
    margin-top: -0.25em;
    margin-bottom: -0.1em;
    vertical-align: middle;
}
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 01 August 2019, 20:59:44
Ich hätte mal noch ne Frage / Anregung zu der automatischen Tag  / Nacht Umschaltung und der damit verbundenen (wie ich finde unschönen) Standortbestimmung.
Wäre es nicht eleganter das an das Astro Modul zu koppeln? Also wer unbedingt automatische Tag / Nacht Umschaltung möchte braucht das Astro modul.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 01 August 2019, 21:24:59
Danke, das hängt wohl mit den letzten Änderungen von Rudolf an der console.js zusammen (siehe https://forum.fhem.de/index.php/topic,102595.0.html). Werde ich gleich mal checken und ihm dann berichten.
Edit: Also bei mir funktioniert es mit der aktuellsten Version. Schau mal ob bei "update check" die Datei "console.js" auftaucht, falls ja, musst du ein update machen.

Das Problem besteht bei mir weiterhin.
Könnte das mit dem dark mode zusammen hängen?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 01 August 2019, 23:16:53
Das "Show neighbor map" im Z-Wave-Dongle funktioniert leider nicht.

Innerhalb vom DIV#ZWDongleNrSVG kommt ein SVG.zw_nr, welches aufgrund folgender Angaben sich nicht "ausbreiten" kann. Es müsste scheinbar width=960px; height=960px sein.

#content svg:not([id^=SVGPLOT]), #content img.icon, #content .col2 img {
    min-width: 1.35em;
    max-width: 1.35em;
    max-height: 1.35em;
    margin-top: -0.25em;
    margin-bottom: -0.1em;
    vertical-align: middle;
}
Da muss ich den Selektor wohl mal komplett neu definieren. Der Soll eigentlich nur Icons skalieren, aber nicht jedes Icon hat die Klasse "icon". Bei anderen Styles (z.B: f18) ist das korrekt? dann würde ich von dort mal den Selektor übernehmen.

Ich hätte mal noch ne Frage / Anregung zu der automatischen Tag  / Nacht Umschaltung und der damit verbundenen (wie ich finde unschönen) Standortbestimmung.
Wäre es nicht eleganter das an das Astro Modul zu koppeln? Also wer unbedingt automatische Tag / Nacht Umschaltung möchte braucht das Astro modul.
Warum unschön? Es gibt übrigens folgende Reihenfolge: GPS -> IP -> FHEM global device. Letzteres sowie Astro Modul macht nur bedingt Sinn, da man ja nicht den Sonnenaufgang/-untergang vom FHEM Server möchte, sondern von dem Endgerät mit dem man auf FHEM zugreift. Regulär ist beides natürlich in der Regel relativ identisch, wenn ich aber z.B. im Urlaub auf der anderen Seite der Erde bin, dann wären Tag und Nacht ja genau geswitched.

Das Problem besteht bei mir weiterhin.
Könnte das mit dem dark mode zusammen hängen?
Nö, mit den Farben hängt das definitiv nicht zusammen. Ich schaue da morgen nochmal drüber, bei mir hatte es heute Mittag aber wie erwartet funktioniert.

Für heute aber erstmal: gute Nacht  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 02 August 2019, 01:11:22
Ja, in f18 sieht das gut aus.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 02 August 2019, 07:41:37
Guten Morgen xanker,

heute wende ich mich mit einer Bitte an dich.
Ich nutze den flex-style in erster Linie auf dem Handy, und dann in senkrechter Position, so wie man ein Handy überwiegend hält.

Bei den log-files, für die ich mich auf dem Handy nicht sonderlich interessiere, ist mir folgendes aufgefallen, was die Darstellung unübersichtlich erscheinen lässt:

list des Fhemweb, bitte nicht durch den Namen "WEBtablet" irritieren lassen, ich nutze den style suf dem Handy:
Internals:
   CONNECTS   1065
   CSRFTOKEN  csrf_656427901300877
   DEF        IPV6:8085 global
   FD         7
   FUUID      5c94e19e-f33f-e986-ee6d-a7b0331c63f948af
   IPV6       1
   NAME       WEBtablet
   NR         14
   NTFY_ORDER 50-WEBtablet
   PORT       8085
   SSL        1
   STATE      Initialized
   TYPE       FHEMWEB
   READINGS:
     2019-08-01 18:19:35   state           Initialized
   helper:
     bm:
       FW_Attr:
         cnt        5
         dmx        -1000
         dtot       0
         dtotcnt    0
         mTS        01.08. 18:57:03
         max        6.91413879394531e-05
         tot        0.000196218490600586
         mAr:
           set
           WEBtablet
           styleData
           {
 "flex": {
  "colorPreset": {
   "mystyle": {
    "HeaderBG": "#2E5E87",
    "HeaderIcon": "#FFF",
    "HeaderText": "#FFF",
    "HeaderBorder": "#2E5E87",
    "MenuBG": "#222222",
    "MenuBorder": "#2E5E87",
    "MenuIcon": "#FFF",
    "MenuIconBG": "#222222",
    "MenuRoomIcon": "#FFF",
    "MenuText": "#FFF",
    "MenuHoverLink": "#2E5E87",
    "MainBG": "#dddddd",
    "TableHeaderBG": "#2E5E87",
    "TableHeaderText": "#FFF",
    "TableBorder": "#2E5E87",
    "TableOdd": "#EEE",
    "TableEven": "#DDD",
    "TableText": "#000",
    "TableHoverRow": "#AAA",
    "TableHoverLink": "#2E5E87",
    "TableNewEvent": "#F00",
    "TableIcon": "#2E5E87",
    "TableShadow": "#000",
    "SetGetAttrBG": "#CCC",
    "SubmitButtonBG": "#2E5E87",
    "SubmitButtonBorder": "#555",
    "SubmitButtonText": "#FFF",
    "WidgetBorder": "#555",
    "WidgetText": "#000",
    "WidgetHighlight": "#2E5E87",
    "LogDate": "#000",
    "LogTime": "#000",
    "LogVerbose0": "#000",
    "LogVerbose1": "#F00",
    "LogVerbose2": "#FFA500",
    "LogVerbose3": "#008000",
    "LogVerbose4": "#1E90FF",
    "LogVerbose5": "#00F",
    "plotBG": "#eeeeee",
    "plotBorder": "#2E5E87",
    "plotText": "#000",
    "plotGrid": "#555",
    "plotMarker": "#F00",
    "plotLine0": "#F00",
    "plotLine1": "#008000",
    "plotLine2": "#0000b2",
    "plotLine3": "#d675d6",
    "plotLine4": "#a52a2a",
    "plotLine5": "#000",
    "plotLine6": "#808000",
    "plotLine7": "#808080",
    "plotLine8": "#e6e600",
    "plotLinePasted": "#000"
   }
  },
  "menuOrder": {},
  "title": "Fhem",
  "myUtilsFileName": "",
  "plotMinWidth": "340px",
  "plotMaxWidth": "55%",
  "scalePage": "1",
  "showClock": false,
  "showRebootButton": false,
  "showUpdateButton": false,
  "showUpdateCheckButton": false,
  "showRereadIconsButton": false,
  "showRawInputButton": true,
  "showSaveButton": true,
  "showRoomDeviceName": true,
  "showMenuAlways": true,
  "enableCommandHistory": true,
  "enableDeviceSearch": true,
  "showReadingsGroupAsTable": true,
  "hideWebcmdOnSmallScreen": false,
  "colorOptionsDetailed": true,
  "showTablesSideBySide": false,
  "enableAnimations": false,
  "improvePerformance": false,
  "enableLogLineWrap": true,
  "color": {
   "HeaderBG": "#2E5E87",
   "HeaderIcon": "#FFF",
   "HeaderText": "#FFF",
   "HeaderBorder": "#2E5E87",
   "MenuBG": "#222222",
   "MenuBorder": "#2E5E87",
   "MenuIcon": "#FFF",
   "MenuIconBG": "#222222",
   "MenuRoomIcon": "#FFF",
   "MenuText": "#FFF",
   "MenuHoverLink": "#2E5E87",
   "MainBG": "#dddddd",
   "TableHeaderBG": "#2E5E87",
   "TableHeaderText": "#FFF",
   "TableBorder": "#2E5E87",
   "TableOdd": "#EEE",
   "TableEven": "#DDD",
   "TableText": "#000",
   "TableLink": "#000",
   "TableLinkFirstCol": "#000",
   "TableHoverRow": "#AAA",
   "TableHoverLink": "#2E5E87",
   "TableNewEvent": "#F00",
   "TableIcon": "#2E5E87",
   "TableShadow": "#000",
   "SetGetAttrBG": "#CCC",
   "SubmitButtonBG": "#2E5E87",
   "SubmitButtonBorder": "#555",
   "SubmitButtonText": "#FFF",
   "WidgetBorder": "#555",
   "WidgetText": "#000",
   "WidgetHighlight": "#2E5E87",
   "LogDate": "#000",
   "LogTime": "#000",
   "LogVerbose0": "#000",
   "LogVerbose1": "#F00",
   "LogVerbose2": "#FFA500",
   "LogVerbose3": "#008000",
   "LogVerbose4": "#1E90FF",
   "LogVerbose5": "#00F",
   "plotBG": "#eeeeee",
   "plotBorder": "#2E5E87",
   "plotText": "#000",
   "plotGrid": "#555",
   "plotMarker": "#F00",
   "plotLine0": "#F00",
   "plotLine1": "#008000",
   "plotLine2": "#0000b2",
   "plotLine3": "#d675d6",
   "plotLine4": "#a52a2a",
   "plotLine5": "#000",
   "plotLine6": "#808000",
   "plotLine7": "#808080",
   "plotLine8": "#e6e600",
   "plotLinePasted": "#000"
  },
  "enableRoundedEdges": false,
  "enableTableShadow": true,
  "enableSortableGroups": false,
  "showLogoButton": true,
  "showFirstColBold": true,
  "showRoomIconsRight": true,
  "enableCodeMirror": true,
  "enableDayTimeStyle": false,
  "enableExperimental": false,
  "dayStyle": "bright",
  "nightStyle": "dark",
  "newSettings": {}
 }
}
       FW_Notify:
         cnt        43524
         dmx        -1000
         dtot       0
         dtotcnt    0
         mTS        02.08. 02:34:49
         max        0.000301837921142578
         tot        0.195595741271973
         mAr:
           HASH(0x558070398000)
           HASH(0x558076a13190)
       FW_Read:
         cnt        1065
         dmx        -1000
         dtot       0
         dtotcnt    0
         mTS        02.08. 03:47:04
         max        0.45949912071228
         tot        33.8836307525635
         mAr:
           HASH(0x558070398000)
       FW_Set:
         cnt        15
         dmx        -1000
         dtot       0
         dtotcnt    0
         mTS        01.08. 21:19:10
         max        4.88758087158203e-05
         tot        0.000463962554931641
         mAr:
           HASH(0x558070398000)
           WEBtablet
           ?
Attributes:
   Css        .SVGlabel:not([data-name=svgZoomControl]) a { font-weight: normal;; font-size: 0.75em;;}
   HTTPS      1
   comment    Das Attribut Css (so wie es hier definiert ist) definiert die Größe und Stärke der Unterschrift unter dem Diagramm.
   editConfig 1
   endPlotNow 1
   endPlotToday 1
   plotEmbed  1
   plotfork   1
   plotsize   560,220
   sortRooms  AMAD netatmo Finance Traffic Network Haus CUL_HM Rollladen Heizung Weather Unsorted Mobile Everything
   sslVersion TLSv12:!SSLv3
   styleData  {
 "flex": {
  "colorPreset": {
   "mystyle": {
    "HeaderBG": "#2E5E87",
    "HeaderIcon": "#FFF",
    "HeaderText": "#FFF",
    "HeaderBorder": "#2E5E87",
    "MenuBG": "#222222",
    "MenuBorder": "#2E5E87",
    "MenuIcon": "#FFF",
    "MenuIconBG": "#222222",
    "MenuRoomIcon": "#FFF",
    "MenuText": "#FFF",
    "MenuHoverLink": "#2E5E87",
    "MainBG": "#dddddd",
    "TableHeaderBG": "#2E5E87",
    "TableHeaderText": "#FFF",
    "TableBorder": "#2E5E87",
    "TableOdd": "#EEE",
    "TableEven": "#DDD",
    "TableText": "#000",
    "TableLink": "#000",
    "TableLinkFirstCol": "#000",
    "TableHoverRow": "#AAA",
    "TableHoverLink": "#2E5E87",
    "TableNewEvent": "#F00",
    "TableIcon": "#2E5E87",
    "TableShadow": "#000",
    "SetGetAttrBG": "#CCC",
    "SubmitButtonBG": "#2E5E87",
    "SubmitButtonBorder": "#555",
    "SubmitButtonText": "#FFF",
    "WidgetBorder": "#555",
    "WidgetText": "#000",
    "WidgetHighlight": "#2E5E87",
    "LogDate": "#000",
    "LogTime": "#000",
    "LogVerbose0": "#000",
    "LogVerbose1": "#F00",
    "LogVerbose2": "#FFA500",
    "LogVerbose3": "#008000",
    "LogVerbose4": "#1E90FF",
    "LogVerbose5": "#00F",
    "plotBG": "#eeeeee",
    "plotBorder": "#2E5E87",
    "plotText": "#000",
    "plotGrid": "#555",
    "plotMarker": "#F00",
    "plotLine0": "#F00",
    "plotLine1": "#008000",
    "plotLine2": "#0000b2",
    "plotLine3": "#d675d6",
    "plotLine4": "#a52a2a",
    "plotLine5": "#000",
    "plotLine6": "#808000",
    "plotLine7": "#808080",
    "plotLine8": "#e6e600",
    "plotLinePasted": "#000"
   }
  },
  "menuOrder": {},
  "title": "Fhem",
  "myUtilsFileName": "",
  "plotMinWidth": "340px",
  "plotMaxWidth": "55%",
  "scalePage": "1",
  "showClock": false,
  "showRebootButton": false,
  "showUpdateButton": false,
  "showUpdateCheckButton": false,
  "showRereadIconsButton": false,
  "showRawInputButton": true,
  "showSaveButton": true,
  "showRoomDeviceName": true,
  "showMenuAlways": true,
  "enableCommandHistory": true,
  "enableDeviceSearch": true,
  "showReadingsGroupAsTable": true,
  "hideWebcmdOnSmallScreen": false,
  "colorOptionsDetailed": true,
  "showTablesSideBySide": false,
  "enableAnimations": false,
  "improvePerformance": false,
  "enableLogLineWrap": true,
  "color": {
   "HeaderBG": "#2E5E87",
   "HeaderIcon": "#FFF",
   "HeaderText": "#FFF",
   "HeaderBorder": "#2E5E87",
   "MenuBG": "#222222",
   "MenuBorder": "#2E5E87",
   "MenuIcon": "#FFF",
   "MenuIconBG": "#222222",
   "MenuRoomIcon": "#FFF",
   "MenuText": "#FFF",
   "MenuHoverLink": "#2E5E87",
   "MainBG": "#dddddd",
   "TableHeaderBG": "#2E5E87",
   "TableHeaderText": "#FFF",
   "TableBorder": "#2E5E87",
   "TableOdd": "#EEE",
   "TableEven": "#DDD",
   "TableText": "#000",
   "TableLink": "#000",
   "TableLinkFirstCol": "#000",
   "TableHoverRow": "#AAA",
   "TableHoverLink": "#2E5E87",
   "TableNewEvent": "#F00",
   "TableIcon": "#2E5E87",
   "TableShadow": "#000",
   "SetGetAttrBG": "#CCC",
   "SubmitButtonBG": "#2E5E87",
   "SubmitButtonBorder": "#555",
   "SubmitButtonText": "#FFF",
   "WidgetBorder": "#555",
   "WidgetText": "#000",
   "WidgetHighlight": "#2E5E87",
   "LogDate": "#000",
   "LogTime": "#000",
   "LogVerbose0": "#000",
   "LogVerbose1": "#F00",
   "LogVerbose2": "#FFA500",
   "LogVerbose3": "#008000",
   "LogVerbose4": "#1E90FF",
   "LogVerbose5": "#00F",
   "plotBG": "#eeeeee",
   "plotBorder": "#2E5E87",
   "plotText": "#000",
   "plotGrid": "#555",
   "plotMarker": "#F00",
   "plotLine0": "#F00",
   "plotLine1": "#008000",
   "plotLine2": "#0000b2",
   "plotLine3": "#d675d6",
   "plotLine4": "#a52a2a",
   "plotLine5": "#000",
   "plotLine6": "#808000",
   "plotLine7": "#808080",
   "plotLine8": "#e6e600",
   "plotLinePasted": "#000"
  },
  "enableRoundedEdges": false,
  "enableTableShadow": true,
  "enableSortableGroups": false,
  "showLogoButton": true,
  "showFirstColBold": false,
  "showRoomIconsRight": true,
  "enableCodeMirror": true,
  "enableDayTimeStyle": false,
  "enableExperimental": false,
  "dayStyle": "bright",
  "nightStyle": "dark",
  "newSettings": {}
 }
}
   stylesheetPrefix flex
   title      { if ($FW_room) { "Live: $FW_room" } elsif ($FW_detail) { "Live: $FW_detail" } else { "Live: FHEM" } }
   verbose    3

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 August 2019, 10:32:46
Bei den log-files, für die ich mich auf dem Handy nicht sonderlich interessiere, ist mir folgendes aufgefallen, was die Darstellung unübersichtlich erscheinen lässt:
  • Bei allen anderen tabellenartigen Anordnungen ist immer ein Wechsel zwischen hell- und dunkelgrau vorhanden. Hier ist nur der Titel im Wechsel, der Inhalt ist immer hellgrau. Ich hab die Farben leicht modifiziert, und da ich nicht weiß, ob es daran liegt, hänge ich ein list des Fhemweb an.
  • Bei längeren Namen reicht eine Zeile nicht aus. Dann ist es zwar immer so, dass "text" rechtsbündig steht, aber der Filename irgendwie in der Mitte mit unterschiedlichen Abständen zu "text". Hier fände ich es besser, wenn der Filname bei 2 Zeilen immer linksbündig wäre.
  • Noch eine Besonderheit bei sehr langen Namen. Diese erfordern noch mehr Platz, so dass auch das Wort "text" in 2 Zeilen umgebrochen wird. Abhilfsweise werde ich hier einen kürzeren Namen wählen.
Hallo Gisbert,
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 August 2019, 10:45:15
Das "Show neighbor map" im Z-Wave-Dongle funktioniert leider nicht.

Innerhalb vom DIV#ZWDongleNrSVG kommt ein SVG.zw_nr, welches aufgrund folgender Angaben sich nicht "ausbreiten" kann. Es müsste scheinbar width=960px; height=960px sein.

#content svg:not([id^=SVGPLOT]), #content img.icon, #content .col2 img {
    min-width: 1.35em;
    max-width: 1.35em;
    max-height: 1.35em;
    margin-top: -0.25em;
    margin-bottom: -0.1em;
    vertical-align: middle;
}

Ich habe gesehen, dass beim f18 CSS dieses SVG auch explizit ausgeschlossen wird:
svg.zw_nr { height:auto; width:auto; margin:0; }Ich habe das nun auch angepasst.

Zudem ist dort noch folgendes zu finden:
svg.zw_nr .zwBox    { stroke-width:2px; }
svg.zw_nr .zwDongle { stroke:red;     stroke-width:2px; }
svg.zw_nr .zwMargin { stroke-width:1px; fill:none; }
svg.zw_nr .zwLine   { stroke-width:1px; }
svg.zw_nr .zwLine.dashed { stroke-dasharray:5,5 }
svg.zw_nr .zwArrowHead { stroke-width:1px; }
Das habe ich auch mal hinzugefügt, keine Ahnung was das genau bei dem SVG ändert, da ich kein Z-Wave Dongle habe. Kannst ja mal Feedback geben
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 02 August 2019, 10:52:33
Hallo Gisbert,
  • ist gefixed.
  • Gibt Sinn den namen in dem Fall linksbündig auszurichten. Habe ich eingebaut.
  • Das habe ich auch angepasst, "text" wird nun nicht mehr umgebrochen

Hallo xanker,
danke, werde es nachher ausprobieren.

Wir hatten uns mal kurz darüber unterhalten, dass bei sehr langen Readings, die einen Komma-separierte Ausdruck ohne Leerzeichen darstellt, der Umbruch auf eine neue Zeile mitten im Wort stattfindet. Du hattest mir geschrieben, dass ein sinnvoller Umbruch ein Leerzeichen erfordert. Ich hab jetzt ein Leerzeichen eingebaut, und dennoch erfolgt der Umbruch mitten im "Wort".
Kannst Du dir das nochmals anschauen?

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 August 2019, 11:00:18
Hallo xanker,
danke, werde es nachher ausprobieren.

Wir hatten uns mal kurz darüber unterhalten, dass bei sehr langen Readings, die einen Komma-separierte Ausdruck ohne Leerzeichen darstellt, der Umbruch auf eine neue Zeile mitten im Wort stattfindet. Du hattest mir geschrieben, dass ein sinnvoller Umbruch ein Leerzeichen erfordert. Ich hab jetzt ein Leerzeichen eingebaut, und dennoch erfolgt der Umbruch mitten im "Wort".
Kannst Du dir das nochmals anschauen?

Viele Grüße Gisbert
Ist erledigt, das war im CSS falsch gesetzt.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 02 August 2019, 11:58:55
Ist erledigt, das war im CSS falsch gesetzt.
Spitzenmäßig !!
Es sieht jetzt soviel besser aus; alle Anfragen sind erledigt.
Vielen Dank
Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: rudolfkoenig am 02 August 2019, 11:59:22
Zitat
Das habe ich auch mal hinzugefügt, keine Ahnung was das genau bei dem SVG ändert, da ich kein Z-Wave Dongle habe.
Einige Parameter (wie dashed) werden nur bei MQTT2_DEVICE mit zigbee2mqtt verwendet: dafuer kann man auch ein Netzwerk-Map darstellen, und ich habe dafuer zwave_neighborlist wiederverwendet.

Das Map kann man auch ohne Hardware testen, z.Bsp. mit den angehaengten Dateien.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 August 2019, 13:46:48
Das Map kann man auch ohne Hardware testen, z.Bsp. mit den angehaengten Dateien.
Vielen Dank, das hat ungemein geholfen!

Das "Show neighbor map" im Z-Wave-Dongle funktioniert leider nicht.
Sieht jetzt alles korrekt aus, auch die Farben werden entsprechend der eigenen Auswahl angepasst
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: PSI69 am 02 August 2019, 14:24:44
So, nachdem ich nun eine Weile mitgelesen habe, mußte ich den neuen Style einfach einmal versuchen...
Was soll ich sagen? Super Arbeit - gefällt mir sehr!!! Vor allem, das 2-Spaltige Layout finde ich gut - da fällt oft das Scrollen weg.

Das einzige, was mir bisher aufgefallen ist, ist ein Unterschied in der Darstellung (ich komme vom 'dark' Style) der Icons und WebCmds. Im alten Stype sind die Rechtsbündig und untereinander angeordnet. Siehe Screenshots.

Peter

[Edit]
Generell schiene ich etwas längere Alias Benennungen zu verwenden, die dann das Layout 'zerhauen'?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 August 2019, 14:38:00
So, nachdem ich nun eine Weile mitgelesen habe, mußte ich den neuen Style einfach einmal versuchen...
Was soll ich sagen? Super Arbeit - gefällt mir sehr!!! Vor allem, das 2-Spaltige Layout finde ich gut - da fällt oft das Scrollen weg.
Freut mich, dass dir der Style gefällt. Ich arbeite gerade noch an dem Mehrspalten-Layout. In einem künftigen Update wird man zwischen Einspalten, 2-Spalten automisch (was das aktuelle 2-Spalten Layout ist), und "custom" wählen können. Letzteres erlaubt dann im Prinzip unendlich viele Spalten, wobei die sinnvolle Grenze wahrscheinlich 3 ist, und dass man die Aufteilung dann selbst per Drag'n'Drop wählen kann. Bei der automatischen Aufteilung wird ja so ausgeglichen wie möglich aufgeteilt.

Das einzige, was mir bisher aufgefallen ist, ist ein Unterschied in der Darstellung (ich komme vom 'dark' Style) der Icons und WebCmds. Im alten Stype sind die Rechtsbündig und untereinander angeordnet. Siehe Screenshots.
Wow, du hast echt laaaaange Devicenamen  ;)
Zur Erklärung: die Gruppen sind keine Tabellen mehr, sondern Flex-Container, das bedeutet, dass eine Zeile komplett unabhängig von einer anderen ist, dadurch ist es dann aber möglich dass einzelne Webcmds in eine neue Zeile springen können, was für eine mobile Nutzung essentiell ist. Bei so langen Device-Namen und wenn einzelne Devices viele Webmcds haben (und andere in der selben Gruppe nicht), kann dann halt sowas passieren. Ich bin noch am überlegen wie ich das am besten löse, aktueller Plan: das Tabellen-Verhalten so lange beizubehalten bis in der Breite kein Platz mehr ist und dann auf das Flex-Verhalten (daher auch der Style Name) zu wechseln. Ich weiß nur noch nicht wie ich das am besten umsetze, aber ich werde schon eine Lösung finden :)

Ansonsten: wenn dir Probleme auffallen, du Verbesserungsvorschläge hast, oder dir ein sinnvolles neues Feature einfällt: gerne melden :)
Bis Oktober habe ich noch relativ viel Zeit, danach muss ich deutlich zurück schrauben.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 02 August 2019, 15:05:30
Zitat
Ansonsten: wenn dir Probleme auffallen, du Verbesserungsvorschläge hast, oder dir ein sinnvolles neues Feature einfällt: gerne melden :)
Bis Oktober habe ich noch relativ viel Zeit, danach muss ich deutlich zurück schrauben.
Puh - und ich dachte schon, das geht jetzt immer so weiter mit den updates - ich komme gar nicht mehr hinterher ;)

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 August 2019, 15:39:43
An alle:

In einem künftigen Update wird man zwischen Einspalten, 2-Spalten automisch (was das aktuelle 2-Spalten Layout ist), und "custom" wählen können. Letzteres erlaubt dann im Prinzip unendlich viele Spalten, wobei die sinnvolle Grenze wahrscheinlich 3 ist, und dass man die Aufteilung dann selbst per Drag'n'Drop wählen kann. Bei der automatischen Aufteilung wird ja so ausgeglichen wie möglich aufgeteilt.
Dies ist - wie erwähnt - das nächste Feature. Ich würde diesbezüglich gerne die Option "Sortierbare Gruppen" aus den Einstellungen entfernen und stattdessen einen Edit Button (oder ähnliches) in den Räumen anzeigen, da dies doch intuitiver ist.

Mein Problem: wo platziere ich den am besten? Hat jemand einen Vorschlag? Der Button soll ja auch nicht störend sein. Alternativ könnte man das Editieren z.B: auch durch langes gedrückt-halten eines Gruppen Headers aktivieren, aber ist das intuitiv?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 02 August 2019, 17:26:25
Mein Problem: wo platziere ich den am besten? Hat jemand einen Vorschlag? Der Button soll ja auch nicht störend sein. Alternativ könnte man das Editieren z.B: auch durch langes gedrückt-halten eines Gruppen Headers aktivieren, aber ist das intuitiv?

Super Feature, da freu ich mich drauf!! Mein Vorschlag zur Platzierung. Um nicht störend zu sein würde ich es irgendwo oben rechts platzieren, dort weilt das Auge m.E. nicht oft... und so Einstellungen sind dich generell eher oben rechts, meine ich..
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 August 2019, 17:33:05
Super Feature, da freu ich mich drauf!! Mein Vorschlag zur Platzierung. Um nicht störend zu sein würde ich es irgendwo oben rechts platzieren, dort weilt das Auge m.E. nicht oft... und so Einstellungen sind dich generell eher oben rechts, meine ich..
Da musst du gar nicht mehr lange warten, sondern nur noch ein Update machen, habe es gerade commited :)

Ich habe die Option "Sortierbare Gruppen" nun entfernt und jede Device Gruppe ist nun immer sortierbar, wobei der Edit Mode gestartet wird sobald man einen Header für 500ms hält. Der Edit Mode wird dann beim Neuladen der Seite wieder deaktiviert.

In den Einstellungen gibt es jetzt "Mehrspalten layout", dort kann man zwischen "single", "dual" (ehemaliges zwei-Spalten Layout) und "custom" wählen. Letzteres ist das was du haben möchtest :)

Edit: Ah, und ich habe die Anzahl der Spalten auf 3 limitiert. Es sei denn jemand möchte gerne mehr Spalten?!

Edit2: Noch eine kurze Beschreibung zum Verhalten: solange genug Platz ist, werden alles Spalten nebeneinander angezeigt, wenn nicht, werde die Spalten nach und nach umgebrochen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: mahowi am 02 August 2019, 17:38:34
Hallo xanker!

Erstmal vielen Dank für den tollen Style.

Irgendwas hast Du (vermutlich) heute geändert, daß dafür sorgt, daß Tabellen wie z.B. vom Callmonitor wieder "zusammendrückt". Damit meine ich, daß zum Teil Wörter nach jedem Buchstaben umgebrochen werden. Vorher wurde die Tabelle zwar nicht ganz angezeigt,  ließ sich aber horizontal scrollen.

Ich hab mal einen Screenshot angehängt.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 02 August 2019, 17:52:29
Erstmal vielen Dank für den tollen Style.
Danke, für dich würde ich doch alles tun ;D

Irgendwas hast Du (vermutlich) heute geändert, daß dafür sorgt, daß Tabellen wie z.B. vom Callmonitor wieder "zusammendrückt". Damit meine ich, daß zum Teil Wörter nach jedem Buchstaben umgebrochen werden. Vorher wurde die Tabelle zwar nicht ganz angezeigt,  ließ sich aber horizontal scrollen.
Danke für den Hinweis! habe es gerade gefixed.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 02 August 2019, 20:02:22
Hallo,

Mit dem aktuellen Update hab ich plötzlich wieder ein geschrumpftes SVG (Dual-Spaltenmodus, Chache geleert, keine Änderungen an der cfg)

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 02 August 2019, 20:31:39
Bevor ich es vergesse: Z-Wave-Map läuft super. Danke.
Danke auch an Rudi für die Unterstützung.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 04 August 2019, 11:36:59
Hey xanker, ich wollte gerade mal Multi column layout testen. Kuck dir mal das Resultat an, kann mir nicht vorstellen, dass das so gewollt ist  🙄
Ich hab auch noch das Phänomen, dass im edit Files Dialog mit Firefox die letzten zwei Zeilen außerhalb des Eingabefelds sind (trotz ganz nach unten scrollen)
Ansonsten kann ich mich nur wiederholen, super skin!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 August 2019, 12:35:10
Hallo,

Mit dem aktuellen Update hab ich plötzlich wieder ein geschrumpftes SVG (Dual-Spaltenmodus, Chache geleert, keine Änderungen an der cfg)

lg, Stefan
Haben sich bei dir evtl. wieder die Cookies verabschiedet und plotMaxWidth steht wieder auf "100" statt "100%"? Ich stelle das übrigens gerade um, da ich auch Probleme mit den Cookies habe, die Browser scheinen die Cookies wohl nicht auf Dauer zu speichern. Stattdessen werde ich das "fingerprintjs2" Framework verwenden um ein Device zu identifizieren und dann werden alle Einstellungen persistent im FHEMWEB Device gespeichert. Sollte ich heute noch fertig bekommen.

Edit: war schneller implementiert als erwartet...


Hey xanker, ich wollte gerade mal Multi column layout testen. Kuck dir mal das Resultat an, kann mir nicht vorstellen, dass das so gewollt ist  🙄
Ich hab auch noch das Phänomen, dass im edit Files Dialog mit Firefox die letzten zwei Zeilen außerhalb des Eingabefelds sind (trotz ganz nach unten scrollen)
Ansonsten kann ich mich nur wiederholen, super skin!
Huch, da ist die Qualitätskontrolle wohl mal wieder durchgefallen ;D Danke! ist gefixed, zumindest ersteres. Letzeres schaue ich mir noch an
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 August 2019, 13:34:46
Wie im vorigen Beitrag erwähnt, werden mit dem aktuellen Update die Einstellungen nicht mehr als Cookie gespeichert, da diese nicht so dauerhaft sind wie erwünscht.
Stattdessen werden die Einstellungen jetzt IMMER im aktuellen FHEMWEB Device gespeichert. Es besteht aber weiterhin die Möglichkeit Endgerät-spezifische Einstellungen vorzunehmen, wobei ein Endgerät nun durch einen Fingerprint identifiziert wird (https://github.com/Valve/fingerprintjs2).

HINWEIS:
Vor dem Update sollten lokale Einstellungen global gespeichert werden, bzw. zumindest das eigene Color-Preset, da nach dem Update die in Cookies gespeicherten Einstellungen nicht mehr geladen werden!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 04 August 2019, 14:36:55
Zitat
Haben sich bei dir evtl. wieder die Cookies verabschiedet und plotMaxWidth steht wieder auf "100" statt "100%"?
Nein, das war ja das erste, was ich versucht habe :) Cache löschen usw.....
Hab grade ein Update gemacht, die kleinen SVGs sind immernoch vorhanden.
Im Code sehe ich auch nichts auffälliges :(
Interessanterweise gibts sogar innerhalb einer group Größendifferenzen (Bild 3)
Es ist auch bei keinem Diagramm irgendein Plotsize-Attribut gesetzt oder so, hab ich grade extra nochmal nachgesehen.

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 August 2019, 14:41:19
Nein, das war ja das erste, was ich versucht habe :) Cache löschen usw.....
Hab grade ein Update gemacht, die kleinen SVGs sind immernoch vorhanden.
Im Code sehe ich auch nichts auffälliges :(
Interessanterweise gibts sogar innerhalb einer group Größendifferenzen (Bild 3)
Es ist auch bei keinem Diagramm irgendein Plotsize-Attribut gesetzt oder so, hab ich grade extra nochmal nachgesehen.

lg, Stefan
Das ist echt verflucht mit den Plots  :o
Am Code scheint alles zu stimmen. Bleibt das bei einem Reload persistent? also sind immer die gleichen Plots klein/groß?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 04 August 2019, 14:49:55
Zitat
Bleibt das bei einem Reload persistent? also sind immer die gleichen Plots klein/groß?
Ja, sind immer die selben. Betrifft hier am PC aber nur den Chrome, im FF passten die Plots. Am Rechner läuft Linux, was aber eigentlich nichts zur Sache tun sollte gg.
Ich teste nachher mal noch am Android-Handy und am Tablet und geb noch bescheid.

lg, Stefan

PS: Auf Android passt alles. Scheint so, als ob das irgendwas lokales ist, ich hab aber keinen blassen Schimmer, wo ich grad noch suchen könnte. :(
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 August 2019, 15:50:38
Ich hab auch noch das Phänomen, dass im edit Files Dialog mit Firefox die letzten zwei Zeilen außerhalb des Eingabefelds sind (trotz ganz nach unten scrollen)
Sollte nun erledigt sein
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 August 2019, 18:41:40
Gibt ein neues Feature:
Gruppen können nun ganz einfach ausgeblendet werden. Dazu den Edit-Mode starten (durch langes Drücken des Headers) und dann einfach auf das "X" klicken. In den Einstellungen gibt es dann die Möglichkeit ausgeblendete Gruppen wieder einzublenden.

Dies ersetzt das manuelle Setzen des "hiddengroup" Attributs vom FHEMWEB device
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 August 2019, 19:14:22
Wie im vorigen Beitrag erwähnt, werden mit dem aktuellen Update die Einstellungen nicht mehr als Cookie gespeichert, da diese nicht so dauerhaft sind wie erwünscht.
Stattdessen werden die Einstellungen jetzt IMMER im aktuellen FHEMWEB Device gespeichert. Es besteht aber weiterhin die Möglichkeit Endgerät-spezifische Einstellungen vorzunehmen, wobei ein Endgerät nun durch einen Fingerprint identifiziert wird (https://github.com/Valve/fingerprintjs2).

HINWEIS:
Vor dem Update sollten lokale Einstellungen global gespeichert werden, bzw. zumindest das eigene Color-Preset, da nach dem Update die in Cookies gespeicherten Einstellungen nicht mehr geladen werden!
Ich weiß nicht wie zuverlässig die Fingerprints sind, aber nach meinen ersten Tests sieht es gut aus. Achtet mal drauf ob sich bei einem Endgerät die lokal gespeicherten Einstellungen ändern/zurücksetzen. Falls ja, bitte Feedback geben :)

Hinweis: Bei verschiedenen Endgeräten sollte es immer einen anderen Fingerprint geben, sodass Endgerät-spezifische Einstellungen möglich sind. Bei Verwendung von verschiedenen Browsern auf einem Endgerät sollte es auch verschiedene Fingerprints geben. Aber auf dem selben Endgerät und dem selben Browser sollte der Fingerprint und damit die Einstellungen immer persistent sein.

Edit: Der Fingerprint wird nun in den Einstellungen angezeigt.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 04 August 2019, 19:45:25
Zitat
PS: Auf Android passt alles. Scheint so, als ob das irgendwas lokales ist, ich hab aber keinen blassen Schimmer, wo ich grad noch suchen könnte.
Muss mich selbst korrigieren, auch am Handy sind die Plots teilweise zu klein. :(
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 August 2019, 19:59:45
Muss mich selbst korrigieren, auch am Handy sind die Plots teilweise zu klein. :(
Die gleichen wie am Desktop auch, oder andere?
Browser war jeweils Chrome?
Macht es einen Unterschied wenn du das Multicolumn Layout änderst?
Die Plots scheinen ja die korrekten Werte zu haben. Kannst du mal schauen ob die Größe durch ein umliegendes Element (wie eine Tabellenzelle) eingeschränkt wird?
Irgendwie wird sich das schon lösen lassen, ich kann das Problem nur nicht nachstellen, daher muss ich dich halt immer wieder mit Fragen bombardieren  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 04 August 2019, 20:00:39
Gibt ein neues Feature:
Gruppen können nun ganz einfach ausgeblendet werden. Dazu den Edit-Mode starten (durch langes Drücken des Headers) und dann einfach auf das "X" klicken. In den Einstellungen gibt es dann die Möglichkeit ausgeblendete Gruppen wieder einzublenden.

Dies ersetzt das manuelle Setzen des "hiddengroup" Attributs vom FHEMWEB device

Wie funktioniert das denn wenn man "nur" eine Maus und nen Bildschirm zur Verfügung hat?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 04 August 2019, 20:05:00
Sollte nun erledigt sein

Leider nein. Es gibt wohl nen Zusammenhang, mit der eingeblendetet horizontalen Scrolleiste (die übrigens nur beim editieren von manchen Dateien angezeigt wird).
In Zeile 275 steht noch was.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 August 2019, 20:06:50
Wie funktioniert das denn wenn man "nur" eine Maus und nen Bildschirm zur Verfügung hat?
Öhm, einfach mit der Maus lange auf den Gruppen-Header drücken. Wenn du mit der Maus über einen Header fährst, sollte der Zeiger zu einem Finger werden und nach dem Langdrücken zu einer Hand.
Das geht aber nur in Räumen und nur mit Gerätegruppen bzw. Gruppierten Geräten
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 August 2019, 20:08:44
Leider nein. Es gibt wohl nen Zusammenhang, mit der eingeblendetet horizontalen Scrolleiste (die übrigens nur beim editieren von manchen Dateien angezeigt wird).
In Zeile 275 steht noch was.
Ahh, du meintest den Codemirror. Ja das ist noch bei allen der Fall, danach muss ich noch schauen, ist auf der TODO Liste
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 04 August 2019, 20:09:23
Die relative Größe ist immer gleich, egal ob single/dual/tripple.

Hier mal das HTML der umgebenden Gruppe:
[Text zu lang, daher im extra file]

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 August 2019, 21:06:11
Die relative Größe ist immer gleich, egal ob single/dual/tripple.

Hier mal das HTML der umgebenden Gruppe:
[Text zu lang, daher im extra file]

lg, Stefan
Danke, Problem ist gelöst.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 05 August 2019, 04:24:04
Super, vielen Dank :)

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: sash.sc am 05 August 2019, 15:09:25
Danke für die tolle Arbeit. ich würde gerne noch die Schrift anpassen. Wo muss den was eingetragen werden, damit man die Schriftart ändern kann ?

Gruß
Sascha
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 05 August 2019, 16:19:24
Danke für die tolle Arbeit. ich würde gerne noch die Schrift anpassen. Wo muss den was eingetragen werden, damit man die Schriftart ändern kann ?
Danke und gerne doch :)
Ich habe gerade eine Option hinzugefügt, damit man die Schriftart ändern kann. Es gibt auch die Möglichkeit eine der 940 Google Schriftarten zu wählen, da sollte für jeden was dabei sein ;)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: raiderxxl am 05 August 2019, 16:21:05
Hallo,

ich finde deinen Style supi! Geile Ideen und super Umsetzung!

Nur mal so ne frage ich nutze 2 Dashboards die jetzt natürlich furchtbar aussehen...
Gibts für die auch mal ne Unterstützung oder muss das der Maintainer vom Dashboard Modul machen?

(Ich glaub ich bin echt der einzige de Dashboards nutzt)  ;D

Grüßle

Pascal
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 05 August 2019, 16:35:39
ich finde deinen Style supi! Geile Ideen und super Umsetzung!
Freut mich, dass dir der Style gefällt!

Nur mal so ne frage ich nutze 2 Dashboards die jetzt natürlich furchtbar aussehen...
Gibts für die auch mal ne Unterstützung oder muss das der Maintainer vom Dashboard Modul machen?

(Ich glaub ich bin echt der einzige de Dashboards nutzt)  ;D
Für die Dashboards gibt es aktuell keine Unterstützung, vor allem da du bisher wirklich der einzige bist der danach fragt ;)

Ich werde mir das mal anschauen ob ich das sinnvoll integrieren kann (das ist nicht vom Modul Maintainer abhängig). Ich gehe aber davon aus, dass das nur schwer zu integrieren ist, da das Dashboard grundsätzlich nicht für die mobile Nutzung gedacht/geeignet ist, mein Style aber schon.

Aber mal anders gefragt: welche Funktion am Dashboard ist dir denn wichtig? Die Tabs? Denn eine Einteilung in mehrere Spalten ist auch bei meinem Style ganz einfach per Drag'n'Drop möglich, dazu einfach das "Mehrspalten Layout" auf "custom" stellen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: raiderxxl am 05 August 2019, 16:57:48
 :-*

Ich poste morgen mal 2 Screenshots dann siehst du was ich was ich mit den Dashboards mache.

Pascal

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: sash.sc am 05 August 2019, 18:30:26
Habe das mal mit dem Schriftarten ausprobiert.

Klappt!

Danke.

Besteht die Möglichkeit auch noch irgendwie Bilder als Hintergrund anzulegen bzw einzufügen?

Gruß Sascha

Gesendet von meinem MI 9 mit Tapatalk

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 05 August 2019, 21:45:33
Bilder als Hintergrund? Wer macht denn so etwas? Abgesehen von klein0r.  :D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 05 August 2019, 21:58:32
Hallo xanker,

ich hätte noch zwei Bitten.

Um auf dem Handy die Diagramm-Unterschriften kleiner zu bekommen, hattest du mir dieses Attribut genannt:
attr Css .SVGlabel:not([data-name=svgZoomControl]) a { font-weight: normal;; font-size: 0.8em;; }Zusammen mit einer passenden plozsize (430,165) ist dann die Diagramm-Unterschrift in etwa genau so groß wie die Überschrift/Titel.
Das passt also schon mal gut.
Könnte man die die Diagramm-Überschrift/Titel auch in normalem font-weight bekommen statt bold?

Die 2. Bitte bezieht sich auf die Darstellung der Diagramme auf einem großen Bildschirm.
Hier ist die Unterschrift sehr winzig. Hier wäre es wünschenswert, wenn die Unterschrift genauso groß ist wie der sonstige Text, z.B. in den Tabellen.

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 05 August 2019, 22:11:13
Besteht die Möglichkeit auch noch irgendwie Bilder als Hintergrund anzulegen bzw einzufügen?

Meine persönliche Meinung dazu:
Keep it simple. Bitte nicht unnötig mit spezial Features aufpumpen. Das ist immer noch ein Style und kein Frontend Ersatz. Das ist ein wirklich toller Style und sollte auch so bleiben.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 05 August 2019, 22:13:32
Besteht die Möglichkeit auch noch irgendwie Bilder als Hintergrund anzulegen bzw einzufügen?
Ich sehe das wie FunkyOdyssey und bin kein Freund von Hintegrund-Bildern. Aus diesem Grund und weil man das Hintergrundbild ja auf verschiedene Arten (stretchen, croppen, etc.) einbinden kann, werde ich das wohl nicht als Option hinzufügen. Aber du kannst das per zusätzlichem CSS in den Einstellungen setzen:
body {background-image: url("https://cwsmgmt.corsair.com/newscripts/landing-pages/wallpaper/v4/Wallpaper-v4-2560x1440.jpg");}Die URL zum Bild einfach durch irgendwas ersetzen. Neben "background-image" gibt es noch weitere CSS Befehle um zu definieren wie das Bild eingebunden werden soll: background-attachment, background-clip, background-origin, background-position, background-repeat, und background-size. Einfach mal googlen.


Könnte man die die Diagramm-Überschrift/Titel auch in normalem font-weight bekommen statt bold?
Klar, das geht, einfach folgends beim CSS hinzufügen:
.SVGplot text.title { font-weight: normal }Das geht aber nur mit "plotEmbed 0"!

Die 2. Bitte bezieht sich auf die Darstellung der Diagramme auf einem großen Bildschirm.
Hier ist die Unterschrift sehr winzig. Hier wäre es wünschenswert, wenn die Unterschrift genauso groß ist wie der sonstige Text, z.B. in den Tabellen.
Das ist etwas komplizierter. Es ist zwar grundlegend möglich über CSS Media-Queries für verschiedene Display-Breiten verschiedene CSS Werte (in dem Fall Schriftgrößen) zu definieren, aber das wird zwangsläufig den Plot verzerren. Zwei Lösungvorschläge:
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 05 August 2019, 22:15:36
Meine persönliche Meinung dazu:
Keep it simple. Bitte nicht unnötig mit spezial Features aufpumpen. Das ist immer noch ein Style und kein Frontend Ersatz. Das ist ein wirklich toller Style und sollte auch so bleiben.
:-*
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 05 August 2019, 22:28:41
Ein letztes Feature würde mir allerdings noch gefallen :-D
Ist es möglich die Eingabezeile / Menübutton am oberen Bildschirmrand zu fixieren, so dass beim scrollen diese Menüleiste stehen bleibt?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 05 August 2019, 22:34:24
Ein letztes Feature würde mir allerdings noch gefallen :-D
Ist es möglich die Eingabezeile / Menübutton am oberen Bildschirmrand zu fixieren, so dass beim scrollen diese Menüleiste stehen bleibt?
Also wenn ich dich richtig verstehe, dann sollte das doch eh schon so sein  :o
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 05 August 2019, 22:43:23
Dann ist es noch buggy...
Die Leiste taucht auf, sobald man wieder nach oben scrollt oder den Zoom Faktor verändert.
Aber wenn ich das Logfile abscrolle ist die Leiste erstmal weg. (Android, Chrome)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 05 August 2019, 22:48:53
Dann ist es noch buggy...
Die Leiste taucht auf, sobald man wieder nach oben scrollt oder den Zoom Faktor verändert.
Aber wenn ich das Logfile abscrolle ist die Leiste erstmal weg. (Android, Chrome)
Huch, danke, das hat noch mit der Umstellungen auf den scrollbaren body zutun. Das ist mir nicht aufgefallen, da ich "Log-Zeilen umbrechen" aktiviert habe. Werde ich morgen fixen. Ist das auch noch woanders der Fall? Denn bei den Räumen sollte das definitiv nicht sein.

Edit: Habe es jetzt noch schnell gemacht und commited
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: raiderxxl am 06 August 2019, 08:46:55
Guten Morgen...
Anbei ein paar Screenys :-)

Zum Verständnis:
Ich habe ein Rasby (Bild4)auf dem Screenly läuft.. und dort wird dann alle x Minuten der Systemstatus (Bild 1&4) angezeigt. In dem Fall das Dashboard.
Ich habe an diesem PC keine Maus oder Tastatur also muss ich über eine Url das ganze aufrufen und es muss auf passen den ich kann nichts anklicken um das Menü zu verstecken oder irgend was zu Sortieren :-)

Das zweite Dashboard habe ich als Control-Seite (Bild3) eingerichtet.. Mit allen Devices die ich gerne und oft schalte...

Nur so als info was ich mit den Dashboards mache...

Die Spaltenansicht finde ich auch super! Auch die Möglichkeit mehrere Spalten zu nutzen!.. Nur stört mich dann diese Ansicht im Device... kann ich das dort global für alle ändern das ich da dann wieder alles untereinander habe?

Grüßle

Pascal

PS.: Ich glaub ich werde gleich mal den Wichtigen Link nutzen den du in den Einstellungen hast...



Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: raiderxxl am 06 August 2019, 09:36:39
Guggug Ich nochmal...

;-)

Ich habe das Problem wenn ich den CMD Alias dellog ausführe mir der Browser Crashed (Chrome, Mac)
Bekomme keine Verbindung mit dem Browser mehr hin.
Gleicher Rechner Safari lässt sich fhem noch bedienen.
Erst wenn ich am Safari dann delete global mache komme ich mit Chrome wieder drauf...

UPDATE* Es geht auch an den iPad nix mehr Chrome und Safari... geh ich auf das andere Web device (8084 f18) flippte die Seite wieder zurück auf 8083 flex Rädchen nix ...

UPDATE2* Stelle ich das Mehspaltige Layout von Cutom auf single/dual gehts alles wieder... Ich denke es liegt daran...


Grüßle

Pascal

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 06 August 2019, 10:26:12
Moin Sebastian,
ich habe noch was kosmetisches:
In der Sonos-Steuerung sind noch ein paar Artefakte zu sehen (siehe Screen, gelb markiert).
Sonst alles TOP!

VG Sebastian

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 06 August 2019, 12:57:46
Nur mal so ne frage ich nutze 2 Dashboards die jetzt natürlich furchtbar aussehen...
Gibts für die auch mal ne Unterstützung oder muss das der Maintainer vom Dashboard Modul machen?
Ich habe nun mal das Dashboard angepasst und getestet. Es kann aber sein, dass hier da noch was nicht stimmt, aber das wirst du mir dann schon berichten  ;D

Die Spaltenansicht finde ich auch super! Auch die Möglichkeit mehrere Spalten zu nutzen!.. Nur stört mich dann diese Ansicht im Device... kann ich das dort global für alle ändern das ich da dann wieder alles untereinander habe?
Ich weiß nicht ob ich dich richtige verstehe. Du willst zwar mehrere Spalten für die Raumansicht, nicht aber für die Geräte-Übersicht? Könnte ich als Option hinzufügen, verstehe ich aber nicht ganz warum man das nicht will ;D

PS.: Ich glaub ich werde gleich mal den Wichtigen Link nutzen den du in den Einstellungen hast...
Vielen Dank  :-*

Ich habe das Problem wenn ich den CMD Alias dellog ausführe mir der Browser Crashed (Chrome, Mac)
Bekomme keine Verbindung mit dem Browser mehr hin.
Gleicher Rechner Safari lässt sich fhem noch bedienen.
Erst wenn ich am Safari dann delete global mache komme ich mit Chrome wieder drauf...

UPDATE* Es geht auch an den iPad nix mehr Chrome und Safari... geh ich auf das andere Web device (8084 f18) flippte die Seite wieder zurück auf 8083 flex Rädchen nix ...
UPDATE2* Stelle ich das Mehspaltige Layout von Cutom auf single/dual gehts alles wieder... Ich denke es liegt daran...
Öhm, das ist sehr merkwürdig und ich kann mir auch nicht vorstellen wie das mit meinem Style zusammen hängen soll  :o
Ich verwende auch dellog:
defmod c_dellog cmdalias dellog AS {qx(truncate $currlogfile --size 0);;Log 1, "Logfile gelöscht";;}und das funktioniert einwandfrei, egal welches Mehrspaltige Layout ich auswähle. Es passiert ja auch nichts anders als dass ein Perl Command ausgeführt wird, das wird von dem Style in keinster Weise beeinflusst. Wenn du andere Commands ausführst, klappt alles?


In der Sonos-Steuerung sind noch ein paar Artefakte zu sehen (siehe Screen, gelb markiert).
Sonst alles TOP!

VG Sebastian
Da ich Sonos nicht verwende, müsstest du mir mal den HTML-Code von der kompletten umliegenden Tabelle (mit der Klasse "group") schicken, dann schaue ich danach.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: raiderxxl am 06 August 2019, 13:22:51
Hallo,

Ja in der Deviceansicht hätte ich gern alles untereinander ;-) In den Räumen mehrspaltig...
Mach da aber erstmal nix es geht ja nur mir so, und vielleicht gewöhn ich mich ja dran  hehehe



Dashboards sehen gleich viiiiiel besser aus, wenn auch nur auf einer (halben) Seite.. siehe Screenshoot.

Das mit den Browser hängen habe ich sobald ich auf Custom (Save Global) stelle auf allen zusätzlichen PC's mit denen ich auf FHEM zugreife auch ohne ausführen von dellog...
Kann es sein das da irgend was mit dem cookie nicht stimmt oder der Einstellung  Save global? Auf single oder dual gehts...

Grüßle

Pascal





Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 06 August 2019, 14:10:12
Deviceansicht hätte ich gern alles untereinander ;-) In den Räumen mehrspaltig...
Mach da aber erstmal nix es geht ja nur mir so, und vielleicht gewöhn ich mich ja dran  hehehe
ok, wenn es dich zusehr stört, kannst du auch einfach folgendes bei "Zusätzlicher CSS Code" hinzufügen:
#content > :not(.roomoverview) .deviceWrapHelper.customCol { -moz-column-count: 1; column-count: 1; }

Dashboards sehen gleich viiiiiel besser aus, wenn auch nur auf einer (halben) Seite.. siehe Screenshoot.
Habe nochmal was commited, ist es jetzt besser? Der Tabellen Header muss übrigens die volle Breite haben, nicht wie beim restlichen Style, da sonst das Resizen verbuggt ist.

Das mit den Browser hängen habe ich sobald ich auf Custom (Save Global) stelle auf allen zusätzlichen PC's mit denen ich auf FHEM zugreife auch ohne ausführen von dellog...
Kann es sein das da irgend was mit dem cookie nicht stimmt oder der Einstellung  Save global? Auf single oder dual gehts...
Das ist echt sehr sehr merkwürdig, wie gesagt, eigentlich besteht da absolut kein Zusammenhang. Kannst du mir mal ein List von deinem FHEMWEB Device schicken, evtl. ist da irgendwas...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: raiderxxl am 06 August 2019, 14:23:09
Hi,

Dashboard:

Immer noch nur ne Halbe Seite sichtbar... Scrollen kann man aber

"Der Tabellen Header muss übrigens die volle Breite haben, nicht wie beim restlichen Style, da sonst das Resizen verbuggt ist."
Was heisst das? ;-)


Browserfreeze:

Folgendes Vorgehen:
PC1 Einstellungen auf Custom setzten und Save Global drücken FHEM.CFG Speichern..
PC2 Öffnet FHEM Web nicht mehr...
PC1 Einstellungen auf Single/Dual setzten und Save Global drücken FHEM.CFG Speichern..
PC2 Öffnet FHEM Web ...



defmod WEB FHEMWEB 8083 global
attr WEB Css body, input, select, textarea {\
    background-size: auto auto;;\
}
attr WEB DbLogExclude .*
attr WEB column Spielwiese:Radio-Büro,Lautsprecher,WLED,RFID-Test,MQTT_DEVICE,Vibrations\sSensor,XiaomiMQTTDevice,.* Büro:Licht,Control,Echo,WebCam,Automator,Sensoren_Überwachung,Bridges,harmony,Überwachung,.* Schlafzimmer:Licht,Radio\sSchlazi,Lautsprecher,Echo,FBDECT,Sleep-Musik,Lichtsteurung,Wecker-Pascal,Nachttischlampe\sPapa,readingsProxy,.* FHEM->Systemstatus:Batteriestatus,Gäste\sWLAN,Sensoren_Überwachung,readingsProxy|Garagensteuerung,Linkqualität|Luftfeuchtigkeit,Temperatur,.*
attr WEB confirmDelete 0
attr WEB csrfToken none
attr WEB defaultRoom DashboardRoom
attr WEB editConfig 1
attr WEB hiddenroom DashboardRoom,Favourites,Homekit,Ha-Bridge
attr WEB iconPath fhemSVG:openautomation:default
attr WEB longpoll websocket
attr WEB longpollSVG 1
attr WEB menuEntries _ClearLog,cmd=dellog,List_RG,cmd=list TYPE=readingsGroup,List_Alexa,cmd=list alexaName=..*
attr WEB plotEmbed 1
attr WEB room System
attr WEB roomIcons Kugele.Home:control_building_control Systemstatus:status_frost Spielwiese:wuerfel Unsorted:unknown _Neue_Geräte_:unknown Lichter:light_light_dim_100 Wohnzimmer:scene_livingroom OmiZimmer:scene_sleeping Küche:hue_room_kitchen Kinderzimmer:scene_childs_room Büro:scene_office Schlafzimmer:scene_making_love Esszimmer:scene_dinner Kellergang:control_building_kg Automator:logic System:system_fhem Logs:edit_paste Balkon:control_building_outside Flur_EG:control_building_eg Garage:hue_room_carport Homematic:hm_ccu Pushover:secur_alarm Sensoren:temp_outside Services:RPi Terrasse:control_building_outside Umwelt:scene_garden Weihnachten:scene_x-mas Everything:it_i-net Save.config:edit_save Logfile:edit_paste Commandref:system_fhem Remote.doc:message_mail Edit.files:edit_copy Select.style:edit_open Event.monitor:edit_settings
attr WEB sortRooms Unsorted _Neue_Geräte_ Spielwiese System Garage Systemstatus Lichter Büro Schlafzimmer Kinderzimmer Küche Esszimmer Wohnzimmer OmiZimmer Terrasse Umwelt Sensoren Everything Kugele->Eingang Kugele->Haus Kugele->Bridges Kugele->Balkon Kugele->UG->Flur Kugele->UG->Vorratsraum Kugele->EG->Flur Kugele->EG->Klo Kugele->OG->Flur Kugele->OG->Bad Kugele->Homematic Kugele->Garage Kugele->Weihnachten Kugele->Halloween Kugele->Unbekannt
attr WEB styleData {\
 "flex": {\
  "colorPreset": {\
   "mystyle": {\
    "HeaderBG": "#5e5e5e",\
    "HeaderIcon": "#fc660f",\
    "HeaderText": "#fc660f",\
    "HeaderBorder": "#5e5e5e",\
    "MenuBG": "#000",\
    "MenuBorder": "#5e5e5e",\
    "MenuIcon": "#fc660f",\
    "MenuIconBG": "#5e5e5e",\
    "MenuRoomIcon": "#fc660f",\
    "MenuText": "#fc660f",\
    "MenuHoverLink": "#5e5e5e",\
    "MainBG": "#000",\
    "TableHeaderBG": "#5e5e5e",\
    "TableHeaderText": "#fc660f",\
    "TableBorder": "#5e5e5e",\
    "TableOdd": "#000",\
    "TableEven": "#151515",\
    "TableText": "#fc660f",\
    "TableLink": "#fc660f",\
    "TableLinkFirstCol": "#fc660f",\
    "TableHoverRow": "#262626",\
    "TableHoverLink": "#5e5e5e",\
    "TableNewEvent": "#F00",\
    "TableIcon": "#5e5e5e",\
    "TableShadow": "#fc660f",\
    "SetGetAttrBG": "#333333",\
    "SubmitButtonBG": "#5e5e5e",\
    "SubmitButtonBorder": "#5e5e5e",\
    "SubmitButtonText": "#fc660f",\
    "WidgetBorder": "#5e5e5e",\
    "WidgetText": "#fc660f",\
    "WidgetHighlight": "#5e5e5e",\
    "LogDate": "#fc660f",\
    "LogTime": "#fc660f",\
    "LogVerbose0": "#fc660f",\
    "LogVerbose1": "#F00",\
    "LogVerbose2": "#FFA500",\
    "LogVerbose3": "#0F0",\
    "LogVerbose4": "#1E90FF",\
    "LogVerbose5": "#00F",\
    "plotBG": "#000",\
    "plotBorder": "#5e5e5e",\
    "plotText": "#fc660f",\
    "plotGrid": "#555",\
    "plotMarker": "#F00",\
    "plotLine0": "#F00",\
    "plotLine1": "#0F0",\
    "plotLine2": "#00F",\
    "plotLine3": "#F0F",\
    "plotLine4": "#A52A2A",\
    "plotLine5": "#000",\
    "plotLine6": "#808000",\
    "plotLine7": "#808080",\
    "plotLine8": "#FF0",\
    "plotLinePasted": "#000"\
   }\
  },\
  "menuOrder": {},\
  "devices": {},\
  "color": {\
   "HeaderBG": "#5e5e5e",\
   "HeaderIcon": "#fc660f",\
   "HeaderText": "#fc660f",\
   "HeaderBorder": "#5e5e5e",\
   "MenuBG": "#000",\
   "MenuBorder": "#5e5e5e",\
   "MenuIcon": "#fc660f",\
   "MenuIconBG": "#5e5e5e",\
   "MenuRoomIcon": "#fc660f",\
   "MenuText": "#fc660f",\
   "MenuHoverLink": "#5e5e5e",\
   "MainBG": "#000",\
   "TableHeaderBG": "#5e5e5e",\
   "TableHeaderText": "#fc660f",\
   "TableBorder": "#5e5e5e",\
   "TableOdd": "#000",\
   "TableEven": "#151515",\
   "TableText": "#fc660f",\
   "TableLink": "#fc660f",\
   "TableLinkFirstCol": "#fc660f",\
   "TableHoverRow": "#262626",\
   "TableHoverLink": "#5e5e5e",\
   "TableNewEvent": "#F00",\
   "TableIcon": "#5e5e5e",\
   "TableShadow": "#fc660f",\
   "SetGetAttrBG": "#333333",\
   "SubmitButtonBG": "#5e5e5e",\
   "SubmitButtonBorder": "#5e5e5e",\
   "SubmitButtonText": "#fc660f",\
   "WidgetBorder": "#5e5e5e",\
   "WidgetText": "#fc660f",\
   "WidgetHighlight": "#5e5e5e",\
   "LogDate": "#fc660f",\
   "LogTime": "#fc660f",\
   "LogVerbose0": "#fc660f",\
   "LogVerbose1": "#F00",\
   "LogVerbose2": "#FFA500",\
   "LogVerbose3": "#0F0",\
   "LogVerbose4": "#1E90FF",\
   "LogVerbose5": "#00F",\
   "plotBG": "#000",\
   "plotBorder": "#5e5e5e",\
   "plotText": "#fc660f",\
   "plotGrid": "#555",\
   "plotMarker": "#F00",\
   "plotLine0": "#F00",\
   "plotLine1": "#0F0",\
   "plotLine2": "#00F",\
   "plotLine3": "#F0F",\
   "plotLine4": "#A52A2A",\
   "plotLine5": "#000",\
   "plotLine6": "#808000",\
   "plotLine7": "#808080",\
   "plotLine8": "#FF0",\
   "plotLinePasted": "#000"\
  },\
  "title": "KUGI-V-FHEM",\
  "myUtilsFileName": "",\
  "plotMinWidth": "250px",\
  "plotMaxWidth": "100%",\
  "fontFamily": "Arial",\
  "showClock": true,\
  "showLogoButton": true,\
  "showRebootButton": true,\
  "showUpdateButton": true,\
  "showUpdateCheckButton": true,\
  "showRereadIconsButton": false,\
  "showRawInputButton": true,\
  "showSaveButton": true,\
  "showRoomDeviceName": true,\
  "showMenuAlways": true,\
  "showFirstColBold": true,\
  "enableCommandHistory": true,\
  "enableDeviceSearch": true,\
  "hideWebcmdOnSmallScreen": false,\
  "colorOptionsDetailed": false,\
  "multiColumnLayout": "dual",\
  "enableAnimations": true,\
  "improvePerformance": false,\
  "enableLogLineWrap": true,\
  "enableRoundedEdges": true,\
  "enableTableShadow": false,\
  "showRoomIconsRight": false,\
  "enableCodeMirror": true,\
  "enableDayTimeStyle": false,\
  "enableExperimental": false,\
  "dayStyle": "bright",\
  "nightStyle": "dark",\
  "newSettings": {},\
  "scalePage": "1"\
 },\
 "f18": {\
  "Pinned.menu": "true",\
  "hidePin": "true",\
  "cols.bg": "444444",\
  "cols.fg": "CCCCCC",\
  "cols.link": "FF9900",\
  "cols.evenrow": "333333",\
  "cols.oddrow": "111111",\
  "cols.header": "222222",\
  "cols.menu": "111111",\
  "cols.sel": "333333",\
  "cols.inpBack": "444444",\
  "savePinChanges": true\
 }\
}
attr WEB stylesheetPrefix flex
attr WEB widgetOverride sortRooms:textField-long  roomIcons:textField-long  column:textField-long  menuEntries:textField-long  codemirrorParam:textField-long  widgetOverride:textField-long  JavaScripts:textField-long

setstate WEB 2019-08-06 14:13:59 state Initialized

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 06 August 2019, 14:41:32
Da ich Sonos nicht verwende, müsstest du mir mal den HTML-Code von der kompletten umliegenden Tabelle (mit der Klasse "group") schicken, dann schaue ich danach.

Ich hoffe das ist das richtige:
<div class="groupContent"><div class="scrollable"><table class="block wide" id="TYPE_1. SONOS">

<tbody><tr class="odd"><td><div class="col1"><a href="/fhem?detail=play1_wz"><svg class="icon sonos_play1" data-txt="sonos_play1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="566.929px" height="566.93px" viewBox="0 0 566.929 566.93" enable-background="new 0 0 566.929 566.93" xml:space="preserve">  <g id="Ebene_1">  <path fill-rule="evenodd" clip-rule="evenodd" d="M493.714,438.5c0,0.802-0.486,4.065-1.714,6.917  c-0.942,2.188-2.514,3.954-3.478,5.268c-0.751,1.026-1.592,16.444-2.524,17.646C464.288,496.267,344.237,543,291,543  s-174.358-46.564-195.48-75.011c-0.954-1.284-1.814-13.483-2.583-14.584c-2.536-3.641-4.063-6.222-4.649-7.364  c-0.133-0.26-1.514-3.419-1.787-4.791S86,435,86,435V104.333v-2.646c0-0.855,0-1.633,0-2.332c0-0.918,0.311-1.407,0.908-2.2  c13.532-17.979,174.403-65.292,206.967-65.292c34,0,199.845,47.085,199.839,62.136c0,0.997,0,16.667,0,16.667V427.25  C493.714,427.25,493.714,437.083,493.714,438.5z M474.334,190.396c0.5,0.625,0.416,1.146,0.416,1.146l-0.008,242.7  c0,0,0.037,1.944-0.242,3.758c-0.229,1.493-0.729,2.838-1.151,3.44C463.146,456.013,342.146,515,291.24,515  c-50.907,0-173.983-56.307-184.24-73c-1.826-2.973-1.488-6.369-1.627-8.011l0.001-0.988L105.292,192.5c0,0-0.071-1.594,0.802-2.438  c0.625-0.604,2.228-0.104,2.393-0.04C135.729,200.54,255.71,243.375,292,243.375c50.474,0,142.435-38.142,180.574-53.021  c0.229-0.09,0.636-0.249,0.636-0.249S473.834,189.771,474.334,190.396z M292,223.421c-41.663,0-184.333-49.921-186.465-54.672  c-0.861-1.918,0.03-46.373,0.03-46.373S106.05,121.199,107,122c12.051,10.158,150.283,57.757,183.158,57.757  s164.541-45.834,181.348-59.82c0.91-0.758,2.057-0.586,2.557-0.187c0.582,0.468,0.438,1.25,0.438,1.25s1.502,44.843,0.243,47.167  C470.5,176,333.662,223.421,292,223.421z M111,101c0,14,150.742,58.757,178.283,58.757c21.05,0,45.731-8.236,79.064-18.601  c0.301-0.094,0.902-0.281,0.902-0.281S296,110.833,296,108.5S329.666,94,334.333,94s80.167,30.5,80.167,30.5  s1.251-0.457,1.872-0.685C447.659,112.331,468,102.862,468,98c0-12-123.334-50.291-176-50.136C246,48,111,91,111,101z"></path>  </g>  <g id="Ebene_2">  <path fill-rule="evenodd" clip-rule="evenodd" d="M126.542,219.167c0.708-0.417,0.62-0.085,2.754,0.665  c19.669,6.905,123.991,45.502,162.112,45.502c39.606,0,146.965-39.641,160.538-44.199c0.097-0.032,0.549-0.28,1.007,0.053  s0.381,0.729,0.381,0.729V229v192.5c0,0,0.25,6.792-0.521,7.75s-0.865,1.227-3.409,2.661  c-19.71,11.118-108.854,59.756-159.995,59.756c-51.253,0-140.267-50.425-159.623-61.758c-2.451-1.435-2.722-1.921-3.223-3.284  S126,421.5,126,421.5V231v-9.666C126,221.334,125.833,219.583,126.542,219.167z"></path>  </g>  </svg>&nbsp;play1_wz</a></div></td>
<td informid="play1_wz" colspan="49"><div id="play1_wz" title="disappeared" class="col2"><img class=" ios-off" src="/fhem/images/openautomation/ios-off.png" alt="disappeared" title="disappeared"></div></td>
</tr>
<tr class="odd"><td colspan="50" class="containsTable"><div informid="play1_wz-display_covertitle"><div style="border: 1px solid gray; border-radius: 10px; padding: 5px;"><script type="text/javascript"> if (!document.getElementById("global_fulldiv_play1wz")) { var newDiv = document.createElement("div"); newDiv.setAttribute("id", "global_fulldiv_play1wz"); document.body.appendChild(newDiv); var newScript = document.createElement("script"); newScript.setAttribute("type", "text/javascript"); newScript.appendChild(document.createTextNode('function refreshFullplay1wz() { var fullDiv = document.getElementById("element_fulldiv_play1wz"); if (!fullDiv) { return; } var elementHTML = decodeURIComponent(fullDiv.innerHTML); var global = document.getElementById("global_fulldiv_play1wz"); var oldGlobal = global.innerHTML; var hash = document.getElementById("hash_play1wz"); var hashMatch = /<div id="hash_play1wz".*?>(.+?)<.div>/i; hashMatch.exec(elementHTML); if ((oldGlobal != "") && (!hash || (hash.innerHTML != RegExp.$1))) { global.innerHTML = elementHTML; } if (oldGlobal != "") { setTimeout(refreshFullplay1wz, 1000); var playing = document.getElementById("prog_playing_play1wz"); if (playing && playing.innerHTML == "1") { setTimeout(refreshTimeplay1wz, 100); } } } function refreshTimeplay1wz() { var playing = document.getElementById("prog_playing_play1wz"); if (!playing || (playing && (playing.innerHTML == "0"))) { return; } var runtime = document.getElementById("prog_runtime_play1wz"); var starttime = document.getElementById("prog_starttime_play1wz"); if (runtime && starttime) { var now = new Date().getTime(); var percent = (Math.round(now / 10.0) -  Math.round(starttime.innerHTML * 100.0)) / runtime.innerHTML; document.getElementById("progressbarplay1wz").style.width = percent + "%"; setTimeout(refreshTimeplay1wz, 100); } }')); document.body.appendChild(newScript); } </script><table cellpadding="0" cellspacing="0" style="padding: 0px; margin: 0px;"><tbody><tr><td valign="top" style="padding: 0px; margin: 0px;"><div style="" onclick="document.getElementById('global_fulldiv_play1wz').innerHTML = '&nbsp;'; refreshFullplay1wz(); "><div informid="play1_wz-display_covertitle"><div style="display: inline-block; margin-right: 5px; border: 1px solid lightgray; height: 10.75em; width: 10.75em; background-image: url(/fhem/sonos/cover/empty.jpg); background-repeat: no-repeat; background-size: contain; background-position: center center;"><div style="position: relative; top: 0px; left: 2px; display: inline-block; height: 15px; width: 15px; background-image: url(/fhem/sonos/cover/tunein_round.png); background-repeat: no-repeat; background-size: contain; background-position: center center;"></div></div></div></div><div style="display: none;" id="element_fulldiv_play1wz">%3Cstyle%20type%3D%22text%2Fcss%22%3E.SONOS_Transportstate%20%7B%20height%3A%200.8em%3B%20margin-top%3A%20-6px%3B%20margin-left%3A%202px%3B%20%7D%3C%2Fstyle%3E%3Cdiv%20id%3D%22cover_currentplay1wz%22%20style%3D%22position%3A%20fixed%3B%20top%3A%200px%3B%20left%3A%200px%3B%20width%3A%20100%25%3B%20height%3A%20100%25%3B%20z-index%3A%2010000%3B%20background-color%3A%20rgb%2820%2C20%2C20%29%3B%22%20onclick%3D%22document.getElementById%28%27cover_currentplay1wz%27%29.style.display%20%3D%20%27none%27%3B%20document.getElementById%28%27global_fulldiv_play1wz%27%29.innerHTML%20%3D%20%27%27%3B%22%3E%3Cdiv%20style%3D%22position%3A%20absolute%3B%20top%3A%2010px%3B%20left%3A%205px%3B%20display%3A%20inline-block%3B%20height%3A%2035px%3B%20width%3A%2035px%3B%20background-image%3A%20url%28%2Ffhem%2Fsonos%2Fcover%2Ftunein_round.png%29%3B%20background-repeat%3A%20no-repeat%3B%20background-size%3A%20contain%3B%20background-position%3A%20center%20center%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22width%3A%20100%25%3B%20top%205px%3B%20text-align%3A%20center%3B%20font-weight%3A%20bold%3B%20color%3A%20lightgray%3B%20font-size%3A%20200%25%3B%22%3ELounge%3Csvg%20class%3D%22SONOS_Transportstate%20audio_stop%22%20data-txt%3D%22Stopped%22%20version%3D%221.0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%22468pt%22%20height%3D%22468pt%22%20viewBox%3D%220%200%20468%20468%22%20%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%20%3Cmetadata%3E%20Created%20by%20potrace%201.8%2C%20written%20by%20Peter%20Selinger%202001-2007%20%3C%2Fmetadata%3E%20%3Cg%20transform%3D%22translate%280%2C468%29%20scale%280.258564%2C-0.258564%29%22%20%20stroke%3D%22none%22%3E%20%3Cpath%20d%3D%22M97%201796%20c-51%20-19%20-75%20-42%20-87%20-85%20-6%20-23%20-10%20-326%20-10%20-814%200%20-842%20-2%20-815%2055%20-867%20l27%20-25%20811%20-3%20c758%20-2%20814%20-1%20847%2015%2073%2037%2070%20-6%2070%20888%200%20775%20-1%20801%20-20%20832%20-44%2073%2016%2068%20-865%2070%20-650%202%20-797%200%20-828%20-11z%20m1573%20-896%20l0%20-770%20-765%200%20-765%200%200%20770%200%20770%20765%200%20765%200%200%20-770z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22position%3A%20relative%3B%20top%3A%208px%3B%20height%3A%2086%25%3B%20max-width%3A%20100%25%3B%20text-align%3A%20center%3B%22%3E%3Cdiv%20style%3D%22display%3A%20inline-block%3B%20height%3A%20calc%28100%25%20-%2070px%29%3B%20width%3A%20100%25%3B%20background-image%3A%20url%28%2Ffhem%2Fsonos%2Fcover%2Fempty.jpg%29%3B%20background-repeat%3A%20no-repeat%3B%20background-size%3A%20contain%3B%20background-position%3A%20center%20center%3B%22%2F%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22position%3A%20absolute%3B%20width%3A%20100%25%3B%20bottom%3A%208px%3B%20padding%3A%205px%3B%20text-align%3A%20center%3B%20font-weight%3A%20bold%3B%20color%3A%20lightgray%3B%20background-color%3A%20rgb%2820%2C20%2C20%29%3B%20font-size%3A%20120%25%3B%22%3EPlayer%20disappeared%3C%2Fdiv%3E%3Cdiv%20id%3D%22hash_play1wz%22%20style%3D%22display%3A%20none%3B%20color%3A%20white%3B%22%3Ec3416714a2b2716067367eeea1679d53%3C%2Fdiv%3E%3C%2Fdiv%3E</div></td><td valign="top" style="padding: 0px; margin: 0px;"><div style="margin-left: 0px; min-width: 500px;"><div style="margin-left: 0px;">Player disappeared</div></div></td></tr></tbody></table></div></div><div class="rc_body" style="border: 1px solid gray; border-radius: 10px; padding: 5px;"><table style="text-align: center;"><tbody><tr><td><a onclick="FW_cmd('?XHR=1&amp;cmd.dummy=set play1_wz Previous')"><svg class="rc-button rc_PREVIOUS_svg" data-txt="Previous" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="468pt" height="468pt" viewBox="0 0 468 468" id="svg2">   <defs id="defs12"></defs>   <metadata id="metadata4"> Created by potrace 1.8, written by Peter Selinger 2001-2007 <rdf:rdf>   <cc:work rdf:about="">     <dc:format>image/svg+xml</dc:format>     <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>     <dc:title></dc:title>   </cc:work> </rdf:rdf> </metadata>   <g transform="matrix(0.189474,0,0,-0.189474,0,468)" id="g6">     <path d="M 395,2455 C 244,2422 112,2322 57,2200 5,2083 6,2112 2,1260 0,702 2,446 10,400 43,208 198,52 398,11 c 71,-15 1628,-15 1692,0 174,40 322,190 365,370 22,94 22,1579 0,1683 -21,98 -66,187 -127,252 -61,64 -113,98 -201,128 -61,21 -75,21 -867,23 -640,1 -817,-1 -865,-12 z m 1737,-163 c 74,-36 132,-95 170,-170 l 23,-47 0,-840 0,-840 -28,-57 c -37,-76 -96,-134 -171,-169 l -63,-29 -839,2 -839,3 -50,27 C 273,204 196,285 167,348 l -22,47 0,840 0,840 27,52 c 53,100 128,162 227,189 35,10 236,12 856,11 l 810,-2 67,-33 z" id="path8"></path>   </g>   <g transform="matrix(0.38074944,0,0,0.38074944,116.4254,81.750963)" id="g3764">     <path d="m 596.48032,8.9291342 8.8937,8.5039368 0,387.602379 0,387.60237 -8.8937,8.50394 c -4.6063,4.99606 -11.72834,8.8937 -15.27165,8.8937 -6.76772,0 -505.559063,-378.00001 -515.125992,-390.08269 -6.767717,-8.8937 -4.996063,-23.45669 3.543307,-31.6063 C 77.421261,381.22442 514.77166,46.204726 557.04331,15.307087 568.41733,6.7677168 580.14568,0.03543307 582.98032,0.03543307 c 2.48032,0 8.8937,3.89763793 13.5,8.89370113 z M 342.81496,238.78347 c -112.6063,85.96064 -207.46063,159.12993 -210.68504,162.35434 -5.66929,5.31496 7.83071,16.33465 208.55906,169.79528 l 214.93701,164.12599 0,-328.60631 c 0,-239.10237 -1.06299,-327.897649 -3.89764,-326.125996 -2.16141,1.062993 -96.30708,72.460636 -208.91339,158.456696 z" id="path3766" style=";fill-opacity:1;fill-rule:nonzero;stroke:none"></path>     <path d="m 42.34252,785.16144 c -4.535433,19.20473 -26.397638,24.83859 -36.8149609,9.9567 L 0,787.1457 0,405.60238 0,24.023623 5.5275591,16.051182 c 7.8661419,-11.2322842 24.4133859,-11.2322842 32.2795279,0 l 5.527559,7.972441 0.389764,377.255917 c 0.212598,208.34647 -0.389764,380.2323 -1.38189,383.8819 z" id="path3768" style=";fill-opacity:1;fill-rule:nonzero;stroke:none"></path>   </g> </svg></a></td>
<td><a style="padding-left: 10px;" onclick="FW_cmd('?XHR=1&amp;cmd.dummy=set play1_wz Play')"><svg class="rc-button rc_PLAY_svg" data-txt="Play" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.0" width="468pt" height="468pt" viewBox="0 0 468 468" id="svg2" inkscape:version="0.48.4 r9939" sodipodi:docname="svg_PLAY.svg">   <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="640" inkscape:window-height="480" id="namedview8" showgrid="false" inkscape:zoom="0.4034188" inkscape:cx="292.5" inkscape:cy="292.5" inkscape:window-x="2079" inkscape:window-y="401" inkscape:window-maximized="0" inkscape:current-layer="svg2"></sodipodi:namedview>   <defs id="defs12"></defs>   <metadata id="metadata4"> Created by potrace 1.8, written by Peter Selinger 2001-2007 <rdf:rdf>   <cc:work rdf:about="">     <dc:format>image/svg+xml</dc:format>     <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>     <dc:title></dc:title>   </cc:work> </rdf:rdf> </metadata>   <g transform="matrix(0.189474,0,0,-0.189474,0,468)" id="g6">     <path style=";" d="M 395,2455 C 244,2422 112,2322 57,2200 5,2083 6,2112 2,1260 0,702 2,446 10,400 43,208 198,52 398,11 c 71,-15 1628,-15 1692,0 174,40 322,190 365,370 22,94 22,1579 0,1683 -21,98 -66,187 -127,252 -61,64 -113,98 -201,128 -61,21 -75,21 -867,23 -640,1 -817,-1 -865,-12 z m 1737,-163 c 74,-36 132,-95 170,-170 l 23,-47 0,-840 0,-840 -28,-57 c -37,-76 -96,-134 -171,-169 l -63,-29 -839,2 -839,3 -50,27 C 273,204 196,285 167,348 l -22,47 0,840 0,840 27,52 c 53,100 128,162 227,189 35,10 236,12 856,11 l 810,-2 67,-33 z" id="path8"></path>   </g>   <path style=";" inkscape:connector-curvature="0" d="m 149.16929,73.255292 -3.6373,3.49181 0,158.731648 0,158.73167 3.6373,3.49181 c 1.89139,2.03688 4.80123,3.63729 6.25615,3.63729 2.76434,0 207.03497,-154.80338 210.96325,-159.75011 2.76435,-3.63729 2.03689,-9.60246 -1.45492,-12.94878 C 361.73295,225.7308 182.63243,88.531942 165.31889,75.874142 c -4.65574,-3.4918 -9.45698,-6.25615 -10.6209,-6.25615 -1.01845,0 -3.63731,1.60041 -5.5287,3.6373 z M 253.0505,167.38855 c 46.12093,35.20904 84.96727,65.18037 86.2767,66.4898 2.32787,2.18237 -3.20082,6.69263 -85.40375,69.54513 l -88.02259,67.21725 0,-134.58001 c 0,-97.91604 0.43647,-134.28902 1.60041,-133.56156 0.87295,0.43648 39.4283,29.68035 85.54923,64.88939 z" id="path8-1"></path> </svg></a></td>
<td><a onclick="FW_cmd('?XHR=1&amp;cmd.dummy=set play1_wz Pause')"><svg class="rc-button rc_PAUSE_svg" data-txt="Pause" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="468pt" height="468pt" viewBox="0 0 468 468" id="svg2">   <defs id="defs12"></defs>   <metadata id="metadata4"> Created by potrace 1.8, written by Peter Selinger 2001-2007 <rdf:rdf>   <cc:work rdf:about="">     <dc:format>image/svg+xml</dc:format>     <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>     <dc:title></dc:title>   </cc:work> </rdf:rdf> </metadata>   <g transform="matrix(0.189474,0,0,-0.189474,0,468)" id="g6">     <path style=";" d="M 395,2455 C 244,2422 112,2322 57,2200 5,2083 6,2112 2,1260 0,702 2,446 10,400 43,208 198,52 398,11 c 71,-15 1628,-15 1692,0 174,40 322,190 365,370 22,94 22,1579 0,1683 -21,98 -66,187 -127,252 -61,64 -113,98 -201,128 -61,21 -75,21 -867,23 -640,1 -817,-1 -865,-12 z m 1737,-163 c 74,-36 132,-95 170,-170 l 23,-47 0,-840 0,-840 -28,-57 c -37,-76 -96,-134 -171,-169 l -63,-29 -839,2 -839,3 -50,27 C 273,204 196,285 167,348 l -22,47 0,840 0,840 27,52 c 53,100 128,162 227,189 35,10 236,12 856,11 l 810,-2 67,-33 z" id="path8"></path>   </g>   <path style=";" d="m 169.78727,80.79935 c -2.57942,1.57632 -5.73204,5.01554 -7.16505,7.59496 -2.43612,4.44233 -2.57942,12.89709 -2.57942,152.61561 0,147.02686 0,147.88667 3.00932,151.7558 6.01865,8.16816 9.88777,9.88777 23.50137,10.31767 16.33632,0.71651 24.21788,-2.29282 28.51691,-11.03418 3.00932,-5.73204 3.00932,-7.16505 3.00932,-151.3259 0,-157.77444 0.2866,-150.75269 -7.73825,-158.34764 -3.58253,-3.29593 -5.15884,-3.58253 -19.91885,-4.01243 -14.0435,-0.28661 -16.62292,0 -20.63535,2.43611 z m 28.23031,159.20746 0,143.30104 -9.31457,0 -9.31457,0 0,-143.30104 0,-143.30104 9.31457,0 9.31457,0 0,143.30104 z" id="path8-4"></path>   <path style=";" d="m 257.2009,80.79935 c -9.60117,6.01865 -9.02796,-3.86912 -9.02796,159.63736 l 0,148.17327 3.29592,4.87224 c 4.87224,7.30835 11.17748,9.88777 24.64778,9.88777 14.1868,0 22.64157,-3.72582 26.7973,-11.46408 2.43611,-4.72894 2.57942,-12.46719 2.57942,-151.6125 0,-159.06415 0.4299,-150.17949 -7.88156,-157.91774 -3.58253,-3.29593 -5.01554,-3.58253 -19.77555,-4.01243 -14.0435,-0.28661 -16.62292,0 -20.63535,2.43611 z m 29.37671,159.63736 0.28661,142.87114 -10.03107,0 -10.03108,0 0,-143.30104 0,-143.44434 9.74447,0.4299 9.60117,0.42991 0.4299,143.01443 z" id="path10"></path> </svg></a></td>
<td><a style="padding-left: 10px;" onclick="FW_cmd('?XHR=1&amp;cmd.dummy=set play1_wz Next')"><svg class="rc-button rc_NEXT_svg" data-txt="Next" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="468pt" height="468pt" viewBox="0 0 468 468" id="svg2">   <defs id="defs12"></defs>   <metadata id="metadata4"> Created by potrace 1.8, written by Peter Selinger 2001-2007 <rdf:rdf>   <cc:work rdf:about="">     <dc:format>image/svg+xml</dc:format>     <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>     <dc:title></dc:title>   </cc:work> </rdf:rdf> </metadata>   <g transform="matrix(0.189474,0,0,-0.189474,0,468)" id="g6">     <path d="M 395,2455 C 244,2422 112,2322 57,2200 5,2083 6,2112 2,1260 0,702 2,446 10,400 43,208 198,52 398,11 c 71,-15 1628,-15 1692,0 174,40 322,190 365,370 22,94 22,1579 0,1683 -21,98 -66,187 -127,252 -61,64 -113,98 -201,128 -61,21 -75,21 -867,23 -640,1 -817,-1 -865,-12 z m 1737,-163 c 74,-36 132,-95 170,-170 l 23,-47 0,-840 0,-840 -28,-57 c -37,-76 -96,-134 -171,-169 l -63,-29 -839,2 -839,3 -50,27 C 273,204 196,285 167,348 l -22,47 0,840 0,840 27,52 c 53,100 128,162 227,189 35,10 236,12 856,11 l 810,-2 67,-33 z" id="path8"></path>   </g>   <g transform="matrix(-0.38074944,0,0,0.38074944,346.92122,81.750963)" id="g3764">     <path d="m 596.48032,8.9291342 8.8937,8.5039368 0,387.602379 0,387.60237 -8.8937,8.50394 c -4.6063,4.99606 -11.72834,8.8937 -15.27165,8.8937 -6.76772,0 -505.559063,-378.00001 -515.125992,-390.08269 -6.767717,-8.8937 -4.996063,-23.45669 3.543307,-31.6063 C 77.421261,381.22442 514.77166,46.204726 557.04331,15.307087 568.41733,6.7677168 580.14568,0.03543307 582.98032,0.03543307 c 2.48032,0 8.8937,3.89763793 13.5,8.89370113 z M 342.81496,238.78347 c -112.6063,85.96064 -207.46063,159.12993 -210.68504,162.35434 -5.66929,5.31496 7.83071,16.33465 208.55906,169.79528 l 214.93701,164.12599 0,-328.60631 c 0,-239.10237 -1.06299,-327.897649 -3.89764,-326.125996 -2.16141,1.062993 -96.30708,72.460636 -208.91339,158.456696 z" id="path3766" style=";fill-opacity:1;fill-rule:nonzero;stroke:none"></path>     <path d="m 42.34252,785.16144 c -4.535433,19.20473 -26.397638,24.83859 -36.8149609,9.9567 L 0,787.1457 0,405.60238 0,24.023623 5.5275591,16.051182 c 7.8661419,-11.2322842 24.4133859,-11.2322842 32.2795279,0 l 5.527559,7.972441 0.389764,377.255917 c 0.212598,208.34647 -0.389764,380.2323 -1.38189,383.8819 z" id="path3768" style=";fill-opacity:1;fill-rule:nonzero;stroke:none"></path>   </g> </svg></a></td>
<td><a style="padding-left: 20px;" onclick="FW_cmd('?XHR=1&amp;cmd.dummy=set play1_wz VolumeD')"><svg class="rc-button rc_VOLDOWN_svg" data-txt="VolDown" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="468pt" height="468pt" viewBox="0 0 468 468" id="svg2">   <defs id="defs12"></defs>   <metadata id="metadata4"> Created by potrace 1.8, written by Peter Selinger 2001-2007 <rdf:rdf>   <cc:work rdf:about="">     <dc:format>image/svg+xml</dc:format>     <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>     <dc:title></dc:title>   </cc:work> </rdf:rdf> </metadata>   <g transform="matrix(0.189474,0,0,-0.189474,0,468)" id="g6">     <path style=";" d="M 395,2455 C 244,2422 112,2322 57,2200 5,2083 6,2112 2,1260 0,702 2,446 10,400 43,208 198,52 398,11 c 71,-15 1628,-15 1692,0 174,40 322,190 365,370 22,94 22,1579 0,1683 -21,98 -66,187 -127,252 -61,64 -113,98 -201,128 -61,21 -75,21 -867,23 -640,1 -817,-1 -865,-12 z m 1737,-163 c 74,-36 132,-95 170,-170 l 23,-47 0,-840 0,-840 -28,-57 c -37,-76 -96,-134 -171,-169 l -63,-29 -839,2 -839,3 -50,27 C 273,204 196,285 167,348 l -22,47 0,840 0,840 27,52 c 53,100 128,162 227,189 35,10 236,12 856,11 l 810,-2 67,-33 z" id="path8"></path>   </g>   <path style=";" d="m 233.45756,135.6512 c -28.65174,16.15605 -41.5261,23.98164 -42.53586,26.12736 -1.26219,2.39817 -1.64084,19.56397 -1.64084,72.32357 0,59.44921 0.25244,69.92541 1.89328,73.33332 1.64085,3.40792 8.07803,7.44693 42.91451,27.01089 22.46701,12.62192 42.1572,22.97189 43.79805,22.97189 1.64084,0 4.67011,-1.13597 6.94204,-2.52438 8.33048,-5.04877 7.95181,1.51462 7.95181,-120.28684 l 0,-110.31553 -2.90303,-4.29145 c -3.15548,-4.79633 -7.57316,-7.44693 -12.24326,-7.44693 -1.76707,0 -21.20482,10.22375 -44.1767,23.0981 z M 274.605,336.97073 c -0.37866,0.25244 -15.65117,-7.95181 -34.07917,-18.30178 l -33.44808,-18.68043 -0.12621,-65.00285 0,-65.00286 33.82672,-18.93287 33.70052,-18.93288 0.37865,102.11129 c 0.12622,56.16752 0,102.36372 -0.25243,102.74238 z" id="path10"></path>   <path style=";" d="m 324.33534,147.89446 c -3.9128,3.91279 -3.15548,8.33046 2.52438,14.76764 36.22489,41.14744 36.72977,100.72287 1.38841,142.37519 -7.19449,8.45667 -8.07803,12.49569 -3.53413,16.78714 4.54388,4.29145 8.20424,3.53413 14.51519,-3.15548 17.29203,-18.55422 28.65175,-44.30292 31.68102,-71.44002 3.78657,-33.5743 -8.07803,-70.17785 -30.67126,-95.29546 -6.68961,-7.32071 -11.35972,-8.5829 -15.90361,-4.03901 z" id="path14"></path>   <path style=";" d="m 106.4811,162.28344 c -2.14573,1.00975 -5.04877,3.2817 -6.563396,5.17499 -2.77682,3.53413 -2.77682,3.78657 -2.77682,67.65346 l 0,64.24554 4.291446,4.79632 4.29145,4.67011 32.9432,0.37866 c 38.37062,0.37866 40.39012,0 44.55536,-9.46644 2.27194,-5.04877 2.39816,-8.70912 2.0195,-66.51749 -0.37865,-59.57543 -0.50487,-61.21627 -3.02926,-64.75041 -5.42742,-7.44693 -8.20424,-7.95181 -41.52609,-7.95181 -22.46701,0.12622 -31.30235,0.50488 -34.20539,1.76707 z m 61.3425,72.70223 0,56.79861 -27.13711,0 -27.13712,0 0,-56.79861 0,-56.79862 27.13712,0 27.13711,0 0,56.79862 z" id="path16"></path> </svg></a></td>
<td><a onclick="FW_cmd('?XHR=1&amp;cmd.dummy=set play1_wz MuteT')"><svg class="rc-button rc_MUTE_svg" data-txt="Mute" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.0" width="468pt" height="468pt" viewBox="0 0 468 468" id="svg2" inkscape:version="0.48.4 r9939" sodipodi:docname="svg_MUTE.svg">   <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1858" inkscape:window-height="1057" id="namedview11" showgrid="false" inkscape:zoom="0.4034188" inkscape:cx="-182.1928" inkscape:cy="292.5" inkscape:window-x="1734" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg2"></sodipodi:namedview>   <defs id="defs12"></defs>   <metadata id="metadata4"> Created by potrace 1.8, written by Peter Selinger 2001-2007 <rdf:rdf>   <cc:work rdf:about="">     <dc:format>image/svg+xml</dc:format>     <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>     <dc:title></dc:title>   </cc:work> </rdf:rdf> </metadata>   <g transform="matrix(0.189474,0,0,-0.189474,0,468)" id="g6">     <path d="M 395,2455 C 244,2422 112,2322 57,2200 5,2083 6,2112 2,1260 0,702 2,446 10,400 43,208 198,52 398,11 c 71,-15 1628,-15 1692,0 174,40 322,190 365,370 22,94 22,1579 0,1683 -21,98 -66,187 -127,252 -61,64 -113,98 -201,128 -61,21 -75,21 -867,23 -640,1 -817,-1 -865,-12 z m 1737,-163 c 74,-36 132,-95 170,-170 l 23,-47 0,-840 0,-840 -28,-57 c -37,-76 -96,-134 -171,-169 l -63,-29 -839,2 -839,3 -50,27 C 273,204 196,285 167,348 l -22,47 0,840 0,840 27,52 c 53,100 128,162 227,189 35,10 236,12 856,11 l 810,-2 67,-33 z" id="path8"></path>   </g>   <path d="m 268.26753,117.23647 c -35.37882,19.94929 -51.27593,29.61223 -52.52277,32.26174 -1.55853,2.96124 -2.02609,24.15736 -2.02609,89.30428 0,73.40716 0.31171,86.34305 2.3378,90.55109 2.02611,4.20806 9.97466,9.19538 52.99032,33.35272 27.742,15.5854 52.0552,28.36542 54.08131,28.36542 2.02609,0 5.76659,-1.40269 8.57194,-3.11708 10.28638,-6.23416 9.8188,1.87024 9.8188,-148.52874 l 0,-136.21628 -3.58462,-5.299028 c -3.89635,-5.92245 -9.35125,-9.19538 -15.11783,-9.19538 -2.18196,0 -26.18346,12.624158 -54.54886,28.521258 z m 50.80836,248.58692 c -0.46756,0.31171 -19.32587,-9.8188 -42.08055,-22.59882 l -41.30128,-23.06637 -0.15584,-80.26473 0,-80.26475 41.76882,-23.37808 41.613,-23.37809 0.46755,126.08579 c 0.15585,69.35498 0,126.39749 -0.3117,126.86505 z" id="path10"></path>   <path d="m 111.47853,150.12163 c -2.64952,1.24683 -6.23416,4.05221 -8.1044,6.39002 -3.428789,4.3639 -3.428789,4.67561 -3.428789,83.53767 l 0,79.32962 5.299029,5.92244 5.29903,5.7666 40.67787,0.46756 c 47.37957,0.46756 49.87323,0 55.01642,-11.68905 2.80536,-6.23416 2.96122,-10.75391 2.49365,-82.13499 -0.46755,-73.56302 -0.62341,-75.58911 -3.74049,-79.95302 -6.70172,-9.19538 -10.1305,-9.8188 -51.27592,-9.8188 -27.74199,0.15585 -38.65176,0.62342 -42.2364,2.18195 z m 75.74498,89.77184 0,70.13424 -33.50858,0 -33.50859,0 0,-70.13424 0,-70.13425 33.50859,0 33.50858,0 0,70.13425 z" id="path16"></path>   <path style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:16;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" d="M 399.90625,51.5625 54.96875,404.90625 66.40625,416.09375 411.375,62.75 399.90625,51.5625 z" id="path3902" inkscape:connector-curvature="0"></path>   <path style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:16;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" d="M 60.90625,55.6875 49.46875,66.875 394.40625,420.25 405.875,409.0625 60.90625,55.6875 z" id="path3902-1" inkscape:connector-curvature="0"></path> </svg></a></td>
<td><a onclick="FW_cmd('?XHR=1&amp;cmd.dummy=set play1_wz VolumeU')"><svg class="rc-button rc_VOLUP_svg" data-txt="VolUp" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="468pt" height="468pt" viewBox="0 0 468 468" id="svg2">   <defs id="defs12"></defs>   <metadata id="metadata4"> Created by potrace 1.8, written by Peter Selinger 2001-2007 <rdf:rdf>   <cc:work rdf:about="">     <dc:format>image/svg+xml</dc:format>     <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>     <dc:title></dc:title>   </cc:work> </rdf:rdf> </metadata>   <g transform="matrix(0.189474,0,0,-0.189474,0,468)" id="g6">     <path style=";" d="M 395,2455 C 244,2422 112,2322 57,2200 5,2083 6,2112 2,1260 0,702 2,446 10,400 43,208 198,52 398,11 c 71,-15 1628,-15 1692,0 174,40 322,190 365,370 22,94 22,1579 0,1683 -21,98 -66,187 -127,252 -61,64 -113,98 -201,128 -61,21 -75,21 -867,23 -640,1 -817,-1 -865,-12 z m 1737,-163 c 74,-36 132,-95 170,-170 l 23,-47 0,-840 0,-840 -28,-57 c -37,-76 -96,-134 -171,-169 l -63,-29 -839,2 -839,3 -50,27 C 273,204 196,285 167,348 l -22,47 0,840 0,840 27,52 c 53,100 128,162 227,189 35,10 236,12 856,11 l 810,-2 67,-33 z" id="path8"></path>   </g>   <path style=";" d="m 346.93269,90.212314 c -4.54389,4.796325 -3.53414,7.825582 6.18473,18.932876 23.09811,26.37979 38.11819,56.54617 45.56512,91.00399 4.03901,18.428 4.03901,55.03155 0,73.58576 -7.32072,33.70051 -23.85542,66.26504 -46.19621,91.004 -4.54389,5.04876 -8.33046,10.34997 -8.33046,11.73838 0,6.68961 6.5634,11.35973 11.8646,8.33047 5.55364,-3.02927 22.34079,-23.35055 32.05966,-38.8755 11.35972,-18.04934 21.96213,-44.1767 26.75846,-66.51749 14.13655,-65.12908 -5.04877,-134.67582 -50.99253,-184.279941 -8.20426,-8.83534 -12.24326,-9.97131 -16.91337,-4.922545 z" id="path8-8"></path>   <path style=";" d="m 183.85756,135.6512 c -28.65174,16.15605 -41.5261,23.98164 -42.53586,26.12736 -1.26219,2.39817 -1.64084,19.56397 -1.64084,72.32357 0,59.44921 0.25244,69.92541 1.89328,73.33332 1.64085,3.40792 8.07803,7.44693 42.91451,27.01089 22.46701,12.62192 42.1572,22.97189 43.79805,22.97189 1.64084,0 4.67011,-1.13597 6.94204,-2.52438 8.33048,-5.04877 7.95181,1.51462 7.95181,-120.28684 l 0,-110.31553 -2.90303,-4.29145 c -3.15548,-4.79633 -7.57316,-7.44693 -12.24326,-7.44693 -1.76707,0 -21.20482,10.22375 -44.1767,23.0981 z M 225.005,336.97073 c -0.37866,0.25244 -15.65117,-7.95181 -34.07917,-18.30178 l -33.44808,-18.68043 -0.12621,-65.00285 0,-65.00286 33.82672,-18.93287 33.70052,-18.93288 0.37865,102.11129 c 0.12622,56.16752 0,102.36372 -0.25243,102.74238 z" id="path10"></path>   <path style=";" d="m 312.34864,116.84455 c -1.51462,0.75731 -3.66035,3.02926 -4.54388,4.92255 -2.01951,4.16523 -2.27195,3.66035 10.6024,19.18531 33.5743,40.895 43.41939,95.54788 26.25358,146.79285 -5.80608,17.41824 -17.92311,37.99196 -31.04991,52.63339 -7.82558,8.70912 -8.45668,11.10728 -3.66034,15.77739 2.0195,2.14573 4.79632,3.78657 6.0585,3.78657 3.02926,0 17.29203,-15.02007 24.9914,-26.50602 12.62191,-18.80665 21.58347,-39.75903 26.63224,-62.47847 3.15547,-14.26277 3.78657,-44.55536 1.13597,-60.08031 -5.30121,-31.68101 -20.4475,-63.36201 -41.5261,-86.46011 -7.57314,-8.45668 -10.34997,-9.84509 -14.89386,-7.57315 z" id="path12"></path>   <path style=";" d="m 274.73534,147.89446 c -3.9128,3.91279 -3.15548,8.33046 2.52438,14.76764 36.22489,41.14744 36.72977,100.72287 1.38841,142.37519 -7.19449,8.45667 -8.07803,12.49569 -3.53413,16.78714 4.54388,4.29145 8.20424,3.53413 14.51519,-3.15548 17.29203,-18.55422 28.65175,-44.30292 31.68102,-71.44002 3.78657,-33.5743 -8.07803,-70.17785 -30.67126,-95.29546 -6.68961,-7.32071 -11.35972,-8.5829 -15.90361,-4.03901 z" id="path14"></path>   <path style=";" d="m 56.881104,162.28344 c -2.14573,1.00975 -5.04877,3.2817 -6.5634,5.17499 -2.77682,3.53413 -2.77682,3.78657 -2.77682,67.65346 l 0,64.24554 4.29145,4.79632 4.29145,4.67011 32.9432,0.37866 c 38.370616,0.37866 40.390116,0 44.555356,-9.46644 2.27194,-5.04877 2.39816,-8.70912 2.0195,-66.51749 -0.37865,-59.57543 -0.50487,-61.21627 -3.02926,-64.75041 -5.42742,-7.44693 -8.20424,-7.95181 -41.526086,-7.95181 -22.46701,0.12622 -31.30235,0.50488 -34.20539,1.76707 z m 61.342496,72.70223 0,56.79861 -27.137106,0 -27.13712,0 0,-56.79861 0,-56.79862 27.13712,0 27.137106,0 0,56.79862 z" id="path16"></path> </svg></a></td></tr></tbody></table></div></td></tr>

<tr class="even"><td informid="play1_wzRG_Favourites" colspan="50" class="containsTable"><table><tbody><tr><td><div class="devType">&nbsp;<a href="/fhem?detail=play1_wzRG_Favourites">Favoriten</a></div></td></tr><tr><td class="containsTable"><table id="readingsGroup-play1_wzRG_Favourites" groupid="1. SONOS" class="block wide readingsGroup"><tbody><tr class="odd"><td><div class="dname">play1_wz</div></td><td colspan="1"><div informid="play1_wzRG_Favourites-item:1:1"><ul style="margin-left: 0px; padding-left: 0px; list-style-type: none; display: inline;"><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-profiles.tunein.com/s97088/images/logog.jpg); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20FFH%2520Soundtrack%2520%2528Filmmusik%2529')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-profiles.tunein.com/s125250/images/logog.jpg); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20DELUXE%2520LOUNGE%2520RADIO')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(https://pl.scdn.co/images/pl/default/d8d7a3213848adb1fee4c4cef407944989f309eb); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20Top%2520Hits%2520Deutschland')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-radiotime-logos.tunein.com/s249943g.png); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20ABSOLUTE%2520CHILLOUT')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-radiotime-logos.tunein.com/s236263g.png); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20Northcoast%2520Radio')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-profiles.tunein.com/s295008/images/logog.png); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20RADIO%2520BOB%2521%2520BOBs%2520Hardrock')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-profiles.tunein.com/s267611/images/logog.png?t=153667); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20RADIO%2520BOB%2521%2520BOBs%2520Grunge')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-profiles.tunein.com/s267608/images/logog.png?t=153668); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20RADIO%2520BOB%2521%2520BOBs%2520Metal')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-profiles.tunein.com/s267615/images/logog.png?t=153668); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20RADIO%2520BOB%2521%2520BOBs%2520Kuschelrock')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-profiles.tunein.com/s84483/images/logog.jpg); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20FFH%2520Lounge')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-profiles.tunein.com/s267605/images/logog.png?t=153667); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20RADIO%2520BOB%2521%2520BOBs%2520Best%2520of%2520Rock')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-radiotime-logos.tunein.com/s143782g.png); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20El%2520Metro%2520Salsero')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-profiles.tunein.com/s24896/images/logog.png?t=1); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20SWR3%2520Elchradio%252099.6%2520%2528Adult%2520Contemporary%2529')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://cdn-profiles.tunein.com/s57109/images/logog.png); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.play1_wz%3Dset%20play1_wz%20StartFavourite%20hr3%252089.3%2520%2528Hot%2520AC%2529')"></div></li></ul></div></td></tr></tbody></table></td></tr></tbody></table></td>
</tr>
</tbody></table></div></div>

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 06 August 2019, 15:31:48
Immer noch nur ne Halbe Seite sichtbar... Scrollen kann man aber

"Der Tabellen Header muss übrigens die volle Breite haben, nicht wie beim restlichen Style, da sonst das Resizen verbuggt ist."
Was heisst das? ;-)
Hast du nach dem Update mal STRG+F5 gedrückt, nicht dass nochwas im Cache hängt, bei mir wird da nämlich nix abgeschnitten. Falls das Problem weiter besteht, schicke mir mal den kompletten HTML Code von dem Dashboard.
Letzteres bedeutet übrigens nur, dass seit dem letzten Update der Header einer Tabelle im Dashboard genauso breit ist wie die Tabelle (beim restlichen Style ist der Header ja immer kürzer). Das muss leider so sein, da es sonst Probleme im Dashboard gibt, wenn man eine Tabelle vergrößert/verkleinert.

Browserfreeze:

Folgendes Vorgehen:
PC1 Einstellungen auf Custom setzten und Save Global drücken FHEM.CFG Speichern..
PC2 Öffnet FHEM Web nicht mehr...
PC1 Einstellungen auf Single/Dual setzten und Save Global drücken FHEM.CFG Speichern..
PC2 Öffnet FHEM Web ...
Das passiert bei mir nicht  :o
Ausschlussverfahren: Wenn du irgendeine anderen Einstellung setzt und "Save Global" anklickst, geht weiterhin alles? nur wenn du "Multicolumn Layout" auf "custom" setzt, gibt es Probleme?
So wie du es schreibst, scheint aber weiterhin alles auf PC1 zu funktionieren? Nur auf anderen Rechnern gibt es dann Probleme?

Ich hoffe das ist das richtige:
Problem sollte gelöst sein. es wurde die Umrandung von dem Player zusammengestaucht, daher sah das wie kurze Striche aus.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: raiderxxl am 06 August 2019, 16:49:23
Hallo

hab nochmal getestet...

Dashboard:
Keine Änderung auch am Ipad Mac (Chrome Safari) PC (Chrome Edge)
Siehe Bild 1
Quelltext der Seite siehe Attachment (view-source.html)

Browserfreeze:
Freeze nur beim setzten auf custom...
Hab auch mal was anderes gesetzt und ein am anderen PC / Ipad ein neues FHEM Fenster geöffnet da gings...
Nur bei setzten auf Custom friert dann das neue Fenster ein...

Hab beim ipad mal gewartet was passiert nach ein paar Minuten kommt eine Fehlermeldung
Siehe Bild2


Grüßle

Pascal




Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 06 August 2019, 17:18:27
Dashboard:
Keine Änderung auch am Ipad Mac (Chrome Safari) PC (Chrome Edge)
Hmm, also bei mir sieht das unter Chrome so aus wie auf dem angehängten Screenshot. Keine Ahnung warum das bei dir falsch dargestellt wird  ???
Und davon mal abgesehen: Ich plane keine Unterstützung für IE und Edge, da beides aussterbende Browser sind, bzw. für letzteren plant Microsoft ja ihn auf Chromium, dann sollte es damit auch keine Probleme mehr geben.


Browserfreeze:
Freeze nur beim setzten auf custom...
Hab auch mal was anderes gesetzt und ein am anderen PC / Ipad ein neues FHEM Fenster geöffnet da gings...
Nur bei setzten auf Custom friert dann das neue Fenster ein...

Hab beim ipad mal gewartet was passiert nach ein paar Minuten kommt eine Fehlermeldung
Siehe Bild2
Ich habe einen potentielle Fehler gefunden der das hätte auslösen können, habe soeben einen fix commited. Versuchs nochmal...STRG+F5 bzw. Cache leeren nicht vergessen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 06 August 2019, 19:39:15
Das klappt leider nicht. Ich habe die Spalten mal eingefärbt.
Das einzige, was mir bisher aufgefallen ist, ist ein Unterschied in der Darstellung (ich komme vom 'dark' Style) der Icons und WebCmds. Im alten Stype sind die Rechtsbündig und untereinander angeordnet. Siehe Screenshots.
Ich habe zu den experimentellen Einstellungen mal ein Option "Tabellen Verhalten beibehalten" hinzugefügt. Wäre super wenn ihr Feedback geben könntet ob das dem entspricht was ihr gern hättet, und ob es fehlerfrei funktioniert.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 06 August 2019, 19:56:17
Hallo xanker,

heute ist mir aufgefallen, dass in der Anrufliste ca. 1/3 der älteren Anrufe nicht angezeigt werden, der Rahmen bzw. Platz dafür ist aber vorgesehen, aber komplett einfarbig leer.
Ein Bild kann ich wegen der Vertraulichkeit der Daten nicht anhängen.

Ein list meines Devices:
defmod Anrufliste FB_CALLLIST Callmonitor
attr Anrufliste expire-calls-after 7 days
attr Anrufliste language de
attr Anrufliste number-of-calls 40
attr Anrufliste room Network
attr Anrufliste show-icons 1
attr Anrufliste sortby 29
attr Anrufliste time-format-string %a, %d.%m.%Y %H:%M:%S
attr Anrufliste visible-columns state,timestamp,name,number,duration,internal,external,connection



Mein letztes update ist von gestern abend (5.8.2019, 22:00).

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Esjay am 06 August 2019, 20:25:13
Guten Abend,
hat zufällig jemand das Alarmmodul (https://wiki.fhem.de/wiki/Modul_Alarm) in Verwendung? Bei mir wird der Inhalt im Konfigurationsraum nicht mehr angezeigt. Kann leider nicht sagen, ob dies ab dem ersten Moment der Fall war, oder nach einem bestimmten Update.
Sobald ich auf einen anderen Style umschalte, ist der Inhalt wieder da.

Grüße
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 06 August 2019, 20:45:33
allo xanker,

heute ist mir aufgefallen, dass in der Anrufliste ca. 1/3 der älteren Anrufe nicht angezeigt werden, der Rahmen bzw. Platz dafür ist aber vorgesehen, aber komplett einfarbig leer.
Ein Bild kann ich wegen der Vertraulichkeit der Daten nicht anhängen.
Ein list meines Devices:
defmod Anrufliste FB_CALLLIST Callmonitor
attr Anrufliste expire-calls-after 7 days
attr Anrufliste language de
attr Anrufliste number-of-calls 40
attr Anrufliste room Network
attr Anrufliste show-icons 1
attr Anrufliste sortby 29
attr Anrufliste time-format-string %a, %d.%m.%Y %H:%M:%S
attr Anrufliste visible-columns state,timestamp,name,number,duration,internal,external,connection
Da brauche ich irgendwie mehr Informationen, am besten den HTML Code, gerne auch per PN - die Nummern/Namen kannst du ja händisch löschen. Ich habe eine calllist mit "number-of-calls 15" und die werden auch alle angezeigt.

hat zufällig jemand das Alarmmodul (https://wiki.fhem.de/wiki/Modul_Alarm) in Verwendung? Bei mir wird der Inhalt im Konfigurationsraum nicht mehr angezeigt. Kann leider nicht sagen, ob dies ab dem ersten Moment der Fall war, oder nach einem bestimmten Update.
Sobald ich auf einen anderen Style umschalte, ist der Inhalt wieder da.
Ich nutze das Modul zwar nicht, aber ich kann mir vorstellen, dass das noch nie ging. Problem: Das Modul fügt dem Raum "AlarmRoom" eine weitere Tabelle mit der CSS-Klasse "roomoverview" hinzu. Diese Tabelle existiert normal nur einmal innerhalb eines Raumes, zumindest bin ich davon ausgegangen und habe den Javascript Code darauf ausgelegt. Wenn du mir mal den HTML Code mit dem f18 Style und mit dem flex Style schicken könntest, dann kann ich mal schauen was sich machen lässt.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 06 August 2019, 20:51:34
Ich hab noch eine kleine Kosmetische Unschönheit.
Wenn man das erste Mal auf Flex umschaltet ist alles Neu :-D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 06 August 2019, 20:58:09
Guten Abend,
hat zufällig jemand das Alarmmodul (https://wiki.fhem.de/wiki/Modul_Alarm) in Verwendung? Bei mir wird der Inhalt im Konfigurationsraum nicht mehr angezeigt. Kann leider nicht sagen, ob dies ab dem ersten Moment der Fall war, oder nach einem bestimmten Update.
Sobald ich auf einen anderen Style umschalte, ist der Inhalt wieder da.

Grüße
Ich fange das nun einfach per Javascript ab. Die Einstellung werden nun angezeigt, auch wenn es da noch ein paar Style Probleme gibt
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 06 August 2019, 20:59:18
Ich hab noch eine kleine Kosmetische Unschönheit.
Wenn man das erste Mal auf Flex umschaltet ist alles Neu :-D
Ja, das passiert seit der Umstellung von Cookies auf FHEMWEB Device, habe ich schon auf der TODO Liste  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 06 August 2019, 22:08:57
Ich habe zu den experimentellen Einstellungen mal ein Option "Tabellen Verhalten beibehalten" hinzugefügt. Wäre super wenn ihr Feedback geben könntet ob das dem entspricht was ihr gern hättet, und ob es fehlerfrei funktioniert.

Ich finde das gut. Jetzt passt es auch wieder. Danke dir sehr.

Was mir nur generell aufgefallen ist, ist die Tatsache, dass nach dem Page-Load die Elemente noch wieder "refreshed" werden. Die Flex-Boxen  hüpfen sichtbar hin und her. Das hat nichts mit dem neuen Feature zu tun. Falls das früher auch schon so war, dann ist es mir nur noch nie aufgefallen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 06 August 2019, 22:28:13
Ich finde das gut. Jetzt passt es auch wieder. Danke dir sehr.

Was mir nur generell aufgefallen ist, ist die Tatsache, dass nach dem Page-Load die Elemente noch wieder "refreshed" werden. Die Flex-Boxen  hüpfen sichtbar hin und her. Das hat nichts mit dem neuen Feature zu tun. Falls das früher auch schon so war, dann ist es mir nur noch nie aufgefallen.
Mir fällt das auch mal mehr mal weniger auf. Das nimmt halt vor allem bei Räumen mit vielen webcmds zu, das für jede einzelne Zelle geprüft wird ob sie umgebrochen ist oder nicht, da sie dann anders gestyled wird. Ich habe leider noch keine effizientere Lösung dafür gefunden.
Zudem müsste ich eigentlich mit dem CSS nochmal komplett von vorne anfangen, da das über Zeit total chaotisch geworden ist, weil ich nach und nach immer kleine Bugs gefixt habe. Das trägt auch zur Ineffizienz bei. Aber das wäre nochmal extrem viel Arbeit, worauf ich eigentlich keine Lust habe.
Da jetzt aber auch von meiner Seite erstmal Schluss ist mit neuen Features, werde ich mich die Tage mal um eine bessere Performance kümmern.
Ich bin halt auch kein Webentwickler und habe mich eigentlich nur für den Style in Javascript, CSS und HTML eingearbeitet, dementsprechend gibt es sicher an einigen Stellen Verbesserungspotential.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 06 August 2019, 23:00:51
Kein Webentwickler?
Dafür hat das aber schon extremst super geklappt. Und du hast nahezu jeden Wunsch umgesetzt.
Den Code habe ich mir jedoch noch nicht angeguckt. Aber wozu auch, wenn es performant und ohne Fehler in der Konsole läuft.  ;D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 06 August 2019, 23:14:32
Kein Webentwickler?
Dafür hat das aber schon extremst super geklappt. Und du hast nahezu jeden Wunsch umgesetzt.
Den Code habe ich mir jedoch noch nicht angeguckt. Aber wozu auch, wenn es performant und ohne Fehler in der Konsole läuft.  ;D
Naja, Programmieren kann ich schon, das mache ich Hobby mäßig schon seit knapp 20 Jahren und als promovierter Informatiker sollte ich das so oder so können  ;)
Und Javascript ist von der Syntax nur unwesentlich anders wie Java, C++, etc., von dager sieht der Javascript auch recht strukturiert aus.
Allerdings hat jede Sprache ihre Tricks zwecks Performance und Webentwicklung ist da leider eine ganz eigene Sparte, da jeder Browser gefühlt macht was er will. Und CSS ist ja der größte Bullshit, leider habe ich mich zu Beginn des ganzen nicht ausreichend informiert, sonst hätte ich gleich alles mit SCSS/SASS gemacht. Ich habe sogar schon angefangen das zu machen, nach 4h ging mir das dann aber voll auf die Nerven  >:(
Und gerade die Modularität von FHEM macht die Arbeit nicht gerade leichter, vor allem nicht wenn man zu Perfektionismus neigt  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 07 August 2019, 08:36:54
Problem sollte gelöst sein. es wurde die Umrandung von dem Player zusammengestaucht, daher sah das wie kurze Striche aus.

Fast gelöst, siehe Screenshot.
VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: PSI69 am 07 August 2019, 08:49:15
Ich habe zu den experimentellen Einstellungen mal ein Option "Tabellen Verhalten beibehalten" hinzugefügt. Wäre super wenn ihr Feedback geben könntet ob das dem entspricht was ihr gern hättet, und ob es fehlerfrei funktioniert.
OK, teste ich heute Nachmittag.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: PSI69 am 07 August 2019, 08:54:58
Ich fange das nun einfach per Javascript ab. Die Einstellung werden nun angezeigt, auch wenn es da noch ein paar Style Probleme gibt
Uuups, da bin/war ich auch betroffen; war mir noch gar nicht aufgefallen :) Rückmeldung gibt's auch hier am Nachmittag...
Peter
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: raiderxxl am 07 August 2019, 10:36:31
Gmorsche...

Kurze Rückmeldung:

Dashboard läuft jetzt das Zauberwort hieß "dashboard_rowcenterheight" in den Attributen des Dashboards... schwups auf 800 gesetzt und es lüppt...

Browserfreez hatte ich heute Morgen auch noch keine...(ToiToiToi)

Danke, weiterschlafen...  ;)

Grüßle

Pascal

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: PSI69 am 07 August 2019, 16:56:04
Test beendet, funktioniert alles super (Tabellen Layout und Alarm Room).
Vielen, vielen Dank!
Peter
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Darkwing Duck am 08 August 2019, 10:18:51
Guten Morgen und zuallererst einmal vielen Dank für den tollen Style. Damit fühlt sich FHEM nun endlich auch seitens des Interface in der Gegenwart angekommen an ;D

Mir ist bei SVG-Plots mit ausgefüllten Kurven etwas aufgefallen. Wenn ich hier einen Linientyp verwende, dessen zugehörige Farbe über die Style Settings angepasst wurde, wird anscheinend als zweite Farbe für den Gradienten immer noch die in der svg_defs.svg definierte verwendet. Das wundert mich etwas, da dieses Thema hier vor einiger Zeit schon einmal diskutiert wurde und da die automatische Berechnung der Zweitfarbe mittels Addition erklärt wurde. In so einem Fall zweifle ich natürlich als erstes an mir. Kann man dabei etwas falsch machen oder ist das mit einem Update wieder rausgeflogen?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 10:41:35
Guten Morgen und zuallererst einmal vielen Dank für den tollen Style. Damit fühlt sich FHEM nun endlich auch seitens des Interface in der Gegenwart angekommen an ;D

Mir ist bei SVG-Plots mit ausgefüllten Kurven etwas aufgefallen. Wenn ich hier einen Linientyp verwende, dessen zugehörige Farbe über die Style Settings angepasst wurde, wird anscheinend als zweite Farbe für den Gradienten immer noch die in der svg_defs.svg definierte verwendet. Das wundert mich etwas, da dieses Thema hier vor einiger Zeit schon einmal diskutiert wurde und da die automatische Berechnung der Zweitfarbe mittels Addition erklärt wurde. In so einem Fall zweifle ich natürlich als erstes an mir. Kann man dabei etwas falsch machen oder ist das mit einem Update wieder rausgeflogen?
Das sollte eigentlich nicht der Fall sein  ???
Bei welcher Linie (1, 2, 3, etc.) passiert das denn? Evtl. ist noch ein kleiner Fehler im CSS. In meinen Plots habe ich nur eine ausgefüllte Linie (l2fill) und da funktioniert das mit dem Gradient.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Darkwing Duck am 08 August 2019, 13:02:18
Das sollte eigentlich nicht der Fall sein  ???
Bei welcher Linie (1, 2, 3, etc.) passiert das denn? Evtl. ist noch ein kleiner Fehler im CSS. In meinen Plots habe ich nur eine ausgefüllte Linie (l2fill) und da funktioniert das mit dem Gradient.

Aufgefallen ist es mir bei l4fill. Daraufhin habe ich noch mit höheren Indizes getestet, ich meine 5-7 habe ich ausprobiert und konnte es reproduzieren. Bei den niedrigeren bin ich mir nicht sicher, da ich dort wenn überhaupt nur die Farbtöne leicht verändert habe und das dann beim Gradienten nicht besonders auffallen würde.

Wenn ich in der svg_defs.svg den Gradienten gr4 anpasse, wird der Wert für den offset="100%" im Plot berücksichtigt. Der für 0 % hat allerdings keine für mich erkennbare Wirkung.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 13:26:26
Was mir nur generell aufgefallen ist, ist die Tatsache, dass nach dem Page-Load die Elemente noch wieder "refreshed" werden. Die Flex-Boxen  hüpfen sichtbar hin und her. Das hat nichts mit dem neuen Feature zu tun. Falls das früher auch schon so war, dann ist es mir nur noch nie aufgefallen.
Habe an ein paar Stellen an der Performance geschraubt. Wenn "Tabellen Verhalten beibehalten" deaktiviert ist, sieht man jetzt kein "Hüpfen" mehr, mal abgesehen vom Slider Handle (aber das liegt an fhemweb.js). Wenn die Option aktiviert ist, sieht man noch ein kurzes Hüpfen, das kann ich aber nicht vermeiden, es muss nämlich zwischen beiden Verhalten hin und her gesprungen werden um zu überprüfen welches Verhalten gültig ist.

Aufgefallen ist es mir bei l4fill. Daraufhin habe ich noch mit höheren Indizes getestet, ich meine 5-7 habe ich ausprobiert und konnte es reproduzieren. Bei den niedrigeren bin ich mir nicht sicher, da ich dort wenn überhaupt nur die Farbtöne leicht verändert habe und das dann beim Gradienten nicht besonders auffallen würde.

Wenn ich in der svg_defs.svg den Gradienten gr4 anpasse, wird der Wert für den offset="100%" im Plot berücksichtigt. Der für 0 % hat allerdings keine für mich erkennbare Wirkung.
Ich schaue mir das gleich mal an. Evtl. füge ich die defs einfach direkt per Javascript ein, das würde auch Probleme verhindern wenn ein Nutzer die svg_defs.svg "falsch" modifiziert hat (z.B. andere IDs der Gradienten). Beim CSS Code mache ich das schon, sprich das Modifizieren von svg_style.css hat keinerlei Auswirkung.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 14:32:34
heute ist mir aufgefallen, dass in der Anrufliste ca. 1/3 der älteren Anrufe nicht angezeigt werden, der Rahmen bzw. Platz dafür ist aber vorgesehen, aber komplett einfarbig leer.
Ich habe nochmal ein wenig getestet ob ich das nachstellen kann. Und ich bin fündig geworden. Das Problem tritt bei mir auf, wenn ich die Callist in einer Gruppe mit anderen Geräten habe. Das komische daran: Auf dem PC mit Chrome wird alles korrekt angezeigt, auf Android mit Chrome tritt dann das von dir beschriebene Problem auf. Ich schaue mal wie ich das gelöst bekomme.

Edit: Problem sollte gelöst sein, zumindest bei mir.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 08 August 2019, 15:36:52
Hallo xanker,

heute ist mir aufgefallen, dass in der Anrufliste ca. 1/3 der älteren Anrufe nicht angezeigt werden, der Rahmen bzw. Platz dafür ist aber vorgesehen, aber komplett einfarbig leer.
Ein Bild kann ich wegen der Vertraulichkeit der Daten nicht anhängen.

Ein list meines Devices:
defmod Anrufliste FB_CALLLIST Callmonitor
attr Anrufliste expire-calls-after 7 days
attr Anrufliste language de
attr Anrufliste number-of-calls 40
attr Anrufliste room Network
attr Anrufliste show-icons 1
attr Anrufliste sortby 29
attr Anrufliste time-format-string %a, %d.%m.%Y %H:%M:%S
attr Anrufliste visible-columns state,timestamp,name,number,duration,internal,external,connection


Mein letztes update ist von gestern abend (5.8.2019, 22:00).

Da brauche ich irgendwie mehr Informationen, am besten den HTML Code, gerne auch per PN - die Nummern/Namen kannst du ja händisch löschen. Ich habe eine calllist mit "number-of-calls 15" und die werden auch alle angezeigt.
Ich nutze das Modul zwar nicht, aber ich kann mir vorstellen, dass das noch nie ging. Problem: Das Modul fügt dem Raum "AlarmRoom" eine weitere Tabelle mit der CSS-Klasse "roomoverview" hinzu. Diese Tabelle existiert normal nur einmal innerhalb eines Raumes, zumindest bin ich davon ausgegangen und habe den Javascript Code darauf ausgelegt. Wenn du mir mal den HTML Code mit dem f18 Style und mit dem flex Style schicken könntest, dann kann ich mal schauen was sich machen lässt.

Ein list des devices, mit anonymisierten Adressdaten:
Internals:
   CFGFN      ./FHEM/FritzboxUniFiAnwesenheit.cfg
   DEF        Callmonitor
   FB         Callmonitor
   FUUID      5c430dc8-f33f-b139-d19f-e85cae902c7380b5
   NAME       Anrufliste
   NOTIFYDEV  global,Callmonitor
   NR         101
   NTFY_ORDER 50-Anrufliste
   STATE      Initialized
   TYPE       FB_CALLLIST
   helper:
     DEFAULT_COLUMN_ORDER row,state,timestamp,name,number,internal,external,connection,duration
     LAST_CALL_ID 1
     LAST_EVENT disconnect
     DATA:
       1564583391.44105:
         call_duration 15
         call_id    0
         direction  incoming
         external_connection SIP0
         external_name Unknown
         external_number unbekannt
         finished   1564583417.82611
         internal_connection DECT_3
         internal_index 1564583391.44105
         internal_number 02143103913
         last_event disconnect
       1564583541.69254:
         call_duration 1253
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name Unknown
         external_number unbekannt
         finished   1564584803.68097
         internal_connection DECT_1
         internal_index 1564583541.69254
         internal_number 02143103913
         last_event disconnect
       1564584897.77625:
         call_duration 657
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name Unknown
         external_number unbekannt
         finished   1564585563.3317
         internal_connection DECT_1
         internal_index 1564584897.77625
         internal_number 02143103913
         last_event disconnect
       1564680304.76482:
         call_duration 215
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name Unknown
         external_number unbekannt
         finished   1564680525.13746
         internal_connection DECT_1
         internal_index 1564680304.76482
         internal_number 02143103913
         last_event disconnect
       1564730131.81168:
         call_duration 632
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name Unknown
         external_number unbekannt
         finished   1564730777.81779
         internal_connection DECT_1
         internal_index 1564730131.81168
         internal_number 02143103913
         last_event disconnect
       1564745356.47652:
         call_duration 2
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name unknown
         external_number unbekannt
         finished   1564745360.28992
         internal_connection DECT_3
         internal_index 1564745356.47652
         internal_number 02143103913
         last_event disconnect
       1564745385.28334:
         call_duration 185
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name unknown
         external_number unbekannt
         finished   1564745573.10951
         internal_connection DECT_3
         internal_index 1564745385.28334
         internal_number 02143103913
         last_event disconnect
       1564752954.78077:
         call_duration 309
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name Unknown
         external_number unbekannt
         finished   1564753280.29842
         internal_connection DECT_1
         internal_index 1564752954.78077
         internal_number 02143103913
         last_event disconnect
       1564816064.28245:
         call_duration 223
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name unknown
         external_number unbekannt
         finished   1564816297.41461
         internal_connection DECT_1
         internal_index 1564816064.28245
         internal_number 02143103913
         last_event disconnect
       1564817652.95643:
         call_duration 382
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name Unknown
         external_number unbekannt
         finished   1564818050.59189
         internal_connection DECT_1
         internal_index 1564817652.95643
         internal_number 02143103913
         last_event disconnect
       1565009203.98323:
         call_duration 104
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name unknown
         external_number unbekannt
         finished   1565009329.62158
         internal_connection DECT_1
         internal_index 1565009203.98323
         internal_number 02143103913
         last_event disconnect
       1565009366.38556:
         call_duration 57
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name unknown
         external_number unbekannt
         finished   1565009459.64605
         internal_connection DECT_1
         internal_index 1565009366.38556
         internal_number 02143103913
         last_event disconnect
       1565011938.7703:
         call_duration 76
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name unknown
         external_number unbekannt
         finished   1565012019.2793
         internal_connection DECT_3
         internal_index 1565011938.7703
         internal_number 02143103913
         last_event disconnect
       1565071562.29311:
         call_duration 0
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name unknown
         external_number unbekannt
         finished   1565071610.20359
         internal_connection DECT_1
         internal_index 1565071562.29311
         internal_number 02143103913
         last_event disconnect
         missed_call 1
       1565071880.79235:
         call_duration 54
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name unknown
         external_number unbekannt
         finished   1565071965.27999
         internal_connection DECT_1
         internal_index 1565071880.79235
         internal_number 02143103913
         last_event disconnect
       1565090602.6602:
         call_duration 469
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name Unknown
         external_number unbekannt
         finished   1565091083.16921
         internal_connection DECT_1
         internal_index 1565090602.6602
         internal_number 02143103913
         last_event disconnect
       1565160736.57721:
         call_duration 226
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name Unknown
         external_number unbekannt
         finished   1565160981.1446
         internal_connection DECT_1
         internal_index 1565160736.57721
         internal_number 02143103913
         last_event disconnect
       1565161407.67792:
         call_duration 145
         call_id    0
         direction  incoming
         external_connection SIP0
         external_name Unknown
         external_number unbekannt
         finished   1565161569.69279
         internal_connection DECT_3
         internal_index 1565161407.67792
         internal_number 02143103913
         last_event disconnect
       1565167283.71841:
         call_duration 8
         call_id    1
         direction  outgoing
         external_connection SIP0
         external_name Unknown
         external_number unbekannt
         finished   1565167309.85522
         internal_connection DECT_1
         internal_index 1565167283.71841
         internal_number 02143103913
         last_event disconnect
     ICON_MAP:
Attributes:
   expire-calls-after 7 days
   language   de
   number-of-calls 40
   room       Network
   show-icons 1
   sortby     29
   time-format-string %a, %d.%m.%Y %H:%M:%S
   visible-columns state,timestamp,name,number,duration,internal,external,connection

Das Problem tritt nicht auf bei: large screen mit Chrome und Firefox, und small screen mit Firefox
Das Problem tritt reproduzierbar an verschiedenen Tagen mit verschiedenem Inhalt auf: nur mit small screen und Chrome - was aber mein bevorzugter Browser auf dem Handy ist.

Ich sollte dir den HTML Code mit dem f18 Style schicken: da gibt es nur ?? ??? ?? auf meiner Stirn - wie mach ich das?

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 15:38:43
Ein list des devices, mit anonymisierten Adressdaten:
Du bist ein klein wenig zu spät, das Problem sollte schon gelöst sein, siehe ein Post über deinem  ;D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 16:56:14
Aufgefallen ist es mir bei l4fill. Daraufhin habe ich noch mit höheren Indizes getestet, ich meine 5-7 habe ich ausprobiert und konnte es reproduzieren. Bei den niedrigeren bin ich mir nicht sicher, da ich dort wenn überhaupt nur die Farbtöne leicht verändert habe und das dann beim Gradienten nicht besonders auffallen würde.
Also ich habe das nun umgestellt, dass alle defs per Javascript gesetzt werden. Somit wird jetzt für die Gradienten die Farbe direkt gesetzt, anstatt sie per CSS zu modifizieren. Damit ist der Style nun komplett unabhängig von svg_style.css und svg_defs.svg. Zudem habe ich das mit der Farbgebung der Gradienten geändert. Start- und Endfarbe sind nun genau gleich, lediglich die Transparenz wird angepasst: von unten (60%) nach oben (30%). Somit wird der Gradient bei einem hellen Plothintergrund nach oben hin heller und bei einem dunklen Hintergrund entsprechend dunkler. Ich hoffe damit ist jeder einverstanden :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: adnan am 08 August 2019, 19:11:14
seit dem letzten update zeigt der safari (12.1.2) auf dem mac keinen inhalt mehr. die seite bleibt weiß. auf chrome funktioniert ist.

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Pitcher90 am 08 August 2019, 19:20:37
Hallo xanker,
Ich habe ein seltsames Verhalten bei deinem Style festgestellt. Das erste mal ist es mir vor 5-6 Tagen aufgefallen. Erst jetzt bin ich mir sicher, dass es mit deinem Style zusammenhängt.
Und zwar: Wenn ich im Dropdown-Menü eine Option auswähle und danach gleich eine andere, dann wechselt es quasi in Endlosschleife hin und her. Ich habe das auch mal auf Video festgehalten.
https://www.dropbox.com/s/t77199108u3fx6p/VID_20190808_190830.mp4?dl=0 (https://www.dropbox.com/s/t77199108u3fx6p/VID_20190808_190830.mp4?dl=0)

Ansonsten finde ich deinen Style aber super! Ich hoffe du findest eine Lösung für das Problem. Solang muss ich leider wieder f18 benutzen :/
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 08 August 2019, 19:30:21
Du bist ein klein wenig zu spät, das Problem sollte schon gelöst sein, siehe ein Post über deinem  ;D
Hallo xanker,
sorry, ich hatte das glatt übersehen.
Ich habe gerade ein update gemacht, allerdings ist es auf dem Handy in Chrome immer noch abgeschnitten.
Es werden 12 Telefonate angezeigt, und der 13te ist halb sichtbar, was ich merkwürdig finde.
Beim 13ten Eintrag sind von den üblichen 3 Zeilen 2 sichtbar, die 3. Zeile sowie die nachfolgenden Einträge sind nicht sichtbar, wobei aber der Platz für den fehlenden "Block" in eineitlicher Farbe vorhanden ist.
Die ersten 12 Einträge kann man auf dem Handy antippen, wobei sich die Farbe des Hintergrunds auf dunklegrau ändert.
Bei dem letzten, 13ten Eintrag und folgende kann man diesen größeren "Block" nicht antippen.

Hoffentlich hilft dir mein Geschwurbel weiter, ein Screenshot sagt aber mehr als Tausend Worte.

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 19:39:11
seit dem letzten update zeigt der safari (12.1.2) auf dem mac keinen inhalt mehr. die seite bleibt weiß. auf chrome funktioniert ist.
Danke, das werde ich mir gleich mal anschauen.

Hallo xanker,
Ich habe ein seltsames Verhalten bei deinem Style festgestellt. Das erste mal ist es mir vor 5-6 Tagen aufgefallen. Erst jetzt bin ich mir sicher, dass es mit deinem Style zusammenhängt.
Und zwar: Wenn ich im Dropdown-Menü eine Option auswähle und danach gleich eine andere, dann wechselt es quasi in Endlosschleife hin und her. Ich habe das auch mal auf Video festgehalten.
https://www.dropbox.com/s/t77199108u3fx6p/VID_20190808_190830.mp4?dl=0 (https://www.dropbox.com/s/t77199108u3fx6p/VID_20190808_190830.mp4?dl=0)

Ansonsten finde ich deinen Style aber super! Ich hoffe du findest eine Lösung für das Problem. Solang muss ich leider wieder f18 benutzen :/
Was es nicht alles gibt  :o
Das scheint ein Harmony Device zu sein? Ich habe das gerade nämlich mal bei mir mit einem Harmony Device getestet, und dort tritt das Problem auch auf, allerdings nicht in der Geschwindigkeit wie bei deinem Video. Das Problem tritt aber auch beim f18 Style auf, somit ist das wohl ein Problem mit dem Harmony Modul. Ich konnte das auch erst durch Ausstecken des Harmony Hubs wieder beenden.

Ich habe das auch mit mehreren anderen Selects (Dropdown-Menüs) getestet, bei keinem anderen tritt dieses Problem auf.

Ich habe gerade ein update gemacht, allerdings ist es auf dem Handy in Chrome immer noch abgeschnitten.
Das könnte noch daran liegen, dass noch was im Cache ist. Mobil kann man den ja nicht so schön löschen wie am PC (STRG+F5). Versuche es mal in einem Inkognito-Tab, der nutzt meines wissen einen anderen Cache.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 08 August 2019, 19:43:52
Cache auf Mobil geht schnell zu löschen.

Einstellungen-->Apps-->Chrome-->Speicher-->Cache leeren
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 08 August 2019, 19:44:47
Zitat
Das scheint ein Harmony Device zu sein?
Nein, liegt nicht an Harmony.....Kann ich hier auch nachstellen, mit einem Dummy mit WebCmd und einem Notify, welches darauf triggert.......Das läuft dann in Dauerschleife, sobald ich was auswähle.

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 19:52:23
seit dem letzten update zeigt der safari (12.1.2) auf dem mac keinen inhalt mehr. die seite bleibt weiß. auf chrome funktioniert ist.
Also ich habe kein Mac, nur ein altes iPhone 5s zum testen und dort funktioniert alles  ???

Cache auf Mobil geht schnell zu löschen.

Einstellungen-->Apps-->Chrome-->Speicher-->Cache leeren
Das bringt nichts, da löscht nur den Cache von der App an sich, aber NICHT den Cache von einzelnen Websites. Diesen kann man nur löschen über:
Chrome Einstellungen -> Webseiten Einstellungen -> Speicher -> Webseite auswählen/suchen -> Löschen & zurücksetzen

Und das finde ich extrem nervig, daher hängt bei mir während der Entwicklung das Smartphone am PC und ich nutze Remote Debugging über Chrome, dann wird bei einem Reload immer automatisch der Cache geleert.

Nein, liegt nicht an Harmony.....Kann ich hier auch nachstellen, mit einem Dummy mit WebCmd und einem Notify, welches darauf triggert.......Das läuft dann in Dauerschleife, sobald ich was auswähle.
Interessant, bei mir passiert das nur beim Harmony Hub ???
Nutzt ihr Chrome?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 08 August 2019, 19:57:35
Ja, Chrome auf Linux.

Hier mal schnell zusammengestöpselt zum testen. Hoffe, ich hab keinen Fehler drinnen, ist aus meinem Live-System kopiert und nur die Devicenamen leicht abgeändert.

defmod dmy_Test dummy
attr dmy_Test DbLogExclude .*
attr dmy_Test readingList Badebetrieb Stefan Petra Nachbarn alle Chemie Menge pH_plus pH_minus Wasser Chlor
attr dmy_Test setList Badebetrieb:select,--,Stefan,Petra,Nachbarn,alle Chemie:select,Wasser,pH_plus,pH_minus,Chlor,Chlortab,Flock Menge:select,--,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,Tablette


defmod di_Test DOIF ([dmy_Test:"Menge:.\d+(\.\d+)?"]) (setreading dmy_Test [dmy_Test:Chemie] {([dmy_Test:Menge]+(ReadingsVal("dmy_Test",ReadingsVal("dmy_Test","Chemie",""),0)));})
  (setreading dmy_Test Menge --)
DOELSEIF ([dmy_Test:"Badebetrieb"]) (setreading dmy_Test [dmy_Test:Badebetrieb] {(ReadingsVal("dmy_Test",ReadingsVal("dmy_Test","Badebetrieb",""),0)+1);})
    (setreading dmy_Test Badebetrieb --)
DOELSEIF ([dmy_Test:"Menge:.Tablette"])    (setreading dmy_Test [dmy_Test:Chemie] {(1+(ReadingsVal("dmy_Test",ReadingsVal("dmy_Test","Chemie",""),0)));})
  (setreading dmy_Test Menge --)
DOELSE ()
attr di_Test DbLogExclude .*
attr di_Test do always


defmod rg_Pool readingsGroup dmy_Test:,<Badebetrieb>,<>,Badebetrieb,!Stefan,!Petra,!Nachbarn\
dmy_Test:,<Chemie:>,<>,!Wasser,!Chlor,!pH_minus,!pH_plus\
dmy_Test:,<>,<>,!Flock,!Chlortab,<>,<>\
dmy_Test:,<Dosierung>,<>,Chemie@dmy_PoolChemie,Menge
attr rg_Pool commands { 'Chemie' => 'Chemie:','Menge' => 'Menge:',"Badebetrieb" => "Badebetrieb:"}

Beim Auswählen von zB "Chemie --> Chlor" und danach "Menge--> 1" sollte eigentlich das reading nur um 1 erhöht werden.
War bisher auch so.
Seit neuestem (ist mir vorhin erst aufgefallen, nachdem ich das gelesen hatte), zählts in einer Endlosschleife hoch.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 20:04:29
Ja, Chrome auf Linux.

Hier mal schnell zusammengestöpselt zum testen. Hoffe, ich hab keinen Fehler drinnen, ist aus meinem Live-System kopiert und nur die Devicenamen leicht abgeändert.

defmod dmy_Test dummy
attr dmy_Test DbLogExclude .*
attr dmy_Test readingList Badebetrieb Stefan Petra Nachbarn alle Chemie Menge pH_plus pH_minus Wasser Chlor
attr dmy_Test setList Badebetrieb:select,--,Stefan,Petra,Nachbarn,alle Chemie:select,Wasser,pH_plus,pH_minus,Chlor,Chlortab,Flock Menge:select,--,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,Tablette


defmod di_Test DOIF ([dmy_Test:"Menge:.\d+(\.\d+)?"]) (setreading dmy_Test [dmy_Test:Chemie] {([dmy_Test:Menge]+(ReadingsVal("dmy_Test",ReadingsVal("dmy_Test","Chemie",""),0)));})
  (setreading dmy_Test Menge --)
DOELSEIF ([dmy_Test:"Badebetrieb"]) (setreading dmy_Test [dmy_Test:Badebetrieb] {(ReadingsVal("dmy_Test",ReadingsVal("dmy_Test","Badebetrieb",""),0)+1);})
    (setreading dmy_Test Badebetrieb --)
DOELSEIF ([dmy_Test:"Menge:.Tablette"])    (setreading dmy_Test [dmy_Test:Chemie] {(1+(ReadingsVal("dmy_Test",ReadingsVal("dmy_Test","Chemie",""),0)));})
  (setreading dmy_Test Menge --)
DOELSE ()
attr di_Test DbLogExclude .*
attr di_Test do always


defmod rg_Pool readingsGroup dmy_Test:,<Badebetrieb>,<>,Badebetrieb,!Stefan,!Petra,!Nachbarn\
dmy_Test:,<Chemie:>,<>,!Wasser,!Chlor,!pH_minus,!pH_plus\
dmy_Test:,<>,<>,!Flock,!Chlortab,<>,<>\
dmy_Test:,<Dosierung>,<>,Chemie@dmy_PoolChemie,Menge
attr rg_Pool commands { 'Chemie' => 'Chemie:','Menge' => 'Menge:',"Badebetrieb" => "Badebetrieb:"}

Beim Auswählen von zB "Chemie --> Chlor" und danach "Menge--> 1" sollte eigentlich das reading nur um 1 erhöht werden.
War bisher auch so.
Seit neuestem (ist mir vorhin erst aufgefallen, nachdem ich das gelesen hatte), zählts in einer Endlosschleife hoch.
Danke, damit kann ich es nachstellen. ABER auch mit f18! das ist wohl ein Problem vom letzten fhemweb.js update. Ich ändere mit meinem Style auch absolut nichts an dem Webcmds, mal abgesehen vom Aussehen.

Edit: Echt merkwürdiges Verhalten. das muss man aber auf jeden Fall melden.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 08 August 2019, 20:05:41
Ok, kann sein, hab keinen anderen Style getestet. Wie gesagt, ist mir grad vorhin erst aufgefallen, nachdem ich oben den Post gelesen hatte (und damit irgendwie ganz automatisch davon ausgegangen bin, dass es flex betrifft)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: sash.sc am 08 August 2019, 20:08:11
Ist das richtig, dass der Titel von den Plots nicht in der eingestellten Schriftart dar gestellt werden?

Gruß Sascha

Gesendet von meinem MI 9 mit Tapatalk

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Pitcher90 am 08 August 2019, 20:09:40
Hallo xanker,
Das Device in dem Video ist tatsächlich ein dummy (der den Harmony Hub schaltet) :D
Sobald ich f18 benutze tritt das Problem nicht mehr auf. Ich benutze den Chrome-Browser.

Vor 5 Tagen als ich das Problem das erste mal festgestellt habe, dachte ich erst es hätte sich etwas am notify-Modul geändert, dass meine notifys jetzt Endlosschleifen produzieren  ;D

Edit: Sorry, wenn es wirklich nicht an deinem Style liegt. Konnte es mir nicht anders erklären.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 20:41:02
Ok, kann sein, hab keinen anderen Style getestet. Wie gesagt, ist mir grad vorhin erst aufgefallen, nachdem ich oben den Post gelesen hatte (und damit irgendwie ganz automatisch davon ausgegangen bin, dass es flex betrifft)
Hallo xanker,
Das Device in dem Video ist tatsächlich ein dummy (der den Harmony Hub schaltet) :D
Sobald ich f18 benutze tritt das Problem nicht mehr auf. Ich benutze den Chrome-Browser.

Vor 5 Tagen als ich das Problem das erste mal festgestellt habe, dachte ich erst es hätte sich etwas am notify-Modul geändert, dass meine notifys jetzt Endlosschleifen produzieren  ;D

Edit: Sorry, wenn es wirklich nicht an deinem Style liegt. Konnte es mir nicht anders erklären.
Ich korrigiere, das tritt bei f18 nur auf wenn ich parallel noch einen Fenster mit meinem Style offen habe...da muss ich jetzt wohl mal Forschen, keine Ahnung was das auslöst  ???

Ist das richtig, dass der Titel von den Plots nicht in der eingestellten Schriftart dar gestellt werden?
Richtig ja, gewollt nicht  ;) danke...habe es gefixed
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 20:56:17
Ok, kann sein, hab keinen anderen Style getestet. Wie gesagt, ist mir grad vorhin erst aufgefallen, nachdem ich oben den Post gelesen hatte (und damit irgendwie ganz automatisch davon ausgegangen bin, dass es flex betrifft)
Sobald ich f18 benutze tritt das Problem nicht mehr auf. Ich benutze den Chrome-Browser.
Problem gelöst. Zur Erklärung: ich habe die Jquery Funktion "val()" überschrieben, sodass diese beim setzen eines wertes ein "change" Event feuert, das hat wohl bei FHEMWEB dazu geführt dass mit jedem change Event das Command ausgeführt wurde, was wiederrum zum setzen des Wertes mittels "val()" führt, und das ging dann immer so weiter.

Ich weiß nicht mehr warum ich das überhaupt gemacht hatte, aber es hatte einen Sinn...man wird es sehen  ;D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Pitcher90 am 08 August 2019, 21:01:49
Super! Scheint wieder zu funktionieren  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: sash.sc am 08 August 2019, 21:01:55
Ich korrigiere, das tritt bei f18 nur auf wenn ich parallel noch einen Fenster mit meinem Style offen habe...da muss ich jetzt wohl mal Forschen, keine Ahnung was das auslöst  ???
Richtig ja, gewollt nicht  ;) danke...habe es gefixed
Danke

Gesendet von meinem MI 9 mit Tapatalk

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 21:03:34
Seit dem ich bei den Plots geändert habe, dass die defs per Javascript gesetzt werden (um unabhängig von svg_defs.svg zu sein), werden die Gradienten bei plotEmbed 1 nicht mehr angezeigt, bei plotEmbed 0 schon. Bei beidem sind die defs aber korrekt gesetzt...falls jemand eine Idee hat  ???
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 08 August 2019, 21:10:53
Zitat
Zitat von: Gisbert am Heute um 19:30:21
Ich habe gerade ein update gemacht, allerdings ist es auf dem Handy in Chrome immer noch abgeschnitten.
Das könnte noch daran liegen, dass noch was im Cache ist. Mobil kann man den ja nicht so schön löschen wie am PC (STRG+F5). Versuche es mal in einem Inkognito-Tab, der nutzt meines wissen einen anderen Cache.

Hat leider nicht zu einer Besserung geführt :( auch das Leeren des Browserverlaufs und das Löschen des Caches in Apps --> Chrome --> Cache leeren führt zu keiner Änderung.
Was könnte denn noch so ein relativ merkwürdiges Verhalten (3/4 richtige Darstellung) verursachen.

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Darkwing Duck am 08 August 2019, 21:11:42
Also ich habe das nun umgestellt, dass alle defs per Javascript gesetzt werden. Somit wird jetzt für die Gradienten die Farbe direkt gesetzt, anstatt sie per CSS zu modifizieren. Damit ist der Style nun komplett unabhängig von svg_style.css und svg_defs.svg. Zudem habe ich das mit der Farbgebung der Gradienten geändert. Start- und Endfarbe sind nun genau gleich, lediglich die Transparenz wird angepasst: von unten (60%) nach oben (30%). Somit wird der Gradient bei einem hellen Plothintergrund nach oben hin heller und bei einem dunklen Hintergrund entsprechend dunkler. Ich hoffe damit ist jeder einverstanden :)

Ich kann natürlich nicht für jeden sprechen, aber ich bin äußerst einverstanden. Im Grunde ist das fast genau das, was ich vorher auch behelfsweise manuell in die svg_defs.svg eingetragen hatte. Also vielen Dank!
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 08 August 2019, 21:29:21
Hat leider nicht zu einer Besserung geführt :( auch das Leeren des Browserverlaufs und das Löschen des Caches in Apps --> Chrome --> Cache leeren führt zu keiner Änderung.
Was könnte denn noch so ein relativ merkwürdiges Verhalten (3/4 richtige Darstellung) verursachen.
Wie gesagt, bei mir ist das nur aufgetreten, wenn ich die Calllist mit anderen Devices in einer Gruppe hatte. Wenn die ungruppiert ist bzw. alleine in einer Gruppe, trat das Problem nicht auf.
Es gibt jetzt nur zwei Möglichkeiten: Entweder brauche ich den HTML Code von der Callist, oder du versuchst mal die Calllist zu Gruppieren, ob das dein Problem löst. Im Prinzip wäre ich für ersteres, da ich das Problem gerne lösen würde.
An den HTML Code kommst du so:
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 09 August 2019, 06:10:00
Guten Morgen,

mir sind grade folgende Dinge aufgefallen, keine Ahnung, seit wann das so ist:

1) Kein RGB-Selector mehr, wenn man unter Style-settings eine Farbe ändern will  (egal ob Desktop oder Android, jeweils Chrome)
2) Bei Auswahl von attr group/room o.ä. kommt ja das Fenster mit den verschiedenen Räumen zum anklicken. Bei anderen styles wird der Hintergrund ausgegraut und man muss erst dieses Fenster wegmachen um weiterzuarbeiten.
    Bei flex kann ich trotzdem ein anderes Attr auswählen und bearbeiten, das Checkbox-Fenster bleibt offen bis zum reload.

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 09 August 2019, 08:46:43
Moin,
seit dem letzten (heutigen) Update sehe ich jetzt Teile des HTML-Codes im Hintergrund    :o
Die beiden verbleibenden Striche sind immer noch zu sehen.

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: mahowi am 09 August 2019, 09:44:46
Ich hab da noch ein Problem mit flex und dem Todoist-Weblink. Beim Todoist-Modul kann man sich in einem weblink-Device alle Listen anzeigen. Bei flex wird nur eine dargestellt, bei f18 beide. Im weblink-Device selbst werden auch mit flex beide angezeigt.

Ich habe für alle 3 Fälle Screenshots angehängt.

Im HTML-Code taucht die zweite Liste (Urlaubsliste) übrigens auf.  ???

<div id='content'  room='Todoist'>
<table class="roomoverview">
</table>
 <script type="text/javascript">
                todoist_tt={};
                todoist_tt.refreshList='Liste aktualisieren';
                todoist_tt.clearList='Alle Elemente löschen';
                todoist_tt.clearconfirm='Wirklich alle Elemente löschen?';
                todoist_tt.delconfirm='Task wirklich löschen?';
                todoist_tt.check='Erledigen';
                todoist_tt.delete='Löschen';
              </script> <script type="text/javascript" src="/fhem/www/pgm2/todoist.js?version=1.2.0.8"></script>
                <style id="todoist_style">
                  .todoist_container {
                      display: block;
                      padding: 0;
                      float:none;
                  }
                  .todoist_table {
                      float: left;
                      margin-right: 10px;
                  }
                  .sortable-placeholder {
                    background-color: grey;
                  }
                  .todoist_col1 {
                    width:32px;
                    text-align:right;
                    padding: 4px 4px 4px 1px!important;
                  }
                  .todoist_col1 input {
                    //margin-top:4px;
                  }
                  .todoist_move {
                    width:10px;
                    float:left;
                  }
                  .todoist_sortit_handler {
                    padding-top: 0px!important;
                    content: '....';
                    width: 5px;
                    height: 20px;
                    //display: inline-block;
                    overflow: hidden;
                    line-height: 5px;
                    padding: 0px 2px!important;
                    cursor: move;
                    vertical-align: middle;
                    margin-top: -.2em;
                    margin-right: 0!important;
                    font-size: 12px;
                    font-family: sans-serif;
                    letter-spacing: 1px;
                    color: #cccccc;
                    text-shadow: 1px 0 1px black;
                  }
                  .todoist_sortit_handler::after {
                    content: '.. .. .. ..';
                  }
                  @media(max-device-width: 480px){
                    .todoist_move {
                      width:35px;
                    }
                    .todoist_sortit_handler {
                       width: 5px;
                    }
                  }
                  .todoist_delete {
                    padding-right:15px!important;
                    padding-left:15px!important;
                  }
                  tr.ui-sortable-helper {
                    background-color:#111111;
                  }
                  .todoist_indent_2 {
                    padding-left:20px!important;
                  }
                  .todoist_indent_3 {
                    padding-left:40px!important;
                  }
                  .todoist_indent_4 {
                    padding-left:60px!important;
                  }
                  .todoist_ph td {
                    padding: 4px 8px;
                  }
                  div.todoist_devType {
                    padding: 4px!important;     
                  }
                  div.todoist_icon {
                    cursor: pointer;
                    display: block;
                    float: right;
                    width: 1em;
                    height: 1em;
                    margin-left: 0.5em;
                  }
                  div.todoist_icon svg {
                    height: 12px!important;
                    width: 12px!important;
                  }
         .todoist_table {
                    margin-bottom: 15px;
                  }
                   </style>
    <div class="todoist_container">
<table class="roomoverview todoist_table">
<tr class="devTypeTr">
 <td colspan="3">
   <div class="todoist_devType todoist_devType_Einkaufsliste col_header">
<a title="Detailseite des todoist-Devices aufrufen" href="/fhem?detail=Einkaufsliste">Einkaufsliste</a>   </div>
 </td>
</tr>
<tr><td colspan="3"><table class="block wide sortable" id="todoistTable_Einkaufsliste">
<tr id="Einkaufsliste_3135431066" data-data="true" data-line-id="3135431066" class="sortit todoist_data odd">
 <td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Einkaufsliste" type="checkbox" id="check_3135431066" data-id="3135431066" />
 </td>
 <td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3135431066">braunes silikon</span>
   <input type="text" data-id="3135431066" style="display:none;" class="todoist_input_Einkaufsliste" value="braunes silikon" />
 </td>
<td class="col2 todoist_delete">
 <a title="Löschen" href="#" class="todoist_delete_Einkaufsliste" data-id="3135431066">
   x
 </a>
</td>
</tr>
<tr id="Einkaufsliste_3269460542" data-data="true" data-line-id="3269460542" class="sortit todoist_data even">
 <td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Einkaufsliste" type="checkbox" id="check_3269460542" data-id="3269460542" />
 </td>
 <td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3269460542">Blumenstrauß</span>
   <input type="text" data-id="3269460542" style="display:none;" class="todoist_input_Einkaufsliste" value="Blumenstrauß" />
 </td>
<td class="col2 todoist_delete">
 <a title="Löschen" href="#" class="todoist_delete_Einkaufsliste" data-id="3269460542">
   x
 </a>
</td>
</tr>
<tr id="Einkaufsliste_3288719047" data-data="true" data-line-id="3288719047" class="sortit todoist_data odd">
 <td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Einkaufsliste" type="checkbox" id="check_3288719047" data-id="3288719047" />
 </td>
 <td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3288719047">airwick</span>
   <input type="text" data-id="3288719047" style="display:none;" class="todoist_input_Einkaufsliste" value="airwick" />
 </td>
<td class="col2 todoist_delete">
 <a title="Löschen" href="#" class="todoist_delete_Einkaufsliste" data-id="3288719047">
   x
 </a>
</td>
</tr>
<tr id="Einkaufsliste_3315759010" data-data="true" data-line-id="3315759010" class="sortit todoist_data even">
 <td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Einkaufsliste" type="checkbox" id="check_3315759010" data-id="3315759010" />
 </td>
 <td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3315759010">tempos</span>
   <input type="text" data-id="3315759010" style="display:none;" class="todoist_input_Einkaufsliste" value="tempos" />
 </td>
<td class="col2 todoist_delete">
 <a title="Löschen" href="#" class="todoist_delete_Einkaufsliste" data-id="3315759010">
   x
 </a>
</td>
</tr>
<tr class="sortit odd todoist_ph" style="display:none;"> <td colspan="3">   List ist leer.
 </td></tr><tr class="even"><td colspan="3"> <input type="hidden" class="todoist_name" id="todoist_name_Einkaufsliste" value="Einkaufsliste" />
 <input title="Neuen Eintrag zur Liste hinzufügen" type="text" id="newEntry_Einkaufsliste" />
</td></tr></table></td></tr>
</table>
<table class="roomoverview todoist_table">
<tr class="devTypeTr">
 <td colspan="3">
   <div class="todoist_devType todoist_devType_Urlaubsliste col_header">
<a title="Detailseite des todoist-Devices aufrufen" href="/fhem?detail=Urlaubsliste">Urlaubsliste</a>   </div>
 </td>
</tr>
<tr><td colspan="3"><table class="block wide sortable" id="todoistTable_Urlaubsliste">
<tr id="Urlaubsliste_3269461498" data-data="true" data-line-id="3269461498" class="sortit todoist_data odd">
 <td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Urlaubsliste" type="checkbox" id="check_3269461498" data-id="3269461498" />
 </td>
 <td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3269461498">Mietwagenvoucher</span>
   <input type="text" data-id="3269461498" style="display:none;" class="todoist_input_Urlaubsliste" value="Mietwagenvoucher" />
 </td>
<td class="col2 todoist_delete">
 <a title="Löschen" href="#" class="todoist_delete_Urlaubsliste" data-id="3269461498">
   x
 </a>
</td>
</tr>
<tr id="Urlaubsliste_3273610918" data-data="true" data-line-id="3273610918" class="sortit todoist_data even">
 <td class="col1 todoist_col1">
   <div class="todoist_move"></div>
   <input title="Erledigen" class="todoist_checkbox_Urlaubsliste" type="checkbox" id="check_3273610918" data-id="3273610918" />
 </td>
 <td class="col1 todoist_input todoist_indent_1">
   <span class="todoist_task_text" data-id="3273610918">Flugtickets</span>
   <input type="text" data-id="3273610918" style="display:none;" class="todoist_input_Urlaubsliste" value="Flugtickets" />
 </td>
<td class="col2 todoist_delete">
 <a title="Löschen" href="#" class="todoist_delete_Urlaubsliste" data-id="3273610918">
   x
 </a>
</td>
</tr>
<tr class="sortit odd todoist_ph" style="display:none;"> <td colspan="3">   List ist leer.
 </td></tr><tr class="even"><td colspan="3"> <input type="hidden" class="todoist_name" id="todoist_name_Urlaubsliste" value="Urlaubsliste" />
 <input title="Neuen Eintrag zur Liste hinzufügen" type="text" id="newEntry_Urlaubsliste" />
</td></tr></table></td></tr>
</table>
</div>
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 09 August 2019, 11:37:46
1) Kein RGB-Selector mehr, wenn man unter Style-settings eine Farbe ändern will  (egal ob Desktop oder Android, jeweils Chrome)
2) Bei Auswahl von attr group/room o.ä. kommt ja das Fenster mit den verschiedenen Räumen zum anklicken. Bei anderen styles wird der Hintergrund ausgegraut und man muss erst dieses Fenster wegmachen um weiterzuarbeiten.
    Bei flex kann ich trotzdem ein anderes Attr auswählen und bearbeiten, das Checkbox-Fenster bleibt offen bis zum reload.
seit dem letzten (heutigen) Update sehe ich jetzt Teile des HTML-Codes im Hintergrund    :o
Das hatte alles mit der Einführung des Loading Screens zu tun, habe den Content falsch aus bzw. eingeblendet. Sollte behoben sein.


Die beiden verbleibenden Striche sind immer noch zu sehen.
Ist noch auf der TODO List :)


Ich hab da noch ein Problem mit flex und dem Todoist-Weblink. Beim Todoist-Modul kann man sich in einem weblink-Device alle Listen anzeigen. Bei flex wird nur eine dargestellt, bei f18 beide. Im weblink-Device selbst werden auch mit flex beide angezeigt.
Sollte behoben sein.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 09 August 2019, 12:26:55
Die beiden verbleibenden Striche sind immer noch zu sehen.
Jetzt aber  :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: mahowi am 09 August 2019, 12:50:54
Ich hab da noch ein Problem mit flex und dem Todoist-Weblink. Beim Todoist-Modul kann man sich in einem weblink-Device alle Listen anzeigen. Bei flex wird nur eine dargestellt, bei f18 beide. Im weblink-Device selbst werden auch mit flex beide angezeigt.

Sollte behoben sein.

Leider nicht.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 09 August 2019, 13:16:29
Woher kommt auf im Desktop-Chrome-Browser eigentlich nun das "FHEM Loading"-Image?
Aus deinem Skin? Oder ist das neu in FHEM? Finde ich ganz unglücklich.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 09 August 2019, 13:43:24
Leider nicht.
Komisch, ich habe mir zwei Listen erstellt, ein paar Einträge hinzugefügt und ein weblink erstellt: define Todoist weblink htmlCode {todoist_Html()}so werden mir alle Liste angezeigt, sowohl in Raum (gruppiert und ungruppiert), als auch in der Device-Übersicht.

Ich habe gerade auch nochmal das Layout der Listen angepasst.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 09 August 2019, 13:49:40
Woher kommt auf im Desktop-Chrome-Browser eigentlich nun das "FHEM Loading"-Image?
Aus deinem Skin? Oder ist das neu in FHEM? Finde ich ganz unglücklich.
Das habe ich hinzugefügt. Das hat den Grund, dass ich den Inhalt erst Anzeige, wenn alles modifiziert wurde, ansonsten hat man so ein "Flackern" wie beim f18 Style, was ich persönlich noch viel unschöner finde. Das bedeutet aber, dass bei Räumen mit vielen Geräten (wie "Everything"), ein wenig Zeit vergeht bis der Inhalt angezeigt wird. Der Nutze könnte dann denken, dass nichts passiert und lädt dann die Seite neu, was natürlich quatsch ist. Daher habe ich den Loading Screen eingebaut. Problem ist, dass ich das nicht direkt Optional gestalten kann, da zu dem Zeitpunkt die Einstellungen ja noch nicht geladen sind.

Du kannst den Loading Screen aber über CSS ausblenden:
#loadingOverlay {display: none}
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: mahowi am 09 August 2019, 14:03:12
Komisch, ich habe mir zwei Listen erstellt, ein paar Einträge hinzugefügt und ein weblink erstellt: define Todoist weblink htmlCode {todoist_Html()}so werden mir alle Liste angezeigt, sowohl in Raum (gruppiert und ungruppiert), als auch in der Device-Übersicht.

Ich habe gerade auch nochmal das Layout der Listen angepasst.
Zumindest beim Firefox im Büro wurde nur eine Liste angezeigt.

Jetzt sind alle zu sehen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 09 August 2019, 14:12:23
Zumindest beim Firefox im Büro wurde nur eine Liste angezeigt.

Jetzt sind alle zu sehen.
Dann war vielleicht noch die alte Version im Cache. Hauptsache es funktioniert jetzt. Habe es auch nochmal mit Firefox getestet, dort funktioniert es auch.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 09 August 2019, 14:13:59
Das habe ich hinzugefügt. Das hat den Grund, dass ich den Inhalt erst Anzeige, wenn alles modifiziert wurde, ansonsten hat man so ein "Flackern" wie beim f18 Style, was ich persönlich noch viel unschöner finde. Das bedeutet aber, dass bei Räumen mit vielen Geräten (wie "Everything"), ein wenig Zeit vergeht bis der Inhalt angezeigt wird. Der Nutze könnte dann denken, dass nichts passiert und lädt dann die Seite neu, was natürlich quatsch ist. Daher habe ich den Loading Screen eingebaut. Problem ist, dass ich das nicht direkt Optional gestalten kann, da zu dem Zeitpunkt die Einstellungen ja noch nicht geladen sind.

Du kannst den Loading Screen aber über CSS ausblenden:
#loadingOverlay {display: none}
Ich finde das Fhem loading image schön; es ist auch nützlich und es sollte bleiben.

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 09 August 2019, 14:21:15
Ich finde das Fhem loading image schön; es ist auch nützlich und es sollte bleiben.
Ich werde es aus genannten Gründen auf jeden Fall implementiert lassen. Ich könnte höchstens noch eine Option hinzufügen, welche automatisch dem Css-Attribut den Code hinzufügt um es auszublenden. Wäre vielleicht auch sinnvoll um dann auch die Hintergrundfarbe entsprechend der Einstellungen zu übernehmen, wobei das aber leider nicht Endgerät-spezifisch geht, was wiederum dagegen spricht.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: adnan am 09 August 2019, 19:00:19
safari wieder OK!
Danke!.

BTW: super theme was du hier zusammen zauberst! mein favorite! sehr cool.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 09 August 2019, 20:46:07
Hmm, mir fehlt das Fading vom PlotBG.
Egal ob mit ober ohne attr plotEmbed.

Und ja, ich weiß das die Farbe sch.... aussieht, ist nur zum testen gewesen grade :)

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 09 August 2019, 20:54:41
Wenn ich die Features "Befehlsverlauf" und "Gerätesuche" deaktiviere, kommt dann die normale Auswahl wieder? Das scheint bei mir nicht zu funktionieren. Auf einem Smartphone lässt sich das nämlich nicht bedienen. Ich habe mir aus der Browserhistorie sonst immer diverse lange Syntax-Zeilen geholt.



In der aktuellen Version scheint "Tabellen-Verhalten beibehalten" nicht mehr zu funktionieren.



Die Slider sehen merkwürdig aus. Siehe Anhänge.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: PatrickR am 09 August 2019, 21:21:05
Guten Abend!

Zunächst ein großes Lob an den Style und vor allem die Fleißarbeit. Dazu zwei Fragen/Anmerkungen:


Danke!

Patrick
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 10 August 2019, 12:45:52
Sonos sieht jetzt auch wieder top aus. Danke  8)

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 10 August 2019, 12:48:13
Hmm, mir fehlt das Fading vom PlotBG.
Das gab es bisher auch noch nicht. Gibt nun eine neue Farboption: plotBGgradient.


Wenn ich die Features "Befehlsverlauf" und "Gerätesuche" deaktiviere, kommt dann die normale Auswahl wieder? Das scheint bei mir nicht zu funktionieren. Auf einem Smartphone lässt sich das nämlich nicht bedienen. Ich habe mir aus der Browserhistorie sonst immer diverse lange Syntax-Zeilen geholt.
Bei mir funktioniert das, gerade getestet auf Chrome (Windows und Android).

In der aktuellen Version scheint "Tabellen-Verhalten beibehalten" nicht mehr zu funktionieren.
Danke, ist gefixed.

Die Slider sehen merkwürdig aus. Siehe Anhänge.
Mal wieder ein Apple Ding. Werde mich drum kümmern und dabei auch mal die Browserhistory mit Safari testen.


  • Besteht die Möglichkeit, in der Deviceübersicht den Devicesnamen, den Status und die webcmds quasi in Spalten zu trennen wie in den anderen Styles? Das wirkt etwas unruhig (Siehe Screenshot der Gruppe Auto).
  • Die Geräteicons (also die links neben dem Devicenamen) wirken etwas eckig. (Siehe Screenshot der Gruppe Fernbedienungen)
- Das geht mit der experimentellen Funktion "Tabellen Verhalten beibehalten" (welche ich gerade gefixed habe)
- Das liegt an dem Icon an sich, das ist nur 18x18 Pixel groß. Ich würde empfehlen nur SVGs als Icons auszuwählen. Es werden nämlich alle Icons auf die gleiche Größe skaliert, alles was kleiner ist, wird entsprechend hochskaliert, was bei Rastergrafiken dann zu Pixelbildung führt.


Sonos sieht jetzt auch wieder top aus. Danke  8)
Sehr schön! gerne doch...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 10 August 2019, 14:00:29
Danke für die Fixes.

Nutzt du zufällig AutoShutterControl?
Wenn man dort "get showShuttersInformation"'aufruft, so wird das Dialogfenster falsch formatiert angezeigt. Die Spalten sind vermutlich recht schmal und es passt nur ein Buchstabe in die Spalte. Der Text läuft somit nach unten.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: kaihs am 12 August 2019, 22:23:11
Mir ist gerade aufgefallen, dass bei dem Kopieren der Ausgabe z. B. eines List Kommandos hinter jeder Zeile eine Leerzeile eingefügt wird.

Also
list global

Die Ausgabe markieren und in die Zwischenablage kopieren, dann z. B. in einen Texteditor einfügen.
Es erscheint überflüssige Leerzeilen.

Mit einem anderen Style (z. B. f18) ist das nicht so.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 13 August 2019, 09:09:26
Wenn man dort "get showShuttersInformation"'aufruft, so wird das Dialogfenster falsch formatiert angezeigt. Die Spalten sind vermutlich recht schmal und es passt nur ein Buchstabe in die Spalte. Der Text läuft somit nach unten.
Danke, Problem gelöst.


Die Ausgabe markieren und in die Zwischenablage kopieren, dann z. B. in einen Texteditor einfügen.
Es erscheint überflüssige Leerzeilen.
Das kann ich nicht nachstellen. Habe es gerade mit "list global" getestet, den Output habe ich in Notepad++ eingefügt -> keine Leerzeichen am Ende.
Welchen Browser nutzt du?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 13 August 2019, 09:44:03
Vielen Dank.

Folgendes ist mir noch aufgefallen. Die Beschriftung "Plot Control" bricht um.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 13 August 2019, 10:00:44
Folgendes ist mir noch aufgefallen. Die Beschriftung "Plot Control" bricht um.
Das dürfte eigentlich nur passieren, wenn eine Gruppe schmäler wird als sie sein darf (300px)...was sie ja aber nicht sein darf  ???
Oder wird das bei dir umgebrochen obwohl in der Zeile noch genug Platz ist? Auf Chrome und Firefox passiert das bei mir nämlich nicht.

Ich habe den Zeilenumbruch für Plotcontrol nun mal grundlegend unterbunden, wobei das eigentlich nicht nötig sein sollte
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 13 August 2019, 10:24:06
Sonos sieht jetzt auch wieder top aus. Danke  8)

VG Sebastian

Hallo,
die Steuerung von Sonos ist wieder etwas verrutscht, die Abstände zwischen den Buttons sind zu groß
und damit fehlen dann ein paar Steuerelemente. Habs heute erst bemerkt, müsste aber mit den letzten beiden Updates
gekommen sein...  :o

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 13 August 2019, 11:11:23
Hallo,
die Steuerung von Sonos ist wieder etwas verrutscht, die Abstände zwischen den Buttons sind zu groß
und damit fehlen dann ein paar Steuerelemente. Habs heute erst bemerkt, müsste aber mit den letzten beiden Updates
gekommen sein...  :o

VG Sebastian
Danke, damit das korrekt aussieht muss ein CSS Parameter gesetzt werden, welcher aber einen Konflikt mit "Tabellenverhalten beibehalten" verursacht. Ist jetzt gefixed.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: kaihs am 13 August 2019, 18:52:47
Das kann ich nicht nachstellen. Habe es gerade mit "list global" getestet, den Output habe ich in Notepad++ eingefügt -> keine Leerzeichen am Ende.
Welchen Browser nutzt du?

Firefox 68.0.1 unter Linux.

Mit Chromium tritt das Problem in der Tat nicht auf.

Muss wohl irgendeine Kombination aus deinem Style und dem Browser sein, mit f18 tritt es wie gesagt nicht auf.
Ist aber auch nicht so tragisch als dass du da jetzt lange nach suchen müsstest.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 14 August 2019, 08:48:15
Firefox 68.0.1 unter Linux.

Mit Chromium tritt das Problem in der Tat nicht auf.

Muss wohl irgendeine Kombination aus deinem Style und dem Browser sein, mit f18 tritt es wie gesagt nicht auf.
Ist aber auch nicht so tragisch als dass du da jetzt lange nach suchen müsstest.
Habe es auch mal mit Firefox getestet, da passiert das bei mir auch. Das lag daran, dass ich jede Ausgabezeile in ein <p> Tag gekapselt habe um sie formatieren zu können. Firefox hängt bei p-Tags dann aber wohl jeweils eine zusätzliche Leerzeile hinten an. Habe es nun auf ein <span> Tag geändert, damit passiert das nicht mehr.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 16 August 2019, 20:52:16
@xanker

Wegen dir wurde viel in letzter Zeit gefixt oder geändert. Deshalb frage ich hier, vielleicht hast du die Antwort parat.
Ich habe nicht nur in deinem Skin seit neusten das Problem, das der fhemlog-Teil nicht richtig dargestellt wird.
Div-Elemente tauchen auf.

2019.08.16 20:40:30 2 : backup include:
2019.08.16 20:40:30 2 : backup include:
2019.08.16 20:40:30 2 : Backup with command: tar czf ./backup/FHEM-20190816_204030.tar.gz "./www" "./MSwitch_backup.cfg" "./script" "./docs" "./divoom1" "./configDB.pm" "./demolog" "./95_WebViewControl.pm" "./FileLog_ThermoHygro_KU.log" "./nanoCUL" "./hm_tc_it_wm_w_eu_update_V1_4_002_170213.eq3" "./hm_cc_rt_dn_update_V1_5_003_171004.eq3" "./cache" "./README_DEMO.txt" "./restoreDir" "./MAINTAINER.txt" "./fhem.cfg.debug" "./log" "./WebStreams.txt" "./audio" "./FHEM" "./contrib" "./fhem.pl" "./certs" "./divoom" "./CHANGED" "./Holzofen" "./fhem.cfg.demo" "./regSave.cfg" "./fhem.cfg" "./unused"
2019.08.16 20:40:30 1 : backup tar (child): ./backup/FHEM-20190816_204030.tar.gz: Cannot open: Permission denied tar (child): Error is not recoverable: exiting now tar: ./backup/FHEM-20190816_204030.tar.gz: Cannot write: Broken pipe tar: Child returned status 2 tar: Error is not recoverable: exiting now
2019.08.16 20:40:30 1 : Something went wrong during backup: tar (child): ./backup/FHEM-20190816_204030.tar.gz: Cannot open: Permission denied tar (child): Error is not recoverable: exiting now tar: ./backup/FHEM-20190816_204030.tar.gz: Cannot write: Broken pipe tar: Child returned status 2 tar: Error is not recoverable: exiting now
2019.08.16 20:40:30 1 : update was canceled. Please check manually!
2019.08.16 20:40:30 1 :
2019.08.16 20:40:30 1 : fhem-flex
2019.08.16 20:40:31 1 : RMDIR: ./restoreDir/update/2019-08-05
2019.08.16 20:40:31 1 : UPD www/pgm2/flex.js
2019.08.16 20:40:31 1 : UPD www/pgm2/dashboard_flex.css
2019.08.16 20:40:32 1 : UPD www/pgm2/flexstyle.css
2019.08.16 20:40:32 1 : saving fhem.cfg
2019.08.16 20:40:32 1 : saving ./log/fhem.save
2019.08.16 20:40:32 1 :
2019.08.16 20:40:32 1 : New entries in the CHANGED file:
2019.08.16 20:40:32 1 : - 2019-08-14: wrapping log lines in span-tags instead of p-tags
2019.08.16 20:40:32 1 : - 2019-08-13: optimized sonos player
2019.08.16 20:40:32 1 : - 2019-08-13: optimized sonos player
2019.08.16 20:40:32 1 : - 2019-08-13: fixed: some scrollable containers had too wide width
2019.08.16 20:40:32 1 : - 2019-08-13: changed word-break of svgZoomControl to keep-all
2019.08.16 20:40:32 1 : - 2019-08-13: fixed word-break of svgZoomControl
2019.08.16 20:40:32 1 : - 2019-08-13: fixed word-break of FW_okDialog
2019.08.16 20:40:32 1 : - 2019-08-10: new color: plotBGgradient
2019.08.16 20:40:32 1 : - 2019-08-10: fixed table behaviour
2019.08.16 20:40:32 1 : - 2019-08-09: fixed todoist draghandler width
2019.08.16 20:40:32 1 : - 2019-08-09: removed margin of grouped todoist lists
2019.08.16 20:40:32 1 : - 2019-08-09: added border to block tables which are not within group
2019.08.16 20:40:32 1 : - 2019-08-09: fixed plex player layout
2019.08.16 20:40:32 1 : - 2019-08-09: fixed gradients of plots with plotEmbed 1
2019.08.16 20:40:32 1 : - 2019-08-09: fixed some caused due to the loading screen
<div class='fhemlog'>2019.08.16 20:40:32 1 :  - 2019-08-08: fixed loop on change option of select</div><div class='fhemlog'>2019.08.16 20:40:32 1 :  - 2019-08-08: fixed svg plot issues</div><div class='fhemlog'>2019.08.16 20:40:32 1 :  - 2019-08-08: changed background of loading screen to gray</div><div class='fhemlog'>2019.08.16 20:40:32 1 :  - 2019-08-08: optimized: set defs of plots within javascript to be independet of svg_defs.svg</div><div class='fhemlog'>2019.08.16 20:40:32 1 :  - 2019-08-08: optimized: independently scroll grouped module html output. fixed cropped content of callist</div><div class='fhemlog'>2019.08.16 20:40:32 1 :  - 2019-08-08: added loading screen</div><div class='fhemlog'>2019.08.16 20:40:32 1 :  - 2019-08-08: fixed: edit mode also started on click</div><div class='fhemlog'>2019.08.16 20:40:32 1 :  - 2019-08-08: optimized: avoid rearrange of webcmds on page load</div><div class='fhemlog'>2019.08.16 20:40:32 1 :  - 2019-08-08: some performance improvements</div><div class='fhemlog'>2019.08.16 20:40:32 1 :  - 2019-08-06: minor bug fix</div><div class='fhemlog'>2019.08.16 20:40:32 1 :  - 2019-08-06: removed word-break from custom module output</div><div class='fhemlog'>2019.08.16 20:40:32 1 : ... rest of lines skipped.</div><div class='fhemlog'>2019.08.16 20:40:32 1 : </div><div class='fhemlog'>2019.08.16 20:40:32 1 : update finished, "shutdown restart" is needed to activate the changes.</div><div class='fhemlog'>2019.08.16 20:40:32 1 : </div><div class='fhemlog'>2019.08.16 20:40:32 1 : Please consider using the global attribute sendStatistics</div>2019-08-16 20:40:32 Global global UPDATE
2019.08.16 20:42:02 4 : Connection accepted from WEBphone_192.168.178.13_54340
2019.08.16 20:42:02 4 : WEBphone_192.168.178.13_54340 GET /fhem?room=01%2eHeizung; BUFLEN:0
2019.08.16 20:42:02 4 : WEBphone: / RL:60375 / text/html; charset=UTF-8 / / Cache-Control: no-cache, no-store, must-revalidate
2019.08.16 20:42:04 4 : Connection accepted from WEBphone_192.168.178.13_54341
2019.08.16 20:42:05 4 : WEBphone_192.168.178.13_54341 GET /fhem?room=01%2eHeizung; BUFLEN:0
2019.08.16 20:42:05 4 : WEBphone: / RL:60375 / text/html; charset=UTF-8 / / Cache-Control: no-cache, no-store, must-revalidate
2019.08.16 20:43:00 3 : KesselStatusEta: Read callback: Error: connect to http://192.168.178.28:8080 timed out

edit:
Bitte Error's ignorieren. Das sind Fakedevices zum testen :D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: nuccleon am 17 August 2019, 23:41:43
Also mit dem letzten Update ist was mit den Zeilenumbrüchen kaputt gegangen (s. Anhang).
Chrome + Mobile
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: TomLee am 19 August 2019, 12:20:02
Hallo,

habe gestern bei mir auch mal den Style aktiviert. Sehr cool. Du hast ja in deinem Style fast alle meine Wünsche (https://forum.fhem.de/index.php/topic,99258.msg926299.html#msg926299) bezüglich f18 umgesetzt. In den Einstellungen war mir gleich die integrierte Gerätesuche ins Auge gesprungen, heute morgen erst der Tageszeiten Wechsel  :P

Zitat
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.

Da würd ich gleich mal fragen wollen :
Was hältst du von meiner Idee, die Gerätesuche um die Auswahl der FHEM-Befehle (die ganz oben in der commandref) zu erweitern ?
Ob das eine sinnvolle Funktion ist darüber hat sicher jeder eine andere Meinung, ich find sie gut.
Jetzt wo ich die Umsetzung der Gerätesuche /Befehlszeile in dem Style sehe hätte ich folgende Idee zu Auswahl der FHEM-Befehle, aber keine Ahnung von der Programmierung. :P

Insgesamt 3 Textfelder/Kombifelder die je nach Verwendung ein/ausgeblendet werden.

Den Abstand  zwischen + und Titel (Standard fhem) etwas größer machen und dort das 1. unsichtbare Textfeld vorsehen welches nur beim auswählen (klick ins Textfeld) die FHEM-Befehle zu Auswahl stellt.

Verlässt man das 1. Textfeld wird das 2. Textfeld aktiviert das direkt hinter dem 1. Textfeld positioniert wird und beim auswählen (klick ins Textfeld) die Gerätesuche Funktion bereitstellt.

Verlässt man das 2. Textfeld wird das erste und zweite Textfeld ausgeblendet, das 3. Textfeld (Befehlszeile) wird mit den Werten des ersten und zweiten Textfeld mit Leerzeichen getrennt gefüllt und an deren Position angezeigt/eingeblendet.

Möchte man die Fhem-Befehle Funktion gar nicht nutzen (vor dem Titel) klickt man hinter den Titel wo sich das 2.Textfeld standardmäßig befindet und diese übergibt beim verlassen dann nur den einen Wert an das 3.Textfeld die eigentliche Befehlszeile.

Hoffe man kann in etwa nachvollziehen auf was ich aus bin ;D


Gruß

Thomas
 
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 19 August 2019, 13:33:43
Ich habe nicht nur in deinem Skin seit neusten das Problem, das der fhemlog-Teil nicht richtig dargestellt wird.
Div-Elemente tauchen auf.
Also mit dem letzten Update ist was mit den Zeilenumbrüchen kaputt gegangen (s. Anhang).
Chrome + Mobile
Ich kann beide Probleme nicht nachstellen. Hat noch jemand diese Probleme?


habe gestern bei mir auch mal den Style aktiviert. Sehr cool. Du hast ja in deinem Style fast alle meine Wünsche (https://forum.fhem.de/index.php/topic,99258.msg926299.html#msg926299) bezüglich f18 umgesetzt. In den Einstellungen war mir gleich die integrierte Gerätesuche ins Auge gesprungen, heute morgen erst der Tageszeiten Wechsel  :P
Freut mich, dass deine Wünsche mit dem Style umgesetzt sind  :)

Bei deinem Vorschlag steige ich noch nicht ganz durch...
Den Abstand  zwischen + und Titel (Standard fhem) etwas größer machen und dort das 1. unsichtbare Textfeld vorsehen welches nur beim auswählen (klick ins Textfeld) die FHEM-Befehle zu Auswahl stellt.
In welcher Form zur Auswahl stellt? Ähnlich wie bei der Geräte-Suche, also 3 Zeichen eintippen und dann Vorschläge anzeigen?

Verlässt man das 1. Textfeld wird das 2. Textfeld aktiviert das direkt hinter dem 1. Textfeld positioniert wird und beim auswählen (klick ins Textfeld) die Gerätesuche Funktion bereitstellt.
Was bedeutet "verlassen"? Irgendwo hinklicken? Das ist nicht gerade intuitiv.

Verlässt man das 2. Textfeld wird das erste und zweite Textfeld ausgeblendet, das 3. Textfeld (Befehlszeile) wird mit den Werten des ersten und zweiten Textfeld mit Leerzeichen getrennt gefüllt und an deren Position angezeigt/eingeblendet.
Selbige Frage wie zuvor.

Möchte man die Fhem-Befehle Funktion gar nicht nutzen (vor dem Titel) klickt man hinter den Titel wo sich das 2.Textfeld standardmäßig befindet und diese übergibt beim verlassen dann nur den einen Wert an das 3.Textfeld die eigentliche Befehlszeile.
auch das ist nicht sonderlich intuitiv, da es keine Indikatoren für die verschiedenen Textfelder gibt. Nutzer die das nicht wissen, verwirrt das eher.

Wenn ich dich richtig verstehe willst du einfach eine Autovervollständigung für FHEM Befehle. Das fände ich auch gut und habe mir selbst schon Gedanken dazu gemacht, allerdings noch keine simple Umsetzung gefunden.
Problem: die ganzen grundlegenden FHEM Befehle (welche oben in der Commandref stehen), haben ja unterschiedliche Parameter. Für jeden einzelnen Befehl die möglichen Parameter (bzw. deren mögliche Werte) zu definieren, ist mir zu viel Aufwand. Beispiel: set/get/attr erfordern dann ein Device (bzw. Dev-Spec), update/sleep/shutdown etc. erfordern ganz andere Parameter. Für letzteres wäre dann eine Device-Suche quatsch.

Meines Wissens nach gibt es keine Möglichkeit von einem FEHM-Befehl die möglichen Parameter (bzw. deren mögliche Werte) zu parsen. Dies ist auch der Grund warum ich das dann nicht implementiert habe.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: TomLee am 19 August 2019, 18:09:27
Zitat
In welcher Form zur Auswahl stellt? Ähnlich wie bei der Geräte-Suche, also 3 Zeichen eintippen und dann Vorschläge anzeigen?

Eher nur 2 Zeichen und die Auswahl eben auf die FHEM-Befehle begrenzen die nur eine Angabe eines Device benötigen.
Das schonmal mehr wie FHEMWEB vorher hergab.

Zitat
Was bedeutet "verlassen"? Irgendwo hinklicken? Das ist nicht gerade intuitiv.

Sry, nachdem man die Eingabetaste betätigt hat als Bestätigung.

Vorausgesetzt ein Titel wäre vergeben: einfach den Abstand zwischen + und Titel größer/weiter machen, dann hatte ich mir vorgestellt klickt man in diese freie Fläche.(eventuell mit Punkt vorbelegt ?)

Deaktiviere mal die Uhr und vergebe keinen Titel ( und ändere nichts an den Farbvorgaben (hab ich mich auch noch nicht beschäftigt), wie intuitiv findest (im Sinne von suchen/finden) die Befehlszeile/Gerätesuche.
Mir war (nur im ersten Moment) nicht klar wo die Befehlszeile ist und der Titel nach Eingabe verschwindet.

Zitat
auch das ist nicht sonderlich intuitiv, da es keine Indikatoren für die verschiedenen Textfelder gibt. Nutzer die das nicht wissen, verwirrt das eher.

Wie gesagt im ersten Moment war mir bei flex auch nicht klar wo die Befehlszeile ist, jetzt schon und genau so verhält es sich bei meiner Idee man sieht das Feld zwar nicht aber man weiß  (einmal genutzt) da ist eins zwischen + und Titel (meinetwegen vorbelegt mit einem Punkt, irgendwann drückt man den mal)

Also: wählt/klickt man in die frei Fläche nach dem + steht die FHEM-Befehl Auswahl zur Verfügung, wählt man einen Befehl aus und verlässt/Eingabetaste das Textfeld verschwindet der Titel und wird durch das Textfeld der Gerätesuche (meinetwegen dann vorbelegt mit drei Punkten) ersetzt, klickt man in dieses und trifft eine Auswahl oder schreibt von Hand und verlässt/Eingabetaste das Textfeld wird die richtige Befehlzeile ab dem + mit den zwei Werten eingeblendet und die anderen zwei Textfelder (FHEM-Befehl/Gerätesuche) wieder aus.



Am flex Style sieht man am Zuspruch was der Trend ist und da gehört diese Funktion meiner Meinung nach einfach dazu.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 20 August 2019, 04:53:08
Guten Morgen,

mir ist grade wieder mal eine kleinigkeit aufgefallen:
Bei "Edit SVG --> Scho preprocessed input" fehlt in dem Popup-Fenster der Scrollbalken.

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Invers am 20 August 2019, 15:50:54
Hi, da ich mit f18 momentan Probleme habe, die nicht nachgestellt und somit nicht gefunden oder behoben werden können, wollte ich mal Flex probieren, der mir sehr gut gefällt. Danke dafür.
Dabei sind mir folgende Dinge aufgefallen:

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.

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?

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?

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?

Ich will nicht nerven, aber du hast ja geschrieben, dass Fragen willkommen sind. Sicherlich habe ich die meisten Sachen durch meine Unkenntnis selber verursacht.

Danke im Voraus für Verständnis und Tipps.

EDIT: Alles am PC-Monitor! Handy und Tab hab ich noch nicht probiert.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag 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. :)
Nur ein Problem habe ich, in meinem Floorplan sind manche Symbole jetzt riesen groß  :-\.
Woran kann das liegen ?
gruß
speed
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag 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?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Reinhart am 22 August 2019, 09:30:31
Ich habe gerade mal den neuen Style flex ausprobiert.
Super genial , einfach klasse gemacht.
Vielen Dank dafür. :)
Nur ein Problem habe ich, in meinem Floorplan sind manche Symbole jetzt riesen groß  :-\ .
Woran kann das liegen ?
gruß
speed

hatte auch das Problem und habe einfach css kopiert (https://forum.fhem.de/index.php/topic,91333.msg944056.html#msg944056) und du umgehst den Fehler.

LG
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Invers am 22 August 2019, 10:18:54
Ich habe das Problem, dass sich echt gar keine Readingsgroup 2-spaltig darstellen lässt. Die RGs gehen immer über die gesamte Seitenbreite. Das Verhalten ist bei RGs besonders lästig, da man ja dort sehr viel mit Layouts arbeitet.
Funktioniert das bei jemandem 2-spaltig? Dann würde ja der Fehler bei mir liegen. Wie gesagt, nur Readingsgroups. Auch drag and drop funktioniert da nicht.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: speed am 22 August 2019, 11:30:01
@Reinhart
jetzt nochmal für Dumme, was hast du kopiert ?
danke
speed
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Reinhart am 22 August 2019, 11:42:27
 den /opt/fhem/www/pgm2/darkfloorplanstyle.css nach f18floorplanstyle.css, d.h. in deinem Fall nach flexfloorplanstyle.css!

Dann hast du um Floorplan den gewohnten Style und nichts verschiebt oder vergrößert sich.

LG
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: speed am 22 August 2019, 11:48:43
Ok, hat geklappt !!  ;D
Vielen Dank
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 22 August 2019, 14:59:17
@Invers: Readingsgroup in eine group reinstecken, dann klappts mehrspaltig :)

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Invers am 22 August 2019, 15:41:14
Das hatte ich schon probiert. Es funktioniert aber nicht wirklich. Dann passt die RG zwar in das 2-spaltige Layout, aber verzerrt wird die RG ja trotzdem noch dargestellt. Die zusätzliche Anzeige des Gruppennamens ist dann auch suboptimal.
Readingsgroups müssten, wie in jedem Style bisher geschehen, extra behandelt werden.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 22 August 2019, 18:58:31
Gruppenname wird nicht angezeigt, wenn er gleich lautet wie die RG selbst.
Und bei mir wird keine RG verzerrt angezeigt, egal, ob ich sie auf einer, zwei oder drei Spalten habe......
Sieht auch im dark-Style fast gleich aus (ausser dem RG-in-group-Rahmen)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Invers am 23 August 2019, 15:40:27
OK, danke dir. 2-spaltig geht ja nun. Mit dem Rest kann man prima leben. Die Namensanzeige werde ich in der RG blocken, geht ja auch, kann man dann halt nicht mehr den Namen anklicken.
Bei Gleichheit des Gruppennamens mit dem RG-Namen sehe ich keine Änderung.

OT: Sag mal, müsste es in deiner Fusszeile nicht "verschwende" statt "verwende" heissen?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 24 August 2019, 12:13:48
Hey Sebastian,
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?

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 24 August 2019, 18:23:30
Zitat
Momentan ja nur in RAW.
Also, bei mir ist der Codemirror auch im Def-Feld vorhanden :O

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 24 August 2019, 19:17:08
Also, bei mir ist der Codemirror auch im Def-Feld vorhanden :O

Bei mir nicht. Und kann es mir grad nicht erklären. Selbst aus einem frischen, aktuellen und fast leeren Testsystem nicht...  :o

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag 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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 26 August 2019, 11:32:49
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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 26 August 2019, 12:15:08
Ah noch einer mit codemirror-Problemen...
Aber was ist "brave"?  ::)
VG Sebastian
https://brave.com/ (https://brave.com/)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 26 August 2019, 13:00:38
https://brave.com/ (https://brave.com/)
Ah danke, wieder was gelernt  ;)
VG Sebastian


Gesendet von iPhone mit Tapatalk
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: eisenhauer1987 am 30 August 2019, 09:59:22
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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 30 August 2019, 10:10:12
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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag 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.

Gruss
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 30 August 2019, 10:44:21
Dann könnte das auch an longpoll/websocket liegen, oder?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 30 August 2019, 11:45:36
Leider nicht. Hab's grad getestet
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 03 September 2019, 10:10:24
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:


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.

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)

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?

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.

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 :)



Ich habe gerade mal den neuen Style flex ausprobiert.
Super genial , einfach klasse gemacht.
Vielen Dank dafür. :)
Freut mich und gerne doch :)

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.




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?
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.



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
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?



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.



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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Maui am 03 September 2019, 10:48:04
Moin,

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

Gruß
Maui
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: sash.sc am 03 September 2019, 11:17:13
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

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: the ratman am 03 September 2019, 11:17:52
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?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Invers am 03 September 2019, 15:28:43
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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 September 2019, 11:41:30
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.


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 :)


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.


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.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 September 2019, 11:56:10
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
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Invers am 04 September 2019, 14:00:34
Funktioniert ausgezeichnet. Vielen Dank.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Invers am 04 September 2019, 19:49:34
Ich hab noch etwas gefunden.
Wenn ich im mehrspaltigen Layout in einem DOIF auf DEF klicke, fehlt der Anfasser in der waagerechten Scrollleiste. Die Leiste selbst ist sichtbar.
Senkrecht ist alles ok. 1--spalrtig hab ich nicht probiert.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 05 September 2019, 10:05:05
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?
Irgendwie scheint sich das Problem von selbst behoben zu haben. Ich habe den Codemirror nun wieder aktiviert.


Nur ein Problem habe ich, in meinem Floorplan sind manche Symbole jetzt riesen groß  :-\.
Ich habe vorerst mal eingaubt, dass automatisch der darkfloorplanstyle verwendet wird. Ich werde aber noch den Floorplan dem flex Style anpassen.


Ich hab noch etwas gefunden.
Wenn ich im mehrspaltigen Layout in einem DOIF auf DEF klicke, fehlt der Anfasser in der waagerechten Scrollleiste. Die Leiste selbst ist sichtbar.
Senkrecht ist alles ok. 1--spalrtig hab ich nicht probiert.
Danke, ist gefixed.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 05 September 2019, 10:16:46
Zitat
Irgendwie scheint sich das Problem von selbst behoben zu haben. Ich habe den Codemirror nun wieder aktiviert.

Also bei mir hat sich nach dem Update von heute NICHTS ändert. Codemirror nur in RAW verfügbar.
Aber hey, ich kann damit leben...   :)

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 05 September 2019, 10:25:06
Also bei mir hat sich nach dem Update von heute NICHTS ändert. Codemirror nur in RAW verfügbar.
Aber hey, ich kann damit leben...   :)
Komisch, sollte eigentlich gehen. Da bleibt mir nur mal wieder meine Standard-Frage zu stellen: Cache geleert bzw. mit STRG+F5 neu geladen?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 05 September 2019, 10:34:34
Komisch, sollte eigentlich gehen. Da bleibt mir nur mal wieder meine Standard-Frage zu stellen: Cache geleert bzw. mit STRG+F5 neu geladen?

Jepp, alles gemacht. Darüber hinaus noch f18-Rückstände in styleDdata entfernt. Es bleibt dabei. Im DEF kein Codemirror  :-\
VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 05 September 2019, 10:39:12
Yeah, ich habe Codemirror jetzt endlich auch wieder im DEF - Whoop whoop  ;D

Ein erneutes update hat geholfen. Scheinbar ist das erste nicht richtig durchgelaufen. Warum auch immer...
VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 05 September 2019, 10:44:08
Yeah, ich habe Codemirror jetzt endlich auch wieder im DEF - Whoop whoop  ;D

Ein erneutes update hat geholfen. Scheinbar ist das erste nicht richtig durchgelaufen. Warum auch immer...
VG Sebastian
Sehr schön  :)

ps: "whoop whoop" gefällt mir, das sage ich auch immer...wir haben wohl mehr gemeinsam als nur den Vornamen  ;D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: eisenhauer1987 am 05 September 2019, 14:57:50
Ist gefixed

Danke :D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Invers am 08 September 2019, 11:02:08
Ich hätte einen Wunsch:
wenn man auf RAW fhem code-input klickt öffnet sich ein Fenster, um die Definition einzufügen/zu bearbeiten .....
Kann man dieses Fenster auch öffnen, wenn man beispielsweise in einem DOIF auf DEF klickt?
Bei mehrspaltiger Darstellung sind das Editieren und die Übersichtlichkeit doch sehr eingeschränkt.
natürlich würde das nicht jedem gefallen, daher fände ich eine Einstellmöglichkeit  sehr cool.

Könntest/würdest du so etwas zu programmieren in Erwägung ziehen?

Besten Dank im Voraus.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 08 September 2019, 11:15:22
Weils mir grad wieder einfällt:
Liegt das an einer Fehl-Konfiguration meinerseits, dass der Codemirror-Bereich im Popup nur halb so groß ist wie das Popup-Fenster selbst?

lg, Stefan
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 14 September 2019, 11:23:50
@xanker

Ich glaube das Autosetting für Tag/Nacht veranlasst Fhem
dazu, das etwas an den Einstellungen geändert wurde.
Im Fragezeichen gibt es Hinweise auf Stylesettings.
Titel: Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 14 September 2019, 16:37:41
Hey Xanker
Lange lange ist es her!! ;) ich verfolge deine Beiträge regelmässig. Und ich hab mich nicht mehr gemeldet, weil ich schlichtweg happy bin mit deinem Style. Nach wie vor grosses Tennis ;)

Heute ist mir aber (leider) wieder was aufgefallen. Wenn ich im Doif Device den Eventtoggle aktiviere werden die Events OHNE Zeilenumbrüche dargestellt. Auf Mac Chrome und Safari getestet.. just in case es wird dir langweilig..:)

Lg c
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: schwatter am 14 September 2019, 23:23:07
@xanker

Ich glaube das Autosetting für Tag/Nacht veranlasst Fhem
dazu, das etwas an den Einstellungen geändert wurde.
Im Fragezeichen gibt es Hinweise auf Stylesettings.

@xanker

Hier nun die Details
Last unsaved structural changes:
  attr WEBtablet styleData {
 "flex": {
  "colo...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Jamo am 22 September 2019, 14:47:47
Hallo Sebastian,
HAMMER HAMMER HAMMER.

Danke für den Style und die flexible Konfigurationsmöglichkeiten.
PayPal Unterstützung ist gemacht, danke nochmal !
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 22 September 2019, 15:09:09
Hallo Stefan,
HAMMER HAMMER HAMMER.

Danke für den Style und die flexible Konfigurationsmöglichkeiten.
PayPal Unterstützung ist gemacht, danke nochmal !

Stefan bist du doch oder?
Xanker hört auf Sebastian [emoji6]

VG Sebastian [emoji23]


Gesendet von iPhone mit Tapatalk
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: knopf_piano am 22 September 2019, 15:09:51
Danke für flex!!!
wie bekomme ich die fhem command beim flex eingeblendet?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 22 September 2019, 15:19:03
Danke für flex!!!
wie bekomme ich die fhem command beim flex eingeblendet?

Was meinst du mit fhem command?
Die Eingabezeile? Die ist zwischen der Uhr und dem +

VG Sebastian


Gesendet von iPad mit Tapatalk
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: knopf_piano am 22 September 2019, 15:48:51
hm, ne, bei mir nicht.
attr hiddenroom hat "input" nicht inbegriffen
attr WEB4Testing hiddenroom test,InfoPanel,DashboardRoom,logs,Unsorted,Commandref,Remote doc,RSS,Alarms,lightscene_test
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 22 September 2019, 16:20:22
Klick doch mal links neben Übersicht. Dann kannst du was eingeben.
VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: knopf_piano am 22 September 2019, 16:32:01
Vielleicht bin ich blind, aber ich kann da nix eingeben.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 22 September 2019, 16:34:32
So: Einfach neben das + klicken/tippen...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: knopf_piano am 22 September 2019, 16:37:23
 ::)
alright... danke!
:-)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 22 September 2019, 16:38:21
 ;D
Falls aktiviert sogar mit Historie (Pfeiltasten)
VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 22 September 2019, 16:39:30
::)
alright... danke!
:-)
Aber ich gebe zu es ist tatsächlich etwas versteckt...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: knopf_piano am 22 September 2019, 16:41:24
Historie: genau das wollte ich nutzen, jetzert geht's

Kann man das etwas besser kenntlich machen, oder den Raum/Uhrzeit separieren und das explizit als Eingabezeile markieren?
evtl. als option in den flex-settings...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 22 September 2019, 16:44:21
Historie: genau das wollte ich nutzen, jetzert geht's

Kann man das etwas besser kenntlich machen, oder den Raum/Uhrzeit separieren und das explizit als Eingabezeile markieren?
evtl. als option in den flex-settings...

Das kann nur der andere Sebastian (xanker) machen/entscheiden.
Wollte es aber auch schon mal vorschlagen.

+1 [emoji736]

VG Sebastian


Gesendet von iPad mit Tapatalk
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: mrfloppy am 23 September 2019, 08:34:51
Hallo
Ich habe ein Problem mit div Icons im flex Style.
Wie man im Bild sieht wird im dual Spaltenmodus das Icon bei
WEB sowie das devstateIcon beim Dockerimage in der linken Spalte nicht angezeigt.
Passiert auch wenn ich auf Custom wechsel und mehrere Spalten erzeugt werden wie zb bei Everything.

Fhem ist komplett neu aufgesetzt und noch nicht wirklich was drinnen.

Ne Idee wo der Fehler liegt.

Danke und LG
Thomas
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: the ratman am 23 September 2019, 09:17:40
sagts mal, was mach ich falsch?

unter "+" die commandozeile öffnen geht.
einen befehl (eigenen) eingeben "say test" geht nicht!
sobald ich ein leerzeichen eingeben will, verschwindet "say".

android 9, aktueller firefox.
keine ahnung, wie das aussehen sollte, aber die commandozeile bleibt immer einzeilig (nur weil ich da mal was von mehr zeilen gelesen hab, glaub ich)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: sash.sc am 27 September 2019, 23:39:57
Kann man eigentlich die Breite vom menu irgendwie einstellen, in pixel oder so ??

Gruß
Sascha
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: ComputerZOO am 28 September 2019, 01:08:57
sagts mal, was mach ich falsch?

unter "+" die commandozeile öffnen geht.
einen befehl (eigenen) eingeben "say test" geht nicht!
sobald ich ein leerzeichen eingeben will, verschwindet "say".

android 9, aktueller firefox.
keine ahnung, wie das aussehen sollte, aber die commandozeile bleibt immer einzeilig (nur weil ich da mal was von mehr zeilen gelesen hab, glaub ich)

Moin,
versuch es mal indem du in den Style-Einstellungen das Feld „Gerätesuche“ im Reiter „Kopfzeile/Eingabefeld“ deaktivierst.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: the ratman am 28 September 2019, 09:19:47
ändert leider nix am verhalten.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 28 September 2019, 10:28:17
ändert leider nix am verhalten.

Machst du sowas...?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 28 September 2019, 10:35:58
Ich habe noch was gefunden:
Wenn in global motd gesetzt ist, ist dort unter
attr global motd noneein Link, der selbige Aktion ausführt. In flex funktioniert dieser Link leider nicht...  :o

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: the ratman am 28 September 2019, 12:46:55
Machst du sowas...?
genau sowas mach ich, aber es verschwindet eben jedes wort, sobald ich ein neues schreiben will.

motd none hab ich eh schon immer, oder versteh ich dich jetzt falsch?

ich tu das mal ab mit: "der firefox ist schuld". immerhin hat er ja schon mal blödsinn gemacht mit dem skin auf android.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 28 September 2019, 13:05:10
genau sowas mach ich, aber es verschwindet eben jedes wort, sobald ich ein neues schreiben will.

motd none hab ich eh schon immer, oder versteh ich dich jetzt falsch?

ich tu das mal ab mit: "der firefox ist schuld". immerhin hat er ja schon mal blödsinn gemacht mit dem skin auf android.

motd war allgemein gesprochen. [emoji6]

Ich habe jetzt nochmal alle meine Geräte ausprobiert: Chrome/Firefox/Brave auf Win10, Chrome unter Android 5.1 sowie Safari unter iOS 13.1 und iPadOS 13.1 - überall kann ich Befehle eingeben. Getestet konkret mit „say Hallo Sebastian“.  [emoji2371]

VG Sebastian


Gesendet von iPad mit Tapatalk
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: the ratman am 28 September 2019, 14:02:57
bei mir gehts ja auch überall, von chrome bis zum fully browser zu 100%.
nur ned der firefox unter android. und genau der ist leider mein hauptbrowser.

hab mich grad entschieden - ab nu darf der chrome mein fhem warten ... wenns mir auch ned gefällt. aber nachdem scheints keiner ff auf android verwendet, will ich hier ned alle von ernsthaften problemen abhalten *g*.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: fervor am 30 September 2019, 23:12:25
Hallo,

bin gerade über den neuen Style gestolpert und habe gleich ein wenig damit herumprobiert.
Eins vorweg, es gefällt mir wirklich super.

Ich habe jedoch ein Problem mit der Darstellung auf dem Smartphone, siehe Anhang.
Leider wird alles zweizeilig dargestellt. Getestet mit Opera und dem Samsung Browser.
Kann man da noch was machen? Muss ich noch unter WEBphone ein attr setzen?


Dann noch eine Idee/ Frage.
Für die Darstellung von Charts verwende ich grafana und binde sie via weblink iframe ein. Das klappt soweit auch, nur wäre es schön, bei der Dualansicht die Möglichkeit zu haben so ein Chart über die gesamte Breite anzuzeigen - aktuell halt nur auf einer Hälfte. Es wäre ja vielleicht auch eine Möglichkeit speziell in einem Raum eine single Ansicht einzustellen.

besten Dank - bin gespannt ...

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 03 Oktober 2019, 13:26:14
Hallo Sebastian,

ich habe einen Fall, in dem Formatierungen im Attribut stateFormat anscheinend nicht richtig berücksichtigt werden:
Aussentemp.: [TH.Kuhlmannweg8:temperature]°C<br>
Temp<i><span style="font-size:12px">eff</span></i>: [$name:Temp_eff]°C<br>
<span style="font-size:14px"><i>Resistance: [$name:Widerstand] kΩ</i></span><br>
Forecast: [DWD.Wetter.Leverkusen:fc0_4_TTT]°C<br>
Forecast+1: [DWD.Wetter.Leverkusen:fc1_4_TTT]°C<br>
Resistance: [$name:Widerstand_Forecast] kΩ
oder
Aussentemp.: [TH.Kuhlmannweg8:temperature]°C<br>
Temp<i><sub><span style="font-size:12px">eff</span></sub></i>: [$name:Temp_eff]°C<br>
<span style="font-size:14px"><i>Resistance: [$name:Widerstand] kΩ</i></span><br>
Forecast: [DWD.Wetter.Leverkusen:fc0_4_TTT]°C<br>
Forecast+1: [DWD.Wetter.Leverkusen:fc1_4_TTT]°C<br>
Resistance: [$name:Widerstand_Forecast] kΩ
führt immer dazu, dass "eff" nach oben gesetzt wird.
Das gleiche scheint in der Zeile drunter mit "Resistance..." auch der Fall zu sein.
Die Formatierung mit <sub> </sub> ergibt das gleiche Ergebnis, d.h. "eff" wird nach oben gesetzt und die sub-Formatierung wird ignoriert.

Kannst du schauen, woran es liegt?

Viele Grüße Gisbert
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Kai-Alfonso am 09 Oktober 2019, 08:14:53
Hey

wollte mal danke sagen - ein toller Style mit sinnvollen Settings. Ich bin irgendwann dazu gekommen, mir meiner Frontend-Visu selber zu schreiben mit Smartvisu und jQuery mobile, aber will und kann da nicht alles abbilden - das meiste ist in der Endbenutzer-Gui auch gar nicht sinnvoll - FHEMWEB sehe ich eher als Backend-Visu.

FHEMWEB nutze ich schon seit Ewigkeiten mit dem ios7 Style, weil der im Browser und auch Mobil einfach für mich funktioniert, würde aber gerne sowas wie flex nutzen, da ich mir dann eine FHEMWEB Instanz (normal/smallscreen) sparen kann. Und ja, ich kenne auch das f18 Style :-)

Zu meinem Problem: Ich hab noch ein Darstellungsproblem bei einer Readingsgroup von dem Modul Autoshutterscontrol. Ich habe mal die Spalten auf Single gesetzt, trotzdem zeigt er mit die Readingsgroup-Tabelle anders an als wie in meinem Standard-Style. Hab Dir mal Screenshots angehangen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Kai-Alfonso am 09 Oktober 2019, 08:23:28
...und ich hab noch einen Bug(?) gefunden? Beim Abspeichern eines Style Presets kommt folgende Fehlermeldung:

flex.js line 332:
Uncaught TypeError: Cannot set property 'currentStyle' of undefined
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Kai-Alfonso am 09 Oktober 2019, 08:39:47
nutzen, da ich mir dann eine FHEMWEB Instanz (normal/smallscreen) sparen kann. Und ja, ich kenne auch das f18 Style :-)

Zu meinem Problem: Ich hab noch ein Darstellungsproblem bei einer Readingsgroup von dem Modul Autoshutterscontrol. Ich habe mal die Spalten auf Single gesetzt, trotzdem zeigt er mit die Readingsgroup-Tabelle anders an als wie in meinem Standard-Style. Hab Dir mal Screenshots angehangen.

Ich muss mich selber mal berichtigen: es ist ein Weblink, keine Readingsgroup
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xanker am 04 November 2019, 11:41:13
Hallo zusammen,

ich wollte mich nach langer Zeit auch mal wieder melden, ich bin nicht verschollen :)
Leider habe ich momentan keine Zeit um mich um den Style zu kümmern, da privat einige Dinge passieren/passierten: Neuer Job, anstehender Nachwuchs, Hauskauf/-renovierung. Sobald ich mal wieder etwas mehr Luft habe, werde ich mich um die aufgelaufenen Dinge kümmern, kann aber noch ein wenig dauern.

Grüße
Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Kai-Alfonso am 04 November 2019, 11:49:19
Hallo zusammen,

ich wollte mich nach langer Zeit auch mal wieder melden, ich bin nicht verschollen :)
Leider habe ich momentan keine Zeit um mich um den Style zu kümmern, da privat einige Dinge passieren/passierten: Neuer Job, anstehender Nachwuchs, Hauskauf/-renovierung. Sobald ich mal wieder etwas mehr Luft habe, werde ich mich um die aufgelaufenen Dinge kümmern, kann aber noch ein wenig dauern.

Grüße
Sebastian

Hallo Sebastian,

erstmal Glückwunsch und aus eigener Erfahrung mit den gleichen Themen kann ich dir sagen....vergiss es zu planen - das alles verschlingt so eine Unmenge von Zeit, das man zu nichts kommt, bzw nur in Hektik schnell was machen kann :-)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: sash.sc am 04 November 2019, 15:45:45
Hallo zusammen,

ich wollte mich nach langer Zeit auch mal wieder melden, ich bin nicht verschollen :)
Leider habe ich momentan keine Zeit um mich um den Style zu kümmern, da privat einige Dinge passieren/passierten: Neuer Job, anstehender Nachwuchs, Hauskauf/-renovierung. Sobald ich mal wieder etwas mehr Luft habe, werde ich mich um die aufgelaufenen Dinge kümmern, kann aber noch ein wenig dauern.

Grüße
Sebastian
Dann drücke ich dir bzw euch die Daumen das alles gut geht!

Gruß Sascha

Gesendet von meinem MI 9 mit Tapatalk

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: the ratman am 21 November 2019, 12:27:09
hiho,
da ich flex mittlerweile auch ernsthaft verwende, weil das ding einfach x mal besser als mein eigenes skin ist, fällt mir leider ne kleinigkeit auf:

ich verwende das modul proplanta mit 14 tage-vorhersage. beim auflisten des moduls kriegt er scheints timeouts. es erscheint (meist 2 mal) ein gelbes banner mit der frage, ob abgewartet oder abgebrochen werden soll. das laden der seite dauert ne halbe ewigkeit. wenn man mal "performance verbessern" anklickt, gehts problemlos auf meinem pc mit firefox.
könnte man da was dran drehen? ich denke, die java-scripten, die da ausgestellt werden, werden an anderer stelle benötigt, oder?

btw - auswirkungen (bis auf die wartezeit) hat das scheints keine weiteren auf fhem - somit ists nicht wirklich lebenswichtig, sondern eher als frage zu sehen.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: PatrickR am 25 November 2019, 11:19:36
Hi!

Erstmal noch einen Herzlichen Dank für das Skin. Damit kommt FHEM endlich auch visuell in der heutigen Zeit an.

Aktuell steige ich von Chrome auf Firefox um und habe das Problem, dass die Darstellung von SVGs (in Gruppen) nicht korrekt ist. Der Titel wird in font-family: Times dargestellt und die Beschriftung der X-Achse ist nur noch in Ansätzen erkennbar. Unter Chromium sieht auf dem gleichen System alles perfekt aus.

Patrick
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: binford6000 am 26 November 2019, 11:32:48
Hallo,
ich habe auch noch etwas gefunden. Beim Modul "MSwitch" wird die Liste der Geräte falsch dargestellt.

VG Sebastian
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: PSI69 am 26 November 2019, 12:47:52
Ich habe auch noch 'einen':

Der DEF Editor bei DOIFs ist von der Größe nicht mehr skalierbar - ich habe mir da gestern 'den Wolf' gescrollt und es war schwierig den Überblick im Code zu behalten (Catalina mit Firefox & Safari getestet, flex-Layout ist 2-spaltig).

Peter
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: 16-BitMan am 26 November 2019, 13:22:36
Erstmal danke für diesen MEGA Style ;D.
Ich habe ein Problem mit "WEBLINKk" und "IFRAME". Wenn ich einen Raum betrete der z.B. das Webinterface meines Logitech Media Servers als IFRAME aufruft, öffnet sich der Raum nicht. Das FHEM Häuschen ist zu sehen und der Ladekreis dreht sich unendlich. Wenn man im Browser das Laden unterbricht, dann wird die Seite angezeigt. Gleiches Problem habe ich mit meinen WebCams die auch per IFRAME und WEBLINK dargestellt werden.

RAW als Beispiel:

defmod Tor_Kamera weblink iframe http://192.168.xxx.xxx:1234/videostream.cgi?user=xxx&pwd=xxx&resolution=32&rate=11
attr Tor_Kamera alias CAM
attr Tor_Kamera htmlattr width="640" height="480" frameborder="0" marginheight="0" marginwidth="0"  -webkit-border-radius: 10px;; -moz-border-radius: 10px;; border-radius: 10px;;"
attr Tor_Kamera room Toreinfahrt,WebCam

Ich hoffe jemand hat eine Lösung, denn der Style ist echt der HAMMER ;D
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 28 November 2019, 07:03:52
Hallo,

ich nutze diesen Style auf dem Handy ausschließlich, d.h. nichts anderes mehr.
Mir ist aufgefallen, dass die vor/zurück kleiner/größer Buttons im Querfornat oberhalb der Diagramme ungünstig angeordnet sind, obwohl gerade im Querfirmat genügend Platz für eine einzeilige Anordnung ist.
Im Hochformat ist es einzeilig und wohl proportioniert.

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: FunkOdyssey am 28 November 2019, 08:46:42
Nur zur Info: Das ist nicht nur auf dem Handy.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: 16-BitMan am 02 Dezember 2019, 14:08:05
Hallo,

ich nutze diesen Style auf dem Handy ausschließlich, d.h. nichts anderes mehr.
Mir ist aufgefallen, dass die vor/zurück kleiner/größer Buttons im Querfornat oberhalb der Diagramme ungünstig angeordnet sind, obwohl gerade im Querfirmat genügend Platz für eine einzeilige Anordnung ist.
Im Hochformat ist es einzeilig und wohl proportioniert.

Viele​ Grüße​ Gisbert​

Dafür habe ich als Workaround folgendes in die "Additional CSS code" settings des Styles eingetragen:

.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel {
   width: 300px;

}

Funktioniert zu mindestens bei mir als workaround beim Android Tablet und IPhone. ;D
Hat jemand schon eine Idee wegen des Ladebildes bei WEBLINK IFRAME?

P.S. Hmmm, habe gerade festgestellt das auf meinem IPhone 6S (IOS13) die Iframes angezeigt werden... Microsoft Edge will am PC die Streams der WebCam downloaden und abspeichern... Ist ja schon mal ein Anhaltspunkt für mich als Leien..
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 02 Dezember 2019, 19:37:53
Hallo 16-BitMan,

ich hab's eingetragen und Fhem gespeichert, allerdings sehe ich keine Veränderung.
Muss man Fhem neu starten, damit die Änderung wirksam wird? Das würde ich nicht erwarten, dass dies bei einer Änderung eines Attributes eines Devices notwendig ist.

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: 16-BitMan am 02 Dezember 2019, 20:03:51
(https://uploads.tapatalk-cdn.com/20191202/06f6b46d275567470b55d1fd7543d0bc.jpg)

Nicht als Attribut im SVG sondern in den Skineinstellungen des Flex Stylesals. (Bild)

So sieht’s danach aus...

(https://uploads.tapatalk-cdn.com/20191202/8d01e6f4fd22f4b97dd7029cd131b4a3.jpg)


Gesendet von iPhone mit Tapatalk
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 03 Dezember 2019, 07:36:13
Hallo 16-Bitman,

das ist schon klar, an welcher Stelle ich den additional CSS code eingeben muss. Ich hatte da schon 2 Zeilen eingetragen, um die Schriftgrößen der Bildüber- und -unterschriften anzupassen.

So sieht der Eintrag bei mir aus:
.SVGlabel:not([data-name=svgZoomControl]) a { font-weight: normal;; font-size: 0.7em;; }
.SVGplot text.title { font-weight: normal }
.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel {
   width: 300px;

}

Muss da noch was verändert werden?
Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 03 Dezember 2019, 07:44:31
Noch als Ergänzung, selbst wenn ich meine 2 Zeile zur Änderung der Schriftgrößen der Bildüber/unterschrift lösche, ändert sich die Darstellung des plot control Rahmens nicht.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: 16-BitMan am 03 Dezember 2019, 08:54:25
Noch als Ergänzung, selbst wenn ich meine 2 Zeile zur Änderung der Schriftgrößen der Bildüber/unterschrift lösche, ändert sich die Darstellung des plot control Rahmens nicht.

Du hast recht, meine SVG war schon in einer Gruppenzuordnung. Eine SVG ohne Gruppenzuordnung braucht noch folgenden Eintrag in der additional CSS:


.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel {
   width: 300px;

}

.SVGlabel[data-name=svgZoomControl] {
    max-width: 300px;
}



Nu stimmt die Ansicht bei mir unter IE EDGE, Chrome 78.0.3904.108 (Offizieller Build) (64-Bit), IOS 13 und Android 5.1.

Nu muss ich nur noch das Problem mit den Ladebildschirm bei meiner WebCam hinbekommen. ::)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 03 Dezember 2019, 18:44:27
Hallo 16-BitMan

so funktioniert es, und ich habe aus den ersten 300px 360px gemacht, was den schönen Effekt hat, dass die Scroll bar genauso breit wie die Diagramme ist.
Das ist für das Hochformat so, für das Querformat sieht die Scroll bar schon gut aus, lediglich die Länge ist jetzt kürzer wie die Diagramme.
Kann man das auch anpassen?

Viele​ Grüße​ Gisbert​

.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel { width: 360px; }
.SVGlabel[data-name=svgZoomControl] { max-width: 360px; }
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: 16-BitMan am 04 Dezember 2019, 10:33:54
Hallo 16-BitMan

so funktioniert es, und ich habe aus den ersten 300px 360px gemacht, was den schönen Effekt hat, dass die Scroll bar genauso breit wie die Diagramme ist.
Das ist für das Hochformat so, für das Querformat sieht die Scroll bar schon gut aus, lediglich die Länge ist jetzt kürzer wie die Diagramme.
Kann man das auch anpassen?

Viele​ Grüße​ Gisbert​

.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel { width: 360px; }
.SVGlabel[data-name=svgZoomControl] { max-width: 360px; }

Versuch mal:

.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel { width: -webkit-fill-available; }
.SVGlabel[data-name=svgZoomControl] { max-width: -webkit-fill-available; }

Ich habe leider diese Woche wohl keine Zeit mehr zu testen.

LG
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 05 Dezember 2019, 08:15:57
Hallo 16-BitMan,

.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel { width: -webkit-fill-available; }
.SVGlabel[data-name=svgZoomControl] { max-width: -webkit-fill-available; }
Damit ändert sich an der Darstellung gegenüber dem vorherigen Stand noch nichts.

Falls du in der nächsten Woche noch Zeit (und Lust) hast, dann bin ich nach wie vor interessiert.

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: 16-BitMan am 15 Dezember 2019, 21:35:44
Hallo 16-BitMan,

.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel { width: -webkit-fill-available; }
.SVGlabel[data-name=svgZoomControl] { max-width: -webkit-fill-available; }
Damit ändert sich an der Darstellung gegenüber dem vorherigen Stand noch nichts.

Falls du in der nächsten Woche noch Zeit (und Lust) hast, dann bin ich nach wie vor interessiert.

Viele​ Grüße​ Gisbert​

Hallo Gisbert,

ich glaube damit ist dir geholfen oder?

.roomoverview .odd > td.containsPlot .SVGlabel,.roomoverview .even > td.containsPlot .SVGlabel { width: 100vw; }
.SVGlabel[data-name=svgZoomControl] { width: 98%; height: unset; display: block; min-width: 250px; max-width: 98%; }


Ich bin kein Programmierer, denke das ist eher quick and dirty ;D. Funktioniert aber bei mir...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 16 Dezember 2019, 08:12:48
Hallo 16-BitMan,

danke fürs Ausprobieren.
Die Lösung geht in die richtige Richtung, allerdings ist jetzt der Rahmen leicht größer als die Diagramme.
Ich bleibe bei der vorherigen Lösung, die das Problem(chen) ja bereits zu 90% gelöst hat.

Viele​ Grüße​ Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Gisbert am 16 Dezember 2019, 08:20:39
Hallo xanker,

bei folgendem devStateIcon "cmd_1:fa_bell@red" in einem DOIF wird blau statt rot angezeigt, während "cmd_2:weather_night@red" in rot angzeigt wird.
attr DEVICE devStateIcon cmd_1:fa_bell@red cmd_2:weather_night@red cmd_3:scene_day@gray
Kannst du dir das anschauen?
Viele​ Grüße​
Gisbert​
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: choetzu am 22 Dezember 2019, 20:25:11
Hallo,
Wie macht ihr das? Ich möchte gerne in den Readingsgroup die Werte gleich ausgerichtet (roter Strich) haben. Ich weiss aber nicht wo resp wie ich das anstellen kann.
Weiss jemand Rat?
Danke.
Lg c


EDIT: Ich habe die Lösung herausgefunden: https://forum.fhem.de/index.php/topic,106652.0.html
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: fervor am 24 Dezember 2019, 12:05:13
Hi,

dank der Möglichkeit die fhem Seite zu skalieren konnte ich jetzt mein ReadingGroup Problem lösen und kann jetzt den flex Style auf allen Geräten nutzen. Super :-)

Eine Sache ist mir aber noch aufgefallen. Ich hatte bei ein paar Schaltern im devStateIcon ein Online Status mittels 10px-Kreis-rot/grün abgebildet. Diese Grafiken messen 10x10Pixel. Im Gegensatz zu sämtlichen anderen Styles wird bei flex die Grafik maximal vergrößert dargestellt und ergibt einen schlecht aufgelösten großen Kreis. Vielleicht sollte man hier nochmal nachstellen.

Für den Moment hab ich erstmal die Grafiken angepasst, sie sind jetzt 30x30 Pixel.

VG
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: xerion am 25 Dezember 2019, 20:51:56
Hallo ich nutze auch schon seit längeren das flex Style auf meinem Smartphone. Würde das auch gerne im normalen Browser Zuhause im Netzwerk nutzen aber leider werden die Kameraansichten in dem Style nicht aufgebaut. Wenn ich die Seite öffnen bliebt es beim Fhem Loading Icon einfach stehen.
Bei den Kameraansichten handelt es sich um "Weblink Devices" mit iframe link.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Icinger am 26 Dezember 2019, 21:27:39
Mit dem neuen PlotEmbed=2 (https://forum.fhem.de/index.php/topic,106646.msg1005659.html#msg1005659 (https://forum.fhem.de/index.php/topic,106646.msg1005659.html#msg1005659)) werden die Farben vom FlexStyle nicht mehr übernommen, da die SVGs erst nach dem Seiten-Aufbau gerendert und nachgeladen werden.

Kann man da was machen?

lg, Stefan

Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: KernSani am 26 Dezember 2019, 23:44:08
Hallo ich nutze auch schon seit längeren das flex Style auf meinem Smartphone. Würde das auch gerne im normalen Browser Zuhause im Netzwerk nutzen aber leider werden die Kameraansichten in dem Style nicht aufgebaut. Wenn ich die Seite öffnen bliebt es beim Fhem Loading Icon einfach stehen.
Bei den Kameraansichten handelt es sich um "Weblink Devices" mit iframe link.

Bei mir ähnlich, ich habe Kamera streams (via Zoneminder Modul) eingebunden. Diese funktionieren am PC mit flex, am Iphone habe ich aber den selben Effekt, Loading Icon bleibt stehen...
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: rudolfkoenig am 27 Dezember 2019, 10:41:49
Zitat
Mit dem neuen PlotEmbed=2 (https://forum.fhem.de/index.php/topic,106646.msg1005659.html#msg1005659 (https://forum.fhem.de/index.php/topic,106646.msg1005659.html#msg1005659)) werden die Farben vom FlexStyle nicht mehr übernommen, da die SVGs erst nach dem Seiten-Aufbau gerendert und nachgeladen werden.
Das Verhalten duerfte identisch sein bei plotEmbed=1.
svg.js benachrichtigt nach Laden alle, die sich per svgCallback registriert haben, siehe f18.js fuer HOWTO.
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Depechem am 04 Januar 2020, 18:07:33
Hallo, vielen Dank für das super Projekt.

eine Frage:
- wie kann ich für das linke Menü einen Scrollbalken hinzufügen (css Code)
- sowie einen Scrollbalken wenn man die "fhem.cfg" aufruft

Gruß Thomas
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Depechem am 04 Januar 2020, 19:48:30
und gleich noch eine Frage.
Die Texte sind für mich alle etwas zu groß.
Im zusätzlichen CSS Code habe ich bereits für das Menü und das Content a die Größe angepasst
#menu a {
  font-size: 0.9em;
}

#content  a {
  font-size: 0.9em
}
aber eigentlich sind alle Texte zu groß (auch in den Popups und co) damit müsste ich eigentl den kompletten css Code einzeln veränderm.
Gibt es alternativ eine Möglichkeit den gesamten Style zu verkleinern (z.b. in Prozenten)

Gruß Thomas
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: bismosa am 06 Januar 2020, 17:36:31
Hallo!

Ich bin mir nicht sicher, ob es mit dem Flex-Style zusammenhängt oder durch ein Update ausgelöst wurde...

Ich nutze häufig die Funktion "Display Plot Values". Seit meinem letzten Update und das hinzufügen von dem Style flex kann ich nun in Räumen wo mehr als ein Plot vorhanden ist die Werte nicht mehr sehen. Diese werden meisten oben auf der Seite dargestellt. Das war vorher nicht so.

Beim gewählten Style Flex ist es ja bereits bekannt (1. Beitrag), aber das tritt auch auf, wenn ich den Style "f18" auswähle.

Funktioniert das bei euch noch? Beeinflusst Flex den f18?


Gruß
Bismosa

[edit]
Es hat nichts mit dem Style zu tun.Siehe https://forum.fhem.de/index.php/topic,107179
[/edit]
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: _Markus_ am 08 Januar 2020, 12:25:34
Hi xanker,

cooles Style, vielen Dank!
Die footprint Funktionalität hat bei mir für einige Verwunderung gesorgt, bis ich von ihr gelesen habe :-)

Wenn ich die lokalen Styles der einzelnen Devices auf einen neuen Standard Style zurücksetzen möchte, dann kann ich das aktuell nur manuell im Attribut styleData machen, richtig? Ich fände einen zusätzlichen Button hilfreich (delete all local), mit dem ich alle lokalen Styles löschen kann (sprich das json devices object leeren). Oder übersehe ich etwas?

Danke Dir! Viele Grüße
Markus
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: supernova1963 am 08 Januar 2020, 16:28:20
Hallo zusammen,

gibt es einen Grund, warum der Menüeintrag "Commandref" nicht auf die lokal generierten Seiten sondern auf https://fhem.de/commandref_DE.html verweist?
Leider sind, - logischer Weise -, meine myUtils Hilfen/Dokumentationen dort nicht zu finden.

Oder, wo kann ich diesen Link auf den fhem (lokalen) Standard setzen?

Danke,

Gernot
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Astrofreak85 am 23 Januar 2020, 20:44:42
Hi,

vielleicht hab ich es übersehen oder überlesen, aber wie funktioniert das mit der Gruppierung der Menüeinträge?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: bmwbiker am 24 Januar 2020, 22:07:24
Servus xanker und alle anderen

Habe vor ein paar Tagen erst Deinen Style gefunden und muß sagen - wirklich super gelungen !
UI klar und übersichtlich, super Einstellmöglichkeiten, funktioniert zumindest auf den von mir verwendeten Browsern Firefox, Samsung Android Standard tadellos.
Viiielen Dank...!

Und dazu sehr strukturiert programmiert - zumindest findet man sich gut zurecht  ;)

Wie komme ich darauf ?
Ich habe einen FHEM Zugang (FHEMWEB) mit nur einer Seite und einigen readingsGroups, möglichst ohne Menu, auf jeden Fall ohne Style Setting etc.
Der Zugang soll keine Berechtigungen haben, außer offene Fenster etc zu sehen, oder Lampen zu schalten.

Nun kann man in fhem-flex nach Bedarf fast alles deaktivieren - aber doch nur fast... :(
- Der Menü Button bleibt immer aktiv, und mit dem Menu auch die Style Settings ?
- Ebenfalls aktiv bleibt auch die Kommandozeile ?
Zumindest hab ich's nicht besser gefunden  :-[ ::)

Zugegeben, ich habe gar nicht erst viel im Forum gesucht, oder mit "Additional CCS code" versucht, sondern mir gleich flex.js angesehen - einfach aus Interesse.
Herausgekommen ist eine kleine Erweiterung um wenige Zeilen  :-[ :
- Der Menu Button kann per Checkbox deaktiviert werden.
- Die Kommandozeile kann per Checkbox deaktiviert werden.
- Damit der Titel bei Deaktivierung beider Buttons schön formatiert bleibt, erscheint in diesem Fall das fhem Logo.

Ein kleines Problem gibt's noch, nicht gar so schlimm:
Ich schaffe nicht die Style Settings per hiddenroom zu deaktivieren. Durch die Deaktivierung des Menüs kommt man zwar nicht mehr direkt zu den Settings. Aber über den html Parameter ...?cmd=style select .

Wenn jemand an der Erweiterung interessiert ist - bitte melden.
@xanker: Magst es mal ansehen, ggf anpassen und übernehmen ?

Herzliche Grüße
Torsten
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: roman1528 am 25 Januar 2020, 11:24:48
Moin xanker und danke für den tollen Style.

Im Zeitalter der 8000 dpi Mäuse kommt es bei mir hin und wieder vor, dass ich daneben klicke. So habe ich z.B. die Befürchtung, dass ich, wenn ich zur "Startseite" möchte auf den "shutdown restart" Button klicken könnte...

Eine Lösung wäre sicherlich die Position zu ändern...

Eine andere Lösung wäre, da du eh JavaScript nutzt, eine Abfrage einzubauen.

Ich habe da mal was vorbereitet... Zeile 1395 flex.js
// restart icon
if (!menuIcons.children('#iconFhemRestart').length)
$('<a>',{id: "iconFhemRestart", style: "cursor: pointer;", title: 'restart'})
.click(function() { var answer = confirm('FHEM neu starten?\nBitte bestätigen!','');
if (answer) {flex.cmd('shutdown restart');} })
.html(flex.content.icons.fhem_restart)
.appendTo(menuIcons);

// update icon
if (!menuIcons.children('#iconFhemUpdate').length)
$('<a>',{id: "iconFhemUpdate", style: "cursor: pointer;", title: 'update'})
.click(function() { var answer = confirm('FHEM updaten?\nBitte bestätigen!','');
if (answer) {window.location.href = flex.fhemPath+'?cmd=update&fwcsrf='+flex.fwcsrf;} })
.html(flex.content.icons.fhem_update)
.appendTo(menuIcons);

Das geht auf jeden Fall schöner... Nur reicht mein Wissen in dem Fall tatsächlich nicht aus um z.B. die Texte auf Deutch und Englisch einzupflegen geschweige denn, die Abfrage aktivierbar/deaktivierbar zu machen.

Vielleicht gefällt dir die Idee und du baust es mit ein.
Würde mich freuen.

Grüße^^
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: daniel2311 am 25 Januar 2020, 17:31:47
Zuerst, großartige Arbeit! Das wirklich klasse, was fhem-flex kann und wie es aussieht.

Eine Frage habe ich. Kann ich die Farben der Lämpchen ändern? Also dass für an, eine andere Farbe verwendet wird, als für aus. Für sehen nämlich die Lampe, die an, und die Lampe, die aus sind, sehr ähnlich aus und kann sie nur schlecht unterscheiden..
Einzeln ist mir klar, dass ich die icons ändern kann. Aber auch irgendwie durch das Template, wie im Standard, dass sie gelb und nicht gelb sind?
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: andy19850 am 26 Januar 2020, 21:01:09
Hi,

vielleicht hab ich es übersehen oder überlesen, aber wie funktioniert das mit der Gruppierung der Menüeinträge?
attr room Hauptraum->Gruppierungsraum
Sollte klappen :)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: Astrofreak85 am 10 Februar 2020, 11:18:22
besten dank!

Der Flex Style is super, hab aber ein wesentliches Problem:

Ich hatte bissl mit den Farben und der Tag Nacht Umschaltung experimentiert und wollte wieder auf ein Farbschema zurück, da mir nachts die Kontraste in den Graphen fehlten...aus welchen gründen auch immer springt der Style immer wieder in die Tag/Nacht Umstellung zurück....das is bissl nervig.

Der Style is echt gut! Der sollte direkt mit ausgeliefert werden, finde ich ;)
Titel: Antw:Neuer Style: flex. Flexibel für alle Geräte
Beitrag von: flummy1978 am 31 März 2020, 14:59:46
Hallöchen

Als aller erstes muss ich ein mega Lob los werden..... Altobelli .... was für geniele Arbeit  8) *thumbsup* mega geiler Style und sollte in meinen Augen definitiv mit ins Standard übernommen werden......  Bier ist unterwegs und mehr als Dicke verdient *prost*

Ich frag mich ehrlicherweise, warum ich das vorher nicht gefunden habe.....  ???

# Edith ergänzt noch was wichtiges
Ausgerechnet auf meinem Hauptrechner Monitor auf meinem LiveSystem Gibt es immer eine JS Fehlermeldung sobald ich eine Seite mit einem Plot aufrufe :'(

flex.js line 1793:
TypeError: svg.getAttribute is not a function

Vielleicht hat da ja jemand eine Idee ... Würde mich sehr freuen

initSVGCallback: function() {
flex.content.plots = [];
if(typeof svgCallback != "undefined") {
svgCallback.flex = function(svg) {
1793 >>>>> if(!svg || !svg.getAttribute("data-origin")) return;
flex.content.plots.push(svg);
}
}
},


@Topic (Ursprünglicher Beitrag): Ich habe mit Hilfe der zusätzlichen CSS Codes, sehr sehr vieles von dem bereits umgesetzt, was in den Einstellungen nicht einstellbar ist. (Schriftgröße / Farbe im Menu, Abstand, Hintergrund bei Plots und und und)
Allerdings habe ich die unteren Probleme nicht lösen können, bzw die entsprechenden Punkte nicht gefunden: