====== Einen statischen Text „Hallo Welt“ erstellen ====== Eine der wichtigsten Herausforderungen der Informatik ist das //[[http://de.wikipedia.org/wiki/Hallo-Welt-Programm|"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: >>>**[[http://www.mystm32.de/doku.php?id=hallo_c|das erste "Hallo Welt" eines STM32 in C]]** >>><code cpp> 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) { //... } } </code> Dem folgte ein objektorientiertes "Hallo Welt": >>>**[[http://www.mystm32.de/doku.php?id=hallo_uml|das "Hallo Welt" eines STM32 in C++]]** >>><code cpp> ////////////////////////////////////////////////////////// // 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; ////////////////////////////////////////////////////////// </code> Und ein einfaches "Hallo Welt" auf einem Grafikdisplay. >>>**[[http://www.mystm32.de/doku.php?id=hallo_uml|das grafische "Hallo Welt" eines STM32]]** >>><code cpp> ////////////////////////////////////////////////////////// // 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; ////////////////////////////////////////////////////////// </code> ====== Die Aufgabe ====== Das "Hallo Welt" in unserer µGL GUI soll dazu dienen eines der einfachsten Steuerlemente (Controls), die Klasse //[[http://www.myugl.de/_referenz/v005/UglText.htm|UglText]]// kennenzulernen. Dabei soll eine beispielhafte Anwendung entwickelt werden, die folgende Anforderungen erfüllt: * Basiklasse //[[http://www.myugl.de/_referenz/v005/UglControl.htm|UglControl]]// verstehen * Klasse //[[http://www.myugl.de/_referenz/v005/UglText.htm|UglText]]// anwenden * Möglichkeiten der Klasse UglText kennen lernen ====== Grundlagen zum Text-Control ====== Die Klasse //[[http://www.myugl.de/_referenz/v005/UglText.htm|UglText]]// basiert auf der Klasse //[[http://www.myugl.de/_referenz/v005/UglControl.htm|UglControl]]//. >>>{{::classuglcontrol.png?direct&350|}} Die wichtigsten Merkmale dieser Klasse sind: * durch die Ableitung von //AppModul// ist es eine aktive Klasse * ducrh die Ableitung von //[[http://www.myugl.de/_referenz/v005/UglEventHandler.htm|UglEventHandler]]// ist jedes Control in das µGL Nachrichtensystem integriert und verarbeitet //[[http://www.myugl.de/_referenz/v005/UglEvent.htm|UglEvents]]// * jedes Control gehört zu einem //[[http://www.myugl.de/_referenz/v005/UglContainer.htm|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 //[[http://www.myugl.de/_referenz/v005/UglControl.htm#410_Details|createControl]]// erzeugt Die Klasse //UglText// ist eine Ableitung der Basisklasse //UglControl// . >>>{{::classugltext.png?direct&300|}} 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 ><code cpp> enum Align { Left=0, Right=1, Center=2, Top=4, VCenter=8, Bottom=16, NoWrap=32 }; </code> 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. >>><flashplayer width="600" height="475" position="0">file=http://youtu.be/90PBa7zNTSo</flashplayer> Die geladene Vorlage sollte der folgenden Darstellung entsprechen: >{{::uglgui_gg.png?direct&800|}} ====== 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: >>>{{::appstructure.png?direct&700|}} 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: >>>{{::meinebsnachunten.png?direct&300|}} {{::attributzuform.png?direct&300|}} >>>**onInit** >>><code cpp> ... 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."); </code> 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. >>{{::hallowelt.jpg?direct&200|}} {{::hallocenter.jpg?direct&200|}} {{::halloright.jpg?direct&200|}} ====== Videozusammenfassung ====== >>><flashplayer width="600" height="475" position="0">file=http://youtu.be/EBKhQ4NSoiI</flashplayer> >>>[[http://youtu.be/EBKhQ4NSoiI|besser auf youTube]] ====== Nächstes Thema ====== * [[einfache_steuerelemente_mit_der_ugl|Einfache Steuerelemente mit der µGL]] * [[start|zurück zur Übersicht]]