Help us understand the problem. What is going on with this article?

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プロトタイピング爆速になりますね!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした