言語切り替え

Webページ上のボタンでLEDをON / OFFする

今回やること

obnizに繋いだLEDを、Webページ上のボタンによってつけたり消したりします。

用意するもの

  • LED
  • (抵抗が内蔵されていないLEDを使う場合は抵抗)
  • obniz Board
  • モバイルバッテリーなど
  • ブラウザを開くデバイス

組み立て方

LEDのパーツライブラリを参考に、下の図のようにobniz BoardとLEDを接続します。

obniz LED
0 アノード(脚の長い方)
1 カソード(脚の短い方)

抵抗入りLEDの場合

 

抵抗なしLEDの場合

※抵抗の内蔵されていないLEDを使用する場合は、図のように必ず抵抗を挟んでください。

 

プログラム

ボタンが押されたときに、button要素のdisabled属性を変更します。
ONが押されたときにはONのボタンを無効にし、OFFのボタンのみを有効にします。

$('#on').click((e) => { led.on(); $('#on').prop('disabled', true); $('#off').prop('disabled', false); });
$('#off').click((e) => { led.off(); $('#on').prop('disabled', false); $('#off').prop('disabled', true); });

完成したプログラム