Back | Home

DrawDemo OrbForms

In this tutorial you will create a Drawing Demo using OrbForms Designer.

1. Once you've downloaded and installed OrbForms Designer start a new "SimpleApp" project and name it DrawDemo.

Enter the Display Name and Form Title as DrawDemo (You can edit those settings later if you want).

It's time to add a few more menu items than the starting project template gave us. Find the Project explorer, right-click over menuMainOptions and select Add MenuItem.

Repeat this process until you have created 5 new MenuItems in the Visual Designer.

It's time now to customize each one of these menu items into a unique drawing function demonstration. Let's demonstrate Pixel, Line, Rectangle, Circle and Circle2 (alternate custom circle method).

2. Select the top menu item, add the event handler code to the project.

Follow this process and add event handler codes for all of the added menu items. Also rename the menuItems as follows: Point, Line, Plane, Circle, Circle2.

Save and build the project. If you did your homework while installing OrbForms you should have the Palm OS Emulator running by now and see this image upon build.

Scroll to the top of mainform.oc and enter the following code as shown.

int x1 = 40;
int x2 = 60;
int y1 = 70;
int y2 = 80;

int color = 92;

void ClearScreen();

Select the top of the form in the Visual Designer, select Options and then Point. Select the onselect handler and enter the following code.

Draw draw;
draw.attachForm(mainForm);

draw.begin();
ClearScreen();
draw.fg(color);
draw.pixel(clrFG,x1,y1);
draw.end();

It's All Easy Now!

For each menu item, here is the code:

Point
Draw draw;
draw.attachForm(mainForm);

draw.begin();
ClearScreen();
draw.fg(color);
draw.pixel(clrFG,x1,y1);

draw.end();

Line
Draw draw;
draw.attachForm(mainForm);

draw.begin();
ClearScreen();
draw.fg(color);
draw.line(clrFG,x1,y1,x2,y2);
draw.end();

Plane (rectangle)
Draw draw;
draw.attachForm(mainForm);

draw.begin();
ClearScreen();
draw.fg(color);
draw.rect(clrFG,x1,y1,x2,y2,0);
draw.end();

Circle
Draw draw;
draw.attachForm(mainForm);

draw.begin();
ClearScreen();
draw.fg(color);
draw.rect(clrFG,40,40,80,80,20);
draw.end();

Circle2
int angle = 0;
float s1 = 0;
float s2 = 0;

Draw draw;
draw.attachForm(mainForm);

draw.begin();
ClearScreen();
draw.fg(color);
do
{
s1=50*sin(angle); //50 = major axis of ellipse
s2=50*cos(angle); //50 = minor axis of ellipse
draw.pixel(clrFG,s1+80,s2+80); //80 = offset of center
angle++;
}while (angle < 360);

draw.end;

}

Add a Function

At the bottom of your code add this function to clear the screen

void ClearScreen()
{
Draw draw;
draw.attachForm(mainForm);
draw.begin();
draw.fg(240); //Black
draw.rect(clrFG,0,15,160,160,0);
draw.end();
}

Sample Screen

Hopefully you should have something like this!