Micro-Robotics logoProduct rangeVM2 controllersStarter kitsApplication boardsDisplay HardwareInterface ModulesFree Tools - overviewVenom LanguageVenomIDEGUI FrameworkLive Server DemoDesign ServiceSkill SetProductionCapabilitiesApplication StoriesVM2 vs. Raspberry Pi
Micro-Robotics icon Products submenu link

Graphical User Interface (GUI) Framework

GUI Library

We provide a framework of GUI classes so that you can quickly create a graphical user interface for your application. Basic graphical elements include:
  • Buttons of several kinds
  • Checkboxes and Radio buttons
  • Text- and Number-entry fields
  • Date picker and calendar
  • List selection
  • File system explorer
  • Text file viewer
  • Live clock display and date/time entry
  • Busy indication and progress bars
... and more are being constructed all the time. You can modify and augment these basic graphical elements to produce a user interface in your company style.

GUI Framework code/download

Screenshots

The screenshots below were captured from a VM2D controller running our GUI Framework. They illustrate the basic graphical elements in a plain style. The last screen shot shows how you can customise these elements to achieve a unique 'look and feel'.

Buttons

This menu page has six menu buttons and a 'Done' button. One of the menu buttons has been given a '3D' button style.

Any of the properties of a button may be changed - for example the text, text colour, background image, the button's behaviour, etc.

Check boxes and Radio buttons

This page demonstrates Checkboxes and a group of Radio Buttons.

This style is based on characters from a special symbol font we provide, but you can create any style you want.

Text and number entry

Here the operator has touched a NumberBox. A numeric keypad pops up to allow a number to be entered.

Other keypad layouts or functions may be created if necessary.

A Text Entry Box works in a similar way, popping up a Qwerty keyboard.

Date entry

Here the operator has touched the DatePicker. A calendar pops up to allow a new date to be selected.

Other calendar styles may be created if necessary.

Lists

There are several ways to choose from a list of items. Two ListBoxes and a StringChooser (labeled 'Pop-up list') are shown here. The 'scroll pad' allows you to quickly scroll through long lists.

Dialog boxes

This display shows a customised dialog box: a StringChooser and a NumberBox have been added to a standard dialog box. The StringChooser has been activated, displaying a pop-up list.

Customising the 'look and feel'

This screenshot shows how you can customise the GUI Framework to give your product a unique look.

Here we have

  • Changed the default background and text colours.
  • Used radiused corners on the buttons.
  • Embedded the customer's logo in a custom TrueType font* so it can be displayed at any size and colour.
  • Developed a custom slider control to modify numeric parameters.
  • Created a custom TrueType symbol font* for slider images, etc.
  • Used Muli, a Google font similar to Century Gothic, for the text.

*We used TypeTool3 to create the custom fonts.

These pages were all laid out and edited using the Visual Designer built into VenomIDE.