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.

(Mit installiertem Flash kann man an dieser Stelle ein Video in dieser Web-Seite ansehen.)

Die geladene Vorlage sollte der folgenden Darstellung entsprechen:

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.

Das Klassendiagramm erweitern

Wechseln Sie ggf. in das Paket MeineBildschirme.

Ä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

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
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: ..." );
StartForm::onEvent
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();
}

Initialisierung des Taschenrechners

Die Initialisierung des Taschenrechners orientiert sich am vorgelegten GUI-Design.

Calculator::onInit
#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=" );

Die Logik des Taschenrechners

Calculator::calculate
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()
Calculator::onEvent
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 ); 
}

Test

Erstellen Sie die Anwendung und übertragen Sie diese in den Programmspeicher des Controllers. Testen Sie das Programm!

Viel Spaß beim Spielen und beim Weiterentwickeln!

Nächstes Thema

der_taschenrechner.txt · Zuletzt geändert: 2014/01/27 12:32 von huwi