[FUIP] Schwarz auf Weiß Darstellung auf e-book reader Tolino Page

willib · 09 Januar 2020, 10:07:28

Moin,

ich bekomme es nicht hin auf meinem e-book reader eine schwarz auf weiß Darstellung von FUIP anzuzeigen. Auf meinem Desktop wird die Seite so angezeigt wie ich es will. Auf dem Reader sieht es immer aus wie auf dem Foto, auch wenn ich die Farbeinstellungen umdrehe. Wie zu sehen habe ich mich um das weitere Layout noch nicht gekümmert. Wenn ich f18 auf schwarz weiß umstelle zeigt der Reader die Farben korrekt an. Wie hier es in meinem Bastelthread zu sehen ist.
https://forum.fhem.de/index.php/topic,86865.msg793005.html#msg793005
Ich vermute es etwas damit zu tun dass ich bei f18 die Farben in Hex-Code angebe und bei FUIP in RGB.
Was kann ich machen damit der ereader die Farben korrekt anzeigt. Ich habe Dolphin Browser und Opera Lite auf dem Reader probiert. Gleiches Ergebnis.

Thorsten Pferdekaemper · 09 Januar 2020, 21:43:06

Hi,
also es wäre schon seltsam, wenn der Browser keine rgba-Farben kann...
Als erstes würde ich mal versuchen, das Attribut locked auf 1 zu setzen und dann "set <ui> unlock" nur auf dem Gerät, auf dem Du wirklich die Oberfläche bearbeitest.
Der Hintergrund ist, dass die Bearbeitungs-Oberfläche etwas moderneres HTML/JavaScript braucht.
Dann stelle mal sicher, dass alle Farben (über das Colors-Popup) ohne Transparenz eingestellt sind. (Außer das editOnly-Teil, das muss transparent sein, ist aber für die reine Darstellung egal).
Könntest Du auch mal zeigen, wie die Oberfläche auf einem normalen Device aussieht?
Gruß,
Thorsten

willib · 10 Januar 2020, 20:48:14

Dankeschön.
hier ein list meines FUIP device

Code Auswählen

Internals:
   FUUID      5c4cb6bf-f33f-7452-543a-15151076b6a0ad67
   FVERSION   42_FUIP.pm:0.009900/2019-11-16
   NAME       ereader_ui
   NR         505
   STATE      ereader_ui
   TYPE       FUIP
   autosave   none
   editOnly   0
   lockIPs    192.168.178.41:0
   colors:
     background rgba(192,192,192,1)
     background-hover #444
     background-transparent rgba(42,42,42,1)
     editonly   rgba(255,255,255,0.1)
     foreground rgba(0,0,0,1)
     header     rgba(0,0,0,1)
     header-transparent rgba(38,38,38,1)
     page-background rgba(255,255,255,1)
     symbol-active #AA6900
     symbol-foreground rgba(0,0,255,1)
     symbol-inactive #505050
   fhem:
     directory  ./www/tablet
     friendlyname ereader_ui
     infix      ereader_ui/
   pages:
   viewtemplates:
Attributes:
   baseHeight 108
   baseWidth  142
   layout     gridster
   locked     1
   room       FUIP

Es hat sich etwas auf dem reader verändert, weil ich noch mit den Farben herumgespielt habe. Er zeigt aber nicht das an was er soll.

Thorsten Pferdekaemper · 10 Januar 2020, 22:32:44

Zitat von: willib am 09 Januar 2020, 10:07:28
Ich vermute es etwas damit zu tun dass ich bei f18 die Farben in Hex-Code angebe und bei FUIP in RGB.

Kannst Du vielleicht mal zwei Test-HTMLs zusammenbasteln, eine mit Hex-Codes und eine mit den rgba-Angaben?
Wenn das wirklich den Unterschied ausmacht, dann kann ich das ggf. fixen. Ich würde aber ungern den Aufwand auf Verdacht machen.
Gruß,
Thorsten

willib · 10 Januar 2020, 22:45:53

Ich werde es versuchen. Ich hätte gehofft mit FUIP um HTML herum zu kommen.

Da muss ich mich erst einlesen. Das mache ich dann anhand der Doku zu FTUI? Testen der beiden HTML auch unter FTUI? DANKE

Thorsten Pferdekaemper · 11 Januar 2020, 10:02:08

Hi,
nein, ich meinte, einfach nur zwei ganz primitive HTML-Seiten, nichts mit FTUI oder FUIP.
Wenn ich Dir eine HTML-Datei mache, kannst Du die dann auf dem Teil darstellen?
Bzw. kannst Du allgemeine URLs dort aufrufen?
Gruß,
Thorsten

Thorsten Pferdekaemper · 11 Januar 2020, 13:38:08

Hi,
kannst Du mal diese URL aufrufen und mir zeigen, wie das aussieht?
http://pferdekaemper.com/fuip/colortest.html
Gruß,
Thorsten

willib · 11 Januar 2020, 23:10:17

Dein Support ist echt Hammer.
Vielen Dank.
Das sieht gut aus. Oder eben nicht. Somit ist der Grund für die falsche Anzeige weiterhin unklar.

Thorsten Pferdekaemper · 12 Januar 2020, 18:27:13

Hi,
möglicherweise sind es auch die CSS-Variablen. Ich habe der colortest-Seite mal eine dritte Spalte spendiert. Probier's nochmal.
Wenn es das ist, dann wär's echt ein bisschen blöd, das das dann etwas mehr Aufwand ist.
Gruß,
Thorsten

willib · 12 Januar 2020, 22:33:16

Hier das aktuelle Ergebnis.
Hilft dir das weiter? Keine Ahnung, ob das für jemand anderes auch Relevanz hat. Ich kann verstehen wenn du da keinen Bock drauf hast.

Thorsten Pferdekaemper · 13 Januar 2020, 19:45:00

Hi,
tja, das ist immer so ein Thema: Will man alte Browser unterstützen oder nicht?
Ich habe eine Idee, was man da ggf. machen könnte, das kann aber noch ein bisschen dauern.
Gruß,
Thorsten

willib · 13 Januar 2020, 20:35:06

Vielen Dank schonmal.
Macht es Sinn noch weitere Browser zu probieren? Oder liegt es am OS? Der Reader läuft mit Android 4.0.1
Werde ich das gleiche Problem auch mit FTUI haben?

Thorsten Pferdekaemper · 13 Januar 2020, 22:48:54

Hi,
alles was hier grün ist, müsste es können:
https://caniuse.com/#search=css%20variables
Mit reinem FTUI müsste es klappen, zumindest ist mir nicht bekannt, dass reines FTUI CSS-Variablen verwendet.
Gruß,
Thorsten

willib · 14 Januar 2020, 12:20:05

Nochmals vielen Dank
Ich werde noch mal UC Browser testen. Chrome läuft auf dem ereader nicht. Da der Android stock browser CSS auch erst ab seit Android 5 unterstützt, würde ich mal erwarten, dass die Version vom UC Browser die auf dem reader läuft das auch nicht kann. Ich melde mich dazu wieder.
Sonst muss ich mich wohl leider doch mit FTUI auseinandersetzen.

Thorsten Pferdekaemper · 14 Januar 2020, 23:03:01

Hi,
ich glaube, ich habe eine Lösung für Dich. Du müsstest nur ein bisschen mithelfen.
1. Verwende das Attribut styleSchema erst einmal nicht oder setze es auf "default".
2. Bastle Dir alle Farben so hin, dass es auf einem modernen Browser (also auf dem PC oder so) gut aussieht.
3. Wenn Du jetzt ein "list" machst, dann siehst Du unter Anderem so etwas:

Code Auswählen


   colors:
     background rgba(128,255,128,1)
     foreground rgba(33,150,20,1)
     header     rgba(226,65,141,1)
     header-transparent rgba(91,201,149,0.7)
     page-background #FFF
     symbol-inactive #999999

4. Mache Dir eine Kopie der Datei /opt/fhem/FHEM/lib/FUIP/css/fuip-default-ui.css. Die Kopie sollte im selben Verzeichnis liegen und muss vorne "fuip-" und hinten "-ui.css" haben. Die Mitte kannst Du frei wählen, also etwa "fuip-blackandwhite-ui.css"
5. Editiere diese Datei, und zwar folgendermaßen: Jedes Vorkommen von "var(--<irgendwas>)" ersetzt Du durch die entsprechende Farbangabe. Diese Ergibt sich entweder aus der Angabe aus dem "list" oder aus der Angabe im ersten Teil der css-Datei. Das "list" hat dabei Vorrang.
Beispiel: Aus dem hier:

Code Auswählen


.gridster li header, .card > header {
    background: var(--fuip-color-header);
    color: var(--fuip-color-foreground);
}

wird das hier:

Code Auswählen


.gridster li header, .card > header {
    background:  rgba(226,65,141,1);
    color: rgba(33,150,20,1);
}

6. Jetzt hast Du Dir eine eigene FUIP-Style-Datei gebaut. Du müsstest Sie beim Attribut styleSchema auswählen können. Wenn nicht, dann mal FHEM neu starten.
7. Jetzt noch das Attribut styleColor auf die Farbangabe bei foreground bzw. --fuip-color-foreground setzen.

Wenn alle meine Vermutungen stimmen, dann müsste das auf Deinem Tablet danach auch einigermaßen nach was aussehen.

Die css-Datei will ich dann haben...

Ach übrigens: Die Farbauswahl mit dem Colors-Dialog geht dann natürlich nicht mehr. Der ist auf die CSS-Variablen angewiesen.

Gruß,
Thorsten