От переводчика. В этой части руководства рассказывается как подключать к страницам Arduino сервера и использовать Javascript компоненты, в данном случае компонент стрелочного индикатора.
Это открывает поистине безграничные возможности для проектирования веб-страниц: вам доступны тысячи готовых Javascript компонентов для реализации различных функций и дизайна веб-интерфейсов для ваших проектов.
В этой части руководства рассматривается создание графического индикатора на веб-странице для отображения состояния одного из аналоговых входов Arduino. Значения индикатора обновляются при помощи Ajax.
Сам индикатор написан на JavaScript и использует HTML5 canvas. Индикатор используется как компонент (без изменений) и просто настраивается для отображения значения одного из аналоговых входов Arduino. Значения индикатора обновляются каждые 200 мс.
В этом видео показана работа сервера Arduino и индикатора, размещённого на веб-странице.
❯ Компонент индикатора
Компонент индикатора «HTML Canvas Gauges» можно скачать на Github. Можно также ознакомиться со статьёй (на английском) в которой даны подробности использования компонента.
В этом уроке используется Javascript код из файла Gauge.min.js (загруженный по вышеприведенной ссылке).
❯ Arduino скетч и веб-страница
Скетч Ардуино
Скетч Arduino для этого урока:
/*-------------------------------------------------------------- Скетч: eth_websrv_SD_Ajax_gauge Описание: Arduino сервер с SD картой, динамически отображающий на графическом индикаторе состояние аналогового входа при помощи Ajax. Оборудование: контроллер Arduino Uno, плата Ethernet Shield, microSD карта памяти 2 ГБ, потенциометр, подключённый на пин A2. Программное обеспечение: среда разработки Arduino IDE, microSD карта с файлом index.htm Ссылки: - WebServer example by David A. Mellis and modified by Tom Igoe - Ethernet library documentation: http://arduino.cc/en/Reference/Ethernet - Learning PHP, MySQL & JavaScript by Robin Nixon, O'Reilly publishers - SD Card library documentation: http://arduino.cc/en/Reference/SD - Gauge from: https://github.com/Mikhus/canv-gauge Дата создания: 27 марта 2013 Изменения: 19 июня 2013 Author: W.A. Smith, http://startingelectronics.org --------------------------------------------------------------*/ #include <SPI.h> #include <Ethernet.h> #include <SD.h> byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; IPAddress ip(192, 168, 0, 20); // IP-адрес (нужно изменить на актуальный для вашей сети) EthernetServer server(80); #define REQ_BUF_SZ 50 char HTTP_req[REQ_BUF_SZ] = {0}; // Хранится как null terminated string char req_index = 0; // индекс буфера File webFile; void setup() { // отключение Ethernet pinMode(10, OUTPUT); digitalWrite(10, HIGH); Serial.begin(115200); Serial.println("Initializing SD card..."); if (!SD.begin(4)) { Serial.println("ERROR - SD card initialization failed!"); return; } Serial.println("SUCCESS - SD card initialized."); if (!SD.exists("index.htm")) { Serial.println("ERROR - Can't find index.htm file!"); return; } Serial.println("SUCCESS - Found index.htm file."); Ethernet.begin(mac, ip); server.begin(); } void loop() { EthernetClient client = server.available(); if (client) { boolean currentLineIsBlank = true; while (client.connected()) { if (client.available()) { char c = client.read(); // получаем очередной байт (символ) от клиента // сохраняем последний элемент массива 0 (null terminate string) if (req_index < (REQ_BUF_SZ - 1)) { HTTP_req[req_index] = c; // сохраняем символ HTTP запроса req_index++; } if (c == '\n' && currentLineIsBlank) { // Посылаем http заголовок client.println("HTTP/1.1 200 OK"); // HTML или XML запрос if (StrContains(HTTP_req, "ajax_inputs")) { client.println("Content-Type: text/xml"); client.println("Connection: keep-alive"); client.println(); XML_response(client); } else { client.println("Content-Type: text/html"); client.println("Connection: keep-alive"); client.println(); webFile = SD.open("index.htm"); if (webFile) { while(webFile.available()) { client.write(webFile.read()); } webFile.close(); } } Serial.print(HTTP_req); // Обнуляем массив (буфер) req_index = 0; StrClear(HTTP_req, REQ_BUF_SZ); break; } if (c == '\n') { currentLineIsBlank = true; } else if (c != '\r') { currentLineIsBlank = false; } } // end if (client.available()) } // end while (client.connected()) delay(1); client.stop(); } // end if (client) } // Посылаем XML файл void XML_response(EthernetClient cl) { int analog_val; cl.print("<?xml version = \"1.0\" ?>"); cl.print("<inputs>"); // read analog pin A2 analog_val = analogRead(2); cl.print("<analog>"); cl.print(analog_val); cl.print("</analog>"); cl.print("</inputs>"); } // Обнуление массива void StrClear(char *str, char length) { for (int i = 0; i < length; i++) { str[i] = 0; } } // Поиск подстроки // 1, если найдена // 0, если не найдена char StrContains(char *str, char *sfind) { char found = 0; char index = 0; char len; len = strlen(str); if (strlen(sfind) > len) { return 0; } while (index < len) { if (str[index] == sfind[found]) { found++; if (strlen(sfind) == found) { return 1; } } else { found = 0; } index++; } return 0; }
Этот скетч представляет собой немного измененную версию скетча из предыдущего урока.
Скетч отправляет значение аналогового входа A2 в браузер, которое затем отображается на индикаторе на веб-странице. Состояние индикатора обновляется с помощью Ajax, а значение аналогового входа A2 передаётся как часть XML файла (от Arduino сервера к браузеру).
Веб-страница, размещенная на сервере Arduino, хранится на microSD карте памяти, подключённой к плате Arduino Ethernet Shield.
Веб-страница
Ниже показано содержание веб-страницы этого примера (без кода самого индикатора).
Эта веб-страница — это модифицированная версия страницы, использованной в предыдущем уроке.
Примечание переводчика: на скриншоте выше отсутствует код самого компонента индикатора, видна только одна строка от него (eval(function...), остальное автор просто обрезал, что может вызвать непонимание читателя. В общем, можно представлять себе, что на месте этой строки находится полный код компонента индикатора.
Индикатор
Индикатор подключается к веб-странице путем вставки его кода между тегами script в заголовке страницы.
Индикатор отображается в теле страницы (body) с помощью HTML5 тега canvas.
Обновление индикатора
Значение входа A2 Arduino принимается браузером и отображается на веб-странице так же, как и в предыдущей части этого руководства. Также значение входа A2 сохраняется в Javascript переменной data_val, чтобы индикатор мог его использовать.
Значение в data_val передается индикатору с помощью Javascript строки в свойстве data-onready тега canvas:
setInterval( function() {Gauge.Collection.get('an_gauge_1').setValue(data_val);}, 200);
Цифра 200 в вышеприведенной строке предписывает индикатору обновляться каждые 200 миллисекунд.
Интервалы
Индикатор обновляется каждые 200 мс, и периодичность Ajax запросов также установлена на 200 мс.
Интервал для Ajax запросов задаётся в следующей строке Javascript кода:
setTimeout('GetArduinoInputs()', 200);
Такая частота следования Ajax запросов может вызвать проблемы в загруженной или медленной сети. Если у вас появятся какие-то проблемы с этим, попробуйте изменить это значение на 1000, чтобы запросы производились реже, один раз в секунду.
❯ Запуск скетча
Подключите потенциометр, как показано на принципиальной схеме в 7-й части этого руководства. Кнопки, показанные на схеме, не будут использоваться в этом уроке.
Скопируйте веб-страницу index.htm (см. ниже) на microSD карту памяти и вставьте ее в слот на плате Arduino Ethernet Shield.
Загрузите вышеприведенный скетч на плату Arduino сервера.
❯ Исходный код веб-страницы
Загрузите исходный код веб-страницы (файл index.htm) здесь:
Arduino_web_gauge.zip (6,3 КБ)
Лицензия на индикатор (MIT) включена в архив в виде текстового файла.
❯ От переводчика о 13-й части
В этой части всё описано достаточно подробно и понятно, от себя добавлю только несколько слов по поводу компонента индикатора.
В этом примере автор использует «сжатый» и практически нечитаемый вариант Javascript кода индикатора, который целым куском «как есть» вставляет в тело страницы. Такой подход может вызвать некоторые проблемы в понимании у новичков — просто относитесь к этому куску кода как к «чёрному ящику», для нас здесь важным является только механизм обновления переменной data_val, остальное делает «магия» компонента индикатора.
Ну и должно быть понятно, что по такому (или подобному) принципу можно подключить к веб-странице множество других Javascript компонентов.
Часть 1, часть 2, часть 3, часть 4, часть 5, часть 6, часть 7, часть 8, часть 9, часть 10, часть 11, часть 12.
