There are three parts to building a custom GUI with MegunoLink:
- The Interface Panel visualizer: MegunoLink’s run-time view of the user interface. Clicking controls sends assigned commands to the Arduino.
- The Designer: a separate MegunoLink window for laying out controls and assigning serial commands.
- 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:
- Create a new Interface Panel Visualizer. Select Interface Panel from the Visualizer menu.
- Layout your interface with the Designer window adding buttons and other controls.
- Assign commands in the Designer for MegunoLink to send when buttons and controls are clicked.
- Apply the design to the Interface Panel visualizer.
Interface Panel designs are edited using the Designer. The Designer is a separate MegunoLink window.
Click the Designer button () in the Interface Panel Visualizer to open the Designer window. Click the Apply button () in the Designer window to apply the design to 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.
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:
Namesets the name of the control. These names are used to refer to control values when sending messages. Each control must have a different name.
Textsets the text displayed on Label and Button controls. Sets the default text for TextBox controls
Maximumset the default value and range of allowed values for NumericUpDown controls
OnClickSendsets the message send to your Arduino when a button is clicked.
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:
- Clicking a Button
- Changing the text in a TextBox
- Moving the slider of a TrackBarWithIndicator
- and many more…
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
You can build and test serial messages using the Command Editor. To open the Command Editor:
- select a control on the design surface,
- click in one of the Communications properties in the Properties window,
- click the ellipsis button () in the property editor.
You can include control property-values in serial messages that you build with the Command Editor using the Property 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.
Applying the Design
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.