107 lines
4.5 KiB
Markdown
107 lines
4.5 KiB
Markdown
|
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:
|
||
|
|
|
||
|
|
1. 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.
|
||
|
|
|
||
|
|
2. Declare the GUI object in your application's OBJ section.
|
||
|
|
|
||
|
|
OBJ
|
||
|
|
GUI : "GUIBase"
|
||
|
|
|
||
|
|
3. 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 )
|
||
|
|
|
||
|
|
4. 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.
|
||
|
|
|
||
|
|
5. 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.
|
||
|
|
|
||
|
|
6. Create your user action functions, one for each GUI Element that will do
|
||
|
|
something.
|