|
|
A
simple level implementation
Based on
the
principles described in the Introduction, what we need to handle is a
list of views. In the most
simple case where the number of GUI components is fixed, an array will
suffice. The index to the array can be used as the identifier. The
minimum content of the array would be the size and location of the
views. Other data such as type (button, slider, label..),
color, event handler, component text and so on can be added as
well.
Alternatively,
a
linked list structure can be used and the identifier would be the
pointer to an element of the list. If the list is able to grow
dynamically, the application itself can generate new views. This is not
as odd as it sounds since an application might want to
generate an alert window in the event of an error. Similarly in a game
application, objects may
be
created and destroyed as part of the game. In the following we will use
the term "view pointer " to designate the view identifier, irrespective
of which data structure is used to store the views.
To
implement a minimum
Level of our GUI system we use the following data structures and
functions:
Handling
of views
view: a
structure that
contains all the parameters of a view
viewptr: a
type
declaration for view pointers,
viewList:
A list that
holds the views,
insertView:
a function
that inserts a new view on the list and returns with the view pointer.
The arguments to this function are the size and position of the view,
noOfViews:
a function
that returns the number of views in viewList,
getView(n):
a function
that returns a pointer to view #n,
findView:
a function
that returns the view pointer of the last view in the list that
embraces a specified position on the screen.
Handling
of events
touchDownEvent:
an
interrupt function that is called whenever the screen is touched. Input
arguments are the screen coordinates of the touch event,
eventLoop:
a function
that runs while waiting for interrupts. If there is no background
processing this function is an empty infinite loop.
Basic
graphics
initGraphics:
a
function that initializes the graphics hardware. This function is
platform-specific,
enterGraphics:
a
function that prepares for writing in the graphics memory. This
function is platform-specific,
exitGraphics:
a
functions that shows the content of the graphics memory. This function
is platform-specific,
setPixel:
a function
that writes a pixel in the screen buffer. Arguments are pixel position
(x,y) and color (c),
fillView:
a function
that fills the rectangular area of a view with a given color.
Altogether
these
functions require less than 150 lines of C code.
How
to use these functions in an application
Below
follows an
example that shows how to use the Simple Level of the GUI. C
language notion is assumed.
In this
level ot the
GUI a view has only the following attributes: size (sizex,sizey)
and position (posx, posy). These data are of integer type and are
defined by a struct in C.
#define
WIDTH 400 // Screen width
#define
HEIGHT 600 // Screen height
viewptr
background, display; // define the names of 6 views
viewptr
button1, button2, button3, button4;
int
quit = 0;
void
touchDownEvent(int x, int y)
//
this is
where we land when touching a view
{
viewptr v;
v = findView(x,y); // Find which view was touched
if (v == background) quit = 1; // end program
if background is touched
if (v == display) fillView(display, WHITE); // otherwise
color the display
if (v == button1) fillView(display, RED);
if (v == nutton2) fillView(display, GREEN);
if (v == button3) fillView(display, BLUE);
if (v == button4) fillView(display, LIGHTGREY);
}
int
main(int
argc, char *argv[])
{
// Define GUI
background = insertView(WIDTH, HEIGHT, 0, 0); // this
defines the entire screen as one view
display = insertView(350, 80, 30, 150); // this defines a
"display" area
button1 = insertView(80, 80, 30, 250); // below follows
four "buttons"
button2 = insertView(80, 80, 120, 250);
button3 = insertView(80, 80, 210, 250);
button4 = insertView(80, 80, 300, 250);
// Start of application
initGraphics();
fillView(background, DARKGREY);
fillView(display, WHITE);
fillView(button1, RED);
fillView(button2, GREEN);
fillView(button3, BLUE);
fillView(button4, LIGHTGREY);
while (!quit) eventLoop();
return 0;
}
The
program produces a
rectangular "display" area at the top of the screen and four colored
"buttons". Touching one of the buttons copies the button color to the
display area. Touching the background will cause the program to exit.
This site is © Copyright Robert Forchheimer
2011-2012, All Rights Reserved.
|
|
|
