14.2. Управление платой Arduino из Интернета

Сначала используем плату Arduino в качестве веб-сервера. С помощью некоторых HTML-форм и интегрированной библиотеки Ethernet настроим Arduino для автоматического подключения к Сети и выведем веб-страницу, с помощью которой получим доступ для управления некоторыми контактами платы Arduino. Мы разместим кнопки на веб-интерфейсе для переключения цвета RGB-светодиода и управления частотой звука. Наша программа будет расширяемой, что позволит добавлять дополнительные устройства, чтобы более комфортно работать с Arduino.

14.2.1. Настройка оборудования для управления вводом-выводом

Настроим оборудование для управления платой Arduino в качестве сервера для управления контактами платы из сети Интернет. Для этого примера возьмем RGB-светодиод и пьезозуммер или обычный динамик. Схема соединения элементов показана на рис. 14.2. Напомним, что контакты 4, 10, 11, 12 и 13 предназначены для связи платы Arduino с адаптером Ethernet. Мы подключаем RGB-светодиод к выводам 5, 6, 7, а динамик - к выводу 3 платы Arduino.

14.2.2. Создание простой веб-страницы

Разработать веб-страницу можно независимо от Arduino. На нашей веб-странице будут простые кнопки для переключения цвета RGB-светодиода и ползунок для регулировки частоты звука, воспроизводимого динамиком. Веб-страница будет отправлять команды из браузера на сервер по протоколу НТТР GET. При разработке дизайна страницы веб-сайт может не быть подключенным к серверу Arduino, на этом этапе не нужно, чтобы взаимодействие со страницей вызывало какие-нибудь действия на плате Arduino.

Откройте свой любимый текстовый редактор (я рекомендую Notepad++ в Windows, который осуществляет визуальное цветовое выделение кода) и создайте новый файл с расширением html. Название не имеет значения, например test.html. Это будет пустая страница, без тегов, которые обычно присутствуют на веб-страницах, например <body> и <header>. Но это не повлияет на отображение страницы в браузере. Поместите в HTML-файл код из листинга 14.1.

- 307 -

Рис. 14.2. Схема подключения к Arduino-серверу RGB-светодиода и динамика

Листинг 14.1. HTML-страница с формой - server_form.html

</form>

</form>

</form>

</form>

HTML-страница из листинга 14.1 содержит четыре элемента формы. Тег <form> задает начало формы, тег </form>- конец формы. Каждый элемент формы с тегом

- 308 -

<input> определяет, какие данные будут переданы на сервер при отправке формы.

В нашем примере переменная называется L и на сервер передается номер необходимого вывода RGB-светодиода. Пустой элемент action указывает, что страница перезагружается при отправке формы. Значение скрытых полей (input с типом hidden) будут отправлены на сервер при нажатии кнопки submit. Для выбора частоты мы добавляем новый HTML-элемент (input с типом range). Это позволяет сделать ползунок диапазона. Вы можете перемещать ползунок с шагом 100 для выбора частоты, которая будет передаваться в переменной с именем s. Старые браузеры не поддерживают этот элемент ( слайдер) и он будет отображаться как поле ввода.

Чтобы увидеть, как будет выглядеть страница, запустите ваш браузер (я рекомендую Google Chrome ). В Chrome нужно нажать комбинацию клавиш <Ctrl>+<O> (в Windows) или <Cmd>+<O> (в OS Х), чтобы вызвать диалоговое окно Открыть.

Откройте созданный HTML-файл (рис. 14.3).

Рис. 14.3. Вид нашей веб-страницы в браузере Chrome

При нажатии на любую из кнопок вы должны увидеть в адресной строке браузера переменные, передаваемые методом GET.

14.2.3. Написание программы для Arduino-сервера

Теперь нам необходимо созданный HTML-код веб-страницы интегрировать в программу Arduino-сервера, который будет обрабатывать подключение к сети, выдавать на запросы клиентов страницу и обрабатывать переменные, получаемые методом GET.

Подключение к сети и получение IP-адреса через DHCP

Благодаря механизму DHCP подключить к сети плату Arduino с Ethemet-адаптером очень просто. Перед обсуждением кода программы давайте посмотрим, как это будет происходить. Вначале нужно подключить библиотеки SPI и Ethemet, определить MAC-адрес вашего Ethemet-адаптера (он указан на этикетке) и создать экземпляр объекта EthernetServer. В функции setup() вы начинаете сеанс Ethernet с MAC-адреса, который вы определили, и запускаете веб-сервер. При необходимости можно назначить статический IP-адрес при инициировании Ethernet, но если этот аргумент пуст, то Arduino будет получать IP-адрес через DCHP и выведет назначенный IP-адрес в последовательный терминал. Затем этот IP-адрес потребуется для подключения к Arduino и просмотра веб-страницы.

- 309 -

Ответ на клиентский запрос

В основном цикле 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-переменных. Места, куда вы можете вставить дополнительную функциональность, указаны в комментариях листинга.

Листинг 14.2. Код веб-сервера - control_led_speaker.ino

// 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-адаптера. Если вы не найдете этот адрес, возьмите значение из листинга 14.2. Загрузите программу на плату Arduino и запустите монитор последовательного порта.

Убедитесь, что плата Arduino подключена к сети и в маршрутизаторе включен

DHCP. Через несколько секунд в мониторе последовательного порта появится сообщение о назначенном IP-адресе (рис. 14.4).

В случае, показанном на рис. 14.4, Arduino был назначен локальный IP-адрес 192.168.0.9. В вашей сети почти наверняка будет другой адрес. Зная IP-адрес, можно использовать его для доступа к веб-интерфейсу.

- 313 -

Рис. 14.4. Вывод в последовательный порт полученного по DHCP IP-адреса

Более 800 000 книг и аудиокниг! 📚

Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением

ПОЛУЧИТЬ ПОДАРОК