先週少しやりかけて途中だった、Arduino UNO に ETHERNET SHIELD 2 をとりつけ、ウェブインターフェイスを作ってこれでLEDをコントロールするという遊びの続きをやる。
こんなふうなインターフェイスでコントロールすることにする。
で、ブレッドボードとArduinoはこんな感じ。「SeeedStudio SIDEKICK BASIC KIT」に入っていた3色LEDを使う。
スケッチはこんな感じで。ウェブ上で同じようなことを公開している方々は、ブラウザの出力を受けるのに、たいてい普通のポインタ文字列を使っておられるのだが、せっかくStringクラスがあるので、それを活用することにした。Stringクラスを使う欠点は多少メモリを浪費することだが、反面、余裕は十分あり、今回は別にメモリが足りないというわけでもないので、そうした。
// // Web2TriColorLED.ino // 27.06.07(日) 1800～ // 佐藤俊夫 // 3色LEDをウェブインターフェイスで制御 // ETHERNET SHIELD 2 使用 // #include <SPI.h> #include <Ethernet2.h> // byte mac[] = { 0x90, 0xA2, 0xDA, 0x0F, 0xF6, 0x74 }; IPAddress ip(192, 168, 1, 129); EthernetServer SERVER(80); EthernetClient CLIENT; int R = 0, G = 0, B = 0; const int LEDR = 3, LEDG = 5, LEDB = 6; // void setup() { Ethernet.begin(mac, ip); SERVER.begin(); pinMode(LEDR, OUTPUT); pinMode(LEDG, OUTPUT); pinMode(LEDB, OUTPUT); } void loop() { char c; String rstr = ""; CLIENT = SERVER.available(); if (CLIENT) { while (CLIENT.connected()) { if (CLIENT.available()) { c = CLIENT.read(); rstr += c; if(rstr.endsWith("\r\n")){ break; } } } if(rstr.indexOf("red=") >= 0){ R = rstr.substring(rstr.indexOf("red=") + 4, rstr.indexOf("&green=")).toInt(); G = rstr.substring(rstr.indexOf("green=") + 6, rstr.indexOf("&blue=")).toInt(); B = rstr.substring(rstr.indexOf("blue=") + 5, rstr.indexOf("&end")).toInt(); } analogWrite(LEDR, R); analogWrite(LEDG, G); analogWrite(LEDB, B); delay(10); rstr = ""; sendform(); // give the web browser time to receive the data delay(1); // close the connection: CLIENT.stop(); } } // void sendform(){ char* formFirstHalf[] = { "<html>", " <head>", " <meta charset=\"utf-8\">", " </head>", " <body>", " <center>", " <h1>Arduino 3色LEDをウェブインターフェイスで</h1>", " <form method='GET'>", " <table>", " <tr>", " <th style='background-color:red; color:white;'>赤</th>", " <th style='background-color:green;color:white;'>緑</th>", " <th style='background-color:blue; color:white;'>青</th>", " </tr>" }; // 14 num. char* formSecondHalf[] = { " </table>", " <input type='hidden' name='end'>", " <input type='submit' value='セット'>", " </form>", " </center>", " </body>", "</html>" }; // 7 num. int i = 0; CLIENT.println("HTTP/1.1 200 OK"); CLIENT.println("Content-Type: text/html"); CLIENT.println("Connection: close"); CLIENT.println(); CLIENT.println("<!DOCTYPE HTML>"); for(i = 0; i < 14; i++){ CLIENT.println(formFirstHalf[i]); } CLIENT.println(" <tr>"); CLIENT.println(" <td>"); CLIENT.println(" <select name='red'>"); for(i = 0; i <= 255; i++){ CLIENT.print(" <option value='"); CLIENT.print(i, DEC); if(i == R){ CLIENT.print("' selected>"); }else{ CLIENT.print("'>"); } CLIENT.print(255 - i, DEC); CLIENT.println("</option>"); } CLIENT.println(" </select>"); CLIENT.println(" </td>"); CLIENT.println(" <td>"); CLIENT.println(" <select name='green'>"); for(i = 0; i <= 255; i++){ CLIENT.print(" <option value='"); CLIENT.print(i, DEC); if(i == G){ CLIENT.print("' selected>"); }else{ CLIENT.print("'>"); } CLIENT.print(255 - i, DEC); CLIENT.println("</option>"); } CLIENT.println(" </select>"); CLIENT.println(" </td>"); CLIENT.println(" <td>"); CLIENT.println(" <select name='blue'>"); for(i = 0; i <= 255; i++){ CLIENT.print(" <option value='"); CLIENT.print(i, DEC); if(i == B){ CLIENT.print("' selected>"); }else{ CLIENT.print("'>"); } CLIENT.print(255 - i, DEC); CLIENT.println("</option>"); } CLIENT.println(" </select>"); CLIENT.println(" </td>"); CLIENT.println(" </tr>"); for(i = 0; i < 7; i++){ CLIENT.println(formSecondHalf[i]); } }
気を付けるところは、私が買った「SeeedStudio SIDEKICK BASIC KIT」というキットに入っている3色LEDは「アノードコモン（共通陽極）」というタイプで、プラスに5V、各色のコントロールはマイナスになる、という点だ。ここを間違えると思ったように動作しない。一番長い脚が共通陽極だ。封入の切り欠きを左にして、左から赤、アノード、緑、青の順に脚が並ぶ。
また、フォームから与える値も、アノードコモンであるゆえに、「0」が最も明るくなり、「255」が最も暗くなるので、インターフェイスを逆にするなど、多少工夫が必要だ。
それから、PWM(パルス幅変調)の機能を大いに活用し、いろいろな色が出せるようにした。この場合の注意点は、ETHERNET SHIELD 2を取り付けると、10番・11番・12番のピンが使えなくなるので、他のピンで出力しなければならないことだ。今回は3番・5番・6番を使った。
で、ウェブインターフェイスをタブレットにロードする。
動かしてみるとこんな感じで、いろんな色になって面白い。
