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

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

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全体は次のようになります。

controller.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Servo Controller</title>
    <script type="text/javascript" src="webiopi.js"></script>
    <link rel="stylesheet" type="text/css" href="controller.css">
  </head>
  <body>
    <div align="center">
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <!--SERVO 1-->
                  <td id="name1">SERVO 1</td>                  
                  <td class="SS1">                  
                    <div class="slidecontainer1">
                      <input type="range" min="1000" max="2500" value="2000" step="10" class="slider" id="myRange1" oninput="func1()">
                    </div>  
                  </td>
                  <td id="out1"></td>
                  <!--SERVO 2-->
                  <td id="name2">SERVO 2</td>
                  <td class="SS2">                  
                    <div class="slidecontainer2"> 
                      <input type="range" min="1000" max="2500" value="2000" step="10" class="slider" id="myRange2" oninput="func2()">                                             
                    </div>  
                  </td>              
                  <td id="out2"></td>    
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
    </div>
  </body>
  <script>
    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);
    }
    
  </script>
</html>

#最後に
次回、スライダの値に応じてサーボモーターを動かすPythonプログラムを作成していきます。