obnizとNoodlでRFIDタグを検出


obnizとNoodlとMFRC522でRFID検出を試しました。

参考 MFRC522
https://obniz.com/ja/sdk/parts/MFRC522/README.md

# 完成品
RFIDが検出されると、画面にはりねずみが出現！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">obnizとNoodlでRFID <a href="https://t.co/SyORLrxvay">pic.twitter.com/SyORLrxvay</a></p>&mdash; はりねずみ麺 (@hedgehog_noodl) <a href="https://twitter.com/hedgehog_noodl/status/1339531387636830210?ref_src=twsrc%5Etfw">December 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

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

# ノードを配置する
下記のようにノードを配置します。
![スクリーンショット 2020-12-17 20.20.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480279/7b861fb9-ac91-bea6-9f30-5fca9c770d62.png)

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

## Javascriptノード
下記をコピペ

```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名を指定して切り替えています。

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

### this.flagOutputDirty('outputの名前');
Inputの変更以外でJSノードのoutputを更新したい時に使用します。