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

Offline Astrofreak85

  • Full Member
  • ***
  • Beiträge: 167
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #660 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?

Offline bmwbiker

  • Newbie
  • Beiträge: 1
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #661 am: 24 Januar 2020, 22:07:24 »
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
« Letzte Änderung: 24 Januar 2020, 22:10:41 von bmwbiker »

Offline roman1528

  • Sr. Member
  • ****
  • Beiträge: 701
    • ueberueck.com
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #662 am: 25 Januar 2020, 11:24:48 »
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^^
« Letzte Änderung: 25 Januar 2020, 11:27:24 von roman1528 »
Intel D2700 Atom 2x2,13GHz;4GB RAM;60GB SSD;8TB eSATA als NAS: FHEM 6.0,FTUI,AMAD,8" Tablet's+Fully;HUE;Trådfri;ESPRGBWW;HM;ESP8266;I²C;CUL433;CUL868;Duofern;ASC;MQTT
RPi3+: FHEM 6.0;I²C;GPIO;Wigand-RFID;G-Tag;XiaomiBTLESens
RPi3: FHEM 6.0;DIY Relais-I/O-Board;I²C;GPIO
FHEM & FTUI: www.ueberueck.com
Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline daniel2311

  • Developer
  • Full Member
  • ****
  • Beiträge: 194
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #663 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?

Offline andy19850

  • Jr. Member
  • **
  • Beiträge: 63
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #664 am: 26 Januar 2020, 21:01:09 »
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 :)

Offline Astrofreak85

  • Full Member
  • ***
  • Beiträge: 167
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #665 am: 10 Februar 2020, 11:18:22 »
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 ;)

Offline flummy1978

  • Full Member
  • ***
  • Beiträge: 209
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #666 am: 31 März 2020, 14:59:46 »
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
« Letzte Änderung: 01 April 2020, 00:46:07 von flummy1978 »

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 499
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #667 am: Gestern um 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
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline Gisbert

  • Hero Member
  • *****
  • Beiträge: 1626
  • Das Ziel ist das Ziel !
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #668 am: Gestern um 19:13:56 »
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 auf HP ThinClient T610 | Debian10 | UniFi-Controller | Homematic, VCCU, HMUART | ESP8266, Platinen von Papa Romeo | Sonoff | 1-Wire-Temperatursensoren | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21RF

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 499
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #669 am: Gestern um 19:38:33 »
Hallo Gisbert,

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

Beste Grüße
Torsten
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline flummy1978

  • Full Member
  • ***
  • Beiträge: 209
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #670 am: Gestern um 20:19:25 »
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:
Zitat
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

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
Gefällt mir Gefällt mir x 2 Liste anzeigen

Offline Gisbert

  • Hero Member
  • *****
  • Beiträge: 1626
  • Das Ziel ist das Ziel !
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #671 am: Gestern um 21:27:46 »
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 auf HP ThinClient T610 | Debian10 | UniFi-Controller | Homematic, VCCU, HMUART | ESP8266, Platinen von Papa Romeo | Sonoff | 1-Wire-Temperatursensoren | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21RF

Offline ToKa

  • Full Member
  • ***
  • Beiträge: 499
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #672 am: Gestern um 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
RaspberryPi3 mit RaZberry2
Fibaro: FGWPE/F-101 Switch & FIBARO System FGWPE/F Wall Plug Gen5, FGSD002 Smoke Sensor
GreenWave: PowerNode 1 port
EUROtronic: SPIRIT Wall Radiator Thermostat Valve Control
Zipato Bulb 2

Offline hoppel118

  • Sr. Member
  • ****
  • Beiträge: 842
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #673 am: Heute um 00:09:58 »
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.

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
« Letzte Änderung: Heute um 00:37:42 von hoppel118 »
Server: Openmediavault, XEON E3-1240L-v5, Supermicro X11SSH-CTF, 64GB ECC RAM, SSD, RAID-Z2
Homebridge | Alexa | Yowsup
Homematic: VCCU 2xHMUSB, 1xWLGW | HomeConnect | Philips Hue | Sonos: Beam, Sub, One, Symfonisk | Unifi: USG, USW, AC-AP-Pro | Xiaomi: S50, Smart Fan | vbus: Vitosolic 200SD4

Offline Gisbert

  • Hero Member
  • *****
  • Beiträge: 1626
  • Das Ziel ist das Ziel !
Antw:Neuer Style: flex. Flexibel für alle Geräte
« Antwort #674 am: Heute um 09:08:47 »
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 auf HP ThinClient T610 | Debian10 | UniFi-Controller | Homematic, VCCU, HMUART | ESP8266, Platinen von Papa Romeo | Sonoff | 1-Wire-Temperatursensoren | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21RF