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)

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.

  1. 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.

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

USB Serial Bluetooth wiring diagram

Getting started (TCP/IP)

Step 1: Setup connection

  1. Determine the IP address of the 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

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

  2. Select "Ethernet" connection type and create a new device using the IP address of the WiFi (or Ethernet) interface and any port number between 49152 - 65535

Step 2: Setup GUI-O designer

  1. Start the GUI-O designer and select "TCP/IP connection" tab

  2. Input the IP address of the WiFi (or Ethernet) interface and input port number; the values must correspond to device created within the GUI-O application (see Step 1)

  3. Press "Start server" button

  4. From the GUI-O application, tap on the created device and wait for connection (NOTE: the Android device must be connected to the same local network)

  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. You can copy the widget by double-clicking on it. You can reorder widgets by drag-and-drop action.

  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 (TCP/IP)

Getting started (Serial port)

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 and select "Serial connection" tab

  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. You can copy the widget by double-clicking on it. You can reorder widgets by drag-and-drop.

  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 (Serial port)

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

LATEST VERSION

What's new (version 0.0.4)

  • added support for hardware objects

  • minor bugfixes

What's new (version 0.0.3)

  • added support for TCP/IP communication

  • added support for widgets reordering (drag-and-drop)

  • each widget now displays its UID parameter

  • other minor improvements

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

  • added support for landscape design

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

  • default widget UID numbering now depends on widget type

  • fixed default widget numbering when loading design files

  • GUI-O app initialization request now triggers refreshing of created widgets

  • minor bugfixes

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

  • ability to copy widgets

  • minor fixes

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

  • added image stream widget

  • added active property (ACT) to enable / disable widget interaction

  • added tooltips for description of properties (on mouse hover)

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

  • fixed some serial port related bugs

  • proper formatting of initialization string

Connect . Create . Control

Connect . Create . Control

YouTube channel
Facebook