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.

Interface panel
An interface panel visualizer sends commands to the Arduino when buttons are clicked.

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.

Interface panel workflow

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.

Watch an interface panel being built in the video below.

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 (Open interface panel designer) on the toolbar.

Create interface panel

Select Interface Panel from the Visualizers menu to create a blank interface visualizer.

New interface panel

A new interface panel ready to host some controls. Click Open designer to get started.

Save and restore control values using the manage configuration sets tool.

Building an Interface with the Designer

There are 4 steps to building a custom user interface:

  1. Open the designer. Click the Designer button (Open designer) 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 Apply Interface design 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.
Interface designer

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.
Interface panel control properties

Configure control appearance and behavior with the Properties editor.

Many properties, such as Name, BackColor etc are common to all controls.

Most supported controls have their own properties. For example, the numeric up/down control has a Value property containing its current value.

Using Number Controls

The numeric up/down control provides a place to enter a numeric value on your interface panel. It includes a box to type a number and up/down arrows to increase or decrease its value in steps.

Numeric up/down control.
Numeric up/down control.

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

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).

Label controls
Label controls.

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

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.

Button control
Button control.

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 (Ellipsis) 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 (Ellipsis) in the property editor.
Open command 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:

Serial command anatomy

The message format expected by MegunoLink’s command handler.

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.
  • [numOnTime.Value/1000]: divides the on-time value by 1000 to convert from milliseconds to seconds.

The property selector (component 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.

Property selector
Include property values in the command message using the property selector.

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.

Escape characters
Add escape characters to the command message.

You will need to add code to your Arduino sketch to receive and process serial commands sent from MegunoLink.

MegunoLink includes an Arduino library for processing serial commands that is flexible and easy to use.

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.

Apply interface design

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 open interface panel designer 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:

  1. Use the connection manager to configure a serial connection,
  2. 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.

Connect interface panel

Click the source selector to open the connection.

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.

What's Next?

We have just touched the surface of building Interface Panels in MegunoLink. Continue with processing serial commands with an Arduino to learn about using our Arduino library to handle commands sent from your interface panel.

Check out the reference information to learn more about building interface panels:

Start typing and press Enter to search