Noodlとobnizでぐりぐりしてみる

この記事はNoodleアドベントカレンダー21日目の記事です。
現在12月21日92時ぐらいです。きっと。

Noodleアドベントカレンダー12日目の記事で、Noodlから直接obnizを動かすがありましたが、更にobnizとnoodlの連携を深めてみました

つくったもの

Joystickでぐりぐりするとnoodlの円がぐりぐりします

ぐりぐり　#obniz #noodl pic.twitter.com/ea91Njp7kD

— kido@IoTエンジニア (@9wick) December 24, 2019

構成

NoodlはJavaScriptだから直接obnizも動かせるね！っていうところは12日目の記事と同じですが、noodlの線をデータが流れているのを眺めているのが好きだったので、中身のデータだけを流すようなJavaScriptコンポーネントを作ってみました。

赤いコンポーネントがJavaScriptで、この中でobnizと接続し、つながったJoystickのX、Yをoutputとして出しています。
Joystickが出てきた時点で勘が鋭い方は気づいたかもしれませんが、そう、パーツライブラリが使えます！

流れ

ScriptDownloaderでobniz.jsをダウンロードし、それが完了したらJavaScriptの方でobnizとの接続、Joystickからのデータ抽出、noodlのコンポーネントからoutputをやっています。

obnizJsのダウンロード

ScriptDownloaderにhttps://unpkg.com/obniz@3.1.0/obniz.jsを入れています

JavaScriptの方でobnizとの接続〜データアウトプットまで

プロパティでは大したことをやっていません。codeのeditボタンを押したときに出てくるエディタでプログラムを書いています。

define({
    inputs: {
        scriptsLoaded: "boolean",
        obnizId: "string"
    },
    outputs: {
        x: "number",
        y: "number"
    },
    destroy: function(inputs, outputs) {

    },
    setup: function(inputs, outputs) {
        outputs.x = 0;
        outputs.y = 0;
    },
    run: function(inputs, outputs, changedInputs) {
        if(changedInputs.scriptsLoaded){
            //setup
            let obniz = new Obniz(inputs.obnizId);
            obniz.onconnect = async  ()=>{
                let joystick = obniz.wired("JoyStick", {gnd:4, sw:0, y:2, x:1, vcc:3});
                joystick.onchangex = (val)=>{
                   outputs.x = val.toFixed(2);
                   this.flagOutputDirty("x")
                };
                joystick.onchangey = (val)=>{
                   outputs.y =  val.toFixed(2);
                   this.flagOutputDirty("y")
                };
            }
          
        }
    }
});

スクリプトが読み込まれたあとに実行したいので、run内で実行しています。
中身は普通のobnizのプログラムと同じです。

ポイントは１個、outputs.yを更新したらnoodlに更新したことを伝えないといけないので、this.flagOutputDirty("y")を読んでいます。
これを呼ぶことで線がつながったコンポーネントたちにデータが飛んでいきます。

※12日目の記事ではasync/awaitがつかないとの話がありましたが、普通に使えました。
noodlのバージョンが違うと行けるのかもしれません

データアウトプットのあと

データがnoodl側までいけばあとはもう楽勝ですね。
ちゃんとプログラムが設定されていれば、XやYのプロパティが出力できるようになっているので、そちらをつかってあとは自由にやります。

今回は円をぐりぐりさせるのに、ちょっと計算を挟んでcircleのpositionに結びつけました。joystickのX,Yは-1〜1までのデータが来るので、windowサイズに合わせて400倍にしています。

ぐりぐり　#obniz #noodl pic.twitter.com/ea91Njp7kD

— kido@IoTエンジニア (@9wick) December 24, 2019

まとめ

地味にnoodlをまともにやるのは始めてでしたが、アウトプット／インプットの数を動的に変更できるビジュアルプログラミングは珍しいなと思いました。（今回ならjoystick似合わせてxとyの2つのアウトプット）

node-redとはまた違った良さがありますね！

P.S.

noodlの停止方法がわからない・・・・