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

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

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

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

Контакты:

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


Управление RGB-светодиодом при помощи смартфона[1]

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

Код

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

См.также

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

  1. github.com - Web_AjaxRGB_mobile.ino