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

Offline ansgru

  • New Member
  • *
  • Beiträge: 33
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #735 am: 20 Oktober 2021, 21:24:57 »
Es funktioniert leider doch nicht so recht :-( Ich frag mal beim Autor nach ob er eine Idee hat...

Online Icinger

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1406
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #736 am: 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
Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho

Offline ansgru

  • New Member
  • *
  • Beiträge: 33
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #737 am: 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

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

//$('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).

Offline ansgru

  • New Member
  • *
  • Beiträge: 33
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #738 am: 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:

div.dval svg {max-width:unset !important;max-height:unset !important;}
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline Reinhart

  • Hero Member
  • *****
  • Beiträge: 2356
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #739 am: 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).
{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)|

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

Online Icinger

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1406
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #740 am: 28 Oktober 2021, 17:43:45 »
Zitat
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).

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
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.
Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho
Gefällt mir Gefällt mir x 1 Liste anzeigen

Online Damian

  • Developer
  • Hero Member
  • ****
  • Beiträge: 8812
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #741 am: 28 Oktober 2021, 19:05:55 »
Das liegt am Style. Den Vorschlag von #ansgru

div.dval svg {max-width:unset !important;max-height:unset !important;}
hast du schon probiert?
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-uiTable, THRESHOLD, FHEM-Befehl: IF

Offline jhohmann

  • Full Member
  • ***
  • Beiträge: 145
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #742 am: 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  :)
Raspberry Pi 4 - buster / EnOcean - Rollo+Licht, deCONZ - Licht+Sensoren, ZWave - CO Messung, HMCCU mit piVCCU - Heizung
plus nextcloud, dovecot, minidlna

Online Icinger

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1406
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #743 am: 29 Oktober 2021, 19:32:06 »
Zitat
Das 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
Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho

Offline schwatter

  • Sr. Member
  • ****
  • Beiträge: 603
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #744 am: 29 Oktober 2021, 19:52:08 »
Ich kann bestätigen, das es funktioniert.

Gruß schwatter

Online Damian

  • Developer
  • Hero Member
  • ****
  • Beiträge: 8812
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #745 am: 29 Oktober 2021, 22:33:47 »
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.
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-uiTable, THRESHOLD, FHEM-Befehl: IF

Online Icinger

  • Developer
  • Hero Member
  • ****
  • Beiträge: 1406
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #746 am: 30 Oktober 2021, 21:58:02 »
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.
Verwende deine Zeit nicht mit Erklärungen. Die Menschen hören (lesen) nur, was sie hören (lesen) wollen. (c) Paulo Coelho

Online Damian

  • Developer
  • Hero Member
  • ****
  • Beiträge: 8812
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #747 am: 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.
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-uiTable, THRESHOLD, FHEM-Befehl: IF

Offline schwatter

  • Sr. Member
  • ****
  • Beiträge: 603
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #748 am: 31 Oktober 2021, 10:16:44 »
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...

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

Online Damian

  • Developer
  • Hero Member
  • ****
  • Beiträge: 8812
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #749 am: 31 Oktober 2021, 10:55:03 »
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...

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.
Programmierte FHEM-Module: DOIF-FHEM, DOIF-Perl, DOIF-uiTable, THRESHOLD, FHEM-Befehl: IF

 

decade-submarginal