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

Aurel_B · 20 Oktober 2021, 21:24:57

Es funktioniert leider doch nicht so recht

Ich frag mal beim Autor nach ob er eine Idee hat...

Icinger · 21 Oktober 2021, 00:03:19

Hi ansgru,

da du scheinbar mehr Ahnung hast als ich davon, vielleicht hast du ja auch eine Idee, was man mit den DOIF-Cards machen kann, damit sie im Flex auch schön groß dargestellt werden?

lg, Stefan

Aurel_B · 22 Oktober 2021, 13:00:41

Also, mit Hilfe von "xanker" (dem Autor von Flex) habe ich es jetzt geschafft, die Plot Breite wird automatisch angepasst. Folgende Einstellungen sind dafür nötig:

ändert doch in "/opt/fhem/www/pgm2/flex.js" die Zeile 2043 von

Code Auswählen

$('div.SVGplot').parent().each(function(){if ($(this).is('td')) $(this).addClass('containsPlot')});

zu

Code Auswählen

//$('div.SVGplot').parent().each(function(){if ($(this).is('td')) $(this).addClass('containsPlot')});
$('div.SVGplot').parent().each(function(){ $(this).addClass('containsPlot'); } );

Dann müsst ihr zusätzlich noch im FHEMWEB Device plotEmbed auf 0 setzen. Nach einem Neuladen der Seite sollten die Plots skaliert sein, falls nicht schaut nach, was ihr als "Maximale Plot Breite" unter den "Style Settings" angegeben habt (bei mir: Maximale Plot Breite = 100%).

Zu den DOIF Cards kann ich im Moment nix sagen, ich verwende nur die Standardoberfläche ohne UI Tablet oder so. Ist angedacht für später, vielleicht kann ich dann weiterhelfen. Generell sind solche Sachen aber relativ einfach herauszufinden wenn man etwas CSS kann: mit der "Inspektor" des Browsers (Rechtsklick auf ein Element und dann Inspect) kann man dynamisch CSS etc. verändern und so mit rumspielen herausfinden, welche Einstellungen nötig sind um ein Element zu vergrössern (z.B. indem man "min-width" setzt).

Aurel_B · 22 Oktober 2021, 13:14:02

Aaaalso, wenn ich gerade dabei bin bin ich dabei

Mich hat das mit den DOIF Cards doch gereizt, v.A. weil ich sie doch verwenden möchte. Mit folgendem Eintrag im Custom CSS werden sie wieder normal gross:

Code Auswählen


div.dval svg {max-width:unset !important;max-height:unset !important;}

Reinhart · 22 Oktober 2021, 19:08:56

also ich steuere die Größe der Anzeige einfach mit dem letzten Parameter für die Kreisgröße, dann passt die Card die gesamte Größe darauf an und ich brauch nix im Flex zu ändern.

hier das Beispiel verschiedener Größen wie im Bild (180,220,240).

Code Auswählen

{package ui_Table;;}
card([Vorlauf:Vorlauf:col12],"Vorlauf","temp_outside",20,60,undef,undef,"°C",\&temp_hue,undef,180)|

card([VorlaufSoll:VorlaufSoll:col12],"VorlaufSoll","temp_outside",20,60,undef,undef,"°C",\&temp_hue,undef,180)

card([Ruecklauf:Ruecklauf:col12],"Rücklauf","temp_outside",20,60,undef,undef,"°C",\&temp_hue,undef,220)|

card([HMS100T_9163:temperature:col12],"Vorlauf EG","temp_outside",20,60,undef,undef,"°C",\&temp_hue,undef,240)|

Icinger · 28 Oktober 2021, 17:43:45

ZitatGenerell sind solche Sachen aber relativ einfach herauszufinden wenn man etwas CSS kann: mit der "Inspektor" des Browsers (Rechtsklick auf ein Element und dann Inspect) kann man dynamisch CSS etc. verändern und so mit rumspielen herausfinden, welche Einstellungen nötig sind um ein Element zu vergrössern (z.B. indem man "min-width" setzt).

Das kann schon sein

Ich verzweifel jedenfalls damit gg

Genauso, wie ich schon alles mögliche probiert habe, ein state-Icon mit uiTable im flex auf die richtige Größe zu bekommen --> Absolut keine Chance

zB

Code Auswählen

attr xx devstateicon {ui_Table::temp_temp_ring(ReadingsVal("Vorlauf","temperature",0),ReadingsVal("Ruecklauf","temperature",0),0,65,200)}

Die 200 hinten dran sollten lt. Wiki die Pixelgröße sein.......Im Flex bleibts immer nur so 20x20 oder so.

Damian · 28 Oktober 2021, 19:05:55

Das liegt am Style. Den Vorschlag von #ansgru

Code Auswählen

div.dval svg {max-width:unset !important;max-height:unset !important;}

hast du schon probiert?

jhohmann · 29 Oktober 2021, 14:59:16

Hallo, bin jetzt auch zufällig auf diesen Thread und dieses Layout gestoßen.
Der erste Eindruck sieht ganz gut aus. Erstmal bleibe ich auch dabei.
Den Hinweis mit dem Style habe ich dann auch gleich ausprobieren müssen, da meine wenigen uiTables dann doch zu klein sind.
Die CSS Zeile habe ich einfach bei den Settings als zusätzlichen Code erfasst und musste auch nichts hinter umstellen.
Danach sahen die DOIFs wieder gut aus.
Saubere Sache soweit

Icinger · 29 Oktober 2021, 19:32:06

ZitatDas liegt am Style. Den Vorschlag von #ansgru

div.dval svg {max-width:unset !important;max-height:unset !important;}

hast du schon probiert?

Ja, der wirkt sich auf die Cards aus, aber nicht auf das Ring im Stateformat

PS: Die Ringe in der linken Spalte meine ich

schwatter · 29 Oktober 2021, 19:52:08

Ich kann bestätigen, das es funktioniert.

Gruß schwatter

Damian · 29 Oktober 2021, 22:33:47

Zitat von: Icinger am 29 Oktober 2021, 19:32:06
Ja, der wirkt sich auf die Cards aus, aber nicht auf das Ring im Stateformat

PS: Die Ringe in der linken Spalte meine ich

Ich denke, dass es innerhalb einer uiTable korrekt dargestellt wird.

Icinger · 30 Oktober 2021, 21:58:02

Zitat von: Damian am 29 Oktober 2021, 22:33:47
Ich denke, dass es innerhalb einer uiTable korrekt dargestellt wird.

Das stimmt, innerhalb eines DOIF mit uiTable wird es korrekt dargestellt.
Allerdings nicht, wenn das uiTable-Package so wie in https://forum.fhem.de/index.php/topic,106059.msg1050186.html#msg1050186 beschrieben, "mißbraucht" wird um ein devstateicon zu erzeugen.

Damian · 30 Oktober 2021, 22:21:31

Wenn es nicht auf devstateicon greift, dann definiere dir deine Tabelle einfach in einem DOIF und zeig das an. Es gibt übrigens jetzt neben uiTable auch uiState mit gleicher Syntax für den Status eines DOIF-Devices. Beide sind sogar miteinander kombinierbar.

schwatter · 31 Oktober 2021, 10:16:44

Zitat von: Icinger am 30 Oktober 2021, 21:58:02
Das stimmt, innerhalb eines DOIF mit uiTable wird es korrekt dargestellt.
Allerdings nicht, wenn das uiTable-Package so wie in https://forum.fhem.de/index.php/topic,106059.msg1050186.html#msg1050186 beschrieben, "mißbraucht" wird um ein devstateicon zu erzeugen.

Das finde ich sehr interessant. Wertet ein Device wirklich auf. Habe aber gleiches Verhalten.
Nachdem ich das weiter untersucht habe, konnte ich es etwas vergrößern. Leider mit Nebenwirkungen für andere SVG's...

Code Auswählen

div.col2 svg {max-width:unset !important;max-height:unset !important;}

Das Problem ist wohl, es gibt keine eindeutige "class". Schade....
Wildcards hab ich auch versucht um andere SVG's auszugrenzen. Aber da hab ich nicht genug Erfahrung.
Vielleicht hat noch wer einen Tip?

Gru schwatter

Damian · 31 Oktober 2021, 10:55:03

Zitat von: schwatter am 31 Oktober 2021, 10:16:44
Das finde ich sehr interessant. Wertet ein Device wirklich auf. Habe aber gleiches Verhalten.
Nachdem ich das weiter untersucht habe, konnte ich es etwas vergrößern. Leider mit Nebenwirkungen für andere SVG's...

Code Auswählen Erweitern
div.col2 svg {max-width:unset !important;max-height:unset !important;}

Das Problem ist wohl, es gibt keine eindeutige "class". Schade....
Wildcards hab ich auch versucht um andere SVG's auszugrenzen. Aber da hab ich nicht genug Erfahrung.
Vielleicht hat noch wer einen Tip?

Gru schwatter

Zu bedenken ist, dass z. B. die uiTable-Funktion card nicht über devStateIcon funktioniert, weil sie ein DOIF-Modul zur Sammlung der zu plottenden Daten benötigt.