How to Quickly Make a User Interface to Control Your Arduino Program

MegunoLink Pro’s User Interface Panel was created to modify settings and control Arduino programs using serial commands. Most programs have a few settings that you’d like to change from time to time:

• a set-point temperature,
• the data transmission rate, or
• the power for a radio transmitter, for example.

Information entered into common controls such as buttons, check boxes and sliders can be sent through a serial channel. By sending configuration through a serial port or Ethernet connection, you don’t need to modify and upload a new program for every change. Almost any program, even Blink, could benefit from a simple user interface:

A simple user interface created with MegunoLink Pro’s Interface Panel for a Blink program. It sends serial commands like !SetInterval 1200 to the Arduino to modify the blink interval and duration when the control values are changed.

Building the User Interface

To build this user interface in MegunoLink, create a new Interface Panel Visualizer from the Start Page, or the Visualizers popup and add labels and controls by dragging them from the toolbox.

A screen shot of a partly completed control panel for the Blink 2.0 program shown in the MegunoLink Pro Interface Panel Designer. Controls are added from the toolbox (left) to the design surface (centre). Properties, such as font size, colour, alignment and control names can be changed using the Properties Panel (right).

You can use many different controls to build your user interface including:

• Labels
• Buttons
• Pictures
• Numeric up/down
• Lists
• Panels
• Tabbed layout panels
• Flow layout panels

All controls have properties. With properties you can:

• change the foreground or background colour
• add a background image
• set a minimum and maximum value for numeric up/down and track-bar controls
• anchor a control to an edge of the panel

We built a simple user interface for a program to blink the LED built-in to most Arduino boards. The interface lets you control two parameters through MegunoLink Pro: how fast the LED blinks and how long it remains on for each blink. A numeric up/down control is used for each parameter. The control named Interval sets the time between blinking; the length of the flash is set a control named Duration. Both are set in milliseconds. We also added buttons which send commands to the Arduino to print the current settings, and we use a label control for the title text.

This short video shows the interface panel being built (3 minutes):

Hook-up serial commands

Many controls can send a serial command when something happens: a button is clicked, a number is entered or a slider is moved. This serial command gets interpreted by the Arduino program to do something appropriate. For example, sending !SetInterval 2000\r to Blink 2.0 changes the interval between flashing the LED to 2 seconds. Serial commands are pretty flexible and should support any text protocol you’d like to use.

The command sent by a control is set using a property. The name of the property depends on the control and the action it is linked to, but they are all grouped under the Communications heading in the property browser and are available on the control’s smart tag.

The command sent when an action is performed, such as clicking a button, can be set using the properties browser (right), or a smart tag on the control. Click the small triangle in the top right corner of the control to show or hide the smart tag.

Values in controls — numeric up/down, text boxes and check boxes, for example — can be sent to the Arduino as part of a serial command. The easiest way to create serial messages containing values from controls is to use the command editor. To open the command editor, click the ellipsis (…) button at the end of a command property.

Use the command editor to include control values in command messages, or edit long commands. Special characters, such as carriage returns (\r), newlines (\n) and tabs (\t) can be added using escape codes. Click the Test button to see what will be sent when the action occurs.

A button to the right of the command text shows a menu of the available controls, and the value available from each. Making a selection from the menu inserts the appropriate text into the serial command to include the control’s value when the command is sent.

For example, the blinking interval for Blink 2.0 is set using a command like:
!SetInterval 1000\r

This would set the time between blinks to 1000 millisecond (1 second). To have MegunoLink Pro use the value from the Interval control in place of the fixed number, set the command text to:
!SetInterval [Interval.Value]\r

The text [Interval.Value] will be replaced with the value from the Interval numeric control when the command is sent. So you’ll be able to change the blink rate, simply by entering the desired interval into the control and hitting enter.

It is also possible to include simple expressions between the brackets when referring to controls. For example, if seconds were used for the value in the Interval control, instead of milliseconds, an expression could be used to convert from seconds to milliseconds when the message is sent:
!SetInterval [Interval.Value * 1000]\r

MegunoLink Pro uses the DynamicExpresso library to parse expressions. This library supports:

• addition (+), subtraction (-)
• multiplication (*), division (/), modulus (%)
• conditional ({expression} ? {value if true} : {value if false})
• less than (<=), greater than (>=), less than or equal (<=), greater than or equal (>=)

Completing the Interface

Hit the Apply button when the interface design is ready for testing. This updates the Interface Panel visualizer with the new design. Then, from the MegunoLink Pro visualizer, the blink rate and duration of the LEDs can be set by typing values into the controls. Pressing the buttons will display the set values in the serial monitor.

Try it Yourself

The complete Arduino program for the Blink 2.0 program, including the MegunoLink Pro project with the interface panel all ready to go, is available as an example in our Arduino Library.

Download MegunoLink Pro and test the Interface Panel with your own projects.

Please post a comment below and let us know how you get on.