obnizでブラウザーのデバイスの方向の検出機能を使ってサーボを動かす!レスポンスが良い!

はてなブックマーク - obnizでブラウザーのデバイスの方向の検出機能を使ってサーボを動かす!レスポンスが良い!
LINEで送る
Pocket

obnizはJavaScriptでプログラミングIoTボードです。

onbiz.ioのウェブサイトを開けば、自分が持っているobnizのボードと紐づいていて

ブラウザー上でもすぐにプログラムを書けます、その場で、obnizを動かせます!

今回は、obnizでブラウザーのデバイスの方向の検出機能を使ってサーボを動かす方法を共有します。

そのレスポンスが意外と良い感じです!

前回の記事のサーボをそのまま使っちゃいます!笑。

obnizでTensorflow.jsとPoseNetを使ってスマホからサーボを動かす!

プログラム

プログラムは、こちらです!

<!-- HTML Example -->
<html>
<head>
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/[email protected]/obniz.js"></script>
</head>
  
<body>
  <div id="obniz-debug"></div>
  <div id="print"></div>

<script>
  
var servo;
//
var obniz = new Obniz("OBNIZ_ID_HERE")
obniz.onconnect = async () => {
  servo = obniz.wired("ServoMotor", {signal:9,vcc:10, gnd:11});
}

window.addEventListener("deviceorientation", (event) => {
  const gamma = event.gamma;
  servo.angle(parseInt((gamma - (-80)) * (180 - 0) / (80 - (-80)) + 0));
})

</script>
</body>
</html>

今回のポイントはこちらですね。

「deviceorientationというイベントが発生したら、教えてね」と

window.addEventListener("deviceorientation", (event) => {
 //処理
})

APIの説明はこちらです:

https://developer.mozilla.org/en-US/docs/Web/Events/deviceorientation

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function(event) {
        // alpha: Z軸の動き
        var rotateDegrees = event.alpha;
        // gamma: 左右軸の動き
        var leftToRight = event.gamma;
        // beta: 前後の動き
        var frontToBack = event.beta;

        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
    }, true);
}

var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
    // あなたの処理はここで書きましょう!
};

今回のプログラムはgammaを使って、サーボを制御しました。

この辺、違う変換のアルゴリズムにすれば、サーボが面白い動きをしてくれるかもしれません。

実行

実行した様子はこちらです!

まとめ

レスポンスが結構良いです!

obnizを利用していることは、もちろん、これはネットワーク越しできます。デフォルトでネットワーク対応ですので

遠隔で操作することも可能になります。

今回は、gammaの値を利用して、サーボ1つ動かしましたが、もちろん、他の動きも取れていますので

それらの数値も変換して、サーボを動かせば、スマホの全動きをコピーできるものも理論上作れるはずです。(連続回転はできないかもしれませんが)

興味のある方は、ぜひその発展系を実装して見てください。

ではまた!

obniz公式の顔検出扇風機サンプル 動かない人は、こちらへどうぞ

 

はてなブックマーク - obnizでブラウザーのデバイスの方向の検出機能を使ってサーボを動かす!レスポンスが良い!
LINEで送る
Pocket

Add a Comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close