Arduino:Примеры/Web AjaxRGB
Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
| Содержание | Знакомство с Arduino | Продукты | Основы | Справочник языка Arduino | Примеры | Библиотеки | Хакинг | Изменения | Сравнение языков Arduino и Processing |
Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.
Управление 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>"
"<title>Webduino AJAX RGB Example</title>"
"<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css' rel=stylesheet />"
"<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>"
"<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>"
"<style> body { background: black; } #red, #green, #blue { margin: 10px; } #red { background: #f00; } #green { background: #0f0; } #blue { background: #00f; } </style>"
"<script>"
// меняем цвет при движении мышью вверх, но не слайдером
// (к Arduino будет идти гораздо меньше трафика):
// "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 } ); } "
// "$(document).ready(function(){ $('#red, #green, #blue').slider({min: 0, max:255, change:changeRGB}); });"
// меняем цвет слайдером и мышью (к Arduino будет идти меньше трафика):
"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 } ); } "
"$(document).ready(function(){ $('#red, #green, #blue').slider({min: 0, max:255, change:changeRGB, slide:changeRGB}); });"
"</script>"
"</head>"
"<body style='font-size:62.5%;'>"
"<div id=red></div>"
"<div id=green></div>"
"<div id=blue></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);
}
См.также
Внешние ссылки
| Arduino продукты | |
|---|---|
| Начальный уровень | Arduino Uno • Arduino Leonardo • Arduino 101 • Arduino Robot • Arduino Esplora • Arduino Micro • Arduino Nano • Arduino Mini • Arduino Starter Kit • Arduino Basic Kit • MKR2UNO • TFT-дисплей Arduino |
| Продвинутые функции | Arduino Mega 2560 • Arduino Zero • Arduino Due • Arduino Mega ADK • Arduino Pro • Arduino Motor Shield • Arduino USB Host Shield • Arduino Proto Shield • MKR Proto Shield • MKR Proto Large Shield • Arduino ISP • Arduino USB 2 Serial Micro • Arduino Mini USB Serial Adapter |
| Интернет вещей | Arduino Yun • Arduino Ethernet • Arduino MKR1000 • Arduino WiFi 101 Shield • Arduino GSM Shield V2 • Arduino WiFi Shield • Arduino Wireless SD Shield • Arduino Wireless Proto Shield • Arduino Ethernet Shield V2 • Arduino Yun Shield • Arduino MKR1000 Bundle |
| Носимые устройства | Arduino Gemma • Lilypad Arduino Simple • Lilypad Arduino Main Board • Lilypad Arduino USB • LilyPad Arduino SimpleSnap |
| 3D-печать | Arduino Materia 101 |
| Устаревшие устройства | - |
| Примеры Arduino | |
|---|---|
| Стандартные функции | |
| Основы |
|
| Цифровой сигнал |
|
| Аналоговый сигнал |
|
| Связь |
|
| Управляющие структуры |
|
| Датчики |
|
| Дисплей |
Примеры, объясняющие основы управления дисплеем:
|
| Строки |
|
| USB (для Leonardo, Micro и Due плат) |
В этой секции имеют место примеры, которые демонстрируют использование библиотек, уникальных для плат Leonardo, Micro и Due.
|
| Клавиатура |
|
| Мышь |
|
| Разное | |
Категории:
- Страницы, использующие повторяющиеся аргументы в вызовах шаблонов
- Справочник языка Arduino
- Arduino
- Перевод от Сubewriter
- Проверка:myagkij
- Оформление:myagkij
- Редактирование:myagkij
- Страницы, где используется шаблон "Навигационная таблица/Телепорт"
- Страницы с телепортом
- Пример
- Примеры
- Пример программирования Arduino
- Примеры программирования Arduino
