====== Anwendungsbeispiel Taschenrechner ======= Als kleine Beispielanwendung soll die Implementation eines einfachen Taschenrechners dienen. Dieser soll die Grundrechenarten beherrschen. Um den Taschenrechner ggf. elegant weiter zu verwenden soll dieser nicht als //UglForm// sondern als //UglPopup//. ====== 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++//. Öffenen 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|}} Offnen Sie das Paket //MeineBildschirme// in einem neuen Fenster indem Sie das Paket selektieren und im rechte Maustasten-Menü //"im neuen Fenster öffnen"// wählen. ====== Das GUI_Design ====== Für die Gestaltung der Benutzeroberfläche fertigen wir ein kleines Layout an um uns daran zu orientieren. Wer es ganz genau machen will nimmt Millimeterpapier und kann dann die Positionen der Steuerelemente auszählen. >>>{{::entwurftaschenrechner.jpg?direct&300|}} ====== Das Klassendiagramm erweitern ====== Wechseln Sie ggf. in das Paket //MeineBildschirme//. >>>{{:inneuemfenster.png?direct&300|}} Ändern Sie das Klassendiagramm wie folgt: * Klasse //StartForm// * Attribut: //btnText// vom Typ //UglButton// in //btnCalc// * Attribut: //txtWelcome// vom Typ //UglText// in //result// * neue Klasse //Calculator// einfügen * als Realisierung eines //UglPopups// aus dem Paket //UglComons// oder //UglManagement// * mit den Attributen: * //value// vom Typ //Ugltext// * ein Button-Array //btn[19]// vom Typ //UglButton// * //rechne// vom Typ //char// * //operant// vom Typ //float// * //okEvent// vom Typ //eventNr_t// >{{:classstartformvorlage.png?direct&100|}}{{:pfeilrechts.png?direct&80|}}{{::classtaschenrechner.png?direct&500|}} ====== Quellcode der Klasse StartForm ändern ====== Die vorhandene Klasse //StartForm// passen wir auf unsere Bedürfnisse an. Die Steuerelemente benennen wir um und ändern der Quellcode entsprechend den Anforderungen. Die Schaltfläche soll den Taschenrechner starten und das Textfeld das vom Taschenrechner übernommene Ergebnis anzeigen. >>>**StartForm::onEvent** >>><code cpp> Rect r( 20, 20, 200, 20 ); btnCalc.clickEvent = 'T'; btnCalc.createControl(this, r, "Taschenrechner" ); r.top += 30; result.pos = Align::Right; result.createControl(this, r, "Ergebnis: ..." ); </code> >>>**StartForm::onEvent** >>><code cpp> if (nr=='T') { Calculator* calc=new Calculator; calc->okEvent = 'R'; app.gui.show(calc); } if (nr=='R') { result.text="Ergebnis: &W"+gPopup->text+"&w "; result.paint(); } </code> ====== Initialisierung des Taschenrechners ====== Die Initialisierung des Taschenrechners orientiert sich am vorgelegten GUI-Design. >>>**Calculator::onInit** >>><code cpp> #define margin 5 #define border 30 font=&fontLargePlain; Rect r( margin, margin, 220, 20 ); app.display.drawRect(r); value.pos = Align::Right; value.createControl(this, r, "" ); r.top = 40; r.left = border; r.height = 40; r.width = 40; char num[2] = "1"; int i; for ( i=1;i<10 ;i++ ) { btn[i].clickEvent = num[0]; btn[i].createControl(this, r, num ); r.left = r.left + r.width + margin; if ( r.left > (r.width+margin)*3 ) { r.top += r.height + margin; r.left = border; } num[0]++; } r.left = border; btn[i].clickEvent = 'C'; btn[i].createControl(this, r, "C" ); i++; r.left = r.left + r.width + margin; btn[i].clickEvent = '0'; btn[i].createControl(this, r, "0" ); i++; r.left = r.left + r.width + margin; btn[i].clickEvent = '.'; btn[i].createControl(this, r, "." ); i++; r.top = 40; r.left= (r.width+margin)*3+border; btn[i].clickEvent = '+'; btn[i].createControl(this, r, "+" ); i++; r.top += r.height + margin; btn[i].clickEvent = '-'; btn[i].createControl(this, r, "-" ); i++; r.top += r.height + margin; btn[i].clickEvent = '*'; btn[i].createControl(this, r, "*" ); i++; r.top += r.height + margin; btn[i].clickEvent = '/'; btn[i].createControl(this, r, "/" ); i++; r.top += r.height + margin; r.left -= r.width+margin; r.width+= r.width+margin; btn[i].clickEvent = 'R'; btn[i].createControl(this, r, "&WOK" ); i++; r.left = border; btn[i].clickEvent = '='; btn[i].createControl(this, r, "&W=" ); </code> ====== Die Logik des Taschenrechners ====== >>>**Calculator::calculate** >>><code cpp> float ergebnis,operant2; operant2=atof(value.text); ergebnis=.0; switch (rechne) { case '+': ergebnis=operant+operant2; break; case '-': ergebnis=operant-operant2; break; case '*': ergebnis=operant*operant2; break; case '/': if (operant2!=0) ergebnis=operant/operant2; break; } rechne=0; value.text.format("%f",ergebnis); value.paint() </code> >>>**Calculator::onEvent** >>><code cpp> if ((nr>='0' && nr<='9')||nr=='.') { value.text += (char)nr; value.paint(); } if (nr=='C') { operant=.0; rechne=0; value.text=""; value.paint(); } if (nr=='+'||nr=='-'||nr=='*'||nr=='/') { if (rechne>0) calculate(); rechne=nr; operant = atof(value.text); value.text=""; value.paint(); } if (nr=='=' && rechne>0) calculate(); if (nr=='R') { if (rechne>0) calculate(); text = value.text; UglEvent event; event.id = UglEvent::EventPopupClose; event.para1 = okEvent; gUglEventManager.workEvent( event ); } </code> ====== Test ====== Erstellen Sie die Anwendung und übertragen Sie diese in den Programmspeicher des Controllers. Testen Sie das Programm! >{{::startaschenrechner.jpg?direct&220|}} {{::taschenrechner1.jpg?direct&225|}} {{::ergebnistaschenrechner.jpg?direct&220|}} **Viel Spaß beim Spielen und beim Weiterentwickeln!** ======= Nächstes Thema ====== * [[ein kleines Spiel]] * [[start|zurück zur Übersicht]]