Ce tutoriel décrit les étapes à suivre pour créer votre propre serveur Web Arduino.
"},{"id":"text-2","type":"text","heading":"","plain_text":"L'installation d'un serveur Web sur l'Arduino est un processus simple qui couvre le processus pour le rendre opérationnel. Je vais également aborder certains concepts de base, tels que l'utilisation d'Ajax pour mettre à jour plutôt que d'actualiser la page à plusieurs reprises.\nVous aurez besoin de connaître le HTML de base, qui est incroyablement facile à comprendre. Si vous n'avez jamais fait de HTML, je vous recommande de vous familiariser avec w3schools pour une introduction de base.\nCe serveur ne pourra rien faire de trop sophistiqué, mais il est incroyablement utile pour quiconque souhaite afficher des données à partir de périphériques connectés aux broches ou qui souhaite interagir avec un circuit à partir d’une page Web. Le serveur Web plus puissant Raspberry Pi pourrait vous intéresser si cela ne couvre pas vraiment ce que vous recherchez.\nTous les exemples de code peuvent être trouvés sur mon Github et peuvent être facilement téléchargés (ils sont également commentés). Si vous constatez des erreurs, assurez-vous de me le faire savoir dans la section commentaires au bas de cette page.\n Équipement\nL’équipement dont vous aurez besoin pour ce tutoriel sur le serveur Web Arduino est répertorié ci-dessous.\n Arduino Uno\n Bouclier Ethernet ou similaire\n Cordon Ethernet\n Carte Micro SD (en option)\n** La carte SD devra être formatée au format FAT16 ou FAT32.\n Les bases du code\nSi vous débutez dans le codage ou si vous êtes intéressé par certains principes de base expliqués, lisez la suite, sinon vous pouvez ignorer cette section et passer à la configuration du serveur Web avec ou sans section de carte SD.\n Initialisation\nPour commencer, vous devez d’abord initialiser le serveur Web en définissant quelques variables, puis en appelant une fonction.\nTout d’abord, vous devez définir une adresse Mac, celle ci-dessous devrait convenir à la plupart des réseaux domestiques. Si vous savez exactement ce que vous voulez, n'hésitez pas à le changer.\noctet mac[] = \n 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED\n;\nDeuxièmement, vous devrez définir une adresse IP. Pour cela, il vous suffit d'appeler le Adresse IP classe avec votre adresse IP choisie. Assurez-vous de le mettre à jour avec une adresse IP qui n’entrera pas en conflit sur votre réseau.\nIPAddress ip (192, 168, 1, 177);\nTroisièmement, vous devrez définir le numéro de port que le serveur doit écouter. Par défaut, HTTP pur s'exécute sur le port 80. Si vous le modifiez, vous devrez définir le port lorsque vous accéderez à la page Web dans votre navigateur. Par exemple, si votre port était 14213, alors l'adresse ressemblera à ceci: 192.168.1.177:14213\nServeur EthernetServer (80);\nEnfin, dans la fonction de configuration, vous devrez initialiser le périphérique Ethernet. Une fois cette initialisation effectuée, appelez simplement le server.begin ()Une fois que cela est fait, vous devriez maintenant pouvoir écouter les connexions et répondre avec les données, le cas échéant.\nEthernet.begin (mac, ip);\n server.begin ();\n Détecter une nouvelle connexion\nDans la fonction de boucle, nous devons vérifier une nouvelle connexion à chaque boucle. Si une nouvelle connexion est détectée, nous entrons dans le code logique de notre page Web.\nLe code suivant détectera lorsqu'un nouveau client tente de se connecter au serveur.\nClient EthernetClient = server.available ();\n si (client) {\n while (client.connected ()) {\n if (client.available ()) {\nUne fois qu'il est déterminé qu'un client est disponible, nous passons ensuite à la production de code HTML à partir du serveur Web Arduino.\n Renvoyer l'en-tête de réponse HTML\nPour qu'un navigateur affiche correctement la page Web, nous devons d’abord répondre avec un en-tête de réponse HTML. Cela n’a besoin d’être compliqué, l’exemple ci-dessous est plus que suffisant pour que tout fonctionne correctement.\nSi vous recherchez plus d’informations sur les champs d’en-tête, cette page wiki extrêmement pratique explique très bien tout.\nclient.println ("HTTP / 1.1 200 OK");\nclient.println ("Content-Type: text / html");\nclient.println ("Connection: close");\nclient.println ();\n Sortie HTML\nLa sortie HTML peut simplement être effectuée en appelant client.println () ou client.print () avec le texte / HTML passé en paramètre. C’est simple, mais comme vous pouvez le voir dans les exemples plus bas dans cette page, cela alourdit vraiment le code.\nVous trouverez ci-dessous un exemple de base de la production de HTML.\nclient.println ("");\nclient.println ("");\nclient.print ("Valeurs analogiques");\nL’autre option consiste à stocker les fichiers HTML sur une carte SD à partir de laquelle vous pouvez accéder. Vous pouvez ensuite exécuter des requêtes AJAX pour mettre à jour des éléments sur la page Web afin qu’ils affichent les données correctes.\nVous pouvez également faire cela pour que l’Arduino exécute des actions telles que l’allumage et l’extinction d’un voyant.\n Fermer la connexion\nUne fois le traitement de la page Web terminé, vous devez attendre quelques instants avant de vous assurer que le client récupère les données. Au bout d'une seconde environ, fermez simplement la connexion au client.\nretarder (1);\n client.stop ();\n Serveur Web Arduino sans carte SD\nSi vous n’utilisez pas la carte SD, il est extrêmement simple de mettre en place un serveur Web.\nIl est important de noter que si vous avez une carte SD insérée, mais que celle-ci n’est pas utilisée, cela peut entraîner des problèmes de communication entre le sketch et l’Arduino. Pour éviter cela, ajoutez les deux lignes suivantes dans la fonction de configuration.\npinMode (4, OUTPUT);\ndigitalWrite (4, HAUT);\nUne fois qu’ils ont été ajoutés, vous pouvez rajouter la carte SD dans l’appareil.\nPour obtenir rapidement un serveur Web Arduino opérationnel, ouvrez simplement sketch, copiez et collez le code ci-dessous. Vous pouvez également le trouver sur ma page Github, ainsi que le code complet de tous les exemples de ce tutoriel.\n#comprendre \n#comprendre","html":"L'installation d'un serveur Web sur l'Arduino est un processus simple qui couvre le processus pour le rendre opérationnel. Je vais également aborder certains concepts de base, tels que l'utilisation d'Ajax pour mettre à jour plutôt que d'actualiser la page à plusieurs reprises.\nVous aurez besoin de connaître le HTML de base, qui est incroyablement facile à comprendre. Si vous n'avez jamais fait de HTML, je vous recommande de vous familiariser avec w3schools pour une introduction de base.\nCe serveur ne pourra rien faire de trop sophistiqué, mais il est incroyablement utile pour quiconque souhaite afficher des données à partir de périphériques connectés aux broches ou qui souhaite interagir avec un circuit à partir d’une page Web. Le serveur Web plus puissant Raspberry Pi pourrait vous intéresser si cela ne couvre pas vraiment ce que vous recherchez.\nTous les exemples de code peuvent être trouvés sur mon Github et peuvent être facilement téléchargés (ils sont également commentés). Si vous constatez des erreurs, assurez-vous de me le faire savoir dans la section commentaires au bas de cette page.\n Équipement\nL’équipement dont vous aurez besoin pour ce tutoriel sur le serveur Web Arduino est répertorié ci-dessous.\n Arduino Uno\n Bouclier Ethernet ou similaire\n Cordon Ethernet\n Carte Micro SD (en option)\n** La carte SD devra être formatée au format FAT16 ou FAT32.\n Les bases du code\nSi vous débutez dans le codage ou si vous êtes intéressé par certains principes de base expliqués, lisez la suite, sinon vous pouvez ignorer cette section et passer à la configuration du serveur Web avec ou sans section de carte SD.\n Initialisation\nPour commencer, vous devez d’abord initialiser le serveur Web en définissant quelques variables, puis en appelant une fonction.\nTout d’abord, vous devez définir une adresse Mac, celle ci-dessous devrait convenir à la plupart des réseaux domestiques. Si vous savez exactement ce que vous voulez, n'hésitez pas à le changer.\noctet mac[] = \n 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED\n;\nDeuxièmement, vous devrez définir une adresse IP. Pour cela, il vous suffit d'appeler le Adresse IP classe avec votre adresse IP choisie. Assurez-vous de le mettre à jour avec une adresse IP qui n’entrera pas en conflit sur votre réseau.\nIPAddress ip (192, 168, 1, 177);\nTroisièmement, vous devrez définir le numéro de port que le serveur doit écouter. Par défaut, HTTP pur s'exécute sur le port 80. Si vous le modifiez, vous devrez définir le port lorsque vous accéderez à la page Web dans votre navigateur. Par exemple, si votre port était 14213, alors l'adresse ressemblera à ceci: 192.168.1.177:14213\nServeur EthernetServer (80);\nEnfin, dans la fonction de configuration, vous devrez initialiser le périphérique Ethernet. Une fois cette initialisation effectuée, appelez simplement le server.begin ()Une fois que cela est fait, vous devriez maintenant pouvoir écouter les connexions et répondre avec les données, le cas échéant.\nEthernet.begin (mac, ip);\n server.begin ();\n Détecter une nouvelle connexion\nDans la fonction de boucle, nous devons vérifier une nouvelle connexion à chaque boucle. Si une nouvelle connexion est détectée, nous entrons dans le code logique de notre page Web.\nLe code suivant détectera lorsqu'un nouveau client tente de se connecter au serveur.\nClient EthernetClient = server.available ();\n si (client) {\n while (client.connected ()) {\n if (client.available ()) {\nUne fois qu'il est déterminé qu'un client est disponible, nous passons ensuite à la production de code HTML à partir du serveur Web Arduino.\n Renvoyer l'en-tête de réponse HTML\nPour qu'un navigateur affiche correctement la page Web, nous devons d’abord répondre avec un en-tête de réponse HTML. Cela n’a besoin d’être compliqué, l’exemple ci-dessous est plus que suffisant pour que tout fonctionne correctement.\nSi vous recherchez plus d’informations sur les champs d’en-tête, cette page wiki extrêmement pratique explique très bien tout.\nclient.println ("HTTP / 1.1 200 OK");\nclient.println ("Content-Type: text / html");\nclient.println ("Connection: close");\nclient.println ();\n Sortie HTML\nLa sortie HTML peut simplement être effectuée en appelant client.println () ou client.print () avec le texte / HTML passé en paramètre. C’est simple, mais comme vous pouvez le voir dans les exemples plus bas dans cette page, cela alourdit vraiment le code.\nVous trouverez ci-dessous un exemple de base de la production de HTML.\nclient.println ("");\nclient.println ("");\nclient.print ("Valeurs analogiques");\nL’autre option consiste à stocker les fichiers HTML sur une carte SD à partir de laquelle vous pouvez accéder. Vous pouvez ensuite exécuter des requêtes AJAX pour mettre à jour des éléments sur la page Web afin qu’ils affichent les données correctes.\nVous pouvez également faire cela pour que l’Arduino exécute des actions telles que l’allumage et l’extinction d’un voyant.\n Fermer la connexion\nUne fois le traitement de la page Web terminé, vous devez attendre quelques instants avant de vous assurer que le client récupère les données. Au bout d'une seconde environ, fermez simplement la connexion au client.\nretarder (1);\n client.stop ();\n Serveur Web Arduino sans carte SD\nSi vous n’utilisez pas la carte SD, il est extrêmement simple de mettre en place un serveur Web.\nIl est important de noter que si vous avez une carte SD insérée, mais que celle-ci n’est pas utilisée, cela peut entraîner des problèmes de communication entre le sketch et l’Arduino. Pour éviter cela, ajoutez les deux lignes suivantes dans la fonction de configuration.\npinMode (4, OUTPUT);\ndigitalWrite (4, HAUT);\nUne fois qu’ils ont été ajoutés, vous pouvez rajouter la carte SD dans l’appareil.\nPour obtenir rapidement un serveur Web Arduino opérationnel, ouvrez simplement sketch, copiez et collez le code ci-dessous. Vous pouvez également le trouver sur ma page Github, ainsi que le code complet de tous les exemples de ce tutoriel.\n#comprendre \n#comprendre
"},{"id":"text-3","type":"text","heading":"","plain_text":"octet mac[] = \n 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED\n;\nIPAddress ip (192, 168, 1, 177);","html":"octet mac[] = \n 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED\n;\nIPAddress ip (192, 168, 1, 177);
"},{"id":"text-4","type":"text","heading":"","plain_text":"Serveur EthernetServer (80);","html":"Serveur EthernetServer (80);
"},{"id":"text-5","type":"text","heading":"","plain_text":"void setup() \n Serial.begin (9600);\n while (! Série) \n ; // attend que le port série se connecte. Nécessaire pour le port USB natif uniquement\n ","html":"void setup() \n Serial.begin (9600);\n while (! Série) \n ; // attend que le port série se connecte. Nécessaire pour le port USB natif uniquement\n
"},{"id":"text-6","type":"text","heading":"","plain_text":" Ethernet.begin (mac, ip);\n server.begin ();\n Serial.print ("le serveur est à");\n Serial.println (Ethernet.localIP ());","html":"Ethernet.begin (mac, ip);\n server.begin ();\n Serial.print ("le serveur est à");\n Serial.println (Ethernet.localIP ());
"},{"id":"text-7","type":"text","heading":"","plain_text":"boucle vide () {\n // écoute les clients entrants\n Client EthernetClient = server.available ();\n si (client) {\n Serial.println ("nouveau client");\n // une demande http se termine par une ligne vide\n boolean currentLineIsBlank = true;\n while (client.connected ()) \n if (client.available ()) \n char c = client.read ();\n Serial.write (c);\n if (c == ' n' && currentLineIsBlank) \n client.println ("HTTP / 1.1 200 OK");\n client.println ("Content-Type: text / html");\n client.println ("Connection: close");\n client.println ("Refresh: 5");\n client.println ();\n client.println ("");\n client.println ("");\n client.print ("Valeurs analogiques");\n pour (int analogChannel = 0; analogChannel <6; analogChannel ++) \n int sensorReading = analogRead (analogChannel);\n client.print ("entrée analogique");\n client.print (analogChannel);\n client.print ("est");\n client.print (sensorReading);\n client.println ("");\n \n client.println ("");\n Pause;\n \n si (c == ' n') \n currentLineIsBlank = true;\n sinon si (c! = ' r') \n currentLineIsBlank = false;\n \n \n \n retarder (1);\n // ferme la connexion:\n client.stop ();\n Serial.println ("client déconnecté");\n }\n}\nUne fois que vous avez téléchargé ce code sur l'Arduino, vous devez avoir un serveur Web très basique opérationnel.\nIl sera actualisé toutes les 5 secondes en mettant à jour les valeurs des broches analogiques de l’Arduino (il ne s’agira que de valeurs aléatoires, sauf si vous avez un appareil ou un capteur connecté à celles-ci).\nVous pouvez également surveiller le moniteur série pour toutes les lignes de débogage situées dans le code.","html":"boucle vide () {\n // écoute les clients entrants\n Client EthernetClient = server.available ();\n si (client) {\n Serial.println ("nouveau client");\n // une demande http se termine par une ligne vide\n boolean currentLineIsBlank = true;\n while (client.connected ()) \n if (client.available ()) \n char c = client.read ();\n Serial.write (c);\n if (c == ' n' && currentLineIsBlank) \n client.println ("HTTP / 1.1 200 OK");\n client.println ("Content-Type: text / html");\n client.println ("Connection: close");\n client.println ("Refresh: 5");\n client.println ();\n client.println ("");\n client.println ("");\n client.print ("Valeurs analogiques");\n pour (int analogChannel = 0; analogChannel <6; analogChannel ++) \n int sensorReading = analogRead (analogChannel);\n client.print ("entrée analogique");\n client.print (analogChannel);\n client.print ("est");\n client.print (sensorReading);\n client.println ("");\n \n client.println ("");\n Pause;\n \n si (c == ' n') \n currentLineIsBlank = true;\n sinon si (c! = ' r') \n currentLineIsBlank = false;\n \n \n \n retarder (1);\n // ferme la connexion:\n client.stop ();\n Serial.println ("client déconnecté");\n }\n}\nUne fois que vous avez téléchargé ce code sur l'Arduino, vous devez avoir un serveur Web très basique opérationnel.\nIl sera actualisé toutes les 5 secondes en mettant à jour les valeurs des broches analogiques de l’Arduino (il ne s’agira que de valeurs aléatoires, sauf si vous avez un appareil ou un capteur connecté à celles-ci).\nVous pouvez également surveiller le moniteur série pour toutes les lignes de débogage situées dans le code.
"},{"id":"text-8","type":"text","heading":"","plain_text":"Serveur Web Arduino avec une carte SD\nSi vous décidez de choisir la route de la carte SD pour le serveur Web Arduino, les fichiers HTML devront être créés sur votre ordinateur, puis copiés sur la carte SD avant d'être insérés dans l'Arduino.\nUn pro avec le chargement de la page Web depuis la carte SD est que vous pourriez avoir des pages plus complexes / lourdes sans avoir à écrire des centaines de client.write lignes. Cela permet également d'éviter toute situation de faible mémoire qui se produit généralement lorsque trop de code est exécuté sur l'Arduino.\n Initialisation de la carte SD\nAvant de pouvoir accéder à la carte SD, vous devez importer le package SD et l’initialiser dans la fonction de configuration. La vérification dans la fonction de configuration verra si elle peut accéder à la carte, sinon émettra une erreur dans le moniteur série.\nSerial.println ("La vérification de la carte SD est accessible ...");\n if (! SD.begin (4)) \n Serial.println ("ERROR - Échec d'initialisation de la carte SD!");\n revenir; // l'initialisation a échoué\n \n Serial.println ("SUCCESS - Carte SD initialisée.");\n Chargement du fichier\nLorsque vous êtes prêt à charger le fichier, utilisez simplement sd.open (nom du fichier) pour ouvrir le fichier. Utilisez une instruction if pour vous assurer que le fichier existe, puis parcourez le contenu du fichier jusqu'à la fin.\nwebPage = SD.open ("index.htm"); // ouvrir un fichier de page Web\nsi (page Web) {\n while (webPage.available ()) \n client.write (webPage.read ()); // envoyer une page Web au client","html":"Serveur Web Arduino avec une carte SD\nSi vous décidez de choisir la route de la carte SD pour le serveur Web Arduino, les fichiers HTML devront être créés sur votre ordinateur, puis copiés sur la carte SD avant d'être insérés dans l'Arduino.\nUn pro avec le chargement de la page Web depuis la carte SD est que vous pourriez avoir des pages plus complexes / lourdes sans avoir à écrire des centaines de client.write lignes. Cela permet également d'éviter toute situation de faible mémoire qui se produit généralement lorsque trop de code est exécuté sur l'Arduino.\n Initialisation de la carte SD\nAvant de pouvoir accéder à la carte SD, vous devez importer le package SD et l’initialiser dans la fonction de configuration. La vérification dans la fonction de configuration verra si elle peut accéder à la carte, sinon émettra une erreur dans le moniteur série.\nSerial.println ("La vérification de la carte SD est accessible ...");\n if (! SD.begin (4)) \n Serial.println ("ERROR - Échec d'initialisation de la carte SD!");\n revenir; // l'initialisation a échoué\n \n Serial.println ("SUCCESS - Carte SD initialisée.");\n Chargement du fichier\nLorsque vous êtes prêt à charger le fichier, utilisez simplement sd.open (nom du fichier) pour ouvrir le fichier. Utilisez une instruction if pour vous assurer que le fichier existe, puis parcourez le contenu du fichier jusqu'à la fin.\nwebPage = SD.open ("index.htm"); // ouvrir un fichier de page Web\nsi (page Web) {\n while (webPage.available ()) \n client.write (webPage.read ()); // envoyer une page Web au client
"},{"id":"text-9","type":"text","heading":"","plain_text":"webPage.close ();\nVous trouverez ci-dessous un exemple de page Web chargée via la carte SD avec Ajax (expliqué ci-dessous) mettant à jour les éléments de la page.","html":"webPage.close ();\nVous trouverez ci-dessous un exemple de page Web chargée via la carte SD avec Ajax (expliqué ci-dessous) mettant à jour les éléments de la page.
"},{"id":"text-10","type":"text","heading":"","plain_text":"Effectuer des actions via la page Web (AJAX)\nIl se peut que vous souhaitiez contrôler un appareil ou un capteur via la page Web. Dans cette section, je vais examiner l'exécution de demandes et de mises à jour à l'aide d'AJAX. Cela signifie que vous ne verrez pas la page se charger encore et encore, mais elle sera toujours mise à jour si nécessaire.\nAJAX ou JavaScript et XML asynchrones est un peu trop compliqué à couvrir complètement dans ce tutoriel, mais je vais passer en revue les bases de l’utiliser sur Arduino. Vous devriez pouvoir adapter les exemples à vos besoins sans trop de problèmes.\n Exemple AJAX\nAJAX fonctionne en envoyant une requête au serveur. Le serveur vérifiera ensuite si la chaîne ajaxrefresh ou ledstatus existe dans l'en-tête (pour cet exemple). Si tel est le cas, il générera les données pertinentes et les renverra.\nLe JavaScript trouve ensuite l’élément HTML pertinent avec le bon identifiant puis remplace le innerHTML avec la réponse de la demande AJAX.\nL'exemple ci-dessous envoie une demande au serveur Web exécuté sur l'Arduino avec la variable GET. ajaxrefresh. Si le serveur renvoie des données, il remplacera le innerHTML de l'élément qui a l'identifiant données analogiques.\nCe script s'exécute toutes les 5 secondes mais peut être ajusté pour répondre à vos besoins.","html":"Effectuer des actions via la page Web (AJAX)\nIl se peut que vous souhaitiez contrôler un appareil ou un capteur via la page Web. Dans cette section, je vais examiner l'exécution de demandes et de mises à jour à l'aide d'AJAX. Cela signifie que vous ne verrez pas la page se charger encore et encore, mais elle sera toujours mise à jour si nécessaire.\nAJAX ou JavaScript et XML asynchrones est un peu trop compliqué à couvrir complètement dans ce tutoriel, mais je vais passer en revue les bases de l’utiliser sur Arduino. Vous devriez pouvoir adapter les exemples à vos besoins sans trop de problèmes.\n Exemple AJAX\nAJAX fonctionne en envoyant une requête au serveur. Le serveur vérifiera ensuite si la chaîne ajaxrefresh ou ledstatus existe dans l'en-tête (pour cet exemple). Si tel est le cas, il générera les données pertinentes et les renverra.\nLe JavaScript trouve ensuite l’élément HTML pertinent avec le bon identifiant puis remplace le innerHTML avec la réponse de la demande AJAX.\nL'exemple ci-dessous envoie une demande au serveur Web exécuté sur l'Arduino avec la variable GET. ajaxrefresh. Si le serveur renvoie des données, il remplacera le innerHTML de l'élément qui a l'identifiant données analogiques.\nCe script s'exécute toutes les 5 secondes mais peut être ajusté pour répondre à vos besoins.
"},{"id":"text-11","type":"text","heading":"","plain_text":"Fonctions Arduino Ajax\nLes deux fonctions ci-dessous sont appelées chaque fois que la demande AJAX correspondante parvient au serveur. C’est très simple: le premier lit les broches analogiques et renvoie les données correspondantes.\nLa deuxième fonction allumera ou éteindra la LED ROUGE en fonction de son état actuel. Il renverra également l'état de la DEL afin qu'AJAX puisse mettre à jour la valeur sur la page Web.\nvoid ajaxRequest (client EthernetClient)","html":"Fonctions Arduino Ajax\nLes deux fonctions ci-dessous sont appelées chaque fois que la demande AJAX correspondante parvient au serveur. C’est très simple: le premier lit les broches analogiques et renvoie les données correspondantes.\nLa deuxième fonction allumera ou éteindra la LED ROUGE en fonction de son état actuel. Il renverra également l'état de la DEL afin qu'AJAX puisse mettre à jour la valeur sur la page Web.\nvoid ajaxRequest (client EthernetClient)
"},{"id":"text-12","type":"text","heading":"","plain_text":" pour (int analogChannel = 0; analogChannel <6; analogChannel ++) \n int sensorReading = analogRead (analogChannel);\n client.print ("entrée analogique");\n client.print (analogChannel);\n client.print ("est");\n client.print (sensorReading);\n client.println ("");\n ","html":"pour (int analogChannel = 0; analogChannel <6; analogChannel ++) \n int sensorReading = analogRead (analogChannel);\n client.print ("entrée analogique");\n client.print (analogChannel);\n client.print ("est");\n client.print (sensorReading);\n client.println ("");\n
"},{"id":"text-13","type":"text","heading":"","plain_text":"void ledChangeStatus (client EthernetClient)","html":"void ledChangeStatus (client EthernetClient)
"},{"id":"text-14","type":"text","heading":"","plain_text":" int state = digitalRead (RED);\n Serial.println (état);\n si (état == 1) \n écriture numérique (ROUGE, FAIBLE);\n client.print ("OFF");\n \n autre \n digitalWrite (RED, HIGH);\n client.print ("ON");\n ","html":"int state = digitalRead (RED);\n Serial.println (état);\n si (état == 1) \n écriture numérique (ROUGE, FAIBLE);\n client.print ("OFF");\n \n autre \n digitalWrite (RED, HIGH);\n client.print ("ON");\n
"},{"id":"text-15","type":"text","heading":"","plain_text":"AJAX avec HTML généré par l'Arduino\nL'exemple ci-dessous contient tout le code HTML et JavaScript entièrement généré par l'Arduino. JavaScript envoie des requêtes AJAX au serveur Arduino qui met à jour la page en fonction des résultats fournis.\nUn problème que j'ai remarqué en générant tout le code sur l'Arduino est qu'il a commencé à manquer d'espace et à donner des avertissements de stabilité. Cela pourrait être un problème si vous voulez des tonnes de capteurs et d'options sur la page. Vous voudrez peut-être envisager de stocker le code HTML sur une carte SD et de le récupérer à partir de là.\nboucle vide () {\n Client EthernetClient = server.available ();\n si (client) {\n Serial.println ("nouveau client");\n boolean currentLineIsBlank = true;\n while (client.connected ()) {\n if (client.available ()) {\n char c = client.read ();\n if (HTTP_req.length () < 120) \n HTTP_req += c; // save the HTTP request 1 char at a time \n Serial.write(c); \n if (c == 'n' && currentLineIsBlank)\n { \n // send a standard http response header\n client.println(\"HTTP/1.1 200 OK\");\n client.println(\"Content-Type: text/html\");\n client.println(\"Connection: close\");\n client.println();\n Serial.println(HTTP_req);\n if (HTTP_req.indexOf(\"ajaxrefresh\") >= 0) \n // lit l'état du commutateur et l'entrée analogique\n ajaxRequest (client);\n Pause;\n \n else if (HTTP_req.indexOf ("ledstatus")> = 0) \n // lit l'état du commutateur et l'entrée analogique\n ledChangeStatus (client);\n Pause;\n \n autre {\n client.println ("");\n client.println ("");\n client.println ("");\n // affiche la valeur de chaque broche d'entrée analogique\n client.print ("Valeurs analogiques");\n client.println ("Valeurs des entrées analogiques Arduino loading .....");\n client.println ("État des DEL Arduino");\n client.println ("");\n if (digitalRead (RED) == 1)\n client.println ("On");\n autre\n client.println ("Off");\n client.println (" | Changer le statut ");\n client.println ("");\n Pause;\n }\n }\n si (c == ' n') \n // tu commences une nouvelle ligne\n currentLineIsBlank = true;\n sinon si (c! = ' r') \n // vous avez un personnage sur la ligne en cours\n currentLineIsBlank = false;\n \n }\n }\n retarder (1);\n client.stop ();\n HTTP_req = "";\n Serial.println ("client déconnecté");\n }\n}\n AJAX avec des fichiers HTML sur une carte SD\nComme vous pouvez le voir ci-dessous, le résultat est beaucoup plus net en enregistrant simplement le code HTML dans un fichier de la carte SD. Cela devrait vous aider à garder votre script pour traiter principalement le code, en particulier si vous faites tout via AJAX et chargez le code HTML sur la carte SD.\nN'oubliez pas qu'il ne s'agit que de la boucle du code si vous souhaitez que la version complète soit dirigée vers ma page Github.\nboucle vide ()\n{\n Client EthernetClient = server.available ();\n si (client) {\n Serial.println ("nouveau client");\n boolean currentLineIsBlank = true;\n while (client.connected ()) {\n if (client.available ()) {\n char c = client.read ();\n if (HTTP_req.length () < 80)\n HTTP_req += c;\n if (c == 'n' && currentLineIsBlank) \n client.println(\"HTTP/1.1 200 OK\");\n client.println(\"Content-Type: text/html\");\n client.println(\"Connection: close\");\n client.println();\n if (HTTP_req.indexOf(\"ajaxrefresh\") >= 0) \n ajaxRequest (client);\n Pause;\n \n else if (HTTP_req.indexOf ("ledstatus")> = 0) \n ledChangeStatus (client);\n Pause;\n \n autre \n webPage = SD.open ("index.htm");\n si (page Web) \n while (webPage.available ()) \n client.write (webPage.read ());\n \n webPage.close ();\n \n Pause;\n \n si (c == ' n') \n currentLineIsBlank = true;\n sinon si (c! = ' r') \n currentLineIsBlank = false;\n \n \n }\n }\n retarder (1);\n client.stop ();\n HTTP_req = "";\n Serial.println ("client déconnecté");\n }\n}\n Dépannage\nComme avec tout projet Arduino, vous pouvez rencontrer quelques problèmes, les problèmes suivants ne sont que quelques-uns des problèmes rencontrés lors de la création de ce didacticiel.","html":"AJAX avec HTML généré par l'Arduino\nL'exemple ci-dessous contient tout le code HTML et JavaScript entièrement généré par l'Arduino. JavaScript envoie des requêtes AJAX au serveur Arduino qui met à jour la page en fonction des résultats fournis.\nUn problème que j'ai remarqué en générant tout le code sur l'Arduino est qu'il a commencé à manquer d'espace et à donner des avertissements de stabilité. Cela pourrait être un problème si vous voulez des tonnes de capteurs et d'options sur la page. Vous voudrez peut-être envisager de stocker le code HTML sur une carte SD et de le récupérer à partir de là.\nboucle vide () {\n Client EthernetClient = server.available ();\n si (client) {\n Serial.println ("nouveau client");\n boolean currentLineIsBlank = true;\n while (client.connected ()) {\n if (client.available ()) {\n char c = client.read ();\n if (HTTP_req.length () < 120) \n HTTP_req += c; // save the HTTP request 1 char at a time \n Serial.write(c); \n if (c == 'n' && currentLineIsBlank)\n { \n // send a standard http response header\n client.println("HTTP/1.1 200 OK");\n client.println("Content-Type: text/html");\n client.println("Connection: close");\n client.println();\n Serial.println(HTTP_req);\n if (HTTP_req.indexOf("ajaxrefresh") >= 0) \n // lit l'état du commutateur et l'entrée analogique\n ajaxRequest (client);\n Pause;\n \n else if (HTTP_req.indexOf ("ledstatus")> = 0) \n // lit l'état du commutateur et l'entrée analogique\n ledChangeStatus (client);\n Pause;\n \n autre {\n client.println ("");\n client.println ("");\n client.println ("");\n // affiche la valeur de chaque broche d'entrée analogique\n client.print ("Valeurs analogiques");\n client.println ("Valeurs des entrées analogiques Arduino loading .....");\n client.println ("État des DEL Arduino");\n client.println ("");\n if (digitalRead (RED) == 1)\n client.println ("On");\n autre\n client.println ("Off");\n client.println (" | Changer le statut ");\n client.println ("");\n Pause;\n }\n }\n si (c == ' n') \n // tu commences une nouvelle ligne\n currentLineIsBlank = true;\n sinon si (c! = ' r') \n // vous avez un personnage sur la ligne en cours\n currentLineIsBlank = false;\n \n }\n }\n retarder (1);\n client.stop ();\n HTTP_req = "";\n Serial.println ("client déconnecté");\n }\n}\n AJAX avec des fichiers HTML sur une carte SD\nComme vous pouvez le voir ci-dessous, le résultat est beaucoup plus net en enregistrant simplement le code HTML dans un fichier de la carte SD. Cela devrait vous aider à garder votre script pour traiter principalement le code, en particulier si vous faites tout via AJAX et chargez le code HTML sur la carte SD.\nN'oubliez pas qu'il ne s'agit que de la boucle du code si vous souhaitez que la version complète soit dirigée vers ma page Github.\nboucle vide ()\n{\n Client EthernetClient = server.available ();\n si (client) {\n Serial.println ("nouveau client");\n boolean currentLineIsBlank = true;\n while (client.connected ()) {\n if (client.available ()) {\n char c = client.read ();\n if (HTTP_req.length () < 80)\n HTTP_req += c;\n if (c == 'n' && currentLineIsBlank) \n client.println("HTTP/1.1 200 OK");\n client.println("Content-Type: text/html");\n client.println("Connection: close");\n client.println();\n if (HTTP_req.indexOf("ajaxrefresh") >= 0) \n ajaxRequest (client);\n Pause;\n \n else if (HTTP_req.indexOf ("ledstatus")> = 0) \n ledChangeStatus (client);\n Pause;\n \n autre \n webPage = SD.open ("index.htm");\n si (page Web) \n while (webPage.available ()) \n client.write (webPage.read ());\n \n webPage.close ();\n \n Pause;\n \n si (c == ' n') \n currentLineIsBlank = true;\n sinon si (c! = ' r') \n currentLineIsBlank = false;\n \n \n }\n }\n retarder (1);\n client.stop ();\n HTTP_req = "";\n Serial.println ("client déconnecté");\n }\n}\n Dépannage\nComme avec tout projet Arduino, vous pouvez rencontrer quelques problèmes, les problèmes suivants ne sont que quelques-uns des problèmes rencontrés lors de la création de ce didacticiel.
"},{"id":"text-16","type":"text","heading":"","plain_text":"Je ne peux pas accéder à ma page Web:Vérifiez l’adresse IP et assurez-vous qu’elle n’entre pas en conflit avec un autre appareil du réseau. Essayez également d’envoyer une requête ping à l’adresse IP pour voir si vous obtenez une réponse.\nMa carte SD dit que c'est inaccessible: Maintenez le bouton éteint enfoncé, puis insérez la carte SD. Je trouve que cela règle généralement le problème.\nCSS: Vous pouvez inclure des feuilles de style CSS sur vos pages Web. Vous pouvez le faire en ligne ou dans l'en-tête entre les balises de style. C’est quelque chose que vous voudrez peut-être approfondir si vous n’avez pas fait beaucoup de CSS. Ce n’est vraiment nécessaire que si vous voulez que vos pages aient une belle apparence.","html":"Je ne peux pas accéder à ma page Web:Vérifiez l’adresse IP et assurez-vous qu’elle n’entre pas en conflit avec un autre appareil du réseau. Essayez également d’envoyer une requête ping à l’adresse IP pour voir si vous obtenez une réponse.\nMa carte SD dit que c'est inaccessible: Maintenez le bouton éteint enfoncé, puis insérez la carte SD. Je trouve que cela règle généralement le problème.\nCSS: Vous pouvez inclure des feuilles de style CSS sur vos pages Web. Vous pouvez le faire en ligne ou dans l'en-tête entre les balises de style. C’est quelque chose que vous voudrez peut-être approfondir si vous n’avez pas fait beaucoup de CSS. Ce n’est vraiment nécessaire que si vous voulez que vos pages aient une belle apparence.
"},{"id":"text-17","type":"text","heading":"","plain_text":"Autres mises en œuvre\nVous pouvez utiliser un serveur Web de beaucoup plus de façons pour augmenter les fonctionnalités de votre circuit. Je vais rapidement énumérer quelques projets pour lesquels vous voudrez peut-être mettre en place une interface Web.","html":"Autres mises en œuvre\nVous pouvez utiliser un serveur Web de beaucoup plus de façons pour augmenter les fonctionnalités de votre circuit. Je vais rapidement énumérer quelques projets pour lesquels vous voudrez peut-être mettre en place une interface Web.
"},{"id":"text-18","type":"text","heading":"","plain_text":"Contrôle du ventilateur / de la température – Surveillez une salle de serveur, une serre, ou quelque chose de similaire où la chaleur et le flux d'air sont importants Vous pouvez ajouter des commandes pour allumer et éteindre les chauffages et les ventilateurs.\nCompteur – Utilisez un capteur de mouvement pour détecter les mouvements et comptez chaque fois que le capteur est déclenché. Vous pouvez appliquer cette même logique avec presque n'importe quel type de capteur.","html":"Contrôle du ventilateur / de la température – Surveillez une salle de serveur, une serre, ou quelque chose de similaire où la chaleur et le flux d'air sont importants Vous pouvez ajouter des commandes pour allumer et éteindre les chauffages et les ventilateurs.\nCompteur – Utilisez un capteur de mouvement pour détecter les mouvements et comptez chaque fois que le capteur est déclenché. Vous pouvez appliquer cette même logique avec presque n'importe quel type de capteur.
"},{"id":"text-19","type":"text","heading":"","plain_text":"J'espère que ce tutoriel sur le serveur Web Arduino vous a aidé à créer un site Web où vous pourrez visualiser et interagir avec des données. Si vous avez des recommandations, des conseils ou avez remarqué que quelque chose ne va pas, n'hésitez pas à laisser un commentaire sur notre forum.","html":"J'espère que ce tutoriel sur le serveur Web Arduino vous a aidé à créer un site Web où vous pourrez visualiser et interagir avec des données. Si vous avez des recommandations, des conseils ou avez remarqué que quelque chose ne va pas, n'hésitez pas à laisser un commentaire sur notre forum.
"},{"id":"text-20","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":"Ce tutoriel décrit les étapes à suivre pour créer votre propre serveur Web Arduino."},{"id":"text-2","heading":"Text","content":"L'installation d'un serveur Web sur l'Arduino est un processus simple qui couvre le processus pour le rendre opérationnel. Je vais également aborder certains concepts de base, tels que l'utilisation d'Ajax pour mettre à jour plutôt que d'actualiser la page à plusieurs reprises.\nVous aurez besoin de connaître le HTML de base, qui est incroyablement facile à comprendre. Si vous n'avez jamais fait de HTML, je vous recommande de vous familiariser avec w3schools pour une introduction de base.\nCe serveur ne pourra rien faire de trop sophistiqué, mais il est incroyablement utile pour quiconque souhaite afficher des données à partir de périphériques connectés aux broches ou qui souhaite interagir avec un circuit à partir d’une page Web. Le serveur Web plus puissant Raspberry Pi pourrait vous intéresser si cela ne couvre pas vraiment ce que vous recherchez.\nTous les exemples de code peuvent être trouvés sur mon Github et peuvent être facilement téléchargés (ils sont également commentés). Si vous constatez des erreurs, assurez-vous de me le faire savoir dans la section commentaires au bas de cette page.\n Équipement\nL’équipement dont vous aurez besoin pour ce tutoriel sur le serveur Web Arduino est répertorié ci-dessous.\n Arduino Uno\n Bouclier Ethernet ou similaire\n Cordon Ethernet\n Carte Micro SD (en option)\n** La carte SD devra être formatée au format FAT16 ou FAT32.\n Les bases du code\nSi vous débutez dans le codage ou si vous êtes intéressé par certains principes de base expliqués, lisez la suite, sinon vous pouvez ignorer cette section et passer à la configuration du serveur Web avec ou sans section de carte SD.\n Initialisation\nPour commencer, vous devez d’abord initialiser le serveur Web en définissant quelques variables, puis en appelant une fonction.\nTout d’abord, vous devez définir une adresse Mac, celle ci-dessous devrait convenir à la plupart des réseaux domestiques. Si vous savez exactement ce que vous voulez, n'hésitez pas à le changer.\noctet mac[] = \n 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED\n;\nDeuxièmement, vous devrez définir une adresse IP. Pour cela, il vous suffit d'appeler le Adresse IP classe avec votre adresse IP choisie. Assurez-vous de le mettre à jour avec une adresse IP qui n’entrera pas en conflit sur votre réseau.\nIPAddress ip (192, 168, 1, 177);\nTroisièmement, vous devrez définir le numéro de port que le serveur doit écouter. Par défaut, HTTP pur s'exécute sur le port 80. Si vous le modifiez, vous devrez définir le port lorsque vous accéderez à la page Web dans votre navigateur. Par exemple, si votre port était 14213, alors l'adresse ressemblera à ceci: 192.168.1.177:14213\nServeur EthernetServer (80);\nEnfin, dans la fonction de configuration, vous devrez initialiser le périphérique Ethernet. Une fois cette initialisation effectuée, appelez simplement le server.begin ()Une fois que cela est fait, vous devriez maintenant pouvoir écouter les connexions et répondre avec les données, le cas échéant.\nEthernet.begin (mac, ip);\n server.begin ();\n Détecter une nouvelle connexion\nDans la fonction de boucle, nous devons vérifier une nouvelle connexion à chaque boucle. Si une nouvelle connexion est détectée, nous entrons dans le code logique de notre page Web.\nLe code suivant détectera lorsqu'un nouveau client tente de se connecter au serveur.\nClient EthernetClient = server.available ();\n si (client) {\n while (client.connected ()) {\n if (client.available ()) {\nUne fois qu'il est déterminé qu'un client est disponible, nous passons ensuite à la production de code HTML à partir du serveur Web Arduino.\n Renvoyer l'en-tête de réponse HTML\nPour qu'un navigateur affiche correctement la page Web, nous devons d’abord répondre avec un en-tête de réponse HTML. Cela n’a besoin d’être compliqué, l’exemple ci-dessous est plus que suffisant pour que tout fonctionne correctement.\nSi vous recherchez plus d’informations sur les champs d’en-tête, cette page wiki extrêmement pratique explique très bien tout.\nclient.println ("HTTP / 1.1 200 OK");\nclient.println ("Content-Type: text / html");\nclient.println ("Connection: close");\nclient.println ();\n Sortie HTML\nLa sortie HTML peut simplement être effectuée en appelant client.println () ou client.print () avec le texte / HTML passé en paramètre. C’est simple, mais comme vous pouvez le voir dans les exemples plus bas dans cette page, cela alourdit vraiment le code.\nVous trouverez ci-dessous un exemple de base de la production de HTML.\nclient.println ("");\nclient.println ("");\nclient.print ("Valeurs analogiques");\nL’autre option consiste à stocker les fichiers HTML sur une carte SD à partir de laquelle vous pouvez accéder. Vous pouvez ensuite exécuter des requêtes AJAX pour mettre à jour des éléments sur la page Web afin qu’ils affichent les données correctes.\nVous pouvez également faire cela pour que l’Arduino exécute des actions telles que l’allumage et l’extinction d’un voyant.\n Fermer la connexion\nUne fois le traitement de la page Web terminé, vous devez attendre quelques instants avant de vous assurer que le client récupère les données. Au bout d'une seconde environ, fermez simplement la connexion au client.\nretarder (1);\n client.stop ();\n Serveur Web Arduino sans carte SD\nSi vous n’utilisez pas la carte SD, il est extrêmement simple de mettre en place un serveur Web.\nIl est important de noter que si vous avez une carte SD insérée, mais que celle-ci n’est pas utilisée, cela peut entraîner des problèmes de communication entre le sketch et l’Arduino. Pour éviter cela, ajoutez les deux lignes suivantes dans la fonction de configuration.\npinMode (4, OUTPUT);\ndigitalWrite (4, HAUT);\nUne fois qu’ils ont été ajoutés, vous pouvez rajouter la carte SD dans l’appareil.\nPour obtenir rapidement un serveur Web Arduino opérationnel, ouvrez simplement sketch, copiez et collez le code ci-dessous. Vous pouvez également le trouver sur ma page Github, ainsi que le code complet de tous les exemples de ce tutoriel.\n#comprendre \n#comprendre"},{"id":"text-3","heading":"Text","content":"octet mac[] = \n 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED\n;\nIPAddress ip (192, 168, 1, 177);"},{"id":"text-4","heading":"Text","content":"Serveur EthernetServer (80);"},{"id":"text-5","heading":"Text","content":"void setup() \n Serial.begin (9600);\n while (! Série) \n ; // attend que le port série se connecte. Nécessaire pour le port USB natif uniquement\n "},{"id":"text-6","heading":"Text","content":" Ethernet.begin (mac, ip);\n server.begin ();\n Serial.print ("le serveur est à");\n Serial.println (Ethernet.localIP ());"},{"id":"text-7","heading":"Text","content":"boucle vide () {\n // écoute les clients entrants\n Client EthernetClient = server.available ();\n si (client) {\n Serial.println ("nouveau client");\n // une demande http se termine par une ligne vide\n boolean currentLineIsBlank = true;\n while (client.connected ()) \n if (client.available ()) \n char c = client.read ();\n Serial.write (c);\n if (c == ' n' && currentLineIsBlank) \n client.println ("HTTP / 1.1 200 OK");\n client.println ("Content-Type: text / html");\n client.println ("Connection: close");\n client.println ("Refresh: 5");\n client.println ();\n client.println ("");\n client.println ("");\n client.print ("Valeurs analogiques");\n pour (int analogChannel = 0; analogChannel <6; analogChannel ++) \n int sensorReading = analogRead (analogChannel);\n client.print ("entrée analogique");\n client.print (analogChannel);\n client.print ("est");\n client.print (sensorReading);\n client.println ("");\n \n client.println ("");\n Pause;\n \n si (c == ' n') \n currentLineIsBlank = true;\n sinon si (c! = ' r') \n currentLineIsBlank = false;\n \n \n \n retarder (1);\n // ferme la connexion:\n client.stop ();\n Serial.println ("client déconnecté");\n }\n}\nUne fois que vous avez téléchargé ce code sur l'Arduino, vous devez avoir un serveur Web très basique opérationnel.\nIl sera actualisé toutes les 5 secondes en mettant à jour les valeurs des broches analogiques de l’Arduino (il ne s’agira que de valeurs aléatoires, sauf si vous avez un appareil ou un capteur connecté à celles-ci).\nVous pouvez également surveiller le moniteur série pour toutes les lignes de débogage situées dans le code."},{"id":"text-8","heading":"Text","content":"Serveur Web Arduino avec une carte SD\nSi vous décidez de choisir la route de la carte SD pour le serveur Web Arduino, les fichiers HTML devront être créés sur votre ordinateur, puis copiés sur la carte SD avant d'être insérés dans l'Arduino.\nUn pro avec le chargement de la page Web depuis la carte SD est que vous pourriez avoir des pages plus complexes / lourdes sans avoir à écrire des centaines de client.write lignes. Cela permet également d'éviter toute situation de faible mémoire qui se produit généralement lorsque trop de code est exécuté sur l'Arduino.\n Initialisation de la carte SD\nAvant de pouvoir accéder à la carte SD, vous devez importer le package SD et l’initialiser dans la fonction de configuration. La vérification dans la fonction de configuration verra si elle peut accéder à la carte, sinon émettra une erreur dans le moniteur série.\nSerial.println ("La vérification de la carte SD est accessible ...");\n if (! SD.begin (4)) \n Serial.println ("ERROR - Échec d'initialisation de la carte SD!");\n revenir; // l'initialisation a échoué\n \n Serial.println ("SUCCESS - Carte SD initialisée.");\n Chargement du fichier\nLorsque vous êtes prêt à charger le fichier, utilisez simplement sd.open (nom du fichier) pour ouvrir le fichier. Utilisez une instruction if pour vous assurer que le fichier existe, puis parcourez le contenu du fichier jusqu'à la fin.\nwebPage = SD.open ("index.htm"); // ouvrir un fichier de page Web\nsi (page Web) {\n while (webPage.available ()) \n client.write (webPage.read ()); // envoyer une page Web au client"},{"id":"text-9","heading":"Text","content":"webPage.close ();\nVous trouverez ci-dessous un exemple de page Web chargée via la carte SD avec Ajax (expliqué ci-dessous) mettant à jour les éléments de la page."},{"id":"text-10","heading":"Text","content":"Effectuer des actions via la page Web (AJAX)\nIl se peut que vous souhaitiez contrôler un appareil ou un capteur via la page Web. Dans cette section, je vais examiner l'exécution de demandes et de mises à jour à l'aide d'AJAX. Cela signifie que vous ne verrez pas la page se charger encore et encore, mais elle sera toujours mise à jour si nécessaire.\nAJAX ou JavaScript et XML asynchrones est un peu trop compliqué à couvrir complètement dans ce tutoriel, mais je vais passer en revue les bases de l’utiliser sur Arduino. Vous devriez pouvoir adapter les exemples à vos besoins sans trop de problèmes.\n Exemple AJAX\nAJAX fonctionne en envoyant une requête au serveur. Le serveur vérifiera ensuite si la chaîne ajaxrefresh ou ledstatus existe dans l'en-tête (pour cet exemple). Si tel est le cas, il générera les données pertinentes et les renverra.\nLe JavaScript trouve ensuite l’élément HTML pertinent avec le bon identifiant puis remplace le innerHTML avec la réponse de la demande AJAX.\nL'exemple ci-dessous envoie une demande au serveur Web exécuté sur l'Arduino avec la variable GET. ajaxrefresh. Si le serveur renvoie des données, il remplacera le innerHTML de l'élément qui a l'identifiant données analogiques.\nCe script s'exécute toutes les 5 secondes mais peut être ajusté pour répondre à vos besoins."},{"id":"text-11","heading":"Text","content":"Fonctions Arduino Ajax\nLes deux fonctions ci-dessous sont appelées chaque fois que la demande AJAX correspondante parvient au serveur. C’est très simple: le premier lit les broches analogiques et renvoie les données correspondantes.\nLa deuxième fonction allumera ou éteindra la LED ROUGE en fonction de son état actuel. Il renverra également l'état de la DEL afin qu'AJAX puisse mettre à jour la valeur sur la page Web.\nvoid ajaxRequest (client EthernetClient)"},{"id":"text-12","heading":"Text","content":" pour (int analogChannel = 0; analogChannel <6; analogChannel ++) \n int sensorReading = analogRead (analogChannel);\n client.print ("entrée analogique");\n client.print (analogChannel);\n client.print ("est");\n client.print (sensorReading);\n client.println ("");\n "},{"id":"text-13","heading":"Text","content":"void ledChangeStatus (client EthernetClient)"},{"id":"text-14","heading":"Text","content":" int state = digitalRead (RED);\n Serial.println (état);\n si (état == 1) \n écriture numérique (ROUGE, FAIBLE);\n client.print ("OFF");\n \n autre \n digitalWrite (RED, HIGH);\n client.print ("ON");\n "},{"id":"text-15","heading":"Text","content":"AJAX avec HTML généré par l'Arduino\nL'exemple ci-dessous contient tout le code HTML et JavaScript entièrement généré par l'Arduino. JavaScript envoie des requêtes AJAX au serveur Arduino qui met à jour la page en fonction des résultats fournis.\nUn problème que j'ai remarqué en générant tout le code sur l'Arduino est qu'il a commencé à manquer d'espace et à donner des avertissements de stabilité. Cela pourrait être un problème si vous voulez des tonnes de capteurs et d'options sur la page. Vous voudrez peut-être envisager de stocker le code HTML sur une carte SD et de le récupérer à partir de là.\nboucle vide () {\n Client EthernetClient = server.available ();\n si (client) {\n Serial.println ("nouveau client");\n boolean currentLineIsBlank = true;\n while (client.connected ()) {\n if (client.available ()) {\n char c = client.read ();\n if (HTTP_req.length () < 120) \n HTTP_req += c; // save the HTTP request 1 char at a time \n Serial.write(c); \n if (c == 'n' && currentLineIsBlank)\n { \n // send a standard http response header\n client.println(\"HTTP/1.1 200 OK\");\n client.println(\"Content-Type: text/html\");\n client.println(\"Connection: close\");\n client.println();\n Serial.println(HTTP_req);\n if (HTTP_req.indexOf(\"ajaxrefresh\") >= 0) \n // lit l'état du commutateur et l'entrée analogique\n ajaxRequest (client);\n Pause;\n \n else if (HTTP_req.indexOf ("ledstatus")> = 0) \n // lit l'état du commutateur et l'entrée analogique\n ledChangeStatus (client);\n Pause;\n \n autre {\n client.println ("");\n client.println ("");\n client.println ("");\n // affiche la valeur de chaque broche d'entrée analogique\n client.print ("Valeurs analogiques");\n client.println ("Valeurs des entrées analogiques Arduino loading .....");\n client.println ("État des DEL Arduino");\n client.println ("");\n if (digitalRead (RED) == 1)\n client.println ("On");\n autre\n client.println ("Off");\n client.println (" | Changer le statut ");\n client.println ("");\n Pause;\n }\n }\n si (c == ' n') \n // tu commences une nouvelle ligne\n currentLineIsBlank = true;\n sinon si (c! = ' r') \n // vous avez un personnage sur la ligne en cours\n currentLineIsBlank = false;\n \n }\n }\n retarder (1);\n client.stop ();\n HTTP_req = "";\n Serial.println ("client déconnecté");\n }\n}\n AJAX avec des fichiers HTML sur une carte SD\nComme vous pouvez le voir ci-dessous, le résultat est beaucoup plus net en enregistrant simplement le code HTML dans un fichier de la carte SD. Cela devrait vous aider à garder votre script pour traiter principalement le code, en particulier si vous faites tout via AJAX et chargez le code HTML sur la carte SD.\nN'oubliez pas qu'il ne s'agit que de la boucle du code si vous souhaitez que la version complète soit dirigée vers ma page Github.\nboucle vide ()\n{\n Client EthernetClient = server.available ();\n si (client) {\n Serial.println ("nouveau client");\n boolean currentLineIsBlank = true;\n while (client.connected ()) {\n if (client.available ()) {\n char c = client.read ();\n if (HTTP_req.length () < 80)\n HTTP_req += c;\n if (c == 'n' && currentLineIsBlank) \n client.println(\"HTTP/1.1 200 OK\");\n client.println(\"Content-Type: text/html\");\n client.println(\"Connection: close\");\n client.println();\n if (HTTP_req.indexOf(\"ajaxrefresh\") >= 0) \n ajaxRequest (client);\n Pause;\n \n else if (HTTP_req.indexOf ("ledstatus")> = 0) \n ledChangeStatus (client);\n Pause;\n \n autre \n webPage = SD.open ("index.htm");\n si (page Web) \n while (webPage.available ()) \n client.write (webPage.read ());\n \n webPage.close ();\n \n Pause;\n \n si (c == ' n') \n currentLineIsBlank = true;\n sinon si (c! = ' r') \n currentLineIsBlank = false;\n \n \n }\n }\n retarder (1);\n client.stop ();\n HTTP_req = "";\n Serial.println ("client déconnecté");\n }\n}\n Dépannage\nComme avec tout projet Arduino, vous pouvez rencontrer quelques problèmes, les problèmes suivants ne sont que quelques-uns des problèmes rencontrés lors de la création de ce didacticiel."},{"id":"text-16","heading":"Text","content":"Je ne peux pas accéder à ma page Web:Vérifiez l’adresse IP et assurez-vous qu’elle n’entre pas en conflit avec un autre appareil du réseau. Essayez également d’envoyer une requête ping à l’adresse IP pour voir si vous obtenez une réponse.\nMa carte SD dit que c'est inaccessible: Maintenez le bouton éteint enfoncé, puis insérez la carte SD. Je trouve que cela règle généralement le problème.\nCSS: Vous pouvez inclure des feuilles de style CSS sur vos pages Web. Vous pouvez le faire en ligne ou dans l'en-tête entre les balises de style. C’est quelque chose que vous voudrez peut-être approfondir si vous n’avez pas fait beaucoup de CSS. Ce n’est vraiment nécessaire que si vous voulez que vos pages aient une belle apparence."},{"id":"text-17","heading":"Text","content":"Autres mises en œuvre\nVous pouvez utiliser un serveur Web de beaucoup plus de façons pour augmenter les fonctionnalités de votre circuit. Je vais rapidement énumérer quelques projets pour lesquels vous voudrez peut-être mettre en place une interface Web."},{"id":"text-18","heading":"Text","content":"Contrôle du ventilateur / de la température – Surveillez une salle de serveur, une serre, ou quelque chose de similaire où la chaleur et le flux d'air sont importants Vous pouvez ajouter des commandes pour allumer et éteindre les chauffages et les ventilateurs.\nCompteur – Utilisez un capteur de mouvement pour détecter les mouvements et comptez chaque fois que le capteur est déclenché. Vous pouvez appliquer cette même logique avec presque n'importe quel type de capteur."},{"id":"text-19","heading":"Text","content":"J'espère que ce tutoriel sur le serveur Web Arduino vous a aidé à créer un site Web où vous pourrez visualiser et interagir avec des données. Si vous avez des recommandations, des conseils ou avez remarqué que quelque chose ne va pas, n'hésitez pas à laisser un commentaire sur notre forum."},{"id":"text-20","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/Arduino-Web-Server-no-wm.jpg"},"relations":[{"rel":"canonical","href":"https://tutos-gameserver.fr/2019/10/12/serveur-web-arduino-de-base-pi-my-life-up-bien-choisir-son-serveur-d-impression/"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2019/10/12/serveur-web-arduino-de-base-pi-my-life-up-bien-choisir-son-serveur-d-impression/llm","type":"text/html"},{"rel":"alternate","href":"https://tutos-gameserver.fr/2019/10/12/serveur-web-arduino-de-base-pi-my-life-up-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}