DESIGN TOOL

Build a prototype graphical user interface using your PC and Android smart phone or tablet. Then, simply include the generated ASCII commands into your project.

  • Download GUI-O designer for Windows (extract archive and run guiodesigner.exe)

  • Download GUI-O designer for Linux (extract archive and run guiodesigner.sh script)

What's new (version 0.0.1-beta.2)

  • fixed some serial port related bugs

  • proper formatting of initialization string

How does it work?

GUI-O designer works in "live" mode - all changes to the widgets' properties are immediately reflected on the Android device. It communicates via a serial port, so a serial device such as USB Serial Bluetooth is required in order to connect to the GUI-O application.

Throughout this tutorial, a USB Serial Bluetooth device is used (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.

USB Serial Bluetooth wiring diagram (using Bluetooth BT-HC04 module)

Getting started

Step 1: Setup connection

  1. Plug the USB serial (Bluetooth) device into your PC

  2. If the device is not recognized by your system, install the appropriate drivers (most systems should detect and install / setup the drivers automatically)

  3. Start the GUI-O application, open settings menu and select "Connections"

  4. Select your connection type and connect to the USB serial (Bluetooth) device

Step 2: Setup GUI-O designer

  1. Start the GUI-O designer

  2. Select the serial port (COM* on Windows or /dev/tty* on Linux) and baud rate

  3. The settings for the serial port are: 8 data bits, 1 stop bit, no parity, no flow control

  4. Press the "Connect" button to open the serial port (under Linux, make sure that appropriate permissions are set for /dev/tty* file)

  5. Note that the bottom status bar of the GUI-O designer shows the current connection status

Step 3: Start designing

  1. The available widgets are shown in the first column. Double click the widget to add it to your design. The widget should be displayed in the GUI-O application.

  2. The widgets added to your design are shown in the second column. Click on a widget to select it. You can delete the added widget by pressing the "Del" key.

  3. The properties of the selected widget are shown in the third column. You can modify the properties and observe the results in the GUI-O application.

  4. The last column is divided into two rows:

  • The first row shows the ASCII commands that are sent to the GUI-O application (this command creates the widgets)

  • The second row shows the response from the GUI-O application when you interact with the widgets within the GUI-O application

  1. You can save your design under "File -> Save designer file" and load your design under "File -> Load designer file".

Check out the video tutorial below!

Video tutorial

Important notes

  • Check out the manual for full explanation of parameters for each widget

  • The GUI-O designer is in development state, so please leave any feedback or comment on our forum

  • Special thanks to contributors of CQtDeployer framework

Connect . Create . Control

Connect . Create . Control