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で一定の時間間隔で処理を実行するための方法として、IO-Animationを使う方法を紹介しました。
obnizでは通常ブラウザ側からの命令を受けて処理が行われるところを、IO-Animationではobniz側でタイミングを取って実行するため、一定の時間間隔で処理を実行できます。
obnizで一定間隔の連続動作をさせたい場合はお使いください。
書籍紹介
obnizの使い方はもちろんのこと、センサーやモーターを使った電子工作やmicro:bitなど他の機器との接続方法も説明されていて、入門から応用まで幅広い知識が身につきます。
参考文献
obniz公式 IO-Animation（https://obniz.com/ja/doc/reference/common/io-animation）