Cat hungry.png
Здравствуйте! Собираем деньги на перевод материалов по электронике(https://www.allaboutcircuits.com/education/). Реквизиты указаны здесь.

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

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

Перевод: Максим Кузьмин (Cubewriter)
Перевел 2686 статей для сайта.

Контакты:

Проверка/Оформление/Редактирование: Мякишев Е.А.


Управление 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. }

См.также

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

  1. github.com - Web_AjaxRGB.ino