JavaScript
FirefoxOS
IoT
WebGPIO
chirimen

CHIRIMENでWebGPIOにハローワールドしてみた #ChirimenBoard

More than 1 year has passed since last update.

手に入れてからしばらく経つけど、ようやくサクッとまとめました...!


WebGPIO

navigator.requestGPIOAccess()が使えるようになります。その名の通りGPIOにJSからアクセスできるようにするための規格です。

https://rawgit.com/browserobo/WebGPIO/master/index.html#example-getting-access

Webブラウザの標準にしたいねってところでW3CのDraftにあがってます。


CHIRIMENとは

WebGPIOが使えるJavaScriptボード!

JavaScript好きな人でIoTやりたい人は胸アツだと思います。

https://chirimen.org/


CHIRIMEN はセンサーやアクチュエーターなどの物理デバイスを Web 技術だけで制御することができる開発環境で、ボードコンピュータとその上で動作するソフトウェアを含めた総称です。ボードコンピュータとしてのハードウェア、その上で動作する Boot to Gecko ソフトウェア、センサーや物理デバイスを JavaScript から制御するための WebGPIO や WebI2C といった低レベル API の実装などが含まれており、日本で誕生したCHIRIMEN Open Hardwareというコミュニティによって開発され、CHIRIMENというコードネームがつけられました。


メイカーフェアTOKYO 2016やイベントで買えました。

(販売は現状どうなってるんだろ)


さっそくLチカまでしてみる

ファームウェアが書き込まれているものを前提に進めます。


準備

CHIRIMEN Hello worldを見ながら進めます。


  • FireFoxをインストールします。

僕はFireFoxのDeveloperEditionを使ってるので青いです。


  • FireFox WebIDEを起動

右上の地球マークっぽいアイコンをクリックすると起動できます。


  • プロジェクトのテンプレートを作る

新規アプリ > テンプレートを選択 > Hello Worldを選択します。

プロジェクト名には任意の名前を入れましょう。今回はfirstprojectとしました。

OKを選択し、ファイルを任意の場所に保存します。

 


  • CHIRIMENを起動

ACアダプタで電源につなげます。


  • microUSBでCHIRIMENとPCを接続


  • ADBコマンドでFireFoxOSと接続する

adbはAndroid開発で利用するコマンドです。

最近だとAndroidStudioなどをインストール(&パス設定)していると使えます。

ない人は入れましょう。

$ adb devices

List of devices attached
0123456789 device

WebIDEを見るとUSBデバイスの項目にCHIRIMENと表示されます。

これで接続できました。


Lチカのコーディング

ここのコードが元になっています。

まずJSフォルダを作成し、webgpio.jsworker.jsをコピーして作成します。

index.htmlを書き換えます。


ちなみにworker.jsはwebgpio.jsの中から呼び出してるのでHTML側に記載はしません。



index.html

<!doctype html>

<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<title>LED Blink</title>
<script src="./js/webgpio.js"></script>
<script src="./app.js"></script>
</head>

<body>
</body>

</html>


これで読み込み準備完了です。

app.jsを書き換えます。


app.js

'use strict';

window.addEventListener('load', function (){

// WebGPIO LED Blink
navigator.requestGPIOAccess()
.then(gpioAccess=>{
var port = gpioAccess.ports.get(198);
var v = 0;
return port.export("out").then(()=>{
setInterval(function(){
v = v ? 0 : 1;
port.write(v);
},500);
});
});
}, false);


これでコード側は準備完了です。


配線する

ボードの裏側に対応表が書いていますがCN1-1(GND)CN1-9(SPI0_RX)にLEDを接続します。

app.js内でgpioAccess.ports.get(198);として198を指定してますが、ソースコードで確認すると198が9番ピンということがわかります。


  • 対応コード


・(省略)

PORTS: {
256: { portName: 'CN1.I2C2_SDA', pinName: '2', },
257: { portName: 'CN1.I2C2_SCL', pinName: '3', },
283: { portName: 'CN1.UART3_RX', pinName: '4', },
284: { portName: 'CN1.UART3_TX', pinName: '5', },
196: { portName: 'CN1.SPI0_CS', pinName: '7', },
197: { portName: 'CN1.SPI0_CLK', pinName: '8', },
198: { portName: 'CN1.SPI0_RX', pinName: '9', },
199: { portName: 'CN1.SPI0_TX', pinName: '10', },
244: { portName: 'CN1.SPI1_CS', pinName: '11', },
243: { portName: 'CN1.SPI1_CLK', pinName: '12', },
246: { portName: 'CN1.SPI1_RX', pinName: '13', },
245: { portName: 'CN1.SPI1_TX', pinName: '14', },
163: { portName: 'CN2.PWM0', pinName: '10', },
253: { portName: 'CN2.I2C0_SCL', pinName: '11', },
252: { portName: 'CN2.I2C0_SDA', pinName: '12', },
193: { portName: 'CN2.UART0_TX', pinName: '13', },
192: { portName: 'CN2.UART0_RX', pinName: '14', },
353: { portName: 'CN2.GPIO6_A1', pinName: '15', },
},

・(省略)

### 起動してみる

WebIDEでUSBデバイスのCHIRIMENを選択すると、再生ボタンがアクティブになるので押しましょう。

エラーなどがなければ無事にLEDがチカチカします!

フロントのJSだけでいけるなんてすごい。。


まとめ

さくっとやってみたまとめですが、フロントのJavaScriptとの組み合わせ方は基本的に自由になるCHIRIMENなのでもっとWeb開発の知見を入れ込んだ事例を出してみたいですね。

例えばReactからモーター制御...とかCSSでLEDを光らせる...とかできたら楽しそう笑