Ardudevelop.eu

Arduino & MicroPython: Innovate for All

Управление на 4 релета през WEB с ESP8266

Управление на 4 релета с ESP8266 Ръководство стъпка по стъпка

ESP8266 е мощен и достъпен модул с Wi-Fi свързаност, който може да се използва за управление на различни устройства. В тази статия ще разгледаме как да управляваме 4 релета, като използваме ESP8266 за създаване на уеб сървър, който ще ни позволи да контролираме състоянието на релетата дистанционно.

Необходими компоненти:

  • ESP8266 (например Wemos D1 Mini)
  • 4 релета. Може да използвате борд като този.
  • Свързващи кабели
  • Захранване за релетата
  • Wi-Fi рутер

Ако все още не сте добавили ESP8266 в Arduino IDE, може да прочетете как става това в статията ни: Добавяне на ESP8266 в Arduino IDE: Стъпка по стъпка

Схема на свързване на 4 релета с ESP8266

Управление на 4 релета с ESP8266 Ръководство стъпка по стъпка схема

За да свържете коректно схемата трябва да знаете диаграмата на пиновете (pinout) на дадената платформа. Тях може да ги видите в ревюто ни за: ESP8266 D1 Mini – Малък, но Мощен Wi-Fi Микроконтролер

Код за управление на 4 релета с ESP8266

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

// Задаване на пиновете за релетата
#define RELAY_1 D1
#define RELAY_2 D2
#define RELAY_3 D3
#define RELAY_4 D4

// Въведи твоята мрежова информация
const char* ssid = "xxxxxxxxxx"; // Заменете с вашето SSID
const char* password = "xxxxxxxxx"; // Заменете с вашата парола

// Създаваме уеб сървър на порт 80
ESP8266WebServer server(80);

// Променливи за състоянията на релетата
bool relay1State = false;
bool relay2State = false;
bool relay3State = false;
bool relay4State = false;

void setup() {
  // Настройка на релетата като изходи
  pinMode(RELAY_1, OUTPUT);
  pinMode(RELAY_2, OUTPUT);
  pinMode(RELAY_3, OUTPUT);
  pinMode(RELAY_4, OUTPUT);
  
  // Изключване на всички релета при стартиране
  digitalWrite(RELAY_1, LOW);  // Изключено състояние
  digitalWrite(RELAY_2, LOW);  // Изключено състояние
  digitalWrite(RELAY_3, LOW);  // Изключено състояние
  digitalWrite(RELAY_4, LOW);  // Изключено състояние

  // Започваме серийната комуникация
  Serial.begin(115200);

  // Свързване към Wi-Fi
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi...");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("Connected to WiFi");

  // Старт на уеб сървъра
  server.on("/", handleRoot);
  server.on("/toggleRelay1", toggleRelay1);
  server.on("/toggleRelay2", toggleRelay2);
  server.on("/toggleRelay3", toggleRelay3);
  server.on("/toggleRelay4", toggleRelay4);
  
  server.begin();
  Serial.println("HTTP server started");
}

void loop() {
  // Обработка на клиентски заявки
  server.handleClient();
}

// Главна страница с HTML интерфейс за управление на релетата
void handleRoot() {
  String html = "<!DOCTYPE html><html><head>";
  html += "<style>";
  html += "body { font-family: Arial; text-align: center; background-color: #f4f4f4; padding: 20px; }";
  html += ".relay { padding: 15px; margin: 10px; display: inline-block; background-color: #fff; border-radius: 10px; border: 1px solid #ccc; }";
  html += "button { padding: 10px 20px; font-size: 16px; border: none; background-color: #007bff; color: white; border-radius: 5px; }";
  html += "button:hover { background-color: #0056b3; }";
  html += ".status { font-weight: bold; color: green; }";
  html += "</style>";
  html += "</head><body>";
  html += "<h1>ESP8266 Relay Control</h1>";
  html += "<div class='relay'>";
  html += "<h3>Relay 1 - Status: " + String(relay1State ? "ON" : "OFF") + "</h3>";
  html += "<button onclick=\"location.href='/toggleRelay1'\">Toggle Relay 1</button>";
  html += "</div>";
  html += "<div class='relay'>";
  html += "<h3>Relay 2 - Status: " + String(relay2State ? "ON" : "OFF") + "</h3>";
  html += "<button onclick=\"location.href='/toggleRelay2'\">Toggle Relay 2</button>";
  html += "</div>";
  html += "<div class='relay'>";
  html += "<h3>Relay 3 - Status: " + String(relay3State ? "ON" : "OFF") + "</h3>";
  html += "<button onclick=\"location.href='/toggleRelay3'\">Toggle Relay 3</button>";
  html += "</div>";
  html += "<div class='relay'>";
  html += "<h3>Relay 4 - Status: " + String(relay4State ? "ON" : "OFF") + "</h3>";
  html += "<button onclick=\"location.href='/toggleRelay4'\">Toggle Relay 4</button>";
  html += "</div>";
  html += "</body></html>";
  
  server.send(200, "text/html", html);
}

// Функции за превключване на състоянието на всяко реле
void toggleRelay1() {
  relay1State = !relay1State;
  digitalWrite(RELAY_1, relay1State ? LOW : HIGH);  // Инвертирано управление на релето
  handleRoot();
}

void toggleRelay2() {
  relay2State = !relay2State;
  digitalWrite(RELAY_2, relay2State ? LOW : HIGH);  // Инвертирано управление на релето
  handleRoot();
}

void toggleRelay3() {
  relay3State = !relay3State;
  digitalWrite(RELAY_3, relay3State ? LOW : HIGH);  // Инвертирано управление на релето
  handleRoot();
}

void toggleRelay4() {
  relay4State = !relay4State;
  digitalWrite(RELAY_4, relay4State ? LOW : HIGH);  // Инвертирано управление на релето
  handleRoot();
}

Визуализация на WEB интерфейса

Управление на 4 релета през WEB с ESP8266-WEB интерфейс

Описание на кода

Кодът, който ще разгледаме, позволява на потребителя да управлява четири релета чрез уеб интерфейс. Когато ESP8266 се свърже към Wi-Fi мрежата, той стартира уеб сървър, който предоставя HTML страница за управление на релетата.

Включване на библиотеките

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

В началото включваме две библиотеки, които ни позволяват да работим с Wi-Fi и да създадем уеб сървър. Библиотеката ESP8266WiFi.h се използва за свързване на ESP8266 към безжична мрежа, докато ESP8266WebServer.h ни позволява да създадем и хостваме уеб сървър директно на устройството.

Дефиниране на пиновете за релетата

#define RELAY_1 D1
#define RELAY_2 D2
#define RELAY_3 D3
#define RELAY_4 D4

Тези дефиниции указват кои пинове на ESP8266 ще бъдат използвани за управление на четирите релета. Всеки пин контролира едно реле.

Wi-Fi настройки

const char* ssid = "xxxxxxxx";
const char* password = "xxxxxxxxx";

Тук задаваме името на мрежата (SSID) и паролата (PASSWORD), към която ESP8266 ще се свърже. За да използвате този код, е необходимо да въведете вашата собствена мрежова информация.

Уеб сървър

ESP8266WebServer server(80);

Създаваме уеб сървър на порт 80, който е стандартен HTTP порт. Всички заявки към този порт ще бъдат обработвани от нашия ESP8266.

Променливи за състоянието на релетата

bool relay1State = false;
bool relay2State = false;
bool relay3State = false;
bool relay4State = false;

Тези променливи съхраняват текущото състояние на всяко реле. По подразбиране, всички релета са изключени (стойност false).

Функция setup()

Функцията setup() се извиква само веднъж, когато ESP8266 стартира, и се използва за инициализация на пиновете и настройка на Wi-Fi връзката.

void setup() {
  pinMode(RELAY_1, OUTPUT);
  pinMode(RELAY_2, OUTPUT);
  pinMode(RELAY_3, OUTPUT);
  pinMode(RELAY_4, OUTPUT);
  
  digitalWrite(RELAY_1, LOW);
  digitalWrite(RELAY_2, LOW);
  digitalWrite(RELAY_3, LOW);
  digitalWrite(RELAY_4, LOW);

  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi...");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("Connected to WiFi");

  server.on("/", handleRoot);
  server.on("/toggleRelay1", toggleRelay1);
  server.on("/toggleRelay2", toggleRelay2);
  server.on("/toggleRelay3", toggleRelay3);
  server.on("/toggleRelay4", toggleRelay4);
  
  server.begin();
  Serial.println("HTTP server started");
}

Настройка на релетата:

Чрез pinMode(RELAY_X, OUTPUT) задаваме пиновете за релетата като изходи. След това с командите digitalWrite(RELAY_X, LOW) изключваме всички релета при стартиране на устройството.

Свързване на ESP8266 към Wi-Fi:

Чрез WiFi.begin(ssid, password) се опитваме да свържем ESP8266 към Wi-Fi мрежата, като изчакваме връзката с цикъл while (WiFi.status() != WL_CONNECTED). Когато връзката е установена, сървърът започва да работи.

Настройка на уеб сървъра:

Сървърът е конфигуриран да отговаря на различни заявки:

  • “/” показва главната страница на уеб интерфейса за управление на релетата.
  • /toggleRelay1, /toggleRelay2, /toggleRelay3, и /toggleRelay4 са крайни точки за превключване на състоянието на релетата.

Функция loop()

void loop() {
  server.handleClient();
}

Функцията loop() се изпълнява постоянно и следи за входящи клиентски заявки към уеб сървъра. Когато има заявка от браузър, server.handleClient() я обработва.

Функция handleRoot()

void handleRoot() {
  String html = "<!DOCTYPE html><html><head>";
  html += "<style>";
  html += "body { font-family: Arial; text-align: center; background-color: #f4f4f4; padding: 20px; }";
  html += ".relay { padding: 15px; margin: 10px; display: inline-block; background-color: #fff; border-radius: 10px; border: 1px solid #ccc; }";
  html += "button { padding: 10px 20px; font-size: 16px; border: none; background-color: #007bff; color: white; border-radius: 5px; }";
  html += "button:hover { background-color: #0056b3; }";
  html += ".status { font-weight: bold; color: green; }";
  html += "</style>";
  html += "</head><body>";
  html += "<h1>ESP8266 Relay Control</h1>";
  html += "<div class='relay'>";
  html += "<h3>Relay 1 - Status: " + String(relay1State ? "ON" : "OFF") + "</h3>";
  html += "<button onclick=\"location.href='/toggleRelay1'\">Toggle Relay 1</button>";
  html += "</div>";
  html += "<div class='relay'>";
  html += "<h3>Relay 2 - Status: " + String(relay2State ? "ON" : "OFF") + "</h3>";
  html += "<button onclick=\"location.href='/toggleRelay2'\">Toggle Relay 2</button>";
  html += "</div>";
  html += "<div class='relay'>";
  html += "<h3>Relay 3 - Status: " + String(relay3State ? "ON" : "OFF") + "</h3>";
  html += "<button onclick=\"location.href='/toggleRelay3'\">Toggle Relay 3</button>";
  html += "</div>";
  html += "<div class='relay'>";
  html += "<h3>Relay 4 - Status: " + String(relay4State ? "ON" : "OFF") + "</h3>";
  html += "<button onclick=\"location.href='/toggleRelay4'\">Toggle Relay 4</button>";
  html += "</div>";
  html += "</body></html>";
  
  server.send(200, "text/html", html);
}

Тази функция създава уеб страница с бутони за управление на всяко реле. Всеки бутон е свързан с крайна точка, която превключва състоянието на съответното реле.

Превключване на релетата

void toggleRelay1() {
  relay1State = !relay1State;
  digitalWrite(RELAY_1, relay1State ? LOW : HIGH);
  handleRoot();
}

void toggleRelay2() {
  relay2State = !relay2State;
  digitalWrite(RELAY_2, relay2State ? LOW : HIGH);
  handleRoot();
}

void toggleRelay3() {
  relay3State = !relay3State;
  digitalWrite(RELAY_3, relay3State ? LOW : HIGH);
  handleRoot();
}

void toggleRelay4() {
  relay4State = !relay4State;
  digitalWrite(RELAY_4, relay4State ? LOW : HIGH);
  handleRoot();
}

Всяка от тези функции превключва състоянието на съответното реле между включено (LOW) и изключено (HIGH) и актуализира уеб страницата с новото състояние.

Заключение

Този проект показва как лесно можем да управляваме няколко релета чрез ESP8266 и да създадем удобен уеб интерфейс за контрол. Това решение е подходящо за домашна автоматизация или други проекти, където се изисква дистанционно управление на устройства.