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)
Page contents
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:
- 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.
- 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)
Getting started (TCP/IP)
The following step-by-step instructions are also shown in the video tutorial below.
Step 1: Setup connection
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
Start the GUI-O application, open settings menu and select "Connections"
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
Start the GUI-O designer and select "TCP/IP connection" tab
Input the IP address and port number of the device created within the GUI-O application
Press "Start server" button
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)
Note that the bottom status bar of the GUI-O designer shows the current connection status
Step 3: Start designing
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.
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.
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.
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
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)
The following step-by-step instructions are also shown in the video tutorial below.
Step 1: Setup connection
Plug the USB serial (Bluetooth) device into your PC
If the device is not recognized by your system, install the appropriate drivers (most systems should detect and install / setup the drivers automatically)
Start the GUI-O application, open settings menu and select "Connections"
Select your connection type and connect to the USB serial (Bluetooth) device
Step 2: Setup GUI-O designer
Start the GUI-O designer and select "Serial connection" tab
Select the serial port (COM* on Windows or /dev/tty* on Linux) and baud rate
The settings for the serial port are: 8 data bits, 1 stop bit, no parity, no flow control
Press the "Connect" button to open the serial port (under Linux, make sure that appropriate permissions are set for /dev/tty* file)
Note that the bottom status bar of the GUI-O designer shows the current connection status
Step 3: Start designing
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.
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.
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.
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
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.7)
added support for label alignment parameter (i.e., LALP) to |NI, |TI and |LB widgets
What's new (version 0.0.6)
minor bugfix when closing TCP/IP socket
added check for latest application version
What's new (version 0.0.5)
colors can now be specified in hex format
added option to send custom commands
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 application 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
