Getting Started with the Interface Panel

MegunoLink Pro’s Interface Panel visualiser lets you create custom user interfaces with elements like buttons, textboxes, number boxes, and many others. Each element can be used to construct a serial message that gets sent to your device when instructed to do so. For example when a button is pressed a number can be taken from a numeric up down control, and sent over the serial connection to your device. You can see an AC Temperature Controller example on MegunoLink’s start page. Here we used our Interface Panel to set the current target temperature, adjust the hysteresis, and change operating modes.

Start by adding the Interface panel visualiser to your MegunoLink project using the visualiser selection panel found on the right of MegunoLink’s interface. This will add the panel you see below.

The Interface Panel visualizer lets you quickly build an interface to send serial commands to an Arduino or other embedded device. Click the designer icon on the toolbar to start designing your interface.

To start adding buttons click on the designer icon (little triangular ruler). A window should open up that shows all of the different controls available on the left side, the panel you are designing in the middles, and a list of properties that can be changed on the right hand side. Similar to what you see here.

The designer lets you build an interface from a variety of common Windows controls including buttons, lists, and check boxes.

The controls and components you can place on your interface panel include:

• Button – Perfect for completing an action whenever a user clicks the button. This control can use the values from many of the other controls as part of its message. For example it can pull the number out of the numeric up down control and send it as part of its message.
• Textbox – Allows you to enter text characters.
• Numeric Up/Down – Allows numeric values to be set using an up down selector or by typing.
• Label – Great for annotating your user interface.
• Value List – Allows a specific group of values to be selected from.
• Check Box – Lets you control boolean based settings.
• Track Bar – Provides a slider bar that can be used to adjust a numeric value.
• Progress Bar – Allows you to provide visual feedback from your device.
• Picture Box – Lets you put pictures on your interface. Great for process diagrams etc.
• Message Library – A handy place to group serial messages so they can be sent from more than one control or using an Ardunio command.
• MLPUIMessageProcessor – Lets messages sent from a serial device change the values in controls on the interface panel and invoke commands in a message library.

Example

Here is an example of a using a few different controls.

A button sends a message when it is clicked. The small triangle on the button when it is selected shows the smart tag where you can set the message which will be sent when the button is clicked.

The first is a button. Simply drag the button from the left toolbox area on to the interface panel you would like to construct. A small box will appear with some of the common values you need to set. The first is a name, this should have no spaces and be descriptive. In this case I have called it “btnSetTemperature” as whenever this button is pressed it will set the temperature to 36.5. Next I enter the text you want the user to see, in this case “Set Temperature”. Finally you define a message that should be sent whenever the button is clicked. In this case it will send “SETTEMP 36.5\r\n”. My Arduino will detect the SETTEMP command and modify its variables accordingly.

A number control can send a message whenever the value changes. Or, you can refer to the control value in a message sent by a button.

Next I would like to be able to adjust that set point temperature using a numeric up down control. Again I simply drag it from the control selection toolbox. The small settings box appears and now I name it “nudSetPoint”. This name is important because it forms an internal reference that I can use to grab the current value. I can also set the current value by clicking on the numeric up down control and adjusting its “value” property in the right hand properties list.

We now go back to the set temperature button and adjust it so that it grabs the current value from the numeric up down control we named “nudSetPoint”. If we click on the little “…” icon to the right of the “On click send” text box a dialog appears which shows the message in a larger editor. At the top right of this dialog you see a little box icon, if you click on this it will list all the current controls and give you detail on the properties you can use to construct messages. You will notice your numeric up down control named “nudSetPoint”, click on it and select value. In the dialog you will see “[nudSetPoint.Value]”, inside these square brackets is an expression that will get executed and the result will be added to the message you want to send. In this case it will get the current value and send “SETTEMP 0\r\n” because our numeric up down control was set to zero. You could also add some maths inside the square brackets. For example “[nudSetPoint.Value*100+1]” will multiply the current value by 100 and add 1 to the result. Check out Creating Serial Commands for details on the commands you can create.

Receiving Messages

As well as sending messages MegunoLink’s interface panel can also receive messages and adjust controls accordingly. A good example of this would be to get the current set points from your device and update all of the controls to match. Another example would be to send the current progress level to a progress bar for a visual indicator of where you are up to in a program as it executes. To make the Interface Panel receive these messages you must first add a “MLPUIMessageProcessor” control from the Communications section of the toolbox.

Below is an example of the message sent to MegunoLink which sets the progress bar named “CurrentProgress” to the 50% level.

{UI|SET|CurrentProgress.Value=50}

See also

• Interface Panel
• Control and Components
  • Message library
  • Text box
  • MLP UI Message Processor
  • MLP UI Message Processor Arduino Library

Wrapping Up

There are many more controls available allowing a huge level of customization, and making complete documentation difficult. Please ask questions and we will try to get examples demonstrating each feature as time goes on.