FHEM Forum

FHEM => Frontends => FHEMWEB => Thema gestartet von: rudolfkoenig am 07 Januar 2018, 14:51:18

Titel: Neuer Style: f18
Beitrag von: rudolfkoenig am 07 Januar 2018, 14:51:18
Ich habe ein Style eingecheckt, der ein bisschen Hilfe von JavaScript bekommt.
Der Skript wird neuerdings automatisch geladen, wenn eine Datei mit dem Style-Namen existiert.
Ich habe versucht damit ein paar Features zu impementieren wie:
- Menu/Logo und einzelne Blöcke sind optional ausblendbar
- Erkennung von Touchscreen/Smallscreen, d.h. die gleiche FHEMWEB-Instanz soll auf allen Endgeraeten bedienbar sein.
- personalisierte Farben.

Ich habe zwar Kreuz und Quer getestet, bin aber sicher, dass ich nicht alle Varianten bedacht habe, und noch Fehler vorhanden sind. Fehlermeldungen sind mir zusammen mit einem Patch am liebsten. Folgende Probleme kenne ich:
- im commandref werden die Farben nicht angewendet
- wenn das Laden laenger dauert (z.Bsp. wg. Plots), und man nicht die default-Farben verwendet, dann ist ein Flackern zu sehen.
Titel: Antw:Neues style: f18
Beitrag von: cwagner am 07 Januar 2018, 17:38:44
Vielen Dank Rudolf für diese wertvolle Ergänzung/Option.

Christian
Titel: Antw:Neues style: f18
Beitrag von: Hauswart am 08 Januar 2018, 11:53:56
Soll dies in Zukunft eventuell mal der neue Default Style sein?

Optisch gibt es an ein paar Stellen sicherlich noch etwas zu optimieren.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 08 Januar 2018, 11:59:57
ZitatSoll dies in Zukunft eventuell mal der neue Default Style sein?
Das ist mein plan, dauert es aber noch.

ZitatOptisch gibt es an ein paar Stellen sicherlich noch etwas zu optimieren.
Wie immer: ich nehme gerne patches.
Titel: Antw:Neues style: f18
Beitrag von: roedert am 08 Januar 2018, 13:32:46
kleinen Bug gefunden - einen Patch kann ich allerdings nicht liefern:

Bei einigen Links wechselt der Mauszeiger nicht zum Link-typischen "Finger" wenn man mit der Maus drüberfährt - zB bei "modify <devicename>" wenn man die DEF eines devices ändert oder beim "attr" links neben dem Attribut-Select-Feld in den device-Eigenschaften

Ist jetzt nicht weiter tragisch, aber man denkt immer das wäre gar klein Link zum klicken....
Titel: Antw:Neues style: f18
Beitrag von: marvin78 am 08 Januar 2018, 14:23:37
Liegt vermutlich daran, dass das keine Links sondern Buttons sind.
Titel: Antw:Neues style: f18
Beitrag von: roedert am 08 Januar 2018, 14:26:31
ahh, stimmt ... die Buttons sind tatsächlich so "umgestylt" dass sie optisch mit einem Link identisch sind
Titel: Antw:Neues style: f18
Beitrag von: karl0123 am 08 Januar 2018, 16:39:21
Der Button "Execute command" der Raw definition verschwindet im neuen Style. Er ist kurz zu sehen und wird dann per display:none versteckt. Vermutlich passiert das ggf. auch bei anderen Buttons. Ich habe schon in die f18.js geschaut, die Ursache aber nicht ausmachen können. Es handelt sich, nicht wie bei anderen Buttons in FHEMWEB um ein button-Tag und nicht um ein input[type=submit]-Tag.
Titel: Antw:Neues style: f18
Beitrag von: Amenophis86 am 08 Januar 2018, 17:31:17
Gefällt mir gut bisher, besonders, dass man sich seine Farben selbst einstellen kann. Würde noch eine Funktion "Auf Werkseinstellung zurücksetzen" einfügen bei der Farbauswahl.

Edit:
Nehme alles zurück, gibt default - light - dark. Habe ich nicht gesehen.

Edit2:
Welche Funktion ich gut finde und quasi bereits vorhanden nur bis dato von Hand eingegeben werden muss, ist die History der Commandbar: https://forum.fhem.de/index.php/topic,68945.0.html denke dies ist es auch Wert als Standard eingebaut zu werden. Vielleicht kann man das mit dem neuen Style verbinden.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 08 Januar 2018, 17:48:47
 
ZitatDer Button "Execute command" der Raw definition verschwindet im neuen Style.
Kann ich nicht nachvollziehen, habs mit Chrome und Firefox probiert. Brauche mehr details, evtl. screenshot oder Beispiel-fhem.cfg zum Nachstellen. Passiert das auch mit fhem.cfg.demo?

ZitatBei einigen Links wechselt der Mauszeiger nicht zum Link-typischen "Finger" wenn man mit der Maus drüberfährt
Danke, gefixt.
Zitatist die History der Commandbar
Verstehe den Sinn nicht.Sobald ich was im maininput eintippe, kriege ich vom Browser eine Liste der letzten Befehle, ganz ohne plugin.
Titel: Antw:Neues style: f18
Beitrag von: Amenophis86 am 08 Januar 2018, 18:13:55
Zitat von: rudolfkoenig am 08 Januar 2018, 17:48:47
Danke, gefixt.Verstehe den Sinn nicht.Sobald ich was im maininput eintippe, kriege ich vom Browser eine Liste der letzten Befehle, ganz ohne plugin.

Du meinst den Vorschlag der letzten Eingaben. Habe ich bei Chrome deaktiviert, weil er das nicht für jedes Formular machen soll. Bei FHEM hingegen würde ich es gerne haben. Finde die Funktion auch gut, weil sie Geräte übergreifend ist. Ist aber kein muss, man kann sie ja von Hand nach installieren. Ist mir nur gerade so eingefallen beim testen des neuen Style.
Titel: Antw:Neues style: f18
Beitrag von: karl0123 am 08 Januar 2018, 20:34:35
Zitat von: rudolfkoenig am 08 Januar 2018, 17:48:47
Kann ich nicht nachvollziehen, habs mit Chrome und Firefox probiert. Brauche mehr details, evtl. screenshot oder Beispiel-fhem.cfg zum Nachstellen.

Ich weiß nicht, wie ich das mit einer Config nachstellen soll!? Es hat nichts mit der Config zu tun. Die Config führt wohl nicht dazu, dass display:none in einem HTML-Element erscheint. Ich habe nichts ab style f18 geändert, sodass die Attribute des FHEMWEB Devices dem Standard entsprechen.

Ein Screenshot ist im Anhang. Hier der Quellcode nach dem Seitenaufbau:

<button style="display: none;">Execute commands</button>

Wie gesagt, der Button erscheint kurz und wird dann versteckt. Das mag mit Codemirror zusammenhängen aber im Standardstyle oder auch im darkstyle passiert das nicht.

Noch etwas: Bei gesetztem lonpollSVG wird beim Aktualisierung der Standard-Style für den Plot verwendet (siehe Anhang 2).
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 09 Januar 2018, 10:13:32
Wg. Raw definition: bist du sicher, dass du da was geaendert hast? Bei ungeaenderten Inhalt wird der Knopf absichtlich versteckt, mit display:none.
Wg. Plots: danke fuer den Hinweis, ist mir auch aufgefallen, dass die manchmal falsch sind, ist mir aber bisher keine Ursache eingefallen. Werde es spaeter anschauen.
Titel: Antw:Neues style: f18
Beitrag von: Invers am 09 Januar 2018, 20:10:35
Ich finde das echt cool!
Einzige Bitte um Anpassung wäre, dass der Platz für das Logo frei bleibt, damit ich die Uhr weiterhin anzeigen kann. Diese nutzt ja den Platz des Logos.
Auch die Eingabezeile oben ist links zu weit am Rand.

Ansonsten: Tolle Sache, danke.

Titel: Antw:Neues style: f18
Beitrag von: cwagner am 09 Januar 2018, 22:36:45
Beim Einsatz von readingsGroups sind die Spalten arg knapp. Mit Hilfe von marvin78 kann ich einen Patch vorstellen, der im f18style.css angehängt werden könnte:
}
.wide td {
  padding:6px;
}

Wie es aussieht (vorher/nachher) zeigen die beiden Screenshots.

Christian
Titel: Antw:Neues style: f18
Beitrag von: sash.sc am 09 Januar 2018, 23:18:58
Bei den Plots ist die Beschriftung der Achsen in schwarz. Daher sogut wie nicht sichtbar.

Gruß Sascha

Gesendet von meinem SM-T560 mit Tapatalk

Titel: Antw:Neues style: f18
Beitrag von: Brause am 10 Januar 2018, 04:37:56
Zitat von: cwagner am 09 Januar 2018, 22:36:45
Beim Einsatz von readingsGroups sind die Spalten arg knapp. Mit Hilfe von marvin78 kann ich einen Patch vorstellen, der im f18style.css angehängt werden könnte:
}
.wide td {
  padding:6px;
}

Wie es aussieht (vorher/nachher) zeigen die beiden Screenshots.

Christian

für meinen Geschmack würde ein padding-left , padding-right reichen.
für die Zeilenhöhe, sprengt es irgendwie die Gesamthöhe der Tabelle.
vor allem da es sich ja nicht nur auf die readingsGroup('s) auswirkt, sondern global.
Titel: Antw:Neues style: f18
Beitrag von: marvin78 am 10 Januar 2018, 07:07:39
Das kann jeder machen, wie er mag.
Titel: Antw:Neues style: f18
Beitrag von: cwagner am 10 Januar 2018, 07:19:12
Mit padding-left und padding right sieht es dann so aus... Danke Euch für die Tipps...

Titel: Antw:Neues style: f18
Beitrag von: karl0123 am 10 Januar 2018, 09:41:37
Nutzt man den Style mobil, wird das Aktualisierungsdatum von readings nicht angezeigt. In den Standardstyles steht es normalerweise klein unter dem Reading-Wert. Ich nehme an, dass hier mobil einfach nach 2 Spalten abgeschnitten wird!?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 10 Januar 2018, 09:45:18
Hast du es versucht das Mobilgeraet quer zu halten (landscape-mode)?
Titel: Antw:Neues style: f18
Beitrag von: karl0123 am 10 Januar 2018, 10:02:49
Dann sind sie da. Aber das ist nicht das, was ich meine. In der mobilen Version bspw. des dark styles, stehen die Zeiten klein unter dem Reading in der gleichen Spalte, sodass man sie auch im portrait mode sieht. Im Grund ist das nur ein Schönheitsfehler und ggf. nicht wichtig, ich dachte nur, dass ich es erwähne.
Titel: Antw:Neues style: f18
Beitrag von: Ellert am 11 Januar 2018, 13:11:57
Zitat von: Invers am 09 Januar 2018, 20:10:35
Ich finde das echt cool!
Einzige Bitte um Anpassung wäre, dass der Platz für das Logo frei bleibt, damit ich die Uhr weiterhin anzeigen kann. Diese nutzt ja den Platz des Logos.
Auch die Eingabezeile oben ist links zu weit am Rand.

Ansonsten: Tolle Sache, danke.
Eine angepasste clock.js findest Du hier https://forum.fhem.de/index.php/topic,53286.msg746696.html#msg746696
Titel: Antw:Neues style: f18
Beitrag von: Invers am 11 Januar 2018, 15:13:23
Vielen Dank.
Titel: Antw:Neues style: f18
Beitrag von: RoBra81 am 11 Januar 2018, 15:30:38
Hallo,

Ich bin echt begeistert vom neuen Style, habe aber ein kleines Manko entdeckt: leider werden in der mobilen Ansicht die Dropdownlisten für die Solltemperatur der Heizungsdevices (Homematic) nicht angezeigt...

Ronny

Gesendet von meinem SM-G935F mit Tapatalk

Titel: Antw:Neues style: f18
Beitrag von: Invers am 11 Januar 2018, 15:46:27
@Ellert
Hast du einen Tipp, wie die Datei eingebunden wird?
ich habe sie nach /opt/fhem/www/niceclocks kopiert und uner WEB attr JavaScripts eingetragen. Ohne Wirkung.
Titel: Antw:Neues style: f18
Beitrag von: Ellert am 11 Januar 2018, 17:53:05
clock.js bindet die station-clock ein, die justme1968 hier beschreibt https://forum.fhem.de/index.php/topic,53286.msg449780.html#msg449780

Es müsste nur die alte clock.js durch die Neue ersetzt werden.

niceclocks kenne ich nicht und kann nichts dazu sagen, ich bin davon ausgegangen, dass Du diese Uhr meintest.

Ich verwende station-clock.js und die beiden scripte liegen bei mir in pgm2
Titel: Antw:Neues style: f18
Beitrag von: KernSani am 11 Januar 2018, 18:51:09
Niceclicks ist eine Jugendsünde von mir... Bei Bedarf schau ich mir mal an, ob ich die in den neuen Style reinfummeln kann...
Titel: Antw:Neues style: f18
Beitrag von: Invers am 11 Januar 2018, 19:16:29
Ich bedaure das Missverständnis. Danke.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 11 Januar 2018, 23:27:33
@RoBra81: da brauche ich was zum Nachstellen und Screenshot zum Vergleich, HM kenne ich nicht mehr in Detail. Bei FHT80 funktioniert es.
@karl0123: Mobil+Portrait/Timestamp fehlt: ich fuerchte dabei bleibt es, wuerde zu viele Ausnahmen erfordern.
@cwagner/@Brause: padding habe ich extra mit viel Muehe ausgebaut, ich denke aber ueber ein Fenster fuer User-Css nach.
@sash.sc: longpollSVG? Das ist bekannt, siehe weiter oben. Sonst brauche ich ein Screenshot.
Titel: Antw:Neues style: f18
Beitrag von: mrbreil am 12 Januar 2018, 08:31:39
Ich bekomme beim aktivieren des Styles immer folgende Fehlermeldung:

f18.js line 107:
Uncaught ReferenceError: FW_urlParams is not defined


Kommt in meinem Produtkivsystem als auch auf einer komplett frischen Installation.
Werde daraus leider nicht schlau.

Außerdem finde ich es sehr "ungewohnt" das bei Änderung der Pins die fhem.cfg gespeichert werden muss, sollten das nicht zwei unterschiedliche Vorgänge sein?

Gruß Christian
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 12 Januar 2018, 08:50:06
fhemweb.js ist veraltet, vmtl. steckt im Browser Cache fest.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 12 Januar 2018, 08:51:35
ZitatAußerdem finde ich es sehr "ungewohnt" das bei Änderung der Pins die fhem.cfg gespeichert werden muss, sollten das nicht zwei unterschiedliche Vorgänge sein?
Pin-Status wird als Attribut gespeichert. Ich gehe davon aus, dass man die Pins nicht staendig hin und hersteckt.
Man kann auf die Pins auch verzichten.
Titel: Antw:Neues style: f18
Beitrag von: RoBra81 am 12 Januar 2018, 10:04:29
Ich kann ein List vom Device bieten:

define OG.ez.HZ.Heizkoerperventil.Clima CUL_HM 21C21804
attr OG.ez.HZ.Heizkoerperventil.Clima userattr weekprofile
attr OG.ez.HZ.Heizkoerperventil.Clima event-on-change-reading .*
attr OG.ez.HZ.Heizkoerperventil.Clima group Heizung
attr OG.ez.HZ.Heizkoerperventil.Clima model HM-CC-RT-DN
attr OG.ez.HZ.Heizkoerperventil.Clima peerIDs 00000000,
attr OG.ez.HZ.Heizkoerperventil.Clima room Haus->OG->Esszimmer
attr OG.ez.HZ.Heizkoerperventil.Clima tempListTmpl FHEM/tempList.cfg:Esszimmer
attr OG.ez.HZ.Heizkoerperventil.Clima userReadings desired-new:desired-temp { ReadingsVal($name,"desired-temp",0)}
attr OG.ez.HZ.Heizkoerperventil.Clima weekprofile OG.ez.WP.Heizkoerperventil.Clima


und zwei Screenshots (einer vom Handy und einer vom PC) - es handelt sich um die Zeile OG.ez.HZ.Heizkoerperventil.Clima

Wenn du mehr Infos brauchst sag einfach Bescheid...

Ronny
Titel: Antw:Neues style: f18
Beitrag von: accessburn am 12 Januar 2018, 10:11:26
RoBra81, wie hast du die Tabelle füllend bekommen? bei mir sieht das etwas gaga aus
Titel: Antw:Neues style: f18
Beitrag von: RoBra81 am 12 Januar 2018, 10:16:51
Zitat von: accessburn am 12 Januar 2018, 10:11:26
RoBra81, wie hast du die Tabelle füllend bekommen? bei mir sieht das etwas gaga aus
Da musste ich nichts für machen. Ich hatte allerdings beim umstieg auch merkwürdiges Verhalten bis ich herausgefunden hatte, dass im WEB-Device noch js oder css (bin mir nicht mehr ganz sicher) eines anderen Styles, den ich vorher hatte (ios6) in den Attributen waren - nachdem ich die Attribute gelöscht bzw. angepasst hatte sah alles gut aus...

Gesendet von meinem SM-G935F mit Tapatalk

Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 12 Januar 2018, 10:17:33
@RoBra81: Ich vermute, das ist das klassische "Mobilgeraet+Portrait zeigt dritte Spalte nicht an", mit dem Workaround: Mobilgeraet querhalten.
Die Mobilseite schaut verdaechtig breit aus, da ist bestimmt noch was, was ich wissen sollte.

@accessburn: ich gehe davon aus, dass bei dir das Readingsgroups sind, diese werden nicht wie die uebrigen Werte ine eine weitere Tabelle gesteckt.
Titel: Antw:Neues style: f18
Beitrag von: accessburn am 12 Januar 2018, 10:19:00
Zitat von: rudolfkoenig am 12 Januar 2018, 10:17:33
@accessburn: ich gehe davon aus, dass bei dir das Readingsgroups sind, diese werden nicht wie die uebrigen Werte ine eine weitere Tabelle gesteckt.

Du Fuchs ;-) Gut erkannt... Danke, dann nehm ich das so hin  ;D
Titel: Antw:Neues style: f18
Beitrag von: RoBra81 am 12 Januar 2018, 10:26:44
Zitat von: rudolfkoenig am 12 Januar 2018, 10:17:33
@RoBra81: Ich vermute, das ist das klassische "Mobilgeraet+Portrait zeigt dritte Spalte nicht an", mit dem Workaround: Mobilgeraet querhalten.
Das ist es dann wohl - im Querformat klappts...

Zitat von: rudolfkoenig am 12 Januar 2018, 10:17:33
Die Mobilseite schaut verdaechtig breit aus, da ist bestimmt noch was, was ich wissen sollte.
Hatte den Screenshot der Einfachheit halber im Browser am PC im Entwicklungsmodus gemacht. Die Breite der Spalten kommt vermutlich daher, dass ich in dem Raum auch einen Plot habe, der alles breit zieht...

Ronny
Titel: Antw:Neues style: f18
Beitrag von: igami am 12 Januar 2018, 17:59:12
Ich habe den neuen Style nun auchmal ausprobiert und finde ihn ganz schick.
Nun habe ich aber auch noch ein paar anmerkungen:
1. Ich fände es schön, wenn die Kommandozeile nicht mitscrollen würde, sondern immer oben zu sehen ist.
2. Ich fände es schön, wenn Räume und Inhalt getrennt von einander scrollen könnten (wie bei ios6)
Titel: Antw:Neues style: f18
Beitrag von: marvin78 am 12 Januar 2018, 20:21:39
Zitat von: igami am 12 Januar 2018, 17:59:12

2. Ich fände es schön, wenn Räume und Inhalt getrennt von einander scrollen könnten (wie bei ios6)

Brr. Gruselig. Dann lieber Menü fixed.
Titel: Antw:Neues style: f18
Beitrag von: igami am 13 Januar 2018, 08:31:14
Noch etwas:
Lässt sich die Darstellung so anpassen, dass die STATE und webCmd immer gleich aussehen (siehe Screenshot)?
Und ich finde die vertikalen Freiräume in den ungeraden, dunklen Reihen nicht so schön. Also zwischen NAME, STATE und webCmd.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 13 Januar 2018, 08:49:55
@igami: deine Wuensche sind mit meinem Wissen nicht einfach bzw. ohne Nebenwirkungen zu implementieren.

Da es hier offensichtlich missverstanden wurde: Ich suche nicht nach Ideen, wie ich meine Freizeit totschlagen könnte, die habe ich auch selber. Ich versuche zunaechst meine Ideen zu implementieren, nehme aber gerne Patches (bitte kurz, verstaendlich, sinnvoll und ohne Nebenwirkungen). Offensichtlich seid ihr nicht ungeschickt beim Umgang mit CSS, wieso dann nicht helfen, anstatt zu fordern.
Titel: Antw:Neues style: f18
Beitrag von: igami am 13 Januar 2018, 09:31:06
Dann lerne ich mal noch css und js 8)

Zitat von: igami am 13 Januar 2018, 08:31:14
Und ich finde die vertikalen Freiräume in den ungeraden, dunklen Reihen nicht so schön. Also zwischen NAME, STATE und webCmd.

Index: www/pgm2/f18style.css
===================================================================
--- www/pgm2/f18style.css (Revision 15864)
+++ www/pgm2/f18style.css (Arbeitskopie)
@@ -1,6 +1,6 @@
@import url("defaultCommon.css");

-#logo {
+#logo {
   position:absolute; top:10px; width:32px; height:32px; z-index:10;
   background-image:url(../images/default/fhemicon.png);
   background-size: contain; background-repeat: no-repeat;
@@ -16,9 +16,10 @@
   padding:0 0.5em 0.5em 0;
}
#menu.visible  { left:10px!important; }
-table.room,table.block.wide,table.fileList {
+table.room,table.block.wide,table.fileList {
   border:0;
   border-radius:0;
+  border-spacing:0;
   border-top:1px solid gray;
}

@@ -49,7 +50,7 @@
body.touch #menu { font-size: 20px; } /* for the menuTree icon */
body.touch div.col1, body.touch #menu table.room div { padding:0.25em 0; }

-@media screen and (orientation: portrait) {
+@media screen and (orientation: portrait) {
   body.small table.block tr td:nth-child(n+3) { width: 0px; display: none; }
   body.small #content > table { width: 100%; }
   body.small #menuBtn { right:10px; left:auto; }
Titel: Antw:Neues style: f18
Beitrag von: igami am 13 Januar 2018, 12:06:21
Wie wäre es, wenn die '"Pinned.room.<room>.grp.<group>": false' Werte in einem Reading gespeichert werden anstelle von einem Attribut?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 13 Januar 2018, 19:28:08
@igami: hab dein Patch eingecheckt.

ZitatWie wäre es, wenn die '"Pinned.room.<room>.grp.<group>": false' Werte in einem Reading gespeichert werden anstelle von einem Attribut?
Es waere eine Verletzung des Prinzips, dass der Benutzer durch Anpassung der Attribute das Verhalten des Moduls aendert. Und was ist der Grund?

Titel: Antw:Neues style: f18
Beitrag von: mrbreil am 13 Januar 2018, 20:46:36
Weil das pinnen ja nur die Oberfläche (Ausgabe) betrifft und nicht die Konfiguration. In meinen Augen sind das zwei unterschiedliche Dinge. Die Idee mit den Pins finde ich Super, trägt der Übersichtlichkeit wirklich bei, genau wie das rote Fragezeichen beim ändern der Konfiguration, das mir die letzten Änderungen anzeigt. Wenn jetzt aber das "durchschauen" der Konfiguration als Änderung wahrgenommen wird, finde ich das kontra produktiv.

Gruß Christian
 
Titel: Antw:Neues style: f18
Beitrag von: igami am 14 Januar 2018, 07:13:00
Wie Christian schon sagt betrifft es nur die Darstellung. Daher würde ich es eher in der statefile sehen.
Titel: Antw:Neues style: f18
Beitrag von: RoBra81 am 14 Januar 2018, 07:50:46
Aber über das Attribut kann man es selbst setzen - so könnte man viele Pins auf einmal oder automatisiert einklappen, ohne alle anklicken zu müssen...

Gesendet von meinem SM-G935F mit Tapatalk

Titel: Antw:Neues style: f18
Beitrag von: igami am 14 Januar 2018, 07:55:00
Readings kann man auch selbst setzen ;)

Wie aufwändig ist es wohl ein Drag & Drop zu implementieren um Geräte in Räume und Gruppen zu verschieben?
Titel: Antw:Neues style: f18
Beitrag von: marvin78 am 14 Januar 2018, 08:01:20
Ich gebe zwar zu, dass es zunächst etwas seltsam erscheint, dass eine Änderung an der Ansicht in der Config gespeichert wird, aber sehr ungewöhnlich ist das wiederum nicht. Viele meiner Projekte speichern individuelle Dashboard Ansichten der User auch in der Konfiguration des Projekts (meist SQL DB). Der Unterschied ist, dass es sich dann ausschließlich um im diese Daten handelt, die in dem Moment der Ansichtänderung gespeichert werden und das der User nicht aktiv eine Speicherung der GESAMTEN Config veranlassen muss. Das ist ggf. und wenn man es so will ein Design"problem" in FHEM: Es muss immer eine Gesamtconfig abgespeichert werden, sodass man sich schwer damit tut, für Änderungen einer Ansicht auch eine automatische Speicherung zu veranlassen. Das würde dazu führen, dass ggf. unerwünschte Änderungen an anderen Teilen der Config auch abgespeichert werden, ohne das der User darauf aufmerksam gemacht wird/gemacht werden kann.

Insgesamt ist das Konzept der Speicherung in einem oder mehreren Attributen aber vollständig so, wie ich es von FHEM erwarten würde.
Titel: Antw:Neues style: f18
Beitrag von: AmunRe am 14 Januar 2018, 13:27:38
Hallo Zusammen,

ich bin nicht gut im beschreiben von Fehlern und ich kann auch keine Lösung für das CSS liefern.

Aber mir ist aufgefallen, wenn ich den Style benutze und die Navigationsleiste ist angepinnt beim ersten laden, passt der Inhalt nicht. Die Navigation liegt dann über dem Inhalt. Erst wenn ich den Pin löse für die Navigationsleiste und dann wieder setze passt er für die eine Seite. Bis ich die nächste aufrufe, dann wieder nicht.

Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 14 Januar 2018, 14:34:47
ZitatDie Navigation liegt dann über dem Inhalt.
Ich vermute irgendein JavaScript Problem. Was steht in der JavaScript Console? Evtl. ist das auch nicht FHEM-spezifisch, und haengt mit dem in diesem Beitrag (https://forum.fhem.de/index.php?topic=82739.new#new) beschriebenen Problem zusammen?
Titel: Antw:Neues style: f18
Beitrag von: AmunRe am 14 Januar 2018, 14:51:36
Zitat von: rudolfkoenig am 14 Januar 2018, 14:34:47
Ich vermute irgendein JavaScript Problem. Was steht in der JavaScript Console? Evtl. ist das auch nicht FHEM-spezifisch, und haengt mit dem in diesem Beitrag (https://forum.fhem.de/index.php?topic=82739.new#new) beschriebenen Problem zusammen?

Ich hoffe das ist die richtige Ausgabe:

14:50:19.880 Loading script /fhem/pgm2/fhemweb_colorpicker.js
fhemweb.js:427 14:50:19.912 W:1348 S:1920
fhemweb.js:427 14:50:19.916 Loading script /fhem/pgm2/station-clock.js
fhemweb.js:427 14:50:19.932 Loading script /fhem/jscolor/jscolor.js
fhemweb.js:427 14:50:20.012 Inform-channel opened (HTTP) with filter room=Flur


Adblock ist bei mir für Lokale Adressen deaktiviert. Aber um sicher zu gehen hab ich es noch mal explizit angehagt, keine Besserung.
Titel: Antw:Neues style: f18
Beitrag von: RoBra81 am 14 Januar 2018, 15:23:12
Zitat von: AmunRe am 14 Januar 2018, 13:27:38
Hallo Zusammen,

ich bin nicht gut im beschreiben von Fehlern und ich kann auch keine Lösung für das CSS liefern.

Aber mir ist aufgefallen, wenn ich den Style benutze und die Navigationsleiste ist angepinnt beim ersten laden, passt der Inhalt nicht. Die Navigation liegt dann über dem Inhalt. Erst wenn ich den Pin löse für die Navigationsleiste und dann wieder setze passt er für die eine Seite. Bis ich die nächste aufrufe, dann wieder nicht.
Das Problem hatte ich auch - bei mir lag es daran, dass durch ein Attribut vom WEB-Device noch das ios6.js geladen wurde...

Gesendet von meinem SM-G935F mit Tapatalk

Titel: Antw:Neues style: f18
Beitrag von: AmunRe am 14 Januar 2018, 15:26:15
Zitat von: RoBra81 am 14 Januar 2018, 15:23:12
Das Problem hatte ich auch - bei mir lag es daran, dass durch ein Attribut vom WEB-Device noch das ios6.js geladen wurde...

Gesendet von meinem SM-G935F mit Tapatalk


Internals:
   CFGFN     
   CONNECTS   2064
   DEF        8083 global
   FD         5
   NAME       WEB
   NR         4
   NTFY_ORDER 50-WEB
   PORT       8083
   STATE      Initialized
   TYPE       FHEMWEB
Attributes:
   DbLogExclude .*
   JavaScripts pgm2/clock.js
   column     Uebersicht:Uhrzeit,Temperatur_innen,Temperatur_draussen,System,rain|Heizung,multimedia,Aufentshaltsorte,Batterien,Anwesenheit,Window,Door,reinigung
   confirmDelete 0
   csrfToken  none
   defaultRoom Uebersicht
   editConfig 1
   hiddenroom Unsorted,
   iconPath   fhemSVG:openautomation:default:icons_small
   menuEntries reload,cmd=rereadcfg,restart,cmd=shutdown+restart,update,cmd=update,updatecheck,cmd=update+check
   reverseLogs 1
   room       WEB
   sortRooms  Uebersicht alexa Wohnzimmer Flur Bad Schlafzimmer
   styleData  {
  "f18": {
    "Pinned.menu": false,
    "cols": {
      "bg": "FFFFE7",
      "fg": "000000",
      "link": "278727",
      "evenrow": "F8F8E0",
      "oddrow": "F0F0D8",
      "header": "E0E0C8",
      "menu": "D7FFFF",
      "sel": "A0FFFF",
      "inpBack": "FFFFFF"
    },
    "Pinned.style.list.Styles": true,
    "hideLogo": true,
    "hidePin": false
  }
}
   stylesheetPrefix f18
   title      { if($FW_room) { "FHEM: $FW_room" } elsif($FW_detail) { "FHEM: $FW_detail" } else { "Home, Sweet Home" } }


Wo ist das definiert? Hätte es hier stehen müssen?
Titel: Antw:Neues style: f18
Beitrag von: RoBra81 am 14 Januar 2018, 15:27:32
Ja, da war es bei mir drin

Gesendet von meinem SM-G935F mit Tapatalk

Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 14 Januar 2018, 22:55:53
Habe eine neue Version eingecheckt:
- das Speichern einer Pin-Aenderung ist optional (default ist true), aendern kann man es im "f18 special" Bereich, siehe Anhang.
- es gibt ein neues FHEMWEB Attribut Css, was style Anweisungen enthaelt. Wird beim Wechsel der Hintergrundfarbe von f18 gesetzt bzw. geaendert, damit es beim Laden von SVGs nicht (bzw. weniger) flickert.
- longpollSvg sollte die f18 Farbe nicht mehr zuruecksetzen.
- f18.js taucht im version auf.

@AmunRe:
- kannst du bitte in der WEB Detail-Ansicht "Raw definition" aufrufen, und die Ausgabe hier anhaengen? Habe keine Energie die list Ausgabe zu define+attr umzubauen, damit ich es testen kann.
- wo kommt pgm2/clock.js her?
- tritt das Problem auch im Raum WEB auf?
Nachtrag:
- wie hast du es geschafft die Temperaturwerte doppelt zu verpacken (Temperatur_innen, und da drin Temperatur / rel. Feuchte).
Titel: Antw:Neues style: f18
Beitrag von: AmunRe am 15 Januar 2018, 00:00:16
Zitat von: rudolfkoenig am 14 Januar 2018, 22:55:53
Habe eine neue Version eingecheckt:
- das Speichern einer Pin-Aenderung ist optional (default ist true), aendern kann man es im "f18 special" Bereich, siehe Anhang.
- es gibt ein neues FHEMWEB Attribut Css, was style Anweisungen enthaelt. Wird beim Wechsel der Hintergrundfarbe von f18 gesetzt bzw. geaendert, damit es beim Laden von SVGs nicht (bzw. weniger) flickert.
- longpollSvg sollte die f18 Farbe nicht mehr zuruecksetzen.
- f18.js taucht im version auf.

@AmunRe:
- kannst du bitte in der WEB Detail-Ansicht "Raw definition" aufrufen, und die Ausgabe hier anhaengen? Habe keine Energie die list Ausgabe zu define+attr umzubauen, damit ich es testen kann.
- wo kommt pgm2/clock.js her?
- tritt das Problem auch im Raum WEB auf?
Nachtrag:
- wie hast du es geschafft die Temperaturwerte doppelt zu verpacken (Temperatur_innen, und da drin Temperatur / rel. Feuchte).

Zuerst Du hast das Problem gelöst, aber ich hänge dennoch alles an um das Du mich gebeten hast.

Hier die RAWdefinition:

defmod WEB FHEMWEB 8083 global
attr WEB DbLogExclude .*
attr WEB JavaScripts pgm2/clock.js
attr WEB column Uebersicht:Uhrzeit,Temperatur_innen,Temperatur_draussen,System,rain|Heizung,multimedia,Aufentshaltsorte,Batterien,Anwesenheit,Window,Door,reinigung
attr WEB confirmDelete 0
attr WEB csrfToken none
attr WEB defaultRoom Uebersicht
attr WEB editConfig 1
attr WEB hiddenroom Unsorted,
attr WEB iconPath fhemSVG:openautomation:default:icons_small
attr WEB menuEntries reload,cmd=rereadcfg,restart,cmd=shutdown+restart,update,cmd=update,updatecheck,cmd=update+check
attr WEB reverseLogs 1
attr WEB room WEB
attr WEB sortRooms Uebersicht alexa Wohnzimmer Flur Bad Schlafzimmer
attr WEB styleData {\
  "f18": {\
    "Pinned.menu": false,\
    "cols": {\
      "bg": "FFFFE7",\
      "fg": "000000",\
      "link": "278727",\
      "evenrow": "F8F8E0",\
      "oddrow": "F0F0D8",\
      "header": "E0E0C8",\
      "menu": "D7FFFF",\
      "sel": "A0FFFF",\
      "inpBack": "FFFFFF"\
    },\
    "Pinned.style.list.Styles": true,\
    "hideLogo": true,\
    "hidePin": false\
  }\
}
attr WEB stylesheetPrefix f18
attr WEB title { if($FW_room) { "FHEM: $FW_room" } elsif($FW_detail) { "FHEM: $FW_detail" } else { "Home, Sweet Home" } }



Die Clock.js kommt aus diesem bzw aus dem PTB Thread.


Zitat von: Ellert am 11 Januar 2018, 13:11:57Eine angepasste clock.js findest Du hier https://forum.fhem.de/index.php/topic,53286.msg746696.html#msg746696 (https://forum.fhem.de/index.php/topic,53286.msg746696.html#msg746696)

Aber damit hast Du einen volltreffer gelandet, nachdem ich die Clock entfernt habe, passt es jetzt. Vielen Dank.


Ach die Antwort schulde ich noch:

Das mit den Temperaturwerten ist schon 2 Jahre alt, ich hab es nie geändert. Es ist eine readingsGroup und die readingsGroup ist als "attr group aussen bzw innen" definiert um sie in der Übersicht anzuzeigen. Wusste es nicht besser wegen der Sortierung bzw column in WEB.

Titel: Antw:Neues style: f18
Beitrag von: Ellert am 15 Januar 2018, 06:56:09
Zitat von: AmunRe am 15 Januar 2018, 00:00:16
Zuerst Du hast das Problem gelöst, aber ich hänge dennoch alles an um das Du mich gebeten hast.

Hier die RAWdefinition:

defmod WEB FHEMWEB 8083 global
attr WEB DbLogExclude .*
attr WEB JavaScripts pgm2/clock.js
attr WEB column Uebersicht:Uhrzeit,Temperatur_innen,Temperatur_draussen,System,rain|Heizung,multimedia,Aufentshaltsorte,Batterien,Anwesenheit,Window,Door,reinigung
attr WEB confirmDelete 0
attr WEB csrfToken none
attr WEB defaultRoom Uebersicht
attr WEB editConfig 1
attr WEB hiddenroom Unsorted,
attr WEB iconPath fhemSVG:openautomation:default:icons_small
attr WEB menuEntries reload,cmd=rereadcfg,restart,cmd=shutdown+restart,update,cmd=update,updatecheck,cmd=update+check
attr WEB reverseLogs 1
attr WEB room WEB
attr WEB sortRooms Uebersicht alexa Wohnzimmer Flur Bad Schlafzimmer
attr WEB styleData {\
  "f18": {\
    "Pinned.menu": false,\
    "cols": {\
      "bg": "FFFFE7",\
      "fg": "000000",\
      "link": "278727",\
      "evenrow": "F8F8E0",\
      "oddrow": "F0F0D8",\
      "header": "E0E0C8",\
      "menu": "D7FFFF",\
      "sel": "A0FFFF",\
      "inpBack": "FFFFFF"\
    },\
    "Pinned.style.list.Styles": true,\
    "hideLogo": true,\
    "hidePin": false\
  }\
}
attr WEB stylesheetPrefix f18
attr WEB title { if($FW_room) { "FHEM: $FW_room" } elsif($FW_detail) { "FHEM: $FW_detail" } else { "Home, Sweet Home" } }



Die Clock.js kommt aus diesem bzw aus dem PTB Thread.


Aber damit hast Du einen volltreffer gelandet, nachdem ich die Clock entfernt habe, passt es jetzt. Vielen Dank.


Ach die Antwort schulde ich noch:

Das mit den Temperaturwerten ist schon 2 Jahre alt, ich hab es nie geändert. Es ist eine readingsGroup und die readingsGroup ist als "attr group aussen bzw innen" definiert um sie in der Übersicht anzuzeigen. Wusste es nicht besser wegen der Sortierung bzw column in WEB.
hier: Aber damit hast Du einen volltreffer gelandet, nachdem ich die Clock entfernt habe, passt es jetzt. Vielen Dank.

Deswegen habe ich geschrieben, das die canvas-Größe ggf. anzupassen ist. Das hast Du versäumt.
Titel: Antw:Neues style: f18
Beitrag von: raiderxxl am 15 Januar 2018, 10:38:00
Hallo,

ich wollte mir den Neuen Style mal anschauen, bekomme aber bei meinen FHEM Installationen den Fehler

f18.js line 20:
Uncaught TypeError: Cannot create property 'f18' on string ''



Auch reload im Browser bringt nix...
Muss ich noch was beachten?

Grüßle aus dem Schwabenland...

Pascal
Titel: Antw:Neues style: f18
Beitrag von: Benni am 15 Januar 2018, 12:35:50
Kann ich bestätigen.

Im Chrome erhalte ich dieselbe Fehlermeldung und in der Java-Konsole ist dazu folgendes zu finden:


Uncaught TypeError: Cannot create property 'f18' on string ''
    at HTMLDocument.<anonymous> (f18.js:20)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)


Im Safari lautet die Fehlemeldung im PopUp etwas anders:


f18.js line 20:
TypeError: Attempted to assign to readonly property.


Vielleicht liegt's ja auch am Schwabenland  ;D

Schöne Grüße, ebenfalls aus diesem  8)
Titel: Antw:Neues style: f18
Beitrag von: Porsti am 15 Januar 2018, 13:01:21
Hi,

bin durch zufall auf den neuen Style gekommen.
Habe da aber noch eine frage:

Gibt es eine möglichkeit das die Befehle aus dem webCmb auch mit angezeigt werden (Mobil Version).

Kann so meine Heizung nicht regeln oder die Befehle der Rolläden "Auf:Stop:Ab" nicht benutzen.
Es sind leider nicht alle befehle im devStateIcon

Gruß
Porsti
Titel: Antw:Neues style: f18
Beitrag von: marvin78 am 15 Januar 2018, 13:13:43
Handy drehen hast du probiert?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 15 Januar 2018, 13:20:41
Wg. "f18.js line 20": habs gefixt.
@Porsti: Wenn ich "Es sind leider nicht alle befehle im devStateIcon" ignoriere (weil ich es nicht verstehe), dann wuerde ich auch zum Drehen (landscape mode) raten.
Titel: Antw:Neues style: f18
Beitrag von: Porsti am 15 Januar 2018, 13:41:37
Hi,

OK.
Das mit dem drehen habe ich hinbekommen.
Die Tabellen werden nicht breiter aber die Menüpunkte sind jetzt da.
Mir würde es besser gefallen wenn diese immer da wären.
Im Anhang sind 2 Bilder da auch der Button für das Menü über den fhem Button rutscht.

Gruß & Fettes Lob
Porsti
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 15 Januar 2018, 13:46:45
ZitatIm Anhang sind 2 Bilder da auch der Button für das Menü über den fhem Button rutscht.
Hast du "attr WEB hiddenroom input" gesetzt ?
Titel: Antw:Neues style: f18
Beitrag von: RoBra81 am 15 Januar 2018, 13:48:56
Zitat von: rudolfkoenig am 15 Januar 2018, 13:46:45
Hast du "attr WEB hiddenroom input" gesetzt ?
Das mit dem Button passiert bei mir auch, allerdings habe ich die Eingabezeile sichtbar...

Gesendet von meinem SM-G935F mit Tapatalk

Titel: Antw:Neues style: f18
Beitrag von: automatisierer am 15 Januar 2018, 13:51:32
Zitat von: RoBra81 am 15 Januar 2018, 13:48:56
Das mit dem Button passiert bei mir auch, allerdings habe ich die Eingabezeile sichtbar...

Gesendet von meinem SM-G935F mit Tapatalk



dito.
Titel: Antw:Neues style: f18
Beitrag von: Porsti am 15 Januar 2018, 13:52:16
Ja habe ich für den Externe Zugriff ausgeblendet.
Zitatattr WEB hiddenroom input

Daher können nur "erlaubte" Befehle ausgeführt werden.

Gruß
Porsti
Titel: Antw:Neues style: f18
Beitrag von: igami am 15 Januar 2018, 19:11:20
Momentan spiele ich noch damit rum ob es hübscher ist, wenn der ganze Bildschirm ausgefüllt ist.
Was meint ihr? Siehe Bilder im Anhang. An der Gruppenübergreifenden Anordnung der Icons und Slider bin ich noch dran.
Titel: Antw:Neues style: f18
Beitrag von: Amenophis86 am 15 Januar 2018, 19:27:38
Zitat von: igami am 15 Januar 2018, 19:11:20
Momentan spiele ich noch damit rum ob es hübscher ist, wenn der ganze Bildschirm ausgefüllt ist.
Was meint ihr? Siehe Bilder im Anhang. An der Gruppenübergreifenden Anordnung der Icons und Slider bin ich noch dran.

Ich denke wenn auf einer Seite alle gleich breit angezeigt werden, dann muss es nicht die komplette Seite ausfüllen.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 15 Januar 2018, 23:32:27
ZitatIm Anhang sind 2 Bilder da auch der Button für das Menü über den fhem Button rutscht.
Habs gefixt.

Menu-Button fuer SmallScreen auf der rechten Seite ist jetzt optional.
Titel: Antw:Neues style: f18
Beitrag von: Phill am 16 Januar 2018, 00:59:48
Wenn hier gerade an 01_FHEMWEB rumgefixt wird, könnte man evtl. das Textfeld aus diesem Beitrag (https://forum.fhem.de/index.php/topic,82442.msg745198.html#msg745198) mit aufnehmen.

Wäre dann ein neues Attribut in der "@attrList"
    showDetailForm:0,1
und vor den Extensions: # Show FW Extensions in the menu
folgendes einzufügen.
if (AttrVal($FW_wname, "showDetailForm", "")) {
  push(@list1, "<form>Details: <input style='width:85%' name='detail' onmouseover='\$(this).parents(\"a\").removeAttr(\"href\").unbind(\"click\")'></input></form>");
  push(@list2, "");
  push(@list1, "");
  push(@list2, "");
}
Passt bei jedem Design bis auf ios7.

Gruß
Titel: Antw:Neues style: f18
Beitrag von: raiderxxl am 16 Januar 2018, 10:54:47
Hallo,

Rückmeldung: Es funktioniert jetzt! Supi!

Ich denke das Dashboard ist noch nicht voll Implementiert oder?
Da stimmen die Farben noch nicht...

Nachtrag: Ich wollte jetzt wieder zurück auf den dark style und nun wird mir das Logo links oben nicht mehr angezeigt... Auch die anderen Styles sind nicht mehr so wie sie sein sollten... Cache gelöscht Browser neu gestartet verschiede Rechner andere fhem Installation....selbes Problem....

Ist das nur bei mir so?

Aber super der neue Style, bin begeistert!

Grüßle

Pascal
Titel: Antw:Neues style: f18
Beitrag von: tomspatz am 17 Januar 2018, 06:32:33
verstehe ich das richtig?
Der f18 wird als erstes (alles bei Standard) bei WEB:8083 eingerichtet.
Damit sind allerdings "andere" WEB Instanzen NICHT betroffen solange z.B.
attr WEBtablet stylesheetPrefix touchpad
Also jede WEB Instanz anpassen?
Dazu gehört auch in jede ein neuer styleData Eintrag weil man ansonsten diese Einstellung nicht setzten kann?
"savePinChanges": true,
    "Pinned.detail.Attributes": true,
    "hidePin": true,
    "hideLogo": false,
    "rightMenu": false


Ich verstehe schon das es automatisch erkannt wird:
Zitat- Erkennung von Touchscreen/Smallscreen, d.h. die gleiche FHEMWEB-Instanz soll auf allen Endgeraeten bedienbar sein.

Doch wenn die verschiedenen Instanzen z.B. nicht alle Räume zu sehen bekommen sollen, geht es doch nur über diesen Umweg?

LG
Tom
Titel: Antw:Neues style: f18
Beitrag von: marvin78 am 17 Januar 2018, 06:45:19
Das ist nicht neu.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 17 Januar 2018, 07:56:20
Zitat- Der f18 wird als erstes (alles bei Standard) bei WEB:8083 eingerichtet.
Ja, wenn ich keine Probleme sehe, und es eine Weile stabil laeuft. Fuer neue Installationen wird dann auch nur noch eine FHEMWEB Instanz definiert. Wer unterschiedliche Attribute wie hiddenroom benoetigt, der muss weiterhin mehrere FHEMWEB Instanzen anlegen.

ZitatDazu gehört auch in jede ein neuer styleData Eintrag weil man ansonsten diese Einstellung nicht setzten kann?
Ja, notfalls muss man das kopieren, oder ein notify einrichten.
Titel: Antw:Neues style: f18
Beitrag von: tomspatz am 17 Januar 2018, 08:19:17
ZitatJa, notfalls muss man das kopieren, oder ein notify einrichten.
OK ein notify sollte dann auf die Änderungen im WEB reagieren und in die anderen Instanzen schreiben.
Könntest du mit einem Beispiel anfangen?

btw.
Vielen dank für diese tolle Arbeit.

LG
Tom
Titel: Antw:Neues style: f18
Beitrag von: DarkT am 17 Januar 2018, 15:28:46
Hallo zusammen,

sehr schönes neues Style. Allerdings habe ich auf dem MacBook im Safari (Version 9.2.1) ein Problem, dass  ich das Menü nicht angeboten bekomme.
Die Seite ist leer bis auf das Logo und die Eingabezeile.

Als Fehlermeldung in der Javascript-Console sehe ich:


[Warning] Invalid CSS property declaration at: * (dashboard_style.css, line 114)
[Error] SyntaxError: Strict mode does not allow function declarations in a lexically nested statement.
(anonyme Funktion) (f18.js:125)
[Error] TypeError: undefined is not an object (evaluating 'a.style')
Jb (jquery.min.js:3:24833)
css (jquery.min.js:3:30290)
Eb (jquery.min.js:3:23643)
Fb (jquery.min.js:3:23726)
Vb (jquery.min.js:3:28276)
show (jquery.min.js:3:31808)
(anonyme Funktion) (jquery.min.js:4:6787)
(anonyme Funktion) (jquery-ui.min.js:13:750)
_create (jquery-ui.min.js:10:30258)
(anonyme Funktion) (jquery-ui.min.js:6:7993)
_createWidget (jquery-ui.min.js:6:10064)
(anonyme Funktion) (jquery-ui.min.js:6:7559)
(anonyme Funktion) (jquery-ui.min.js:6:9334)
each (jquery.min.js:2:2980)
each (jquery.min.js:2:840)
(anonyme Funktion) (jquery-ui.min.js:6:9243)
FW_okDialog (fhemweb.js:508)
onerror (fhemweb.js:44)
[Log] 15:25:49.921 Inform-channel opened (websocket) with filter  (fhemweb.js, line 427)
[Log] 15:25:49.931 Rcvd:  (fhemweb.js, line 427)
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 17 Januar 2018, 17:08:28
Danke fuer den Hinweis. Error@f18.js:125 habe ich jetzt gefixt, Error@fhemweb.js@44 kann ich nicht nachstellen, hoffentlich ist das ein Folgefehler. Wenn nicht, dann bitte genau beschreiben, was man wie anwaehlen muss, damit ich es nachstellen kann.

Die CSS-Warnung gehoert zum dashboard. muesste da angesprochen werden.
Titel: Antw:Neues style: f18
Beitrag von: DarkT am 17 Januar 2018, 17:14:41
Danke für Fixen. Ich kann das gerne testen. Kommt das morgen automatisch? Oder soll ich etwas manuell tauschen?

Beider Fehler kommen bei mir im übrigen direkt, ohne das ich was mache.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 17 Januar 2018, 17:18:12
Morgen per update oder heute aus dem SVN, www/pgm2/f18.js
Titel: Antw:Neues style: f18
Beitrag von: raiderxxl am 17 Januar 2018, 17:25:23
Gibt es dazu schon ein Statement?

Nachtrag: Ich wollte jetzt wieder zurück auf den dark style, und nun wird mir das Logo links oben nicht mehr angezeigt... Auch die anderen Styles sind nicht mehr so wie sie sein sollten... Cache gelöscht Browser neu gestartet verschiede Rechner andere fhem Installation....selbes Problem....

Ist das nur bei mir so?

EDIT: War ein Attribut in WEB ... habs gelöscht jetzt ist alles wieder gut...
Css
body,#menu { background:#444444; }


Grüßle
Pascal
Titel: Antw:Neues style: f18
Beitrag von: marvin78 am 17 Januar 2018, 17:32:03
Das Attribut mit dem Zusatz css wurde gelöscht?
Titel: Antw:Neues style: f18
Beitrag von: DarkT am 17 Januar 2018, 17:44:27
Zitat von: rudolfkoenig am 17 Januar 2018, 17:18:12
Morgen per update oder heute aus dem SVN, www/pgm2/f18.js

Habt aus dem SVN genommen ... funktioniert. Prima.
Beide Fehler sind weg.
Titel: Antw:Neues style: f18
Beitrag von: ThomasMagnum am 18 Januar 2018, 15:11:10
Hallo,

ich bin ja schwer begeistert von diesem Style. Eine Frage habe ich hierzu.

Kann ich irgendwo auch die Größe der Schrift (Räume und / oder Gruppen) ändern?
Mein Ziel wäre es durch vergrößern der Gruppenüberschriften (Attribut group) die Übersichtlichkeit zu erhöhen.

Wahrscheinlich keine explizite "f18" Frage, aber im Zuge dessen fiel mir das gerade auf.

Vielen Dank für eure Hlfe.

Gruß, Thomas
Titel: Antw:Neues style: f18
Beitrag von: marvin78 am 18 Januar 2018, 15:13:09
Dafür ist das Additional CSS.
Titel: Antw:Neues style: f18
Beitrag von: ThomasMagnum am 18 Januar 2018, 16:45:15
Vielen Dank.
Dann schau ich im Style mal nach was ich anpassen müsste.
Titel: Antw:Neues style: f18
Beitrag von: ToM_ToM am 21 Januar 2018, 16:53:29
Hallo Zusammen, habe gerade mal den neuen Style ausprobiert.

Wenn ich nun jedoch zurück aufs darktheme stelle, sieht alles bissschen komisch aus (Hintergrund ist in hellem grau und das FHEM Logo fehlt). Auch nach Neustart des Browsers. Muss ich da irgendwo eine Datei löschen oder ersetzen, die durch das f18 Theme geändert wurde?

VG, Thomas
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 21 Januar 2018, 23:17:38
Bitte das Css FHEMWEB-Attribut entfernen. Ich habe noch keine Idee, wie man das automatisiert machen koennte, da der Benutzer ja selbst in Css was reinschreiben kann.
Titel: Antw:Neues style: f18
Beitrag von: DarkT am 22 Januar 2018, 08:54:24
Ich habe mal ne Frage zum Thema Dashbaord und f18 (https://forum.fhem.de/index.php/topic,16503.msg753575.html#new).

Kannst Du da was zu sagen Rudolf?

Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 22 Januar 2018, 09:36:44
Eigentlich ist Dashboard nicht meine Baustelle, es scheint aber aktuell verwaist (bzw. nicht intensiv betreut) zu sein, genauso wie FLOORPLAN.
Ich habe vor in f18 was dafuer zu tun, weiss aber noch nicht in welcher Form, wollte die dashboard Dateien eigentlich nicht anfassen.
Titel: Antw:Neues style: f18
Beitrag von: DarkT am 22 Januar 2018, 11:11:22
Zitat von: rudolfkoenig am 22 Januar 2018, 09:36:44
Eigentlich ist Dashboard nicht meine Baustelle, es scheint aber aktuell verwaist (bzw. nicht intensiv betreut) zu sein, genauso wie FLOORPLAN.
Ich habe vor in f18 was dafuer zu tun, weiss aber noch nicht in welcher Form, wollte die dashboard Dateien eigentlich nicht anfassen.

Ok, das klingt zumindest schon mal gut. Gibt es denn eine Alternative zu Dashboard? Kannst Du HIlfe gebrauchen? Und wenn ja in welcher Form?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 22 Januar 2018, 12:48:22
ZitatGibt es denn eine Alternative zu Dashboard?
Mit vergleichbarer Funktionalitaet mW noch nicht.
Welche Dashboard Features verwendest du, und warum?

ZitatKannst Du HIlfe gebrauchen? Und wenn ja in welcher Form?
Um die Farben anzupassen braucht man die Liste der CSS Selektor / Farbe Paare, das kann man mit der JS-Console rausfinden.
Die Bloecke pinnbar zu machen ist mir im Moment noch zu viel.
Titel: Antw:Neues style: f18
Beitrag von: DarkT am 22 Januar 2018, 14:20:23
Zitat von: rudolfkoenig am 22 Januar 2018, 12:48:22
Mit vergleichbarer Funktionalitaet mW noch nicht.
Welche Dashboard Features verwendest du, und warum?

Eigentlich nicht so viel.... ich wollte mir halte eine schöne Startseite mit allen nützlichen Infos machen.
Eventuell geht das auch anders?

-> s. Bild (Dash.png)

Zitat von: rudolfkoenig am 22 Januar 2018, 12:48:22
Um die Farben anzupassen braucht man die Liste der CSS Selektor / Farbe Paare, das kann man mit der JS-Console rausfinden.
Die Bloecke pinnbar zu machen ist mir im Moment noch zu viel.

Fehlerhaft sind zur Zeit:



## Ein Tab
## 2 -> s. Dash.jpg

#dashboard .dashboard_widgetheader {
    background: none repeat scroll 0 0 #F0F0D8;
}

## Haupttab
## 1 -> s.Dash.jpg

#dashboard .dashboard_tabnav {
    background: #e9e9c8 !important;
}

## Knopf in der Tab-Bar zum Umschalten zwischen den einzelenen Tabs
## 4 -> s. Dash.jpg

#dashboard .ui-widget-header .ui-state-active {
    border: 1px solid #101110;
    background: #c2c2b5;
    font-weight: normal;
    color: #278727;
}

## Knopf in der Tab-Bar zum Umschalten zwischen den einzelenen Tabs
## 3 -> s. Dash.jpg

#dashboard .ui-widget-header .ui-state-default {
    border: 1px solid #278727;
    background-color: #d5d5b7;
    font-weight: normal;
    color: #F0F0dd;
}


Wenn man die 4 Tags anpasst, dann erhält man das Erbenis -> dash_neu (siehe Anhang)

Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 22 Januar 2018, 20:17:40
Danke fuer die Selektoren. Mit Farbe habe ich eine aus den in "f18 special" auswaehlbaren Farben gemeint, das habe ich jetzt selbst dazugedichtet und eingecheckt. Mehr als Farbanpassung wollte ich nicht.
Da ich nur fhem.cfg.demo als Beispiel habe, kann sein, dass ich was uebersehen habe.
Titel: Antw:Neues style: f18
Beitrag von: DarkT am 22 Januar 2018, 20:43:22
Zitat von: rudolfkoenig am 22 Januar 2018, 20:17:40
Danke fuer die Selektoren. Mit Farbe habe ich eine aus den in "f18 special" auswaehlbaren Farben gemeint, das habe ich jetzt selbst dazugedichtet und eingecheckt. Mehr als Farbanpassung wollte ich nicht.
Da ich nur fhem.cfg.demo als Beispiel habe, kann sein, dass ich was uebersehen habe.

Sorry da habe ich wohl was falsch verstanden, aber Danke!
Titel: Antw:Neues style: f18
Beitrag von: Damian am 23 Januar 2018, 18:01:52
Wenn ein Modul die Eigenschaft

$hash->{FW_addDetailToSummary} = 1;

nutzt, um Details unter der Statuszeile anzuzeigen, dann fehlt eine Abgrenzungslinie um Module, die gruppiert sind, besser von einander zu trennen (siehe Anhang).

Um eine klarere Trennung zu erreichten, könnte man in f18style.css hinter der Zeile 23

  border-bottom: 1px solid gray;

einfügen.

Wenn es nicht für alle gewünscht ist, dann möchte ich bitten die Eigenschaft zumindest für das DOIF-Modul (in f18style.css hinter der Zeile 25)

table.block.wide.uiTabledoif { border-bottom: 1px solid gray; }

einzufügen.

Im Anhang Darstellung ohne Linie und mit Linie
Titel: Antw:Neues style: f18
Beitrag von: nils_ am 24 Januar 2018, 08:44:29
/mitlesemerker :D


sehr schick bisher!!


nur interessehalber:
wie kommt der name f18 zustande?
jahreszahl?
Titel: Antw:Neues style: f18
Beitrag von: DarkT am 24 Januar 2018, 14:06:15
Und das Dashboard sieht jetz tauch wieder super aus. Danke Rudolf
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 25 Januar 2018, 23:38:55
ZitatUm eine klarere Trennung zu erreichen, könnte man in f18style.css hinter der Zeile 23
border-bottom: 1px solid gray;
einfügen.
Danke, mir gefaellt es auch besser so, habs eingcheckt.
Titel: Antw:Neues style: f18
Beitrag von: Markus Bloch am 29 Januar 2018, 15:21:01
Hallo Rudi,

gibt es einen Grund, warum Du mir die Tabellen in der mobilen Ansicht auf 2 Spalten abschneidest?

@media screen and (orientation: portrait) {
  body.small table.block tr td:nth-child(n+3) { width: 0px; display: none; }
  body.small #content > table { width: 100%; }
}


Was kann ich dagegen tun?

Gruß
Markus
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 29 Januar 2018, 15:30:34
Zitatgibt es einen Grund, warum Du mir die Tabellen in der mobilen Ansicht auf 2 Spalten abschneidest?
Ja: "normale" Tabellen haben mehr Inhalt pro Spalte, und viele Spalten mit viel Inhalt schaut auf einem schmalen Bildschirm haesslich aus. Vermutlich sollte ich die Abschaltung optional machen.

ZitatWas kann ich dagegen tun?
Geraet quer halten.
Titel: Antw:Neues style: f18
Beitrag von: Markus Bloch am 29 Januar 2018, 15:49:05
Zitat von: rudolfkoenig am 29 Januar 2018, 15:30:34
Ja: "normale" Tabellen haben mehr Inhalt pro Spalte, und viele Spalten mit viel Inhalt schaut auf einem schmalen Bildschirm haesslich aus. Vermutlich sollte ich die Abschaltung optional machen.
Die Idee an sich finde ich gut. Ich würde es nur etwas variabel gestalten, so dass man als Modulmaintainer der eine SummaryFn und DetailFn in FHEMWEB anbindet sowas steuern kann (evtl. als CSS class). Einen konkreten Vorschlag habe ich gerade nicht zur Hand. Ich könnte mir vorstellen in so einem Fall für FB_CALLLIST vorstellen bestimmte Spalten durchaus auszublenden. Da jedoch die Spaltenreihenfolge durch den User veränderbar ist, müsste ich die zu entfernenden Spalten durch eine CSS-Klasse bspw. flaggen.

Zitat von: rudolfkoenig am 29 Januar 2018, 15:30:34
Geraet quer halten.
Stimmt, beim studieren deines CSS-Statements bin ich auch drauf gekommen. :-)

Titel: Antw:Neues style: f18
Beitrag von: Amenophis86 am 29 Januar 2018, 17:45:25
Es gibt die Funktion Tabellen scrollbar zu machen, wenn sie zu groß für den Bildschirm sind. Mir fällt nur gerade nicht mehr ein wie. Hab das mal bei ner Homepage eingebaut. Vielleicht wäre das eine Idee.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 03 Februar 2018, 23:39:57
Ich habe das Verschieben der Gruppen und SVGs implementiert (aka "Dragging"), d.h. Funktionalitaet von Dashboard nachimplementiert, siehe Anhang. Die Features "Pin" und "Dragging" sind nicht kompatibel (ist Euphemismus fuer: "ist kaputt, wenn man beide verwendet"), deswegen ist "Pin" deaktiviert, falls "Dragging" aktiv ist, bzw. wenn einer der Elemente auf der Seite verschoben ist. "Dragging" ist auf der Detailseite und generell auf Telefonen deaktiviert.

Weiterhin sollte jetzt auch Firefox die SVG Hintergruende einfaerben, und durch setzen des meta Tags theme-color wird unter Android die URL-Leiste bzw. die Statusanzeige farblich angepasst.
Titel: Antw:Neues style: f18
Beitrag von: kleineslichtHH am 04 Februar 2018, 12:15:11
Das ist eine sehr gute Möglichkeit die der Übersichtlichkeit dient, vielen Dank dafür .
Titel: Antw:Neues style: f18
Beitrag von: accessburn am 05 Februar 2018, 11:54:54
Hallo, ich bin mir nicht sicher ob das Teil des Styles ist oder schon zum eigentlichen Frontend gehört!

Die Tabelle die im div "content" ist hat keine class.

<div id="content" style="left: 143px;" class="animated"><table> ...

Damit der "Additional css" dort greifen kann müsste eine Class oder ID auf dieses <table>.
Würdest du/ihr das einfügen?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 05 Februar 2018, 12:10:19
Mit div#content > table kann man die besagte Tabelle im CSS doch genausogut fassen, oder uebersehe ich etwas?
Titel: Antw:Neues style: f18
Beitrag von: accessburn am 05 Februar 2018, 12:13:07
Oh, dann hatte ich wohl einen Fehler drin, denn es wurde nicht angenommen.
Okay, ich nehme alles zurück und behaupte das Gegenteil :-D
Titel: Antw:Neues style: f18
Beitrag von: Invers am 05 Februar 2018, 16:49:33
Ich habe 2 Fragen zum f18:

Mein fhem nutzt 3 Floorpläne.
Der Hintergrund ist blau (Hintergrundbild), es wird kein Menü benutzt und der Rest des Bildschirmes, der die von mir festgelegte Floorplangrösse überschreitet, ist grau (vermutlich transparent). Jeder FP zeigt außerdem eine Uhr (niceclock) an.

Bei meinem ersten FP (Bild 2) funktioniert alles hervorragend, bis auf die Schrift unter der Uhr, aber das ist ein anderes Problem.
Beim zweiten und dritten FP wird jedoch der Hintergrund nicht grau (oder transparent), sondern in selber Farbe, wie bei f18 (in meinem Fall grün), angezeigt (Bild 3). Die Uhr scheint dahinter zu liegen, oder gar nicht vorhanden zu sein, was ich allerdings bezweifle.
Da alle FP auf dieselbe CSS-Datei zurückgreifen, kann da der Fehler eigentlich nicht liegen.
Auch innerhalb der Anzeige von Readingsgroups kommt es zu Abweichungen.
Die gesamte Fläche der RG auf dem gezeigten Bild sollte eigentlich grün sein, was sie bei anderen Styles auch ist. Bei f18 hingegen nicht mehr. Diese Abweichungen zeigen sich bei mehreren Readingsgroups auf verschiedenen FPs (Bild 1).
Könnte es am f18 liegen?


Zusatzfrage: Was muss ich genau ändern, wenn ich die Obige Befehlszeile verkürzen möchte? Die ist für mich viel zu breit, wodurch ich einen waagerechten Scrollbalken erhalte.
Ich hoffe, mir kann geholfen werden.

Hier vorsichtshalber noch das List zum FP:
Internals:
   CFGFN     
   NAME       Wohnzimmer
   NR         228
   STATE      Defined
   TYPE       FLOORPLAN
   READINGS:
Attributes:
   CssFiles   niceclocks/niceclocks.css
   JavaScripts niceclocks/fhem_niceclocks.js
   commandfield 0
   fp_arrange 0
   fp_backgroundimg fp_background.png
   fp_default 1
   fp_noMenu  1
   fp_viewport "width=1024"
   niceclocksParam { "clockStyle" : "analog","clockCircle" : "blue","clockHours" : "yellow","clockSeconds" : "orange", "analogBorder" : true,"fixMenu" : false,"keepBg" : false,"keepHeader" : false }
   room       System
   stylesheet bluefloorplanstyle.css
   userattr   niceclocksParam


Vielen Dank für Tipps und Hilfe.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 05 Februar 2018, 19:11:54
Ich habe die Fragen nicht wirklich verstanden, deswegen bitte um Ruecksicht, falls ich daneben antworte.

1. Verstanden: manche FLOORPLAN Backgrounds werden mit f18 ueberschrieben.
Ja, das kann sein, f18 setzt agressiv die gesetzten Farben. Je nach Raum unterschiedliche Einstellungen sind mit f18 (noch) nicht moeglich.

2. Verstanden: die Befehlszeile oben ist zu breit.
Die Befehlszeile oben sollte sich vom rechten Rand bis zum FHEM-Logo (minus Rand auf beiden Seiten) ausdehnen. Wenn das nicht der Fall ist, dann hat irgendwer (FLOORPLAN / niceclock.js / etc) die Berechnungsgrundlage verfaelscht oder die Befehlszeile verschoben.
Titel: Antw:Neues style: f18
Beitrag von: Invers am 05 Februar 2018, 19:40:11
Entschuldigung. Ich hatte versucht, mich so präzise, wie möglich, auszudrücken. Leider gelingt das nicht immer so gut, wie geplant.

Zitat1. Verstanden: manche FLOORPLAN Backgrounds werden mit f18 ueberschrieben.
Ja, das kann sein, f18 setzt aggressiv die gesetzten Farben. Je nach Raum unterschiedliche Einstellungen sind mit f18 (noch) nicht moeglich.

Ja, aber in meinem Fall werden ja die 3 FP nicht gleich behandelt. Einer ist ja korrekt angezeigt (der mit dem grauen Hintergrund). Wobei hier Hintergrund nicht die richtige Bezeichnung ist. Der Hintergrund der FPs ist ja grün. Ich meinte die von mir nicht für die FPs genutzte Fläche im Browserfenster.
Der eigentliche FP befindet sich ausschliesslich im blauen Bereich. Grau für den Rest ist korrekt. Grün für den Rest ist nicht korrekt.
Warum werden die FP so unterschiedlich behandelt? Der erste FP stimmt, die anderen beiden nicht.
Könnte es sein, dass der Umstand, dass mehrere FPs existieren können, nicht berücksichtigt ist?

Zitat2. Verstanden: die Befehlszeile oben ist zu breit.
Die Befehlszeile oben sollte sich vom rechten Rand bis zum FHEM-Logo (minus Rand auf beiden Seiten) ausdehnen. Wenn das nicht der Fall ist, dann hat irgendwer (FLOORPLAN / niceclock.js / etc) die Berechnungsgrundlage verfaelscht oder die Befehlszeile verschoben.

Ja, das stimmt. Die Niceclock verschiebt die Zeile, damit die Uhr sichtbar ist. 
Ich wollte nur wissen, wie ich sie kürzen (also nicht verschieben) kann.Width greift hier nicht. Ich hatte versucht, #hdr und so weiter zu verändern. Jedoch ohne Erfolg.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 05 Februar 2018, 22:47:07
ZitatJa, aber in meinem Fall werden ja die 3 FP nicht gleich behandelt.
Offensichtlich funktioniert hier "f18 setzt agressiv die gesetzten Farben" nicht wie geplant.
Wenn jemand dafuer einen Patch hat, schaue ich es gerne an.

ZitatIch wollte nur wissen, wie ich sie kürzen (also nicht verschieben) kann.
Die Breite wird in f18_resize explizit gesetzt. Eine Variante, die die Breite anhand der Logo-Groesse bestimmt habe ich gerade getestet, allerdings zieht das das Setzen von Top fuer Menu und Content nach sich, und es schaut immer noch kaputt aus, insb. bei eingeklappten Menu, siehe Anhang. Ich bleibe bei der statischen Variante.
Titel: Antw:Neues style: f18
Beitrag von: Invers am 05 Februar 2018, 23:56:26
Schade. Man kann nicht alles haben. :-)
Trotzdem besten Dank.
Titel: Antw:Neues style: f18
Beitrag von: raiderxxl am 06 Februar 2018, 08:41:27
Guten Morgen,

Danke für diesen Style, ich mag in sehr! (nein ich Liebe es!)

Gibt es eine möglichkeit die einzelnen Elemente/Geräte einer Seite wie auf dem Dashboard in der Breite zu verändern?
Ich hoffe Ihr versteht was ich meine... Ich hab zum beispiel eine Lampe mit sehr vielen WebCMDs, dadurch wird das Gerät sehr breit. Alle anderen Geräte auf der Seite sind nun gleich breit und ich kann keine nebeneinander setzten.
Ich würd gerne unter ein Breites 2,3 Schmale Geräte setzten...

Mach weiter so mit f18, ich find`s geil!

Kleine Frage noch wer oder was war Namensgeber? ;-)

Grüßle
Pascal


Titel: Antw:Neues style: f18
Beitrag von: Damian am 06 Februar 2018, 10:21:09
Ich habe f18 für mein Wand-Tablet testweise ausprobiert. Dort macht ja die Eingabezeile wenig Sinn.

Wäre es nicht sinnvoll, genauso wie andere Dinge, die Kommandozeile ebenfalls ausblendbar zu machen, bevor man den f18 für sich patcht?


Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 06 Februar 2018, 12:27:25
ZitatGibt es eine möglichkeit die einzelnen Elemente/Geräte einer Seite wie auf dem Dashboard in der Breite zu verändern?
Z.Zt. nicht, und ich vermute, es ist nicht ganz trivial zu implementieren.
Ich hatte es eigentlich vorgehabt, aber erstmal aufgegeben.

ZitatWäre es nicht sinnvoll, genauso wie andere Dinge, die Kommandozeile ebenfalls ausblendbar zu machen, bevor man den f18 für sich patcht?
Das ist schon auf der TODO-Liste. Werde aber keinen Liefertermin nennen :)
Titel: Antw:Neues style: f18
Beitrag von: raiderxxl am 07 Februar 2018, 08:39:41
Hallo,

was mir noch aufgefallen ist.
Verschiebt man ein Gerät rechts neben ein anderes. Und löscht dann das linke, rutscht das Rechte dann soweit nach oben das man es nicht mehr verschieben kann.

Grüßle

Pascal
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 07 Februar 2018, 08:45:32
Das ist mir bekannt und der einfachen Implementation geschuldet.
Das ist auch der Grund, warum das "Pin" Feature deaktiviert ist.
Titel: Antw:Neues style: f18
Beitrag von: PatrickR am 07 Februar 2018, 20:39:37
Mahlzeit!

Zunächst Danke für die viele Mühe, die Du in das neue Style steckst.

Aktuell gibt es bei mir noch ein Mini-Problem: Das >-Zeichen bei den aufklappbaren Untermenüs wird noch nicht in der korrekten Farbe angezeigt.

Patrick
Titel: Neues style: f18
Beitrag von: Benni am 07 Februar 2018, 21:56:08
Wurden in diesem Thread Posts gelöscht?
Ich könnte schwören, dass ich hier vorhin noch was zu einer Facebook Gruppe gelesen habe. :-\
Titel: Antw:Neues style: f18
Beitrag von: igami am 07 Februar 2018, 22:04:07
Zitat von: Benni am 07 Februar 2018, 21:56:08
Wurden in diesem Thread Posts gelöscht?
Ich könnte schwören, dass ich hier vorhin noch was zu einer Facebook Gruppe gelesen habe. :-\
Von der Facebook Gruppe habe ich auch was gelesen.
Titel: Antw:Neues style: f18
Beitrag von: Esjay am 07 Februar 2018, 22:04:45
Zitat von: Benni am 07 Februar 2018, 21:56:08
Wurden in diesem Thread Posts gelöscht?
Ich könnte schwören, dass ich hier vorhin noch was zu einer Facebook Gruppe gelesen habe. :-\
Wurde in einen extra Topic verlegt,wegen offtopic. Glaube er ist auch in das Unterforum gewandert.

Edit : https://forum.fhem.de/index.php/topic,83980.0.html
Titel: Neues style: f18
Beitrag von: Benni am 07 Februar 2018, 22:09:22
Zitat von: Esjay am 07 Februar 2018, 22:04:45
Wurde in einen extra Topic verlegt,wegen offtopic. Glaube er ist auch in das Unterforum gewandert.

Edit : https://forum.fhem.de/index.php/topic,83980.0.html

Danke für den Link! [emoji4]
(Den hätte man aber auch gleich mal hier lassen können, statt einfach kommentarlos zu verschieben)

Update: Und genauso kommentarlos wurde der neue Thread dazu inzwischen auch vom Moderator gesperrt (Deshalb muss ich hier nochmal ergänzen).
Wieso?
Ist diese Diskussion hier im Forum so unerwünscht? ???
Titel: Antw:Neues style: f18
Beitrag von: krikan am 08 Februar 2018, 08:10:25
Zitat von: Benni am 07 Februar 2018, 22:09:22(Den hätte man aber auch gleich mal hier lassen können, statt einfach kommentarlos zu verschieben)
Ich wollte den Thread hier sauber halten, da der Zusammenhang mit f18 für mich nicht erkennbar ist.
Es tut mir sehr leid, dass ich nicht noch einen Extralink hier im Thread gepostet habe. Sorry.

Zitat von: Benni am 07 Februar 2018, 22:09:22Update: Und genauso kommentarlos wurde der neue Thread dazu inzwischen auch vom Moderator gesperrt (Deshalb muss ich hier nochmal ergänzen).
Wieso?
Ist diese Diskussion hier im Forum so unerwünscht? ???
Diese Diskussion wurde durch keinen Moderator gesperrt. Diese durch Edit eingefügte Behauptung ist falsch.
Die Diskussion ist hier im Forum sogar sehr erwünscht. Bitte einmal https://forum.fhem.de/index.php/topic,83980.0.html lesen.

Macht doch bitte einfach einen weiteren Thread zum Thema auf oder bittet den Ersteller des ersten Beitrags von https://forum.fhem.de/index.php/topic,83980.0.html um Threadöffnung.

Gruß, Christian

edit: Typo
Titel: Antw:Neues style: f18
Beitrag von: GeZi3560 am 08 Februar 2018, 11:01:52
Das sperren war ein Versehen von Michael, ist wieder offen ..
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 11 Februar 2018, 18:15:31
Neu dazugekommen (siehe auch den Anhang):
- etliche Einstellungen koennen zusaetzlich Raum-spezifisch sein
- Input-Feld optional verstecken
- Bild als Hintergrund. Die Bilder werden in www/images/background gesucht, symlink geht auch.
- Umstellen auf f18 und wieder zurueck sollte die Hintergrundfarbe nicht mehr kaputtmachen, dafuer muss aber das Css Attribut entfernt werden, s.u.

Achtung:
- Wegen der Raum-Spezifischen Umbau hat sich das Format von styleData leicht geaendert, und deswegen werden die bisherigen Farben ignoriert, und muessen neu gesetzt werden.
- das Css Attribut wird nicht mehr angefasst, und das bisher reingeschriebene body,#menu { background:xxx} muss entfernt werden (oder Css komplett loeschen)
- ich habe nicht alle Features nachgetestet ...

ZitatDas >-Zeichen bei den aufklappbaren Untermenüs wird noch nicht in der korrekten Farbe angezeigt.
Habe ich gefixt, war aber aufwendig, weil SVG in background-image:url() nicht per CSS eingefaerbt werden kann.
Wenn doch, bitte mir verraten, wie.
Titel: Antw:Neues style: f18
Beitrag von: Benni am 11 Februar 2018, 22:06:09
Zitat von: krikan am 08 Februar 2018, 08:10:25
Diese Diskussion wurde durch keinen Moderator gesperrt. Diese durch Edit eingefügte Behauptung ist falsch.

Nur noch kurz zur Klarstellung: Das ist die Information, die man bekommt, wenn man versucht, per Tapatalk auf ein geschlossenes Thema zu antworten.

Titel: Antw:Neues style: f18
Beitrag von: herrmannj am 11 Februar 2018, 22:12:48
falsch bleibt falsch :)
Titel: Antw:Neues style: f18
Beitrag von: raiderxxl am 12 Februar 2018, 14:18:02
Hallo,

hätte noch einen Feature-Request ;-)

Möglichkeit eine Transparenz (in %) der Devices anzugeben, damit man das schöne Neue Hintergrundbild auch sehen kann.. :-)

(Edit) Kann man den Rand um das Menü schmaler machen?

das f18 wird immer schöner!
Danke

Pascal


Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 12 Februar 2018, 17:25:18
Zitathätte noch einen Feature-Request ;-)
Dann hilf mir, und such mir alle CSS Selektoren zusammen, die sowas brauchen.

ZitatKann man den Rand um das Menü schmaler machen?
Ja, dann wird es aber bei nicht eingesteckten Pin schwer lesbar.
Titel: Antw:Neues style: f18
Beitrag von: schwatter am 12 Februar 2018, 18:27:22
Benötigt das Backgroundimage ein bestimmtes Format? Wenn ich ein *.jpg benutze, passiert nichts. Auch Strg + F5 funktioniert nicht. Nutze Chrome.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 12 Februar 2018, 19:26:59
ZitatBenötigt das Backgroundimage ein bestimmtes Format?
.jpg oder .png.

Habe gerade einen Bug entdeckt (und gefixt), was eine "PERL WARNING: ^* matches null string many times in regex..." Zeile im Log produziert hat, betrifft aber nur die Anzeige der Dateinamen im Dialog. Falls du mit dem Auswahl ein Problem hast, dann lohnt sich ein update. Falls die Dateiliste angezeigt wird, dann habe ich keine Idee. Ich wuerde "attr WEB verbose 4" setzen, und nach einer Zeile mit "GET /fhem/images/background/..." im Log suchen, und schauen, ob der Browser bei Eingabe dieser URL das Bild anzeigen kann.

Sonst: Das Fragezeichen neben save ist jetzt wieder rot.
Titel: Antw:Neues style: f18
Beitrag von: Taipan am 12 Februar 2018, 20:16:53
Hintergrundbild wird auch hier nicht angezeigt. Weder in Firefox noch in Chrome.
Titel: Antw:Neues style: f18
Beitrag von: schwatter am 12 Februar 2018, 20:30:06
Habe mit verbose 4 geschaut. Ändere ich den Background, wird dieser auch als letztes in der Zeile gesetzt.

styleData {  "f18": { ..., ..., ..., "bgImg": "blured.jpg"  } }
Titel: Antw:Neues style: f18
Beitrag von: fervor am 12 Februar 2018, 20:31:39
Hi,

das Theme sieht schon echt gut aus, nur leider hat es wie bisher alle smallscreen Themes im Portraitmode bei mir das Problem, dass nur 2 Spalten von meiner Readinggroup angezeigt werden. Zumindest im Landscapemode sind sie zu sehen, quetschen sich jedoch an den linken Rand. Über die gesamte zur Verfügung stehende Breite mittig zentriert wäre da besser; vielleicht auch optional. Bei schaltbaren Geräten wären die 2 Spalten jedoch okay, "on" und "off" braucht glaube ich kaum einer, wenn er mit dem Symbol schalten kann.

Die Seite wird bei mir auch nicht in voller Breite genutzt (Portrait und Landscape), da wird viel Platz verschenkt. Klar, man kann auch rein zoomen, aber ich denke bei kleinen Bildschirmen (Smartphone) wäre per default 100% der Breite zu nutzen schon okay. Hatte gedacht mit hide input könnte man das schon erreichen, hat aber bei mir leider nicht funktioniert.

bin gespannt auf die weitere Entwicklung
VG fervor
Titel: Antw:Neues style: f18
Beitrag von: schwatter am 12 Februar 2018, 21:01:37
Ok, ich habe den Style f18 unter Port 8084. Jetzt habe ich ihn nochmal unter 8083 auf f18 geändert. Siehe da, Background wurde geändert.

edit:

Unter Web bleibt das Sidebarmenü die ganze Zeit da und verdeckt meinen geöffneten Räume. Background funktioniert aber.
Unter Webphone funktioniert der Background nicht. Setze ich z.B jetzt den Style auf ios7touchpad, bleibt die Backgroundfarbe strikt. Auch f18 kann sie nicht ändern.
Unter Webtablet funktioniert alles.

Versucht habe ich Strg + F5 sowie unter Developertools -> Application -> Clear site data

edit2:

Ich habe Dragging aktiviert. In einem Raum habe ich ein Element recht weit rechts. Dieses ist nun tot. Kein verschieben sowie auch kein bedienen
mehr möglich. Ich glaube ein Resetbutton wäre sinnvoll.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 12 Februar 2018, 23:07:54
@schwatter:
- verbose: ich will niemanden hier zu irgendetwas zwingen. Nur wenn _ich_ das Problem loesen soll, dann haette ich gerne Antwort auf _meine_ Fragen.
- bleibender Background: das Css Attribut der vorherigen Version wurde vermutlich nicht entfernt (siehe Antwort #129)
- dragging: das ist z.Zt. relativ zu dem vorherigen Block implementiert, und sollte deswegen (noch) nicht mit dynamischen Inhalt verwendet werden. Wurde hier schon mindestens einmal erwaehnt.
- reset: kann man durch Loeschen von styleData.
- sidebarmenu: vermutlich ist der Pin rausgezogen. Ohne Screenshot+JS-Conselen-Ouput+FHEMWEB-Definition muss man halt mehr raten.

@fervor: ich verwende kein readingsGroup, und teste mit fhem.cfg.demo: da ist alles Bildschirmfuellend. Will sagen: ohne einen konkreten Beispiel werde ich nichts daran aendern, vermutlich brauche ich selbst mit Beispiel die Hilfe des readingGroup Maintainers.
Titel: Antw:Neues style: f18
Beitrag von: schwatter am 12 Februar 2018, 23:38:49
Danke Post #129 war die Lösung.  Und Entschuldigung bezüglich Loggings. Das /GET war bei mir wegen Zeilenumbruch abgeschnitten.
Habe den Text falsch interpretiert.
Titel: Antw:SVG Hintergrund gleiche Background-Color
Beitrag von: cwagner am 13 Februar 2018, 07:30:36
Guten Morgen, seit dem jüngsten Update freue ich mich nicht nur über sehr nützliche und optisch ansprechende Verbesserungen, für die ich mich herzlich bedanke. Das ist wirklich eine tolle Verbesserung von FHEM.
Eine Sache stört mich allerdings: SVG-Plots werden kurz mit der bisherigen Hintergrundfarbe (ein "schmutziges" helles Gelb) aufgebaut und dann wird die Hintergurndfarbe "drüber" gestülpt. Die ist bei mir ein lichtes Grau, darüber sind aber manche Farben der Graphen nicht mehr sauber zu erkennen. Wo "drehe" ich, um den Hintergrund in den SVGs wieder heller zu bekommen, das komische Gelb muss gar nicht mal sein :-)

Herzliche Grüße

Christian
Titel: Antw:Neues style: f18
Beitrag von: raiderxxl am 13 Februar 2018, 08:36:42
Wieder auf Select Style dort der Punkt Background... Farbwert eintragen

grüßle

Pascal

Titel: Antw:Neues style: f18
Beitrag von: cwagner am 13 Februar 2018, 09:30:31
Richtig, aber das regelt ja den Background des FHEM-Fenster und ich fände es schöner, wenn nicht der Hintergrund der SVGs gleich dem Hintergrund des FHEM-Fensters ist.

Christian
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 13 Februar 2018, 09:36:54
ZitatWo "drehe" ich, um den Hintergrund in den SVGs wieder heller zu bekommen, das komische Gelb muss gar nicht mal sein :-)
Z.Zt. gar nicht, er ist auf "Background" (mit Verlauf +-5%) hartkodiert. Um ihn zu aendern braucht man einen weiteren Farbregler. Je nach Hintergrund sind die bisherigen Linienfarben auch unbrauchbar, dafuer braeuchte man 8 weitere Regler.

Alle Farben (auch Raumweise) kann bzw. konnte man auch bisher via CSS setzen, hat aber niemand gemacht. Ich versuche die Einfaerberei mit f18 dem Benutzer zu vereinfachen, und deswegen muss es halbwegs einfach bleiben. Wenn jemand eine Loesung fuer das Problem hat, der soll sich melden.
Titel: Antw:Neues style: f18
Beitrag von: Taipan am 13 Februar 2018, 17:12:05
Mit der Bahnhofsuhr unter "pgm2/clock.js" als Javascript funktioniert das mit dem Hintergrundbild nicht! Das ist mein Fehler hier...
Titel: Antw:Neues style: f18
Beitrag von: Taipan am 13 Februar 2018, 17:24:19
Mit der Änderung an der PTB Uhr geht es wieder:

Zitat$(document).ready(function(){
//  $('body').css('background-image','url()');

  if ($('div.col_header.pinHeader.menu').is("div")) {
   $('div.col_header.pinHeader.menu').before( '<canvas id="clock" width="130" height="130"> Fehlermeldung </canvas>');
  } else {
   $('#logo').replaceWith( '<canvas id="clock" width="110" height="110"> Fehlermeldung </canvas>');
  }

  loadScript("pgm2/station-clock.js", function() {
    var clock = new StationClock("clock");
    clock.body = StationClock.RoundBody;
    clock.dial = StationClock.SwissStrokeDial;
    clock.hourHand = StationClock.SwissHourHand;
    clock.minuteHand = StationClock.SwissMinuteHand;
    clock.secondHand = StationClock.SwissSecondHand;
    clock.boss = StationClock.NoBoss;
    clock.minuteHandBehavoir = StationClock.BouncingMinuteHand;
    clock.secondHandBehavoir = StationClock.OverhastySecondHand;

    function animate(clock) {
      clock.draw();
      window.setTimeout(function(){animate(clock)}, 50);
    }

    animate(clock);

  }, true);

});
Titel: Antw:Neues style: f18
Beitrag von: Sunny am 13 Februar 2018, 18:21:52
@Pascal(raiderxxl),
Zitat von: raiderxxl am 06 Februar 2018, 08:41:27
... Lampe mit sehr vielen WebCMDs, dadurch wird das Gerät sehr breit...
Hast Du Dir schon mal
ZitatwebCmdLabel
...Um mehrzeilige Anzeige zu realisieren, kann ein Return nach dem Text und vor dem Doppelpunkt eingefuehrt werden.
angeschaut?

@Rudolf,
Danke für den Style.  8)

Beste Grüße sunny
Titel: Antw:Neues style: f18
Beitrag von: raiderxxl am 13 Februar 2018, 21:52:43
Zitat von: Sunny am 13 Februar 2018, 18:21:52
@Pascal(raiderxxl),Hast Du Dir schon mal  angeschaut?

Hallo Sunny,

Bringt mir nur nix... aber danke...

Grüßle
Titel: Antw:Neues style: f18
Beitrag von: kleineslichtHH am 14 Februar 2018, 19:40:37
Gibt es eine Möglichkeit die Anordnung einzelner Elemente an einem Raster (einstellbar nach 5px,10px,15px etc.) auszurichten?
Damit fände ich die Positionierung noch leichter :-)
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 14 Februar 2018, 20:53:08
Das habe ich getestet, ergibt bei der aktuell verwendeten Methode (relative Positionierung) nicht das, was man erwartet.
Titel: Antw:Neues style: f18
Beitrag von: tomspatz am 16 Februar 2018, 13:39:51
In der Detailansicht von einem Device gibt es doch die Knöpfe "set" und "attr", diese sind jetzt transparent ??

LG
Tom
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 16 Februar 2018, 13:52:29
Stimmt. Mir fehlt noch die Bewertung ala "Endlich, mir gefaellt es so besser", oder ein "Das kann man so ja gar nicht verwenden..."
Titel: Antw:Neues style: f18
Beitrag von: raiderxxl am 16 Februar 2018, 14:00:35
Endlich, mir gefaellt es so besser  ;D

Grüßle

Pascal
Titel: Antw:Neues style: f18
Beitrag von: tomspatz am 16 Februar 2018, 15:13:18
herrrrrlich  :D

vielen dank Rudi

mir gefällt es so auch besser  ;)

LG
Tom
Titel: Antw:Neues style: f18
Beitrag von: Phill am 16 Februar 2018, 15:17:41
Mir gefällt es auch besser. Aber vielleicht noch einen einfachen grauen Rahmen drum, wie um das Dropdown. Dann erkennt man besser das man dort drücken muss/kann, und das Design ist noch einheitlicher. 

Wobei ich sehe gerade firefox zeigt das Dropdown etwas vertieft an. Wird in dem Fall schwer das Design zu vereinheitlichen.

oben chromium unten firefox
Titel: Antw:Neues style: f18
Beitrag von: Sunny am 16 Februar 2018, 18:01:55
Moin Rudolf,

"Endlich, mir gefaellt es so besser"
bzw optional wäre es noch besser.  ;)

Hast Du eventuell auf Deiner ToDo-Liste, die aufklappbaren Untermenüs auch mit "Pins" zu versehen?
( Bin erst durch diesen Thread auf diese nützliche Funktion aufmerksam geworden. )

LG
sunny
Titel: Antw:Neues style: f18
Beitrag von: cwagner am 16 Februar 2018, 20:36:22
Moin, Rudolf,

auch ich spreche mich gerne für die Set-, attr- und get-"Knöpfe" aus. F18 macht wirkmlich Spaß. Danke für Deine Arbeit!
Christian
Titel: Antw:Neues style: f18
Beitrag von: Benjamin50 am 17 Februar 2018, 15:40:56
Hallo

Das neue style: f18 gefällt mir sehr gut. :)

Ich bekomme aber jedes mal wenn ich im Menü auf Select Style klicke eine Fehlermeldung.
Und beim Feld Target lässt sich kein Raum auswählen es ist nur all sichtbar.
Titel: Antw:Neues style: f18
Beitrag von: Benni am 17 Februar 2018, 16:22:34
Hallo Rudi,

ich bekomme eine ähnliche Fehlermeldung wenn ich "Select Style" aufrufe (s. Screenshot)

Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 17 Februar 2018, 18:31:54
Koennt ihr bitte die Ausgabe von "JsonList2 .* room" hier anhaengen?
Titel: Antw:Neues style: f18
Beitrag von: Benni am 17 Februar 2018, 20:13:27
Zitat von: rudolfkoenig am 17 Februar 2018, 18:31:54
Koennt ihr bitte die Ausgabe von "JsonList2 .* room" hier anhaengen?

Im Anhang!

Btw.: jsonlist2 muss als command kleingeschrieben sein.

Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 17 Februar 2018, 20:54:34
Ich kann mit dem Anhang kein Problem reproduzieren.

ZitatBtw.: jsonlist2 muss als command kleingeschrieben sein.
Darueber laesst sich streiten (tut man aktuell auch), bei mir funktioniert es allerdings auch so, wie ich es geschrieben habe, und wenn bei dir nicht, dann ist die Meldung verstaendlich. Verwendest du eine modifizierte version von fhem.pl/AnalyzeCommand/getAbbr, was die Klein/Grossschreibung bei Befehlen deaktiviert?

Ich habe jetzt eine neue Version von f18.pm eingecheckt mit jsonlist kleingeschrieben, aber hauptsaechlich, weil in JavaScript solche Probleme mit try/catch und nicht mit eval (wie in Perl) abzufangen sind. Falls es immer noch nicht geht, dann sollte in der JS-Konsole die Quelle des Uebels zu sehen sein.
Titel: Antw:Neues style: f18
Beitrag von: Benni am 17 Februar 2018, 21:24:04
Zitat von: rudolfkoenig am 17 Februar 2018, 20:54:34
Verwendest du eine modifizierte version von fhem.pl/AnalyzeCommand/getAbbr, was die Klein/Grossschreibung bei Befehlen deaktiviert?

Nichts dergleichen und mein letztes update habe ich erst heute morgen durchgeführt.


Latest Revision: 16189

File                      Rev   Last Change
fhem.pl                   16170 2018-02-13 21:19:52Z rudolfkoenig


Titel: Antw:Neues style: f18
Beitrag von: Benni am 17 Februar 2018, 21:45:36
Zitat von: rudolfkoenig am 17 Februar 2018, 20:54:34
Ich habe jetzt eine neue Version von f18.pm eingecheckt mit jsonlist kleingeschrieben, aber hauptsaechlich, weil in JavaScript solche Probleme mit try/catch und nicht mit eval (wie in Perl) abzufangen sind. Falls es immer noch nicht geht, dann sollte in der JS-Konsole die Quelle des Uebels zu sehen sein.

sieht gut aus! :)

Danke!

Titel: Antw:Neues style: f18
Beitrag von: Thyraz am 19 Februar 2018, 22:54:47
Sehr fein, gerade erst den Thread entdeckt.

Besonders die Möglichkeit einfach und schnell zusätzlichen CSS Code mit anzugeben gefällt mir sehr gut.
Jetzt noch ein Save Button für die selbst erstellten Presets und als Auswahl ein DropDown statt den 3 festen Links und ich bin glücklich.  ;D

Die Puristen mögen vor Schock in Ohnmacht fallen:
Eine etwas schlankere Schrift, helle Farben und ein wenig mehr Whitespace um die Elemente stehen dem Webinterface gar nicht schlecht. :)

Additional CSS:

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh7USSwiPGQ3q5d0.woff2) format('woff2');
}

body, input, select, textarea {
    font-family: 'Lato';
    font-weight: 300;
    font-size: 17px;
}

div.pinHeader {
    color: white;
    height: 21px;
    border-radius: 5px 5px 0px 0px;
    padding: 5px 8px 5px 8px;
}

input, textarea {
    border-style: solid;
    border-width: 2px;
    border-color: #DDDDDD;
    border-radius: 5px;
}

svg:not([fill]):not(.jssvg) {
    fill: #666666;
}

table.room, table.block.wide, table.fileList {
    border-top: 0px;
    border-bottom: 0px;
}

table.block.wide td > div {
    padding: 4px;
}

div[class^="menu_"] {
    padding: 4px;
}

.handle {
    color: #666666 !important;
    border-radius: 15px;
    border: 2px solid;
}


Ist nur ein Schnellschuss.
Keine Ahnung wie das auf Mobilgeräten aussieht oder wie hässlich das eine oder andere Wecmd / Device dadurch wird.
Aber das lässt sich ja sicher alles lösen.

Anpassungen an der Oberfläche sind mit dem neuen Style aber auf alle Fälle recht einfach umzusetzen. :)
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 20 Februar 2018, 09:13:28
Schick, ich werde vermutlich ein paar Ideen ins "default" uebernehmen.

Achtung: da ich von relativer auf "absolute" Positionierung umstellen will (bzw. muss), kann sein, dass sich an der Struktur was aendern wird.
Titel: Antw:Neues style: f18
Beitrag von: raiderxxl am 20 Februar 2018, 09:42:37
Sieht ein bisschen aus wie Tasmota :-)

Grüßle

Pascal
Titel: Antw:Neues style: f18
Beitrag von: P.A.Trick am 20 Februar 2018, 10:12:22
Zitat von: raiderxxl am 20 Februar 2018, 09:42:37
Sieht ein bisschen aus wie Tasmota :-)

Grüßle

Pascal

Stimmt aber Tasmota ist einfach, klar und angenehm. Warum also nicht!?
Titel: Antw:Neues style: f18
Beitrag von: The-Holgi am 20 Februar 2018, 13:40:42
Hallo Rudolf,
erstmal vielen Dank für das neue style. Gefällt mir sehr gut und funktioniert auch auf dem PC mit Chrome und Firefox ohne Probleme.
Auf dem iPad mit Safari, ist mir aufgefallen, das sich der "Zustand" der Schalter in der Raumansicht nicht ändert bzw sich erst nach reload des Browsers ändert.
Auf der device Ebene funktioniert es wie gewohnt.

Gruß Holgi
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 20 Februar 2018, 14:03:00
Das Problem sollte nichts mit dem Style zu tun haben, oder ich muss was dazulernen.
Es wuerde helfen, die JS-Konsole zu sehen, das ist aber mW nur mit Safari auf dem Mac moeglich.
Titel: Antw:Neues style: f18
Beitrag von: Phill am 20 Februar 2018, 14:07:45
Also, es gab zumindest früher in den Einstellungen->Entwicklereinstellungen die Möglichkeit die Debugkonsole zu aktivieren.
Titel: Antw:Neues style: f18
Beitrag von: The-Holgi am 20 Februar 2018, 14:35:31
Das geht wohl nur, wenn man das iPad mittels Kabel an einen Mac anschließt und hier dann über Safari
das Menu Entwickler auf dem iPad aktiviert.
Habe leider keinen Mac.
Im alten dark style funktioniert die Anzeige übrigens.
Edit: Mit dem iPhone und webphone funktioniert es auch wie es soll.
Habe auf dem iPad ios 11.3 beta, womöglich liegt es daran.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 20 Februar 2018, 14:48:06
Was fuer ein iOS ist das, und wie ist die longpoll Verbindung?
Haben auch andere Probleme mit einem iOS Geraet? Komme gerade nicht an einem dran.
Titel: Antw:Neues style: f18
Beitrag von: The-Holgi am 20 Februar 2018, 15:10:01
Ist ios 11.3 beta. longpoll habe ich alle Einstellungen (0,1 und websocket) probiert.
Wäre ja interessant ob andere iPad user ohne beta version das gleiche Problem haben.
Titel: Antw:Neues style: f18
Beitrag von: Thyraz am 21 Februar 2018, 10:50:47
Zitat von: rudolfkoenig am 29 Januar 2018, 15:30:34
Ja: "normale" Tabellen haben mehr Inhalt pro Spalte, und viele Spalten mit viel Inhalt schaut auf einem schmalen Bildschirm haesslich aus. Vermutlich sollte ich die Abschaltung optional machen.

Ich vote mal dafür. :)
Titel: Antw:Neues style: f18
Beitrag von: Thyraz am 21 Februar 2018, 23:58:46
Hab beschlossen den minimalistischen weiß/blau Style von ein paar Posts weiter oben mal weiter zu treiben.
Menu ist nun dunkel, Slider haben ein neues Aussehen und diverse Feinkorrekturen.

Will den Thread hier aber nicht weiter zweckentfremden, daher bei Interesse hier klicken:
https://forum.fhem.de/index.php/topic,84760.0.html
Titel: Antw:Neues style: f18
Beitrag von: schwatter am 22 Februar 2018, 21:57:57
Hat jemand eine Idee, wie der Background nicht abgeschnitten wird? Bei langen Listen passiert das heraus scrollen.

Titel: Antw:Neues style: f18
Beitrag von: ToKa am 24 Februar 2018, 10:13:19
Hallo Rudi,

mit Hilfe des CSS-Attributs ist man ja in der Gestaltung super flexibel. Vielen Dank für den neuen Style.

Ich habe mir für das f18 nun auch eigene svg CSS Dateien angelegt, um z.B. die Schriftart identisch einzustellen. Das funktioniert alles sehr gut. Wenn ich aber mit dem Pin einen Plot zuklappe und dann wieder öffne, ist die Hintergrundfarbe des Plots die Standardfarbe gelb. Die Schriftart bleibt OK. Woran kann das liegen, es passiert nämlich nur im Chrome? Mit Edge gibt es den Effekt nicht und im IE 11 werde die Pins leider nicht angezeigt. Die Funktionalität des Pins ist zwar vorhanden, aber nach dem Zuklappen nicht mehr, so dass ein Aufklappen nicht möglich ist.

Eine weitere Auffälligkeit ebenfalls nur im Chrome (unter Win und Android, Cache bereits mehrfach geleert) habe ich noch beim Wechsel zwischen den Räumen. Es wird der neue Raum ganz kurz im default style angezeigt, bevor dann meine eigenen CSS Einstellungen greifen. Kann man das Verhindern?

Beste Grüße
Torsten
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 24 Februar 2018, 15:22:57
ZitatWenn ich aber mit dem Pin einen Plot zuklappe und dann wieder öffne,
Im "Normalzustand" kann man Plots nicht per Pin zuklappen, vermutlich das der zusaetzliche Mechanismus fuer das Problem zustaendig.

ZitatEs wird der neue Raum ganz kurz im default style angezeigt, bevor dann meine eigenen CSS Einstellungen greifen.
Mit f18 werden die einstellbaren CSS-Prameter per JavaScript gesetzt, nachdem die Seite fertig geladen ist. Wenn das laenger dauert, dann sieht man die Farben von defaultCommon.css was dem default Style entspricht. Ich habe vor ein "durchsichtiges" f18style.css zu bauen (und defaultCommon nicht mehr zu verwenden), damit das Flimmern nicht auffaellt. Es gibt natuerlich auch andere Loesungen, mit entsprechend mehr Aufwand.
Titel: Antw:Neues style: f18
Beitrag von: ToKa am 24 Februar 2018, 16:10:27
Hallo Rudi,

danke für die Rückmeldung.

Zitat von: rudolfkoenig am 24 Februar 2018, 15:22:57
Im "Normalzustand" kann man Plots nicht per Pin zuklappen, vermutlich das der zusaetzliche Mechanismus fuer das Problem zustaendig.

Die Plots sind mit anderen Elementen in einer Gruppe zusammengefasst (siehe Screenshots im ursprünglichen Beitrag) und die Gruppe hat einen Pin... ist standardmäßig so, also kein zusätzlicher Mechanismus.

Das mit dem "durchsichtigen" f18style.css klingt gut. Bin mal gespannt.

Beste Grüße
Torsten
Titel: Antw:Neues style: f18
Beitrag von: schwatter am 25 Februar 2018, 19:51:02
Zitat von: schwatter am 22 Februar 2018, 21:57:57
Hat jemand eine Idee, wie der Background nicht abgeschnitten wird? Bei langen Listen passiert das heraus scrollen.

Hab die Lösung. Folgendes hab ich unter Additional CSS eingefügt.

body, input, select, textarea {
    background-size: auto auto;
}
Titel: Antw:Neues style: f18
Beitrag von: willib am 26 Februar 2018, 13:47:52
Darf ich vorschlagen den aktuellen Raumnamen in der Übersicht auch anzuzeigen? Man erkennt jetzt nicht mehr auf Anhieb wo man sich befindet, zumindest auf mobile devices. Was haltet ihr davon?
Titel: Antw:Neues style: f18
Beitrag von: raiderxxl am 26 Februar 2018, 13:54:31
geht doch jetzt schon ...

Attribut title in global: { if($FW_room) { "FHEM: $FW_room" } elsif($FW_detail) { "FHEM: $FW_detail" } else { "Home, Sweet Home" } }

*Edit* grade gelesen das du das in der Übersicht haben willst sorry :-)
Titel: Antw:Neues style: f18
Beitrag von: Taipan am 27 Februar 2018, 13:40:46
@schwatter

Dein Code generiert aber keine Wiederholung des Hintergrundes! Das macht 'repeat'...

Zitatbody, cols.bg {
    background-size: 300px 300px;
    background-repeat:repeat;
}

Ich nutze eine 'randlose' Hintergrund-Kachel und lasse die repeaten...

(Ich habe cols.bg im Attribut styleData gelöscht und damit auch hinter dem Menü das Hintergrundbild durchgehend)

http://fs5.directupload.net/images/180227/4hmc5euj.png (http://fs5.directupload.net/images/180227/4hmc5euj.png)
Titel: Antw:Neues style: f18
Beitrag von: schwatter am 27 Februar 2018, 21:25:45
Find ich gruselig :) Ich mag lieber klare Farben oder verschwommene Bilder.

Der Style von Thyraz + mein Background

body, input, select, textarea {
    font-family: 'Lato';
    font-weight: 300;
    font-size: 17px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom right;
}


Titel: Antw:Neues style: f18
Beitrag von: Ajuba am 08 März 2018, 22:13:23
Ich habe gerade diesen Thread entdeckt und bin ganz neugierig.
Leider muss ich nun sehr blöd fragen wie man f18 einbindet.
Rudolf König schreibt
Ich habe ein Style eingecheckt, der ein bisschen Hilfe von JavaScript bekommt.
Der Skript wird neuerdings automatisch geladen, wenn eine Datei mit dem Style-Namen existiert.

Ich habe mal ganz naiv die "defaultCommon.css" unter "f18.css" abgespeichert und neu gestartet. Der Inhalt von meiner f18.css ist noch immer gleich wie "defaultCommon.css".

In der commandref finde ich nur
styleData
wird von dynamischen styles wie f18 werwendet


Lacht mich jetzt bitte nicht komplett aus für meine naiven Frage.
Titel: Antw:Neues style: f18
Beitrag von: Esjay am 08 März 2018, 22:45:40
Unten Links im Frontend auf "Select Style" Dann in der Liste f18 anklicken, und einen reload im Browser ausführen..Danach Kannst du dich austoben, und deine eigenen Erfahrungen machen.Ich hoffe,das hast du gemeint.
Grüße
Titel: Antw:Neues style: f18
Beitrag von: Ajuba am 11 März 2018, 00:04:33
Danke für die Erklärung. Jetzt geht es bei mir auch.
Sieht SENSATIONELL aus.

Der Hauptgrund warum ich bisher beim Default Style geblieben bin, war dass neben korrekter Darstellung die Räume auch nach scrollen im rechten Bereich immer sichtbar waren. Das ist das Einzige was mir an f18 nicht so gut gefällt. Diesen Wunsch haben anscheinend aber auch andere:
Zitat von: igami am 12 Januar 2018, 17:59:12
1. Ich fände es schön, wenn die Kommandozeile nicht mitscrollen würde, sondern immer oben zu sehen ist.
2. Ich fände es schön, wenn Räume und Inhalt getrennt von einander scrollen könnten (wie bei ios6)

Da noch andere Posts von igami folgten bin ich mir nicht sicher ob sich diese Antwort auf das Scrollen bezog oder es sich nicht doch vielleicht umsetzen ließe (evt. wahlweise je nach Geschmack).
Zitat von: rudolfkoenig am 13 Januar 2018, 08:49:55
@igami: deine Wuensche sind mit meinem Wissen nicht einfach bzw. ohne Nebenwirkungen zu implementieren.

Aber vielleicht fehlt mir nur ein Tip wie andere effizient arbeiten. Drückt ihr immer die Hometaste um zur Kommandozeile und den Räumen zu gelangen?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 11 März 2018, 10:30:00
Meine Antwort bezog sich auf den erwaehnten Wunsch.
Wenn du eine Loesung hast, nur her damit. Nur bitte sie vorher in allen Szenarien testen.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 01 Juli 2018, 17:50:04
Zitat1. Ich fände es schön, wenn die Kommandozeile nicht mitscrollen würde, sondern immer oben zu sehen ist.
2. Ich fände es schön, wenn Räume und Inhalt getrennt von einander scrollen könnten (wie bei ios6)

Ist jetzt mit dem neuen "Fixed input" Schalter aktivierbar.

Weiterhin habe ich defaultCommon.css in f18.css uebernommen, Doppeldefinitionen und Farben entfernt, damit sollte ein Flackern noch weniger merkbar sein.

Den Hintergrund vom Menu habe ich entfernt: damit ist zwar bei dynamischen Menu der Rand nicht mehr vorhanden und der Menu-Text evtl. schwerer lesbar, aber das Hintergrundbild wird nicht abgedeckt.
Titel: Antw:Neues style: f18
Beitrag von: docb am 06 Juli 2018, 09:50:34
Guten Morgen,
vielen Dank für das schöne und gestaltbare Style. Ich habe seit gestern ein kleine Problem - das Menü bleibt im normalen Browser nicht mehr ausgefahren, sondern ist immer eingefahren - so wie es aussieht, wenn man fhem von einem Smartphone aus aufruft. Wenn ich "MenuBtn right on SmallScreen" aktiviere, bleibt das Menüsymbol links, er scheint also keinen Fehler in der Erkennung des SmallScreen zu haben. An meinem Additional CSS scheint es auch nicht zu liegen, da das Verhalten gleich bleibt, wenn ich das rauslösche. Ich habe die letzten Tage je ein Update gemacht, wurde da etwas geändert?
Wäre super, wenn mir jemand einen Tipp geben könnte, wie ich das Menü wieder fest ausgeklappt halten kann.
Viele Grüße
doc
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 06 Juli 2018, 10:38:40
f18.js entscheidet smallscreen mitvar f18_small = (screen.width < 480 || screen.height < 480);
Trifft das bei Dir zu?
Hat jemand eine bessere Loesung?
Titel: Antw:Neues style: f18
Beitrag von: docb am 06 Juli 2018, 10:44:21
Nope, bei mir sind es 3440 x 1440 - und auch wenn ich den Browser nur in einem Drittel des Bildschirms aufziehe ist das noch deutlich drüber. Das komische Verhalten habe ich auch erst seit heute, habe aber gestern nur ein Farbe im Style geändert. Ich kann es mir echt nicht erklären...
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 06 Juli 2018, 10:55:44
Kannst du bitte in der JS-Console
console.log(screen);
eingeben, und die angezeigte Struktur aufklappen/hier zeigen?
Welcher Browser?
Gibts das Problem auch mit anderen Browser?
Titel: Antw:Neues style: f18
Beitrag von: docb am 06 Juli 2018, 11:02:18
Das ist das Ergebnis:
Screen
availHeight: 1400
availLeft: 0
availTop: 0
availWidth: 3440
colorDepth: 24
height: 1440
left: 0
mozOrientation: "landscape-primary"
onmozorientationchange: null
orientation: ScreenOrientation
angle: 0
onchange: null
type: "landscape-primary"
__proto__: ScreenOrientationPrototype { lock: lock(), unlock: unlock(), type: Getter, ... }
pixelDepth: 24
top: 0
width: 3440

Soll ich noch mehr aufklappen?
Und das Verhalten ist bei allen Browsern (Chrome, Firefox, Edge - je aktuell) gleich.
Titel: Antw:Neues style: f18
Beitrag von: Beta-User am 06 Juli 2018, 11:12:05
Vielen Dank auch von meiner Seite für den tollen style!

Was das Problem von docb angeht: Das hatte ich seit neulich auch. Abhilfe: Menü usklappen und dann den "Pin" drücken, um das Menü anzupinnen, "save" ausführen. Dann ist im PC-Browser alles wieder wie ursprünglich, auf dem Handy aber das Menü eingeklappt.

Gruß und DANKE!
Beta-User
Titel: Antw:Neues style: f18
Beitrag von: docb am 06 Juli 2018, 12:28:44
Ha, tip-top, das hat geholfen Beta-User! Vielen Dank! Da muss man erst mal drauf kommen, ich habe die Pins nämlich  mit "Hide pin" ausgeblendet. Daher keine Ahnung wie das geändert wurde - Aber mit einblenden, drücken, speichern, wieder ausblenden funktioniert es und die Menüleiste bleibt da!
Super - Fhem und das Forum sind einfach spitzenklasse, DANKE EUCH!
Titel: Antw:Neues style: f18
Beitrag von: Otto123 am 06 Juli 2018, 13:38:07
Hallo Rudi,

ich klinke mich mal in das Thema mit einem Beitrag der eher Info als Request sein soll.

Mein Notebook für die couch ist so eines mit Höhere Auflösung. Da sieht dann "f18" so aus wie im Anhang.
Ich habe das Bild mal mit einem zweiten Browser -Fenster des alten Standards gemischt, da sieht man auf Anhieb was ich meine. Links sieht man das FHEM Logo wird nicht hochskaliert, die Schrift wird vergrößert.
Im alten style ist alles normal skaliert, System und Browser haben sich da wieder gut auf 100 % "geeinigt".

Der Browser steht auf 100% die Skalierung vom System sieht man im zweiten Bild.

Kann ich da irgendetwas beitragen, testen forschen? Ich bin nicht so der Entwickler aber willig :)

Gruß Otto
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 06 Juli 2018, 13:56:34
f18 skaliert mit Absicht das Logo in etwa auf die Hoehe der Eingabezeile.
Oder ich ich sehe dein Problem doch nicht auf Anhieb.
Titel: Antw:Neues style: f18
Beitrag von: Otto123 am 06 Juli 2018, 14:22:46
Ok das mit dem Logo - da hast Du Recht. Das war eine Fehleinschätzung von mir - aber die Schrift und Abstände?
Schau mal am normalen PC mit Skalierung vom Anzeige System  100%

Der neue Style ist doch eigentlich in Summe in Schriftgröße und Abstand (ich kann es nicht 100% ausmachen) komprimierter/ Platzsparender.

Auf meinem Notebook ist es das ganze Gegenteil. Dort, ich glaube, vor allem die Abstände sind viel größer.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 06 Juli 2018, 14:41:42
Schrift (technisch Font) ist die Gleiche, Groesse auch, Abstaende sind anders, ist ja schliesslich ein anderes Stil.
Oder ich verstehe nicht genau, was du meinst.
Titel: Antw:Neues style: f18
Beitrag von: Otto123 am 06 Juli 2018, 15:11:57
mmh Ok, in dem Bild, was einem nicht ganz einfachen (weil unterschiedliche Auflösungen) Zusammenschnitt entspricht sieht man das die Abstände eigentlich nur beim linken Raum Menü stark auseinander gezogen sind.

Am rechten Rand habe ich versucht die beiden alt System in gleiche Größe zu bekommen.

Sieht man so was ich meine?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 06 Juli 2018, 15:30:49
Ich habe weder eine Idee, woran es bei Dir liegen koennte, noch kann ich es bei mir nachvollziehen.

Auf meinem Rechner dind die Buchstaben gleich gross, die Abstaende zwischen den Zeilen sind bei f18 ca 10% geringer, mehr zwischen den einzelnen Bereichen. Ist aber alles Absicht.
Titel: Antw:Neues style: f18
Beitrag von: Otto123 am 06 Juli 2018, 15:47:29
So ist es ja bei mir am normalen PC auch. Das Notebook ist eben eines mit Hoher Auflösung, aber 13" und damit da was erkennen kann ist die Skalierung von Windows 250%. Alles sieht damit normal aus, außer ein paar alte Windows Anwendungen und eben f18.

Ich Versuche mal das in einer virtuellen Maschine nachzustellen.  Wie gesagt, eigentlich schaue ich darüber immer hinweg :)
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 06 Juli 2018, 23:09:02
Ich habe die Positionierung fuer "Dragging" vom relativ auf absolut umgebaut.

Vorteile / neue Features:
- man kann die Groesse der Bloecke aendern (mit dem Kreuz unten rechts)
- die Position/Groesse aller Bloecke bleibt erhalten, auch wenn in einem Block neue Elemente dazugekommen sind
- man kann "Snap to grid" aktivieren. Fuer Positionierung auf der Style Seite danach bitte ein reload machen.
- die Pin-Funktion ist jetzt verfuegbar auch bei verschobenen Bloecken

Nachteile / Bekannte Bugs:
- alle bisherigen Positionierungen werden ignoriert, d.h. diese muss man neu erstellen.
- beim aktivierten Dragging haben Bloecke mit einem ColorSlider eine falsche Breite, hier muss man die Breite manuell korrigieren. Falls jemand weiss, wieso, bitte melden.
- man kann die Position/Groesse einzelner Elemente nicht zuruecksetzen, nur alles auf einmal pro Raum.

Dieses Feature ist fuer smallscreen deaktiviert (wie bisher).

Titel: Antw:Neues style: f18
Beitrag von: Wolfgang Hochweller am 09 Juli 2018, 11:58:05
Eine Frage zum Verstaendnis :
Zitat :
- Erkennung von Touchscreen/Smallscreen, d.h. die gleiche FHEMWEB-Instanz soll auf allen Endgeraeten bedienbar sein.

Kann ich mir jetzt die verschiedenen WEBs schenken ?  Also kein WEBphone, WEByablet mehr ?
Sieht bei mir durchaus so aus.
Oder haben WEBphone etc. noch andere Eigenschaften, die mir nicht bewusst sind ?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 09 Juli 2018, 13:06:37
ZitatKann ich mir jetzt die verschiedenen WEBs schenken ?  Also kein WEBphone, WEByablet mehr ?
Wenn es nur um die Anzeige geht, dann ja. Fuer unterschiedliche Protokolle/Zugriffsberechtigungen braucht man weiterhin mehrere FHEMWEB Instanzen.

Ich sehe gerade, dass die Anzeige mit absoluten Positionen unter Firefox buggy ist, Chrome (und Safari) scheint ok zu sein.Ein Fix ist wohl nicht ganz trivial, ist aber auf der TODO-Liste
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 09 Juli 2018, 18:51:22
Firefox hat keine Probleme, falls "attr WEB plotEmbed 0" gesetzt ist, in diesem Fall ist auch das Verschieben der SVGs in allen Browsern deutlich fluessiger. Leider beschraenkt das die Berechnung der SVGs auf einem Prozessor.
Titel: Antw:Neues style: f18
Beitrag von: sledge am 10 Juli 2018, 21:42:12
Hmmm, seit dem Update gehen Seitenwechsel bei mir nur noch "sehr" langsam.

Außerdem treten beim Verschieben schonmal merkwürdige Effekte auf, dass nur die Titelleiste verschoben wird, der "Body" dann nicht (siehe Anhang).

Mache Seitenwechsel verursachen einen Freeze (freezemon) - gerade beim ausprobieren fast 20 Sekunden...

Chrome Version 67.0.3396.99 (Offizieller Build) (64-Bit)

Mit Edge ähnlich (Microsoft Edge 42.17134.1.0 / Microsoft EdgeHTML 17.17134)

Alte Version vom f18.js wieder eingespielt (mein letztes Update war am 5.7.) - Problem beseitigt (das mit den Titelzeilen ist aber noch auch sporadisch vorhanden).

Wenn ich helfen kann bei der Fehlersuche - gerne.

Gruß,

Tom



Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 13 Juli 2018, 19:12:24
ZitatHmmm, seit dem Update gehen Seitenwechsel bei mir nur noch "sehr" langsam.
Sind auf der langsamen Seite SVG's?
Diese sind in der embed Variante bei mir auch traege, aber flott, wenn man "attr WEB plotEmbed 0" gesetzt hat.
Ich ueberlege gerade, wie ich Parallelitaet mit eingebauten SVGs hinkriegen kann.

Ein Freeze habe ich noch nicht erlebt, und das von Dir gezeigte Verschiebe-Problem hatte ich eigentlich gefixt.
Kannst du es bitte mit der aktuellen Version (SVN jetzt, update morgen ab 8) nochmal testen?

ZitatWenn ich helfen kann bei der Fehlersuche - gerne.
Mir genau zeigen, wie ich die Probleme nachstellen kann.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 15 Juli 2018, 16:15:22
Habe folgende Aenderungen eingecheckt:

- default von plotEmbed auf 0 gesetzt. Damit werden SVGs nicht mehr per <embed> geladen, sondern direkt als "in-place" <svg>, womit heutige Browser besser zurechtkommen -> das verschieben der SVGs mit f18 sollte fluessiger gehen. <embed> war vor 10 Jahren der einzige Weg, SVGs anzuzeigen, das hat sich geaendert

- mehrere SVGs auf einer Seite werden auch mit plotEmbed parallel berechnet, falls plotFork gesetzt ist. Dafuer wird BlockingCall verwendet.

- habe mich nicht getraut plotFork default auf 1 zu setzen, da auf Systemen mit wenig Speicher und grossen FHEM Speicherverbrauch das zu den bekannten Fehler (Cannot fork) fuehren duerfte. Ich suche noch nach einer Moeglichkeit, die vielen Prozessoren heutiger Server ohne Speicherprobleme zu verwenden.

- fhem.cfg.demo auf f18 umgestellt, und Dashboard entfernt. Dashboard scheint nicht mehr aktiv gepflegt zu sein, weiterhin ersetzt f18 einige der Dashboard Funktionalitaeten. Weiterhin die Smallscreen und Touchpad FHEMWEB Instanz enternt, da f18 das auch abdeckt.

- aus SVG.pm die Spuren meiner jsSVG Experimente entfernt, da ich seit 3 Jahren nichts mehr daran gemacht habe.

- Nebeneffekt der Parallelberechnung von SVG-non-embed: bei Seiten, die nur fixedrange SVGs enthalten werden die Navigationsknoepfe (sinnlos) angezeigt. Soweit ich es gesehen habe, hat das aber auch vorher nicht perfekt funktioniert.

- BlockingCall unter Windows "aktiviert". Ich wundere mich, dass bisher nicht gemeldet wurde, dass unter Windows seit einiger Zeit nur ein BlockingCall Prozess gestartet werden konnte.

- leichte f18 Fixes: einige Elemente sollten jetzt auch vor dem f18.js "Repositioning" nicht komplett falsch liegen, das sollte in manchen Faellen ein "flackern" beim Seitenaufbau verringern.


Sonst (eher fuer Entwickler interessant):

- in FHEMWEB das Laden der optionalen Perl-Module aufgeraeumt

- falls ein CONTENTFUNC -2 zurueckliefert, dann geht FHEMWEB davon aus, dass der Inhalt der Seite asynchron zurueckgeliefert wird. Dafuer muss diese Funktion FW_RET merken, und FW_finishRead aufrufen.
Titel: Antw:Neues style: f18
Beitrag von: cheanrod am 16 Juli 2018, 22:41:41
Hallo Rudolf,

zuerst einmal vielen Dank für den f18-Style, den ich mir mit CSS aus dem Forum zu einem modernen Look angepasst habe (siehe Screenshot Produktivsystem)! Für meinen Geschmack sieht das sehr gut aus.

Nach dem gestrigen Update des Styles ist mir ein kleines Problem mit dem Style-Setting "MenuBtn right on SmallScreen" aufgefallen. Auf einem iPhone werden bei aktiviertem Setting das FHEM-Symbol, die Eingabezeile und der Menu-Button nicht richtig angeordnet. Ich habe dieses Verhalten sowohl auf dem Produktivsystem als auch auf einem Testsystem mit der fhem.cfg.demo beobachten können (siehe weitere Screenshots).

Viele Grüße
Sven
Titel: Antw:Neues style: f18
Beitrag von: Otto123 am 17 Juli 2018, 12:29:58
ich habe nochmal Screenshots zur Skalierung gemacht. Ich habe 3 Browser übereinander gelegt. Von links nach rechts Firefox, Chrome, Edge.
Einmal f18 und der alte Standard Style.

Man sieht das f18 von Edge etwa  so skaliert wird wie der alte Style.  Firefox und Chrome skalieren f18 wesentlich größer.
Im alten Style ist die Skalierung der Browser nur marginal unterschiedlich.
Das Notebook hat wie gesagt 3200x1800 Bildpunkte 13" und deshalb die (Standard) Skalierung von 250%, System ist frisch installiertes Windows 10 1803.

Vielleicht hat ja einer ne Idee. Die Skalierung allein kann nicht das Problem sein, wenn ich am anderen PC einfach mal die Skalierung hochdrehe (oder am Notebook runter) bleibt die unterscheidliche Skalierung der Browser erhalten.

Gruß Otto
Titel: Antw:Neues style: f18
Beitrag von: jkriegl am 17 Juli 2018, 13:03:56
Vielen Dank für f18
Eine Kleinigkeit: "jump to the top" klappt beim Logfile nicht mehr.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 17 Juli 2018, 15:21:28
ZitatMan sieht das f18 von Edge etwa  so skaliert wird wie der alte Style.  Firefox und Chrome skalieren f18 wesentlich größer.
Hat dein Notebook ein Touchscreen? Wenn ja, dann wird vermutlich angenommen, dass es ein Tablet ist, und deswegen alles etwas groesser gerendert, damit meine dicken Finger den richtigen Link erwischen :)
Titel: Antw:Neues style: f18
Beitrag von: Otto123 am 17 Juli 2018, 15:34:07
Ja das notebook hat einen Touchscreen  ;) kann ich irgendwo im Browser sehen ob der das erkennt?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 17 Juli 2018, 16:41:18
In der JavaScript console Folgendes eintippen:'ontouchstart' in windowBei true wird Tablet angenommen. Und bei
(screen.width < 480 || screen.height < 480)Smartphone aka smallscreen.
Titel: Antw:Neues style: f18
Beitrag von: Otto123 am 17 Juli 2018, 21:37:05
Hallo Rudi,

Du arbeitest ganz exakt  8) - Firefox und Chrome liefern true, edge liefert false zurück.

Auf meinem Android Tablet ist die Ansicht auch entsprechend größer skaliert.
Alles gut.

Danke für die Aufklärung.

Gruß Otto
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 17 Juli 2018, 22:12:53
ZitatEine Kleinigkeit: "jump to the top" klappt beim Logfile nicht mehr.
Ja, wenn "Fixed input" aktiviert ist.
Ich wuesste gerne, wieso es ohne geklappt hat. Wenn jemand eine Erklaerung hat...
Habs jetzt gefixt, allerdings schaut es ohne Fixed input nicht mehr so schoen aus.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 17 Juli 2018, 22:40:19
ZitatNach dem gestrigen Update des Styles ist mir ein kleines Problem mit dem Style-Setting "MenuBtn right on SmallScreen" aufgefallen.
Danke fuer den Hinweis, habs gefixt.
Titel: Antw:Neues style: f18
Beitrag von: PatrickR am 17 Juli 2018, 22:58:58
Zitat von: cheanrod am 16 Juli 2018, 22:41:41
Hallo Rudolf,

zuerst einmal vielen Dank für den f18-Style, den ich mir mit CSS aus dem Forum zu einem modernen Look angepasst habe (siehe Screenshot Produktivsystem)! Für meinen Geschmack sieht das sehr gut aus.
In der Tat. Hast Du mal nen Link zu dem CSS?

Patrick



Von unterwegs gesendet.
Titel: Antw:Neues style: f18
Beitrag von: Benni am 18 Juli 2018, 04:58:36
Zitat von: PatrickR am 17 Juli 2018, 22:58:58
In der Tat. Hast Du mal nen Link zu dem CSS?

Ich nehme mal an er hat sich auf diesen Thread bezogen: https://forum.fhem.de/index.php?topic=84760.0

gb#
Titel: Antw:Neues style: f18
Beitrag von: mahowi am 18 Juli 2018, 13:15:05
Wenn ich "Fixed input" nutze, bekommt die Raumliste eine Scrollbar, die in das Raumfenster ragt und damit Teile davon verdeckt (siehe Screenshot). Getestet habe ich jeweils mit aktuellem Chrome und IE unter Windows 7.
Lässt sich das Verhalten irgendwie ändern?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 18 Juli 2018, 13:36:09
Ja, anderes Client-Betriebsystem verwenden, z.Bsp. OSX, iOS oder Android :)
Bin aber auch bereit konstruktive Vorschlaege zu evaluieren.
Titel: Antw:Neues style: f18
Beitrag von: mahowi am 18 Juli 2018, 13:47:33
 :D Im Büro hab ich kein anderes OS zur Verfügung.  ;) Zuhause auf dem Linux-Laptop oder Android-Tablet habe ich es noch nicht getestet. Auf dem Smartphone (Android) wird die Raumliste ja nicht angezeigt (smallscreen).

Leider habe ich schon ewig nix mehr mit HTML und CSS gemacht, daher kann ich nichts hilfreiches beisteuern. Für sowas gibt es wohl in CSS 3 overflow-style (https://www.w3schools.com/cssref/css3_pr_overflow-style.asp), leider wird das aber noch von keinem Browser unterstützt.
Titel: Antw:Neues style: f18
Beitrag von: DS_Starter am 19 Juli 2018, 18:53:57
Hallo Rudi,
kurze frage zur neuen plotfork Behandlung. Zieht jetzt auch das globale attr "blockingCallMax" weil ja blockingcall nun verwendet wird ? Sollte eigentlich so sein und wäre dann sicherlich auch gut.
Und kannst du eventuell abschätzen ob ich im dblog etwas nachziehen muss was sich auf die plotfork unterstützung bezieht ?
Bin momentan im  urlaub und habe deswegen nicht die zeit mir die codeänderungen im einzelnen anzuschauen.

Viele grüsse,
Heiko
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 19 Juli 2018, 19:18:27
Ja, blockingCallMax sollte greifen, und ich habe die Voreinstellung auf 32 geaendert von unendlich (0).
Ich gehe davon aus, das man in dblog nichts aendern muss.
Titel: Antw:Neues style: f18
Beitrag von: ergerd am 20 Juli 2018, 12:06:38
Hallo,

seit dem vorletzten Update bekomme ich den Fehler "f18.js Line 777: TypeError c is undefined" beim Aufruf von Räumen mit SVG Inhalt.

Vermutlich fehlt etwas in meiner Konfiguration?

Grüße
Rainer
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 20 Juli 2018, 12:42:29
ZitatVermutlich fehlt etwas in meiner Konfiguration?
Vermutlich ist fuer den betroffenen Raum (oder fuer alle Raeume?) die Hintergrundfarbe nicht als "RRGGBB" definiert (im attr WEB styleData einer der col.bg Eintraege). Aendern der Hintergrundfarbe oder Setzen von "Preset colors" behebt das Probem.
Titel: Antw:Neues style: f18
Beitrag von: ergerd am 20 Juli 2018, 12:57:30
Kaum macht man es richtig, klappt es auch.

Danke und Grüße
Rainer
Titel: Antw:Neues style: f18
Beitrag von: TWART016 am 21 Juli 2018, 12:42:23
Hallo,

ist es möglich das Textfeld bei den Attributen oder set in der Breite (Höhe) zu vergrößern?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 21 Juli 2018, 12:56:33
Ja, mit CSS.
Titel: Antw:Neues style: f18
Beitrag von: TWART016 am 21 Juli 2018, 13:01:19
Wie heißen die Felder?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 21 Juli 2018, 13:17:54
Rechte Maustaste, Inspect Element.
Nein, ich werde keine genaue Anleitung geben (es ist mir zu spezifisch), nur eine Hilfe zur Selbsthilfe.
Titel: Antw:Neues style: f18
Beitrag von: TWART016 am 21 Juli 2018, 14:37:03
Das erwarte ich auch nicht.
Ich habe das so eingetragen. width mit Prozentanzahl funktioniert nicht, da das Feld eine Zeile weiter unten angezeigt wird. Gibt es da einen Trick?
input[type="text"] {
    -webkit-appearance: none;
    padding: 2px;
    width: 600px;
}
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 21 Juli 2018, 15:52:30
Bitte CSS Tricks nicht in diesem Thread eroertern, ich haette gerne nur f18 spezifische Probleme hier besprochen.
Titel: Antw:Neues style: f18
Beitrag von: PatrickR am 22 Juli 2018, 15:48:22
Hallo Rudi!

Zitat von: rudolfkoenig am 21 Juli 2018, 13:17:54
Rechte Maustaste, Inspect Element.
Nein, ich werde keine genaue Anleitung geben (es ist mir zu spezifisch), nur eine Hilfe zur Selbsthilfe.

Ich kann mich irren, aber ich fürchte das klappt nicht, da die Breite des Textfelds über das size-Attribut festgelegt wird und das wiederum wird in 01_FHEMWEB.pl auf 30 gesetzt:

1351   $ret .= FW_textfield("val.$cmd$d", 30, $cmd);


Das deckt sich auch mit TWART016s Erfahrungen:
Zitat von: TWART016 am 21 Juli 2018, 14:37:03
[...]
Ich habe das so eingetragen. width mit Prozentanzahl funktioniert nicht, da das Feld eine Zeile weiter unten angezeigt wird. Gibt es da einen Trick?
[...]

Patrick
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 22 Juli 2018, 19:04:07
Mitinput[type="text"] {
    -webkit-appearance: none;
    padding: 2px;
    width: 600px;
}
schaut das bei mir wie angehaengt aus, muss also doch gehen.

Ich vermute, es geht nur mit Prozentzahl nicht, wobei wir wieder bei der Diskussion von CSS Tricks waeren :)
Titel: Antw:Neues style: f18
Beitrag von: cwagner am 28 Juli 2018, 08:28:12
Seit einem Update von heute Morgen verdeckt der Slider für das linke Menü den Anfang der Darstellung meiner Räume (siehe angehängten Screenshot). Getestet in Chrome und es ist unabhängig vom verwendeten Browser-Zoom.
Schalte ich fixed Input aus, verschwindet der Scrollbalken erwartungsgemäß und die verdeckten Teile der Räume sind zu sehen.

Ich nutze den F18-Style sehr gerne, weil er so viele hilfreiche Optionen bietet.

BG
Christian
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 28 Juli 2018, 18:00:39
Das Problem wurde vor 10 Tagen bereits beschrieben: https://forum.fhem.de/index.php/topic,82351.msg819353.html#msg819353, meine flapsige Antwort kam sofort: https://forum.fhem.de/index.php/topic,82351.msg819359.html#msg819359. Aber ich meine es ernst, wenn jemand eine Alternative hat, bitte melden. Workaround solange ist Fixed Input zu deaktivieren.
Titel: Antw:Neues style: f18
Beitrag von: blecher-at am 29 Juli 2018, 17:22:01
Ein paar Anregungen:

<meta name="viewport" content="width=device-width, user-scalable=0">
funktioniert besser für smartphones. der content hat damit immer denselben skalierungsfaktor und passt auf den screen. sollte man im style-editor anpassen können.

@media screen and (orientation: portrait) {
   body.small table.block tr td:nth-child(n+3) { width: 0px; display: none; }
-  body.small #content > table { width: 100%; }
+  body.small #content > table { width: 100%; table-layout: fixed; }
+  .SVGplot { width: 100%; overflow-x: scroll }
}

behebt das problem dass tabellen über den viewport hinausragen (width 100% wird ignoriert, horizontaler scroll), und dasselbe für svg plots.
Titel: Antw:Neues style: f18
Beitrag von: blecher-at am 29 Juli 2018, 22:22:07
mit folgendem code wandert die 2. spalte unterhalb der ersten spalte falls kein platz ist. das ist insbesondere bei den readings/internals praktisch


@media screen and (orientation: portrait) {
+  body.small #content > table { width: 100%; table-layout: fixed; }
   body.small table.block tr td:nth-child(n+3) { width: 0px; display: none; }
-  body.small #content > table { width: 100%; }
+  body.small table.block tr td:nth-child(2) { }
+  body.small table.block tr td:nth-child(1) { flex-grow: 1; }
+
+  /* flex-collapsing table */
+  body.small table.block table,
+  body.small table.block thead,
+  body.small table.block tbody,
+  body.small table.block th,
+  body.small table.block td {
+       display: block;
+  }
+
+  body.small table.block tr {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  body.small table.block td {
+       word-wrap: break-word;
+       max-width: 100%;
+  }
+
+  .SVGplot { width: 100%; overflow-x: scroll }
+
}
Titel: Antw:Neues style: f18
Beitrag von: Markus Bloch am 30 Juli 2018, 10:25:34
Hallo Rudi,

ich bekomme bei mir immer wieder folgende Meldung in der JS-Konsole und als Popup:

f18.js:777 Uncaught TypeError: Cannot read property 'substr' of undefined
    at addCol (f18.js:777)
    at Object.f18_svgSetCols [as f18] (f18.js:792)
    at svg_init_one (svg.js:364)
    at SVGSVGElement.<anonymous> (svg.js:392)
    at Function.each (jquery.min.js:2)
    at m.fn.init.each (jquery.min.js:2)
    at HTMLDocument.<anonymous> (svg.js:390)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)


Kannst Du mir weiterhelfen?

Danke

Gruß
Markus
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 30 Juli 2018, 12:12:37
@Markus: deine Farbein im Attribut sind irgendwie kaputtgegangen. Kannst du bitte sie erneut setzen, z.Bsp. eine vordefinierte Farbe auswaehlen. Das wurde schon vor ein paar Tagen gemeldet, wuesste gerne, wie man das hinkriegt, um es zu vermeiden.

@blecher-at: Vielen Dank! Ich habe ein paar Fragen:
- user-scalable=0 verbietet das Vergroessern, das kann aber insb. auf dem kleinen Bildschirm sinnvoll sein. Gibt es einen Grund, es zu untersagen?
- ich sehe zwischen "initial-scale=1.0" und "width:device-width" keinen Unterschied, und das Internet will mir da auch nicht weiterhelfen. Weisst Du mehr?
- die ".SVG einzeln Scrollen" Aenderung habe ich eingecheckt, und auch die Zeile drueber. Weiss aber nicht, wo ich Letzteres testen kann, kannst Du mir einen Tipp geben? 

Werde die anderen Aenderungen auch pruefen/testen, ich komme aber erst spaeter dazu.
Titel: Antw:Neues style: f18
Beitrag von: blecher-at am 30 Juli 2018, 18:17:11
ja, mit user-scalable=0 verbiete ich zooming. Das ist eines der Grundprinzipien von responsive design: der Inhalt passt sich dem Bildschirm an, nicht umgekehrt (durch zoom oder scroll).
Natürlich muss ich dann als Designer dafür Sorge tragen dass alles auf den Bildschirm passt - deswegen die anderen Regeln (Tabellen die umbrechen, Details die ausgeblendet werden etc.)

- initial-scale ist insbesondere bei umschalten zwischen landscape und portrait-mode relevant. damit hat ein Pixel ungeachtet der rotation immer dieselbe größe. ich habe aber keine mobilen regeln für landscape mode in f18 gefunden, deswegen mal offen gelassen.
- ohne meta-tag ist css:100% auf einem mobilen Browser abhängig vom seiteninhalt uu. mehr/weniger als die Bildschirmbreite (es wird fit to screen gemacht.) durch width:device-width verhält ein mobiler browser sich wie ein desktop browser: 100% im CSS ist damit immer die Bildschirmbreite. dadurch lässt sich dann gemeinsam mit media-queries ein konsistentes design umsetzen.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 30 Juli 2018, 19:45:09
Wir versuchen den Inhalt dem Bilschirm anzupassen, aber ich will fuer Leute mit schlechter Sicht/ueber 50 (geschaetzt 80% der FHEM-Anwender) das zoomen nicht verbieten. Es sei denn, es sprechen gewichtige Argumente dafuer.

Ich habe jetzt width:device-width bei mobilen Geraeten zusaetzlich hinzugefuegt, initial-scale=1.0 habe ich gelassen.

Beim "2. Spalte wandert" Patch bin ich unsicher, und bitte um die Meinung anderer, siehe die angehaengten Screenshots.
Titel: Antw:Neues style: f18
Beitrag von: Amenophis86 am 30 Juli 2018, 20:03:00
Zitat von: rudolfkoenig am 30 Juli 2018, 19:45:09
Beim "2. Spalte wandert" Patch bin ich unsicher, und bitte um die Meinung anderer, siehe die angehaengten Screenshots.

Mag es lieber sortiert, wie auf dem "alt" Bild.
Titel: Antw:Neues style: f18
Beitrag von: blecher-at am 30 Juli 2018, 20:33:25
Mir ist noch aufgefallen: der mobile style wird von 2 attributen beeinflusst:
- css klasse "small" am body (gesetzt beim laden durch js, aber nicht durch resize)
- media orientation query

das führt zu fehlern wenn man z.b. am desktop das fenster verkleinert (text überlappt sich selbst)
konsistenter wäre es sowieso, den javascript "small" zu entfernen, und nur media queries zu verwenden:


-@media screen and (orientation: portrait) {
+@media screen and (max-width: 480px), screen and (max-height: 480px), screen and (orientation: portrait) {

bei den darunterliegenden regeln dann die einschränkung auf "body.small" entfernen.
Titel: Antw:Neues style: f18
Beitrag von: DarkT am 31 Juli 2018, 11:00:57
Zitat von: rudolfkoenig am 30 Juli 2018, 19:45:09

Beim "2. Spalte wandert" Patch bin ich unsicher, und bitte um die Meinung anderer, siehe die angehaengten Screenshots.

Mir gefällt das "Alte" besser
Titel: Antw:Neues style: f18
Beitrag von: tomspatz am 31 Juli 2018, 11:08:18
ZitatBeim "2. Spalte wandert" Patch bin ich unsicher, und bitte um die Meinung anderer, siehe die angehaengten Screenshots.

auch ich würde die alte Variante bevorzugen.

LG
Tom
Titel: Antw:Neues style: f18
Beitrag von: ToM_ToM am 01 August 2018, 07:53:03
ZitatBeim "2. Spalte wandert" Patch bin ich unsicher, und bitte um die Meinung anderer, siehe die angehaengten Screenshots.

Ich finde das Alte auch besser.  :)
Titel: Antw:Neues style: f18
Beitrag von: gloob am 01 August 2018, 08:15:17
Dickes Lob für den neue Style, gefällt mir echt gut und lässt sich super auf dem iPhone bedienen.

Gibt es allerdings eine Möglichkeit SVGs auf die Displaybreite vom mobile Gerät zu skalieren
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 01 August 2018, 08:58:59
@gloob: sicher, mit CSS, am einfachsten im Select style, f18, Additional CSS.

@ToM_Tom, @tomsspatz, @DarkT, @Amenophis86: bin nicht sicher, ob es euch bewusst ist, dass in der alten Version der Inhalt nicht ganz auf dem Bildschirm passt, und man rechts scrollen kann/muss.

@blecher-at: habs versucht f18style.css nach deiner Anleitung umzubauen, aber damit sind die Spalten 3+ auch in landscape  weg. Vielleicht habe ich die Anleitung schlecht umgesetzt, kannst du bitte einen konkreten Patch schicken.Ich wuerde die Klasse small auf body aber weiterhin behalten.
Titel: Antw:Neues style: f18
Beitrag von: gloob am 01 August 2018, 10:33:27
Der Abstand zwischen einer Readingsgroup und einer anderen Gruppe passt scheinbar nicht richtig.

Ich hoffe man erkennt was ich meine.
Titel: Antw:Neues style: f18
Beitrag von: tomspatz am 01 August 2018, 10:41:07
Zitat
@ToM_Tom, @tomsspatz, @DarkT, @Amenophis86: bin nicht sicher, ob es euch bewusst ist, dass in der alten Version der Inhalt nicht ganz auf dem Bildschirm passt, und man rechts scrollen kann/muss.

Meine Meinung:
Auf dem Tablett, oder ganz besonders auf dem Smartphone, verzichte ich bewusst auf alles mögliche an, Details, Einstellungen etc. Halte dort nur das was absolut nötig ist für die Bedienung die man, oder frau  ;) mit einem Smartphone tun sollte, dürfte.

So gibt es eine aufgeräumte Bedienoberfläche auf dem Smartphone. Programmierungen etc. gehören in Ruhe am Schreibtisch.

jetzt steinigt mich

LG
Tom
Titel: Antw:Neues style: f18
Beitrag von: Amenophis86 am 01 August 2018, 12:06:03
Ich steinige dich nicht, sondern stimme dir zu. Aber ab und an will man trotzdem mal schnell ein Blick auf ein bestimmtes Reading werfen, weil man zB nur mit dem Handy an dem Standort sehen kann, ob es sich auch verändert, wenn ich zB einen Bewegungsmelder teste oder so. Daher sollte es die Möglichkeit der Detailansicht geben. Für die reine Bedienung, welche du meinst sehe ich eher Dinge wie FTUI für Zuständig.

@Rudi: Nein war mir nicht bewusst, aber ich finde es so trotzdem angenehmer. Es sieht einfach aufgeräumter aus. Alternative wäre, dass man die Sortierung ändern, Name des Readings oben, Inhalt des Readings darunter. Ist natürlich wesentlich mehr Aufwand und es geht hier "nur" um Ästhetik.
Titel: Antw:Neues style: f18
Beitrag von: tomspatz am 01 August 2018, 12:12:21
ZitatDaher sollte es die Möglichkeit der Detailansicht geben.

ganz einfache Kiste zweite WEB Instanz.

@rudolfkoenig
Wenn ich einen Wunsch zu f18 frei hätte.....
Preset colours: default light dark custom

LG
Tom
Titel: Antw:Neues style: f18
Beitrag von: ToM_ToM am 01 August 2018, 12:35:02
Zitatbin nicht sicher, ob es euch bewusst ist, dass in der alten Version der Inhalt nicht ganz auf dem Bildschirm passt, und man rechts scrollen kann/muss.

Doch, das habe ich in einem Raum. Finde das aber okay. Ich sehe das als Backend und nicht als System wo man permanent etwas schaltet. Aber es ist sicher Geschmackssache.
In Entwicklungsumgebungen wie Visual Studio, Eclipse, etc... kann man ja auch den automatischen Zeilenumbruch einstellen. Ich persönlich nutze das dort aber nicht, da es für mich schwieriger lesbar ist.
Mag aber sein dass einige die Variante mit dem Umbruch schöner finden. Wird also Geschmackssache sein und bleiben.
Titel: Antw:Neues style: f18
Beitrag von: blecher-at am 01 August 2018, 19:09:04
Zitat von: rudolfkoenig am 01 August 2018, 08:58:59
@blecher-at: habs versucht f18style.css nach deiner Anleitung umzubauen, aber damit sind die Spalten 3+ auch in landscape  weg. Vielleicht habe ich die Anleitung schlecht umgesetzt, kannst du bitte einen konkreten Patch schicken.Ich wuerde die Klasse small auf body aber weiterhin behalten.
Im angehängten Patch hängt es jetzt korrekterweise an breite und landscape mode.
Ein paar andere Verbesserungen sind noch drinnen
- paddings verhalten sich jetzt korrekt (v.a. im fixed mode), icons sind vertikal korrekt zentriert
- column collapsing habe ich als config switch eingebaut (die meinugen im forum was schöner ist gehen ja auseinander - nun ist es ein switch am room)
- fixedInput mit css gelöst, nicht mit js, damit braucht man den hack ("// Wonder, why its needed") nicht mehr

Titel: Antw:Neues style: f18
Beitrag von: jkriegl am 02 August 2018, 16:14:26
Bekomme jetzt bei SVGs graue horizontale Scrollbalken obwohl genug Platz vorhanden ist. Erst wenn man noch breiter macht, verschwinden diese.
plotsize 480,240, Passt das Ganze nicht ins Fenster ist unten ein aktiver Scrollbalken. (firefox)
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 03 August 2018, 12:17:03
@blecher-at: ich habe generell Probleme mit Patches der Sorte "fixt alles / aendert vieles", weil ich die Auswirkung jeder Zeile verstehen will. Da ich Deine Hilfe aber schaetze, habe ich es versucht zu uebernehmen.

Folgendes habe ich geandert:- Text und Voreinstellung fuer wrapped. Laut Feedback hier ist "die meinugen [...] gehen ja auseinander" euphemistisch :)
- das Logo haengt 1-2 Pixel noch weiter runter, das habe ich zum Anlass genommen, Logo und Menu Position anzupassen.
- es gibt keinen vertikalen Abstand mehr zwischen den Menu-Abschnitten. Das vermisse ich zwar, aber da ich nach 10Minuten nicht rausgefunden habe, wer dafuer zustaendig ist, habe ich es gelassen.
Unter iOS/Safari mit fixedInput hat das Logo position:absolute,  was zu einer falschen Animation beim vertikalen scrollen fuehrt, das muss ich noch anschauen.

@jkriegl: ich kann es nicht nachstellen. Der SVG muss in einer Gruppe sein, und ich vermute, es wurde vorher per dragging bewegt. Stoert unter iOS/Android/OSX kaum, da hier die Scrollbars nur beim Scrollen eingeblendet werden. Falls ich es naeher anschauen soll, bitte mir eine genaue Anlietung fuers Nachstellen geben.
Titel: Antw:Neues style: f18
Beitrag von: blecher-at am 04 August 2018, 23:33:52
Zitat von: rudolfkoenig am 03 August 2018, 12:17:03
@blecher-at: ich habe generell Probleme mit Patches der Sorte "fixt alles / aendert vieles", weil ich die Auswirkung jeder Zeile verstehen will. Da ich Deine Hilfe aber schaetze, habe ich es versucht zu uebernehmen.

Folgendes habe ich geandert:- Text und Voreinstellung fuer wrapped. Laut Feedback hier ist "die meinugen [...] gehen ja auseinander" euphemistisch :)
- das Logo haengt 1-2 Pixel noch weiter runter, das habe ich zum Anlass genommen, Logo und Menu Position anzupassen.
- es gibt keinen vertikalen Abstand mehr zwischen den Menu-Abschnitten. Das vermisse ich zwar, aber da ich nach 10Minuten nicht rausgefunden habe, wer dafuer zustaendig ist, habe ich es gelassen.
Unter iOS/Safari mit fixedInput hat das Logo position:absolute,  was zu einer falschen Animation beim vertikalen scrollen fuehrt, das muss ich noch anschauen.

War aber nicht böse gemeint, geschmäcker sind nunmal verschieden.
Vertikaler Abstand zwischen den Menüs war eigentlich ein seiteneffekt vom browser-default td-padding. (und anderer effekte wie dass die header und content nicht vertikal alignt waren, und zwischen browsern nicht konsistent)
das von mir eingefügte "td {padding: 0;}" setzt das auf 0 zurück, und setzt dann nur dort ein padding wo explizit gewünscht.

Ich dachte nicht dass der abstand zwischen den menüs intentional war, sah mit dem doppelten border für mich wie ein bug aus.  :'(
"#menu > table td {
    padding-top: 2px;
}"
stellt für das menü wieder den alten style her.

Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 05 August 2018, 09:02:42
Danke, habe die Zeile eingebaut.
Titel: Antw:Neues style: f18
Beitrag von: gloob am 05 August 2018, 09:37:29
Gibt es eine Möglichkeit die aktuelle Änderung am Menü mit einem Additional CSS wieder zu überschreiben / rückgängig zu machen?

Die schwarzen Linien zwischen den Räumen meine ich.
Ohne die Linien war das übersichtlicher.
Titel: Antw:Neues style: f18
Beitrag von: blecher-at am 06 August 2018, 20:43:05
Wird jquery-ui von f18 wirklich noch benötigt? Nur für modale errordialoge, aber das sollte man mmn ohnehin anders lösen (natives css/js und gut ist)
Problem mit jquery-ui: es erzeugt einen dom-reflow bevor der body und f18.js gelaufen ist. dadurch flackert die UI beim reload/navigieren.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 07 August 2018, 08:21:31
@gloob: sicher, die Werte aus "Additional CSS" haben Vorrang.

@blecher-at: zunaechst: ich habe kein Problem jquery-ui rauszuschmeissen, wenn jemand mir hilft die benutzte Funktionalitaet zu ersetzen. Mir faellt ein:
- dialog
- draggable
- widget/mouse, benutzt von touch-punch
Leider kann ich nicht so recht sagen, wo es sonst noch verwendet wird, habe keine Methode gefunden, zuverlaessig nach jquery-ui Funktionen zu suchen.

Warum verursacht jquery-ui ein dom reflow?

Wenn ich "dom reflow" verstanden habe, dann verursacht f18 selbst sowas mit der optionalen Anzeige von Menu/Logo/Eingabezeile, und meine einzige Idee es zu vermeiden diese Attribute in FHEMWEB zu setzen, was ich ungern mache, da ich f18 und FHEMWEB nicht so stark verbinden moechte.
Titel: Antw:Neues style: f18
Beitrag von: blecher-at am 09 August 2018, 12:15:53
Zitat von: rudolfkoenig am 07 August 2018, 08:21:31
Warum verursacht jquery-ui ein dom reflow?

Wenn ich "dom reflow" verstanden habe, dann verursacht f18 selbst sowas mit der optionalen Anzeige von Menu/Logo/Eingabezeile, und meine einzige Idee es zu vermeiden diese Attribute in FHEMWEB zu setzen, was ich ungern mache, da ich f18 und FHEMWEB nicht so stark verbinden moechte.
das problem mit f18 lässt sich lösen wenn man das f18-styleattribut vom body in ein metatag verschiebt. dann kann man das css ausserhalb von read() generieren und es flickert garnicht. hatte das schon am laufen aber dann spielte mir jqueryui dazwischen.
einzige einschränkung: im 1. frame werden dann die knubbel zum verstecken noch nicht nicht gerendert, die kommen im 2. frame (ready) dazu. das aber smooth.

warum jquery-ui genau einen reflow macht müsste ich noch rausfinden.
Titel: Antw:Neues style: f18
Beitrag von: l2r am 09 August 2018, 15:40:15
hallo zusammen,

bei mir wird seit dem letzten Update beim Menü ein horizontaler und ein vertikaler Scrollbalken eingeblendet.
Vorher war das nicht so. Wie kann ich die Breite ändern, damit die Balken verschwinden?


Gruß Michael
Titel: Antw:Neues style: f18
Beitrag von: blecher-at am 09 August 2018, 19:25:49
Zitat von: l2r am 09 August 2018, 15:40:15
bei mir wird seit dem letzten Update beim Menü ein horizontaler und ein vertikaler Scrollbalken eingeblendet.
Vorher war das nicht so. Wie kann ich die Breite ändern, damit die Balken verschwinden?
Kann es sein, dass du "fixed menu and input" aktiviert hast, das menü aber nicht auf deinen screen passt? zumindest nur dann kann ich deinen shot reproduzieren. passt das menü nicht auf den screen würde ich fixed menu nicht verwenden.


body.fixedInput #menu { overflow: visible; }

löst das problem, dann sind aber manche menüeinträge für immer unsichtbar.


body.fixedInput #menu { overflow-x: hidden; overflow-y: auto;}

dann hat man zumindest nur einen vertikalen scroll.
Titel: Antw:Neues style: f18
Beitrag von: l2r am 10 August 2018, 14:39:25
hi,

danke für den Tipp. Aktiviert hatte ich es zwar nicht, aber nachdem ich es aktiviert und anschließend wieder deaktiviert habe sieht alles wieder gut aus.

Gruß Michael
Titel: Antw:Neues style: f18
Beitrag von: tomspatz am 12 August 2018, 15:40:57
Ich habe diverse SVG in gruppen zwecks einheitlicher Darstellung.
In Gruppen verschwinden ja die Lupe Link und Pfeil vom SVG.
Nun erscheinen  mit f18 die Lupen Symbole und der grüne Pfeil irgendwo wilkürlich in dem Raum wo auch ein gruppiertes SVG ist.

LG

Tom
Titel: Antw:Neues style: f18
Beitrag von: Wuppi68 am 20 August 2018, 15:16:46
Zitat von: blecher-at am 09 August 2018, 19:25:49
Kann es sein, dass du "fixed menu and input" aktiviert hast, das menü aber nicht auf deinen screen passt? zumindest nur dann kann ich deinen shot reproduzieren. passt das menü nicht auf den screen würde ich fixed menu nicht verwenden.


body.fixedInput #menu { overflow: visible; }

löst das problem, dann sind aber manche menüeinträge für immer unsichtbar.


body.fixedInput #menu { overflow-x: hidden; overflow-y: auto;}

dann hat man zumindest nur einen vertikalen scroll.

Hallo blecher-at,

wo muss ich dass denn Eintragen? in die f14.svg? Dort hat es bei mir nicht funktioniert :-(

Irgendwie sehe ich den Wald vor lauter Bäumen nicht :-(

Gruß und Dank

Ralf
Titel: Antw:Neues style: f18
Beitrag von: tomspatz am 22 August 2018, 14:19:50
@Wuppi68

funktioniert es denn bei dir nicht so wie:
Zitatdanke für den Tipp. Aktiviert hatte ich es zwar nicht, aber nachdem ich es aktiviert und anschließend wieder deaktiviert habe sieht alles wieder gut aus.

einfach unter Select style den Haken bei "Fixed input and menu" rein und raus.
Ansonsten den code bei Additional CSS eintragen.

LG
Tom
Titel: Antw:Neues style: f18
Beitrag von: tomspatz am 22 August 2018, 14:20:51
PUSH !!

ZitatIch habe diverse SVG in gruppen zwecks einheitlicher Darstellung.
In Gruppen verschwinden ja die Lupe Link und Pfeil vom SVG.
Nun erscheinen  mit f18 die Lupen Symbole und der grüne Pfeil irgendwo wilkürlich in dem Raum wo auch ein gruppiertes SVG ist.

LG

Tom
SORRY aber ich denke das das hier richtig ist.

Edit: es funktioniert mit dem ,,normalen" WEB in f18 ist es fehlerhaft.
Titel: Antw:Neues style: f18
Beitrag von: Romoker am 22 August 2018, 17:55:05
Hallo,

mir gefällt die Möglichkeit des horizontalen Scrollens von Plots im f18-Style gerade auf kleinen Bildschirmen sehr gut.

Ich habe bei mir allerdings eine fehlerhafte Darstellung von Bar-Plots festgestellt, aber nur auf meinem schmalen (vertikalen) Smartphone-Bildschirm (horizontales Scrollen ist möglich). Drehe ich das Gerät um 180 Grad in die Horizontale, ist die Darstellung korrekt, auch wenn der Plot nicht ganz auf den Bildschirm passt (horizontales Scrollen ist dann nicht möglich). Der Effekt ist Browserunabhängig (Chrome und Firefox getestet).

Hier meine Definitionen:
Internals:
   DEF        FileLog_VM_history:SVG_FileLog_VM_history_1:CURRENT
   GPLOTFILE  SVG_FileLog_VM_history_1
   LOGDEVICE  FileLog_VM_history
   LOGFILE    CURRENT
   NAME       SVG_FileLog_VM_history_1
   NOTIFYDEV  global
   NR         530
   STATE      initialized
   TYPE       SVG
Attributes:
   alias      Monatsverbrauch Wasser, Gas u. Strom
   captionPos auto
   fixedrange month
   plotReplace L1={sprintf("Wasser min: %.2f m³, max: %.2f m³",$data{min1},$data{max1})} L2={sprintf("Gas min: %.2f m³, max: %.2f m³",$data{min2},$data{max2})}
   room       Verbrauch
   sortby     6


Plotfile SVG_FileLog_VM_history_1.gplot:
# Created by FHEM/98_SVG.pm, 2018-01-21 16:44:55
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title '<L1> | <L2>'
set ytics
set y2tics
set grid y2tics
set ylabel "Strom / Gas"
set y2label "Wasser [m  ]"
set yrange [0:20]
set y2range [0:2]

#FileLog_VM_history 4:VM_Counter_Wasser.statEnergyDayLast\x3a::
#FileLog_VM_history 4:VM_Counter_Gas.statEnergyDayLast\x3a::
#FileLog_VM_history 4:VM_Counter_Strom.statEnergyDayLast\x3a::

plot "<IN>" using 1:2 axes x1y2 title 'Wasser [m  ]' ls l2fill lw 1 with bars,\
     "<IN>" using 1:2 axes x1y1 title 'Gas [m  ]' ls l0fill_stripe lw 1 with bars,\
     "<IN>" using 1:2 axes x1y1 title 'Strom [kWh]' ls l1fill lw 1 with bars


Viele Grüße
Titel: Antw:Neues style: f18
Beitrag von: Wuppi68 am 22 August 2018, 22:04:09
Zitat von: tomspatz am 22 August 2018, 14:19:50
@Wuppi68

funktioniert es denn bei dir nicht so wie:
einfach unter Select style den Haken bei "Fixed input and menu" rein und raus.
Ansonsten den code bei Additional CSS eintragen.

LG
Tom

Hallo Tom,

Danke !!!!!

Boah war ich doof ... erst konnte ich meine Frage gar nicht richtig schreiben und dann

war Select Style noch als Hiddenroom ;-)

Und ich such mir nen Wolf --> eigene Schuld
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 25 August 2018, 21:17:29
@Romoker: kann ich es leider nicht nachstellen, bitte auch Beispieldaten zum Plot hier anhaengen. Merkwuerdig: Hintergrund der SVG sollte eigentlich auf die Hintegrundfarbe der Seite gestellt werden. Und ich kann SVGs auch im Landscape scrollen

@tomspatz: ich habe das auf der TODO Liste, es erforderte aber Nachdenken/Experimentieren, und solche Aufgaben schiebe ich gerne nach hinten.
Die SVG (und Zoom-Knopf) Positionen waren bisher nicht Raum-Abhaengig, und du hast irgendwann diese Positionen gesetzt.
Ich habe jetzt diese Positionen jetzt auch Raum-Abhaengig gemacht, mit dem unschoenen Nebeneffekt, dass alle bisher gesetzten SVG-Positionen ihre Gueltigkeit verlieren, und neu gesetzt werden muessen.
Titel: Antw:Neues style: f18
Beitrag von: Romoker am 26 August 2018, 11:11:23
Hallo Rudi,

Zitatkann ich es leider nicht nachstellen, bitte auch Beispieldaten zum Plot hier anhaengen.
Hier Beispieldaten der letzten 10 Tage aus dem August:
2018-08-15_23:59:57 VM_Counter_Strom statEnergyDayLast: 15.90
2018-08-15_23:59:57 VM_Counter_Wasser statEnergyDayLast: 1.31900
2018-08-16_23:59:57 VM_Counter_Gas statEnergyDayLast: 0.68000
2018-08-16_23:59:57 VM_Counter_Strom statEnergyDayLast: 11.77
2018-08-16_23:59:57 VM_Counter_Wasser statEnergyDayLast: 0.60500
2018-08-17_23:59:57 VM_Counter_Gas statEnergyDayLast: 0.17000
2018-08-17_23:59:57 VM_Counter_Strom statEnergyDayLast: 10.25
2018-08-17_23:59:57 VM_Counter_Wasser statEnergyDayLast: 0.61300
2018-08-18_23:59:57 VM_Counter_Gas statEnergyDayLast: 0.88000
2018-08-18_23:59:57 VM_Counter_Strom statEnergyDayLast: 12.49
2018-08-18_23:59:57 VM_Counter_Wasser statEnergyDayLast: 0.92100
2018-08-19_23:59:57 VM_Counter_Gas statEnergyDayLast: 0.44000
2018-08-19_23:59:57 VM_Counter_Strom statEnergyDayLast: 14.29
2018-08-19_23:59:57 VM_Counter_Wasser statEnergyDayLast: 0.68700
2018-08-20_23:59:57 VM_Counter_Gas statEnergyDayLast: 0.76000
2018-08-20_23:59:57 VM_Counter_Strom statEnergyDayLast: 12.81
2018-08-20_23:59:57 VM_Counter_Wasser statEnergyDayLast: 0.92000
2018-08-21_23:59:57 VM_Counter_Strom statEnergyDayLast: 13.40
2018-08-21_23:59:57 VM_Counter_Wasser statEnergyDayLast: 0.68700
2018-08-22_23:59:57 VM_Counter_Gas statEnergyDayLast: 0.51000
2018-08-22_23:59:57 VM_Counter_Strom statEnergyDayLast: 13.23
2018-08-22_23:59:57 VM_Counter_Wasser statEnergyDayLast: 0.82100
2018-08-23_23:59:57 VM_Counter_Gas statEnergyDayLast: 0.54000
2018-08-23_23:59:57 VM_Counter_Strom statEnergyDayLast: 12.64
2018-08-23_23:59:57 VM_Counter_Wasser statEnergyDayLast: 0.55100
2018-08-24_23:59:57 VM_Counter_Gas statEnergyDayLast: 0.90000
2018-08-24_23:59:57 VM_Counter_Strom statEnergyDayLast: 18.52
2018-08-24_23:59:57 VM_Counter_Wasser statEnergyDayLast: 1.02300
2018-08-25_23:59:57 VM_Counter_Gas statEnergyDayLast: 1.38000
2018-08-25_23:59:57 VM_Counter_Strom statEnergyDayLast: 10.83
2018-08-25_23:59:57 VM_Counter_Wasser statEnergyDayLast: 0.44000


ZitatMerkwuerdig: Hintergrund der SVG sollte eigentlich auf die Hintegrundfarbe der Seite gestellt werden.
Den Fehler konnte ich weiter eingrenzen. Immer wenn sich vor einem SVG eine readingsGroup befindet, hat das folgende Effekte:
Zum Testen reicht z.B. folgende readingsGroup:
define batteries readingsGroup .*:battery
attr batteries room Verbrauch
attr batteries sortby 1


ZitatUnd ich kann SVGs auch im Landscape scrollen
Horizontal kann ich nur den ganzen Bildschirm scrollen, nicht ein einzelnes SVG. Unabhängig von der Existenz einer readingsGroup im Room.

Viele Grüße
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 26 August 2018, 14:27:29
Feststellungen/Aenderungen:

- beim Stylewechsel wird ab sofort "Reload page" automatisch ausgefuehrt (fhemweb.js).

- svg.js wurde bisher nicht geladen, falls vor dem ersten SVG andere "FW_atPageEnd" Module waren, die sind z.Zt.: readingsGroup, readingsHistory, Dashboard, FB_CALLIST, weblink, weekprofile. Das bedeutet, dass kein svg-Menu zur Verfuegung stand, und die Hintergrundfarbe der SVGs nicht gesetzt wurde. Habs gefixt.

- Chrome+smallscreen+Portrait+SVG-Detailansicht: die Hintergundfarbe ist falsch. Ein Wechsel zu Landscape und zurueck repariert sie, ein reload macht sie wieder kaputt. Scheint fuer mich ein Chrome-Bug zu sein, wenn jemand ein Fix/Workaround kennt, soll sich melden. Das Problem besteht auch im Desktop-Chrome, falls man in der JS-Console ein Mobilgeraet aktiviert hat.

- das Problem der kaputten SVG-Rect/bar-Darstellung im smallscreen+Portrait mode konnte ich nach relativ lange herumsuche an der "width:100%;" in der CSS Anweisung ".SVGplot { width: 100%; overflow-x: auto;}" festmachen, diese greift nur in smallscreen+Portrait mode. Ich gehe davon aus, dass es sich um ein Chrome Bug handelt, ich habe aber width:100% entfernt, und es schaut jetzt fuer mich ok aus. Wenn ich mich irren sollte, bitte melden.

Titel: Antw:Neues style: f18
Beitrag von: tomspatz am 26 August 2018, 15:29:01
@rudolfkoenig
Zitat
@tomspatz: ich habe das auf der TODO Liste, es erforderte aber Nachdenken/Experimentieren, und solche Aufgaben schiebe ich gerne nach hinten.
Die SVG (und Zoom-Knopf) Positionen waren bisher nicht Raum-Abhaengig, und du hast irgendwann diese Positionen gesetzt.
Ich habe jetzt diese Positionen jetzt auch Raum-Abhaengig gemacht, mit dem unschoenen Nebeneffekt, dass alle bisher gesetzten SVG-Positionen ihre Gueltigkeit verlieren, und neu gesetzt werden muessen.

Hat alles Zeit, doch nicht das wir uns falsch verstehen.
Ich habe das Verhalten bei SVG Plots die in einer Gruppe in einem Raum sind. Speziell Positioniert sind diese nicht.
Unter Everything oder fhem?room=all sind diese Plots ja auch gruppiert. Dort erscheinen die Pfeile, Zoom nicht, weil sie ja gruppiert sind.

Schönen Sonntag

LG
Tom
Titel: Antw:Neues style: f18
Beitrag von: Romoker am 27 August 2018, 10:03:45
Hallo Rudi,

nach dem heutigen Update kann ich bestätigen, dass die von mir gemeldeten Fehler alle behoben sind: SVG-Hintergund entspricht dem Seitenhintergrund, der SVG-Zoom-Knopf ist jetzt auch nach eine readingsGroup sichtbar und die SVG-Rect/Bar-Darstellung im Smallscreen Modus ist jetzt korrekt. Deine Vermutung, dass es sich im letzteren Fall um einen Chrome Bug handelt könnte, kann ich nicht bestätigen. Ich hatte das Verhalten auf meinem Smartphone auch bei den aktuellen Versionen von Firefox und Safari unter iOS.

Vielen, vielen Dank für die super Unterstützung hier.

Viele Grüße
Titel: Antw:Neues style: f18
Beitrag von: AmunRe am 05 September 2018, 22:19:38
Ich weiß nicht wie ich vernünftig meinen Fehler beschreiben soll.


Irgendwie verschwindet der rechte Bereich unter dem Menü?


Jedenfalls wirkt das so.


Ich hab jetzt schon alles an zusätzlichen CSS gelöscht, weil ich dachte nach dem update verträgt sich das nicht mehr. Das war es aber nicht.
Titel: Antw:Neues style: f18
Beitrag von: Romoker am 07 September 2018, 15:12:11
ZitatIrgendwie verschwindet der rechte Bereich unter dem Menü?

Hier gibt es eine Erklärung und einen Workaround: https://forum.fhem.de/index.php/topic,82351.msg822208.html#msg822208 (https://forum.fhem.de/index.php/topic,82351.msg822208.html#msg822208)

Viele Grüße
Titel: Antw:Neues style: f18
Beitrag von: AmunRe am 08 September 2018, 14:13:45
Zitat von: Romoker am 07 September 2018, 15:12:11
Hier gibt es eine Erklärung und einen Workaround: https://forum.fhem.de/index.php/topic,82351.msg822208.html#msg822208 (https://forum.fhem.de/index.php/topic,82351.msg822208.html#msg822208)

Viele Grüße


hey Danke!


Und der zweite Fehler? Der dritt in jedem Raum auf in dem ich ein Diagramm habe.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 08 September 2018, 14:22:10
ZitatUnd der zweite Fehler?
Du hast irgendwie geschafft kaputte Farbenwerde ins styleData einzubauen.
Eine Moeglichkeit das zu reparieren ist einen der voreingestellten Werte (default/light/dark) zu selektieren und zu speichern.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 09 September 2018, 15:48:27
Ich habe die fixedInput Voreinstellung auf false gesetzt. true war nicht Absicht, sondern eine Spezialitaet der jquery togleClass Funktion, die undefined als true interpretiert.

Weiterhin entsprechen ab sofort die .css die Voreinstellungen einem default Desktop, damit bei langsamen Leitungen weniger flimmert. Vermutlich muessten wir diese Voreinstellungen fuer smallscreen auch explizit setzen. Im Normalfall duerfte man keine Aenderung merken.

Ab sofort ist f18 die Voreinstellung, aber das kuendige ich separat an.
Titel: Antw:Neues style: f18
Beitrag von: TomLee am 09 September 2018, 16:20:50
Hab vor zwei Tagen ein update gemacht, zoomt man jetzt am Tablet im Logfile in der Liste, scrollt man auch automatisch mit jedem zoom-Schritt die Liste weiter hoch.

Ist es möglich das wieder so zu ändern das man an der gleichen Stelle bleibt nach dem zoomen ?
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 09 September 2018, 16:44:44
Ich habe keine Idee, womit ich sowas hervorgerufen habe, noch wie man das fixen koennte.
Ich haette eher den Browser in Verdacht.
Titel: Antw:Neues style: f18
Beitrag von: Otto123 am 09 September 2018, 16:47:01
Zitat von: rudolfkoenig am 09 September 2018, 16:44:44
Ich haette eher den Browser in Verdacht.
@TomLee Was da häufig hilft: Cache löschen!
Titel: Antw:Neues style: f18
Beitrag von: TomLee am 09 September 2018, 22:21:01
Zitat von: Otto123 am 09 September 2018, 16:47:01
@TomLee Was da häufig hilft: Cache löschen!

Hilft bei beiden Browsern (Firefox und der Standardbrowser Internet (Android)) nichts.

Zitat von: rudolfkoenig am 09 September 2018, 16:44:44
Ich habe keine Idee, womit ich sowas hervorgerufen habe, noch wie man das fixen koennte.
Ich haette eher den Browser in Verdacht.


Hoffe ich werde verstanden.
Hab jetzt nochmal ein Backup eingespielt um zu schauen was anders ist. Kann nur soviel sagen das vor dem update die Menüleiste und die Befehlszeile nicht fix war. Beim größer zoomen wurde alles über den Bildschirmrand hinaus vergrößert.
Nach dem update wird beim größer zoomen die Menüleiste immer größer bis sie den ganzen Bildschirm einnimmt, mit dem Nebeneffekt das bei jedem weiteren größer zoomen der Inhalt der Logfile-Liste immer weiter nach oben geht (ausgehend von ganz unten) und ein von links nach rechts (oder umgekehrt) "ziehen"  ist jetzt nur noch in der Liste (wenn die noch sichtbar ist) möglich. Hoch oder runter "ziehen" bezieht sich jetzt auf nur das Menüfeld oder nur die Liste, vor dem update hat man den ganzen Bildschirm "gezogen".
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 10 September 2018, 10:58:33
ZitatHab jetzt nochmal ein Backup eingespielt um zu schauen was anders ist. Kann nur soviel sagen das vor dem update die Menüleiste und die Befehlszeile nicht fix war.
Das habe ich gestern gefixt:

Die Voreinstellung fuer "FixedInput" war aktiviert, obwohl in der Anzeige das Feld nicht angehakt war. Erst ein Setzen und Entfernen des Hakens hat das Problem geloest.

Nach dem Fix von gestern sollte die Voreinstellung deaktiviert sein, entsprechend der Anzeige.

Ich habe nicht vor die beschriebenen Nebeneffekte bei FixedInput zu aendern. Wenn stoert, bitte FixedInput deaktivieren, oder gar nicht erst aktivieren.
Titel: Antw:Neues style: f18
Beitrag von: Tom111 am 10 September 2018, 11:03:54
Mit großer Mühe habe ich über Jahre hinweg meine fhem.cfg erweitert und angepasst.
Nach dem Update "01_FHEMWEB.pm" ist alles hinfällig geworden und nichts passt mehr.

Eine Anpassung (Schritt für Schritt) wäre ja in Ordnung, aber das ist ja nun wirklich eine brachiale Holzhammermethode!

Eine Anpassung ist mir quasi gar nicht mehr möglich, d.h. ich müsste nach diesem Update FHEM komplett neu aufsetzen.

"01_FHEMWEB.pm" gehört nun erst mal in "exclude_from_update".

Ich weiß nicht was Rudi da macht, aber es entwickelt sich alles nur noch zum negativen!  :'(
Titel: Antw:Neues style: f18
Beitrag von: TomLee am 10 September 2018, 11:25:22
Zitat von: rudolfkoenig am 10 September 2018, 10:58:33
Das habe ich gestern gefixt:

Die Voreinstellung fuer "FixedInput" war aktiviert, obwohl in der Anzeige das Feld nicht angehakt war. Erst ein Setzen und Entfernen des Hakens hat das Problem geloest.

Nach dem Fix von gestern sollte die Voreinstellung deaktiviert sein, entsprechend der Anzeige.

Ich habe nicht vor die beschriebenen Nebeneffekte bei FixedInput zu aendern. Wenn stoert, bitte FixedInput deaktivieren, oder gar nicht erst aktivieren.

Danke für die Info, alles super nach dem heutigen update.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 10 September 2018, 11:27:51
ZitatIch weiß nicht was Rudi da macht, aber es entwickelt sich alles nur noch zum negativen!
Wenn man mir Probleme konkret beschreibt, dann kann ich darauf auch reagieren, Seelendoktor bin ich aber nicht.
Evtl. hast du diesen Beitrag (https://forum.fhem.de/index.php/topic,90983.0.html) uebersehen?
Titel: Antw:Neues style: f18
Beitrag von: Tom111 am 10 September 2018, 11:43:53
Zitat von: rudolfkoenig am 10 September 2018, 11:27:51
Wenn man mir Probleme konkret beschreibt, dann kann ich darauf auch reagieren, Seelendoktor bin ich aber nicht.
Evtl. hast du diesen Beitrag (https://forum.fhem.de/index.php/topic,90983.0.html) uebersehen?

ZitatFalls man die alte Voreinstellung haben will, dann muss man in "Select style" default waehlen, bzw. das iconPath Attribut auf default:fhemSVG:openautomation setzen.

wo stell ich das ein?

nach der Umstellung sieht mein Floorplan nun wie folgt aus:
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 10 September 2018, 12:19:18
FLOORPLAN geht ueber einen der FHEMWEB-Instanzen. Fuer diese FHEMWEB Instanz bitte setzen:attr WEB stylesheetPrefix default
attr WEB iconPath default:fhemSVG:openautomation

Weiterhin muss man (wenn ich es richtig sehe), die Datei www/pgm2/floorplanstyle.css nach www/pgm2/defaultfloorplanstyle.css umbenennen. Wenn das stimmt (ich bitte um Rueckmeldung), dann werde ich die umbenannte Datei per update verteilen.

Der FLOORPLAN Maintainer ist seit langem nicht mehr aktiv, und FLOORPLAN ist leider staerker von FHEMWEB abhaengig, als es mir lieb ist. Ich versuche wenigstens per Attribut kompatibel zum bisherigen Verhalten zu bleiben, aber ich werde die FHEMWEB-Entwicklung nicht einstellen.
Titel: Antw:Neues style: f18
Beitrag von: Tom111 am 10 September 2018, 12:33:59
Zitat von: rudolfkoenig am 10 September 2018, 12:19:18
FLOORPLAN geht ueber einen der FHEMWEB-Instanzen. Fuer diese FHEMWEB Instanz bitte setzen:attr WEB stylesheetPrefix default
attr WEB iconPath default:fhemSVG:openautomation

Weiterhin muss man (wenn ich es richtig sehe), die Datei www/pgm2/floorplanstyle.css nach www/pgm2/defaultfloorplanstyle.css umbenennen. Wenn das stimmt (ich bitte um Rueckmeldung), dann werde ich die umbenannte Datei per update verteilen.

Der FLOORPLAN Maintainer ist seit langem nicht mehr aktiv, und FLOORPLAN ist leider staerker von FHEMWEB abhaengig, als es mir lieb ist. Ich versuche wenigstens per Attribut kompatibel zum bisherigen Verhalten zu bleiben, aber ich werde die FHEMWEB-Entwicklung nicht einstellen.

So, habe das jetzt genauso gemacht wie du es beschrieben hast.
in der fhem.cfg folgendes eingetragen:
Zitatattr WEB stylesheetPrefix default
attr WEB iconPath default:fhemSVG:openautomation

und  www/pgm2/floorplanstyle.css nach www/pgm2/defaultfloorplanstyle.css umbenannt.

Sieht auf jeden fall schon besser aus und scheint zu klappen, nur die Lampen gefallen mir überhaupt nicht, weil man die im Tag-Modus gar nicht mehr erkennt. (Übrigens ändert sich der Hintergrund beim Umschalten von Nacht auf Tag-Modus nicht mehr und bleibt immer dunkel).
Aber ich denke mal wenn ich mich anstrenge werde ich das auch noch in den Griff (geändert) bekommen.
Foto vorher / nachher:


Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 10 September 2018, 12:45:13
Zitatnur die Lampen gefallen mir überhaupt nicht,
iconPath greift nicht, weiss aber nicht, warum.
Titel: Antw:Neues style: f18
Beitrag von: Tom111 am 10 September 2018, 12:51:34
Zitat von: rudolfkoenig am 10 September 2018, 12:45:13
iconPath greift nicht, weiss aber nicht, warum.
Sorry, mein Fehler ich hab das Attribut wohl an der falschen Stelle platziert!  :-[

Jetzt habe ich auch meine alten Lampen wieder.
Wusste nicht dass die Reihenfolge in der "fhem.cfg" so genau eingehalten werden muss.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 10 September 2018, 13:05:03
Ich habe jetzt floorplanstyle.css nach defaultfloorplanstyle.css umbenannt, das wird ab morgen per update ausgeliefert, d.h. dieser Schritt sollte entfallen. Die Umstellung der beiden Attribute ist aber (je nach bisherigen Einstellungen und Praeferenzen) weiterhin notwendig.
Titel: Antw:Neues style: f18
Beitrag von: Tom111 am 10 September 2018, 13:13:53
Danke für deine Hilfe Rudi, es scheint soweit alles wieder zu funktionieren bis auf die Hintergrundfarbe im Tag/Nacht-Modus,
aber das werde ich irgendwie alleine austüfteln.
Titel: Antw:Neues style: f18
Beitrag von: TomLee am 10 September 2018, 14:30:41
Zur Info.
Zufälligerweise hab ich vorhin von unterwegs mit dem Iphone (Safari) auf FHEM zugegriffen, was selten vorkommt.
Wenn man auf den Menü-(Hamburger)-Button tippt und im Menü runter streichen möchte verschwindet das Menü dann.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 10 September 2018, 15:35:11
Danke fuer die Info.
- es tritt auch mit Chrome@Android auf
- es tritt nicht auf mit FixedInput :)
- es tritt nicht auf, wenn man es als WebApp nutzt ("Zum Startbildschirm hinzufuegen"...)
- es tritt nicht auf in Desktop-Chrome
- es tritt nicht auf in Desktop-Chrome, wenn man es als Mobildevice konfiguriert.

Im Problemfall wird nach dem Scrollen ein resize-Event generiert, was mAn ein Bug im Browser ist.
Ich habe es jetzt gefixt, hoffentlich ohne Nebeneffekte.
Titel: Antw:Neues style: f18
Beitrag von: TomLee am 10 September 2018, 16:22:55
Wenn ich hier schon mal schreibe:
Mir ist das wurscht wie es aussieht aber rein optisch find ich eine nicht abgeschnittene Befehlszeile am rechten Rand besser (also ein paar Pixel kürzer) und der Button und Befehlszeile sollten falls in einer Zeile horizontal zentriert sein. Rede hier jetzt von Iphone/Safari.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 10 September 2018, 16:30:24
ZitatWenn ich hier schon mal schreibe:
... dann spendiere bitte auch ein Screenshot, ich habe keine Ahnung, was du meinst.
Titel: Antw:Neues style: f18
Beitrag von: TomLee am 10 September 2018, 16:43:11
Sry
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 10 September 2018, 18:29:33
Beide sind iOS spezifische Probleme, auf dem Desktop oder Chrome@Android sieht man sie nicht.

Ich habe die Eingabezeile fuer iOS verkuerzt, und die Position von MenuBtn+Logo geaendert, beides vom Browserkennung abhaengig im f18.js. Wenn jemand weiss, wie man das "richtig" loest, dann soll er sich melden. Habs auf einem iPad getestet, iPhone habe ich nicht zur Verfuegung.
Titel: Antw:Neues style: f18
Beitrag von: TomLee am 11 September 2018, 11:19:33
Ja sieht gut aus. Allerdings wird jetzt mit Port 8083 die Meldung das FHEM nicht läuft angezeigt. FHEM läuft aber. Bei Port 8083 und 8084 ist das nicht, weder am Tablet oder PC und Browserunabhängig. Nur beim IPhone mit Safari.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 11 September 2018, 11:21:58
Daran habe ich nichts gedreht.

Moegliche Fehlerursache: Du leitest die Daten mit einem Proxy weiter, der kein websocket unterstuetzt.
Abhilfe waere "attr WEB longpoll 1"
Titel: Antw:Neues style: f18
Beitrag von: TomLee am 11 September 2018, 11:27:06
OK. Proxy nutz ich nicht, longpoll stand auf websocket. Mit longpoll 1 ist die Meldung weg. Danke.
Titel: Antw:Neues style: f18
Beitrag von: pillepalle12 am 12 September 2018, 10:54:08
Hallo,

heute nach dem Update hab ich wieder auf Style "default" geändert, leider sind die Lampen Icons noch immer die neuen senkrechten. Ich bevorzuge aber das alte Design mit den waagerechten Birnen.
Kann mir jemand sagen, wie ich das wieder zurück bekomme?

Vielen Dank
Titel: Antw:Neues style: f18
Beitrag von: automatisierer am 12 September 2018, 11:01:09
Guten Morgen,
ich habe ein Problem beim speichern von Änderungen.

Wenn ich in Räumen Änderungen vornehme (Blöcke verschiebe), werden diese nicht immer gespeichert. update force und löschen des attr styleData habe ich schon mehrfach gemacht - keine Besserung.

Im FHEMWEB Device hatte ich defaultRoom gesetzt, in der default Ansicht konnte ich dann Änderungen speichern, in anderen Räumen nicht.
DefaultRoom gelöscht, Änderungen im ersten Raum (ganz oben im linken Menu) werden gespeichert, in Anderen wieder nicht. Die Änderungen führen dann auch nicht zu dem roten? neben save Config.

Ich nutzte Firefox, in Chrome habe ich allerdings das gleiche Verhalten. Ich vermute einen dummen Anwendungsfehler, da das Problem bei mir schon länger besteht und ich offensichtlich der Einzige damit bin.

Was eventuell auch noch eine Rolle spielen kann, ich nutze apache2 als reverse proxy.

What can I do??

Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 12 September 2018, 11:55:25
ZitatKann mir jemand sagen, wie ich das wieder zurück bekomme?
Siehe https://forum.fhem.de/index.php/topic,90983.0.html
ZitatWhat can I do??
Erst ohne Proxy versuchen, und falls das Problem immer noch besteht, mit fhem.cfg.demo eine Anleitung zum Reproduzieren hier anhaengen.
Bitte auch Browserversion mitteilen.
Titel: Antw:Neues style: f18
Beitrag von: mumpitzstuff am 12 September 2018, 17:23:32
Hat jemand eine Möglichkeit gefunden die analoge Bahnhofsuhr (Logo oben links wurde ersetzt) wieder angezeigt zu bekommen? Bei mir erscheint sie zwar, aber leider nur im Hintergrund.
Titel: Antw:Neues style: f18
Beitrag von: stefanru am 13 September 2018, 01:03:49
Hi,

ist es möglich über "additional" CSS ein eigenes Background Image anzugeben?
Bekomme das einfach nicht hin.
Wie muss der Pfad lauten?

Gruß,
Stefan
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 13 September 2018, 09:54:25
Was spricht gegen die "eingebaute" Version?Ich meine damit den "Background" Link in der f18 "Room specific" Abschnitt?
Titel: Antw:Neues style: f18
Beitrag von: enno am 13 September 2018, 10:01:15
Zitat von: rudolfkoenig am 13 September 2018, 09:54:25
Was spricht gegen die "eingebaute" Version?Ich meine damit den "Background" Link in der f18 "Room specific" Abschnitt?

Ich habe bei der "eingebauten" Version das Problem, dass das Bild zu gross skaliert wird. Wenn ich mitgeben könnte (CSS??), dass das Bild auf eine feste Breite/Höhe eingefügt wird, dann wäre das für mich eine Lösung. Geht das? Habe ich bisher nicht gefunden... oder falsch gesucht.

Gruss
  Enno
Titel: Antw:Neues style: f18
Beitrag von: stefanru am 13 September 2018, 10:43:00
Hi Rudolf,

die eingebaute Version hatte ich gestern Nacht übersehen ;-)
Vielen Dank für den Hinweis.

Gruß,
Stefan
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 13 September 2018, 10:57:07
Eine einfache Loesung ist ein passend skaliertes Bild im www/images/background Verzeichnis abzulegen.
Alternativ kann man auch die aktuellen CSS Attribute (body { background-repeat: no-repeat; background-size:cover; }) im additional CSS ueberschreiben.
Man kan das Hintergrund komplett im CSS definieren, ist halt weniger flexibel, als mit der eingebauten Methode.
Titel: Antw:Neues style: f18
Beitrag von: vbs am 16 September 2018, 12:57:14
Ich hab irgendwie Probleme, den Style zu aktivieren. Also ich hab ihn aktiviert, aber es sieht dann komisch aus.

Was ich gemacht habe:
Attribut "stylesheePrefix" meiner Instanz von WEB auf "f18" gesetzt. Dann Browser refresht mit Ctrl-F5 damit auch der Cache geleert wird.

Sieht dann so aus wie auf dem Screenshot. Ich sehe keine Fehler in der Javascript-Konsole. Unter "sources" sehe ich, dass er durchaus z.B. "f18.js" geladen hat.

Ist wahrscheinlich was ganz blödes, aber hätte jemand einen Tip bitte?


EDIT:
Achso hier noch list von WEB:
Internals:
   CONNECTS   2598
   CSRFTOKEN  <CENSORED>
   DEF        8084 global
   FD         6
   NAME       WEB
   NR         13
   NTFY_ORDER 50-WEB
   PORT       8084
   STATE      Initialized
   TYPE       FHEMWEB
   READINGS:
     2018-08-24 17:57:31   state           Initialized
Attributes:
   JavaScripts codemirror/fhem_codemirror.js input/jquery-input-history.js
   SVGcache   1
   codemirrorParam { "lineWrapping":true }
   column     Wohnung:Nachrichten,Zustände,Statistik,System,Geräte,Logik|Energie Flur:Server,Geräte|Klima,Licht,System Schlafzimmer:Geräte,Licht,Statistik|Klima,System Wohnzimmer:Licht,Geräte|Klima,System
   confirmDelete 0
   endPlotNow 1
   endPlotToday 1
   group      Schnittstellen
   hiddenroom Übersicht
   icon       it_internet
   iconPath   openautomation:fhemSVG:default
   mainInputLength 80
   menuEntries Update,cmd=update,Restart,cmd=shutdown 1
   plotfork   1
   room       System
   sortRooms  Übersicht Wohnzimmer Schlafzimmer Bad Küche Flur Wohnung Wetter Sonstiges
   stylesheetPrefix f18
   webname    home
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 16 September 2018, 13:29:53
Fuer Langsamdenkende: was genau ist falsch?
Titel: Antw:Neues style: f18
Beitrag von: vbs am 16 September 2018, 13:37:17
Na ich dachte, dass der Style so dunkel ist mit oranger Schrift? Nicht? Zumindest die meisten Screenshots hier im Thread sehen so aus:
https://forum.fhem.de/index.php?action=dlattach;topic=82351.0;attach=93054

Also hier nochmal ein Screenshot meiner Home-Seite. Das Aussehen ist also korrekt so?
Titel: Antw:Neues style: f18
Beitrag von: Ellert am 16 September 2018, 14:19:19
Unter Select Style|Preset Colors: dark auswählen.
Titel: Antw:Neues style: f18
Beitrag von: vbs am 16 September 2018, 14:54:14
Verstehe, da kann man ja zig Sachen einstellen! 8) Danke dir!
Titel: Antw:Neues style: f18
Beitrag von: Frank_Huber am 17 September 2018, 10:39:15
Morgen,

Habe mir heute auch mal das F18 angeschaut.
Leider schaffe ich es aber nicht dass das Menü mit den Räumen links dauerhaft angezeigt wird.
Ist das nicht möglich?

FHEM ist tagesaktuell.
Titel: Antw:Neues style: f18
Beitrag von: rudolfkoenig am 17 September 2018, 10:55:01
ZitatLeider schaffe ich es aber nicht dass das Menü mit den Räumen links dauerhaft angezeigt wird.
Ich brauche mehr Info wie Screenshot, Browser, Plattform.

Per Voreinstellung ist auf dem Desktopn das Menu immer sichtbar, man kann es aber durch "rauszziehen" des Pins zum Verschwinden bringen. Wenn man den Pin wieder einsteckt, ist es wieder da. Wenn man die Pins in den Einstellungen abschaltet, dann kann man das vorher eingestellte nicht mehr aendern.

Auf einem Telefon ist es immer ausgeschaltet, und kann auch nicht aktiviert werden.
Titel: Antw:Neues style: f18
Beitrag von: Frank_Huber am 17 September 2018, 12:37:08
Hi Rudi,

Browser ist der aktuelle Chrome. synchronisiert zwischen allen Geräten.
Screenshots angehängt.
Der Browswer-cache ist überall geleert.
gleicher Verhalten im IE, Edge und Firefox.

Edit: OK, der Pin war nicht gesteckt. kann mich aber nicht erinnern den gezogen zu haben.

Eben eine anderen Instanz getestet, da war er von Anfang an gesteckt.

somit "gelöst", danke!
Titel: Antw:Neues style: f18
Beitrag von: FranzB94 am 17 September 2018, 17:51:43
@Rudolf: nur als Hinweis für die Überschrift und ggf. zur Verwendung

ZitatStyle
sta͜il/
Substantiv, maskulin [der]

Titel: Antw:Neuer style: f18
Beitrag von: rudolfkoenig am 17 September 2018, 18:23:59
@FranzB94: danke, habs geaendert.
Titel: Antw:Neuer style: f18
Beitrag von: gloob am 17 September 2018, 18:33:15
Und jetzt noch Style bitte mit großem S  ;D
Titel: Antw:Neuer Style: f18
Beitrag von: SouzA am 18 September 2018, 22:10:39
Hi,

da ich in den Ankündigungen gelesen habe, dass es ein Style f18 gibt wollte ich mir den mal anschauen...
Was mir allerdings auffällt ist, dass der Scrollbalken des Menüs immer die Gruppen überlappt (siehe Bild), wenn man nicht den pin vom Menü einmal löst und wieder festpinnt.

Gibt es dafür eine Abhilfe?

Danke für Rückmeldung.
Bis denn
SouzA
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 19 September 2018, 07:24:17
Der Scrollbalken ist sichtbar, falls man FixedInput aktiviert hat, das Menu wg. Anzahl der Raeume nicht auf dem Bildschirm passt, und man Windows oder Linux verwendet. Das Problem gibt es nicht unter OSX/Android und iOS, weil da der Scrollbalken nur beim Scrollen eingeblendet wird.
Falls mir jemand eine sinnvolle Loesung vorschlaegt, bin ich gerne bereit es zu einzubauen.

Titel: Antw:Neuer Style: f18
Beitrag von: devil77 am 19 September 2018, 08:50:00
Bei mir habe ich das wie folgt gelöst
div#content::-webkit-scrollbar {
    display: none;
}

div#menu::-webkit-scrollbar {
    display: none;
}


Damit habe ich für das Menü und dem Hauptbereich die Scrollbar ausgeblendet.
Kann aber immer noch wie gewohnt scrollen.
Ob die Lösung für alle Browser auf allen Systemen geeignet weiß ich nicht.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 19 September 2018, 11:30:56
Danke fuer den Hinweis, ich habe es eingebaut, eingeschraenkt fuer Linux und Windows und aktivierten fixedInput.
Es funktioniert fuer webkit basierte Browser wie Chrome und Safari. Falls jemand eine Loesung fuer die Anderen kennt, bitte melden.
Titel: Antw:Neuer Style: f18
Beitrag von: SouzA am 20 September 2018, 22:56:45
Hi,
vielen Dank für deine Arbeit, aber...  ;)

Das styles Menü passt irgendwie nicht. (Siehe Bild)
Außerdem verschwindet das Menü nicht, wenn man den Pin weg nimmt. Soll das so sein? (Siehe Bild)
Kann man einstellen, dass das Menü immer angezeigt wird, nur nicht im Dashboard?

Vielen Dank für eine Rückmeldung!
Bis denn
SouzA
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 21 September 2018, 07:24:33
ZitatDas styles Menü passt irgendwie nicht. (Siehe Bild)
Ich gehe davon aus, dass Du mit Dragging und Fixed input experimentiert hast, damit kann man sowas erzeugen.
Man muesste Dragging wieder aktivieren und die Bereiche entweder selbst zurueckschieben, oder mit dem "Reset" Knopf (neben dem Kreuz) die Positionen wieder zuruecksetzen. Falls nichts hilft, dann kann man das WEB Attribut styleData entfernen, und die Seite neu laden.

ZitatAußerdem verschwindet das Menü nicht, wenn man den Pin weg nimmt.
Ohne gesteckten Pin verschwindet das Menu entweder durch Auswahl eines Elementes oder durch Druecken des Menu Knopfes in der Ecke oben links. Weiss nicht, wie du es geschafft hast, diesen Knopf zu verstecken, waere Dankbar fuer eine Beschreibung.
Titel: Antw:Neuer Style: f18
Beitrag von: jonien am 22 September 2018, 14:01:05
Hallo,
ich hoffe, das ich hier richtig bin (sonst ggf. verschieben :)).
Ich habe gestern ein Update für Fhem durchgeführt und habe seitdem eine (für mich ärgerliche) Veränderung festgestellt.
-Vorab: Der neue Style, vom Desktop aus aufgerufen, gefällt mir gut.

-Ich nutze Fhem bis dato sehr häufig mobil (Fully, Chrome, Boat-Browser,Firefox,Dolphin...)von verschiedenen Endgeräten  in der "Desktop Ansicht". Die Desktop-Ansicht ist mich unverzichtbar.

-Seit dem oben genannten Update kann ich von keiner mobilen APP mehr die Desktop Ansicht aktivieren.
Einzig unter Chrome gelingt es, die Desktop Ansicht darzustellen (für jeden Aufruf erneut aktivieren).

Ich habe ansonsten keine Veränderungen vorgenommen, daher vermute ich, das eine Änderung von FHEMWEB (?) dazu geführt haben könnte. Kann ich dieses "Fehlverhalten" irgendwie beeinflussen bzw. die Änderungen durch das Update rückgängig machen?

LG
Jörg

(PS Bei einigen APP's kann man gelegentlich noch kurz die Desktop Ansicht erkennen, bis die Mobile Ansicht dargestellt wird.)
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 22 September 2018, 19:43:22
Falls man bei f18 eine Desktop-Ansicht haben will, dann muss man den Browser ueberzeugen, eine Bildschirmaufloesung von mehr als 480 in beiden Richtungen zu melden. Ob/wie das auf dem Mobilgeraet machbar ist, wuerde mich auch interessieren.
Titel: Antw:Neuer Style: f18
Beitrag von: Frank_Huber am 22 September 2018, 20:07:15
480 pixel?
Mein mobilgerät hat 1920x1080 Pixel und zeigt nie die desktopansicht.
Ich denke du meinst die pixel dichte dpi oder?
Dpi höher 480 = mobilansicht?

Gesendet von meinem Doogee S60 mit Tapatalk

Titel: Antw:Neuer Style: f18
Beitrag von: devil77 am 22 September 2018, 20:21:13
Deine Handydisplayauflösung hat nichts mit der Auflösung der mobilen Browser zu tun.
Z. Bsp. haben Android Gerät zum größten Teil eine mobile Browserauflösung von 360x640 und Apple IOS zum Teil 375x667.
Damit melden sich die Browser mit weniger als 480 Pixel bei der Webseite und bekommen daher nur die mobile Ansicht.
Über die genauen techn. Hintergründe usw. findet man bestimmt in Netzt genug Stoff zum lesen,
Titel: Antw:Neuer Style: f18
Beitrag von: jonien am 22 September 2018, 21:01:39
Ok, danke für den Hinweis. Ich werde dann erstmal die "default"-Ansicht verwenden, bis sich ein Ansatz zur Lösung finden lässt.
Die erforderliche Bildschirmauflösung des Browsers von 480 in beiden Richtungen für eine Desktop Ansicht ist wahrscheinlich nicht Fhem - spezifisch.
Bei einigen Browsern kann in den Einstellungen gewählt werden, ob die Mobile- oder Desktop- Ansicht bevorzugt wird. Bei anderen Web-Site's hat es bisher funktioniert (als Beispiel "t-online.de"). Kann ggf. die Html-Version der Website eine Auswirkung haben?
LG
Jörg
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 13 Oktober 2018, 07:21:37
Guten Morgen

ich werde grad so richtig "warm" mit deinem Style ;). Es gefällt mir super. Danke für die tolle Vorarbeit. Ich habe dazu Fragen:

- Hat es einen Grund, wieso man die Schrift-Art nicht ändern kann?
- Hat es einen Grund, wieso man das eigene Log analog dem Background nicht ändern kann?
- Warum kann man das Menu nicht "sortieren"?
- Und super wäre noch eine "round" Option. Sprich, dass die Boxen nicht eckig sondern rund wie beim dark sind.

Lg c
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 13 Oktober 2018, 10:53:15
ZitatHat es einen Grund...
Ja, ist nicht explizit programmiert, ich habe jetzt schon Bedenken wg. der vielen Attribute: die sollen ja in allen Kombinationen funktioneren, und es gibt nicht so wahnsinnig viele Leute, die mir dabei helfen.
Btw. Schrift-Art und round kann man mit einem CSS relativ einfach hinzufuegen.
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 13 Oktober 2018, 17:09:34
Zitat von: rudolfkoenig am 13 Oktober 2018, 10:53:15
Btw. Schrift-Art und round kann man mit einem CSS relativ einfach hinzufuegen.

Herzlichen Dank! Das hab ich fast befürchtet.  ;) Hätt ich mich doch bei der Berufswahl anders entschieden ;) leider bin ich mit css überhaupt nicht bewandert...
Titel: Antw:Neuer Style: f18
Beitrag von: devil77 am 13 Oktober 2018, 18:57:49
CSS ist ja nun kein Hexenwerk und hat nichts mit "falscher" Berufswahl zu tun.
Anstatt sich mal selber zu versuchen nur haben, haben wollen kann ich nicht nachvollziehen.
Gibt doch auch hier um Forum genug die das f18 Theme schon individuell angepasst haben - inklusive eigener Schrift, runden Ecken usw.

Um alles fertig vorgesetzt zu bekommen ist FHEM einfach das flasche Programm.
Die einen sehen das als großen Nachteil ich eher (wie einige Anderen) als großen Vorteil, weil man sich hier richtig austoben kann und nicht in "Grenzen" denken muss.
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 13 Oktober 2018, 19:39:59
Hey Devil77

Point taken, sehe ich genau so...

Zitat von: choetzu am 13 Oktober 2018, 17:09:34
Herzlichen Dank! Das hab ich fast befürchtet.  ;) Hätt ich mich doch bei der Berufswahl anders entschieden ;) leider bin ich mit css überhaupt nicht bewandert...
Hier schreie ich nicht nach der Lösung..

Lg c
Titel: Antw:Neuer Style: f18
Beitrag von: bismosa am 16 Oktober 2018, 19:51:04
Hallo!
Ein wirklich sehr genialer Style! Sehr sehr schick! Weiter so!

Ich habe das Problem (aber noch keine Lösung gefunden), dass auf meinem Acer Win10 Laptop die Menüpunkte recht groß sind. Im Edge ist das nicht der Fall. Ich habe hier gelesen:
Zitat von: rudolfkoenig am 17 Juli 2018, 16:41:18
In der JavaScript console Folgendes eintippen:'ontouchstart' in windowBei true wird Tablet angenommen. Und bei
(screen.width < 480 || screen.height < 480)Smartphone aka smallscreen.
Bei mir gibt es ein True zurück. Ich habe aber kein Touchscreen. Habe ich am Browser irgendwas verstellt? Ich habe mal mein Profil umbenannt...auch keine Änderung. Was habe ich bloß wieder angestellt?

Gruß
Bismosa
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 16 Oktober 2018, 22:00:15
ZitatBei mir gibt es ein True zurück. Ich habe aber kein Touchscreen.
Ich gehe davon aus, dass das ein Bug im Browser oder OS ist. Ich habe beim Suchen Folgendes gefunden:
ZitatThis happens with chrome://flags/#touch-events on "Automatic" on a Lenovo Thinkpad W540 laptop, no touchscreen, but having the builtin trackpad.
Titel: Antw:Neuer Style: f18
Beitrag von: bismosa am 16 Oktober 2018, 22:27:37
Hallo,

das Zitat hatte ich beim Googeln auch gefunden...aber immer eher in die Richtung das es kein Bug ist.
Ich habe jetzt einfach mal "Touch Events API" Disabled und siehe da...alles schick  :)

Vielen Dank für die schnelle Hilfe und diesen neuen Style!

Gruß
Bismosa
Titel: Antw:Neuer Style: f18
Beitrag von: binford6000 am 29 Oktober 2018, 10:12:23
Hallo,
gibt es eine Möglichkeit...
VG Sebastian

Titel: Antw:Neuer Style: f18
Beitrag von: gloob am 29 Oktober 2018, 10:14:42
Zitat von: binford6000 am 29 Oktober 2018, 10:12:23
Hallo,
gibt es eine Möglichkeit...

  • ...die Hintergrundfarbe der SONOSPLAYER Steuerung zu ändern?
  • ...die Steuerelemente der SONOSPLAYER etwas zu entzerren?
VG Sebastian

Bei mir hat folgendes geholfen für die Farbe:
.rc_body {
background: #494949;
}
Titel: Antw:Neuer Style: f18
Beitrag von: binford6000 am 29 Oktober 2018, 10:31:23
Danke gloob. Die Farbe ist schon mal erledigt  ;)
VG Sebastian
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 31 Dezember 2018, 18:36:33
guten Abend.
ich habe das Phänomen, dass es mir die Additional CSS nicht "nimmt". Ich vermute, dass dies mit den Berechtigungen zusammenhängt. Wo werden diese Styles gespeichert und mit welcher Berechtigung?
danke und guten Rutsch
c
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 01 Januar 2019, 15:23:09
Zitatich habe das Phänomen, dass es mir die Additional CSS nicht "nimmt".
Vermutich ein klassisches CSS Problem, das Objekt wird weniger genau spezifiziert, als in den anderen Regeln, siehe z.Bsp. https://developer.mozilla.org/de/docs/Web/CSS/Spezifit%C3%A4t

ZitatIch vermute, dass dies mit den Berechtigungen zusammenhängt.
Unwahrscheinlich.

ZitatWo werden diese Styles gespeichert und mit welcher Berechtigung?
In einem FHEMWEB Attribut.
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 01 Januar 2019, 16:37:57
Danke für deine Antwort. Und sorry, Ich habe mich vermutlich nicht richtig ausgedrückt.

Ich meinte, dass wenn ich in Additional CSS meinen Code eingebe und Save drücke, wird es NICHT im attr WEB CSS übernommen. Auch wenn ich es mittels RawDefinition ergänze, passiert gar nix.

Es hat schlussendlich über den nicht ganz so schönen Weg via fhem.cfg geklappt. Keine Ahnung wieso..

Bei meiner Testinstallation hat es ohne Probleme geklappt... komisch

Lg c
Titel: Antw:Neuer Style: f18
Beitrag von: Otto123 am 01 Januar 2019, 16:51:55
Hi,

was sagt denn ls -l /opt/fhem/?
Falsches Recht und du darfst einfach in die fhem.cfg nicht schreiben?

Gruß Otto
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 01 Januar 2019, 17:21:15
Zitat von: Otto123 am 01 Januar 2019, 16:51:55
was sagt denn ls -l /opt/fhem/?

-rw-r--r--  1 root root      1559 Sep 18 21:29 000-default-le-ssl-conf
drwxr-xr-x  2 fhem dialout   4096 Sep 10 17:49 backup
-rwxrwxrwx  1 pi   pi        3981 Sep 16 13:47 backup.sh
drwxr-xr-x  2 fhem dialout   4096 Sep 26 19:48 cache
-rw-r--r--  1 fhem dialout 269999 Jan  1 14:31 CHANGED
-rw-r--r--  1 fhem dialout  39688 Sep 10 17:49 configDB.pm
drwxr-xr-x 40 fhem dialout   4096 Sep 10 17:42 contrib
-rwxr-xr-x  1 fhem dialout    146 Sep 15 16:57 db.conf
drwxr-xr-x  3 fhem dialout   4096 Sep 10 17:42 demolog
drwxr-xr-x  4 fhem dialout   4096 Sep 10 17:49 docs
drwxrwxrwx  6 fhem dialout  24576 Jan  1 14:31 FHEM
-rwxr-xr-x  1 root root    166058 Dez 29 16:55 fhem_291218.cfg
-rwxrwxrwx  1 pi   pi      175756 Jan  1 15:26 fhem.cfg
-rw-r--r--  1 fhem dialout  19987 Sep 19 13:14 fhem.cfg.demo
-rwxr-xr-x  1 fhem dialout 152807 Dez 26 21:08 fhem.pl
drwxrwxrwx  2 fhem dialout   4096 Jan  1 00:00 log
-rw-r--r--  1 fhem dialout  38724 Jan  1 14:31 MAINTAINER.txt
drwxr-xr-x  3 root root      4096 Sep 16 12:36 mnt
-rw-r--r--  1 fhem dialout    935 Feb 19  2017 README_DEMO.txt
drwxr-xr-x  5 fhem dialout   4096 Sep 11 06:35 restoreDir
drwxr-xr-x  2 fhem dialout   4096 Sep 10 17:49 unused
drwxrwxrwx 10 fhem dialout   4096 Jan  1 15:03 www


Vermutlich habe ich verlaufe der Zeit ziemlich viele Berechtigungen durcheinander gebracht...  I know..

fhem.cfg fasse ich normalerweise nicht an, dafür gibts ja die RawDefinition. Aber da RawDefinition nicht geklappt hat, bin ich halt über diese Weg gegangen.
Titel: Antw:Neuer Style: f18
Beitrag von: Otto123 am 01 Januar 2019, 17:22:25
Das hilft:
sudo chown -R fhem: /opt/fhem

Gruß Otto
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 01 Januar 2019, 19:12:55
Danke Otto, geht trotzdem noch nicht.

Es ist wirklich ganz komisch. Es geht weder via

- Select Style --> Additional CSS (es kommt kein "Save config)

noch via

- attr WEB CSS ...code.. (es kommt kein "Save config). Andere attr WEB JavaScripts werden problemlos übernommen.

noch via

- RawDefinition (es kommt kein "Save config)

Der einzige Weg ist via fhem.cfg... Was ich ja wirklich vermeiden möchte.... Das hatte ich bisher noch nicht...hmm.. Hängt es evtl. an meinem ReverseProxy und ApacheServer?

Titel: Antw:Neuer Style: f18
Beitrag von: Otto123 am 01 Januar 2019, 19:19:46
Naja die Rechte waren aber wirklich verbogen. Obwohl genau betrachtet, konnte jeder in die fhem.cfg schreiben, auch wenn sie User pi gehörte.
Du sitzt wieder auf dem Berg in einer Hütte und machst das Ganze von "Draußen" :) ?
War nur Spaß.

Aber wenn es bei anderen Attributen geht, kann es eigentlich nicht sein, es sei denn Du hast da spezielle Regeln. Mit Reverseproxy kenn ich mich nicht aus.

Gruß Otto
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 03 Januar 2019, 21:31:46
Zitat von: Otto123 am 01 Januar 2019, 19:19:46
Aber wenn es bei anderen Attributen geht, kann es eigentlich nicht sein, es sei denn Du hast da spezielle Regeln. Mit Reverseproxy kenn ich mich nicht aus.
Ich verstehe es auch nicht... Aber nun läuft es ja..

Obwohl:
Ich habe meine liebe Mühe mit dem "Dragging Active". Ich sortiere schön säuberlich alles, drücke dann auf "Save config", reloade die Seite neu und siehe da --> Alles durcheinander. Ich habe es mit Mac Safari, Mac Chrome probiert. Bei beiden Browsern das selbe..  Und auf dem Testsystem ebenso.. Also, liegt es diesmal nicht am Liveserver..

Geht es Euch auch so?

Kann man die Pin-Position wieder "resetten" resp. wiederherstellen? Denn nun habe ich ein Chaos...

Danke für die Antwort.

Lg c
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 03 Januar 2019, 22:22:35
ZitatKann man die Pin-Position wieder "resetten" resp. wiederherstellen? Denn nun habe ich ein Chaos...
Notfalls durch Loeschen des WEB styleData Attributes.
Titel: Antw:Neuer Style: f18
Beitrag von: eppi am 04 Januar 2019, 18:40:30
Hallo
Ich habe eine Frage an die CSS Spezialisten. Ich möchte gerne meine roten Raum-Rechtecke oben einwenig runden, wie "Menü, at, average, dummy" auf dem beiliegenden Printscreen.
Nach meiner Recherche bin ich der Meinung, dass dies wie folgt heissen müsste:
border-radius: 2px 2px 0px 0px;

Aber wo und in welcher Klasse müsste ich das einfügen? Mit dem Browser-Inspektor bin ich auch nicht weitergekommen.

Danke vielmals!
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 04 Januar 2019, 19:03:08
Zitat von: rudolfkoenig am 03 Januar 2019, 22:22:35
Notfalls durch Loeschen des WEB styleData Attributes.

Danke. Ist mein Problem ein bekanntes Phänomen? Oder ist es eine Laiengeschichte..:)
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 05 Januar 2019, 00:06:37
Es liegt doch nicht an den Berechtigungen. Das Problem mit dem Speichern ist bekannt. Es liegt offensichtlich am Reverseproxy, warum auch immer..

https://forum.fhem.de/index.php/topic,84760.msg844169.html#msg844169
Titel: Antw:Neuer Style: f18
Beitrag von: heikoh81 am 09 Januar 2019, 21:32:14
Das neue Layout ist eine tolle Weiterentwicklung und hält fhem auf dem Stand der Zeit.
Ich habe es erst jetzt kennengelernt, da ich updates an meinem Produktiv-System sehr sparsam einsetze...

Aber: Ich habe mich in den letzten 5 Jahren an das alte Layout sehr gewöhnt, so dass ich vieles fast blind finde.
Deshalb meine Frage:
Kann ich irgendwie per attr einstellen, dass wieder das alte Layout kommt?

Und auch auf dem Handy möchte ich kein Responsive Design, sondern eigentlich immer die komplette Seite.
Geht zwar mit "Desktopseite erzwingen" im Browser, aber dann ist die Ansicht bei f18 stark herangezoomt, und ich habe viele Seiten so angelegt, dass ich früher alle wichtigen Daten auf einen Blick hatte.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 09 Januar 2019, 21:55:23
Siehe https://forum.fhem.de/index.php/topic,90983.msg834652.html#msg834652
Die Aenderung betrifft nur die WEB Instannz, die beiden anderen (WEBtablet/WEBphone) haben bereits ein stylesheetPrefix gesetzt.
Titel: Antw:Neuer Style: f18
Beitrag von: heikoh81 am 09 Januar 2019, 22:07:01
Danke schön, jetzt sieht es wieder wie gewohnt aus.

Übrigens nichts gegen das neue Layout!
Ich finde das neue Layout sogar gut, weil dadurch der Abstand zu "konkurrierenden" Systemen hinsichtlich Oberfläche nicht zu groß wird.
Es sollen ja möglichst viele User fhem einsetzen, damit sich genug Leute für eine stetige Weiterentwicklung und Anpassung an Änderungen von PERL etc. begeistern :-)
Nur habe ich mich einfach zu sehr an das alte gewöhnt über die hunderten Stunden, die ich in die Anpassung gesteckt habe.

Heiko
Titel: Antw:Neuer Style: f18
Beitrag von: lars_T am 06 April 2019, 11:52:06
Hi ich bekomme jetzt einen Fehler nach dem letzten update.


f18.js line 853:
Uncaught ReferenceError: cm is not defined


Ich hatte nichts geändert.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 06 April 2019, 12:17:47
Sorry, habe gestern vergessen den letzten Bugfix einzuchecken.
Das habe ich jetzt nachgeholt, und ihn (ausnahmsweise) direkt fuer FHEM update zur Verfuegung gestellt.
Titel: Antw:Neuer Style: f18
Beitrag von: DasQ am 06 April 2019, 16:53:09
in dem mediaquery für mobiledevices muss ein fehler drin sein. wenn ich auf meim iphone7pro von vertikal auf horizontal drehe, ändert sich bei mir die hintergrundfarbe der polts. und dann beim zurück drehen bleibts flasch.

sowohl am safari als auch chrome
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 07 April 2019, 09:37:49
Ich kann das leider nicht nachstellen, allerdings habe ich auch kein iphone7pro.
Wenn Du (offensichtlich) sicher bist, woran das liegt, bitte einen Patch hier reinstellen.
Titel: Antw:Neuer Style: f18
Beitrag von: DasQ am 07 April 2019, 12:14:21
Dauert ein bisschen, weil ich mich da erst ins mobile Remote debugging einarbeiten muss. Aber was ich so eben gelesen hab muss das garnichtmehr so schwer sein.


Ich meld mich wieder  ;)
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 07 April 2019, 14:30:37
Hallo,

ich finde das f18 wirklich klasse. Gefällt mir gut, auch wenn ich leider kein CSS Experte bin. ich habe schon einiges "gelernt". Frage: wie habt ihr die Darstellung bei "apptime" gelöst? Bei mir kommt es leider es was "scheps" rüber, siehe Bild.

Und dann noch eine Frage: Was muss ich im CSS eingeben, damit das Width-handling des Contents analog dem dark-layout ist. Bei F18 ist es immer über die ganze Breite, dies will ich im Desktop Modus nicht.

Danke für die Hilfe

lg c.

Titel: Antw:Neuer Style: f18
Beitrag von: DasQ am 07 April 2019, 15:15:10
also ich bin ein kleines stückchen weiter.
und zwar ist der effekt nur bei plots die in einer "group" sind.
Tritt bei Android wie bei IOS handys auf.

und es wird so weit ich des seh, das css(style) aus dem svg verwendet, dann vom f18 css überschrieben aber bei switch von landscape auf portait klappt was nicht


btw. hab ich dafür gleich noch was neues entdeckt was aber browser spezifisch safarie betrifft, und zwar ist dort der + button oben zwischen eingabezeile und fhemsicon nicht fixed und schwimmt beim scrollen wundschön mit. (mal schaun was das genau ist)

ich merk schon da kommt noch mehr
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 16 April 2019, 22:40:27
Zitat von: choetzu am 07 April 2019, 14:30:37
Hallo,

ich finde das f18 wirklich klasse. Gefällt mir gut, auch wenn ich leider kein CSS Experte bin. ich habe schon einiges "gelernt". Frage: wie habt ihr die Darstellung bei "apptime" gelöst? Bei mir kommt es leider es was "scheps" rüber, siehe Bild.

Und dann noch eine Frage: Was muss ich im CSS eingeben, damit das Width-handling des Contents analog dem dark-layout ist. Bei F18 ist es immer über die ganze Breite, dies will ich im Desktop Modus nicht.

Danke für die Hilfe

lg c.

Braucht ihr apptime nicht?
Titel: Antw:Neuer Style: f18
Beitrag von: heikoh81 am 08 Mai 2019, 20:52:24
Zitat von: heikoh81 am 09 Januar 2019, 21:32:14
Aber: Ich habe mich in den letzten 5 Jahren an das alte Layout sehr gewöhnt, so dass ich vieles fast blind finde.

Update:
Ich habe nun wieder f18 aktiviert.
Das klassische Design verursacht bei mir seit Firefox 66.0.4 auf einem Nexus7 (2012) mit LineageOS (Android 7.irgendwas) Darstellungsprobleme.
Keine Probleme mit Chrome.
Und zwar, wenn ich auf das Menü heranzoome, um etwas auszuwählen, gehen meine Finger-Tipper ins Leere bzw. eine andere Group wird aufgerufen.

Zum Glück gibt es f18, so konnte ich die Darstellung wechseln und die funktioniert auch auf Firefox 66.0.4.
Keine Ahnung was die in der Rendering-Engine geändert haben, aber ich war wegen des Addon-Zertifikat-Problems zum Update von Firefox gezwungen...

Viele Grüße,
Heiko
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 30 Mai 2019, 08:26:17
Zitat von: choetzu am 16 April 2019, 22:40:27
Braucht ihr apptime nicht?
Sorry, wenn ich so penetrant auf der Darstellung von apptime rumreite. Ich versuche es auch gerne selber zu lösen, jedoch weiss ich nicht wo genau der css code von apptime zu finden ist. Danke für die Hilfe.
Titel: Antw:Neuer Style: f18
Beitrag von: DasQ am 30 Mai 2019, 09:13:24
schon mal versucht das element zu analysieren? (Browser F12 --> Inspektor? (1 im screenshot))
da steht normalerweise welche css datei im augenblick zieht(2). grundvorrausgesetzt, man hat nenn plan von selektoren und ihrer wertigkeit...
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 30 Mai 2019, 09:16:27
ZitatBraucht ihr apptime nicht?
Natuerlich nicht, ich habe sogar Schwierigkeiten, es zu bedienen :)

ZitatIch versuche es auch gerne selber zu lösen, jedoch weiss ich nicht wo genau der css code von apptime zu finden ist.
Ich gehe davon aus, das apptime keinen eigenen CSS Eintrag hat.

Rückgabewerte von FHEM Befehlen werden von FHEMWEB in <pre> ausgegeben, seit "immer", das ist nicht f18 spezifisch.
Grob vereinfacht ist <pre> "Terminal-Ausgabe", bei dir scheint der Font fuer <pre> proportional zu sein, deswegen schaut es "scheps" aus.
In meiner unmodifizierten f18 ist die Ausgabe mAn OK, font-family ist monospace.
Titel: Antw:Neuer Style: f18
Beitrag von: DasQ am 30 Mai 2019, 09:21:30
<pre> ist vorformartierter (https://www.mediaevent.de/xhtml/pre.html) Text


ach ja das mit dem zerhagelten SVG Plot kommt aus den plots selber.
id="gr_bg" wird verbogen


nach dem drehen des devices. (handy, tablet, whatever)

<!-- will be included in each svg plot -->
<defs>
  <linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#FFFFF7; stop-opacity:1"/>      <----------------- HIER
    <stop offset="100%" style="stop-color:#FFFFC7; stop-opacity:1"/>  <----------------- HIER
  </linearGradient>

  <linearGradient id="gr_0" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#f00; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#f88; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_1" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#291; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#8f7; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_2" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#00f; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#88f; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_3" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#f0f; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#f8f; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_4" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#ff0; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#ff8; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_5" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#0ff; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#8ff; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_6" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#000; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>
  </linearGradient>

  <pattern id="gr0_stripe" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(-45 2 2)">
      <path d="M -1,2 l 6,0" stroke="#f00" stroke-width="0.5"/>
  </pattern>

  <pattern id="gr1_stripe" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45 2 2)">
      <path d="M -1,2 l 6,0" stroke="green" stroke-width="0.5"/>
  </pattern>

  <linearGradient id="gr0_gyr" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" style="stop-color:#f00; stop-opacity:.6"/>
    <stop offset="50%" style="stop-color:#ff0; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#0f0; stop-opacity:.6"/>
  </linearGradient>


so wie auf den screenshot sollte es sein.
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 30 Mai 2019, 13:08:46
Zitat von: rudolfkoenig am 30 Mai 2019, 09:16:27
Natuerlich nicht, ich habe sogar Schwierigkeiten, es zu bedienen :)
Ich gehe davon aus, das apptime keinen eigenen CSS Eintrag hat.

Rückgabewerte von FHEM Befehlen werden von FHEMWEB in <pre> ausgegeben, seit "immer", das ist nicht f18 spezifisch.
Grob vereinfacht ist <pre> "Terminal-Ausgabe", bei dir scheint der Font fuer <pre> proportional zu sein, deswegen schaut es "scheps" aus.
In meiner unmodifizierten f18 ist die Ausgabe mAn OK, font-family ist monospace.

Herzlichen Dank. D.h. Es hängt also an der Schrift. Ist es die Schrift an sich oder so wie ich es konfiguriert habe?

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

html, body, html * {
  font-family: 'Roboto';
}

@font-face {
  font-style: normal;
  font-weight: 300;
}
Titel: Antw:Neuer Style: f18
Beitrag von: DasQ am 30 Mai 2019, 14:59:31
Zitat von: DasQ am 07 April 2019, 15:15:10
btw. hab ich dafür gleich noch was neues entdeckt was aber browser spezifisch safarie betrifft, und zwar ist dort der + button oben zwischen eingabezeile und fhemsicon nicht fixed und schwimmt beim scrollen wundschön mit. (mal schaun was das genau ist)

Lösung:
also mit fixed schwimmt der button nicht mehr.
#textInput { position: fixed; top:6.5px; left:40px; width:32px; height:32px; }
zeile 15 in f18style.css

jetzt muss ich mal schaun in wieweit sich das wo anders auswirkt.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 30 Mai 2019, 19:16:49
textInput hat in f18style.css im Block ab Zeile 222 gefehlt, das habe ich jetzt hinzugefuegt.
Gemerkt habe ich es jetzt nur beim uebermaessiges nach oben scrollen im Safari.
Titel: Antw:Neuer Style: f18
Beitrag von: choetzu am 30 Mai 2019, 21:34:19
Zitat von: rudolfkoenig am 30 Mai 2019, 09:16:27
Grob vereinfacht ist <pre> "Terminal-Ausgabe", bei dir scheint der Font fuer <pre> proportional zu sein, deswegen schaut es "scheps" aus.
In meiner unmodifizierten f18 ist die Ausgabe mAn OK, font-family ist monospace.

bei mir sieht es auch mit font-family "monospace" ziemlich "scheps" aus...  naja, irgendwo muss der Uebeltäter sitzen.. Da ich z.Z. mein System ziemlich stark überwache (Sonos eiert rum), schau ich regelmässig auf Apptime...

EDIT: und im übrigen auch, wenn ich gar kein additional CSS mache... komisch..
Titel: Antw:Neuer Style: f18
Beitrag von: willib am 14 Juni 2019, 13:39:45
Ich bin nicht sicher ob das an f18 liegt.
Ich bekomme wenn ich auf einem meiner mobilen Geräte unter Chrome in den def editor tippe sehr häufig folgende Meldung.
Titel: Antw:Neuer Style: f18
Beitrag von: xanker am 25 Juli 2019, 19:13:40
Zitat von: rudolfkoenig am 07 Januar 2018, 14:51:18
- im commandref werden die Farben nicht angewendet
Das liegt daran, dass beim Commandref die JS Dateien nicht geladen werden. Könnte man das noch ins FHEMWEB einbauen? Bräuchte ich nämlich auch für meinen Style.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 27 Juli 2019, 12:12:49
Dass es daran liegt, ist offensichtlich, und auch f18 wuerde den Hintergrund gerne setzen, der Aufwand war mir aber bisher nicht Wert.

Bei einer Anpassung muss man bedenken:
- commandref.html und commandref_modular sind fuer FHEMWEB "normale" Dateien, die per streaming ausgeliefert werden.
- der Code muss auch fuer die statische Varianten (fhem.de/commandref.html) und fuer Styles ohne .js funktionieren.
Titel: Antw:Neuer Style: f18
Beitrag von: xanker am 27 Juli 2019, 19:58:12
Zitat von: rudolfkoenig am 27 Juli 2019, 12:12:49
Dass es daran liegt, ist offensichtlich, und auch f18 wuerde den Hintergrund gerne setzen, der Aufwand war mir aber bisher nicht Wert.

Bei einer Anpassung muss man bedenken:
- commandref.html und commandref_modular sind fuer FHEMWEB "normale" Dateien, die per streaming ausgeliefert werden.
- der Code muss auch fuer die statische Varianten (fhem.de/commandref.html) und fuer Styles ohne .js funktionieren.
Danke für die Antwort, ich kann auch so damit leben, da ich die lokale commandref eh nie nutze :)
Titel: Antw:Neuer Style: f18
Beitrag von: Criz am 02 Dezember 2019, 20:58:41
Kann ich f18 so einstellen, dass auf dem Smartphone im Portrait alle "Knöpfe" zu sehen sind? Z.Zt. sehe ich nur den STATE.
STATE On Off sehe ich nur im Landscape.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 02 Dezember 2019, 21:13:38
Ja, es gibt ein FHEMWEB Attribut dafuer.
Titel: Antw:Neuer Style: f18
Beitrag von: kroonen am 02 Mai 2020, 22:20:01
Hi

I don't see a possible FHEMWEB attribute for portrait mode, only landscape??


smallscreenCommands
If set to 1, commands, slider and dropdown menues will appear in smallscreen landscape mode.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 02 Mai 2020, 22:49:47
ZitatI don't see a possible FHEMWEB attribute for portrait mode, only landscape??
I guess because there is none.
Titel: Antw:Neuer Style: f18
Beitrag von: kroonen am 02 Mai 2020, 22:53:03
Is it possible to create one for f18? More smartphones have bigger screens, so should be nice to have this option, like the flex style

Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 03 Mai 2020, 14:22:47
More or less everything is possible if you are willing to invest enough energy.

I've added a new option for f18 (note: it can be set room specific), but don't blame me if the ouput looks strange.
Titel: Antw:Neuer Style: f18
Beitrag von: LuckyDay am 03 Mai 2020, 15:05:44
Danke Rudi, funktioniert bei mir SEHR gut.
Titel: Antw:Neuer Style: f18
Beitrag von: kroonen am 06 Mai 2020, 11:17:01
Thx, tested and works fine
Titel: Antw:Neuer Style: f18
Beitrag von: kroonen am 06 Mai 2020, 11:32:35
Hi

Little question about it, is it possible to start these on a new row (webcmd) with this option portrait  mode on smallscreens?

regards Richard
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 06 Mai 2020, 11:54:46
Of course, by moving them around by a self-written javascript code.
Titel: Antw:Neuer Style: f18
Beitrag von: kroonen am 06 Mai 2020, 16:18:45
Will you integrate this?

Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 06 Mai 2020, 16:37:15
I have no plans of doing it. I avoided showing these columns until now, as I knew it opens a bag of fleas.
This is why I wrote: "don't blame me if the ouput looks strange."
Titel: Antw:Neuer Style: f18
Beitrag von: DoubleD am 14 Mai 2020, 19:46:24
Hallo Rudi

Bei neuen SVG-Plots fehlen 2 Spalten. DefaultValue,Function
Siehe Screenshot!
Bei bereits vorhandenen sind die Spalten da.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 15 Mai 2020, 10:26:55
ZitatSiehe Screenshot!
Habs angeschaut!!!

Ich gehe davon aus, dass es kein f18 Problem ist (und damit ist die Meldung hier voellig fehlplatziert), und vermutlich auch kein SVG Problem, sondern etwas mit einer speziellen DB-Einstellung zu tun hat oder wie man das SVG fuer DbLog angelegt hat, aber dazu fehlen mir jegliche Informationen.

Ich kann auch ein Screenshot nach einem neu angelegten SVG zeigen, wo alles ok ist.
Titel: Antw:Neuer Style: f18
Beitrag von: DS_Starter am 15 Mai 2020, 11:00:05
ZitatIch gehe davon aus, dass es kein f18 Problem ist (und damit ist die Meldung hier voellig fehlplatziert), und vermutlich auch kein SVG Problem, sondern etwas mit einer speziellen DB-Einstellung zu tun hat oder wie man das SVG fuer DbLog angelegt hat
Ja ist hier falsch und kein f18 Problem.

@DoubleD -> Attribut DbLogType in DbLog ist der Punkt (commandRef) -> ggf. neue Meldung aufmachen wenn unklar

VG
Titel: Antw:Neuer Style: f18
Beitrag von: mumpitzstuff am 23 Mai 2020, 17:16:59
Nachdem ich mall testweise den Style von dark auf den neuen f18 geändert habe, sieht alles irgendwie hässlich aus.
Alles was ich bisher gemacht habe, ist das ich die Farbe der Links auf grau umgestellt habe. Am meisten stören mich 2 Dinge:

1.) Bei allen Links wird die Schrift größer dargestellt als der Rest. (rot markiert)
2.) Bei einigen Dingen gabs im alten darkmode Buttons, die aber jetzt verschwunden sind. Ich muss jetzt schlicht erahnen wohin ich klicken muss bzw. Kann, außer ich ändere die Farbe der Links (gelb markiert)

Kann ich beides irgendwie ändern?
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 23 Mai 2020, 17:34:55
1. Es tut mir leid, dass Grossbuchstaben groesser sind als Kleinbuchstaben, vermutlich existieren Fonts, die dieses grundlegende Problem beheben. Einen anderen Font kann man z.Bsp. ueber "Additional CSS" aktivieren.
2. Wenn man die Linkfarbe auf die Textfarbe setzt, dann kann man Links schlecht vom Text unterscheiden. Man kann aber Links auch anderweitig dekorieren, mit eigenen CSS.
Titel: Antw:Neuer Style: f18
Beitrag von: mumpitzstuff am 23 Mai 2020, 19:44:56
1.) Das Großbuchstaben größer sind ist klar, aber darüber hinaus sind auch die Kleinbuchstaben der Links größer als die Kleinbuchstaben von nicht Links bzw. Großbuchstaben von Links größer als Großbuchstaben von nicht Links (sieht man in dem Bild eigentlich). Ich würde schätzen das Links eine etwa 2px größere Schrift verwenden. Ich konnte im CSS aber nicht ausmachen woran das liegen könnte.

Okay ich habs anscheinend gefunden:

body.touch a { font-size: 20px; }
body.touch #menu { font-size: 20px; } /* for the menuTree icon */


Wenn man das in 16px ändert, dann sieht das Gesamtbild gleich um einiges besser aus.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 24 Mai 2020, 11:14:09
Zitatdarüber hinaus sind auch die Kleinbuchstaben der Links größer als die Kleinbuchstaben von nicht Links
Danke fuer die Praezisierung, wenn man die rote Markierung auf dem Screenshot gnoriert, dann sieht man das auch.

Die Vergroesserung der Links ist fuer Geraete mit Touchscreen Absicht, um die Bedienung zu erleichtern.

Titel: Antw:Neuer Style: f18
Beitrag von: mumpitzstuff am 25 Mai 2020, 14:34:17
Ich habe jetzt die folgenden Zeilen aus dem darkmode Style in die additional CSS Sektion des f18 Styles übernommen und jetzt ist das für meine Zwecke im Bereich des Brauchbaren:

body.touch a { font-size: 16px; }
body.touch #menu { font-size: 16px; } /* for the menuTree icon */
td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}
input[type="submit"] { background-color: #353535; border-style:outset; border-width:2px }


Die ersten beiden Zeilen sorgen dafür, das alle Links die selbe Größe wie der Rest der Texte hat. Dadurch wird das Durcheinander von großen und kleinen Schriften auf dem Bildschirm reduziert.
Zeile 3 sorgt dafür das die Zellen innerhalb von Tabellen Ränder bekommen und die Inhalte nicht an den Rändern kleben (z.B. bei ReadinsgGroups oder DOIF uiTables).
Zeile 4 umgibt alle submit Buttons mit einem Rahmen, so das diese einfacher auf dem Bildschirm als solche zu erkennen sind (attr, get, set usw.).
Titel: Antw:Neuer Style: f18
Beitrag von: mumpitzstuff am 25 Mai 2020, 22:52:13
Beim Umschalten zwischen verschiedenen Räumen, insbesondere zu solchen mit vielen Geräten wie z.B. Everything, erscheint die Seite zuerst ziemlich hässlich in grüner Farbe (1-5s je nach Raum) und erscheint danach erst richtig (Firefox unter Windows). Hat dafür jemand eine Erklärung?
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 26 Mai 2020, 09:47:05
Die durchsichtige Variante ist so lange sichtbar, bis das JavaScript seine Arbeit gemacht hat und die Farben gesetzt hat.
Das JavaScript rennt los, falls vom Browser "document loaded" signalisiert bekommt.
Entweder ist der Rechner langsam, der Browser ruft das Programm verspaetet auf oder irgendeine Datei braucht lange zum laden.
Ich vermute Letzteres, und das koennte man in der JavaScript-Console/Netzwerk Tab lokalisieren.
Titel: Antw:Neuer Style: f18
Beitrag von: mumpitzstuff am 26 Mai 2020, 16:47:00
Okay guter Hinweis. Schau ich mir mal genauer an. Ich habe die Uhr im Verdacht, nur die hatte ich vorher im Darkmode auch am laufen und da gibt es den Effekt nicht. Das tritt direkt nur bei f18 auf und ist sofort weg wenn ich den auf den darkmode style umschalte. Rechner ist übrigens ein Ryzen 3600 und der Server ein potentes i5 Notebook, welche beide am Gigabit Ethernet hängen. Daran kann es definitiv nicht liegen.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 26 Mai 2020, 17:01:48
Darkmode kommt fuers Styling ohne javascript aus, dafuer sind alle Einstellungen statisch.
Titel: Antw:Neuer Style: f18
Beitrag von: mumpitzstuff am 18 Juni 2020, 01:57:13
Hat leider etwas gedauert...

GEThttp://192.168.178.112:8083/fhem?room=all
[HTTP/1.1 200 OK 486ms]

GEThttps://darksky.net/widget/default/48.8264,9.0658/uk12/de.js?width=100%&height=420&title=Ditzingen&textColor=333333&bgColor=FFFFFF&transparency=false&skyColor=undefined&fontFamily=Default&customFont=&units=uk&htColor=333333&ltColor=C7C7C7&displaySum=yes&displayHeader=yes
[HTTP/2 200 OK 433ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/style.css?v=1592434437
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery-ui.min.css
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery.min.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery-ui.min.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/fhemweb.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/f18.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/codemirror/fhem_codemirror.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/doif.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/fhemweb_readingsGroup.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/svg.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/dashboard.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/alarm.js
[HTTP/1.1 200 OK 0ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/dashboard_style.css
[HTTP/1.1 200 OK 0ms]

Layout-Darstellung wurde erzwungen, bevor die Seite vollständig geladen war. Falls Stylesheet noch nicht geladen sind, kann dies zu einem kurzzeitigen Darstellung des Inhalts ohne Formatierung führen. jquery.min.js:4:29775


Ich sehe bei jedem Reload folgenden Warnhinweis in der Firefox Console, was genau meinem beobachteten Verhalten entspricht. Im Edge Browser passiert genau das selbe, es ist also nicht Browserabhängig.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 18 Juni 2020, 16:55:42
ZitatGEThttps://darksky.net/widget...
[HTTP/2 200 OK 433ms]

=> das hat knapp eine halbe Sekunde gedauert.
Titel: Antw:Neuer Style: f18
Beitrag von: mumpitzstuff am 22 Juni 2020, 02:21:21
Ja das ist richtig. Das ist aber in jedem Raum so, jeweils mehr oder weniger lang. Wenn ich das Problem richtig verstanden habe, versucht der Browser die Seite zu früh anzuzeigen, obwohl noch nicht alles komplett geladen wurde. Mit anderen Worten die Anzeige sollte nicht bereits starten, wenn in diesem Fall das iframe noch nicht geladen ist (was wie gesagt nur in diesem speziellen Raum der Fall ist).

GEThttp://192.168.178.112:8083/fhem?room=RESIDENTS
[HTTP/1.1 200 OK 16ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/dashboard.js
[HTTP/1.1 200 OK 45ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/svg.js
[HTTP/1.1 200 OK 41ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/fhemweb_readingsGroup.js
[HTTP/1.1 200 OK 77ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/doif.js
[HTTP/1.1 200 OK 70ms]

GEThttp://192.168.178.112:8083/fhem/codemirror/fhem_codemirror.js
[HTTP/1.1 200 OK 28ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/f18.js
[HTTP/1.1 200 OK 21ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/fhemweb.js
[HTTP/1.1 200 OK 44ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery-ui.min.js
[HTTP/1.1 200 OK 40ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery.min.js
[HTTP/1.1 200 OK 27ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/jquery-ui.min.css
[HTTP/1.1 200 OK 29ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/style.css?v=1592696383
[HTTP/1.1 200 OK 15ms]

GEThttp://192.168.178.112:8083/fhem/pgm2/dashboard_style.css
[HTTP/1.1 200 OK 4ms]

Layout-Darstellung wurde erzwungen, bevor die Seite vollständig geladen war. Falls Stylesheet noch nicht geladen sind, kann dies zu einem kurzzeitigen Darstellung des Inhalts ohne Formatierung führen. jquery.min.js:4:29775
GEThttp://192.168.178.112:8083/fhem/pgm2/svg.js
[HTTP/1.1 200 OK 6ms]

GEThttp://192.168.178.112:8083/fhem/images/default/icoEverything.png
[HTTP/1.1 200 OK 56ms]

GEThttp://192.168.178.112:8083/fhem/images/default/icoSYSTEM.png
[HTTP/1.1 200 OK 56ms]

GEThttp://192.168.178.112:8083/fhem/images/default/fhemicon.png
[HTTP/1.1 200 OK 2ms]


Die Warnung erscheint immer direkt nachdem dashboard_style.css geladen wurde. Das kann aber auch Zufall sein.
Titel: Antw:Neuer Style: f18
Beitrag von: Porsti am 22 Juni 2020, 10:55:58
Hallo,

habe das erste mal mit einem Hintergrundbild gespielt und dabei ist mir aufgefallen das man in einem Raum mit vielen Geräten an das Ende des Hintergrundbildes scrollen kann.
Könnte mal einstellen das man das Bild wiederholen lässt oder einfach auf "fix" setzten kann?

Danke für diesen Style!!!!

Gruß
Porsti
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 22 Juni 2020, 11:52:59
ZitatKönnte mal einstellen das man das Bild wiederholen lässt oder einfach auf "fix" setzten kann?
Bestimmt, mit irgendeine CSS Anweisung.
Womoeglich hilft auch "Fixed input and menu" (ungetestet).
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 22 Juni 2020, 12:01:22
ZitatWenn ich das Problem richtig verstanden habe, versucht der Browser die Seite zu früh anzuzeigen, obwohl noch nicht alles komplett geladen wurde.
Das ist normal, da es den Eindruck erweckt, dass der Browser schneller ist, und desegen machen das alle.
Man kann es nur verhindern, indem man die Anzeige erst versteckt, und es per JavaScript sichtbar macht.
Damit will ich aber nicht anfangen, da nicht alle Styles javascript verwenden, und eine Weile nichts zu sehen ist auch nicht ideal.

Die Warnung ist (wenn ich es richtig verstehe) fuer dieses Problem (falsche Farben) irrelevant.
Titel: Antw:Neuer Style: f18
Beitrag von: DasQ am 07 Juli 2020, 07:37:02
Man könnte einen Spinner einbauen, der signalisiert, etwas passiert im Hintergrund.
Titel: Antw:Neuer Style: f18
Beitrag von: TomLee am 09 August 2020, 15:00:19
Hallo,

besteht die Möglichkeit die CSS-Anpassungen die hier (https://forum.fhem.de/index.php/topic,113401.msg1076962.html#msg1076962) vorgenommen werden, um die Tabelle im ASC-Device korrekt darzustellen, in f-18 zu übernehmen oder muß ich das weiterhin manuell anpassen ?

Gruß

Thomas
Titel: Antw:Neuer Style: f18
Beitrag von: Damian am 09 August 2020, 16:41:16
Zitat von: TomLee am 09 August 2020, 15:00:19
Hallo,

besteht die Möglichkeit die CSS-Anpassungen die hier (https://forum.fhem.de/index.php/topic,113401.msg1076962.html#msg1076962) vorgenommen werden, um die Tabelle im ASC-Device korrekt darzustellen, in f-18 zu übernehmen oder muß ich das weiterhin manuell anpassen ?

Gruß

Thomas

Diese CSS-Anpassung kann auch kontraproduktiv sein. Sie wirkt sich aus auf alle Tabellen in FHEM. Es ging hier in erster Linie um die Abstände in tabellarischer Darstellung. Die Abstände möchte ich z. B. gar nicht haben, da ich viel mit Icons hantiere und da will ich keinen Platz verschwenden. Wenn man die Abstände der Zeilen oder Spalten haben will, so dann kann man ja einmalig die CSS-Addition wie vorgeschlagen definieren und gut ist. Beim DOIF kann man das sogar für jedes Modul separat definieren.


Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 09 August 2020, 16:45:19
Ich gehe davon aus, dass damit die CSS-Anweisungen aus dem Screenshot im verlinkten Thema gemeint sind.

Die Anweisungen werde ich in dieser Form nicht uebernehmen:
- die Font-Groesse der Links fuer Touch-Displays ist Geschmacksache, und ich praeferiere einfach treffbare Links, d.h. grosse Buchstaben
- padding fuer alle tds zu aendern geht mir zu weit. Ich bin bereit sowas fuer bestimmte Klassen einzubauen,  wie das z.B. bei table.block.wide bereits der Fall ist, dazu brauche ich aber einen genauen CSS-Pfad
- ich habe mit viel Aufwand die Farben konfigurabel gemacht, ich werde sie sicher nicht fest kodieren.

"weiterhin manuell anpassen" klingt nach muehselige Arbeit. Habe ich was uebersehen?
Titel: Antw:Neuer Style: f18
Beitrag von: TomLee am 09 August 2020, 17:02:39
Mir gehts nur um die Tabelle im ASC-Device das die besser dargestellt wird, brauchen tu ich das nicht.
Titel: Antw:Neuer Style: f18
Beitrag von: Damian am 09 August 2020, 20:43:47
Entweder passt Cooltux das CSS für seine Tabellendefiniton an oder es reicht schon:

td {padding-right: 5px;}

in Additional_CSS einzutragen.
Titel: Antw:Neuer Style: f18
Beitrag von: TomLee am 09 August 2020, 20:50:02
ZitatEntweder passt Cooltux das CSS für seine Tabellendefiniton an

Ich denke die Tage gibts ein update vom ASC-Modul  :)

Danke
Titel: Antw:Neuer Style: f18
Beitrag von: wowogiengen am 09 Januar 2021, 11:32:59
Hallo,
habe ich das irgendwo übersehen, oder falsch gesucht?
Ich möchte gerne alle Einstellungen des f18-styles wieder auf Standard setzen, da bei mir in einem Raum die Einstellung der Positionen und Größen der Devices absolut nicht mehr passt...

Viele Grüße
Wolfgang
PS... ich verwende configdb...
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 10 Januar 2021, 12:15:10
Ein Raum zuruecksetzen: unter "Select style" den Knopf neben "Dragging active" setzen, und im kauptten Raum auf dem "Eingeschraenkten haltevebot" Zeichen klicken. danach "Dragging active" wieder ausschalten.

Alles zuruecksetzen: In der FHEMWEB Instanz das Attribut styleData loeschen.
Titel: Antw:Neuer Style: f18
Beitrag von: wowogiengen am 10 Januar 2021, 16:03:27
Hallo Rudi,
danke schön. alles wieder in Ordnung :-)

Schönen Sonntag noch.
Titel: Antw:Neuer Style: f18
Beitrag von: Esjay am 12 Februar 2021, 12:51:14
Hallo zusammen,

ich habe ein Problem, bei dem ich nicht richtig weiß, wo ich ansetzen soll und benötige Hilfe.

Ursprung ist die Folgende Instanz.

defmod TabletWEBF18 FHEMWEB 8089 global
attr TabletWEBF18 Css @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');;\
\
html, body, html * {\
  font-family: 'Roboto';;\
}\
\
@font-face {\
  font-style: normal;;\
  font-weight: 300;;\
}\
\
body, input, select, textarea {\
    font-weight: 400;;\
    font-size: 14px;;\
}\
\
input, textarea {\
    border-style: solid;;\
    border-width: 2px;;\
    border-color: #DDDDDD;;\
    border-radius: 0px;;\
}\
\
input.maininput {\
    border-width: 0px;;\
    height: 20px;;\
    color: #333333;;\
}\
\
input[type="text"] {\
    -webkit-appearance: none;;\
    padding: 2px;;\
}\
\
body.touch a {\
    font-size: 16px;;\
}\
\
#menuBtn {\
    position: absolute;;\
    top: 14px;;\
    left: 10px;;\
    width: 28px;;\
    height: 28px;;\
    filter: brightness(3);;\
}\
\
*:focus {\
    outline: none;;\
}\
\
div.pinHeader {\
    color: white;;\
    height: 18px;;\
    border-top-left-radius: 10px;;\
    border-top-right-radius: 10px;;\
    padding: 5px 8px 5px 8px;;\
}\
\
div.pinHeader a {\
    color: white !important;;\
}\
\
svg:not([fill]):not(.jssvg) {\
    fill: #B0BEC5 !important;;\
    height: 25px;;\
    width: 25px;;\
    padding-right: 10px;;\
}\
\
table.room, table.block.wide, table.fileList {\
    border-top: 0px;;\
    border-bottom: 2px solid #333333;;\
}\
\
table.block.wide {\
    font-weight: 300;;\
}\
\
table.block.wide td > div {\
    padding: 4px;;\
}\
\
td {\
    padding: 0px;;\
}\
\
div#content > table {\
    width: 100%;;\
}\
\
div#content::-webkit-scrollbar {\
    display: none;;\
}\
\
div#menu {\
    width: 200px;;\
}\
\
div#menu::-webkit-scrollbar {\
    display: none;;\
}\
\
div#menu > table, div#content > table {\
    border-collapse: collapse;;\
    width: 100%;;\
}\
\
div#menu > .col_header {\
    fill: #3373a6;;\
    font-size: 14px;;\
}\
\
div#menu > .col_header:before {\
    content: "Menü";;\
}\
\
div#menu tr {\
    border-width: 0px;;\
    background-color: #494949;;\
}\
\
div#menu tr tr:hover {\
    background-color: #3373a6;;\
}\
\
div#menu tr:last-child { \
    border-bottom: none !important;; \
}\
\
.room tr > td {\
    padding: 4px 8px 4px 8px;;\
}\
\
div#menu a {\
    color: #fff ! important;;    \
    padding-left: 5px;;\
    display: block;;\
}\
\
body.touch #menu table.room div {\
    padding: 4px;;\
}\
\
.slider {\
    background-color: #DDDDDD;;\
    border-radius: 5px;;\
    margin: 30px 0px 10px 0px;;\
    height: 4px;;\
}\
\
.colorpicker_bri .slider {\
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;;\
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;;\
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;;\
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;;\
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;;\
}\
\
.handle {\
    font-size: 13px;;\
    color: white !important;;\
    position: relative;;\
    width: 45px;;\
    height: 20px;;\
    padding: 0px;;\
    background: #3373a6;;\
    border-radius: 8px;;\
    border-width: 0px;;\
    bottom: 32px;;\
}\
\
.handle:before {\
    content: '';;\
    position: absolute;;\
    border-style: solid;;\
    border-width: 5px 5px 0;;\
    border-color: #CCCCCC transparent;;\
    display: block;;\
    width: 0;;\
    bottom: -4px;;\
    left: 17px;;\
}\
\
.handle:after {\
    content: '';;\
    position: absolute;;\
    border-style: solid;;\
    border-width: 8px;;\
    border-radius: 8px;;\
    border-color: #3373a6;;\
    box-shadow: 0px 0px 0px 2px white;;\
    display: block;;\
    width: 0;;\
    bottom: -23px;;\
    left: 14px;;\
}\
\
.sysmon table tr td {\
    padding: 2px;;\
}\
\
.makeSelect form {\
    padding: 5px;;\
    display: flex;;\
    align-items: center;;\
}\
\
.makeSelect {\
    display: flex;;\
    float: left;;\
    /* clear: left;; */\
    height: 35px;;\
    background: #333333;;\
    width: 100%;;\
}\
\
.get, .set, .attr {\
    margin-bottom: 0px;;\
}\
\
.downText {\
    margin-top: 0px;;\
}\
\
input[type="text"] {\
    color: #060606;;\
}\
\
.textField_widget input {\
    border: 0px;;\
}\
\
input.multiple_widget {\
   border: 0px;;\
}\
\
div#devSpecHelp {\
    background: #333333;;\
    width: 100%;;\
    padding-top: 5px;;\
    margin-bottom: 0px;;\
}\
\
.SVGplot * {\
    padding-top: 5px;;\
}\
\
.border {\
    stroke: #fff !important;;\
    fill: #333333 !important;;\
}\
input#md_freeText {\
    color: #000000;;\
}\
\
.room div:hover svg path {\
    fill: #FFFFFF;;\
}\
\
.roomBlock3 div, .roomBlock5 div {\
  height: 30px;;\
  text-transform: uppercase;;\
  font-weight: 300;;\
  line-height: 30px;;\
  overflow: hidden;;\
}\
\
.roomBlock1 div, .roomBlock2 div, .roomBlock4 div {\
  height: 25px;;\
  text-transform: uppercase;;\
  font-weight: 300;;\
  line-height: 25px;;\
  overflow: hidden;;\
  display: flex;;\
}\
\
canvas.flot-base {\
    width: 100% !important;;\
}\
\
.panel-title {\
    -webkit-box-pack: left !important;;\
    -ms-flex-pack: left !important;;\
    justify-content: left !important;;\
    padding: 4px !important;;\
}\
\
input.maininput {\
    border-radius: 10px;;\
    border: 1px solid #000000;;\
}\
\
table.block.wide.readings.wrapcolumns td:nth-last-child(1) {\
    width: 200px;;\
    text-align: right;;\
    padding-right: 4px;;\
}\
\
.dval a {\
    color: #a6a033 !important;;\
}\
\
table.block.wide.internals.wrapcolumns a {\
    color: #a6a033 !important;;\
}\
\
a#DEFa {\
    padding: 4px;;\
}
attr TabletWEBF18 DbLogExclude .*
attr TabletWEBF18 defaultRoom Home
attr TabletWEBF18 hiddengroup Test
attr TabletWEBF18 hiddenroom AlarmRoom,Alarm System,Alarm,Batterieübersicht,Geräte->.*,System,Unsorted,Waiting Room,harmony,Everything,Logfile,Commandref,Remote doc,Edit files,Event monitor
attr TabletWEBF18 hiddenroomRegexp (Geräte|System).*
attr TabletWEBF18 room Home
attr TabletWEBF18 roomIcons Status:status_available Home:control_building_empty Flur:scene_hall Arbeitszimmer:scene_office Garten:scene_garden GästeWlan:it_wifi Heizung:sani_heating Küche:scene_dinner Schlafzimmer:scene_sleeping Spielzimmer:scene_workshop Wohnzimmer:scene_livingroom
attr TabletWEBF18 stylesheetPrefix f18

setstate TabletWEBF18 2021-02-12 10:21:01 state Initialized



Das ist eine Standard F18 mit erweiterter CSS, welche von hier stammt. https://forum.fhem.de/index.php/topic,84760.15.html

Zitat von: devil77 am 09 Oktober 2018, 13:41:45
Hab auch etwas weiter gemacht und bissel mit Farben variiert für Kontrast usw.

Der css Teil zum Theme
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

html, body, html * {
  font-family: 'Roboto';
}

@font-face {
  font-style: normal;
  font-weight: 300;
}

body, input, select, textarea {
    font-weight: 400;
    font-size: 14px;
}

input, textarea {
    border-style: solid;
    border-width: 2px;
    border-color: #DDDDDD;
    border-radius: 0px;
}

input.maininput {
    border-width: 0px;
    height: 20px;
    color: #333333;
}

input[type="text"] {
    -webkit-appearance: none;
    padding: 2px;
}

body.touch a {
    font-size: 16px;
}

#menuBtn {
    position: absolute;
    top: 14px;
    left: 10px;
    width: 28px;
    height: 28px;
    filter: brightness(3);
}

*:focus {
    outline: none;
}

div.pinHeader {
    color: white;
    height: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 5px 8px 5px 8px;
}

div.pinHeader a {
    color: white !important;
}

svg:not([fill]):not(.jssvg) {
    fill: #B0BEC5 !important;
    height: 25px;
    width: 25px;
    padding-right: 10px;
}

table.room, table.block.wide, table.fileList {
    border-top: 0px;
    border-bottom: 2px solid #333333;
}

table.block.wide {
    font-weight: 300;
}

table.block.wide td > div {
    padding: 4px;
}

td {
    padding: 0px;
}

div#content > table {
    width: 100%;
}

div#content::-webkit-scrollbar {
    display: none;
}

div#menu {
    width: 200px;
}

div#menu::-webkit-scrollbar {
    display: none;
}

div#menu > table, div#content > table {
    border-collapse: collapse;
    width: 100%;
}

div#menu > .col_header {
    fill: #3373a6;
    font-size: 14px;
}

div#menu > .col_header:before {
    content: "Menü";
}

div#menu tr {
    border-width: 0px;
    background-color: #494949;
}

div#menu tr tr:hover {
    background-color: #3373a6;
}

div#menu tr:last-child {
    border-bottom: none !important;
}

.room tr > td {
    padding: 4px 8px 4px 8px;
}

div#menu a {
    color: #fff ! important;   
    padding-left: 5px;
    display: block;
}

body.touch #menu table.room div {
    padding: 4px;
}

.slider {
    background-color: #DDDDDD;
    border-radius: 5px;
    margin: 30px 0px 10px 0px;
    height: 4px;
}

.colorpicker_bri .slider {
    background-image: -webkit-linear-gradient(left, rgb( 150, 150 ,150), rgb(255,255,255) ) !important;
    background-image: -moz-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -ms-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: -o-linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
    background-image: linear-gradient(left, rgb( 0, 0 ,0), rgb(255,255,255) ) !important;
}

.handle {
    font-size: 13px;
    color: white !important;
    position: relative;
    width: 45px;
    height: 20px;
    padding: 0px;
    background: #3373a6;
    border-radius: 8px;
    border-width: 0px;
    bottom: 32px;
}

.handle:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #CCCCCC transparent;
    display: block;
    width: 0;
    bottom: -4px;
    left: 17px;
}

.handle:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px;
    border-radius: 8px;
    border-color: #3373a6;
    box-shadow: 0px 0px 0px 2px white;
    display: block;
    width: 0;
    bottom: -23px;
    left: 14px;
}

.sysmon table tr td {
    padding: 2px;
}

.makeSelect form {
    padding: 5px;
    display: flex;
    align-items: center;
}

.makeSelect {
    display: flex;
    float: left;
    /* clear: left; */
    height: 35px;
    background: #333333;
    width: 100%;
}

.get, .set, .attr {
    margin-bottom: 0px;
}

.downText {
    margin-top: 0px;
}

input[type="text"] {
    color: #060606;
}

.textField_widget input {
    border: 0px;
}

input.multiple_widget {
   border: 0px;
}

div#devSpecHelp {
    background: #333333;
    width: 100%;
    padding-top: 5px;
    margin-bottom: 0px;
}

.SVGplot * {
    padding-top: 5px;
}

.border {
    stroke: #fff !important;
    fill: #333333 !important;
}
input#md_freeText {
    color: #000000;
}

.room div:hover svg path {
    fill: #FFFFFF;
}

.roomBlock3 div, .roomBlock5 div {
  height: 30px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 30px;
  overflow: hidden;
}

.roomBlock1 div, .roomBlock2 div, .roomBlock4 div {
  height: 25px;
  text-transform: uppercase;
  font-weight: 300;
  line-height: 25px;
  overflow: hidden;
  display: flex;
}

canvas.flot-base {
    width: 100% !important;
}

.panel-title {
    -webkit-box-pack: left !important;
    -ms-flex-pack: left !important;
    justify-content: left !important;
    padding: 4px !important;
}

input.maininput {
    border-radius: 10px;
    border: 1px solid #000000;
}

table.block.wide.readings.wrapcolumns td:nth-last-child(1) {
    width: 200px;
    text-align: right;
    padding-right: 4px;
}

.dval a {
    color: #a6a033 !important;
}

table.block.wide.internals.wrapcolumns a {
    color: #a6a033 !important;
}

a#DEFa {
    padding: 4px;
}


Nun zum Problem:
Sobald ich Dragging Active einschalte, zerhaut es mir die Darstellung der Gruppe.Abhilfe schafft dann nur das betätigen des eingeschränkten Halteverbotszeichens.
Ab hier beginnt dann der Teufelskreis.

Ich habe das Ganze mal als Bilderstrecke angehängt.

Der Browser welchen ich einsetze spielt dabei auch keine Rolle. Egal ob Safari,Firefox oder Fully auf dem Tablet.

Kann ich noch irgendwelche Infos liefern, oder kann sich schon jemand vorstellen wo es hängt?

LG
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 12 Februar 2021, 17:46:19
Danke fuer den Hinweis, habs gefixt.

Die Ursache ist, dass die Titelzeile ein Padding hat, der Inhalt nicht, und dieses Padding wurde beim Resize nicht beachtet.
In der "nicht tiefergelegten" Ansicht ist das Problem auch sichtbar, bloss nicht so prominent.
Titel: Antw:Neuer Style: f18
Beitrag von: Esjay am 13 Februar 2021, 22:34:28
Hallo Rudi,

vielen Dank für die schnelle Umsetzung. Somit kann ich an der Tablet Visu weiter arbeiten.
Sollte eines Tages Zeit vorhanden sein, würde ich dafür abstimmen Dragging active auf das Menü zu erweitern.

LG
Titel: Antw:Neuer Style: f18
Beitrag von: kpwg am 21 März 2021, 14:11:20
Ich habe mich heute mit F18 ein wenig auseinandergesetzt und bin begeistert. Schnelle und einfache Ergebnisse, enormer WAF  8)

Dennoch ist mir ein Problem aufgefallen: Ich arbeite bei WEB mit defaultRoom, erhalte also beim Aufruf der IP (mit Port natürlich) einen benannten Room, in welchem ich starte. Rufe ich die Räume links im Menü gezielt auf, ist alles perfekt, rufe ich jedoch die Startseite mit Klick auf das Logo auf, ist die Zuordnung der Gruppen und verschobenen Elemente dahin.
Ich habe es jetzt aus zwei Systemen mit verschiedenen Browsern und Rechnern getestet und kann es gut nachvollziehen.

Was mache ich falsch?
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 21 März 2021, 20:03:56
Danke fuer den Hinweis, habs gefixt.
Titel: Antw:Neuer Style: f18
Beitrag von: kpwg am 22 März 2021, 16:27:36
Kurze Rückmeldung: Funktioniert einwandfrei, Besten Dank!
Titel: Gruppenüberschriften/Kopfzeile versetzt
Beitrag von: Invers am 07 Januar 2022, 14:18:30
Kann man den Versatz, wie im Screenshot zu sehen, entfernen?
Falls ja, was genau muss ich bei add. css eingeben/eintragen?
Diese Versatz ist auch ohne die im Bild dargestellte Styleänderung vorhanden.

Danke.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 07 Januar 2022, 14:44:35
Den Versatz sehe ich in meiner Version nicht.
Da bei mir die Raender nicht abgerundet sind, vermute ich, dass es mit dieser Erweiterung zusammenhaengt.
Titel: Antw:Neuer Style: f18
Beitrag von: Invers am 07 Januar 2022, 14:52:16
Leider nicht, schrieb ich ja. Hier mal ohne die css-Erweiterungen. Datei ist also leer.
Titel: Antw:Neuer Style: f18
Beitrag von: Invers am 07 Januar 2022, 14:56:59
Ist bei mir nur in den Räumen so, Listen, wie z.B. Datei editieren edit Files ist es nicht so. Da sieht es ordentlich aus.
Titel: Antw:Neuer Style: f18
Beitrag von: Invers am 07 Januar 2022, 15:08:27
Ich habe mal das Attribut styleData gelöscht. Dann ist die Darstellung in Ordnung. Natürlich nur der Versatz.
Der Überltäter muss sich also in diesem Attribut befinden.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 07 Januar 2022, 15:13:08
ZitatDer Überltäter muss sich also in diesem Attribut befinden.
Jetzt musst Du mir nur noch zeigen, wie ich das Problem selbst herstellen kann :)
Titel: Antw:Neuer Style: f18
Beitrag von: Invers am 07 Januar 2022, 15:31:01
Ich habe mal diesen Teil einfach gelöscht, danach sieht es gut aus. Dann habe ich wieder die Breite und die Position geändert. Sieht immernoch gut aus.
Kann man in dem gezeigten Block was erkennen? Vielleicht sollte ich alle Blocke dieser Art löschen und neu positionieren?:

  "Pos.Room_Amazon_grp_alexa": {
   "left": 320,
   "top": 20,
   "width": 280,
   "height": 80.333334,
   "oTop": 23,
   "oLeft": 10
  },
Titel: Antw:Neuer Style: f18
Beitrag von: Invers am 07 Januar 2022, 15:40:00
So, ich hatte ja auch andere Probleme mit der Datstellung. Ich habe nun beschlossen, das Attribut erneut zu befüllen und vorher - bis auf f18 Spezial - alles zu löschen.
Danke für die Hilfe, ich glaube, das ist so am effektivsten.
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 07 Januar 2022, 15:41:41
Die Elemente wurden per drag verschoben und/oder skaliert.
oTop+oLeft speichert den Versatz des Inhalts zum Titel.
oLeft:10 bedeutet, dass der untere Teil 10 Pixel nach rechts verschoben werden soll.

Mir ist nicht ganz klar, wie dieser Versatz zustandegekommen ist.
Titel: Antw:Neuer Style: f18
Beitrag von: Invers am 07 Januar 2022, 16:07:40
Das weiss ich auch leider nicht. Aber dann brauche ich ja nur die beiden Zeilen jeweils zu löschen. Das hilft. Danke.Ich probier mal.

EDIT: Löschen ist ein blöder Plan. Habe nun oLeft auf 0 gesetzt. Funktioniert super. Problem gelöst. Danke.
Titel: Antw:Neuer Style: f18
Beitrag von: Danny am 15 Februar 2022, 20:12:12
Beim f18 style werden überlange Zeilen nicht umgebrochen, dh. um alle Einträge zu sehen, muß man sehr weit nach rechts - hin und her - scrollen, s im Anhang 'WideScreen, zB bei FileLogs.
Im iOS12 style wird das umgebrochen, alles schön auf einer Breite zu sehen (iOS12 im Anhang).
Ist das so gewollt ?
Kann ich den Style nach meinem Gusto anpassen ? Wird jedoch beim nächsten update dann überschrieben ?


Titel: Antw:Neuer Style: f18
Beitrag von: Benni am 15 Februar 2022, 20:18:54
Zitat von: Danny am 15 Februar 2022, 20:12:12
Beim f18 style werden überlange Zeilen nicht umgebrochen

Schau dir mal den Thread an:

https://forum.fhem.de/index.php/topic,124556.msg1193621.html#msg1193621

gb#
Titel: Antw:Neuer Style: f18
Beitrag von: Danny am 15 Februar 2022, 20:43:39
Auf 'window' als Such-Begriff bin ich jetzt überhaupt nicht gekommen  :-\
Aber vielen Dank für den Hinweis ... war mir neu, daß man da auch über attribute styles modifizieren kann, interessant.

Titel: Antw:Neuer Style: f18
Beitrag von: Tobias am 01 März 2023, 09:49:01
Hi,
ich versuche über dem f18 Style in der Detailansicht ausschließlich das DevsStateIcon anzuzeigen. Mehr nicht. Keine Rahmen, Header, Menü oder sonst etwas.
Gibts es da irgendeine schlaue Methode das so umzusetzen?
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 01 März 2023, 09:53:24
Dafuer muss man CSS bemuehen.
Titel: Antw:Neuer Style: f18
Beitrag von: Tobias am 01 März 2023, 10:17:23
danke für die info.
für die div id "content" funkjtioniert das, aber das Menu, das Logo und das "Plus" ZEichen bekomme ich nicht weg, trotz angabe der div-id´s
#menuScrollArea, #menu, #menuScrollArea, #hdr, #logo, #content, .room {
    display: none;
}
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 01 März 2023, 10:33:36
Zitataber das Menu, das Logo und das "Plus" ZEichen bekomme ich nicht weg,
Das muss irgendwie gehen, genau diese Elemente kann man doch auch bequem per Haken in den Einstellungen ausblenden.
Titel: Antw:Neuer Style: f18
Beitrag von: Tobias am 01 März 2023, 13:29:45
vielen Dank für die wertvollen Hinweise.
Ich habe es jetzt fast hinbekommen. Es ist alles ausgeblendet. Das Menu auch. Leider ist zwar das Menü ausgeblendet, der Platz des Menüs ist aber weiterhin da.
Bekomme ich diesen Raum ebenfalls noch frei?

[code]define WEB_Dashboard2 FHEMWEB 8084 global
attr WEB_Dashboard2 Css #ddtable, #detLink, .makeTable, .motd {\
    display: none;;\
}\
\
#content {\
    background-color:rgba(0,0,0,0);;\
}
attr WEB_Dashboard2 DbLogExclude .*
attr WEB_Dashboard2 comment http://192.168.10.10:8084/dashboard2?cmd=style%20select#
attr WEB_Dashboard2 editConfig 0
attr WEB_Dashboard2 endPlotNow 1
attr WEB_Dashboard2 endPlotToday 1
attr WEB_Dashboard2 forbiddenroom input,save
attr WEB_Dashboard2 hiddenroom devSpecHelp, forumCopy, rawDef, style iconFor, style showDSI, delete
attr WEB_Dashboard2 longpoll 1
attr WEB_Dashboard2 plotsize 560,125
attr WEB_Dashboard2 styleData {\
"f18": {\
  "Pinned.menu": "true",\
  "hidePin": "true",\
  "cols.bg": "444444",\
  "cols.fg": "f8f8e0",\
  "cols.link": "278727",\
  "cols.evenrow": "444444",\
  "cols.oddrow": "444444",\
  "cols.header": "E0E0C8",\
  "cols.menu": "D7FFFF",\
  "cols.sel": "A0FFFF",\
  "cols.inpBack": "FFFFFF",\
  "savePinChanges": true,\
  "rightMenu": false,\
  "hideMenu": true,\
  "widePortrait": false,\
  "fixedInput": false,\
  "hideLogo": true,\
  "hideInput": true,\
  "hideTextInput": true,\
  "showDragger": false,\
  "Pos.style_list_Styles": {\
   "left": 0,\
   "top": 0,\
   "width": 248,\
   "height": 361.233334,\
   "oTop": 20,\
   "oLeft": 0\
  },\
  "Pos.style_list_f18_special": {\
   "left": 0,\
   "top": 382.566650390625,\
   "width": 248,\
   "height": 134.233334,\
   "oTop": 40,\
   "oLeft": 0\
  },\
  "Pos.style_list_f18__Room_specific": {\
   "left": 0,\
   "top": 558.5833129882812,\
   "width": 248,\
   "height": 549.233334,\
   "oTop": 40,\
   "oLeft": 0\
  },\
  "snapToGrid": false\
}\
}
attr WEB_Dashboard2 stylesheetPrefix f18
attr WEB_Dashboard2 webname dashboard2
#   BYTES_READ 853086
#   BYTES_WRITTEN 1229357638
#   CFGFN     
#   CONNECTS   1296
#   CSRFTOKEN  csrf_272378653236606
#   DEF        8084 global
#   FD         31
#   FUUID      63ff0cde-f33f-99a0-b57d-d75829ffcb4002e0
#   NAME       WEB_Dashboard2
#   NR         10126
#   NTFY_ORDER 50-WEB_Dashboard2
#   PORT       8084
#   STATE      Initialized
#   TYPE       FHEMWEB
#   .attraggr:
#   .attrminint:
#   READINGS:
#     2023-03-01 09:29:18   state           Initialized
#
setstate WEB_Dashboard2 2023-03-01 09:29:18 state Initialized

[/code]
Titel: Antw:Neuer Style: f18
Beitrag von: rudolfkoenig am 01 März 2023, 13:46:48
Mit CSS kann man die Elemente auch verschieben und vergroessern.
In diesem Fall geht vmtl. um das left Attribut bei #content.
Titel: Antw:Neuer Style: f18
Beitrag von: Tobias am 01 März 2023, 14:07:57
Ja,
im Quelltext sieht es so aus:
<div id='content' >
Im Inspector sieht es so aus:
<div id="content" class="slim animated" style="left: 138px; top: 10px;">

bedeutet, durch irgendetwas und irgendwo wurden die positionsangaben gesetzt. Und diese finde ich nicht damit ich sie anpassen kann. :(

Ich kann es auch versuchen im CSS vom f18 zu setzen, aber das hat leider keinen Effekt
#content {
    background-color:rgba(0,0,0,0);
    position: absolute;
    left: 0px;
    top: 0px;
}
Titel: Antw:Neuer Style: f18
Beitrag von: Tobias am 01 März 2023, 14:29:58
Habs hinbekommen, das kleine aber feine !important hat gefehlt.
Damit wird jetzt alles korrekt ausgeblendet und angezeigt und ich kann die DOIF Charts sauber im FTUI einbinden :)

#ddtable, #detLink, .makeTable, .motd {
    display: none;
}

#content {
    background-color:rgba(0,0,0,0);
    left: 0px !important;
    top: 0px !important;
}
Titel: Antw:Neuer Style: f18
Beitrag von: Damian am 03 März 2023, 19:43:45
Wäre es nicht einfacher dein Chart im Status anzuzeigen (Attribut ui_State)? Den kannst du bestimmt (ohne Devicenamen) auch im FTUI darstellen
Titel: Aw: Neuer Style: f18
Beitrag von: kennymc.c am 26 März 2023, 15:23:26
Mir ist aufgefallen, dass auf schmaleren Bildschirmen wie denen von Smartphones alle columns trotzdem nebeneinander statt untereinander dargestellt werden, obwohl die horizontale Auflösung dafür nicht ausreicht. Das macht vieles unlesbar. Gibt es dafür eine Lösung? Wrap columns on small screen und Show all columns in portrait mode ändert bei mir nicht wirklich etwas. Hab leider nicht wirklich Ahnung von CSS, aber da es schon im Default f18 Style nicht funktioniert, frage ich mal hier nach.
Titel: Aw: Neuer Style: f18
Beitrag von: DasQ am 27 März 2023, 16:34:25
kann ich bestätigen, schaut komisch aus. ;D

getest auf iphone7pro in firefox
Titel: Aw: Neuer Style: f18
Beitrag von: DasQ am 28 März 2023, 11:20:23
also eben mir mal den effekt am PC angeschaut und habs mit einem mediaquery eintag gefixt ähhh flext siehe screenshot
Titel: Aw: Neuer Style: f18
Beitrag von: kennymc.c am 28 März 2023, 18:01:08
Sieht bei mir genauso aus wie vorher, wenn ich das bei Additional Css hinzufüge.
@media screen and (max-width: 480px) and (orientation: portrait)
#content > table {
    width: 100%;
    table-layout: flex;
    }
Titel: Aw: Neuer Style: f18
Beitrag von: DasQ am 29 März 2023, 10:43:35
da funktionierts auch nicht drin. (die wird vermutlich per selktor überschrieben)
mußt hard in die f18style.css einbaun.

habs jetzt mal probehalben so gemacht. auf safari, firefox und chrome auf nem iphone7pro siehe screenshots (hab aber kein plan, ob das bei der f18 config, dann so aussehen soll. aber jetzt kann man es lesen.)
Titel: Aw: Neuer Style: f18
Beitrag von: kennymc.c am 30 März 2023, 22:24:50
Habs mal getestet und von fixed auf flex gestellt aber damit werden die columns nur nicht mehr zusammengequetscht. Dafür muss man horizontal scrollen was ja nicht der Sinn ist. Sieht bei mir nicht wie auf den Screenshots aus. Ab mindestens 3 Spalten wird es auch unübersichtlich auf kleinen Displays. Da wäre es besser columns ganz zu ignorieren.
Titel: Aw: Neuer Style: f18
Beitrag von: DasQ am 31 März 2023, 03:48:44
Die werden nicht zusammengequetscht, sondern überlappen sich nur.

Problem ist, das Tabellen immer Probleme machen, sobald sie den viewport sprengen.
Wäre da ein gridsystem dahinter würde das ganz anders interpretiert. Allerdings macht das symantisch oft kein Sinn in Tabellen.

Fakt ist, die beiden Häkchen (oben seccenshot) sind augenblicklich ohne echte Funktion.
Titel: Aw: Neuer Style: f18
Beitrag von: kennymc.c am 01 April 2023, 19:56:39
Ich hab jetzt mit Dragging active eine Ansicht für größere Auflösungen erstellt und nutzte column jetzt nur noch für die Sortierung mit horizontal kleineren Auflösungen. Obwohl ich das nur nur in einem Raum gemacht habe, gab es aber auch verschobene Elemente in andere Räumen. Konnte ich dann über das Verbotsschild zurücksetzten. Trotzdem stehen in styleData noch Daten für anderen Räume mit drin, die ich nie verändert habe.