ESP12: Вывод значения на сайт (Веб-Сервер)

Описание

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

Изначально модуль настроен на работу с помощью AT-команд. Но вручную писать AT-команды очень неудобно, по нескольким причинам:

  • Очень велика вероятность ошибиться и ввести неверную AT-команду
  • Разбор ответа от контроллера будет довольно ёмким
  • Скетч будет трудно-читаемым из-за огромного количества кода
  • Сложно выявить ошибки

Поэтому, чтобы общение с модулем было наиболее эффективным, простым и быстрым, мы воспользуемся библиотекой WiFiEsp

Скачайте и установите данную библиотеку в среду разработки Arduino IDE.

Перед началом работы настройте модуль на скорость обмена в 9600 бод. О том как это сделать, рассказано на этой странице.

Шаг 1. Вам потребуется

Возьмите необходимые для проекта элементы, представленные в таблице ниже.

Шаг 2. Подключите Wifi модуль к шилду

Выполните подключение модуля в соответствии со схемой ниже.

Шаг 3. Загрузите скетч на контроллер

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

  • char ssid[] - здесь должно быть Ваше имя WiFi сети
  • char pass[] - здесь должен быть пароль от Вашей WiFi сети
  • POT - вывод контроллера, к которому подключен потенциометр
#include "WiFiEsp.h" //подключение библиотеки WiFiEsp
 
// Эмуляция Serial соединения
#ifndef HAVE_HWSERIAL1
#include "SoftwareSerial.h"
SoftwareSerial wifiSerial(6, 7); // TX - модуля , RX - модуля
#endif
 
char ssid[] = "SmartElements"; //имя сети wifi
char pass[] = "1234567890"; //пароль от сети wifi
int status = WL_IDLE_STATUS; //статус сети wifi
int reqCount = 0; //количество полученных запросов
const int POT = A0; //вывод подключения модуля потенциометра
 
WiFiEspServer server(80);
 
 
void setup()
{
  //инициализация Serial-соединения для отладки
  Serial.begin(9600);
  //инициализация Serial-соединения для ESP-модуля
  wifiSerial.begin(9600);
  //инициализация ESP модуля
  WiFi.init(&wifiSerial);
 
  //проверка существования модуля
  if (WiFi.status() == WL_NO_SHIELD) {
    Serial.println("WiFi module not present");
    //если модуля нет, то не продолжать работу далее
    while (true);
  }
 
  //попытка подключения к wifi сети
  while (status != WL_CONNECTED) {
    Serial.print("Attempting to connect to WPA SSID: "); //вывод надписи о попытке подключения
    Serial.println(ssid); //вывод названия сети
    //подключение к сети, используя имя и пароль
    status = WiFi.begin(ssid, pass);
  }
 
  Serial.println("You're connected to the network");
  printWifiStatus(); //вывод статуса подключения
 
  //инициализация веб-сервера на порту № 80
  server.begin();
}
 
 
void loop()
{
  //ожидание входящих клиентов
  WiFiEspClient client = server.available();
  if (client) {
    Serial.println("New client"); //появился клиент (соединение)
    //http запрос заканчивается пустой строкой
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        //если достигнут конец строки (символ новой строки)
        // и строка пустая, это говорит о том, что запрос закончился,
        // так что можно отослать ответ
        if (c == '\n' && currentLineIsBlank) {
          Serial.println("Sending response");
 
          //отослать стандартный заголовок ответа на http запрос
          // используйте символы \r\n в конце очередной строки,
          // вместо команды println, чтобы увеличить скорость передачи данных
          client.print(
            "HTTP/1.1 200 OK\r\n"
            "Content-Type: text/html\r\n"
            "Connection: close\r\n"  //соединение будет закрыто после завершения ответа
            "Refresh: 20\r\n"        //обновлять страницу автоматически каждые 20 секунд
            "\r\n");
          client.print("<!DOCTYPE HTML>\r\n");
          client.print("<html>\r\n");
          client.print("<head>\r\n");
          client.print("<meta charset=\"utf-8\">\r\n");
          client.print("<title>Данные модуля</title>\r\n");
          client.print("</head>\r\n");
          client.print("<h1>Привет от SmartElements!</h1>\r\n");
          client.print("<p>Данные получены с помощью ");
          client.print("<a href=\"https://smartelements.ru/collection/svyaz/product/wifi-modul-esp-12\">");
          client.print("крутого Wi-Fi модуля</a></p>\r\n");
          client.print("Количество полученных запросов: ");
          client.print(++reqCount);
          client.print("<br>\r\n");
          client.print("Значение потенциометра, подключенного к выводу A0: ");
          client.print(analogRead(POT)); //вывести текущее значение потенциометра
          client.print("<br>\r\n");
          client.print("</html>\r\n");
          break;
        }
        if (c == '\n') {
          //начало новой строки
          currentLineIsBlank = true;
        }
        else if (c != '\r') {
          // получен очередной символ текущей строки
          currentLineIsBlank = false;
        }
      }
    }
    //время для получения браузером ответа
    delay(10);
 
    //закрытие соединения
    client.stop();
    Serial.println("Client disconnected");
  }
}
 
 
void printWifiStatus()
{
  //вывод названия сети
  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());
 
  //вывод полученного модулем IP-адреса
  IPAddress ip = WiFi.localIP();
  Serial.print("IP Address: ");
  Serial.println(ip);
 
  //вывод информации о адресе в браузере
  Serial.println();
  Serial.print("To see this page in action, open a browser to http://");
  Serial.println(ip);
  Serial.println();
}

Шаг 4. Где запущен сервер

Далее, откройте монитор Serial-порта в Arduino IDE, и посмотрите параметры подключения. Вы увидите информацию вида:

[WiFiEsp] Initializing ESP module
[WiFiEsp] Initilization successful - 1.5.4
Attempting to connect to WPA SSID: SmartElements
[WiFiEsp] Connected to SmartElements
You're connected to the network
SSID: SmartElements
IP Address: 192.168.1.18

To see this page in action, open a browser to http://192.168.1.18

[WiFiEsp] Server started on port 80

Где:

  • SSID - имя сети, к которой подключился модуль
  • IP Address - IP адрес модуля

Скопируйте адрес сайта, в нашем случае он выглядит так:

 http://192.168.1.18 

Данный IP-адрес действует только внутри Вашей домашней WiFi сети.

Шаг 5. Результат

Откройте браузер, который Вы используете для выхода в интернет. И в строке ввода адреса сайта, вставьте адрес, скопированный из шага 4. После этого загрузится страница вида:

Где:

  1. Адрес Вашего сайта
  2. Количество запросов, полученных с сайта
  3. Значение, прочитанное с потенциометра

Шаг 6. Изменение значений

Поверните потенциометр в любую сторону, обновите страницу браузера и Вы увидите новое значение потенциометра (и обновлённое количество запросов).

Количество запросов к серверу может показаться слишком большим. Однако, в скетче мы указали обновление страницы раз в 20 секунд, отсюда и такое увеличение обращений к серверу.