Esp8266 nodemcu web server

Этот проект представляет собой пошаговое руководство, в котором показано, как создать автономный веб-сервер ESP8266, который управляет двумя выходами (два светодиода). Веб-сервер ESP8266 контролируется мобильными устройствами, и к нему можно получить доступ с любого устройства с браузером в локальной сети.

Если вы хотите узнать больше о модуле ESP8266, сначала прочтите мое Руководство по началу работы с модулем WiFi ESP8266.

В данном руководстве рассматриваются два разных метода построения веб-сервера:

• Часть 1. Создание веб-сервера с использованием Arduino IDE
• Часть 2. Создание веб-сервера с помощью NodeMCU

ЧАСТЬ 1: СОЗДАЙТЕ ВЕБ-СЕРВЕР, ИСПОЛЬЗУЯ ARDUINO IDE

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

Подготовьте IDE Arduino

1. Загрузите и установите Arduino IDE в вашей операционной системе (некоторые старые версии не будут работать).

2. Затем вам необходимо установить дополнение ESP8266 для Arduino IDE. Для этого перейдите в File> Preferences.

3. Введите http://arduino.esp8266.com/stable/package_esp8266com_index.json в поле «Additional boards manager urls», как показано на рисунке ниже. Затем нажмите кнопку «ОК».

4. Перейдите в Инструменты > Платы > Менеджер плат…

5. Прокрутите вниз, выберите пункт меню платы ESP8266 и установите «плату esp8266», как показано на рисунке ниже.

6. Перейдите в Инструменты > Плата и выберите свою плату ESP8266. Затем снова откройте вашу Arduino IDE.

Скопируйте приведенный ниже код в вашу Arduino IDE, но пока не загружайте его. Вам нужно внести некоторые изменения, чтобы он работал у вас.

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

Загрузка скетча

Загрузка скетча в ESP-12E

Если вы используете ESP-12E NodeMCU Kit, загрузка скетча очень проста, поскольку в нем есть встроенный программатор. Подключите вашу плату к компьютеру. Убедитесь, что вы выбрали правильную плату и COM-порт.

Затем нажмите кнопку «Загрузить» в IDE Arduino и подождите несколько секунд, пока не увидите сообщение «Закончена загрузка» в левом нижнем углу.

Загрузка скетча в ESP-01

Загрузка кода в ESP-01 требует установления последовательного соединения между вашим ESP8266 и программатором FTDI, как показано на схематической диаграмме ниже.

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

ESP8266	FTDI programmer
RX	TX
TX	RX
CH_PD	3.3V
GPIO 0	GND
VCC	3.3V
GND	GND

Если у вас новый программатор FTDI, и вам нужно установить драйверы FTDI на ПК с Windows, посетите официальный веб-сайт для получения официальных драйверов. Кроме того, вы можете связаться с продавцом, который продал вам программатор FTDI.

Затем вам просто нужно подключить программатор FTDI к вашему компьютеру и загрузить код в ESP8266.

Schematics

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

• ESP8266 12-E
• Платы для разработки Wi-Fi
• 2 светодиода
• 2 резистора (220 или 330 Ом подойдут)
• макетная плата
• Перемычки

Если вы используете ESP-01, вам также нужен программатор FTDI.

Подключите два светодиода к ESP8266, как показано на следующей принципиальной схеме — один светодиод подключен к GPIO 4 (D2), а другой к GPIO 5 (D1).

Если вы используете ESP-01 .

Если вы используете ESP8266-01, используйте следующую схему в качестве справки, но вам нужно изменить назначение GPIO в коде (на GPIO 2 и GPIO 0).

Тестирование веб-сервера

Теперь вы можете загрузить код, и он сразу заработает. Не забудьте проверить, правильно ли выбрана плата и COM-порт, в противном случае вы получите ошибку при попытке загрузки. Откройте последовательный монитор со скоростью 115200 бод.

Нахождение IP-адреса ESP

Нажмите кнопку сброса ESP8266, и он выведет IP-адрес ESP на последовательный монитор

Скопируйте этот IP-адрес, потому что он нужен вам для доступа к веб-серверу.

Доступ к веб-серверу

Откройте браузер, введите IP-адрес ESP, и вы увидите следующую страницу. Эта страница отправляетсяESP8266, когда вы посылаете запрос на IP-адрес ESP.

Если вы посмотрите на последовательный монитор, вы можете увидеть, что происходит в фоне. ESP получает HTTP-запрос от нового клиента — в данном случае, вашего браузера.

Вы также можете увидеть другую информацию о HTTP-запросе — эти поля называются полями HTTP-заголовка и определяют рабочие параметры HTTP-запроса.

Тестирование веб-сервера

Давайте проверим веб-сервер. Нажмите кнопку, чтобы включить GPIO 5. ESP получает запрос по URL-адресу / 5 / и включает светодиод 5.

Состояние светодиода также обновляется на веб-странице.

Проверьте кнопку GPIO 4 и убедитесь, что она работает аналогичным образом.

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

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

Первое, что вам нужно сделать, это включить библиотеку ESP8266WiFi.

Как упоминалось ранее, вам нужно вставить свой ssid и пароль в следующие строки внутри двойных кавычек.

Затем вы устанавливаете свой веб-сервер на порт 80.

Следующая строка создает переменную для хранения заголовка HTTP-запроса:

Затем вы создаете вспомогательные переменные для хранения текущего состояния ваших выходных данных. Если вы хотите добавить больше выходных данных и сохранить их состояние, вам нужно создать больше переменных.

Вам также необходимо назначить GPIO каждому из ваших выходов. Здесь мы используем GPIO 4 и GPIO 5. Вы можете использовать любые другие подходящие GPIO.

Настройка

Теперь перейдем к настройке. Функция setup () запускается только один раз при первой загрузке ESP. Сначала мы запускаем последовательную связь со скоростью 115200 бод для целей отладки.

Вы также определяете свои GPIO как ВЫХОДЫ и устанавливаете их в LOW.

Следующие строки начинают соединение Wi-Fi с WiFi.begin (ssid, пароль), ожидают успешного соединения и печатают IP-адрес ESP в Serial Monitor.

В loop() мы программируем то, что происходит, когда новый клиент устанавливает соединение с веб-сервером.

ESP всегда прослушивает входящих клиентов этой строкой:

Когда запрос получен от клиента, мы сохраним входящие данные. Последующий цикл while будет работать до тех пор, пока клиент остается подключенным. Мы не рекомендуем менять следующую часть кода, если вы точно не знаете, что делаете.

Следующий раздел операторов if и else проверяет, какая кнопка была нажата на вашей веб-странице, и соответственно контролирует результаты. Как мы видели ранее, мы делаем запрос на разные URL в зависимости от кнопки, которую нажимаем.

Например, если вы нажали кнопку GPIO 5 ON, URL-адрес изменится на IP-адрес ESP, а затем / 5 / ON, и мы получим эту информацию в заголовке HTTP. Итак, мы можем проверить, содержит ли заголовок выражение GET / 5 / on.

Если он содержится, код печатает сообщение на последовательном мониторе, изменяет значение переменной output5State на on и включает светодиод.

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

Отображение веб-страницы HTML

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

Веб-страница отправляется клиенту с помощью функции client.println (). Вы должны ввести то, что вы хотите отправить клиенту в качестве аргумента.

Первый текст, который вы всегда должны отправлять, — это следующая строка, которая указывает, что мы отправляем HTML.

Затем следующая строка делает веб-страницу отзывчивой в любом веб-браузере.

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

Стилизация веб-страницы

Далее у нас есть немного CSS для стилизации кнопок и внешнего вида веб-страницы. Мы выбираем шрифт Helvetica, определяем содержимое, которое будет отображаться в виде блока и выравниваться по центру.

Настройка заголовка веб-страницы

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

Отображение кнопок и соответствующего состояния

Затем вы пишете абзац для отображения текущего состояния GPIO 5. Как вы можете видеть, мы используем переменную output5State, поэтому состояние изменяется мгновенно при изменении этой переменной.

Затем мы отображаем кнопку включения или выключения, в зависимости от текущего состояния GPIO.

Мы используем ту же процедуру для GPIO 4.

Закрытие соединения

Наконец, когда ответ заканчивается, мы очищаем переменную заголовка и прекращаем соединение с клиентом с помощью client.stop ().

Завершение

Теперь, когда вы знаете, как работает код, вы можете изменить код, чтобы добавить дополнительные выходные данные или изменить свою веб-страницу. Чтобы изменить свою веб-страницу, вам может понадобиться знание основ HTML и CSS. Вместо управления двумя светодиодами вы можете управлять реле для управления практически любыми электронными приборами.

ЧАСТЬ 2: СОЗДАНИЕ ВЕБ-СЕРВЕРА С ИСПОЛЬЗОВАНИЕМ NODEMCU

В этой части показано, как создать веб-сервер для управления двумя выходами с использованием прошивки NodeMCU и языка программирования LUA. Вы можете использовать этот метод для создания другого веб-сервера.

Большинство найденных в интернете примеров веб-серверов для NodeMCU написанных на Lua — это примеры простых статических страниц с отсутствием возможности «одновременной» загрузки доп. файлов css, js, и т.д. Как правило, html код встраивается непосредственно в скрипт, в результате этого занимает место в памяти. Из найденных примеров веб-серверов, которые более менее соответствовали моим требованиям это nodemcu-httpserver, но он громоздкий, съедает много памяти и есть ряд трудностей в работе с ним. Хотелось что-то оптимальное между базовым функционалом и производительностью, так я начал изобретать свой «велосипед».

Была поставлена задача для проекта:

1. Написать основной код (шаблон, для будущих проектов).
2. Написать базовую HTML страницу, стили (css) и обработчик (js).
3. Добавить возможность настраивать модуль с HTML страницы.

От веб сервера требовалось:

1. Возможность загрузки доп. файлов (js, css, ico,txt,jpg).
2. Минимальный размер кода в памяти, в режиме ожидания.
3. Возможность включение LUA кода в HTML страницу.
4. Запуск LUA скриптов и передача им параметров по средствам POST и GET запросов.
5. Минимальная аутентификация.
6. Возможность загрузки сжатых файлов (.gz).

Структура.

Следуя поставленным задачам появилась вот такая структура проекта.

Инициализация:
init.lua — инициализации настроек и wi-fi.
init_settings.lua — получение настроек, так же хранятся настройки по умолчанию.
init_wifi.lua — подключение к wifi сети.

Сервер состоит из четырех основных скриптов:
web.lua — сам веб сервер.
web_request.lua — разбор ответов от клиента.
web_file.lua — передача файлов, запуск скриптов и загрузка html страниц с кодом lua.
web_control.lua — аутентификация, сохранения параметров, получения списка точек доступа.

Файлы:
favicon.ico — иконка.
index.html — главная страница.
settings.html — страница настроек.
login.html — страница аутентификация.
script_settings.js.gz — js скрипт (сжатый) для обработки и отправки форм.
style.css.gz — файл стилей (сжатый).

Описание и установка.

Для работы веб сервера потребуются модули (crypto, file, GPIO, net, node, SJSON, timer, UART, WiFi ), далее можете добавить нужные вам. Как собрать прошивку, прошить и залить скрипты, я уже писал. После того как это было сделано можно запускать модуль.
При первом старте модуль запустится в режиме точки доступа, через Wi-Fi нужно подключиться к открытой точки доступа с названием «ESP-XXXXXX«. Как подключились, заходим в браузер и переходим по адресу 192.168.4.1 . Далее мы попадем на страницу аутентификации, где нужно вести логин и пароль для доступа к модулю, по умолчанию который (логин admin, пароль 0000)

Нас перекинет на главную страницу веб сервера. Это тестовая страница, для примера, на ней отображаются данные ESP чипа, количество памяти и список файлов хранящихся на файловой системе чипа. Эту страницу вы можете использовать на свое усмотрение в ваших проектах и также можете создавать свои.

Перейдя в верху страницы по ссылки «Настройки» вы попадете на страницу настроек, на которой можно поменять настройки wi-fi вручную или просканировать сеть нажав на кнопку «Поиск«, ниже появится список доступных сетей. Также можно сменить логин и пароль аутентификации или отключить её.

Ограничения.

Сервер обрабатывает файлы по разному, так для файлов с расширением .html чтение из файла идет построчное, это сделано для упрощения обработки встроенного Lua кода, на размер файла ограничений нет. C файлами с расширением .lua размер отправленных данных не более 4KB.
Все остальные файлы передаются побайтно (1024 байт за раз), также ограничений на размер файла нет. Сервер не может принимать данные более 1.4KB (данные + заголовок). Пока не было такой необходимости.)))

Пример страницы и добавление в него кода Lua.

Страницу вы можете создать свою или воспользоваться уже готовым шаблоном template.html. В шаблоне подключен файл стилей (style.css.gz), в нем уже есть базовые классы разметки, формы, кнопки и т.д. Подробней можно узнать тут. Я его постарался сделать как можно компактней (размер в сжатом виде

При добавлении Lua кода в Html страницу учитывайте:

1. Lua код должен быть в одну строку. (Чтение файлов .html идет построчное)
2. Объем одной строки Lua кода не более 1KB.
3. Переменные должны быть объявлены как локальные «Local».(Чтобы не засорять глобальное пространство имён)
4. Глобальные переменные используйте по необходимости, для постоянных значений.
5. Старайтесь чтобы размер страницы не превышал 5KB (При большем размере увеличится время загрузки страницы).
6. Для оптимизации и уменьшения размера страницы можно ее сжать, удалив все пробелы и переносы строк, (только помните, что длина одной строки не должна превышать 1KB

This tutorial shows how to build a web server that serves HTML and CSS files stored on the ESP8266 NodeMCU filesystem (SPIFFS) using Arduino IDE. Instead of having to write the HTML and CSS text into the Arduino sketch, we’ll create separate HTML and CSS files.

The web server we’ll build shows how to control the ESP8266 outputs and how to display sensor readings. As an example, we’ll control an LED and display sensor readings from a BME280 sensor.

You can use the concepts learned in this tutorial to control any output or display sensor readings from other sensors.

Project Overview

Before going straight to the project, it’s important to outline what our web server will do, so that it’s easier to understand.

• The web server controls an LED connected to the ESP8266 GPIO 2. This is the ESP8266 on-board LED. You can control any other GPIO;
• The web server page shows two buttons: ON and OFF – to turn GPIO 2 on and off;
• The web server page also shows the current GPIO state;
• You’ll also use a BME280 sensor to display sensor readings (temperature, humidity, and pressure).

The following figure shows a simplified diagram to demonstrate how everything works.

Prerequisites

Before proceeding with this project, make sure you check all the following prerequisites.

1. Install ESP8266 Board in Arduino IDE

We’ll program the ESP8266 using Arduino IDE, so you must have the ESP8266 add-on installed. Follow the next tutorial to install it:

2. Filesystem Uploader Plugin

To upload files to the ESP8266 SPI Flash Filesystem (SPIFFS), we’ll use the Filesystem Uploader Plugin. Install the plugin in your Arduino IDE:

3. Installing Libraries

One of the easiest ways to build a web server using files from the filesystem is using the ESPAsyncWebServer library.

Installing the ESPAsyncWebServer library

This library is not available to download through the Arduino IDE libraries manager. So, you need to follow the next steps to install the library:

1. Click here to download the ESPAsyncWebServer library. You should have a .zip folder in your Downloads folder
2. Unzip the .zip folder and you should get ESPAsyncWebServer-master folder
3. Rename your folder from ESPAsyncWebServer-master to ESPAsyncWebServer
4. Move the ESPAsyncWebServer folder to your Arduino IDE installation libraries folder

Alternatively, you can go to Sketch > Include Library > .zip Library and select the previously downloaded library.

Installing the ESPAsyncTCP

The ESPAsyncWebServer library also needs the ESPAsyncTCP library to operate properly. Follow the next steps to install the ESPAsyncTCP library:

1. Click here to download the ESPAsyncTCP library. You should have a .zip folder in your Downloads folder
2. Unzip the .zip folder and you should get ESPAsyncTCP-master folder
3. Rename your folder from ESPAsyncTCP-master to ESPAsyncTCP
4. Move the ESPAsyncTCP folder to your Arduino IDE installation libraries folder
5. Finally, re-open your Arduino IDE

Alternatively, you can go to Sketch > Include Library > .zip Library and select the previously downloaded library.

Installing BME280 libraries

In this tutorial, we’ll display readings from a BME280 sensor (Guide with ESP8266). You need to install the following libraries:

You can install these libraries through the Arduino IDE Libraries Manager. Go to Sketch > Include Libraries > Manage Libraries. Then, search for the libraries’ name to install them.

Parts Required

To proceed with this project, you need the following parts:

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

Schematic Diagram

Connect all the components by following the next schematic diagram.

BME280	ESP8266
Vin	3.3V
GND	GND
SCL	GPIO 5
SDA	GPIO 4

Organizing Your Files

To build the web server you need three different files. The Arduino sketch, the HTML file and the CSS file. The HTML and CSS files should be saved inside a folder called data inside the Arduino sketch folder, as shown below:

Creating the HTML File

Create an index.html file with the following content or download all project files here:

Because we’re using CSS and HTML in different files, we need to reference the CSS file on the HTML text.

The
tag tells the HTML file that you’re using an external style sheet to format how the page looks. The rel attribute specifies the nature of the external file, in this case that it is a stylesheet—the CSS file—that will be used to alter the appearance of the page.

The type attribute is set to “text/css” to indicate that you’re using a CSS file for the styles. The href attribute indicates the file location; since both the CSS and HTML files will be in the same folder, you just need to reference the filename: style.css.

In the following line, we write the first heading of our web page. In this case we have “ESP8266 Web Server”. You can change the heading to any text:

Then, add a paragraph with the text “GPIO state: ” followed by the GPIO state. Because the GPIO state changes accordingly to the state of the GPIO, we can add a placeholder that will then be replaced for whatever value we set on the Arduino sketch.

To add placeholder use % signs. To create a placeholder for the state, you can use %STATE% , for example.

You attribute a value to the STATE placeholder in the Arduino sketch.

Then, create an ON and an OFF buttons. When you click the on button, we redirect the web page to to root followed by /on url. When you click the off button you are redirected to the /off url.

Finally, create three paragraphs to display the temperature, humidity and pressure.

We use the %TEMPERATURE% , %HUMIDITY% and %PRESSURE% placeholders. These will then be replaced by the actual temperature readings in the Arduino sketch.

Automatic Updates

We also add a bit of JavaScript in our HTML file that is responsible for updating the temperature readings without the need to refresh the web page.

The following snipet of code is responsible for the temperature.

To update the temperature, we have a setInterval() function that runs every 10 seconds.

Basically, it makes a request in the /temperature URL to get the latest temperature reading.

When it receives that value, it updates the HTML element with temperature id.

In summary, this previous section is responsible for updating the temperature asynchronously. The same process is repeated for the humidity and pressure readings.

Creating the CSS File

Create the style.css file with the following content or download all project files here:

This is just a basic CSS file to set the font size, style and color of the buttons and align the page. We won’t explain how CSS works. A good place to learn about CSS is the W3Schools website.

ESP8266 Asynchronous Web Server Sketch

Copy the following code to the Arduino IDE or download all project files here. Then, you need to type your network credentials (SSID and password) to connect the ESP8266 to your local network.

How the code works

Continue reading to learn how the code works, or skip to the next section.

First, include the necessary libraries:

You need to type your network credentials in the following variables:

Create an instance that refers to the BME280 sensor called bme :

Next, create a variable that refers to GPIO 2 called ledPin , and a String variable to hold the led state: ledState .

Create an AsynWebServer object called server that is listening on port 80.

Get Sensor Readings

We create three functions to return the sensor readings as strings: the getTemperature() , getHumidity() and getPressure() functions.

Here’s how the getTemperature() function looks like (the other functions are similar).

If you want to display temperature in Fahrenheit degrees, you just need to uncomment the corresponding line in the getTemperature() function:

To learn more about interfacing the BME280 sensor with the ESP8266, you can read the following tutorial:

processor()

The processor() function attributes a value to the placeholders we’ve created on the HTML file. It accepts as argument the placeholder and should return a String that will replace the placeholder. The processor() function should have the following structure:

This function first checks if the placeholder is the STATE we’ve created on the HTML file.

If it is, then, accordingly to the LED state, we set the ledState variable to either ON or OFF.

Finally, we return the ledState variable. This replaces the STATE placeholder with the ledState string value.

If it finds the %TEMPERATURE% placeholder, we return the temperature by calling the getTemperature() function created previously.

The same happens for the %HUMIDITY% and %PRESSURE% placeholders by calling the corresponding functions:

setup()

In the setup() , start by initializing the Serial Monitor and setting the GPIO as an output.

Initialize the BME280 sensor:

Wi-Fi connection

Connect to Wi-Fi and print the ESP8266 address:

Async Web Server

The ESPAsyncWebServer library allows us to configure the routes where the server will be listening for incoming HTTP requests and execute functions when a request is received on that route. For that, use the on method on the server object as follows:

When the server receives a request on the root “/” URL, it will send the index.htmlfile to the client. The last argument of the send() function is the processor, so that we can replace the placeholder with the value we want – in this case the ledState .

Because we’ve referenced the CSS file on the HTML file, the client will make a request for the CSS file. When that happens, the CSS file is sent to the client:

You also need to define what happens on the /on and /off routes. When a request is made on those routes, the LED is either turned on or off, and the ESP32 serves the HTML file.

In the HTML file, we’ve written a JavaScript code that requests the temperature, hum >/temperature , /humidity , /pressure routes, respectively, every 10 seconds. So, we also need to handle what happens when we receive a request on those routes.

We simply need to send the updated sensor readings. The updated sensor readings are returned by the getTemperature() , getHumidity() and getPressure() functions we’ve created previously.

The readings are plain text, and should be sent as a char, so, we use the c_str() method.

In the end, we use the begin() method on the server object, so that the server starts listening for incoming clients.

Because this is an asynchronous web server, you can define all the requests in the setup() . Then, you can add other code to the loop() while the server is listening for incoming clients.

Uploading Code and Files

Save the Arduino sketch as ESP8266_SPIFFS_Web_Server or download all project files here.

• Go to Sketch >Show Sketch folder, and create a folder called data. Save the HTML and CSS files inside that folder;
• In Tools >Board, select the ESP8266 board you’re using;
• Then, go to Tools >Flash size and select 4M (1M SPIFFS).

Finally, upload the files to your board. Go to Tools > ESP8266 Data Sketch Upload and wait for the files to be uploaded.

Then, press the Arduino IDE upload button to upload the code to the ESP8266.

When everything is successfully uploaded, open the Serial Monitor at a baud rate of 115200. Press the ESP8266 on-board RST button, and it should print the ESP8266 IP address.

Demonstration

Open a browser and type your ESP8266 IP address. The following web page should load.

Press the ON and OFF buttons to control the ESP8266 on-board LED. You can also visualize the latest sensor readings. The sensor readings are updated automatically without the need to refresh the web page.

Wrapping Up

Using the ESP8266 SPI Flash File System (SPIFFS) is specially useful to store HTML and CSS files to serve to a client – instead of having to write all the code in the Arduino sketch.

We have other related projects that you may like: