今回はこの動画のようにフルカラーLEDをグラデーション点灯させてみます。
これまでの記事はこちらです。
| 記事 | 内容 |
|---|---|
| obnizでIoT電子工作を始めよう!【obniz講座第1回】 | obnizのディスプレイに文字を表示させます |
| obnizでLEDを光らせよう!【obniz講座第2回】 | obnizにLEDと抵抗を接続してLEDを光らせます |
| ソフトウェアボタンでLEDをON/OFFしよう【obniz講座第3回】 | HTMLで作成したボタンを押して、LEDをON/OFFさせます |
| obnizのPWM制御でLED調光しよう【obniz講座第4回】 | obnizのPWM機能を使ってLEDを調光させます |
準備するもの
今回準備するものはこちらです。
準備するもの
- obniz本体 ×1個
- マイクロUSBケーブル(obniz付属品) ×１本
- フルカラーLED(カソードコモン、今回はOSTA5131Aを使用) ×1個
- 150Ω前後の抵抗(赤色LED用) ×1個
- 100Ω前後の抵抗(緑/青色LED用) ×2個
- ブレッドボード ×1個（あると半田付けせずに済みます）
- ブレッドボード用ジャンプワイヤ
LEDや抵抗などの電子部品は、東京の秋葉原にある「秋月電子通商」や「千石電商」などから購入しています。
今回はobnizのアプトプット端子から電流を吐き出す「ソース電流」でLEDを光らせるので、フルカラーLEDはカソードコモンタイプを使用します。
カソードコモンについては次の項目で説明します。
フルカラーLEDのカソードコモンとは
LEDには正しい向きがあり、プラス側がアノード、マイナス側がカソードになります。
フルカラーLEDは赤、緑、青色LEDが組み合わさっています。
それぞれにアノードとカソードがあるとピン数が多くなってしまうため、ピン数を少なくするためにアノードを１つにまとめた「アノードコモン」や、カソードを１つにまとめた「カソードコモン」があります。
今回は「obniz」から吐き出す「ソース電流」でLEDを光らせるので、上の図のようにカソードコモン（オプトサプライのOSTA5131A)を使用します。
LEDの特性や抵抗値計算、アノードコモンとカソードコモンの違いなど、それぞれ下記の記事で説明しているので、こちらも合わせてご覧ください。
-
LEDの正式名称は？Lってどんな意味？LEDの名前・略称を説明します
サンダー最近は照明にLEDが使用されることが増えてきました。ここで、LEDの意味をご存知でしょうか？ 今回はLEDの意味について説明します。 LEDとは？LEDの正式名称って何？LEDは ...
続きを見る
-
LED抵抗値自動計算機とその求め方について説明します【簡単】
LED抵抗自動計算機 下図のように、LED1個をつなぐとき、LEDに流したい電流から抵抗値を求める計算機です。 LED抵抗計算機 ↓電源電圧【例】5(V) ↓LEDの電圧降下【例】2(V ...
続きを見る
-
LEDのアノードコモンとカソードコモンの違いと使い分けについて
サンダー「アノードコモン」と「カソードコモン」の違い分かりますか？ かみなりんえーっと、アノードがプラス側、カソードがマイナス側で・・・コモンってなんだっけ？ サンダー改めて聞かれると、どっちがどうだ ...
続きを見る
フルカラーLEDの抵抗値計算
今回使用するフルカラーLEDの「OSTA513A」の電圧降下は以下の通りです。（データシートより）
| LED色 | 順方向電流 | 順方向電圧(Typ.) | 順方向電圧(Max.) |
|---|---|---|---|
| 赤 | 20mA | 2.1 | 2.6 |
| 緑／青 | 20mA | 3.1 | 3.6 |
Typ,は「Typical(典型的な、代表的な)」の略で、一般的な値を表しています。
「obniz」の出力端子は特に設定していない場合は5V、順方向電圧はLEDを通った後に降下する電圧と等しいです。
例として赤色LEDに20mA流したい場合の抵抗値の求め方を説明します。
LEDと抵抗は直列なので、流れる電流は同じです。
今回流す電流を20mA（＝0.02A)と仮定し、抵抗値をＲとして、抵抗値を求めます。
5V＝ 0.02 × R ＋ 2.1V
Ｒ＝ (5 - 2.1) ÷ 0.02
＝145（Ω）
このように電源電圧(今回はobnizの出力端子)が5Ｖ、順方向電圧2.1V、LEDに20mA流したい場合、抵抗値は145Ωにすればよいことが分かります。
ただ、一般的に145Ωといった中途半端な値の抵抗がないので、150Ωの抵抗を使用します。
同じように計算して、緑と青のLEDには100Ωの抵抗を接続します。
このようにLEDに流したい電流値から抵抗値の求め方は下記の記事で説明しています。また、自動で計算するアプリケーションも用意してあるので、是非お使いください。
-
LED抵抗値自動計算機とその求め方について説明します【簡単】
LED抵抗自動計算機 下図のように、LED1個をつなぐとき、LEDに流したい電流から抵抗値を求める計算機です。 LED抵抗計算機 ↓電源電圧【例】5(V) ↓LEDの電圧降下【例】2(V ...
続きを見る
私は基板を手作りしましたが、ブレッドボードを使用すれば、半田付け不要で実験可能です。
サンプルプログラム
この動画のように、ボタンを押したらフルカラー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>
<button id="on">ON</button>
<button id="off">OFF</button>
<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function ()
{
var full_led = obniz.wired("FullColorLED", {r:0 , g:1 , b:2 , common:11 , commonType:'cathode_common' });
$('#on').click(function ()
{
full_led.gradation(2000);
obniz.display.clear();
obniz.display.print("ON");
});
$('#off').click(function ()
{
full_led.stopgradation();
full_led.rgb(0,0,0);
obniz.display.clear();
obniz.display.print("OFF");
});
}
</script>
</body>
</html>
既出部分の概略
<head></head>内の記述については過去の講座で説明していますので、簡単に説明し、新たな部分のみ説明致します。
| コード | 説明 | 参照講座 |
|---|---|---|
| <meta charset="utf-8"> | 文字コード(UTF-8)の設定 | obnizでLEDを光らせよう!【第2回】 |
| <meta name ~(省略)> | 横幅を端末に合わせ、表示倍率を1倍に設定 | obnizでLEDを光らせよう!【第2回】 |
| <script src="https://code.jquery.com~(省略) | jQueryをCDNから読み込んで利用 | obnizのPWM制御でLEDを調光しよう【obniz講座第4回】 |
| <script src="https://unpkg.com/obniz@1.14.1/obniz.js"~(省略) | obnizを制御するための関数などを利用 | obnizでIoT電子工作を始めよう！【obniz講座第1回】 |
| <div id="obniz-debug"></div> | obnizのデバッグ表示 | obnizでIoT電子工作を始めよう！【obniz講座第1回】 |
| <button ~(省略) | HTMLでボタンを作成し、id名を設定 | ソフトウェアボタンでobnizのLEDをON/OFFしよう!【obniz講座第3回】 |
| var obniz = new Obniz("OBNIZ_ID_HERE"); | 設定したobnizのIDを「obniz」変数として宣言 | obnizでIoT電子工作を始めよう！【obniz講座第1回】 |
| obniz.display.clear(); | obnizのディスプレイ表示をクリア | obnizでIoT電子工作を始めよう！【obniz講座第1回】 |
| obniz.display.print("***"); | obnizのディスプレイに文字を表示 | obnizでIoT電子工作を始めよう！【obniz講座第1回】 |
var full_led = obniz.wired(~省略~)はフルカラーLEDを制御するために用意された関数の利用
下記のコードについて説明します。
var full_led = obniz.wired("FullColorLED", {r:0 , g:1 , b:2 , common:11 , commonType:'cathode_common' });
まず、「var」で「full_led」という変数を宣言しています。
obniz.wired("FullColorLED", {r:0 , g:1 , b:2 , common:11 , commonType:'cathode_common' });は「obniz」を制御するための関数をまとめた「obniz.js」で定義されています。
最初に"FullColorLED"を代入し、フルカラーLEDの制御であることを示します。
r,g,bはそれぞれ赤色LED、緑色LED、青色LEDを接続しているポート番号を指定します。
今回は上記のように赤、緑、青それぞれのアノードを0、1、2ポートに接続します。
抵抗の挿入箇所はLEDの前後どちらでも構いませんが、カソードコモンのため、カソードを11番のポートにそのまま接続するのが良いかと思います。
このとき、赤色LEDの抵抗と、緑／青色LEDの抵抗値を間違えないようにしてください。
そして、「commonType:」にはアノードコモンかカソードコモンかを指定します。
今回はカソードコモンですので、'cathode_common'としていますが、吸い込みで光らせる場合(シンク電流)はアノードコモンとなるので、その場合は'anode_common'とする必要があります。
$('#on').click(function () { }); はID名「on」の要素がクリックされた時の処理
下記のコードについて説明します。
$('#on').click(function () { });
これは、jQueryで、ID名「on」で宣言した要素がクリックされたときに行う処理を表しています。
()の中のfunction()は無名関数で、{ }の中で処理を記述しています。
full_led.gradation(2000); は2000ミリ秒(1000ミリ秒 = 1秒)を1周期としてグラデーション点灯する関数
下記のコードについて説明します。
full_led.gradation(2000);
これは「obniz.js」の関数を利用しています。
カッコ内の数字は何ミリ秒で、グラデーションを1周するかを指定しています。
1,000ミリ秒 ＝１秒なので、２秒で１周期のグラデーション点灯をするという事になります。
ちなみに、1周期で何を変更しているかと言うと、HSV(H：色相、S：彩度、V：明度)の値のうち、「H」の色相を0～360度まで変更させる時間を1周期としています。
上記が色相を環状に表した図となりますが、0～360度に変更させる、つまり赤→黄→緑→シアン(水色)→青→紫の順にLEDの色を変更させています。
full_led.stopgradation(); はグラデーション点灯の停止
下記のコードについて説明します。
full_led.stopgradation();
これはそのまま自動グラデーションを停止させる関数です。
full_led.rgb(0,0,0); はフルカラーLEDを消灯させる
下記のコードについて説明します。
full_led.rgb(0,0,0);
full_led.rgb(0,0,0);順に赤、緑、青色の色情報を0にしています。
赤、緑、青の色情報をすべて「0」にすると黒になりますが、LEDの場合、黒は消灯にあたります。
プログラムの実行
プログラムを実行し、「ON」ボタンを押したら自動でグラデーション点灯、「OFF」ボタンを押したらグラデーションが終了し、LEDが消灯することを確認してください。
【前回の講座】
-
obnizのPWM制御でLEDを調光しよう【obniz講座第４回】
今回はobnizのPWM制御を使って、LEDを調光させたいと思います。 これまでのobnizについての記事や、PWMについて説明した記事もあるので、合わせてご覧ください。 記事 内容 obnizでIo ...
続きを見る
【次回の講座】
-
obnizで圧電ブザーを鳴らそう！【obniz講座第6回】
サンダー今回はobnizで圧電ブザーを鳴らしたいと思います。 ドレミファソラシドのソフトウェアボタンを用意し、圧電ブザーで音階を表現します。 前回の講座はこちらです。 準備するもの 今回 ...
続きを見る
【講座のまとめ】
| 記事 | 内容 |
|---|---|
| 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でサーボモータを動かします |
