【第2-4講】踏切を作ろう(3)

2020年7月18日やってみよう

クイズの答えは、分かるかな？

わかったよ！
「obniz.display.clear();」を入れるんだね。

その通り！
では、「obniz.display.clear();」は何をしているかわかるかな？

ディスプレイを消すんだよね。

そうだね。obniz のdisplayディスプレイをclearクリアーするんだね。
clearという英語の意味は分かるよね？

キレイにすることだよね。

そうだね。
この命令でディスプレイをきれいにしないと、前の文字が残ったままなんだ。
じゃあ、順に直していこうか。
まずは、[開ける]ボタンの処理だね。

下から、コピーすればいいんだよね。

$(“#on”).click(function() {
servo.angle(90);
obniz.display.clear();
});

じゃあ、[閉める]ボタンの処理だね。

ここも、こうすればいいんだよね。

$(“#off”).click(function() {
servo.angle(0);
obniz.display.clear();
obniz.display.print(“電車が来ます”);
});

【クイズ2-3の答】

「obniz.display.clear();」を、二か所に追加する。

[開ける]ボタンの処理の中に、追加する。
[閉じる]ボタンの処理の中に、「obniz.display.print(“電車が来ます”);」の前に追加する。

操作画面のJavaScript(完成)

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

      obniz.onconnect = async function() {

        var servo = obniz.wired("ServoMotor", {gnd:0, vcc:1, signal:2});
        obniz.display.clear();
        obniz.display.print("Hello World");

        $("#on").click(function() {
          servo.angle(90);
          obniz.display.clear();  // ★【答】1.この行を追加したんだよ★
        });

         $("#off").click(function() {
          servo.angle(0);
          obniz.display.clear(); // ★【答】2.この行を追加したんだよ★
          obniz.display.print("電車が来ます");
         });

        $("#moveto").on("click", function() {
          obniz.display.clear();
          obniz.display.print($("#text").val());
        });

      };
    </script>

よし、じゃあ[実行]してみようか。

やったー、いい感じだよ！

よし、じゃあレゴトレインと組み合わせてみよう！

・・・（ということで、レゴトレインと合体作業）・・・

できたよ！

ほほう、obniz のディスプレイは、駅に使うんだね。
踏切に使うと思ってたよ。