Builder _ Walkthrough

Return to GUIslice Builder documentation

NOTE: The following walkthrough is intended for GUIslice Builder version 0.15 and later.

GUIslice Builder - Example Walkthrough

The following is a walkthrough example that demonstrates how to create a functional GUI in only a couple minutes! The example application implements a simple button-controlled up/down counter and associated progress bar.

Note that it is essential that the GUIslice examples have been configured and running properly before using the Builder.

Overview of Steps

Walkthrough for Initial GUI generation

• GUIslice Builder Operation
  • Change background color
  • Create Title text
  • Create Counter label
  • Create Counter dynamic value
  • Create Increment button
  • Create Decrement button
  • Generate Code
• Arduino IDE Operation
  • Modify generated code in Arduino IDE
    • Add global counter value
    • Add code to button callback functions
  • Modify GUIslice configuration
• Upload sketch

Walkthrough for incremental GUI update

The last part of the walkthrough demonstrates how the Builder can be used to make further GUI updates based on top of any user modifications to the sketch code. In this part, a dynamic progress bar is added.

GUIslice Builder operation

The first essential step is to ensure that the GUIslice examples are configured and running properly.

After installing GUIslice Builder (for Windows or LINUX), launch the application.

Create Title text

• Click on Toolbox item: Text
• Drag to top of screen
• Change Properties: Text to Simple Counter by double-clicking on the Value cell and pressing Enter when done
• 
• Change to a larger font by clicking on the Properties: Font value cell
• In the Font Chooser, select BuiltIn(2x)->10x16pt7b and click OK
• 
• Reposition the text to the top middle of the screen. Select the "Page Layout" tab and then click on the "Center" button.
• 

Create Counter label

• Click on Toolbox item: Text
• Drag down to reposition
• Change Properties: Text to Current count:
• Change color from yellow to light blue by enabling custom colors
  • Disable the checkbox on Properties: Use Default Colors?. This will enable the customized color selection fields.
  • 
  • Click on the Properties: Text Color value cell, and select GSLC_COL_BLUE_LT4
• 
• 

Create Counter dynamic value

• Click on Toolbox item: Text
• Drag over to align with the "Current count:" label
• Change Properties: External Storage Size from 0 to 12. This specifies that we want a dynamic text element. This value indicates the max string length that we should allocate to this field. When this field is 0, it means that the text is static and won't be changed (no extra storage is provided for the string).
• 
• Enabling the dynamic element also enables the ability to rename the ElementRef property, which is the handle used in code to access this element later (eg. for updating).
• Rename Properties: ElementRef from m_pElemTxt3 to m_pElemCounter to make it easier to remember.
• Similarly, for clarity, rename Properties: ENUM from E_TXT3 to E_COUNTER. Again, the enumeration provides an alternate way to access the element later.
• Finally, change Properties: Text to 0 to reflect the initial value of the dynamic field (alternately, change it to an empty string)
• 

Create Increment button

• Click on Toolbox item: TextButton
• Drag down to align with the "Current count:" label
• Change Properties:Height from 40 to 20
• Change Properties:ENUM from E_BTN1 to E_BTN_INC (for ease of remembering)
• Change Properties:Label from Button to Increment
• 

Create Decrement button

• Repeat steps for Create Increment Button
• Use E_BTN_DEC and Decrement
• 

Generate Code

• Save project with File → Save As
• By default, the configured Builder project folder will be shown
• Click on the "Create New Folder" icon (3rd icon from the right)
  • 
• Choose a project name, eg. SimpCount and enter this as the Project Folder
  • 
  • GUIslice Builder will create a folder for the Builder project within the Arduino projects folder
  • The Builder project will be saved as SimpCount.prj
  • 
• When we generate the code, the output sketch will also be saved to this same folder
• Click on Generate Code (the Up Arrow icon in the top toolbar or File → Generate Code)
  • This will write the generated sketch (eg. SimpCount.ino) to the same project folder
  • 
• At this point, your Arduino projects folder will probably look like this:

Arduino\
  ...
  SimpCount\
    SimpCount.prj
    SimpCount.ino
    SimpCount_GSLC.h

Arduino IDE operation

Modify generated code in Arduino IDE

Locate the generated sketch (eg. SimpCount.ino) and double-click on it to open within the Arduino IDE

Add global counter value

• We need to add a global value to hold the up/down count. Let's call this m_nCount.
• Place the following code somewhere near the Program Globals comment
  • int16_t m_nCount = 0;

Add code to button callback functions

• Now we want to define what we want the buttons to do. Add code to the auto-generated callback functions, including a string that we use for converting from the integer count value.
• 
• The following shows the complete callback code changes required in the sketch:
• 

Save Sketch

• File → Save

Modify GUIslice configuration

• GUIslice uses two different user configuration files depending on the device target:
  • src\GUIslice_config_ard.h (for Arduino, ESP8266, ESP32, and related devices)
  • src\GUIslice_config_linux.h (for LINUX devices, such as Raspberry Pi)
• The default GUIslice configuration for Arduino is intended to work on an Arduino UNO / ATmega2560 with an Adafruit 2.8" TFT touchscreen shield using the Adafruit-GFX library and STMPE610 touch controller. If you are using a different device setup/configuration, then the GUIslice_config file will need modifications. Please refer to the GUIslice Configuration Guide for details.
• Once the configuration is defined, we are ready to upload.

Upload sketch

• Upload the program via Sketch → Upload

Overview of Steps for Incremental GUI updates

The following sequence is used in order to make further GUI updates from within the Builder on top of any modifications in the sketch user code.

Second part walkthrough to be documented soon...