Créer un serveur WEB sur un ESP8266

Présentation des différentes étapes de la mise en place d'un serveur WEB sur un ESP8266

il existe une référence pour le Wifi sur Arduino compatible avec les ESP ici .

Pour commencer bien vérifier le type de carte et le port (illustration à gauche).

Pour ce type de projet, on met en œuvre des connaissances sur la programmation Arduino et le HTML.

On utilisera les librairies standard.

Pour donner un aspect concret à cette partie, on fixera l'objectif suivant :

Allumer la led de notre choix parmi 4 en utilisant une interface Web accessible depuis le point d'accès créé sur l'ESP

serveurWeb.fzz [fzz]

Partie WEB, premiers pas

On commence par la nouveauté, pour la suite ,l 'allumage des leds sera plus classique

Le code est proposé ci -dessous. Quand il est uploadé dans la carte, ouvrir la console, appuyer sur la carte sue le rester (rst).

On voit apparaître le message :

Configuration du point d'accès...Vous pouvez me joindre sur l'adresse ip :192.168.4.1

Le serveur WEb est lancé.

1
/*
2
 * Projet de pilotage d'un robot par interface web
3
 * Test pour allumage de leds
4
 */
5
#include <ESP8266WiFi.h>
6
#include <WiFiClient.h>
7
#include <ESP8266WebServer.h>
8
9
/* On affecte les valeurs pour le ssid et l'éventuel mot de passe  */
10
const char *ssid = "commande";
11
const char *password = "pass";
12
13
/* on crée une instance de la classe serveur */
14
ESP8266WebServer server(80);
15
16
17
/* traitement par le serveur */
18
void ServeurRacine() {
19
  server.send(200,"text/html","bonjour");
20
}
21
22
23
void setup() {
24
	delay(1000);
25
	Serial.begin(115200);
26
	Serial.println();
27
	Serial.print("Configuration du point d'accès...");
28
	WiFi.softAP(ssid, password);
29
  /* recuperation de l'adresse IP */
30
	IPAddress myIP = WiFi.softAPIP();
31
	Serial.print("Vous pouvez me joindre sur l'adresse ip :");
32
	Serial.println(myIP);
33
 /* ici , on definit la fonctio de callback qui est appelée quand on se connecte sur la racine du serveur */
34
	server.on("/", ServeurRacine);
35
	server.begin();
36
	Serial.println("Ls serveur WEb est lancé");
37
38
39
}
40
41
void loop() {
42
	server.handleClient();
43
}
Le code est classique, la fonction qui affiche les pages est ServeurRacine(), pour l'instant, elle se contente :
  • Le code 200 indiquant que le requête s'est bien déroulée
  • le type de document "text/html"
  • le code de la page, ici simplement bonjour
Rendre le site interactif.
On utilise un formulaire , de façon classique
C'est un formulaire classique de type HTML.
Le formulaire s'affiche, on peut le valider mais il ne se passe rien , les choix ne sont pas mémorisés à ce stade.
Il faut récupérer les données envoyées par le formulaire .
Quand on valide le formulaire, on peut récupérer les arguments en procédant ainsi :
if (server.hasArg("LEDV")) {
print (server.arg("LEDV"));
}
1
/*
2
 * Projet de pilotage d'un robot par interface web
3
 * Test pour allumage de leds
4
 */
5
#include <ESP8266WiFi.h>
6
#include <WiFiClient.h> 
7
#include <ESP8266WebServer.h>
8
9
/* On affecte les valeurs pour le ssid et l'éventuel mot de passe  */
10
const char *ssid = "commande";
11
const char *password = "";
12
13
/* on crée une instance de la classe serveur */
14
ESP8266WebServer server(80);
15
16
/* On ecrit la page web */
17
const char INDEX_HTML[] =
18
"<!DOCTYPE HTML>"
19
"<html>"
20
"<head>"
21
"<meta name = \"viewport\" content = \"width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=0\">"
22
"<title>Serveur </title>"
23
"<style>"
24
"\"body { background-color: #ffffff; font-family: Arial, Helvetica, Sans-Serif; Color: #FF0000; }\""
25
"</style>"
26
"</head>"
27
"<body>"
28
"<h1> Serveur ESP8266</h1>"
29
"<FORM action=\"/\" method=\"post\">"
30
"<P>"
31
"Indiquer les leds à allumer :<br/>"
32
"<INPUT type=\"checkbox\" name=\"LEDV\" value=\"1\">Verte<br/>"
33
"<INPUT type=\"checkbox\" name=\"LEDR\" value=\"2\">Rouge<br/>"
34
"<INPUT type=\"checkbox\" name=\"LEDB\" value=\"1\">Blanc<br/>"
35
"<INPUT type=\"checkbox\" name=\"LEDJ\" value=\"1\">Jaune<br/>"
36
"<INPUT type=\"submit\" value=\"Valider\"> "
37
"</P>"
38
"</FORM>"
39
"</body>"
40
"</html>";
41
42
43
/* traitement par le serveur */
44
void ServeurRacine() {
45
  server.send(200,"text/html",INDEX_HTML);
46
}
47
48
49
void setup() {
50
	delay(1000);
51
	Serial.begin(115200);
52
	Serial.println();
53
	Serial.print("Configuration du point d'accès...");
54
	WiFi.softAP(ssid, password);
55
  /* recuperation de l'adresse IP */
56
	IPAddress myIP = WiFi.softAPIP();
57
	Serial.print("Vous pouvez me joindre sur l'adresse ip :");
58
	Serial.println(myIP);
59
 /* ici , on definit la fonction de callback qui est appelée quand on se connecte sur la racine du serveur */
60
	server.on("/", ServeurRacine);
61
	server.begin();
62
	Serial.println("Le serveur WEb est lancé");
63
64
65
}
66
67
void loop() {
68
	server.handleClient();
69
}
le code complet ci-dessous
1
/*
2
 * Projet de pilotage d'un robot par interface web
3
 * Test pour allumage de leds
4
 */
5
#include <ESP8266WiFi.h>
6
#include <WiFiClient.h> 
7
#include <ESP8266WebServer.h>
8
9
const int pinVerte = 5;
10
const int pinRouge = 4;
11
const int pinBlanc = 0;
12
const int pinJaune = 2;
13
/* On affecte les valeurs pour le ssid et l'éventuel mot de passe  */
14
const char *ssid = "commande";
15
const char *password = "";
16
17
/* on crée une instance de la classe serveur */
18
ESP8266WebServer server(80);
19
20
/* On ecrit la page web */
21
String s1 =
22
"<!DOCTYPE HTML>"
23
"<html>"
24
"<head>"
25
"<meta name = \"viewport\" content = \"width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=0\">"
26
"<title>Serveur </title>"
27
"<style>"
28
"\"body { background-color: #ffffff; font-family: Arial, Helvetica, Sans-Serif; Color: #FF0000; }\""
29
"</style>"
30
"</head>"
31
"<body>"
32
"<h1> Serveur ESP8266</h1>";
33
34
35
String s2 =
36
"<INPUT type=\"submit\" value=\"Valider\"> "
37
"</P>"
38
"</FORM>"
39
"</body>"
40
"</html>";
41
42
43
/* traitement par le serveur */
44
void ServeurRacine() {
45
  //eteindre les leds
46
  closeleds();
47
  String s = s1 ;
48
  s += 
49
  "<FORM action=\"/\" method=\"post\">"
50
"<P>"
51
"Indiquer les leds  allumer :<br/>"
52
"<INPUT type=\"checkbox\" name=\"LEDV\" ";
53
if (server.hasArg("LEDV")) {
54
     s +=" checked = checked ";
55
     digitalWrite(pinVerte, HIGH);
56
}
57
s += ">Verte<br/>"
58
"<INPUT type=\"checkbox\" name=\"LEDR\" ";
59
60
if (server.hasArg("LEDR")) {
61
     s +=" checked = checked ";
62
     digitalWrite(pinRouge, HIGH);
63
}
64
s += ">Rouge<br/>"
65
"<INPUT type=\"checkbox\" name=\"LEDB\" ";
66
if (server.hasArg("LEDB")) {
67
     s +=" checked = checked ";
68
     digitalWrite(pinBlanc, HIGH);
69
}
70
s += ">Blanc<br/>"
71
"<INPUT type=\"checkbox\" name=\"LEDJ\" ";
72
if (server.hasArg("LEDJ")) {
73
     s +=" checked = checked ";
74
     digitalWrite(pinJaune, HIGH);
75
}
76
s += ">Jaune<br/>";
77
  
78
  
79
  s += s2;
80
  server.send(200,"text/html",s);
81
}
82
void closeleds(){
83
  digitalWrite(pinVerte, LOW);
84
  digitalWrite(pinRouge, LOW);
85
  digitalWrite(pinBlanc, LOW);
86
  digitalWrite(pinJaune, LOW);
87
}
88
89
void setup() {
90
  // Configuration des pins en sortie pour alimenter les led
91
  pinMode(pinVerte, OUTPUT);
92
  pinMode(pinRouge, OUTPUT);
93
  pinMode(pinBlanc, OUTPUT);
94
  pinMode(pinJaune, OUTPUT);
95
  closeleds();
96
	delay(1000);
97
	Serial.begin(115200);
98
	Serial.println();
99
	Serial.print("Configuration du point d'accès...");
100
	WiFi.softAP(ssid, password);
101
  /* recuperation de l'adresse IP */
102
	IPAddress myIP = WiFi.softAPIP();
103
	Serial.print("Vous pouvez me joindre sur l'adresse ip :");
104
	Serial.println(myIP);
105
 /* ici , on definit la fonction de callback qui est appelée quand on se connecte sur la racine du serveur */
106
	server.on("/", ServeurRacine);
107
	server.begin();
108
	Serial.println("Le serveur WEb est lancé");
109
110
111
}
112
113
void loop() {
114
	server.handleClient();
115
}