====== Hallo Display ohne µGL GUI ====== Dann frisch ans Werk. Die erste Übung mit der wahrscheinlich ungewohnten Umgebung soll die einfache Ausgabe der Zeichenkette sein. ===== Die Aufgabe ===== Entwickeln Sie eine Mikrocontrolleranwendung (Applikation), die auf dem Display die Ausgabe "Hallo Display!" erscheinen lässt. ===== 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//. >{{:neuesklasendiagramm.jpg?direct&250|}}{{:ggauswahl.png?direct&180|}}{{:ggohnegl.png?direct&280|}} ===== Entwurf ===== Die Aufgabe besteht darin, ein Grafikdisplay anzusteuern und einen Text darauf auszugeben. In der Operation //onStart// sind folgende Schritte auszuführen: - Display löschen, //clearScreen// - warte 1s, //waitMs// - Schriftart setzen, //setFont// - Text ausgeben, //drawText// ===== Realisierung ===== Das Klassendiagramm sollte der folgenden Darstellung entsprechen: >>>{{:ggohnegl.png?direct&700|}} * die zentrale Klasse ist die //Application// * diese verfügt über die Operationen //onStart// und //onWork// * Die Applikation ist ein //ArmAppKernel// * Das globale Objekt //app// ist die Instanz der Klasse //Application// * Die Klasse //Application// verfügt über ein //Display// mit dem Attributnamen //display// * Das //display// der Klasse Application ist öffentlich * Die Klasse //Display// ist die Realisierung eines konkreten Displays Die Aufgabenstellung fordert, dass auf dem Display der Text "Hallo Display!" ausgegeben wird. Für die Initialisierung von Geräten und einmalige Aktionen beim //Hochfahren// des Systems steht die Operation //onStart// zur Verfügung. Selektieren Sie diese Operation. Löschen Sie möglicherweise vorhandenen Beispielquelltext. Geben Sie im Quelltexteditor folgenden Code ein: >>>**onStart():** >>><code cpp> // das Display löschen display.clearScreen(); // ein bisschen Warten waitMs(1000); // die gewünschte Schriftart auswählen display.setFont( fontLargePlain ); // "Hallo Display" an Position 10,10 ausgeben display.drawText(10,10,"Hallo Display!"); </code> Die Ausgabe des Textes erfolgt in diesem Beispiel mit der Nachricht //[[http://www.myugl.de/_referenz/v003/PecLcd.htm#274_Details|drawText]]//. Damit unser erstes //Hallo// ordentlich ins Auge fällt, weisen wir dem Display mit der Nachricht //[[http://www.myugl.de/_referenz/v003/PecLcd.htm#284_Details|setFont]]// eine große Schriftart für die nächste Ausgabe zu. Beobachten Sie gleichzeitig das rechts neben dem Quelltexteditor befindliche Sequenzdiagramm. Dieses wird automatisch aus dem von Ihnen eingegebenen Code erzeugt. Das Sequenzdiagramm kann zum einen für Dokumentationszwecke genutzt werden, zum anderen soll es gleichzeitig als Review für den Quellcode dienen. {{:12_austauschen.png?300|}} ===== Test ===== Übersetzen Sie das Programm. Korrigieren Sie ggf. Schreibfehler. Übertragen Sie das lauffähige Programm in den Programmspeicher des Controllers. - Erstellen (Kompilieren und Linken) - Brennen >{{:erstellenbrennen.png?300|}}{{:11_hallowelt.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 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/s1_CWK8FEDw</flashplayer> >>>[[http://youtu.be/s1_CWK8FEDw|besser auf youTube]] ====== Übung ====== **1. Font ändern**\\ Um den Font zu ändern, zum Beispiel in eine mittlere Schriftart, müssen Sie folgenden Code "onStart" ändern: >>> display.setFont(fontMediumPlain); **2. Farbe ändern**\\ Mit folgendem Code können Sie die Schriftfarbe beispielsweise in rot ändern: >>> display.setColor(RGB(255,0,0)); Beachten Sie, dass die Farbe vor der Nachricht //drawText// gesetzt werden muss. Nachdem Sie alles erstellt und gebrannt haben, sollte auf Ihrem Display Folgendes zu sehen sein: {{:13_halloweltfettrot.jpg?300|}} ====== Nächstes Thema ====== * [[grafische Primitive|Mit einer grafischen Primitive weiter arbeiten]] * [[start|zurück zur Übersicht]]