View source for Blockly-Kurs 001-ENV

{{kpst-email|M5-UIF-Kurs001-ENV...}}

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

== Die ENV-SENSOR-UNIT ==

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

[[image:M5-UIF-Kurs001-ENV-001.png|500px]] 

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.

[[image:M5-UIF-Kurs001-ENV-002.png|500px]]

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|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.

[[image:M5-UIF-Kurs001-ENV-005.png|500px]]

Nun wollen wir ein kleines Programm erstellen das uns die Werte anzeigt. Dazu benutzen wir aus der Gruppe "Grafik" den Block "LCD ausgeben.

[[image:M5-UIF-Kurs001-ENV-012.png|600px]]

Hier können wir den Text eingeben, der angezeigt werden soll. die Position auf dem Display und die Farbe der Schrift. Statt eines Textes können wir auch eine Variable oder den Wert einer Abfrage eingeben. Letzteres werden wir hier tun. Wenn wir die Ausgabe für alle drei Werte eingetragen haben sieht das Programm so aus: 

[[image:M5-UIF-Kurs001-ENV-006.png|1000px]]

Das Ergebnis sollte dann so aussehen:

[[image:M5-UIF-Kurs001-ENV-007.png|1000px]]  <!--Display M5Stick C -->

Diese Darstellung kann noch nicht so richtig überzeugen. Zuerst müssen wird die Nachkommastellen geeignet abschneiden. Dazu eignet sich der Block "Reduce" aus der Gruppe "Text". 

[[image:M5-UIF-Kurs001-ENV-013.png|400px]]

Unser Programm sieht nun folgendermassen aus:

[[image:M5-UIF-Kurs001-ENV-014.png|1000px]]

Das Ergebnis sollte jetzt so aussehen:

[[image:M5-UIF-Kurs001-ENV-015.png|1000px]]

Die Darstellung ist schon gefälliger. Wir wissen aber nicht welcher Wert für welche Eigenschaft steht. Es wäre also sinnvoll, wenn hinter dem Wert noch die Einheit hingeschrieben wird. Dazu gibt es in Gruppe "Text" einen namenlosen Block, dessen Funktion aber auch so ersichtlich ist.

[[image:M5-UIF-Kurs001-ENV-016.png|400px]]

Mit ihm lassen sich Texte zusammenfügen. In unser Programm eingebaut sieht es dann so aus:

[[image:M5-UIF-Kurs001-ENV-017.png|1000px]]

Die Anzeige auf dem Display zeigt jetzt alle wichtigen Informationen.

[[image:M5-UIF-Kurs001-ENV-018.png|400px]]

== DER UI-SIMMULATOR ==

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

[[image:M5-UIF-Kurs001-ENV-008.png|600px]]

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. 

[[image:M5-UIF-Kurs001-ENV-009.png|600px]]

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ü.

[[image:M5-UIF-Kurs001-ENV-010.png|600px]]

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:

[[image:M5-UIF-Kurs001-ENV-011.png|600px]]







[[Category:PeterS]]   <!-- [[category:UIFlow]] -->