Blockly-Kurs 001-ENV: Unterschied zwischen den Versionen

Aus Attraktor Wiki

Wechseln zu: Navigation, Suche
K
K
Zeile 15: Zeile 15:
 
Dann erscheint das Auswahlfenster auf dem man die UNIT/HAT anklickt und dann auf OK klicken und schon erschein das Icon der UNIT/HAT unter dem M5Stck C.
 
Dann erscheint das Auswahlfenster auf dem man die UNIT/HAT anklickt und dann auf OK klicken und schon erschein das Icon der UNIT/HAT unter dem M5Stck C.
 
   
 
   
[[image:M5-UIF-Kurs001-ENV-003.png|600px]] [[image:M5-UIF-Kurs004-ENV-004.png|500px]]
+
[[image:M5-UIF-Kurs001-ENV-003.png|1000px]]  
 +
 
 +
[[image:M5-UIF-Kurs004-ENV-004.png|500px]]
  
 
Unter Einheiten/Umgebung erhalten wir die Blöcke für die ENV-UNIT angezeigt. Es sind nur drei, mit denen wir die drei Werte für Temperatur, Luftdruck und Luftfeuchte auslesen können.
 
Unter Einheiten/Umgebung erhalten wir die Blöcke für die ENV-UNIT angezeigt. Es sind nur drei, mit denen wir die drei Werte für Temperatur, Luftdruck und Luftfeuchte auslesen können.

Version vom 9. September 2020, 18:03 Uhr

Von Peter (peter@attraktor.org)

Bilderprefix: M5-UIF-Kurs001-ENV...

Im heutigen Modul wollen wir uns die ENV-Unit einmal näher ansehen und anschließend eine graphische Oberfläche mit dem UI-Simulator erstellen.

Es gibt inzwischen zwei Versionen des ENV-Unit: ENV und ENVII. Derzeit ist nur noch ENVII lieferbar.

M5-UIF-Kurs001-ENV-001.png

Welche man verwendet ist egal, wichtig ist nur, dass in der UIFlow-IDE die richtige ausgewählt wird.

Dazu klickt man im UI-Simulator der IDE auf das + unter UNITs bzw. HATs wenn man den ENV-Hat einsetzt.

M5-UIF-Kurs001-ENV-002.png

Dann erscheint das Auswahlfenster auf dem man die UNIT/HAT anklickt und dann auf OK klicken und schon erschein das Icon der UNIT/HAT unter dem M5Stck C.

M5-UIF-Kurs001-ENV-003.png

M5-UIF-Kurs004-ENV-004.png

Unter Einheiten/Umgebung erhalten wir die Blöcke für die ENV-UNIT angezeigt. Es sind nur drei, mit denen wir die drei Werte für Temperatur, Luftdruck und Luftfeuchte auslesen können.

M5-UIF-Kurs001-ENV-005.png

Nun wollen wir ein kleines Programm erstellen das uns die Werte anzeigt.

M5-UIF-Kurs001-ENV-006.png

Das Ergwbnis sollte dann so aussehen:

1000px

Nun sieht diese Ausgabe nicht sehr ansprechend aus. Deshalb wollen wir jetzt den UI-Simulator ausprobieren und damit eine ansprechendere Ausgabe erzeugen.

M5-UIF-Kurs001-ENV-008.png

Auf der Seitenleiste links sehen wir alle Gestaltungselemente die uns die IDE zur Verfügung stellt.

Zuerst wollen wir einen Titel darstellen. Dazu dient das Element "Title". Wir fahren mit dem Mauszeiger darüber, halten die linke Taste gedrückt, fahren über das Display und lassen die Maustatsste wieder los. Der Titel setzt sich dann automatisch an den oberen Rand des Display's.

M5-UIF-Kurs001-ENV-009.png

Es kann nur einen Titel geben, auch wenn in die Eigenschaften etwas anderes suggerieren. Mit einem Linksklick auf den Titel gelangen wir zu seinem Eigenschaften Menü.

M5-UIF-Kurs001-ENV-010.png

Hier können wir Eigenschaften wie z.B. die Farbe der Schrift und des Hintergrundes, aber auch den Namen des Elemente und seinen Text verändern. Das sieht dann z.B. so aus:

M5-UIF-Kurs001-ENV-011.png