Deploy a modern GUI on an embedded device in 5 Simple Steps
In 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.
- TotalCross plugin for VScode
- Java 11+ (we just run JAVA on development time, no need of JAVA on the device)
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.
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:
Download the home appliance source code, available on GitHub, and run it with the TotalCross simulator (just hit RUN on the java class HomeApplianceXMLApplication.java). 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.
- homeApplianceBeautifulXML.xml: this is the XML of the new style, represented on the image below
- homeApplianceLightXML.xml: this is the starting version of the GUI
You can switch from one to another just changing the class UIConfig.java (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 =)
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.
- Dockerfile, a document that contains all the commands a user could call on the command line to assemble an image
- 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)
- Readme, with all instructions for using the container
In the app folder of the Torizon demo home appliance, all files, except the start.sh 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
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
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 start.sh file inside the TotalCross container and run the application. It should show an UI like in the image below.
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.