Einen statischen Text „Hallo Welt“ erstellen
Eine der wichtigsten Herausforderungen der Informatik ist das "Hallo Welt Problem". Diesem muss sich jeder Programmierer mindestens einmal im Leben stellen. Es ist aus zwei Perspektiven eine durchaus ernste Problemstellung. Zum einen dient es in einem ersten einfachen Schritt dazu, Notation, Struktur und Funktionsprinzip einer Anwendung kennenzulernen. Die zweite Aufgabe besteht darin, die Anfangshürde bei der Programmierung so klein wie möglich zu halten und mit dem sich hoffentlich einstellenden Erfolgserlebnis die Motivation am Lernen aufzubauen oder aufrecht zu erhalten. Unserem „Hallo Welt“ in einer µGL GUI gingen andere voraus. Dabei war der allererste Ruf in die Welt das Einschalten einer kleinen LED. Erinnern wir uns:
das erste "Hallo Welt" eines STM32 in C
int main() { /* GPIOD Takt einschalten */ RCC_AHB1PeriphClockCmd(RCC_AHB1Periph_GPIOD, ENABLE); /* Konfiguriere GPIO Port D15 */ GPIO_InitTypeDef GPIO_InitStructure; GPIO_StructInit (&GPIO_InitStructure); GPIO_InitStructure.GPIO_Pin = GPIO_Pin_15; GPIO_InitStructure.GPIO_Mode = GPIO_Mode_OUT; GPIO_InitStructure.GPIO_OType = GPIO_OType_PP; GPIO_InitStructure.GPIO_Speed = GPIO_Speed_100MHz; GPIO_InitStructure.GPIO_PuPd = GPIO_PuPd_NOPULL; GPIO_Init(GPIOD, &GPIO_InitStructure); /* LED an GPIO Port D15 an*/ GPIO_SetBits(GPIOD,GPIO_Pin_15); while (true) { //... } }
Dem folgte ein objektorientiertes „Hallo Welt“:
das "Hallo Welt" eines STM32 in C++
////////////////////////////////////////////////////////// // Hallo mySTM32 C++ ////////////////////////////////////////////////////////// class Application : public AppKernel { public: void onStart() { // LED konfigurieren led.config(GPIOD,BIT15); // LED an schalten led.on(); } public: void onWork() { //... } } app; //////////////////////////////////////////////////////////
Und ein einfaches „Hallo Welt“ auf einem Grafikdisplay.
das grafische "Hallo Welt" eines STM32
////////////////////////////////////////////////////////// // Hallo mySTM32 C++ ////////////////////////////////////////////////////////// class Application : public AppKernel { public: Display display; public: void onStart() { // das Display löschen display.clearScreen(); // die gewünschte Schriftart auswählen display.setFont( fontLargePlain ); // "Hallo Display" an Position 10,10 ausgeben display.drawText(10,10,"Hallo Display!"); } public: void onWork() { } } app; //////////////////////////////////////////////////////////
Die Aufgabe
Das „Hallo Welt“ in unserer µGL GUI soll dazu dienen eines der einfachsten Steuerlemente (Controls), die Klasse UglText kennenzulernen. Dabei soll eine beispielhafte Anwendung entwickelt werden, die folgende Anforderungen erfüllt:
- Basiklasse UglControl verstehen
- Klasse UglText anwenden
- Möglichkeiten der Klasse UglText kennen lernen
Grundlagen zum Text-Control
Die Klasse UglText basiert auf der Klasse UglControl.
Die wichtigsten Merkmale dieser Klasse sind:
- durch die Ableitung von AppModul ist es eine aktive Klasse
- ducrh die Ableitung von UglEventHandler ist jedes Control in das µGL Nachrichtensystem integriert und verarbeitet UglEvents
- jedes Control gehört zu einem UglContainer, das enspricht einem Bildschirm bzw. einer Form
- jedes Control wird in Position und Größe durch ein Rechteck definiert
- jedes Control hat einen Text
- jedes Control kann einen eigenen Font besitzen
- ein Control kann verborgen sein
- Controls werden mit der Operation createControl erzeugt
Die Klasse UglText ist eine Ableitung der Basisklasse UglControl .
Das wichtigste neue Merkmal ist das Attribut pos, welches die Ausrichtung des Textes innerhalb des Controls bestimmt. Dabei gibt es für die Textausrichtung folgende kombinierbare Möglichkeiten:
- Align::Left
- Align::Right
- Align::Center
- Align::Top
- Align::VCenter
- Align::Bottom
enum Align { Left=0, Right=1, Center=2, Top=4, VCenter=8, Bottom=16, NoWrap=32 };
Mit Align::NoWrap kann der Wortumbruch innerhalb des Controls abgeschaltet 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++. Öffnen Sie das Klassendiagramm. Suchen Sie im Libstore mit dem Suchbegriff „GUI“ nach dem Grundgerüst für eine µGL GUI Anwendung. Beachten Sie die Zielhardware, z.B. STM32F407 oder STM32F429.
Die geladene Vorlage sollte der folgenden Darstellung entsprechen:
Entwurf der Anwendung "Hallo Welt"
Wir wollen den Start-Bildschirm unserer Beispielanwendung um zwei Text-Controls erweitern.
- Text1
- Text „Hallo Welt“
- großer Font
- Text2
- Text: „ein erster kleiner Versuch“
- mittlerer Font
- Varianten:
- linksbündig
- mittig
- rechtsbündig
- inline-Formatierung
Realisierung der Anwendung "Hallo Welt"
Bevor wir in die Realisierung gehen, verdeutlichen wir uns die Struktur einer µGL Anwendung nochmals mit dem folgenden vereinfachten Klassendiagramm:
Um einem Bildschirm ein weiteres Steuerelement hinzuzufügen, sind folgende Arbeitsschritte nötig:
- Attribute vom Typ UglText in die Bildschirmklasse (Form) einfügen
- in der Operation onInit die Steuerelemente erzeugen
- Positionsrechteck festlegen
- ggf. Schriftart und Ausrichtung festlegen
- Steuerelement erzeugen
- Eigentümer festlegen
- Position übergeben
- Text übergeben
Öffnen Sie den Ordner MeineBildschirme. Fügen Sie in der Klasse StartForm in der Operation onInit folgenden Quellcode an:
onInit
... uint8_t align; //align = Align::Center|Align::VCenter; //align = Align::Right|Align::Bottom; align = Align::Left|Align::Top; Rect posR(10,80,150,30); text1.font = &fontLargePlain; text1.pos = align; text1.createControl(this,posR,"Hallo Welt!"); posR.top += 30; text2.font = &fontMediumPlain; text2.pos = align; text2.createControl(this,posR,"Das ist ein erster &W&Ikleiner&0 Versuch.");
Erstellen Sie die Anwendung und übertragen Sie den Programmcode auf den Mikrocontroller. Vergleichen Sie die Anzeige mit dem von Ihnen erstellten Quellcode. Variieren Sie die Ausrichtung des Textes.
