Creating Graphical Interfaces for Embedded Linux with Electron

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 device’s 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

Arduino standard shield with protoboard

Aster carrier board

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, we’ll 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 module’s 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

You’ll 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 project’s and execute the command below. As an example, we’ll 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, we’ll take a quick look at an interface that isn’t 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 interface’s 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. We’ll begin by creating index.html inside the electron directory. This file will contain the page’s visual components, including text and images. The contents of index.html are presented below:

14

Next, we’ll 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, we’ll 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, we’ll 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