obnizで色々作ろう

小学1年生の僕が、obnizで勉強していること

【第1講：解説】信号機

2020年7月4日プログラムと解説

Traffic Light

第2版：僕が修正したプログラム

パパに教えてもらいながら、「緊急事態」ボタンを追加して、点滅できるようにしたんだ。

<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"
    />
    <link rel="stylesheet" href="/css/starter-sample.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script
      src="https://unpkg.com/obniz@3.6.1/obniz.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div id="obniz-debug"></div>

    <!--文字の表示-->
    <div class="wrap">
      <div class="print">
        <h3 class="text-center">Print words on obniz</h3>
        <div>
          <input type="text" id="text" value="Hello World" placeholder="Input in freely">
          <button class="btn btn-primary" id="showtime">Print on obniz</button>
        </div>
      </div>

    <!--ダイヤルスイッチの状態を表示-->
      <div class="switch">
        <h3 class="text-center"> Swtich </h3>
        <span id="print">undefined</span>
      </div>
    
    <!--LEDのON/OFFボタン-->
      <div class="led">
        <h3 class="text-center">Turning on a LED</h3>
        <button class="btn btn-primary" id="on">LED ON</button>
        <button class="btn btn-primary" id="off">LED OFF</button>
         <button class="btn btn-primary" id="緊急事態">LED 緊急事態</button>
        <dl>
          <dt>Demo Pin assign</dt>
          <dd>- io0:gnd</dd>
          <dd>- io1:green</dd>
          <dd>- io2:yellow</dd>
          <dd>- io3:red</dd>
          <dd>- Switch state will be printed on browser</dd>
        </dl>
      </div>
    
    </div>

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

      obniz.onconnect = async function() {

        var led = obniz.wired("Keyestudio_TrafficLight", {gnd:0, green:1, yellow:2, red:3});
        obniz.display.clear();
        obniz.display.print("Hello World");

        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());
        });

        $("#on").click(function() {
          led.green.on();
          led.yellow.on();
          led.red.on();
        });

        $("#off").click(function() {
          led.green.off();
          led.yellow.off();
          led.red.off();
         });

        $("#緊急事態").click(function() {
          led.green.blink();
          led.yellow.blink();
          led.red.blink();
         });

      };
    </script>
  </body>
</html>

僕が変更した部分

１．ボタンの追加

40行目に、ボタンを追加したんだよ。

<button class="btn btn-primary" id="緊急事態">LED 緊急事態</button>

idが”緊急事態”で英数字じゃないけど、まあいいか・・・

２．ボタンの動きを追加

85-89行目に、ボタンの動きを追加したんだ。

        $("#緊急事態").click(function() {
          led.green.blink();
          led.yellow.blink();
          led.red.blink();
         });

コメントを残すコメントをキャンセル