Noodlとobnizを使って体重計を簡単に作ってみる

##作ったきっかけ
Noodlもくもく会でNoodlというスウェーデン発祥のイケてるデザイン会社が作ったという
プロトタイピングツールと出会いました。
せっかくなので、obnizやロードセルなど自分が得意なものから繋げてみようと思いました！

当初はヴィジュアル体重計を作る目的でしたが、
購入したロードセルの最大荷重が5kgだったので、身の回りの物を適当に測ってみることにしました。
Noodlを利用するとWeb側の実装が簡単だったり、データの流れが麺で見れるという面白さが良いです。

obniz繋げるところは、
@wicketさんの下記の記事を参考にしています。
https://qiita.com/wicket/items/a5bc83753fcc8ac81180
***
##準備するもの
###obniz Board 1Y
JavaScriptで動く開発ボード
※旧obniz Boardでも同様です
https://obniz.myshopify.com/

###Noodl2.0
 (Noodl1.3でも動くと思いますが結構変わってるので2.0をお勧めします)
 ※Noodl2.0はベータ版なので下記のページから参加申し込みを行ってください。
 https://qiita.com/noodl-tokyo/items/e8d9e945c60433019026

###ロードセル(5kgまで)
(半田付けしてあるこちらがおすすめ)　￥1300(税込み)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/69934eb1-79bb-80fa-7f69-bd3d0a47c5e9.png)


https://www.amazon.co.jp/dp/B07JL7NP3F/ref=cm_sw_em_r_mt_dp_U_EhIsEbG3YD690 

###ジャンパワイヤー
普通のジャンパワイヤ（オス～メス）
https://www.switch-science.com/catalog/2294/

***
##配線図
obniz boardの0～3ポートを使用します。
0:gnd  (黒)
1:dout <font color="Gold">(黄)</font>
2:sck  <font color="LimeGreen">(緑)</font>
3:vcc  <font color="Red">(赤)</font>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/3ff70e01-c058-694a-673a-0c931facd052.png)

***
##素材
すいか(手書き)
Imageノード用に、この画像のURLを使用しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/f9e52b5e-b27e-6939-addf-8a2899c2fc1c.png)

https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/f9e52b5e-b27e-6939-addf-8a2899c2fc1c.png


***
##NodeEditorのレイアウト
完成系のレイアウトは下記の通りになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/bd7b7eca-9a15-ba6d-9918-021547508010.png)

***
##obnizJSの準備
ScriptDownloaderのノードを準備して、
script0にhttps://unpkg.com/obniz@3.1.0/obniz.jsを入れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/96af263c-0aa0-08f0-2756-36a82c1437d0.png)

***
##obniz側ソース
##Noodl内のJavascript
Javascriptノードを用意してCodeエディット画面に下記のソースを貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/e7478f90-828e-2aee-e00c-2985b239d4e8.png)

***
``` Noodl.js
define({
    inputs: {
        scriptsLoaded: "boolean",
        obnizId: "string"
    },
    outputs: {
        y: "number",
        weight: "string"
    },
    destroy: function(inputs, outputs) {

    },
    setup: function(inputs, outputs) {
        outputs.y = 0;
        outputs.weight = 0;
    },
    run: function (inputs, outputs, changedInputs)  {
        if(changedInputs.scriptsLoaded){
            //setup
            let obniz = new Obniz(inputs.obnizId);
            obniz.onconnect = async ()=>{
    
            var sensor = obniz.wired("hx711" , {gnd:0, dout:1, sck:2, vcc:3} );
    
            //sensor.zeroAdjustWait();
            sensor.setScale(1000);
            sensor.setOffset(-10);



        while(true) {

          //sensor.powerUp();
          var value = await sensor.getValueWait(0.001); //10 times average

          if(value>=1){
            obniz.io10.output(true);
            outputs.weight = Math.ceil(value) + 'g';
           this.flagOutputDirty("weight")
           
            if (outputs.y<=10){
            outputs.y = outputs.y+0.01;
            }
           
           this.flagOutputDirty("y")

          }else{
              
            if (outputs.y>=0){
            outputs.y = outputs.y-0.01;
            }
           this.flagOutputDirty("y")
            outputs.weight = '0g';
           this.flagOutputDirty("weight")

          }
          obniz.display.clear();
          obniz.display.print("weight = " + value);


        }
        
                
            }

        }
    }
});
```
***
JavaScriptノードのプロパティに使用するobnizIDを入力します。
※obnizIDは公開しないようにご注意ください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/637ad03f-353f-6149-f357-2e7989d62c42.png)

あとはレイアウトに沿ってテキストノードとImageノードを配置して
麺を繋げて完成です。

***
##完成動画
特に意味はないですが、ロードセルの値を画面に表示させて
0g以上の場合はスイカが浮き上がる仕様です。
0gになるとスイカが落ちてきます。

https://youtu.be/E0lXCG4wA1I
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/E0lXCG4wA1I/0.jpg)](http://www.youtube.com/watch?v=E0lXCG4wA1I)