画面からでモーターを回す

皆さん，obniz Starter KitのHTML/JavaScriptのレッスンページへようこそ！
このレッスンでは，HTML/JavaScriptならではのブラウザを使って，前回のレッスンで動くようになったサーボーモーターを動かしてみましょう！
目標は，以下のようなUIを作ってサーボモータを動かしてみることです！

ブラウザとは

皆さんが普段Youtubeを見たりネットサーフィンをしたりする時に使う，Microsoft EdgeやGoogle Chrome，Mozilla Firefox，Safariなどのアプリケーションのことです．
実はこれらのブラウザが動作するときにHTML/JavaScriptが使われているので，HTML/JavaScriptを使えばいつもYoutubeで見ているようなページを作ることが出来るのです．（あのレベルは相当勉強しないといけませんが...）
今回は既存のプログラムを使って，それを少し修正することで簡単にプログラムを動かすようにしましょう．

HTMLでボタンを配置する

皆さんはもう「Starter Kitガイド」のサンプルプログラムを動かしてみようは見てみましたか？
ここでは最後の方のページで，ブラウザにボタンを表示させてLEDを点灯させています．
私達もこれをまねして，ブラウザ上にボタンを作ってみましょう．
取り敢えず，先ほどのリンクにあるLEDを動かすプログラムをオンラインエディタにコピーしてみます．

実行すると以下のようなインターフェースが出てきましたか？

(1から書くのは大変なので，)このインターフェースをどうにかして今回私達が使うプログラムに組み込みたいですね．

ここで「Starter Kitガイド」のHTML/JavaScriptの基礎が役に立ちます．
このサイトを読むと，「HTMLの部分はテキストを変更できるよ〜」とあるので，このサイトを参考にしながら該当の部分を変更していきましょう．
自分でオンラインエディタを実行しながら，どこの文字が変わるか少しづつやってみるのが分かりやすいと思いますよ．

練習1

「LED」の文字を「Servo Motor」に，ボタン部分の文字を「ON」「OFF」から「0 deg」「90 deg」のように変えてみましょう．
ヒント：「ON」と「OFF」の文字はプログラムのどこにありますか？\

変更した後に実行して，以下のようになっていれば成功です．

発展1（やらずに進めて大丈夫です）

HTML/JavaScriptの基礎にはidの配置の仕方のお話がありました．
今回のHTMLではid="green_on"等のIDが配置されていますので，これを自分が見て分かりやすい値に変えておきましょう．
変えた人は，あとで対応する部分をJavaScriptの方でも書き換える事を覚えておいて下さい．

出来ましたか？どうしてもダメな人はページの最後にプログラムがありますのでそれを見てください．

JavaScriptでプログラムを書く

HTMLを書くことでインターフェースの「外側」は出来ました．
でもこれはあくまでLEDを点灯させるプログラムだったので，サーボモーターを動かすプログラムにする必要がありますね？
動きを担当するのはJavaScriptですから，早速<script></script>の中の部分を書き換えていきましょう．
サンプルプログラムを動かしてみようではブラウザ上のボタンを押した時にLEDが点いたり消えたりしていたので，それを前回のレッスンを活用してサーボモータが動くように変えれば良いわけです．

変更する流れとしては，

LEDのライブラリをサーボモーターのライブラリに変更する
モーターの回転角度を変更するangleを設定
ボタンを押した時に起こるイベントをLEDの点灯からサーボモーターの回転にする

まずは自分で考えてみてから，下に載せた<script></script>間の変更箇所を見てみるようにしましょう．
また，先ほど発展1でテキストのIDを書き換えた人は，対応するIDを'#green_on'等から自分の設定したIDに変えることを忘れないで下さい．

    <script>
        var obniz = new Obniz("OBNIZ_ID_HERE");

        obniz.onconnect = async function () {

            // var light = obniz.wired("Keyestudio_TrafficLight", { gnd: 0, green: 1, yellow: 2, red: 3 });
            var servo = obniz.wired("ServoMotor", { gnd: 0, vcc: 1, signal: 2 });    //サーボーモーターのライブラリを指定
            var angle = 0;    //まずは0度に

            $('#green_on').click(function () {    //グリーンの「ON」のボタンが押されたら
                // light.green.on();
                angle = 0;    //角度を0度に
                servo.angle(angle);    //サーボーモーターを(angle)度に回す
            });

            $('#green_off').click(function () {    //グリーンの「OFF」のボタンが押されたら
                // light.green.off();
                angle = 90;    //角度を90度に
                servo.angle(angle);
            });

            $('#yellow_on').click(function () {    //イエローの「ON」のボタンが押されたら
                // light.yellow.on();
                angle = angle + 5; //角度を+5度に
                servo.angle(angle);
            });

            $('#yellow_off').click(function () {//イエローの「OFF」のボタンが押されたら
                // light.yellow.off();
                angle = angle - 5; //角度を-5度に
                servo.angle(angle);
            });

            obniz.switch.onchange = function (state) {
                $('#print').text(state);
                obniz.display.clear();
                obniz.display.print(state);
            }

            $("#showtime").on("click", function () {
                obniz.display.clear();
                // obniz.display.print($("#text").val());
                obniz.display.print(angle + " deg");
            });

        }

    </script>

そうしたらオンラインエディタで動かしてみましょう．

緑のボタンを押した時にサーボモーターが指定した角度に回っていれば成功です！
(黄色のボタンの動きは実装していませんので，自分で角度を増やしたりして改造して遊んでみて下さい．)

発展：ディスプレイの表示を変更する

ではもう少し手を加えて，ディスプレイにサーボモータの現在の角度を表示するようにしてみましょう．
今までのインターフェースにobnizのディスプレイに"Hello World"を表示するボタンがあるので，それを変更してみます．

HTML

まずは先ほどの Hello World の部分を消して，以下のようなボタンにしてみます．

ボタンの対応するところを書き換えましょう．

    <div>
        <!-- <input type="text" class="p-2" id="text" value="Hello World"> -->
        <!-- <button class="btn btn-primary" id="showtime">Print on obniz</button> -->
        <button class="btn btn-primary" id="showtime">Print degree on obniz</button>
    </div>

JavaScript

obnizのディスプレイ表示のプログラム部分を書き変えます．
ディスレイの使い方が知りたい人は，ディスプレイのページを見てみて下さい．

$("#showtime").on("click", function () {
    obniz.display.clear();
    // obniz.display.print($("#text").val());
    obniz.display.print(angle + " deg");
});

ボタンを押すと，以下のように設定した現在の角度がobnizのディスプレイに表示されるはずです．

今回の発展は以上になります！
次のレッスンでは，今度は物理的に押せるボタンとサーボーモーター，そしてブラウザを組み合わせてみましょう！

完成版のプログラム

上手くいかなかった人は，以下のプログラムを見て比較してみて下さい．

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://obniz.com/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
</head>

<body>

    <div id="obniz-debug"></div>

    <div class="wrap px-5 py-4">

        <h3 class="title mb-4">Connect From Your Browser</h3>

        <!-- <h5>LED</h5> -->
        <h5>Servo Motor</h5>

        <div class="btnBox d-flex mb-4">

            <div class="green_btn d-flex flex-column">
                <!-- <button class="btn btn-success m-1" id="green_on">ON</button>
                <button class="btn btn-success m-1" id="green_off">OFF</button> -->
                <button class="btn btn-success m-1" id="green_on">0 deg</button>
                <button class="btn btn-success m-1" id="green_off">90 deg</button>
            </div>

            <div class="yellow_btn d-flex flex-column">
                <!-- <button class="btn btn-warning m-1" id="yellow_on">ON</button>
                <button class="btn btn-warning m-1" id="yellow_off">OFF</button> -->
                <button class="btn btn-warning m-1" id="yellow_on">+5 deg</button>
                <button class="btn btn-warning m-1" id="yellow_off">-5 deg</button>
            </div>

        </div>

        <h5>TEXT</h5>

        <div>
            <!-- <input type="text" class="p-2" id="text" value="Hello World"> -->
            <!-- <button class="btn btn-primary" id="showtime">Print on obniz</button> -->
            <button class="btn btn-primary" id="showtime">Print degree on obniz</button>
        </div>

    </div>

    <script>
        var obniz = new Obniz("OBNIZ_ID_HERE");

        obniz.onconnect = async function () {

            // var light = obniz.wired("Keyestudio_TrafficLight", { gnd: 0, green: 1, yellow: 2, red: 3 });
            var servo = obniz.wired("ServoMotor", { gnd: 0, vcc: 1, signal: 2 });    //サーボーモーターのライブラリを指定
            var angle = 0;    //まずは0度に

            $('#green_on').click(function () {    //グリーンの「ON」のボタンが押されたら
                // light.green.on();
                angle = 0;    //角度を0度に
                servo.angle(angle);    //サーボーモーターを(angle)度に回す
            });

            $('#green_off').click(function () {    //グリーンの「OFF」のボタンが押されたら
                // light.green.off();
                angle = 90;    //角度を90度に
                servo.angle(angle);
            });

            $('#yellow_on').click(function () {    //イエローの「ON」のボタンが押されたら
                // light.yellow.on();
                angle = angle + 5; //角度を+5度に
                servo.angle(angle);
            });

            $('#yellow_off').click(function () {//イエローの「OFF」のボタンが押されたら
                // light.yellow.off();
                angle = angle - 5; //角度を-5度に
                servo.angle(angle);
            });

            obniz.switch.onchange = function (state) {
                $('#print').text(state);
                obniz.display.clear();
                obniz.display.print(state);
            }

            $("#showtime").on("click", function () {
                obniz.display.clear();
                // obniz.display.print($("#text").val());
                obniz.display.print(angle + " deg");
            });

        }

    </script>
</body>

</html>