【obniz入門】obniz Boardに接続したLED信号に赤色を追加する

サンプルプログラムを使ってLED信号を点灯させてみましたので、obniz Boardに接続したLED信号に赤色ランプを追加してボタンを操作して点灯、消灯させてみます。

サンプルプログラムはこちらで公開しているものを使っています。(https://obniz.com/ja/doc/guides/obniz-starter-kit/start-guide/lesson-run-sample-program

■用意したもの

・obniz Board

・LED信号

・Micro USBケーブル

これらは「obniz Starter kit(オブナイズ スターターキット)」に付属しています。

別途用意したもの

・Windows10を搭載したノートパソコン(オンラインのプログラムエディタを開くため)

・インターネット環境、WiMAX(ワイマックス)。

■obniz Board本体にLED信号を取り付ける

オンラインのプログラムエディタを開く前に、obniz BoardにLED信号に取り付けておきます。

■オンラインのプログラムエディタを開き、プログラムを貼り付ける

obniz Boardを起動します。起動させるとディスプレイに「obnizID」が表示されますので、このIDを「obniz – developer’s console(http://obniz.com/ja/console/program)」をアクセスした時に入力し、プログラムエディタを開きます。

プログラムエディタを開いた後は、サンプルプログラムをコピーし、エディタ上にそのまま貼り付けます。2020年8月28日現在では、サンプルプログラムをそのままコピーしても使えなかったので、修正が必要です。

修正した後は、プログラムにobnizIDを入力します。

■プログラムを実行する

入力後、エディタの上部にある「実行」ボタンをクリックします。

クリックすると、ウインドウが表示され、実行したプログラムが確認できます。

プログラムを確認すると、「LED」の表記のところには「ON/OFF」が2つしかなく押してみると、LED信号の「緑色」と「黄色」のLEDランプが点灯します。

■LED信号の「赤色」LEDランプのON/OFFボタンを追加する

「緑色」と「黄色」のLEDランプは点灯するので、ここに「赤色」のLEDランプを追加してみます。

<div class="red_btn d-flex flex-column">
<button class="btn btn-danger m-1" id="red_on">ON</button>
<button class="btn btn-danger m-1" id="red_off">OFF</button>
</div>

オンラインのプログラムエディタに戻り、プログラムに上記のコードを追加します。追加する箇所は、黄色のLEDランプ点灯ボタンの下に追加してみます。

追加すると、自動でコードが追加されたプログラムが保存されます。

保存後、1度、エディタの上部にある「実行」ボタンをクリックします。

クリックして実行してみると、先程実行したプログラムとは異なり、「LED」に「ON/OFF」ボタンが追加されています。ただし、追加されたボタンを押してもLED信号は点灯しません。

点灯させるためには、JavaScriptを編集しなければいけません。

■JavaScriptを編集して、ON/OFFボタンを押した時に点灯、消灯させる

JavaScriptを編集するためには、再びオンラインのプログラムエディタに戻り、プログラムの下部を確認します。

<script></script>

確認すると、上記のタグが設置されている箇所があります。ここがJavaScriptなので、この中を編集します。

$('#yellow_on').click(function () {
  light.yellow.on();
});

$('#yellow_off').click(function () {
  light.yellow.off();
});

上記が、LED信号の「黄色」LEDランプのON/OFFボタンです。

$('#red_on').click(function () {
  light.red.on();
});

$('#red_off').click(function () {
  light.red.off();  
});

その下に、上記のコードを追加します。これでON/OFFボタンを押した時に点灯、消灯ができます。

■ON/OFFボタンを押した時に点灯、消灯できるのか検証・確認する。

ON/OFFボタンを押した時に点灯、消灯させるコードを追加できました。

追加した後は、エディタの上部にある「実行」ボタンをクリックします。

クリック後、実行されたプログラムの「LED」の「ON/OFF」ボタンを押してみます。

ボタンを押してみると、LED信号の「赤色」LEDランプが点灯、消灯できることが確認できました。

コメント

タイトルとURLをコピーしました