【obniz】IO-Aanimationで一定間隔の連続動作

スポンサーリンク

obnizはかんたんにIoT工作ができるマイコンボードですが、パソコンやスマホからブラウザを操作してobnizを制御するという仕組み上、一定間隔で処理したい場合に、JavaScriptで一定間隔で動作するコードを書いても、ネットワーク遅延が加わって厳密には一定間隔になりません。

これを解決する方法として、obnizにはIO-Animationという仕組みが用意されていますので、本記事で使い方を紹介します。

以下の動画に動作の様子を収めており、IO-Animationの効果がわかります。

使用環境

項目内容
obniz本体obniz
プログラミング環境Mac / Windows / Android / iPhone / iPad
サーボモーターSG90
USBケーブルUSB Micro-Bケーブル
配線ジャンパーワイヤー

プログラム

開発者コンソールから以下のようなJavaScriptコードを作成しました。

<!-- HTML Example -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@3.3.0/obniz.js"></script>
</head>
<body>

<h1>Servo Wing</h1>
<button id="fast">Fast</button>
<button id="slow">Slow</button>
<button id="stop">Stop</button>

<script>
var obniz = new Obniz("OBNIZ_ID_HERE");

const MIN_ANGLE =  60;
const MAX_ANGLE = 120;
var angle = 60;

obniz.onconnect = async function () {
  var servo0 = obniz.wired("ServoMotor", {gnd:0, vcc:1, signal:2});
  var servo1 = obniz.wired("ServoMotor", {gnd:3, vcc:4, signal:5});

/*  setInterval(async function(){
    servo0.angle(angle);
    servo1.angle(angle);
    if (angle == 60) {
      angle=120;
    } else {
      angle=60;
    }
  }, 200);*/

  obniz.io.animation("animation-fast", "loop", [
  {
    duration: 120,
    state: function(index){ // index = 0
      servo0.angle(MIN_ANGLE);
      servo1.angle(MAX_ANGLE);
    }
  },{
    duration: 120,
    state: function(index){ // index = 1
      servo0.angle(MAX_ANGLE);
      servo1.angle(MIN_ANGLE);
    }
  }
  ]);
  obniz.io.animation("animation-fast", "pause");

  obniz.io.animation("animation-slow", "loop", [
  {
    duration: 180,
    state: function(index){ // index = 0
      servo0.angle(MIN_ANGLE);
      servo1.angle(MAX_ANGLE);
    }
  },{
    duration: 180,
    state: function(index){ // index = 1
      servo0.angle(MAX_ANGLE);
      servo1.angle(MIN_ANGLE);
    }
  }
  ]);
  obniz.io.animation("animation-slow", "pause");

  $("#fast").click(async function() {
    obniz.io.animation("animation-fast", "resume");
    obniz.io.animation("animation-slow", "pause");
    console.log("Fast");
  });
  $("#slow").click(async function() {
    obniz.io.animation("animation-fast", "pause");
    obniz.io.animation("animation-slow", "resume");
    console.log("Slow");
  });
  $("#stop").click(async function() {
    obniz.io.animation("animation-fast", "pause");
    obniz.io.animation("animation-slow", "pause");
    console.log("Stop");
  });
};
</script>
</body>
</html>

OBNIZ_ID_HEREの部分はお使いのobnizのIDで置き換えてください。

コメントにしてあるsetInterval記述はJavaScriptで一定間隔のループを記述する方法ですが、こちらはネットワーク遅延が乗るため、微妙に一定間隔になりません。

obniz.io.animation("animation-fast", "loop", [〜]);がIO-Animationによる一定間隔のループを定義する記述になります。

durationで時間間隔を定義します。(単位はミリ秒)

初期状態として、ループは止めた状態にしておきたかったので、上記コードではループ定義直後にobniz.io.animation("animation-fast", "pause");として止めています。

上記コードでは2つのループを定義して、それぞれ「Fast」「Slow」ボタンを押すとループを開始するようにしてあります。

「Stop」ボタンを押すと止まります。

以下、実行画面です。

obniz execution

動作確認の様子は冒頭の動画に収めていますのでご覧ください。

まとめ

obnizで一定の時間間隔で処理を実行するための方法として、IO-Animationを使う方法を紹介しました。

obnizでは通常ブラウザ側からの命令を受けて処理が行われるところを、IO-Animationではobniz側でタイミングを取って実行するため、一定の時間間隔で処理を実行できます。

obnizで一定間隔の連続動作をさせたい場合はお使いください。

参考文献

obniz公式 IO-Animation(https://obniz.com/ja/doc/reference/common/io-animation

タイトルとURLをコピーしました