Build an Arduino Interface

The interface panel visualizer is a DIY drag-and-drop GUI builder. It hosts controls that send commands to your Arduino sketch. You can use:

• buttons
• number input
• text boxes
• sliders
• gauges
• and many more…

The interface panel will also host other visualizers. So you can build your user interface project in MegunoLink as a combination of interface panels, plots and tables. Or put everything into an interface panel for the greatest flexibility.

Watch the video below for a complete introduction to the interface panel, processing serial commands in your Arduino sketch and storing configuration in the Arduino’s EEPROM.

Overview

There are three parts to a custom user interface:

1. The interface panel visualizer: the run-time view of the user interface. Clicking controls sends commands assigned to controls to the Arduino.
2. The interface panel designer: a separate window for laying out controls and assigning serial commands.
3. The command handler: code running on your Arduino to receive and process commands received from interface controls.

The general workflow is shown below. It is common to start an interface panel with a few controls and add features and commands as the project continues.

There are two sides to an interface panel: the visual part built in MegunoLink and the command handlers built in your Arduino sketch.

This page covers started an interface panel in MegunoLink to send commands. Getting started processing serial commands with an Arduino shows you how to handle these commands in your Arduino sketch.

See an interface panel being built in this short video:

Building an Interface with the Designer

There are 4 steps to building a custom user interface:

1. Open the designer. Click the Designer button () on the interface panel toolbar.
2. Add and arrange controls by dragging from the control toolbox and around the design surface.
3. Assign commands in for MegunoLink to send when buttons clicked or control values changed.
4. Apply design changes to the interface panel visualizer by clicking in the designer.

The Designer Window

The screenshot below shows the key parts of the designer window:

• Control toolbox: drag controls from the toolbox and drop them on the design surface.
• Design surface: click to select controls; arrange by dragging selected controls around the design surface.
• Properties toolbox: edit the properties of controls selected on the design surface to change their appearance and behavior.
• Property description: a short description of the selected control property.
• Component tray: the container for controls that don’t have a visible user interface.
• Code examples: Arduino examples you can copy into your sketch to change control properties at run-time with our Arduino Library.

Drag controls from the Toolbox onto the design surface to build up your user interface in the Interface Designer.

Begin a new user interface by dragging controls, containers and components from the control toolbox onto the design surface. Controls are graphical objects that present information or enable user interaction, such as gauges and buttons. Containers provide visual grouping of controls and dynamic layout when the visualizer is resized. Components, such as the SerialConnection provide services, such as sending a message when a connection is opened.

Setting Control Properties

Each control has a variety of properties which control its appearance and behavior. Properties are changed in the properties editor: select a control to view its properties. Edit values in the properties editor to make changes. Our control reference describes all of the controls and their properties.

Some common properties include:

• Name sets the name of the control. These names are used to refer to control values when sending messages. Each control must have a different name.
• Text sets the text displayed on Label and Button controls. Sets the default text for TextBox controls
• Value, Minimum and Maximum set the default value and range of allowed values for NumericUpDown controls
• OnClickSend sets the message send to your Arduino when a button is clicked.

Using Number Controls

Numeric controls are commonly used for parameters in messages sent to your Arduino sketch, such as how long a blinking LED should remain on. Include a numeric value in a message using the syntax [name.Value], where name is the name of the numeric up/down control (see below).

Add a number control to your user interface by dragging the Numeric Up/Down from the control toolbox onto the design surface. Click the control to select it and drag it around until you are happy with its position.

The most important properties for the numeric control are:

• Name: the name identifies the control in the interface panel so you can include its value when sending a command to your Arduino sketch. Names can use upper and lower case letters and numbers but they can’t contain spaces and must be unique for each interface panel.
• Value: the current numeric value stored in the control. Set a default value in the designer.
• Minimum and Maximum: the smallest and largest value that the user can enter into the control. Use these properties to limit the value to a range that makes sense for your Arduino program.

Check out the numeric up/down control reference for a complete list of properties.

Labeling Things

A label’s Text property sets the text that is shown on the label. Some of the most useful label control properties include:

• AutoSize: when true, the label is resized automatically to fit its Text.
• TextAlign: controls where the text is positioned within the label control — left, right, middle, bottom, etc.
• ForeColor: sets the color of the text.
• Font: sets the typeface, size and styling. You can use any font on your system, even Comic Sans.

Check out the label control reference for a complete list, or the dynamic label control if you want to change the text in the label from your Arduino sketch.

Using Buttons to Send Commands

The two key properties for a button are:

1. Text: the text shown on the button, and
2. OnClickSend: the message sent to your Arduino when the button is clicked.

Click the ellipsis button () in the property editor when the OnClickSend property is selected to open the Command Editor window.

Building Commands

You can build and test serial messages using the Command Editor. To open the Command Editor:

1. select a control on the design surface,
2. click in one of the Communications properties in the Properties window,
3. click the ellipsis button () in the property editor.

Use the Command Editor to edit and test serial messages that controls will send to your Arduino sketch.

Text in the Command field will be sent to your Arduino sketch when the event is triggered. For example, the OnClickSend property of a button will send the command text when the button is clicked.

The content of the message depends on how your Arduino sketch decodes commands. Check out getting started processing serial commands on your Arduino for the syntax used by our command handler library. Briefly, it expects command messages to start with a ! and end with \r\n. Any parameters follow the command, separated by spaces:

The message format expected by MegunoLink’s command handler.

Applying the Design

Changes in the designer aren’t applied automatically to the interface panel. Click the Apply button in the interface designer to apply changes to the interface panel visualizer. In the visualizer you can change values in the controls and click buttons to send messages to your Arduino sketch.

Click the Apply button in the Interface Designer to apply changes to your design to the Interface Panel visualizer.

The designer can be closed after the the design has been applied. Edit your design at any time by clicking on the interface panel visualizer’s toolbar.

Using the Interface Panel

Open the designer again to make changes to the control layout or commands. It isn’t necessary to close the connection before using the designer to change the interface.