ESP12: Вывод значения на сайт (Веб-Сервер)
Описание
В данном мини-проекте будет создан простой веб-сервер, который может на сайте выводить значения полученные с потенциометра. То есть Вы осуществляете поворот ручки потенциометра, контроллер считывает значение и выводит его на сайте с помощью WiFi модуля.
Изначально модуль настроен на работу с помощью AT-команд. Но вручную писать AT-команды очень неудобно, по нескольким причинам:
- Очень велика вероятность ошибиться и ввести неверную AT-команду
- Разбор ответа от контроллера будет довольно ёмким
- Скетч будет трудно-читаемым из-за огромного количества кода
- Сложно выявить ошибки
Поэтому, чтобы общение с модулем было наиболее эффективным, простым и быстрым, мы воспользуемся библиотекой WiFiEsp
Скачайте и установите данную библиотеку в среду разработки Arduino IDE.
Перед началом работы настройте модуль на скорость обмена в 9600 бод. О том как это сделать, рассказано на этой странице.
Шаг 1. Вам потребуется
Возьмите необходимые для проекта элементы, представленные в таблице ниже.
Что нужно | Кол-во, шт |
---|---|
Контроллер Smart Uno | 1 |
Wi-Fi модуль ESP-12 | 1 |
Sensor Shield | 1 |
Провода мама-мама | 4 |
Модуль потенциометра 10 кОм | 1 |
Шлейф "мама-мама" х3 | 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. После этого загрузится страница вида:
Где:
- Адрес Вашего сайта
- Количество запросов, полученных с сайта
- Значение, прочитанное с потенциометра
Шаг 6. Изменение значений
Поверните потенциометр в любую сторону, обновите страницу браузера и Вы увидите новое значение потенциометра (и обновлённое количество запросов).
Количество запросов к серверу может показаться слишком большим. Однако, в скетче мы указали обновление страницы раз в 20 секунд, отсюда и такое увеличение обращений к серверу.