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

Begonnen von xanker, 24 Juni 2019, 20:28:37

Vorheriges Thema - Nächstes Thema

Manos

#720
Zitat von: rudolfkoenig am 27 Dezember 2020, 23:09:11
Ich habe in svg.js einen Workaround eingebaut, um diesen Crash zu vermeiden, bei mir funktioniert es.
Da ich mich mit flex nicht auskenne, kann das auch Zufall sein.

Da ich mich weder mit flex, noch mit Linux, noch mit FHEM usw usw usw auskenne, liegt wahrscheinlich der Fehler zwischen meine Tastatur und Bürostuhl...
Kann auch sein, da ich irgendwann meine SVG-Plots von FileLog auf DbLog umstellt habe.

Wie auch immer, Hauptsache gesund!    ;D
und einen guten Rutsch in neue Jahr 2021, mit viel Gesundheit, jede Menge Zeit fuer FHEM Entwicklung, weniger Bugs oder falsche Kompilierungen!

HP Microserver GEN8 XEON, Ubuntu 22.04, FHEM, ConBee II, CCU2, CUL433, Tradfri, Luxtronik2, Volkszaehler (und wenig Ahnung...)

sTaN

Bin eben durch Zufall auf den neuen Style gestoßen, absolut MEGA!!!
Danke dafür. Einfach nur erstklassig und total erfrischend!

Gruß
sTaN
Raspberry Pi 3
2 x CUL CC1101-USB-Lite 868MHz
FS20 Komponenten, Philips HUE, Alexa-Fhem, MAX! Geräte, homebridge, harmony, Unifi, FirtzBox, MQTT, Aurora, Denon, Sonos, TabletUI, CALENDAR, EGPM2LAN, Pushover

ioT4db

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

Moin Zusammen,
genau die gleiche Frage habe ich mir eben auch gestellt. Kann man das irgendwo einstellen? Bei den Farbeinstellungen schien es keine Möglichkeit zu geben.
Hat das vielleicht schon jemand für sich lösen können?

Danke schonmal und VG,
Daniel
FHEM auf Synology mittels Docker,  Jeelink-Clone 1x für PCA301 und 1x für Lacrosse, THZ304SOL, Homematic: CUL_HM / M-MOD-RPI-PCB, Pushover, Xiaomi s50

rudolfkoenig

In f18 ist fuer die Faerbung die CSS Zeile
svg.on,svg.FS20_on { fill:orange!important; }
zustaendig, das kann man in der eigenen CSS ueberschreiben.

Womoeglich kann man fuer flex auch was Aehnliches machen.

ioT4db

Zitat von: rudolfkoenig am 28 Januar 2021, 11:19:49
In f18 ist fuer die Faerbung die CSS Zeile
svg.on,svg.FS20_on { fill:orange!important; }
zustaendig, das kann man in der eigenen CSS ueberschreiben.

Womoeglich kann man fuer flex auch was Aehnliches machen.

Danke, das war genau der richtige Tipp! Hab den CSS Code in "Zusätzlicher CSS Code" im Flex eingefügt > funktioniert!
FHEM auf Synology mittels Docker,  Jeelink-Clone 1x für PCA301 und 1x für Lacrosse, THZ304SOL, Homematic: CUL_HM / M-MOD-RPI-PCB, Pushover, Xiaomi s50

derHeimwerker

#725
Hallo in die Runde,

der Stil ist wirklich klassen. Ich würde da gerne zwei Änderungen einbauen. Komme aber mangels der nötigen Fachkenntnis nicht weiter.
1. ) Die Uhr würde ich gerne links über die Buttons bringen
2. ) Den home Button würde ich gerne auf eine webUI Seite zeigen lassen.

Kann mir da jemand unter die Arme greifen?
Vielen Dank!
Gruß
Thomas

sTaN

Hallo Zusammen,

ich bin echt verliebt in den Flex style! Danke dafür!

Mir ist aufgefallen, dass es in Safari im Vergleich zum Google Chrome auf meinem MacBook Air M1 folgende Fehler gibt:

1. abgeschnittene bzw. fehlende Readings (z.B.: Wochenpläne Heizung siehe Screenshot: Flex_AnsichtHeizung_Safari und Flex_AnsichtHeizung_GoogleChrome)

2. Im Raum Residents fehlt in Safari ein Roomate und der Gesamtzu Hause Status. Im Chrome läuft es.

Habe im Safari bereits Cache geleert und Daten gelöscht.

Gruß
sTaN
Raspberry Pi 3
2 x CUL CC1101-USB-Lite 868MHz
FS20 Komponenten, Philips HUE, Alexa-Fhem, MAX! Geräte, homebridge, harmony, Unifi, FirtzBox, MQTT, Aurora, Denon, Sonos, TabletUI, CALENDAR, EGPM2LAN, Pushover

FFHEM

Hallo xanker,
vielen Dank für Deinen hervorragend gemachten FHEM-Style! Das habe ich schon länger gesucht, aber jetzt erst - durch Zufall auf youtube! - gefunden.
Das sollte eigentlich standardmäßig in FHEM installiert sein, da es die Anwendung von FHEM auf Smartphones doch sehr erleichtert.

Kleine Spende ist zur weiteren Unterstützung unterwegs.

Gruß,
Friedhelm

Raspberry Pi 4B, Homematic, Sonoff, Shelly, Worx, Arduino, ESP8266

The Spirit

finde den style auch super, vor allem das er die plots auf die verfügbare breite skaliert. das ist am smartphone super praktisch.
leider hat es mir seit einem update von fhem dieses feature zerschossen. jetzt werden wieder alle plots mit einer festen breite angezeigt.
weis jemand, was ich da wo ändern muss, damit dies wieder funktioniert?
Danke
THZ 304 Eco Baujahr 2015

Aurel_B

#729
Mit der Plotbreite habe ich mich noch nicht befasst. Ich finde den Style auch super und habe einige Ergänzungen, vielleicht sind diese auch für andere hilfreich? Und zwar werden jetzt die "Display Plot values" Kästchen korrekt angezeigt und bei den Füllfarben für die Plots sind die Farben dargestellt. Ausserdem habe ich die ganze Darstellung etwas kompakter gestaltet. Untenstehender Code gehört in "Zusätzlicher CSS Code":

svg.on,svg.FS20_on { fill:orange!important; }
* { font-size:13px; }
select [value^=l0] { color: red; }
select [value^=l1] { color: green; }
select [value^=l2] { color: blue; }
select [value^=l3] { color: pink; }
select [value^=l4] { color: brown; }
select [value^=l5] { color: black; }
select [value^=l6] { color: olive; }
select [value^=l7] { color: gray; }
select [value^=l8] { color: yellow; }
#content, #hdr { left: 200px; }
#menuScrollArea { width: 200px; max-width: 200px; }
#menu { width: 200px !important; }
.SVGplot { position: relative; }
#content div.SVGplot { overflow: visible; }
div#svgmarker {
    z-index: 1005;
    padding: 6px 10px;
    text-align: left;
    max-width: 100px;
    color: white !important;
    background: #2E5E87;
    border: 2px solid #fff;
    border-radius: 4px;
    margin-top: 20px;
    position: absolute;
}

The Spirit

#730
Zitat von: ansgru am 19 Oktober 2021, 08:02:13
Mit der Plotbreite habe ich mich noch nicht befasst. Ich finde den Style auch super und habe einige Ergänzungen, vielleicht sind diese auch für andere hilfreich? Und zwar werden jetzt die "Display Plot values" Kästchen korrekt angezeigt und bei den Füllfarben für die Plots sind die Farben dargestellt. Ausserdem habe ich die ganze Darstellung etwas kompakter gestaltet. Untenstehender Code gehört in "Zusätzlicher CSS Code":

svg.on,svg.FS20_on { fill:orange!important; }
* { font-size:13px; }
select [value^=l0] { color: red; }
select [value^=l1] { color: green; }
select [value^=l2] { color: blue; }
select [value^=l3] { color: pink; }
select [value^=l4] { color: brown; }
select [value^=l5] { color: black; }
select [value^=l6] { color: olive; }
select [value^=l7] { color: gray; }
select [value^=l8] { color: yellow; }
#content, #hdr { left: 200px; }
#menuScrollArea { width: 200px; max-width: 200px; }
#menu { width: 200px !important; }
.SVGplot { position: relative; }
#content div.SVGplot { overflow: visible; }
div#svgmarker {
    z-index: 1005;
    padding: 6px 10px;
    text-align: left;
    max-width: 100px;
    color: white !important;
    background: #2E5E87;
    border: 2px solid #fff;
    border-radius: 4px;
    margin-top: 20px;
    position: absolute;
}

Danke für das "Addon", aber wo genau muss ich das speichern (welche Datei und wo dort genau)?
Wenn du noch was wegen der Plotbreite finden würdest wäre das Super
THZ 304 Eco Baujahr 2015

Aurel_B

Ui das mit der Plotbreite wird nicht einfach. Wenn ich Lust & Zeit habe schaue ich mir das mal an. Den CSS Code musst du unter "Zusätzlicher CSS Code" einfügen (Style settings -> Anderes)

Gisbert

Hallo ansgru,

eine automatische Anpassung der Plotbreite an den zur Verfügung stehenden Platz wäre super. Ich habe es für meinen Bedarf auf dem Handy händisch gelöst, d.h. Werte für die Breite und Höhe sowie den Schrifttyp solange verändert, bis es mir optisch zugesagt hat.

Viele​ Grüße​ Gisbert​
Aktuelles FHEM | PROXMOX | Fujitsu Futro S740 | Debian 12 | UniFi | Homematic, VCCU, HMUART | ESP8266 | ATtiny85 | Wasser-, Stromzähler | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21/22RF | RHASSPY

Aurel_B

Ich glaub ich hab's :-) War nicht schwer, ä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'); } );


Gisbert

Zitat von: ansgru am 20 Oktober 2021, 16:14:51
Ich glaub ich hab's :-) War nicht schwer, ä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'); } );



Hallo ansgru,

d.h. das ist die automatische Anpassung der Plottbreite?
Ich werde das nachher mal ausprobieren.
Sehr schön, dass du dich dem flex Style annimmst.

Ich denke, dass ich auch noch Wünsche hab, aber zunächst will ich die vorgeschlagenen Änderungen umsetzen.

Viele​ Grüße​ Gisbert​
Aktuelles FHEM | PROXMOX | Fujitsu Futro S740 | Debian 12 | UniFi | Homematic, VCCU, HMUART | ESP8266 | ATtiny85 | Wasser-, Stromzähler | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21/22RF | RHASSPY