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.

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.

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.

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.

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

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();
}

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=" );

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 ); 
}

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

Viel Spaß beim Spielen und beim Weiterentwickeln!

• ein kleines Spiel
• zurück zur Übersicht