Веб-сервер ESP8266 NodeMCU: управление двигателем постоянного тока (Arduino IDE)

В этом руководстве мы создадим веб-сервер на ESP8266 NodeMCU для удаленного управления двигателем постоянного тока. Веб-сервер будет отображать веб-страницу с кнопками для вращения мотора вперед, назад и остановки. Для управления моторами мы будем использовать драйвер двигателя L298N, а ESP8266 будет запрограммирован с помощью Arduino IDE.

Веб-сервер ESP8266 NodeMCU для управления двигателем постоянного тока Arduino IDE

Для лучшего понимания того, как работает этот проект, мы рекомендуем ознакомиться с нашим руководством по началу работы с DC-мотором и ESP8266:

ESP8266 NodeMCU с DC-мотором и драйвером L298N – управление скоростью и направлением (Arduino IDE)

Предварительные требования 

Прежде чем приступить к руководству, убедитесь, что вы выполнили следующие предварительные требования.

ESP8266 подключен к DC-мотору и драйверу L298N

1) Необходимые компоненты 

Для выполнения этого руководства вам понадобятся следующие компоненты:

Мини DC-мотор
Драйвер двигателя L298N
ESP8266 (читайте Сравнение лучших плат ESP8266)
Соединительные провода
Внешний источник питания для моторов – мы будем использовать 4 батарейки AA

Вы можете использовать ссылки выше или перейти на MakerAdvisor.com/tools, чтобы найти все детали для ваших проектов по лучшей цене!

2) Arduino IDE и дополнение для плат ESP8266 

Мы будем программировать ESP8266 с помощью Arduino IDE. Поэтому у вас должны быть установлены платы ESP8266 в вашей Arduino IDE, если вы этого еще не сделали.

Установка платы ESP8266 NodeMCU в Arduino IDE 2 (Windows, Mac OS X, Linux)

Если вы хотите использовать VS Code с расширением PlatformIO, следуйте следующему руководству, чтобы узнать, как программировать ESP8266:

Начало работы с VS Code и PlatformIO IDE для ESP32 и ESP8266 (Windows, Mac OS X, Linux Ubuntu)

3) Плагин загрузки файловой системы 

Для загрузки файлов HTML и CSS, необходимых для этого проекта, в файловую систему ESP8266 (LittleFS) мы будем использовать плагин для Arduino IDE: LittleFS Filesystem uploader. Следуйте следующему руководству, чтобы установить плагин загрузки файловой системы в Arduino 2, если вы этого еще не сделали:

Arduino IDE 2: установка загрузчика LittleFS для ESP8266 NodeMCU (загрузка файлов в файловую систему)

Если вы используете VS Code с расширением PlatformIO, прочитайте следующее руководство, чтобы узнать, как загружать файлы в файловую систему:

ESP8266 NodeMCU с VS Code и PlatformIO: загрузка файлов в файловую систему (LittleFS)

4) Установка библиотек 

Мы создадим веб-сервер, используя следующие библиотеки:

Вы можете установить эти библиотеки с помощью Arduino Library Manager. Перейдите в Sketch > Include Library > Manage Libraries и найдите названия библиотек.

4) Схема подключения 

На следующей схеме показано, как подключить DC-мотор к ESP8266 с помощью драйвера L298N.

Не знакомы с драйвером L298N? Сначала ознакомьтесь с этим руководством: ESP8266 NodeMCU с DC-мотором и драйвером L298N – управление скоростью и направлением (Arduino IDE)

Мотор, которым мы будем управлять, подключен к выходным контактам мотора A, поэтому нам нужно подключить контакты ENABLEA, INPUT1 и INPUT2 драйвера к ESP8266. Следуйте приведенной ниже схеме подключения DC-мотора и драйвера L298N к ESP8266.

Схема подключения ESP8266 к DC-мотору и драйверу L298N

	Input 1	Input 2	Enable	GND
LN298N Motor Driver	Input 1	Input 2	Enable	GND
ESP8266	GPIO 12 (D6)	GPIO 14 (D5)	GPIO 13 (D7)	GND

Мы используем GPIO, указанные в таблице выше, для подключения к драйверу мотора. Вы можете использовать любые другие подходящие GPIO, при условии, что вы соответствующим образом измените код. Узнайте больше о GPIO ESP8266: Справочник по распиновке ESP8266: какие GPIO следует использовать?

Питание драйвера LN298N

DC-мотор требует большого скачка тока для начала вращения, поэтому моторы должны питаться от внешнего источника питания, отдельного от ESP8266. В качестве примера мы используем 4 батарейки AA, но вы можете использовать любой другой подходящий источник питания. В этой конфигурации вы можете использовать источник питания напряжением от 6 В до 12 В.

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

Мы рекомендуем припаять керамический конденсатор емкостью 0,1 мкФ к положительному и отрицательному выводам DC-мотора, как показано на схеме, чтобы сгладить любые скачки напряжения. (Примечание: моторы также работают без конденсатора.)

Обзор проекта 

На следующем изображении показана веб-страница, которую вы создадите для этого проекта.

Веб-страница имеет три кнопки для управления DC-мотором. Каждая кнопка отправляет запрос на разный URL, чтобы ESP8266 знал, какая кнопка была нажата, и действовал соответствующим образом.

ESP8266 NodeMCU управление DC-мотором через веб-сервер

Кнопка Forward: отправляет запрос на URL /forward – мотор будет вращаться вперед
Кнопка Backward: отправляет запрос на URL /backward – мотор будет вращаться назад
Кнопка Stop: отправляет запрос на URL /stop – мотор остановится

Для создания этой веб-страницы мы создадим HTML-файл (index.html) и CSS-файл (style.css), которые будут сохранены в файловой системе ESP8266 (LittleFS).

Организация файлов 

Файлы, которые вы хотите загрузить в файловую систему ESP, должны быть помещены в папку data внутри папки проекта. Мы переместим два файла в эту папку:

index.html для создания веб-страницы;
style.css для стилизации веб-страницы;

Веб-сервер ESP8266 с внешними файлами - папка data

Вы должны сохранить файлы HTML, CSS и JavaScript внутри папки data в папке скетча Arduino, как показано на предыдущей схеме. Мы загрузим эти файлы в файловую систему ESP8266 (LittleFS).

Вы можете скачать все файлы проекта:

Скачать все файлы проекта Arduino

HTML-файл 

Создайте файл с именем index.html со следующим содержимым:

<!DOCTYPE html>
<html>
  <head>
    <title>ESP IOT DASHBOARD</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <script src="https://kit.fontawesome.com/0294e3a09e.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="topnav">
      <h1>CONTROL DC MOTOR</h1>
    </div>
    <div class="content">
      <div class="card-grid">
        <div class="card">
          <p class="card-title"><i class="fa-solid fa-gear"></i> DC Motor A</p>
          <p>
            <a href="forward"><button class="button-on"><i class="fa-solid fa-arrow-up"></i> FORWARD</button></a>
            <a href="backward"><button class="button-off"><i class="fa-solid fa-arrow-down"></i> BACKWARD</button></a>
          </p>
          <p>
            <a href="stop"><button class="button-stop"><i class="fa-solid fa-stop"></i> STOP</button></a>
          </p>
        </div>
       </div>
    </div>
  </body>
</html>

Просмотр исходного кода

В этом HTML-файле мы создаем три кнопки, которые при нажатии отправляют запрос на разные URL.

FORWARD: /forward
BACKWARD: /backward
STOP: /stop

<p>
    <a href="forward"><button class="button-on"><i class="fa-solid fa-arrow-up"></i> FORWARD</button></a>
    <a href="backward"><button class="button-off"><i class="fa-solid fa-arrow-down"></i> BACKWARD</button></a>
</p>
<p>
    <a href="stop"><button class="button-stop"><i class="fa-solid fa-stop"></i> STOP</button></a>
</p>

CSS-файл 

Создайте файл с именем style.css со следующим содержимым для стилизации веб-страницы.

html {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
h1 {
    font-size: 1.8rem;
    color: white;
}

.topnav {
    overflow: hidden;
    background-color: #0A1128;
}

body {
    margin: 0;
}

.content {
    padding: 50px;
}

.card-grid {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.card {
    background-color: white;
    box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
}

.card-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #034078
}

.state {
    font-size: 1.2rem;
    color:#1282A2;
}

button {
    border: none;
    color: #FEFCFB;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    width: 150px;
    border-radius: 4px;
    transition-duration: 0.4s;
}
.button-on {
    background-color:#034078;
}

.button-on:hover {
    background-color: #1282A2;
}

.button-off {
    background-color:#858585;
}
.button-off:hover {
    background-color: #252524;
}

.button-stop {
    background-color:#5e0f0f;
    width: 100%;
}
.button-stop:hover {
    background-color: #9b332c;
}

Просмотр исходного кода

Веб-сервер ESP8266: управление DC-мотором – скетч Arduino 

Следующий код создает веб-сервер, который обслуживает веб-страницу, созданную ранее, для удаленного управления DC-мотором через веб-браузер в локальной сети.

/*********
  Rui Santos & Sara Santos - Random Nerd Tutorials
  Complete instructions at https://RandomNerdTutorials.com/esp8266-nodemcu-web-server-dc-motor-arduino/
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <LittleFS.h>

// Motor A pins
int motor1Pin1 = 12;
int motor1Pin2 = 14;
int enable1Pin = 13;

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

// Initialize LittleFS
void initFS() {
  if (!LittleFS.begin()) {
    Serial.println("An error has occurred while mounting LittleFS");
  }
  else {
    Serial.println("LittleFS mounted successfully");
  }
}

void initWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("Connecting to WiFi ..");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print('.');
    delay(1000);
  }
  Serial.println(WiFi.localIP());
}

void moveForward(){
  Serial.println("Moving Forward");
  digitalWrite(enable1Pin, HIGH);
  digitalWrite(motor1Pin1, LOW);
  digitalWrite(motor1Pin2, HIGH);
}

void moveBackward(){
  Serial.println("Moving Backward");
  digitalWrite(enable1Pin, HIGH);
  digitalWrite(motor1Pin1, HIGH);
  digitalWrite(motor1Pin2, LOW);
}

void stopMotor(){
  digitalWrite(enable1Pin, LOW);
  digitalWrite(motor1Pin1, LOW);
  digitalWrite(motor1Pin2, LOW);
}

void setup() {
  Serial.begin(115200);

  // Set motor pins as outputs
  pinMode(motor1Pin1, OUTPUT);
  pinMode(motor1Pin2, OUTPUT);
  pinMode(enable1Pin, OUTPUT);

  initWiFi();
  initFS();

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/index.html", "text/html");
  });

  server.serveStatic("/", LittleFS, "/");

  server.on("/forward", HTTP_GET, [](AsyncWebServerRequest *request) {
    moveForward();
    request->send(LittleFS, "/index.html", "text/html", false);
  });

  server.on("/backward", HTTP_GET, [](AsyncWebServerRequest *request) {
    moveBackward();
    request->send(LittleFS, "/index.html", "text/html", false);
  });

  server.on("/stop", HTTP_GET, [](AsyncWebServerRequest *request) {
    stopMotor();
    request->send(LittleFS, "/index.html", "text/html", false);
  });

  server.begin();
}

void loop() {

}

Просмотр исходного кода

Вам нужно только вставить ваши сетевые учетные данные и загрузить образ файловой системы, и код сразу заработает.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_SSID";

Как работает код 

Продолжайте читать, чтобы узнать, как работает код, или перейдите к разделу Демонстрация.

Подключение библиотек

Сначала подключите необходимые библиотеки для подключения к Wi-Fi, создания веб-сервера и использования файловой системы LittleFS.

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <LittleFS.h>

Контакты мотора

Определите GPIO, которые будут управлять мотором.

// Motor A pins
int motor1Pin1 = 12;
int motor1Pin2 = 14;
int enable1Pin = 13;

Сетевые учетные данные

Вставьте ваши сетевые учетные данные в следующие переменные, чтобы ESP8266 мог подключиться к вашей сети.

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_SSID";

Создание объекта сервера

Создайте объект AsyncWebServer с именем server на порту 80.

AsyncWebServer server(80);

Инициализация LittleFS

Следующая функция initFS() инициализирует файловую систему LittleFS. Мы вызовем её позже в setup().

void initFS() {
  if (!LittleFS.begin()) {
    Serial.println("An error has occurred while mounting LittleFS");
  }
  else {
    Serial.println("LittleFS mounted successfully");
  }
}

Инициализация Wi-Fi

Функция initWiFi() подключается к Wi-Fi, используя SSID и пароль, которые вы определили ранее.

void initWiFi() {
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("Connecting to WiFi ..");
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print('.');
    delay(1000);
  }
  Serial.println(WiFi.localIP());
}

Функции управления DC-мотором

Мы создаем три функции для управления DC-мотором.

Функция moveForward() будет вращать мотор вперед.

void moveForward(){
  Serial.println("Moving Forward");
  digitalWrite(enable1Pin, HIGH);
  digitalWrite(motor1Pin1, LOW);
  digitalWrite(motor1Pin2, HIGH);
}

Функция moveBackward() вращает мотор назад.

void moveBackward(){
  Serial.println("Moving Backward");
  digitalWrite(enable1Pin, HIGH);
  digitalWrite(motor1Pin1, HIGH);
  digitalWrite(motor1Pin2, LOW);
}

Наконец, функция stopMotor() останавливает мотор, устанавливая все контакты мотора в LOW.

void stopMotor(){
  Serial.print("Motor Stopped")
  digitalWrite(enable1Pin, LOW);
  digitalWrite(motor1Pin1, LOW);
  digitalWrite(motor1Pin2, LOW);
}

setup()

В setup() инициализируйте Serial Monitor для отладки.

Serial.begin(115200);

Установите контакты мотора как выходы.

// Set motor pins as outputs
pinMode(motor1Pin1, OUTPUT);
pinMode(motor1Pin2, OUTPUT);
pinMode(enable1Pin, OUTPUT);

Инициализируйте Wi-Fi, вызвав функцию initWiFi().

initWiFi();

Инициализируйте файловую систему LittleFS, вызвав функцию initFS(), которую мы создали ранее.

initFS();

Обработка запросов

Затем настройте веб-сервер. Когда вы получаете запрос на корневой (/) URL – это происходит, когда вы обращаетесь к IP-адресу ESP – отправьте HTML-текст для создания веб-страницы:

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(LittleFS, "/index.html", "text/html");
});

Когда HTML-файл загружается в вашем браузере, он отправляет запрос на CSS-файл. Это статический файл, сохраненный в том же каталоге (LittleFS). Поэтому мы можем просто добавить следующую строку для обслуживания файлов в каталоге по запросу корневого URL – таким образом, CSS-файл будет обслуживаться автоматически.

server.serveStatic("/", LittleFS, "/");

Когда вы нажимаете кнопку Forward, вы отправляете запрос по пути /forward. Когда ESP8266 получает этот запрос, он вызывает функцию moveForward(), чтобы заставить мотор вращаться вперед.

server.on("/forward", HTTP_GET, [](AsyncWebServerRequest *request) {
  moveForward();
  request->send(LittleFS, "/index.html", "text/html", false);
});

Аналогично, когда вы нажимаете кнопку Backward, ESP8266 получает запрос по пути /backward. Когда это происходит, вызывается функция moveBackward(), чтобы заставить мотор вращаться в другом направлении.

server.on("/backward", HTTP_GET, [](AsyncWebServerRequest *request) {
  moveBackward();
  request->send(LittleFS, "/index.html", "text/html", false);
});

Когда вы нажимаете кнопку Stop, ESP8266 получает запрос по пути /stop и вызывает функцию stopMotor().

server.on("/stop", HTTP_GET, [](AsyncWebServerRequest *request) {
  stopMotor();
  request->send(LittleFS, "/index.html", "text/html", false);
});

Инициализация сервера

Наконец, вызовите метод begin() на объекте server для инициализации сервера.

server.begin();

Загрузка кода и файлов 

После ввода ваших сетевых учетных данных сохраните код. Перейдите в Sketch > Show Sketch Folder и создайте папку с именем data.

Внутри этой папки вы должны сохранить файлы HTML и CSS.

ESP8266 организация файлов для загрузки в LittleFS

Загрузка файлов в файловую систему 

Сохранив файлы HTML и CSS в папке data, вы можете загрузить их на плату. Убедитесь, что у вас установлен плагин загрузки файловой системы.

Выберите плату ESP8266, которую вы используете (Tools > Board), и выберите правильный COM-порт (Tools > Port).

Затем загрузите файлы на плату ESP8266. Нажмите [Ctrl] + [Shift] + [P] в Windows или [Cmd] + [Shift] + [P] в MacOS, чтобы открыть палитру команд. Найдите Upload LittleFS to Pico/ESP8266/ESP32 и нажмите на нее.

Важно: убедитесь, что Serial Monitor закрыт. В противном случае загрузка не удастся.

После нескольких секунд вы должны получить сообщение «Completed upload.». Файлы были успешно загружены в файловую систему ESP8266.

ESP8266 NodeMCU файлы успешно загружены в LittleFS

Загрузка кода 

Затем загрузите код на плату ESP8266 (убедитесь, что вы добавили ваши сетевые учетные данные в код).

Демонстрация 

Когда все успешно загружено, откройте Serial Monitor на скорости 115200 бод.

Нажмите кнопку RST на ESP8266, и он должен вывести IP-адрес ESP8266.

DC-мотор веб-сервер ESP8266 NodeMCU вывод IP-адреса

Подключив мотор к ESP8266 через драйвер L298N и подав питание от внешнего источника, откройте любой браузер в вашей локальной сети и введите IP-адрес ESP8266. Загрузится следующая веб-страница.

Нажимайте на кнопки для управления DC-мотором.

Сервер может обрабатывать несколько клиентов одновременно. Вы также можете управлять DC-мотором со своего смартфона, при условии, что он подключен к вашей локальной сети.

ESP8266 NodeMCU управление DC-мотором через веб-сервер со смартфона

Заключение 

В этом руководстве вы узнали, как создать простой асинхронный веб-сервер на ESP8266 для удаленного управления DC-мотором с компьютера или смартфона. Теперь вы можете расширить этот проект для управления большим количеством моторов или другими выходами, или даже для отображения показаний датчиков. Вы можете ознакомиться со следующими руководствами:

Если вы хотите узнать больше о создании веб-серверов с ESP8266 с нуля, мы рекомендуем ознакомиться с нашей эксклюзивной электронной книгой:

Создание веб-серверов с ESP32 и ESP8266 – электронная книга

Спасибо за чтение.