ObnizとjQuaryでLED点灯/消灯

・目次

ObnizとjQuaryでLED点灯/消灯

1.目的　　

・obnizeを使用して、LEDの点灯、消灯するプログラムを作成する。

obnizでLEDを光らせました。
javascriptで書けるのは簡単でいいですね。
それに、サンプルが結構あるから、そこそこやりやすいです。
これから色々作っていきたいところ。#obniz #jquary #html #javascript #駆け出しエンジニアと繋がりたい #css pic.twitter.com/iQ5u6MeVx9
— Project OKI (@oki_project) 2021年4月11日

(下記プログラムとは画面がちょっと違います)

2.obnizeとは

・html,css,javascriptでIoT(LEDなどの電子部品の制御)を出来るコントロールボード

　　→Objectify the Real World | obniz

3.使用機器

個数	部品名	型番
1	USBケーブル(obniz付属品)	USBtypeC
1	obniz	obniz Board 1Y
1	ブレッドボード・ジャンパーワイヤ（オス－オス）	B094ML2RLP
1	ブレッドボード	LEOBROJP043
1	発光ダイオード(LED)	LEOBROJP043
1	抵抗(100Ω程度)	B077N1BV3Y

4.プログラム作成

・プログラムはindex.htmlファイルを作成する。

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

  <body>
    <div id="obniz-debug"></div>
    <!-- 中央に揃える  -->
    <div class="text-center">
      <h3>Control LED from Browser</h3>
      <!-- ボタンを用意 -->
      <button class="btn btn-primary" id="on">LED ON</button>
      <button class="btn btn-primary" id="off">LED OFF</button>
    </div>

　　<!-- javascriptの記載 -->
    <script>
      //type in your obniz ID
      var obniz = new Obniz("OBNIZ_ID_HERE");

      //during obniz connection
      obniz.onconnect = async function() {
        //wire LED to obniz
        //LEDの設定
        //io0: anode
        //io1: cathode
        var led = obniz.wired("LED", { anode: 0, cathode: 1 });

        //if the "on" button is clicked
        //onボタンクリック時、LEDをON
        $("#on").click(function() {
          led.on();
        });

        //if the "off" button is clicked
        //offボタンクリック時、LEDをOFF
        $("#off").click(function() {
          led.off();
        });
      };
    </script>
  </body>
</html>