ブラウザからArduino Unoを制御 │レーザー加工機・レーザーカッターのsmartDIYs

ブラウザからArduino Unoを制御

今回は、Arduino拡張シールドのイーサネットシールドを使用し、ブラウザからArduinoを制御したいと思います。

イーサネットシールドは、Arduino UNOに以下のように直接装着することができます。

イーサネットシールドには、LANポートのほかにSDカードスロットも搭載されていますので、htmlをSDカードに保存し、Arduinoをブラウザ経由で制御することができます。

Arduino UNO用プログラム

今回のArduino UNO用プログラムは以下になります。
イーサネットの制御用に「Ethernet.h」ヘッダーを読み込みます。また、SDカード操作用に「SPI.h」と「SD.h」ヘッダーを読み込む必要があります。IPアドレスの設定は、ご使用の環境に合わせて設定する必要があります。

#include <SPI.h>
#include <Ethernet.h>
#include "TextFinder.h"
#include <SD.h>

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0D, 0xE7, 0xAC };
byte ip[]  = { 192, 168, 3, 15 };

EthernetServer server(80);
File webFile;

void setup()
{
	Ethernet.begin(mac, ip);
	server.begin();

	Serial.begin(9600);

	if (!SD.begin(4)) 
	{
		return;
	}

	if (!SD.exists("index.htm")) 
	{
		return;
	}

	Serial.println("Ready");
}

void loop()
{
	EthernetClient client = server.available();
 
	if (client)
	{

	    TextFinder finder(client);

		if (finder.find("GET"))
		{
			while (finder.findUntil("pin", "\n\r"))
			{
				int iPin = finder.getValue();
				int iVal = finder.getValue();

				pinMode(iPin, OUTPUT);
				digitalWrite(iPin, iVal);
				Serial.print("Pin" + String(iPin));
				if (iVal == 1)
				{
					Serial.println(" ON");
				}
				else
				{
					Serial.println(" OFF");
				}
			}
		}

		boolean current_line_is_blank = true;

		while (client.connected())
		{
			if (client.available())
			{
				char c = client.read();
				if (c == '\n' && current_line_is_blank)
				{
					client.println("HTTP/1.1 200 OK");
					client.println("Content-Type: text/html");
					client.println("Connection: close");
					client.println();

					webFile = SD.open("index.htm");
					if (webFile)
					{
						while(webFile.available())
						{
							client.write(webFile.read());
						}
						webFile.close();
					}
					break;
				}
				if (c == '\n')
				{
					current_line_is_blank = true;
				} 
				else if (c != '\r')
				{
					current_line_is_blank = false;
				}
			}
		}
		delay(1);
		client.stop();
	}
}

HTML

HTMLは、Arduino UNOの13ピンに搭載されているLEDのON/OFFを制御します。
ONボタン/OFFボタンをクリックすることにより、ブラウザ経由で13ピンをON/OFFすることができます。

HTMLは以下になります。

<!DOCTYPE html>
<html>
<head>
	<title>ArduinoをLAN制御</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<div class="page-header">
			<h1>ArduinoをLAN制御</h1>
		</div>

		<h2>LED制御</h2>
		<a href="/?pin13=1" target="ifr" class="btn btn-primary">ON</a>
		<a href="/?pin13=0" target="ifr" class="btn btn-default">OFF</a>
	</div>

	<iframe name="ifr" style="display:none;" width="0" height="0"></iframe>
</body>
</html>