やりたいこと
Arduinoで簡易Webサーバーを立てて、ブラウザ経由でDCモーターを動かしたい。
必要な部品
ArduinoでDCモーターを動かすの「必要な部品」と、Arduino Ethernet Shield (ここで実際に使用しているのはDFRduino Ethernet Shield V2.1)
配線
ArduinoでDCモーターを動かすの「配線」と同じ。
（「ArduinoでDCモーターを動かす」の記事にある「配線」の写真は、実際にEthernet Shieldを乗せた状態。）
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
#define PIN_MOTER1 5 #define PIN_MOTER2 6 #include <SPI.h> #include <Ethernet.h> //localなmacアドレス byte mac[] = {0x02, 0x02, 0x02, 0x02, 0x02, 0x02}; //IPアドレスは適当に IPAddress ip(192, 168, 0, 111); //80番ポートで待ち受け EthernetServer server(80); void setup() { pinMode(PIN_MOTER1, OUTPUT); pinMode(PIN_MOTER2, OUTPUT); Serial.begin(115200); //おまじない while (!Serial) { ; } Ethernet.begin(mac, ip); server.begin(); Serial.print("Hola! "); Serial.println(Ethernet.localIP()); Serial.println("----"); } void loop() { EthernetClient client = server.available(); if (client) { //ヘッダ行の空行検出用 boolean isBlankLine = true; //HTTPヘッダ行格納用 char header[256] = ""; /* * URLをパースした結果の格納用 * HTMLに表示する */ char* result = ""; int rotationMilliSec = 0; while (client.available()) { char c = client.read(); /* * strncat()を使ってHTTPリクエスト1行分(header変数)を生成するために、 * ポインタに変換しておく。 */ char* ptr = &c; if (c == '\r') { //ここは無視 } else if (c == '\n') { //Serial.println(header); //HTTPリクエストヘッダの「GET /XXXXXXXX HTTP/1.1」をパースする。 if (strstr(header, "GET /favicon.ico") != NULL) { //favicon.icoのリクエストは無視 break; } else if (strstr(header, "GET / HTTP") != NULL) { //「GET / HTTP/1.X」のリクエストはそのまま続行 //Serial.println("index page."); } else if (strstr(header, "GET /") != NULL) { char cmd[2] = ""; char d[5] = ""; /* * http://example.com/XXXXXX の「XXXXXX」部分を取得する。 * HTTPヘッダは「GET /XXXXXX HTTP/1.1」 * 「GET /」で5文字なので「header + 5」にする。 * * /cw10000 なら時計回りに10000ミリ秒回転 * /cc500 なら反時計回りに500ミリ秒回転 */ //「cc」「cw」部分を取得する strncpy(cmd, header + 5, 2); Serial.print("cmd = "); Serial.println(cmd); //ミリ秒部分を取得する（5桁まで） strncpy(d, header + 5 + 2, 5); rotationMilliSec = atoi(d); Serial.print("rotationMilliSec = "); Serial.println(rotationMilliSec); if(strncmp(cmd, "cw", 2) == 0) { //cmdがcwなら時計回り（モーターの+-接続は適宜調べる） result = "ClockWise"; digitalWrite(PIN_MOTER1, HIGH); digitalWrite(PIN_MOTER2, LOW); delay(rotationMilliSec); } else if (strncmp(cmd, "cc", 2) == 0) { //cmdがccなら時計回り（モーターの+-接続は適宜調べる） result = "CounterClockWise"; digitalWrite(PIN_MOTER1, LOW); digitalWrite(PIN_MOTER2, HIGH); delay(rotationMilliSec); } else { result = "NONE"; } digitalWrite(PIN_MOTER1, LOW); digitalWrite(PIN_MOTER2, LOW); Serial.println("----"); } //HTTPリクエストヘッダの各1行をクリアする header[0] = 0; if (isBlankLine) { client.println("HTTP/1.1 200 OK"); client.println("Connection: close"); client.println("Content-Type: text/html; charset=utf-8"); client.println(""); client.println("<!DOCTYPE html><html lang=\"ja\"><head><meta charset=\"utf-8\"><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>Arduino DC Motor</title><script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js\"></script></head><body>"); client.println("<h1>Arduino DC Motor</h1>"); client.println("<p><input type=\"text\" id=\"delay\" size=\"5\" maxlength=\"5\" value=\"1000\"/>milli sec.</p>"); client.println("<p><label><input type=\"radio\" name=\"rotation\" value=\"cw\" checked=\"checked\">ClockWise</label><label><input type=\"radio\" name=\"rotation\" value=\"cc\">CounterClockWise</label></p>"); client.println("<p><input type=\"button\" value=\" Go! \" onclick=\"var d = $('#delay').val(); var r = $('input[name=rotation]:checked').val(); window.location.href = '/' + r + d;\"></p>"); client.println("<p>result="); client.println(result); client.println(" "); client.println(rotationMilliSec); client.println("milli sec."); client.println("</p>"); client.println("</body></html>"); break; } //改行コード直後なのでtrue isBlankLine = true; } else { //client.read() した値をheader変数に追記する strncat(header, ptr, 1); //文字列が取得できたのでfalse isBlankLine = false; } } //おまじない delay(10); client.stop(); } } |
dc_motor_web.ino内で出力しているHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Arduino DC Motor</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <h1>Arduino DC Motor</h1> <p><input type="text" id="delay" size="5" maxlength="5" value="1000"/>milli sec.</p> <p> <label><input type="radio" name="rotation" value="cw" checked="checked">ClockWise</label> <label><input type="radio" name="rotation" value="cc">CounterClockWise</label> </p> <p><input type="button" value=" Go! " onclick="var d = $('#delay').val(); var r = $('input[name=rotation]:checked').val(); window.location.href = '/' + r + d;"></p> <p>result=0 milli sec.</p> </body> </html> |
ブラウザからアクセス
モーターを動かす時間(milli sec.)と回転方向(ClockWise / CounterClockWise)を指定して「Go!」
回転方向はモーターにつないだ+-端子によって変わるので適宜変更で。
ブラウザ画面