Sometimes you need an interface for your Arduino project but you don’t want to add a separate screen and buttons to your project.

MegunoLink’s Interface Panel visualizer lets you build a simple interface and send commands to your Arduino sketch via the serial port. The interface can include a variety of controls including buttons, text boxes, number controls, graphs, etc.

Let’s walk through an example. We all start with the classic Arduino blink sketch:

The time delays are fixed in this program. If you want to change settings, you need to rebuild and upload a new sketch. That’s not very convenient.

For more flexibility, you could build an Interface Panel in MegunoLink to control the amount of time the LED is on and off like this:

Arduino 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 time the LED is on (duration) and off (interval) when the control values are changed. Or the Set All button is clicked.

Command Format

You can send commands in any format you like with MegunoLink, but we recommend something like: !SetDuration 40\r\n.

Placing a special character, such as ! at the start of the command makes it easy to find when other serial messages are being exchanged.

Using a long command name, such as Duration or Interval, makes it easier to remember what the commands are for later.

Using a carriage return (\r) and line-feed (\n) characters to mark the end of the command will make sure they are nicely formatted in any serial monitoring tool you use for looking at raw serial messages.

To process the serial commands, you can roll your own command handler or use the serial command handler we have built!

Building the Interface

While you can send commands to your Arduino from the Arduino IDE or MegunoLink serial monitor, that quickly becomes tedious if you have a lot of commands or parameters to remember. MegunoLink’s Interface Panel lets you attach the commands to buttons and other controls for a more convenient interface.

Layout

Get started by opening a new Interface Panel visualizer by selecting Interface Panel from the visualizer menu on the main toolbar, then click the Designer button on the interface panel toolbar to open the visual designer.

Create a new interface panel

Create a new interface panel by selecting Interface Panel from the main toolbar, then open the visualizer designer by clicking the Designer button on the interface panel toolbar

Build up the user interface by dragging controls from the Toolbox onto the design surface. Use Label controls for headings and labeling controls. Button controls will send a message to the Arduino when they are clicked. TextBox and NumericUpDown controls are good for getting user input for settings and parameters.

Build a user interface

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

Setting Properties

Each control has a variety of properties that can be set in the property editor, which is normally docked on the right-side of the Interface Designer. The most useful properties are:

  • Name sets the name of the control. These names are used to include 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.

Sending Commands

Each button has an OnClickSend property to set the message that should be sent whenever a button is clicked. The message can include special characters such as tabs (\t), carriage returns (\r) and new-line (\n) characters.

Messages can also include simple expressions and use values from other controls on the form. The easiest way to build expressions with control values is to use the Command Editor. To open the command editor, click the value for the OnClickSend property, then click the ellipsis button which appears.

Command Editor

Open the Command Editor to include values from other controls.

Use the component selector button to add expressions for other controls on the form. Expressions are enclosed in square brackets in the message. The expression will be replaced by its value when the button is clicked. For example: !OnTime [numOnTime.Value]\r\n will include the current value of the numOnTime control when the message is sent to the Arduino. Check out the Interface Panel reference for more information on messages and expressions.

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.

Recent Posts

Leave a Comment

Contact Us

Send us an email and we will get back to you shortly.

Not readable? Change text. captcha txt

Start typing and press Enter to search