Tag Web - Constellation

FriendLeaf : la serre connectée grâce à Constellation

Sebastien Warin — Tue, 17 Jul 2018 09:40:50 +0000

Plus besoin de disposer d’un espace extérieur pour faire pousser vos propres herbes aromatiques, salades et fleurs. Grâce à la serre connectée FriendLeaf, vous pouvez faire pousser plusieurs plantes et vous en occuper facilement.

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 :

É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.

S-Fit : Concevez un miroir connecté orienté fitness

Sebastien Warin — Wed, 27 Sep 2017 10:05:42 +0000

C’est l’été, la saison des maillots de bains, il est grand temps de se prendre en main et de se sculpter un corps de rêve. Pourquoi ne pas utiliser une des nombreuses solutions de tracker d’activités présentes sur le marché ? Ce n’est pas assez drôle pour des makers, nous avons donc décidé de créer notre propre solution fitness axée autour d’un miroir connecté !

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 :

{{temperature}}

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();

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.

Pilotez une matrice de LED avec une page Web en temps réel

Sebastien Warin — Tue, 09 May 2017 12:48:57 +0000

Découvrons dans ce tutoriel comment piloter en temps réel une matrice de LED bicolore depuis une page Web en quelque ligne.

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 
char ssid[] = "MON SSID";
char password[] = "macléWifi!!!!";

// Constellation client
Constellation 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 
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("x").addParameter("y").addParameter("state", "ON or OFF").addOptionalParameter("clear", true, "Clear matrix before drawn"),
  [](JsonObject& json) {
    if(json["Data"].size() < 4 || json["Data"][3].as()) {
      matrix.clear();
    }
    matrix.drawPixel(json["Data"][0].as(), json["Data"][1].as(), json["Data"][2].as() ? 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("x").addParameter("y").addParameter("color", "0 = Off, 1 = red, 2 = orange, 3 = green").addOptionalParameter("clear", true, "Clear matrix before drawn"),
  [](JsonObject& json) {
    if(json["Data"].size() < 4 || json["Data"][3].as()) {
      matrix.clear();
    }
    matrix.drawPixel(json["Data"][0].as(), json["Data"][1].as(), json["Data"][2].as());  
    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 les scripts nécessaires pour connecter la page à Constellation :

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

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




    Eraser
    Rouge
    Orange
    Vert

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