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

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

Vorheriges Thema - Nächstes Thema

Astrofreak85

Hi,

vielleicht hab ich es übersehen oder überlesen, aber wie funktioniert das mit der Gruppierung der Menüeinträge?

bmwbiker

#661
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

roman1528

#662
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^^
i3-10305T 4x3GHz;8GB RAM;250GB & 1TB NVMe:
FHEM 6.2;FTUI;8" Tablet's+Fully;NsPanelPro;HUE;ESPRGBWW;HM(CCU3);Duofern; ASC;MQTT(Tasmota);netatmo;SONOS;eBus;DbLog;XiaomiDevice;NUT;ModbusAttr

RPi3+: FHEM 6.2;I²C;GPIO;RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.2;DIY Relais-Board;I²C;GPIO;RFID;Photovoltaik

daniel2311

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?

andy19850

Zitat 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?
attr room Hauptraum->Gruppierungsraum

Sollte klappen :)

Astrofreak85

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 ;)

flummy1978

#666
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:


  • (die Funktion finde ich mega) aber .... Gibt es eine Möglichkeit dass der titel und die Uhr in der Eingabezeile verschwinden, wenn man reinklickt ?  (Screen1 - Mit 1 gekennzeichnet)
  • Welche Klasse muss ich nehmen um NUR die Logausgabe - Farbe zu ändern ? Es soll nicht der allgemeine Text anders sein, sondern nur die Ausgabe in einem Fenster wie diesem (Log) (Screen1 mit 2 gekennzeichnet)
  • Gibt es eine Möglichkeit eigene Links / Icons an der mit 3 markierten Stelle?
  • Screen 2 zeigt die Code Eingabe: Hier würde ich die Schriftgröße / Style etc unabhängig vom rest verändern wollen.... hat da jemand auch nen Tipp für mich ?

Ansonsten kann ich mich nur wiederholen ... MEHR als gelungen  :)

Viele Grüße & bleibt gesund
Andreas

ToKa

Hallo zusammen,

wird an diesem style noch weiterentwickelt bzw. werden Fehler noch korrigiert (z.B. Plotanzeige bei plotEmbed=2)?

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

Zitat von: ToKa am 03 April 2020, 18:23:43
Hallo zusammen,

wird an diesem style noch weiterentwickelt bzw. werden Fehler noch korrigiert (z.B. Plotanzeige bei plotEmbed=2)?

Beste Grüße
Torsten

Hallo Torsten,
das ist eine berechtigte Frage.
Ich nutzen diesen Style nach wie vor sehr gerne und hoffe inständig, dass xanker irgendwann wieder Zeit für uns hat.
Ich denke bis dahin müssen wir uns alle gedulden.
Aber bis dahin können wir uns alle an diesem schönen Style erfreuen, wie er im Moment ist (nicht, dass ich keine Wünsche hätte, insbesondere, dass die angewählte Seite schneller lädt und nicht abwartet, bis das letzte Diagramm fertig ist).

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

ToKa

Hallo Gisbert,

danke für Deine Antwort. Ich nutze den Style auch und finde ihn echt prima.

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

Hallo zusammen,

da Xankers letzte Antwort bereits am: 04 November 2019, 11:41:13 erfolgte und er dort von Hauskauf, angekündigtem Nachwuchs etc geschrieben hat ist davon auszugehen, dass er aktuell wenig bis gar keine zeit mehr hat und sich demnach auch kaum mehr um den Style kümmern kann  :-\

Das ist in der Tat sehr sehr schade, aber vielleicht findet sich ja noch jemand schlaues, der weitermachen kann.... Ich komme momentan halbwegs mit do or die und try & error weiter, was aber auch sehr mühselig ist....

Was ich aber vermelden kann ist eine Lösung des Plot Problems, das ich hatte:
ZitatAusgerechnet 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

Einige andere berichteten ja dass das "neue" Attribut plotEmbed 2 dazu führt, dass Plots schneller nachgeladen werden, aber in Flex einen Fehler verusachen oder den Style nicht übernehmen. Ich habe jetzt sowohl plotEmbed als auch plotfork aus meiner WEB Definition entfernt und es ist (AUF DEM RECHNER) kein spürbarer Unterschied in der Geschwindigkeit zu erkennen. Da ich Plots aber hauptsächlich am Rechner benutze, ist das und das "Plots Values" Problem bei mir unter Kollateralschaden gefallen, weil dafür der Rest funktioniert  ;)

Mit den anderen "Problemen" kann ich mich arrangieren, oder finde eine (alternative) Lösung aber
Screen 2 zeigt die Code Eingabe: Hier würde ich die Schriftgröße / Style etc unabhängig vom rest verändern wollen.... hat da jemand auch nen Tipp für mich ?
das ist noch eine Ansicht die nicht meinen Wünschen entspricht..... Ich habe bisher den Style von "Hausautomatisierung.com" genutzt und hab mich in die Editieroptik davon "verliebt" und würde diese gerne weiternutzen .... Hier bin ich leider noch gar nicht weiter gekommen.

Würde mich freuen, wenn andere vielleicht noch ein paar Screenshots ihrer Config präsentieren (vor allem wenn sie was angepasst haben), vielleicht können wir uns gegenseitig helfen.
Oder jemand (mit mehr Ahnung) nimmt sich etwas mehr Arbeit auf und versucht die letzteren Probleme zu lösen :)

Viele Grüße
Andreas

Gisbert

Hallo Andreas,

das ist ja nur zu verständlich, dass xanker für dieses Hobby wenig Zeit investieren kann.

Mein "größtes" Problem (ich Gesegnter, wenn das mal wahr wäre ;D) ist das lange Laden von Diagrammen auf dem Handy (dort nutze ich den flex style), wenn sie auch gleichzeitig noch schön aussehen sollen. Notgedrungenermaßen habe ich mich für schön entschieden und warte dann halt ein bißchen, bis alle Diagramme geladen sind, bevor die Seite angezeigt wird. Dafür wird man mit dem Fhem-Logo als Pausenfüller verwöhnt.

Ich hänge 2 Screenshots an, die den textlichen Bereich und Diagramme zeigen.
Bei den Diagrammen habe ich das Attribut Css solange "optimiert", bis mir alle Größen von Überschrift etc. gefallen haben.

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

ToKa

Hallo Gisbert,

kannst Du Deine CSS Änderungen hier bitte zur Verfügung stellen? Die Schriftgröße ist mir insgesamt nämlich auch etwas zu groß.

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

hoppel118

#673
Zitat 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.

Zitat von: KernSani am 26 Dezember 2019, 23:44:08
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...

Hallo Leute,

habe mir auch gerade mal den flex Style installiert. Beim Klick auf "Select Style" sehe ich allerdings auch erstmal nur "FHEM LOADING". Wenn ich dann die URL anpasse zu "IP-Adresse:8083" lädt er den Style. Grundsätzlich sieht dann erstmal alles gut aus. Wenn ich dann anschließend auf "Style settings" klicke, sehe ich wieder nur "FHEM LOADING", siehe Screenshot. Der Browser lädt aber nichts mehr. Getestet habe ich das sowohl mit aktuellem Chrome als auch mit aktuellem Firefox.

Irgendwelche Kameras habe ich nicht, dafür alles mögliche andere, siehe Signatur.

@xerion und @KernSani Konntet ihr das Problem lösen? Wenn ja, wie? Hat sonst wer eine Idee? Wie komme ich wieder zurück auf den normalen Style, wenn ich bei "Style Settings" nur noch "FHEM LOADING" sehe (mal abgesehen von Backup einspielen)?

Danke und Gruß Hoppel
Server: Openmediavault, XEON E3-1240L-v5, Supermicro X11SSH-CTF, 64GB ECC RAM, SSD, RAID-Z2
Homebridge | Alexa | Yowsup
Homematic | HomeConnect | MQTT | Philips Hue | Sonos | Unifi Network & Protect | vbus | Xiaomi

Gisbert

Zitat von: ToKa am 03 April 2020, 22:20:20
Hallo Gisbert,

kannst Du Deine CSS Änderungen hier bitte zur Verfügung stellen? Die Schriftgröße ist mir insgesamt nämlich auch etwas zu groß.

Beste Grüße
Torsten

Hallo Torsten,

hier ist meine gesamte Definition, die zu den obigen Bildern auf einem Smartphone führt; bitte nicht durch den Namen WEBtablet irritieren lassen, ich nutze den Style auf meinem Smartphone (LG G6). Da neben dem Style auch andere Einstellungen betroffen sind, bitte nicht einfach alles kopieren !!

defmod WEBtablet FHEMWEB IPV6:8085 global
attr WEBtablet Css .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: -webkit-fill-available;; }\
.SVGlabel[data-name=svgZoomControl] { max-width: -webkit-fill-available;; }
attr WEBtablet HTTPS 1
attr WEBtablet allowfrom 192.168.1.*|127.0.0.1
attr WEBtablet comment Das Attribut Css (so wie es hier definiert ist) definiert die Größe und Stärke der Unterschrift unter dem Diagramm:\
attr Css .SVGlabel:not([data-name=svgZoomControl]) a { font-weight: normal;;;; font-size: 0.75em;;;; }\
style:\
min width: 340px\
max width: 35%\
plot size: 480,185
attr WEBtablet editConfig 1
attr WEBtablet endPlotNow 1
attr WEBtablet endPlotToday 1
attr WEBtablet iconPath fhemSVG:openautomation:default:IcoMoon:IconFontAwesomeSVG
attr WEBtablet plotEmbed 0
attr WEBtablet plotfork 1
attr WEBtablet plotsize 480,185
attr WEBtablet sortRooms AMAD netatmo Finance Traffic Network Haus Corona CUL_HM Rollladen Heizung Weather Unsorted Mobile Everything
attr WEBtablet sslVersion TLSv12:!SSLv3
attr WEBtablet styleData {\
"flex": {\
  "colorPreset": {\


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