UIFlow-GU-DesignerAus Attraktor Wiki(Weitergeleitet von UIFlow-GUI)
Von Peter (peter@attraktor.org) Bilderprefix: M5-UIF-GUI-... InhaltsverzeichnisÜbersichtDas KoordinatensystemDas 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:
Title - TitelDas 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. In diesem Fenster können folgende Eigenschaften eingestellt werden:
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. 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
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. 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. 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:
Label - BezeichnungDas 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 - RechteckM5-UIF-GUI-030.png Circle - KreisM5-UIF-GUI-040.png Image - BildM5-UIF-GUI-050.png M5StickC mit horizontalem DisplayM5-UIF-GUI-060.png 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).
DownloadIch 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.) |