UIFlow-GU-Designer

Aus Attraktor Wiki

(Weitergeleitet von UIFlow-GUI)
Wechseln zu: Navigation, Suche

Von Peter (peter@attraktor.org)

Bilderprefix: M5-UIF-GUI-...

Kpst-Baustelle.jpg

Übersicht

M5-UIF-GUI-001.png Der GU-Designer befindet sich ganz links in der UIFlow-IDE. Auf ihm ist das M5Stack-Gerät dargestellt, für das ein Programm geschrieben werden soll.


Beim M5StickC besteht das Problem, dass das Bild nicht in die gewünschte Position gedreht wird. Wenn der M5StickC in der senkrechten Position eingesetzt werden soll ist alles in Ordnung. Die Darstellung entspricht der späteren Ansicht. Wenn das Gerät aber horizontal eingesetzt werden soll, dann kann mit dem "UI/SCREEN/Set Screen rotate mode" die horizontale Einstellung des Displays eingestellt werden, aber der GU-Designer bekommt davon nichts mit und bleibt in der senkrechten Position. Die Gestaltung des Displays geschiet dann leider nicht in der dargestellten Displayfläche, sondern quer dazu.

Beim M5Stack Core gibt es dieses Problem eher nicht, da dieser durch die Anordnung von Display und Tasten normalerweise keine Drehung der Displaydarstellung erfordert.

Der GU-Designer ist ein sehr hilfreiches Werkzeug, dessen Elemente flexibler sind als die unter Grafik in Blockly zur Verfügung stehenden Elemente. So ist der Hintergrund bei mit M5-UIF-GUI-002.png

erzeugten Textausgaben immer schwarz.

Beim Einsatz von Label ist die Hintergrundfarbe frei wählbar und entspricht standardmässig der Farbe des Displayhintergrundes.

Oben links ist die Werkzeugleiste. Um ein Element auf dem Display erscheinen zu lassen wird es wird es angeklickt und mit gedrückter linker Maustaste auf das Display geschoben.

Zum Löschen des GUI-Elements wird darauf geklickt und die Maustaste festgehalten. Dann erscheint oben ein Papierkorb-Symbol. Wird es darauf geschoben und ist gelöscht.

Unten links gibt eine Schaltfläche "Verberge UI" mit der der UI-Designer unsichtbar gemacht werden kann. Dann steht zum Programmieren eine größere Fläche zur Verfügung.

Das Koordinatensystem

Das Koordinatensystem des Displays dient dazu die Elemente auf dem Display präzise anzuordnen. Es hat seinen Ursprung immer oben links. Die X-Achse verläuft nach rechts und die Y-Achse verläuft nach unten. Beim M5Stack Core stehen auf der X-Achse Werte zwischen 0 und 319 und auf der Y-Achse von 0 bis 239 zur Verfügung.

Beim M5StickC sind es bei vertikaler Ausrichtung - so wie im GU-Designer abgebildet - auf der X-Achse Werte zwischen 0 und 79, auf der Y-Achse von 0 bis 159. Wenn der M5StickC in horizontaler Position (rotation mode 1) eingesetzt werden soll, so enthält die X-Achse die Werte von 0 bis 159 und die Y-Achse Werte von 0 bis 79. Da das alles recht verwirrend klingt ein paar Bilder zur Klärung:

M5-UIF-GUI-003-K.png
M5-UIF-GUI-004-0-K.png
M5-UIF-GUI-004-1-K.png

Title - Titel

Das Titel-Element kann nur einmal auf dem Display erscheinen. Um es auf dem Display erscheinen zu lassen wird es wird das Title-Symbol oben links angeklickt und mit gedrückter linker Maustaste auf das Display geschoben. Dort die Taste loslassen und es plaziert sich automatisch in der obersten Reihe.

Ein Linksklick auf das Titel-Element im Display öffnet das Eigenschaften-Fenster.

M5-UIF-GUI-010.png

In diesem Fenster können folgende Eigenschaften eingestellt werden:

  • der Name des Elements
  • die Farbe der Schrift
  • die Farbe des Hintergrundes
  • die Einrückung des Textes in Pixel
  • der darzustellende Text
  • und die Ebene.

Mit der Ebene-Eigenschaft habe ich mich noch nicht beschäftigt. Ich vermute, dass damit bestimmt wird welches Element welches verdeckt. Andererseits habe ich anderer Stelle festgestellt, dass immer das zuletzt dargestellt Element oben liegt.

M5-UIF-GUI-011.png

Im Blockly-Menü ist unter UI nun eine neue Rubrik Title erschienen. Sie enthält die Blöcke zur programmgesteuerten Manipulation des Titel-Elements.

So lässt sich

  • der Text des Titel-Elements verändern
  • das Titel-Element anzeigen oder verbergen
  • die Farbe der Schrift als Farbe auswählen oder als RGB-Wert eingeben
  • die Hintergrundfarbe als Farbe auswählen oder als RGB-Wert eingeben.

Bei den RGB-Werten sieht es so aus, als können dort auch Variablen eingefügt werden. Die IDE läßt das auch zu. Bei meinen Versuchen kam es aber zur Fehlermeldung, wenn dieser Block in laufenden Programm abgearbeitet wurde.

M5-UIF-GUI-012.png

Parallel zur Programmierung mit Blockly wird ein Micropython-Programm erstellt. Dieses kann durch einen Mausklick auf Python angezeigt werden.

Hier ist zu sehen, dass ein Objekt vom Typ M5Tiltle() mit dem Namen tiltle0 erzeugt wird.

M5-UIF-GUI-013.png

Nun habe ich alle Blöcke die zum Titel-Element gehören mit Blockly unter Setup verschoben und man kann nun die entsprechenden Micropython Kommandos sehen. Es sind nur 4 Kommandos:

  • n.setTitle(Text, Ebene, Vordergundfarbe, Hintergrundfarbe)
  • n.show()
  • n.hide()
  • n.setFgColor(RGB-Farbwert)
  • n.setBgColor(RGB-Farbwert)

Label - Bezeichnung

Das Label-Element ist wie auch das Title-Element ein einfaches Textfeld. Im Unterschied zu diesem lässt es sich aber beliebig auf dem Display positionieren. In einem Label-Element können sowohl fixe Texte, die im Eigenschaften-Menü oder im Programm eingegeben werden, als auch der Inhalt von Variablen dargestellt werden.

Leider zeigt die Rotation-Eigenschaft im Eigenschaften-Menü wie auch der entsprechende Block keine Wirkung. Änderungen im Python-Code bleiben ebenfalls wirkungslos. Der Text wird immer in der durch den im Block "Set Screen Rotate Mode" eingestellten Mode bestimmt.

M5-UIF-GUI-020.png

Rect - Rechteck

M5-UIF-GUI-030.png

Circle - Kreis

M5-UIF-GUI-040.png

Image - Bild

M5-UIF-GUI-050.png

M5StickC mit horizontalem Display

M5-UIF-GUI-060.png

Der Einstellungsdialog
Beim M5StickC besteht das Problem, dass das Bild nicht in die gewünschte Position gedreht wird. Wenn der M5StickC in der senkrechten Position eingesetzt werden soll ist alles in Ordnung. Die Darstellung entspricht der späteren Ansicht. Wenn das Gerät aber horizontal eingesetzt werden soll, dann kann mit dem "UI/SCREEN/Set Screen rotate mode" die horizontale Einstellung des Displays eingestellt werden, aber der GU-Designer bekommt davon nichts mit und bleibt in der senkrechten Position.

Im Einstellungsdialog können jedoch auch die Werte für eine horizontale Displaynutzung eingegeben werden. Dadurch ist es möglich mit dem GU-Designer auch horizontal ausgerichtete Display-Layouts zu entwerfen.

Wenn die Positionierung über den Eigenschaftensdialog erfolgt ist und das Label so wie im mittleren Bild das Blaue sich ausserhalb des M5StickC befindet kann man die Eigenschaften nicht mehr verändern, ohne es neu zu erzeugen. Der Klick auf das blaue Label löscht es!





Die Einstellung der Rotation im Eigenschaftendialog bewirkt nichts! Wichtig ist die Einstellung im Block "Set screen rotation mode = 1" (s. unten rechts).


Download

Ich habe das Testprogramm, dass die oben gezeigte Ausgabe erzeugt hier zum Download bereitgestellt.

Zum Download des Programms bitte mit der rechten Mousetaste auf den Link klicken und dann auf "Ziel speichern unter ..." mit der linken Mousetaste klicken. (Ich habe leider keine bessere Möglichkeit gefunden.)

Farbvarianten-001.m5f

Diese Seite wurde zuletzt am 14. April 2020 um 14:28 Uhr geändert. Diese Seite wurde bisher 22.675 mal abgerufen.