Build an Arduino Interface
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:
You can send commands in any format you like with MegunoLink, but we recommend something like:
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
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 serial command handler that we 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.
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.
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.
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:
Namesets the name of the control. These names are used to include 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.
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 (
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.
!OnTime [numOnTime.Value]\r\nwill include the current value of the
numOnTimecontrol when the message is sent to the Arduino. Check out the Interface Panelreference for more information on messages and expressions.
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. Click the Designer button on the Interface Panel visualizer’s toolbar to edit your design.