products:laboratory_iot_c:exp62 [PinLab Docs]

Эксперимент 62. Управление цветом через веб-форму

Мы уже научились создавать простой веб-сервер, отправлять веб-страницы в браузер клиента и отправлять данные из формы на странице обратно на сервер. Теперь мы сделаем ночник с полноцветным светодиодом, цветом и яркостью которого можно управлять по Wi-Fi через веб-интерфейс.

Для управления RGB светодиодом необходимо передавать на сервер 3 параметра — яркость красного, синего и зеленого цветов.

Соберем схему с RGB светодиодом

Схема эксперимента

Рисунок 1. Монтажная схема эксперимента

Программный код эксперимента

rgb_page.html

<html>
    <head>
    </head>
    <body>
        <form action="/">
            Red: <input type="number" name="r" min="0" max="255" value="<=VALUE=R=>"> <br/>
            Green: <input type="number" name="g" min="0" max="255" value="<=VALUE=G=>"> <br/>
            Blue: <input type="number" name="b" min="0" max="1023" value="<=VALUE=B=>"> <br/>
            <input type="submit" value="Send">
        </form>
    </body>
</html>

Теперь наша форма имеет три текстовых поля с именами r, g и b для ввода яркости красного, зеленого и синего цветов соответственно. Также мы вставили три метки, чтобы подменять их на текущее значение яркости перед отправкой страницы пользователю.

Код программы:

Exp62.ino

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
 
#define WIFI_NAME     "WiFi_Name"
#define WIFI_PASSWORD "WiFi_Password"
 
#define PIN_LED_R 13
#define PIN_LED_G 14
#define PIN_LED_B 15
 
ESP8266WebServer server(80);
 
void indexPage() {
  int duty_r = 128;
  int duty_g = 128;
  int duty_b = 128;
 
  if (server.hasArg("r")) duty_r = server.arg("r").toInt(); 
  if (server.hasArg("g")) duty_g = server.arg("g").toInt();
  if (server.hasArg("b")) duty_b = server.arg("b").toInt();
 
  analogWrite(PIN_LED_R, 255 - duty_r);
  analogWrite(PIN_LED_G, 255 - duty_g);
  analogWrite(PIN_LED_B, 255 - duty_b);
 
  String page = "<!DOCTYPE html>";
  page += "<html>";
  page += "<head>";
  page += "</head>";
  page += "<body>";
  page += R"(<form action="/">)";
  page += R"(Red: <input type="number" name="r" min="0" max="255" value="<=VALUE=R=>"> <br/>)";
  page += R"(Green: <input type="number" name="g" min="0" max="255" value="<=VALUE=G=>"> <br/>)";
  page += R"(Blue: <input type="number" name="b" min="0" max="255" value="<=VALUE=B=>"> <br/>)";
  page += R"(<input type="submit" value="Send">)";
  page += "</form>";
  page += "</body>";
  page += "</html>";
 
  page.replace("<=VALUE=R=>", String(duty_r));
  page.replace("<=VALUE=G=>", String(duty_g));
  page.replace("<=VALUE=B=>", String(duty_b));
  server.send(200, "text/html", page); 
}
 
void setup() {
  Serial.begin(9600);
  Serial.println();
  pinMode(PIN_LED_R, OUTPUT);
  pinMode(PIN_LED_G, OUTPUT);
  pinMode(PIN_LED_B, OUTPUT);
  analogWriteRange(256);
  analogWrite(PIN_LED_R, 128);
  analogWrite(PIN_LED_G, 128);
  analogWrite(PIN_LED_B, 128);
 
  Serial.print("Connecting to WiFi"); 
  WiFi.mode(WIFI_STA);                                         
  WiFi.begin(WIFI_NAME, WIFI_PASSWORD);
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(500);
  }
  Serial.println();
  Serial.println("WiFi connected");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
 
  server.on("/", indexPage);
  server.begin(); 
}
void loop() {
  server.handleClient(); 
}

Первым делом в коде программы нужно заменить WiFi_Name на имя нужной сети, а WiFi_Password на пароль от нее.

Следует обратить внимание, что перед установкой яркости светодиода мы вычитаем полученные данные из числа 255. Это сделано потому, что наш RGB светодиод с общим анодом (имеет общий плюс) и мы установили диапазон аналогового выходов на 256.

  analogWriteRange(256);