Derzeit werden graphische Benutzeroberflächen (sogennante GUIs) bei einer grossen Anzahl von Embedded Projekten verwendet. GUIs ermöglichen dem Benutzer die Interaktion mit digitalen Geräten mittels graphischen Elementen wie Icons oder anderen Symbolen auf dem Bildschirm. Gute GUIs sind eine wichtige Komponente von Embedded-Geräten, da sie die Bedienung von Anwendungen stark vereinfachen und dem Benutzer so den schnellen Umgang ermöglichen.

Qt, GTK oder Electron sind nur einige von vielen Tools auf dem Markt, welche das Erstellen von GUIs ermöglichen. Electron ist zudem ein Framework für die Entwicklung von native Applications und verwendet aktuelle Technologien wie JavaScript, HTML und CSS.

In diesem Blogbeitrag installieren wir das Framework Electron auf einem Toradex Colibri iMX6, führen einige Beispielprogramme aus und evaluieren die Software. Zum Abschluss entwickeln wir eine grundlegende GUI mittels Node.js, JavaScript, HTML und CSS.

In diesem Blogbeitrag steuern wir eine LED mittels einem User Interface, implementiert mit Electron und erstellt in HTML mit Node.js, CSS und JavaScript Support, um auf die Hardware zuzugreifen. Wir wählten zuerst ein Colibri i.MX6 Modul aus, welches mit dem Aster Carrier Board kompatibel ist und entschieden uns zudem für die Verwendung von GPIO 35, welcher mit dem SODIMM_133 Output Pin verbunden ist (GPIO 35), um die LED auf dem Protoboard zu steuern. Um mehr über die anderen Pins des Modules zu erfahren, besuchen Sie diese Seite.

Wir installierten Linux XY mit dem Toradex Easy Installer. Anschliessend installierten wir das Electron Framework gemäss den Schritten von diesem Artikel.

Als Erstes müssen wir die System Packages updaten und einige zusätzliche Packages installieren. Führen Sie dazu folgende Befehle in der Kommandozeile des Moduls aus:

opkg update
opkg install libxss1 libcups2 nodejs nodejs-npm git

Anschliessend führen Sie innerhalb eines Ordners mit dem Namen electron den Befehl npm init aus, um die Datei package.json zu erstellen, auf der die folgende Installation basiert. Drücke Sie bei diesem Schritt die Eingabetaste, um die Standardkonfiguration zu akzeptieren.

mkdir electron
cd electron
npm init

Sie sollten dann eine ähnliche Ausgabe wie die Folgende sehen:

name: (electron)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /home/root/electron/package.json:
{
"name": "electron",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

Abschliessend installieren wir das bereits kompilierte Electron Package:

npm install electron-prebuilt

Nachfolgend finden Sie ein Video, in dem einige mit Electron erstellte GUIs auf dem Colibri iMX6 Modul vorgestellt werden.

Sie finden hier einige Beispiel zum Herunterladen und Testen.

Laden Sie die Beispieldateien in einen neuen Ordner herunter:

mkdir Samples
cd Samples
git clone https://github.com/hokein/electron-sample-apps.git

Um eine Beispieldatei auszuführen, wechseln Sie den Pfad zum Projektordner und starten dann den untenstehenden Befehl. Als Beispiel führen wir die “Frameless-Window” GUI aus, welche auch im obigen Video vorgestellt wurde.

cd electron-sample-apps
cd frameless-window
~/electron/node_modules/.bin/electron .

Sie finden viele weitere Beispiele von GUIs für Electron online.

Das nächste Interface ist nicht in den Beispieldateien enthalten. Diese GUI implementiert die nachfolgend gezeigte Interaktion, bei welcher Textboxen per Drag and Drop verschoben werden können.

Electron benötigt vier grundlegende Dateien. Die Erste, package.json, wurde bereits während der Installation erstellt. Sie wird verwendet für das Starten der Electron Anwendung und führt main.js aus. Diese Datei (main.js) initialisiert die GUI und lädt index.html, welche die visuellen Komponenten des Interfaces enthält. Sie ist vebunden mit zwei weiteren Dateien: index.js, welche die Befehle für die Steuerung der LED enthält und mystyle.css, welche das Aussehen der Elemente des Interfaces definiert. 

Wir beginnen mit dem Erstellen der index.html innerhalb des electron-Ordners. Diese Datei enthält die visuellen Komponenten der Seite inklusive Text und Bilder. Im Folgenden ist der Inhalt der Datei index.html dargestellt:

<!DOCTYPE html>
<head>
  <title>Toradex Demo</title>
  <link href="mystyle.css" rel="stylesheet">
  <script type="text/javascript" src="index.js"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <input type="button" class="button" onclick="toogle();" value="Switch LED" />
</body>
</html>

Als nächstes erstellen wir die Datei index.js (Steuerbefehle für die LED):

var x;
var fs = require('fs');
function set()
{
        fs.writeFile('/sys/class/gpio/export', 35, function(err)
        {
                if (err)
                {
                console.log(err);
                }
                else
                {
                fs.writeFile('/sys/class/gpio/gpio35/direction', "out", function(err)
                {
                        if (err) {
                        console.log(err)
                };
                });
        }
        });
}
function toogle()
{
        if (x  === 1)
                {
                        x = 0;
                        fs.writeFile('/sys/class/gpio/gpio35/value', 0);
                }
        else
                {
                        x = 1;
                        fs.writeFile('/sys/class/gpio/gpio35/value', 1);
                }
}
// initialization
set();
console.log("Hello World")

Anschliessend erstellen wir die Datei main.js (Start der Anwendung):

const electron = require('electron')
const {app, BrowserWindow} = electron
 
app.on('ready', () => {
  let win = new BrowserWindow({width:1280, height: 720})
  win.setFullScreen(true)
  win.loadURL(`file://${__dirname}/index.html`)
})

Anschliessend erstellen wir die Datei mystyle.css (Layout der Elemente):

body
{
        background-color: #222930;
}
h1
{
        color: #E9E9E9;
        text-align: center;
}
.button {
  margin-left: 43%;
  margin-right: 37%;
  background: #93c5e6;
  background-image: -webkit-linear-gradient(top, #93c5e6, #6eb4e0);
  background-image: -moz-linear-gradient(top, #93c5e6, #6eb4e0);
  background-image: -ms-linear-gradient(top, #93c5e6, #6eb4e0);
  background-image: -o-linear-gradient(top, #93c5e6, #6eb4e0);
  background-image: linear-gradient(to bottom, #93c5e6, #6eb4e0);
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  font-family: Arial;
  color: #000000;
  font-size: 20px;
  padding: 30px 30px 30px 30px;
  text-decoration: none;
}

Bemerkung: Um innert kurzer Zeit einen neuen Button Style zu entwickeln, können Sie ein Tool von dieser Seite verwenden.

Als nächstes müssen wir die Datei package.json wie folgt modifizieren:

  "scripts": {
    "start": "electron main.js"
  },

Ihr Ordner sollte nun nach dem Ertellen dieser Dateien wie folgt aussehen:

Abschliessend führen wir unsere GUI mit dem folgenden Befehl aus:

npm start

Sobald wir auf den Button “Switch LED” klicken, schaltet der SODIMM_133 Output mit der LED an. Klicken wir erneut auf den Button, schaltet die LED aus. Bei jedem weiteren Klick wechselt die LED erneut den Status.

Sie lernten in diesem Blogbeitrag, wie die Electron Software installiert werden kann, wie einige Beispiele funktionieren und wie eine GUI von Scratch erstellt werden kann. Dieser Artikel fungiert als Einstieg für das Erstellen von graphischen Interfaces für sämtliche Module von Toradex. Benutzer, denen die webbasierten Programmiersprachen bis zu einem gewissen Grad bereits bekannt sind, sollte der Umgang mit Electron keine Mühe bereiten.

Node.js ist ein serverseitiger JavaScript Interpreter. Er verfügt über ein natives Modul, welches das Arbeiten mit dem Filesystem erlaubt und somit Zugang zu den GPIO Pins verfügbar über sysfs ermöglicht. Für Node.js sind viele Nativ- und Drittmodule verfügbar, wie zum Beispiel ein HTTP-Modul, mit welchem ein Webserver aufgesetzt werden kann. Weitere Informationen finden Sie auf der offizielllen Node.js Website.

JavaScript ist eine vom Client ausgeführte Programmiersprache, gewöhnlicherweise vom Webbrowser des Benutzers. Kombiniert mit HTML und CSS ermöglicht JavaScript die Erstellung von interaktiven Websites. Falls Sie mehr über JavaScript erfahren möchten, bietet Ihnen diese Seiteeine gute Einführung.

HTML (Hypertext Markup Language) ist eine Markup Language für die Entwicklung von Websites. Es ist die Grundsprache des Internets und sie wurde entwickelt für die einfache Verständigung zwichen Menschen und Maschinen gleichermassen. Mehr über HTML erfahren Sie hier.

CSS (Cascading Style Sheets) ist eine Sprache, um das Layout der Elemente einer Website zu definieren, welche eine Markup Languages wie HTML verwenden. Weitere Informatinen über CSS finden Sie auf dieser Seite.

Kommentar hinterlassen