<input type = 'submit' value = 'Set Frequency' />
</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.
Теперь нам необходимо созданный HTML-код веб-страницы интегрировать в программу Arduino-сервера, который будет обрабатывать подключение к сети, выдавать на запросы клиентов страницу и обрабатывать переменные, получаемые методом GET.
Благодаря механизму 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 от