完成品

RFIDが検出されると、画面にはりねずみが出現！

obnizとNoodlでRFID pic.twitter.com/SyORLrxvay
— はりねずみ麺 (@hedgehog_noodl) December 17, 2020

Noodlとは

https://www.tds-g.co.jp/noodl-jp/
ビジュアルプログラミングで作れるプロトタイピングツールです。

Noodlは、ビジュアルデザインとダイナミックデータ、IoT・センサーをつなぐUI/UXプロトタイピングツールです。
デザイナー・エンジニア・クライアントの間にできる知識の壁を壊し、スムーズな意思疎通を可能にします。

今回は、NoodlのJSノードにobnizのコードを書いて動かします。

ノードを配置する

下記のようにノードを配置します。

ScriptDownloaderノード

Script 0に、https://unpkg.com/obniz@3.11.0/obniz.js を入力（obnizのライブラリ）

Javascriptノード

下記をコピペ

script({
    // The input ports of the Javascript node, name of input and type
    inputs:{
        // ExampleInput:'number',
        // Available types are 'number', 'string', 'boolean', 'color'
        //myNumber:'number',
        scriptDownloaded:'signal',
        obnizID:'string',

    },

    // The output ports of the Javascript node, name of output and type
    outputs:{
        // ExampleOutput:'string',
        hedgehog:'string',
        uid:'number'
    },

    // Declare signal handle functions here, each function will be 
    // exposed as a signal input to this node.
    signals:{
        // mySignal:function() {   }
        scriptDownloaded :function(inputs,outputs) {

            console.log('ここ');
            var _this = this;
            var obniz = new Obniz(inputs.obnizID);
            obniz.onconnect = async function() {
              // Javascript Example
          var mfrc522 = obniz.wired("MFRC522", { cs: 0, clk: 1, mosi: 2, miso: 3, gnd: 5, rst: 6});
          while(true) {
              try {
                  let card = await mfrc522.findCardWait();
                  console.log("Card is detected!");
                  console.log("UID        : " + card.uid);
                  console.log("PICC Type     : " + card.PICC_Type);
                  outputs.uid = card.uid;
                  outputs.hedgehog = "on";
                  _this.flagOutputDirty("uid");
                  _this.flagOutputDirty("hedgehog");
              } catch(e) {
                  // Not Found or Error
                  //console.error(e)
                  outputs.hedgehog = "off";
                  _this.flagOutputDirty("hedgehog");
              }
          }
          };
        }
    },

    // These functions will be called when the correspinding input
    // is changed and the new value is provided
    changed:{
        // myNumber:function(value) { }
    },

    // Here you can declare any function that will then be available
    // in this. So you can acces the function below with this.aFunction()
    methods:{
        // aFunction:function(value) { }
    }
})

States

２つのStates on、off 作成
Valueにopacity を作成
onのopacityに1、offのopacityに0

補足

Statesの切り替えについて

RFIDを検出した時、JSノードのoutput hedgehog にonを出力して
検出していない時offを出力するようにし、
StatesノードのInput Statesに、直接States名を指定して切り替えています。

   outputs.hedgehog = "on";
   _this.flagOutputDirty("hedgehog");

this.flagOutputDirty('outputの名前');

Inputの変更以外でJSノードのoutputを更新したい時に使用します。

obnizとNoodlでRFIDタグを検出

完成品