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)
LATEST VERSION
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
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
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
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.
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
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
