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.

Videozusammenfassung

besser auf youTube