Esp8266 webserver - Historique des versions

Jc.forton : /* Formulaire et paramètres */

2019-04-16T03:40:35Z

Formulaire et paramètres

← Version précédente		Version du 16 avril 2019 à 05:40
Ligne 220 :		Ligne 220 :
	<source lang="c">		<source lang="c">
	void setup(){		void setup(){
	...		...
	server.on("/state", setState);		server.on("/state", setState);
	...		...
	}		}

Ligne 242 :		Ligne 242 :
	}		}
	// Test de la valeur state (doit être 0 ou 1)		// Test de la valeur state (doit être 0 ou 1)
	if(server.arg("state") != "1" \|\| server.arg("state") != "0"){		if(server.arg("state") != "1" && server.arg("state") != "0"){
	// La valeur envoyée n'est pas valide		// La valeur envoyée n'est pas valide
	server.send(400, "text/plain", F("Wrong state value, must be 0 or 1"));		server.send(400, "text/plain", F("Wrong state value, must be 0 or 1"));
Ligne 275 :		Ligne 275 :
	}		}
	// Test de la valeur state (doit être 0 ou 1)		// Test de la valeur state (doit être 0 ou 1)
	if(server.arg("mode") != "O" \|\| server.arg("mode") != "I"){		if(server.arg("mode") != "O" && server.arg("mode") != "I"){
	// La valeur envoyée n'est pas valide		// La valeur envoyée n'est pas valide
	server.send(400, "text/plain", F("Wrong mode value, must be O or I"));		server.send(400, "text/plain", F("Wrong mode value, must be O or I"));
Ligne 286 :		Ligne 286 :
	// Positionnement de l'état de la broche		// Positionnement de l'état de la broche
	digitalWrite(gpio, state);		digitalWrite(gpio, state);
			server.send(200, "text/plain", F(""));
	}		}
	</source>		</source>
	* server.hasArg() permet de tester la présence d'un paramètre		* server.hasArg() permet de tester la présence d'un paramètre
	* server.arg() permet de récupérer le paramètre sous forme de ''String''		* server.arg() permet de récupérer le paramètre sous forme de ''String''

			Ce qui nous donne dans le navigateur:
			* S'il manque un paramètre :
			{\|style="width:650px" align="center"
			\|
			[[Fichier:Example missing parameter esp webserver.png\|centré]]
			\|width=5px\|
			\|valign=top\|
			[[Fichier:Example missing parameter esp webserver off.jpg\|centré\|200px]]
			\|}
			* Sinon :
			{\|style="width:650px" align="center"
			\|
			[[Fichier:Example parameter esp webserver.png\|centré]]
			\|width=5px\|
			\|valign=top\|
			[[Fichier:Example missing parameter esp webserver on.jpg\|centré\|200px]]
			\|}

Jc.forton : /* Formulaire et paramètres */

2019-04-16T03:24:44Z

Formulaire et paramètres

@@ Ligne 215 : / Ligne 215 : @@
 On peut utiliser un formulaire pour envoyer des informations à l'ESP8266.
-Imaginons que nous voulions piloter l'état des broches. Il nous faudrait une route pour le faire, ''/state'' par exemple, ainsi que deux paramètres ''gpio'' (pour la broche) et ''state'' pour spécifier l'état (0 &rarr; LOW, 1 &rarr; HIGH)
+Imaginons que nous voulions piloter l'état des broches. Il nous faudrait une route pour le faire, ''/state'' par exemple, ainsi que trois paramètres ''gpio'' (pour la broche) et ''state'' pour spécifier l'état (0 &rarr; LOW, 1 &rarr; HIGH).
 </source>

Jc.forton : /* application/json */

2019-04-16T02:59:15Z

application/json

← Version précédente		Version du 16 avril 2019 à 04:59
Ligne 212 :		Ligne 212 :
	Le navigateur comprend et interpréte le JSON parfaitement:		Le navigateur comprend et interpréte le JSON parfaitement:
	[[Fichier:Example firefox json display pin state.png\|centré]]		[[Fichier:Example firefox json display pin state.png\|centré]]
			= Formulaire et paramètres =
			On peut utiliser un formulaire pour envoyer des informations à l'ESP8266.

			Imaginons que nous voulions piloter l'état des broches. Il nous faudrait une route pour le faire, ''/state'' par exemple, ainsi que deux paramètres ''gpio'' (pour la broche) et ''state'' pour spécifier l'état (0 → LOW, 1 → HIGH)
			<source lang="html">

			</source>

Jc.forton : /* application/json */

2019-04-16T02:46:59Z

application/json

← Version précédente		Version du 16 avril 2019 à 04:46
Ligne 192 :		Ligne 192 :

	==application/json==		==application/json==
			Lorsque l'on veut faire une API, le langage le plus approprié pour formater les données reste le JSON. Malheureusement il n'existe pas de programme pour la [https://fr.wikipedia.org/wiki/S%C3%A9rialisation sérialisation] sur l'ESP8266, il faut donc tout faire à la main.

			Si on reprend l'exemple précédent:
			<source lang="c">
			void maFonction(){
			char buffer[500];
			sprintf(buffer, "{\"D0\":%s,", digitalRead(D0) == HIGH ? "true" : "false");
			sprintf(buffer, "%s\"D1\":%s,", buffer, digitalRead(D1) == HIGH ? "true" : "false");
			sprintf(buffer, "%s\"D2\":%s,", buffer, digitalRead(D2) == HIGH ? "true" : "false");
			sprintf(buffer, "%s\"D3\":%s,", buffer, digitalRead(D3) == HIGH ? "true" : "false");
			sprintf(buffer, "%s\"D4\":%s,", buffer, digitalRead(D4) == HIGH ? "true" : "false");
			sprintf(buffer, "%s\"D5\":%s,", buffer, digitalRead(D5) == HIGH ? "true" : "false");
			sprintf(buffer, "%s\"D6\":%s,", buffer, digitalRead(D6) == HIGH ? "true" : "false");
			sprintf(buffer, "%s\"D7\":%s,", buffer, digitalRead(D7) == HIGH ? "true" : "false");
			sprintf(buffer, "%s\"D8\":%s}", buffer, digitalRead(D8) == HIGH ? "true" : "false");
			server.send(200, "application/json", buffer);
			}
			</source>
			Le navigateur comprend et interpréte le JSON parfaitement:
			[[Fichier:Example firefox json display pin state.png\|centré]]

Jc.forton : /* Contenu dynamique */

2019-04-16T02:36:16Z

Contenu dynamique

← Version précédente		Version du 16 avril 2019 à 04:36
Ligne 169 :		Ligne 169 :
	char buffer[800];		char buffer[800];
	strcpy(buffer, header);		strcpy(buffer, header);
	sprintf(buffer, "%s<table><tr><td>D0</td><td>%s</td></tr>", buffer, digitalRead(D0) == HIGH ? "HIGH" : "LOW");		sprintf(buffer, "%s<table border=\"1\"><tr><td>D0</td><td>%s</td></tr>", buffer, digitalRead(D0) == HIGH ? "HIGH" : "LOW");
	sprintf(buffer, "%s<tr><td>D1</td><td>%s</td></tr>", buffer, digitalRead(D1) == HIGH ? "HIGH" : "LOW");		sprintf(buffer, "%s<tr><td>D1</td><td>%s</td></tr>", buffer, digitalRead(D1) == HIGH ? "HIGH" : "LOW");
	sprintf(buffer, "%s<tr><td>D2</td><td>%s</td></tr>", buffer, digitalRead(D2) == HIGH ? "HIGH" : "LOW");		sprintf(buffer, "%s<tr><td>D2</td><td>%s</td></tr>", buffer, digitalRead(D2) == HIGH ? "HIGH" : "LOW");
Ligne 187 :		Ligne 187 :

	<u>NB</u>: on pourrait faire tout avec un seul sprintf, mais le code perdrait en visibilité.		<u>NB</u>: on pourrait faire tout avec un seul sprintf, mais le code perdrait en visibilité.

			Ce qui donne le tableau suivant:
			[[Fichier:Example dynamic html pin state.png\|centré]]

	==application/json==		==application/json==

Jc.forton : /* Contenu dynamique */

2019-04-16T02:33:05Z

Contenu dynamique

@@ Ligne 140 : / Ligne 140 : @@
 Pour renvoyer du contenu dynamique, il suffit d'utiliser un tampon qui va nous permettre de stocker la ou les variables à renvoyer.
-Imaginons que nous voulions renvoyer l'état des broches:
+Imaginons que nous voulions renvoyer un tableau avec l'état des broches. Nous allons ''couper'' la page en deux:
 ==application/json==

Jc.forton : /* Contenu statique */

2019-04-16T02:11:54Z

Contenu statique

← Version précédente		Version du 16 avril 2019 à 04:11
Ligne 137 :		Ligne 137 :
	</source>		</source>
	L'inconvénient est que le HTML ne peut plus se trouver dans une variable global...		L'inconvénient est que le HTML ne peut plus se trouver dans une variable global...
			=== Contenu dynamique ===
			Pour renvoyer du contenu dynamique, il suffit d'utiliser un tampon qui va nous permettre de stocker la ou les variables à renvoyer.

			Imaginons que nous voulions renvoyer l'état des broches:

	==application/json==		==application/json==

Jc.forton : /* Contenu statique */

2019-04-16T02:09:27Z

Contenu statique

← Version précédente		Version du 16 avril 2019 à 04:09
Ligne 134 :		Ligne 134 :
	Si le contenu de votre page HTML dépasse 96 Kio (taille de la RAM de l'ESP8266) il faut dire à l'ESP8266 de ne pas faire transiter la variable par la RAM mais de la lire directement depuis la flash grâce à ''F()'':		Si le contenu de votre page HTML dépasse 96 Kio (taille de la RAM de l'ESP8266) il faut dire à l'ESP8266 de ne pas faire transiter la variable par la RAM mais de la lire directement depuis la flash grâce à ''F()'':
	<source lang="c">		<source lang="c">
	server.send(200, "text/html", F(html));		server.send(200, "text/html", F("<!DOCTYPE html><html><head><title>ESP8266</title></head><body><h1>Coucou de l'ESP8266</h1></body></html>"));
	</source>		</source>
			L'inconvénient est que le HTML ne peut plus se trouver dans une variable global...

	==application/json==		==application/json==

Jc.forton : /* Contenu statique */

2019-04-15T10:19:49Z

Contenu statique

← Version précédente		Version du 15 avril 2019 à 12:19
Ligne 134 :		Ligne 134 :
	Si le contenu de votre page HTML dépasse 96 Kio (taille de la RAM de l'ESP8266) il faut dire à l'ESP8266 de ne pas faire transiter la variable par la RAM mais de la lire directement depuis la flash grâce à ''F()'':		Si le contenu de votre page HTML dépasse 96 Kio (taille de la RAM de l'ESP8266) il faut dire à l'ESP8266 de ne pas faire transiter la variable par la RAM mais de la lire directement depuis la flash grâce à ''F()'':
	<source lang="c">		<source lang="c">
	~~char html[] = F~~("~~<!DOCTYPE html><html><head><title>ESP8266</title></head><body><h1>Coucou de l'ESP8266</h1></body><~~/html>");		server.send(200, "text/html", F(html));
	</source>		</source>

	==application/json==		==application/json==

Jc.forton : /* Minification */

2019-04-15T10:05:01Z

Minification

← Version précédente		Version du 15 avril 2019 à 12:05
Ligne 83 :		Ligne 83 :
	==text/html==		==text/html==
	Pour afficher une page avec du HTML l'opération est un peu plus complexe.		Pour afficher une page avec du HTML l'opération est un peu plus complexe.
	~~=== Minification ===~~
	~~Comme le contenu de la page doit être stocké dans une variable, il faut le [https://fr.wikipedia.org/wiki/Minification minifier] !~~

	~~Une fois le contenu minifier, il faut~~
	=== Contenu statique ===		=== Contenu statique ===
	Le plus simple est de commencer avec une page qui ne change pas (contenu statique).		Le plus simple est de commencer avec une page qui ne change pas (contenu statique).

Esp8266 webserver - Historique des versions

Jc.forton : /* Formulaire et paramètres */

Jc.forton : /* Formulaire et paramètres */

Jc.forton : /* application/json */

Jc.forton : /* application/json */

Jc.forton : /* Contenu dynamique */

Jc.forton : /* Contenu dynamique */

Jc.forton : /* Contenu statique */

Jc.forton : /* Contenu statique */

Jc.forton : /* Contenu statique */

Jc.forton : /* Minification */

Jc.forton : /* Formulaire et paramètres */

Jc.forton : /* Formulaire et paramètres */

Jc.forton : /* application/json */

Jc.forton : /* application/json */

Jc.forton : /* Contenu dynamique */

Jc.forton : /* Contenu dynamique */

Jc.forton : /* Contenu statique */

Jc.forton : /* Contenu statique */

Jc.forton : /* Contenu statique */

Jc.forton : /* Minification */