Arduino:Примеры/Web AjaxRGB

Материал из Онлайн справочника
Перейти к навигации Перейти к поиску

Перевод: Максим Кузьмин (Cubewriter) Контакты:</br>* Skype: cubewriter</br>* E-mail: cubewriter@gmail.com</br>* Максим Кузьмин на freelance.ru
Проверка/Оформление/Редактирование: Мякишев Е.А.


Управление RGB-светодиодом через браузерный интерфейс[1]

Этот пример показывает, как менять цвет RGB-светодиода с помощью библиотеки Webduino и Ethernet-модуля. Значения для красного, синего и зеленого задаются пользователем через интерфейс в браузере.

Код

  1 /* Управление RGB-светодиодом через браузерный интерфейс (Webduino) */
  2 
  3 #include "SPI.h"
  4 #include "Ethernet.h"
  5 #include "WebServer.h"
  6 
  7 // ПОСТАВЬТЕ ЗДЕСЬ СОБСТВЕННОЕ ЗНАЧЕНИЕ:
  8 static uint8_t mac[6] = { 0x02, 0xAA, 0xBB, 0xCC, 0x00, 0x22 };
  9 
 10 // ВЫСТАВЬТЕ ТУТ ЗНАЧЕНИЕ, СООТВЕТСТВУЮЩЕЕ СЕТИ ВАШЕГО ХОСТА:
 11 static uint8_t ip[4] = { 192, 168, 1, 210 }; // area 51!
 12 
 13 /* Все URL этого сервера будут начинаться с /rgb, потому что именно
 14  * так мы определили значение PREFIX. Мы также будем прослушивать 
 15  * порт 80, стандартный порт для HTTP */
 16 #define PREFIX "/rgb"
 17 WebServer webserver(PREFIX, 80);
 18 
 19 #define RED_PIN 5
 20 #define GREEN_PIN 3
 21 #define BLUE_PIN 6
 22 
 23 int red = 0;            // целое число для красного светодиода
 24 int blue = 0;           // целое число для синего светодиода
 25 int green = 0;          // целое число для зеленого светодиода
 26 
 27 /* Это команда, используемая сервером по умолчанию. Она обрабатывает 
 28  * запросы GET и POST. При запросе GET она возвращает простую страницу 
 29  * с несколькими кнопками. При запросе POST она сохраняет полученное 
 30  * значение в переменные red/blue/green, тем самым меняя цвет 
 31  * RGB-светодиода */
 32 void rgbCmd(WebServer &server, WebServer::ConnectionType type, char *, bool)
 33 {
 34   if (type == WebServer::POST)
 35   {
 36     bool repeat;
 37     char name[16], value[16];
 38     do
 39     {
 40       /* Если данных, доступных для считывания, нет, то функция 
 41        * readPOSTparam() возвращает «false». Мы указываем в ней 
 42        * буферы для хранения строковых значений «name» и «value», 
 43        * а также длину этих буферов. */
 44       repeat = server.readPOSTparam(name, 16, value, 16);
 45 
 46       /* Это стандартная функция для сравнения строк. При точном 
 47        * соответствии она возвращает «0». Мы обращаемся к ней, 
 48        * спрашивая соответствие с параметрами red, blue и green */
 49       if (strcmp(name, "red") == 0)
 50       {
 51 	/* Используем функцию strtoul(), чтобы преобразовать числовую  
 52 	 * строку в целое число для переменных red, blue и green */
 53         red = strtoul(value, NULL, 10);
 54       }
 55       if (strcmp(name, "green") == 0)
 56       {
 57         green = strtoul(value, NULL, 10);
 58       }
 59       if (strcmp(name, "blue") == 0)
 60       {
 61         blue = strtoul(value, NULL, 10);
 62       }
 63     } while (repeat);
 64     
 65     // Обработав данные запроса POST, приказываем браузеру 
 66     // перезагрузить страницу при помощи метода GET:
 67     server.httpSeeOther(PREFIX);
 68 //    Serial.print(name);
 69 //    Serial.println(value);
 70 
 71     return;
 72   }
 73 
 74   /* при запросе GET или HEAD отправляем стандартное сообщение, что запрос был успешным. */
 75   server.httpSuccess();
 76 
 77   /* при запросе HEAD не показываем контент страницы */
 78   if (type == WebServer::GET)
 79   {
 80     /* сохраняем HTML в программной памяти при помощи макроса P() */
 81     P(message) = 
 82 "<!DOCTYPE html><html><head>"
 83   "<title>Webduino AJAX RGB Example</title>"
 84   "<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css' rel=stylesheet />"
 85   "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>"
 86   "<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>"
 87   "<style> body { background: black; } #red, #green, #blue { margin: 10px; } #red { background: #f00; } #green { background: #0f0; } #blue { background: #00f; } </style>"
 88   "<script>"
 89 
 90 // меняем цвет при движении мышью вверх, но не слайдером 
 91 // (к Arduino будет идти гораздо меньше трафика):
 92 //    "function changeRGB(event, ui) { var id = $(this).attr('id'); if (id == 'red') $.post('/rgb', { red: ui.value } ); if (id == 'green') $.post('/rgb', { green: ui.value } ); if (id == 'blue') $.post('/rgb', { blue: ui.value } ); } "
 93 //    "$(document).ready(function(){ $('#red, #green, #blue').slider({min: 0, max:255, change:changeRGB}); });"
 94 
 95 // меняем цвет слайдером и мышью (к Arduino будет идти меньше трафика):
 96     "function changeRGB(event, ui) { jQuery.ajaxSetup({timeout: 110}); /* чтобы случайно не устроить DDOS для Arduino, имеет смысл поменять это пороговое значение, чтобы оно лучше подходило вашей системе */ var id = $(this).attr('id'); if (id == 'red') $.post('/rgb', { red: ui.value } ); if (id == 'green') $.post('/rgb', { green: ui.value } ); if (id == 'blue') $.post('/rgb', { blue: ui.value } ); } "
 97     "$(document).ready(function(){ $('#red, #green, #blue').slider({min: 0, max:255, change:changeRGB, slide:changeRGB}); });"
 98 
 99   "</script>"
100 "</head>"
101 "<body style='font-size:62.5%;'>"
102   "<div id=red></div>"
103   "<div id=green></div>"
104   "<div id=blue></div>"
105 "</body>"
106 "</html>";
107 
108     server.printP(message);
109   }
110 }
111 
112 void setup()
113 {
114   pinMode(RED_PIN, OUTPUT);
115   pinMode(GREEN_PIN, OUTPUT);
116   pinMode(BLUE_PIN, OUTPUT);
117 
118 //  Serial.begin(9600);
119 
120   // инициируем коммуникацию между библиотекой Ethernet и платой Wiznet:
121   Ethernet.begin(mac, ip);
122 
123   /* регистрируем команду, вызываемую по умолчанию (активируется при запросе http://x.x.x.x/rgb) */
124   webserver.setDefaultCommand(&rgbCmd);
125 
126   /* приказываем серверу ждать подключений */
127   webserver.begin();
128 }
129 
130 void loop()
131 {
132   // вечно обрабатываем входящие соединения (по одному за раз):
133   webserver.processConnection();
134 //  Serial.print(red);
135 //  Serial.print(" ");
136 //  Serial.print(green);
137 //  Serial.print(" ");
138 //  Serial.println(blue);
139   analogWrite(RED_PIN, red);
140   analogWrite(GREEN_PIN, green);
141   analogWrite(BLUE_PIN, blue);
142 }

См.также

Внешние ссылки