|
WebIO は、MIDI通信を用いてブラウザからIO制御する仕組みです。詳しくはこちらをご覧ください。
ここでは下図左のブレッドボード(EIC-301)を使います。ボードの内部は下図右のように接続されています。
(外観) | (内部の接続) |
---|---|
ブレッドボードにXIAOを差し込み、GNDと3V3の端子を図のように接続します。USBケーブルをパソコンに接続すると、電源(3.3V)がパソコンから供給されます。XIAOに見やすいラベルを貼っておくことをお勧めします(テプラファイル)。
(回路図) | (実体配線図) |
---|---|
初めてブレッドボードを使う場合は、練習としてLEDと抵抗を下図左のように接続して点灯を確認しましょう。電源はパソコンからUSB端子を通じて供給され、電流の流れは下図右のようになります。ブレッドボードの内部の結線も含めて「電流が流れる経路」を意識することが重要です。
(回路図) | (実体配線図) | (電流の流れ) |
---|---|---|
(練習) ブレッドボードで下記の回路を組み立て、スイッチを押すとLEDが点灯することを確認しなさい。
上のzipファイルをダウンロードして解凍してください。
上のコマンド入力欄にJavaScriptの命令文を入力し、実行ボタンを押すかEnterキーを押すと、その命令が実行されます。次のように入力してみてください。
|
これは、「100をアラート表示しなさい」というJavaScriptの「命令」を表しています。
以下のふたつめの例では文字列と数値((100+200)の演算結果)の連接演算(+)になっていて、数値(演算結果)が文字列に変換されて文字列の連接演算が行われます。
|
ここから以降は、WebIOのプログラムを書き込んだSeeeduino XIAOを接続し、ブラウザはChromeまたはEdgeを使って行ってください。
以下の回路を組み立ててください。
(回路図) | (実体配線図) |
---|---|
LEDはD9ピンに接続します。「digitalWrite」というコマンドでD9ピンに高い電圧を出力したり低い電圧を出力したりすることができます。上のコマンド入力欄に
|
|
LEDが点灯する時の電流の流れは下図のようになります。下図中のスイッチをJavaScriptの命令で切り替えていると考えるといいでしょう。
なお、「digitalWrite()」や「D9」や「HIGH」「LOW」はwebio2.jsの中で定義されています。
(練習)「digitalWrite(D9,1)」および「digitalWrite(D9,0)」を実行した時のD9ピンの電圧を、テスターで測りなさい。
(練習)LEDを他のピンにつなぎ替えて、点灯・消灯してみなさい。
プログラムのはじめの一歩は「Lチカ」です。以下のWebページを作成し、ブラウザで表示してください。冒頭の5行はWebページの常套句で、その先がWebページの本体とプログラムになります。
Webページは単に「LEDの点滅」と表示するだけです。「<script>」と「</script>」の間がJavaScriptプログラムになります。
プログラムは、はじめに広域変数としてledの値を0にしています。ledはLEDの点灯状態(0で消灯状態、1で点灯状態)を表しています。次にsetup()とtoggle()の2つの関数を定義しています。
ここで、「setup()」は特別な関数の名前になっていて、MIDIデバイス(マイコン)が認識された時にこの関数が実行されます。そこでは、まず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:
|
画面上のボタンが押されるとプログラムが実行される例です。「<button>点灯</button>」でのようにボタンが表示されます。このボタンを押した時にプログラムが実行されるようにするには「<button onclick=プログラム>点灯</button>」のように書きます。
以下の例では「点灯」ボタンが押されると「digitalWrite(D9,1)」が呼び出されます。
led1.html:
|
下図左のようにD2ピンにスイッチを接続し、「pinMode(D2,INPUT_PULLUP)」とすると、下図右のようにマイコンに内蔵された抵抗が有効になります。すると、D2ピンはスイッチをオンにすると低い電圧(0V)になり、スイッチをオフにすると高い電圧(3.3V)になります。この抵抗を「プルアップ抵抗」といいます。「高い電圧に引っ張り上げる抵抗」というような意味です。
スイッチを接続 |
プルアップ抵抗 |
コマンド入力欄を使い、D2ピンをプルアップ入力に設定した後、D2ピンが高い電圧(1)か低い電圧(0)かをアラート表示してみましょう。
|
(練習) D2ピンに接続したスイッチを押した時と放した時のスイッチ両端の電圧を、テスターで測りなさい。
(練習) スイッチを押した時と放した時の「alert(digitalRead(D2))」の結果を確かめなさい。
以下のプログラムはスイッチの状態をデジタル値としてブラウザ画面に数字で表示します。スイッチを押すと表示が変わります。
button1.html:
|
以下は、ブラウザ画面への表示に加え、LEDの点灯・消灯も行うようにしたプログラムです。
button2.html:
|
(練習) スイッチを押した時にLEDが点灯しブラウザ画面に「ON」が表示され、スイッチを放した時にLEDが消灯しブラウザ画面に「OFF」が表示されるようにしなさい。
以下のプログラムは、スイッチを押すと交互にLEDが点灯・消灯します。考え方は、「スイッチが押された瞬間に(つまりさっき押されていなくて今押されたら)LED表示を反転する」というものです。buttonには「今のスイッチの状態(0または1)」、lastbuttonには「さっきのスイッチの状態(0または1)」、変数ledには「今のLEDの点灯状態(1が点灯、0が消灯)」を保存します。
まず現在のD2ピンの状態(1または0)を読み取り、buttonに入れます。そして、スイッチがさっきまで押されていなくて今押されているならledの値を0なら1、1なら0にします。その後、D9ピン(LED)にledの値を出力し、今のスイッチの状態を記憶します。
button3.html:
|
(練習) 緑色LEDを増設し、スイッチを押すと赤色LEDと緑色LEDが交互に点灯するようにしなさい。
以下のプログラムは、スイッチ操作4回に一度LEDが点灯します。
スイッチが押されると、Cにスイッチが押された回数を記憶します。つまり、スイッチがさっきまで押されていなくて今押されたならCの値に1を加えます。その後、「C%4==0」つまりCの値を4で割った余りが0であればLEDを点灯し、そうでなければLEDを消灯します。最後に、今のスイッチの状態を記憶します。
button4.html:
|
(練習) 「C%4==0」の箇所を「C%7==0」や「C%4!=0」などに変えて、どのような動作になるか調べなさい。
(練習) 2個の押しボタンスイッチを使い、一方のスイッチを押すとLEDが点灯し、もう一方のスイッチを押すと消灯するようにしなさい。
はじめに、コマンド入力でLEDの明るさを変えてみます。analogWrite(ピン,値)は、指定したピンに0~255のアナログ値を出力します。0~255の値に応じて電圧(0~3.3V)ピンの電圧は0~3.3Vになります。
|
以下の例ではWeb画面上のスライダーでLEDの明るさをコントロールします。「<input type=range ...>」の箇所でスライダーの表示を指示していて、「value=0」は初期値を0、「min=0 max=255 step=1」はスライダーの返す値を0~255で1きざみにする指示です。また、「onchange=...」の箇所にスライダーの値が変化した時に呼び出すプログラムを書いています。
slider.html:
|
下図左のようにA1ピンにボリュームを接続すると、ボリュームの操作に応じてA1ピンの電圧は0~3.3Vに変化します。analogRead(A1)は、A1ピンの電圧(0~3.3V)に応じて0~1023の値を返します。
コマンド入力欄を使い、をanalogRead(A1)でA1ピンの値を読み取り、アラート表示してみましょう。
|
(練習) ボリュームを操作し、A1ピンの電圧がどの範囲で変化するか、テスターで測りなさい。
(練習) ボリュームを操作し、「alert(analogRead(3))」の結果を確かめなさい。
以下のプログラムはA1ピンの電圧値を0~1023の値としてブラウザ画面に表示します。
analog.html:
|
以下のプログラムは読み取ったアナログ値をブラウザにバーグラフで表示します。
bargraph.html:
|
analogRead(A1)は、A1ピンの電圧(0~3.3V)に応じて0~1023の値をとります。以下のプログラムはこれを利用し、ボリュームの値に応じてLEDの点滅時間が変化します。
analogblink.html:
|
以下のプログラムは、ボリュームのアナログ値(0~1023)が400未満の時にLEDを点灯します。
autolight.html:
|
この章はありません。
この章はありません。
押しボタンスイッチやスライドスイッチは、操作用のスイッチですが、センサーとしても活躍しています。例えば、CD/DVDデッキやコピー機やプリンタなど動きを伴う機器には、所定の位置に来たがどうかを検知するために、マイクロスイッチが必ずといっていいほど使われています。このような使われ方をするスイッチを「リミットスイッチ」と呼ぶこともあります。
ふたつの金属片を接触させるだけでスイッチ(センサー)となるので、オリジナルのスイッチを作ることも難しくはありません。所定の水位になったかどうかを検知するピンポン球を使った浮力スイッチ、傾けると金属ボールが移動する傾斜スイッチなど、用途に応じて工夫するのも楽しいでしょう。
5.2のボリュームの代わりに明るさセンサー(CDS)をつないでみましょう。明るくなるほどCDSの抵抗値が低くなり、A1ピンの電圧は高くなります。プログラムは5.2と同様です。
analog.html:
|
以下のプログラムは読み取ったアナログ値をブラウザにバーグラフで表示します。
bargraph.html:
|
街路灯は、暗くなると点灯します。以下のプログラムは、明るさの値が400未満の時にLEDを点灯します。プログラムは5.4と同じです。ただし、明るさの閾値「400」の値は適切な値に変更する必要があります。
autolight.html:
|
街路灯では、境界値付近でledが点灯したり消灯したり不安定になるのを避けるために、下図のような「ヒステリシス特性」を持たせます。
hysteresis.html:
|
(練習) ヒステリシス特性の効果を確かめなさい。また、400と500の値を変えて、適切な値をみつけなさい。
以下のプログラムは音量をバーグラフで表示します。5.3と同じプログラムです。
bargraph.html:
|
以下のプログラムは、音を検知したらLEDを3秒点灯するものです。
sound3.html:
|
(練習) 手をたたくとカウントアップしブラウザに回数を表示するプログラムを作りなさい。
赤外線の反射光で数mm程度の距離に反射物を検知するセンサーです。モーターカーと組み合わせると、ライントレースや衝突回避などが可能になります。以下のプログラムは5.2と同じものです。センサを接続して、analogRead(A1)でどの程度の値が返されるかがわかります。
analog.html:
|
初めに「pinMode(D9,OUTPUT_TONE)」のように、ブザーを接続するピンを指定します。その後、「sendNote(key,長さ)」で指定したkeyの音を出すことができます。D9ピンにブザーを接続し、以下の操作で確認してください。
|
keyはmidiのノート番号(21~108)または文字列("A0"~"C8")で指定します。また、長さは[ms]で指定します。長さを省略すると300[ms]となります。
sendNote()ではなくplayNote()を使うと、ブラウザから音を出すことができます。以下の操作で確認してください。
|
ブラウザからドラム音を出すこともできます。
|
以下は、簡単な演奏プログラムで、D9ピンに接続したブザーから音が出ます。midi音源を接続しても動作します。Javascriptにはdelay()という関数がないため、setTimeout()で次の音に進みます。
sendnotes.html:
|
以下は、ブラウザで演奏するプログラムです。
playnotes.html:
|
以下は、楽譜データを参照しながら演奏するプログラムです。楽譜データがプログラムと分離されているので、長い曲も表しやすくなっています。midi音源を接続しても動作します。
midimelody.html:
|
楽譜はさまざまな方法で表現することができます。以下は、少し長い曲を演奏するプログラムです。
playmidi.html:
|
以下は、「私だけの電子オルゴール」のように「ドドソソララソー」のように楽譜を入力できるようにした例です。
オモチャのドラムを左右2つのスティックで叩きます。左のスティックはセンタードラム(L)とサイドドラム(S)、右のスティックはセンタードラム(R)とハイハット(H)を担当し、サーボモータでそれぞれのドラム位置にスティックを移動します。
drum1.html:
|
|
オモチャの鉄琴を左右2つのスティックで叩きます。左のスティックはドレミファ(C4 D4 E4 F4)、右のスティックはソラシド(G4 A4 B4 C5)を担当し、サーボモータでそれぞれの位置にスティックを移動します。
tekkin1.html:
|
|
複数の楽器で「セッション」も楽しめます。グループ学習でやってみると面白いと思います。ブラウザ画面から音が出ますので、楽器が1台でも十分楽しめます。
それぞれのパソコンのブラウザ画面でを押すと、「正10秒」まで待って演奏を開始します。ボタンを押すタイミングが少しずれても大丈夫です。パソコンの時刻同期の設定をきちんとしておくと時刻のズレを少なくできます(NICTのページで確認できます)。ここではパソコン毎に多少時刻がずれていてもいいように、±1秒の範囲で調整できるようにしてあります。
session1.html:
|
|
以下は楽譜データを分けて(sample.js, akahana.js, ...)、曲を選択できるようにした例です。NeoPixelをつなぐと演奏に連動してカラフルに光ります。イルミネーションのオブジェはngo-tecさんのページを見て作りました。「正10秒」で同期演奏できますし、「正時」に演奏させれば「からくり時計」となります。ブラウザ画面上で楽譜を入力して演奏させることもできます。詳しくは「ミニドラム・ミニ鉄琴」のページをご覧ください。
|
ブラウザの音声合成機能を用いて、おしゃべりするページを作ることができます。
|
|
以下は、「九九」を合成音声で読み上げるプログラムです。
kuku.html:
|
以下は、外部スイッチが押されると「九九」をランダムに読み上げるプログラムです。
kukubutton.html:
|
利用者に適したスイッチを使い、合成音声の読み上げで支援するさまざまなツール(VOCA)をWebで作ることができます。
(練習) 2個のスイッチを接続し、それぞれ「はい」「いいえ」の合成音声が出るようなVOCAを作りなさい。
NeoPixelはフルカラーLEDがシリアルに連結されていて(ここでは10連LEDを使用)、1本の信号線で任意のLEDの発光をコントロールできるのが特徴です。
初めに「pinMode(D10,OUTPUT_NEOPIXEL)」のように、NeoPixelを接続するピンを指定します。その後、「pixel(...)」でLEDの点灯をコントロールできます。パラメータは、順にLEDの番号(0~11)、Redの明るさ(0~255)、Greenの明るさ(0~255)、Blueの明るさ(0~255)を指定します。D10ピンにNeoPixelを接続し、以下の操作で確認してください。
LEDの番号(0~11)と色相(0~255)と明るさ(0~255)を指定することもできます。明るさの指定を省略すると255として扱われます。
まず、コマンド操作で試してみてください。
|
以下のプログラムは、ひとつ目のLEDを赤で点滅させます。1秒点灯・1秒消灯をくりかえします。下図右は点滅の時間的な変化をタイムチャートで示したものです。
pixelblink1.html:
|
次のようにすると10個のLEDが緑で点滅します。
pixelblink10.html:
|
次のようにすると明るく短時間点灯する「フラッシュ」になります。
pixelflash10.html:
|
(練習) 10個のLEDが1秒毎に「青→黄→赤」を繰り返すプログラムを作りなさい。
以下のプログラムは、10個のLEDを順に点灯させます。このようなイルミネーション効果は「ワイプ」と呼ばれます。
pixelwipe.html:
|
(練習) 「赤のワイプ→緑のワイプ→青のワイプ」を繰り返すプログラムを作りなさい。
以下のプログラムは、10個のLEDを順に点灯・消灯させます。
pixelsweep.html:
|
(練習) 100ms毎にスイープするようにしてみなさい。
以下のプログラムは、4個に1個の点灯がスイープし、波(ウェーブ)のように(あるいは追いかけているように)見えます。「P=3」にすると3個に1個の点灯になります。
pixelwave.html:
|
(練習) 「1個おき」「3個おき」のウェーブにしてみなさい。
以下のプログラムは、ひとつ目のLEDをだんだん明るくし(赤を0→50)、だんだん暗くし(赤を50→0)、これを繰り返します。
pixelfade.html:
|
(練習) 色を変えてみなさい。また速さを変えてみなさい。
(練習) 10個のLEDを同時にフェードイン・フェードアウトさせなさい。
ひとつ目のLEDをフェードアウトしながら、ふたつ目のLEDをフェードインすると滑らかに変化させることができます。これを「クロスフェード」といいます。
pixelxfade.html:
|
以下は、クロスフェードをスイープに応用した例で、LEDの点灯が滑らかに移動します。
pixelxsweep.html:
|
クロスフェードを用いると色を滑らかに変化させることができます。以下のプログラムは、ひとつ目のLEDの色が赤→緑に滑らかに変化します。
pixelxrg.html:
|
RGBの値と表示色の関係は下図のようになっています。
以下のプログラムは、すべてのLEDの色をフルカラーで連続的に変化させます(明るさ最大85)。
pixelxrgb.html:
|
以下のプログラムは、すべてのLEDの色を場所を変えながらフルカラーで連続的に変化させます(明るさ最大85)。rgb()は0~255の色相Wを与えると、R,G,Bの変数に値(各々0~85)がセットされます。
pixelrgb.html:
|
以下は、「ドロップ」のイルミネーションの作例です。水滴が滴り落ちるイメージで、最後にキラッと光ります。
pixeldrop.html:
|
以下は、NeoPixelリング(12個)を使い、ランダムに点灯させるようにした例です。オブジェの作り方はngo-tecさんのページを参考にしました(クッキングシートを使ってみました)。点灯位置と点灯色と点灯時間間隔をランダムにし、点灯後はだんだん暗くしています。
pixelfire.html:
|
(練習) オリジナルのイルミネーションを考え、作ってみなさい。
|
ラジコン用のサーボモーターは、右図のようなPWM波形で角度(0~180°)を制御するように作られています。 以下の例は、サーボモーターが車のワイパーのように動きます。 |
sweep.html:
|
以下のプログラムは、ボリュームの値によってサーボモーターの位置(角度)が変わります。
knob.html:
|
(練習) 上記のknob.htmlでボリュームの代わりに明るさセンサーを使い、明るさで位置が変わるようにしなさい。
下図のようにモーターを接続します。まず、motorコマンドでモーターを動かしてみてください。左右のモーターの速度は-256~255で指定します。電源への負荷を軽減するために、早さを変える場合は一旦停止させてください。
|
以下はブラウザに表示されたスライダを操作することによってモーターの回転速度が変わります。
motorslider.html:
|
以下は、ブラウザ画面のボタン操作で前後左右に動かします。
motorbutton.html:
|
以下はボリュームの値によってモーターの回転速度が変わります。
motorvr.html:
|
以下は音センサモジュールと組み合わせた例で、手を叩く(A1ピンに接続した音センサーが400以上)と1秒間前進します。
motorsound.html:
|
以下の例は、車の先端がテーブルから落ちそう(A1ピンに接続した赤外線反射センサーが30以上)になると、少し後退し、右回転して、再び前進します。
motorir.html:
|
signal.html:
|
また、以下は小学校などで利用されている「交通安全教室用信号機」ですが、上記と組み合わせればWebページと連動した指導ができるようになるかもしれません。
以下は、デジタル温湿度センサSHT31を使った温湿度計です。TEMPとHUMIは特別なアナログ入力ピンです。
thermometer.html:
|
以下は、グラフ表示など多目的に使えるようにした例です。データは使用するパソコンのブラウザに保存され、そのデータをネットワーク経由で見ることはできません。理科や保健の授業などで利用できるかもしれません。ネットワークを利用した気温・湿度・熱中症指数(WBGT)・CO2モニタリングシステムはこちらをご覧ください。
| |
以下はCO2センサも利用できるようにした例です。 | |
下図のように、WebIOの動作を確かめるページを作りました。プログラムをクッキーに保存することもできます。
ブレッドボードで利用できる入出力モジュールの製作例です。
モジュール | 回路図 | 製作例 |
---|---|---|
可変抵抗モジュール | ||
明るさセンサーモジュール | ||
赤外線反射モジュール | ||
音量センサーモジュール | ||
10連LEDモジュール | NeoPixel(Dinはpin10に接続) | |
モーターモジュール | 右モーターはA0とA1をGNDに接続 |
名称 | 外観 | 備考 |
---|---|---|
Seeeduino XIAO | 秋月 | |
ブレッドボード EIC-301 | 秋月 | |
ブレッドボード ジャンパーワイヤ 15cm | 秋月 | |
ブレッドボード ジャンパーワイヤ EIC-J-S | 秋月 | |
LED | 秋月 | |
フルカラーシリアルLEDテープ | SwitchScience | |
圧電スピーカー | 秋月 | |
プッシュスイッチ DS-660R-C | 千石 | |
抵抗 1/4W 4.7Ω, 100Ω, 220Ω, 470Ω, 1kΩ, 10kΩ | 秋月 | |
CDS(光センサ) | 秋月 | |
温湿度センサ SHT31 | 秋月 | |
赤外線反射センサ LBR-127HLD | 秋月 | |
サーボモーター SG-90 | 秋月 | |
モータードライバ DRV8830 | 秋月 |