Wie gestaltet man eine Displayoberfläche?

  • Hallo,

    die Frage hat jetzt nur indirekt etwas mit Programmieren zu tun, mich würde eure Herangehensweise interessieren, wie man ein E-Paper oder OLED Display gestaltet. Also wie man die Bereiche einteilt und abgrenzt und diese dann wieder ausgerichtet mit Datenwerten füllt.

    Konkret möchte ich in naher Zukunft mit E-Paper (Zwecks Batteriebetrieb) mir für meine Wetterstation Anzeigeclients bauen. Bedeutet der Client soll alle 5-10 Minuten die aktuellen Werte der Wetterstation vom Server abrufen und darstellen. So ungefähr wie das hier (aus dem Thread) nur mit eigener Datenquelle und Gestaltung. Aber das wird jetzt schon zu konkret.

    Erstellt ihr euch für die unterschiedlichen Anzeigeseiten zuerst Konzeptzeichnungen, wenn ja auf Papier oder mit welchem Programm?

    Angenommen, für eine Anzeigeseite stellt man sich solche Darstellung vor, mit den dargestellten vertikalen und horizontalen Linien:

    konzept.pdf

    Wie bestimmt man hier die einzelnen Bereiche. Also an welche Positionen weiß ich muss ich am Display Linien zeichnen, try and Error? Oder wie lässt sich sowas "einfach" berechnen? Es wird wohl über die Pixelanzahl im Verhältnis zur Größe des Displays gehen :conf: Aber dann weiter ...

    Wie kann ich mir dann die Datenfelder vorbereiten, dass ich dann dort gezielt die Werte ausfüllen kann. Ok das wird dann doch nochmals etwas mehr Programmieren, das sollte sich dann also auf Python, microPython oder C++ (für n ESP) beziehen.

    Aber ganz allgemein würde mich einfach eure Vorgehensweise zu dem Thema interessieren :):thumbup:

  • Servus Hofei,

    mein erstes Python-Projekt mit einer GUI war mein yamuplay (hier das github-Repository). Dort habe ich die GUI mit tkinter realisiert. Es gibt (mittlerweile) bessere GUI-Kits für Python als tkinter, aber da es mehr oder weniger das "offizielle" GUI-Paket von Python ist, habe ich es 2015/16 mit meiner damaligen "Erfahrung" als Neuling ausgewählt. Es ist schon ziemlich full-90ies!

    Das Layout habe ich mir damals auch auf Papier aufgezeichnet und ich weiß nicht, ob es für tkinter irgendwelche GUI-Designer gibt, die dann gleich ein Codegerüst ausspucken, wie z.B. in Microsoft Visual Studio.
    Anhand der Zeichnung habe ich dann mühsam die einzelnen Steuerelemente laut einer (mittlerweile verschollenen) Doku von der New Mexico Tech University in den Quellcode reingehackt (Eigentlich ist die offizielle Doku wohl eher diese).

    Im Quellcode von yamuplay.py wird die GUI in der Methode self.GUI(): der class YAMuPlay(object): aufgebaut.

    Zur Trennung einzelner Bereiche verwende ich das Steuerelement tkinter.PanedWindow. Es teilt einen Bereich der der Gesamtfläche (ggf. auch die vollständige Fläche) in zwei Teilpanels auf, die durch einen verschiebbaren oder festen horizontalen oder vertikalen getrennt sind. In jede der beiden Teilflächen kann man wieder ein tkinter.PanedWindow einsetzen und so baumartig eine komplexe GUI mit vielen aufgeteilten Einzelfächen erstellen.

    Das oberste PanedWindow wird beim yamuplay z.B. so deklariert:

    Python
    self.pwMainpane = tkinter.PanedWindow(self.YAMuPlayGUI, orient = 'horizontal', sashwidth = 16) # sashwidth=16: Breite der Trennlinie dick genug machen, um sie auf einem (groben) Touchdisplay sicher zu erreichen

    Wenn man drei Felder braucht, übergeordnet ein PanedWindow mit Aufteilung 2:1 erstellen und im größeren Feld ein weiteres PanedWindow im Größenverhältnis 1:1 einfügen.

    In Deinem Konzept würde ich das hierarchisch oberste PanedWindow mit vertikalem Trenner zu 2:1 (Außentemperatur und Außenluftfeuchte : Regen) aufteilen.
    Dann links ein weiteres PanedWindow mit vertikalem Trenner einsetzen für die Trennung zw. Außentemp. und Außenluftfeuchte.

    Dann in die drei Felder jeweils ein "dreiteiliges PanedWindow" mit horizontalen Trennern einfügen.

    Die Größe der einzelnen Flächen kann man dann ermitteln und die gewünschte Grafik entsprechend einpassen. Ebenso, ob die Trennbalken starr sind oder mit der Maus verschoben werden können.

    Ich weiß jetzt aus dem Stegreif nicht, ob es da etwas Besseres/Moderneres/Bequemeres gibt, ich gehe aber stark davon aus. Außerdem habe ich bei Dir jetzt mal Python3 unterstellt. Aber die Aufteilung einer GUI über geschachtelte Elemente eines zweiteilgen Steuerelementes wie PanedWindow sollte aus meiner Beschreibung hervorgehen.

    Und wie gesagt, der yamuplay war so ziemlich mein Erstlingswerk in Python und auf dem RPi. Von daher sicherlich nicht der Weisheit letzter Schluss. Und wenig PEP-8 :angel:

  • Ergänzung:
    Ich habe gerade einen Mirror der von mir damals verwendeten Doku der New Mexico Tech University gefunden:
    https://tkdocs.com/shipman/

    Diese Doku von der NMT ist auch auf der Python-Doku https://docs.python.org/3/library/tkinter.html verlinkt.

  • Moin Hofei,

    ich habe 2 Displays mit einer selbst gestalteter Anzeige in Betrieb.

    Das erste ist ein TFT-Display und das zweite ein E-Paper.

    In beiden Fällen hatte ich eine Vorstellung was dargestellt werden sollte. Es folgten diverse Versuche mit Fontgröße, Farben, Rahmen oder nicht, Laufschrift usw. Irgendwann hatte ich die Daten und habe die Anzeige fertig gestellt.

    Achja, alles in C erstellt. Die Bibliotheken für die Displays sind von mir und enthalten nur die benötigten Sachen.

    wie man ein E-Paper oder OLED Display gestaltet.

    Diese Frage solltest du vorher klären. TFT kann man Pixelgenau steuern. Wie es sich mit OLED verhält, kann ich dir nicht sagen.

    E-Paper kann das eigentlich nicht. Es sei, du kaufst dir ein E-Paper mit "partiellen Refresh". Haben aber die meisten nicht.

    Ich schreibe den kompletten Inhalt alle 10 Minuten neu. Bei meinem schreibt man in ein Buffer und sagt dann "zeige Buffer an".

    Dann noch einen Hinweis. E-Paper gibt es auch 3-farbig. Wenn du nicht vor hast die dritte Farbe zu nutzen, dann lass es, bitte. E-Paper scheinen Sonnenlicht empfindlich zu sein. Es kommt dann die dritte Farbe als Pixelwolke und das stört.

    73 de Bernd

    Ich habe KEINE Ahnung und davon GANZ VIEL!!
    Bei einer Lösung freue ich mich über ein ":thumbup:"
    Vielleicht trifft man sich in der RPi-Plauderecke.
    Linux ist zum Lernen da, je mehr man lernt um so besser versteht man es.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!