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