esp8266 – Быстрый старт в Arduino IDE. Поднимаем сервер с HTML

Когда я попытался поработать с данной платой, первым делом мне захотелось сделать небольшой сервер, который отображает 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, так что можно делать красивые админки, для управления чем-либо

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