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

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

Vorheriges Thema - Nächstes Thema

xanker

#210
Zitat von: choetzu am 23 Juli 2019, 13:50:05
Danke. Ich mag die SideBySide funktion nicht, da sie "willkürlich" und nicht schön sortiert die Tabellen nebeneinander platziert. Kann man bestimmt ändern, doch weiss grad nicht wie ;)
Gibt eine schöne neue Funktion: "enableSortableGroups", damit kann man jetzt einfach per Drag'n'Drop die Gruppen/Tabellen sortieren. Geht aber nur bei DeviceGroups, bzw. bei allem wo das group-Attribut gesetzt ist.

Edit: Gab ein Problem, wenn das column-Attribut (wo die Informationen gespeichert werden) noch nicht gesetzt war. Ist jetzt behoben.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

choetzu

Zitat von: xanker am 23 Juli 2019, 15:48:37
also das sieht alles so aus wie es aussehen soll. Ich bin ziemlich ratlos  ???
Tritt das Problem auch beim iPhone mit einem anderen Browser auf?
Schicke mir nochmal den kompletten HTML Code von dem Raum, irgendwo muss da ja was sein...

Also, das komische ist, wenn ich dieses ReadingsGroup Device in einen Raum verschiebe mit anderen ReadingsGroup-Devices, dann wird es schön dargestellt (siehe Bild GEHT). Und wenn ich es mit anderen Devices mische, dann kommt es nicht gut. Anbei auch die HTML codes.. Die sind aber ganz schön lange... Ich hoffe du musst das nicht alles lesen ;)
Das Phänomen tritt auf meinem iPhone8 und bei Safari UND Chrome auf.

Vielleicht ist das einfach ein Schweizerding... in der EU würde es vermutlich funktionieren ;)


Raspi3, EnOcean, Zwave, Homematic

choetzu

Zitat von: xanker am 23 Juli 2019, 14:22:03
Echt interessant was es alles für Effekte gibt...tritt bei mir auch auf...Ich schaue mal wo der Fehler ist.

Edit: Ist nur bei plotEmbed 0 aufgetreten...funktioniert jetzt wie es soll
Das geht leider auch noch nicht! Hab plotfork 1 und 0 getestet. Sorry.
Raspi3, EnOcean, Zwave, Homematic

schwatter

#213
Zitat von: xanker am 23 Juli 2019, 14:22:03
Echt interessant was es alles für Effekte gibt...tritt bei mir auch auf...Ich schaue mal wo der Fehler ist.

Edit: Ist nur bei plotEmbed 0 aufgetreten...funktioniert jetzt wie es soll

Ich habe auch oder immer noch das Problem, mit den abgeschnittenen Plots. Früher wurden sie runter skaliert.
Jetzt wie bei @choetzu, halb abgeschnitten und seitlich nicht scrollbar.


Internals:
   CONNECTS   76
   DEF        8085 global
   FD         7
   FUUID      5c463138-f33f-86cf-2310-794f554b7377e702
   FVERSION   01_FHEMWEB.pm:0.198780/2019-07-21
   NAME       WEBtablet
   NR         10
   NTFY_ORDER 50-WEBtablet
   PORT       8085
   STATE      Initialized
   TYPE       FHEMWEB
   READINGS:
     2019-07-23 15:07:11   state           Initialized
Attributes:
   Css        1
   confirmDelete 1
   csrfToken  none
   iconPath   fhemSVG:openautomation:default
   longpoll   1
   longpollSVG 1
   plotfork   1
   room       08.System
   styleData  {
"f18": {
  "Pinned.menu": false,
  "hidePin": false,
  "hideLogo": true,
  "savePinChanges": false,
  "cols.bg": "FFFFE7",
  "cols.fg": "000000",
  "cols.link": "278727",
  "cols.evenrow": "F8F8E0",
  "cols.oddrow": "F0F0D8",
  "cols.header": "E0E0C8",
  "cols.menu": "D7FFFF",
  "cols.sel": "A0FFFF",
  "cols.inpBack": "FFFFFF",
  "showDragger": false,
  "rightMenu": false,
  "Pos.SVG_FileLog_Zentralheizung_1": {
   "top": 45,
   "left": 17
  },
  "Pos.SVG_FileLog_ThermoHygro_KU_1": {
   "top": 38,
   "left": -7
  },
  "Pos.Room_1_2e_20Heizung_grp_CUL_HM": {
   "left": 0,
   "top": 0,
   "width": 1470,
   "height": 143,
   "oTop": 34,
   "oLeft": 3
  },
  "Pos.Room_1_2e_20Heizung_grp_THSensor": {
   "left": 0,
   "top": 180,
   "width": 1470,
   "height": 35,
   "oTop": 54,
   "oLeft": 3
  },
  "Pos.Room_1. Heizung_svgZoomControl": {
   "left": 0,
   "top": 293,
   "width": 1476,
   "height": 0,
   "oTop": 0,
   "oLeft": 0
  },
  "Pos.Room_1. Heizung_SVG_FileLog_Zentralheizung_1": {
   "left": 0,
   "top": 479,
   "width": 1476,
   "height": 164,
   "oTop": -164,
   "oLeft": 0
  },
  "fixedInput": false,
  "Pos.Room_3_2e_20Wohnzimmer_grp_MQTT_DEVICE": {
   "left": 0,
   "top": 351,
   "width": 1470,
   "height": 50,
   "oTop": 54,
   "oLeft": 3
  },
  "wrapcolumns": true,
  "hideInput": true,
  "Pinned.style.list.f18 special": true,
  "snapToGrid": false,
  "Pos.Room_01_2eHeizung_grp_CUL_HM": {
   "left": 0,
   "top": 0,
   "width": 415,
   "height": 113,
   "oTop": 20,
   "oLeft": 0
  },
  "Pos.Room_01_2eHeizung_grp_THSensor": {
   "left": 0,
   "top": 135,
   "width": 415,
   "height": 22,
   "oTop": 40,
   "oLeft": 0
  },
  "Pos.Room_01.Heizung_svgZoomControl": {
   "left": 0,
   "top": 217,
   "width": 1660,
   "height": 0,
   "oTop": 0,
   "oLeft": 0
  },
  "Pos.Room_01.Heizung_SVG_FileLog_Zentralheizung_1": {
   "left": 0,
   "top": 417,
   "width": 1660,
   "height": 164,
   "oTop": -164,
   "oLeft": 0
  },
  "Pos.style_list_Styles": {
   "left": 0,
   "top": 0,
   "width": 257,
   "height": 352,
   "oTop": 20,
   "oLeft": 0
  },
  "Pos.style_list_f18_special": {
   "left": 0,
   "top": 374,
   "width": 257,
   "height": 134,
   "oTop": 40,
   "oLeft": 0
  },
  "Pos.style_list_f18__Room_specific": {
   "left": 0,
   "top": 550,
   "width": 257,
   "height": 457,
   "oTop": 40,
   "oLeft": 0
  }
},
"flex": {
  "title": "fhem",
  "showClock": true,
  "showRebootButton": true,
  "showUpdateButton": true,
  "showUpdateCheckButton": true,
  "showRereadIconsButton": true,
  "myUtilsFileName": "myUtils.pm",
  "showRawInputButton": true,
  "color": {
   "HeaderBG": "#2E5E87",
   "HeaderIcon": "#FFF",
   "HeaderText": "#FFF",
   "HeaderBorder": "#2E5E87",
   "MenuBG": "#000",
   "MenuBorder": "#2E5E87",
   "MenuIcon": "#FFF",
   "MenuRoomIcon": "#FFF",
   "MenuText": "#FFF",
   "MenuHoverLink": "#2E5E87",
   "MainBG": "#EEE",
   "TableHeaderBG": "#2E5E87",
   "TableHeaderText": "#FFF",
   "TableBorder": "#2E5E87",
   "TableOdd": "#EEE",
   "TableEven": "#DDD",
   "TableText": "#000",
   "TableHoverRow": "#AAA",
   "TableHoverLink": "#2E5E87",
   "TableNewEvent": "#F00",
   "TableIcon": "#2E5E87",
   "SetGetAttrBG": "#CCC",
   "SubmitButtonBG": "#2E5E87",
   "SubmitButtonBorder": "#555",
   "SubmitButtonText": "#FFF",
   "WidgetBorder": "#555",
   "WidgetText": "#000",
   "WidgetHighlight": "#2E5E87",
   "LogDate": "#000",
   "LogTime": "#000",
   "LogVerbose0": "#000",
   "LogVerbose1": "#F00",
   "LogVerbose2": "#FFA500",
   "LogVerbose3": "#008000",
   "LogVerbose4": "#1E90FF",
   "LogVerbose5": "#00F",
   "plotBG": "#EEE",
   "plotBorder": "#2E5E87",
   "plotText": "#000",
   "plotGrid": "#555",
   "plotMarker": "#F00",
   "plotLine0": "#F00",
   "plotLine1": "#0F0",
   "plotLine2": "#00F",
   "plotLine3": "#F0F",
   "plotLine4": "#A52A2A",
   "plotLine5": "#000",
   "plotLine6": "#808000",
   "plotLine7": "#808080",
   "plotLine8": "#FF0",
   "plotLinePasted": "#000"
  },
  "colorHeaderBG": "#06A",
  "colorHeaderIcon": "#FFF",
  "colorHeaderText": "#FFF",
  "colorHeaderBorder": "#FFF",
  "colorMenuBG": "#000",
  "colorMenuBorder": "#FFF",
  "colorMenuIcon": "#FFF",
  "colorMenuRoomIcon": "#FFF",
  "colorMenuText": "#FFF",
  "colorMenuHoverLink": "#06A",
  "colorMainBG": "#EEE",
  "colorTableHeaderBG": "#06A",
  "colorTableHeaderText": "#FFF",
  "colorTableBorder": "#000",
  "colorTableOdd": "#EEE",
  "colorTableEven": "#DDD",
  "colorTableText": "#000",
  "colorTableHoverRow": "#AAA",
  "colorTableHoverLink": "#06A",
  "colorTableNewEvent": "#F00",
  "colorTableIcon": "#06A",
  "colorSetGetAttrBG": "#CCC",
  "colorSubmitButtonBG": "#06A",
  "colorSubmitButtonBorder": "#000",
  "colorSubmitButtonText": "#FFF",
  "colorWidgetBorder": "#555",
  "colorWidgetText": "#000",
  "colorWidgetHighlight": "#06A",
  "showSaveButton": true,
  "showRoomDeviceName": true,
  "plotMaxWidth": "100%",
  "showMenuAlways": false,
  "enableCommandHistory": true,
  "enableDeviceSearch": true,
  "plotMinWidth": "250px",
  "showReadingsGroupAsTable": true,
  "hideWebcmdOnSmallScreen": false,
  "colorPreset": {
   "darkOrange": {
    "HeaderBG": "#424242",
    "HeaderIcon": "#FFF",
    "HeaderText": "#FFF",
    "HeaderBorder": "#424242",
    "MenuBG": "#000",
    "MenuBorder": "#424242",
    "MenuIcon": "#ad7c32",
    "MenuRoomIcon": "#ad7c32",
    "MenuText": "#ad7c32",
    "MenuHoverLink": "#424242",
    "MainBG": "#000",
    "TableHeaderBG": "#424242",
    "TableHeaderText": "#FFF",
    "TableBorder": "#424242",
    "TableOdd": "#000",
    "TableEven": "#222222",
    "TableText": "#ad7c32",
    "TableHoverRow": "#333333",
    "TableHoverLink": "#424242",
    "TableNewEvent": "#F00",
    "TableIcon": "#424242",
    "SetGetAttrBG": "#333333",
    "SubmitButtonBG": "#424242",
    "SubmitButtonBorder": "#424242",
    "SubmitButtonText": "#FFF",
    "WidgetBorder": "#424242",
    "WidgetText": "#ad7c32",
    "WidgetHighlight": "#424242",
    "LogDate": "#ad7c32",
    "LogTime": "#ad7c32",
    "LogVerbose0": "#ad7c32",
    "LogVerbose1": "#F00",
    "LogVerbose2": "#FFA500",
    "LogVerbose3": "#0F0",
    "LogVerbose4": "#1E90FF",
    "LogVerbose5": "#00F",
    "plotBG": "#EEE",
    "plotBorder": "#424242",
    "plotText": "#ad7c32",
    "plotGrid": "#555",
    "plotMarker": "#F00",
    "plotLine0": "#F00",
    "plotLine1": "#0F0",
    "plotLine2": "#00F",
    "plotLine3": "#F0F",
    "plotLine4": "#A52A2A",
    "plotLine5": "#000",
    "plotLine6": "#808000",
    "plotLine7": "#808080",
    "plotLine8": "#FF0",
    "plotLinePasted": "#000"
   }
  },
  "scalePage": "1",
  "colorOptionsDetailed": false,
  "showTablesSideBySide": true,
  "enableAnimations": false,
  "improvePerformance": false,
  "enableLogLineWrap": true,
  "menuOrder": {},
  "enableRoundedEdges": true,
  "enableTableShadow": true
}
}
   stylesheetPrefix flex
   title      { if($FW_room) { "FHEM: $FW_room" } elsif($FW_detail) { "FHEM: $FW_detail" } else { "Home, Sweet Home" } }
   verbose    4
   viewport   width=device-width, initial-scale=1.0

xanker

Zitat von: choetzu am 23 Juli 2019, 17:19:43
Also, das komische ist, wenn ich dieses ReadingsGroup Device in einen Raum verschiebe mit anderen ReadingsGroup-Devices, dann wird es schön dargestellt (siehe Bild GEHT). Und wenn ich es mit anderen Devices mische, dann kommt es nicht gut. Anbei auch die HTML codes.. Die sind aber ganz schön lange... Ich hoffe du musst das nicht alles lesen ;)
Das Phänomen tritt auf meinem iPhone8 und bei Safari UND Chrome auf.

Vielleicht ist das einfach ein Schweizerding... in der EU würde es vermutlich funktionieren ;)
War kein Schweizerding ;)
Ich habe ein altes iPhone von einem Freund bekommen und konnte es somit debuggen. Jetzt sollte alles korrekt angezeigt werden.


Zitat von: choetzu am 23 Juli 2019, 20:40:25
Das geht leider auch noch nicht! Hab plotfork 1 und 0 getestet. Sorry.
Zitat von: schwatter am 23 Juli 2019, 20:46:04
Ich habe auch oder immer noch das Problem, mit den abgeschnittenen Plots. Früher wurden sie runter skaliert.
Jetzt wie bei @choetzu, halb abgeschnitten und seitlich nicht scrollbar.
Das Problem sollte jetzt (hoffentlich) endgültig gelöst sein.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

carlos

Hallo,
Vorab der Style gefällt mir gut, vor allem aber wie schnell hier neue features kommen und  Probleme gelöst werden.
Danke dafür.

Ich habe mal eine Frage, wäre es machbar die room icons im Menü rechtsbündig zu machen wie in angehängten Bild ?

Gruß

Carlos
FHEM svn auf Intel NUC mit proxmox,1 UDOO, 3 Raspberry Pi, signalduino, nanoCUL, div. Homematic Komponenten, toom Baumarkt Funksteckdosen, einige sonoffs, hue, shelly

xanker

Zitat von: carlos am 24 Juli 2019, 10:24:56
Vorab der Style gefällt mir gut, vor allem aber wie schnell hier neue features kommen und  Probleme gelöst werden.
Danke dafür.
Solange ich noch Zeit habe, werde ich sie auch nutzen...ab Oktober ist das dann nicht mehr möglich  ;D

Zitat von: carlos am 24 Juli 2019, 10:24:56
Ich habe mal eine Frage, wäre es machbar die room icons im Menü rechtsbündig zu machen wie in angehängten Bild ?
Gefällt mir gut! Ich habe eine neue Option eingebaut "showRoomIconsRight".
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

carlos

Gefällt mit jetzt auch sehr gut.
Danke dafür.
Gruß

Carlos
FHEM svn auf Intel NUC mit proxmox,1 UDOO, 3 Raspberry Pi, signalduino, nanoCUL, div. Homematic Komponenten, toom Baumarkt Funksteckdosen, einige sonoffs, hue, shelly

schwatter

Zitat von: xanker am 24 Juli 2019, 10:01:10
War kein Schweizerding ;)
Ich habe ein altes iPhone von einem Freund bekommen und konnte es somit debuggen. Jetzt sollte alles korrekt angezeigt werden.

Das Problem sollte jetzt (hoffentlich) endgültig gelöst sein.

Update durchgeführt und cache vom chrome gelöscht.
Bei mir besteht das Problem weiterhin.

xanker

Zitat von: schwatter am 24 Juli 2019, 12:44:26
Update durchgeführt und cache vom chrome gelöscht.
Bei mir besteht das Problem weiterhin.
Auf ein neues...jetzt aber?!  :o
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

schwatter


choetzu

Zitat von: schwatter am 24 Juli 2019, 14:37:03
Jetzt funktionert es, top  :)
Kann ich bestätigen! Top!!

Auch das ReadingsGroup Problem ist Geschichte! Super! Danke!!


Und sollte es dir langweilig werden ;) , wäre evtl eine Individualisierung der MenuIcons in der Nav Bar plus Ergänzung eines HOME icons ein guter Lückenbüsser ;)

Cheers c
Raspi3, EnOcean, Zwave, Homematic

xanker

Zitat von: choetzu am 24 Juli 2019, 15:43:47
Und sollte es dir langweilig werden ;) , wäre evtl eine Individualisierung der MenuIcons in der Nav Bar plus Ergänzung eines HOME icons ein guter Lückenbüsser ;)
Was stellst du dir genau vor unter "Individualisierung" vor? Frei definierbare Icons/Commands? Und für was ein Home icon ???
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...

nuccleon

#223
Ne Kleinigkeit noch.
Im Style Settings Dialog passt die Darstellung des "Tooltips" nicht (siehe Screenshot).

Im Raw Input Dialog ist das Eingabefeld plötzlich ganz schmal (zweiter Screenshot)

Getestet auf Mobile, Android, Chrome

xanker

#224
Zitat von: nuccleon am 24 Juli 2019, 16:57:47
Ne Kleinigkeit noch.
Im Style Settings Dialog passt die Darstellung des "Tooltips" nicht (siehe Screenshot).
Danke, das habe ich aber vorher schon gefixed ;)


Edit: Ja, mit dem Code Mirror gibt es noch Probleme, daher habe ich es jetzt aktuell optional gemacht, wobei es regulär deaktiviert ist, zumindest solange bis ich das Problem gelöst habe.
Maintainer vom flex Style.
Intel NUC mit fhem in Docker Container | Homematic | SIGNALduino 433MHz | HUE Bridge | Harmony HUB | lepresenced | alexa-fhem ...