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:

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

There are three parts to building a custom GUI with MegunoLink:

  1. The Interface Panel visualizer: MegunoLink’s run-time view of the user interface. Clicking controls sends assigned commands to the Arduino.
  2. The Designer: a separate MegunoLink window for laying out controls and assigning serial commands.
  3. A command handler: the code running on your Arduino to receive and process commands received from interface controls. Our Arduino Library includes a flexible command handler, which can drop into your Arduino sketch to process commands.

Building the Interface with the Designer

There are 4 steps to building a new interface:

  1. Create a new Interface Panel Visualizer. Select Interface Panel from the Visualizer menu.
  2. Layout your interface with the Designer window adding buttons and other controls.
  3. Assign commands in the Designer for MegunoLink to send when buttons and controls are clicked.
  4. Apply the design to the Interface Panel visualizer.
Create interface panel

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

Interface Panel designs are edited using the Designer. The Designer is a separate MegunoLink window.

Click the Designer button (Designer Button) in the Interface Panel Visualizer to open the Designer window. Click the Apply button (Apply Interface design) in the Designer window to apply the design to the Interface Panel Visualizer.

Interface designer and apply buttons

Left: click the Interface Designer button to open the Designer button; Right: click the Apply button to load the design into the Interface Panel Visualizer

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.

Setting Control Properties

Each control has a variety of properties which control its appearance and behavior. Properties are changed in the Properties editor.

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.

The Control Reference lists properties common to all controls.

Follow Supported Controls links for individual control properties.

Interface panel control properties

Configure control appearance and behavior with the Properties editor.

Sending Commands from MegunoLink to your Arduino Sketch

Many controls will respond to user input in the Interface Panel visualizer and can send a custom serial message to a connected device. The device processes these serial messages to perform an action—such as turning on a motor or changing a configuration. User input includes:

To send a message when a button is clicked, for example, set the OnClickSend property of the Button control. Messages that will be processed by our Arduino Command Handler library should start with a ! and end with the escape-codes \r\n.

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.
Command Editor

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

You can include control property-values in serial messages that you build with the Command Editor using the Property Selector (component selector).

Clicking on the Property Selector will open a menu that lists all of the available controls. Select a property from the sub-menu to add it to your serial message. A special expression, surrounded by [ ]‘s will be added to your message. The expression will be replaced by the control’s property value when the serial message is sent. Use the Test button to preview the message MegunoLink will send when the button is clicked.

For example, NumericUpDown controls have a property named Value, which is the number displayed in the control. To include this value for a control named numOnTime in the serial message select Value from the menu to insert the expression [OnTime.Value] into the message. [OnTime.Value] will get replaced by the numeric value when the message is sent.

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

Click the Apply button in the Interface Designer to apply changes to the Interface Panel visualizer. When the serial connection attached to the visualizer is connected, you can click buttons and change controls to send messages to your Arduino.

Once the design has been applied, you can close the designer. You can edit your design at any time by re-opening the designer.

Apply interface design

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

What's Next?

We have just touched the surface of building Interface Panels in MegunoLink. Check out these guides to learn more:

Start typing and press Enter to search