LoginSignup
7

More than 3 years have passed since last update.

posted at

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

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

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

つくったもの

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

構成

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

スクリーンショット 2019-12-24 18.40.29.png

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

IMG_7048.JPG

流れ

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

obnizJsのダウンロード

ScriptDownloaderにhttps://unpkg.com/obniz@3.1.0/obniz.jsを入れています
スクリーンショット 2019-12-24 19.15.45.png

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

プロパティでは大したことをやっていません。codeのeditボタンを押したときに出てくるエディタでプログラムを書いています。
スクリーンショット 2019-12-24 19.16.31.png

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のプログラムと同じです。

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

※12日目の記事ではasync/awaitがつかないとの話がありましたが、普通に使えました。
noodlのバージョンが違うと行けるのかもしれませんスクリーンショット 2019-12-24 19.19.31.png

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

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

スクリーンショット 2019-12-24 19.30.43.png

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

まとめ

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

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

P.S.

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
7