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.
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:
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.
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.
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.
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:
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:
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.
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.
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.
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.