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:
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.
There are three parts to a custom user interface:
- The interface panel visualizer: the run-time view of the user interface. Clicking controls sends commands assigned to controls to the Arduino.
- The interface panel designer: a separate window for laying out controls and assigning serial commands.
- 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.
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:
Interface Panel Visualizer
The interface panel visualizer hosts all the controls for the custom interface. Select Interface Panel from the visualizers menu to add a new interface panel to your project.
Select a connection for the interface panel from the toolbar. Any commands created by clicking buttons or changing controls will be sent to this device.
The interface panel starts empty. Open the designer, by clicking the Designer button () on the toolbar.
Building an Interface with the Designer
There are 4 steps to building a custom user interface:
- Open the designer. Click the Designer button () on the interface panel toolbar.
- Add and arrange controls by dragging from the control toolbox and around the design surface.
- Assign commands in for MegunoLink to send when buttons clicked or control values changed.
- 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.
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:
Namesets the name of the control. These names are used to refer to control values when sending messages. Each control must have a different name.
Textsets the text displayed on Label and Button controls. Sets the default text for TextBox controls
Maximumset the default value and range of allowed values for NumericUpDown controls
OnClickSendsets 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 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.
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.
Label controls are purely decorative but have the important job of helping the user understand what other controls are for. Drag labels from the control toolbox and place them beside numeric controls, for example, so you remember what the number is for (and what units it has).
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
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.
Using Buttons to Send Commands
Button controls send a message to your Arduino sketch when clicked. The message could be a simple command, to start a motor for example. Or it could include new configuration values from other controls, to change a motor’s speed for example.
The two key properties for a button are:
Text: the text shown on the button, and
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.
You can build and test serial messages using the Command Editor. To open the Command Editor:
- select a control on the design surface,
- click in one of the Communications properties in the Properties window,
- click the ellipsis button () in the property editor.
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:
Commands can include expressions enclosed in brackets (‘
[‘ and ‘
]‘). Expressions use control property values and calculations to customize the command message. For example:
[numOnTime.Value]: includes the current value of the numeric up/down control named
[numOnTime.Value/1000]: divides the on-time value by 1000 to convert from milliseconds to seconds.
The property selector () button provides an easy way to insert control property values into your message. It lists all of the controls on your interface panel and, for each control, the properties available for command messages. Select a property to add it to your command message.
Commands can also include escape codes, such as
\r (carriage return) and
\n (new-line) which are commonly used to mark the end of a command message but cannot be easily typed on your keyboard.
Expressions and escape codes are evaluated and replaced by their result just before the command message is sent. Click the Test button to evaluate any expressions in the command using current control values.
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.
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
The interface panel is ready for use after applying the design in the interface designer:
- Use the connection manager to configure a serial connection,
- Open the serial connection by clicking the source selector.
MegunoLink will send the commands set in the designer when buttons are clicked or control values are changed.
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.