Arduino:Примеры/Web AjaxRGB mobile: различия между версиями

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
м (Замена текста — «<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS">» на «<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">»)
 
Нет описания правки
Строка 9: Строка 9:
==Код==
==Код==


<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
<syntaxhighlight lang="c" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS">
/* Управление RGB-светодиодом при помощи смартфона (Webduino) */
/* Управление RGB-светодиодом при помощи смартфона (Webduino) */
#include "SPI.h"
#include "SPI.h"

Версия от 12:34, 20 мая 2023

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


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

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

Код

/* Управление RGB-светодиодом при помощи смартфона (Webduino) */
#include "SPI.h"
#include "Ethernet.h"
#include "WebServer.h"

// ПОСТАВЬТЕ ЗДЕСЬ СОБСТВЕННОЕ ЗНАЧЕНИЕ:
static uint8_t mac[6] = { 0x02, 0xAA, 0xBB, 0xCC, 0x00, 0x22 };

// ВЫСТАВЬТЕ ТУТ ЗНАЧЕНИЕ, СООТВЕТСТВУЮЩЕЕ СЕТИ ВАШЕГО ХОСТА:
static uint8_t ip[4] = { 192, 168, 1, 210 }; // area 51!

/* Все URL этого сервера будут начинаться с /rgb, потому что именно
 * так мы определили значение PREFIX. Мы также будем прослушивать 
 * порт 80, стандартный порт для HTTP */
#define PREFIX "/rgb"
WebServer webserver(PREFIX, 80);

#define RED_PIN 5
#define GREEN_PIN 3
#define BLUE_PIN 6

int red = 0;            // целое число для красного светодиода
int blue = 0;           // целое число для синего светодиода
int green = 0;          // целое число для зеленого светодиода

/* Это команда, используемая сервером по умолчанию. Она обрабатывает 
 * запросы GET и POST. При запросе GET она возвращает простую страницу 
 * с несколькими кнопками. При запросе POST она сохраняет полученное 
 * значение в переменные red/blue/green, тем самым меняя цвет 
 * RGB-светодиода */
void rgbCmd(WebServer &server, WebServer::ConnectionType type, char *, bool)
{
  if (type == WebServer::POST)
  {
    bool repeat;
    char name[16], value[16];
    do
    {
      /* Если данных, доступных для считывания, нет, то функция 
       * readPOSTparam() возвращает «false». Мы указываем в ней 
       * буферы для хранения строковых значений «name» и «value», 
       * а также длину этих буферов. */
      repeat = server.readPOSTparam(name, 16, value, 16);

      /* Это стандартная функция для сравнения строк. При точном 
       * соответствии она возвращает «0». Мы обращаемся к ней, 
       * спрашивая соответствие с параметрами red, blue и green */
      if (strcmp(name, "red") == 0)
      {
	/* Используем функцию strtoul(), чтобы преобразовать числовую  
	 * строку в целое число для переменных red, blue и green */
        red = strtoul(value, NULL, 10);
      }
      if (strcmp(name, "green") == 0)
      {
        green = strtoul(value, NULL, 10);
      }
      if (strcmp(name, "blue") == 0)
      {
        blue = strtoul(value, NULL, 10);
      }
    } while (repeat);
    
    // Обработав данные запроса POST, приказываем браузеру 
    // перезагрузить страницу при помощи метода GET:
    server.httpSeeOther(PREFIX);
//    Serial.print(name);
//    Serial.println(value);

    return;
  }

  /* при запросе GET или HEAD отправляем стандартное сообщение, что запрос был успешным. */
  server.httpSuccess();

  /* при запросе HEAD не показываем контент страницы */
  if (type == WebServer::GET)
  {
    /* сохраняем HTML в программной памяти при помощи макроса P() */
    P(message) = 
"<!DOCTYPE html><html><head>"
  "<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\">"
  "<title>Webduino RGB</title>"
  "<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css\" />"
  "<script src=\"http://code.jquery.com/jquery-1.6.4.min.js\"></script>"
  "<script src=\"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js\"></script>"
  "<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>"
  "<script>"
// Влечет более частые задержки в работе Arduino (чаще, чем в 
// Web_AjaxRGB.pde). Возможная причина в разных событиях, запускающих запросы AJAX
    "$(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 } ); });});"
  "</script>"
"</head>"
"<body>"
  "<div data-role=\"header\" data-position=\"inline\"><h1>Webduino RGB</h1></div>"
    "<div class=\"ui-body ui-body-a\">"
      "<input type=\"range\" name=\"slider\" id=\"red\" value=\"0\" min=\"0\" max=\"255\"  />"
      "<input type=\"range\" name=\"slider\" id=\"green\" value=\"0\" min=\"0\" max=\"255\"  />"
      "<input type=\"range\" name=\"slider\" id=\"blue\" value=\"0\" min=\"0\" max=\"255\"  />"
    "</div>"
  "</body>"
"</html>";

    server.printP(message);
  }
}

void setup()
{
  pinMode(RED_PIN, OUTPUT);
  pinMode(GREEN_PIN, OUTPUT);
  pinMode(BLUE_PIN, OUTPUT);

//  Serial.begin(9600);

  // инициируем коммуникацию между библиотекой Ethernet и платой Wiznet: 
  Ethernet.begin(mac, ip);

  /* регистрируем команду, вызываемую по умолчанию (активируется при запросе http://x.x.x.x/rgb) */
  webserver.setDefaultCommand(&rgbCmd);

  /* приказываем серверу ждать подключений */
  webserver.begin();
}

void loop()
{
  // вечно обрабатываем входящие соединения (по одному за раз):
  webserver.processConnection();
//  Serial.print(red);
//  Serial.print(" ");
//  Serial.print(green);
//  Serial.print(" ");
//  Serial.println(blue);
  analogWrite(RED_PIN, red);
  analogWrite(GREEN_PIN, green);
  analogWrite(BLUE_PIN, blue);
}

См.также

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

  1. ↑ github.com - Web_AjaxRGB_mobile.ino
Источник — http://wikihandbk.com/ruwiki/index.php?title=Arduino:Примеры/Web_AjaxRGB_mobile&oldid=7735786