Contrôler un relais via un navigateur web

Précédemment, nous avons vu comment monter le circuit d'un relais et le contrôler par une carte Arduino.
Aujourd'hui, nous allons un peu plus loin et le contrôler, toujours par un Arduino, mais à travers une interface web. Ainsi, vous pouvez utiliser votre ordinateur, smartphone ou tablette pour allumer/éteindre une ampoule (ou tout autre appareil contrôlé par le relais).

Je vais diviser ce tutoriel en deux parties :

  1. Arduino
    Dans cette partie, je vais aborder la programmation de la carte Arduino.
  2. Interface web
    Dans cellec-i, nous allons créer la page web qui va contrôler le microcontrôleur.

Les composants

Dans ce tutoriel, nous allons avoir besoin de :

Remarques

Les interrupteurs

Il existe un point important à soulever avant de commencer : si quelqu'un allume la lumière par un interrupteur, comment faire pour pouvoir l'éteindre par notre interface web puisque qu'il faut une action mécanique pour modifier l'état de l'interrupteur ?

C'est facile :) En créant notre propre interrupteur en remplacant le "switch" par un bouton poussoir ! Je vous redirige donc vers mon tutoriel précédent.
Voici un appercu de ce que j'ai fait :

La carte Arduino va lire l'état du bouton poussoir. Dès qu'il détecte un changement d'état (vous avez appuyé), il va alors changer l'état de relais : s'il était éteint, il l'allume et vice-versa.
Il va également lire les ordres donnés par le navigateur web.

Nous allons envoyer à Arduino des numéros entre 0 et 9 et lui, il va excétuer une méthode ou une autre en fonction des numéros reçus. Les commandes reçues par votre Arduino est sous la forme : http://192.168.1.10/?1

Le code

Voici le code à charger sur votre Arduino, avec le shield Ethernet monté.
Pour une raison que j'ignore, il arrive parfois que l'Arduino lit un faux appui (sur le bouton), j'ai donc inclus dans le code un paramètre qui permet d'activer/désactiver les interrupteurs.
Dans le cas où ils sont désactivés, c'est uniquement par l'interface web que vous poourriez contrôler les relais.

		#include <Ethernet.h>
		#include <SPI.h>
		boolean reading;
		boolean lChambre; //Etat du relais
		boolean eBouton;  //Etat des interrupteurs
		byte mac[] = { 0x90, 0xA2, 0xDA, 0x08, 0x00, 0x59 }; //L'adresse MAC de votre shield Ethernet (normalement il se trouve sous la carte
		EthernetServer server = EthernetServer(80); 

		void setup(){
		  	Serial.begin(9600);
  			pinMode(6, INPUT); //Lire l'état du bouton poussoir
  			pinMode(7, OUTPUT);//Controler le relais
  			reading = false;
  			lChambre = false;
  			eBouton = false;
  			Ethernet.begin(mac);
  			server.begin();
  			Serial.println("Arduino connecte");
  			Serial.println(Ethernet.localIP());
		}	

		void loop(){
			enAttente();
  			if(digitalRead(6) == LOW && eBouton){
    			lChambre = !lChambre;
    			digitalWrite(7, lChambre);
    			delay(300); //Ce délai est nécessaire sinon chaque fois vous appuyez, Arduino en compte 2 appuis
  			}	
		}

		void enAttente(){
  			EthernetClient client = server.available();
  			if(client){
    			boolean currentLineIsBlank = true;
    			boolean sentHeader = false;
    			while(client.connected()){
      				if(client.available()){
        				if(!sentHeader){
          					client.println("HTTP/1.1 200 OK");
          					client.println("Content-Type: text/html");
          					client.println();
          					sentHeader = true;
        				}
        				char c = client.read();
        				if(reading && c == ' '){reading = false;}
        				if(c == '?'){reading = true;}
        				if(reading){
          					Serial.print(c);
           					switch(c){
            					case '1':
              						lChambre = !lChambre;
              						digitalWrite(7, lChambre);
              						break;
            					case '0':
              						eBouton = !eBouton; //acitver/désactiver les interrupteurs
              						break;
          					}
        				}
        				if(c == '\n' && currentLineIsBlank){break;}
        				if(c == '\n'){
          					currentLineIsBlank = true;
        				}else if(c != '\r'){
          					currentLineIsBlank = false;
        				}
      				}
    			}
    			delay(1); //Permettre au navigateur de tout recevoir
    			client.stop(); 
  			} 
		}
                

L'interface web

Maintenant que nous avons terminé avec notre cher Arduino, nous allons passé à la conception de la page web.
Bien que ça ne soit pas nécessaire, un minimum de connaissance en HTML est toujours utile ;)

Nous allons créer un bouton qui, lorsqu'il est cliqué, va appeler une méthode écrite en JavaScript.
Cette méthode va envoyer une requête HTTP qui commandera alors notre Arduino.

Voici un code simple (mais qui respecte bien sûr les normes du W3C) qui peut servir comme point de départ à votre imagination :

		<!DOCTYPE html>
			<head>
				<title>Télécommande</title>
				<script type="text/javascript">
					fonction lum(){
						var xhr = new XMLHttpRequest();
						xhr.open('GET', 'http://192.168.1.10/?1');
						xhr.send(null);
					}
				</script>
			</head>
			<body>
				<button onclick="lum();">Lumière</button>
			</body>
		</html>
                

Félicitations ! Vous venez d'achever la page de votre système domotique. Il ne vous reste qu'à brancher votre Arduino sur votre box ADSL :)
Merci bildr.org