Tag AngularJS - 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.

Créer une serrure connectée à Constellation

Sebastien Warin — Wed, 16 May 2018 14:05:31 +0000

Article proposé par Olivier MOUILLOT, Mohammed TAHRI JOUTEI HASSANI et Gaëtan DELABY

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 

// ESP8266 Wifi
#include 
char ssid[] = "MY-WIFI";
char password[] = "xxxxxxxx";

define LOCK_PIN D3

// Constellation client
Constellation 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 :




    
    Serrure connectée

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.

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.

Nouvelles API Javascript et AngularJS 1.8.2

Sebastien Warin — Thu, 06 Jul 2017 08:02:30 +0000

Après la mise à jour du SDK et Python Proxy la semaine dernière, c’est au tour des API Javascript et AngularJS de passer en 1.8.2.

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.

Créer un capteur de température, humidité et luminosité connecté

Sebastien Warin — Wed, 10 May 2017 15:55:52 +0000

Dans ce tutoriel créons un capteur de température, d’humidité et de luminosité connecté avec une page Web de visualisation des données en temps réel.

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

// Constellation client
Constellation 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 
#include 
#include

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

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 :

Sur la balise ajoutez l’attribut :

ng-app="MyDemoApp"

Et sur la balise ajoutez l’attribut :

ng-controller="MyController"

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


    Temperature: {{Temperature}}°C
    Humidity: {{Humidity}}%
    Light: {{Light}} lux

Pour finir ajoutez le script suivant dans votre page (dans une balise

Sur la balise ajoutez l’attribut :

ng-app="MyDemoApp"

Et sur la balise ajoutez l’attribut :

ng-controller="MyController"

Ajoutez ensuite le script suivant dans votre page (dans une balise

Pour AngularJS :

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.

Connectez vos pages Web à Constellation

Sebastien Warin — Wed, 06 Jul 2016 14:22:29 +0000

Introduction

Il existe actuellement deux librairies Constellation JavaScript :

Constellation for Javascript
Constellation for AngularJS

La première est basée sur jQuery, la deuxième est une surcouche de la 1ère encapsulée dans un module AngularJS.

Vous retrouverez ces deux librairies depuis le gestionnaire de package Nuget intégré à Visual Studio :

Chacune de ces deux librairies propose deux types de client :

Consumer
Controller

Le client “Consumer” permet de se connecter à Constellation en tant que “consommateur” pour pouvoir interroger des StateObjects et envoyer/recevoir des messages.

Le client “Controller” permet lui de se connecter à Constellation en tant que « contrôleur » pour récupérer par exemple en temps réel les logs produits par vos packages, arrêter/démarrer les packages, surveiller la consommation de ressources de chacun d’entre eux, etc.

Dans ce guide nous allons utiliser le client « Consumer » afficher en temps réel le StateObject produit par le package HWMonitor représentant la consommation de votre CPU dans une page Web.

Pour cela vous devez avoir déployé le package “HWMonitor” sur au moins une de vos sentinelles (Windows).

Etape 1 : ajouter la librairie Constellation

En utilisant le CDN

Les librairies JavaScripts sont accessibles sur : http://cdn.myconstellation.io/js/ (en HTTP ou HTTPS).

De ce fait, vous pouvez créer une simple pages HTML et ajoutez dans l’entête les balises suivantes :

Si vous souhaitez connecter votre page à Constellation en utilisant le framework AngularJS :

Par Nuget en utilisant Visual Studio

Créez une application Web vide dans Visual Studio et ouvrez le gestionnaire de package NuGet.

En sélectionnant la source “Constellation”, installez le package Nuget “Constellation.Javascript” :

Une fois installée vous obtiendrez dans le dossier “Scripts” de votre projet Web les librairies jQuery, SignalR et Constellation :

Créez ensuite une page Web (HTML ou ASPX) et dans l’entête de votre code HTML référencez les scripts (à adapter en fonction des n° de version des librairies contenues dans les packages Nuget) :

Etape 2 : Initialiser le client

Tout d’abord il faut déterminer la clé d’accès qui sera utilisée par votre page. Ici, depuis la Console Constellation, nous créons un credential “DemoWeb” avec la clé d’accès “123456789” :

Dans notre page HTML, créons un client “Consumer” en spécifiant l’URI de notre Constellation, la clé d’accès utilisée pour se connecter et le “friendly name” de votre client :

var constellation = $.signalR.createConstellationConsumer("http://localhost:8088", "123456789", "Test API JS");

Etape 3 : Etablir la connexion à Constellation

Ajoutons un handler sur le changement d’état de la connection pour afficher le message “Je suis connecté” dans la console de votre navigateur :

constellation.connection.stateChanged(function (change) {
    if (change.newState === $.signalR.connectionState.connected) {
        console.log("Je suis connecté");
    }
});

Pour finir lançons la connexion en invoquant la méthode Start :

constellation.connection.start();

Testons la page dans Chrome par exemple :

Etape 4 : Afficher le contenu d’un StateObject en temps réel

Dans notre cas nous voulons afficher en temps réel la consommation CPU de notre sentinelle.

Ce StateObject se nomme “/intelcpu/0/load/0” et est produit par le package “HWMonitor” que vous aurez pris le soin de déployer sur une de vos sentinelles (ici ma sentinelle se nomme “PO-SWARIN”) :

On peut donc enregistrer un “StateObjectLink” avec la méthode “registerStateObjectLink” en demandant un filtre sur la sentinelle nommée “MON-PC”, le package “HWMonitor” et le nom “/intelcpu/load/0” (le dernier argument de cette méthode correspond au type du StateObject, ici ”*” indique qu’il n’y a pas de filtre sur le type) et en indiquant la fonction à invoquer à chaque mise à jour du et des StateObjects liés, ici mettre à jour un de la page.

Vous devez impérativement faire cet enregistrement lorsque vous êtes connecté, c’est à dire lorsque le handler “stateChanged” est invoqué avec l’état “Connected”.

Le code final sera donc :

constellation.connection.stateChanged(function (change) {
    if (change.newState === $.signalR.connectionState.connected) {
        console.log("Je suis connecté");
        constellation.client.registerStateObjectLink("MON-PC", "HWMonitor", "/intelcpu/0/load/0", "*", function (so) {
            console.log(so);
            $("#cpu").text(so.Value.Value);
        });
    }
});

Dès que le StateObject est réceptionné par notre page nous affectons la propriété “Value” de la valeur du StateObject comme contenu du span “cpu” de la page. De ce fait, ajoutons un “span” nommé “cpu” dans le corps de notre page :

Ainsi vous aurez en temps réel votre CPU dans une page HTML grâce à l’exploitation du StateObject ici produit par le package HWMonitor :

Vous remarquerez que dans le handler ci-dessus nous loguons également l’objet “stateobject” réceptionné par notre page.

Cet objet contient les différentes propriétés du StateObject : la sentinelle et le package qui ont produit ce StateObject, le nom du StateObject, son type, sa durée de vue (ici “lifetime=0” donc n’expire jamais), la date de mise à jour du StateObject, ses métadonnées et surtout sa valeur (propriété “Value”).

Ici la valeur de ce StateObject produit par le package “HWMonitor” est un objet complexe (entouré en vert) qui contient différentes propriétés :

Pour la suite je vous recommande vivement l’utilisation du framework AngularJS permettant de développer des pages plus facilement.

Next step

The post Connectez vos pages Web à Constellation appeared first on Constellation.

Consommer Constellation avec Angular JS

Sebastien Warin — Fri, 19 Aug 2016 08:27:12 +0000

Préparer la page AngularJS

Vous pouvez soit utiliser le gestionnaire de package Nuget depuis Visual Studio pour installer la dernière version du package “Constellation.Angular” et ses dépendances :

Ou bien utiliser (ou copier en local) les scripts des CDN en ajoutant dans votre code HTML les balises suivantes :

Dans votre code Javascript, vous devez créer un module Angular pour votre page que nous appelleront “MyDemoApp” et dans lequel nous injecterons le module “ngConstellation” :

var myDemoApp = angular.module('MyDemoApp', ['ngConstellation']);

Vous devez également ajouter l’attribut “ng-app” sur la balise de votre page pour lier votre page HTML à votre module Angular :

Enfin vous devez créer un contrôleur AngularJS dans lequel nous injecterons la factory “constellationConsumer” que nous appellerons dans notre code “constellation” :

myDemoApp.controller('MyController', ['$scope',  'constellationConsumer', function ($scope, constellation) {

}]);

Sans oublier de lier votre corps de page () à ce contrôleur :

Et voilà votre squelette est prêt !

Pour plus d’information sur AngularJS, je vous recommande la lecture de ce guide : https://docs.angularjs.org/misc/started

Pour résumer notre squelette page est donc :




    Test API AngularJS

Connecter une page HTML à Constellation avec AngularJS

Dans notre contrôleur AngularJS, nous allons initialiser le client Consumer en spécifiant l’URL de votre serveur Constellation, la clé d’accès et le “Friendly name” de votre page :

constellation.initializeClient("http://localhost:8088", "123456789", "TestAPI");

Vous pouvez créer une clé d’accès depuis la Console Constellation ou en éditant le fichier de configuration du serveur.

Enfin ajoutons un handler sur le changement d’état de la connexion pour afficher le message “Je suis connecté” dans la console de votre navigateur par exemple lorsque la connexion à Constellation est établie :

constellation.onConnectionStateChanged(function (change) {
    if (change.newState === $.signalR.connectionState.connected) {
        console.log("Je suis connecté !");
    }
});

Il ne reste plus qu’à lancer la connexion en invoquant la méthode “connect” :

constellation.connect();

Et voilà, votre page AngularJS est connectée à votre Constellation.

Envoyer des messages et invoquer des MessageCallbacks

Envoyer des messages

Pour envoyer des messages et donc invoquer des MessageCallbacks vous devez utiliser la méthode “constellation.sendMessage” en spécifiant :

Le scope
La clé du message
Le contenu du message (= les paramètres du MessageCallback)

Par exemple, avec le package Nest déployé dans votre Constellation, on retrouvera un MessageCallback “SetTargetTemperature” pour piloter la température de consigne d’un thermostat Nest.

N’hésitez pas à utiliser le MessageCallback Explorer pour découvrir l’ensemble des MessageCallbacks exposés par les packages de votre Constellation.

Pour invoquer le MessageCallback “SetTargetTemperature” depuis votre page Web en passant en paramètre l’ID du thermostat et la température de consigne :

constellation.sendMessage({ Scope: 'Package', Args: ['Nest'] }, 'SetTargetTemperature', 'my_thermostat_id', 19);

En AngularJS, pour lier l’invocation de ce code à un bouton, vous devez simplement ajouter l’attribut “ng-click” sur votre bouton.

Par exemple, dans votre code HTML :

Et dans votre contrôleur :

$scope.SetNestTemperature = function () {
   constellation.sendMessage({ Scope: 'Package', Args: ['Nest'] }, 'SetTargetTemperature', 'my_thermostat_id', 19);
};

Autre solution, exposer le client Consumer dans le scope AngularJS :

$scope.constellation = constellation;

Et donc s’en servir directement dans le template HTML :

Allons un peu plus loin en ajoutant un champ permettant à l’utilisateur de définir la température de consigne.

Dans le template HTML :

Temperature :

Le champ “input” est de type “number” et est lié à la variable de scope (le modèle) que nous appellerons “targetTemperature”.

De ce fait dans notre fonction “SetNestTemperature” nous pouvons récupérer la valeur définie par l’utilisateur :

$scope.SetNestTemperature = function () {
   constellation.sendMessage({ Scope: 'Package', Args: ['Nest'] }, 'SetTargetTemperature', 'my_thermostat_id', $scope.targetTemperature);
};

Comme pour l’API Javascript, vous pouvez également passer plusieurs arguments à votre MC combinant type simple et type complexe. Si il y a plusieurs paramètres vous devez les stocker dans un tableau.

Par exemple le MC “ShowNotification” du package Xbmc permettant d’afficher une notification sur une interface Kodi/XBMC prend deux paramètres : le nom d l’hôte XBMC (un type string) et le détail de la notification à afficher (un type complexe) :

constellation.sendMessage({ Scope: 'Package', Args: ['Xbmc'] }, 'ShowNotification', xbmcName, { "Title":"Hello", "Message":"Hello from JS" });

Bien entendu vous pouvez invoquer des MessageCallbacks de n’importe quel package, réel (programme Linux/Windows) ou virtuel (Arduino/ESP, scripts, etc..) ou même sur d’autres consommateurs (pages Web par exemple).

Ainsi vos pages Web peuvent, en envoyant des messages, invoquer des méthodes sur n’importe quel système connecté dans votre Constellation.

Par exemple dans l’article sur les ESP/Arduinos, notre ESP8266 exposait un MC “Reboot” pour redémarrer la puce. Si l’on souhaite redémarrer notre Arduino/ESP depuis une page Web, il suffirai d’envoyer un message sans paramètre au bon scope. Par exemple :

constellation.sendMessage({ Scope: 'Sentinel', Args: ['MyArduino'] }, 'Reboot');

Ici le scope est “Sentinel” avec l’argument “MyArduino”, c’est à dire que le message “Reboot” sera envoyé à tous les packages de la sentinelle “MyArduino”.

Les scopes peuvent être :

Sentinel
Package
Group
Others
All

La propriété “Args” de l’objet scope est un tableau contenant le nom des groupes, des sentinelles ou packages en fonction du type de scope sélectionné. Seuls les scopes “All” et “Others” n’ont pas besoin d’argument.

Envoyer des messages avec réponse : les sagas

Les Sagas permettent de lier des messages et donc de créer des couples de “requêtes / réponses”.

Avec la libraire JavaScript, il est possible d’envoyer des messages dans une saga et d’enregistrer un callback pour traiter la réponse de ce message.

Par exemple, le package “NetworkTools” expose un MC “Ping” permettant de réaliser un ping réseau. Le résultat du ping est retourné dans un message de réponse (un Int64 représentant le temps du réponse du ping) :

De ce fait pour réaliser un ping depuis une page Web, on pourrait proposer à l’utilisateur un champ pour saisir l’adresse à pinger et afficher le résultat dans un paragraphe.


   Host/IP : 
   
   Result : {{pingResult}}ms

Vous remarquez que le paragraphe du n’est affiché (ng-show) que si la valeur de scope “pingResult” est définie, ce qui n’est pas le cas à l’ouverture de la page.

Déclarons enfin la méthode de scope “Ping” pour envoyer un message au package “NetworkTools” afin d’invoquer dans une saga sur le MC “Ping” avec en paramètre du message variable « $scope.host » qui est liée à la zone de texte (input) de votre vue HTML.

Comme il s’agit d’une saga, nous utilisons la méthode “sendMessageWithSaga” dans laquelle nous passons la fonction callback qui sera invoquée lors de la réponse. A la réception cette réponse, nous allons tous simplement stocker le résultat de la réponse (propriété Data) dans la variable de scope “pingResult”.

L’affectation de la réponse dans la variable de scope “pingResult” est réalisée dans un “$scope.$apply”, une fonction AngularJS qui permet d’indiquer au contrôleur AngularJS que des variables de scope ont été modifiées et donc qu’il faut rafraîchir la vue.

scope.Ping = function () {
  constellation.sendMessageWithSaga(function(response) {
      $scope.$apply(function() {
        $scope.pingResult = response.Data;
      });
    }, { Scope: 'Package', Args: ['NetworkTools'] }, 'Ping', $scope.host);
};

Ainsi vos pages Web peuvent invoquer des méthodes et exploiter la réponse de tous les systèmes connectés sur Constellation exposant des MessageCallbacks.

Recevoir des messages

Une page Web connectée sur Constellation peut elle même recevoir des messages et donc exposer des MessageCallbacks que d’autres consommateurs (autres pages Web) ou packages (réels et virtuels) pourront invoquer.

Ceci dit un consommateur tel qu’une page Web n’a pas réellement d’existence. Autrement dit elle n’a pas d’identité et donc ne peut recevoir que des messages adressés à un groupe qu’elle devra joindre.

Pour joindre un groupe vous devez utiliser la méthode “subscribeMessages“ (et “unSubscribeMessages” pour en sortir). Vous pouvez joindre autant de groupe que vous souhaitez.

Par exemple, pour ajouter votre page au groupe “Demo” :

constellation.subscribeMessages("Demo");

Vous pourrez ensuite recevoir les messages envoyés dans ce groupe en ajoutant un handler sur le “onReceiveMessage” :

constellation.onReceiveMessage(function (message) {
    console.log("Message recu !", message);
});

Dans ce handler vous recevrez TOUS les messages (quelque soit la clé du message).

Vous avez aussi un moyen plus simple consistant à définir un handler pour une clé de message spécifiquement via la méthode “registerMessageCallback”.

Par exemple :

constellation.registerMessageCallback("ChangeTitle", function (msg) {
    document.title = msg.Data;
});
constellation.registerMessageCallback("HelloWorld", function (msg) {
    alert("Hello World");
});

Ici on enregistre deux MessageCallbacks.

Si votre page reçoit un MessageCallback “HelloWorld”, une alerte sera ouverte, si elle reçoit un MessageCallback “ChangeTitle”, le titre de votre page sera modifié avec l’argument passé dans le MC.

Bien entendu, comme vos pages HTML peuvent enregistrer autant de MessageCallbacks qu’elles souhaitent et que ces MessageCallbacks sont invocables depuis n’importe quel système connecté à Constellation, d’autres pages Web, des objets à base d’Arduino, ESP ou autre, des programmes Python, .NET, etc… vous pouvez imaginer tout type d’usage.

Consommer des StateObjects

Pour consommer des StateObjects produits par des packages (virtuels ou réels) de votre Constellation, vous avez deux méthodes : l’évènement “onUpdateStateObject” ou les StateObjectLinks.

La première méthode consiste à enregistre un ou plusieurs handlers sur l’évènement “onUpdateStateObject” :

constellation.onUpdateStateObject(function (stateobject) {
    console.log(stateobject);
});

Les handlers seront déclenchés à chaque mise à jour ou interrogation des StateObjects de votre page quelque soit le StateObject.

Pour interroger un ou plusieurs StateObjects à un instant T vous disposez de la méthode “requestStateObjects”.

Pour vous abonner aux mises à jour d’un ou plusieurs StateObjects, vous disposez de la méthode “subscribeStateObjects” (et “unSubscribeStateObjects” pour vous désabonner).

Enfin la méthode “requestSubscribeStateObjects” réalise un “requestStateObjects” et un “subscribeStateObjects” c’est à dire que la méthode demande la valeur actuelle du ou des StateObjects et s’abonne auprès du serveur Constellation pour être notifiée des mises à jour.

Toutes ces méthodes prennent en paramètre : le nom de la sentinelle, le nom du package, le nom du StateObject et le type du StateObject. Vous pouvez utiliser le wildcard “*” pour ne pas appliquer de filtre (plus d’information ici).

Par exemple, pour récupérer tous les StateObjects du package “Demo” quelque soit la sentinelle et pour s’abonner aux mises à jour de ces StateObjects :

constellation.requestSubscribeStateObjects("*", "Demo", "*", "*");

L’autre méthode consiste à enregistrer un (ou plusieurs) StateObjectLink. Cela permet de lier une fonction à un abonnement.

Par exemple :

constellation.registerStateObjectLink("*", "HWMonitor", "/intelcpu/0/load/0", "*", function (so) {
    // Code A
});

constellation.registerStateObjectLink("*", "Demo", "*", "*", function (so) {
    // Code B
});

Ci-dessus le code A sera invoqué dès qu’un SO nommé « /intelcpu/0/load/0” et produit par le package “HWMonitor” est modifié alors que le code B sera déclenché dès qu’un StateObject du package “Demo” est modifié.

Prenons un cas pratique, nous voulons afficher en temps réel la consommation de notre CPU. Comme expliqué ci-dessus, la consommation peut être connue avec le StateObject nommé « /intelcpu/0/load/0” et produit par le package “HWMonitor”.

Nous allons donc ajouter un StateObjectLink et affecter la variable de scope “cpu” à chaque mise à jour de ce SO. Comme pour la réception de message, nous devons utiliser la fonction Angular “$scope.$apply” pour informer le contrôleur Angular que nous avons changé une variable de scope :

Aussi vous devez enregistrer vos SOLink une fois connecté :

constellation.onConnectionStateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    constellation.registerStateObjectLink("*", "HWMonitor", "/intelcpu/0/load/0", "*", function (so) {
      $scope.$apply(function() {
        $scope.cpu = so.Value.Value;
      });
    });
  }
});

Et dans notre template :


    CPU : {{cpu}}

Plutôt que stocker dans notre variable de scope la propriété “Value” de la valeur de notre StateObject, nous pouvons aussi stocker le StateObject lui même :

$scope.cpu = so;

De ce fait dans le template nous pouvons afficher différentes informations contenu dans notre StateObject :


    CPU on {{cpu.SentinelName }} at {{cpu.LastUpdate}} is {{cpu.Value.Value}} {{cpu.Value.Unit}}

Alors bien sûr le format de la date ou encore la précision de la valeur mesurée par le package HWMonitor ne sont très lisibles. Nous pouvons ajouter des filtres AngularJS directement dans notre template pour rendre notre page plus “user-friendly”.

Utilisons le filtre “date” pour formater la date et “number” pour limiter le nombre de chiffre après la virgule :

CPU on {{cpu.SentinelName }} at {{cpu.LastUpdate | date : 'dd//MM/yyyy @ hh:mm:ss' }} is {{cpu.Value.Value | number:2}} {{cpu.Value.Unit}}

C’est toute la magie d’AngularJS

Allons encore un peu plus loin !

Ici nous avons lié notre variable de scope “cpu” au StateObject nommé « /intelcpu/0/load/0” et produit par le package “HWMonitor”. Mais n’oubliez pas que l’unicité d’un StateObject est obtenu avec le triplet : Sentinelle + Package + Nom.

Autrement dit il peut y avoir plusieurs SO qui correspondent à ce filtre dans le cas où vous avez déployé le package HWMonitor sur plusieurs sentinelles.

Dans ce cas, la valeur du SO est sans cesse écrasée et notre page devient illisible :

Nous allons gérer ce cas en créant une variable de scope qui contiendra les différents StateObjects de nos CPUs.

Dans votre scope, commençons par déclarer une variable de scope nommée “cpus” en l’initialisant avec un objet vide :

$scope.cpus = {}

Modifions notre StateObjectLink pour stocker le StateObject dans notre objet “cpus” sous la propriété du nom de la sentinelle de notre StateObject.

constellation.registerStateObjectLink("*", "HWMonitor", "/intelcpu/0/load/0", "*", function (so) {
  $scope.$apply(function() {
    $scope.cpus[so.SentinelName.replace("-", "")] = so;
  });
});

C’est à dire que notre variable de scope “cpus” est un objet avec des propriétés du nom de la sentinelle et qui contient le StateObject de son CPU associé.

Attention le nom de la sentinelle est utilisée comme nom de propriété de notre objet JavaScript et vous n’êtes pas sans savoir que les “-“ (entre autre) ne sont pas autorisés en JS ce qui explique que nous les effaçons avec le “replace”.

Ainsi si je veux afficher dans mon template le CPU de ma machine nommée ”PC-SEB_UI” (= propriété “PCSEB_UI”), je devrais écrire :

CPU on {{cpus.PCSEB_UI.SentinelName }} at {{cpus.PCSEB_UI.LastUpdate | date : 'dd//MM/yyyy @ hh:mm:ss' }} is {{cpus.PCSEB_UI.Value.Value | number:2}} {{cpus.PCSEB_UI.Value.Unit}}

Il ni a plus d’effet indésirable de voir les StateObjects chevaucher constamment.

Mais on peut aller encore plus loin car notre variable “cpus” contient tous les SO de la consommation de CPU produits par l’ensemble des packages HWMonitor de notre Constellation.

Il suffit d’itérer sur cette variable pour afficher le SO de chaque propriété de notre objet. Avec AngularJS vous pouvez utiliser la directive “ng-repeat” :

CPU on {{cpu.SentinelName }} at {{cpu.LastUpdate | date : 'dd//MM/yyyy @ hh:mm:ss' }} is {{cpu.Value.Value | number:2}} {{cpu.Value.Unit}}

Nous obtenons une page capable d’afficher en temps réel la consommation de toutes nos machines Windows dans une simple page HTML :

The post Consommer Constellation avec Angular JS appeared first on Constellation.

Contrôler votre Constellation en Javascript

Sebastien Warin — Thu, 18 Aug 2016 14:48:37 +0000

Le hub de contrôle expose des méthodes pour contrôler la Constellation comme arrêter/démarrer des packages, s’abonner et récupérer en temps réel les logs des packages de la Constellation, propager les changements de configuration dans la Constellation, suivre les états et la consommation de ressource des packages, etc…

Les deux librairies JavaScript Constellation intègrent un client permettant de se connecter sur ce hub afin de pouvoir piloter votre Constellation. La Console Constellation est d’ailleurs basée sur ce client.

Dans cet article découvrons les fonctionnalités de ce client avec l’API JavaScript et l’API AngularJS.

Connecter une page HTML au hub de contrôle

Etape 1 : Ajouter les librairies

En utilisant le CDN

Les librairies JavaScripts sont accessibles sur : http://cdn.myconstellation.io/js/ (en HTTP ou HTTPS).

Pour utiliser la librairie JavaScript :

Ou si vous souhaitez l’utiliser avec le framework AngularJS :

Par Nuget en utilisant Visual Studio

Dans Visual Studio et ouvrez le gestionnaire de package NuGet.

En sélectionnant la source “Constellation”, installez le package Nuget “Constellation.Javascript” pour l’API JavaScript ou “Constellation.AngularJS” pour l’API AngularJS :

Etape 2 : Connexion au hub de contrôle

Avec l’API JavaScript (JS) vous devez créer le client avec la méthode “createConstellationController” en spécifiant l’URL de votre Constellation, une clé d’accès et un friendly name :

var controller = $.signalR.createConstellationController("http://localhost:8088", "123456789", "TestAPI");
controller.connection.stateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    console.log("Connected to the ControlHub");
  }
});
controller.connection.start();

Avec l’API AngularJS (NG), vous devez injecter le client “constellationController” dans votre contrôleur puis l’initialiser avec la méthode “initializeClient” en spécifiant l’URL de votre Constellation, une clé d’accès et un friendly name :

var demo = angular.module('demoApp', ['ngConstellation']);
demo.controller('MyController', ['$scope',  'constellationController', function ($scope, controller) {

  controller.initializeClient("http://localhost:8088", "123456789", "TestAPI");
    
  controller.onConnectionStateChanged(function (change) {
    if (change.newState === $.signalR.connectionState.connected) {
      console.log("Connected to the ControlHub");
    }
  });
    
  controller.connect();
}]);

La clé d’accès (AccessKey) utilisée pour se connecter au hub de contrôle doit avoir l’attribut “enableControlHub” à “true”. Vous pouvez gérer les credentials dans la Console Constellation ou dans le fichier de configuration.

Superviser les sentinelles

Vous disposez de deux méthodes :

requestSentinelsList() : pour recevoir la liste des sentinelles de votre Constellation
requestSentinelUpdates() : pour recevoir toutes les mises à jour des sentinelles de votre Constellation (ajout ou suppression de sentinelles, connexion ou déconnexion des sentinelles, mise à jour des informations, etc…).

Ces deux méthodes sont de type “void”. Les réponses sont réceptionnées par les handlers respectivement nommés ”onUpdateSentinelsList” et “onUpdateSentinel”.

Avec l’API JS :

controller.client.onUpdateSentinelsList(function (list) {
  console.log(list);
});

controller.client.onUpdateSentinel(function (sentinel) {
  console.log(sentinel);
});

controller.connection.onConnectionStateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    controller.server.requestSentinelsList();
    controller.server.requestSentinelUpdates();
  }
}

Avec l’API NG :

controller.onUpdateSentinelsList (function (list) {
  console.log(list);
});

controller.onUpdateSentinel  (function (se) {
  console.log(se);
});

controller.onConnectionStateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    controller.requestSentinelsList();
    controller.requestSentinelUpdates ();
  }
});

Par exemple utilisons l’API NG pour créer une page affichant l’ensemble des sentinelles avec leur statuts en temps dans une page :

Dans le code du contrôleur, ajoutons un handler sur la mise à jour sentinelle afin de stocker les objets “sentinelle” dans une variable de scope :

$scope.sentinels = {};
controller.onUpdateSentinel  (function (sentinel) {
  $scope.$apply(function() {
    $scope.sentinels[sentinel.Description.SentinelName.replace("-", "")] = sentinel;
  });
});

Nous sommes obligé de faire un “replace(« -« , « »)” car nous utilisons le nom de la sentinelle comme nom pour la propriété de notre variable de scope, or en JavaScript une propriété ou variable ne peut pas comporter de “-“.

Lors de la connexion, abonnons-nous aux mises à jour des sentinelles afin de maintenir notre page à jour :

controller.onConnectionStateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    console.log("Connected to the ControlHub");
    controller.requestSentinelUpdates ();
  }
});

Enfin dans le template HTML affichons nos différentes sentinelles dans une simple liste à puce :


  {{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}})

Veuillez noter que seule les sentinelles “réelles” qui se sont connectées au moins une fois peuvent être récupérer car cette technique. Pour les sentinelles qui ne se sont jamais connectées comme pour les sentinelles virtuelles, vous devez lire le fichier de configuration en utilisant l’API REST de Management (Management API).

Voici la structure de l’objet ”sentinelle” :

Superviser les packages

Une fois la liste de vos sentinelles connue, vous pouvez récupérer la liste des packages pour chaque sentinelle en invoquant la méthode “requestPackagesList “ et en ajoutant un handler sur le “onUpdatePackageList”.

Avec l’API JS :

controller.client.onUpdatePackageList (function (list) {
  console.log(list);
});
controller.server.requestPackagesList("MySentinel");

Avec l’API NG :

controller.onUpdatePackageList (function (list) {
  console.log(list);
});
controller.requestPackagesList("MySentinel");

Reprenons notre page ci-dessus et ajoutons la liste des packages pour chaque sentinelle de notre Constellation.

Dans le handler “onUpdateSentinel” défini dans la section précédente, demandons au hub de contrôle la liste des packages pour chaque sentinelle :

controller.onUpdateSentinel  (function (sentinel) {
  $scope.$apply(function() {
    $scope.sentinels[sentinel.Description.SentinelName.replace("-", "")] = sentinel;
  });
  controller.requestPackagesList(sentinel.Description.SentinelName);
});

Et ajoutons dans notre scope le handler “onUpdatePackageList” de manière à ajouter la liste des packages dans une propriété “Packages” que nous ajouterons dans nos objets “sentinelles” :

controller.onUpdatePackageList (function (p) {
  $scope.$apply(function() {
    $scope.sentinels[p.SentinelName.replace("-", "")]["Packages"] = p.List;
  });
});

Nous pouvons maintenant enrichir notre template pour afficher les packages de chacune de nos sentinelles :


  {{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}})
    
      {{p.Package.Name}} version {{p.PackageVersion}} [{{p.State}}]

Surveiller l’état et la consommation des packages

La liste de package récupérée ci-dessus n’est pas maintenue à jour. Pour recevoir les mises à jour de vos packages afin d’être notifié de chaque changement d’état vous pouvez ajouter le handler “onReportPackageState”.

De plus vous pouvez aussi vous abonner aux informations de consommation des ressources de vos packages avec le handler “onReportPackageUsage”.

Avec l’API JS :

controller.client.onReportPackageUsage  (function (usage) {
  console.log(usage);
});

controller.client.onReportPackageState  (function (usage) {
  console.log(usage);
});

Avec l’API NG :

controller.onReportPackageUsage  (function (usage) {
  console.log(usage);
});

controller.onReportPackageState  (function (usage) {
  console.log(usage);
});

Par exemple ajoutons dans notre page la consommation de CPU et de RAM pour chaque package de notre Constellation :

controller.onReportPackageUsage(function (usage) {
  $scope.$apply(function() {
    var sentinelName = usage.SentinelName.replace("-", "");
    for(var idx in $scope.sentinels[sentinelName].Packages) {
      var p = $scope.sentinels[sentinelName].Packages[idx];
      if(p.Package.Name == usage.PackageName) {
        p["CPU"] = usage.CPU;
        p["RAM"] = usage.RAM;
      }
    }
  });
});

Dans le code ci-dessus, on ajoute dans chaque objet “Package” la valeur de la consommation du CPU et de RAM.

Ainsi on peut enrichir le template HTML avec le code :


  {{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}})
    
      {{p.Package.Name}} version {{p.PackageVersion}} [{{p.State}}]
        
          CPU: {{p.CPU | number : 0 }}% - RAM: {{p.RAM / 1024 / 1024 | number: 0}}Mo

Contrôler les packages

Pour contrôler les instances de package vous disposez des méthodes suivantes :

start(sentinelName, packageName) : démarre un package
stop(sentinelName, packageName) : arrête un package
restart(sentinelName, packageName) : redémarre un package
reload(sentinelName, packageName) : arrête un package, force la sentinelle à télécharger la dernière version du package sur le serveur et redémarre le package
updatePackageSettings(sentinelName, packageName) : pousse les settings d’un package au package en cours de fonctionnement (à charge au package à prendre en compte ses nouveaux paramètres).

Avec l’API JS :

controller.server.start(sentinelName, packageName);
controller.server.stop(sentinelName, packageName);
controller.server.restart(sentinelName, packageName);
controller.server.reload(sentinelName, packageName);
controller.server.updatePackageSettings(sentinelName, packageName);

Avec l’API NG :

controller.start(sentinelName, packageName);
controller.stop(sentinelName, packageName);
controller.restart(sentinelName, packageName);
controller.reload(sentinelName, packageName);
controller.updatePackageSettings(sentinelName, packageName);

Par exemple ajoutons dans notre page la possibilité de piloter les packages.

Pour ce faire exposons notre client “controller” dans le scope Angular de façon à pouvoir l’utiliser dans le template HTML :

$scope.controller = controller;

Dans notre template ajoutons ensuite des boutons en spécifiant l’action du clic grâce à l’attribut “ng-click” :

Pour aller plus loin on peut également afficher/cacher les boutons en fonction de l’état du package, par exemple ne pas afficher le bouton “Start” si le package est déjà démarré :

S’abonner aux logs de Constellation

Pour récupérer les logs produits par les packages (virtuels ou non) en temps réel dans votre page Web, vous devez ajouter un handler sur “onReceiveLogMessage”.

Avec l’API JS :

controller.client.onReceiveLogMessage(function (log) {
  console.log(log);
});

Avec l’API NG :

controller.onReceiveLogMessage(function (log) {
  console.log(log);
});

Par exemple ajoutons à notre page la capacité d’afficher les logs des packages de notre Constellation en temps réel.

Pour cela nous allons nous abonner aux logs et les stocker dans un tableau de notre scope Angular :

$scope.logs = [];
controller.onReceiveLogMessage(function (log) {
  $scope.$apply(function() {
    $scope.logs.push(log);
  });
});

Nous pouvons donc maintenant afficher proprement nos logs dans notre template HTML :


  {{log.Date | date: 'dd/MM/yyyy HH:mm:ss' }} on {{log.SentinelName}}/{{log.PackageName}} : [{{ log.Level.toUpperCase() }}] {{log.Message}}

Récupérer les PackageDescriptors

Le PackageDescriptor est un objet publié par les packages qui permet de décrire les MessagesCallbacks que les packages exposent ainsi que les types utilisés dans leurs MC et StateObjects.

Pour récupérer un PackageDescriptor vous devez invoquer la méthode ”requestPackageDescriptor” en spécifiant le nom du package et attacher un handler “onUpdatePackageDescriptor” pour récupérer le résultat.

Avec l’API JS :

controller.client.onUpdatePackageDescriptor(function (descriptor) {
  console.log(descriptor);
});

controller.server.requestPackageDescriptor(packageName);

Avec l’API NG :

controller.onUpdatePackageDescriptor(function (descriptor) {
  console.log(descriptor);
});

controller.requestPackageDescriptor(packageName);

Par exemple sur notre page ci-dessus, ajoutons un bouton permettant d’afficher dans une simple boite de dialogue la liste des MessageCallbacks d’un package :

Dans le template HTML :

Et dans le code de notre contrôleur, de manière grossière :

controller.onUpdatePackageDescriptor(function (descriptor) {
  var result = "Package "+ descriptor.PackageName + " :";
  for(var idx in descriptor.Descriptor.MessageCallbacks) {
    result += "\n - " + descriptor.Descriptor.MessageCallbacks[idx].MessageKey;
  }
  alert(result);          
});

Une description plus détaillée des PackageDesciptors se trouve ici.

Effacer des StateObjects

Vous pouvez effacer des StateObjects en invoquant la méthode “purgeStateObjects” :

Avec l’API JS :

controller.server.purgeStateObjects(sentinelName, packageName, name, type);

Avec l’API NG :

controller.purgeStateObjects(sentinelName, packageName, name, type);

Vous devez indiquer les filtres de sélection des StateObjects à supprimer avec la possibilité d’utiliser le wildcard ”*” seulement pour les paramètres “name” et “type”. Autrement dit vous êtes obliger de spécifier le “sentinelName” et “packageName”.

Rafraichir et déployer la configuration

Vous pouvez recharger la configuration Constellation avec la méthode “reloadServerConfiguration” :

Avec l’API JS :

controller.server.reloadServerConfiguration(deployConfiguration);

Avec l’API NG :

controller.reloadServerConfiguration(deployConfiguration);

Cette méthode attend un booléen (deployConfiguration) pour indiquer si oui ou non la configuration doit être déployée après son rechargement. Dans le cas d’un déploiement, la nouvelle configuration est envoyée à toutes les sentinelles et packages de votre Constellation.

The post Contrôler votre Constellation en Javascript appeared first on Constellation.