Сначала используем плату Arduino в качестве веб-сервера. С помощью некоторых HTML-форм и интегрированной библиотеки Ethernet настроим Arduino для автоматического подключения к Сети и выведем веб-страницу, с помощью которой получим доступ для управления некоторыми контактами платы Arduino. Мы разместим кнопки на веб-интерфейсе для переключения цвета RGB-светодиода и управления частотой звука. Наша программа будет расширяемой, что позволит добавлять дополнительные устройства, чтобы более комфортно работать с Arduino.
Настроим оборудование для управления платой Arduino в качестве сервера для управления контактами платы из сети Интернет. Для этого примера возьмем RGB-светодиод и пьезозуммер или обычный динамик. Схема соединения элементов показана на рисунке. Напомним, что контакты 4, 10, 11, 12 и 13 предназначены для связи платы Arduino с адаптером Ethernet. Мы подключаем RGB-светодиод к выводам 5, 6, 7, а динамик - к выводу 3 платы Arduino.
Разработать веб-страницу можно независимо от Arduino. На нашей веб-странице будут простые кнопки для переключения цвета RGB-светодиода и ползунок для регулировки частоты звука, воспроизводимого динамиком. Веб-страница будет отправлять команды из браузера на сервер по протоколу НТТР GET. При разработке дизайна страницы веб-сайт может не быть подключенным к серверу Arduino, на этом этапе не нужно, чтобы взаимодействие со страницей вызывало какие-нибудь действия на плате Arduino.
Откройте свой любимый текстовый редактор (я рекомендую Notepad++ в Windows, который осуществляет визуальное цветовое выделение кода) и создайте новый файл с расширением html. Название не имеет значения, например test.html. Это будет пустая страница, без тегов, которые обычно присутствуют на веб-страницах, например <body> и <header>. Но это не повлияет на отображение страницы в браузере. Поместите в HTML-файл код из листинга:
<form action = '' method = 'get'>
<input type = 'hidden' name = 'L' value = '7' />
<input type = 'submit' value = 'Toggle Red' />
</form>
<form action = '' method = 'get'>
<input type = 'hidden' name = 'L' value = '6' />
<input type = 'submit' value = 'Toggle Green' />
</form>
<form action = '' method = 'get'>
<input type = 'hidden' name = 'L' value = '5' />
<input type = 'submit' value = 'Toggle Blue' />
</form>
<form action = '' method = 'get'>
<input type = 'range' name = 'S' min = '0' max = '1000' step = '100' value = '0'/>
<input type = 'submit' value = 'Set Frequency' />
</form>
HTML-страница из листинга содержит четыре элемента формы. Тег <form> задает начало формы, тег </form>- конец формы. Каждый элемент формы с тегом <input> определяет, какие данные будут переданы на сервер при отправке формы.
В нашем примере переменная называется L и на сервер передается номер необходимого вывода RGB-светодиода. Пустой элемент action указывает, что страница перезагружается при отправке формы. Значение скрытых полей (input с типом hidden) будут отправлены на сервер при нажатии кнопки submit. Для выбора частоты мы добавляем новый HTML-элемент (input с типом range). Это позволяет сделать ползунок диапазона. Вы можете перемещать ползунок с шагом 100 для выбора частоты, которая будет передаваться в переменной с именем s. Старые браузеры не поддерживают этот элемент ( слайдер) и он будет отображаться как поле ввода.
Чтобы увидеть, как будет выглядеть страница, запустите ваш браузер. В браузере нужно нажать комбинацию клавиш <Ctrl>+<O> чтобы вызвать диалоговое окно Открыть.
Откройте созданный HTML-файл
При нажатии на любую из кнопок вы должны увидеть в адресной строке браузера переменные, передаваемые методом GET.
Теперь нам необходимо созданный HTML-код веб-страницы интегрировать в программу Arduino-сервера, который будет обрабатывать подключение к сети, выдавать на запросы клиентов страницу и обрабатывать переменные, получаемые методом GET.
Благодаря механизму DHCP подключить к сети плату Arduino с Ethemet-адаптером очень просто. Перед обсуждением кода программы давайте посмотрим, как это будет происходить. Вначале нужно подключить библиотеки SPI и Ethemet, определить MAC-адрес вашего Ethemet-адаптера (он указан на этикетке) и создать экземпляр объекта EthernetServer. В функции setup() вы начинаете сеанс Ethernet с MAC-адреса, который вы определили, и запускаете веб-сервер. При необходимости можно назначить статический IP-адрес при инициировании Ethernet, но если этот аргумент пуст, то Arduino будет получать IP-адрес через DCHP и выведет назначенный IP-адрес в последовательный терминал. Затем этот IP-адрес потребуется для подключения к Arduino и просмотра веб-страницы.
Ответ на клиентский запрос
В основном цикле loop() происходит несколько действий. Для обработки различных действий проверяются переменные состояния, чтобы отслеживать, что было выполнено и что еще должно произойти для успешной связи с клиентом. Плата Arduino постоянно будет ожидать клиентских подключений к серверу, например с вашего ноутбука. При подключении клиента ответ содержит две вещи: НТТР заголовок ответа и тип форматирования веб-страницы, выдаваемой по запросу. Заголовок ответа, отправляемый в браузер, сообщает, какая информация будет отправлена на запрос. Когда вы пытаетесь посетить несуществующую страницу, получаете "страшный" ответ: "404 Responce". Заголовок 404 указывает браузеру, что сервер не может найти запрашиваемую страницу. Ответ "200 Response" указывает, что запрос был получен и что HTML-данные будут передаваться в браузер.
Если вы хотите послать сообщение "200 Response" в браузер, а затем передать HTML-данные, то заголовок будет выглядеть так:
НТТР/1.1 200 ОК
Content-Type: text/html
После заголовка должно следовать содержимое вашей HTML-страницы. Программа также обрабатывает GET-запросы. Чтобы определить GET-запрос, нужно искать символ ? в URL. Если найден символ ?, программа ждет, пока не получит имя переменной. Команда для управления светодиодом - это L, команда для регулировки частоты динамика - s. Программа анализирует значения переменных и управляет сигналами на выводах Arduino. После этого следует команда break для выхода из цикла подключенного клиента, и программа начинает ожидать новое подключение клиента, чтобы повторить весь процесс сначала.
Теперь, учитывая все сказанное ранее, мы можем написать код программы вебсервера Arduino. Программа довольно нетривиальная, потому что содержит несколько переменных состояния, которые позволяют отслеживать взаимодействие между клиентом и сервером. Код, приведенный в листинге 14.2, управляет RGB-светодиодом и динамиком. В программу легко добавить функции с большим числом GET-переменных. Места, куда вы можете вставить дополнительную функциональность, указаны в комментариях листинга.
Листинг - Код веб-сервера
// Arduino веб-сервер
// Часть адаптированного кода под лицензией MIT License от
// http://bildr.org/2011/06/arduino-ethernet-pin-control/
#include <Ethernet.h>
#include <SPI.h>
const int BLUE =5;
const int GREEN =6;
- 310 -
const int RED =7;
const int SPEAKER =3;
// Для управления RGB-светодиодом и динамиком
// Если вы хотите использовать дополнительные устройства,
// добавляйте переменные сюда
int freq = 0;
int pin;
// MAC-адрес устройства
// Должен быть написан на этикетке вашего устройства
// или можете использовать этот
byte mac[] = { 0x90, 0xA2, 0xDA, 0x00, 0x4A, 0xE0 };
// Сервер на порту 80
EthernetServer server = EthernetServer(80); //Порт 80
boolean receiving = false; // Отслеживание данных GET
void setup()
{
Serial.begin(9600);
pinMode(RED, OUTPUT);
pinMode(GREEN, OUTPUT);
pinMode(BLUE, OUTPUT);
// Соединение с DHCP
if ( !Ethernet.begin (mac))
{
Serial.println("Could not Configure Ethernet with DHCP.");
return;
}
else
{
Serial.println("Ethernet Configured!");
}
// Запуск сервера
server.begin();
Serial.print("Server Started. Local IP: ");
Serial.println(Ethernet.localIP());
}
void loop()
{
EthernetClient client
server.available();
if (client)
{
// Запрос НТТР заканчивается пустой строкой
boolean currentLineisBlank
true;
boolean sentHeader = false;
- 311 -
while (client.connected())
{
if (client.available())
{
char с = client.read(); // Чтение из буфера
if(receiving && с == ' ') receiving = false;
//Окончание передачи
if(c == '?') receiving = true; // Поиск символа?
// Ожидание данных GET
if(receiving)
// Данные управления светодиодом (переменная L)
if (с == 'L')
Serial.print ( "Toggling Pin ");
pin = client.parseInt();
Serial.println(pin);
digitalWrite(pin, !digitalRead(pin));
break;
}
// Команда управления динамиком (переменная S)
else if (с == 'S')
{
Serial.print("Setting Frequency to ");
freq = client.parseInt();
Serial.println(freq);
if (freq == 0)
noTone(SPEAKER);
else
tone(SPEAKER, freq);
break;
}
// Код для управления дополнительными устройствами
// добавляем сюда
}
// Отправка заголовка ответа
if ( ! sentHeader)
{
// Отправить стандартный заголовок НТТР ответа
client.println("HTTP/1.1 200 ОК");
client.println ( "Content-Type: text/html ");
// Кнопка переключения красного для RGB
client.println ( "<form action = ' ' method = ' get' >");
client.println("<input type = 'hidden' name = 'L' value = '7' />");
client.println("<input type = 'submit' value = 'Toggle Red' />");
client.println("</form>");
- 312 -
// кнопка переключения зеленого для RGB
client.println ( "<form action = ' ' method = ' get' >");
client.println("<input type = 'hidden' name = 'L' value = '6' />");
client.println("<input type = 'submit' value = 'Toggle Green' />");
client.println("</form>");
// кнопка переключения синего для RGB
client.println ( "<form action = ' ' method = ' get' >");
client.println("<input type = 'hidden' name = 'L' value = '5' />");
client.println("<input type = 'submit' value = 'Toggle Blue' />");
client.println("</form>");
// Ползунок для выбора частоты динамика
client.println("<form action = '' method = 'get'>");
client.print("<input type = 'range' name = 'S' min = '0' max = '1000'"
"step = '100' value = '0'/>");
client.println("<input type = 'submit' value = 'Set Freq.' />");
client.println("</form>");
// Добавить формы для управления
// дополнительными устройствами
sentHeader = true;
}
if (с==' ' && currentLineisBlank) break;
if (с==' ')
{
currentLineisBlank=true;
}
else if (с ! = ' ')
{
currentLineisBlank=false;
}
}
}
// Дать время веб-браузеру на получение данных
delay(5);
client.stop(); // Закрыть соединение
}
}
Приведенная программа выполняет все функции, описанные в предыдущих разделах. Измените MAC-адрес на значение, указанное на этикетке вашего Ethemet-адаптера. Если вы не найдете этот адрес, возьмите значение из листинга. Загрузите программу на плату Arduino и запустите монитор последовательного порта.
Убедитесь, что плата Arduino подключена к сети и в маршрутизаторе включен DHCP. Через несколько секунд в мониторе последовательного порта появится сообщение о назначенном IP-адресе.
В случае, показанном на рисунке, Arduino был назначен локальный IP-адрес 192.168.0.9. В вашей сети почти наверняка будет другой адрес. Зная IP-адрес, можно использовать его для доступа к веб-интерфейсу.