スマホでサーボモータを制御！

今回は、スマホでサーボモータを制御するシリーズの第２回目です。

Raspberry Piを用いて簡単にIoTを作成できるライブラリ、WebIOPiを使用し、スマホからサーボモーターを制御します。

WebIOPiのインストールはこちらの記事を参考にしてください。

まだHTMLファイルを作成していない方は、こちらの記事も参考にしてください。

WebIOPiとJavaScript

今回は、前回作成したHTMLファイルにJavaScriptを追加します。

WebIOPiでは、JavaScriptを使用することで、Pythonとの連携が可能になります。

それでは作成していきます！

JavaScriptの実装

WebIOPiの公式ドキュメントには様々な機能が紹介されています(公式ドキュメント：機能紹介)。

その中でも、今回はWebiopi.callMacro()という関数を使用します。

この関数は、JavaScriptから特定のPython関数を実行することができます。

例えば、Webページ上のボタンが押されたら、PythonのLEDを光らせる関数を実行することも可能になります！

Webiopi.callMacro()について

WebIOPi.callMacro(macro, [args[, callback]])

Call a macro on the server.
(string) macro : name of the macro to call
(string) arg (optional) : array containing arguments
(function) callback (optional) : function called when result received from the server

WebIOPi公式ドキュメントより

引数には以下を指定します。

1つ目：実行したいPython関数名
2つ目：Python関数に渡す引数（スライドバーの値など）
3つ目：Python関数が実行された後に実行するJavaScriptの関数

また、HTMLにJavaScriptを埋め込む際、headタグに

controller.html

<head>
...

<script type="text/javascript" src="webiopi.js"></script>
</head>

を忘れないよう、記述してください。

コード

controller.js

// 前半
var current1 = document.getElementById("myRange1");    // SERVO1 pin12
var output1 = document.getElementById("out1");
output1.innerHTML = current1.value;

var current2 = document.getElementById("myRange2");    // SERVO2 pin19
var output2 = document.getElementById("out2");
output2.innerHTML = current2.value;

// 後半
function func1(){
    var value1 = current1.value;
    output1.innerHTML = value1;
    webiopi().callMacro('GET1',value1);
}
function func2(){
    var value2 = current2.value;
    output2.innerHTML = value2;
    webiopi().callMacro('GET2',value2);
}

まず、前半はページにアクセスがあったとき、スライダの現在の値を取得して表示するプログラムです。

後半でwebiopi.callMacro関数を使用します。

function func1(){
    var value1 = current1.value;
    output1.innerHTML = value1;
    webiopi().callMacro('GET1',value1);
}

まず、2行目では現在のスライダの値を取得し、それをoutput1(idがout1の場所)に表示します。
そして、スライダの値をGET1というPython関数に渡します。

HTML全体

これまでのHTML/JavaScript全体は次のようになります。