先週少しやりかけて途中だった、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番を使った。
で、ウェブインターフェイスをタブレットにロードする。
動かしてみるとこんな感じで、いろんな色になって面白い。
