Noodlからobniz Messaging経由でIoTゆるメカトロ車を動かすメモ

この記事はNoodl Advent Calendar 2019 の8日目の記事です。

Noodlからobniz Messaging経由でIoTゆるメカトロ車を動かすメモをまとめました。

実際の動き

実際動いたものはこちらです！
NoodlのUIをスマホで表示して各ボタンを押すと、obnizのメッセージ機能に合わせてHTTP(RESTノード)で指示が送られ、ゆるメカトロobniz車がコントロールされます！いいかんじのレスポンス！#Noodl #obniz #ゆるメカトロ #LEGO #GeekServo pic.twitter.com/vYmoV4CtB3

— Tanaka Seigo (@1ft_seabass) December 6, 2019

このように、obnizの車をNoodlから操作できるようになりました。レスポンスも良い感じです。

obniz のソース

obnizのメッセージング機能で obniz＋Geek Servoの車をLego Crazy Action Contraptionsのパーツで作るメモで実現したものをメッセージング機能で受け付けられるようにします。

obnizのソースは以下のとおりです。

<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">
  <link rel="stylesheet" href="/css/starter-sample.css">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@2.4.0/obniz.js" crossorigin="anonymous"></script>
</head>
<body>



<div class="wrap">

  <div class="DCMotor">
    <h3 class="text-center">Controling on a DCMotor</h3>
  </div>
  
  <div class="DCMotor">
    <button class="btn btn-primary btn-block" id="forward">Forward</button>
    <button class="btn btn-primary btn-block" id="reverse">Reverse</button>
    <button class="btn btn-primary btn-block" id="rightroll">RightRoll</button>
    <button class="btn btn-primary btn-block" id="leftroll">LeftRoll</button>
    <button class="btn btn-success btn-block " id="powerup">Power 100</button>
    <button class="btn btn-success btn-block" id="powerdown">Power 30</button>
    <button class="btn btn-secondary btn-block" id="stop">Stop</button>
  </div>

</div>

<script>
  var obniz = new Obniz("Obniz_ID");
  obniz.onconnect = async function () {
    
    var motor = obniz.wired("DCMotor", {forward:0, back:1});
    var motor2 = obniz.wired("DCMotor", {forward:10, back:11});
    
    obniz.display.clear();
    obniz.display.print("Hello World");
    
    // メッセージ受け取り動作
    obniz.onmessage = function(message, from) {
      if (message === "forward") {
        motor.forward();
        motor2.reverse();
        obniz.display.clear();
        obniz.display.print(message);
      }
      if (message === "reverse") {
        motor.reverse();
        motor2.forward();
        obniz.display.clear();
        obniz.display.print(message);
      }
      if (message === "rightroll") {
        motor.forward();
        motor2.forward();
        obniz.display.clear();
        obniz.display.print(message);
      }
      if (message === "leftroll") {
        motor.reverse();
        motor2.reverse();
        obniz.display.clear();
        obniz.display.print(message);
      }
      if (message === "powerup") {
        motor.power(100);
        motor2.power(100);
        obniz.display.clear();
        obniz.display.print(message);
      }
      if (message === "powerdown") {
        motor.power(30);
        motor2.power(30);
        obniz.display.clear();
        obniz.display.print(message);
      }
      
      if (message === "stop") {
        motor.stop();
        motor2.stop();
        obniz.display.clear();
        obniz.display.print(message);
      }
      
      if (message.indexOf("power-") == 0) {
        var power = message.split("-")[1];
        motor.power(power);
        motor2.power(power);
        obniz.display.clear();
        obniz.display.print(message);
      }
    };

    // 以下、ボタン動作
    $('#forward').click(function () {
      motor.forward();
      motor2.reverse();
      obniz.display.clear();
      obniz.display.print("forward");
      
    });

    $('#reverse').click(function () {
      motor.reverse();
      motor2.forward();
      obniz.display.clear();
      obniz.display.print("reverse");
    });
    
    $('#rightroll').click(function () {
      motor.forward();
      motor2.forward();
      obniz.display.clear();
      obniz.display.print("rightroll");
      
    });

    $('#leftroll').click(function () {
      motor.reverse();
      motor2.reverse();
      obniz.display.clear();
      obniz.display.print("leftroll");
    });
    
    $('#powerup').click(function () {
      motor.power(100);
      motor2.power(100);
      obniz.display.clear();
      obniz.display.print("powerup");
      
    });

    $('#powerdown').click(function () {
      motor.power(30);
      motor2.power(30);
      obniz.display.clear();
      obniz.display.print("powerdown");
    });
    
    $('#stop').click(function () {
      motor.stop();
      motor2.stop();
      obniz.display.clear();
      obniz.display.print("stop");
    });
  };
</script>
</body>
</html>

Noodlから obniz のメッセージング機能にメッセージを出せるようにします。

まず、ボタンを配置します。こちらの enebularで作ったREST APIをNoodlから叩いてみた記事を参考にForwardボタンに実装したのがこちらです。

BtnForwardにRESTノードがくっついています。

RESTノードの設定はこちらです。

このように

https://obniz.io/obniz/0000-0000/message?data=forward

というURLの叩き方で、forwardというデータを送ります。0000-0000は自分のobnizのID置き換えて使いましょう。

Endpoint
- https://obniz.io
Resource
- /obniz/0000-0000/message?data=forward

という設定を行います。

他の指示パーツも同様に設定を行いました。

Noodlプロジェクトもダウンロードできます

以下からダウンロードできます。

https://www.1ft-seabass.jp/memo/uploads/2019/12/obniz-Messaging.zip

各RESTノードを自分の obniz ID で修正すれば動かすことができると思います。

実際動いたものはこちらです！
NoodlのUIをスマホで表示して各ボタンを押すと、obnizのメッセージ機能に合わせてHTTP(RESTノード)で指示が送られ、ゆるメカトロobniz車がコントロールされます！いいかんじのレスポンス！#Noodl #obniz #ゆるメカトロ #LEGO #GeekServo pic.twitter.com/vYmoV4CtB3

— Tanaka Seigo (@1ft_seabass) December 6, 2019

ぜひ動かしてみてください！