Control embedded menu application from browser - embedCONTROL.js

Instead of the desktop version, on larger boards and Raspberry PIs (2.3 onwards) you can serve a React.JS based single page web application that needs no installation. It works on a wide range of mobile phones, desktop and tablet devices.

Using the deployed app

To open the app, simply browse to the device on the configured host and port. For example if the device were 192.168.2.2 and the port were 8080, you would connect to http://192.168.2.2:8080, in the case of port 80 you can omit the port number.

Note: On the Raspberry PI and any other Unix distribution, by default you cannot listen on ports less than 1024 without being the root user. There are a few options to get around this, the simplest of which is to run the webserver on port 8080.

Once the application loads, it will immediately attempt to connect using a websocket back to the server that initiated the connection. Once a connection is established and the initial state has been loaded each menu item is presented vertically, if the item is editable you’ll be able to change it using the appropriate UI. An example layout is presented below.

Unlike the Java version though, at the moment the colouring cannot be changed within the app, instead you could provide your own version of the CSS. We’ll make this easier in the future.

How it works

This version of embedCONTROL is deployed to a web server and the server will serve up the application, with any updates and commands being sent on a websocket but essentially still using TagVal protocol over a websocket.

Should you wish to customize / build / look at / star it, the repository is here https://github.com/davetcc/embedcontrolJS.

By default, the designer UI can take the most recently built version and auto deploy it to certain larger boards including ESP32 and Raspberry PI. Further, using embedded Java on Raspberry PI, you can even use menu in menu support to combine many sets of device data together into a single browser page.

Using global settings to set your device name

Before pairing, go to the settings (top right button) and change the device name.

Controlling and monitoring the menu

Unlike the desktop version, the web version only controls one device, the one the board connected to (although if it happened to be a Raspberry PI using menu-in-menu you could be controlling more than one menu indirectly).

Analog, 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.

Pairing with the device

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 a pairing dialog. Make sure you have the embedded device close by as you’ll need to accept the request there.

Once ready start the pairing process and accept it on the device screen. Note you should only ever accept pairing requests when you know for sure you initiated it.