====== grafische Primitive ====== Dieser Abschnitt beschäftigt sich mit [[http://de.wikipedia.org/wiki/Grafisches_Primitiv|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//. >>><flashplayer width="400" height="325">file=http://youtu.be/Bgj90aciLiI</flashplayer> Selektieren Sie die Opration //onStart// der Klasse Application. >>{{:6_grundgeruest.png?700|}} Ersetzen Sie den möglicherweise vorhandenen Beispielquelltext durch folgenden Code. >>>**onStart()** >>><code cpp> display.clearScreen(); </code> Erstellen und übertragen Sie die Anwendung auf den Mikrocontroller. >>>{{:7_erstellen_und_uebertragen.png?500|}} Jetzt sollte das Display leer sein. >>>{{:6_clearscreen.jpg?200|}} ===== 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: >>><code cpp> // 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 </code> Bisher haben wir die Displayfunktionen //[[http://www.myugl.de/_referenz/v003/PecLcd.htm#285_Details|clearScreen]]//, //[[http://www.myugl.de/_referenz/v003/PecLcd.htm#274_Details|drawText]]//, //[[http://www.myugl.de/_referenz/v003/PecLcd.htm#284_Details|setFont]]// und //[[http://www.myugl.de/_referenz/v003/PecLcd.htm#281_Details|setColor]]// kennengelernt. Für die Lösung dieser Aufgabe benötigen wir noch die Operationen //[[http://www.myugl.de/_referenz/v003/PecLcd.htm#271_Details|drawPixel]]//, //[[http://www.myugl.de/_referenz/v003/PecLcd.htm#270_Details|drawLine]]//, //[[http://www.myugl.de/_referenz/v003/PecLcd.htm#277_Details|fillRect]]// und //[[http://www.myugl.de/_referenz/v003/PecLcd.htm#276_Details|drawCircle]]//. Zusätzlich werden Sie die Klasse //[[http://www.myugl.de/_referenz/v003/Rect_16.htm|Rect]]// aus dem Paket //[[http://www.myugl.de/_referenz/v003/Geometrics.htm|Geometrics]]// benötigen. Schauen Sie sich die [[http://www.myugl.de/_referenz/v003/PecLcd.htm#top|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. >>><code cpp> 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); </code> ===== Test ===== Erstellen und übertragen Sie die Anwendung auf den Controller. Korrigieren Sie ggf. Syntaxfehler. Vergleichen sie die Ausgabe auf dem Display mit dem Programmcode. >>>{{:15_grafischeprimitive.jpg?200|}} ====== Videozusammenfassung ====== Erlernte und gefestigte Arbeitsschritte: - //Klassendiagramm// anlegen und bearbeiten - Diagrammvorlage für //ARM C++ Applikation// auswählen und laden - den nötigen //Quellcode// in den Operationen erstellen - //Erstellen und Brennen// einer ARM Applikation im Klassendiagramm - die grafischen Primitive Punkt, Linie, Kreis, Rechteck anwenden Und weil es so schön war hier das Ganze noch mal als Video. >>><flashplayer width="600" height="475" position="0">file=http://youtu.be/2pnbsNHn7l0</flashplayer> >>>[[http://youtu.be/2pnbsNHn7l0|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: - ein Rechteck mit rotem Rahmen und grauer Füllung, - darin einen gelben Kreis und - eine grüne Linie diagonal über diese Elemente Lösungshinweise: - warte 1s - zeichne den roten Rahmen des Rechtecks - fülle das Rechteck grau aus - zeichne einen gelben Kreis in das Rechteck - zeiche die grüne Linie durch den Kreis Wenn Sie die Anforderungen korrekt umgesetzt haben, sollte Ihr Display Folgendes darstellen: >>>{{:16_uebung.jpg?300|}} Der für diese Übung relevante Teil befindet rechts unten auf dem Display. ====== nächster Abschnitt ====== * [[weitere_funktionen_des_grafikdisplays|weitere Funktionen des Grafikdisplays]] * [[start|zurück zur Übersicht]]