Episode 7 (intermezzo): GUI-O live designer

kl3m3n

In this episode, I will show how to simply (and quickly) prototype a graphical user interface (GUI) using GUI-O application and GUI-O designer.

Software prerequisites:

GUI-O design tool (https://www.gui-o.com/design-tool)
GUI-O application (https://play.google.com/store/apps/details?id=com.guio.guioapp)
For additional information about the GUI-O application, download the developer manual from https://www.gui-o.com/

What is GUI-O designer?

GUI-O designer is a PC tool (available on Windows and Linux) that helps you build graphical user interfaces on Android smart phones or tablets. It generates the necessary GUI initialization commands (in ASCII format), which can be included into any project's source code.

How does it work?

GUI-O designer works in "live" mode - all changes to the widgets' properties are immediately reflected on the Android device. Two communication options are available:

1. TCP/IP
This is the simplest approach as (in general), no additional hardware is needed. The GUI-O designer spawns a server using the IP address of the network interface (WiFi or Ethernet), listening on a specified port. The GUI-O application must then use the "Ethernet" connection type, specifying the IP address and port of the server. Both devices (PC and Android) must be on the same local network.

2. Serial port
In this case, a serial device such as USB Serial Bluetooth is required in order to connect to the GUI-O application (see wiring diagram below). Note that any other USB Serial device can also be used, as long as it can be connected to the GUI-O application - check out the manual to see which connection types are supported by the application.

Getting started

Note that I will be using the TCP/IP communication option as no additional hardware is required in this case and is therefore easier to set up.

Please watch the video tutorial below to see GUI-O designer in action. All necessary steps are also described below.

Step 1: Setup connection

Follow the steps below to setup the connection between the GUI-O designer and GUI-O application:

Determine the IP address of your network interface:
- for Windows, open the command prompt (cmd) and use "ipconfig" command to display the IP address of the WiFi (or Ethernet) interface on your local network
- for Linux, open the terminal and use "ifconfig" command to display the IP address of the WiFi (or Ethernet) interface on your local network
Open the GUI-O designer. Under Windows, run "guiodesigner.exe" and under Linux, run "guiodesigner" script.
Enter the IP address and arbitrary (unused) port number in the range between 49152 - 65535.
Press "Start server" button.
Start the GUI-O application, open settings menu and select "Connections". Select "Ethernet" connection type and create a new device using the same IP address and port number as above.
Tap on the newly created device to connect GUI-O application client to the GUI-O designer server.

Step 2: Start designing

After the successful connection is made, widget and hardware objects can be created and this is immediately reflected on the Android device. For each created object, numerous properties can be modified.

Step 3: Copy the design to your project

The initialization commands are displayed in the GUI-O command window. Commands need to be included into your project's source code and sent to the GUI-O application via any of the supported interfaces, whenever the initialization request (@init) is made. Additionally, your project's code must handle all user events that are triggered by the GUI-O application.

As always - if you have any questions or run into any problems, please let me know!

Best regards,
kl3m3n