Electronを利用し、組み込みLinux用のグラフィカルインターフェイスを作成

2017年10月13日金曜日
Colibri
はじめに

現在、グラフィカルユーザインターフェイス(GUI)は、多くの組み込みプロジェクトで使われています。GUIがあれば、ユーザは、スクリーンに表示されるアイコンなどのインジケータを含むグラフィック要素を介してデジタルデバイスとやり取りができます。組み込みデバイスにとって優良なGUIは重要なものです。操作性が増し、ユーザがデバイスの動作を理解するのに役立つからです。

現在、QtやGTKなどGUIを作成するためのツールが数多く市場に出ています。JavaScript、HTML、CSSなどのウェブ技術を使いネイティブアプリケーションを作成するためのフレームワークであるElectronも、こうしたツールの1つです。

このブログ投稿では、Toradex Colibri iMX6モジュール上にElectronをインストールし、簡単なサンプルプログラムを実行してソフトウェアの評価を行い、最後に、Node.js、JavaScript、HTMLとCSSを使用して簡単なGUIを開発します。

Colibri iMX6 DualLite 512MB IT

Colibri iMX6 module

Aster carrier board

Aster carrier board

このブログ投稿においては、Electronで開発したユーザインターフェイスを通してLEDを制御することにします。ハードウェアにアクセスするためのこのインターフェイスは、Node.js、CSSおよびJavaScriptのサポートを使ってHTMLで作成します。これを実現するため、どのColibri i.MX 6モジュールがAsterキャリアボードへ接続できるかを確認しました。使うことにしたピンはGPIO 35です。1本のケーブルをSODIMM_133出力ピンへ接続し(GPIO 35へ接続)、プロトボード上のLEDを制御するのに利用しました。他のモジュールピンを見るには、このサイトをご覧ください。

Switch LED button on
Electronのインストレーション

Toradex Easy Installerを使用してLinux XYをインストールしました。次に、この記事の手順に従ってElectronフレームワークをインストールします。

まず、システムパッケージをアップデートし、いくつかのパッケージおよびライブラリをインストールする必要があります。これには、モジュールのターミナルで次のコマンドを実行します。

opkg update
opkg install libxss1 libcups2 nodejs nodejs-npm git

次に、electronというディレクトリの中でnpm initコマンドを実行し、package.jsonファイルを作成します。これは下記のインストレーションのレポジトリとなります。この手順では、標準設定のままとするため、リターンキーを押します。

mkdir electron
cd electron
npm init

リターンキーを押すと、次のような出力が表示されます。

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"
}
Command Screen


最後に、プリビルトされたElectronパッケージをインストールします。

npm install electron-prebuilt
デモンストレーション

下のビデオでは、Electronで作成したGUIをColibri iMX6モジュール上で稼働させているものをいくつか紹介しています。

サンプルは2つ用意されており、簡単にダウンロードして検証が可能です。

まずは、サンプルレポジトリを新規ディレクトリにダウンロードしてください。

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

サンプルを実行するには、作業ディレクトリをプロジェクトのディレクトリに変え、下のコマンドを実行します。例えば、「Frameless-Window」GUIを実行してみます。これは、上記のビデオで紹介されていたサンプルの1つです。

cd electron-sample-apps
cd frameless-window
~/electron/node_modules/.bin/electron .
Aster Carrier Board connected
GUI

Electronで作成されたGUIの例は、他にもたくさんネット上で見つけることができます。

次に、先ほどダウンロードしたサンプル以外のインターフェイスも簡単に見てみましょう。このGUIは、このスクリーンショットの下にあるサイト上で示されているインタラクションを実装するものです。ドラッグ&ドロップのアクションを使ってテキストボックスを移動させることができます。

Dragula
https://bevacqua.github.io/dragula/
開発

Electronに必要なのは基本ファイル4つです。1つ目のファイルpackage.jsonは、インストールの際に作成しました。package.jsonは、main.jsを実行することでElectronアプリケーションを起動するのに使われます。main.jsは、GUIを初期化し、index.htmlをロードします。index.htmlにはインターフェイスの視覚的構成要素が含まれています。このファイルは、2つの他のファイルとつながっています。1つはindex.jsで、LEDを制御するコマンドを含んでいます。もう1つはmystyle.cssで、インターフェイス要素の見た目を定義します。最初のステップは、Electronディレクトリ内にindex.htmlを作成することです。このファイルには、テキストやイメージといった、ページの視覚的構成要素を入れます。index.htmlの内容は以下の通りです。

<!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>

次に、index.jsを作成します。これには、LEDを点灯・消灯する関数を入れます。index.jsにはJavaScriptを使用し、内容は以下の通りです。

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")

次は、main.jsの作成です。このファイルはグラフィカルインターフェイスを初期化し、解像度を定義するためのものです。main.jsの内容を以下に示します。

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

その後、mystyle.cssを作成します。これは、インターフェイス要素の見た目を定義します。mystyle.cssの内容を以下に示します。

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;
}

注意:新しいボタンスタイルを簡単に作成するには、このサイトにあるツールを使用できます。次に、package.jsonファイル内で、startスクリプトを次のように変更します。

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

ファイルを作成すると、フォルダは次のようになるはずです。

Folder

最後に、次のコマンドでGUIを実行します。

npm start

「Switch LED」ボタンをクリックすると、SODIMM_133出力のLEDが点灯します。ボタンを再度クリックすると、LEDが消えます。ボタンをクリックするごとに点灯状態が変わります。

結論

本ブログ投稿では、Electronソフトウェアおよびいくつかのサンプルをインストールする方法、さらにElectron GUIを一から作成する方法も学びました。本記事は、Toradexモジュール用のグラフィカルユーザインターフェイスを作成するための出発点となります。ウェブ用のコードを書くことにある程度慣れていれば、Electronはとても使い易いことでしょう。

用語解説
Node.js

Node.jsは、サーバ側のJavaScriptインタプリタです。ファイルシステムの利用を可能とするネイティブモジュールを持っており、このため、sysfsを通してGPIOピンへのアクセスが可能です。ウェブサーバを実装するのに利用できるHTTPモジュールなど、Node.jsには多くのネイティブモジュールおよびサードパーティモジュールがあります。詳細は、公式Node.jsサイトをご覧ください。

JavaScript

JavaScriptは、クライアント(通常はユーザのウェブブラウザ)によって解釈されるプログラミング言語です。JavaScriptをHTMLおよびCSSと組み合わせると、インタラクティブなウェブページを作成できます。JavaScriptについて詳しく知りたい方は、このサイトeをご覧ください。優れた入門的内容が提供されています。

HTML

HTML(Hypertext Markup Language/ハイパーテキスト・マークアップ・ランゲージ)は、ウェブサイト開発に使われるマークアップ言語です。インターネットの基本言語であり、人間も機械も簡単に理解できるよう設計されました。HTMLについて詳しく知りたい方は、このサイトをご覧ください。

CSS

CSS(Cascading Style Sheets/カスケーディング・スタイル・シート)とは、HTMLなどのマークアップ言語を使って作成されるウェブページ要素の視覚的表示スタイルを定義するのに使う言語です。CSSについての詳細は、このサイトをご覧ください。役に立つ入門的内容が提供されています。

#CSS #Electron #Embedded Linux #HTML #Node.js #NXP® i.MX6
Author Daniel Augusto Soré de Morais, Toradex Brasil

Leave a comment

Your email ID will be kept confidential. Required fields are marked *


上の画像に表示されている文字を入力してください。大文字と小文字は区別されません。



* Your comment will be reviewed and then added. Thank you.