grafische Primitive

Dieser Abschnitt beschäftigt sich mit grafischen Primitiven. Dazu zählen wir zum Beispiel Punkte, Linien, Rechtecke und Kreise. Diese können in unterschiedlichen Varianten auf dem Display dargestellt werden. Die folgenden Übungen zeigen die exemplarische Anwendung ausgewählter grafischer Primitive.

Aufgabe

Entwickeln Sie eine Mikrocontrolleranwendung (Applikation) bei der ein Text, ein Pixel, eine Linie, eine Rechteck und ein Kreis mit unterschiedlichen Farben und Positionen auf dem Grafikdisplay angezeigt werden.

Vorbereitung

Falls Sie nicht in der Vorgehensmodell-Ebene sind, navigieren Sie diese bitte an (nach oben). Falls das Projekt nicht mehr geöffnet ist, öffnen sie das SiSy UML-Projekt wieder. Legen Sie ein neues Klassendiagramm an und wählen Sie die Sprache ARM C++. Beachten Sie die Einstellungen für die Zielplattform STM32F4-Discovery. Beim Öffnen des Diagramms (rechte Maustaste, nach unten) laden Sie die Diagrammvorlage für eine ARM C++ Applikation mit Grafikdisplay ohne µGL.

(Mit installiertem Flash kann man an dieser Stelle ein Video in dieser Web-Seite ansehen.)

Selektieren Sie die Opration onStart der Klasse Application.

Ersetzen Sie den möglicherweise vorhandenen Beispielquelltext durch folgenden Code.

onStart()
display.clearScreen();

Erstellen und übertragen Sie die Anwendung auf den Mikrocontroller.

Jetzt sollte das Display leer sein.

Entwurf

Die Vorüberlegungen, also der Entwurf einer solchen kleinen Anwendung, kann als Kommentar gleich in die betreffende Operation onStart eingetragen werden. Die Anwendung soll nach dem Einschalten folgende Schritte ausführen: 

// Display löschen,
// warte 1s
// einen roten Text "Hallo Display" anzeigen
// warte 1s
// einen Bildpunkt setzen
// warte 1s
// einen schwarzen Bildpunkt (Pixel) zeichnen
// warte 1s
// eine blaue Linie darstellen
// warte 1s
// ein grün gefülltes Rechteck zeichnen
// warte 1s
// einen grauen Kreis malen

Bisher haben wir die Displayfunktionen clearScreen, drawText, setFont und setColor kennengelernt. Für die Lösung dieser Aufgabe benötigen wir noch die Operationen drawPixel, drawLine, fillRect und drawCircle. Zusätzlich werden Sie die Klasse Rect aus dem Paket Geometrics benötigen. Schauen Sie sich die Referenz zu diesen Klassen und Funktionen in Ruhe an.

Realisierung

Nachdem die Vorbereitungen abgeschlossen sind, muss jetzt die Operation onStart() mit dem entsprechenden Code gefüllt werden. Dazu arbeiten wir unseren Entwurf einfach der Reihe nach ab. 

display.clearScreen();
waitMs(1000);
display.setFont(fontLargePlain);
display.setColor(RGB(255,0,0));
display.drawText(50,50,"Hallo Welt!");
waitMs(1000);
display.setColor(RGB(0,0,0));
display.drawPixel(50,80);
waitMs(1000);
display.setColor(RGB(0,0,255));
display.drawLine(60,90,100,100);
waitMs(1000);
display.setColor(RGB(0,255,0));
Rect r(10,220,50,70);
display.fillRect(r);
waitMs(1000);
display.setColor(RGB(128,128,128));
display.drawCircle(50,140,30);

Test

Erstellen und übertragen Sie die Anwendung auf den Controller. Korrigieren Sie ggf. Syntaxfehler. Vergleichen sie die Ausgabe auf dem Display mit dem Programmcode.

Videozusammenfassung

Erlernte und gefestigte Arbeitsschritte:

  1. Klassendiagramm anlegen und bearbeiten
  2. Diagrammvorlage für ARM C++ Applikation auswählen und laden
  3. den nötigen Quellcode in den Operationen erstellen
  4. Erstellen und Brennen einer ARM Applikation im Klassendiagramm
  5. die grafischen Primitive Punkt, Linie, Kreis, Rechteck anwenden

Und weil es so schön war hier das Ganze noch mal als Video.

(Mit installiertem Flash kann man an dieser Stelle ein Video in dieser Web-Seite ansehen.)
besser auf youTube

Übung

Zur Festigung des Erlernten eine kleine Übung. Lösen sie folgende Aufgabe selbstständig, indem Sie die Anwednung um folgende Elemente erweitern:

  1. ein Rechteck mit rotem Rahmen und grauer Füllung,
  2. darin einen gelben Kreis und
  3. eine grüne Linie diagonal über diese Elemente

Lösungshinweise:

  1. warte 1s
  2. zeichne den roten Rahmen des Rechtecks
  3. fülle das Rechteck grau aus
  4. zeichne einen gelben Kreis in das Rechteck
  5. zeiche die grüne Linie durch den Kreis

Wenn Sie die Anforderungen korrekt umgesetzt haben, sollte Ihr Display Folgendes darstellen:

Der für diese Übung relevante Teil befindet rechts unten auf dem Display.

nächster Abschnitt