Ampoule pilotée par le web avec Arduino : Guide étape par étape

Composants et fournitures

	Arduino UNO	×	1
	PHPoC Shield 2 pour Arduino	×	1
	PHPoC carte relais 4 ports	×	1
	Ampoule	×	1

À propos de ce projet

Le contrôle via le web est devenu la norme. Ce projet simple montre comment créer une application qui contrôle une ampoule via une interface web.

Ce n'est pas nouveau, mais l'originalité réside dans la simplicité : quelques étapes suffisent. Quiconque a des bases en programmation web peut créer des applications de contrôle/surveillance.

Vous pouvez voir la démo ici :

Composants matériels

D'abord, configurez le matériel : Arduino Uno, shield PHPoC WiFi et carte relais PHPoC Arduino.

Fonctionnement

Grâce au shield PHPoC, l'Arduino devient un serveur web / serveur WebSocket. Il faut :

+ Code côté client : fournit une interface utilisateur web pour contrôler l'ampoule. L'UI envoie les commandes au serveur (Arduino) et affiche l'état reçu en réponse. Le code source de la page web doit être téléversé sur le shield. À la réception d'une requête HTTP du navigateur (client web), le shield (serveur web) envoie les fichiers web interprétés.

+ Code côté serveur : contrôle l'ampoule selon les données envoyées par le navigateur. Le code tourne sur l'Arduino : boucle, vérifie les requêtes du client web pour activer/désactiver le relais, puis renvoie l'état de l'ampoule.

Dans ce projet, j'ai créé un élément SVG pour afficher l'ampoule et un bouton pour envoyer la commande. Le navigateur et le serveur communiquent via WebSocket, adapté aux applications temps réel.

Plus vous soignez l'UI, meilleure sera l'apparence. Mais pas de panique : de nombreuses ressources gratuites sont disponibles en ligne pour l'interface.

Merci de votre lecture :D.

En savoir plus sur les relais dans ce tutoriel.

Code

• remote_led.php
• remoteLed.ino

remote_led.php PHP

Code côté client. À téléverser sur le shield PHPoC.

<html> <head> <title> <? echo system("uname -i") ?> </title> <meta content="initial-scale=0.7, maximum-scale=1.0, minimum-scale=0.5, width=device-width, user-scalable=yes" name="viewport"> <style> body { text-align: center; font-family: verdana, Helvetica, Arial, sans-serif, gulim; background: #C2CCD0; } h2 { font-size: 16px; line-height: 25px; } body.active { background: #E2ECF1; } #on { opacity: 0; } .active #on { opacity: 1; } .light-bulb { width: 250px; height: 400px; margin-top: 100px } .container { margin: auto; width: 250px; } .switches { width: 150px; height: 65px; background-color: #38434A; font-size: 24px; margin: auto; border-radius: 10px; color: white; cursor: pointer; letter-spacing: 0.2px; line-height: 65px; text-align: center; user-select: none; transition: none; } </style> </head> <body> <div class="container"> <div class="light-bulb"> <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 275.3 413.3" enable-background="new 0 0 275.3 413.3" xml:space="preserve"> <g> <path fill="#E2ECF1" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8 c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /> </g> <g id="on"> <path fill="#FFDB55" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8 c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /> </g> <g> <path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M168.5,375.5h-61.7c-8.9,0-16-7.2-16-16 v-55.8h93.8v55.8C184.6,368.3,177.4,375.5,168.5,375.5z" /> <path fill="#F1F2F2" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M151.2,401.5h-27.1c-3.9,0-7-3.2-7-7v-19 h41.1v19C158.2,398.4,155.1,401.5,151.2,401.5z" /> <line fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" x1="184.6" y1="339.6" x2="90.8" y2="339.6" /> <path fill="none" stroke="#38434A" stroke-width="19.1022" stroke-miterlimit="10" d="M137.7,13.7C67.2,13.7,10,70.9,10,141.4 c0,58.3,72.8,118.2,79.9,162.3h47.8h47.8c7.1-44,79.9-103.9,79.9-162.3C265.3,70.9,208.2,13.7,137.7,13.7z" /> </g> <g> <path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M207.1,89.5 c-12.3-16.1-28.4-29.1-46.9-37.8" /> <path fill="#FFDB55" stroke="#FFFFFF" stroke-width="21.0124" stroke-linecap="round" stroke-miterlimit="10" d="M225,121.4 c-0.8-2.2-1.8-4.4-2.7-6.5" /> </g> </svg> </div> <div class="switches"> Switch </div> </div> <br> <h2 id="ws_state"></h2> </body> <script> var is_on; var ws; var button = document.querySelector('.switches'); var ws_state = document.getElementById("ws_state"); function init() { button.addEventListener("click", toogleLed); connect(); is_on = 0; } function connect() { if (ws == null) { var ws_host_addr = "<? echo _SERVER("HTTP_HOST") ?>"; if ((navigator.platform.indexOf("Win") != -1) && (ws_host_addr.charAt(0) == "[")) { ws_host_addr = ws_host_addr.replace(/[\[\]]/g, ''); ws_host_addr = ws_host_addr.replace(/:/g, "-"); ws_host_addr += ".ipv6-literal.net"; } ws = new WebSocket("ws://" + ws_host_addr + "/remote_led", "text.phpoc"); ws_state.innerHTML = "Connecting. Please wait!"; ws.onopen = ws_onopen; ws.onclose = ws_onclose; ws.onmessage = ws_onmessage; } else ws.close(); } function ws_onopen() { ws_state.style.display = "none"; display_lightbulb(); } function ws_onclose() { button.style.backgroundColor = "#C2C2C2"; ws_state.style.display = ""; ws_state.innerHTML = "<span style='color: gray'>Can not connect to Arduino Board. <br> Please check again and reload this page!</span>"; ws.onopen = null; ws.onclose = null; ws.onmessage = null; ws = null; is_on = 0; display_lightbulb(); } function ws_onmessage(e_msg) { e_msg = e_msg || window.event; is_on = parseInt(e_msg.data); display_lightbulb(); } function toogleLed() { if (is_on) ws.send("0"); else ws.send("1"); } function display_lightbulb() { document.body.className = (is_on) ? "active" : ""; } window.onload = init; </script> </html>

remoteLed.ino Arduino

Code côté serveur gérant le contrôle I/O basé sur les données WebSocket du navigateur.

#include <Phpoc.h> #include <PhpocExpansion.h> #define ON '1' #define OFF '0' byte expansionId = 1; ExpansionRelayOutput relay(expansionId, 0); PhpocServer server(80); void setup() { Serial.begin(9600); while(!Serial) ; Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); server.beginWebSocket("remote_led"); Serial.print("WebSocket server address : "); Serial.println(Phpoc.localIP()); Expansion.begin(); Serial.println(relay.getName()); } void loop() { PhpocClient client = server.available(); if (client) { if (client.available() > 0) { char thisChar = client.read(); switch(thisChar) { case OFF: Serial.println("Turn LED OFF"); relay.off(); server.write(OFF); break; case ON: Serial.println("Turn LED ON"); relay.on(); server.write(ON); break; } } } }