Créez un site Web ESP8266 pour contrôler jusqu'à 8 relais sur notre contrôleur de relais XC4418 8 canaux

Utilisez des relais sans effort avec cette simple configuration en deux parties! Connectez simplement n'importe quel périphérique que vous souhaitez tester ou activer au module de relais; Utilisez ensuite l'application de téléphone intégrée pour les contrôler quand vous le souhaitez. Définir les relais pour basculer, temporisation ou activation momentanée; Et même les mettre à certains moments de la journée. Idéal pour les kits d'arrosage automatiques, les dispositifs de test, le contrôle des lumières ou toute autre charge jusqu'à 10 ampères.
| Qté | Code | Description |
|---|---|---|
| 1 | Xc4418 | Contrôleur de relais à 8 canaux |
| 1 | Xc4411 | Uno avec le wifi |
Comme toujours, vous devriez faire installer la bibliothèque ESP8266 dans votre outil Arduino IDE, ainsi que le plugin de téléchargement de données ESP8266. Sinon, vous pouvez obtenir l'un ou l'autre par le bas:
Ce système est une configuration assez simple. Comme nous le savons, le XC4411 est un UNO et ESP combiné en une seule configuration de carte. La partie ESP gérera l'exécution d'un simple type de programme "web-app", qui communiquera ensuite avec l'UNO.

La partie uno du code sera simplement responsable de l'activation et du contrôle des relais une fois qu'il aura reçu une commande.
XC4411 relie à la fois l'UNO et l'ESP via le port série, ce qui signifie que nous devrons simplement faire un Serial.read() et Serial.write() pour communiquer entre les deux. Pour garder les choses simples, nous allons garder le flux de données dans un sens, donc l'ESP ne saura jamais à quoi ressemblent les relais, ce qui signifie que l'application Web ne sera pas en mesure de montrer à quoi ressemblent les relais réels, mais nous pouvons faire de simples suppositions.
Il s'agit d'une simple construction en un module, grâce à la simplicité de la carte XC4411.

Connectez simplement 5V et GND aux deux broches supérieures de la carte de relais (vous devriez constater qu'ils sont étiquetés VCC et GND ). Connectez ensuite tous les autres IN# aux broches numériques de l'UNO. Pour garder les choses simples, nous gardons les épingles en ordre, à partir de Pin 2 et passant à Pin 9 - cela correspondra à ce qui se trouve sur la carte de relais, à partir du côté inférieur.
C'est une idée raisonnable de garder l'onglet vert entre les broches COM et GND sur la carte de relais.
Sur le XC4411, vous devriez trouver la rangée de commutateurs de trempette. Ceci est utilisé pour définir le mode dans lequel le périphérique se trouve.

(Le nôtre est un peu sale en raison de la fréquence à laquelle nous l'utilisons).
Pour cette section, nous voulons programmer le côté uno des choses, alors utilisez un stylo ou autrement pour définir les interrupteurs de trempette en tant que tels:
| Épingle | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|---|---|---|---|---|---|---|---|---|
| État | DÉSACTIVÉ | DÉSACTIVÉ | SUR | SUR | DÉSACTIVÉ | DÉSACTIVÉ | DÉSACTIVÉ | DÉSACTIVÉ |
Ouvrez ensuite la partie uno/uno.ino du code dans l'éditeur Arduino IDE et téléchargez comme d'habitude.
Vous devriez être en mesure de tester ce côté des choses, en ouvrant le Serial Monitor et en définissant les options pour:
115200 baudsTapez ensuite une commande telle que:
>4a
Si vous souhaitez vraiment déboguer le code, vous devriez trouver certains définies sur les lignes 10 et 11 du code UnO. Celui sur la ligne 10 sortira du texte similaire à ci-dessous.

Les autres définissent (sur la ligne 11) ne feront rien et allumera simplement le relais. Vous voulez que la ligne 11 soit définie lorsque vous finalisez le projet.
Réglez les commutateurs de trempette comme ci-dessous.
| Épingle | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|---|---|---|---|---|---|---|---|---|
| État | DÉSACTIVÉ | DÉSACTIVÉ | DÉSACTIVÉ | DÉSACTIVÉ | SUR | SUR | SUR | DÉSACTIVÉ |
Pour cette partie, vous devez ouvrir le code ESP / ESP.ino dans l'ide Arduino et modifier le type de carte en carte Generic ESP8266 .
Modifiez la "taille Flash" du programme à 4M (3M SPIFFS) - cela fera partie de certains code afin que nous puissions intégrer notre data/ dossier. Vous trouverez notre code de site Web dans le dossier de données, que nous voulons tout mettre sur l'ESP. Vous trouverez ci-dessous une capture d'écran de nos paramètres.

Tout d'abord, téléchargez le code comme d'habitude. Si vous appuyez sur Télécharger et que vous constatez que l'IDE ne parvient pas à télécharger, ou si vous obtenez une sortie comme ceci:

Cela signifie simplement que l'IDE attend le redémarrage de l'ESP. Appuyez sur le bouton RESET de la carte lorsque vous voyez l'iDE Afficher ce message. Il devrait télécharger sans accroc.
Une fois le code terminé, utilisez l' ESP Data Upload Tool (comme mis en surbrillance dans l'image ci-dessus) pour télécharger notre site Web sur l'ESP. Vous devrez appuyer sur le bouton de réinitialisation similaire auparavant. Une fois programmé, vous pouvez éteindre le commutateur Dip-Switch 7 et ouvrir le moniteur série pour voir la sortie de l'ESP lorsque vous vous connectez au hotspot "Contrôleur de relais" et accédez à http://192.168.4.1 - ou continuez simplement.
Semblable au code UnO, nous avons un autre tas de définies pour le débogage. Vous pouvez activer ou désactiver les messages de débogage de cette façon.
Quelques choses importantes à retenir, lors du changement de code:
Flash size identique. Si vous le modifiez, vous devrez re-télécharger à la fois le code et le site Web.Une fois les deux moitiés programmées, passez enfin le DIP passe à ce qui précède.
| Épingle | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
|---|---|---|---|---|---|---|---|---|
| État | SUR | SUR | DÉSACTIVÉ | DÉSACTIVÉ | DÉSACTIVÉ | DÉSACTIVÉ | DÉSACTIVÉ | DÉSACTIVÉ |
Cela reliera la série de l'ESP à la série de l'UNO. Maintenant, il n'est alimenté que par USB et le moniteur série ne sera connecté à rien.
Ouvrez le WiFi de votre téléphone et redémarrez le XC4411 - vous devez constater qu'il existe un nouveau réseau sans fil appelé "Relay Controller". Connectez-vous, puis ouvrez le navigateur et allez sur: http://192.168.4.1

Le site Web n'est pas grand-chose à regarder, mais cela fonctionne. Vous devriez pouvoir appuyer sur les boutons et trouver les relais activés et désactivés. Si vous savez comment faire en sorte qu'un site Web soit beau et que vous souhaitez avoir une meilleure apparence, activez un nouveau data/ dossier et soumettez-le dans l'onglet GiTHub Issues, ou fournissez le repo et soumettez une demande de traction.
Si vous trouvez que certaines choses ne fonctionnent pas, connectez votre ordinateur au réseau (alternativement, connectez l'ESP à votre réseau domestique) et ouvrez le site Web de votre ordinateur. Vous devriez être en mesure d'ouvrir "Chrome Inspector Tool" et de trouver une console qui sortira des messages.
Cependant, un moyen sûr de tester ce qui se passe consiste à connecter le moniteur en série à l'appareil (avec les interrupteurs de trempette correspondant à la section que vous testez) et tester chaque partie du code comme vous en avez besoin.
>3a allume le relais 3, et >3d éteint le relais 3.>1a sur le moniteur série. De toute évidence, le site Web a besoin de travail, mais un certain nombre de changements peuvent se produire à ce projet. Vous devriez encore avoir des épingles gratuites et tout ce que vous auriez à faire pour ajouter quelque chose est:
Vous trouverez ci-dessous quelques segments de code à expliquer.
Sur le site Web se trouve un bouton sur lequel nous utilisons pour allumer le relais, il s'agit d'un élément simple <button id='3' class='relay'></button> qui a l'ID de quelle broche c'est (pas entièrement, mais assez proche pour cet exemple).
Ensuite, nous avons du code JavaScript (simplifié):
$ ( "button.relay" ) . on ( "click" , function ( ) {
//do this when a button with the class 'relay' is clicked
} ) ; Dans cette fonction, nous fetch() une nouvelle page Web, qui pointe vers /relay , et si l'état de retour est OK, nous ajoutons la classe "ISON" au bouton:
fetch ( "relay?relay=3&mode=activate" ) . then ( response => {
if ( response . status == 200 ) {
button . addClass ( "isOn" ) ;
}
} ) ; Cela signifie que le site Web essaiera d'accéder à une nouvelle page Web à http://192.168.4.1/relay avec les paramètres de ?relay=3&mode=activate . Voyons le code ESP:
// firstly, set the handler function in the setup():
server.on( " /relay " , handleRelayCommand);
// ... later ...
void handleRelayCommand (){
String relayNumber = server. arg ( " relay " );
String mode = server. arg ( " mode " );
// ...
} Le Command server.arg("relay"); Obtient simplement tout ce que l'argument "relais" a été défini. Dans notre demande d'origine : ?relay=3&mode=activate ce sera la chaîne "3" . De même, l'argument du mode est défini sur une chaîne "activate"
Nous faisons alors simplement quelques chèques, trouvons le relais auquel le "3" correspond et si "activate" signifie que nous allumons le relais et envoyons cela comme commande à l'UNO:
Serial.write( ' > ' ); // start of command
Serial.write( ' 3 ' ); // relay 3
Serial.write( ' a ' ); // activate, or turn onCela sera interprété par l'UNO, qui allumera ensuite le relais:
Dans l'UNO.ino (encore une fois, simplifié):
while (Serial.read() != ' > ' ) // do nothing until we get '>'
continue ;
char relay = Serial.read(); // next character is relay;
char mode = Serial.read(); // next character is mode;
// ... do some checks, turn char into int, see if it's valid, etc.
digitalWrite (theRelay, theMode); Une chose à noter est que le flux de données n'est qu'une direction dans ce code, il n'y a pas de Serial.write() sur l'UNO pour être Serial.read() par l'ESP.