Arduino - Contrôler l'ampoule via le Web

À propos de ce projet

Le contrôle via le Web est devenu une norme de nos jours. Dans ce projet simple, je vais vous montrer comment créer une application qui contrôle une ampoule via le Web.

Ce n'est sûrement pas quelque chose de nouveau, mais ce que vous pouvez voir, c'est que le contrôle basé sur le Web ne peut prendre que quelques étapes pour le faire vous-même. Toute personne ayant des connaissances en programmation Web peut créer des applications Web pour contrôler/surveiller des appareils.

Vous pouvez voir la démo ici :

Composant matériel

La première consiste à configurer le matériel. Ici, j'utilise une carte Arduino Uno, un PHPoC WiFi Shield et une carte relais PHPoC Arduino.

Comment ça marche

Ensuite, il s'agit de la partie "basée sur le Web". Combinée à PHPoC Shield, la carte Arduino est devenue un serveur Web/serveur WebSocket. Donc, en gros, nous avons besoin de :

+ Code côté client :fournir une interface utilisateur Web pour contrôler l'ampoule. L'interface utilisateur doit permettre aux utilisateurs d'envoyer la commande de contrôle au serveur Web (carte Arduino). L'interface utilisateur affiche également l'état de l'ampoule envoyée dans la réponse du serveur. Le code source de cette page Web doit être téléchargé sur le bouclier. Lors de la réception de la requête HTTP du navigateur Web (client Web), le bouclier (serveur Web) enverra les fichiers Web interprétés au navigateur Web.

+ Code côté serveur :contrôler l'ampoule en fonction des données envoyées par le navigateur Web. Le code est exécuté sur la carte Arduino et le flux n'est rien d'autre qu'une boucle, vérifiez s'il y a une demande du client Web afin de configurer le relais pour allumer/éteindre l'ampoule, puis envoyer l'état de l'ampoule au navigateur Web .

Dans ce projet, j'ai créé un élément SVG pour afficher l'ampoule et un bouton pour envoyer la commande de contrôle depuis le Web. Le navigateur Web et le serveur Web communiquent entre eux via WebSocket. La connexion WebSocket convient aux applications en temps réel.

Plus vous consacrez d'efforts à la création de l'interface utilisateur, meilleure sera son apparence. Mais ne vous inquiétez pas, il existe des tonnes de ressources de partage disponibles sur Internet, vous pouvez donc trouver du code source gratuit et sympa pour l'interface utilisateur au lieu de faire tout le travail de programmation par vous-même.

Merci d'avoir lu :D.

En savoir plus sur le relais dans ce tutoriel

Code

• remote_led.php
• remoteLed.ino

remote_led.phpPHP

    
 
  
 
 Commutateur 
 
 
 

remoteLed.inoArduino

#include #include #define ON '1'#define OFF '0'byte expansionId =1;ExpansionRelayOutput relay(expansionId, 0);PhpocServer server(80);void setup() { Serial.begin(9600); while(!Série); // initialiser PHPoC [WiFi] Shield :Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); //Phpoc.begin(); // démarre le serveur WebSocket server.beginWebSocket("remote_led"); // affiche l'adresse IP de PHPoC [WiFi] Shield sur le moniteur série :Serial.print("Adresse du serveur WebSocket :"); Serial.println(Phpoc.localIP()); Expansion.begin(); // obtenir le nom et l'imprimer sur Serial.println(relay.getName()); }void loop() { // attend un nouveau client :PhpocClient client =server.available(); if (client) { if (client.available()> 0) { // lit un octet entrant du client :char thisChar =client.read(); switch(thisChar) { case OFF:Serial.println("éteindre la LED"); relais.off(); server.write(OFF); Pause; case ON :Serial.println ("Allumer la LED" ); relayer sur(); server.write(ON); Pause; } } }}