Projet réalisé par Théo DELOOSE, Clara BOMY, Clément NOUGÉ, Mathieu GABRIEL, Marine DAEL et Thaï-Son DANG.

Introduction

Nous sommes six étudiants en troisième année à l’ISEN Lille. Dans le cadre de notre projet de fin d’année, nous avons conçu une serre connectée dédiée à un usage en intérieur. Celle-ci est équipée d’un système d’éclairage intelligent, d’une pompe d’arrosage automatique et d’un brumisateur intégré afin de garantir la bonne croissance des plantes, rassemblant les conditions nécessaires à leur développement. Pour une plus grande facilité d’utilisation, notre serre est associée à une application mobile simple et ludique permettant de suivre en temps réel les données de l’environnement de la serre et de contrôler celle-ci à distance.

En réalisant ce projet, notre but était de proposer une solution de serre connectée à un prix raisonnable et possédant une interface attrayante pour améliorer l’expérience de l’utilisateur.

De plus nous voulions que la serre puisse être intégrée dans différents systèmes facilement pour que l’utilisateur puisse utiliser les données à sa guise.

Fonctionnement général

Nous avons pensé FriendLeaf comme un système de monitoring et de pilotage. Il propose en effet de gérer automatiquement l’arrosage, l’humidité et la luminosité de la serre, ou bien de les activer manuellement à notre guise. Il synchronise les données récupérées par les différents capteurs grâce à la plateforme Constellation et active, par le biais d’un relais, les actionneurs. Enfin, FriendLeaf alerte l’utilisateur lorsque le réservoir d’eau est vide. Tout est synchronisé en temps réel comme par magie grâce à Constellation.

Nous avons donc ajouté dans la serre les capteurs permettant de relever les informations sur l’humidité de l’air et du sol, sur la température et sur la luminosité.  L’équipement installé comporte aussi une guirlande lumineuse ayant pour but d’éclairer et d’afficher les alertes, une pompe pour le système d’arrosage et un brumisateur permettant d’humidifier l’air.

Matériel utilisé

Pour réaliser notre projet, nous nous sommes servis des composants suivants :

Pour la Serre :

• Serre SOCKER Ikea (12,99€), Ikea
• Bac pour le terreau (1,50€), Jardinerie
• Carte Raspberry Pi 3B (40,80€), Amazon
• Relais 4 canaux supportant jusqu’à 5A et 250V (AC) et 30V (DC) (9,99€), Amazon
• Câbles de connexion
• Boîte de dérivation

Pour les capteurs :

• Humidité et température air : DHT11 (1,31€), Amazon
• Luminosité : TSL2561 (6,95€), Gotronic
• Humidité sol : GT110 (2,40€), Gotronic
• Niveau d’eau : Gravity SEN0205 (10,50€), Gotronic

Pour le brumisateur :

• Un émetteur à ultrasons (9,89€), Amazon
• Une alimentation pour le brumisateur (24V DC, 1A) (25€), Derotronic, Lille
• Un bol

Pour le système d’arrosage :

• Une pompe à eau (5,48€), Amazon
• Une alimentation 12V 600mA (12€), Derotronic, Lille
• Un jerrican (environ 10€)
• Un tuyau (ø7mm -ø10mm), Diall

Pour l’éclairage :

• 2m de guirlandes lumineuses (1m LED et 1m incandescent), Blachère
• Une alimentation pour fil lumière, Blachère
• Colliers de serrage

Conception de la serre

Étape 1 : Préparation de la serre

Dans la serre, nous avons disposé les capteurs, le pot et un bol pour le brumisateur. Nous avons également percé des trous pour pouvoir faire passer tous les capteurs et le tuyau d’arrosage.

Pour ce qui est de la guirlande lumineuse, il nous a fallu percer quelques trous supplémentaires dans les montants de la serre pour y glisser les colliers de serrage.

Étape 2 : Branchement du relais

Afin de pouvoir contrôler les actionneurs, nous avons branché le relais quatre canaux à une carte Raspberry Pi.

Celui-ci est analogue à un interrupteur. Pour chaque canal, une alimentation est nécessaire et chacun d’entre eux peut être piloté individuellement grâces aux différents pins dont dispose le relais. Il faut également prévoir une masse que l’on branche sur le pin “Gnd” du relais.

Par défaut, lorsque les pins d’entrée ne sont pas alimentés, les canaux du relais délivrent la tension d’alimentation correspondante sur la sortie NC (“Normally Closed”) ou sur la sortie NO (“Normally Open”) dans le cas contraire.

Etape 3 : Éclairage de la serre

Pour l’éclairage de notre serre, nous avons percé des trous dans la structure et fixé la guirlande avec des colliers de serrage. Celle-ci doit être alimentée par une tension de 230V (tension secteur) et est composée d’un mètre de LEDs rouge et d’un mètre incandescent jaune.

Elle est connectée au relais par la phase et le neutre, chacun branchés sur un canal différent, afin d’isoler totalement la guirlande du secteur et ainsi éviter tout problème avec le reste des composants.

Etape 4 : Installation du brumisateur

Pour augmenter l’humidité de l’air dans la serre, nous avons installé un brumisateur fonctionnant par émissions d’ultrasons. Il nécessite une alimentation de 24V/1A maximum. On le relie ensuite au relais. La masse est directement connectée à l’adaptateur secteur par le biais d’un domino.

Etape 5 : Installation du système d’arrosage

En ce qui concerne l’arrosage, nous disposons d’une pompe submersible qui nécessite une alimentation de 12V et 400mA. Elle est branchée en sortie à un tuyau percé pour un arrosage homogène. Nous la connectons ensuite à un des canaux du relais.

Pour le réservoir, nous avons récupéré un bidon de vinaigre de 5L sur lequel nous avons fait un trou pour le capteur de niveau d’eau et une ouverture pour le remplir et y faire passer la pompe.

Pour résumer…

Étape 6 : Mise en place des capteurs et paramétrage de la carte Arduino

Nous installons à présent les capteurs d’humidité/température de l’air, d’humidité du sol, de de luminosité et de niveau d’eau. Nous branchons tous ces capteurs aux pins de la Raspberry ou de l’Arduino en faisant attention au fait que :

• Les capteurs d’humidité du sol et de niveau d’eau se branchent sur du 5V.
• Les capteurs d’humidité/température de l’air et de luminosité sont alimentés en 3,3V.

Étape 6.1 : Capteur d’humidité et de température de l’air

Le capteur d’humidité et de température de l’air fournissant des données numériques, nous le relions directement à notre Raspberry Pi comme montré sur le schéma ci-dessous :

Étape 6.2 : Capteurs de luminosité, d’humidité du sol et de niveau d’eau

Ces capteurs fournissant des données analogiques, nous les avons branchés à une carte Arduino nano qui permet de lire ces données, contrairement à la Raspberry. Elle est reliée directement par USB à la Raspberry Pi comme montré ci-après :

Étape 6.3 : Programmation de la carte Arduino

Dans l’IDE Arduino, nous avons donc commencé par programmer la carte.

Nous ajoutons tout d’abord les librairies d’Adafruit pour pouvoir initialiser le capteur de luminosité et régler le temps d’intégration des données. Dans le gestionnaire de bibliothèque (menu Croquis > Inclure une bibliothèque), nous avons installé les librairies suivantes :

• Adafruit Unified Sensor
• Adafruit TSL2561

Au démarrage, dans la méthode “setup()”, nous configurons les pins utilisés. Nous décidons d’utiliser les pins analogiques A0 et A1, respectivement pour le capteur d’humidité du sol et du niveau d’eau et les pins A4 et A5 pour le capteur de luminosité :

void setup(void) 
{
  Serial.begin(9600);
 
  /*Réglage du capteur de luminosité*/
  if(!tsl.begin()) //Initialisation du capteur
  {
    //S'il y a un problème pour détecter le capteur, vérifier votre connexion
    Serial.print("Ooops, pas de capteur détecté... Vérifier votre connexion!");
    while(1);
  }
  
    //Configuration du gain du capteur et du temps d'intégration
    tsl.enableAutoRange(true);          
    tsl.setIntegrationTime(TSL2561_INTEGRATIONTIME_13MS);    
 
}

Dans la méthode “loop()”, nous recueillons ensuite les valeurs des capteurs et les faisons afficher sur le Monitor Série en utilisant les commandes analogRead() et Serial.print()  :

void loop(void) 
{  
  /*Pour recevoir une nouvelle donnée par le capteur de luminosité*/ 
  sensors_event_t event;
  tsl.getEvent(&event);
 
  //Lecture des pins analogiques pour les données des capteurs d'humidité du sol et de niveau d'eau
  Hum_value = analogRead(A0);
  Liquid_value=analogRead(A1);
 
  //Affichage des valeurs sur le Moniteur série
  Serial.print(event.light,0);
  Serial.print(',');
  Serial.print(map(Hum_value,0,1024,0,100)); //Le capteur d'humidité renvoie une valeur en pourcentage 
  Serial.print(',');
  Serial.println(map(Liquid_value,0,512,0,1)); //Le capteur de niveau d'eau retourne la valeur 1 quand il est en contact avec l'eau, 0 sinon
  delay(5000); //Retard de 5s pour éviter de surcharger le buffer de la Raspberry 
}

Nous récupèrerons ensuite les données des différents capteurs à l’aide de la carte Raspberry Pi.

La programmation vers Constellation

La programmation vers Constellation est divisée en deux packages : le premier correspond à la récupération des données des capteurs et à l’activation des actionneurs, le second a été créé pour gérer le stockage des données en vue de créer des graphiques sur notre application.

Etape 1 : Package relatif aux capteurs et actionneurs

Etape 1.1 : Acquisition des données des capteurs

Pour récupérer les données des différents capteurs cités précédemment, nous avons utilisé la librairie “Adafruit_DHT” pour Raspberry Pi et la librairie “serial” qui permet de faire le lien entre l’Arduino-Nano et la Raspberry Pi. Ces valeurs vont nous permettre de décider s’il faut activer ou non les actionneurs tels que la pompe, le brumisateur ou les LED.

La fonction ci-après permet de récupérer les valeurs des différents capteurs.

def getCapteur():
    humiditeAir, temperature = Adafruit_DHT.read_retry(11,4)
    lux, humiditeSol, eau = ser.readline()[:-2].split(",")

Nous avons ensuite créé un State Object rassemblant les valeurs d’humidité du sol, d’humidité de l’air, de température et de luminosité ambiante pour pouvoir les publier sur notre Constellation.

Constellation.PushStateObject("Capteurs", {"HumiditeSol": int(self.humiditeSol), "HumiditeAir": int(self.humiditeAir), "Temperature": int(self.temperature), "Luminosite": int(self.lux)}, "CapteursInfos")

Etape 1.2 : Activation et désactivation des différents actionneurs (brumisateur, guirlande lumineuse et pompe à eau)

Comme mentionné précédemment, les actionneurs sont reliés à la Raspberry Pi via un relais quatre canaux. Cela simplifie grandement la programmation : il nous suffit simplement de gérer l’ouverture et la fermeture des relais.

Nous avons donc fait en sorte que chaque actionneur soit associé à son relais grâce à la librairie GPIO de la Raspberry Pi. Ainsi, le code diffère seulement au niveau des numéros des pins utilisés par les actionneurs.

Voici un exemple du code de l’activation et de la désactivation de notre pompe :

GPIO.setmode(GPIO.BOARD)
GPIO.setup(12,GPIO.OUT)
GPIO.output(12,0)

Le pin 12 de la Raspberry est celui relié au relais contrôlant la pompe.

Etape 1.3 : Automatisation des actionneurs

Pour réaliser la fonction d’automatisation, nous nous sommes tout d’abord renseignés sur les conditions propices à la bonne croissance des plantes au niveau de l’humidité du sol et de l’air, de la luminosité et de la température de l’air.

Pour le brumisateur, nous avons choisi de l’activer si l’humidité est inférieure à 35% et de le désactiver si l’humidité remonte au dessus de 37%.

if humiditeAir > 37 and brumisateur:
    DesactiverBrumisateur()
elif humiditeAir < 35 and not brumisateur:
    ActiverBrumisateur()
    time.sleep(1)

Pour la pompe, le fonctionnement est différent. Puisque la diffusion de l’eau dans la terre est plus lente, nous activons la pompe pendant 5s avant de la désactiver pendant 30s pour laisser le temps au capteur de ressentir les changements.

if humiditeSol < 30 and not pompe:
    if self.ticks == 0:
            if self.next_water == 0:
                    ActiverPompe()
            self.next_water = 15
        else:
                    self.next_water -= 1
        elif humiditeSol > 30:
                    self.next_water = 0
    elif pompe:
            self.ticks += 1
               if self.ticks >= 3:
                    DesactiverPompe()
                       self.ticks = 0
time.sleep(1)

Ces différentes fonctions sont exécutées dans des threads séparés pour ne pas que le code soit bloquant.

Maintenant, il ne reste plus qu’à sécuriser notre système d’arrosage via le capteur de niveau d’eau. Connecté à la carte Arduino nano, ce capteur va nous renvoyer 1 s’il y a de l’eau dans le réservoir, 0 sinon.

Les données du capteur de niveau d’eau nous permettent d’arrêter le système d’arrosage lorsque le réservoir est presque vide et d’informer l’utilisateur via un PushBullet et l’allumage des LEDs qu’il faut remplir le réservoir.

Constellation.SendMessage("PushBullet", "PushNote", [ "FriendLead", "Le reservoir d'eau est vide"], Constellation.MessageScope.package)

Étape 2 : Package relatif au stockage des données

Afin d’historiser les valeurs des capteurs stockées dans un des State Objects du premier package, nous en avons créé un autre que l’on a déployé sur le même serveur que Constellation.

Ce package génère une base de données dans un fichier .csv qui est mis à jour toutes les minutes avec les nouvelles données.

Chaque ligne contient la date, l’heure, l’humidité du sol, l’humidité de l’air, la température et la luminosité.

@Constellation.StateObjectLink(package = "FriendLeafCapteurs", name = "Capteurs")
def RecupValue(stateObject):
    humiditeSol = stateObject.Value.HumiditeSol
    humiditeAir = stateObject.Value.HumiditeAir
    temperature = stateObject.Value.Temperature

Nous avons ensuite créé un message callback qui permet de visualiser le fichier CSV dans notre Constellation.

@Constellation.MessageCallback()
def LireBDD():
'''
: return string : La base de données 
'''
    file = open('BDD.csv','r')
    lines = file.readlines()
    return lines

L’interface utilisateur : l’application mobile de monitoring et de pilotage de la serre

Étape 1 : Le noyau de l’application

Pour développer l’application mobile nous nous sommes aidés de Cordova, un Framework permettant de créer des application Android et iOS avec des technologies web.

Nous avons également utilisé jQuery et AngularJS pour faciliter l’interaction entre Javascript et HTML.

De plus, pour gérer certaines fonctionnalités comme le traitement du CSV ou l’affichage des graphiques, nous avons utilisé des librairies externes comme PapaParser et Chartist. Finalement, pour embellir le CSS, nous avons utilisé le Framework SemanticUI qui ressemble en certain points à Bootstrap.

Étape 2 : Connexion à Constellation, State Object et Messages Callback

Pour nous connecter à Constellation avec AngularJS, nous avons utilisé ces lignes de codes :

Constellation.initializeClient(url_port, sha, "FriendLeaf");

Constellation.onConnectionStateChanged(function (change) {
   //suite
});

et une ligne de ce type pour chaque State Object :

Constellation.registerStateObjectLink("*", "FriendLeafCapteurs", "Actionneurs", "*", function (so) {
    //suite
});

Quant aux messages Callback, ils sont envoyés comme suit :

Constellation.sendMessage({ Scope: 'Package', Args: ['FriendLeafCapteurs'] }, 'DesactiverBrumisateur');

Pour que l’application soit utilisable sur n’importe quelle Constellation, nous avons créé un page de configuration où l’utilisateur rentre l’adresse de sa constellation, le port, et des identifiants.

Une fois tout cela rempli, le nom d’utilisateur et le mot de passe sont hachés en SHA1 grâce à une librairie externe et la connexion à Constellation commence.

Lorsque l’application se lance pour la première fois, l’utilisateur est directement redirigé vers cette page pour entrer les informations nécessaires.

Étape 3 : Affichage des données en temps réel

Pour l’affichage des données en temps réel nous avons utilisé des images SVG car elles sont très flexibles et nous voulions réaliser des barres de progression en arc de cercle. Pour les valeurs numériques on affiche un scope AngularJS dans lequel sont stockés les valeurs des capteurs.

Le code JS :

//Stockage des valeurs des capteurs dans la variable capteur
scope.capteurs["humiditeAir"] = so.Value.HumiditeAir;
scope.$apply(); //Applications des modifications du scope

//Pour changer le remplissage de la jauge 
$("#h_air_gauge").css("stroke-dasharray",(so.Value.HumiditeAir*18)/100 + " 18 0");

SVG en HTML :

<svg viewbox="0 0.5 10 8">
    <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#00ee4f"/>
        <stop offset="66%" stop-color="#eeae00"/>
        <stop offset="100%" stop-color="#ee0000"/>
    </linearGradient>
    </defs>
    <text x="50%" y="50%" id="h_air_value" text-anchor="middle"  alignment-baseline="middle" fill="#00ee4f">
        {{Math.round(capteurs["humiditeAir"])}}%
    </text>
    <path d="M2 8 A 4 4 0 1 1 8 8" fill="none" stroke-width="0.78" stroke="#E8F6FD" />
    <path class="loader" id="h_air_gauge" d="M2 8 A 4 4 0 1 1 8 8" fill="none" stroke-width="0.8" 
stroke="url(#linear)" />
</svg>

Étape 4 : Contrôler sa serre

Nous avons également prévu dans l’application de pouvoir gérer les différents actionneurs de la serre.

Pour gérer le côté automatique du package responsable des capteurs nous avons utilisés des sliders qui lorsqu’activés, vont envoyer un Message Callback comme décrit ci-dessus. On va également suivre l’évolution du State Object indiquant si l’automatisation est activée pour tel ou tel actionneur et ainsi bloqué ou non le bouton d’activation manuel. Car oui, il est également possible d’activer manuellement chaque actionneur grâce à un bouton.

Étape 5 : Les graphiques

Pour ce qui est des graphiques nous avons utilisé une librairie externe que nous avons modifié pour la rendre compatible sur mobile. Cette librairie s’appelle Chartist. Grâce à elle nous avons pu faire de superbes graphiques.

Conclusion

Voilà qui conclut les grandes étapes de la réalisation de FriendLeaf. Comme vous avez pu le voir, la serre remplit complètement son rôle. C’est un projet ludique, simple à réaliser et facilement transposable sur d’autres installations grâce aux State Objects et aux messages Callback. C’est également un bon point de départ pour prendre en main la plateforme Constellation. Nous espérons vraiment qu’il vous a plu et que vous allez réaliser votre propre serre.

Nous tenons également à remercier Léa, le jardin de Théo et les parents de Marine qui nous ont fourni quelques accessoires nécessaires à la serre.

The post FriendLeaf : la serre connectée grâce à Constellation appeared first on Constellation.

Vous attendez quelqu’un chez vous mais vous êtes occupé à faire autre chose. Cette serrure connectée vous permettra de contrôler l’ouverture de la porte d’entrée depuis n’importe quelle pièce de votre domicile, et cela en un clic grâce à votre smartphone. Nous allons voir pas à pas comment la mettre en place simplement.

Prérequis

Pour réaliser ce projet, il vous faut :

• Une gâche électrique 12V / 500 A
• Un ESP8266
• Un régulateur de tension LM1117
• Un transistor NPN TIP 110
• Une résistance 5,6 KΩ
• Deux condensateurs 0,1 µF et 0,33 µF
• Du fil électrique
• Une batterie 12V
• Un serveur Constellation (Un ordinateur pourra faire l’affaire)

Etape 1 : réaliser une serrure connectée

Dans un premier temps, il nous a fallu trouver une serrure adaptée au développement du projet sur laquelle nous pouvions brancher nos fils électriques. Nous avons donc opté pour la serrure suivante que vous pourrez vous procurer via ce lien .

Pour de plus amples informations techniques sur la gâchette, vous pouvez également regarder ici.

Il faut ensuite créer le câblage nécessaire au fonctionnement de la serrure. Notre principal problème a été de convertir l’alimentation indispensable de 12V pour la serrure en une alimentation de 3,3V nécessaire à l’utilisation de notre ESP. A l’aide du régulateur de tension, nous avons réalisé le montage suivant en entrée de l’ESP.

Afin de laisser passer le courant et de faire fonctionner la gâchette, le transistor TIP110 en série avec une résistance 5,6kΩ se placent en sortie GPIO de l’ESP. Une LED peut être également placée à cette même sortie afin de visualiser l’état de la serrure.

Enfin, voici le montage final reprenant tous les composants :

Etape 2 : Programmation

Vous avez fait la moitié du travail, voyons ensemble comment coder notre ESP8266.

La fonction de base de la gâche électrique est assez simple : couper le courant à travers la serrure pour la fermer ou le laisser passer le courant afin d’ouvrir la serrure. En premier lieu, nous avons développé le code Arduino servant à faire faire passer du courant ou non dans la gâche. Pour cela nous devons dans un premier temps connecter notre ESP8266 à Constellation. Pour découvrir comment connecter votre ESP à Constellation, suivez ce guide.

En ce qui concerne le code Arduino permettant de contrôler la serrure, vous en trouverez ci-dessous l’intégralité.

#include <Constellation.h>

// ESP8266 Wifi
#include <ESP8266WiFi.h>
char ssid[] = "MY-WIFI";
char password[] = "xxxxxxxx";

define LOCK_PIN D3

// Constellation client
Constellation<WiFiClient> constellation("172.20.10.2", 8088, "d1mini", "demoisen", "xxxxxxxx");

void setup(void) {
  Serial.begin(115200);  delay(10);

  //SET I/O 
  pinMode(LOCK_PIN, OUTPUT);
  // INITIAL mode
  digitalWrite(LOCK_PIN , LOW);

  // Set Wifi mode
  if (WiFi.getMode() != WIFI_STA) {
    WiFi.mode(WIFI_STA);
    delay(10);
  }
  
  // Connecting to Wifi  
  Serial.print("Connecting to ");
  Serial.println(ssid);  
  WiFi.begin(ssid, password);  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("WiFi connected. IP: ");
  Serial.println(WiFi.localIP());

  constellation.pushStateObject("State", false);
  
  constellation.registerMessageCallback("OpenDoor", MessageCallbackDescriptor().setDescription("Ouvres la porte"),
      [](JsonObject& message) {
            digitalWrite(LOCK_PIN, HIGH);
            constellation.pushStateObject("State", true);
            delay(4000);
            digitalWrite(LOCK_PIN, LOW);   
            constellation.pushStateObject("State", false);    
      });
  
  // Declare the package descriptor
  constellation.declarePackageDescriptor();

  // WriteLog info
  constellation.writeInfo("Virtual Package on '%s' is started !", constellation.getSentinelName());  
}

void loop(void) {
  constellation.loop();
}

L’étape suivante a été d’utiliser la librairie Constellation pour ajouter un « MessageCallback » afin de contrôler le GPIO de la gâchette, couplé à un « StateObject » permettant de maintenir l’état de la serrure dans Constellation :

Constellation va aller garder en permanence l’état de la serrure grâce au StateObject « State ».

Dorénavant, n’importe qui connecté au serveur peut se servir du MessageCallback « OpenDoor» exposé par l’ESP que nous avons utilisé pour faire permuter l’ouverture et la fermeture automatique de la serrure. Un délai de 4 secondes est programmé avant que la serrure ne se referme après ouverture de la gâche. Nous avons ajouté cette fonctionnalité afin d’ajouter une partie sécurité à notre dispositif.

On obtient alors simplement le pilotage de notre gâchette avec Constellation, dont l’état pourra être contrôlé grâce à une page Web qu’on vous présente dans la partie suivante.

Etape 3 : Piloter sa serrure à l’aide d’une page web

Pour cette dernière étape qui consiste à piloter notre serrure connectée grâce à une page Web. Il s’agit principalement de l’interface via laquelle vous pourrez facilement décider de l’ouverture ou la fermeture de la serrure.

Voici le code HTML que nous avons mis en place :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="MyDemoApp">
<head>
    <link rel="stylesheet" href="bruh.css" />
    <title>Serrure connectée</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.myconstellation.io/js/Constellation-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.myconstellation.io/js/ngConstellation-1.8.2.min.js"></script>
    
    <script>
        var myDemoApp = angular.module('MyDemoApp', ['ngConstellation']);
        myDemoApp.controller('MyController', ['$scope',  'constellationConsumer', function ($scope, constellation) {
  
          constellation.initializeClient("http://172.20.10.2:8088", "xxxxxxxxxx", "WebPage");
          constellation.onConnectionStateChanged(function (change) {
            if (change.newState === $.signalR.connectionState.connected) {
                console.log("Je suis connecté !");
                constellation.requestSubscribeStateObjects("*", "DoorLock", "*", "*");
                }
            });

          constellation.onUpdateStateObject(function (stateObject) {
              console.log(stateObject);
              $scope[stateObject.Name] = stateObject.Value;
              $scope.$apply();
          });
          
          $scope.openDoor = function(){
                constellation.sendMessage({Scope: 'Package', Args: ['DoorLock']}, 'OpenDoor');
            };

            
          constellation.connect();

                }]);
    </script>
 
</head>

<body ng-controller="MyController">
        
    <button ng-click="openDoor()"> OPEN </button>

</body>
</html>

Avec quelques lignes de CSS, le rendu final de notre page est le suivant et on ne peut plus simple d’utilisation pour le pilotage :

Pour la suite il suffit d’héberger cette page HTML sur un serveur Web quelconque et vous pourrez ouvrir votre porte depuis un PC, un smartphone, une table ou autre.

Et comme l’ouverture de la porte est exposer comme un MessageCallback, vous pourrez l’ouvrir depusi un code C#, Python, Arduino ou même un simple appel HTTP à l’API Constellation. N’hésitez pas à utiliser le “Code Generator” de la console Constellation.

Au final avec une gâche électrique, un ESP8266, une Constellation et quelques lignes d’Arduino, on est capable d’ouvrir une porte depuis tous type d’application.

The post Créer une serrure connectée à Constellation appeared first on Constellation.

Introduction

Étudiants en 3^ème année à l’ISEN-Lille, nous avons eu l’idée de développer une boîte aux lettres connectée en utilisant la plateforme Constellation.

En réalisant ce projet, nous voulions proposer une solution de boîte aux lettres connectée à un prix raisonnable et possédant une interface fluide pour améliorer l’expérience de l’utilisateur. Pour cela, nous avons acheté des composants peu coûteux à placer sur notre boîte aux lettres, et développé une application Ionic.

Notre boîte aux lettres est connectée à la plateforme Constellation par le biais d’un ESP8266, vous pouvez le connecter facilement à votre Constellation en suivant cette documentation sur le site Constellation.

Nous détectons ensuite la présence de courriers à l’aide de capteurs à ultrasons.

Avec un lecteur de cartes NFC, nous contrôlons l’accès à notre boîte aux lettres. Celui-ci nous permet de savoir qui a ouvert la boîte aux lettres et donc d’envoyer les bonnes informations à notre Constellation. Le lecteur NFC nous permet également de vérifier qu’une carte ou qu’un badge a les autorisations nécessaires afin de commander l’ouverture via un servo-moteur.

L’application, développée avec le framework ionic nous permet d’offrir une interface utilisateur ergonomique. En la connectant à Constellation, l’utilisateur a accès à toutes les informations nécessaires très facilement.

La boîte aux lettres connectée

Prérequis : Avoir connecté l’ESP8266 à Constellation.

Composants utilisés

Pour connecter notre boîte aux lettres à Constellation, nous avons utilisé :

• Un ESP8266 D1 Mini (8€ sur Amazon)
• Des capteurs à ultrasons HC SR04 (3€ sur Amazon)
• Un lecteur de cartes NFC (8€ sur Amazon)
• Un servo-moteur (6€ sur eBay)

Voici la correspondance pour définir les différents pins avec cet ESP :

Etape 1 : Détecter la présence d’une lettre grâce à un capteur ultrason

Nos capteurs fonctionnent avec une alimentation de 5V

Les capteurs à ultrasons nous permettent de mesurer une distance en créant une impulsion sur une des broches. Grâce à cette mesure, nous pouvons détecter une variation de la distance lorsqu’un courrier et inséré dans la boîte aux lettres. Nous envoyons alors l’information à Constellation grâce à un MessageCallback.

Relier le capteur à notre ESP est assez simple, notre capteur à ultrasons possède 4 branches, chacune branchée sur un pin de notre ESP.

Ci-dessous, les correspondances entre les branches du capteur à ultrasons et les pins de l’ESP8266 :

Dans notre code, nous configurons les pins dans le setup afin de préparer l’impulsion.

void setup() {
   pinMode(TRIGGER, OUTPUT);
   digitalWrite(TRIGGER, LOW); //La broche TRIGGER doit être à LOW au repos
   pinMode(ECHO, INPUT);
   Serial.begin(9600);
 }

Nous envoyons ensuite de façon continue des impulsions pour savoir si un obstacle est présent puis, s’il y en a un, nous envoyons un Message Callback.

void loop() {    
    /* 1. Lance une mesure de distance en envoyant une impulsion HIGH de 10 µs sur la broche TRIGGER */
   digitalWrite(TRIGGER, HIGH);
   delayMicroseconds(10);
   digitalWrite(TRIGGER, LOW);
   
   /* 2. Mesure le temps entre l'envoi de l'impulsion ultrasonore et son écho (s'il existe) */
   long measure = pulseIn(ECHO, HIGH);                
                                                                                 
   /* 3. Calcul la distance à partir du temps mesuré */
   long distanceMeasured = measure *vitesse ;
  
   /* 4. Envoie d'un MessageCallback à Constellation si on rentre dans le if */ 
   if(distanceMeasured < defaultValue){
     constellation.sendMessage(Package, "Brain", "message");
   }
}

Etape 2 : Gérer les accès à la boîte aux lettres grâce à un lecteur de carte NFC

Dans cette partie, nous allons envoyer un Message Callback à Constellation grâce à l’ID du badge NFC détecté par notre lecteur de cartes.

Cela nous permettra par la suite de gérer les autorisations d’accès à la boîte aux lettres, de contrôler l’ouverture par notre servo-moteur, et d’avertir l’utilisateur qu’un colis a été livré ou que le courrier a été récupéré. Nous devrons donc enregistrer les différents utilisateurs en renseignant leur ID de badge et leur statut (facteur ou utilisateur).

Voici le câblage réalisé pour cette partie entre le NFC et l’ESP :

Il faut commencer par télécharger la bibliothèque suivante :

Voici ensuite la fonction nécessaire à l’envoi d’un Message Callback lorsque nous captons un nouveau badge.

void NFC() {
    // Regarde s'il y a une nouvelle carte, s'il n'y en a pas on quitte la fonction
    if ( ! mfrc522.PICC_IsNewCardPresent()) {
        return;
    }
    // S'il n'arrive pas à lire la carte on quitte la fonction
    if ( ! mfrc522.PICC_ReadCardSerial()) {
        return;
    }
    char sochar[256]; // 256 correspond à un octet
    String UID= dump_byte_array(mfrc522.uid.uidByte, mfrc522.uid.size); 
    /* Permet de transformer un tableau de bit en String */
    UID.toCharArray(sochar, 256);
    constellation.sendMessage(Package, "Brain", "Authorisation", sochar); /* envoie un message Callback du package Brain appelé Authorisation*/
}

Etape 3 : Ouvrir et fermer la porte grâce à un servo-moteur

Le servomoteur va nous servir à commander notre verrou. Ce dernier va donc s’abonner à un State Object nous donnant l’état de la porte (verrouillée ou déverrouillée). Ainsi, lorsque notre lecteur NFC captera un ID autorisé, notre State Object changera, ainsi que l’état de verrouillage de la porte.

Voici les branchements qui relient notre moteur à l’ESP :

Avant d’utiliser le code ci-dessous, il faut vérifier que vous avez bien installé les bibliothèques suivantes :

Dans le Setup ci-dessous, nous nous abonnons à un StateObject qui nous permet d’ouvrir et de fermer la porte lorsqu’il change d’état.

void setup() {
    monServo.attach(15); // Définit le moteur au D8
    monServo.write(0); // ServoMoteur à sa position initiale
    constellation.registerStateObjectLink("*", "Brain", "Porte_ouverte", [](JsonObject& so) {
     delay(100); // délai afin d'attendre la connexion à  Constellation
     if (so["Value"]== true){   
       monServo.write(90);  // Position de la porte ouverte
       }
 
    if (so["Value"]== false){
       monServo.write(0);   // Position de la porte fermée
       }
       delay(3000); // attendre au minimum 3 secs avant que la porte ne change d'état.
   });  
 }

Etape 4 : Synchroniser toutes nos parties avec un package Constellation

Vous pouvez retrouver notre code complet pour la boîte aux lettres sur GitHub pour plus de précision (https://github.com/Sqyluck/Boite-aux-lettres-connectee).

Il est ensuite nécessaire de créer un package Constellation, qui va nous permettre de traiter toutes les données de nos différents éléments.

→ Voici les différents Message Callbacks créent dans le package afin de répondre à nos besoins.

→ Voici la liste des State Objects générés par le package pour permettre l’affichage de nos données dans l’application et l’envoi d’ordre au servomoteur via l’ESP8266.

Etape 5 : Fabrication de la boîte aux lettres

Nous avons utilisé des planches en bois afin de réaliser notre boîte aux lettres. Nous avons vissé les planches entre elles, puis nous avons fixé nos éléments sous le toit de la boîte.

L’interface utilisateur

Prérequis : disposer de Node.js et de npm

Etape 1 : Créer une application avec ionic

Afin de réaliser notre interface utilisateur, nous avons décidé dans un premier temps de développer notre application avec Ionic 2 dans Visual Studio. Mais avec cette méthode nous étions obligé de développer notre application en langage typescript ce qui était plus compliqué pour connecter l’application à la plateforme Constellation. Nous avons donc décidé d’utiliser Ionic 1 afin de développer notre application en javascript et de la connecter plus facilement.

Avant de commencer, il faut lancer l’installation de Ionic 1 depuis l’invite de commande :

npm install – g cordova ionic

(Attention : cette commande ne fonctionnera pas si vous ne disposez pas auparavant de node.js et de npm)

Une fois que nous nous sommes placé dans le dossier dans lequel nous souhaitons développer notre application, nous pouvons utiliser la commande suivante pour lancer la création d’un nouveau projet.

ionic start myApp tabs --type ionic1

(Nous venons ici de créer un nouveau projet ionic 1 de type tabs intitulé myApp)

Dans l’invite de commande, placez-vous dans le dossier de l’application (en utilisant la commande cd).

La commande ionic serve permet d’exécuter l’application dans un navigateur.

Lorsque le projet est créé, vous devez éditer vos différentes pages (par ex. sur Notepad++). Les fichiers à modifier se trouvent dans le dossier « www » :

• Le fichier index.html
• Les fichiers .html appartenant au dossier “templates” → C’est ici que vous pouvez modifier le contenu de chaque page de votre application.
• Le fichier app.js dans le dossier “js” → Vous devez définir votre constellation à cet endroit.
• Le fichier controllers.js dans le dossier “js” → Chaque controller est associé à une page html. Vous pouvez utiliser les variables et les fonctions définies dans ces pages grâce aux “Scopes”.

Etape 2 : Visualiser notre application sur un smartphone

Si vous souhaitez utiliser votre application sur votre smartphone, vous pouvez utiliser l’application “ionic view” disponible sur l’App Store et Google Play. Cette application vous permettra de visualiser directement l’application que vous êtes en train de développer sur votre smartphone.

Une fois l’application installée, vous devez ensuite vous rendre sur ce site, créer un compte, puis cliquez sur “New App”. Il ne vous reste plus qu’à faire le lien avec votre application et l’envoyer sur votre appareil. Pour cela, dans le dossier de votre application, utilisez les deux commandes suivantes dans votre invite de commande

ionic link 
ionic upload

Ouvrez ensuite ionic view et visualisez votre application.

Vous pouvez également, après avoir branché votre téléphone et avoir activé le mode debug, utiliser la commande cordova run android afin de simuler directement votre application sur votre téléphone android.

Etape 3 : Connecter notre application à constellation

Afin de connecter notre application à la plateforme constellation, nous allons modifier le fichier app.js ainsi que le index.html.

Pour cela, nous allons importer les bibliothèques suivantes dans le fichier index.html :

• jquery-2.2.4.min.js
• jquery.signalr-2.2.1.min.js
• Constellation-1.8.1.min.js
• ngConstellation-1.8.1.min.js

Les librairies sont disponibles sur cette page. Nous vous conseillons de créer un dossier intitulé constellation dans le dossier « lib » et d’y enregistrer ces différentes bibliothèques.

Il ne vous restera plus qu’à ajouter les lignes de code suivantes dans le fichier index.html :

<script type="text/javascript" src="lib/constellation/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="lib/constellation/jquery.signalr-2.2.1.min.js"></script>
<script type="text/javascript" src="lib/constellation/Constellation-1.8.1.min.js"></script>
<script type="text/javascript" src="lib/constellation/ngConstellation-1.8.1.min.js"></script>

Puis nous allons ajouter le code suivant à notre fichier app.js :

1. Modifier la ligne angular.module, y ajouter ‘ngConstellation’ comme ci-dessous :

angular.module('starter', ['ionic', 'starter.controllers', 'ngConstellation'])

2. Modifier la fonction .run, y ajouter $rootScope et constellationConsumer :

.run(function($ionicPlatform, $rootScope, constellationConsumer)

3. Ajouter le code suivant dans la fonction .run :

constellationConsumer.initializeClient("http://192.168.43.171:8088", "123456789", "Application Ionic");
    constellationConsumer.onConnectionStateChanged(function (change) {
        if (change.newState === $.signalR.connectionState.connected) {
            console.log("Connecté à constellation");
            $rootScope.isConnected = true;
        }
    });
    constellationConsumer.connect();
    $rootScope.constellation = constellationConsumer;

Vous pouvez maintenant vérifier que vous êtes bien connecté à votre constellation en regardant dans votre console (f12 dans votre navigateur).

Etape 4 : Connecter notre application à la boîte aux lettres

Un certain nombre de State Objects et de Message Callbacks ont été réalisés dans notre package constellation afin de traiter nos différentes informations (ce package est disponible sur gitHub).

Le rôle de notre application ici est simplement de s’abonner aux State Objects et d’envoyer des messages Callbacks à notre constellation.

→ Exemple de récupération d’un State Object :

Les StateObjects se récupèrent dans le fichier app.js, à l’endroit où nous avons défini notre constellation. Voici un exemple de code correspondant à notre State Object « Users » :

//State Object Utilisateurs
constellationConsumer.registerStateObjectLink("*", "Brain", "Users", "*", function(so) {
    $rootScope.Users = so.Value;
    $rootScope.$apply();
});

Pour afficher nos utlisateurs, il nous suffit maintenant, dans notre page html d’utiliser le code suivant :

<ion-item ng-repeat="user in Users">
  <h2>{{user.firstName}} {{user.name}}</h2>
  <p>{{user.client ? "client":"facteur"}}</p>
</ion-item>

→ Exemple d’envoi d’un message Callback :

Les messages Callbacks s’envoient dans le fichier controllers.js. Voici l’exemple de code pour le Message Callback « DeleteUser » :

//Message CallBack DeleteUser
$scope.name = $stateParams.name
$scope.firstName = $stateParams.firstName;
$scope.deleteUser = function() {
    var deleteUser = $ionicPopup.confirm({
      title: 'Supprimer cet utilisateur',
      template: 'Etes vous sur de vouloir supprimer cet utilisateur ?'
    });
    deleteUser.then(function(res) {
      if(res) {
          $rootScope.constellation.sendMessage({ Scope: 'Package', Args: ['Brain'] }, 'DeleteUser', [$scope.firstName, $scope.name ]);
          $state.go('tab.utilisateurs');
          console.log('deleted');
      } 
      else {
          console.log('do nothing');
      }
    });
};

Dans notre page html, on appelle maintenant la fonction créée dans notre controller.js dans un bouton par exemple :

<button ng-click="deleteUser()">Supprimer cet utilisateur</button>

En vous servant de cette base, vous pouvez réaliser une application vous permettant de recevoir un message sur votre application lorsque vous recevez un courrier ou un colis mais aussi d’ajouter ou de supprimer des accès à la boite aux lettres.

Il est également possible de réutiliser des packages existants, par exemple, nous nous sommes servis du package PushBullet afin de recevoir des notifications sur notre smartphone.

Voici un aperçu de notre application ionic :

The post Créer une boite aux lettres connectée avec Constellation appeared first on Constellation.

Introduction

Nous sommes 5 étudiants en troisième année de Cycle Informatique et Réseaux à l’ISEN et nous avons conçu un nouveau concept de solution fitness basée sur un miroir. Pour réaliser notre projet, nous avions un budget de 0€ mais nous avions surtout une grande motivation pour créer un produit innovant et agréable à utiliser.

C’est pour cela que nous avons utilisé des produits de récupérations. En effet, nous avons tous dans notre garage un ordinateur portable que nous n’utilisons plus, une ancienne webcam, et quelques planches de contreplaqué. Concernant l’aspect miroir, nous avons utilisé du film sans tain car nous en avions déjà, cependant, pour une dizaine d’euros de plus, vous pourrez utiliser une vitre sans tain. Cette dernière donnera un rendu bien meilleur à votre miroir. Voilà qui devrait suffire pour la partie matérielle de notre projet.

Pour la partie logicielle, nous avons utilisé la plateforme Constellation. Les lecteurs réguliers de ce magazine la connaissent déjà, pour les autres, il s’agit d’une plateforme technique d’orchestration et d’interconnexion des objets, des services et des applications. Elle s’appuie sur des paquets qui peuvent publier et consommer des messages ainsi que sur des fonctions partagées. Concrètement, avec Constellation, en quelques lignes, il devient très simple de connecter des objets (ou applications) entre eux. Ces derniers vont donc dialoguer via Constellation comme le feraient des micro-services. L’avantage d’utiliser cette plateforme pour un tel projet c’est la facilité avec laquelle nous avons pu connecter et déployer les différentes briques de notre miroir. Pour en savoir plus sur cette technologie, vous pouvez vous rendre sur http://www.myconstellation.io/

Pour résumer, en raison d’un coût très faible et d’un développement simplifié, S-Fit est le projet parfait pour vous occuper cet été.

Fonctionnement général

Nous avons tout d’abord pensé S-Fit comme une application dotée d’un podomètre. Cette dernière synchronise les différents profils des membres de la famille en temps réel grâce à Constellation. Vous pouvez ainsi y gérer vos propres objectifs et surveiller votre progression. Vous ne perdrez pas votre motivation grâce à notre système de trophées qui vous donnera envie de repousser vos limites chaque jour. Comme il n’existe pas de meilleure motivation que la compétition, vous pourrez vous comparer à vos proches grâces à des outils d’analyse s’appuyant sur une série de graphiques.

Pour vous rappeler vos objectifs chaque matin, nous avons ajouté à S-Fit un miroir compagnon. Ce dernier a demandé beaucoup de réflexion car il s’agit d’un nouvel objet avec lequel il faut interagir de manière naturelle. De plus, il fallait faire de ce dernier un bel objet que l’on puisse retrouver chez soi. Nous avons donc fait le choix d’une interface minimaliste qui affiche seulement les informations pertinentes : la météo, les évènements à venir et votre progression. De ce fait, pas besoin de toucher le miroir et d’y laisser des traces de doigts.

Pour gérer les multiples profils, nous avons également intégré un module de reconnaissance faciale qui permettra au miroir d’afficher des informations personnalisées en fonction de son utilisateur.

Comme vous vous en doutez surement, le lien entre l’application et le miroir se fait par l’intermédiaire de la plateforme Constellation. Tout est synchronisé en temps réel et cela fonctionne comme par magie.

Etape 1 : Conception du boîtier

Pour commencer, il faut démonter votre vieil ordinateur, afin d’en récupérer la dalle LCD. On utilise ensuite la référence de cette dernière pour pouvoir se procurer le contrôleur adapté.

Ensuite, il faut concevoir un boîtier capable d’accueillir l’ensemble de votre appareil. Son épaisseur et ses dimensions dépendent donc de votre miroir. Nous ne fournirons donc pas de plans pour rendre votre création unique.

Attention toutefois à prévoir des espaces pour l’aération, l’alimentation et les contrôles de la dalle.

C’est la partie la plus personnelle du projet, c’est le moment de libérer votre créativité pour mettre en place votre vision de S-Fit.

Nous avons également prévu une trappe d’accès à l’arrière pour pouvoir modifier notre miroir plus tard.

Si vous avez fait le choix du film sans tain, il va falloir le poser. Pour cela, voici les quelques étapes à suivre :

• Nettoyer votre dalle à l’aide d’un chiffon doux
• Appliquer un peu d’eau savonneuse sur celle-ci
• Poser le film sans tain petit à petit en vous aidant d’un grattoir. Attention à ne pas rayer le film avec, c’est très fragile !
• Chassez, toujours avec ce grattoir, les dernières bulles d’air

Prenez bien votre temps lors de la pose, c’est une partie très délicate et elle affectera directement l’esthétique de votre miroir.

Vous avez maintenant l’ensemble des pièces qui vont constituer votre miroir. Pour terminer, il ne vous reste plus qu’à tout assembler en faisant attention à bien aligner la dalle et le boîtier.

Si vous souhaitez intégrer un module de reconnaissance faciale, il va falloir ajouter une webcam (USB).

Pour cela, il faut la démonter, récupérer le circuit et le fixer dans le boîtier.

Etape 2 : Le développement logiciel

Etape 2.1 : L’interface du miroir

Pour réaliser le miroir, nous avons choisi de concevoir une application web avec AngularJS. En effet, comme le dit le créateur de Constellation, Sébastien Warin, on peut connecter n’importe quoi avec quelques lignes de code qui vont bien.

Tout d’abord, il est important de rappeler que pour continuer ce tutoriel, il est nécessaire d’avoir une Constellation déployée chez soi. Vous trouverez la plateforme ainsi que les tutoriels de prise en main sur le portail https://developer.myconstellation.io/

Nous allons donc pouvoir connecter notre application Angular à Constellation :

var app = angular.module('Mirror', ['ngConstellation']);

app.controller('MyController', ['$scope', 'constellationConsumer', ($scope, constellation) => {

    constellation.initializeClient("maconstellation.local", "masupercle123", "MyMirror");

    constellation.connect();

}]);

Il ne reste plus qu’à s’abonner aux StateObjects de Constellation que l’on veut voir sur le miroir. Par exemple, ici, nous allons récupérer la météo dans la ville de Lille :

constellation.registerStateObjectLink("*", "ForecastIO", "Lille", "*", (so) => {
    $scope.$apply(() => {
        $scope.temperature = so.Value.currently.temperature;
    });
});

Pour en savoir plus, vous pouvez vous rendre sur le portail dont le lien se trouve plus haut pour y trouver la documentation complète. Vous trouverez d’ailleurs un tutoriel détaillé sur l’utilisation de Constellation en JavaScript. Mais rassurez vous, ce n’est pas plus compliqué que cela. Il ne manque que quelques lignes d’HTML et de CSS pour donner vie à votre miroir.

Si on continue l’exemple de la météo, le code HTML associé pourrait-être le suivant :

<p>{{temperature}}</p>

On obtiendrait alors une page sur laquelle la température va s’afficher dynamiquement.

Etape 2.2 : La reconnaissance faciale

Comme nous l’expliquions plus haut, nous avons ajouté un module de reconnaissance faciale pour gérer plusieurs profils. Il s’agit d’une partie facultative et plutôt complexe.

Pour cela, nous avons utilisé une application open source existante qui s’appuie sur EMGU.CV. C’est un portage en C# d’OpenCV. Malheureusement, cette application était trop ancienne et nous n’avons pas réussi à la connecter directement à Constellation. Pour résoudre ce problème, nous avons conçu un paquet Constellation qui permet de publier et de s’abonner aux StateObjects par l’intermédiaire de sockets TCP.

Lors de l’ajout d’un nouvel utilisateur S-Fit, le paquet lance la séquence d’enregistrement d’un visage automatiquement.

Nous avons effectué plusieurs essais sur la quantité d’images à enregistrer, afin d’obtenir l’équilibre idéal entre une reconnaissance optimale et un minimum d’espace utilisé. Pour vous reconnaître, l’algorithme s’appuie sur plusieurs caractéristiques faciales, comme la forme du nez, de la bouche, des yeux, de vos sourcils…

De par le peu d’espace pris par la reconnaissance, vous pouvez aisément enregistrer toute votre famille, afin que le miroir devienne un élément à part entière de votre lieu de vie, et que tout le monde participe à la compétition !

La reconnaissance faciale se déroule en deux étapes. La première consiste à détecter un visage. Pour cela nous avons utilisé le classificateur Haar car il nous fallait une reconnaissance faciale en temps réel. Le classificateur Haar est, en fait, un fichier xml contenant une quantité énorme de photos dites négatives et positives. Les photos positives contiennent un visage, tandis que les photos négatives n’en contiennent pas. Cela permet donc de savoir si un visage est présent sur une photo ne faisant pas partie du classificateur. À noter qu’il est possible de créer soi-même son propre classificateur ou même d’en améliorer un.

Ici, nous nous servons donc de ce dernier afin de vérifier si, sur la frame actuelle, un visage est présent ou non de la sorte :

gray_frame = currentFrame.Convert<Gray, Byte>();

MCvAvgComp[][] facesDetected = gray_frame.DetectHaarCascade(Face, 1.2, 10, Emgu.CV.CvEnum.HAAR_DETECTION_TYPE.DO_CANNY_PRUNING, new Size(50, 50));

Ceci va donc insérer dans le tableau facesDetected[0] tous les visages ayant eu un résultat positif après comparaison avec le classificateur Haar.

Dans un second temps, on cherche à reconnaître une personne à l’aide de son visage, l’application dispose donc d’une architecture très simple divisée en trois classes C#. La classe principale va capturer le flux vidéo de la webcam puis par la suite analyser chaque image via la classe de reconnaissance de personne qui, elle, aura au préalable chargé les données des personnes déjà enregistrées. La dernière classe sert, quant à elle, à enregistrer une personne en prenant une centaine de photos du visage de celle-ci.

Pour communiquer avec notre package, nous avons également ajouté une classe TCPClient.cs qui se connecte et échange les StateObjects via le réseau.

C’est d’ailleurs les paquets reçus qui vont démarrer les fonctions d’ajout d’utilisateur.

Pour rendre la gestion des utilisateurs agréable, nous avons intégré cette reconnaissance faciale de manière totalement transparente. Lorsqu’un utilisateur s’enregistre dans l’application il doit être face au miroir. Pour vérifier cela, l’utilisateur sera invité à saisir un code à six chiffres qui s’affichera quelques secondes sur le miroir. Une fois l’ensemble des informations saisies dans l’application, le miroir va automatiquement lancer une séquence de capture de 100 clichés du nouvel utilisateur.

Pour la reconnaissance des utilisateurs enregistrés, le paquet de reconnaissance faciale va capturer une image chaque seconde pour vérifier la présence ou non d’un individu connu.

Lorsque deux utilisateurs enregistrés sont face au miroir, ce dernier va se concentrer sur celui qu’il identifie le mieux.

Etape 2.3 : L’application mobile

L’application S-Fit a été conçue avec les frameworks Ionic 3 et Apache Cordova. Ces frameworks permettent d’obtenir une application Web à l’intérieur d’une application native Android ou iOS qui embarque un serveur NodeJS sur le mobile. Comme nous l’avons vu plus haut, l’application qu’affiche le miroir est une page web, l’application mobile utilise donc les mêmes technologies.

Ainsi, la connexion s’effectuera tout aussi simplement :

var constellation = $.signalR.createConstellationConsumer("maconstellation.local", "masupercle123", "MonApp");

constellation.connection.start();

Une application comme la nôtre peut alors consommer des StateObjects mais également envoyer des MessageCallbacks. C’est à dire exécuter des fonctions directement sur la Constellation. C’est particulièrement utile pour incrémenter le compteur de pas.

Nous avons découpé notre application en trois grandes parties : la gestion des profils, les activités et les trophées.

Gestion des profils

Comme S-Fit est pensé pour plusieurs utilisateurs, nous avons géré les profils dans notre application.

Lorsqu’un utilisateur lance l’application, il peut choisir son profil. Cette action va établir la connexion avec la Constellation pour récupérer les informations personnelles et l’historique d’activités. Toutefois, s’il n’a pas de profil, il peut en ajouter un s’il est en face du miroir, qui lui affichera alors un code de vérification. Lors du lancement de l’application, cette dernière synchronise instantanément les nouvelles données d’activités avec le serveur Constellation.

L’utilisation d’S-Fit est totalement transparente et ne demande pas de manipulation particulière de l’utilisateur. En effet, nous avons cherché à fournir un produit simple, accessible et entièrement automatisé. Cette synchronisation est permise par Constellation.

Les activités

Cette partie se compose d’un podomètre, d’un récapitulatif de la journée en cours et d’un historique sous forme de graphiques.

Pour le podomètre, nous nous sommes appuyés sur un plugin de Cordova permettant d’accéder aux données de l’accéléromètre du mobile. A l’aide des données fournies par ce plugin, nous avons pu étudier les variations sur les axes x, y et z, dans l’optique de compter les pas.

L’application récupère donc les données accélérométriques de votre mobile toutes les 0.120 secondes. C’est une valeur que nous avons retenue après plusieurs jours de tests pour affiner la précision du compteur de pas, puis, en s’appuyant sur les précédentes valeurs, on va déterminer si le mouvement effectué est un pas ou non, et donc informer Constellation si elle doit incrémenter le nombre de pas de l’utilisateur.

Le développement de cette application ne se résume pas qu’à de la programmation informatique. Nous avons également réalisé des mesures sur plusieurs dizaines de personnes afin d’obtenir un lien entre la morphologie et la longueur des pas

var slope = 0.64878048 ;
var origin = 44.6744 ;

function getDistance(size, stepCounter) {
    return (size * slope - origin) * stepCounter;
}

Avec les informations physiologiques et l’activité de l’utilisateur, on peut donc créer un ensemble de fonctions qui permettent d’étudier son état de santé, en calculant par exemple les calories dépensées chaque jour. C’est grâce à ces données qu’il est possible de créer une application fitness entièrement maîtrisée. On est alors libre d’appliquer les algorithmes souhaités sur les données récupérées.

Pour la page des graphiques sur l’application mobile, nous avons utilisé la bibliothèque Chart.js qui permet de tracer des graphiques dynamiques avec un rendu épuré. Son principal avantage est la prise en main rapide de la bibliothèque ainsi que toutes ses options.

Voici un exemple pour tracer un graphique linéaire

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

Cependant, il faut tout d’abord récupérer les informations présentes dans les StateObjects pour les afficher dans les graphiques. Cela nous permet de faire des graphes qui se mettent à jour en temps réel.

Les trophées

Comme nous l’expliquions plus haut, nous avons intégré un système de trophées et de récompense. Il se présente tout d’abord comme une liste de trophées que l’on débloque en réalisant des succès particuliers (pas, distance).

Les trophées montrent votre expérience sur S-Fit, et représentent donc la récompense pour vos efforts. Lorsque l’on clique sur un trophée débloqué, on affiche son détail et le nombre de points qu’il a rapporté.

Conclusion

Voilà qui conclue les grandes étapes de la réalisation de S-Fit. Comme vous avez pu le voir les possibilités de personnalisation sont très nombreuses. C’est un projet ludique et facile à réaliser. C’est également un bon point de départ pour prendre en main la plateforme Constellation. Nous espérons vraiment qu’il vous a plu et que vous allez réaliser votre propre version.

Nous tenons également à remercier Julie, Adrien et tous ceux qui se sont impliqués de près ou de loin dans la réalisation de ce projet.

Auteurs : Valentin BEQUART, David BRICENO-AGUILERA, Pierre-Alexandre CHOAIN, Milan FERTIN et Hugo MROCZKOWSKI.

The post S-Fit : Concevez un miroir connecté orienté fitness appeared first on Constellation.

Ces deux nouvelles versions sont disponibles sur le repository Nuget depuis votre Visual Studio et sur le CDN Constellation.

Amélioration des méthodes sendMessage et sendMessageWithSaga

La version 1.8.2 de l’API Javascript et AngularJS améliore l’usage de ces deux méthodes.

Invoquer un MessageCallback sans paramètre

Lorsque vous invoquez un MessageCallback qui ne prend pas de paramètre d’entrée, il n’y a plus besoin de passer un objet vide « {} » dans les méthodes sendMessage et sendMessageWithSaga.

Un exemple pour bien comprendre :

// Mode Legacy
constellation.server.sendMessage({ Scope: 'Package', Args: ['DemoPackage'] }, "UneMethodeSansParam", "{}");

// Avec la lib 1.8.2
constellation.server.sendMessage({ Scope: 'Package', Args: ['DemoPackage'] }, "UneMethodeSansParam");

Notez que vous pouvez toujours utiliser la forme « legacy », il n’y a pas de « breaking change » lorsque vous allez mettre à jour la libraire Javascript.

Cette nouveauté est également portée sur la libraire AngularJS :

// Legacy :
constellation.sendMessage({ Scope: 'Package', Args: ['DemoPackage'] }, "UneMethodeSansParam", "{}");

// Avec la lib 1.8.2
constellation.sendMessage({ Scope: 'Package', Args: ['DemoPackage'] }, "UneMethodeSansParam");

De plus, cet ajout est également disponible sur la méthode sendMessageWithSaga.

Invoquer un MessageCallback avec plusieurs paramètres

Lorsque vous invoquez un MessageCallback qui prend plusieurs paramètres, il n’y a plus besoin de les encapsuler dans un tableau que ce soit dans la méthode sendMessage ou sendMessageWithSaga.

Un exemple pour bien comprendre :

// Mode legacy
constellation.server.sendMessage({ Scope: 'Package', Args: ['DemoPackage'] }, 'UneMethodeAvecPlusieurParams', [ 'input', 2, 4, false ]);

// Avec la lib 1.8.2
constellation.server.sendMessage({ Scope: 'Package', Args: ['DemoPackage'] }, 'UneMethodeAvecPlusieurParams', 'input', 2, 4, false);

Dans la forme legacy les 4 paramètres à passer pour invoquer le MessageCallback « UneMethodeAvecPlusieurParams » sur le package DemoPackage étaient encapsulés dans un tableau. Désormais depuis la version 1.8.2, vous pouvez passer vos paramètres les uns dernière les autres dans les méthodes sendMessage ou sendMessageWithSaga.

Bien évidement vous pouvez toujours utiliser la forme « legacy », il n’y a pas de « breaking change » lorsque vous allez mettre à jour la libraire Javascript. Cette nouveauté est également portée sur la libraire AngularJS et aussi disponible sur la méthode sendMessageWithSaga.

Invoquer un MessageCallback avec message de retour (saga)

Pour uniformiser la signature de la méthode sendMessageWithSaga avec les API Python, .NET ou Arduino, le callback de retour est désormais le 1er argument de la méthode sendMessageWithSaga et non le dernier. De plus cela facilite le traitement par rapport au point cité ci-dessus.

// Legacy
constellation.server.sendMessageWithSaga({ Scope: 'Package', Args: ['DemoPackage'] }, 'MethodeAvecReponse', ['input', 2, 4, false],
    function (response) { console.log("Message de reponse = ", response); });

// Avec la lib 1.8.2
constellation.server.sendMessageWithSaga(function (response) {
    console.log("Message de reponse = ", response);
}, { Scope: 'Package', Args: ['DemoPackage'] }, 'MethodeAvecReponse', 'input', 2, 4, false);

Dans le mode « legacy » le callback de retour était le dernier argument de la méthode sendMessageWithSaga. De plus comme expliqué ci-dessous tous les arguments à passer au MessageCallback devaient être encapsulés dans un tableau (3ème argument de la méthode sendMessageWithSaga).

Désormais depuis la version 1.8.2, le callback de retour est passé en première et vous pouvez passer vos paramètres les uns dernière les autres comme vu précédemment.

Une nouvelles fois, vous pouvez toujours utiliser la forme « legacy », il n’y a pas de « breaking change » lorsque vous allez mettre à jour la libraire Javascript et cette nouveauté est également portée sur la libraire AngularJS.

Support du hub « Package »

Désormais la libraire Javascript 1.8.2 intègre le proxy permettant de communiquer avec le hub « Package » car jusqu’à présent elle ne permettait qu’une communication avec le hub « Consumer » et « Controller » (relire cette introduction pour plus d’explications sur la lib JS).

Autrement dit il est désormais possible d’écrire des packages (virtuel) en Javascript en profitant de toutes les fonctionnalités propres aux packages (possibilité d’écrire des logs, de définir et récupérer des settings déclarés sur le serveur, de publier des StateObject, etc…).

Bien entendu cela n’a pas grand intérêt dans une page Web qu’on considère plutôt comme un Consommateur car elle a un cycle de vie éphémère (relire les concepts ici). Mais par contre cette libraire ouvre la voie pour pouvoir écrire des packages Javascript basés sur un technologie comme NodeJS qui permet de réaliser de « véritable application » en Javascript.

Le changelog complet est disponible ici.

The post Nouvelles API Javascript et AngularJS 1.8.2 appeared first on Constellation.

Pour cela nous allons utiliser une matrice de 8×8 LEDs pilotable en I²C que vous pouvez trouver chez Adafruit pour environ 15€. Pour piloter cette matrice nous allons utiliser un ESP8266, ici un D1 Mini Pro (environ 6€).

Prérequis

Pour réaliser ce tutoriel, vous aurez besoin :

• Un serveur Constellation
• Un ESP8266
• Une matrice de LED I²C

Si c’est la première fois que vous utilisez un ESP8266 connecté à Constellation, je vous recommande de suivre ce guide d’introduction avant de commencer !

Etape 1 : connecter la matrice de LED

Nous avons ici utilisé un D1 Mini Pro, un ESP8266 intégrant nativement une interface de programmation USB, très pratique pour créer des prototypes rapides.

La matrice de LED se connecte à l’ESP8266 en I²C. Nous avons utilisé les fils Noir et Blanc pour alimenter la matrice depuis les pins “5V” et “GND” du D1 Mini ainsi que les fils Bleu et Vert pour connecter les ports D1 et D2 du D1 Mini aux ports SCL et SDA de la matrice de LED :

Et voilà le montage est déjà fini ! Vous pouvez maintenant connecter votre D1 Mini en USB à votre PC pour le programmer.

Etape 2 : programmer l’ESP8266

Pour démarrer vous devez dans Constellation déclarer une sentinelle associée à une clé d’accès et un package virtuel. Ici notre ESP8266 est représenté par la sentinelle nommée « ESP8266 » et le package virtuel se nomme « MatrixController ».

Dans l’Arduino IDE, nous créons un nouveau projet à partir du Starter Kit Constellation pour ESP8266 dans lequel nous allons définir le nom de notre réseau Wifi (SSID) ainsi que sa clé d’accès  puis nous configurerons le client Constellation en spécifiant l’identité de notre package virtuel, sa clé d’accès et l’adresse/port de notre serveur Constellation :

// ESP8266 Wifi
#include <ESP8266WiFi.h>
char ssid[] = "MON SSID";
char password[] = "macléWifi!!!!";

// Constellation client
Constellation<WiFiClient> constellation("X.X.X.X", 8088, "ESP8266", "MatrixController", "xxxxxxxxxxxxxxxxx");

Encore une fois si tout cela est nouveau pour vous, je vous recommande de suivre ce guide d’introduction à l’API Constellation pour Arduino/ESP8266.

Maintenant que la coquille de notre package virtuel sur ESP8266 est prête, ajoutons les librairies d’Adafruit pour piloter la matrice de LED bicolore.

Dans le gestionnaire de bibliothèque (menu Croquis > Inclure une bibliothèque), installez les librairies suivantes :

• Adafruit GFX
• Adafruit LED Backpack

Puis dans votre code, ajoutez ces librairies et déclarez une variable de type « Adafruit_BicolorMatrix » que nous nommerons « matrix » :

#include "Adafruit_LEDBackpack.h"
#include "Adafruit_GFX.h"
#include <Wire.h>
Adafruit_BicolorMatrix matrix = Adafruit_BicolorMatrix();

Au démarrage, dans la méthode « setup() », initialisez la matrice de LED. Pour rappel nous avons branché la matrice I²C sur les ports D1 et D2 :

// Init matrix led
Wire.begin(D1, D2);
matrix.begin(0x70);

Toujours dans la méthode d’initialisation, enregistrons un premier MessageCallback que nous allons nommer « SetPixel ». Ce MessageCallback permettra d’allumer ou éteindre un pixel de la matrice.

Nous le déclarons avec 4 paramètres d’entrée :

• x et y pour définir la position du pixel à piloter
• state : un boolean indiquant si le pixel doit être allumé ou éteint
• clear: un paramètre optionnel de type boolean pour indiquer si il faut effacer la matrice avant (par défaut « true »)

Comme vous le constatez ci-dessous, le code de ce MessageCallback commence par effacer la matrice si le dernière paramètre (clear) n’est pas défini (car optionnel) ou si il est à « true » en invoquant la méthode « matrix.clear()« .

Ensuite on appelle la méthode « drawPixel » en passant les arguments de notre MC, à savoir le « x », le « y » et le « state ».

Si le paramètre « state » est vrai, on allume le pixel en vert (LED_GREEN) sinon on l’éteint (LED_OFF).

Le code est donc :

// Register SetPixel
constellation.registerMessageCallback("SetPixel",
  MessageCallbackDescriptor().setDescription("Set Pixel On or Off").addParameter<int>("x").addParameter<int>("y").addParameter<bool>("state", "ON or OFF").addOptionalParameter<bool>("clear", true, "Clear matrix before drawn"),
  [](JsonObject& json) {
    if(json["Data"].size() < 4 || json["Data"][3].as<bool>()) {
      matrix.clear();
    }
    matrix.drawPixel(json["Data"][0].as<int>(), json["Data"][1].as<int>(), json["Data"][2].as<bool>() ? LED_GREEN : LED_OFF);  
    matrix.writeDisplay();
 });

Comme il s’agit d’une matrice bicolore, on peut allumer chaque pixel en vert ou en rouge, ou bien en vert ET en rouge ce qui donne du orange.

Nous allons donc ajouter un deuxième MessageCallback que nous nommerons « SetPixelColor » sensiblement identique au premier, sauf que le paramètre « state » est maintenant de type  « int » et se nomme « color ».

D’après les constantes de la librairie d’Adafruit, LED_GREEN = 2, LED_OFF = 0, le rouge (LED_RED) = 1 et le Orange/Jaune = 2. Le code est donc :

// Register SetPixelColor
constellation.registerMessageCallback("SetPixelColor",
  MessageCallbackDescriptor().setDescription("Set Pixel On or Off").addParameter<int>("x").addParameter<int>("y").addParameter<int>("color", "0 = Off, 1 = red, 2 = orange, 3 = green").addOptionalParameter<bool>("clear", true, "Clear matrix before drawn"),
  [](JsonObject& json) {
    if(json["Data"].size() < 4 || json["Data"][3].as<bool>()) {
      matrix.clear();
    }
    matrix.drawPixel(json["Data"][0].as<int>(), json["Data"][1].as<int>(), json["Data"][2].as<int>());  
    matrix.writeDisplay();
 });

Pour finir, ajoutons un troisième et dernier MessageCallback pour effacer l’écran :

// Register Clear
constellation.registerMessageCallback("Clear",
  MessageCallbackDescriptor().setDescription("Clear matrix"),
  [](JsonObject& json) {
    matrix.clear();
    matrix.writeDisplay();
 });

Vous pouvez téléverser le programme puis en vous connectant sur le MessageCallbacks Explorer de la Console Constellation vous constaterez que les trois MessageCallbacks sont bien référencés dans votre Constellation.

Votre ESP8266 est prêt ! Vous pouvez tester les MC directement depuis la Console pour vous assurer que tout fonctionne correctement :

Par exemple en invoquant le MessageCallback « SetPixel » avec x=1, y=2 et state=true, le résultat est instantanément visible sur la matrice :

Etape 3 : créer une page Web

Maintenant que notre matrice connectée est prête, créons une page Web pour pouvoir la piloter.

Pour cela nous allons créer une grille de 8×8 représentant la matrice sur laquelle nous pourrions dessiner à la sourie ou au droit (touch) avec la possibilité de choisir la couleur entre le verte, le roue et le orange. Nous allons utiliser le Canvas HTML5 pour cela.

Inutile d’utiliser le framework AngularJS pour cela, nous utiliserons la librairie Constellation pour Javascript.

Commençons donc par créer une page HTML classique dans laquelle ajoutons dans l’entête <head> les scripts nécessaires pour connecter la page à Constellation :

<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.myconstellation.io/js/Constellation-1.8.1.min.js"></script>

Nous avons également ajouté la meta « viewport » pour adapter proprement notre page sur un mobile.

Dans le corps <body> de notre page ajoutons un canvas pour la grille, la liste des couleurs possibles et un bouton pour effacer l’écran :

<canvas id="canvas" width="400" height="400"></canvas>

<ul id="colors">
    <li><a href="#" data-colorId="0" data-color="white">Eraser</a></li>
    <li><a href="#" data-colorId="1" data-color="red" class="selected">Rouge</a></li>
    <li><a href="#" data-colorId="2" data-color="orange">Orange</a></li>
    <li><a href="#" data-colorId="3" data-color="green">Vert</a></li>
</ul>

<button id="clear">Clear</button>

Vous remarquerez que nous stockons dans des attributs « data- » l’ID de la couleur de la matrice de LED (0 à 3) et le nom de la couleur HTML équivalente (ex. red = 1). La couleur sélectionnée est repérée par la classe CSS « selected ».

Pour la mise en page justement, ajoutez le code CSS dans une balise <style> dans la page :

body {
    text-align:center; 
    background:#e9e9e9
}        
#canvas {
    margin:0 auto 20px auto; 
    display:block; 
    background:#fff; 
    cursor:crosshair
}
#colors {
    list-style:none; 
    margin:0 0 20px 0;
    padding:0
}
#colors li {
    display:inline-block
}
#colors a {
    display:inline-block; 
    width:50px; 
    height:50px; 
    margin-right:10px; 
    text-indent:-4000px; 
    overflow:hidden; 
    border-radius:50%
}
#colors a.selected {
    border:2px solid #000; 
    width:45px; 
    height:45px
}
button {
  border-radius: 8px;
  padding: 10px 20px 10px 20px;
  color: #ffffff;
  font-size: 20px;
  background: #808080;
}

Enfin, passons au code Javascript de notre page. Ouvrez une balise <script> pour ajouter le code ci-dessous.

On commence tout d’abord par déclarer la taille de notre matrice (8×8) ainsi que le client « consumer » de Constellation en spécifiant l’adresse/port de votre serveur Constellation ainsi qu’une clé d’accès pour pouvoir s’y connecter.

Ensuite on déclare les variables globales de notre script.

// Config
var matrixWidth = 8, matrixHeight = 8;
var constellation = $.signalR.createConstellationConsumer("http://x.x.x.x:8088/", "xxxxxxxxxxxxxx", "WebMatrixController"); 

// Global variables
var pixels = [];
var selectedColor = {};
var mouseDown = false;
var canvas, context;
var boxWidth, boxHeight;

On ajoute une fonction « initBoard » pour dessiner notre grille dans le canvas HTML et initialiser le tableau « pixels » qui contiendra l’état de la matrice :

function initBoard() {
    // Init the pixels array
    pixels = [];
    for (var x = 0; x <= matrixWidth; x++) {
        pixels[x] = [];
        for (var y = 0; y <= matrixHeight; y++) {
            pixels[x][y] = 0;
        }
    }
    // Create the vertical lines
    for (var x = 0; x <= matrixWidth; x++) {
        context.moveTo(1 + x * boxWidth, 0);
        context.lineTo(1 + x * boxWidth, canvas.height());
    }
    // Create the horizontal lines
    for (var x = 0; x <= matrixHeight; x++) {
        context.moveTo(0, 1 + x * boxHeight);
        context.lineTo(canvas.width(), 1 + x * boxHeight);
    }
    // Draw lines
    context.lineWidth=1;
    context.strokeStyle = "black";
    context.stroke();
}

On déclare ensuite une fonction « setPixel » qui se chargera à la fois de dessiner dans le canvas la couleur sélectionnée du pixel mais également d’envoyer un message à notre ESP8266 pour invoquer le MessageCallback « SetPixelColor » en spécifiant la position du pixel et la couleur sélectionnée. Le tableau « pixel » permet de n’envoyer le message que si la couleur a changé pour éviter d’envoyer plusieurs fois le même ordre.

function setPixel(x, y) {
    if(pixels[x][y] != selectedColor.color) {
        // Save pixel
        pixels[x][y] = selectedColor.color;
        // Draw on canvas
        context.fillStyle=selectedColor.color;
        context.fillRect(2 + boxWidth * x, 2 +  boxHeight * y, boxWidth - 2, boxHeight - 2);
        // SetPixelColor on ESP8266
        constellation.server.sendMessage({ Scope: 'Package', Args: ['MatrixDesign'] }, 'SetPixelColor', [ x, y, selectedColor.id ]);  
    }
}

Pour l’interaction nous ajoutons trois méthodes :

• moveStart : lorsque la sourie/le doigt (si touch) est posé sur la grille
• move : lorsque la sourie/le doigt (si touch) se déplace sur la grille
• moveEnd : lorsque la sourie/le doigt (si touch) « quitte » la grille

Dans les deux premières méthodes l’idée est de déduire la position du pixel en fonction des arguments de l’événement levé afin d’invoquer la méthode « setPixel » que nous avons déclarée ci-dessus qui se chargera à son tour de dessiner la bonne couleur dans le canvas tout envoyant le message à notre ESP8266.

function moveStart(e, mobile, obj) {
    mouseDown = true;
    // Determine the pixel coordinates
    var event = mobile ? e.originalEvent : e;
    var x = Math.trunc((event.pageX - obj.offsetLeft) / boxWidth);
    var y = Math.trunc((event.pageY - obj.offsetTop) / boxHeight);
    // Block mobile event
    if (mobile) {
        e.preventDefault();
    }        
    // Set pixel
    setPixel(x, y);
}

function move(e, mobile, obj) {
    if (mouseDown) {
        // Determine the pixel coordinates
        var pageX = mobile ? e.originalEvent.targetTouches[0].pageX : e.pageX;
        var pageY = mobile ? e.originalEvent.targetTouches[0].pageY : e.pageY;
        var x = Math.trunc((pageX - obj.offsetLeft) / boxWidth);
        var y = Math.trunc((pageY - obj.offsetTop) / boxHeight);
        // Block mobile event                
        if (mobile) {
            e.preventDefault();
        }     
        // Set pixel
        setPixel(x, y);
    }
}

function moveEnd() {
    mouseDown = false;
}

Il ne reste plus qu’à écrire le code de démarrage de notre page.

On commence par initialiser nos variables globales (instance et taille du canvas, contexte de rendu 2D du canvas). On initialise ensuite la grille par notre méthode « iniBoard » et on se connecte à notre Constellation (constellation.connection.start()).

Pour chaque couleur de notre liste, on affecte la couleur du background définie par son attribut data-color et on ajoute un handler au click de façon à récupéré dans l’objet « selectedColor » la couleur sélectionnée par l’utilisateur.

On affecte également un handler au click du bouton « Clear » pour effacer le Canvas et invoquer le MessageCallback « clear » sur notre ESP8266 afin de vider la matrice.

Et pour finir on attache des handlers aux événements de la souris (mouseDown, mouseMove et mouseUp) et du tactile (touchStart, touchMove et touchEnd) sur nos tris méthodes ci-dessus pour gérer les interactions avec notre grille.

// On page load
$(document).ready(function() {
    // Variables
    canvas = $("#canvas");
    context = canvas[0].getContext('2d');
    boxWidth = (canvas.width() - 2) / matrixWidth;
    boxHeight = (canvas.height() - 2) / matrixHeight;
    // Init board
    initBoard();            
    // Constellation connection
    constellation.connection.stateChanged(function (change) {
        if (change.newState === $.signalR.connectionState.connected) {
            console.log("Je suis connecté !");
        }
    });                
    constellation.connection.start();            
    // For each color buttons
    $("#colors a").each(function() {
        // Set background color
        $(this).css("background", $(this).attr("data-color"));
        // Attach handler on click
        $(this).click(function() {
            // Load the selected color
            selectedColor.id = $(this).attr("data-colorId");
            selectedColor.color = $(this).attr("data-color");
            // Set the selected class
            $("#colors a").removeAttr("class", "");
            $(this).attr("class", "selected");
            return false;                    
        });
        // Load the selected color
        if( $(this).attr("class") == "selected") {
            selectedColor.id = $(this).attr("data-colorId");
            selectedColor.color = $(this).attr("data-color");
        }
    });            
    // Clear button
     $("#clear").click(function() {
        // Clear the matrix
        constellation.server.sendMessage({ Scope: 'Package', Args: ['MatrixDesign'] }, 'Clear', {});
        // Clear the canvas
        var s = document.getElementById ("canvas");
        var w = s.width;    
        s.width = 10;
        s.width = w;
        // Redraw the board
        initBoard();                
     });             
     // Attach Touch events
    canvas.bind('touchstart', function(e) { moveStart(e, true, this); });
    canvas.bind('touchmove', function(e) { move(e, true, this); });
    $(this).bind('touchend', function() { moveEnd(); });
    // Attach Mouse events
    canvas.mousedown(function(e) {  moveStart(e, false, this); });
    canvas.mousemove(function(e) { move(e, false, this); });
    $(this).mouseup(function() { moveEnd(); });
});

Et voilà notre page HTML est prête ! Lancez-la dans notre navigateur et profitez du résultat.

Demos

Quelques démonstrations animées ….

The post Pilotez une matrice de LED avec une page Web en temps réel appeared first on Constellation.

Lorsque nous avons acheté notre maison, nous avons entamé de lourds travaux de rénovation ce qui m’a permis de passer du câble multifonction blindé à chaque point de contrôle (interrupteurs) dans l’optique de pouvoir facilement ajouter des fonctionnalités domotique sans avoir recours à des solutions sans fil comme le Z-Wave assez coûteux.

Après l’installation de pas moins d’une dizaine volets électrique dans la maison, il me fallait une solution de pilotage à la fois simple, fiable et surtout économique. De plus cette solution devra être ouverte me permettant de concevoir ma propre interface de contrôle sur tout type de support et de pouvoir facilement ajouter de l’intelligence.

Grace à la plateforme Constellation, un Raspberry Pi et quelques Arduinos, j’ai pu concevoir mon propre système de gestion des volets.

La conception

Concrètement chaque volet dispose de deux phases : une pour la montée et une autre pour la descente.

L’idée est donc de piloter ces deux phases avec des relais. Pour garder le contrôle manuel des volets (c’est-à-dire à partir des interrupteurs encastrés dans le mur), j’ai connecté chaque interrupteur bistable au système pour déclencher les volets (obligatoire pour une certification WAF J).

Pour cela derrière chaque interrupteur des volets, j’ai placé une carte de contrôle avec deux relais 220V et deux entrées. Chaque carte de contrôle est connectée sur un câble multifonction qui arrive à chaque volet. On utilise donc 6 fils : deux pour les entrées des interrupteurs (montée et descente), deux pour la commande des deux relais (montée et descente) et deux pour l’alimentation (5V ou 12V en fonction de vos relais).

Côté budget, comptez moins de 3€ par volet.

L’ensemble des câbles se rejoignent tous jusque dans ma baie réseau au RDC. Chaque volet a donc besoin de deux sorties pour les relais et deux entrées pour l’interrupteur bistable. Avec 10 volets, ça nous donne donc 20 sorties et 20 entrées, beaucoup trop pour un Raspberry !

Toujours dans l’optique de baisser les coûts, j’utilise un réseau d’Arduino Mini Pro acheté moins de 2€ pièce.

Chaque Arduino peut gérer jusqu’à 3 volets. Ils sont tous installés sur une carte et connectés en série sur un bus I2C sur lequel est également connecté un Raspberry qui sera le cerveau des volets, lui-même connecté dans la Constellation.

N’importe quel objet, page Web ou programme connecté dans la Constellation pourra envoyer un ordre à chaque volet. Chaque ordre sera traité par le package Constellation qui tourne sur le Raspberry qui, commandera l’Arduino associé via le bus I2C qui lui-même activera le relais correspondant à l’ordre de montée ou descente du volet cible !

Conception logicielle

Une fois nos volets connectés sur les cartes relais reliés aux Arduinos, il suffit d’activer les sorties pour basculer l’état des relais et donc piloter la montée ou la descente de chacun de nos volets.

Par exemple pour une montée :

digitalWrite(volets[i].relaisMontee, HIGH);
digitalWrite(volets[i].relaisDescente, LOW);

Pour capter un changement d’état sur les interrupteurs bistables, il suffit de lire l’entrée correspondante configurée en pull-up. Si l’entrée change d’état à l’état LOW c’est qu’on vient d’appuyer sur le bouton de montée :

if (digitalRead(volets[i].buttonMontee) == LOW && volets[i].previousSens != 1)
{
  // Demande de montée
}

Pour la communication des Arduino avec la base Raspberry, j’utilise le protocole I2C. Chaque Arduino à son adresse 0x11 pour le 1^er, 0x12 pour le 2^ème, etc.. en esclave sur le bus. Le Raspberry est maître.

Lors du setup, j’attribue l’adresse de mon Arduino et configure des callbacks pour la réception et l’émission :

Wire.begin(SLAVE_ADDRESS);
Wire.onReceive(receiveData);
Wire.onRequest(sendData);

Pour la lecture, dès qu’il y a quelque chose sur le bus, je récupère un Int dont les deux 1^ers bits m’indiquent le n° du volet, suivi d’un bit pour savoir si je dois allumer ou eteindre le volet. En cas d’allumage, le dernier bit permet de connaitre le sens (montée ou descente) :

while(Wire.available()) 
{
    int dataReceived = 0;
    dataReceived = Wire.read();
    rawVal += dataReceived;
}
int rawInt = rawVal.toInt();
int numVolet = bitRead(rawInt,2) & bitRead(rawInt,3)*2;
int allumageVolet = bitRead(rawInt,1);
int sensVolet = bitRead(rawInt,0);
// Envoyer l'ordre sur les sorties du volet correspondant

Pour connaitre l’état des interrupteurs depuis le Raspberry, chaque Arduino écrit sur le bus un Int avec le même format pour indiquer pour chaque volet son état :

Wire.write(/* int représentant l’état du volet */);

Maintenant que je peux piloter l’ensemble de mes volets depuis mon Raspberry, j’utilise la plateforme Constellation pour tout connecter facilement.

Grace au SDK Constellation dans Visual Studio et aux Python Tools for Visual Studio, j’ai créé un package Constellation en Python.

Le package expose des méthodes dans la Constellation pour le contrôle et publie des « StateObjects » sur l’état de chaque volet.

def ActionVoletMessageCallback(data):
    # Action à envoyer à un volet.
    try:
        volet = GetShutter(data["shutterName"].lower())
        actionStr = data["actionShutter"].lower()
     if actionStr == "montee":
            volet.Open()
        elif actionStr == "descente":
            volet.Close()
        else:
            volet.Stop()
    Constellation.WriteInfo("ActionVolet: %s => %s ", (volet.nom, actionStr))

Les methodes Open/Close/Stop écrivent sur le bus I2C avec la commande I2CSet à destination de l’adresse de l’arduino cible, l’entier représentant l’ordre à exécuter :

commande = 'i2cset -y 1 %s 0x%x' % (self.adresse, i)
os.system(commande)

Pour la lecture sur le bus, j’utilise la commande « i2cget ».

f = os.popen('i2cget -y 1 %s' % self.adresse, 'r')
retour = f.read()

Une fois l’entier représentant l’état de chaque volet décrypté, je publie dans la Constellation un StateObject avec toutes les infos :

# Changement, on met à jour le stateobject
 Constellation.PushStateObject(volet.nom, volet.etat, "Shutter",
   {
       "Adresse": volet.adresse,
       "Numero": volet.numero,
       "Statut inversé" : volet.inverseStatut,
       "Commande inversée" : volet.inverseCommande
   })

Une fois mon package développé, je peux directement depuis Visual Studio le publier sur mon serveur et le déployer sur une sentinelle de ma Constellation.

Au préalable j’ai installé une Sentinelle Constellation sur mon Raspberry. Il me suffit ensuite de lancer mon package depuis l’interface Web de contrôle de ma Constellation.

Cette interface me permet également de suivre en temps réel les logs de mes packages :

Aller plus loin avec Constellation

A ce stade l’état de chaque volet de ma maison est publié dans la Constellation et je suis capable de piloter chacun d’entre eux en envoyer un message dans la Constellation à destination de mon package Python.

La suite logique est de créer une interface de pilotage. Pour cela je vais utiliser l’API Constellation pour AngularJS me permettant de créer une application HTML/JS connectée dans la Constellation avec le framework Angular de Google.

Grace à la Constellation, le code Javascript se résume à cela :

app.controller('ShutterAngularController', ['$scope', 'constellation', function ($scope, constellation) {

    constellation.intializeClient("http://constellation.myhome.lan:8088/", "MonAcessKey", "HomeControl");

    var MesVolets = {};
    constellation.onUpdateStateObject(function (message) {
        $scope.$apply(function () {
            $scope.MesVolets[message.Name] = message;
        });
    });

    constellation.onConnectionStateChanged(function (change) {
        if (change.newState === $.signalR.connectionState.connected) {
            constellation.requestSubscribeStateObjects("*", "ShutterController", "*", "*");
        }
    });

    $scope.actionShutter = function (shutter, action) {
        constellation.sendMessage({ Scope: 'Package', Args: ['ShutterController'] }, 'ActionVoletMessageCallback', { 'shutterName': shutter.Name, 'actionShutter': action });
    };

    constellation.connect();
}]);

Dans mon contrôleur, je me connecte à ma Constellation et je m’abonne au StateObject du package « ShutterController ». A chaque réception d’un state object, je l’ajoute dans mon scope Angular. De plus j’ai ajouté une méthode pour envoyer un message de contrôle à mon package Python.

Il ne reste plus qu’à faire une vue HTML en faisant une boucle sur notre variable de scope « MesVolets » :

<div class="list-group-item" ng-repeat="shutter in ShutterController">
    <h3>                        
        {{shutter.Name}}
        <em class="pull-right btn-group" role="group" aria-label="...">
            <button type="button" 
                class="btn btn-default glyphicon glyphicon-chevron-up" 
                ng-class="{ active: shutter.Value==='Montee' }" 
                ng-click='actionShutter(shutter, "montee")'>
                </button>
            <button type="button" 
                class="btn btn-default glyphicon glyphicon-stop" 
                ng-class="{ active: shutter.Value==='Arret' }" 
                ng-click='actionShutter(shutter, "stop")'>
                </button>
            <button type="button" 
                class="btn btn-default glyphicon glyphicon-chevron-down" 
                ng-class="{ active: shutter.Value==='Descente' }" 
                ng-click='actionShutter(shutter, "descente")'>
                </button>
        </em>
    </h3>
</div>

Et voilà comment créer une première interface Web de supervision et de contrôle de l’ensemble des volets à la maison.

Les propriétés des volets étant exposées dans la Constellation, il devient facile d’ajouter de l’intelligence dans la maison. Par exemple, j’ai également un autre Raspberry avec un capteur de luminosité TSL2561 dans ma Constellation ce qui me permet d’ouvrir et fermer les volets en fonction du seuil de luminosité ou encore de fermer automatiquement les volets lorsque je lance un film sur mon XBMC (XBMC/Kodi étant lui-même connecté dans ma Constellation).

Grace à la plateforme Constellation, l’interconnexion des objets devient un jeu d’enfant comme l’orchestration et le déploiement de mes programmes à travers les différents devices de la maison.

Ainsi, moyennant un budget inférieur à 100€, j’ai pu connecter et rendre intelligents mes dix volets.

Lucas Dupuis

The post Connecter ses volets dans la Constellation avec des Arduino et un Raspberry appeared first on Constellation.

Prérequis

• Un Arduino connecté ou un ESP8266
• Des capteurs (DHT11 pour l’humidité et la température, un TSL2561 pour la luminosité par exemple)
• Un serveur Constellation

Etape 1 : le montage

Ici nous utiliserons un D1 Mini Pro (ESP8266) avec un capteur DHT11 combinant la mesure de la température et de l’humidité ainsi qu’un capteur TSL2561 pour la luminosité.

Les deux capteurs seront alimentés en 3,3v par la D1 Mini.

Le TSL2561 dispose d’une interface I²C (SDA et SDL qu’on connectera sur D1 et D2) et le DHT11 n’a besoin que d’une entrée digitale (qu’on connectera sur D3).

Etape 2 : la programmation

Pour démarrer vous devez dans Constellation déclarer une sentinelle associée à une clé d’accès et un package virtuel. Ici notre ESP8266 est représenté par la sentinelle nommée “ESP8266” et le package virtuel se nomme “MySensor”.

Dans l’Arduino IDE, nous créons un nouveau projet à partir du Starter Kit Constellation pour ESP8266 dans lequel nous allons définir le nom de notre réseau Wifi (SSID) ainsi que sa clé d’accès  puis nous configurerons le client Constellation en spécifiant l’identité de notre package virtuel, sa clé d’accès et l’adresse/port de notre serveur Constellation :

// ESP8266 Wifi
#include <ESP8266WiFi.h>
char ssid[] = "MON SSID";
char password[] = "macléWifi!!!!";

// Constellation client
Constellation<WiFiClient> constellation("X.X.X.X", 8088, "ESP8266", "MySensor", "xxxxxxxxxxxxxxxxx")

Encore une fois si tout cela est nouveau pour vous, je vous recommande de suivre ce guide d’introduction à l’API Constellation pour Arduino/ESP8266.

Lancez maintenant le « gestionnaire de bibliothèque » (menu Croquis > Inclure une bibliothèque > Gérer les bibliothèques) et installez les bibliothèques suivantes :

• Adafruit Unified Sensor (par Adafruit)
• DHT Sensor library (par Adafruit)
• Adafruit TSL2561 (par Adafruit)

Une fois les librairies installées, ajoutez en entête de votre code :

#include <Adafruit_TSL2561_U.h>
#include <DHT_U.h>
#include <Wire.h>

Déclarez ensuite, juste après la déclaration du client Constellation, le capteur TSL2561 et le DHT11 par les lignes :

DHT_Unified dht(D3, DHT11);
Adafruit_TSL2561_Unified tsl(TSL2561_ADDR_FLOAT);

Déclarez également un entier pour définir l’intervalle de temps (en ms) entre deux mesures que nous fixons à 10 secondes par défaut :

int interval = 10000; //ms

Dans la méthode « setup() » configurez les I/O utilisés par l’I²C (D1 et D2 dans notre cas) :

Wire.begin(D1, D2);

Initialisez ensuite le capteur DHT11 par la ligne :

dht.begin();

Puis le capteur TSL2561 :

if(!tsl.begin())
{
  Serial.print("No TSL2561 detected!");
  while(1);
}
tsl.enableAutoRange(true);
tsl.setIntegrationTime(TSL2561_INTEGRATIONTIME_13MS);

Toujours dans la méthode « setup », récupérons les settings de notre package sur Constellation et affectons le setting « Interval » si défini sur Constellation (autrement c’est la valeur de 10 secondes déclarée ci-dessus qui sera utilisée) :

JsonObject& settings = constellation.getSettings();
if(settings.containsKey("Interval")) {
  interval = settings["Interval"].as<int>();
}

Pour finir dans la boucle principale, nous allons prendre les mesures de nos capteurs et publier trois StateObjects avec une durée de vie de deux fois l’intervalle de temps :

void loop(void) {
  constellation.loop();
  static int lastBeat = 0;
  if(millis() - lastBeat > interval) {
    lastBeat = millis();
    sensors_event_t event;
    // Luminosité
    tsl.getEvent(&event);
    if (event.light) {
      constellation.pushStateObject("Light", event.light, interval * 2);
    }  
    // Temperature
    dht.temperature().getEvent(&event);
    if (!isnan(event.temperature)) {
      constellation.pushStateObject("Temperature", event.temperature, interval * 2);
    }
    // Humidité
    dht.humidity().getEvent(&event);
    if (!isnan(event.relative_humidity)) {
      constellation.pushStateObject("Humidity", event.relative_humidity, interval * 2);
    }
  }
}

Et voilà votre capteur connecté est prêt !

Il ne reste plus qu’à téléverser votre programme et ouvrir votre Console Constellation pour constater qu’il est bien opérationnel :

Ouvrez maintenant le StateObject Explorer et rechercher le terme “MySensor” :

On retrouve bien, en temps réel, les trois mesures réalisées par notre ESP8266. N’hésitez pas à ouvrir ces StateObjects et cliquez sur « Subscribe » pour voir les mesures en temps réel dans la Console Constellation.

Etape 3 : Une page Web pour afficher votre capteur en temps réel

Créons maintenant une page Web pour afficher en temps réel les mesures de notre capteur connecté. Pour cela créez un fichier HTML sur votre poste avec une structure HTML de base.

Dans les entêtes ajoutez les scripts suivants :

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js"></script>
<script type="text/javascript" src="https:/cdn.myconstellation.io/js/Constellation-1.8.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.myconstellation.io/js/ngConstellation-1.8.1.min.js"></script>

Sur la balise <html> ajoutez l’attribut :

ng-app="MyDemoApp"

Et sur la balise <body> ajoutez l’attribut :

ng-controller="MyController"

Dans le corps de votre page, placez les valeurs vos StateObjects où bon vous semble. Par exemple :

<div>
    Temperature: <p>{{Temperature}}°C</p>
    Humidity: <p>{{Humidity}}%</p>
    Light: <p>{{Light}} lux</p>
</div>

Pour finir ajoutez le script suivant dans votre page (dans une balise <script>):

var myDemoApp = angular.module('MyDemoApp', ['ngConstellation']);
myDemoApp.controller('MyController', ['$scope', 'constellationConsumer', function ($scope, constellation) {

  constellation.initializeClient("http://localhost:8088", "clé d'accès constellation", "MySensor WebPage");

    constellation.onConnectionStateChanged(function (change) {
      if (change.newState === $.signalR.connectionState.connected) {

        constellation.registerStateObjectLink("*", "MySensor", "*", "*", function (so) {
          $scope.$apply(function () {
           $scope[so.Name] = so.Value;
          });
        });
      }
    });

    constellation.connect();
  }]);

N’oubliez pas de définir l’adresse de votre Constellation ainsi que la clé d’accès pour vous connecter à votre Constellation lors de l’appel de la méthode « constellation.initializeClient »

Vous obtenez en quelques minutes une page Web permettant d’afficher en temps réel les mesures de température, d’humidité et de luminosité réalisées par votre ESP8266 !

Etape 4 (optionnelle) : créer un package .NET pour exploiter les données du capteur

La page Web réalisée ci-dessus permet d’afficher en temps réel les valeurs de vos StateObjects.

Si maintenant vous souhaitez récupérer la valeur de ces StateObject dans un programme pour réagir en fonction de certaines valeurs (par exemple alerter si T° trop froide ou allumer des lumières si la luminosité est trop faible) ou bien tout simplement enregistrer ces valeurs dans un fichier, une base de données ou un service de cloud, suivez la suite.

Pour cet exemple, réalisons un programme en C#. On part du principe que vous avez installé Visual Studio et le SDK Constellation depuis le « Web Platform Installer ».

Créez alors un nouveau projet de type « Constellation Package Console » :

Dans votre classe, ajoutez simplement des propriétés pour chaque StateObject avec l’attribut « StateObjectLink » pour lier ces propriétés .NET aux StateObjects de votre capteur (servez-vous du snippet « stateobjectlink »).

Par exemple pour inclure le StateObject « Light » dans notre classe C# :

[StateObjectLink("MySensor", "Light")]
public StateObjectNotifier Light { get; set; }

Vous pouvez maintenant afficher sa valeur à tout moment, par exemple :

PackageHost.WriteInfo($"Luminosité {this.Light.Value.LastUpdate} = {this.Light.DynamicValue} lux");

La propriété « Light » de votre classe contiendra toujours la dernière valeur du StateObject connu dans votre Constellation.

Vous pouvez donc manipuler la valeur mesurée par votre ESP8266 dans votre code C# comme une simple propriété .NET de votre code.

Vous pouvez également vous abonner à chaque mise à jour du StateObject pour déclencher une action grâce à l’évènement « ValueChanged » :

this.Light.ValueChanged += (s, e) =>
{
    PackageHost.WriteInfo($"Nouvelle mesure à {this.Light.Value.LastUpdate} = {this.Light.DynamicValue} lux");
};

The post Créer un capteur de température, humidité et luminosité connecté appeared first on Constellation.

Prérequis

• Un Arduino connecté ou un ESP8266
• Un shield relais (ou un relais seul avec une diode, une résistance et un transistor NPN)
• Un serveur Constellation

Etape 1 : le montage

Ici on utilisera un D1 Mini Pro (ESP8266) avec un « Shield » relais tout fait qu’il n’y a plus qu’à déposer sur le « D1 Mini ». Si vous n’avez de shield, vous pouvez utiliser un relais seul que vous piloterez avec un transistor NPN via une sortie de l’ESP8266.

Vous retrouverez sur ce shield un bornier à 3 pôles :

• Le pôle de gauche est « NO » (normalement ouvert)
• Le pole du milieu est le commun
• Le pôle de droite est « NC » (normalement fermé)

Autrement dit, au repos il y a contact entre le 2^ème et 3^ème pole (normalement fermé). Lorsque que vous activez le relais, vous permutez le contact entre la 1^ère et le 2^ème pole.

Si vous voulez piloter une lampe, connectez un des fils entre la source d’énergie et votre lampe sur le pole « commun » et le pole « NO ». Ainsi au repos, votre lampe ne sera pas allumée mais si vous activez votre relais elle le sera.

Attention tout de même si vous manipulez des sources AC 220V et n’oubliez pas que votre relais ne supporte que des charges inférieures à 10A (soit environ 2200W).

Etape 3 : la programmation

Pour démarrer vous devez dans Constellation déclarer une sentinelle associée à une clé d’accès et un package virtuel. Ici notre ESP8266 est représenté par la sentinelle nommée “ESP8266” et le package virtuel se nomme “MyRelay”.

Dans l’Arduino IDE, nous créons un nouveau projet à partir du Starter Kit Constellation pour ESP8266 dans lequel nous allons définir le nom de notre réseau Wifi (SSID) ainsi que sa clé d’accès  puis nous configurerons le client Constellation en spécifiant l’identité de notre package virtuel, sa clé d’accès et l’adresse/port de notre serveur Constellation :

// ESP8266 Wifi
#include <ESP8266WiFi.h>
char ssid[] = "MON SSID";
char password[] = "macléWifi!!!!";

// Constellation client
Constellation<WiFiClient> constellation("X.X.X.X", 8088, "ESP8266", "MyRelay", "xxxxxxxxxxxxxxxxx")

Encore une fois si tout cela est nouveau pour vous, je vous recommande de suivre ce guide d’introduction à l’API Constellation pour Arduino/ESP8266.

Notre relais se pilote par la sortie D1. Commencez donc par configurer cette sortie en ajoutant la ligne suivante dans la méthode « setup() » :

pinMode(D1, OUTPUT);

Ensuite, toujours dans la méthode de démarrage « setup() » et une fois connecté au Wifi, déclarez le MessageCallback suivant :

constellation.registerMessageCallback("SwitchState",
  MessageCallbackDescriptor().setDescription("Set the state of the relay").addParameter<bool>("state", "The state of the relay"),
  [](JsonObject& json) {
      bool state = json["Data"].as<bool>();
      // Changer l'état du relais
      digitalWrite(D1, state ? HIGH : LOW);
      // Mise à jour du StateObject de l'état du relais
      constellation.pushStateObject("State", state);
 });

Nous exposons ici un MessageCallback nommé « SwitchState »  qui prend en paramètre un booléen pour définir l’état du relais (ON ou OFF).

Le code du MC pilotera alors la sortie D1 sur lequel est connecté notre relais et publiera un StateObject « State » avec l’état actuel du relais.

Pour finir, toujours au démarrage, ajoutez cette ligne après la déclaration de votre MC :

constellation.pushStateObject("State", false);

Ainsi au démarrage de l’ESP8266, le relais est forcément sur Off, donc nous actualisation le StateObject « State » sur Constellation avec la valeur « false ».

Et voilà, votre relais connecté est opérationnel !

Vous pouvez connecter sur les pôles NO et commun une charge électrique comme une lampe ou une simple LED, en courant continue ou alternatif (220V par exemple) sans dépasser 10 ampères.

Si vous ne connectez rien sur votre relais, vous pouvez tout de même tester son bon fonctionnement :

• Le relais « claque » lorsqu’il change d’état
• Une petite LED rouge à côté de l’inscription « NC » s’allumera quand le relais est sur « ON »

Lancez le MessageCallback Explorer de la Console Constellation pour tester votre MessageCallback :

Etape 3 : créer une page Web de pilotage du relais

Créons maintenant une page Web pour piloter notre relais. Pour cela créez un fichier HTML sur votre poste avec une structure HTML de base.

Dans les entêtes ajoutez les scripts suivants :

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js"></script>
<script type="text/javascript" src="https:/cdn.myconstellation.io/js/Constellation-1.8.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.myconstellation.io/js/ngConstellation-1.8.1.min.js"></script>

Sur la balise <html> ajoutez l’attribut :

ng-app="MyDemoApp"

Et sur la balise <body> ajoutez l’attribut :

ng-controller="MyController"

Ajoutez ensuite le script suivant dans votre page (dans une balise <script>) :

var myDemoApp = angular.module('MyDemoApp', ['ngConstellation']);
myDemoApp.controller('MyController', ['$scope', 'constellationConsumer', function ($scope, constellation) {

      constellation.initializeClient("http://localhost:8088", "clé d'accès ici", "MyRelay Controller");
      constellation.onConnectionStateChanged(function (change) {
          if (change.newState === $.signalR.connectionState.connected) {
              console.log("Je suis connecté !");

              constellation.registerStateObjectLink("*", "MyRelay", "*", "*", function (so) {
                  $scope.$apply(function () {
                      $scope.RelayState = so.Value;
                  });
              });

          }
      });
      constellation.connect();
      $scope.constellation = constellation;
  }]);

N’oubliez pas de définir l’adresse de votre Constellation ainsi que la clé d’accès pour vous connecter à votre Constellation lors de l’appel de la méthode « constellation.initializeClient ».

Enfin, ajoutez sur votre page la valeur du StateObject « State » et un bouton pour envoyer un message au package « MyRelay » afin d’invoquer le MC « SwitchState ».

Par exemple avec quelques classes CSS issues de Bootstrap :

<div class="panel" ng-class="RelayState ? 'panel-danger' : 'panel-default'">
    <div class="panel-heading">
        <h3 class="panel-title">My Relay</h3>
    </div>
    <div class="panel-body">
        <p>Current state : {{ RelayState ? "ON" : "OFF" }}</p>
        <a href="#" class="btn btn-primary" ng-click="constellation.sendMessage({ Scope: 'Package', Args: ['MyRelay'] }, 'SwitchState', !RelayState)">Switch {{ RelayState ? "OFF" : "ON" }}</a>
    </div>
</div>

Vous obtenez en quelques minutes une page Web permettant de piloter en temps réel votre relais avec un retour sur son état courant.

Vous pouvez d’ailleurs ouvrir la page sur plusieurs navigateurs ou sur plusieurs machines et constater que toutes les pages se mettent à jour en temps réel dès que l’état du relais change.

Etape 4 (optionnelle) : Piloter le relais avec un script Powershell

Pour invoquer votre MessageCallback depuis un script Powershell nous allons utilisez l’interface http.

Vous pouvez d’ailleurs afficher le code snippet pour obtenir l’URL depuis le MessageCallback Explorer.

Dans notre cas l’URL sera : http://localhost:8088/rest/consumer/SendMessage?SentinelName=Consumer&PackageName=DemoPowershel&AccessKey=xxxx&scope=Package&args=MyRelay&key=SwitchState&data=true

Comme vous le constatez nous utilisons l’interface « /consumer ». L’argument « sentinelName » doit donc être « Consumer » et le nom du package est en fait un « friendly name » que nous appellerons ici « DemoPowershell ». Vous devez remplacer le « xxxx » par une clé d’accès valide, par exemple la même que celle utilisée par les ESP.

Notre Powershell est donc un « consommateur » et non un « package virtuel ». Il n’y a donc pas besoin de le déclarer dans la configuration de notre Constellation. Un consommateur peut envoyer ou recevoir des messages et consommer des StateObjects mais il ne peut pas écrire de log ni même publier des StateObjects.

Si vous souhaitez utiliser ce script sur une autre machine sur le serveur Constellation, remplacez dans l’URL « localhost » par l’adresse IP ou DNS de votre serveur Constellation.

Pour invoquer une URL en Powershell vous pouvez utiliser la command-let « Invoke-WebRequest ».

Créons alors un script Powershell que nous nommerons « SwitchRelay.ps1 » avec le code suivant :

param (
    [Parameter(Mandatory=$true)][bool]$state
 )
$res = Invoke-WebRequest ("http://localhost:8088//rest/consumer/SendMessage?SentinelName=Consumer&PackageName=DemoPowershell&AccessKey=5863d9e4cbdf522eaa62e0747fceb1c5b249ba13&scope=Package&args=MyRelay&key=SwitchState&data=" + $state.ToString().ToLower())
Write-Host "SwitchState to" $state

Et voilà votre commande Powershell est capable d’invoquer un MessageCallback dans votre Constellation et donc de piloter le relais de votre ESP8266 !

The post Créer un relais connecté appeared first on Constellation.

https://cdn.myconstellation.io/js/

Veuillez noter que le CDN est accessible en HTTP ou HTTPS et expose toutes les versions des librairies JavaScript et AngularJS pour Constellation au format classique ou minifié.

Ainsi dans vos pages HTML, vous pouvez facilement, sans aucun autre prérequis qu’une connectivité internet, ajouter les librairies Constellation et leurs dépendances :

<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.myconstellation.io/js/Constellation-1.8.1.min.js"></script>

Pour AngularJS :

<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.myconstellation.io/js/Constellation-1.8.1.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="//cdn.myconstellation.io/js/ngConstellation-1.8.1.min.js"></script>

Au passage vous remarquerez la mise à jour des libraires JS en version 1.8.1.

Changelog :

• Revu de la gestion des sagas (sendMessageWithSaga)
• Ajout de la méthode registerMessageCallback
• Ajout de la méthode registerStateObjectLink

Les packages NuGet correspondants ont également été mis à jour sur le repository Constellation accessible depuis votre Visual Studio.

The post Nouvelles versions des librairies JavaScript et mise en place d’un CDN appeared first on Constellation.