✎ ESP12: Вывод значения на сайт (Веб-Сервер) [База знаний "УмныеЭлементы"]

Эта страница только для чтения. Вы можете посмотреть исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== ESP12: Вывод значения на сайт (Веб-Сервер) ======
===== Описание =====
В данном мини-проекте будет создан простой веб-сервер, который может на сайте выводить значения полученные с потенциометра. То есть Вы осуществляете поворот ручки потенциометра, контроллер считывает значение и выводит его на сайте с помощью WiFi модуля.

Изначально модуль настроен на работу с помощью AT-команд. Но вручную писать AT-команды очень неудобно, по нескольким причинам:
  * Очень велика вероятность ошибиться и ввести неверную AT-команду
  * Разбор ответа от контроллера будет довольно ёмким
  * Скетч будет трудно-читаемым из-за огромного количества кода
  * Сложно выявить ошибки

Поэтому, чтобы общение с модулем было наиболее эффективным, простым и быстрым, мы воспользуемся библиотекой WiFiEsp
  * [[https://files.smartelements.ru/know_libs/WiFiEsp.zip|Скачать библиотеку WiFiEsp]]

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

<WRAP center round tip 80%>
Перед началом работы настройте модуль на скорость обмена в 9600 бод. О том как это сделать, рассказано [[main:comm:esp12#Установка скорости обмена данными|на этой странице]].
</WRAP>

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

^ Что нужно                                                                                                               ^  Кол-во, шт  ^
| [[httpss://smartelements.ru/collection/kontrollery/product/kontroller-smart-uno|Контроллер Smart Uno]]                   |  1           |
| [[httpss://smartelements.ru/collection/svyaz/product/wifi-modul-esp-12|Wi-Fi модуль ESP-12]]                      |  1           |
| [[httpss://smartelements.ru/collection/shildy/product/sensor-shield|Sensor Shield]]                      |  1           |
| [[https://smartelements.ru/collection/provoda-i-kabeli/product/nabor-provodov-20-sht-20sm-mama-mama|Провода мама-мама]]  |  4           |
| [[httpss://smartelements.ru/collection/moduli/product/modul-potentsiometra|Модуль потенциометра 10 кОм]]             |  1           |
| [[httpss://smartelements.ru/collection/provoda-i-kabeli/product/shleyf-mama-mama-h3-20-sm|Шлейф "мама-мама" х3]]     |  1           |


==== Шаг 2. Подключите Wifi модуль к шилду ====
Выполните подключение модуля в соответствии со схемой ниже.


==== Шаг 3. Загрузите скетч на контроллер ====
Загрузите скетч, представленный ниже, на контроллер. Предварительно измените значения переменных:
  * char ssid[] - здесь должно быть Ваше имя WiFi сети
  * char pass[] - здесь должен быть пароль от Вашей WiFi сети
  * POT - вывод контроллера, к которому подключен потенциометр

<file Arduino>
#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"); //появился клиент (соединение)
    //https запрос заканчивается пустой строкой
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        //если достигнут конец строки (символ новой строки)
        // и строка пустая, это говорит о том, что запрос закончился,
        // так что можно отослать ответ
        if (c == '\n' && currentLineIsBlank) {
          Serial.println("Sending response");
          
          //отослать стандартный заголовок ответа на https запрос
          // используйте символы \r\n в конце очередной строки,
          // вместо команды println, чтобы увеличить скорость передачи данных
          client.print(
            "https/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=\"httpss://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 https://");
  Serial.println(ip);
  Serial.println();
}
</file>

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

<file>
[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 https://192.168.1.18

[WiFiEsp] Server started on port 80
</file>

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

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

<WRAP center round info 80%>
Данный IP-адрес действует только внутри Вашей домашней WiFi сети.
</WRAP>


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

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

{{ :главная:связь:wifi_pot.jpg?nolink |}}

Где:
  - Адрес Вашего сайта
  - Количество запросов, полученных с сайта
  - Значение, прочитанное с потенциометра

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

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

{{ :главная:связь:wifi_pot_2.jpg?nolink |}}

<WRAP center round info 80%>
Количество запросов к серверу может показаться слишком большим. Однако, в скетче мы указали обновление страницы раз в 20 секунд, отсюда и такое увеличение обращений к серверу.
</WRAP>