Hallo Thorsten ,
habe Ihr geniales UI entdeckt und vorab Danke dafür.
Da ich nicht weiß unterwelcher Rubrik ich es im Forum einstellen soll, dachte ich mir, ich versuche es mal hier...
Zur Darstellung des UI wollte ich ein Samsung Tablet SM-T585 nutzen.
https://www.samsung.com/de/business/tablets/galaxy-tab-a-10-1-2016-t585/sm-t585nzkedbt/ (https://www.samsung.com/de/business/tablets/galaxy-tab-a-10-1-2016-t585/sm-t585nzkedbt/)
Dieses hat ein 1920 x 1200 (WUXGA) Display.
Wenn ich nun die Zellen entsprechend dem Display positionieren will, erreiche ich nie eine Vollbildansicht.
d.h. es bleibt an der rechten und unteren Seite des Displays immer ein schwarzer Rand oder ich muss scrollen.
Auch die feste Einstellung der pageWidth auf 1280 führt nicht zum gewünschten Ergebnis.
Es entfällt zwar das Scrollen aber der schwarze Rand bleibt.
Laut Wikipedia sollte bei diesem Display die 16:10 Gerade gelten und
1280 x 800 Bildpunkte für das gewünschte Ergebnis passen.
https://de.m.wikipedia.org/wiki/Bildaufl%C3%B6sung#/media/Datei%3ADisplay_resolution_standards.svg (https://de.m.wikipedia.org/wiki/Bildaufl%C3%B6sung#/media/Datei%3ADisplay_resolution_standards.svg)
Jedoch "rasten" die Zellen beim verschieben nicht bei diesen Bildpunkten ein, sodass immer ein Rand übrig bleibt.
Meine Frage, mache ich hier etwas falsch oder könnten Sie mir einen Tipp geben?
Mit freundlichen Grüßen
Uwe
Hi,
tja, das mit der genauen Vollbildansicht ist mir auch ein Rätsel. Ich kann dazu kein Patentrezept geben, aber vielleicht ein paar Schräubchen nennen, an denen man drehen kann.
- Die pageWidth ist oft nicht so zielführend. Besser man probiert mit der Breite und Höhe der einzelnen Zellen herum. D.h. baseWidth und baseHeight. Bei einer gewünschen Breite von 1280 wird das allerdings nie ganz genau gehen, außer man rechnet mit 10 Spalten und baseWidth von 129.
- Die Attribute viewportUserScalable und viewportInitialScale könnten auch interessant sein. Letzteres mal explizit auf "1.0" setzen und ersteres auf "no". ...oder halt rumprobieren.
- Attribut "layout" mal auf "flex" setzen. Wenn man "genügend" Zellen hat (bzw. die Zellen breit genug sind), dann müsste das immer die volle Breite des Browser-Fensters ausschöpfen.
- Manchmal stimmen die Angaben, die man hat, nicht wirklich. Dabei hilft dann http://viewportsizes.com/mine/.
Ich hoffe, dass das ein bisschen hilft. Ansonsten schick mal ein list Deines FUIP-Device und vielleicht einen Screenshot.
Gruß,
Thorsten
Hallo Thorsten,
danke für Deine Antwort...
- Der Link http://viewportsizes.com/mine/ gibt mir 1280 x 800 im Fully aus. Deckt sich also mit meiner Aussage
- Das Attribut "layout" auf "flex" zu setzen bringt in soweit nichts, weil ich jetzt noch mehr scrollen muss.
Das Display hat laut Hersteller 1920 x 1200 (WUXGA).
Es sieht so aus als wenn die Website auf dieses Maß aufzieht aber das Tablet nur 1280 x 800 wiedergibt.
- Die Attribute viewportUserScalable und viewportInitialScale bringen auch nichts. Hier werden auch die Zellen komplett verstellt
Aber wenn ich folgendes einstelle:
layout gridster
pageWidth 1280
baseHeight 78.5
baseWidth 117.7
dann funktioniert es ohne Rand und ohne scrollen.
Vermutlich werden horizontal zu den 1177 pixel noch 103 pixel und vertikal zu den 785 pixel noch 15 pixel
an Rahmen, Tabellenzwischenraum o.ä. hinzugebastelt? Kann das hinkommen?
Es funktioniert in der Darstellung jedoch so.
Aber jetzt habe ich das Problem, dass wenn ich zum Beispiel bei Proplanta Wettervorschau auf einen kommenden Tag klicke
sich die Tagesvorschau nicht aktualisiert. Das ging aber vor dem Umstellen.
Hast du hierzu noch eine Idee?
MfG
Uwe
Edit:
Das sich die Tagesvorschau nicht aktualisiert, hat sich erledigt.
Musste auf ,,Toggle editOnly" drücken, nur warum habe ich noch nicht begriffen.
Eine Frage habe ich aber noch:
durch das Ändern der Zellengröße passt nun z.B. der View type ,,FUIP::View::STATE" nicht mehr in die Zelle.
Kann ich den irgendwo anpassen?
MfG
Uwe
Zitat von: my-engel am 17 Februar 2019, 20:34:09Das Display hat laut Hersteller 1920 x 1200 (WUXGA).
Es sieht so aus als wenn die Website auf dieses Maß aufzieht aber das Tablet nur 1280 x 800 wiedergibt.
Die physikalische Auflösung hat erst einmal nichts direkt mit der "Viewport-Größe" zu tun. Wenn Du z.B. eine normale 10pt-Schrift auf einem 1920x1200-Tablet hättest, dann könntest Du das nicht lesen. Bei einem 23''-Monitor ist das wieder was anderes.
Zitat
Aber wenn ich folgendes einstelle:
layout gridster
pageWidth 1280
baseHeight 78.5
baseWidth 117.7
dann funktioniert es ohne Rand und ohne scrollen.
Vermutlich werden horizontal zu den 1177 pixel noch 103 pixel und vertikal zu den 785 pixel noch 15 pixel
an Rahmen, Tabellenzwischenraum o.ä. hinzugebastelt? Kann das hinkommen?
Mich wundert ein bisschen dass Kommazahlen funktionieren, aber auch gut. Also wenn Du 10 Spalten hast mit einer baseWidth von 117.7, dann würde ich eine Breite von 1177+90 = 1267 (px) erwarten. Die +90 kommen durch die 9 Zwischenräume zwischen den 10 Spalten zustande. (Auch wenn man doppelt/dreifach/etc-breite Spalten hat muss man die Zwischenräume mitrechnen.) Ein Zwischenraum hat bei FUIP immer 10 px Bei der Höhe ist es genauso. Eigentlich müssten es hier 875 px sein. Kann es sein, dass Du 9 Zeilen hast, also 9*78.5 + 80 = 786.5 (px). Da "fehlen" dann jedesmal (rund) 13 Pixel. Das könnte tatsächlich vom Browser selbst sein.
Zitat
Edit:
Das sich die Tagesvorschau nicht aktualisiert, hat sich erledigt.
Musste auf ,,Toggle editOnly" drücken, nur warum habe ich noch nicht begriffen.
Wenn "editOnly" eingeschaltet ist, dann reagieren die Views nicht auf Deine Mausklicks. Du kannst nur verschieben oder die Größe ändern.
Zitat
Eine Frage habe ich aber noch:
durch das Ändern der Zellengröße passt nun z.B. der View type ,,FUIP::View::STATE" nicht mehr in die Zelle.
Kann ich den irgendwo anpassen?
Das Problem dürfte hier sein, dass der Inhalt nicht mehr reinpasst, wenn der View nur die Zellenbreite hätte. Momentan könntest Du da nur doppelt-breite Zellen nehmen.
Gruß,
Thorsten
Hallo Thorsten,
Danke für Deine schnelle Antwort....
Ok werde ich versuchen.
Vielleicht passt diese jetzt nicht hier ins Thema jedoch habe ich noch etwas gespielt.
Ich möchte meinen aktuellen Gasverbrauch darstellen,
das klappt grundsätzlich soweit auch, habe aber hier auch kleine Probleme...
Der 1. View zeigt auf ein Devive "RPI_GPIO" und stellt die aktuellen Impulse dar.
- gibt es hier einen anderen Viewtype wie "SimpleSwitch" der nicht anklickbar ist?
Der 2. View zeigt auf ein Dummy und stellt dessen Status dar. (Momentanverbrauch)
- soweit i.O.
Der 3. View soll auf ein Reading eines Devices zeigen. (der Verbrauch des heutigen Tages)
- hier habe ich nichts passendes gefunden und habe den ViewType Humidity genommen
- dass funktioniert, jedoch ist hier das Zeichen "%" vorgegeben ähnlich wie Temperatur und "C"
- gibt es hier etwas ohne vorgegebene Einheit bzw. kannst Du hier etwas zusätzliches generieren
- wo man idealerweise die Einheit selbst setzen kann?
MfG
Uwe
PS: Du hast Dir ja eine Mega Arbeit gemacht, und es funktioniert beeindruckend gut...
Soll ich ein neues Thema aufmachen?
Hi,
versuch mal den View LabelReading. Zumindest scheint mir das näher dran zu sein...
Wenn das nicht passt, dann mach doch mal einen neuen Thread auf.
Gruß,
Thorsten
Hallo Thorsten
Aufgrund Deiner hier gemachten Erklärungen konnte ich auch meine Einstellungen für die IPADs soweit in ein gewünschtets Ergebnis bringen.
Für mich die idealen Einstellungen für ein iPAD Air 2 sind:
BaseHeight: 115
BaseWight: 137
(obwohl rein rechnerisch wären es 137.7 und 113.1 gewesen)
Leider sind aber die Seitenverhältnisse der verschiedenen Geräte/Displays unterschiedlich, so dass es beim iPAD Air 3 schon einen rechten und unteren Rand gibt.
Kann ich in FUIP (oder in einem CSS - kenn mich da nicht so gut aus) das irgendwo einstellen, dass die ganze Seite(n) zentriert wird?
MfG
iHome
Hi,
zurzeit bin ich da nicht so richtig drin und habe auch wenig Zeit. (Ich hab jetzt einen richtigen Job...) Also im Prinzip gibt es da schon Möglichkeiten, ein eigenes CSS einzubinden. Ich müsste mich da selbst ein bisschen reinwühlen. Wenn das jemand für FTUI gelöst hat, dann wäre es einfacher...
Gruß,
Thorsten
Ich hab genau das selbe problem.
Diese Anpassung ist leider nicht gut genug gelöst :(
Schade, das macht das ganze FUIP für mich eigentlich eher uninteressant :(
Hi,
meine FUIPs laufen alle mit layout = flex. Damit passt sich das ganze an und für sich ganz gut an alle Devices an. Ich verwende sogar dasselbe für's Handy wie für den großen Bildschirm.
...aber wie gesagt: Wenn mir jemand sagt, wie die Anpassung auch bei grid-Layout besser funktioniert, der kann es ja mal hier reinschreiben. Dann baue ich es ggf. noch ein. ...nur für Forschungsarbeiten habe ich leider momentan keine Zeit.
Gruß,
Thorsten
Zitat von: Thorsten Pferdekaemper am 10 Dezember 2020, 22:55:02
Hi,
meine FUIPs laufen alle mit layout = flex. Damit passt sich das ganze an und für sich ganz gut an alle Devices an. Ich verwende sogar dasselbe für's Handy wie für den großen Bildschirm.
...aber wie gesagt: Wenn mir jemand sagt, wie die Anpassung auch bei grid-Layout besser funktioniert, der kann es ja mal hier reinschreiben. Dann baue ich es ggf. noch ein. ...nur für Forschungsarbeiten habe ich leider momentan keine Zeit.
Gruß,
Thorsten
Danke für deine Antwort. Bei mir sieht das so aus wie auf dem Anhang, hab auch meine attr dazu gepostet ...
Hi,
häng mir hier mal die Datei <fhem>/FHEM/lib/FUIP/config/FUIP_<devicename>.cfg dran. Dann versuche ich mal, wie das bei mir aussieht.
Gruß,
Thorsten
hi Thorsten
Hier die FUIP_UI.cfg ... die datei war in dem von dir besagtem pfad
Hi,
ich versuche jetzt mal, da was draus zu machen. Das können jetzt aber ein paar Beiträge werden, da ich das ganze Stück für Stück mache.
Den viewport-Kram in den Attributen lasse ich erstmal weg und gehe mal in den Editiermodus. Dann ergibt sich das Bild im Anhang. Man beachte dabei die zwei kleinen Punkte oben rechts. Das sind zwei "zusammengeschnurrte" Bereiche, und zwar der Titel- und der Hauptbereich. Bei Dir steckt also alles im Menubereich, welcher selbst nicht besonders flexibel ist. Er "versteckt" sich aber automatisch, wenn die Viewport-Breite einen gewissen Wert unterschreitet.
...to be continued.
...weiter geht's.
Das mit den Bereichen steht übrigens auch in der Doku zum Attribut "layout".
Wie bekommt man jetzt die Zellen in die richtigen Bereiche sortiert? Also entweder man ist sehr geschickt und kann die Zellen in die kleinen Punkte verschieben, worauf sich diese vergrößern. Oder man schaltet mal kurz auf layout "gridster", klickt sich mal kurz durch alle Seiten und ändert dann das layout wieder auf "flex". Die Seite aus dem letzten Beitrag sieht dann so aus wie hier im Anhang. Das ist zwar noch lange nicht perfekt, aber es bewegt sich in die richtige Richtung. Im Menubereich ist etwas zu viel, dafür ist im Hauptbereich ein bisschen zu wenig und der Titel ist nicht wirklich ein Titel.
Das wird gleich repariert.
...jetzt habe ich in der Wetter-Zelle (also im Titelbereich) tatsächlich mal ein bisschen Wetter reingepackt. Außerdem ist die Uhr neben den Titel gewandert (hätte aber auch im Menubereich bleiben können) und der Systemmonitor in den Hauptbereich. Damit sieht das so aus wie hier im Anhang. Das erste Bild ist die Bearbeitungsansicht und das zweite zeigt, wie das auf einem "großen" Bildschirm aussieht. Man sieht schonmal, dass jetzt die ganze Breite ausgenutzt wird.
Das dritte Bild simuliert sozusagen einen Handy-Bildschirm und zeigt (obwohl schonmal das Menu eingeklappt ist), dass da das Layout noch nicht so ganz perfekt ist. Das liegt daran, dass FUIP die Zellen im Hauptbereich nicht schmäler macht, als sie beim Bearbeiten sind. D.h. der Systemmmonitor verhindert, dass die Zellen untereinander dargestellt werden. Es wäre sonst (also wenn man die Zellen schmäler werden ließe) nämlich ziemlich schwierig zu entscheiden, wo man mit den Views in der Zelle hin soll. Die kleinste Layout-Einheit beim Flex-Rendering ist sozusagen die Zelle.
...aber mal sehen, ob wir das auch noch hinbekommen.
Also, wie schon gesagt ist der Systemmonitor jetzt noch das Problem. Ich habe das bei mir so gelöst, dass ich mir eine "breite" Seite mit dem ganzen Systemkram gemacht habe. ...also eigentlich nur Batterieübersicht und Systemmonitor. Mein System ist ziemlich stabil, da brauche ich es nicht gleich auf der ersten Seite.
Aber machen wir den Systemmonitor doch einfach mal schmaler. Das sieht dann im Bearbeitungsmodus nicht so toll aus. Da die Zelle aber die letzte Zelle auf der Seite ist, wird man alles, was über den rechten Rand hinausgeht, sowieso nicht gleich sehen. Daher ist das dann sowohl auf dem großen Monitor als auch auf den Handy zumindest brauchbar.
Wie schon gesagt mache ich das allerdings ein bisschen anders, da ich so Sachen wie den Systemmonitor nicht direkt auf der ersten Seite brauche. Alternativ kann man sich auch wichtige Daten (Readings) rauspicken (freier Plattenplatz? CPU Temperatur?) und die dann mit einer der Views mit "Reading" im Namen direkt anzeigen lassen. Dann kann man auch schöne UIs hinbekommen, die auf ganz verschiedenen Bildschirmgrößen funktionieren.
Das war's jetzt erstmal.
Gruß,
Thorsten