LoginSignup
6

More than 3 years have passed since last update.

posted at

updated at

Noodl × Node-RED × obnizを連携する

概要

 タイトルの通りNoodl、Node-RED、obnizの連携方法を解説します。
2019年9月27日のNode-RED UG勉強会 Vol.9にてライブコーディングを行った内容です。
動画はこちら

こんなデモを作りました。

名称が公式サイトへのリンクになっているので、詳細はそちらをご参照ください。

Noodl → UI/UXプロトタイピングツール
Node-RED → フローベースビジュアルプログラミングツール
obniz → IoTデバイス

構成

本記事で作る構成は次のようになっています。
(MQTTブローカはこちら
image.png

1.Noodlのボタンをプッシュ(MQTTパブリッシュ)
2.Node-REDで中間処理(Webhookを送信)
3.obnizでサーボモータ制御

Noodl

NoodlのUI作成手順は次の通りです。
 1. 画像を背景にする
 2. ON/OFFボタンを作る
 3. Node-REDにコマンド送信

今回は次のようなUIを作成します。
image.png

使用しているNoodlバージョンは、Ver1.3.1です。

Noodl-1. 画像を背景にする

 Noodlで新規プロジェクトを作成すると、次のようになっています。
image.png

背景に画像を使うために、imageノードを追加します。
Rectangleノードは使用しないので削除します。

image.png

背景にしたい画像を取り込みます。
画像ファイルをNoodlのプロジェクト画面にドラッグ&ドロップで完了です。
image.png

imageノードのプロパティImage pathを開くと、先ほど追加した画像選択できるようようになっています。
この画像を選択します。
image.png

Noodl-2. 画像が見切れているので画面にフィットさせる

imageノードのプロパティを次のように設定します。
(画像が小さい場合も同様です。)

・ Size Mode : Explicit
・ Fill Mode : Aspect Fill

image.png

Noodl-3. テキストを画面上部に移動

textノードのプロパティを次のように設定します。

・ Align Y : Top
・ Text : Hello Noodl(何でもいいです)
・ Color : 視認しやすい色

image.png

Noodl-4. ボタンを作る

サーボモータ制御のきっかけとなる、押しボタンを作成します。
↓のようにGroupノードCircleノードTextノードを追加します。

image.png

追加した各ノードのプロパティを次のように設定します。

Groupノード
- Size Mode : Content Size
- Align X : Center
- Align Y : Center

Circleノード
- Size : 400 px
- Align X : Center
- Align Y : Center

Textノード
- Align X : Center
- Align Y : Center
- Text : OFF
- Font Size : 180

image.png

Noodl-5. ボタンを押すと文字を変える

ボタンを押したら、ボタンの文字を”ON”と”OFF”に切り替えます。
このON/OFF状態の切り替えには、Statesノードを利用します。

image.png
statesノードのプロパティを設定します。
プロパティ StatesにON状態とOFF状態を追加します。
プロパティ ValuesにColorとangleを追加します。
このValuesは状態が持つプロパティです。

image.png

image.png

次に、GroupノードとTextノード、Statesノードを次のように接続します。
この状態で、プレビュー画面のON/OFFボタンを押すと、ボタンの文字が切り替わります。

image.png

Noodl-6. ボタンの色を状態ごとに変える

色の制御にはColor Blendノードを利用します。
このノードはプロパティBlend Valueの値の比率で色を出力します。

image.png

Color Blendノードのプロパティを次のように設定します。

image.png

Color BlendノードをGroupノードとCircleノードに接続します。
これで、状態が変わるとボタンの色も変わるようになります。
image.png

image.png

Noodl-7. Node-REDと連携

NoodlにはMQTT(send/recive)ノードとRESTノードが用意されています。
今回はMQTTでNode-REDと連携します。

NoodlからMQTTでパブリッシュするには、Send Messageノードを利用します。
image.png

Send Messsageノードのプロパティは次のように設定します。

  • Topic(MQTTの窓口) : /moter
  • Payload(送信する箱) : text、angle

設定後、Send MessageノードをStatesノードに接続します。
image.png

MQTTにはブローカ(サーバ)が必要なので、利用先を設定します。NoodlエディタからProject Settings画面を開き、MQTTの項目を次のように設定します。
今回は外部MQTTブローカにshiftrを使用しています。
shiftrの設定についてはこちら
image.png

ボタンをON/OFFすると、状態が切り替わり、MQTTでメッセージが送信されるようになります。

obniz

obnizはWebhookを受けてサーボモータを制御しています。
次の手順で解説します。

  1. コーディング(ほぼコピペ)
  2. サーバレスイベントを作成
  3. サーボモータを接続

obniz-1.コーディング

 obnizの開発者コンソールのリポジトリから、新規プロジェクトを作成します。
 image.png

image.png

今回のプロジェクト名は「demo_1」とします。

コードの9割くらいはコピペです。
obnizのドキュメントにある、

サーバレスイベント
・Javascript SDK
 ディスプレイ
・JSパーツライブラリ
 サーボモータ
からコピーしてきます。

新規プロジェクトのテンプレート部分は削除します。


obniz.onconnect = async function () {
// ここから
  var led = obniz.wired("LED", { anode:2 } );
  var uart = obniz.getFreeUart();
  uart.start({tx: 4, rx: 5, baud:9600});  

  $("#send").on("click", function(){
    uart.send($("#text").val());
  });
  uart.onreceive = function(data, text) {
    $("#recv").text(text);
  }

  $('#on').click(function () {
      led.on();
  });

  $('#off').click(function () {
      led.off();
  });
// ここまでを削除
}

作成したコードは次の通りです。
このコードを流用する場合、obniz IDを記述してください。


<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@2.3.0/obniz.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="obniz-debug"></div>
    <h3>Connect From Your Browser</h3>
    <script>
      // obniz IDを追記する
      var obniz = new Obniz("OBNIZ_ID_HERE"); 

      obniz.onconnect = async function () {
        // サーバレスイベントのPOST requestを拾う
        let request = {};
        if (typeof req === "object") {
          request = req;
        }
         // 拾ったrequestのbodyから、textの文字を画面表示
        obniz.display.clear();
        obniz.display.print(request.body.text);
        // サーボモータ制御
        var servo = obniz.wired("ServoMotor", {gnd:0,vcc:1,signal:2});
        servo.angle(request.body.angle); 
      }
    </script>
  </body>
</html>

ディスプレイ表示とサーボモータ制御に、webhookで受け取った値を使用しています。
この部分はコーディングします。

↓ディスプレイ表示のコード


obniz.display.print(request.body.text);

↓サーボモータの角度指定コード


servo.angle(request.body.angle); 

obniz-2. サーバレスイベントを登録

webhookを受けとるために、サーバレスイベントを登録します。

サーバレスイベントはobnizのライセンスによって利用可否があります。
利用不可のライセンスはHobby Liteのみです。(2019/10/2現在)
注意点として、obnizのライセンスによって1日にイベント発生回数が制限されています。
Basicライセンスだと、1日120イベントで最大5個のサーバレスイベントを登録できます。

obnizの開発者画面から、イベントを選択します。
image.png

image.png

サーバレスイベントは次のように設定します。

名前 実行するApp きっかけ
demo_1 demo_1.html Webhook

image.png

登録が完了するとEndpointにURLが表示されます。
このURLにアクセスするとwebhookを送信してobnizが動きます。
image.png

obniz-3. サーボモータの結線

サーボモータは次のように結線します。
使用したサーボモータはこちら
image.png

Node-RED

Node-REDでは、NoodlからMQTTで受け取ったコマンドを、webhookにしてobnizへ送信しています。

Node-REDのフロー作成は次の手順で行います。

  1. MQTTサブスクライブのフロー作成
  2. Webhook送信のフロー作成
  3. MQTTとWebhookを接続

今回使用しているNode-REDのバージョンは、v0.20.7です。

Node-RED-1. MQTTサブスクライブのフロー作成

MQTTサブスクライブするには、MQTT inノードを利用します。
debugノードを接続すると、受け取ったデータをデバッグコンソールで確認できます。

image.png
MQTT inノードの設定をします。

サーバを新規作成して、MQTTブローカのURLを入力します。
image.png

トピックはNoodlのSend Messageノードに設定と同じにします。
image.png

この状態でNoodlで作成したボタンを押すと、デバッグコンソールにデータが表示されます。
image.png

Node-RED-2. Webhook送信のフロー作成

Node-REDからWebhookを送信するためにhttp requestノードを使用します。
デバッグのためにイベント発生用のinjectノードを配置します。

image.png

各ノードの設定は次の通りです。

injectノード
image.png

http requestノード
oobnizサーバレスイベントのEndpoint URLを入力します。
image.png

injectノードのボタンを押すと、テキストがobnizの画面に表示され、
指定した角度にサーボモータが動きます!

Node-RED-3. MQTTとWebhookを接続

obnizサーバレスイベントで渡すデータフォーマットはJSONです。

MQTTで受け取ったデータをJSONノードで変換して、Webhookを送信します。

image.png

以上です。

おわりに

 Noodl×Node-RED×obnizの組み合わせで、IoTプロトタイピング爆速になりますね!!

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
6