Outils et machines nécessaires

	Fer à souder (générique)
	Fil à souder, sans plomb
	Flux de soudure, soudure

Applications et services en ligne

	Code Microsoft Visual Studio Facultatif
	Arduino IDE
	autodesk eagle Facultatif

À propos de ce projet

Présentation

Aujourd'hui, nous allons construire un appareil qui se connecte à Internet et permet à l'utilisateur de contrôler sa maison à distance via le wifi. nous utiliserons la carte Arduino (n'importe quel modèle fera bien le travail) avec le module wifi ESP8266-01 pour fabriquer cet appareil. Commençons !

Qu'est-ce qu'une maison intelligente ?

Scénario de travail

Le panneau de configuration

Nous construirons une simple page Web qui fonctionnera comme un panneau de contrôle pour l'utilisateur lui permettant de contrôler n'importe quel appareil électroménager connecté à notre système. Pour construire la page Web, nous utiliserons :

• HTML
• CSS
• Jquery

Le matériel embarqué

la page Web envoie des commandes à l'ESP8266-01 qui fonctionne comme un serveur Web connecté à la carte Arduino. Et selon les données entrantes, la carte Arduino effectuera certaines actions comme allumer l'ampoule, éteindre le téléviseur et dans cette partie, nous utiliserons :

• Arduino
• ESP8266-01

Premiers pas avec l'ESP8266-01

Comme nous l'avons indiqué précédemment, nous avons besoin de notre carte Arduino pour se connecter à Internet, mais la version Arduino Nano que nous utilisons aujourd'hui n'a pas cette fonctionnalité. Nous utiliserons donc le module wifi ESP8266-01 pour ajouter la fonction wifi à notre minuscule carte Arduino.

il existe de nombreux modèles de modules wifi ESP, lequel dois-je choisir ?! Eh bien, presque tous les modules wifi de la famille ESP feront bien le travail, mais chacun a ses propres caractéristiques et spécifications. Je vous encourage à examiner les spécifications et les fonctionnalités de chacune pour choisir celle qui convient le mieux à vos besoins.

Selon mes besoins, j'ai trouvé que l'ESP8266-01 est le plus adapté et c'est pour de nombreuses raisons. Il est très connu dans la communauté des makers. En conséquence, il a une communauté en ligne très solide qui vous permet de trouver une réponse à presque toutes les questions ou problèmes auxquels vous êtes confronté avec ce petit module génial. De plus, son prix est très bon marché (environ 1,5$).

En outre, il est très facile à utiliser avec la carte Arduino car il s'agit d'un module wifi série, il peut communiquer avec la carte Arduino via la communication série. Il a un microcontrôleur intégré, ce qui signifie que vous pouvez l'utiliser comme microcontrôleur autonome et module wifi dans un combo qui est super cool. Il a intégré deux GPIO. Seulement avec 1,5 $, vous obtiendrez toutes ces fonctionnalités, ce qui est super cool, en fait. Regardons de plus près ce module.

Brochage ESP8266-01

• VCC : connectez-vous à une source d'alimentation + 3,3 V. ne le connectez pas à une source 5V, cela risque de s'endommager .
• GND : -ve broche, connectez-le à la masse de votre circuit.
• CH_PD : la puce active la broche – Active HIGH. connectez-le à une valeur logique HAUT pour permettre au module de démarrer.
• RST : Broche de réinitialisation de la puce - Active LOW, lorsqu'elle est tirée LOW, elle réinitialise le module.
• GPIO0, GPIO2 : Broches d'entrée/sortie à usage général.
• Tx : connectez-vous au Rx du microcontrôleur (Arduino) pour établir une communication série.
• Rx : connectez-vous au Tx du microcontrôleur (Arduino) pour établir une communication série.

Configuration ESP8266-01

Comme nous l'avons indiqué précédemment, le module ESP8266-01 communique avec la carte Arduino via la communication série, ce qui signifie que nous devons le connecter aux broches série 0, 1 (Tx, Rx) de l'Arduino. Mais le problème ici est que ces broches seront occupées car nous utiliserons le moniteur série Arduino avec l'ESP8266-01 à des fins de débogage. Nous devons donc trouver deux autres broches de communication série pour les utiliser avec l'ESP8266-01.

Heureusement, Arduino a rendu cela facile. Il existe une bibliothèque appelée "SoftwareSerial" qui a été développée pour permettre la communication série sur d'autres broches numériques de l'Arduino, en utilisant un logiciel pour reproduire la fonctionnalité. Par exemple, en utilisant cette bibliothèque, je peux définir les broches 2, 3 (SoftwareSerial) comme Rx et Tx à côté des broches 0, 1 (Hardware Serial).

« SoftwareSerial » La bibliothèque fonctionne très bien tant que la vitesse de transmission est inférieure à 19 200 bauds. Mais, il y a un petit problème ici! le module wifi ESP8266-01 est programmé en usine pour communiquer à une vitesse de 115, 200 bauds, ce qui est en quelque sorte difficile à communiquer dans la bibliothèque "SoftwareSerial". Nous devons donc reprogrammer notre module wifi pour régler la vitesse de communication sur 9600 bauds, ce qui fonctionne plutôt bien avec la bibliothèque "SoftwareSerial". Pour ce faire, nous utiliserons quelques « commandes AT ».

Modification de la vitesse de communication ESP8266-01

Première étape :téléchargez un programme vide sur la carte Arduino

À cette étape, nous téléchargeons un code vide sur la carte Arduino. Juste pour être sûr que rien ne s'exécute en arrière-plan par la carte Arduino.

Deuxième étape : câblage de l'ESP8266-01 avec la carte Arduino

Pour reconfigurer l'ESP8266-01 et modifier la vitesse de communication (débit en bauds), nous utilisons les commandes AT. Simplement, les commandes AT sont des instructions utilisées pour contrôler les modems, les téléphones portables, les modules Bluetooth, les modules wifi, les modules GSM.

avec ces commandes, nous pouvons obtenir des informations de base sur notre téléphone mobile ou nos modules GSM, comme le nom du fabricant, le numéro de modèle, IMEI, etc. avec « A ». le préfixe "AT" ne fait pas partie des commandes elles-mêmes, il indique simplement au module le début des commandes.

Quelques commandes AT importantes

Numéro de commande « 4 » dépend de la version de votre firmware ESP8266-01, si cette commande ne fonctionne pas avec vous AT+CIOBAUD= Essayez celui-ci AT+UART_DEF=,8,1,0,0

Étape 1 :Ouvrez le moniteur série

Étape 2 :définissez la vitesse de communication sur 115 200 bauds

Comme nous l'avons indiqué précédemment, l'ESP vient du constructeur programmé pour communiquer à la vitesse 115, 200 bauds. Nous devons donc définir la vitesse de communication Arduino sur 115, 200 aussi pour la première fois seulement alors nous changerons cela plus tard. De plus, vous devez sélectionner "Both NL &CR" .

Étape 3 :Envoyez « AT » et attendez la réponse pour être sûr que le module ESP vous entend.

Étape 4 :Maintenant, modifiez la vitesse de communication de l'ESP8266-01

Mon firmware chargé du module ESP8266-01 est 1.6. et cette commande AT+UART_DEF=,8,1,0,0 fonctionne bien pour moi. Si cela ne fonctionne pas avec vous, essayez ceci AT+CIOBAUD= . S'il répond par « OK » maintenant, le débit en bauds de votre module ESP est passé de 115 à 200 baud à 9600 baud. FÉLICITATIONS!

Modifions la vitesse de communication du moniteur série à 9600 et envoyons à nouveau "AT" pour voir si le module ESP peut nous entendre à la nouvelle vitesse (9600) ou non.

VOIR! ça marche. l'ESP8266-01 peut désormais communiquer avec la carte Arduino à un débit de 9600 bauds au lieu de 115, 200 bauds.

Essayons maintenant de nous connecter au réseau Wifi

Une fois que vous appuyez sur Entrée, l'ESP8266-01 recherchera ce réseau et s'y connectera. Si le processus réussit, il renverra ce

WIFI CONNECTÉ

WIFI OBTENU IP

À ce stade, nous avons réussi à changer la vitesse de communication ESP8266-01 de 115, 200 bauds à 9600 bauds. Maintenant, nous devons construire le panneau de contrôle (page Web) que l'utilisateur utilisera pour contrôler ses appareils ménagers. Alors, construisons-le !

Qu'est-ce qu'Internet ?

En fait, Internet est un fil enterré sous le sol, il peut s'agir de fibre optique, de cuivre ou même d'un satellite, mais Internet n'est qu'un fil. Deux ordinateurs connectés à ce fil peuvent communiquer. Si l'ordinateur est connecté directement à ce fil, cela s'appelle un serveur et s'il n'est pas connecté directement à ce fil, cela s'appelle un client .

Serveur : est un ordinateur spécial qui exécute un système d'exploitation spécifique comme Apache, cet ordinateur spécial enregistre des pages Web, des fichiers, des bases de données sur son lecteur de disque. tout serveur connecté à Internet a une adresse IP unique comme 172.217.171.228 , l'adresse IP est comme un numéro de téléphone qui aide les gens à se trouver facilement. Étant donné que cette adresse IP n'est pas très facile à mémoriser pour les humains. Nous lui avons donc simplement donné un nom google.com (Nom de domaine).

Client : c'est un ordinateur comme celui que vous et moi utilisons tous les jours, il est connecté indirectement à Internet via un fournisseur de services Internet (FAI) et il possède également une adresse IP unique.

Scénario de travail

Simplement, cela commence par une demande envoyée depuis un navigateur Web (client) comme google chrome, firefox et se termine par la réponse reçue du serveur Web.

Vous avez entré l'URL du site Web makesomestuff.org dans un navigateur à partir d'un ordinateur (client), puis ce navigateur envoie une demande au serveur Web qui héberge le site Web, le serveur Web renvoie alors une réponse contenant une page HTML ou tout autre format de document au navigateur pour l'afficher ça.

Exactement, c'est ce que nous devons faire aujourd'hui dans notre projet. Nous devons envoyer une demande du navigateur Web (client) à l'ESP8266-01 (serveur Web) qui sont tous deux connectés au même réseau local. Cette demande contient des données qui indiquent à l'Arduino ce qu'il faut faire pour allumer ou éteindre une ampoule. Alors, construisons la page Web !

Construire la page Web

Pour construire notre page Web, nous devons traiter HTML, CSS, Javascript. si vous n'avez jamais entendu parler de ces noms auparavant, ne vous inquiétez pas, je vous ai eu.

HTML : Signifie « Langage de balisage HyperText », nous l'utilisons pour créer n'importe quelle structure principale de page Web. Comme ajouter des boutons, des images, des paragraphes, des en-têtes, des tableaux et bien d'autres éléments. il se compose d'une série d'éléments qui indiquent au navigateur comment afficher le contenu de la page Web. ces éléments sont représentés par ce qu'on appelle des balises.

CSS : Il signifie feuille de style en cascade. Après avoir construit la structure principale de la page Web, vous devez rendre cette structure agréable, voici CSS pour créer un style. c'est un langage qui décrit le style d'un élément HTML. il se compose de quelques sélecteurs et blocs de décélération.

Javascript : c'est un langage de programmation que nous utiliserons pour rendre la page Web plus interactive, comme l'ajout d'animations, de cartes et il nous permet de faire des choses complexes sur la page Web. Principalement, nous l'utiliserons aujourd'hui pour envoyer une requête HTTP du client (navigateur Web) au serveur Web (ESP8266-01) pour effectuer certaines actions comme allumer ou éteindre une ampoule.

Construire la structure de la page Web

Pour comprendre facilement l'explication à venir, je vous recommande de lire ce cool Introduction HTML .

Comme nous le voyons, notre panneau de contrôle est très simple, il contient deux en-têtes chacun a une taille différente, une image et deux boutons un pour allumer une LED et le second pour l'éteindre.

Code

      
 Smart Home Control Panel
 
Désolé mais Je suis un Meme Addict !
  
 LAMPE ALLUMÉE 
 LAMPE ÉTEINTE    

Explication du code

•  : déclaration définit que ce document est un document HMTL5.
•  : l'élément racine d'une page HTML.
•  : L'élément contient des méta-informations sur la page.

• Panneau de configuration de la maison intelligente

  Désolé mais je suis un accro aux mèmes !

  
  LAMPE ALLUMÉE
  LAMPE ÉTEINTE

  Explication du code

  Nous avons ajouté quelques lignes de code pour rendre notre page Web plus agréable. Nous avons ajouté style="background-color :seagreen ; color :seashell ; text-align :center ;" à l'intérieur du corps balise pour placer tout le contenu de la page Web au centre de la page et pour définir la couleur d'arrière-plan sur vert d'eau également pour définir la couleur de la police sur coquillage .

  De plus, nous avons ajouté style="margin:10px;" à l'intérieur des deux balises de bouton pour définir une marge de 10 pixels autour des quatre côtés de chaque bouton.

  Envoi d'une demande au serveur Web

  Pour comprendre facilement l'explication à venir, je vous recommande de lire ce cool Jquery introduction .

  Maintenant, après avoir construit notre structure de page Web et l'avoir stylisée, nous devons ajouter des fonctionnalités aux deux boutons que nous avons ajoutés plus tôt dans la page Web. nous avons besoin que lorsque l'utilisateur clique sur le bouton "LAMP ON", son navigateur envoie une demande contenant des données uniques au serveur (ESP8266-01) ces données uniques indiquent à l'Arduino d'allumer la lampe. La même chose avec le deuxième bouton "LAMP OFF" lorsque l'utilisateur clique dessus, le navigateur enverra une demande contenant des données uniques au serveur (ESP8266-01) ces données uniques indiquent à l'Arduino d'éteindre la lampe. Jetons un coup d'œil au code.

         
   Panneau de configuration Smart Home
   
  Désolé mais je suis un accro aux memes !
    
   LAMPE ALLUMÉE 
    LAMP OFF     

  Explication du code

  Tout d'abord, nous devons importer la bibliothèque Jquery dans notre code. Nous avons donc ajouté cette ligne dans la balise head .

  Toute la magie opère dans cette partie intéressante.

  • $(".button").click(function () {

  Lorsque l'utilisateur clique sur n'importe quel bouton associé à la classe « bouton » , déclenchez la fonction suivante.

  • var p =$(this).attr('id');

  Obtenir la valeur de l'attribut du bouton cliqué « id » et rangez-le dans le “p” variable.

  • pin :p

  Mettez la valeur de la variable "p" dans un dictionnaire (clé-valeur) sa clé est "pin" et la valeur est la valeur de la variable "p".

  • $.get("http://172.20.10.11:80/", { pin :p });});

  Ensuite, envoyez une requête GET au serveur Web dont l'adresse IP est "172.20.10.11". ce OBTENIR la requête contient la valeur de l'attribut id bouton appuyé.

  Si l'utilisateur a appuyé sur le bouton "LAMP ON", cette valeur d'identification sera 111, donc l'en-tête de la requête GET contiendra des données comme celle-ci pin=111 . regardez la figure suivante !

  

  À l'opposé, si l'utilisateur a appuyé sur le bouton « LAMP OFF », la demande contiendra ces données pin=110 .

  Logique du code

  Je sais que vous demandez maintenant pourquoi diable a-t-il choisi 111 et 110 Plus précisément? Ok, laisse-moi te répondre fam. En fait, le nombre 111 et 110 se divise en deux parties.

  • Première partie : est les deux premiers chiffres qui sont dans les deux cas seront "11", cela fait référence au numéro de broche Arduino sur lequel la charge que je dois contrôler est connectée.
  • Deuxième partie : est le troisième nombre qui varie entre 1 et 0 selon le bouton cliqué. Et cela fait référence à l'état de la broche (ON ou OFF).

  Dans le code Arduino, nous recevrons ces données et séparerons ces deux parties l'une de l'autre et enregistrerons chaque partie dans une variable différente, la première partie dans la variable pinNumber et la deuxième partie dans la variable pinState , alors nous écrirons cette simple ligne de code pour contrôler la charge connectéedigitalWrite(pinNumber, pinState);

  Connexion de la charge

  Maintenant, nous devons connecter la charge à la carte Arduino pour la contrôler. Avant de connecter un appareil haute tension comme le climatiseur ou même le téléviseur, nous devons tester notre circuit et le code avec des éléments basse tension comme des LED uniquement pour nous assurer que tout fonctionne bien. Voici le schéma de câblage

  

  Le câblage est assez simple, nous connectons la branche positive de la LED à la broche numérique Arduino 11, et la branche négative au GND via une résistance de 1k ohm.

  Code Arduino

  #include  // l'inclusion de la bibliothèque SoftwareSerial vous permettra d'utiliser le code PIN. 2,3 comme Rx, Tx. LogicielSérie esp8266(2,3); //définir le Rx ==> Pin 2; TX ==> Pin3. #define serialCommunicationSpeed ​​9600 // <=========définir une constante nommée "serialCommunicationSpeed" avec une valeur 9600. elle fait référence à la vitesse de communication série logicielle et matérielle (débit en bauds). #define DEBUG true //crée une constante nommée "DEBUG" et sa valeur est true. nous l'utiliserons plus tard. int LED rouge =12 ; //affectez une variable nommée "redLED" avec une valeur entière 12, elle fait référence à la broche sur laquelle la LED rouge est connectée. int blueLED =11 ; //affectez une variable nommée "blueLED" avec une valeur entière 11, elle fait référence à la broche sur laquelle la LED bleue est connectée. void setup() { pinMode(redLED,OUTPUT); //définir le numéro de broche 12 comme broche de sortie. pinMode (blueLED, SORTIE); //définir le numéro de broche 11 comme broche de sortie. digitalWrite (redLED, LOW); //éteindre la LED rouge au début du programme. digitalWrite (blueLED, HIGH); //allume la LED bleue au début du programme. Serial.begin(serialCommunicationSpeed); //commencer la communication série matérielle (0, 1) à la vitesse 9600. esp8266.begin(serialCommunicationSpeed); //commencer la communication série logicielle (2, 3) à la vitesse 9600. InitWifiModule(); //call this user-defined function "InitWifiModule()" to initialize a communication between the ESP8266 and your access point (Home Router or even your mobile hotspot). digitalWrite(blueLED,LOW); //after finishing the initialization successfully, turn off the blue LED (just an indicator). } void loop() //our main program, some fun are about to start) { if(esp8266.available()) //if there's any data received and stored in the serial receive buffer, go and excute the if-condition body. If not, dont excute the if-condition body at all. { if(esp8266.find("+IPD,")) //search for the "+IPD," string in the incoming data. if it exists the ".find()" returns true and if not it returns false. { delay(1000); //wait 1 second to fill up the buffer with the data. int connectionId =esp8266.read()-48; //Subtract 48 because the read() function returns the ASCII decimal value. And 0 (the first decimal number) starts at 48. We use it to convert from ASCI decimal value to a character value. esp8266.find("pin="); //Advance the cursor to the "pin=" part in the request header to read the incoming bytes after the "pin=" part which is the pinNumer and it's state. int pinNumber =(esp8266.read()-48)*10; //read the first Byte from the Arduino input buffer(i.e. if the pin 12 then the 1st number is 1) then multiply this number by 10. So, the final value of the "pinNumber" variable will be 10. pinNumber =pinNumber + (esp8266.read()-48); //read the second Byte from the Arduino input buffer(i.e. if the pin number is 12 then the 2nd number is 2) then add this number to the first number. So, the final value of the "pinNumber" variable will be 12. int statusLed =(esp8266.read()-48); //read the third byte from the Arduino input buffer. then save it inside the "statusLed" variable. At any case, it will be 1 or 0. digitalWrite(pinNumber, statusLed); //then turn the LED at "pinNumber" on or off depending on the "statusLed" variable value. Serial.println(connectionId); //print the "connectionId" value on the serial monitor for debugging purposes. Serial.print(pinNumber); //print the "pinNumber" value on the serial monitor for debugging purposes. Serial.print(" "); //print some spaces on the serial monitor to make it more readable. Serial.println(statusLed); //print the "statusLed" value on the serial monitor for debugging purposes. String closeCommand ="AT+CIPCLOSE="; //close the TCP/IP connection. closeCommand+=connectionId; //append the "connectionId" value to the string. closeCommand+="\r\n"; //append the "\r\n" to the string. it simulates the keyboard enter press. sendData(closeCommand,1000,DEBUG); //then send this command to the ESP8266 module to excute it. } } } /****************************************************************************************************************************************************************************************** * Name:sendData * Description:this Function regulates how the AT Commands will ge sent to the ESP8266. * * Params:command - the AT Command to send * - timeout - the time to wait for a response * - debug - print to Serial window?(true =yes, false =no) * * Returns:The response from the esp8266 (if there is a reponse) */ String sendData(String command, const int timeout, boolean debug) { String response =""; //initialize a String variable named "response". we will use it later. esp8266.print(command); //send the AT command to the esp8266 (from ARDUINO to ESP8266). long int time =millis(); //get the operating time at this specific moment and save it inside the "time" variable. while( (time+timeout)> millis()) //excute only whitin 1 second. { while(esp8266.available()) //is there any response came from the ESP8266 and saved in the Arduino input buffer? { char c =esp8266.read(); //if yes, read the next character from the input buffer and save it in the "response" String variable. response+=c; //append the next character to the response variabl. at the end we will get a string(array of characters) contains the response. } } if(debug) //if the "debug" variable value is TRUE, print the response on the Serial monitor. { Serial.print(response); } return response; //return the String response. } /****************************************************************************************************************************************************************************************** * Name:InitWifiModule * Description:this Function gives the commands that we need to send to the sendData() function to send it. * * Params:Nothing. * * Returns:Nothing (void). */ void InitWifiModule() { sendData("AT+RST\r\n", 2000, DEBUG); //reset the ESP8266 module. //delay(1000); sendData("AT+CWJAP=\"PUT YOUR SSID\",\"PUT YOUR PASSWORD\"\r\n", 2000, DEBUG); //connect to the WiFi network. delay (3000); sendData("AT+CWMODE=1\r\n", 1500, DEBUG); //set the ESP8266 WiFi mode to station mode. retard (1000); sendData("AT+CIFSR\r\n", 1500, DEBUG); //Show IP Address, and the MAC Address. retard (1000); sendData("AT+CIPMUX=1\r\n", 1500, DEBUG); //Multiple conections. retard (1000); sendData("AT+CIPSERVER=1,80\r\n", 1500, DEBUG); //start the communication at port 80, port 80 used to communicate with the web servers through the http requests. }  

  code explanation

  the code is pretty straightforward, we implemented two different functions InitWifiModule() and sendData()

  The sendData() function job is regulating how the AT commands will get sent to the ESP8266-01 module.

  the InitWifiModule() function job is to provide the sendData() function the AT commands that we need to send to the ESP8266-01.

  in the loop() function we read the income HTTP request header and search for the “+IPD, ” which means that the request has successfully arrived, then we read the pin value which it will be “111” if the user clicked the “LAMP ON” button and “110” if the user clicked “LAMP OFF” button.

  Don’t forget to put your wifi SSID and Password in the Arduino code line no. 103 sendData("AT+CWJAP=\"PUT YOUR SSID\",\"PUT YOUR PASSWORD\"\r\n", 2000, DEBUG);

  For more code explanation please read the comments in the code, it’s well documented

  Comment ça marche

  After uploading the code to the Arduino board, open the Serial monitor and read the responses that the ESP module is sending.

  

  at the beginning of the program, if you see something like the previous figure with “OK” at the end of the page, it means that the ESP8266-01 module is successfully connected to your wifi (Access point) and got an IP and MAC address. Now, you can open your fancy web page and try to control some stuff 😉

  

  But, if you see something like the previous figure with a “FAIL” or “ERROR” at the end of the page, it means that your ESP module cant connect to your wifi (Access point) for some reasons, try to check if entered the right SSID and password for your network.

  Adding a High Voltage Load

  After we tested our code and got sure that everything is working like a charm, we need to replace this boring LED with a High voltage load like an air conditioner, TV or a light bulb. But to control all of these high voltage appliances we have to deal with relays .

  

  What’s and why relays? Ok, the relay is a mechanical switch, which is toggled on or off by energizing a coil. it’s mainly used to control a high powered circuit using a low power signal (5V or 0V). So we can control a high powered device like an air conditioner or an AC lamp turning it on or off only by a 5V or 0V signal. Which is amazing!

  

  The Two-channel relay module has two control pins(IN1, IN2) these pins should get connected to two Arduino digital pins to control the state of the two coils, closes or opens the load circuit.

  

  At the opposite side of the relay module, the COM(common) should get connected to one end of the load. the other end of the load is either connected to the NC(Normally Close) or NO(Normally open) , if connected to the NO the load remains Disconnected before trigger and vice versa.

  Wiring Diagram

  

  As you see, we are using a two-channel relay module that gives us the ability to control two different AC loads. We are connecting the first relay at digital output pin11(Arduino) and the second relay to digital output pin 12(Arduino)

  We will make a small modification to our web page, we will add another two buttons(ON and OFF) to control the second connected load.

         
   Smart Home Control Panel
   
  Sorry But I'm a Meme Addict!
    
   Blue LED ON Blue LED OFF 
    Red LED ON Red LED OFF     

  

  How It Works

  Just like the last trial, You upload the Arduino code to the board (if not uploaded yet) and open the serial monitor and make sure that your ESP module is connected successfully to your access point and got an IP and MAC address.

  Then open your fancy web page and start controlling your stuff 😉

  Make it more professional!

  What about transferring our breadboard circuit to a professional printed circuit board (PCB) to make our project more rigid and solid, I designed the project circuit using Autodesk Eagle software. all the PCB files are open-source you can access it from this link:https://www.pcbway.com/project/shareproject/IoT_Using_Arduino_and_ESP8266_01.html

  Because we love open source 😉

  

  You can order your own PCB From PCBWay company these guys have a very good reputation in this field and they ship to more than 170 countries around the world with reasonable prices. all you have to do is to open the project PCB files link and press “Add to cart”. That’s it!

  

  Dépannage

  if your ESP Module is successfully connected to your access point but there is no action happens when you click the web page buttons

  • make sure that you are sending the request from your web browser from port 80(HTTP). example:

  $.get("http://192.168.1.4:80/"

  • make sure that your PC or Laptop and the ESP module is connected to the same Access point.
  • In Jquery code, make sure that you wrote the right ESP module IP address.
  • Make sure that you are connecting the load at Arduino digital pins 11 and 12.
  • Don’t forget to save the Web page code file after any change or modification, and reload the web page in the web browser after any code modification to take effect.

  Final

  We are done! in today’s tutorial, we learned how to build a simple web page using HTML, CSS, and jquery. Also, we learned how to control an AC load wirelessly from a web-based control panel, and how to use the awesome ESP8266-01 Wifi module with the Arduino board.

  you wanna see more Tutorials and open source projects you can also visit my blog www.makesomestuff.org

  Lastly, if you have any questions drop it in the comments section below, I will be more than happy to hear from you 😉