RecordEnregistréEffacé 4
"},{"id":"text-2","type":"text","heading":"","plain_text":"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 de créer facilement des objets connectés qui peuvent être contrôlés à partir d'un serveur domotique ou application mobile (développé avec Blynk ou Cayenne par exemple).","html":"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 de créer facilement des objets connectés qui peuvent être contrôlés à partir d'un serveur domotique ou application mobile (développé avec Blynk ou Cayenne par exemple).
"},{"id":"text-3","type":"text","heading":"","plain_text":"Dans ce didacticiel, nous allons apprendre à programmer l'ESP8266 pour qu'il se comporte comme un serveur Web. C'est-à-dire que l'on peut interagir avec le programme, le GPIO … à partir d'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.\nhttps://arduino.esp8266.com/stable/package_esp8266com_index.json\nhttp://arduino.esp8266.com/stable/package_esp8266com_index.json","html":"Dans ce didacticiel, nous allons apprendre à programmer l'ESP8266 pour qu'il se comporte comme un serveur Web. C'est-à-dire que l'on peut interagir avec le programme, le GPIO … à partir d'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.\nhttps://arduino.esp8266.com/stable/package_esp8266com_index.json\nhttp://arduino.esp8266.com/stable/package_esp8266com_index.json
"},{"id":"text-4","type":"text","heading":"","plain_text":"Vous pouvez regarder (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 regarder (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-5","type":"text","heading":"","plain_text":"Module ESP8266 générique\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\nSparkFun Thing\nSweetPea ESP-210\nWeMos D1\nWeMos D1 mini\nESPino (module ESP-12)\nESPino (module WROOM-02)\nWifInfo\nESPDuino","html":"Module ESP8266 générique\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\nSparkFun Thing\nSweetPea ESP-210\nWeMos D1\nWeMos D1 mini\nESPino (module ESP-12)\nESPino (module WROOM-02)\nWifInfo\nESPDuino
"},{"id":"text-6","type":"text","heading":"","plain_text":"Allez au gestionnaire de cartes et regarde esp8266, puis cliquez sur installer.","html":"Allez au gestionnaire de cartes et regarde esp8266, puis cliquez sur installer.
"},{"id":"text-7","type":"text","heading":"","plain_text":"En même temps que les cartes, toutes les bibliothèques nécessaires ainsi que de nombreux exemples sont installés. Si les exemples ne sont pas visibles dans le menu Fichier -> Exemples -> Exemples pour WeMos D1, quittez et relancez l'IDE Arduino.\nNous allons aller étape par étape pour comprendre comment créer un serveur web sur un ESP8266. Ouvrez l'exemple WiFiWebServer.\nNous avons besoin au moins de la bibliothèque ESP8266WiFi.h pour créer un serveur Web. Comme toutes les librairies, il faut creuser beaucoup pour découvrir les méthodes disponibles, voici un petit aperçu pour mieux comprendre ce que vous pouvez en faire. le code source de la bibliothèque est disponible ici. Cette bibliothèque est une adaptation de toutes les bibliothèques développées pour l'Arduino. Vous pouvez également trouver beaucoup d'informations ici","html":"En même temps que les cartes, toutes les bibliothèques nécessaires ainsi que de nombreux exemples sont installés. Si les exemples ne sont pas visibles dans le menu Fichier -> Exemples -> Exemples pour WeMos D1, quittez et relancez l'IDE Arduino.\nNous allons aller étape par étape pour comprendre comment créer un serveur web sur un ESP8266. Ouvrez l'exemple WiFiWebServer.\nNous avons besoin au moins de la bibliothèque ESP8266WiFi.h pour créer un serveur Web. Comme toutes les librairies, il faut creuser beaucoup pour découvrir les méthodes disponibles, voici un petit aperçu pour mieux comprendre ce que vous pouvez en faire. le code source de la bibliothèque est disponible ici. Cette bibliothèque est une adaptation de toutes les bibliothèques développées pour l'Arduino. Vous pouvez également trouver beaucoup d'informations ici
"},{"id":"text-8","type":"text","heading":"","plain_text":"WiFiClient","html":"WiFiClient
"},{"id":"text-9","type":"text","heading":"","plain_text":"uint8_t status ()\nint connect (IPAddress ip, port uint16_t)\nint connect (const char * host, uint16_t port)\ntaille_t écrire (uint8_t)\ntaille_t écrire (const uint8_t * buf, taille_t taille)\nsize_t write_P (PGM_P buf, size_t size)\ntaille_t écrire (Stream & stream)\nint disponible ()\nlire (uint8_t * buf, size_t size)\nint peek ()\nsize_t peekBytes (tampon uint8_t *, taille size_t)\nsize_t peekBytes (char * buffer, size_t length)\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 ();\nvide statique stopAllExcept (WiFiClient * c)","html":"uint8_t status ()\nint connect (IPAddress ip, port uint16_t)\nint connect (const char * host, uint16_t port)\ntaille_t écrire (uint8_t)\ntaille_t écrire (const uint8_t * buf, taille_t taille)\nsize_t write_P (PGM_P buf, size_t size)\ntaille_t écrire (Stream & stream)\nint disponible ()\nlire (uint8_t * buf, size_t size)\nint peek ()\nsize_t peekBytes (tampon uint8_t *, taille size_t)\nsize_t peekBytes (char * buffer, size_t length)\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 ();\nvide statique stopAllExcept (WiFiClient * c)
"},{"id":"text-10","type":"text","heading":"","plain_text":"WiFiServer","html":"WiFiServer
"},{"id":"text-11","type":"text","heading":"","plain_text":"WiFiServer (adresse IPAddress, port uint16_t)\nWiFiServer (port uint16_t)\nWiFiClient disponible (statut uint8_t * = NULL)\nbool hasClient ()\nvoid begin ()\nvoid setNoDelay (bool nodelay)\nbool getNoDelay ()\nécriture taille_t virtuelle (uint8_t)\nuint8_t status ()\nvoid close ()\nvoid stop ()","html":"WiFiServer (adresse IPAddress, port uint16_t)\nWiFiServer (port uint16_t)\nWiFiClient disponible (statut uint8_t * = NULL)\nbool hasClient ()\nvoid begin ()\nvoid setNoDelay (bool nodelay)\nbool getNoDelay ()\nécriture taille_t virtuelle (uint8_t)\nuint8_t status ()\nvoid close ()\nvoid stop ()
"},{"id":"text-12","type":"text","heading":"","plain_text":"WiFiUDP\nWiFiClientSecure","html":"WiFiUDP\nWiFiClientSecure
"},{"id":"text-13","type":"text","heading":"","plain_text":"#comprendre \nconst char * ssid = "votre-ssid";\nconst char * password = "votre-mot de passe";\nNous créons une instance, un objet qui contiendra le serveur Web. Nous communiquerons avec lui sur le port 80, le port classique pour les requêtes HTTP utilisées par les navigateurs Internet.\nServeur WiFiServer (80);\nLa boucle de configuration.\nvoid setup () \n// Ouverture du port série en 115200 bauds pour envoyer des messages de débogage à l'IDE par exemple\nSerial.begin (115200);\nretard (10);","html":"#comprendre \nconst char * ssid = "votre-ssid";\nconst char * password = "votre-mot de passe";\nNous créons une instance, un objet qui contiendra le serveur Web. Nous communiquerons avec lui sur le port 80, le port classique pour les requêtes HTTP utilisées par les navigateurs Internet.\nServeur WiFiServer (80);\nLa boucle de configuration.\nvoid setup () \n// Ouverture du port série en 115200 bauds pour envoyer des messages de débogage à l'IDE par exemple\nSerial.begin (115200);\nretard (10);
"},{"id":"text-14","type":"text","heading":"","plain_text":"// prépare GPIO2 (sortie)\npinMode (2, SORTIE);\ndigitalWrite (2, 0);","html":"// prépare GPIO2 (sortie)\npinMode (2, SORTIE);\ndigitalWrite (2, 0);
"},{"id":"text-15","type":"text","heading":"","plain_text":"// Se connecter au réseau WiFi\nSerial.println ();\nSerial.println ();\nSerial.print ("Connexion à");\nSerial.println (ssid);","html":"// Se connecter au réseau WiFi\nSerial.println ();\nSerial.println ();\nSerial.print ("Connexion à");\nSerial.println (ssid);
"},{"id":"text-16","type":"text","heading":"","plain_text":"// Nous nous connectons à un réseau WiFi avec le SSID et le mot de passe précédemment configurés\nWiFi.begin (ssid, mot de passe);","html":"// Nous nous connectons à un réseau WiFi avec le SSID et le mot de passe précédemment configurés\nWiFi.begin (ssid, mot de passe);
"},{"id":"text-17","type":"text","heading":"","plain_text":"// Nous ne quittons la boucle que lorsque la connexion a été établie.\n// Cette partie doit être améliorée pour le fonctionnement sur batterie car en l'absence de réseau\n// on va vider la batterie!\nwhile (WiFi.status ()! = WL_CONNECTED) \nretard (500);\nSerial.print (".");","html":"// Nous ne quittons la boucle que lorsque la connexion a été établie.\n// Cette partie doit être améliorée pour le fonctionnement sur batterie car en l'absence de réseau\n// on va vider la batterie!\nwhile (WiFi.status ()! = WL_CONNECTED) \nretard (500);\nSerial.print (".");
"},{"id":"text-18","type":"text","heading":"","plain_text":"Serial.println ("");\nSerial.println ("WiFi connecté");","html":"Serial.println ("");\nSerial.println ("WiFi connecté");
"},{"id":"text-19","type":"text","heading":"","plain_text":"// connexion OK, on démarre le serveur web // Démarrer le serveur\nserver.begin ();\nSerial.println ("Serveur démarré");","html":"// connexion OK, on démarre le serveur web // Démarrer le serveur\nserver.begin ();\nSerial.println ("Serveur démarré");
"},{"id":"text-20","type":"text","heading":"","plain_text":"// On indique sur le port série l'adresse IP de l'ESP pour la retrouver facilement / Imprimer l'adresse IP\nSerial.println (WiFi.localIP ());","html":"// On indique sur le port série l'adresse IP de l'ESP pour la retrouver facilement / Imprimer l'adresse IP\nSerial.println (WiFi.localIP ());
"},{"id":"text-21","type":"text","heading":"","plain_text":"Que se passe-t-il dans la boucle de 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) \nrevenir;","html":"Que se passe-t-il dans la boucle de 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) \nrevenir;
"},{"id":"text-22","type":"text","heading":"","plain_text":"Lorsqu'un client se connecte, il est indiqué sur le port série\nSerial.println ("nouveau client");\nwhile (! client.available ()) \nretard (1);","html":"Lorsqu'un client se connecte, il est indiqué sur le port série\nSerial.println ("nouveau client");\nwhile (! client.available ()) \nretard (1);
"},{"id":"text-23","type":"text","heading":"","plain_text":"On obtient la requête HTTP, ici l'URL saisie simplement dans le navigateur. Le contenu de la requête HTTP est envoyé au port série. On vide le buffer avec la méthode affleurer.\nString req = client.readStringUntil (& # 39; r & # 39;);\nSerial.println (req);\nclient.flush ();\nNous recherchons dans la requête HTTP ce qu'il faut faire. La méthode la plus simple consiste à passer des commandes à l'ESP8266 sous la forme d'une commande du type / gpio / desire_state (0, 1 ou marche / arrêt). 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)\nval = 0;\nsinon if (req.indexOf ("/ gpio / 1")! = -1)\nval = 1;\nautre \nSerial.println ("demande non valide");\nclient.stop ();\nrevenir;","html":"On obtient la requête HTTP, ici l'URL saisie simplement dans le navigateur. Le contenu de la requête HTTP est envoyé au port série. On vide le buffer avec la méthode affleurer.\nString req = client.readStringUntil (& # 39; r & # 39;);\nSerial.println (req);\nclient.flush ();\nNous recherchons dans la requête HTTP ce qu'il faut faire. La méthode la plus simple consiste à passer des commandes à l'ESP8266 sous la forme d'une commande du type / gpio / desire_state (0, 1 ou marche / arrêt). 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)\nval = 0;\nsinon if (req.indexOf ("/ gpio / 1")! = -1)\nval = 1;\nautre \nSerial.println ("demande non valide");\nclient.stop ();\nrevenir;
"},{"id":"text-24","type":"text","heading":"","plain_text":"Nous mettons à jour l'état GPIO et vider le tampon\ndigitalWrite (2, val);\nclient.flush ();\nNous créons maintenant une page HTML qui contient l'état du GPIO. Il s'agit d'une chaîne de texte qui contient le code HTML de la page. On insère dans le code de la page, l'état du GPIO\nChaîne s = "HTTP / 1.1 200 OK r nContenu-Type: texte / html r n r n r n r nGPIO est maintenant ";\ns + = (val)? "haut": "bas";\ns + = "ne pas";\nNous publions cette page au client avec la commande d'impression, très facile!\nclient.print (s);\nVoilà, vous pouvez désormais contrôler à distance tout matériel connecté au GPIO (un relais, une LED, un moteur, un servomoteur, etc.) à l'aide d'une simple requête HTTP. Vous pouvez par exemple exécuter très simplement une commande à partir d'un logiciel domotique. Voici deux exemples, le premier pour Domoticz, le second pour Jeedom.\nMaintenant, vous aimeriez certainement pouvoir faire une petite interface pour vos projets ESP8266. Pour cela, nous devons connaître quelques notions de base du HTML. Nous n'irons pas très loin dans l'apprentissage du HTML, il suffit d'apprendre les éléments importants pour débuter et avoir un projet fonctionnel. Si vous avez besoin de plus d'éléments d'interface, je recommande w3schools qui est une référence dans l'apprentissage du HTML. Le site est en anglais mais il est très clair et très facile d'accès.\nDans un projet ESP8266, nous pouvons créer des pages HTML dynamiques, c'est-à-dire que nous construisons une chaîne de texte qui contient le code de la page que nous afficherons ensuite. C'est ce que nous allons faire. Mais l'ESP8266 est également capable de fonctionner comme un vrai site web, c'est-à-dire qu'on peut installer sur des pages HTML à mémoire flash, du code javascript, des feuilles de style CSS … On n'ira pas aussi loin dans ce premier tutoriel.\nJe vous propose de créer une petite station météo pour avoir des données à mettre à jour régulièrement et de créer un bouton pour activer / désactiver une sortie GPIO (juste une LED par exemple). J'ai utilisé le matériel suivant\nVoici un tableau de localisation et de correspondance des broches entre Arduino et ESP8266.","html":"Nous mettons à jour l'état GPIO et vider le tampon\ndigitalWrite (2, val);\nclient.flush ();\nNous créons maintenant une page HTML qui contient l'état du GPIO. Il s'agit d'une chaîne de texte qui contient le code HTML de la page. On insère dans le code de la page, l'état du GPIO\nChaîne s = "HTTP / 1.1 200 OK r nContenu-Type: texte / html r n r n r n r nGPIO est maintenant ";\ns + = (val)? "haut": "bas";\ns + = "ne pas";\nNous publions cette page au client avec la commande d'impression, très facile!\nclient.print (s);\nVoilà, vous pouvez désormais contrôler à distance tout matériel connecté au GPIO (un relais, une LED, un moteur, un servomoteur, etc.) à l'aide d'une simple requête HTTP. Vous pouvez par exemple exécuter très simplement une commande à partir d'un logiciel domotique. Voici deux exemples, le premier pour Domoticz, le second pour Jeedom.\nMaintenant, vous aimeriez certainement pouvoir faire une petite interface pour vos projets ESP8266. Pour cela, nous devons connaître quelques notions de base du HTML. Nous n'irons pas très loin dans l'apprentissage du HTML, il suffit d'apprendre les éléments importants pour débuter et avoir un projet fonctionnel. Si vous avez besoin de plus d'éléments d'interface, je recommande w3schools qui est une référence dans l'apprentissage du HTML. Le site est en anglais mais il est très clair et très facile d'accès.\nDans un projet ESP8266, nous pouvons créer des pages HTML dynamiques, c'est-à-dire que nous construisons une chaîne de texte qui contient le code de la page que nous afficherons ensuite. C'est ce que nous allons faire. Mais l'ESP8266 est également capable de fonctionner comme un vrai site web, c'est-à-dire qu'on peut installer sur des pages HTML à mémoire flash, du code javascript, des feuilles de style CSS … On n'ira pas aussi loin dans ce premier tutoriel.\nJe vous propose de créer une petite station météo pour avoir des données à mettre à jour régulièrement et de créer un bouton pour activer / désactiver une sortie GPIO (juste une LED par exemple). J'ai utilisé le matériel suivant\nVoici un tableau de localisation et de correspondance des broches entre Arduino et ESP8266.
"},{"id":"text-25","type":"text","heading":"","plain_text":"Composant\nBroches\nÉquivalence ESP8266 (Wemos D1 mini)","html":"Composant\nBroches\nÉquivalence ESP8266 (Wemos D1 mini)
"},{"id":"text-26","type":"text","heading":"","plain_text":"DHT22\nVCC\n5V","html":"DHT22\nVCC\n5V
"},{"id":"text-27","type":"text","heading":"","plain_text":"GND\ng","html":"GND\ng
"},{"id":"text-28","type":"text","heading":"","plain_text":"Les données\nG5","html":"Les données\nG5
"},{"id":"text-29","type":"text","heading":"","plain_text":"BMP180\nVCC\n5V","html":"BMP180\nVCC\n5V
"},{"id":"text-30","type":"text","heading":"","plain_text":"GND\ng","html":"GND\ng
"},{"id":"text-31","type":"text","heading":"","plain_text":"SDA\nD2","html":"SDA\nD2
"},{"id":"text-32","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-33","type":"text","heading":"","plain_text":"Remarque. Vous pouvez rencontrer une erreur de compilation adafruit_Sensor.h: Aucun fichier ou répertoire de ce type. Dans ce cas, téléchargez et décompressez la bibliothèque manuellement depuis GitHub dans le dossier Arduino -> Library, puis relancez l'IDE pour qu'il soit pris en compte.","html":"Remarque. Vous pouvez rencontrer une erreur de compilation adafruit_Sensor.h: Aucun fichier ou répertoire de ce type. Dans ce cas, téléchargez et décompressez la bibliothèque manuellement depuis GitHub dans le dossier Arduino -> Library, puis relancez l'IDE pour qu'il soit pris en compte.
"},{"id":"text-34","type":"text","heading":"","plain_text":"#comprendre \n#comprendre \n#comprendre \n#comprendre \n#comprendre \nNous définissons les variables du programme. Modifiez le réseau WiFi auquel vous allez vous connecter et le mot de passe correspondant.\n#define ssid "ssid" // WiFi SSID\n#define password "password" // mot de passe WiFi\n#define DHTTYPE DHT22 // type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche DHT / Broche DHT\n#define LEDPIN D3 // Led\nflotteur t = 0;\nflotteur h = 0;\nflotteur p = 0;\nString etatLed = "OFF";\nNous créons les objets dht, bmp et server\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nESP8266WebServer server (80);\nCette première fonction vous permet de construire le code HTML de la page principale du programme. C’est une simple chaîne de caractères. C’est un assemblage de chaînes. Vous pouvez facilement inclure la valeur ou l'état d'une variable (par exemple, l'état d'une sortie). En retour, la fonction renvoie une chaîne contenant le code HTML de la page.\nString getPage () \nPage de chaîne = "";\npage + = "Démo ESP8266 - www.projetsdiy.fr";\npage + = "";\npage + = "ESP8266 Demo";\npage + = "DHT22";\npage + = "Température : ";\npage + = t;\npage + = "° C";\npage + = "Humidité : ";\npage + = h;\npage + = "%BMP180";\npage + = "Pression atmosphérique : ";\npage + = p;\npage + = "mbar";\npage + = "GPIO";\npage + = "";\npage + = "D3 (indiquer: ";\npage + = etatLed;\npage + = ")NOUS";\npage + = "DE";\npage + = "";\npage + = "www.projetsdiy.fr";\npage + = "";\npage de retour;","html":"#comprendre \n#comprendre \n#comprendre \n#comprendre \n#comprendre \nNous définissons les variables du programme. Modifiez le réseau WiFi auquel vous allez vous connecter et le mot de passe correspondant.\n#define ssid "ssid" // WiFi SSID\n#define password "password" // mot de passe WiFi\n#define DHTTYPE DHT22 // type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche DHT / Broche DHT\n#define LEDPIN D3 // Led\nflotteur t = 0;\nflotteur h = 0;\nflotteur p = 0;\nString etatLed = "OFF";\nNous créons les objets dht, bmp et server\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nESP8266WebServer server (80);\nCette première fonction vous permet de construire le code HTML de la page principale du programme. C’est une simple chaîne de caractères. C’est un assemblage de chaînes. Vous pouvez facilement inclure la valeur ou l'état d'une variable (par exemple, l'état d'une sortie). En retour, la fonction renvoie une chaîne contenant le code HTML de la page.\nString getPage () \nPage de chaîne = "";\npage + = "Démo ESP8266 - www.projetsdiy.fr";\npage + = "";\npage + = "ESP8266 Demo";\npage + = "DHT22";\npage + = "Température : ";\npage + = t;\npage + = "° C";\npage + = "Humidité : ";\npage + = h;\npage + = "%BMP180";\npage + = "Pression atmosphérique : ";\npage + = p;\npage + = "mbar";\npage + = "GPIO";\npage + = "";\npage + = "D3 (indiquer: ";\npage + = etatLed;\npage + = ")NOUS";\npage + = "DE";\npage + = "";\npage + = "www.projetsdiy.fr";\npage + = "";\npage de retour;
"},{"id":"text-35","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-36","type":"text","heading":"","plain_text":"Code HTML\nExplication","html":"Code HTML\nExplication
"},{"id":"text-37","type":"text","heading":"","plain_text":"Démo ESP8266 – www.projetsdiy.fr","html":"Démo ESP8266 – www.projetsdiy.fr
"},{"id":"text-38","type":"text","heading":"","plain_text":"lang : permet de définir la langue de la page\ntête : c'est l'en-tête de la page. Il contient différents méta (paramètres)","html":"lang : permet de définir la langue de la page\ntête : c'est l'en-tête de la page. Il contient différents méta (paramètres)
"},{"id":"text-39","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\ncontent = "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\ncontent = "10": toutes les 10 secondes
"},{"id":"text-40","type":"text","heading":"","plain_text":"Titre : le titre de la page affiché dans la barre du navigateur\nstyle : un style pour la page (couleur de fond, police à utiliser, couleur du texte","html":"Titre : le titre de la page affiché dans la barre du navigateur\nstyle : un style pour la page (couleur de fond, police à utiliser, couleur du texte
"},{"id":"text-41","type":"text","heading":"","plain_text":"C'est le contenu de la page affichée","html":"C'est le contenu de la page affichée
"},{"id":"text-42","type":"text","heading":"","plain_text":"ESP8266 Demo","html":"ESP8266 Demo
"},{"id":"text-43","type":"text","heading":"","plain_text":"Un titre affiché en haut de la page","html":"Un titre affiché en haut de la page
"},{"id":"text-44","type":"text","heading":"","plain_text":"DHT22","html":"DHT22
"},{"id":"text-45","type":"text","heading":"","plain_text":"Un titre (h3, plus petit) pour le capteur DHT22","html":"Un titre (h3, plus petit) pour le capteur DHT22
"},{"id":"text-46","type":"text","heading":"","plain_text":"Température: xx ° C\nHumidité: xx%","html":"Température: xx ° C\nHumidité: xx%
"},{"id":"text-47","type":"text","heading":"","plain_text":"Le bloc ul permet d'afficher comme liste information. La même chose pour le BMP180","html":"Le bloc ul permet d'afficher comme liste information. La même chose pour le BMP180
"},{"id":"text-48","type":"text","heading":"","plain_text":"D3 (état: xx)\nNOUS\nDE","html":"D3 (état: xx)\nNOUS\nDE
"},{"id":"text-49","type":"text","heading":"","plain_text":"Pour mettre à jour le GPIO, nous utilisons un formulaire.\nIci, nous utilisons un bouton radio pour changer l'état (On / Off) puis nous envoyons (soumettre) le contenu du formulaire avec un bouton.\nL'option Nom vous permet de nommer la variable qui contiendra l'état que vous souhaitez récupérer dans le code Arduino. Ici LED.","html":"Pour mettre à jour le GPIO, nous utilisons un formulaire.\nIci, nous utilisons un bouton radio pour changer l'état (On / Off) puis nous envoyons (soumettre) le contenu du formulaire avec un bouton.\nL'option Nom vous permet de nommer la variable qui contiendra l'état que vous souhaitez récupérer dans le code Arduino. Ici LED.
"},{"id":"text-50","type":"text","heading":"","plain_text":"Toute balise ouverte doit être fermée (c'est mieux!)","html":"Toute balise ouverte doit être fermée (c'est mieux!)
"},{"id":"text-51","type":"text","heading":"","plain_text":"La fonction handleRoot vous permet de surveiller si vous recevez une demande d'actualisation du GPIO en contrôlant si l'argument LED est retourné par la page. Si c'est le cas, nous exécutons la fonction handleSubmit. A nous de créer\nvoid handleRoot () \nif (server.hasArg ("LED")) \nhandleSubmit ();\n autre \nserver.send (200, "text / html", getPage ());","html":"La fonction handleRoot vous permet de surveiller si vous recevez une demande d'actualisation du GPIO en contrôlant si l'argument LED est retourné par la page. Si c'est le cas, nous exécutons la fonction handleSubmit. A nous de créer\nvoid handleRoot () \nif (server.hasArg ("LED")) \nhandleSubmit ();\n autre \nserver.send (200, "text / html", getPage ());
"},{"id":"text-52","type":"text","heading":"","plain_text":"La fonction handleSubmit traite la mise à jour du GPIO. On obtient l'état de la variable LED. Attention, c'est une chaîne de caractères, il faut donc tester "1" et non 1. On en profite pour affecter l'état du GPIO dans la variable etatLed sous forme de chaîne, c'est plus amusant à lire . Enfin, nous mettons à jour l'affichage de la page HTML avec server.send. Nous récupérons la page mise à jour en appelant la fonction getPage ().\nvoid handleSubmit () \n// Mettre à jour le GPIO / Mettre à jour le GPIO\nString LEDValue;\nLEDValue = server.arg ("LED");\nSerial.println ("Définir GPIO"); Serial.print (LEDValue);\nif (LEDValue == "1") \ndigitalWrite (LEDPIN, 1);\netatLed = "On";\nserver.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \ndigitalWrite (LEDPIN, 0);\netatLed = "Off";\nserver.send (200, "text / html", getPage ());\n autre \nSerial.println ("Err Led Value");","html":"La fonction handleSubmit traite la mise à jour du GPIO. On obtient l'état de la variable LED. Attention, c'est une chaîne de caractères, il faut donc tester "1" et non 1. On en profite pour affecter l'état du GPIO dans la variable etatLed sous forme de chaîne, c'est plus amusant à lire . Enfin, nous mettons à jour l'affichage de la page HTML avec server.send. Nous récupérons la page mise à jour en appelant la fonction getPage ().\nvoid handleSubmit () \n// Mettre à jour le GPIO / Mettre à jour le GPIO\nString LEDValue;\nLEDValue = server.arg ("LED");\nSerial.println ("Définir GPIO"); Serial.print (LEDValue);\nif (LEDValue == "1") \ndigitalWrite (LEDPIN, 1);\netatLed = "On";\nserver.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \ndigitalWrite (LEDPIN, 0);\netatLed = "Off";\nserver.send (200, "text / html", getPage ());\n autre \nSerial.println ("Err Led Value");
"},{"id":"text-53","type":"text","heading":"","plain_text":"Maintenant que toutes les fonctions sont créées, nous pouvons appeler la fonction installer (). Il initialise le BMP180, la connexion WiFi, connecte la fonction qui s'occupe de la page principale et enfin on lance le serveur web\nvoid setup () \nSerial.begin (115200);\n// Initialisation du BMP180 / Init BMP180\nif (! bmp.begin ()) \nSerial.println ("BMP180 KO!");\ntandis que (1);\n autre \nSerial.println ("BMP180 OK");","html":"Maintenant que toutes les fonctions sont créées, nous pouvons appeler la fonction installer (). Il initialise le BMP180, la connexion WiFi, connecte la fonction qui s'occupe de la page principale et enfin on lance le serveur web\nvoid setup () \nSerial.begin (115200);\n// Initialisation du BMP180 / Init BMP180\nif (! bmp.begin ()) \nSerial.println ("BMP180 KO!");\ntandis que (1);\n autre \nSerial.println ("BMP180 OK");
"},{"id":"text-54","type":"text","heading":"","plain_text":"WiFi.begin (ssid, mot de passe);\n// Attendre la connexion au réseau WiFi / Attendre la connexion\nwhile (WiFi.status ()! = WL_CONNECTED) \nretard (500); Serial.print (".");","html":"WiFi.begin (ssid, mot de passe);\n// Attendre la connexion au réseau WiFi / Attendre la connexion\nwhile (WiFi.status ()! = WL_CONNECTED) \nretard (500); Serial.print (".");
"},{"id":"text-55","type":"text","heading":"","plain_text":"// Connexion WiFi établie / connexion WiFi OK\nSerial.println ("");\nSerial.print ("Connecté à"); Serial.println (ssid);\nSerial.print ("adresse IP:"); Serial.println (WiFi.localIP ());","html":"// Connexion WiFi établie / connexion WiFi OK\nSerial.println ("");\nSerial.print ("Connecté à"); Serial.println (ssid);\nSerial.print ("adresse IP:"); Serial.println (WiFi.localIP ());
"},{"id":"text-56","type":"text","heading":"","plain_text":"// On branche la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\nserver.on ("/", handleRoot);","html":"// On branche la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\nserver.on ("/", handleRoot);
"},{"id":"text-57","type":"text","heading":"","plain_text":"server.begin ();\nSerial.println ("Le serveur HTTP a démarré");","html":"server.begin ();\nSerial.println ("Le serveur HTTP a démarré");
"},{"id":"text-58","type":"text","heading":"","plain_text":"Il ne reste plus qu'à exécuter la fonction boucle () lire régulièrement les mesures sur les capteurs. Contrairement à l'exemple précédent basé sur la bibliothèque ESP8266WiFi, voici la bibliothèque ESP8266WebServer nécessite de brancher la fonction de rappel server.handleClient () qui surveille la présence d'un client et délivre la page HTML demandée.\nboucle vide () \nserver.handleClient ();\nt = dht.readTemperature ();\nh = dht.readHumidity ();\np = bmp.readPressure () / 100.0F;\nretard (1000);","html":"Il ne reste plus qu'à exécuter la fonction boucle () lire régulièrement les mesures sur les capteurs. Contrairement à l'exemple précédent basé sur la bibliothèque ESP8266WiFi, voici la bibliothèque ESP8266WebServer nécessite de brancher la fonction de rappel server.handleClient () qui surveille la présence d'un client et délivre la page HTML demandée.\nboucle vide () \nserver.handleClient ();\nt = dht.readTemperature ();\nh = dht.readHumidity ();\np = bmp.readPressure () / 100.0F;\nretard (1000);
"},{"id":"text-59","type":"text","heading":"","plain_text":"Voici le code source assemblé du projet que vous avez juste besoin de coller dans un nouveau projet, puis de le télécharger\n#comprendre \n#comprendre \n#comprendre \n#comprendre","html":"Voici le code source assemblé du projet que vous avez juste besoin de coller dans un nouveau projet, puis de le télécharger\n#comprendre \n#comprendre \n#comprendre \n#comprendre
"},{"id":"text-60","type":"text","heading":"","plain_text":"#define ssid "xx" // WiFi SSID\n#define password "xxxxxx" // Mot de passe WiFi\n#define DHTTYPE DHT22 // type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche DHT / Broche DHT\n#define LEDPIN D3 // Led\nflotteur t = 0;\nflotteur h = 0;\nflotteur p = 0;\nString etatLed = "OFF";","html":"#define ssid "xx" // WiFi SSID\n#define password "xxxxxx" // Mot de passe WiFi\n#define DHTTYPE DHT22 // type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche DHT / Broche DHT\n#define LEDPIN D3 // Led\nflotteur t = 0;\nflotteur h = 0;\nflotteur p = 0;\nString etatLed = "OFF";
"},{"id":"text-61","type":"text","heading":"","plain_text":"// Créer des objets / créer des objets\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nESP8266WebServer server (80);","html":"// Créer des objets / créer des objets\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nESP8266WebServer server (80);
"},{"id":"text-62","type":"text","heading":"","plain_text":"String getPage () \nPage de chaîne = "";\npage + = "Démo ESP8266 - www.projetsdiy.fr";\npage + = "";\npage + = "ESP8266 Demo";\npage + = "DHT22";\npage + = "Température : ";\npage + = t;\npage + = "° C";\npage + = "Humidité : ";\npage + = h;\npage + = "%BMP180";\npage + = "Pression atmosphérique : ";\npage + = p;\npage + = "mbar";\npage + = "GPIO";\npage + = "";\npage + = "D3 (indiquer: ";\npage + = etatLed;\npage + = ")";\npage + = "NOUS";\npage + = "DE";\npage + = "";\npage + = "www.projetsdiy.fr";\npage + = "";\npage de retour;","html":"String getPage () \nPage de chaîne = "";\npage + = "Démo ESP8266 - www.projetsdiy.fr";\npage + = "";\npage + = "ESP8266 Demo";\npage + = "DHT22";\npage + = "Température : ";\npage + = t;\npage + = "° C";\npage + = "Humidité : ";\npage + = h;\npage + = "%BMP180";\npage + = "Pression atmosphérique : ";\npage + = p;\npage + = "mbar";\npage + = "GPIO";\npage + = "";\npage + = "D3 (indiquer: ";\npage + = etatLed;\npage + = ")";\npage + = "NOUS";\npage + = "DE";\npage + = "";\npage + = "www.projetsdiy.fr";\npage + = "";\npage de retour;
"},{"id":"text-63","type":"text","heading":"","plain_text":"void handleRoot () \nif (server.hasArg ("LED")) \nhandleSubmit ();\n autre \nserver.send (200, "text / html", getPage ());","html":"void handleRoot () \nif (server.hasArg ("LED")) \nhandleSubmit ();\n autre \nserver.send (200, "text / html", getPage ());
"},{"id":"text-64","type":"text","heading":"","plain_text":"void handleSubmit () \n// Mettre à jour le GPIO / Mettre à jour le GPIO\nString LEDValue;\nLEDValue = server.arg ("LED");\nSerial.println ("Définir GPIO"); Serial.print (LEDValue);\nif (LEDValue == "1") \ndigitalWrite (LEDPIN, 1);\netatLed = "On";\nserver.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \ndigitalWrite (LEDPIN, 0);\netatLed = "Off";\nserver.send (200, "text / html", getPage ());\n autre \nSerial.println ("Err Led Value");","html":"void handleSubmit () \n// Mettre à jour le GPIO / Mettre à jour le GPIO\nString LEDValue;\nLEDValue = server.arg ("LED");\nSerial.println ("Définir GPIO"); Serial.print (LEDValue);\nif (LEDValue == "1") \ndigitalWrite (LEDPIN, 1);\netatLed = "On";\nserver.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \ndigitalWrite (LEDPIN, 0);\netatLed = "Off";\nserver.send (200, "text / html", getPage ());\n autre \nSerial.println ("Err Led Value");
"},{"id":"text-65","type":"text","heading":"","plain_text":"void setup () \nSerial.begin (115200);\n// Initialisation du BMP180 / Init BMP180\nif (! bmp.begin ()) \nSerial.println ("BMP180 KO!");\ntandis que (1);\n autre \nSerial.println ("BMP180 OK");","html":"void setup () \nSerial.begin (115200);\n// Initialisation du BMP180 / Init BMP180\nif (! bmp.begin ()) \nSerial.println ("BMP180 KO!");\ntandis que (1);\n autre \nSerial.println ("BMP180 OK");
"},{"id":"text-66","type":"text","heading":"","plain_text":"WiFi.begin (ssid, mot de passe);\n// Attendre la connexion au réseau WiFi / Attendre la connexion\nwhile (WiFi.status ()! = WL_CONNECTED) \nretard (500); Serial.print (".");","html":"WiFi.begin (ssid, mot de passe);\n// Attendre la connexion au réseau WiFi / Attendre la connexion\nwhile (WiFi.status ()! = WL_CONNECTED) \nretard (500); Serial.print (".");
"},{"id":"text-67","type":"text","heading":"","plain_text":"// Connexion WiFi établie / connexion WiFi OK\nSerial.println ("");\nSerial.print ("Connecté à"); Serial.println (ssid);\nSerial.print ("adresse IP:"); Serial.println (WiFi.localIP ());","html":"// Connexion WiFi établie / connexion WiFi OK\nSerial.println ("");\nSerial.print ("Connecté à"); Serial.println (ssid);\nSerial.print ("adresse IP:"); Serial.println (WiFi.localIP ());
"},{"id":"text-68","type":"text","heading":"","plain_text":"// On branche la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\nserver.on ("/", handleRoot);","html":"// On branche la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\nserver.on ("/", handleRoot);
"},{"id":"text-69","type":"text","heading":"","plain_text":"server.begin ();\nSerial.println ("Le serveur HTTP a démarré");","html":"server.begin ();\nSerial.println ("Le serveur HTTP a démarré");
"},{"id":"text-70","type":"text","heading":"","plain_text":"boucle vide () \nserver.handleClient ();\nt = dht.readTemperature ();\nh = dht.readHumidity ();\np = bmp.readPressure () / 100.0F;\nretard (1000);","html":"boucle vide () \nserver.handleClient ();\nt = dht.readTemperature ();\nh = dht.readHumidity ();\np = bmp.readPressure () / 100.0F;\nretard (1000);
"},{"id":"text-71","type":"text","heading":"","plain_text":"Récupérez l'adresse IP de Wemos en ouvrant le moniteur série puis connectez-vous à partir d'un navigateur Internet pour accéder à l'interface de la mini station météo.","html":"Récupérez l'adresse IP de Wemos en ouvrant le moniteur série puis connectez-vous à partir d'un navigateur Internet pour accéder à l'interface de la mini station météo.
"},{"id":"text-72","type":"text","heading":"","plain_text":"Voilà, nous savons maintenant comment créer un serveur Web à l'aide d'un ESP8266, contrôler le GPIO et afficher les mesures des capteurs. Nous n'avons vu ici que les principaux rudiments pour commencer, mais ils couvrent déjà une grande partie de ce dont vous avez besoin pour développer de petits objets connectés. Dans le prochain tutoriel, nous verrons comment avoir une plus belle interface graphique en utilisant Bootstrap, un framework développé par un développeur travaillant chez Tweeter qui vous permet de créer de plus belles interfaces graphiques en HTML.","html":"Voilà, nous savons maintenant comment créer un serveur Web à l'aide d'un ESP8266, contrôler le GPIO et afficher les mesures des capteurs. Nous n'avons vu ici que les principaux rudiments pour commencer, mais ils couvrent déjà une grande partie de ce dont vous avez besoin pour développer de petits objets connectés. Dans le prochain tutoriel, nous verrons comment avoir une plus belle interface graphique en utilisant Bootstrap, un framework développé par un développeur travaillant chez Tweeter qui vous permet de créer de plus belles interfaces graphiques en HTML.
"},{"id":"text-73","type":"text","heading":"","plain_text":"Remarque. L'ensemble du tutoriel a été développé sur l'IDE Arduino 1.8.1 installé sur un Orange Pi Plus 2e (présenté ici) exécutant Armbian (Ubuntu 16.04 LTS). Suivez ce tutoriel pour savoir comment installer l'IDE Arduino sur Linux (ARM ou x86).","html":"Remarque. L'ensemble du tutoriel a été développé sur l'IDE Arduino 1.8.1 installé sur un Orange Pi Plus 2e (présenté ici) exécutant Armbian (Ubuntu 16.04 LTS). Suivez ce tutoriel pour savoir comment installer l'IDE Arduino sur Linux (ARM ou x86).
"},{"id":"text-74","type":"text","heading":"","plain_text":"Nouveaux boucliers compatibles LoLin W600-PICO et WeMos d1 mini \nCommencez avec des objets connectés DIY (2). Communiquer, programmer, stocker, visualiser, fabriquer des circuits \n# Découvertes de la semaine 5: WeMos disparaît, nouvelle gamme LoLin 2019 \n# Test IAQ CCS811, capteur de qualité de l'air TVOC, bus eCO2 i2C (Arduino, ESP8266) \nBibliothèque Arduino Telegram Bot universelle compatible avec les mises à niveau Arduino, ESP32 et ESP8266 vers la version 1.1.0 \nCartes de développement et boucliers Wemos, nouvelles fonctionnalités pour 2018 et mises à jour","html":"Nouveaux boucliers compatibles LoLin W600-PICO et WeMos d1 mini \nCommencez avec des objets connectés DIY (2). Communiquer, programmer, stocker, visualiser, fabriquer des circuits \n# Découvertes de la semaine 5: WeMos disparaît, nouvelle gamme LoLin 2019 \n# Test IAQ CCS811, capteur de qualité de l'air TVOC, bus eCO2 i2C (Arduino, ESP8266) \nBibliothèque Arduino Telegram Bot universelle compatible avec les mises à niveau Arduino, ESP32 et ESP8266 vers la version 1.1.0 \nCartes de développement et boucliers Wemos, nouvelles fonctionnalités pour 2018 et mises à jour
"},{"id":"text-75","type":"text","heading":"","plain_text":"As-tu aimé cet article ?\n \n[Total:[Total:[Total:[Total: Moyenne: ]","html":"As-tu aimé cet article ?\n \n[Total:[Total:[Total:[Total: Moyenne: ]
"},{"id":"text-76","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":"RecordEnregistréEffacé 4"},{"id":"text-2","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 de créer facilement des objets connectés qui peuvent être contrôlés à partir d'un serveur domotique ou application mobile (développé avec Blynk ou Cayenne par exemple)."},{"id":"text-3","heading":"Text","content":"Dans ce didacticiel, nous allons apprendre à programmer l'ESP8266 pour qu'il se comporte comme un serveur Web. C'est-à-dire que l'on peut interagir avec le programme, le GPIO … à partir d'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.\nhttps://arduino.esp8266.com/stable/package_esp8266com_index.json\nhttp://arduino.esp8266.com/stable/package_esp8266com_index.json"},{"id":"text-4","heading":"Text","content":"Vous pouvez regarder (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-5","heading":"Text","content":"Module ESP8266 générique\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\nSparkFun Thing\nSweetPea ESP-210\nWeMos D1\nWeMos D1 mini\nESPino (module ESP-12)\nESPino (module WROOM-02)\nWifInfo\nESPDuino"},{"id":"text-6","heading":"Text","content":"Allez au gestionnaire de cartes et regarde esp8266, puis cliquez sur installer."},{"id":"text-7","heading":"Text","content":"En même temps que les cartes, toutes les bibliothèques nécessaires ainsi que de nombreux exemples sont installés. Si les exemples ne sont pas visibles dans le menu Fichier -> Exemples -> Exemples pour WeMos D1, quittez et relancez l'IDE Arduino.\nNous allons aller étape par étape pour comprendre comment créer un serveur web sur un ESP8266. Ouvrez l'exemple WiFiWebServer.\nNous avons besoin au moins de la bibliothèque ESP8266WiFi.h pour créer un serveur Web. Comme toutes les librairies, il faut creuser beaucoup pour découvrir les méthodes disponibles, voici un petit aperçu pour mieux comprendre ce que vous pouvez en faire. le code source de la bibliothèque est disponible ici. Cette bibliothèque est une adaptation de toutes les bibliothèques développées pour l'Arduino. Vous pouvez également trouver beaucoup d'informations ici"},{"id":"text-8","heading":"Text","content":"WiFiClient"},{"id":"text-9","heading":"Text","content":"uint8_t status ()\nint connect (IPAddress ip, port uint16_t)\nint connect (const char * host, uint16_t port)\ntaille_t écrire (uint8_t)\ntaille_t écrire (const uint8_t * buf, taille_t taille)\nsize_t write_P (PGM_P buf, size_t size)\ntaille_t écrire (Stream & stream)\nint disponible ()\nlire (uint8_t * buf, size_t size)\nint peek ()\nsize_t peekBytes (tampon uint8_t *, taille size_t)\nsize_t peekBytes (char * buffer, size_t length)\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 ();\nvide statique stopAllExcept (WiFiClient * c)"},{"id":"text-10","heading":"Text","content":"WiFiServer"},{"id":"text-11","heading":"Text","content":"WiFiServer (adresse IPAddress, port uint16_t)\nWiFiServer (port uint16_t)\nWiFiClient disponible (statut uint8_t * = NULL)\nbool hasClient ()\nvoid begin ()\nvoid setNoDelay (bool nodelay)\nbool getNoDelay ()\nécriture taille_t virtuelle (uint8_t)\nuint8_t status ()\nvoid close ()\nvoid stop ()"},{"id":"text-12","heading":"Text","content":"WiFiUDP\nWiFiClientSecure"},{"id":"text-13","heading":"Text","content":"#comprendre \nconst char * ssid = "votre-ssid";\nconst char * password = "votre-mot de passe";\nNous créons une instance, un objet qui contiendra le serveur Web. Nous communiquerons avec lui sur le port 80, le port classique pour les requêtes HTTP utilisées par les navigateurs Internet.\nServeur WiFiServer (80);\nLa boucle de configuration.\nvoid setup () \n// Ouverture du port série en 115200 bauds pour envoyer des messages de débogage à l'IDE par exemple\nSerial.begin (115200);\nretard (10);"},{"id":"text-14","heading":"Text","content":"// prépare GPIO2 (sortie)\npinMode (2, SORTIE);\ndigitalWrite (2, 0);"},{"id":"text-15","heading":"Text","content":"// Se connecter au réseau WiFi\nSerial.println ();\nSerial.println ();\nSerial.print ("Connexion à");\nSerial.println (ssid);"},{"id":"text-16","heading":"Text","content":"// Nous nous connectons à un réseau WiFi avec le SSID et le mot de passe précédemment configurés\nWiFi.begin (ssid, mot de passe);"},{"id":"text-17","heading":"Text","content":"// Nous ne quittons la boucle que lorsque la connexion a été établie.\n// Cette partie doit être améliorée pour le fonctionnement sur batterie car en l'absence de réseau\n// on va vider la batterie!\nwhile (WiFi.status ()! = WL_CONNECTED) \nretard (500);\nSerial.print (".");"},{"id":"text-18","heading":"Text","content":"Serial.println ("");\nSerial.println ("WiFi connecté");"},{"id":"text-19","heading":"Text","content":"// connexion OK, on démarre le serveur web // Démarrer le serveur\nserver.begin ();\nSerial.println ("Serveur démarré");"},{"id":"text-20","heading":"Text","content":"// On indique sur le port série l'adresse IP de l'ESP pour la retrouver facilement / Imprimer l'adresse IP\nSerial.println (WiFi.localIP ());"},{"id":"text-21","heading":"Text","content":"Que se passe-t-il dans la boucle de 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) \nrevenir;"},{"id":"text-22","heading":"Text","content":"Lorsqu'un client se connecte, il est indiqué sur le port série\nSerial.println ("nouveau client");\nwhile (! client.available ()) \nretard (1);"},{"id":"text-23","heading":"Text","content":"On obtient la requête HTTP, ici l'URL saisie simplement dans le navigateur. Le contenu de la requête HTTP est envoyé au port série. On vide le buffer avec la méthode affleurer.\nString req = client.readStringUntil (& # 39; r & # 39;);\nSerial.println (req);\nclient.flush ();\nNous recherchons dans la requête HTTP ce qu'il faut faire. La méthode la plus simple consiste à passer des commandes à l'ESP8266 sous la forme d'une commande du type / gpio / desire_state (0, 1 ou marche / arrêt). 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)\nval = 0;\nsinon if (req.indexOf ("/ gpio / 1")! = -1)\nval = 1;\nautre \nSerial.println ("demande non valide");\nclient.stop ();\nrevenir;"},{"id":"text-24","heading":"Text","content":"Nous mettons à jour l'état GPIO et vider le tampon\ndigitalWrite (2, val);\nclient.flush ();\nNous créons maintenant une page HTML qui contient l'état du GPIO. Il s'agit d'une chaîne de texte qui contient le code HTML de la page. On insère dans le code de la page, l'état du GPIO\nChaîne s = "HTTP / 1.1 200 OK r nContenu-Type: texte / html r n r n r n r nGPIO est maintenant ";\ns + = (val)? "haut": "bas";\ns + = "ne pas";\nNous publions cette page au client avec la commande d'impression, très facile!\nclient.print (s);\nVoilà, vous pouvez désormais contrôler à distance tout matériel connecté au GPIO (un relais, une LED, un moteur, un servomoteur, etc.) à l'aide d'une simple requête HTTP. Vous pouvez par exemple exécuter très simplement une commande à partir d'un logiciel domotique. Voici deux exemples, le premier pour Domoticz, le second pour Jeedom.\nMaintenant, vous aimeriez certainement pouvoir faire une petite interface pour vos projets ESP8266. Pour cela, nous devons connaître quelques notions de base du HTML. Nous n'irons pas très loin dans l'apprentissage du HTML, il suffit d'apprendre les éléments importants pour débuter et avoir un projet fonctionnel. Si vous avez besoin de plus d'éléments d'interface, je recommande w3schools qui est une référence dans l'apprentissage du HTML. Le site est en anglais mais il est très clair et très facile d'accès.\nDans un projet ESP8266, nous pouvons créer des pages HTML dynamiques, c'est-à-dire que nous construisons une chaîne de texte qui contient le code de la page que nous afficherons ensuite. C'est ce que nous allons faire. Mais l'ESP8266 est également capable de fonctionner comme un vrai site web, c'est-à-dire qu'on peut installer sur des pages HTML à mémoire flash, du code javascript, des feuilles de style CSS … On n'ira pas aussi loin dans ce premier tutoriel.\nJe vous propose de créer une petite station météo pour avoir des données à mettre à jour régulièrement et de créer un bouton pour activer / désactiver une sortie GPIO (juste une LED par exemple). J'ai utilisé le matériel suivant\nVoici un tableau de localisation et de correspondance des broches entre Arduino et ESP8266."},{"id":"text-25","heading":"Text","content":"Composant\nBroches\nÉquivalence ESP8266 (Wemos D1 mini)"},{"id":"text-26","heading":"Text","content":"DHT22\nVCC\n5V"},{"id":"text-27","heading":"Text","content":"GND\ng"},{"id":"text-28","heading":"Text","content":"Les données\nG5"},{"id":"text-29","heading":"Text","content":"BMP180\nVCC\n5V"},{"id":"text-30","heading":"Text","content":"GND\ng"},{"id":"text-31","heading":"Text","content":"SDA\nD2"},{"id":"text-32","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-33","heading":"Text","content":"Remarque. Vous pouvez rencontrer une erreur de compilation adafruit_Sensor.h: Aucun fichier ou répertoire de ce type. Dans ce cas, téléchargez et décompressez la bibliothèque manuellement depuis GitHub dans le dossier Arduino -> Library, puis relancez l'IDE pour qu'il soit pris en compte."},{"id":"text-34","heading":"Text","content":"#comprendre \n#comprendre \n#comprendre \n#comprendre \n#comprendre \nNous définissons les variables du programme. Modifiez le réseau WiFi auquel vous allez vous connecter et le mot de passe correspondant.\n#define ssid "ssid" // WiFi SSID\n#define password "password" // mot de passe WiFi\n#define DHTTYPE DHT22 // type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche DHT / Broche DHT\n#define LEDPIN D3 // Led\nflotteur t = 0;\nflotteur h = 0;\nflotteur p = 0;\nString etatLed = "OFF";\nNous créons les objets dht, bmp et server\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nESP8266WebServer server (80);\nCette première fonction vous permet de construire le code HTML de la page principale du programme. C’est une simple chaîne de caractères. C’est un assemblage de chaînes. Vous pouvez facilement inclure la valeur ou l'état d'une variable (par exemple, l'état d'une sortie). En retour, la fonction renvoie une chaîne contenant le code HTML de la page.\nString getPage () \nPage de chaîne = "";\npage + = "Démo ESP8266 - www.projetsdiy.fr";\npage + = "";\npage + = "ESP8266 Demo";\npage + = "DHT22";\npage + = "Température : ";\npage + = t;\npage + = "° C";\npage + = "Humidité : ";\npage + = h;\npage + = "%BMP180";\npage + = "Pression atmosphérique : ";\npage + = p;\npage + = "mbar";\npage + = "GPIO";\npage + = "";\npage + = "D3 (indiquer: ";\npage + = etatLed;\npage + = ")NOUS";\npage + = "DE";\npage + = "";\npage + = "www.projetsdiy.fr";\npage + = "";\npage de retour;"},{"id":"text-35","heading":"Text","content":"Voyons un peu mieux comment le code est construit"},{"id":"text-36","heading":"Text","content":"Code HTML\nExplication"},{"id":"text-37","heading":"Text","content":"Démo ESP8266 – www.projetsdiy.fr"},{"id":"text-38","heading":"Text","content":"lang : permet de définir la langue de la page\ntête : c'est l'en-tête de la page. Il contient différents méta (paramètres)"},{"id":"text-39","heading":"Text","content":"http-equiv = ’refresh’: il s’agit d’une page que le navigateur devra actualiser. Pour plus de types, allez ici\ncontent = "10": toutes les 10 secondes"},{"id":"text-40","heading":"Text","content":"Titre : le titre de la page affiché dans la barre du navigateur\nstyle : un style pour la page (couleur de fond, police à utiliser, couleur du texte"},{"id":"text-41","heading":"Text","content":"C'est le contenu de la page affichée"},{"id":"text-42","heading":"Text","content":"ESP8266 Demo"},{"id":"text-43","heading":"Text","content":"Un titre affiché en haut de la page"},{"id":"text-44","heading":"Text","content":"DHT22"},{"id":"text-45","heading":"Text","content":"Un titre (h3, plus petit) pour le capteur DHT22"},{"id":"text-46","heading":"Text","content":"Température: xx ° C\nHumidité: xx%"},{"id":"text-47","heading":"Text","content":"Le bloc ul permet d'afficher comme liste information. La même chose pour le BMP180"},{"id":"text-48","heading":"Text","content":"D3 (état: xx)\nNOUS\nDE"},{"id":"text-49","heading":"Text","content":"Pour mettre à jour le GPIO, nous utilisons un formulaire.\nIci, nous utilisons un bouton radio pour changer l'état (On / Off) puis nous envoyons (soumettre) le contenu du formulaire avec un bouton.\nL'option Nom vous permet de nommer la variable qui contiendra l'état que vous souhaitez récupérer dans le code Arduino. Ici LED."},{"id":"text-50","heading":"Text","content":"Toute balise ouverte doit être fermée (c'est mieux!)"},{"id":"text-51","heading":"Text","content":"La fonction handleRoot vous permet de surveiller si vous recevez une demande d'actualisation du GPIO en contrôlant si l'argument LED est retourné par la page. Si c'est le cas, nous exécutons la fonction handleSubmit. A nous de créer\nvoid handleRoot () \nif (server.hasArg ("LED")) \nhandleSubmit ();\n autre \nserver.send (200, "text / html", getPage ());"},{"id":"text-52","heading":"Text","content":"La fonction handleSubmit traite la mise à jour du GPIO. On obtient l'état de la variable LED. Attention, c'est une chaîne de caractères, il faut donc tester "1" et non 1. On en profite pour affecter l'état du GPIO dans la variable etatLed sous forme de chaîne, c'est plus amusant à lire . Enfin, nous mettons à jour l'affichage de la page HTML avec server.send. Nous récupérons la page mise à jour en appelant la fonction getPage ().\nvoid handleSubmit () \n// Mettre à jour le GPIO / Mettre à jour le GPIO\nString LEDValue;\nLEDValue = server.arg ("LED");\nSerial.println ("Définir GPIO"); Serial.print (LEDValue);\nif (LEDValue == "1") \ndigitalWrite (LEDPIN, 1);\netatLed = "On";\nserver.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \ndigitalWrite (LEDPIN, 0);\netatLed = "Off";\nserver.send (200, "text / html", getPage ());\n autre \nSerial.println ("Err Led Value");"},{"id":"text-53","heading":"Text","content":"Maintenant que toutes les fonctions sont créées, nous pouvons appeler la fonction installer (). Il initialise le BMP180, la connexion WiFi, connecte la fonction qui s'occupe de la page principale et enfin on lance le serveur web\nvoid setup () \nSerial.begin (115200);\n// Initialisation du BMP180 / Init BMP180\nif (! bmp.begin ()) \nSerial.println ("BMP180 KO!");\ntandis que (1);\n autre \nSerial.println ("BMP180 OK");"},{"id":"text-54","heading":"Text","content":"WiFi.begin (ssid, mot de passe);\n// Attendre la connexion au réseau WiFi / Attendre la connexion\nwhile (WiFi.status ()! = WL_CONNECTED) \nretard (500); Serial.print (".");"},{"id":"text-55","heading":"Text","content":"// Connexion WiFi établie / connexion WiFi OK\nSerial.println ("");\nSerial.print ("Connecté à"); Serial.println (ssid);\nSerial.print ("adresse IP:"); Serial.println (WiFi.localIP ());"},{"id":"text-56","heading":"Text","content":"// On branche la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\nserver.on ("/", handleRoot);"},{"id":"text-57","heading":"Text","content":"server.begin ();\nSerial.println ("Le serveur HTTP a démarré");"},{"id":"text-58","heading":"Text","content":"Il ne reste plus qu'à exécuter la fonction boucle () lire régulièrement les mesures sur les capteurs. Contrairement à l'exemple précédent basé sur la bibliothèque ESP8266WiFi, voici la bibliothèque ESP8266WebServer nécessite de brancher la fonction de rappel server.handleClient () qui surveille la présence d'un client et délivre la page HTML demandée.\nboucle vide () \nserver.handleClient ();\nt = dht.readTemperature ();\nh = dht.readHumidity ();\np = bmp.readPressure () / 100.0F;\nretard (1000);"},{"id":"text-59","heading":"Text","content":"Voici le code source assemblé du projet que vous avez juste besoin de coller dans un nouveau projet, puis de le télécharger\n#comprendre \n#comprendre \n#comprendre \n#comprendre"},{"id":"text-60","heading":"Text","content":"#define ssid "xx" // WiFi SSID\n#define password "xxxxxx" // Mot de passe WiFi\n#define DHTTYPE DHT22 // type DHT (DHT11, DHT22)\n#define DHTPIN D4 // Broche DHT / Broche DHT\n#define LEDPIN D3 // Led\nflotteur t = 0;\nflotteur h = 0;\nflotteur p = 0;\nString etatLed = "OFF";"},{"id":"text-61","heading":"Text","content":"// Créer des objets / créer des objets\nDHT DHT (DHTPIN, DHTTYPE);\nAdafruit_BMP085 bmp;\nESP8266WebServer server (80);"},{"id":"text-62","heading":"Text","content":"String getPage () \nPage de chaîne = "";\npage + = "Démo ESP8266 - www.projetsdiy.fr";\npage + = "";\npage + = "ESP8266 Demo";\npage + = "DHT22";\npage + = "Température : ";\npage + = t;\npage + = "° C";\npage + = "Humidité : ";\npage + = h;\npage + = "%BMP180";\npage + = "Pression atmosphérique : ";\npage + = p;\npage + = "mbar";\npage + = "GPIO";\npage + = "";\npage + = "D3 (indiquer: ";\npage + = etatLed;\npage + = ")";\npage + = "NOUS";\npage + = "DE";\npage + = "";\npage + = "www.projetsdiy.fr";\npage + = "";\npage de retour;"},{"id":"text-63","heading":"Text","content":"void handleRoot () \nif (server.hasArg ("LED")) \nhandleSubmit ();\n autre \nserver.send (200, "text / html", getPage ());"},{"id":"text-64","heading":"Text","content":"void handleSubmit () \n// Mettre à jour le GPIO / Mettre à jour le GPIO\nString LEDValue;\nLEDValue = server.arg ("LED");\nSerial.println ("Définir GPIO"); Serial.print (LEDValue);\nif (LEDValue == "1") \ndigitalWrite (LEDPIN, 1);\netatLed = "On";\nserver.send (200, "text / html", getPage ());\n else if (LEDValue == "0") \ndigitalWrite (LEDPIN, 0);\netatLed = "Off";\nserver.send (200, "text / html", getPage ());\n autre \nSerial.println ("Err Led Value");"},{"id":"text-65","heading":"Text","content":"void setup () \nSerial.begin (115200);\n// Initialisation du BMP180 / Init BMP180\nif (! bmp.begin ()) \nSerial.println ("BMP180 KO!");\ntandis que (1);\n autre \nSerial.println ("BMP180 OK");"},{"id":"text-66","heading":"Text","content":"WiFi.begin (ssid, mot de passe);\n// Attendre la connexion au réseau WiFi / Attendre la connexion\nwhile (WiFi.status ()! = WL_CONNECTED) \nretard (500); Serial.print (".");"},{"id":"text-67","heading":"Text","content":"// Connexion WiFi établie / connexion WiFi OK\nSerial.println ("");\nSerial.print ("Connecté à"); Serial.println (ssid);\nSerial.print ("adresse IP:"); Serial.println (WiFi.localIP ());"},{"id":"text-68","heading":"Text","content":"// On branche la fonction qui gère la première page / lien vers la fonction qui gère la page de lancement\nserver.on ("/", handleRoot);"},{"id":"text-69","heading":"Text","content":"server.begin ();\nSerial.println ("Le serveur HTTP a démarré");"},{"id":"text-70","heading":"Text","content":"boucle vide () \nserver.handleClient ();\nt = dht.readTemperature ();\nh = dht.readHumidity ();\np = bmp.readPressure () / 100.0F;\nretard (1000);"},{"id":"text-71","heading":"Text","content":"Récupérez l'adresse IP de Wemos en ouvrant le moniteur série puis connectez-vous à partir d'un navigateur Internet pour accéder à l'interface de la mini station météo."},{"id":"text-72","heading":"Text","content":"Voilà, nous savons maintenant comment créer un serveur Web à l'aide d'un ESP8266, contrôler le GPIO et afficher les mesures des capteurs. Nous n'avons vu ici que les principaux rudiments pour commencer, mais ils couvrent déjà une grande partie de ce dont vous avez besoin pour développer de petits objets connectés. Dans le prochain tutoriel, nous verrons comment avoir une plus belle interface graphique en utilisant Bootstrap, un framework développé par un développeur travaillant chez Tweeter qui vous permet de créer de plus belles interfaces graphiques en HTML."},{"id":"text-73","heading":"Text","content":"Remarque. L'ensemble du tutoriel a été développé sur l'IDE Arduino 1.8.1 installé sur un Orange Pi Plus 2e (présenté ici) exécutant Armbian (Ubuntu 16.04 LTS). Suivez ce tutoriel pour savoir comment installer l'IDE Arduino sur Linux (ARM ou x86)."},{"id":"text-74","heading":"Text","content":"Nouveaux boucliers compatibles LoLin W600-PICO et WeMos d1 mini \nCommencez avec des objets connectés DIY (2). Communiquer, programmer, stocker, visualiser, fabriquer des circuits \n# Découvertes de la semaine 5: WeMos disparaît, nouvelle gamme LoLin 2019 \n# Test IAQ CCS811, capteur de qualité de l'air TVOC, bus eCO2 i2C (Arduino, ESP8266) \nBibliothèque Arduino Telegram Bot universelle compatible avec les mises à niveau Arduino, ESP32 et ESP8266 vers la version 1.1.0 \nCartes de développement et boucliers Wemos, nouvelles fonctionnalités pour 2018 et mises à jour"},{"id":"text-75","heading":"Text","content":"As-tu aimé cet article ?\n \n[Total:[Total:[Total:[Total: Moyenne: ]"},{"id":"text-76","heading":"Text","content":"Click to rate this post!\n \n [Total: 0 Average: 0]"}],"media":{"primary_image":"https://tutos-gameserver.fr/wp-content/uploads/2020/05/esp8266-wemos-d1-mini-serveur-server-web-dht22-bmp180-gpio-.png"},"relations":[{"rel":"canonical","href":"https://tutos-gameserver.fr/2020/05/01/comprendre-la-programmation-du-serveur-web-avec-le-code-arduino-bien-choisir-son-serveur-d-impression/"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2020/05/01/comprendre-la-programmation-du-serveur-web-avec-le-code-arduino-bien-choisir-son-serveur-d-impression/llm","type":"text/html"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2020/05/01/comprendre-la-programmation-du-serveur-web-avec-le-code-arduino-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}