(cache) mbedJS + p5.jsでWebブラウザからmbedを制御する

2014-11-02

mbedJS + p5.jsでWebブラウザからmbedを制御する

mbedJSを使うと、mbedでWebページ連動のハードウェアを作ることができます。今回はmbedJSの導入方法を説明し、mbedJSとp5.jsの連携、iPadでの利用などについて紹介します。

mbedJSとは

mbedJSはmbedをネットワーク経由で制御するためのサーバファームウェアです。mbed上でWebサーバとして動作し、PCやスマートフォンからWebブラウザを使ってmbedにアクセスするとWebページが表示されます。ユーザはそのWebページ上で操作を行うことにより、mbedの入出力を制御することができます。

mbedJSではJavaScriptを使ってmbedのAPIを呼び出せるようになっており、プログラマはJavaScriptとHTMLを使ってWebページ連動のハードウェア制御を記述することができます。

必要なもの

mbedJSを動かすには以下のものが必要です。

mbed
ネットワーク環境（有線LAN）
mbedをイーサネットに繋ぐためのキット

mbedをイーサネット（LAN）に繋ぐためのキットにはいくつかあります。てっとり早いのはきばん本舗が販売している「mbed BaseBoard イーサネット」（1,280円）を利用する方法です。はんだ付け済みでmbedを載せるだけですぐ使えます。もう少し安いのが良ければ、スイッチサイエンスが販売している「mbed用イーサネット接続キット」（514円）がおすすめです。さらに安いのは、秋月電子で売っている「パルストランス内蔵モジュラージャック」（200円）を使う方法ですが、パーツの底面が凸凹しているので専用基板があるほうが使いやすいです。

mbed NXP LPC1768

出版社/メーカー: スイッチサイエンス
メディア: エレクトロニクス
クリック: 1回
この商品を含むブログを見る

mbed BaseBoard イーサネット：mbedイーサネット接続用ベースボード

出版社/メーカー: きばん本舗
メディア: エレクトロニクス
この商品を含むブログを見る

mbed用イーサネット接続キット

出版社/メーカー: スイッチサイエンス
メディア: エレクトロニクス
この商品を含むブログを見る

なお、今回はmbed BaseBoard イーサネットを使って実験しました。

mbedJSをはじめよう

プログラムの書き込みからLED点滅（Lチカ）のサンプルを実行するまでの手順を説明します。

1. mbedの開発者向けサイトの中にあるmbedJSのページに行きます。ページ右上の「Login or signup」からmbedのユーザアカウントにログインしたら、「Import this program」をクリックします。

2. クリックするとオンラインエディタ（mbed Compiler）のページに移動してプログラムをインポートするかを尋ねるダイアログが表示されるので、「Import」ボタンを押します。

3. インポートされたら、「Compile」ボタンを押します。コンパイルが終わるとバイナリファイルmbedJS_LPC1768.binがダウンロードされます。

4. 適当なテキストエディタ（メモ帳など）で新しくテキストファイルを作成し、ファイル名を「mimic.cfg」という名前にします。これがmbedJSの設定ファイルになります。mimic.cfgの中にはmbedのIPアドレス、サブネットマスク、ゲートウェイを以下の書式で記述します。

【設定例】自分の環境に合わせて設定してください。

ipaddr=192.168.11.222
netmask=255.255.255.0
gateway=192.168.0.254

※IPアドレスを自動設定したい場合は「ipaddr=auto」と書きます。

5. mbedとPCをUSBケーブルで接続し、mbedのドライブが認識されたら、先ほど作成したmbedJS_LPC1768.binとmimic.cfgを入れます。

6. mbedをLANケーブルでネットワークに接続し、mbed上のプッシュスイッチを押してリセットしたら、Webブラウザで先ほど設定したmbedJSのIPアドレスにアクセスします。接続に成功すると以下の画面が表示されます。

7. 「JavaScript Editor」というリンクをクリックすると、LED点滅（Lチカ）のサンプルプログラムの編集画面が表示されます。ここで、「Play」ボタンを押してみてください。mbed上のLEDが点滅したら動作成功です！

mbedJSのファイルシステム

JavaScript Editorの画面で「Save」ボタンを押すと、mbedのトップディレクトリにプログラム（HTMLファイル）が保存されます。もちろん任意のエディタで作成したHTMLファイルを直接置くこともできます。ブラウザから個々のファイルにアクセスする場合はトップページのLocal File Systemのリンクからアクセスできます。

トップディレクトリに○○.htmというファイルがある場合、直接アクセスする場合のURLは

http://IPアドレス/local/○○.htm

になります。

p5.jsと組み合わせてみよう

JavaScriptやHTML5を使ってグラフィカルなWebインタフェースを作るためにはある程度の知識が要求されますが、ProcessingのJavaScript版である「p5.js」を使うとそのハードルを大きく下げることができます。JavaScriptの経験は浅いがProcessingには馴染みがある、という人にはおすすめです。

mbedJSとp5.jsを組み合わせたサンプルを見てみましょう。以下のプログラムは、カーソル上に円を表示するプログラムで、画面の中央より左側にカーソルがあるときはLED1が点灯し、右側にあるときはLED2が点灯します。

<!DOCTYPE html>
<html>
<head>
    <title>LED test</title>
    <meta charset="UTF-8">
    <script src="/rom/m/mbedJS.all-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.0/p5.min.js"></script>
    <script>
        var mcu;
        var pin1, pin2;
        var HIGH = 1, LOW = 0;
        var ready1 = false, ready2 = false;

        function setup() {
            createCanvas(400, 300); // 描画領域のサイズ設定
            
            // mbedの準備
            mcu = new mbedJS.Mcu( location.host, {
                onNew:function(){
                    pin1 = new mbedJS.DigitalOut(mcu, mbedJS.PinName.LED1, function(){ ready1 = true; } ); // 出力ピン（LED1）
                    pin2 = new mbedJS.DigitalOut(mcu, mbedJS.PinName.LED2, function(){ ready2 = true; } ); // 出力ピン（LED2）
                },
                onError:function(){},
                onClose:function(){}
            });
        }
        
        function draw() {
            if ( !ready1 || !ready2 ) return; // ピンの準備が出来ていないならreturn
            background(200);
            
            if ( mouseX <= width/2 ) {   // カーソルの位置によってLEDの点滅を制御
                pin1.write(HIGH);
                pin2.write(LOW);
                fill(0, 100, 100);
            } else {
                pin1.write(LOW);
                pin2.write(HIGH);
                fill(0, 255, 255);
            }
            
            line(width/2, 0, width/2, height);     // 線の描画 
            ellipse(mouseX, mouseY, 100, 100); // 円の描画
        }
    </script>
    </head>    
    <body>
        <h1 id="title">mbedJS + p5.js Test</h1>
    </body>
</html>

スマートフォンやタブレットに対応するには

先ほどのプログラムをiPhoneやiPadで動かす場合には、マウス入力していた箇所をタッチ入力用に書きかえる必要があります。mouseX、mouseYとしていたところをtouchX、touchYに置き換えてください。

<!DOCTYPE html>
<html>
<head>
    <title>LED test</title>
    <meta charset="UTF-8">
    <script src="/rom/m/mbedJS.all-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.0/p5.min.js"></script>
    <script>
        var mcu;
        var pin1, pin2;
        var HIGH = 1, LOW = 0;
        var ready1 = false, ready2 = false;

        function setup() {
            createCanvas(windowWidth, windowHeight); // 描画領域のサイズ設定
            
            // mbedの準備
            mcu = new mbedJS.Mcu( location.host, {
                onNew:function(){
                    pin1 = new mbedJS.DigitalOut(mcu, mbedJS.PinName.LED1, function(){ ready1 = true; } ); // 出力ピン（LED1）
                    pin2 = new mbedJS.DigitalOut(mcu, mbedJS.PinName.LED2, function(){ ready2 = true; } ); // 出力ピン（LED2）
                },
                onError:function(){},
                onClose:function(){}
            });
        }
        
        function draw() {
            if ( !ready1 || !ready2 ) return; // ピンの準備が出来ていないならreturn
            background(200);
            
            if ( touchX <= width/2 ) {   // カーソルの位置によってLEDの点滅を制御
                pin1.write(HIGH);
                pin2.write(LOW);
                fill(0, 100, 100);
            } else {
                pin1.write(LOW);
                pin2.write(HIGH);
                fill(0, 255, 255);
            }
            
            line(width/2, 0, width/2, height);   // 線の描画 
            ellipse(touchX, touchY, 100, 100); // 円の描画
        }
    </script>
    </head>    
    <body>
    </body>
</html>