4.5 KiB

Raw Permalink Blame History

GUI-DEMO

Text based UI Elements for Propeller for use with the VGA_HiRes_Text Driver

Demo / Text program

GUIDemo.spin - the demo app

Files that comprise the UI Elements

FILE LONGS USED DESCRIPTION PROG DATA

GUIBase.spin 2,472 1,643 - UI control and infrastructure InputField.spin 168 6 - Input Field object MenuItem.spin 62 13 - Menu Item object PushButton.spin 124 12 - Push Button object RadioCheck.spin 78 13 - Radio Button and Check Box object SimpleBox.spin 62 0 - Basic Box object SpinBox.spin 191 12 - Spin Button object TextBox.spin 206 4 - Text Box object StatusLamp.spin 52 6 - Status Annunciator

Required Drivers

Vga_HiRes_Text.spin - VGA High Resolution Text Driver Mouse.spin - PS2 Mouse driver Keyboard.spin - PS2 Keyboard Driver

Description

This text based UI for the High Res VGA Driver will work in all resolutions that the driver supports, the demo itself is setup for 800x600 but will show OK at 1024x768 too. At 640x480 it will not look right (needs to be repositioned and re-sized), It is very much a fist principles implementation with no bells and whistles. It supports a static UI and only the basic functionality. To use the UI Elements the user must decide on a screen layout and then place the elements there. You only need to include the objects that you plan to use, you do not have to declare them all. This is done at the top of GUIBase.spin in the constants where you delcare how mane of each element type you will need.

There are 6 simple steps to using these objects:

Configure the numbers and types of GUI elements you need in the GUI Element Inventory section of the CON section of the GUIBase.spin file. See the top of that file for simple directions.
Declare the GUI object in your application's OBJ section.
```
OBJ
    GUI : "GUIBase"
```
Initialize the GUI object in your application's startup. You will need to pass in the VGA, Mouse and Keyboard pin assignments you are using for each of thise devices. This will initialise the GUI data structures and start the VGA (High Res Text), Mouse, and Keyboard drivers.
```
GUI.Init( VGABase, MouseDat, MouseCLk, KeyboardDat, KeyboardClk )
```
Create the GUI Elements as required by your application by calling the specific "Init" fucntion in GUIBase.spin. Note that all GUI interation and control will be via the functions in GUIBase.spin, you will not need to access the individual GUI Element files directly. For each element you create you will need to have a variable in your VAR section to hold its identifier. For example
```
PUSH1 := GUI.PUSHInit( ... )
```
Creates a new pushbutton object identified by the variable PUSH1 which was declared as a byte in the VAR section. This variable will be used to pass in to calls to handle the object and will be returned to you for action in the event that the mouse is clicked on it.
Create a main loop for your application that will service both your application and run the processing for the UI. The UI is processed via the ProcessUI function in GUIBase.spin.
```
repeat
    ProcessApplication
    elem := GUI.ProcessUI
    if elem <> -1
        case elem
            PUSH1: CallYourFunctionForPUSH1()
            PUSH2: CallYourFunctionForPUSH1()
            etc...
```
The ProcessUI function will handle the UI for you, highlighting elements as the mouse passes over them, processing mouse clicks and keyboard entry, etc. It will return -1 if no action is required (i.e. you did not click on anything). If the user clicked on something (i.e. Push Button PUSH1 perhaps) it will return the guid of the element that requires action (i.e. PUSH1). In this case you will need to perform an action associated with the Push Button. It is probably best to keep the main loop clean and call a function to perform tha action rather than do it right in the loop. That makes it easier to read and maintain.
Create your user action functions, one for each GUI Element that will do something.