Visual Designer for Embedded GUI

Frozen Content

Modified by Admin on Sep 13, 2017

The development of a Graphical User Interface for your embedded embedded applications has been greatly simplified with the introduction of a Visual Designer for embedded GUI design. The Visual Designer uses the familiar mechanisms for GUI design, including a Tool Palette with a variety of GUI design objects, and an Object Inspector, where you can configure the Properties of the selected object and the Events that occur when that object is used.

Including a GUI in your Embedded Project

Before you add an AGUI Design Module to your project, you must also add the appropriate GUI context to the Software Platform in the embedded project, to enable access to the GUI objects. The image below shows the Software Platform for a design targeting the Altium NB3000 NanoBoard.

Include the GUI context in the Software Platform.

To add an embedded GUI to your project, right-click on the embedded project name in the Projects panel, and select the Add New to Project»AGUI Design Module command. When you add the AGUI Design Module, Altium Designer will check the resolution specified in the Software Platform file for details of the graphics interface and create a blank GUI in the *.AGUI file, ready to begin designing on.

The module is actually a set of files, as detailed below:

form1.agui - Graphical UI design file, use the Tool Palette and the Object Inspector to place and configure the GUI objects.
form1.c - shell C file for handling GUI object events, after placing a GUI object double click on the appropriate Event to jump-to and add code in this file.
agui_main.c - shell C file for calling the AGUI service.
form1.h - header file for form1.c
agui_main.h - header file for agui_main.c

If the Software Platform targets the NB2, the form1.agui file will default to display a 240x320 pixel GUI design form, complete with a graphic of the NB2 screen bezel. If the Software Platform targets the NB3000, the form1.agui file will default to display a 320x240 pixel GUI design form, complete with a graphic of the NB3000 screen bezel. This size is specified in the Software Platform Graphics Context.

Building up the GUI

To design the GUI, place GUI objects in the file form1.agui. Open the Tool Palette panel to select and place the required GUI objects. Once you have placed an object, select it and open the Object Inspector panel to configure its Properties and Events. Note that you can double click on an Event to create and jump to relevant code in the source file.

An example GUI is shown below, refer to the example project NB3000_AGUI_Custom_Draw.PrjFpg to examine this file for yourself.

Example GUI designed for the NB3000.

The example targets the NB3000 NanoBoard. The GUI that appears on the NB3000 touchscreen is shown below.

Example GUI as it appears on the NB3000.