MegunoLink Pro’s User Interface Panel was created to modify settings and control Arduino programs using serial commands. Most programs have a few settings that you’d like to change from time to time:

  • a set-point temperature,
  • the data transmission rate, or
  • the power for a radio transmitter, for example.

Information entered into common controls such as buttons, check boxes and sliders can be sent through a serial channel. By sending configuration through a serial port or Ethernet connection, you don’t need to modify and upload a new program for every change. Almost any program, even Blink, could benefit from a simple user interface:

Arduino User 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 blink interval and duration when the control values are changed.

Building the User Interface

To build this user interface in MegunoLink, create a new Interface Panel Visualizer from the Start Page, or the Visualizers popup and add labels and controls by dragging them from the toolbox.

User interface design for Arduino

A screen shot of a partly completed control panel for the Blink 2.0 program shown in the MegunoLink Pro Interface Panel Designer. Controls are added from the toolbox (left) to the design surface (centre). Properties, such as font size, colour, alignment and control names can be changed using the Properties Panel (right).

You can use many different controls to build your user interface including:

  • Labels
  • Buttons
  • Pictures
  • Numeric up/down
  • Lists
  • Panels
  • Tabbed layout panels
  • Flow layout panels

All controls have properties. With properties you can:

  • change the foreground or background colour
  • add a background image
  • set a minimum and maximum value for numeric up/down and track-bar controls
  • anchor a control to an edge of the panel

We built a simple user interface for a program to blink the LED built-in to most Arduino boards. The interface lets you control two parameters through MegunoLink Pro: how fast the LED blinks and how long it remains on for each blink. A numeric up/down control is used for each parameter. The control named Interval sets the time between blinking; the length of the flash is set a control named Duration. Both are set in milliseconds. We also added buttons which send commands to the Arduino to print the current settings, and we use a label control for the title text.

This short video shows the interface panel being built (3 minutes):

Hook-up serial commands

Many controls can send a serial command when something happens: a button is clicked, a number is entered or a slider is moved. This serial command gets interpreted by the Arduino program to do something appropriate. For example, sending !SetInterval 2000\r to Blink 2.0 changes the interval between flashing the LED to 2 seconds. Serial commands are pretty flexible and should support any text protocol you’d like to use.

The command sent by a control is set using a property. The name of the property depends on the control and the action it is linked to, but they are all grouped under the Communications heading in the property browser and are available on the control’s smart tag.

Setting commands

The command sent when an action is performed, such as clicking a button, can be set using the properties browser (right), or a smart tag on the control. Click the small triangle in the top right corner of the control to show or hide the smart tag.

Control properties that can be used to send commands from an Interface Panel
Control Property Action
Button OnClickSend The button is clicked
Button OnMouseDownSend The mouse button is pressed on the control
Button OnMouseUpSend The mouse button is released on the control
Button OnDoubleClickSend The button is double-clicked
Numeric up/down OnValueChangedSend Arrows are used to change the value, or enter is pressed after typing a new into the box or the control loses focus
Text box OnTextChangedSend The text in the control is changed
Value list OnSelectionChangedSend A new item is selected from the list
Check box OnCheckChangedSend The box is checked or unchecked
Radio button OnCheckChangedSend The radio button is checked or unchecked
Track bar with indicator ValueChangedCommandName The slider or numeric control value is changed
Timer OnTickSend The selected interval has passed
SerialConnection OnConnectSend The serial port is opened. Message can be delayed using the Delay property
PictureBox OnClickSend The picture was clicked
PictureBox OnMouseDownSend The mouse button is pressed on the control
PictureBox OnMouseUpSend The mouse button is released on the control
PictureBox OnDoubleClickSend The mouse button is double clicked on the control

Values in controls — numeric up/down, text boxes and check boxes, for example — can be sent to the Arduino as part of a serial command. The easiest way to create serial messages containing values from controls is to use the command editor. To open the command editor, click the ellipsis (…) button at the end of a command property.

Include control values in Arduino command messages

Use the command editor to include control values in command messages, or edit long commands. Special characters, such as carriage returns (\r), newlines (\n) and tabs (\t) can be added using escape codes. Click the Test button to see what will be sent when the action occurs.

A button to the right of the command text shows a menu of the available controls, and the value available from each. Making a selection from the menu inserts the appropriate text into the serial command to include the control’s value when the command is sent.

For example, the blinking interval for Blink 2.0 is set using a command like:
!SetInterval 1000\r

This would set the time between blinks to 1000 millisecond (1 second). To have MegunoLink Pro use the value from the Interval control in place of the fixed number, set the command text to:
!SetInterval [Interval.Value]\r

The text [Interval.Value] will be replaced with the value from the Interval numeric control when the command is sent. So you’ll be able to change the blink rate, simply by entering the desired interval into the control and hitting enter.

It is also possible to include simple expressions between the brackets when referring to controls. For example, if seconds were used for the value in the Interval control, instead of milliseconds, an expression could be used to convert from seconds to milliseconds when the message is sent:
!SetInterval [Interval.Value * 1000]\r

MegunoLink Pro uses the DynamicExpresso library to parse expressions. This library supports:

  • addition (+), subtraction (-)
  • multiplication (*), division (/), modulus (%)
  • conditional ({expression} ? {value if true} : {value if false})
  • less than (<=), greater than (>=), less than or equal (<=), greater than or equal (>=)

Completing the Interface

Hit the Apply button when the interface design is ready for testing. This updates the Interface Panel visualizer with the new design. Then, from the MegunoLink Pro visualizer, the blink rate and duration of the LEDs can be set by typing values into the controls. Pressing the buttons will display the set values in the serial monitor.

Try it Yourself

The complete Arduino program for the Blink 2.0 program, including the MegunoLink Pro project with the interface panel all ready to go, is available as an example in our Arduino Library.

Download MegunoLink Pro and test the Interface Panel with your own projects.

Please post a comment below and let us know how you get on.

Showing 8 comments
  • Helen

    Can you have information from the Arduino e.g. a temperature reading plotted on the user interface. Is there a way to have the user interface on a tablet (acting like an app?)

    • Paul Martinsen

      Hi Helen,

      Yes, you could use the Time Plot visualizer to graph a temperature measurement.

      You can use Builder to make a stand-alone installer to run MegunoLink projects on a Windows tablet. We don’t support Android or iOS tablets at the moment though.

      Have a good day

      • Helen

        Thanks Paul,

        I’m trying to simulate something going wrong with what the Arduino is controlling e.g. motor not working and therefore want a second tablet that can wirelessly connect to the Arduino, tell me which Arduino it is and when failures happened (for prognostics). Do you have any suggestions for this – and do I need to buy a wireless transmitter unit for the Arduino?

        • Paul Martinsen

          Hi Helen

          I would use the serial connection for this. You can use MegunoLink with as many different connections as your computer has ports. So if you can wire from your Arduinos to a computer you can do diagnostics that way.

          If you can’t connect the Arduino to a computer for some reason, you might try using Moteino’s as a custom wireless connection, or blue-tooth to get a simple serial connection.

          If the controlling computer is very remote, but is on a network, you might be able to use Windows Remote Desktop to control the remote computer. There are a number of remote desktop programs for Android and iOS tablets too.

          If your serial connection is used by some other control software, you might be able to swap in a Mega for debugging. They support shields with the same pin configuration as the Uno, but have 3 additional serial ports; maybe one of those ports could be a debug channel. You’d need a RS232-USB converter for that one.

  • Joe

    Could this interface be linked with a random code generator, so once the code is submitted on the interface a motor is turned on for a short duration?

    • Philip Rowe

      Hi Joe, yes, if you generate a random number on the arduino it will work fine.

  • Phil

    Hi there,

    Am just getting back to coding after a break of over 30 years!

    I have a list of things I need to do, but very first thing I could really do with some help with is….

    How would I have a Meguno interface have an indicator that would show a serial connection exists to an Arduino?

    • Philip Rowe

      Hi there, you could maybe have some kind of flashing picture controlled by the arduino. When its not flashing then your arduino is not connected.

Leave a Comment

Start typing and press Enter to search

Create a user interface for your Arduino!

1. Drag and drop controls to build your user interface
2. Send serial comands to your Arduino program
3. Use our free library to process serial commands
Learn More