Blockly-Kurs 001-ENV: Unterschied zwischen den Versionen

Aus Attraktor Wiki

Wechseln zu: Navigation, Suche
Zeile 25: Zeile 25:
 
Nun wollen wir ein kleines Programm erstellen das uns die Werte anzeigt. Dazu benutzen wir aus der Gruppe "Grafik" den Block "LCD ausgeben.
 
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|1000px]]
+
[[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:  
 
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:  
Zeile 37: Zeile 37:
 
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".  
 
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|1000px]]
+
[[image:M5-UIF-Kurs001-ENV-013.png|200px]]
  
 
Unser Programm sieht nun folgendermassen aus:
 
Unser Programm sieht nun folgendermassen aus:
Zeile 49: Zeile 49:
 
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.
 
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|200px]]
+
[[image:M5-UIF-Kurs001-ENV-016.png|400px]]
  
 
Mit ihm lassen sich Texte zusammenfügen. In unser Programm eingebaut sieht es dann so aus:
 
Mit ihm lassen sich Texte zusammenfügen. In unser Programm eingebaut sieht es dann so aus:
  
 
[[image:M5-UIF-Kurs001-ENV-017.png|1000px]]
 
[[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]]
  
 
Nun sieht diese Ausgabe nicht sehr ansprechend aus. Deshalb wollen wir jetzt den UI-Simulator ausprobieren und damit eine ansprechendere Ausgabe erzeugen.
 
Nun sieht diese Ausgabe nicht sehr ansprechend aus. Deshalb wollen wir jetzt den UI-Simulator ausprobieren und damit eine ansprechendere Ausgabe erzeugen.

Version vom 10. September 2020, 13:43 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. Dazu benutzen wir aus der Gruppe "Grafik" den Block "LCD ausgeben.

M5-UIF-Kurs001-ENV-012.png

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:

M5-UIF-Kurs001-ENV-006.png

Das Ergebnis sollte dann so aussehen:

1000px

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

M5-UIF-Kurs001-ENV-013.png

Unser Programm sieht nun folgendermassen aus:

M5-UIF-Kurs001-ENV-014.png

Das Ergebnis sollte jetzt so aussehen:

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.

M5-UIF-Kurs001-ENV-016.png

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

M5-UIF-Kurs001-ENV-017.png

Die Anzeige auf dem Display zeigt jetzt alle wichtigen Informationen.

400px

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