WebIO: Javascriptプログラミング で ものづくり(Arduino ProMicro版)[WebIOtest ]
小山智史(koyama88@cameo.plala.or.jp)
WebIOは、PCに接続したMidiデバイスをブラウザから制御するWeb Midi APIという機能を使って、IO制御を試みたものです。FirmataのWeb版のような感じですが、Web Midi APIではSysEXコマンドがhttpsに制限されているため、Midiコマンドと入出力の対応はFirmataとは異なっています。
システムの概要は下図のようになっています。Arduinoにはあらかじめプログラム(webio.ino)を書き込んでおきます。
プログラムはWebコンテンツ(HTML+JavaScript)としてサーバに置き、パソコンのブラウザで表示し、ブラウザ画面で操作します。ブラウザから制御できるのは自身のパソコンに接続されているデバイスであり、遠隔操作できるというわけではありません。動作の確認はWeb Midi API に対応しているChromeを使い、Windows10で行っています。
後ほど紹介するように、ブラウザ画面で操作するさまざまなWebコンテンツを作ることができます。今話題のIoTを小中学校で扱う場合も、適当なWebコンテンツをサーバに置いておけば、児童生徒一人一人がさまざまな学習が可能になるのではないかと思います。また、10章で紹介するように、パソコンに接続した温湿度センサのデータをブラウザから遠方のサーバに送ることもできるので、さまざまな応用が考えられると思っています。
0. 準備
0.1 ブレッドボードの使い方
ここでは下図左のブレッドボード(EIC-301 )を使います。ボードの内部は下図右のように接続されています。
(外観) (内部の接続)
ブレッドボードにArduino Pro Microを差し込み、GNDと5Vの端子を図のように接続します。USBケーブルをパソコンに接続すると、電源(5V)がパソコンから供給されます。Arduino Pro Microに見やすいラベルを貼っておくことをお勧めします。
(回路図) (実体配線図)
初めてブレッドボードを使う場合は、練習としてLEDと抵抗を下図左のように接続して点灯を確認しましょう。電源はパソコンからUSB端子を通じて供給され、電流の流れは下図右のようになります。ブレッドボードの内部の結線も含めて「電流が流れる経路」を意識することが重要です。
(練習) ブレッドボードで下記の回路を組み立て、スイッチを押すとLEDが点灯することを確認しなさい。
上のzipファイルをダウンロードして解凍してください。
(1) Arduino用プログラム: webio.ino
Arduino Pro Micro(またはLeonardo, Davinciなど)にwebio.ino(スケッチ)を書き込んでおきます。2章以降で、LEDを接続して実際にIO制御を行う時に必要になります。Arduino UNOやnanoはMidiデバイスにすることができないので注意してください。Arduinoの準備ができれば、このページを使ってすぐに動作を確かめることができます。また、10.3 の動作テスト用のページでさまざまな動作を確かめることができます。動作テスト用ページを表示する
(2) JavaScriptライブラリ: webio.js
2章以降で、LEDの制御など実際にIO制御を行うWebページの中で「<script src=webio.js></script>」のように使います。このページもそのようになっているので、フォーム入力で実際に試すことができます。
1. コマンド操作(JavaScript命令の実行)
上のコマンド入力欄にJavaScriptの命令文を入力し、実行ボタンを押すかEnterキーを押すと、その命令が実行されます。次のように入力してみてください。
これは、「100をアラート表示しなさい」というJavaScriptの「命令」を表しています。
以下のふたつめの例では文字列と数値((100+200)の演算結果)の連接演算(+)になっていて、数値(演算結果)が文字列に変換されて文字列の連接演算が行われます。
<![CDATA[
alert(100+200)
alert("答えは"+(100+200))
]]>
2. デジタル出力(1): LEDの点滅
ここから以降は、WebIOのプログラムを書き込んだArduino Pro Micro(LeonardoやDavinciでもよい)を接続し、ブラウザはChromeまたはEdgeを使って行ってください。
2.1 LEDを点灯・消灯する
以下の回路を組み立ててください。
LEDはD9ピンに接続します。「digitalWrite」というコマンドでD9ピンに高い電圧を出力したり低い電圧を出力したりすることができます。上のコマンド入力欄に
<![CDATA[
digitalWrite(D9,1)
または
digitalWrite(D9,HIGH)
]]>
のように入力し、実行ボタンを押すかEnterキーを押すと、D9ピンに高い電圧(5V)が出力され、接続したLEDが点灯します。
<![CDATA[
digitalWrite(D9,0)
または
digitalWrite(D9,LOW)
]]>
と操作すると、D9ピンに低い電圧(0V)が出力され、LEDは消灯します。「digitalWrite(D9,1)」または「digitalWrite(D9,HIGH)」は「D9ピンに1(高い電圧)を出力しなさい」という意味です。
LEDが点灯する時の電流の流れは下図のようになります。下図中のスイッチをJavaScriptの命令で切り替えていると考えるといいでしょう。
(練習) 「digitalWrite(D9,1)」および「digitalWrite(D9,0)」を実行した時のD9ピンの電圧を、テスターで測りなさい。
(練習) LEDを他のピンにつなぎ替えて、点灯・消灯してみなさい。
2.2 プログラムによるLEDの点滅
プログラムのはじめの一歩は「Lチカ」です。以下のWebページを作成し、ブラウザ(ChromeまたはEdge)で表示してください。冒頭の5行はWebページの常套句で、その先がWebページの本体とプログラムになります。
Webページは単に「LEDの点滅」と表示するだけです。「<script>」と「</script>」の間がJavaScriptプログラムになります。
プログラムは、はじめに広域変数としてledの値を0にしています。ledはLEDの点灯状態(0で消灯状態、1で点灯状態)を表しています。次にsetup()とtoggle()の2つの関数を定義しています。
ここで、「setup()」は特別な関数の名前になっていて、ページが表示された時にこの関数が実行されます 。そこでは、まずpinModeでLEDが接続されているD9ピンを出力(OUTPUT)にしています。OUTPUTは予め定義された組み込み変数です。次の「setInterval("toggle()",1000)」で、1000ms(1秒)毎に「toggle()」が呼び出されるよう指示しています。toggle()が呼び出されると、LEDの点灯状態ledを0なら1に、1なら0にし、その値をそのままdigitalWrite()で出力します。
JavaScriptプログラムでは「delay」や「wait」などの関数は用意されておらず、setInterval()やsetTimeout()を使ってプログラムを作ります。
blink.html:表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>LEDの点灯・消灯</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>LEDの点灯・消灯</h2>
<!-- ここからプログラム -->
<script>
var led=0; // 現在の点灯状態(0で消灯 1で点灯)
function setup(){ // --- はじめに自動実行 ---
pinMode(D9,OUTPUT); // D9ピンを出力に
setInterval("toggle()",1000); // 1秒毎にtoggle()を実行
}
function toggle(){
led=(led==0?1:0); // ledが0なら1に、1なら0に
digitalWrite(9,led);// D9ピンにledを出力
}
</script>
<!-- ここまで -->
</body></html>
]]>
2.3 LEDの点灯・消灯
画面上のボタンが押されるとプログラムが実行される例です。「<button>点灯</button>」で点灯 のようにボタンが表示されます。このボタンを押した時にプログラムが実行されるようにするには「<button onclick=プログラム>点灯</button>」のように書きます。
以下の例では「点灯」ボタンが押されると「digitalWrite(9,1)」が呼び出されます。
button0.html:表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>LEDの点灯・消灯</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>LEDの点灯・消灯</h2>
<button onclick=digitalWrite(D9,1)>点灯</button>
<button onclick=digitalWrite(D9,0)>消灯</button>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(D9,OUTPUT); // D9ピンを出力に
}
</script>
<!-- ここまで -->
</body></html>
]]>
3. デジタル入力: スイッチ操作でLEDのオンオフ
3.1 スイッチが押されているかどうか調べる
下図左のようにD1ピンにスイッチを接続し、「pinMode(D1, INPUT_PULLUP)」とすると、下図右のようにマイコンに内蔵された抵抗が有効になります。すると、D1ピンはスイッチをオンにすると低い電圧(0V)になり、スイッチをオフにすると高い電圧(5V)になります。この抵抗を「プルアップ抵抗」といいます。「高い電圧に引っ張り上げる抵抗」というような意味です。
コマンド入力欄を使い、D1ピンをプルアップ入力に設定した後、D1ピンが高い電圧(1)か低い電圧(0)かをアラート表示してみましょう。
<![CDATA[
pinMode(1,INPUT_PULLUP)
alert(digitalRead(1))
]]>
(練習) D1ピンに接続したスイッチを押した時と放した時のスイッチ両端の電圧を、テスターで測りなさい。
(練習) スイッチを押した時と放した時の「alert(digitalRead(D1))」の結果を確かめなさい。
3.2 スイッチの状態をデジタル値としてブラウザ画面に表示する
以下のプログラムはスイッチの状態をデジタル値としてブラウザ画面に数字で表示します。
button1.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>デジタル値の表示</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<center><span id=VAL style='font-size:80pt'></span></center>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(D1,INPUT_PULLUP);// D1ピンをプルアップ入力に
}
function loop(){ // --- 20ms毎に自動実行 ---
var val=digitalRead(D1);// D1ピンの値を読み取りvalに代入
$("VAL").innerHTML=val; // valをブラウザ画面に表示
}
</script>
<!-- ここまで -->
</body></html>
]]>
3.3 スイッチ操作でLEDを点灯・消灯する
以下は、ブラウザ画面への表示に加え、LEDの点灯・消灯も行うようにしたプログラムです。
button2.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>デジタル値の表示</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<span id=VAL style='font-size:80pt'></span>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(D1,INPUT_PULLUP);// D1ピンをプルアップ入力に
pinMode(D9,OUTPUT); // D9ピンを出力に
}
function loop(){ // --- 20ms毎に自動実行 ---
var val=digitalRead(D1); // D1ピンの値を読み取りvalに代入
digitalWrite(D9,val); // valの値をD9ピンに出力
$("VAL").innerHTML=val; // valをブラウザ画面に表示
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) スイッチを押した時にLEDが点灯しブラウザ画面に「ON」が表示され、スイッチを放した時にLEDが消灯しブラウザ画面に「OFF」が表示されるようにしなさい。
3.4 スイッチ操作で交互に点灯・消灯する
以下のプログラムは、スイッチを押すと交互にLEDが点灯・消灯します。考え方は、「スイッチが押された瞬間に(つまりさっき押されていなくて今押されたら)LED表示を反転する」というものです。buttonSには「今のスイッチの状態(0または1)」、lastSには「さっきのスイッチの状態(0または1)」、変数ledSには「今のLEDの点灯状態(1が点灯、0が消灯)」を保存します。
まず現在のD1ピンの状態(1または0)を読み取り、buttonSに入れます。そして、スイッチがさっきまで押されていなくて今押されているならledSの値を0なら1、1なら0にします。その後、D9ピン(LED)にledSの値を出力し、今のスイッチの状態を記憶します。
button3.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>LEDの点灯・消灯</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>LEDの点灯・消灯</h2>
<!-- ここからプログラム -->
<script>
var led=0; // 現在の点灯状態(0で消灯 1で点灯)
var button; // 現在のbuttonの状態
var lastbutton; // 直前のbuttonの状態
function setup(){ // --- はじめに自動実行 ---
pinMode(D1,INPUT_PULLUP);// D1ピンをプルアップ入力に
pinMode(D9,OUTPUT); // D9ピンを出力に
}
function loop(){ // --- 20ms毎に自動実行 ---
button=digitalRead(D1); // D1ピンを読みbuttonに代入
if(button!=lastbutton && button==0)// buttonが前と違いかつ0なら
led=(led==0?1:0); // ledが0なら1に、1なら0に
digitalWrite(D9,led); // 9ピンにledを出力
lastbutton=button; // lastbuttonを更新
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) 緑色LEDを増設し、スイッチを押すと赤色LEDと緑色LEDが交互に点灯するようにしなさい。
3.5 スイッチを4回押すと点灯する
以下のプログラムは、スイッチ操作4回に一度LEDが点灯します。
スイッチが押されると、Cにスイッチが押された回数を記憶します。つまり、スイッチがさっきまで押されていなくて今押されたならCの値に1を加えます。その後、「C%4==0」つまりCの値を4で割った余りが0であればLEDを点灯し、そうでなければLEDを消灯します。最後に、今のスイッチの状態を記憶します。
button4.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>LEDの点灯・消灯</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>LEDの点灯・消灯</h2>
<!-- ここからプログラム -->
<script>
var C=0; // カウントCを0にする
var button; // 現在のbuttonの状態
var lastbutton; // 直前のbuttonの状態
function setup(){ // --- はじめに自動実行 ---
pinMode(D1,INPUT_PULLUP);// D1ピンをプルアップ入力に
pinMode(D9,OUTPUT); // D9ピンを出力に
}
function loop(){ // --- 20ms毎に自動実行 ---
button=digitalRead(D1); // D1ピンを読みbuttonSに代入
// buttonが直前が1で現在が0ならCをカウントアップ
if(lastbutton==1 && button==0) C++;
if(C%4==0) digitalWrite(D9,1); // Cが4の倍数なら点灯
else digitalWrite(D9,0); // そうでなければ消灯
lastbutton=button; // lastbuttonを更新
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) 「C%4==0」の箇所を「C%7==0」や「C%4!=0」などに変えて、どのような動作になるか調べなさい。
(練習) 2個の押しボタンスイッチを使い、一方のスイッチを押すとLEDが点灯し、もう一方のスイッチを押すと消灯するようにしなさい。
4. アナログ出力: LEDの明るさを変える
4.1 アナログ出力する
はじめに、コマンド入力でLEDの明るさを変えてみます。analogWrite(ピン,値)は、指定したピンに0～255のアナログ値を出力します。0～255の値に応じて電圧(0～5V)ピンの電圧は0～5Vになります。ただし、アナログ出力に利用できるピンは3, 5, 6, 9, 10に限られているので注意が必要です。
<![CDATA[
pinMode(D9,OUTPUT)
analogWrite(D9,0)
analogWrite(D9,255)
analogWrite(D9,100)
analogWrite(D9,10)
]]>
以下の例ではWeb画面上のスライダーでLEDの明るさをコントロールします。「<input type=range ...>」の箇所でスライダーの表示を指示していて、「value=0」は初期値を0、「min=0 max=255 step=1」はスライダーの返す値を0～255で1きざみにする指示です。また、「onchange=...」の箇所にスライダーの値が変化した時に呼び出すプログラムを書いています。
slider.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>LEDの点灯・消灯</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>LEDの点灯・消灯</h2>
<input type=range style="width:300px"
onchange=analogWrite(9,this.value)
value=0 min=0 max=255 step=1>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(D9,OUTPUT); // D9ピンを出力に
}
</script>
<!-- ここまで -->
</body></html>
]]>
5. アナログ入力
5.1 アナログ入力値を調べる
下図左のようにA0ピンにボリュームを接続すると、ボリュームの操作に応じてA0ピンの電圧は0～5Vに変化します。analogRead(A0)は、A0ピンの電圧(0～5V)に応じて0～1023の値を返します。
コマンド入力欄を使い、をanalogRead(A0)でA0ピンの値を読み取り、アラート表示してみましょう。
<![CDATA[
pinMode(A0,ANALOG_INPUT)
alert(analogRead(A0))
]]>
(練習) ボリュームを操作し、A0の電圧がどの範囲で変化するか、テスターで測りなさい。
(練習) ボリュームを操作し、「alert(analogRead(A0))」の結果を確かめなさい。
5.2 アナログ値をブラウザ画面に表示する
以下のプログラムはA0ピンの電圧値を0～1023の値としてブラウザ画面に表示します。
以下のプログラムはこの値をブラウザに数字で表示します。
analog.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>アナログ値の表示</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<span id=VAL style='font-size:80pt'></span>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
}
function loop(){ // --- 20ms毎に自動実行 ---
$("VAL").innerHTML=analogRead(A0);
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下のプログラムは読み取ったアナログ値をブラウザにバーグラフで表示します。
bargraph.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>アナログ値の表示</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
A0: <meter id=A0 style="width:260px;height:60px"
max=1023></meter>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
}
function loop(){ // --- 20ms毎に自動実行 ---
$("A0").value=analogRead(A0);
}
</script>
<!-- ここまで -->
</body></html>
]]>
5.3 アナログ値に応じてLEDの点滅時間を変える
analogRead(A0)は、A0ピンの電圧(0～5V)に応じて0～1023の値をとります。以下のプログラムはこれを利用し、ボリュームの値に応じてLEDの点滅時間が変化します。
analogblink.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>LEDの点灯・消灯</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>LEDの点灯・消灯</h2>
<!-- ここからプログラム -->
<script>
var led=0; // 現在の点灯状態(0で消灯 1で点灯)
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
pinMode(D9,OUTPUT); // D9ピンを出力に
toggle();
}
function toggle(){
led=(led==0?1:0); // ledが0なら1に、1なら0に
digitalWrite(D9,led); // 9ピンにledを出力
setTimeout("toggle()",analogRead(A0)); // A0後にtoggle()
}
</script>
<!-- ここまで -->
</body></html>
]]>
5.4 アナログ値に応じてLEDを点灯・消灯する
以下のプログラムは、ボリュームのアナログ値(0～1023)が400未満の時にLEDを点灯します。
autolight.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>LEDの点灯・消灯</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>LEDの点灯・消灯</h2>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
pinMode(D9,OUTPUT); // D9ピンを出力にする
}
function loop(){ // --- 20ms毎に自動実行 ---
var val=analogRead(A0); // A0の値を読取りvalに代入
if(val<400) digitalWrite(D9,1);// ledを点灯
else digitalWrite(D9,0);// ledを消灯
}
</script>
<!-- ここまで -->
</body></html>
]]>
8. センサーの利用
8.1 スイッチをセンサーとして使う
押しボタンスイッチやスライドスイッチは、操作用のスイッチですが、センサーとしても活躍しています。例えば、CD/DVDデッキやコピー機やプリンタなど動きを伴う機器には、所定の位置に来たがどうかを検知するために、マイクロスイッチが必ずといっていいほど使われています。このような使われ方をするスイッチを「リミットスイッチ」と呼ぶこともあります。
9.7 のモーターカーでは車の先端にマイクロスイッチを使いました。ふたつの金属片を接触させるだけでスイッチ(センサー)となるので、オリジナルのスイッチを作ることも難しくはありません。所定の水位になったかどうかを検知するピンポン球を使った浮力スイッチ、傾けると金属ボールが移動する傾斜スイッチなど、用途に応じて工夫するのも楽しいでしょう。
8.2 明るさをブラウザ画面に表示する(明るさの計測)
5.2 のボリュームの代わりに明るさセンサー(CDS)をつないでみましょう。明るくなるほどCDSの抵抗値が低くなり、A0ピンの電圧は高くなります。一定以下に暗くなるとLEDが点灯します。プログラムは5.2 と同様です。ただし、明るさの閾値「400」の値は適切な値に変更する必要があります。
analog.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>アナログ値の表示</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<span id=VAL style='font-size:80pt'></span>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
}
function loop(){ // --- 20ms毎に自動実行 ---
$("VAL").innerHTML=analogRead(A0);
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下のプログラムは読み取ったアナログ値をブラウザにバーグラフで表示します。
bargraph.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>アナログ値の表示</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
A0: <meter id=A0 style="width:260px;height:60px"
max=1023></meter>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
}
function loop(){ // --- 20ms毎に自動実行 ---
$("A0").value=analogRead(A0);
}
</script>
<!-- ここまで -->
</body></html>
]]>
8.3 暗くなるとLEDを点灯する
街路灯は、暗くなると点灯します。以下のプログラムは、明るさの値が400未満の時にLEDを点灯します。プログラムは5.4と同じです。
autolight.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>LEDの点灯・消灯</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>LEDの点灯・消灯</h2>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
pinMode(D9,OUTPUT); // D9ピンを出力に
}
function loop(){ // --- 20ms毎に自動実行 ---
var val=analogRead(A0); // A0の値を読取りvalに代入
if(val<400) digitalWrite(D9,1);// ledを点灯
else digitalWrite(D9,0);// ledを消灯
}
</script>
<!-- ここまで -->
</body></html>
]]>
街路灯では、境界値付近でledが点灯したり消灯したり不安定になるのを避けるために、下図のような「ヒステリシス特性」を持たせます。
hysteresis.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>LEDの点灯・消灯</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>LEDの点灯・消灯</h2>
<!-- ここからプログラム -->
<script>
var led=0; // 現在の点灯状態(0で消灯 1で点灯)
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
pinMode(D9,OUTPUT); // D9ピンを出力に
}
function loop(){ // --- 20ms毎に自動実行 ---
var val=analogRead(A0); // 明るさを読み取りvalに代入
if(led==0 && val<400) led=1;
else if(led==1 && val>=500) led=0;
digitalWrite(D9,led); // D9ピンにledを出力
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) ヒステリシス特性の効果を確かめなさい。また、400と500の値を変えて、適切な値をみつけなさい。
8.4 音を検知する: 音量センサー
以下のプログラムは音量をバーグラフで表示します。5.3と同じプログラムです。
bargraph.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>アナログ値の表示</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
A0: <meter id=A0 style="width:260px;height:60px"
max=1023></meter>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
}
function loop(){ // --- 20ms毎に自動実行 ---
$("A0").value=analogRead(A0);
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下のプログラムは、音を検知したらLEDを3秒点灯するものです。
sound3.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>LEDの点灯・消灯</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>LEDの点灯・消灯</h2>
<!-- ここからプログラム -->
<script>
var led=0; // 現在の点灯状態(0で消灯 1で点灯)
var val; // 現在の音量
var lastval=0; // 直前の音量
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
pinMode(D9,OUTPUT); // D9ピンを出力に
}
function loop(){ // --- 20ms毎に自動実行 ---
val=analogRead(A0); // 音量を読み取りvalに代入
if(led==0 && val>=400){// 消灯状態で音量が400を超えたら
led=1; // 点灯状態にし
setTimeout("led=0",3000);// 3秒後に消灯
}
digitalWrite(D9,led); // D9ピンにledを出力
lastval=val; // lastvalを更新
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) 手をたたくとカウントアップしブラウザに回数を表示するプログラムを作りなさい。
8.5 赤外線反射センサー
赤外線の反射光で数mm程度の距離に反射物を検知するセンサーです。モーターカーと組み合わせると、ライントレースや衝突回避などが可能になります。以下のプログラムは5.2と同じものです。センサを接続して、analogRead(A0)でどの程度の値が返されるかがわかります。
analog.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>アナログ値の表示</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<span id=VAL style='font-size:80pt'></span>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
}
function loop(){ // --- 20ms毎に自動実行 ---
$("VAL").innerHTML=analogRead(A0);
}
</script>
<!-- ここまで -->
</body></html>
]]>
9. ブザー音で演奏
9.1 コマンド操作で音を出す
D9ピンに接続したブザーから指定したkeyで音を出すことができます。D9ピンにブザーを接続し、以下の操作で確認してください。
<![CDATA[
sendNote(67,200)
sendNote(67,200)
sendNote(67,200)
sendNote(72,2000)
sendNote("G4",200)
sendNote("G4",200)
sendNote("G4",200)
sendNote("C5",2000)
]]>
keyはmidiのノート番号(21～108)または文字列("A0"～"C8")で指定します。また、長さは[ms]で指定します。長さを省略すると300[ms]となります。
sendNote()ではなくplayNote()を使うと、ブラウザから音を出すことができます。以下の操作で確認してください。
<![CDATA[
playNote(67,200)
playNote(67,200)
playNote(67,200)
playNote(72,2000)
playNote("G4",200)
playNote("G4",200)
playNote("G4",200)
playNote("C5",2000)
]]>
ブラウザからドラム音を出すこともできます。
<![CDATA[
drumKick()
drumSnare()
drumHihat()
]]>
9.2 プログラムで演奏する
以下は、簡単な演奏プログラムで、D9ピンに接続したブザーから音が出ます。midi音源を接続しても動作します。Javascriptにはdelay()という関数がないため、setTimeout()で次の音に進みます。
sendnotes.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>プログラムで演奏</title>
<script src=webio.js></script>
</head><body>
<!-- ここからWebページの本体とプログラム -->
<h2 align=center>プログラムで演奏</h2>
<script>
function setup(){ // --- はじめに自動実行 ---
setTimeout("sendNote1()",1000); // 1秒後に演奏開始
}
function sendNote1(){ // 1音目
sendNote("G4",200); // 演奏
setTimeout("sendNote2()", 1000);// 1秒後に2音目
}
function sendNote2(){ // 2音目
sendNote("G4",200); // 演奏
setTimeout("sendNote3()", 1000);// 1秒後に3音目
}
function sendNote3(){ // 3音目
sendNote("G4",200); // 演奏
setTimeout("sendNote4()", 1000);// 1秒後に4音目
}
function sendNote4(){ // 4音目
sendNote("C5",2000); // 演奏
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下は、ブラウザで演奏するプログラムです。
playnotes.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>プログラムで演奏</title>
<script src=webio.js></script>
</head><body>
<!-- ここからWebページの本体とプログラム -->
<h2 align=center>プログラムで演奏</h2>
<script>
function setup(){ // --- はじめに自動実行 ---
setTimeout("playNote1()",1000); // 1秒後に演奏開始
}
function playNote1(){ // 1音目
playNote("G4",200); // 演奏
setTimeout("playNote2()", 1000);// 1秒後に2音目
}
function playNote2(){ // 2音目
playNote("G4",200); // 演奏
setTimeout("playNote3()", 1000);// 1秒後に3音目
}
function playNote3(){ // 3音目
playNote("G4",200); // 演奏
setTimeout("playNote4()", 1000);// 1秒後に4音目
}
function playNote4(){ // 4音目
playNote("C5",2000); // 演奏
}
</script>
<!-- ここまで -->
</body></html>
]]>
9.3 楽譜を演奏する
以下は、楽譜データを参照しながら演奏するプログラムです。楽譜データがプログラムと分離されているので、長い曲も表しやすくなっています。midi音源を接続しても動作します。
midimelody.html: 表示する
NeoPixel連動版
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>楽譜を演奏</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>楽譜を演奏</h2>
<!-- ここからプログラム -->
<script>
// -------------------------------------------------------------
var notes=[ // 楽譜データ[音符, Note]
[4,"C5"], [8,"G4"],[8,"G4"],[4,"A4"],[4,"G4"],
[4,""], [4,"B4"], [4,"C5"]
];
// -------------------------------------------------------------
var TEMPO=120; // 1分間に4分音符を120回
var p=0;
function setup(){ // --- はじめに自動実行 ---
playNotes();
}
function playNotes(){
var T=60000/TEMPO*4/notes[p][0]; // 4分音符 0.5秒, 8分音符 0.25秒
var u=notes[p][1];
sendNote(midiPitch[u], T*.9);
if(++p<notes.length) setTimeout("playNotes()", T);
}
</script>
<!-- ここまで -->
</body></html>
]]>
楽譜はさまざまな方法で表現することができます。以下は、少し長い曲を演奏するプログラムです。
playmidi.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>電子オルゴール</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>電子オルゴール</h2>
<!-- ここからプログラム -->
<script>
// -------------------------------------------------------------
var notes="RDDBAGDR RDDBAGER REEcBAFR RdddcABR RDDBAGDR RDDBAGER
REEcBAdd ddedcAGR dR BBBR BBBR BdGABRRR cccccBBB BAABAR dR
BBBR BBBR BdGABRRR cccccBBB ddcAGR gR";
// -------------------------------------------------------------
var TEMPO=120; // 1分間に4分音符を120回
var p=0;
function setup(){ // --- はじめに自動実行 ---
playNotes();
}
function playNotes(){
for(;p<notes.length&¬es.charAt(p)==" ";p++); // スペースは無視
var T=60000/TEMPO*4/8; // 8分音符 0.25秒 固定
var c=notes.charAt(p);
if(c.toUpperCase()!="R"){ // 休符でなければ
if(c==c.toLowerCase()) c=c.toUpperCase()+"5"; // 小文字ならC5-B5
else c=c+"4"; // 大文字ならC4-B4
sendNote(midiPitch[c], T*.9);
}
if(++p<notes.length) setTimeout("playNotes()", T);
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下は、「私だけの電子オルゴール 」のように「ドドソソララソー」のように楽譜を入力できるようにした例です。
表示する 9.4 オモチャのドラムの自動演奏(詳しくはこちら )
オモチャのドラムを左右2つのスティックで叩きます。左のスティックはセンタードラム(L)とサイドドラム(S)、右のスティックはセンタードラム(R)とハイハット(H)を担当し、サーボモータでそれぞれのドラム位置にスティックを移動します。
drum1.html: ドラムの自動演奏
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>ドラムの自動演奏</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>ドラムの自動演奏</h2>
<button onclick=playNotes()>演奏開始</button>
<!-- ここからプログラム -->
<script>
// -------------------------------------------------------------------------
var notes=[ // 楽譜データ[音符, ドラム]
[4,"L"],[8,"L"],[8,"R"],[4,"L"],[4,"R"],
[4,""], [4,"S"], [4,"H"]
];
// -------------------------------------------------------------------------
var TEMPO=120; // 1分間に4分音符を120回
var Td=100; // ドラムを打つ時間(100ms)...バチによって調整
var Ts=500; // サーボモーターの移動時間
var Lmotor=8, Rmotor=7, Lservo=10, Rservo=9; // モータとサーボモータのpin
var Lstick={L:150, S:80}; // ドラムの左サーボの角度(個別に調整)
var Rstick={R:0, H:60}; // ドラムの右サーボの角度(個別に調整)
var p=-1;
function setup(){ // --- はじめに自動実行 ---
}
function playNotes(){
var T, u;
if(p<0) T=Ts; // 初回は準備
else{ // 1音目からは
T=60000/TEMPO*4/notes[p][0]; // 4分音符 0.5秒, 8分音符 0.25秒
u=notes[p][1]; // L R S H
if(u.match(/L/) || u.match(/S/)) digitalWrite(Lmotor, 1, Td); // 左を叩く
if(u.match(/R/) || u.match(/H/)) digitalWrite(Rmotor, 1, Td); // 右を叩く
}
if(++p<notes.length){ // 次音の準備
u=notes[p][1];
if(u.match(/L/)) setTimeout("servo(Lservo,"+Lstick["L"]+",Ts)", T/2);
else if(u.match(/S/)) setTimeout("servo(Lservo,"+Lstick["S"]+",Ts)", T/2);
if(u.match(/R/)) setTimeout("servo(Rservo,"+Rstick["R"]+",Ts)", T/2);
else if(u.match(/H/)) setTimeout("servo(Rservo,"+Rstick["H"]+",Ts)", T/2);
setTimeout("playNotes()", T);
}else p=-1; // 演奏終了
}
</script>
<!-- ここまで -->
</body></html>
]]>
9.5 オモチャの鉄琴の自動演奏(詳しくはこちら )
オモチャの鉄琴を左右2つのスティックで叩きます。左のスティックはドレミファ(C4 D4 E4 F4)、右のスティックはソラシド(G4 A4 B4 C5)を担当し、サーボモータでそれぞれの位置にスティックを移動します。
tekkin1.html: 鉄琴の自動演奏
NeoPixel連動版
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>鉄琴の自動演奏</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>鉄琴の自動演奏</h2>
<button onclick=playNotes()>演奏開始</button>
<!-- ここからプログラム -->
<script>
// -------------------------------------------------------------------------
var notes=[ // 楽譜データ[音符, Note]
[4,"C5"], [8,"G4"],[8,"G4"],[4,"A4"],[4,"G4"],
[4,""], [4,"B4"], [4,"C5"]
];
// -------------------------------------------------------------------------
var TEMPO=120; // 1分間に4分音符を120回
var Td=80; // 鉄琴を打つ時間(80ms)...バチによって調整
var Ts=500; // サーボモーターの移動時間
var Lmotor=8, Rmotor=7, Lservo=10, Rservo=9; // モータとサーボモータのpin
var Langle={C4:10, D4:35, E4:60, F4:80}; // 鉄琴の左サーボの角度(個別に調整)
var Rangle={G4:75, A4:95, B4:120,C5:155} // 鉄琴の右サーボの角度(個別に調整)
var p=-1;
function setup(){ // --- はじめに自動実行 ---
}
function playNotes(){
var T, u;
if(p<0) T=Ts; // 初回は準備
else{ // 1音目からは
T=60000/TEMPO*4/notes[p][0]; // 4分音符 0.5秒, 8分音符 0.25秒
u=notes[p][1]; // C4 D4 ... A4 B4 C5
if(u in Langle) digitalWrite(Lmotor, 1, Td); // 左を叩く
if(u in Rangle) digitalWrite(Rmotor, 1, Td); // 右を叩く
}
if(++p<notes.length){ // 次音の準備
u=notes[p][1];
if(u in Langle) setTimeout("servo(Lservo,"+Langle[u]+",Ts)", T/2);
if(u in Rangle) setTimeout("servo(Rservo,"+Rangle[u]+",Ts)", T/2);
setTimeout("playNotes()", T);
}else p=-1; // 演奏終了
}
</script>
<!-- ここまで -->
</body></html>
]]>
9.6 みんなでセッション(詳しくはこちら )
複数の楽器で「セッション」も楽しめます。グループ学習でやってみると面白いと思います。ブラウザ画面から音が出ますので、楽器が1台でも十分楽しめます。
それぞれのパソコンのブラウザ画面で演奏開始 を押すと、「正10秒」まで待って演奏を開始します。ボタンを押すタイミングが少しずれても大丈夫です。パソコンの時刻同期の設定をきちんとしておくと時刻のズレを少なくできます(NICTのページ で確認できます)。ここではパソコン毎に多少時刻がずれていてもいいように、±1秒の範囲で調整できるようにしてあります。
session1.html: みんなでセッション(NeoPixel連動版)
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>みんなでセッション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>みんなでセッション</h2>
<button onclick=playNotes()>演奏開始</button>
<!-- ここからプログラム -->
<script>
// -----------------------------------------------------------------------------
var notes=[ // 楽譜データ[音符, Note, ドラム]
[4,"C5","LH"], [8,"G4","SH"],[8,"G4","SH"], [4,"A4","LH"], [4,"G4","SH"],
[4,"",""], [4,"B4","LR"], [4,"C5","SH"]
];
// -----------------------------------------------------------------------------
var TEMPO=120; // 1分間に4分音符を120回
var Td=80; // ドラムを打つ時間(100ms)...バチによって調整
var Ts=500; // サーボモーターの移動時間
var Lmotor=8, Rmotor=7, Lservo=10, Rservo=9; // モータとサーボモータのpin
var Lstick={L:150, S:80}; // ドラムの左サーボの角度(個別に調整)
var Rstick={R:0, H:60}; // ドラムの右サーボの角度(個別に調整)
var Langle={C4:10, D4:35, E4:60, F4:80}; // 鉄琴の左サーボの角度(個別に調整)
var Rangle={G4:75, A4:95, B4:120, C5:150} // 鉄琴の右サーボの角度(個別に調整)
var p=-1;
function setup(){ // --- はじめに自動実行 ---
pinMode(5, INPUT_PULLUP); // 鉄琴はpin5をGNDに接続する
}
function playNotes(){
var T, u;
if(p<0) T=Ts; // 初回は準備
else{ // 1音目からは
u=notes[p][1]; // C3 D3 ... C4
T=60000/TEMPO*4/notes[p][0]; // 4分音符 0.5秒, 8分音符 0.25秒
if(u){
sendNote(midiPitch[u], T*.9); // スピーカから電子音
playNote(midiPitch[u], T*.9); // ブラウザから合成音
if(digitalRead(5)==0){ // 鉄琴(pin5をGNDに接続)ならば
if(u in Langle) digitalWrite(Lmotor, 1, Td); // 左を叩く
if(u in Rangle) digitalWrite(Rmotor, 1, Td); // 右を叩く
}
}
u=notes[p][2]; // S(sidedrum) L R(centerdrum) H(hihat)
if(u.match(/L/) || u.match(/R/)) drumKick(); // ブラウザからcenterdrum音
if(u.match(/S/)) drumSnare(); // ブラウザからsidedrum音
if(u.match(/H/)) drumHihat(); // ブラウザからhihat音
if(digitalRead(5)==1){ // ドラム(pin5を解放)ならば
if(u.match(/L/) || u.match(/S/)) digitalWrite(Lmotor, 1, Td); // 左を叩く
if(u.match(/R/) || u.match(/H/)) digitalWrite(Rmotor, 1, Td); // 右を叩く
}
}
if(++p<notes.length){ // 次音の準備
if(digitalRead(5)==0){ // 鉄琴(pin5をGNDに接続)ならば
u=notes[p][1];
if(u in Langle) setTimeout("servo(Lservo,"+Langle[u]+",Ts)",T/2);
if(u in Rangle) setTimeout("servo(Rservo,"+Rangle[u]+",Ts)",T/2);
}else{ // ドラム(pin5を解放)ならば
u=notes[p][2];
if(u.match(/L/)) setTimeout("servo(Lservo,"+Lstick["L"]+",Ts)", T/2);
else if(u.match(/S/)) setTimeout("servo(Lservo,"+Lstick["S"]+",Ts)", T/2);
if(u.match(/R/)) setTimeout("servo(Rservo,"+Rstick["R"]+",Ts)", T/2);
else if(u.match(/H/)) setTimeout("servo(Rservo,"+Rstick["H"]+",Ts)", T/2);
}
setTimeout("playNotes()", T);
}else p=-1; // 演奏終了
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下は楽譜データを分けて(sample.js, akahana.js, ...)、曲を選択できるようにした例です。NeoPixelをつなぐと演奏に連動してカラフルに光ります。イルミネーションのオブジェはngo-tecさんのページ を見て作りました。「正10秒」で同期演奏できますし、「正時」に演奏させれば「からくり時計」となります。ブラウザ画面上で楽譜を入力して演奏させることもできます。詳しくは「ミニドラム・ミニ鉄琴 」のページをご覧ください。
みんなでセッション(NeoPixel連動版) 10. 合成音声でおしゃべり
10.1 コマンド操作でおしゃべり(外部デバイスの接続不要)
ブラウザの音声合成機能を用いて、おしゃべりするページを作ることができます。
<![CDATA[
talk("あいうえお")
talk("あいうえお",12)
talk("Hello, world.",1)
talk("あいうえお",0,0.1)
talk("あいうえお",0,0.1,0.5)
talk(123)
talk("準備OK")
talk(4+"かける"+5+"は"+(4*5)+"です")
]]>
<![CDATA[
デフォルトは日本語
Windows10版Chromeでは
日本語は話者番号 10, 19, 20, 21, 22
英語は話者番号 1, 2, 3
音程 0.1～2
速さ 0.1～10
]]>
10.2 プログラムでおしゃべり(外部デバイスの接続不要)
以下は、「九九」を合成音声で読み上げるプログラムです。
kuku.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>九九</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>九九</h2>
<!-- ここからプログラム -->
<script>
var a=1, b=1;
function setup(){ // --- はじめに自動実行 ---
kuku();
}
function kuku(){
$("VAL").innerHTML=a+"×"+b+"＝"+(a*b);// 画面表示
talk(a+"かける"+b+"は"+(a*b)+"です");// 合成音声で読み上げ
if(++b==10){ a++; b=1; }
if(a<10) kuku();
}
</script>
<!-- ここまで -->
</body></html>
]]>
10.3 プログラムでおしゃべり(VOCA)
以下は、外部スイッチが押されると「九九」をランダムに読み上げるプログラムです。
kukubutton.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>九九</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>九九</h2>
<!-- ここからプログラム -->
<script>
var button; // 現在のbuttonの状態
var lastbutton; // 直前のbuttonの状態
function setup(){ // --- はじめに自動実行 ---
pinMode(1,INPUT_PULLUP);// 1ピンをプルアップ入力に
}
function loop(){ // --- 20ms毎に自動実行 ---
button=digitalRead(1); // 1ピンを読みbuttonに代入
if(button!=lastbutton && button==0){// buttonが前と違いかつ0なら
var a=Math.floor(1+Math.random()*9);// aは1～9の乱数
var b=Math.floor(1+Math.random()*9);// bは1～9の乱数
$("VAL").innerHTML=a+"×"+b+"＝"+(a*b);// 画面表示
talk(a+"かける"+b+"は"+(a*b)+"です");// 合成音声で読み上げ
}
lastbutton=button; // lastbuttonを更新
}
</script>
<!-- ここまで -->
</body></html>
]]>
利用者に適したスイッチを使い、合成音声の読み上げで支援するさまざまなツール(VOCA)をWebで作ることができます。
(練習) 2個のスイッチを接続し、それぞれ「はい」「いいえ」の合成音声が出るようなVOCAを作りなさい。
11. イルミネーション
11.1 NeoPixelの利用
NeoPixelはフルカラーLEDがシリアルに連結されていて(ここでは10連LEDを使用)、1本の信号線で任意のLEDの発光をコントロールできるのが特徴です。WebIOでは、4ピンに接続した最大12連のNeoPixelをpixelコマンドで制御することができます。パラメータで、順にLEDの番号(0～11)、Redの明るさ(0～255)、Greenの明るさ(0～255)、Blueの明るさ(0～255)を指定します。
LEDの番号(0～11)と色相(0～255)と明るさ(0～255)を指定することもできます。明るさの指定を省略すると255として扱われます。
まず、コマンド操作で試してみてください。
<![CDATA[
pixel(0,50,0,0)
pixel(0,0,0,0)
pixel(0,50,0,0)
pixel(1,0,50,0)
pixel(2,0,0,50)
pixel(3,50,50,0)
pixel(4,0,50,50)
pixel(5,50,50,50)
pixel(0,0,50)
pixel(0,128,50)
pixel(0,128)
]]>
11.2 プログラムによる点滅とフラッシュ
以下のプログラムは、ひとつ目のLEDを赤で点滅させます。1秒点灯・1秒消灯をくりかえします。下図右は点滅の時間的な変化をタイムチャートで示したものです。
pixelblink1.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var led=0; // 現在の点灯状態(0で消灯 1で点灯)
function setup(){ // --- はじめに自動実行 ---
setInterval("toggle()",1000);// 1秒毎にtoggle()を実行
}
function toggle(){
led=(led==0?1:0); // ledが0なら1に、1なら0に
if(led==1) pixel(0,50,0,0); // ledが1なら点灯
else pixel(0, 0,0,0); // 0なら消灯
}
</script>
<!-- ここまで -->
</body></html>
]]>
次のようにすると10個のLEDが緑で点滅します。
pixelblink10.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var led=0; // 現在の点灯状態(0で消灯 1で点灯)
function setup(){ // --- はじめに自動実行 ---
setInterval("toggle()",1000); // 1秒毎にtoggle()を実行
}
function toggle(){
led=(led==0?1:0); // ledが0なら1に、1なら0に
for(var i=0;i<10;i++){ // iを0から9まで
if(led==1) pixel(i, 0,50,0);// ledが1なら点灯
else pixel(i, 0,0,0); // 0なら消灯
}
}
</script>
<!-- ここまで -->
</body></html>
]]>
次のようにすると明るく短時間点灯する「フラッシュ」になります。
pixelflash10.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var led=0; // 現在の点灯状態(0で消灯 1で点灯)
function setup(){ // --- はじめに自動実行 ---
setTimeout("toggle()",1000); // 1秒毎にtoggle()を実行
}
function toggle(){
led=(led==0?1:0); // ledが0なら1に、1なら0に
for(var i=0;i<10;i++){ // iを0から9まで
if(led==1) pixel(i, 0,50,0);// ledが1なら点灯
else pixel(i, 0,0,0); // 0なら消灯
}
if(led==1) setTimeout("toggle()",100);
else setTimeout("toggle()",900);
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) 10個のLEDが1秒毎に「青→黄→赤」を繰り返すプログラムを作りなさい。
11.3 ワイプ
以下のプログラムは、10個のLEDを順に点灯させます。このようなイルミネーション効果は「ワイプ」と呼ばれます。
pixelwipe.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var L=0; // 点灯するLED(0～9)
function setup(){ // --- はじめに自動実行 ---
setInterval("nextled()",1000); // 1秒毎にnextled()
}
function nextled(){
if(L==10){ // Lが10なら
for(var i=0;i<10;i++) pixel(i,0,0,0); //全消灯
L=0; // Lを0に
}else{
pixel(L,50,0,0); // LのLEDを点灯
L++; // Lを次に
}
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) 「赤のワイプ→緑のワイプ→青のワイプ」を繰り返すプログラムを作りなさい。
11.4 スイープ
以下のプログラムは、10個のLEDを順に点灯・消灯させます。
pixelsweep.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var L=0; // 点灯するLED(0～9)
function setup(){ // --- はじめに自動実行 ---
pixel(L, 50,0,0); // 0番目のLEDを点灯
setInterval("sweep()",1000);// 1秒毎にsweep()を実行
}
function sweep(){
pixel(L, 0,0,0); // L番目のLEDを消灯
if(++L==10) L=0; // Lを次に
pixel(L, 50,0,0); // L番目のLEDを点灯
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) 100ms毎にスイープするようにしてみなさい。
11.5 ウェーブ
以下のプログラムは、4個に1個の点灯がスイープし、波(ウェーブ)のように(あるいは追いかけているように)見えます。「P=3」にすると3個に1個の点灯になります。
pixelwave.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var P=4;
var j=P;
function setup(){ // --- はじめに自動実行 ---
setInterval("chase()",100); // 100ms毎にchase()を実行
}
function chase(){
for(var i=0;i<10;i++){ // iを0から9まで
if((i+j)%P==0) pixel(i, 50,0,0);
else pixel(i, 0,0,0);
}
if(--j==0) j=P;
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) 「1個おき」「3個おき」のウェーブにしてみなさい。
11.6 フェードイン・フェードアウト
以下のプログラムは、ひとつ目のLEDをだんだん明るくし(赤を0→50)、だんだん暗くし(赤を50→0)、これを繰り返します。
pixelfade.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var R=0; // R(赤)の明るさ
var r=1; // Rの変化分
function setup(){ // --- はじめに自動実行 ---
setInterval("fade()",20); // 20ms毎にfade()を実行
}
function fade(){
pixel(0, R,0,0); // 0番のLEDを明るさRに
R+=r;
if(R==50) r=-1;
else if(R==0) r=1;
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) 色を変えてみなさい。また速さを変えてみなさい。
(練習) 10個のLEDを同時にフェードイン・フェードアウトさせなさい。
11.7 クロスフェード
ひとつ目のLEDをフェードアウトしながら、ふたつ目のLEDをフェードインすると滑らかに変化させることができます。これを「クロスフェード」といいます。
pixelxfade.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var R=0; // R(赤)の明るさ
function setup(){ // --- はじめに自動実行 ---
xfade();
}
function xfade(){
pixel(0, 50-R,0,0);
pixel(1, R,0,0);
R++;
if(R<50) setTimeout("xfade()",20);
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下は、クロスフェードをスイープに応用した例で、LEDの点灯が滑らかに移動します。
pixelxsweep.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var L=0; // 点灯するLED(0～9)
var R=0; // R(赤)の明るさ
function setup(){ // --- はじめに自動実行 ---
setInterval("xsweep()",10);
}
function xsweep(){
pixel(L, 50-R,0,0);
pixel((L+1)%10, R,0,0);
R=(R+1)%50;
if(R==0) L=(L+1)%10;
}
</script>
<!-- ここまで -->
</body></html>
]]>
11.8 フルカラー表示
クロスフェードを用いると色を滑らかに変化させることができます。以下のプログラムは、ひとつ目のLEDの色が赤→緑に滑らかに変化します。
pixelxrg.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var G=0; // G(緑)の明るさ
function setup(){ // --- はじめに自動実行 ---
xrg();
}
function xrg(){
pixel(0, 50-G,G,0);
G++;
if(G<50) setTimeout("xrg()",50);
}
</script>
<!-- ここまで -->
</body></html>
]]>
RGBの値と表示色の関係は下図のようになっています。
以下のプログラムは、すべてのLEDの色をフルカラーで連続的に変化させます(明るさ最大85)。
pixelxrgb.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var W=0; // 0～255
function setup(){ // --- はじめに自動実行 ---
setInterval("xrgb()",20);
}
function xrgb(){
for(var i=0;i<10;i++) pixel(i,W,50);
W=(W+1)%256;
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下のプログラムは、すべてのLEDの色を場所を変えながらフルカラーで連続的に変化させます(明るさ最大85)。rgb()は0～255の色相Wを与えると、R,G,Bの変数に値(各々0～85)がセットされます。
pixelrgb.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var j=0;
function setup(){ // --- はじめに自動実行 ---
setInterval("rgb()",10);
}
function rgb(){
for(var i=0;i<10;i++) pixel(i,(i*256/10+j)%256,50);
j=(j+8)%256;
}
</script>
<!-- ここまで -->
</body></html>
]]>
11.9 イルミネーションの例
(1) ドロップ
以下は、「ドロップ」のイルミネーションの作例です。水滴が滴り落ちるイメージで、最後にキラッと光ります。
pixeldrop.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var S=0; // 0:休止
var N; // ドロップの長さ
var led; // LEDの番号
var b=0; // 明るさ
var u; // 最大の明るさ
function loop(){
if(S==0){ // 休止
N=6+Math.floor(Math.random()*5);//ドロップ長(ランダムに6～10)
led=0; // ledは0から
b=0; // 明るさbは0から
u=(led+1)*10 // uは最大の明るさ
S=1; setTimeout("S=2",Math.random()*2000);
}else if(S==2){ // ドロップ
pixel(led, u-b,u-b,u-b);// ledをu-bの明るさ(だんだん暗く)
pixel((led+1)%10,b,b,b);// led+1をbの明るさ(だんだん明るく)
b=(b+1)%u;
if(b==0){
led++;
if(led==N-1){ S=3; b=u;}
}
}else if(S==3){ // 明るさbを最大までだんだん明るく(キラリ)
if((b+=4)>255){S=4; b=255;}
pixel(N-1,b,b,b);
}else if(S==4){ // 明るさbを0までだんだん暗く
if((b-=4)<0){ S=0; b=0;}
pixel(N-1,b,b,b);
}
}
</script>
<!-- ここまで -->
</body></html>
]]>
(2) イルミネーションオブジェ
以下は、NeoPixelリング(12個)を使い、ランダムに点灯させるようにした例です。オブジェの作り方はngo-tecさんのページ を参考にしました(クッキングシートを使ってみました)。点灯位置と点灯色と点灯時間間隔をランダムにし、点灯後はだんだん暗くしています。
pixelfire.html: 表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>イルミネーション</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>イルミネーション</h2>
<!-- ここからプログラム -->
<script>
var brightness=[], color=[]; // NeoPixelの明るさと色
function setup(){ // --- はじめに自動実行 ---
for(var i=0;i<NPIXEL;i++){ // すべて消す
brightness[i]=0;
pixel(i, 0,0);
}
setInterval("decayPixel()", 50); // NeoPixelを50ms毎に減衰
fire();
}
function decayPixel(){ // 明るさを減衰
for(i=0;i<NPIXEL;i++)if(brightness[i]>0){
brightness[i]=Math.floor(brightness[i]*.95);
pixel(i, color[i], brightness[i]);
}
}
function fire(){
var p=Math.floor(Math.random()*NPIXEL); // 場所はランダムに
brightness[p]=255; // 明るさ最大で
color[p]=Math.random()*256; // 色はランダムに
setTimeout("fire()",(Math.random()+Math.random())*1000); // 0～2秒後にfire()
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) オリジナルのイルミネーションを考え、作ってみなさい。
13. 動くものを作る
13.1 サーボモータを動かす
ラジコン用のサーボモーターは、右図のようなPWM波形で角度(0～180°)を制御するように作られています。
以下の例は、サーボモーターが車のワイパーのように動きます。
sweep.html:表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>サーボモーター</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>サーボモーター</h2>
<!-- ここからプログラム -->
<script>
var angle=0; // 角度(0～180)
var d=1; // angleの変化分
function setup(){ // --- はじめに自動実行 ---
pinMode(D9,OUTPUT); // D9ピンを出力に
}
function loop(){ // --- 20ms毎に自動実行 ---
servo(9, angle);
angle=angle+d;
if(angle>=180) d=-1;
else if(angle==0) d=1;
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下のプログラムは、ボリュームの値によってサーボモーターの位置(角度)が変わります。
knob.html:表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>サーボモーター</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>サーボモーター</h2>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(D9,OUTPUT); // D9ピンを出力に
}
function loop(){ // --- 20ms毎に自動実行 ---
var angle=analogRead(A0)*180/1024; // 角度(0～180)
servo(D9, angle);
}
</script>
<!-- ここまで -->
</body></html>
]]>
(練習) 上記のknob.htmlでボリュームの代わりに明るさセンサーを使い、明るさで位置が変わるようにしなさい。
13.2 モーターを動かす
下図のようにモーターを接続します。まず、motorコマンドでモーターを動かしてみてください。左右のモーターの速度は-256～255で指定します。電源への負荷を軽減するために、早さを変える場合は一旦停止させてください。
<![CDATA[
motor(100,100)
motor(0,0)
motor(100,50)
motor(0,0)
motor(-100,-100)
motor(0,0)
]]>
13.3 ブラウザ画面からモーターを制御する
以下はブラウザに表示されたスライダを操作することによってモーターの回転速度が変わります。
motorslider.html:表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>モーターの制御</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示とプログラム -->
<h2 align=center>モーターの制御</h2>
<input type=range style="width:300px"
onchange=motor(this.value, this.value)
value=0 min=0 max=255 step=1>
<!-- ここまで -->
</body></html>
]]>
以下は、ブラウザ画面のボタン操作で前後左右に動かします。
motorbutton.html:表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>モーターの制御</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示とプログラム -->
<h2 align=center>モーターの制御</h2>
<center><table>
<tr><td></td>
<td><button onclick=motor(255,255)>前進</button></td>
<td></td></tr>
<tr><td><button onclick=motor(50,255)>左回転</button></td>
<td><button onclick=motor(0,0)>停止</button></td>
<td><button onclick=motor(255,50)>右回転</button></td></tr>
<tr><td></td>
<td><button onclick=motor(-255,-255)>後退</button></td>
<td></td></tr>
</table></center>
<!-- ここまで -->
</body></html>
]]>
13.4 ボリュームでモーターを制御する
以下はボリュームの値によってモーターの回転速度が変わります。
motorvr.html:表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>モーターの制御</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>モーターの制御</h2>
<!-- ここからプログラム -->
<script>
function loop(){ // --- 20ms毎に自動実行 ---
var speed=analogRead(A0)*180/1024; // 角度(0～180)
motor(speed,speed);
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下は音センサモジュールと組み合わせた例で、手を叩く(A0に接続した音センサーが400以上)と1秒間前進します。
motorsound.html:表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>モーターの制御</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>モーターの制御</h2>
<!-- ここからプログラム -->
<script>
var S=0; // モーターの状態(0:停止 1:回転)
function setup(){ // --- はじめに自動実行 ---
pinMode(A0,ANALOG_INPUT); // A0をアナログ入力に
}
function loop(){ // --- 20ms毎に自動実行 ---
if(S==0 && analogRead(A0)>=400){
motor(255,255); S=1;
setTimeout("motor(0,0);S=0",1000);
}
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下の例は、車の先端がテーブルから落ちそう(A0に接続した赤外線反射センサーが30以上)になると、少し後退し、右回転して、再び前進します。
motorir.html:表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>モーターの制御</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<h2 align=center>モーターの制御</h2>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
}
function loop(){ // --- 20ms毎に自動実行 ---
var angle=analogRead(A0)*180/1024; // 角度(0～180)
servo(8, angle);
}
</script>
<!-- ここまで -->
</body></html>
]]>
14 押しボタン信号機
イルミネーションの時と同じLEDを使い、押しボタン信号機を作ってみます。下図の状態遷移図で考え、LEDの割り当ては
0:車赤 1:車黄 2:車青 ... 8:歩赤 9:歩青
とします。LEDと連動して、ブラウザ画面も変化するようにしました。また、押しボタンの操作は画面上の押す でも同じように動作します。
signal.html:表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>押しボタン信号機</title>
<script src=webio.js></script>
<style>td{font-size:32pt}</style>
</head><body>
<!-- ここから画面表示 -->
<center><table>
<tr><th>自動車</th><th>歩行者</th></tr>
<tr><td align=center width=60>
<span id=R>●</span><br><span id=Y>●</span><br><span id=B>●</span>
</td><td align=center valign=bottom width=60>
<span id=RR>■</span><br><span id=BB>■</span>
</th></tr>
<tr><th></th>
<th><button onclick="S=1;timer(4000);">押す</button></th></tr>
</table></center>
<!-- ここからプログラム -->
<script>
var S; // 現在の状態
var TOUT; // タイムアウトフラグ
var C; // 歩青点滅用カウンタ
function signal(c1, c2){
if(c1=="赤"){
pixel(0,50,0,0); $("R").style.color="orangered";
pixel(1,0,0,0); $("Y").style.color="darkgoldenrod";
pixel(2,0,0,0); $("B").style.color="darkblue";
}else if(c1=="黄"){
pixel(0,0,0,0); $("R").style.color="darkred";
pixel(1,50,50,0);$("Y").style.color="gold";
pixel(2,0,0,0); $("B").style.color="darkblue";
}else if(c1=="青"){
pixel(0,0,0,0); $("R").style.color="darkred";
pixel(1,0,0,0); $("Y").style.color="darkgoldenrod";
pixel(2,0,0,50); $("B").style.color="aqua";
}
if(c2=="赤"){
pixel(8,50,0,0); $("RR").style.color="orangered";
pixel(9,0,0,0); $("BB").style.color="darkblue";
}else if(c2=="青"){
pixel(8,0,0,0); $("RR").style.color="darkred";
pixel(9,0,0,50); $("BB").style.color="aqua";
}else if(c2=="消"){
pixel(8,0,0,0); $("RR").style.color="darkred";
pixel(9,0,0,0); $("BB").style.color="darkblue";
}
}
function setup(){ // --- はじめに自動実行 ---
pinMode(D1,INPUT_PULLUP);// D1ピンはプルアップ入力
for(var i=0;i<10;i++) pixel(i, 0,0,0); // はじめに全消灯
signal("青", "赤"); // 車青・歩赤
S=0;
}
function timer(t){TOUT=false; setTimeout("TOUT=true",t);}
function loop(){ // --- 20ms毎に自動実行 ---
if(S==0 && digitalRead(1)==0){ // ボタンが押されたら
S=1; timer(4000); // S=1
}else if(S==1 && TOUT){ // 4秒後に
S=2; signal("黄","赤"); timer(4000); // S=2 車黄・歩赤
}else if(S==2 && TOUT){ // 4秒後に
S=3; signal("赤","赤"); timer(2000); // S=3 車赤・歩赤
}else if(S==3 && TOUT){ // 2秒後に
S=4; signal("赤","青"); timer(16000); // S=4 車赤・歩青
}else if(S==4 && TOUT){ // 16秒後に
S=5; signal("赤","青"); timer(500);C=0;// S=5 車赤・歩青
}else if(S==5 && TOUT){ // 0.5秒後に
if(C%2==0) signal("赤","青"); // 車赤・歩青点滅
else signal("赤","消");
C++;
if(C>=16){ // S=6 車赤・歩赤
S=6; signal("赤","赤"); timer(4000);
}else timer(500);
}else if(S==6 && TOUT){ // 4秒後に
S=0; signal("青","赤"); // S0 車青・歩赤
}
}
</script>
<!-- ここまで -->
</body></html>
]]>
また、以下は小学校などで利用されている「交通安全教室用信号機 」ですが、上記と組み合わせればWebページと連動した指導ができるようになるかもしれません。
15. さまざまな例
15.1 温湿度計
以下は、デジタル温湿度センサSHT31を使った温湿度計です。TEMPとHUMIは特別なアナログ入力ピンでA0やA1と同じように使います。
thermometer.html:表示する
<![CDATA[
<!DOCTYPE html><html lang="ja"><head>
<meta charset="utf-8">
<title>温湿度計</title>
<script src=webio.js></script>
</head><body>
<!-- ここから画面表示 -->
<div id=TEMP style='font-size:80pt'></div>
<div id=HUMI style='font-size:80pt'></div>
<!-- ここからプログラム -->
<script>
function setup(){ // --- はじめに自動実行 ---
pinMode(TEMP,ANALOG_INPUT); // TEMPをアナログ入力に
pinMode(HUMI,ANALOG_INPUT); // HUMIをアナログ入力に
setInterval("measure()",1000);
}
function measure(){
$("TEMP").innerHTML=analogRead(TEMP)+"<small>℃</small>";
$("HUMI").innerHTML=analogRead(HUMI)+"<small>%RH</small>";
}
</script>
<!-- ここまで -->
</body></html>
]]>
以下は、グラフ表示など多目的に使えるようにした例です。データは使用するパソコンのブラウザに保存され、そのデータをネットワーク経由で見ることはできません。理科や保健の授業などで利用できるかもしれません。ネットワークを利用した気温・湿度・熱中症指数(WBGT)・CO2モニタリングシステムはこちら をご覧ください。
表示する
15.2 WebIOの動作テスト
下図のように、WebIOの動作を確かめるページを作りました。プログラムをクッキーに保存することもできます。
表示する
(付録1) 入出力モジュール
ブレッドボードで利用できる入出力モジュールの製作例です。
モジュール 回路図 製作例 可変抵抗モジュール 明るさセンサーモジュール 赤外線反射モジュール 音量センサーモジュール 10連LEDモジュール in はpin10に接続)モーターモジュール 右モーターはA0とA1をGNDに接続
(付録2) 使用する主な部品
(付録3) WebIOの主な仕様
(1) ProMicroで使用できるピン
ピン 定義した変数名 備考
デジタル入出力 アナログ入力 0 D0 - TX(midi Out) 1 D1 - RX(midi In) 2 D2 - I2 C SDA 3 D3 # - I2 C SCL 4 D4 - NeoPixel 5 D5 # - 6 D6 # A7 Bzz...sendNote()に対応 7 D7 - 8 D8 - 9 D9 # - Servo 10 D10 # - Servo 14 D14 - MISO 15 D15 - SCK 16 D16 - MOSI 18 D18 A0 19 D19 A1 20 D20 A2 21 D21 A3 22(仮想ピン) - TEMP SHT31 温度 23(仮想ピン) - HUMI SHT31 湿度 24(仮想ピン) - CO2 CDM7160 CO2濃度 設定値または取得値 0 / 1 0 - 1023
(2) 組み込み定数(拡張分)
定数名 内容 HIGH, LOW デジタル出力またはデジタル入力されたピンの状態(HIGHは1、LOWは0) OUTPUT pinMode()で設定する入出力のモード D0～D10, D14～D16, D18～D21 デジタル入出力ピンおよびアナログ出力ピン A0～A3, A7 アナログ入力ピン TEMP, HUMI, CO2 I2C接続したSHT31, SCD30, CDM7160の測定値を入力する仮想ピン
(3) 組み込み関数(拡張分)
関数名 内容 pinMode(pin, mode) pinをmodeにする(modeはOUTPUT, INPUT, INPUT_PULLUP, ANALOG_INPUT, OUTPUT_TONE, OUTPUT_NEOPIXEL) digitalRead(pin) pinの値を読んでHIGHまたはLOWの値を返す digitalWrite(pin, HIGH) pinにHIGHを出力する(値はHIGHまたはLOW) analogRead(A0) A0, A1, A2, A3, A7ピンのアナログ値を読み、0～1023の値を返す。 analogWrite(pin, value) pin(3,5,6,9,10,11のいずれか)にvalue(0～255)を出力する sendNote(key, t) ピン6にkeyのブザー音をt[ms]出力する playNote(key, t) ブラウザからkeyの合成音をt[ms]出力する drumKick(key, t) ブラウザからドラムの合成音を出力する talk(s)
ブラウザの合成音声でsを読み上げる(声はHaruka) servo(pin, pos) pinに接続したサーボの角度をpos(0～180)にする(pinは9と10を推奨) motor(lspeed, rspeed) 左右のモーターの速度をlspeed, rspeed(それぞれ-255～255)にする pixel(i, r,g,b)
NeoPixelのi番目のLEDをr,g,bにする(それぞれ0～255)。 $(id) document.getElementById(id)の短縮表現
上記とは別に、以下の関数をプログラム中に定義すると特別な役割を果たします。
関数名 内容 setup() ページが表示された時にこの関数が呼び出される loop() 20ms毎にこの関数が呼び出される
(付録4) Midiコマンドとの対応
機能 send(PC → I/O) receive(I/O → PC) JavaScript関数 備考
byte1 byte2 byte3 byte1 byte2 byte3
8x [midi] NoteOff
1000nnnn 0kkkkkkk 0vvvvvvv 1000nnnn 0kkkkkkk 0vvvvvvv
ピン6の音を停止 9x [midi] NoteOn
1001nnnn 0kkkkkkk 0vvvvvvv 1001nnnn 0kkkkkkk 0vvvvvvv
sendNote(key, t) ピン6にkey0-125のブザー音をt[ms]出力 Ax [midi] Pressure
1010nnnn 0kkkkkkk 0vvvvvvv NeoPixel
1010nnnn 0rgbllll 0rrrrrrr Pixel(LED, R,G,B) LED0-15の色をR(0-255)G(0-255)B(0-255)にする
1010nnnn 0ggggggg 0bbbbbbb
analogIn
1010nnnn 0vvvvvaa 0vvvvvvv
analogRead(pin) A4(22),A5(23),A6(24)の値0-4095を返す(20ms毎に更新) Bx [midi] Control Change
1011nnnn 0ccccccc 0vvvvvvv PinMode
1011nnnn 011100pp 0pppmmmm pinMode(pin, mode) pin0-21のpinModeをmode0-13にする DigitalOut
1011nnnn 011100pp 0ppp111v digitalWrite(pin, val) pin0-21を0/1にする DigitalIn
1011nnnn 011100pp 0ppp111v
digitalRead(ch, pin) pin0-21の値0/1を返す(20ms毎に更新) Set Channel
1011nnnn 01110100 00000000 setCh(ch) Character IO
1011nnnn 01110101 0ccccccc 1011nnnn 01110101 0ccccccc
sendChar(char) 文字0-127を送る ([midi] Program Change)
1011nnnn 01111111 0ppppppp setVoice(ch, voice) ch0-15を音源0-127にする Reset
1011nnnn 01111001 00000000 reset() Reset All Control
AllNoteOff
1011nnnn 01111011 00000000 All Note Off
Cx [midi] Program Change
1100nnnn 0ppppppp Dx [midi] Pressure
1101nnnn 0vvvvvvv Ex [midi] Pitch Bend
1110nnnn 0lllllll 0mmmmmmm Servo
1110nnnn 00vppppp 0vvvvvvv servo(pin, val) pin0-21のサーボモーターを0-180にする Motor
1110nnnn 00v1111p 0vvvvvvv
motor(lspeed, rspeed) 左モーター(pin30) 右モーター(pin31)のスピードを -128～127 にする analogOut
1110nnnn 01vppppp 0vvvvvvv
analogWrite(pin, val) pin3,5,6,9,10を0-255にする analogIn
1110nnnn 00vvvaaa 0vvvvvvv
analogRead(pin) A0(18),A1(19),A7(6)の値0-1023を返す(20ms毎に更新) Fx [midi] SysEx
1111xxxx
(以下はメモ)
WebMidiAPIによるArduino Micro の接続
Arduino NANO / Pro Micro / Davinci / XIAO のピン接続
Arduino
備考
D0/TX
MidiOut
D1/RX
MidiIn / SW
D2
D3#
D4
D5#
D6#
D7
D8
D9#
Servo / LED / Tone
D10#
Servo / NeoPixel
D11#/MOSI
D12/MISO
D13/SCK
D14/A0
AnalogIn
D15/A1
D16/A2
D17/A3
D18/A4/SDA
I2C
D19/A5/SCL
I2C
A6
A7
Pro micro
Leonardo
備考
D0/TX
D0/TX
MidiOut
D1/RX
D1/RX
MidiIn / SW
D2/SDA
D2/SDA
I2C
D3#/SCL
D3#/SCL
I2C
D4
D4
D5#
D5#
D6#/A7
D6#/A7
D7
D7
D8/A8
D8/A8
D9#/A9
D9#/A9
Servo / LED / Tone
D10#
D10#
Servo / NeoPixel
-
D11#/A11
-
D12
-
D13#
D14/MISO
-
D15/SCK
D15/SCK
D16/MOSI
D16/MOSI
-
D17/SS
D18/A0
D18/A0
AnalogIn
D19/A1
D19/A1
D20/A2
D20/A2
D21/A3
D21/A3
-
D22/A4 TEMP(仮想ピン)
-
D23/A5 HUMI(仮想ピン)
Seeeduino
備考
D0/DAC0/A0
AnalogIn
D1#/A1
SW
D2#/A2
D3#/A3
D4#/A4/SDA
I2C
D5#/A5/SCL
I2C
D6# /A6/TX
MidiOut (Pythonは#不可)
D7#/A7/RX
MidiIn
D8#/A8 /SCK
D9#/A9 /MISO
Servo / LED / Tone
D10#/A10 /MOSI
Servo / NeoPixel
<
