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

enebularとobnizをつなげて操作してみる

More than 1 year has passed since last update.

しくみ

obnizのブロックプログラムで作ったボタンを、enebularから押せるようにします。ボタンを押すとモーターが回るプログラムを作っているので、これでenebularからモータが回せる!

モーター(obnizBoard) <-----> HTML(ブロックプログラム) <-----> enebular

obnizの修正

ファイル名を押して、コードを見るからJavaScriptのプログラムを見ます。

スクリーンショット 2019-11-16 1.07.24.png

内容をコピーして、プログラムの方にコピペしましょう。

スクリーンショット 2019-11-16 1.07.34.png

enebularとの連携部分を追記します。
今回はボタンを1秒だけ押してくれるプログラムにしました

  const sock = new WebSocket("wss://***enebularのurl***/ws");

  sock.addEventListener("open", e => {
      console.log("接続完了");
  });

  sock.addEventListener('message', (event) => {
    let jsonString = event.data;
    let data = JSON.parse(jsonString);
    console.log(data);
    button.touchStart();
    setTimeout(()=>{
      button.touchEnd() 
    },data.duration); 
 });

wss://***enebularのurl***/wsのところだけは後で変更します。

これをプログラムの真ん中あたりに挿入しましょう。
var button, xxxの次の行あたりが丁度いいです。
スクリーンショット 2019-11-16 1.42.44.png

enebular側の作製

enebularにてアカウントを作りログインします

シンプルにInjectionノードでアクションを起こしてみます。

このノードを作りましょう
スクリーンショット 2019-11-16 1.48.32.png

まずはenebularにログインして新規フローを作ります。
ノードを2つ持ってきて、ワイヤでつなげて設定をするだけです。

各ノードの設定はこの様になっています。

スクリーンショット 2019-11-16 1.49.36.png

スクリーンショット 2019-11-16 1.49.48.png

websocketのプロパティはパスの横の編集ボタンを押すとwebsocket-listenerの設定ができます。
スクリーンショット 2019-11-16 1.50.02.png

設定が終わったら、右上のデプロイボタンを押した後、その横のinfoボンタンでURLの確認をします。

スクリーンショット 2019-11-16 1.37.42.png

このURLのhttps://をwss://にかえて先程のobnizのプログラムへ書きます。
wss://***enebularのurl***/wsのところをURLに応じて変更します。

enebularはデプロイ済みですので、obnizのプログラムを実行し、injectionノードのボタンを押してみましょう。

enebularの変更

このままだと画面上のボタンを押してることには変わりないので,自動化してみましょう、
プログラムを変えて10秒に1度動くようにしてみましょう

Injectionノードをこのように変えます

スクリーンショット 2019-11-16 1.55.23.png

デプロイしたら、obnizのプログラムを実行してみましょう。

iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
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