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

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

Vorheriges Thema - Nächstes Thema

ToKa

Guten Morgen zusammen,

danke Gisbert, damit konnte ich jetzt die Schriftgröße in den Plots prima anpassen. Ich habe jetzt auch plotEmbed wieder auf 0 gesetzt und kann keine Performanceverschlechterung feststellen.

Hat jemand noch eine Idee, wie man durch stateFormat definierten Text im Device Overview anpassen kann. Der wird von den bisherigen font-size Änderungen nicht angepasst (siehe Screenshot).

Beste Grüße
Torsten
RaspberryPi3 mit RaZberry2 und Conbee II
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Shelly2.5 Rollladenaktoren
Zipato Bulb 2, Osram und InnrLight

Gisbert

Hallo Torsten,

schön, dass meine trial und error-Methode bei dir zum Erfolg geführt hat.

Zu dem gehighlighteten (ein schlimmeres Denglisch habe ich noch nicht gesehen, aber so passt immerhin die deutsche Grammatik ;D) Bereich in deinem Bild, da weiß ich jetzt nicht genau, was du vorhast.
Prinzipiell kannst du im Attribut stateFormat so ziemlich alles machen, was dir in den Sinn kommt: Schriftgröße kleiner/größer, fett, kursiv, farbig (auch vom Wert abhängig, z.B. kleiner Null rot, größer Null blau), hochgesetzt, ...

Zum Beispiel im angehängten Bild, die Nachkommastelle beim Zählerstand als hochgestellte Ziffer und ohne Dezimaltrennzeichen (ich gebe zu, das ist mit Kanonen auf Spatzen geschossen, aber macht Spass :)):
attr Gaszaehler stateFormat {'today: '.round(ReadingsVal($name,'Temp.EG_Total_monotonic_EnergyDay',''),1).' kWh<br>\
current power: '.round(ReadingsVal($name,'Temp.EG_Total_monotonic_PowerCurrent',''),1).' kW<br>\
Zählerstand: '.int(ReadingsVal($name,'Temp.EG_Total_monotonic_Meter','')).'<span style="vertical-align: +6px;; font-size: 75%;;">'.substr(round(ReadingsVal($name,'Temp.EG_Total_monotonic_Meter','')-int(ReadingsVal($name,'Temp.EG_Total_monotonic_Meter','')),1),2,1).'</span> m³'}

Bevor mich jemand wegen des Codes verhaut, ich bin empfänglich für Vorschläge.

Viele Grüsse 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

ToKa

Hallo Gisbert,

danke für den Tipp, manchmal sieht man den wir vor lauter Bäumen nicht. Werde es mal mit perl im stateFormat probieren, die Schrift kleiner zu machen.

Beste Grüße
Torsten
RaspberryPi3 mit RaZberry2 und Conbee II
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Shelly2.5 Rollladenaktoren
Zipato Bulb 2, Osram und InnrLight

flummy1978

Hey,

von meiner Seite noch ein kleiner Zwischentipp: Ich weiss nicht welchen Browser ihr nutzt, aber bei Firefox gibt es eine schöne Funktion "Element unterstuchen". Dort wiederum kann man auf der rechten Seite sehen woher der jeweilige Bereich die CSS Informationen übernimmt und es ist einfacher an der richtigen Stelle zu schrauben.

Vielleicht hilft es ja :)

Grüße
Andreas

87insane

Hey,

ich habe mal eine kleine Frage... Deinen Style habe ich heute gesehen und finde ihn super. Mich stört nur das "Design Elemente" gezogen werden. Also ich habe z.B. viele MQTT Geräte mit ähnlichem Template wie es hier für MQTT bereit gestellt wird. Dort ist ein 10px punkt als Indikator vor den Geräten in devStateicon. Nun ist es so das der Theme diesen Punkt groß zieht. Das sieht komisch aus. Nun bin ich kein Programmierer und habe mir das mal in Chrome angesehen....

Wenn ich wie in dem Bild unten "min-width" aus stelle wird es besser. Ich denke das ist dann noch immer nicht Original aber schöner. Kann ich das ändern?

flummy1978

Hallöchen,

Zitat von: 87insane am 17 April 2020, 13:41:27
Deinen Style habe ich heute gesehen und finde ihn super. ....
auch wenn ich mir nicht sicher bin, ob Du meinen Beitrag meintest, kann ich ja unabhängig davon ggf helfen:

Das min-width bezieht sich auf die Mindestgröße der Icons. Machst Du es weg, ist es vielleicht in diesem Fall in Ordnung. Wo anders wo unterschiedlich breite / hohe oder schmale / dünne Icons zum Einsatz kommen, verzerrt es extrem.... ich hatte teilweise lang und teilweise hoch gestreckte Icons die alles andere als schön aussahen.

Ich habe noch mal 3 Screenshots (s.u.) gemacht um zu zeigen wie man es umgehen kann bzw wie ich es gemacht habe:

Der grüne Punkt ist mit dem von Dir beschriebenem Icon mit meinen Einstellungen. Im zweiten Screen kann man 2 Symbole sehen die deutlich kleiner sind, als die anderen. In diesem Fall sind es eigene Icons die ich so gemacht hab dass ich die Originalen Icons (Vergleich auf dem 3 Screenshot)  genommen habe und diese dann so verkleinert, dass sie nur ca 1/4 der ursprünglichen Größe haben ABER die Arbeitsfläche (Bildgröße) ist gleich geblieben. Das kann man in dem letzten Screen sehen.
Die kleinen Symbole habe ich früher schon genutzt, weil ich nicht wollte dass die Anzeige ob die Bewegungsmelder aktiv sind oder nicht, so riesig dargestellt werden wie alles andere ;)

Vielleicht hilft Dir das ja weiter.

Viele Grüße
Andreas

87insane

Guten Morgen,

ich erkenne leider nicht wo genau mir das helfen soll.. Was ich verstehe ist deine Erklärung, warum das so ist. Die Frage ist ob man das ggf. in den Optionen aktivieren/deaktivieren könnte. Das wäre für den ein oder anderen User sicher gut :)

An sich ist so ein Design natürlich eine Menge Arbeit und das schätze ich auch. Ich hoffe das ist eine Sache die man anpassen kann :)

flummy1978

Hey Insane,

Ich glaube du verwechselst mich  ::)

Es ist nicht "mein" Style. Ich habe lediglich den flex Style genommen und ein wenig angepasst, weil der "Erfinder" des Ganzen nicht mehr online zu sein scheint, oder das Interesse verloren hat  :-[

Umgehen kannst es recht einfach indem Du das min-width raus nimmst, oder eben wie ich (wenn es um das grüne Symbol geht) eigene Icons erstellst die in entsprechender Größe ausgegeben werden :)

Viele Grüße
Andreas

87insane

Ahhh okay... Danke für die Info!

Wo nehme ich das denn rauß? Ist doch sicher irgendeine Datei die bearbeitet werden muss oder?

flummy1978

Zitat von: 87insane am 20 April 2020, 16:43:15
Wo nehme ich das denn rauß? Ist doch sicher irgendeine Datei die bearbeitet werden muss oder?

Fast.....  Im eigene Style Anteil, den Du in den Einstellungen bearbeiten kannst:

Style settings -> Flex Style ist ja ausgewählt -> Zusätzlicher CSS Code -> Edit -> Dort dann den teil

#content svg:not([id^=SVGPLOT]):not(.zw_nr), #content img.icon, #content .col2 img{
        min-width: 1.35em;
max-height: 1.95em;
max-width: 1.35em;
}

gegen
#content svg:not([id^=SVGPLOT]):not(.zw_nr), #content img.icon, #content .col2 img{
        min-width: 1.95em;
max-height: 1.95em;
max-width: 1.95em;
}

ersetzen, wenn er vorhanden ist, oder hinzufügen wenn er nicht da ist ... oder oder ... n bissl rumtesten, weil ich nicht weiß welchen Stand Du Dir da rein geladen hast ;)

Hoffe das hilft...

Grüße
Andreas

87insane

Danke. Teste ich morgen. Super deine schnelle Hilfe :)

Gesendet von meinem LM-G810 mit Tapatalk


87insane

Super...

#content svg:not([id^=SVGPLOT]):not(.zw_nr), #content img.icon, #content .col2 img{
        min-width: 0;
}


hat geholfen. Alle anderen Werte darf man bloß nicht anpassen. Danach hat man Side-Effekte die ich nicht mal schriftlich erklären kann ^^

Danke, danke!

flummy1978

Zunächst einmal schön dass ich helfen konnte :)

Was man in Deinem Screen sieht, ist aber exakt das was ich eben mit der Angabe der vorgegebenen Größen vermeiden kann (ICH persönlich sogar möchte):

Was sowas angeht, hab ich voll einen an der Waffel und möchte es dann wirklich gerade haben (Siehe Screen)

In dem Fall hätte ich es aber wohl verhindert, indem ich bei Alle Rollos ein BLANK icon in der Größe des grünen punktes einsetzen würde...... Aber wie dem auch sei. Wichtig ist dass DU zufrieden bist. Wenn ich dazu beitragen konnte, freut es mich :)

Viele Grüße
Andreas

87insane

#688
Grade wäre natürlich SUPER! Aber ich könnte damit so leben. Ich mag es auch gerade und perfekt aber ich kann leider zu wenig css usw. Habe aktuell andere Baustellen wo ich noch viel lesen muss.
Kann also absolut verstehen warum du das so haben willst und ich werde es irgendwann auch bearbeiten müssen. Der innere Monk.  ;D

Okay ich habe erstmal den einfachen Weg genommen und das devStateIcon angepasst:
{ my $con = ReadingsVal($name,"state","undef");; my $pic = $con eq "opening" ? 'fts_shutter_up@red' : $con eq "closing" ? 'fts_shutter_down@red' : $con eq "100" ? 'fts_shutter_100' : $con =~ /(\d)\d/ ? 'fts_shutter_'.$1.'0' : $con =~ /\b\d\b/ ? 'fts_shutter_10' : 'fts_shutter_updown';; "<div>&nbsp;&nbsp;&nbsp;<a href=\"/fhem?cmd.dummy=set $name toggle&XHR=1\"></a>".FW_makeImage($pic)." </div>" }

Einfach drei Leerzeichen (&nbsp;) rein geschmissen. Ist keine saubere Lösung aber ist okay.

xerion

Zitat 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

Ich hatte das gleiche Problem und konnte es bei mir damit lösen das ich anstelle von iframe auf htmlcode gegangen bin.

vorher:
iframe http://192.168.178.72:8080/video

nachher:
htmlCode <img width="640" height="480" src="http://192.168.178.72:8080/video">
Ich würde mich  freuen, wenn du meinen Einladungscode für Tibber, der Stromanbieter, der dir hilft, deinen Stromverbrauch zu verstehen und zu reduzieren, nutzt: https://invite.tibber.com/5fc08jbs. So bekommen wir beide 50 Euro und 100 % Ökostrom / https://geld-fuer-eauto.de/ref/334561880