embedCONTROL desktop UI for controlling and monitoring Arduino

EmbedCONTROL UI desktop is an application that runs on most desktop systems to monitor and control embedded devices that are running tcMenu software. Simply build the remote capability into the menu application running on the device from tcMenu Designer. This covers the desktop version, see the separate guide for the web version.

It is assumed at this point that you have built a menu application onto a device, and have set up a remote endpoint. Take down the connection details, as you’ll need them further down.

Getting started

To install the application use the latest release of embedCONTROL for your hardware here: https://github.com/davetcc/tcMenu/releases

Once installed start the app, at this point you should see a window similar to below:

The screen is now split into three main areas:

1. The navigation bar, this keeps track of where you are in the app and offers a back button when needed. It shows the title of the current panel, and also any configuration or status for the panel is presented on the right.
2. The menu control/panel area, this presents the current panel, normally either a configuration page or a menu structure from a device.
3. The selection area, here you can choose the connection you want to work with, or create a new connection.

Creating a connection

To create a new connection select “New connection” from the selection area (3). Once selected the following panel will appear:

Firstly, it is mandatory to enter a connection name, so enter this first.

Next, choose the type of connection you want to create and fill in the connection details. For a serial connection that is the name of the port and baud. For a socket connection that is the IP address and port number. Just to test the UI you can create a simulator connection.

Once populated, press “Create Connection” and the connection will be created, you’ll also now see the new connection in the selection area (3).

Importantly, since 2.3 you must save this connection yourself by pressing the save icon in the right corner of the navigation bar (1). This is to allow temporary connections to be created without overflowing the selection area.

When connected with the device, you’ll see the LED in the right corner goes to yellow once fully connected.

Pairing with a connection

When you connect to a board for the first time, it may be the case that you need to pair with the device. This is only the case if you turned on Authentication in tcMenu Designer. When you try to connect the UI automatically detects that pairing is needed and presents the following:

At this point make sure the embedded device is close to hand, as you’ll need to accept the request there. Once both devices are close by, click start pairing.

A few moments later, you should see the status change to indicate that pairing is in progress, further, you should see a dialog on the remote device with an “Accept” and “Cancel” option. Ensure the name matches your device and select “Accept”.

Once you do this, the pairing status should change to indicate success. You can now close the pairing window.

Note that the pairing attempt will time out after 30 seconds.

Monitoring and managing menu items

If we go back to the original image at the top of the window, we saw a menu structure loaded in the panel area (2). Each menu item had a space in the window, we could see the name of the item and the current value.

Analog items are by default edited using a slider control, while enum and scroll items are edited using up-down buttons. Dates and times use a date time control, while color items use a color wheel. All other items are edited as text.

There is a fair amount of validation before sending an item to the server, it should not be possible to send a bad value.

When you change an item locally, it will not show the new value until the server confirms the value by echoing it back. In that time the item will show in the pending color. Once the update is received the item will change to the updated color momentarily.

Should there be a problem with either sending the update, or you enter a bad value, the control will momentarily go red.

Editing the configuration for a menu

Each menu has its own configuration, and can be edited independently. There are a few global settings, but most settings are stored per menu, allowing a lot of customization right down to the menu item level.

When you click on the settings cog in the navigation bar you’ll be presented with this menu:

• Edit colors allows the color and position settings to be managed at various levels (discussed below).
• Edit connection brings up the same connection dialog as the new connection dialog, but in edit mode.
• Delete connection will remove the current connection from both the selection area and from disk. Be careful with this, all customizations will be irretrievably lost.
• Restart connection just stops the current remote connection and restarts it.

Editing color and position information

The color and position information can be edited either globally, at the sub menu level, or at the item level. There is an order of precedence in tcMenu as follows:

• Setting available at the item level
• Setting available at the current submenu level
• Global settings

In the above color editor we can see that the sub menu to change colors for can be selected, we can also select the global settings. Once selected current settings for that element are displayed.

You can change the font size at that level, you can decide if you want the menu to show in one long screen (recursive mode) or as separate navigable pages. Each color can be changed by clicking on the color editor. Further, when global is not selected, you can decide if you want to override a particular color or not by ticking the box on the left side of each color.

Global settings

The global settings can be edited by selecting App Settings from the selection area. Here the application name and UUID can be changed. Bear in mind changing the name or UUID will require re-pairing with any devices.

The extra checkbox “Enable layout customization” puts a button with an asterisk in it on the right side of all items, clicking that button brings up the item configuration editor.

Item level configuration

Once you click on an item configuration edit button, you’ll be presented with a dialog where you can adjust the color and layout of the menu item.

From the layout editor we can change the below settings, pressing Save ensure your changes are saved, while remove will completely remove the override.

• Font size - the font size used for a particular item
• Text mode - what text exactly should be shown (name, name and value, etc)
• Justification - justification of text in the control
• Control - the type of control to use, ensure the one you pick is compatible with the item
• Colors - you can set one or more color at the item level, uses the same color editor as above

Grid settings

Items are arranged in a grid, by default embed control uses a 4 column layout arranged into rows. When no configuration exists at the item level, all 4 columns are used by that item. Then each item has a fresh row.

You can rearrange the rows and columns yourself using the row, column, and column span settings.

comments powered by Disqus