【WebIOPi】スマホでサーボモーターを制御！②

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

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

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

WebIOPiのインストールは[こちらの記事](https://qiita.com/happanosumide/items/2b151e2250953de3a258)を参考にしてください。

まだHTMLファイルを作成していない方は、[こちらの記事](https://qiita.com/happanosumide/items/7d8bf4b2d537188d9929)も参考にしてください。


#WebIOPiとJavaScript
今回は、[前回作成した](https://qiita.com/happanosumide/items/7d8bf4b2d537188d9929)HTMLファイルにJavaScriptを追加します。

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

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

#JavaScriptの実装
WebIOPiの公式ドキュメントには様々な機能が紹介されています([公式ドキュメント：機能紹介](http://webiopi.trouch.com/JAVASCRIPT.html))。

その中でも、今回は[Webiopi.callMacro()](http://webiopi.trouch.com/JAVASCRIPT.html#webiopi-callmacro-macro-args-callback-)という関数を使用します。

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

例えば、Webページ上のボタンが押されたら、PythonのLEDを光らせる関数を実行することも可能になります！
![webiopi3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689410/abffdb65-ee38-2a04-da34-c3e45fc3fea2.png)


### 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関数を使用します。

```js
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プログラムを作成していきます。