L’ESP8266 peut être programmé comme un Arduino classique, mais son principal intérêt est sa connexion Wi-Fi, qui lui permet de publier des données sur un serveur ou un tableau de bord en ligne. (ThingSpeak, Freeboard.io), ou pour créer facilement des objets connectés contrôlables depuis un serveur domotique ou une application mobile (développée avec Blynk ou Cayenne par exemple). Dans ce tutoriel, nous allons apprendre à programmer le ESP8266 pour qu’il se comporte comme un Serveur Web. C'est-à-dire que nous pouvons interagir avec le programme, le GPIO… depuis une interface Web accessible depuis un navigateur Web.\nAvant de commencer, il est nécessaire de vérifier que toutes les bibliothèques nécessaires sont installées.\nhttp://arduino.esp8266.com/stable/package_esp8266com_index.json
"},{"id":"text-2","type":"text","heading":"","plain_text":"Vous pouvez afficher (par curiosité) les cartes gérées par la bibliothèque ESP8266 et coller l’URL précédente dans un navigateur. En janvier 2017 (version 2.3.0), les cartes suivantes sont gérées:","html":"Vous pouvez afficher (par curiosité) les cartes gérées par la bibliothèque ESP8266 et coller l’URL précédente dans un navigateur. En janvier 2017 (version 2.3.0), les cartes suivantes sont gérées:
"},{"id":"text-3","type":"text","heading":"","plain_text":"Module générique ESP8266\nOlimex MOD-WIFI-ESP8266 (-DEV)\nNodeMCU 0.9 (module ESP-12)\nNodeMCU 1.0 (module ESP-12E)\nAdafruit HUZZAH ESP8266 (ESP-12)\nESPresso Lite 1.0\nESPresso Lite 2.0\nPhoenix 1.0\nPhoenix 2.0\nChose SparkFun\nSweetPea ESP-210\nWeMos D1\nWeMos D1 mini\nESPino (module ESP-12)\nESPino (module WROOM-02)\nWifInfo\nESPDuino","html":"Module générique ESP8266\nOlimex MOD-WIFI-ESP8266 (-DEV)\nNodeMCU 0.9 (module ESP-12)\nNodeMCU 1.0 (module ESP-12E)\nAdafruit HUZZAH ESP8266 (ESP-12)\nESPresso Lite 1.0\nESPresso Lite 2.0\nPhoenix 1.0\nPhoenix 2.0\nChose SparkFun\nSweetPea ESP-210\nWeMos D1\nWeMos D1 mini\nESPino (module ESP-12)\nESPino (module WROOM-02)\nWifInfo\nESPDuino
"},{"id":"text-4","type":"text","heading":"","plain_text":"Aller au responsable du conseil et chercher esp8266, puis cliquez sur installer.","html":"Aller au responsable du conseil et chercher esp8266, puis cliquez sur installer.
"},{"id":"text-5","type":"text","heading":"","plain_text":"En même temps que les cartes, toutes les bibliothèques nécessaires et de nombreux exemples sont installés. Si les exemples ne sont pas visibles dans le menu Fichier -> Exemples -> Exemples pour WeMos D1, quittez et redémarrez l'IDE Arduino.\nNous allons suivre différentes étapes pour comprendre comment créer un serveur Web sur un ESP8266. Ouvrez l'exemple WiFiWebServer.\nIl faut au moins la bibliothèque ESP8266WiFi.h pour créer un serveur Web. Comme toutes les bibliothèques, il est nécessaire de beaucoup approfondir pour connaître les méthodes disponibles. Voici un aperçu pour mieux comprendre ce qui peut être fait. Le code source de la bibliothèque est disponible ici. Cette librairie est une adaptation de toutes les librairies développées pour Arduino. Vous trouverez également des infos ici","html":"En même temps que les cartes, toutes les bibliothèques nécessaires et de nombreux exemples sont installés. Si les exemples ne sont pas visibles dans le menu Fichier -> Exemples -> Exemples pour WeMos D1, quittez et redémarrez l'IDE Arduino.\nNous allons suivre différentes étapes pour comprendre comment créer un serveur Web sur un ESP8266. Ouvrez l'exemple WiFiWebServer.\nIl faut au moins la bibliothèque ESP8266WiFi.h pour créer un serveur Web. Comme toutes les bibliothèques, il est nécessaire de beaucoup approfondir pour connaître les méthodes disponibles. Voici un aperçu pour mieux comprendre ce qui peut être fait. Le code source de la bibliothèque est disponible ici. Cette librairie est une adaptation de toutes les librairies développées pour Arduino. Vous trouverez également des infos ici
"},{"id":"text-6","type":"text","heading":"","plain_text":"WiFiClient","html":"WiFiClient
"},{"id":"text-7","type":"text","heading":"","plain_text":"uint8_t status ()\nint connect (IPAddress ip, uint16_t port)\nint connect (const char * host, port uint16_t)\nsize_t write (uint8_t)\nsize_t write (const uint8_t * buf, taille_t taille)\nsize_t write_P (PGM_P buf, taille_t taille)\nsize_t write (Flux et flux)\nint disponible ()\nread (uint8_t * buf, size_t size)\nint peek ()\nsize_t peekBytes (uint8_t * tampon, taille size_t)\nsize_t peekBytes (char * buffer, taille_t longueur)\nvoid flush ()\nvoid stop ()\nuint8_t connecté ()\nIPAddress remoteIP ()\nuint16_t remotePort ()\nIPAddress localIP ()\nuint16_t localPort ()\nbool getNoDelay ()\nvoid setNoDelay (bool nodelay)\nvoid setLocalPortStart (port uint16_t)\nstatique vide stopAll ();\nstatique vide stopAllExcept (WiFiClient * c)","html":"uint8_t status ()\nint connect (IPAddress ip, uint16_t port)\nint connect (const char * host, port uint16_t)\nsize_t write (uint8_t)\nsize_t write (const uint8_t * buf, taille_t taille)\nsize_t write_P (PGM_P buf, taille_t taille)\nsize_t write (Flux et flux)\nint disponible ()\nread (uint8_t * buf, size_t size)\nint peek ()\nsize_t peekBytes (uint8_t * tampon, taille size_t)\nsize_t peekBytes (char * buffer, taille_t longueur)\nvoid flush ()\nvoid stop ()\nuint8_t connecté ()\nIPAddress remoteIP ()\nuint16_t remotePort ()\nIPAddress localIP ()\nuint16_t localPort ()\nbool getNoDelay ()\nvoid setNoDelay (bool nodelay)\nvoid setLocalPortStart (port uint16_t)\nstatique vide stopAll ();\nstatique vide stopAllExcept (WiFiClient * c)
"},{"id":"text-8","type":"text","heading":"","plain_text":"WiFiServer","html":"WiFiServer
"},{"id":"text-9","type":"text","heading":"","plain_text":"WiFiServer (adresse IPAddress, port uint16_t)\nWiFiServer (port uint16_t)\nWiFiClient disponible (uint8_t * status = NULL)\nbool hasClient ()\nvoid begin ()\nvoid setNoDelay (bool nodelay)\nbool getNoDelay ()\ntaille virtuelle tt write (uint8_t)\nuint8_t status ()\nvoid close ()\nvoid stop ()","html":"WiFiServer (adresse IPAddress, port uint16_t)\nWiFiServer (port uint16_t)\nWiFiClient disponible (uint8_t * status = NULL)\nbool hasClient ()\nvoid begin ()\nvoid setNoDelay (bool nodelay)\nbool getNoDelay ()\ntaille virtuelle tt write (uint8_t)\nuint8_t status ()\nvoid close ()\nvoid stop ()
"},{"id":"text-10","type":"text","heading":"","plain_text":"WiFiUDP\nWiFiClientSecure","html":"WiFiUDP\nWiFiClientSecure
"},{"id":"text-11","type":"text","heading":"","plain_text":"#comprendre \nconst char * ssid = "your-ssid";\nconst char * password = "votre-mot de passe";\nNous créons une instance, un objet qui contiendra le serveur Web. Nous communiquerons avec elle sur le port 80, le port traditionnel des requêtes HTTP utilisées par les navigateurs Internet.\nServeur WiFiServer (80);\nInstaller\nvoid setup() \n // Ouverture du port série en 115200 baud pour envoyer des messages de debug à l'ide par exemple\n // Port série ouvert\n Serial.begin (115200);\n délai (10);","html":"#comprendre \nconst char * ssid = "your-ssid";\nconst char * password = "votre-mot de passe";\nNous créons une instance, un objet qui contiendra le serveur Web. Nous communiquerons avec elle sur le port 80, le port traditionnel des requêtes HTTP utilisées par les navigateurs Internet.\nServeur WiFiServer (80);\nInstaller\nvoid setup() \n // Ouverture du port série en 115200 baud pour envoyer des messages de debug à l'ide par exemple\n // Port série ouvert\n Serial.begin (115200);\n délai (10);
"},{"id":"text-12","type":"text","heading":"","plain_text":" // prépare GPIO2 (sortie)\n pinMode (2, OUTPUT);\n écriture numérique (2, 0);\n \n // Connexion au réseau WiFi\n Serial.println ();\n Serial.println ();\n Serial.print ("Connexion à");\n Serial.println (ssid);\n \n // On se connecte à un réseau WiFi avec le SSID et le mot de passe precedemment configure\n // Connexion au réseau WiFi\n WiFi.begin (ssid, mot de passe);\n \n // On ne fait qu'une boucle avec la connexion etablie.\n // il faudrait améliorer la partie pour un fonctionnement sur batterie en cas d'abscence du réseau\n // on va vider la batterie!\n // Vous devez améliorer cela. Vous risquez de vider votre batterie\n while (WiFi.status ()! = WL_CONNECTED) \n retard (500);\n Serial.print (".");\n \n Serial.println ("");\n Serial.println ("WiFi connected");\n \n // connexion OK, sur le serveur web démarré // démarrer le serveur\n server.begin ();\n Serial.println ("Serveur démarré");","html":"// prépare GPIO2 (sortie)\n pinMode (2, OUTPUT);\n écriture numérique (2, 0);\n \n // Connexion au réseau WiFi\n Serial.println ();\n Serial.println ();\n Serial.print ("Connexion à");\n Serial.println (ssid);\n \n // On se connecte à un réseau WiFi avec le SSID et le mot de passe precedemment configure\n // Connexion au réseau WiFi\n WiFi.begin (ssid, mot de passe);\n \n // On ne fait qu'une boucle avec la connexion etablie.\n // il faudrait améliorer la partie pour un fonctionnement sur batterie en cas d'abscence du réseau\n // on va vider la batterie!\n // Vous devez améliorer cela. Vous risquez de vider votre batterie\n while (WiFi.status ()! = WL_CONNECTED) \n retard (500);\n Serial.print (".");\n \n Serial.println ("");\n Serial.println ("WiFi connected");\n \n // connexion OK, sur le serveur web démarré // démarrer le serveur\n server.begin ();\n Serial.println ("Serveur démarré");
"},{"id":"text-13","type":"text","heading":"","plain_text":" // On indique sur le port serie l'adresse IP de l'ESP pour trouver facilement / Imprimer l'adresse IP\n Serial.println (WiFi.localIP ());","html":"// On indique sur le port serie l'adresse IP de l'ESP pour trouver facilement / Imprimer l'adresse IP\n Serial.println (WiFi.localIP ());
"},{"id":"text-14","type":"text","heading":"","plain_text":"Qu'est-ce qui se passe dans la boucle?\nNous ne faisons quelque chose que si un client est connecté, c'est-à-dire que nous faisons une requête HTTP sur l'ESP8266 à partir d'un navigateur Internet.\nClient WiFiClient = server.available ();\nsi (! client) \n revenir;","html":"Qu'est-ce qui se passe dans la boucle?\nNous ne faisons quelque chose que si un client est connecté, c'est-à-dire que nous faisons une requête HTTP sur l'ESP8266 à partir d'un navigateur Internet.\nClient WiFiClient = server.available ();\nsi (! client) \n revenir;
"},{"id":"text-15","type":"text","heading":"","plain_text":"Lorsqu'un client se connecte, cela est indiqué sur le port série.\nSerial.println ("nouveau client");\nwhile (! client.available ()) \n retarder (1);","html":"Lorsqu'un client se connecte, cela est indiqué sur le port série.\nSerial.println ("nouveau client");\nwhile (! client.available ()) \n retarder (1);
"},{"id":"text-16","type":"text","heading":"","plain_text":"Nous récupérons la requête HTTP, ici l'URL saisie dans le navigateur simplement. Le contenu de la requête HTTP est envoyé au port série. Le tampon est vidé en utilisant la méthode de vidage.\nString req = client.readStringUntil (' r');\nSerial.println (req);\nclient.flush ();\nLa requête HTTP est vérifiée pour savoir quoi faire. La méthode la plus simple consiste à transmettre des commandes à ESP8266 sous forme de / gpio / state (0, 1 ou on / off) commande. Nous allons juste faire un test sur une chaîne de caractères avec la commande indexOf sur la variable req. Ce type de stratégie convient aux petits projets, mais il peut rapidement devenir une source d'erreur avec l'empilement de if, else if.\nint val;\nif (req.indexOf ("/ gpio / 0")! = -1)\n val = 0;\nelse if (req.indexOf ("/ gpio / 1")! = -1)\n val = 1;\nautre \n Serial.println ("demande invalide");\n client.stop ();\n revenir;","html":"Nous récupérons la requête HTTP, ici l'URL saisie dans le navigateur simplement. Le contenu de la requête HTTP est envoyé au port série. Le tampon est vidé en utilisant la méthode de vidage.\nString req = client.readStringUntil (' r');\nSerial.println (req);\nclient.flush ();\nLa requête HTTP est vérifiée pour savoir quoi faire. La méthode la plus simple consiste à transmettre des commandes à ESP8266 sous forme de / gpio / state (0, 1 ou on / off) commande. Nous allons juste faire un test sur une chaîne de caractères avec la commande indexOf sur la variable req. Ce type de stratégie convient aux petits projets, mais il peut rapidement devenir une source d'erreur avec l'empilement de if, else if.\nint val;\nif (req.indexOf ("/ gpio / 0")! = -1)\n val = 0;\nelse if (req.indexOf ("/ gpio / 1")! = -1)\n val = 1;\nautre \n Serial.println ("demande invalide");\n client.stop ();\n revenir;
"},{"id":"text-17","type":"text","heading":"","plain_text":"Nous mettons à jour le GPIO et vidons le tampon\ndigitalWrite (2, val);\nclient.flush ();\nNous créons maintenant une page HTML contenant le statut du GPIO. Ceci est une chaîne de texte contenant le code HTML de la page. Le code de la page, le statut du GPIO\nString s = "HTTP / 1.1 200 OK r nContenu-Type: text / html r n r n r n r nGPIO is now ";\ns + = (val)? "haut": "bas";\ns + = " n ";\nNous publions cette page au client avec la commande d'impression, très facile!\nclient.print (s);\nMaintenant, vous pouvez contrôler à distance tout matériel connecté au GPIO (un relais, une led, un moteur, un servo…) en utilisant une simple requête HTTP. Par exemple, vous pouvez simplement exécuter une commande à partir d’un logiciel de domotique. Voici deux exemples, le premier pour Domoticz, le second pour Jeedom.\nMaintenant, vous voudrez certainement créer une petite interface pour vos projets ESP8266. Pour cela, nous devons connaître quelques bases du HTML. Nous n’allons pas aller très loin dans l’apprentissage du HTML, nous devons simplement apprendre les éléments importants pour bien démarrer et avoir un projet concret. Si vous avez besoin de plus d’éléments d’interface, je vous recommande w3scholls, qui est une référence dans l’apprentissage HTML.\nDans un projet ESP8266, nous pouvons créer des pages HTML en dynamique, autrement dit, nous construisons une chaîne de texte contenant le code de la page qui sera ensuite affichée. C’est ce que nous allons faire. Mais l'ESP8266 est aussi capable de fonctionner comme un vrai site web, c'est-à-dire que nous pouvons installer sur des pages flash HTML, du code javascript, des feuilles de style CSS… Nous n'irons pas jusqu'à présent dans ce premier tutoriel.\nJe propose de créer une petite station météo pour avoir des données à mettre à jour régulièrement et créer un bouton pour activer / désactiver une sortie GPIO (juste une Led, par exemple). J'ai utilisé le matériel suivant\nCâblage\nVoici un tableau de marquage des broches et de correspondance entre Arduino et ESP8266.","html":"Nous mettons à jour le GPIO et vidons le tampon\ndigitalWrite (2, val);\nclient.flush ();\nNous créons maintenant une page HTML contenant le statut du GPIO. Ceci est une chaîne de texte contenant le code HTML de la page. Le code de la page, le statut du GPIO\nString s = "HTTP / 1.1 200 OK r nContenu-Type: text / html r n r n r n r nGPIO is now ";\ns + = (val)? "haut": "bas";\ns + = " n ";\nNous publions cette page au client avec la commande d'impression, très facile!\nclient.print (s);\nMaintenant, vous pouvez contrôler à distance tout matériel connecté au GPIO (un relais, une led, un moteur, un servo…) en utilisant une simple requête HTTP. Par exemple, vous pouvez simplement exécuter une commande à partir d’un logiciel de domotique. Voici deux exemples, le premier pour Domoticz, le second pour Jeedom.\nMaintenant, vous voudrez certainement créer une petite interface pour vos projets ESP8266. Pour cela, nous devons connaître quelques bases du HTML. Nous n’allons pas aller très loin dans l’apprentissage du HTML, nous devons simplement apprendre les éléments importants pour bien démarrer et avoir un projet concret. Si vous avez besoin de plus d’éléments d’interface, je vous recommande w3scholls, qui est une référence dans l’apprentissage HTML.\nDans un projet ESP8266, nous pouvons créer des pages HTML en dynamique, autrement dit, nous construisons une chaîne de texte contenant le code de la page qui sera ensuite affichée. C’est ce que nous allons faire. Mais l'ESP8266 est aussi capable de fonctionner comme un vrai site web, c'est-à-dire que nous pouvons installer sur des pages flash HTML, du code javascript, des feuilles de style CSS… Nous n'irons pas jusqu'à présent dans ce premier tutoriel.\nJe propose de créer une petite station météo pour avoir des données à mettre à jour régulièrement et créer un bouton pour activer / désactiver une sortie GPIO (juste une Led, par exemple). J'ai utilisé le matériel suivant\nCâblage\nVoici un tableau de marquage des broches et de correspondance entre Arduino et ESP8266.
"},{"id":"text-18","type":"text","heading":"","plain_text":"Capteur\nÉpingle\nESP8266 Pin (Wemos D1 mini)","html":"Capteur\nÉpingle\nESP8266 Pin (Wemos D1 mini)
"},{"id":"text-19","type":"text","heading":"","plain_text":"DHT22\nVCC\n5V","html":"DHT22\nVCC\n5V
"},{"id":"text-20","type":"text","heading":"","plain_text":"GND\ng","html":"GND\ng
"},{"id":"text-21","type":"text","heading":"","plain_text":"Les données\nG5","html":"Les données\nG5
"},{"id":"text-22","type":"text","heading":"","plain_text":"BMP180\nVCC\n5V","html":"BMP180\nVCC\n5V
"},{"id":"text-23","type":"text","heading":"","plain_text":"GND\ng","html":"GND\ng
"},{"id":"text-24","type":"text","heading":"","plain_text":"SDA\nD2","html":"SDA\nD2
"},{"id":"text-25","type":"text","heading":"","plain_text":"Nous commençons par déclarer les bibliothèques nécessaires. N'oubliez pas d'installer les bibliothèques à partir du gestionnaire de bibliothèques (DHT et BMP085).","html":"Nous commençons par déclarer les bibliothèques nécessaires. N'oubliez pas d'installer les bibliothèques à partir du gestionnaire de bibliothèques (DHT et BMP085).
"},{"id":"text-26","type":"text","heading":"","plain_text":"Remarque. Vous pourriez rencontrer une erreur lors de la compilation adafruit_Sensor.h: Aucun fichier ou répertoire de ce nom. Dans ce cas, téléchargez et décompressez la bibliothèque manuellement à partir de GitHub dans le dossier Arduino -> Bibliothèque, puis redémarrez l'EDI pour que celle-ci prenne effet.","html":"Remarque. Vous pourriez rencontrer une erreur lors de la compilation adafruit_Sensor.h: Aucun fichier ou répertoire de ce nom. Dans ce cas, téléchargez et décompressez la bibliothèque manuellement à partir de GitHub dans le dossier Arduino -> Bibliothèque, puis redémarrez l'EDI pour que celle-ci prenne effet.
"},{"id":"text-27","type":"text","heading":"","plain_text":"#comprendre \n#comprendre \n#comprendre \n#comprendre \n#comprendre \nLes variables de programme sont définies. Modifiez le réseau WiFi auquel vous allez vous connecter et le mot de passe du réseau WiFi.\n#define ssid "ssid" // SSID WiFi\n#define password "password" // mot de passe WiFi\n#define DHTTYPE DHT22 // Type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche du DHT / Broche DHT\n#define LEDPIN D3 // Led\nfloat t = 0;\nfloat h = 0;\nfloat p = 0;\nString etatLed = "OFF";\nNous créons le dht, bmp et serveur objets\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nServeur ESP8266WebServer (80);\nCette première fonction permet de construire le code HTML de la page principale du programme. C'est une simple chaîne de caractère. C'est un assemblage de chaînes. Vous pouvez facilement inclure la valeur ou l'état d'une variable (par exemple, le statut d'une sortie). En retour, la fonction retourne une chaîne contenant le code HTML de la page.\nString getPage () \n String page = "";\n page + = "ESP8266 Demo - www.projetsdiy.fr";\n page + = "";\n page + = "ESP8266 Demo";\n page + = "DHT22";\n page + = "Température : ";\n page + = t;\n page + = "° C";\n page + = "Humidite: ";\n page + = h;\n page + = "%BMP180";\n page + = "Pression atmosphérique: ";\n page + = p;\n page + = "mbar";\n page + = "GPIO";\n page + = "";\n page + = "D3 (etat: ";\n page + = etatLed;\n page + = ")SUR";\n page + = "DE";\n page + = "";\n page + = "diyprojects.io";\n page + = "";\n retourner la page;","html":"#comprendre \n#comprendre \n#comprendre \n#comprendre \n#comprendre \nLes variables de programme sont définies. Modifiez le réseau WiFi auquel vous allez vous connecter et le mot de passe du réseau WiFi.\n#define ssid "ssid" // SSID WiFi\n#define password "password" // mot de passe WiFi\n#define DHTTYPE DHT22 // Type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche du DHT / Broche DHT\n#define LEDPIN D3 // Led\nfloat t = 0;\nfloat h = 0;\nfloat p = 0;\nString etatLed = "OFF";\nNous créons le dht, bmp et serveur objets\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nServeur ESP8266WebServer (80);\nCette première fonction permet de construire le code HTML de la page principale du programme. C'est une simple chaîne de caractère. C'est un assemblage de chaînes. Vous pouvez facilement inclure la valeur ou l'état d'une variable (par exemple, le statut d'une sortie). En retour, la fonction retourne une chaîne contenant le code HTML de la page.\nString getPage () \n String page = "";\n page + = "ESP8266 Demo - www.projetsdiy.fr";\n page + = "";\n page + = "ESP8266 Demo";\n page + = "DHT22";\n page + = "Température : ";\n page + = t;\n page + = "° C";\n page + = "Humidite: ";\n page + = h;\n page + = "%BMP180";\n page + = "Pression atmosphérique: ";\n page + = p;\n page + = "mbar";\n page + = "GPIO";\n page + = "";\n page + = "D3 (etat: ";\n page + = etatLed;\n page + = ")SUR";\n page + = "DE";\n page + = "";\n page + = "diyprojects.io";\n page + = "";\n retourner la page;
"},{"id":"text-28","type":"text","heading":"","plain_text":"Voyons un peu mieux comment le code est construit","html":"Voyons un peu mieux comment le code est construit
"},{"id":"text-29","type":"text","heading":"","plain_text":"Code HTML\nExplication","html":"Code HTML\nExplication
"},{"id":"text-30","type":"text","heading":"","plain_text":"ESP8266 Demo – www.projetsdiy.fr","html":"ESP8266 Demo – www.projetsdiy.fr
"},{"id":"text-31","type":"text","heading":"","plain_text":"Lang: définir la langue de la page\nTête: c'est l'en-tête de la page. Il contient différentes méta (paramètres)","html":"Lang: définir la langue de la page\nTête: c'est l'en-tête de la page. Il contient différentes méta (paramètres)
"},{"id":"text-32","type":"text","heading":"","plain_text":"http-equiv = ‘refresh’: il s’agit d’une page que le navigateur devra actualiser. Pour plus de types, allez ici\ncontenu = "10": toutes les 10 secondes","html":"http-equiv = ‘refresh’: il s’agit d’une page que le navigateur devra actualiser. Pour plus de types, allez ici\ncontenu = "10": toutes les 10 secondes
"},{"id":"text-33","type":"text","heading":"","plain_text":"Titre: le titre de la page affichée dans la barre de navigation\nstyle: un style pour la page (couleur de fond, police à utiliser, couleur du texte","html":"Titre: le titre de la page affichée dans la barre de navigation\nstyle: un style pour la page (couleur de fond, police à utiliser, couleur du texte
"},{"id":"text-34","type":"text","heading":"","plain_text":"Contenu de la page","html":"Contenu de la page
"},{"id":"text-35","type":"text","heading":"","plain_text":"ESP8266 Demo","html":"ESP8266 Demo
"},{"id":"text-36","type":"text","heading":"","plain_text":"Titre","html":"Titre
"},{"id":"text-37","type":"text","heading":"","plain_text":"DHT22","html":"DHT22
"},{"id":"text-38","type":"text","heading":"","plain_text":"sous-titre (littler) pour le capteur DHT22","html":"sous-titre (littler) pour le capteur DHT22
"},{"id":"text-39","type":"text","heading":"","plain_text":"Température: xx ° C\nHumidité: xx%","html":"Température: xx ° C\nHumidité: xx%
"},{"id":"text-40","type":"text","heading":"","plain_text":"le ul bloc est utilisé pour afficher les informations dans une liste. Même chose pour le BMP180","html":"le ul bloc est utilisé pour afficher les informations dans une liste. Même chose pour le BMP180
"},{"id":"text-41","type":"text","heading":"","plain_text":"D3 (etat: xx)\nSUR\nDE","html":"D3 (etat: xx)\nSUR\nDE
"},{"id":"text-42","type":"text","heading":"","plain_text":"Pour mettre à jour le GPIO, un formulaire est utilisé. Ici, nous utilisons un bouton radio pour changer l’état (On / Off), puis soumettre le contenu du formulaire avec un bouton.\nle Nom Cette option vous permet de nommer la variable qui contiendra l'état que vous voulez récupérer dans le code Arduino. Ici LED.","html":"Pour mettre à jour le GPIO, un formulaire est utilisé. Ici, nous utilisons un bouton radio pour changer l’état (On / Off), puis soumettre le contenu du formulaire avec un bouton.\nle Nom Cette option vous permet de nommer la variable qui contiendra l'état que vous voulez récupérer dans le code Arduino. Ici LED.
"},{"id":"text-43","type":"text","heading":"","plain_text":"Toute balise ouverte doit être fermée (mieux!)","html":"Toute balise ouverte doit être fermée (mieux!)
"},{"id":"text-44","type":"text","heading":"","plain_text":"La fonction handleRoot permet de contrôler si une demande de mise à jour du GPIO est reçue en contrôlant si l'argument de voyant est renvoyé par la page. Si tel est le cas, exécutez la fonction handleSubmit. Ça dépend de nous\nvoid handleRoot () \n if (server.hasArg ("LED")) \n handleSubmit ();\n autre \n server.send (200, "text / html", getPage ());\n ","html":"La fonction handleRoot permet de contrôler si une demande de mise à jour du GPIO est reçue en contrôlant si l'argument de voyant est renvoyé par la page. Si tel est le cas, exécutez la fonction handleSubmit. Ça dépend de nous\nvoid handleRoot () \n if (server.hasArg ("LED")) \n handleSubmit ();\n autre \n server.send (200, "text / html", getPage ());\n
"},{"id":"text-45","type":"text","heading":"","plain_text":"La fonction handleSubmit traite la mise à jour du GPIO. L'état de la variable LED est récupéré. C'est une chaîne de caractères, nous devons donc tester «1» et non pas 1. Nous en profitons pour affecter l'état du GPIO dans la variable etatLed sous la forme d'une chaîne, c'est plus amusant à lire. Enfin, nous mettons à jour l'affichage de la page HTML avec server.send. La page mise à jour est récupérée en appelant la fonction getPage ().\nvoid handleSubmit () \n // Actualiser le GPIO / Mettre à jour le GPIO\n String LEDValue;\n LEDValue = server.arg ("LED");\n Serial.println ("Set GPIO"); Serial.print (LEDValue);\n if (LEDValue == "1") \n digitalWrite (LEDPIN, 1);\n etatLed = "On";\n server.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \n digitalWrite (LEDPIN, 0);\n etatLed = "Off";\n server.send (200, "text / html", getPage ());\n autre \n Serial.println ("Err Led Value");\n ","html":"La fonction handleSubmit traite la mise à jour du GPIO. L'état de la variable LED est récupéré. C'est une chaîne de caractères, nous devons donc tester «1» et non pas 1. Nous en profitons pour affecter l'état du GPIO dans la variable etatLed sous la forme d'une chaîne, c'est plus amusant à lire. Enfin, nous mettons à jour l'affichage de la page HTML avec server.send. La page mise à jour est récupérée en appelant la fonction getPage ().\nvoid handleSubmit () \n // Actualiser le GPIO / Mettre à jour le GPIO\n String LEDValue;\n LEDValue = server.arg ("LED");\n Serial.println ("Set GPIO"); Serial.print (LEDValue);\n if (LEDValue == "1") \n digitalWrite (LEDPIN, 1);\n etatLed = "On";\n server.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \n digitalWrite (LEDPIN, 0);\n etatLed = "Off";\n server.send (200, "text / html", getPage ());\n autre \n Serial.println ("Err Led Value");\n
"},{"id":"text-46","type":"text","heading":"","plain_text":"Maintenant que toutes les fonctions sont créées, vous pouvez appeler le installer() une fonction. Il initialise le BMP180, la connexion WiFi, connecte la fonction qui s'occupe de la page principale et lance enfin le serveur web\nvoid setup() \n Serial.begin (115200);\n // Initialisation du BMP180 / Init BMP180\n if (! bmp.begin ()) \n Serial.println ("BMP180 KO!");\n tandis que (1);\n autre \n Serial.println ("BMP180 OK");\n \n \n WiFi.begin (ssid, mot de passe);\n // Attente de connexion au réseau WiFi / Attente de connexion\n while (WiFi.status ()! = WL_CONNECTED) \n retard (500); Serial.print (".");\n \n // Connexion WiFi établie / La connexion WiFi est OK\n Serial.println ("");\n Serial.print ("Connecté à"); Serial.println (ssid);\n Serial.print ("adresse IP:"); Serial.println (WiFi.localIP ());","html":"Maintenant que toutes les fonctions sont créées, vous pouvez appeler le installer() une fonction. Il initialise le BMP180, la connexion WiFi, connecte la fonction qui s'occupe de la page principale et lance enfin le serveur web\nvoid setup() \n Serial.begin (115200);\n // Initialisation du BMP180 / Init BMP180\n if (! bmp.begin ()) \n Serial.println ("BMP180 KO!");\n tandis que (1);\n autre \n Serial.println ("BMP180 OK");\n \n \n WiFi.begin (ssid, mot de passe);\n // Attente de connexion au réseau WiFi / Attente de connexion\n while (WiFi.status ()! = WL_CONNECTED) \n retard (500); Serial.print (".");\n \n // Connexion WiFi établie / La connexion WiFi est OK\n Serial.println ("");\n Serial.print ("Connecté à"); Serial.println (ssid);\n Serial.print ("adresse IP:"); Serial.println (WiFi.localIP ());
"},{"id":"text-47","type":"text","heading":"","plain_text":" // Sur la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\n server.on ("/", handleRoot);","html":"// Sur la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\n server.on ("/", handleRoot);
"},{"id":"text-48","type":"text","heading":"","plain_text":" server.begin ();\n Serial.println ("serveur HTTP démarré");","html":"server.begin ();\n Serial.println ("serveur HTTP démarré");
"},{"id":"text-49","type":"text","heading":"","plain_text":"Il ne reste plus qu'à exécuter le boucle() fonction pour lire régulièrement les mesures sur les capteurs. Contrairement à l'exemple précédent basé sur la bibliothèque ESP8266WiFi, voici le ESP8266WebServer doit connecter la fonction de rappel server.handleClient () qui surveille la présence d'un client et fournit la page HTML demandée.\nboucle vide () \n server.handleClient ();\n t = dht.readTemperature ();\n h = dht.readHumidity ();\n p = bmp.readPressure () / 100.0F;\n délai (1000);","html":"Il ne reste plus qu'à exécuter le boucle() fonction pour lire régulièrement les mesures sur les capteurs. Contrairement à l'exemple précédent basé sur la bibliothèque ESP8266WiFi, voici le ESP8266WebServer doit connecter la fonction de rappel server.handleClient () qui surveille la présence d'un client et fournit la page HTML demandée.\nboucle vide () \n server.handleClient ();\n t = dht.readTemperature ();\n h = dht.readHumidity ();\n p = bmp.readPressure () / 100.0F;\n délai (1000);
"},{"id":"text-50","type":"text","heading":"","plain_text":"Voici le code source assemblé du projet que vous collez simplement dans un nouveau projet puis chargez-le.\n#comprendre \n#comprendre \n#comprendre \n#comprendre \n#comprendre","html":"Voici le code source assemblé du projet que vous collez simplement dans un nouveau projet puis chargez-le.\n#comprendre \n#comprendre \n#comprendre \n#comprendre \n#comprendre
"},{"id":"text-51","type":"text","heading":"","plain_text":"#define ssid "xx" // SSID WiFi\n#define password "xxxxxx" // mot de passe WiFi\n#define DHTTYPE DHT22 // Type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche du DHT / Broche DHT\n#define LEDPIN D3 // Led\nfloat t = 0;\nfloat h = 0;\nfloat p = 0;\nString etatLed = "OFF";","html":"#define ssid "xx" // SSID WiFi\n#define password "xxxxxx" // mot de passe WiFi\n#define DHTTYPE DHT22 // Type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche du DHT / Broche DHT\n#define LEDPIN D3 // Led\nfloat t = 0;\nfloat h = 0;\nfloat p = 0;\nString etatLed = "OFF";
"},{"id":"text-52","type":"text","heading":"","plain_text":"// Création des objets / create Objects\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nServeur ESP8266WebServer (80);","html":"// Création des objets / create Objects\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nServeur ESP8266WebServer (80);
"},{"id":"text-53","type":"text","heading":"","plain_text":"String getPage () \n String page = "";\n page + = "ESP8266 Demo - www.projetsdiy.fr";\n page + = "";\n page + = "ESP8266 Demo";\n page + = "DHT22";\n page + = "Température : ";\n page + = t;\n page + = "° C";\n page + = "Humidite: ";\n page + = h;\n page + = "%BMP180";\n page + = "Pression atmosphérique: ";\n page + = p;\n page + = "mbar";\n page + = "GPIO";\n page + = "";\n page + = "D3 (etat: ";\n page + = etatLed;\n page + = ")";\n page + = "SUR";\n page + = "DE";\n page + = "";\n page + = "diyprojects.io";\n page + = "";\n retourner la page;","html":"String getPage () \n String page = "";\n page + = "ESP8266 Demo - www.projetsdiy.fr";\n page + = "";\n page + = "ESP8266 Demo";\n page + = "DHT22";\n page + = "Température : ";\n page + = t;\n page + = "° C";\n page + = "Humidite: ";\n page + = h;\n page + = "%BMP180";\n page + = "Pression atmosphérique: ";\n page + = p;\n page + = "mbar";\n page + = "GPIO";\n page + = "";\n page + = "D3 (etat: ";\n page + = etatLed;\n page + = ")";\n page + = "SUR";\n page + = "DE";\n page + = "";\n page + = "diyprojects.io";\n page + = "";\n retourner la page;
"},{"id":"text-54","type":"text","heading":"","plain_text":"void handleRoot () \n if (server.hasArg ("LED")) \n handleSubmit ();\n autre \n server.send (200, "text / html", getPage ());\n ","html":"void handleRoot () \n if (server.hasArg ("LED")) \n handleSubmit ();\n autre \n server.send (200, "text / html", getPage ());\n
"},{"id":"text-55","type":"text","heading":"","plain_text":"void handleSubmit () \n // Actualiser le GPIO / Mettre à jour le GPIO\n String LEDValue;\n LEDValue = server.arg ("LED");\n Serial.println ("Set GPIO"); Serial.print (LEDValue);\n if (LEDValue == "1") \n digitalWrite (LEDPIN, 1);\n etatLed = "On";\n server.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \n digitalWrite (LEDPIN, 0);\n etatLed = "Off";\n server.send (200, "text / html", getPage ());\n autre \n Serial.println ("Err Led Value");\n ","html":"void handleSubmit () \n // Actualiser le GPIO / Mettre à jour le GPIO\n String LEDValue;\n LEDValue = server.arg ("LED");\n Serial.println ("Set GPIO"); Serial.print (LEDValue);\n if (LEDValue == "1") \n digitalWrite (LEDPIN, 1);\n etatLed = "On";\n server.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \n digitalWrite (LEDPIN, 0);\n etatLed = "Off";\n server.send (200, "text / html", getPage ());\n autre \n Serial.println ("Err Led Value");\n
"},{"id":"text-56","type":"text","heading":"","plain_text":"void setup() \n Serial.begin (115200);\n // Initialisation du BMP180 / Init BMP180\n if (! bmp.begin ()) \n Serial.println ("BMP180 KO!");\n tandis que (1);\n autre \n Serial.println ("BMP180 OK");\n \n \n pinMode (LEDPIN, OUTPUT);\n WiFi.begin (ssid, mot de passe);\n // Attente de connexion au réseau WiFi / Attente de connexion\n while (WiFi.status ()! = WL_CONNECTED) \n retard (500); Serial.print (".");\n \n // Connexion WiFi établie / La connexion WiFi est OK\n Serial.println ("");\n Serial.print ("Connecté à"); Serial.println (ssid);\n Serial.print ("adresse IP:"); Serial.println (WiFi.localIP ());","html":"void setup() \n Serial.begin (115200);\n // Initialisation du BMP180 / Init BMP180\n if (! bmp.begin ()) \n Serial.println ("BMP180 KO!");\n tandis que (1);\n autre \n Serial.println ("BMP180 OK");\n \n \n pinMode (LEDPIN, OUTPUT);\n WiFi.begin (ssid, mot de passe);\n // Attente de connexion au réseau WiFi / Attente de connexion\n while (WiFi.status ()! = WL_CONNECTED) \n retard (500); Serial.print (".");\n \n // Connexion WiFi établie / La connexion WiFi est OK\n Serial.println ("");\n Serial.print ("Connecté à"); Serial.println (ssid);\n Serial.print ("adresse IP:"); Serial.println (WiFi.localIP ());
"},{"id":"text-57","type":"text","heading":"","plain_text":" // Sur la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\n server.on ("/", handleRoot);","html":"// Sur la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\n server.on ("/", handleRoot);
"},{"id":"text-58","type":"text","heading":"","plain_text":" server.begin ();\n Serial.println ("serveur HTTP démarré");\n ","html":"server.begin ();\n Serial.println ("serveur HTTP démarré");\n
"},{"id":"text-59","type":"text","heading":"","plain_text":"boucle vide () \n server.handleClient ();\n t = dht.readTemperature ();\n h = dht.readHumidity ();\n p = bmp.readPressure () / 100.0F;\n délai (1000);","html":"boucle vide () \n server.handleClient ();\n t = dht.readTemperature ();\n h = dht.readHumidity ();\n p = bmp.readPressure () / 100.0F;\n délai (1000);
"},{"id":"text-60","type":"text","heading":"","plain_text":"Récupérez l'adresse IP du Wemos en ouvrant le moniteur série, puis connectez-le à partir d'un navigateur Web pour accéder à l'interface de la mini station météo.","html":"Récupérez l'adresse IP du Wemos en ouvrant le moniteur série, puis connectez-le à partir d'un navigateur Web pour accéder à l'interface de la mini station météo.
"},{"id":"text-61","type":"text","heading":"","plain_text":"Ici, nous savons maintenant comment créer un serveur Web à l'aide d'un ESP8266, piloter le GPIO et afficher les mesures à partir de capteurs. Nous n’avons vu ici que les rudiments de base pour commencer mais ils couvrent déjà une bonne partie de ce qui est nécessaire pour développer de petits objets connectés. Dans le prochain tutoriel, nous verrons comment avoir une meilleure interface graphique en utilisant Bootstrap, un framework développé par un développeur de Tweeter qui permet de créer de plus belles interfaces graphiques en HTML.\nVoici d'autres articles qui pourraient vous intéresser pour aller plus loin dans ce tutoriel. Bons développements!","html":"Ici, nous savons maintenant comment créer un serveur Web à l'aide d'un ESP8266, piloter le GPIO et afficher les mesures à partir de capteurs. Nous n’avons vu ici que les rudiments de base pour commencer mais ils couvrent déjà une bonne partie de ce qui est nécessaire pour développer de petits objets connectés. Dans le prochain tutoriel, nous verrons comment avoir une meilleure interface graphique en utilisant Bootstrap, un framework développé par un développeur de Tweeter qui permet de créer de plus belles interfaces graphiques en HTML.\nVoici d'autres articles qui pourraient vous intéresser pour aller plus loin dans ce tutoriel. Bons développements!
"},{"id":"text-62","type":"text","heading":"","plain_text":"Remarque. Tout le tutoriel a été développé sur l'IDE Arduino 1.8.1 installé sur un Orange Pi Plus 2e (présenté ici) fonctionnant sous Armbian (Ubuntu 16.04 LTS). Suivez ce tutoriel pour apprendre à installer l'IDE Arduino sur Linux (ARM ou x86).","html":"Remarque. Tout le tutoriel a été développé sur l'IDE Arduino 1.8.1 installé sur un Orange Pi Plus 2e (présenté ici) fonctionnant sous Armbian (Ubuntu 16.04 LTS). Suivez ce tutoriel pour apprendre à installer l'IDE Arduino sur Linux (ARM ou x86).
"},{"id":"text-63","type":"text","heading":"","plain_text":"Comme ça:\nComme Chargement…","html":"Comme ça:\nComme Chargement…
"},{"id":"text-64","type":"text","heading":"","plain_text":"Click to rate this post!\n \n [Total: 0 Average: 0]","html":"Click to rate this post!\n \n [Total: 0 Average: 0]
"}],"sections":[{"id":"text-1","heading":"Text","content":"L’ESP8266 peut être programmé comme un Arduino classique, mais son principal intérêt est sa connexion Wi-Fi, qui lui permet de publier des données sur un serveur ou un tableau de bord en ligne. (ThingSpeak, Freeboard.io), ou pour créer facilement des objets connectés contrôlables depuis un serveur domotique ou une application mobile (développée avec Blynk ou Cayenne par exemple). Dans ce tutoriel, nous allons apprendre à programmer le ESP8266 pour qu’il se comporte comme un Serveur Web. C'est-à-dire que nous pouvons interagir avec le programme, le GPIO… depuis une interface Web accessible depuis un navigateur Web.\nAvant de commencer, il est nécessaire de vérifier que toutes les bibliothèques nécessaires sont installées.\nhttp://arduino.esp8266.com/stable/package_esp8266com_index.json"},{"id":"text-2","heading":"Text","content":"Vous pouvez afficher (par curiosité) les cartes gérées par la bibliothèque ESP8266 et coller l’URL précédente dans un navigateur. En janvier 2017 (version 2.3.0), les cartes suivantes sont gérées:"},{"id":"text-3","heading":"Text","content":"Module générique ESP8266\nOlimex MOD-WIFI-ESP8266 (-DEV)\nNodeMCU 0.9 (module ESP-12)\nNodeMCU 1.0 (module ESP-12E)\nAdafruit HUZZAH ESP8266 (ESP-12)\nESPresso Lite 1.0\nESPresso Lite 2.0\nPhoenix 1.0\nPhoenix 2.0\nChose SparkFun\nSweetPea ESP-210\nWeMos D1\nWeMos D1 mini\nESPino (module ESP-12)\nESPino (module WROOM-02)\nWifInfo\nESPDuino"},{"id":"text-4","heading":"Text","content":"Aller au responsable du conseil et chercher esp8266, puis cliquez sur installer."},{"id":"text-5","heading":"Text","content":"En même temps que les cartes, toutes les bibliothèques nécessaires et de nombreux exemples sont installés. Si les exemples ne sont pas visibles dans le menu Fichier -> Exemples -> Exemples pour WeMos D1, quittez et redémarrez l'IDE Arduino.\nNous allons suivre différentes étapes pour comprendre comment créer un serveur Web sur un ESP8266. Ouvrez l'exemple WiFiWebServer.\nIl faut au moins la bibliothèque ESP8266WiFi.h pour créer un serveur Web. Comme toutes les bibliothèques, il est nécessaire de beaucoup approfondir pour connaître les méthodes disponibles. Voici un aperçu pour mieux comprendre ce qui peut être fait. Le code source de la bibliothèque est disponible ici. Cette librairie est une adaptation de toutes les librairies développées pour Arduino. Vous trouverez également des infos ici"},{"id":"text-6","heading":"Text","content":"WiFiClient"},{"id":"text-7","heading":"Text","content":"uint8_t status ()\nint connect (IPAddress ip, uint16_t port)\nint connect (const char * host, port uint16_t)\nsize_t write (uint8_t)\nsize_t write (const uint8_t * buf, taille_t taille)\nsize_t write_P (PGM_P buf, taille_t taille)\nsize_t write (Flux et flux)\nint disponible ()\nread (uint8_t * buf, size_t size)\nint peek ()\nsize_t peekBytes (uint8_t * tampon, taille size_t)\nsize_t peekBytes (char * buffer, taille_t longueur)\nvoid flush ()\nvoid stop ()\nuint8_t connecté ()\nIPAddress remoteIP ()\nuint16_t remotePort ()\nIPAddress localIP ()\nuint16_t localPort ()\nbool getNoDelay ()\nvoid setNoDelay (bool nodelay)\nvoid setLocalPortStart (port uint16_t)\nstatique vide stopAll ();\nstatique vide stopAllExcept (WiFiClient * c)"},{"id":"text-8","heading":"Text","content":"WiFiServer"},{"id":"text-9","heading":"Text","content":"WiFiServer (adresse IPAddress, port uint16_t)\nWiFiServer (port uint16_t)\nWiFiClient disponible (uint8_t * status = NULL)\nbool hasClient ()\nvoid begin ()\nvoid setNoDelay (bool nodelay)\nbool getNoDelay ()\ntaille virtuelle tt write (uint8_t)\nuint8_t status ()\nvoid close ()\nvoid stop ()"},{"id":"text-10","heading":"Text","content":"WiFiUDP\nWiFiClientSecure"},{"id":"text-11","heading":"Text","content":"#comprendre \nconst char * ssid = "your-ssid";\nconst char * password = "votre-mot de passe";\nNous créons une instance, un objet qui contiendra le serveur Web. Nous communiquerons avec elle sur le port 80, le port traditionnel des requêtes HTTP utilisées par les navigateurs Internet.\nServeur WiFiServer (80);\nInstaller\nvoid setup() \n // Ouverture du port série en 115200 baud pour envoyer des messages de debug à l'ide par exemple\n // Port série ouvert\n Serial.begin (115200);\n délai (10);"},{"id":"text-12","heading":"Text","content":" // prépare GPIO2 (sortie)\n pinMode (2, OUTPUT);\n écriture numérique (2, 0);\n \n // Connexion au réseau WiFi\n Serial.println ();\n Serial.println ();\n Serial.print ("Connexion à");\n Serial.println (ssid);\n \n // On se connecte à un réseau WiFi avec le SSID et le mot de passe precedemment configure\n // Connexion au réseau WiFi\n WiFi.begin (ssid, mot de passe);\n \n // On ne fait qu'une boucle avec la connexion etablie.\n // il faudrait améliorer la partie pour un fonctionnement sur batterie en cas d'abscence du réseau\n // on va vider la batterie!\n // Vous devez améliorer cela. Vous risquez de vider votre batterie\n while (WiFi.status ()! = WL_CONNECTED) \n retard (500);\n Serial.print (".");\n \n Serial.println ("");\n Serial.println ("WiFi connected");\n \n // connexion OK, sur le serveur web démarré // démarrer le serveur\n server.begin ();\n Serial.println ("Serveur démarré");"},{"id":"text-13","heading":"Text","content":" // On indique sur le port serie l'adresse IP de l'ESP pour trouver facilement / Imprimer l'adresse IP\n Serial.println (WiFi.localIP ());"},{"id":"text-14","heading":"Text","content":"Qu'est-ce qui se passe dans la boucle?\nNous ne faisons quelque chose que si un client est connecté, c'est-à-dire que nous faisons une requête HTTP sur l'ESP8266 à partir d'un navigateur Internet.\nClient WiFiClient = server.available ();\nsi (! client) \n revenir;"},{"id":"text-15","heading":"Text","content":"Lorsqu'un client se connecte, cela est indiqué sur le port série.\nSerial.println ("nouveau client");\nwhile (! client.available ()) \n retarder (1);"},{"id":"text-16","heading":"Text","content":"Nous récupérons la requête HTTP, ici l'URL saisie dans le navigateur simplement. Le contenu de la requête HTTP est envoyé au port série. Le tampon est vidé en utilisant la méthode de vidage.\nString req = client.readStringUntil (' r');\nSerial.println (req);\nclient.flush ();\nLa requête HTTP est vérifiée pour savoir quoi faire. La méthode la plus simple consiste à transmettre des commandes à ESP8266 sous forme de / gpio / state (0, 1 ou on / off) commande. Nous allons juste faire un test sur une chaîne de caractères avec la commande indexOf sur la variable req. Ce type de stratégie convient aux petits projets, mais il peut rapidement devenir une source d'erreur avec l'empilement de if, else if.\nint val;\nif (req.indexOf ("/ gpio / 0")! = -1)\n val = 0;\nelse if (req.indexOf ("/ gpio / 1")! = -1)\n val = 1;\nautre \n Serial.println ("demande invalide");\n client.stop ();\n revenir;"},{"id":"text-17","heading":"Text","content":"Nous mettons à jour le GPIO et vidons le tampon\ndigitalWrite (2, val);\nclient.flush ();\nNous créons maintenant une page HTML contenant le statut du GPIO. Ceci est une chaîne de texte contenant le code HTML de la page. Le code de la page, le statut du GPIO\nString s = "HTTP / 1.1 200 OK r nContenu-Type: text / html r n r n r n r nGPIO is now ";\ns + = (val)? "haut": "bas";\ns + = " n ";\nNous publions cette page au client avec la commande d'impression, très facile!\nclient.print (s);\nMaintenant, vous pouvez contrôler à distance tout matériel connecté au GPIO (un relais, une led, un moteur, un servo…) en utilisant une simple requête HTTP. Par exemple, vous pouvez simplement exécuter une commande à partir d’un logiciel de domotique. Voici deux exemples, le premier pour Domoticz, le second pour Jeedom.\nMaintenant, vous voudrez certainement créer une petite interface pour vos projets ESP8266. Pour cela, nous devons connaître quelques bases du HTML. Nous n’allons pas aller très loin dans l’apprentissage du HTML, nous devons simplement apprendre les éléments importants pour bien démarrer et avoir un projet concret. Si vous avez besoin de plus d’éléments d’interface, je vous recommande w3scholls, qui est une référence dans l’apprentissage HTML.\nDans un projet ESP8266, nous pouvons créer des pages HTML en dynamique, autrement dit, nous construisons une chaîne de texte contenant le code de la page qui sera ensuite affichée. C’est ce que nous allons faire. Mais l'ESP8266 est aussi capable de fonctionner comme un vrai site web, c'est-à-dire que nous pouvons installer sur des pages flash HTML, du code javascript, des feuilles de style CSS… Nous n'irons pas jusqu'à présent dans ce premier tutoriel.\nJe propose de créer une petite station météo pour avoir des données à mettre à jour régulièrement et créer un bouton pour activer / désactiver une sortie GPIO (juste une Led, par exemple). J'ai utilisé le matériel suivant\nCâblage\nVoici un tableau de marquage des broches et de correspondance entre Arduino et ESP8266."},{"id":"text-18","heading":"Text","content":"Capteur\nÉpingle\nESP8266 Pin (Wemos D1 mini)"},{"id":"text-19","heading":"Text","content":"DHT22\nVCC\n5V"},{"id":"text-20","heading":"Text","content":"GND\ng"},{"id":"text-21","heading":"Text","content":"Les données\nG5"},{"id":"text-22","heading":"Text","content":"BMP180\nVCC\n5V"},{"id":"text-23","heading":"Text","content":"GND\ng"},{"id":"text-24","heading":"Text","content":"SDA\nD2"},{"id":"text-25","heading":"Text","content":"Nous commençons par déclarer les bibliothèques nécessaires. N'oubliez pas d'installer les bibliothèques à partir du gestionnaire de bibliothèques (DHT et BMP085)."},{"id":"text-26","heading":"Text","content":"Remarque. Vous pourriez rencontrer une erreur lors de la compilation adafruit_Sensor.h: Aucun fichier ou répertoire de ce nom. Dans ce cas, téléchargez et décompressez la bibliothèque manuellement à partir de GitHub dans le dossier Arduino -> Bibliothèque, puis redémarrez l'EDI pour que celle-ci prenne effet."},{"id":"text-27","heading":"Text","content":"#comprendre \n#comprendre \n#comprendre \n#comprendre \n#comprendre \nLes variables de programme sont définies. Modifiez le réseau WiFi auquel vous allez vous connecter et le mot de passe du réseau WiFi.\n#define ssid "ssid" // SSID WiFi\n#define password "password" // mot de passe WiFi\n#define DHTTYPE DHT22 // Type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche du DHT / Broche DHT\n#define LEDPIN D3 // Led\nfloat t = 0;\nfloat h = 0;\nfloat p = 0;\nString etatLed = "OFF";\nNous créons le dht, bmp et serveur objets\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nServeur ESP8266WebServer (80);\nCette première fonction permet de construire le code HTML de la page principale du programme. C'est une simple chaîne de caractère. C'est un assemblage de chaînes. Vous pouvez facilement inclure la valeur ou l'état d'une variable (par exemple, le statut d'une sortie). En retour, la fonction retourne une chaîne contenant le code HTML de la page.\nString getPage () \n String page = "";\n page + = "ESP8266 Demo - www.projetsdiy.fr";\n page + = "";\n page + = "ESP8266 Demo";\n page + = "DHT22";\n page + = "Température : ";\n page + = t;\n page + = "° C";\n page + = "Humidite: ";\n page + = h;\n page + = "%BMP180";\n page + = "Pression atmosphérique: ";\n page + = p;\n page + = "mbar";\n page + = "GPIO";\n page + = "";\n page + = "D3 (etat: ";\n page + = etatLed;\n page + = ")SUR";\n page + = "DE";\n page + = "";\n page + = "diyprojects.io";\n page + = "";\n retourner la page;"},{"id":"text-28","heading":"Text","content":"Voyons un peu mieux comment le code est construit"},{"id":"text-29","heading":"Text","content":"Code HTML\nExplication"},{"id":"text-30","heading":"Text","content":"ESP8266 Demo – www.projetsdiy.fr"},{"id":"text-31","heading":"Text","content":"Lang: définir la langue de la page\nTête: c'est l'en-tête de la page. Il contient différentes méta (paramètres)"},{"id":"text-32","heading":"Text","content":"http-equiv = ‘refresh’: il s’agit d’une page que le navigateur devra actualiser. Pour plus de types, allez ici\ncontenu = "10": toutes les 10 secondes"},{"id":"text-33","heading":"Text","content":"Titre: le titre de la page affichée dans la barre de navigation\nstyle: un style pour la page (couleur de fond, police à utiliser, couleur du texte"},{"id":"text-34","heading":"Text","content":"Contenu de la page"},{"id":"text-35","heading":"Text","content":"ESP8266 Demo"},{"id":"text-36","heading":"Text","content":"Titre"},{"id":"text-37","heading":"Text","content":"DHT22"},{"id":"text-38","heading":"Text","content":"sous-titre (littler) pour le capteur DHT22"},{"id":"text-39","heading":"Text","content":"Température: xx ° C\nHumidité: xx%"},{"id":"text-40","heading":"Text","content":"le ul bloc est utilisé pour afficher les informations dans une liste. Même chose pour le BMP180"},{"id":"text-41","heading":"Text","content":"D3 (etat: xx)\nSUR\nDE"},{"id":"text-42","heading":"Text","content":"Pour mettre à jour le GPIO, un formulaire est utilisé. Ici, nous utilisons un bouton radio pour changer l’état (On / Off), puis soumettre le contenu du formulaire avec un bouton.\nle Nom Cette option vous permet de nommer la variable qui contiendra l'état que vous voulez récupérer dans le code Arduino. Ici LED."},{"id":"text-43","heading":"Text","content":"Toute balise ouverte doit être fermée (mieux!)"},{"id":"text-44","heading":"Text","content":"La fonction handleRoot permet de contrôler si une demande de mise à jour du GPIO est reçue en contrôlant si l'argument de voyant est renvoyé par la page. Si tel est le cas, exécutez la fonction handleSubmit. Ça dépend de nous\nvoid handleRoot () \n if (server.hasArg ("LED")) \n handleSubmit ();\n autre \n server.send (200, "text / html", getPage ());\n "},{"id":"text-45","heading":"Text","content":"La fonction handleSubmit traite la mise à jour du GPIO. L'état de la variable LED est récupéré. C'est une chaîne de caractères, nous devons donc tester «1» et non pas 1. Nous en profitons pour affecter l'état du GPIO dans la variable etatLed sous la forme d'une chaîne, c'est plus amusant à lire. Enfin, nous mettons à jour l'affichage de la page HTML avec server.send. La page mise à jour est récupérée en appelant la fonction getPage ().\nvoid handleSubmit () \n // Actualiser le GPIO / Mettre à jour le GPIO\n String LEDValue;\n LEDValue = server.arg ("LED");\n Serial.println ("Set GPIO"); Serial.print (LEDValue);\n if (LEDValue == "1") \n digitalWrite (LEDPIN, 1);\n etatLed = "On";\n server.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \n digitalWrite (LEDPIN, 0);\n etatLed = "Off";\n server.send (200, "text / html", getPage ());\n autre \n Serial.println ("Err Led Value");\n "},{"id":"text-46","heading":"Text","content":"Maintenant que toutes les fonctions sont créées, vous pouvez appeler le installer() une fonction. Il initialise le BMP180, la connexion WiFi, connecte la fonction qui s'occupe de la page principale et lance enfin le serveur web\nvoid setup() \n Serial.begin (115200);\n // Initialisation du BMP180 / Init BMP180\n if (! bmp.begin ()) \n Serial.println ("BMP180 KO!");\n tandis que (1);\n autre \n Serial.println ("BMP180 OK");\n \n \n WiFi.begin (ssid, mot de passe);\n // Attente de connexion au réseau WiFi / Attente de connexion\n while (WiFi.status ()! = WL_CONNECTED) \n retard (500); Serial.print (".");\n \n // Connexion WiFi établie / La connexion WiFi est OK\n Serial.println ("");\n Serial.print ("Connecté à"); Serial.println (ssid);\n Serial.print ("adresse IP:"); Serial.println (WiFi.localIP ());"},{"id":"text-47","heading":"Text","content":" // Sur la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\n server.on ("/", handleRoot);"},{"id":"text-48","heading":"Text","content":" server.begin ();\n Serial.println ("serveur HTTP démarré");"},{"id":"text-49","heading":"Text","content":"Il ne reste plus qu'à exécuter le boucle() fonction pour lire régulièrement les mesures sur les capteurs. Contrairement à l'exemple précédent basé sur la bibliothèque ESP8266WiFi, voici le ESP8266WebServer doit connecter la fonction de rappel server.handleClient () qui surveille la présence d'un client et fournit la page HTML demandée.\nboucle vide () \n server.handleClient ();\n t = dht.readTemperature ();\n h = dht.readHumidity ();\n p = bmp.readPressure () / 100.0F;\n délai (1000);"},{"id":"text-50","heading":"Text","content":"Voici le code source assemblé du projet que vous collez simplement dans un nouveau projet puis chargez-le.\n#comprendre \n#comprendre \n#comprendre \n#comprendre \n#comprendre"},{"id":"text-51","heading":"Text","content":"#define ssid "xx" // SSID WiFi\n#define password "xxxxxx" // mot de passe WiFi\n#define DHTTYPE DHT22 // Type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche du DHT / Broche DHT\n#define LEDPIN D3 // Led\nfloat t = 0;\nfloat h = 0;\nfloat p = 0;\nString etatLed = "OFF";"},{"id":"text-52","heading":"Text","content":"// Création des objets / create Objects\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nServeur ESP8266WebServer (80);"},{"id":"text-53","heading":"Text","content":"String getPage () \n String page = "";\n page + = "ESP8266 Demo - www.projetsdiy.fr";\n page + = "";\n page + = "ESP8266 Demo";\n page + = "DHT22";\n page + = "Température : ";\n page + = t;\n page + = "° C";\n page + = "Humidite: ";\n page + = h;\n page + = "%BMP180";\n page + = "Pression atmosphérique: ";\n page + = p;\n page + = "mbar";\n page + = "GPIO";\n page + = "";\n page + = "D3 (etat: ";\n page + = etatLed;\n page + = ")";\n page + = "SUR";\n page + = "DE";\n page + = "";\n page + = "diyprojects.io";\n page + = "";\n retourner la page;"},{"id":"text-54","heading":"Text","content":"void handleRoot () \n if (server.hasArg ("LED")) \n handleSubmit ();\n autre \n server.send (200, "text / html", getPage ());\n "},{"id":"text-55","heading":"Text","content":"void handleSubmit () \n // Actualiser le GPIO / Mettre à jour le GPIO\n String LEDValue;\n LEDValue = server.arg ("LED");\n Serial.println ("Set GPIO"); Serial.print (LEDValue);\n if (LEDValue == "1") \n digitalWrite (LEDPIN, 1);\n etatLed = "On";\n server.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \n digitalWrite (LEDPIN, 0);\n etatLed = "Off";\n server.send (200, "text / html", getPage ());\n autre \n Serial.println ("Err Led Value");\n "},{"id":"text-56","heading":"Text","content":"void setup() \n Serial.begin (115200);\n // Initialisation du BMP180 / Init BMP180\n if (! bmp.begin ()) \n Serial.println ("BMP180 KO!");\n tandis que (1);\n autre \n Serial.println ("BMP180 OK");\n \n \n pinMode (LEDPIN, OUTPUT);\n WiFi.begin (ssid, mot de passe);\n // Attente de connexion au réseau WiFi / Attente de connexion\n while (WiFi.status ()! = WL_CONNECTED) \n retard (500); Serial.print (".");\n \n // Connexion WiFi établie / La connexion WiFi est OK\n Serial.println ("");\n Serial.print ("Connecté à"); Serial.println (ssid);\n Serial.print ("adresse IP:"); Serial.println (WiFi.localIP ());"},{"id":"text-57","heading":"Text","content":" // Sur la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\n server.on ("/", handleRoot);"},{"id":"text-58","heading":"Text","content":" server.begin ();\n Serial.println ("serveur HTTP démarré");\n "},{"id":"text-59","heading":"Text","content":"boucle vide () \n server.handleClient ();\n t = dht.readTemperature ();\n h = dht.readHumidity ();\n p = bmp.readPressure () / 100.0F;\n délai (1000);"},{"id":"text-60","heading":"Text","content":"Récupérez l'adresse IP du Wemos en ouvrant le moniteur série, puis connectez-le à partir d'un navigateur Web pour accéder à l'interface de la mini station météo."},{"id":"text-61","heading":"Text","content":"Ici, nous savons maintenant comment créer un serveur Web à l'aide d'un ESP8266, piloter le GPIO et afficher les mesures à partir de capteurs. Nous n’avons vu ici que les rudiments de base pour commencer mais ils couvrent déjà une bonne partie de ce qui est nécessaire pour développer de petits objets connectés. Dans le prochain tutoriel, nous verrons comment avoir une meilleure interface graphique en utilisant Bootstrap, un framework développé par un développeur de Tweeter qui permet de créer de plus belles interfaces graphiques en HTML.\nVoici d'autres articles qui pourraient vous intéresser pour aller plus loin dans ce tutoriel. Bons développements!"},{"id":"text-62","heading":"Text","content":"Remarque. Tout le tutoriel a été développé sur l'IDE Arduino 1.8.1 installé sur un Orange Pi Plus 2e (présenté ici) fonctionnant sous Armbian (Ubuntu 16.04 LTS). Suivez ce tutoriel pour apprendre à installer l'IDE Arduino sur Linux (ARM ou x86)."},{"id":"text-63","heading":"Text","content":"Comme ça:\nComme Chargement…"},{"id":"text-64","heading":"Text","content":"Click to rate this post!\n \n [Total: 0 Average: 0]"}],"media":{"primary_image":"https://tutos-gameserver.fr/wp-content/uploads/2019/10/esp8266-wemos-d1-mini-serveur-server-web-dht22-bmp180-gpio-.png"},"relations":[{"rel":"canonical","href":"https://tutos-gameserver.fr/2019/10/12/comprendre-la-programmation-web-server-avec-le-code-arduino-%e2%80%a2-projets-diy-bien-choisir-son-serveur-d-impression/"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2019/10/12/comprendre-la-programmation-web-server-avec-le-code-arduino-%e2%80%a2-projets-diy-bien-choisir-son-serveur-d-impression/llm","type":"text/html"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2019/10/12/comprendre-la-programmation-web-server-avec-le-code-arduino-%e2%80%a2-projets-diy-bien-choisir-son-serveur-d-impression/llm.json","type":"application/json"},{"rel":"llm-manifest","href":"https://tutos-gameserver.fr/llm-endpoints-manifest.json","type":"application/json"}],"http_headers":{"X-LLM-Friendly":"1","X-LLM-Schema":"1.1.0","Content-Security-Policy":"default-src 'none'; img-src * data:; style-src 'unsafe-inline'"},"license":"CC BY-ND 4.0","attribution_required":true,"allow_cors":false}