今回はobnizのPWM制御を使って、LEDを調光させたいと思います。
これまでのobnizについての記事や、PWMについて説明した記事もあるので、合わせてご覧ください。
| 記事 | 内容 |
|---|---|
| obnizでIoT電子工作を始めよう！ | obnizのディスプレイに文字を表示させます |
| obnizでLEDを光らせよう！ | obnizにLEDと抵抗を接続してLEDを光らせます |
| ソフトウェアボタンでobnizのLEDをON/OFFしよう！ | HTMLで作成したボタンを押して、LEDをON/OFFさせます |
| PWMってなに？PWMで何ができる？ | PWMについて説明しています |
今回は、下記動画のようにスライダーを左右に変更し、その値に応じてLEDを調光させるプログラムを作成します。
準備するもの（第2回,第3回と同様）
今回用意するものは第2回、第3回と同様です。
準備するもの
- obniz本体 ×1個
- マイクロUSBケーブル(obnizの電源供給用) ×１本
- LED ×光らせる個数分
- 200Ω前後の抵抗 ×1個LEDにつき１つ
- ブレッドボード ×1個（あると便利）
- ブレッドボード用ジャンプワイヤ（使う場合）
obniz本体はAmazonや公式ショップから購入します。
LEDや抵抗などの電子部品は、東京の秋葉原にある「秋月電子通商」や「千石電商」などから購入しています。
まずはPWMについて説明します。
PWMについて
「PWM」は「Pulth Width Modulation」の略で、パルス幅(=Pulth Width）を変調(=Modulation）することで、平均電圧を調整する事が可能です。
この原理をLEDの出力部で利用する事により、LEDを徐々に明るくしたり、暗くする事が出来るようになります。
このように光の明るさを調整することを「調光」と言います。
PWMについて下記の記事で説明しているので、こちらも参考にしてください。
-
PWMってなに？PWMで何ができる？
デジタルとアナログについて 電気の世界では基本的に「１」か「０」、つまり「ON」か「OFF」かで表現されます。 このように「０」か「１」かで表されることを「デジタル」と呼びます。 それに ...
続きを見る
PWMでLEDを調光するサンプルコード
onbiz.jsは常に最新にしてください
下記のoniz.jsを読み込む際のバージョンは常に最新バージョンへ書き換えてください
<script src="https://unpkg.com/obniz@【ここの部分】/obniz.js" crossorigin="anonymous"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://unpkg.com/obniz@2.0.1/obniz.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="obniz-debug"></div>
<h1>LED PWM</h1>
<p>
duty比 <input type="range" value = "0" min="0" max="100" id="duty"> <span id="pwm_num">0</span>％
</p>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function ()
{
obniz.io1.output(false);
var pwm = obniz.getFreePwm();
pwm.start({io:0});
$("#duty").on('change',function() {
var duty = $('#duty').val();
pwm.duty(duty);
$('#pwm_num').text(duty);
});
};
</script>
</body>
</html>
サンプルプログラムの説明
今回新しく説明している部分のみを解説します。
CDNからjQueryを読み込む (=<script src="https://code.jquery.com/jquery-3.3.1.js" の部分)
サンプルコードのこちらを見てください。
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
こちらは「jQuery」と呼ばれる「JavaScript」を簡単に使えるようにしたファイルです。ライブラリと呼ばれます。
「CDN」とは「Content Delivery Network」の略で、上記のような「jQuery」などのコンテンツを配信しているネットワークのことです。
このようにCDNへのリンク先を設定することで、使用したいライブラリを読み込んでいます。
「jQuery」のCDNのリンク先は下記から取得します。
「integrity」と「crossorigin」はCDNにアップロードされたファイルの改変されていないかの整合性を証明しています。
inputタグについて<input type="range" ～>
このinputタグではPWMのデューティー比を設定します。
下記のような左右に調整できるレンジバーで0％～100%まで調整できるinputタグを設けています。
そして、現在の値が何％なのかを表示させようとしています。
0%(※こちらは変化させていません)
サンプルコードを見てください。
duty比 <input type="range" value = "0" min="0" max="100" id="duty"> <span id="pwm_num">0</span>％
いくつかの要素が含まれているので、分割します。
| ① | duty比 | 表示文字 |
|---|---|---|
| ② | <input type="range" value = "0" min="0" max="100" id="duty"> | inputタグ |
| ③ | <span id="pwm_num">0</span>％ | 表示文字(spanタグで囲った部分の表示を変更する) |
①は単に「duty比」という文字をブラウザ上に表示するだけです。
②は初期値0、入力値が0～100の範囲、レンジバータイプの<input>タグ
<input>タグの「type」属性を「range」にすることで、スライダーになります。
このスライダーを左右に操作する事で、パルス幅を変調させるプログラムを作成します。
<input>タグの属性をいくつか設定しているので、それぞれ表で説明します。
| 属性 | 説明 | 初期値 |
|---|---|---|
| type | inputタグの種類を設定 | range |
| value | inputタグの初期値を設定 | 0 |
| min | inputタグで入力できる最小値を設定 | 0 |
| max | inputタグで入力できる最大値を設定 | 100 |
| id | inputタグのID名を設定 | duty |
上記により、スライダー形式で初期値は0(%)、最小値は0(%)、最大値が100(%)で、id名が「duty」という<input＞タグを作成することになります。
③は<span id="pwm_num"></span>で囲った部分を書き換える準備
下記を見てください。
<span id="pwm_num">0</span>％
このように<span id="pwm_num"></span>タグで囲み、囲んだ部分を<input>タグのレンジバーの値に応じて書き換えようとしています。
こちらでHTMLでの下準備は終了です。
JavaScript(jQuery）の処理
HTMLの<input>タグで用意したレンジバーを左右に調整することで、PWMのデューティー比を可変にします。
PWMのデューティー比を変更する事により、電圧が変わるためLEDに流れる電流が変わります。
それを利用して、LEDを明るくしたり、暗くしたりする制御を行います。
obniz.io1.output(false); はポート１をGNDに設定する
こちらのコードについての説明です。
obniz.io1.output(false);
「obniz.io1.output(false);」は<script src="https://unpkg.com/obniz@1.13.1/obniz.js" crossorigin="anonymous"></script>で読み込んだJavaScript SDKの1つです。
obniz.io1.output(faluse);と宣言することにより、obnizの1番ポートをGNDにプルダウンします。
今回は0番ポートでPWM制御、LEDと抵抗を介して「GND」に設定した1番ポートへ接続しています。
イメージとしてはこのようになります。
var pwm = obniz.getFreePwm();はobnizで6個あるPWMのうち、利用していないPWMを取得
こちらのコードについての説明です。
var pwm = obniz.getFreePwm();
obnizではPWM0～PWM5までの６つのPWM機能があり、その中から利用していないPWMを取得します。
pwm.start({io:0});は、io:0で指定したピンでPWMの開始
こちらのコードについての説明です。
pwm.start({io:0});
ピンナンバー(今回は0ポートを指定)で指定したポートでPWMを開始します。
なお、何も指定せずにPWMを開始した場合、周波数は1kHz、PWMのデューティー比は0%です。
$("#duty").on("change",function() { });の部分の説明
最後に下記のコードについて説明します。
$("#duty").on("change",function()
{
var duty = $('#duty').val();
pwm.duty(duty);
$('#pwm_num').text(duty);
});下記に分解して説明します。
| 番号 | コード | 説明 |
|---|---|---|
| ① | $(#duty").on("change",function(){ }; | id名「duty」のinputが変更された時の処理 |
| ② | var duty = $('#duty').val(); | 「duty」という変数にid名「」の代入duty値を |
| ③ | pwm.duty(duty); | PWMのデューティー比に②で取得した値を代入 |
| ④ | $('#pwm_num').text(duty); | id名「pwm_num」で設定した<span>タグの値を②で取得した値に書き換える |
順に説明していきます。
①$(#duty").on("change",function(){ });はid名「duty」で設定したinputの値が変更された時の処理をjQueryで記述したもの
①のコードについて説明します。
$(#duty").on("change",function(){
});
ですが、こちらはjQueryで記述しています。
デューティー比を決める<input>タグのid名を「duty」と名付けました。
その値が変わった時の処理を{ }内で記述しています。
前回の記事にて、ボタンを押したときにLEDを点灯／消灯させるときの記述は下記の通りでした。
document.getElementById('led_on').addEventListener('click',function()
{
led.on();
obniz.display.clear();
obniz.display.print("ON");
});
上記の関数については、前回の記事を参照してください。
-
ソフトウェアボタンでobnizのLEDをON/OFFしよう！【obniz講座第３回】
サンダー今回は下記のようなボタンを作成し、ボタンのON/OFFでobnizに接続したLEDをON/OFFさせてみます ON obnizについてや、LEDを点灯させるプログラムは下記をご覧ください。 準 ...
続きを見る
こちらはJavaScriptで記述しています。
今回のコードをJavaScriptで記述すると、下記のようになります。
document.getElementById('duty').addEventListener('change',function() {
});
このようにjQueryで記述することで、JavaScriptよりも短くコードを書くことが可能です。
②var duty = $('#duty').val();はid名「duty」で設定したinputの値を変数「duty」へ代入
②のコードについて説明します。
var duty = $('#duty').val();
これはid名「duty」で設定した<input>タグの値を、変数「duty」に代入しています。
この変数「duty」を使って、PWMのデューティー比（＝③）やHTMLで記述した文字の変更（＝④）を行います。
③pwm.duty(duty); は②で取得した値をPWMのデューティー比に反映
③のコードについて説明します。
pwm.duty(duty);
「pwm.duty();」は、<script src="https://unpkg.com/obniz@1.13.1/obniz.js" crossorigin="anonymous"></script>で読み込んだJavaScript SDKの1つです。
pwm.duty();の()内にはPWMのデューティー比を入力します。
今回は<input>タグのレンジバーで変更された値をPWMのデューティー比として設定します。
これにより、デューティーが大きくなればなるほどLEDは明るくなります。
④$('#pwm_num').text(duty); はHTML内で宣言した<span id="pwm_num">0</span>％の数字部分の書き換え
④のコードについて説明します。
$('#pwm_num').text(duty);
③のレンジバーを変更した際、このままでは現在の値がいくつなのかが分かりません。
そのため、この処理でHTML内に宣言した<span id="pwm_num">0</span>の部分を書き換えています。
プログラムの実行
それではサンプルプログラムを実行してください。
動画のようにレンジバーの値に応じて、LEDの明るさが変わることを確認してください。
ココに注意
【前回の講座】
-
ソフトウェアボタンでobnizのLEDをON/OFFしよう！【obniz講座第３回】
サンダー今回は下記のようなボタンを作成し、ボタンのON/OFFでobnizに接続したLEDをON/OFFさせてみます ON obnizについてや、LEDを点灯させるプログラムは下記をご覧ください。 準 ...
続きを見る
【次回の講座】
-
obnizでフルカラーLEDをグラデーション点灯しよう【obniz講座第5回】
今回はこの動画のようにフルカラーLEDをグラデーション点灯させてみます。 これまでの記事はこちらです。 記事 内容 obnizでIoT電子工作を始めよう!【obniz講座第1回】 obn ...
続きを見る
今回使用したPWMについては、こちらの記事で詳しく説明しています。
-
PWMってなに？PWMで何ができる？
デジタルとアナログについて 電気の世界では基本的に「１」か「０」、つまり「ON」か「OFF」かで表現されます。 このように「０」か「１」かで表されることを「デジタル」と呼びます。 それに ...
続きを見る
【講座のまとめ】
| 記事 | 内容 |
|---|---|
| obnizでIoT電子工作を始めよう！【obnizでIoT電子工作を始めよう！【obniz講座第1回】 | obnizのディスプレイに文字を表示させます |
| obnizでLEDを光らせよう！【obniz講座第2回】 | obnizにLEDと抵抗を接続してLEDを光らせます |
| ソフトウェアボタンでLEDをON/OFFしよう！【obniz講座第３回】 | HTMLで作成したボタンを押して、LEDをON/OFFさせます |
| obnizのPWM制御でLEDを調光しよう【obniz講座第４回】 | obnizのPWM機能を使ってLEDを調光させます |
| obnizでフルカラーLEDをグラデーション点灯しよう【obniz講座第5回】 | obnizでフルカラーLEDをグラデーション点灯させます |
| obnizで圧電ブザーを鳴らそう！【obniz講座第6回】 | obnizで圧電ブザーを鳴らします |
| obnizでミニ4駆をラジコン化しよう！【obniz講座第7回】 | obnizでタミヤのミニ四駆をコントロールします |
| obnizでサーボモータを動かそう！【obniz講座第8回】 | obnizでサーボモータを動かします |
