Creating Graphical Interfaces for Embedded Linux with Electron - PowerPoint PPT Presentation

About This Presentation
Title:

Creating Graphical Interfaces for Embedded Linux with Electron

Description:

Toradex's latest blog post on how to install Electron software on a Colibri iMX6 module, run basic programs to evaluate the software and, develop a basic GUI using Node.js, JS, HTML and CSS. – PowerPoint PPT presentation

Number of Views:126

less

Transcript and Presenter's Notes

Title: Creating Graphical Interfaces for Embedded Linux with Electron


1
  • Creating Graphical Interfaces for Embedded Linux
    with Electron

2
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.
3
Colibri iMX6 module
Aster carrier board
Arduino standard shield with protoboard
EDT Display
4
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.
5
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
6
Youll see something like the following output as
you press Return
7
(No Transcript)
8
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/auQ0ZPf
7wy8
9
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
10
(No Transcript)
11
(No Transcript)
12
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.
13
https//bevacqua.github.io/dragula/
14
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
15
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
16
(No Transcript)
17
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
18
(No Transcript)
19
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
20
(No Transcript)
21
Finally, we can run our GUI with the following
command
Electron Demo Video Link https//youtu.be/bCqJiJj
aC_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.
22
Thank you
Write a Comment
User Comments (0)
About PowerShow.com