Deploy a modern GUI on an embedded device in 5 Simple Steps

Monday, October 19, 2020

TotalCrossIn this article, we will show you how to apply remote updates on a deployed application, directly on the device. We will use some cool technologies, like the latest Apalis iMX8, Docker and Torizon, a Toradex Linux-based software platform that enables the usage of docker containers in an embedded device.

To show these technologies working together, we will update the GUI of a home appliance application, which is an app to control the temperature of a house locally with the embedded device or using a mobile application.

We built this sample app using TotalCross, a GUI framework that enables the usage of high level technologies like JAVA and Android XML to build GUI apps with low footprint (starting with 5Mb) and high performance on the device.

You need to install these first before following the steps in this article:
  1. VScode
  2. TotalCross plugin for VScode
  3. Java 11+ (we just run JAVA on development time, no need of JAVA on the device)
  4. Docker
  5. Git

First of all, let me show you how the starting home appliance sample application looks like. The image below shows the application running on the IMX8 with a clean but simple style. I am using a small 5 inch display to simulate a real home assistant, but you can try this sample app with different display sizes (like a 32 inch monitor) and resolutions (4k for example). The application will adjust to any horizontal screen size.

Home Appliance Application

To update the application on the device we will follow 5 steps.

AI2GO offers more than a hundred fully-trained models, optimized to run on a multitude of resource-constrained devices, able to operate under numerous constraints including memory, power, and latency. Now, with just a few lines of code, XBs are being used to build solutions for retail analytics, smart home, and industrial IoT.

Using AI2GO is simple. Here’s how it works:

5 steps to update the GUI of your remote embedded app
Step 1

Download the home appliance source code, available on GitHub, and run it with the TotalCross simulator (just hit RUN on the java class The UI will look like the next image. In case it’s your first time using TotalCross, you can check out the get started in their documentation session as well as tutorial videos that show how to use TotalCross in VScode.

Inside the source code you will find the folder resources/xml with two XMLs inside it:
  1. homeApplianceBeautifulXML.xml: this is the XML of the new style, represented on the image below
  2. homeApplianceLightXML.xml: this is the starting version of the GUI
Home Appliance Application UI

You can switch from one to another just changing the class (line 25) and you can try the different styles using the TotalCross Simulator. They will have the same behavior and functions, the only difference is the style =)

Step 2

To deploy the application to the device by running the PACKAGE command from the TotalCross VSCode Plugin. This command will create all the files needed to run on Linux Arm.

After the packaging process, we will not use the plugin to perform the deployment and run on the device. Instead, we will download the Torizon demo home appliance project. It has all the material necessary to deploy the application in the docker container. This project is composed by:
  1. Dockerfile, a document that contains all the commands a user could call on the command line to assemble an image
  2. Docker compose, a file to document and configure all of the application's service dependencies. You need to choose one depending on your device architecture (32 bits or 64 bits)
  3. Readme, with all instructions for using the container
Step 3

In the app folder of the Torizon demo home appliance, all files, except the file, must be deleted.

Now we copy the files created by the PACKAGE into the project's app folder. The files are in the path target/install/linux-arm inside the project home-appliance-xml

Step 4

Now it's Docker time =) and for that we need to: Build an Docker image and publish the image to use it on the device.

Open your terminal if you are in Linux/MacOS or, in case of Windows user, open de PowerShell to run the docker commands. Using the terminal, enter the folder where the dockerfile is and run the next command to build the docker image.

docker build . -t totalcross/home-appliance-demo

When running this command for the first time, the duration time of the IMAGE build will vary, but should take around 10 minutes. If you need to run it again, the time will be significantly shorter, because the docker verifies if there are layers in another local image before building then. This allows the process of adding new modifications to the image to be fast.

Now to publish the Docker image with the modifications, we run the command below. This process may take several minutes.

docker push totalcross/home-appliance-demo:lastest
Step 5

Last step is to run the Docker container on the device and run the application. In the iMX8 terminal, run two commands: one to load a weston container, which is a wayland server and one to load the TotalCross container with our application inside.

docker run -e ACCEPT_FSL_EULA=1 -d --rm --name=weston --net=host --cap-add CAP_SYS_TTY_CONFIG  -v /dev:/dev -v /tmp:/tmp -v /run/udev/:/run/udev/  --device-cgroup-rule='c 4:* rmw'  --device-cgroup-rule='c 13:* rmw' --device-cgroup-rule='c 199:* rmw' --device-cgroup-rule='c 226:* rmw' torizon/arm64v8-debian-weston-vivante:buster --developer weston-launch --tty=/dev/tty7 --user=torizon
docker run --rm -it --name=totalcross -v /tmp:/tmp  -v /dev/dri:/dev/dri --device-cgroup-rule='c 226:* rmw' totalcross/home-appliance-demo:latest

Finally, locate the file inside the TotalCross container and run the application. It should show an UI like in the image below.

Home Appliance Application Demo

An interesting fact about this application is the little footprint of only 8Mb in the device, including the android xml, the assets and all the other things.

Using container technologies like Docker and Torizon makes it easy to do remote updating over the air. Also, we saw how to change the entire UI from a deployed application keeping the same interaction and functions that already existed just by changing one XML on the source code.

Now it's your turn to try to update the GUI of your remote embedded app and if you need any help, you can find us at Discord or Telegram. If you like this article, don't forget to like it and share it.

Author: Patrick Martins, Embedded Engineer, TotalCross
Share this on:

Leave a comment

Please login to leave a comment!
Have a Question?