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

    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.
1. Home
2. Introduction
3. Simple level
4. Basic level
5. Extensions