Easily build custom UI for your Arduino

Step 1 of 3 step process for demo

Install MegunoLink and our Arduino Library.

MegunoLink initial installer window

Step 2 of 3 step process for demo

Download our interface panel example interface and Arduino sketch.

MegunoLink interface beside arduino IDE

Step 3 of 3 step process for demo

Program your Arduino, establish a connection and control your Arduino!

Interface panel beside arduino uno

Using a variety of controls (including buttons, text boxes and number boxes), the Interface Panel visualiser lets you build a custom user interface to control an Arduino, or other embedded, program. The Interface Panel will send user-defined serial messages when buttons are clicked, or control values are changed. And, by adding a MLPUIMessageProcessor to the design, the Arduino program can send messages to update controls on the panel.

Visualizer

Example interface panel - The popup menu in the Interface Panel visualizer can be used to show or clear error messages.

The Interface Panel visualizer is a MegunoLink Pro window that displays a custom user interface. The interface can be modified using a designer (see below). Use the port selector to choose the serial source the panel is linked to. Any messages sent by controls on the panel will use this serial source.

The status bar, at the bottom of the visualizer window, displays the last error message. Use the popup menu in the status bar to review previous errors, or clear the message history.

Designer

Open the Interface Panel designer

Click the designer button on the Interface Panel toolbar to open the designer window.

The Designer is used to add controls and components to an interface, layout the panel and set properties for controls and components. Open the designer window by clicking on its icon in the Interface Panel visualizer (right).

Designer Window

There are 4 main areas in the Interface Designer window:

  1. The design surface where controls are placed. Controls are set out as they will appear in the Interface Panel visualizer.
  2. The toolbox: a collection of controls, containers and components that can be placed on, or used by, the interface panel. Double-click tools, or drag them from the toolbox onto the design surface to place on the interface panel
  3. The properties window, which lists the properties available for the selected control. Colours, fonts, images, size and location are all set using the properties window
  4. The component tray, a region where components used by the interface panel that don’t have a user interface (such as the Message Library and Message Processor) live

When you are happy with a design, click the Apply button to load it into the Interface Panel visualizer. You can easily modify a design by clicking on the designer button in the visualizer toolbar and making changes in the design window.

Screen-shot of the interface panel designer

The interface designer provides a collection of tools that can be placed on the panel design surface where they can be configured and applied to the Interface Panel visualizer.

Names

All controls and components have names. These names are used to refer to controls when sending messages from MegunoLink Pro or, for some controls, for setting property values from a serial device. Names can include numbers, letters and the underscore (_) character. Names can’t include spaces.

Change control names using the (name) property in the property editor, or with the smart-tag attached to most controls.

Setting control names

Set control names with the smart-tag or property browser. Names can use a-z, A-Z, 0-9 or _. No spaces!

Editing Serial Messages

Show the serial message editor

Click the ellipsis (…) button  to display the message editor.

Many controls can send messages to a serial device when an event occurs — such as clicking a button or changing a control value. The property name depends on the type of message to send: a button has the OnClickSend property, while a text box has the OnValueChangedSend property. The available events are described below.

In each case, the message sent is set using the property editor, or in the smart tag attached to most controls. You can type the message directly into the property text control, or use the Message Editor. Click the ellipsis (…) button to display the Message Editor.

Messages can include plain text, control values and expressions. Control values and expressions, which must be enclosed in square brackets, will be evaluated when the message is sent. This lets you use controls to send settings to your serial device. Available control properties, and common expressions, are available on the variable popup menu. Use the Test to see the message that will be sent (using current control values). The test message can be displayed as plain characters (ASCII) or hexadecimal format.

Message Editor Window

Enter the command to be sent on a control event using the Message Editor window.

Sending Serial Messages

Many Controls and components on the MegunoLink Pro Interface Panel can send messages to a serial device, such as the Arduino, when an event — such as clicking a button, or selecting an item from a list-box — occurs. Messages can contain text, LEDOn for example, or values taken from controls on the interface panel: Setpoint [numSetPoint.Value]. Messages can also contain simple expressions. For example, if you multiply a temperature set-point by 10 to increase precision but still use integer variables, the scaling can be included in the message sent by MegunoLink Pro: SetTemperatureSP [numTemperature.Value * 10]. Our Serial Command Handler in the MegunoLink Pro Arduino library is useful for processing serial messages on the Arduino side.

The message sent when an event is triggered on a control can be a mix of text, escape codes, expressions and control values. Control values and expressions must be surrounded by square brackets (‘[‘ and ‘]’). Escape codes start with a ” character and include ‘n’, ‘r’ and ‘t’.

Examples

  • You clicked me!n: Sends the text You clicked me!, followed by a new line character
  • Setpoint=[SetPoint.Value]: sends the text Setpoint= followed by the current value of the SetPoint control
  • Setpoint=[SetPoint.Value*100]: sends the text Setpoint= followed by the current value of the SetPoint control multiplied by 100
  • Setpoint=[Tools.ToInt(SetPoint.Value).ToString(‘X4’)]: sends the text Setpoint= followed by the current value of the SetPoint control as a 4 character hexadecimal value

Events

The events that trigger messages depend on the control or component and are listed in the table below. The text set for each property will be sent when the event occurs. For example, if the OnClickSend property of a button control is set to Hello World then the text Hello World will be sent to the serial device each time the button is clicked.

ControlPropertyAction
ButtonOnClickSendThe button is clicked
Numeric up/downOnValueChangedSendArrows are used to change the value, or enter is pressed after typing a new into the box or the control loses focus
Text boxOnTextChangedSendThe text in the control is changed
Value listOnSelectionChangedSendA new item is selected from the list
Check boxOnCheckChangedSendThe box is checked or unchecked
Radio buttonOnCheckChangedSendThe radio button is checked or unchecked
Track bar with indicatorValueChangedCommandNameThe slider or numeric control value is changed
TimerOnTickSendThe selected interval has passed

Referencing Control Properties

Control and component properties or methods can be referenced in messages using square brackets. For example [MyTextBox.Text] sends the current content of a text-box named MyTextBox while MyTextBox.FixedTextLength(10) sends exactly 10 characters from MyTextBox; if the text-control contains less than 10 characters MegunoLink Pro pads the messages with enough spaces to ensure exactly 10 characters are sent.

The control and component properties available are listed in the tables below. The first table shows common properties. Read only properties can not be adjusted using serial messages.

ControlPropertyTypeRead OnlyDescription
Common to allForeColorStringnControls the foreground colour of the control
BackColorStringnControls the background color of the control
VisibleBooleannWhen set to "True" the control is visible to the user
EnabledBooleannWhen set to "True" the control is enabled

The next table lists the specific controls and their properties

ControlPropertyTypeRead OnlyDescription
Dynamic LabelTextStringnThe text displayed in the label.
Text boxTextStringnThe text displayed in the control
ReadOnlyBooleannIf "True" then the text box can not be edited by user
TextLengthIntegeryThe length of text displayed in the control
NameStringyThe name of the control
Numeric up/downValueDecimalnThe current value displayed in the control
MinimumDecimalnThe minimum value allowed
MaximumDecimalnThe maximum value
NameStringyThe name of the control
Value listSelectedIndexIntegernThe index of the selected item in the list. First item is index 0. -1 if no items selected.
SelectedNameStringnThe name associated with the selected item. Only supported for single selection lists.
ValueUnsigned IntegernThe value associated with the selected item. When multiple items are selected, returns the values of each selected item or'ed together.
NameStringyThe name of the control
CheckboxCheckedBooleannThe current check state of the control
NameStringyThe name of the control
RadiobuttonCheckedBooleannThe current check state
NameStringyThe name of the control
Trackbar with IndicatorValueIntegernThe current value shown in the control
DelaySendingChangesBooleanyIf "True" serial message is only sent after mouse is released.
MinimumIntegernThe minimum value
MaximumIntegernThe maximum value
NameStringyThe name of the control
Progress barValueIntegernThe current value shown by the control
MinimumIntegernThe minimum value
MaximumIntegernThe maximum value
NameStringyThe name of the control
PictureBoxVisibleBooleannWhen "false", the control is hidden. If true the picture box is visible.

The methods available on Interface Panel controls and components are summarized in the table below:

Control/ComponentMethodTypeDescription
Text boxFixedTextLength(…)StringReturns the text from the control with a fixed width.
Message libraryGet(MessageName)StringReturns the named message
GetData(MessageName)Byte[]Returns the named message

Expressions

Messages can use simple expressions by including them in square brackets. For example, [5*3+2] sends the text 17.

Expressions are most useful when combined with control values. It is common to store scaled values in a microcontroller to avoid floating point arithmetic. For example, a set-point temperature might be entered to 1 decimal place, 14.3 for example, using a numeric up/down control named SetPoint but stored as the integer 143 in an Arduino program. The scaling could be applied automatically by MegunoLink Pro when the message was sent using: [SetPoint.Value * 10]

The operations available in expressions are: +, -, *, /, !, <, >, <=, >=, ==, !=, &&, ||, ?:

Tools

The Tools object makes the following functions available in expressions:

  • ToInt(Decimal Value): Converts a decimal value, from a numeric up/down control for example, to an integer. This is useful for formatting numbers in hexadecimal as decimal values can’t be converted directly. Instead use Tools.ToInt(Number.Value).ToString("X") .
  • Choose(Integer Index, String s0, String s1, …, String s9): Select a string based on a number. For example: Tools.Choose(3, "A", "B", "C", "D") would return C. Up to 10 strings can be used with the Choose function.

Embedded Plots

Starting with the Time Plot, we are starting to add support to embed other visualizers within the Interface Panel. This means you can place a Time Plot control in the designer and have a plot show on your panel. Embedded plots don’t need the message processor (see below). They pull data from the serial stream in the same way plots in separate windows, so you can use the MegunoLink Library or raw serial commands to add data to embedded plots.

Updating Controls from a Serial Device

Control values on an Interface Panel can be changed by sending specially formatted commands from the embedded device. These message are processed by a MLPUIMessageProcessor and be used to update or request control values. For more information see the:

  • Arduino Interface Panel library documentation, which describes an Arduino library to send messages that update Interface Panel controls
  • Message Processor component documentation, which describes the MegunoLink Pro interface panel component and the messages you can send to it.

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