Kiosk-Modus für 5" Raspberry Pi Display optimieren?

  • Hallo zusammen,


    ich habe nach Ewigkeiten nun endlich ein paar Meter gemacht bei meinem Design für die Steuerung der Gartenbewässerung.

    Das HTML-Gerippe wächst langsam zusammen, aber mit dem CSS handere ich nun.


    Nun ist mein Ziel, dass ich das Frontend von zwei unterschiedlichen Geräten aus angucken möchte:

    1) von dem 5" Touch-Display direkt in der Garage. (800x480 Pixel, Hochkant montiert)

    2) vom Handy aus im Wohnzimmer. Auch ca. 5-6" Größe, aber ja mindestens FullHD oder sogar noch höhere Auflösung.


    Ich möchte jeweils die Webseite im Kiosk-Modus sehen ohne Scrollbalken.

    Mit welchen Stichworten muss ich suchen, um die gleiche Displaygröße mit zwei Auflösungen anzusprechen?

    Bis dato habe ich die exakten Pixel genutzt, aber dann wäre es ja nicht formatfüllend auf dem Handy.


    Vielen Dank.


    Gruß,

    Marcus

  • Hach Linus, so wie du das schreibst hört sich das so furchtbar einfach an :D

    Aber in der praktischen Umsetzung ist es trotzdem echt schwierig, das ganze auf die kleine Fläche gepackt zu bekommen. (zumindest ohne weitere Erfahrung)


    Ich habe einen Entwurf parat, den muss ich mal auf meinen Webspace laden und hier posten. Wäre mal gut, wenn ich Feedback bekomme bezüglich der Usability.

  • Das sieht doch sehr brauchbar aus, funktioniert bei mir auf diversen Bildschirmgrößen... Kannst du etwas konkreter werden, wo es bei dir hakt?


    Ich habe das HTML mal durch den Validator vom W3 gejagt, du hast u.a. diverse class="col-md-4 col-6" class="border" drin. Korrekt wäre class="col-md-4 col-6 border". Ein encoding ist ebenfalls nicht angegeben (im Idealfall utf-8).

    Ein paar "duplicate IDs" und "unclosed elements" (beides nicht gut) sind auch dabei...


    Sieh selbst: https://validator.w3.org/nu/?d…zurhorsts.de%2Findex.html

  • Hi Linus,

    vielen Dank. Ja, es sind noch Fehler drin. Ist einfach recht mühsam, und ich verliere immer mal wieder den Überblick.


    Ich habe den Raspberry Pi mit dem 5" Display noch gar nicht laufen. Aber wenn ich im Firefox mit den Webentwicklertools ein kleines Display simuliere, dann ist dieses "Fensterchen" deutlich größer als das 5" Display, welches ich daneben halte.

    Ich bin mir einfach nicht sicher, ob das wirklich noch bedienbar ist auf einem 5" Display. Muss ich dringend mal anschließen und ausprobieren.


    Das 5" Display hat 800x480 Pixel Auflösung. Ich möchte das im Hochformat einbauen, und die Seite soll im Kioskmodus den Bildschirm vollständig ausfüllen ohne Scrollen und ohne Platz zu verschwenden.


    Auf meinem Handy (auch ca. 5" Display, aber viel mehr Auflösung) jedenfalls scheint es auch ok auszusehen.




    Was ich noch nicht hingekriegt habe ist, dass jeder Knopf einen eigenen Timer startet, der beim Drücken bei Null anfängt zu zählen.

    Und beim erneuten Drücken (schließen) soll der Timer fallgelassen werden. Das soll mir im Handbetrieb quasi nur anzeigen, wie lange ein Wasserkreis offen ist.


    Und zweitens ändert sich noch die Höhe der grünen Kästen, welche ein Ventil darstellen. Ich hatte eigentlich vor, dass ich beim Wechseln des Reiters die grünen Kästen konstant halte sowie vorne den Titel und die Beschreibung, und dann lediglich der große Button gegen die Settings ausgetauscht wird an der gleichen Stelle. Es ist aber noch nicht gleich groß und nicht eng genug gepackt anscheinend.


    Wenn du da noch einen Tipp hast, dann würde ich mich freuen. Danke.

  • Mal so am Rande... Das sieht doch echt Klasse aus, bei mir wird das alles korrekt angezeigt.


    Vielleicht machst du noch eine Animation, wenn auf öffnen gedrückt wird. Damit für den User eine Rückmeldung erscheint.. Das wäre natürlich wirklich nur nice to have :)

    Wenn's brennt 112 hilft weiter!

  • Hmm, ich bin einfach nicht 100% zufrieden.

    Eigentlich wollte ich es mit "Material Design Lite" (http://www.getmdl.io) machen, aber ich finde viel zu wenig Code-Beispiele im Internet. Evtl. mache ich parallel nochmal einen anderen Entwurf irgendwann.


    Was ich z.B. gerne noch ändern würde, aber nicht hinbekommen habe: Evtl. wäre es besser, wenn ich pro Ventil die Einstellungen in einem Modalfenster einblenden würde. Dann wäre es nicht so eng geknubbelt und viel besser bedienbar vermutlich.

  • Und zweitens ändert sich noch die Höhe der grünen Kästen, welche ein Ventil darstellen. Ich hatte eigentlich vor, dass ich beim Wechseln des Reiters die grünen Kästen konstant halte sowie vorne den Titel und die Beschreibung, und dann lediglich der große Button gegen die Settings ausgetauscht wird an der gleichen Stelle. Es ist aber noch nicht gleich groß und nicht eng genug gepackt anscheinend.


    Wenn du da noch einen Tipp hast, dann würde ich mich freuen. Danke.

    Eine fixe Höhe setzen. Ist zwar nicht die schönste Lösung, funktioniert aber.

    Eigentlich wollte ich es mit "Material Design Lite" (http://www.getmdl.io) machen, aber ich finde viel zu wenig Code-Beispiele im Internet.

    Was!? Die haben doch ein "Getting started"-Guide (https://getmdl.io/started/index.html) und eine Doku zu jedem einzelnen Element...