Когда я попытался поработать с данной платой, первым делом мне захотелось сделать небольшой сервер, который отображает html файл. Я отправился на официальный сайт и нашёл много информации, захотелось разобрать более детально вопрос подключения к wi-fi, режимы работы клиента и точки доступа.

Можно работать в разных средах разработки, но самое простое – добавить плату в Arduino IDE. Сделать это очень просто. Сначала идём в настройки

Потом нужно добавить следующую ссылку на дополнительный репозиторий:
http://arduino.esp8266.com/stable/package_esp8266com_index.json

После добавления этой ссылки, можно будет скачать набор плат esp8266 – перейдём в “менеджер плат”

Достаточно, ввести в поиск “esp”, как вы увидите нужную библиотеки, которую нужно скачать (esp8266 by ESP8266 Community)

Код я компилировал со следующими параметрами. 80Мгц после 16Мгц AtMega, звучит весомо.

Я почистил код от включения светодиода и оставил только составляющую для подключения к сети wi-fi в режиме клиента. Обычно это необходимый минимум для IoT устройства.
#include <ESP8266WiFi.h> #include <ESP8266WebServer.h> /* Put your SSID & Password */ const char* ssid = "tfsi"; // Enter SSID here const char* password = "1234567890"; //Enter Password here ESP8266WebServer server(80); void setup() { Serial.begin(9600); delay(100); Serial.println("Connecting to "); Serial.println(ssid); //connect to your local wi-fi network WiFi.begin(ssid, password); //check wi-fi is connected to wi-fi network while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected..!"); Serial.print("Got IP: "); Serial.println(WiFi.localIP()); server.begin(); Serial.println("HTTP server started"); } void loop() { server.handleClient(); }
Единственное – мне не понравилось получение адреса по DHCP. Очень быстро обнаружилась команда
WiFi.config(ip, gateway, subnet);
Где эти все параметры можно задать, например после объявления переменных
IPAddress ip(192, 168, 2, 177); IPAddress gateway(192, 168, 2, 1); IPAddress subnet(255, 255, 255, 0);
Теперь запускаем терминал и проверяем

Проверяем пинг – всё отлично.

Немного про режимы работы esp8266 – можно работать только как клиент, что мне и нужно
WiFi.mode(WIFI_STA); // Режим клиента
Можно только как точка доступа (AP) или комбинированный режим
WiFi.mode(WIFI_AP); // Режим точки доступа WiFi.mode(WIFI_AP_STA); // Включены оба режима
Оба режима включать конечно есть смысл. Приведу пример из мира домашних камер видеонаблюдения – сначала устройство работает в режиме AP и вы можете к нему легко подключиться. Потом заходите на главную страницу, находите свою wi-fi сеть, подключаетесь – всё! Устройство в вашей сети, и режим точки доступа больше не нужен, до следующего сброса. Для старта esp8266 в режиме точки доступа (AP), можно использовать команду
WiFi.softAP(ssid, password);
Теперь, если поменять строчку
WiFi.begin(ssid, password);
на
WiFi.softAP(ssid, password);
То мы сможем найти с любого устройства нашу сеть

Если удалить password, то сеть, которую создаёт модуль будет открытая, без пароля.
WiFi.softAP(ssid);
Для устройства “из коробки”, это тоже хороший вариант, а например задание пароля сделать при первом подключении. Как видим, сеть стала открытой

Но какой смысл от сервера, если он просто пингуется, и ничего не показывает. Давайте попробуем сделать простую веб-страницу. Если после старта сервера добавить следующую строку, которая позволяет загружать корневую страницу при обращении к серверу
server.on("/", handleRoot);
А потом создать функцию handleRoot, там можно описать ответы сервера
void handleRoot() { server.send(200, "text/plain", "hello World!"); }
200 код – это код успешного ответа на запрос пользователя. В данном случае мы отправляем обычный текст hello World. Также помимо этого мы можем выполнить другие действия в данной функции, если требуется. Проверяем:

Давайте заставим наш сервер отображать, что нибудь интересное – например html файл. Создадим рядом с файлом проекта файл index.h со следующим содержимым. Этот пример я взял на этом сайте
const char MAIN_page[] PROGMEM = R"=====( <HTML> <HEAD> <TITLE>My first web page</TITLE> </HEAD> <BODY> <CENTER> <B>Hello World.... </B> </CENTER> </BODY> </HTML> )=====";
Теперь подключим этот файл в наш основной проект (не забывайте, что оба файла должны лежать в одной папке)
#import "index.h"
Теперь нам нужно немного изменить функцию handleRoot, чтобы отобразить изменения на главной странице. Легко заметить, что мы поменяли формат отображения текста с “text/plain” на “text/html”,а вместо текста подкинули переменную строкового типа “s”, которая ссылается на область памяти программы PROGMEM. PROGMEM разрешает нам помещать код в flash-память, а не в оперативную, тем самым экономим ресурсы микроконтроллера.
void handleRoot() { String s = MAIN_page; server.send(200, "text/html", s); }
Этот пример конечно заработал

Но мне было интересно проверить работу css. Закинул несколько стилей в теги <HEAD> и сделал 3 кнопки. Весь код получился вот такой
const char MAIN_page[] PROGMEM = R"=====( <HTML> <HEAD> <TITLE>Control page</TITLE> <style type="text/css"> p {color:#006633} a.green{ border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); color: #fff; display:block; width:100px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 14px; padding: 8px 16px; margin: 20px auto; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: background-color 0.1s linear; -moz-transition: background-color 0.1s linear; -o-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } a.green { background-color: rgb( 43, 153, 91 ); border: 1px solid rgb( 33, 126, 74 ); } a.green:hover { background-color: rgb( 75, 183, 141 ); } body {background-color:#FFFFFF}; </style> </HEAD> <BODY> <CENTER> <h2><B>Main page</B></h2> <a href="#" class="green">Light</a> <a href="#" class="green">Relay</a> <a href="#" class="green">Door</a> </CENTER> </BODY> </HTML> )=====";
Отлично – esp8266 легко отдаёт web-страницы с css, так что можно делать красивые админки, для управления чем-либо

В следующих статьях назначим на эти кнопки полезные действия, попробуем парсить данные, например температуру и время и может поработаем с базой данных. Исходники этой статьи
Добрый день!
ESP “крашится”. Если пробую текст html страницы формировать напрямую в коде – всё отлично, но если через PROGMEM – ошибка и soft wdt
На ESP8266 не работает это