Creating Graphical Interfaces for

Embedded Linux with Electron

 Introduction
Currently, graphical user interfaces (GUIs) are used in a large number of embedded projects. GUIs
allow users to interact with digital devices through graphical elements like icons and other
indicators present on the screen. Good GUIs are important for embedded devices, as they improve
ease of use and help users to understand a devices operation more readily.

In the current market, there are many tools to create GUIs, including Qt and GTK. Electron, a framework
for creating native applications with web technologies like JavaScript, HTML and CSS, is another one of
these tools.
In this blog post, we will install Electron on a Toradex Colibri iMX6 module, run some basic sample
programs to evaluate the software and lastly, develop a basic GUI using Node.js, JavaScript, HTML and CSS.

2
 Colibri iMX6 module Aster carrier board

Arduino standard shield with protoboard EDT Display

For this blog post, we will control one LED through a user interface implemented by Electron and created in HTML
with Node.js, CSS and JavaScript support to access the hardware. To make this possible, we verified which Colibri
i.MX 6 modules can connect to the Aster carrier board. We decided to use GPIO 35, physically connecting one cable
to the SODIMM_133 output pin (connected to GPIO 35) and using it to control an LED on a protoboard. To see the
other module pins, visit this site.

4
Electron Install
We installed Linux XY with Toradex Easy Installer. Next, well install the Electron framework according to the steps
in this article.
First, we need to update the system packages and install a few additional packages and libraries. To do this, run
the following commands in the modules terminal:

Next, run the command npm init inside a directory called electron to create the package.json file, which will
be the repository for the following installation. In this step, press the Return key to accept the standard
configuration:

5
Youll see something like the following output as you press Return:

6
7
Lastly, install the pre-built Electron package:

Demonstration
Below is a video that shows some GUIs created with Electron running on a Colibri IMX6 module.

Video Link: https://youtu.be/auQ0ZPf7wy8

8
There are a couple of examples which you can easily download and test.
Start by downloading the sample repository to a new directory:

To execute a sample, change your working directory to the projects and execute the command below. As an example,
well run the Frameless-Window GUI, one of the samples from the video above:

9
10
11
You can find many more example GUIs created for Electron online.
Next, well take a quick look at an interface that isnt in the samples downloaded above. This GUI implements the
interaction shown on the site below this screenshot, in which text boxes can be moved using a drag-and-drop action.

12
https://bevacqua.github.io/dragula/

13
Development
Electron requires four basic files. The first, package.json, was created during the install. It will be used to start the
Electron application by running main.js. main.js will initialize the GUI and load index.html, which contains the
interfaces visual components. It is connected to two other files: index.js, which contains commands to control the
LED; and mystyle.css, which defines the appearance of the interface elements. Well begin by creating index.html
inside the electron directory. This file will contain the pages visual components, including text and images. The
contents of index.html are presented below:

14
Next, well create index.js, which will contain functions to turn the LED on and off. index.js uses
JavaScript, and its contents are presented below:

15
16
After that, well create main.js. This file is responsible for initializing the graphical interface and defining its resolution.
The contents of main.js are presented below:

After that, well create mystyle.css, which defines the appearance of the interface elements. The contents
of mystyle.css are presented below:

17
18
Note: To quickly create a new button style, you can use the tool available on this site. Next, in the package.json file, we
need to modify the start script like this:

After creating the files, the folder should look like this:

19
20
Finally, we can run our GUI with the following command:

Electron Demo Video Link: https://youtu.be/bCqJiJjaC_I

When we click the Switch LED button, the LED in the SODIMM_133 output will turn on. After clicking the
button again, it will turn off. Its state will change each time we click the button.

Conclusion
In this blog post, you learned how to install the Electron software and some samples, as well as how to
create an Electron GUI from scratch. This article serves as a starting point for creating graphical user
interfaces for all Toradex modules. Those who are already familiar to some extent with coding for the
web should find Electron very easy to use.

21
Thank you