Builder _ Walkthrough _ old

Return to GUIslice Builder documentation

NOTE: The following archived instructions are based on GUIslice Builder version 0.10.4-beta6. Please see GUIslice Builder Walkthrough for most recent versions.

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.

Change background color

Let's change the default background to black.

• Select menu: Edit → Options

• 

• Click on the Background Color value

• Select GSLC_COL_BLACK and click OK

• 

• Optional: Note that we have changed the background color to the same color as the grid, so you can change the grid to a more visible color from Options → Grid and then change Major / Minor colors as you like (eg. GSLC_COL_BLUE and GSLC_COL_BLUE_DK2).

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
• 

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 down to align with the "Current count:" label
• Change Properties: External Storage Size from 0 to 10. 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_TXT1 to E_COUNTER. Again, the enumeration provides an alternate way to access the element later.
• 
• Note that although we have left the default text "Text Field", it will be replaced in the user code with the counter value. We could have also changed the text string value shown in the Builder, eg. to 0.

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
• We will call this project SimpCount
• Important step: The Arduino IDE expects that the sketch is in its own folder, and the GUIslice Builder project should also be saved to this same folder. Therefore, we'll create a folder named "SimpCount" and save both the project and the generated sketch code there. Note that a future release of the Builder will do this step for you.
  • Click on the New Folder icon in the top-right, call the folder SimpCount
  • Save the project as SimpCount (will create SimpCount.prj)
• Click on Generate Code (the Up Arrow icon in the top toolbar)
• Navigate to the SimpCount folder and leave the filename as the default (SimpCount.ino). Click Output
• 
• At this point, your projects directory will probably look like this:

projects\
  SimpCount\
    SimpCount.prj
    SimpCount.ino

Arduino IDE operation

Modify generated code in 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...