tablet-ui + fuip - tipps zum erstellen einer oberfläche für handys gesucht

Begonnen von the ratman, 16 Oktober 2018, 12:43:27

Vorheriges Thema - Nächstes Thema

the ratman

hiho,

ich bin frisch bei tablet-ui und dem interface painter ... generell funzt alles nach wunsch, schnell durft ich aber feststellen, dass handys so ihre tücken haben.

o) ich schaff es z.b. nicht, ein interface mit 4 zellen breite so zu erstellen, dass man nicht doch noch die oberfläche leicht seitlich verschieben könnte.
o) ist die oberfläche auf einem alten note 4 aufgrund dessen schierer größe noch gut lesbar, wirds auf kleineren handys unlesbar.

hat da jemand erfahrungen mit und könnte mich mit tipps versorgen, wie ich da brauchbares - vorzugsweise über den painter - zusammen kriegen könnte?
happert vielleicht schon an den grundeinstellungen bei mir, wie z.b. der pageWidth.

vielen dank im voraus ...
→do↑p!dnʇs↓shit←

Thorsten Pferdekaemper

Zitat von: the ratman am 16 Oktober 2018, 12:43:27
o) ich schaff es z.b. nicht, ein interface mit 4 zellen breite so zu erstellen, dass man nicht doch noch die oberfläche leicht seitlich verschieben könnte.
Lass mal pageWidth ganz weg. Dann noch darauf achten, dass kein View irgendwie doch noch nach rechts drüber ragt. Das kann man am Besten mit "editOnly" prüfen.
Wenn das nicht reicht, dann vielleicht noch die baseWidth etwas verkleinern. Default ist 142, also mal 140 oder so versuchen.

Zitat
o) ist die oberfläche auf einem alten note 4 aufgrund dessen schierer größe noch gut lesbar, wirds auf kleineren handys unlesbar.
Das ist seltsam. Bei mir ist es immer gut lesbar, aber man muss scrollen (horizontal und vertikal). Möglicherweise versteht aber auch Dein Handy irgend etwas falsch. Ist das vielleicht irgendwas von Apple?

Zitat
hat da jemand erfahrungen mit und könnte mich mit tipps versorgen, wie ich da brauchbares - vorzugsweise über den painter - zusammen kriegen könnte?
happert vielleicht schon an den grundeinstellungen bei mir, wie z.b. der pageWidth.
Wie schon gesagt: pageWidth einfach mal weglassen.

Möglicherweise ist das hier auch etwas für Dich:
https://forum.fhem.de/index.php/topic,92135.0.html

Gruß,
   Thorsten
FUIP

the ratman

ZitatLass mal pageWidth ganz weg.
so einfach kanns sein ... funzt!

Zitataber man muss scrollen
das würde ich eben gerne vermeiden.
gehofft hab ich eigentlich auf eine automatische anpassung. z.b.: zellen je nach auflösung neu aneinander reihen <-- siehe deinen link, den muß ich mir in bälde ansehen
und nö, das handy ist - allen göttern seis gedankt, nicht vom apfelbaum gefallen. aber fast gleich schlimm, gleich vom chinesischen misthaufen darunter ... es ist n altes honor - jaja, der rücken aus glas ist extrem waf-freundlich ...

der grund des ganzen herumgefrages is übrigens: ich komm vom floorplan, hab langsam aber echt keine lust mehr, 1000 obeflächen für 1001 geräte zu basteln.

vielen dank mal fürs schuppsen in die richtige richtung ...
→do↑p!dnʇs↓shit←

Thorsten Pferdekaemper

Zitat von: the ratman am 16 Oktober 2018, 16:49:10das würde ich eben gerne vermeiden.
gehofft hab ich eigentlich auf eine automatische anpassung. z.b.: zellen je nach auflösung neu aneinander reihen
Naja, das widerspricht sich aber irgendwie auch. In irgend eine Richtung wird man immer scrollen müssen, außer man schrumpft das ganze halt. Das willst Du auch nicht.

Zitat... es ist n altes honor
Bei "alt" kann es sein, dass der Browser die ganzen "neuen" HTML5/CSS3-Sachen nicht kann. Da könnte es dann mit dem Flex-Layout auch Probleme geben.
Aber mal sehen.
Könntest Du mal diese Seite hier aufrufen (vom Handy aus) und hier reinschreiben/dranhängen, was dabei rauskommt:
http://viewportsizes.com/mine/

Gruß,
   Thorsten
FUIP

the ratman

uij, ned uninteressant

das honor mit firefox --> 360 x 524
das honor mit fully kiosk browser --> 600 x 1066 (ich nehm mal an, das is der warscheinlichere wert *g*)

das note 4 mit edge --> 360 x 515
das note 4 mit fully kiosk browser --> 607 x 1080
ich dacht immer, man gibt bei sowas die richtige, genutzte, auflösung (also irgendwas knapp unter 1440 x 2560) an, was ja mal so gar ned stimmt. wieder was gelernt ...
→do↑p!dnʇs↓shit←

Thorsten Pferdekaemper

Hi,
die Auflösung, die der Browser mitgeteilt bekommt, sollte immer ein Wert sein, der lesbare Seiten ergibt. Daher ist sowas wie 1440 Pixel bei einem Handy nicht so sinnvoll.
Könntest Du zu Deiner Auflistung noch sagen, wie die FUIP-Seiten jeweils aussehen?
Gruß,
   Thorsten
FUIP

the ratman

vorausgesetzt: die ui ist so gemacht, dass ich im fully eine perfekte anzeige hab.

im (android)edge am note viel zu groß und auch nicht veränderbar. da hat ein icon ca. 1/6 bildschirmgröße. als link von der oberfläche (also fullscreen) ebenfalls unbrauchbar. nur als zusatzinfo: das f18-theme macht da 0 probleme.
der ff am honor kriegts halbwegs auf die reihe, wenn auch da der rand leicht nach rechts übersteht.

der fully kriegts bei beiden geräten (bis halt auf die lesbarkeit wegen der handygröße ansich) gut auf die reihe und kann sowieso fensten zoom usw.
→do↑p!dnʇs↓shit←

Thorsten Pferdekaemper

Zitat von: the ratman am 18 Oktober 2018, 17:23:05
im (android)edge am note viel zu groß und auch nicht veränderbar. da hat ein icon ca. 1/6 bildschirmgröße. als link von der oberfläche (also fullscreen) ebenfalls unbrauchbar.
Also wenn das Ding als Breite 360 Pixel meldet, dann ist das halt u.U. so. Da könnte man höchstens noch irgendwie den initialen Zoomfaktor ändern. Allerdings ist es komisch, dass das nicht veränderbar ist. Das sieht doch so aus, als ob der Browser da ein paar Sachen ignoriert.
Ich habe gerade eine neue Version hochgeladen. Kannst Du es mal damit versuchen?

Zitatnur als zusatzinfo: das f18-theme macht da 0 probleme.
Soweit ich weiß generiert Fhemweb gar kein viewport-meta Tag mit rein. D.h. die ganze Seite wird halt in den verfügbaren Platz gequetscht. ...oder was meinst Du mit "macht da 0 Probleme"?

Zitat
der ff am honor kriegts halbwegs auf die reihe, wenn auch da der rand leicht nach rechts übersteht.
Ich nehme an, dass Deine Seite etwas Breiter ist als 360 Pixel, oder?

Zitat
der fully kriegts bei beiden geräten (bis halt auf die lesbarkeit wegen der handygröße ansich) gut auf die reihe und kann sowieso fensten zoom usw.
Naja, ich würde mal vermuten, dass der "Fully" einfach den viewport-Tag ignoriert. Da Du es für den Fully optimiert hast, merkt man es eben nicht. Ich würde mal behaupten, dass der "Fully" einfach einen Bug hat, wenn er auf einem Handy eine viewport-Breite von 600 liefert.

...aber wie gesagt, versuch mal, ob die neue Version irgend eine Änderung bringt.
Warum benutzt Du eigentlich nicht Chrome? Damit sollten zumindest mal alle Probleme, die durch veraltetes HTML/CSS etc. erzeugt werden, nicht mehr vorkommen. Oder eben Firefox. Soweit ich das sehe, ist nur Edge problematisch und da frage ich mich, ob man tatsächlich so etwas, insbesondere auf Android. unterstützen sollte.

Gruß,
   Thorsten
FUIP

the ratman

Zitatals ob der Browser da ein paar Sachen ignoriert.
wenn der edge mal was nicht ignoriert, dann is er es nicht *g* aber der edge versagt beim floorplan genau so. da dann sogar auch in der pc-version bei highDPI schirmen.
als einzig wirklich brauchbaren browser für fhem seh ich eindeutig den fully.
den edge und ff hab ich dir eigentlich sowieso nur als referenz mitgegeben, teste dir aber gern deine neuerungen. tu dir nur bloß wegen mir keine arbeit an.

heutiges update getestet am androiden edge: is besser, nur mehr ca. 1/3 zu groß in beide richtungen für den schirm *g*
als referenz diesmal der fulyl: immer noch perfekt im rahmen.

Zitatoder was meinst Du mit "macht da 0 Probleme"?
naja, f18 quetscht die breite, die höhe is ja egal. der vorteil is halt, du hast immer große, lesbare schrift. dafür knappst er halt mitunter wichtige sachen dafür weg. ist also auch eher ein blender *g*.
is aber klar, dass das mit grafischen spielchen wie der tablet-ui nicht so leicht bis gar ned geht.

ZitatIch nehme an, dass Deine Seite etwas Breiter ist als 360 Pixel, oder?
ja. man könnte auch annehmen, das der ff nen kleinen rand macht. er rennt ja eindeutig nicht in fullscreen, dann würd das in etwa passen. aber auch hier: die tablet-ui wird nie im ff für android laufen. auch meiner holden hab ich für sowas den fully verschrieben.
der ff wäre zumindest kein problem, würde man von haus aus für ihn ne ui entwerfen.

ZitatNaja, ich würde mal vermuten, dass der "Fully" einfach den viewport-Tag ignoriert.
kannste recht haben. du kannst bei dem ding ja alles selber nochmal einstellen/überschreiben. gut, der is ja auch genau für solche spielchen gemacht. kennst du den nicht? kommt von einem fhem-mann und kann ich dir wirklich nur ans herz legen. eig. sollte man bei tablet-ui/floorplan schon drauf bestehen, dass den jeder verwendet.
sogar die schrift könnte man dort getrennt größer stellen. leider versaut das natürlich dann das gesamte layout der tablet-ui. man müßt dafür wohl alle schriften generell in spezielle div-tags mit fester breite legen, die nur nach "unten" größer werden und den rest des layouts entsprechend nach unten verschieben. das wäre wohl ein workaround für mein handy-größen-problem.

ZitatWarum benutzt Du eigentlich nicht Chrome?
hat sich so ergeben. ich hab früher nur den ff verwendet, würde das auch immer noch. google-produkte setz ich nur ein, wos nicht anders geht. in meinem fall also nur ein handy (das nicht mal ne sim hat *g*). ich warte auch da auf ein produkt von m$. die gerüchte sagen ja, dass ein faltbares surface handy/tablet nächstes jahr kommen soll.
dann kamen meine ganzen zeichenstifte (für meine surfaces) und der ff versagt dabei kläglich. z.b. klickst du durch auswahlmenüs hindurch. ist da dann ein link von ner website drunter wo du grade im menü klickst, macht er dir den link auf und ignoriert den menü-link. da rastest du auf seiten mit vielen links (z.b. fhem web) aus mit der zeit.
jetzt hatt ich halt die wahl - ich will ned auf x geräten links usw. händisch aktuell halten müssen. also hab ich mich halt für einen browser entscheiden müssen. wobei ich den ff mittlerweile wider portabel wegen fhem auf den pcs am laufen hab. mit dem edge kannst du änderungen am z.b. floorplan nicht testen. dem ding z.b. den cache vollständig per klick zu leeren ist fast unmöglich und eher glückssache. und ja, ich kenne die tricks mit z.b. "STRG + SHIFT + reload", funzen alle aber eher selten bis gar ned.
→do↑p!dnʇs↓shit←

the ratman

sag mal, ...

ich hab das uwz-widget eingebunden - gibt js-errors und lustiger weise im device ui 2 neue seiten, die ich mit pagedelete löschen könnte:
lib/swiper.jquery.min.js
und
lib/swiper.min.css

ein pagelist schaut dann so aus: [ {
"id":"einstellungen",
"title":"einstellungen"
},{
"id":"geraete",
"title":"geraete"
},{
"id":"home",
"title":"the%20rat%2dO%2dhaus"
},{
"id":"infos",
"title":"infos"
},{
"id":"lib%2fswiper%2ejquery%2emin%2ejs",
"title":"lib%2fswiper%2ejquery%2emin%2ejs"
},{
"id":"lib%2fswiper%2emin%2ecss",
"title":"lib%2fswiper%2emin%2ecss"
},{
"id":"wetter",
"title":"wetter"
} ]


die von mit als html view eingefügten zeilen:<div data-type="uwz" data-device="unwetterwarnung" data-detail='["IconURL", "ShortText","WarnTime"]' data-max="2" class=""></div>

normal ist das nicht, denk ich mal?

nachtrag:
ich stelle eben fest, dass ich zellen nicht mehr vergrößern/verkleinern kann, verschieben geht noch.
passt zumindest zeitlich zu dem uwz-problem.

nachtrag 2:
ich hab jetzt mal die uwz und die falschen "seiten" gelöscht.
dazu ein update force mit den modulen tabletui und fuip gemacht mit restart.
recht unlusitg kann ich immer noch keine zellen verkleinern/vergrößern.
irgendwie schaff ichs immer, das zu machen, was nicht gut is *g*
→do↑p!dnʇs↓shit←

Thorsten Pferdekaemper

Hi,
sorry, heute hab ich keine Zeit mehr...
Was mir aufgefallen ist: Das uwz-Widget hat am Anfang ein paar unsaubere Sachen drin. Ich muss mal sehen, was man da machen kann. Momentan kann ich nur sagen, dass das uwz mit FUIP so nicht gehen kann. Da kannst Du aber erstmal wohl nichts machen.
Warum aber selbst nachdem Du das entfernt hast, das Resizing nicht mehr geht, kann ich auch nicht sagen. Gibt mir mal die /opt/fhem/FHEM/lib/FUIP/config/FUIP....cfg - Datei und ein list vom FUIP-Device. Dann kann ich das ggf. nachstellen?
...aber bitte probier das erst einmal mit Chrome aus, da sich Microsoft wohl nicht wirklich um Standards kümmert.
Gruß,
   Thorsten
FUIP

the ratman

cfg im anhang

Internals:
   NAME       ui
   NR         227
   STATE      ui
   TYPE       FUIP
   editOnly   0
   fhem:
     directory  ./www/tablet
     friendlyname ui
     infix      ui/
   pages:
Attributes:
   baseHeight 108
   baseWidth  142
   icon       008-quill
   layout     gridster
   locked     0
   pageWidth  612
   room       frontends


Zitat...aber bitte probier das erst einmal mit Chrome aus, da sich Microsoft wohl nicht wirklich um Standards kümmert.
du, is ja wie gsagt kein problem. ich verwend für fhem-darstellung sowieso nur den fully browser. und für das erstellen normaler weise den ff, wie auch jetzt grad.

aja, i weiß ja, dass es ned böse is oder so, aber der vollständigkeit halber und weils mir grade selber aufgfallen is: ich krieg wieder warnings - eines pro aufruf der ui:2018.10.19 17:26:10 1: PERL WARNING: Use of uninitialized value $filename in split at ./FHEM/42_FUIP.pm line 1616.
2018.10.19 17:26:10 1: stacktrace:
2018.10.19 17:26:10 1:     main::__ANON__                      called by ./FHEM/42_FUIP.pm (1616)
2018.10.19 17:26:10 1:     FUIP::CGI                           called by ./FHEM/01_FHEMWEB.pm (891)
2018.10.19 17:26:10 1:     main::FW_answerCall                 called by ./FHEM/01_FHEMWEB.pm (534)
2018.10.19 17:26:10 1:     main::FW_Read                       called by fhem.pl (3599)
2018.10.19 17:26:10 1:     main::CallFn                        called by fhem.pl (726)
vielleicht hilfts ja bei der problemsuche?
→do↑p!dnʇs↓shit←

the ratman

damitst dir wegen mir keine arbeit mehr antust ... da ich wie oben beschrieben dringend ein interface fürs handy brauch, bin ich wieder auf floorplan unterwegs. das problem - also ich *g* - is somit draussen.

in der zwischenzeit hatte ich probiert, tablet ui und den fuip vollständig zu löschen und (also auch "händisch" alles im fhem-dir, was ich gefunden hab zu entfernen. nach dem erneuten saugen der beiden teile ging das vergrößern/verkleinern immer no ned.

und nur der vollständigkeit halber:
ich hab den google browser probiert. der ist leider am surface die größte katastrophe aller browser. der "mauspfeil" des surface-stiftes "flimmert" und man kann nicht mal nen text markieren. klicken geht mal, mal nicht. würde man böses denken, könnte man den beiden unternhemen fast absicht unterstellen *g*. ich würd also keinem besitzer von m$-hardware den browser empfehlen.
→do↑p!dnʇs↓shit←

Thorsten Pferdekaemper

#13
Hi,
ok, danke zumindest für's Bescheid geben. Ich will aber trotzdem mal sehen, was man zu den einzelnen Punkten noch machen kann. ...Du musst Dich jetzt aber auch nicht verpflichtet fühlen, mir dabei zu helfen.
Erst einmal muss ich mal auseinanderdröseln, um welche Probleme es überhaupt geht. Bitte das, was jetzt kommt, als Merkliste für mich selbst betrachten.

1. Das ganze (grid und flex) mal mit Edge und Fully auf dem Handy testen. Siehe auch hier: https://forum.fhem.de/index.php?topic=92131.msg846778#msg846778 und https://forum.fhem.de/index.php/topic,92131.msg847292.html#msg847292
Git: https://github.com/ThorstenPferdekaemper/FHEM-FUIP/issues/24

2. Mal nachforschen, was f18 da anders macht. (https://forum.fhem.de/index.php/topic,92131.msg847292.html#msg847292)
Git: https://github.com/ThorstenPferdekaemper/FHEM-FUIP/issues/25

3. Probleme mit dem uwz-Widget (https://forum.fhem.de/index.php/topic,92131.msg847500.html#msg847500). Im Prinzip ist klar, woran das liegt: Die "depends"-Routine ist nicht wirklich sauber und funktioniert wahrscheinlich nur in wirklich "Standard"-FTUI-Umgebungen.
Git: https://github.com/ThorstenPferdekaemper/FHEM-FUIP/issues/26

4. Unter bestimmten Umständen funktioniert das Resizing (nur in Firefox/Edge?) nicht mehr. Siehe hier für ein list und cfg: https://forum.fhem.de/index.php/topic,92131.msg847580.html#msg847580
Git: https://github.com/ThorstenPferdekaemper/FHEM-FUIP/issues/27

5. Warnungen wegen uninitialized value $filename, siehe auch https://forum.fhem.de/index.php/topic,92131.msg847580.html#msg847580. Das macht wahrscheinlich nichts und kommt nur vor, wenn man den letzten "/" in der URL weglässt, aber sollte trotzdem gefixt werden.
Git: https://github.com/ThorstenPferdekaemper/FHEM-FUIP/issues/28

6. Vielleicht doch noch eine komplette Unterstützung für IE/Edge basteln. Möglicherweise ist es nur das grid, welches Probleme macht.
Git: https://github.com/ThorstenPferdekaemper/FHEM-FUIP/issues/29

Gruß,
   Thorsten 
FUIP

the ratman

ZitatDu musst Dich jetzt aber auch nicht verpflichtet fühlen, mir dabei zu helfen.
verpflichtet fühl ich mich nie zu was - aber wenn sich schon einer so bemüht, mir zu helfen, kann ich das auch probieren. mehr als dämliche fragen kann ich zu fhem eh selten beitragen *g*
ich mach mir maximal sorgen, dass es an meiner installation liegt, du dir also nur unnötig arbeit machst, weil ich irgendwo was verdreht hab versehentlich.

sprich: wennst an dummen zum probieren brauchst --> ich steh hier mal habt acht.
einziger unterschied zu bisher: ich hab nicht mehr meine eigenen geistigen ergüsse, sondern die standardoberfläche, so wie sie von deinem modul anfangs erstellt wird, am laufen.
→do↑p!dnʇs↓shit←