Étape 2: Le serveur Web Client
Le client du serveur web est la partie qui communique avec le serveur web. Il est également l’interface avec laquelle nous allons interagir. Vous pouvez l’exécuter sur votre navigateur ou télécharger comme une application web.
Télécharger le fichier index.html de ici[edit ici]
J’ai écrit ce fichier HTML simple dans l’IDE de XDK Intel. Il est similaire à l’écart de téléphone, où vous pouvez concevoir des app utilisant HTML5/Javascript pour faire des hybrides apps pour fonctionner sur la plupart des plateformes de smartphone. Toutefois, ici, je n’a pas construit une application autonome. Plus d’informations sur XDK ici. Il y a aussi un goût d’Ito, pour ceux d'entre vous désireux d’utiliser Node.JS etc..
Vous pouvez utiliser votre éditeur de texte préféré pour éditer le script html. Je préfère xdi parce que je suis un débutant et il donne des conseils lors de la rédaction de codes.
REMARQUE
Si vous exécutez esp connecté à votre réseau ou dans un point d’accès, le client du serveur web doit être exécuté sur l’ordinateur/smartphone connecté au même réseau que l’ESP.
Le code a expliqué
Tout d’abord, il faut insérer l’adresse ip du serveur web dans l’espace réservé de texte d’entrée. L’adresse ip peut provenir de serial monitor lorsque esp exécute le code de l’esquisse, ou vous pouvez le trouver entre votre routeur. Si vous exécutez esp8266 comme point d’accès, l’adresse ip est 192.168.4.1. Lorsque je me connecte à mon réseau domestique, ip d’esp est 192.168.1.100. Donc je devrais d’entrée :
WS://192.168.1.100:81/
ou si je lance access point, ws://192.168.4.1:81/
le 81 est le port auquel le serveur écoute.
Il y a deux boutons : Blink et LED Réinitialiser. Clignotement led envoie "LED" lorsque vous appuyez sur et réinitialiser led envoie RESET". Ces chaînes sont interprétées par le code que nous avons écrit sur le croquis et clignote a conduit 13 ou réinitialise toutes les broches de LED des valeurs en conséquence.
Il y a 3 curseurs, chacun contenant une valeur minimale 0 et 255 max. Chaque curseur R, G, B envoie respectivement les valeurs x, y, z qui est reçue par le serveur web esp et tourne ensuite la valeur de LED rouge, verte ou bleue en conséquence.
Si vous utilisez le client depuis un smartphone, vous pouvez également essayer de modifier la valeur de code pin en utilisant l’accéléromètre du téléphone. Toutefois, cela peut ne pas fonctionner sur tous les navigateurs de smartphone.
J’ai inclus cette fonction pour illustrer l’utilisation de capteurs déjà dans les smartphones.
Dans mon précédent projet, j’ai déjà décrit l’utilisation du GPS pour envoyer la valeur de smartphone à esp. ici
Capteurs
Vous pouvez écrire votre propre code pour utiliser des capteurs de smartphone.
Ici j’ai utilisé le DeviceOrientationEvent. Vous pouvez utiliser navigator.geolocation pour les valeurs GPS.
Pour plus d’informations, lire ici https://developer.mozilla.org/en-US/docs/Web/API/D...
Les boutons à côté de chaque nom de l’axe lorsque vous cliquez sur commence à écouter du changement dans l’orientation de l’appareil.
Le bouton radio à côté de lui envoie la valeur d’esp8266.
Webapp
Vous pouvez également télécharger le html d’index comme une application web et y accéder depuis un smartphone connecté au même réseau qu’esp8266.
Voici un exemple. http://rahul2704.github.IO
Pour obtenir des instructions sur la façon de mettre en place, la tête ici, il est très facile
