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


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

Noodleアドベントカレンダー12日目の記事で、[Noodlから直接obnizを動かす](https://qiita.com/kn1cht/items/2f8db382abcaacba2c75)がありましたが、更にobnizとnoodlの連携を深めてみました


# つくったもの

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

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">ぐりぐり　<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/noodl?src=hash&amp;ref_src=twsrc%5Etfw">#noodl</a> <a href="https://t.co/ea91Njp7kD">pic.twitter.com/ea91Njp7kD</a></p>&mdash; kido@IoTエンジニア (@9wick) <a href="https://twitter.com/9wick/status/1209426218925191170?ref_src=twsrc%5Etfw">December 24, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# 構成

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


<img width="612" alt="スクリーンショット 2019-12-24 18.40.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/21e76a82-4546-537f-a655-80511826df19.png">

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


![IMG_7048.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/168a54fc-4b18-36c7-1ff6-637f48cc75c2.jpeg)

# 流れ

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

### obnizJsのダウンロード

ScriptDownloaderに`https://unpkg.com/obniz@3.1.0/obniz.js`を入れています
<img width="280" alt="スクリーンショット 2019-12-24 19.15.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/491f1f1f-0dab-23e0-06e0-54ce1a0b5505.png">


### JavaScriptの方でobnizとの接続〜データアウトプットまで
プロパティでは大したことをやっていません。codeのeditボタンを押したときに出てくるエディタでプログラムを書いています。
<img width="274" alt="スクリーンショット 2019-12-24 19.16.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/e54fc523-25b0-5e02-0662-036ecd430d7d.png">

```javascript
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のバージョンが違うと行けるのかもしれません<img width="512" alt="スクリーンショット 2019-12-24 19.19.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/d91cbd9a-cd16-19e0-ead2-0a58bd5ac3c1.png">


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

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

<img width="191" alt="スクリーンショット 2019-12-24 19.30.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/b58229e5-f569-9c68-87ae-f7137bac4960.png">

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


<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">ぐりぐり　<a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> <a href="https://twitter.com/hashtag/noodl?src=hash&amp;ref_src=twsrc%5Etfw">#noodl</a> <a href="https://t.co/ea91Njp7kD">pic.twitter.com/ea91Njp7kD</a></p>&mdash; kido@IoTエンジニア (@9wick) <a href="https://twitter.com/9wick/status/1209426218925191170?ref_src=twsrc%5Etfw">December 24, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# まとめ

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

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


#### P.S.
noodlの停止方法がわからない・・・・