Tag Consumer - Constellation

Créer une boite aux lettres connectée avec Constellation

Sebastien Warin — Wed, 27 Sep 2017 10:29:50 +0000

Projet réalisé par Judith Caroff, Jeanne Leclercq, Luc Fermaut, Pierre Hourdé, Jean-Baptiste Lavoine et Victorien Renault.

Introduction

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

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

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

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

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

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

La boîte aux lettres connectée

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

Composants utilisés

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

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

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

D0	D1	D2	D3	D4	D5	D6	D7	D8	RX	TX
16	5	4	0	2	14	12	13	15	3	1

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

Nos capteurs fonctionnent avec une alimentation de 5V

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

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

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

Branche du capteur à ultrasons	Pin de l’ESP8266
VCC	5V
GND	GND
TRIG	D4
ECHO	D3

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

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

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

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

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

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

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

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

Branche du NFC	Pin de l’ESP8266
RST	D1
SDA(SS)	D2
MOSI	D7
MISO	D6
SCK	D5
GND	GND
3.3 V	3.3 V

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

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

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

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

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

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

PIN DU MOTEUR	Pin de l’ESP8266
5 V (câble orange)	5 V
GND (câble marron)	GND
Commande (câble jaune)	D8

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

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

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

Etape 4 : Synchroniser toutes nos parties avec un package Constellation

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

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

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

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

Etape 5 : Fabrication de la boîte aux lettres

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

L’interface utilisateur

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

Etape 1 : Créer une application avec ionic

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

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

npm install – g cordova ionic

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

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

ionic start myApp tabs --type ionic1

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

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

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

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

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

Etape 2 : Visualiser notre application sur un smartphone

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

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

ionic link 
ionic upload

Ouvrez ensuite ionic view et visualisez votre application.

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

Etape 3 : Connecter notre application à constellation

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


  {{user.firstName}} {{user.name}}
  {{user.client ? "client":"facteur"}}

→ Exemple d’envoi d’un message Callback :

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

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

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

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

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

Voici un aperçu de notre application ionic :

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

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.

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.

Les différents hubs et interfaces REST du serveur Constellation

Sebastien Warin — Fri, 12 Aug 2016 14:19:15 +0000

Le serveur Constellation est accessible en HTTP ou HTTPS sur une ou plusieurs URIs.

Il héberge des hubs et des interfaces HTTP/REST. De plus il peut également héberger des fichiers statiques en configurant le “fileServer” ce qui permet par exemple l’auto-hébergement de la console Constellation (plus d’info ici).

Les hubs Constellation sont basés sur la technologie SignalR permettant d’exposer des canaux de communication bi-directionnels et temps réel en HTTP long-polling, server-event ou WebSocket en fonction des capacités du client.

Les interfaces HTTP/REST sont en fait des contrôleurs WebAPI exposant des méthodes en HTTP/REST. Les interfaces HTTP/REST permettent d’exposer des fonctionnalités de Constellation de manière très simple pour les devices ou frameworks ne pouvant supporter SignalR.

Il existe 4 hubs :

Constellation
Consumer
Controller
Sentinel

Ainsi que 3 interfaces HTTP/REST :

Constellation
Consumer
Management

Le hub et l’interface HTTP “Constellation” sont utilisés par les packages Constellation (réels ou virtuels). Ils exposent des méthodes pour écrire des logs, pour récupérer les settings, pour publier ou interroger des StateObjects, envoyer ou recevoir des messages, etc…

Le hub et l’interface HTTP “Consumer” sont utilisés par les “consommateurs”. Par exemple une page Web est un consommateur, c’est à dire qu’elle se connecte à Constellation pour interroger des StateObjects ou envoyer/recevoir des messages mais elle n’est pas un package (son cycle de vie est lié au navigateur du client). Un “consommateur” ne peut pas produire des logs, avoir de settings ou encore publier des StateObjects.

Le hub “Controller” 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 consommation des ressources des packages, etc… Ce hub est notamment utilisé par la Console Constellation pour vous fournir une interface de pilotage de votre Constellation. Pour pouvez également vous connecter et exploiter les fonctionnalités de contrôle de vos pages Web ou packages .NET.

Le hub “Sentinel” est un hub privé réservé aux sentinelles de la Constellation. C’est sur ce hub que les sentinelles s’enregistrent, remontent les états des packages qu’elles supervisent, etc…

Enfin l’interface HTTP “Management” aussi nommée “Management API” est une API HTTP/REST de management du serveur permettant la gestion des sentinelles, des packages, des settings, des credentials, etc… Cette API est notamment utilisée par la Console Constellation pour vous fournir une interface d’administration de votre Constellation.

The post Les différents hubs et interfaces REST du serveur Constellation appeared first on Constellation.

Consommer Constellation avec l’API Javascript

Sebastien Warin — Thu, 18 Aug 2016 14:41:46 +0000

Connecter une page HTML avec l’API Javascript

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

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

Une fois les scripts ajoutés dans votre page vous devez initialiser le client Constellation en spécifiant l’URL de votre serveur Constellation, la clé d’accès et le “Friendly name” de votre page :

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

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.connection.stateChanged(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 Start :

constellation.connection.start();

Et voilà, votre page 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.server.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.server.sendMessage({ Scope: 'Package', Args: ['Nest'] }, 'SetTargetTemperature', 'thermostatId', 19);

Vous pouvez également passer plusieurs arguments à votre MC combinant type simple et type complexe.

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.server.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) 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 suffit d’envoyer un message sans paramètre au bon scope. Par exemple :

constellation.server.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.

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 vers « www.google.fr » depuis une page Web :

constellation.server.sendMessageWithSaga(function(response) {
        console.log("Ping %s ms", response.Data);
    }, { Scope: 'Package', Args: ['NetworkTools'] }, 'Ping', "www.google.fr");

Souvenez-vous de notre package virtuel de notre ESP8266 / Arduino, on exposait un MessageCallback “Addition” capable de réaliser une addition locale (sur le CPU de l’Arduino ou ESP) en prenant en paramètre deux entiers. Le résultat était retourné dans la saga.

constellation.server.sendMessageWithSaga(function(response) {
        console.log("Le resultat de 40+2 par l'Arduino est %s", response.Data);
    }, { Scope: 'Sentinel', Args: ['MyArduino'] }, 'Addition', 40, 2);

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.server.subscribeMessages("Demo");

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

constellation.client.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.client.registerMessageCallback("ChangeTitle", function (msg) {
    document.title = msg.Data;
});
constellation.client.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.

Imaginez par exemple que vous ouvrez une page Web en plein écran sur différents devices dont vous n’avez pas de contrôle (par exemple des écrans Dashboard). Sur cette page vous affichez différentes données en temps réel, par exemple basées sur les StateObjects Constellation.

Vous modifiez votre page et vous souhaitez donc la rafraîchir sur tous les navigateurs qui ont ouvert votre page pour recharger la nouvelle version.

Pour ce faire, vous pouvez facilement exposer un MessageCallback “ReloadMe” qui recharge la page avec le code :

constellation.client.registerMessageCallback("ReloadMe", function (msg) {
    location.reload();
});

Puis vous ajoutez votre page dans le groupe “ControlPage” :

constellation.server.subscribeMessages("ControlPage");

Dans ce fait, vous pouvez maintenant créer une page “cachée” avec un bouton pour invoquer le MessageCallback “ReloadMe” sur le groupe “ControlPage” afin de recharger toutes les navigateurs qui ont ouvert votre page par la ligne :

constellation.server.sendMessage({ Scope:'Group', Args:['ControlPage'] }, "ReloadMe", {});

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.client.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.server.requestSubscribeStateObjects("*", "Demo", "*", "*");

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

Par exemple :

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

constellation.client.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é.

The post Consommer Constellation avec l’API Javascript 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.

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.

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

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.

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

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.

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

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

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.

Créer une application mobile multi-plateforme connectée à Constellation avec Cordova

Sebastien Warin — Fri, 19 Aug 2016 08:28:47 +0000

La plateforme Apache Cordova (anciennement PhoneGap) permet de créer des applications mobiles (Android, Windows Phone, iPhone, Blackberry, …) en utilisant les technologies Web (HTML, JS, CSS).

Couplée à la libraire JavaScript Constellation, il devient très facile de créer une application mobile pour votre smartphone ou tablette connectée à Constellation.

Installer Cordova

Cordova utilise nodejs, l’installation est donc très simple et rapide :

Installer NodeJS si vous ne l’avez pas déjà
Depuis le terminal (ou cmd pour windows) lancez la commande :

npm install -g cordova

Et voila Cordova est installé, mais il vous faut maintenant installer les SDK spécifiques aux plateformes que vous comptez utiliser.

Pour plus d’information, quelques ressources :

Créer un projet Cordova

Lancez une invite de commande Windows et tapez la ligne suivante pour créer votre projet :

cordova create Demo

Ensuite ajoutez le ou les plateformes cibles de votre application. Par exemple, développons une application pour Android :

cd Demo
cordova platform add android

Pour démarrer votre application sur l’émulateur Android ou sur votre terminal Android (connecté en USB) :

cordova run android

Tester votre application sur l’émulateur

En utilisant le “Android Virtual Device (AVD) Manager” créez un device que l’on nommera ici “SmartphoneDemo” sous Android 5.1.1 :

Vous pouvez ensuite cliquer sur le bouton “Start” pour lancer le device virtuel :

Enfin lancez la commande suivante pour déployer et démarrer votre application dans l’émulateur :

cordova run android

Debugger votre application avec l’inspecteur Chrome

Dans un nouvel onglet Chrome, rendez-vous sur chrome://inspect/#devices. Vous pourrez alors inspecter votre application Cordova :

Ainsi vous profiterez de tous les outils de debugging Web pour votre application mobile.

Déployer votre application sur votre téléphone

En connectant votre téléphone Android en USB ( sans oublier d’activer le debugging USB dans les paramètres de votre téléphone) vous pouvez, toujours avec la commande :

cordova run android

… lancer votre application sur votre téléphone et utiliser l’inspecteur Chrome pour la debugger à distance.

Autrement vous pouvez aussi utiliser la commande :

cordova build android

… pour générer le fichier APK, l’équivalent de l’installeur de votre application, qu’il faudra copier et lancer sur votre téléphone ou tablette Android.

Connecter votre application Cordova à Constellation

La structure d’une application Cordova est la suivante :

Une page “index.html”, la page de démarrage de votre application
Des dossiers css, img et js pour ranger respectivement les feuilles de style CSS, les images et les scripts JS

En clair votre application mobile se développe comme une véritable application Web. Vous pouvez ensuite ajouter des plugins pour accéder fonctionnalités du téléphone depuis votre code JavaScript (téléphonie, SMS, contacts, GPS, Bluetooth, Wifi, appareil photo, etc..).

Ajouter les librairies Constellation

Comme il s’agit d’une application Web, connecter une application Cordova à Constellation revient à connecter une page Web à Constellation.

Vous pouvez donc inclure les libraires en utilisant les CDN (en prenant soin de spécifier le schème explicitement, par exemple ‘https’) :

Par contre afin d’améliorer les performances de votre application mobile, il est recommandé d’embarquer ces libraires dans votre application.

Pour cela téléchargez (clique-droit > Enregistrer sous …) dans le dossier “js” les librairies JavaScript suivantes :

Puis ajoutez-les dans votre page “index.html” de cette façon:

Connecter votre application

Tout d’abord dans le ficher “config.xml” à la racine de votre projet Cordova, ajoutez ces quelques lignes :

Cela permet d’autoriser le container Cordova à accéder à des ressources externes comme le serveur Constellation !

Aussi dans votre page principale, index.html, modifiez le “Content-Security-Policy” par :

On autorise ainsi notre page à exploiter des services et scripts externes.

Dans le fichier de script principal (app.js), créez un client “Consumer” en spécifiant l’adresse de votre serveur Constellation, une clé d’accès et un friendly name :

constellation: $.signalR.createConstellationConsumer("http://constellation.monServer.com:8088", "MaCle123!", "Demo Cordova"),

Dans la fonction “onDeviceReady” lancez la connexion au serveur Constellation par la ligne :

app.constellation.connection.start();

Pour finir dans la fonction “initialize” attachez un handler sur le changement d’état de la connexion Constellation. L’idée étant d’afficher le texte “Connected to Constellation” à la place du message “Device is Ready” du sample Cordova.

app.constellation.connection.stateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    $('.received').text('connected to constellation');
  }
});

En démarrant l’application dans l’émulateur, votre application se connectera au hub “Consumer” de votre Constellation :

Vous pouvez maintenant envoyer des messages et invoquer des MessageCallbacks de vos différents packages, recevoir des messages pour que les autres clients de la Constellation puissent invoquer des méthodes de votre application mobile par exemple, interroger ou suivre en temps réel des StateObjects publiés par les packages de votre Constellation.

Quelques exemples ci-après …

Afficher en temps réel des StateObjects

Reprenons l’exemple du StateObject “/intelcpu/0/load/0” produit par le package “HWMonitor” et correspondant à la consommation de votre CPU.

Pour cela nous allons enregistrer StateObjectLink sur ce StateObject en ciblant une sentinelle en particulier. Ici la sentinelle UI de mon ordinateur se nomme “PC-SEB_UI”.

Vous pouvons écrire :

app.constellation.connection.stateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    $('.received').text('connected to constellation');
    app.constellation.client.registerStateObjectLink("PC-SEB_UI", "HWMonitor", "/intelcpu/0/load/0", "*", function (so) {
      $("#cpu").text(Math.round(so.Value.Value * 100) / 100);
    });
  }
});

Sans oublier d’ajouter le “span” dans lequel afficher notre consommation :

PC-SEB CPU: 0 %

Et voilà comment en quelques lignes afficher des StateObjects en temps réel dans une application mobile multi-plateforme.

Dans cet exemple nous affichons la consommation CPU capturée par le package HWMonitor mais nous pouvons bien sûr afficher n’importe quel StateObject : des capteurs de température, état d’une zone de l’alarme, position de votre voiture, volume de l’ampli, consommation électrique, état d’une lampe, etc.…

Invoquer des MessageCallbacks

Tout comme n’importe quel “consommateur”, votre application mobile multi-plateforme peut envoyer des messages et donc invoquer des MessageCallbacks.

Pour découvrir les MessageCallbacks de votre Constellation, vous pouvez utiliser le MessageCallback Explorer de la Console Constellation.

Par exemple, après avoir déployé le package “WindowsControl” sur une sentinelle Windows, vous pouvez invoquer des MC pour arrêter votre Windows, verrouiller la session, se déconnecter, redémarrer ou encore mettre en veille la machine.

Ajoutons à notre application Android la capacité de verrouiller notre PC Windows. Pour cela vous pouvez cliquer sur l’icone pour générer le code d’invocation de ce MC en sélectionnant le langage de votre choix, dans notre cas, “Javascript” :

Dans notre page “index.html”, ajoutons un simple bouton (ou lien) HTML :

LOCK MY PC

Et dans notre fichier Javascript, invoquons le MessageCallback “’LockWorkStation” lorsque l’utilisateur clique sur notre bouton :

$("#lockPC").click(function () 
  constellation.server.sendMessage({ Scope: 'Package', Args: ['PC-SEB_UI/WindowsControl'] }, 'LockWorkStation', {});
});

Notez que dans le code ci-dessus, à l’inverse de l’exemple donné par le générateur de code de la Console Constellation, nous avons défini le nom de l’instance du package et non le nom du package seul. En effet, en envoyant un message au scope de type Package ”WindowsControl”, votre message sera reçu par toutes les instances du package “WindowsControl” quelque soit la sentinelle. Autrement dit, toutes les sentinelles Windows qui exécutent le package “WindowsControl” seront verrouillées. Pour cibler votre sentinelle en particulier, nous avons indiqué ici le nom de l’instance, c’est à dire le couple “Sentinelle + Package”, ici “PC-SEB_UI/WindowsControl”.

Aussi, d’un point de vue visuel, Cordova n’inclut pas de framework CSS à l’inverse d’Ionic par exemple. De ce fait tout est à votre charge. Ici nous avons créer un lien () sur lequel nous avons appliqué la classe CSS “btn”. Vous pouvez, pour l’exemple, utiliser des générateurs tel que celui-ci ou encore celui-la pour générer la classe “btn”.

Et voilà, notre application Android est maintenant capable de verrouiller notre poste Windows et d’afficher la consommation CPU en temps réel :

(screen here)

Pour aller plus loin …

Donc vous avez pu le découvrir dans cet article, réaliser des applications mobiles (ou tablettes) pour Android, iOS, Windows ou autre est relativement facile avec des plateformes comme Cordova. En utilisant la libraire JavaScript Constellation, vous pouvez donc développer des applications mobile connectées à Constellation en quelques minutes.

Une fois que votre application mobile est connectée à votre Constellation, elle peut suivre en temps réel tous les StateObjects produits par les packages de votre Constellation et invoquer des méthodes de ces packages en envoyant des messages.

De ce fait vous êtes libre de créer vos propres applications de supervision ou de contrôle de vos systèmes, services, réalisations, de votre domotique, etc…

Par exemple, vous créer un objet connecté avec un Raspberry et du Python ou bien un Arduino ou ESP8266, et vous pouvez créer facilement l’enrichir avec une application mobile. Ou bien vous ajoutez des lampes Hue et un media-center Kodi et vous décidez de créer une applications mobile unique pour tout contrôler en utilisant Constellation comme centralisateur.

Pour ma part je vous recommande vivement d’utiliser Ionic plutôt que Cordova. En effet, Ionic n’est ni plus ni moins qu’une surcouche à Cordova qui intègre le framework AngularJS et un framework CSS. Grace à Ionic vous pouvez développer des applications plus riche et beaucoup plus rapidement.

The post Créer une application mobile multi-plateforme connectée à Constellation avec Cordova appeared first on Constellation.

Créer une application mobile multi-plateforme connectée à Constellation avec Ionic

Sebastien Warin — Fri, 19 Aug 2016 08:29:16 +0000

// En cours de rédaction …

intro
install / base / link
hello world (request SO & send msg)
déploiement

The post Créer une application mobile multi-plateforme connectée à Constellation avec Ionic appeared first on Constellation.

L’interface REST « Consumer »

Sebastien Warin — Fri, 12 Aug 2016 14:44:31 +0000

L’interface REST “Consumer” permet à tout système, script, objet ou programme de “consommer” des éléments dans une Constellation sans devoir être déclaré comme un package.

Un consommateur peut :

Consommer des StateObjects (Request ou Subscribe)
Envoyer ou recevoir des messages

Généralités

Construction de l’URL

L’URL est : /rest/consumer/?

Partons du principe que votre Constellation est exposée en HTTP sur le port 8088 (sans path). On retrouvera dans le fichier de configuration la section suivante :

La “Root URI “ est donc “http://:8088/”.

Par exemple si nous sommes en local, nous pourrions écrire :

http://localhost:8088/rest/consumer/xxxxx

Authentification

Comme pour toutes les requêtes vers Constellation vous devez impérativement spécifier dans les headers HTTP ou dans les paramètres de l’URL (querystring), les paramètres “SentinelName”, “PackageName” et “AccessKey” pour l’authentification.

Dans le cas de l’API “Consumer”, la “SentinelName” est “Consumer” et le “PackageName” est le nom de votre choix que l’on considère comme un “FriendlyName”. Typiquement le “FriendlyName” est par exemple le nom de l’application/page qui se connecte.

L’AccessKey doit bien sur être déclarée et activée sur le serveur.

Ainsi chaque appel sera sous la forme :

http://localhost:8088/rest/consumer/?SentinelName=Consumer&PackageName=&AccessKey=&

Check Access

Toutes les API REST de Constellation exposent une méthode en GET “CheckAccess” qui retourne un code HTTP 200 (OK). Cela permet de tester la connexion et l’authentification au serveur Constellation.

Action : “CheckAccess” (GET)
Paramètres : aucun

Exemple :

http://localhost:8088/rest/consumer/CheckAccess?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123

Envoyer des messages

Action : “SendMessage” (GET ou POST)
En GET, voici les paramètres de l’URL :
- scope : le type de scope (All, Other, Group, Sentinel ou Package)
- args : les arguments du scope (par exemple le nom du groupe, de la sentinelle, du package ou de l’instance du package – plusieurs valeurs possibles séparées par des virgules)
- key : la clé du message (= la méthode à invoquer)
- data : le contenu du message (= les arguments de la méthode)
- sagaId (optionnel) : l’identification de la saga si le message est envoyé dans une saga

Vous pouvez également invoquer cette action en POST. Le corps de votre requête contiendra l’objet JSON suivant :

{
  "Scope" : { "Scope" : "", Args: [ "", "", .... ], "SagaId":"Identifiant de la Saga" },
  "Key" : "",
  "Data" : ""
}

La propriété “SagaId” dans le JSON ci-dessus est optionnelle.

Par exemple pour envoyer un message au package Nest en invoquant la méthode (key) “SetTargetTemperature” avec en paramètre le nombre “21” :

http://localhost:8088/rest/consumer/SendMessage?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&scope=Package&args=Nest&key=SetTargetTemperature&data=21

Par exemple pour invoquer ce MessageCallback depuis cURL :

curl "http://localhost:8088/rest/consumer/SendMessage?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&scope=Package&args=Nest&key=SetTargetTemperature&data=21"

Ce même MessageCallback “SetTargetTemperature” du package Nest peut être invoqué dans une saga afin de recevoir un un accusé de réception :

http://localhost:8088/rest/consumer/SendMessage?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&scope=Package&args=Nest&key=SetTargetTemperature&data=21&sagaId=123456789

Il faudra ensuite “récupérer” les messages reçus (voir dessous) pour lire la réponse à votre saga que nous avons ici identifié par la clé “123456789”.

Autre exemple avec un MessageCallback avec plusieurs paramètres :

http://localhost:8088/rest/consumer/SendMessage?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&scope=Package&args=MyPackage&key=MethodeAvec3Params&data=[ 'param 1', 123, true ]

Attention le contenu du paramètre « args » doit être encodé. De ce fait, avec cURL :

curl "http://localhost:8088/rest/consumer/SendMessage?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&scope=Package&args=MyPackage&key=MethodeAvec3Params&data=%5B+%27param+1%27%2C+123%2C+true+%5D"

Pour invoquer ce même MC avec un « POST » depuis cURL :

curl -H "Content-Type: application/json" -X POST -i -d '{ "Scope" : { "Scope" : "Package", Args: [ "MyPackage"] }, "Key" : "MethodeAvec3Params", "Data" : [ "param 1", 123, true ] }' "http://localhost:8088/rest/consumer/SendMessage?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123"

Recevoir des messages

Créer un abonnement de réception

Tout d’abord pour recevoir des messages il faut s’abonner aux messages.

Action : “SubscribeToMessage” (GET)
Paramètres :
- subscriptionId (optionnel) : identifiant de l’abonnement si déjà connu

http://localhost:8088/rest/consumer/SubscribeToMessage?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123

Vous obtiendrez en réponse l’ID de votre abonnement, le “Subscription Id”.

Relever les messages

Action : “GetMessages” (GET)
Paramètres :
- subscriptionId : identifiant de l’abonnement
- timeout (optionnel – par défaut 60000) : temps maximal en milliseconde de la mise en attente de la requête (entre 1000ms et 120000ms)
- limit (optionnel – par défaut 0) : nombre maximum de message à retourner pour l’appel

Il s’agit d’une requête en “long-polling” c’est à dire que la requête sera “bloquée” sur le serveur tant qu’il n’y a pas de message reçu évitant ainsi de “flooder” en continue le serveur pour savoir si de nouveaux messages sont disponibles ou non. Par défaut la requête est bloquée 60 secondes maximum mais vous pouvez personnaliser cette valeur avec le paramètre “timeout”. Si il y a des messages disponibles, le serveur vous renvoi un tableau JSON avec les messages reçus. Si il n’y a pas de réponse dans le délai spécifié par le paramètre “timeout” (60 secondes par défaut), le tableau retourné sera vide.

A chaque réponse vous devez donc relancer une requête “GetMessages” pour “écouter” les prochains messages qui vont sont destinés.

Il est également possible de limiter le nombre de message dans la réponse avec le paramètre “limit” ce qui peut être utile sur de petits “devices” ne disposant pas de beaucoup de mémoire RAM pour désérialiser de gros tableaux JSON.

Exemple simple :

http://localhost:8088/rest/consumer/GetMessages?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&subscriptionId=xxxxx

Autre exemple en limitant le nombre de message à 2 par appel et en bloquant la requête pendant 10 secondes au maximum :

http://localhost:8088/rest/consumer/GetMessages?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&subscriptionId=xxxxx&timeout=10000&limit=2

S’abonner à un groupe

Vous pouvez vous abonner à des groupes pour recevoir les messages envoyés dans ces groupes par l’action “SubscribeToMessageGroup” en précisant le nom du groupe et votre ID d’abonnement.

Action : “SubscribeToMessageGroup” (GET)
Paramètres :
- group : le nom du groupe à joindre
- subscriptionId (optionnel) : identifiant de l’abonnement si déjà connu

http://localhost:8088/rest/consumer/SubscribeToMessageGroup?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&subscriptionId=xxxxx&group=A

Comme l’action “SubscribeToMessage”, cette action vous retourne l’ID d’abonnement à utiliser pour l’action “GetMessages”.

Consommation de StateObjects

Request

Cette méthode permet de récupérer la valeur actuelle d’un ou de plusieurs StateObjects.

Action : “RequestStateObjects” (GET)
Paramètres :
- sentinel (optionnel – par défaut “*”): nom de la sentinelle
- package (optionnel – par défaut “*”) : nom du package
- name (optionnel – par défaut “*”) : nom du StateObject
- type (optionnel – par défaut “*”) : type du StateObject

Par exemple pour récupérer tous les StateObject de votre Constellation :

http://localhost:8088/rest/consumer/RequestStateObjects?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123

Ou seulement ceux produits par le package “HWMonitor” (quelque soit la sentinelle) :

http://localhost:8088/rest/consumer/RequestStateObjects?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&package=HWMonitor

Ou encore tous les StateObjects nommés “/intelcpu/load/0” et produits le package “HWMonitor” (quelque soit la sentinelle) :

http://localhost:8088/rest/consumer/RequestStateObjects?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&package=HWMonitor&name=/intelcpu/load/0

Vous pouvez également vous abonner aux mises à jour des StateObjects.

Le principe est le même qu’avec les messages : il faut récupérer un ID d’abonnement et invoquer une méthode en long-polling pour recevoir les mises à jour.

S’abonner à des StateObjects

Action : “SubscribeToStateObjects” (GET)
Paramètres :
- subscriptionId (optionnel) : identifiant de l’abonnement si déjà connu
- sentinel (optionnel – par défaut “*”): nom de la sentinelle
- package (optionnel – par défaut “*”) : nom du package
- name (optionnel – par défaut “*”) : nom du StateObject
- type (optionnel – par défaut “*”) : type du StateObject

En retour vous obtiendrez l’ID d’abonnement (un GUID).

Par exemple pour s’abonner au SO “/intelcpu/load/0”, produit le package “HWMonitor” sur la sentinelle “MON-PC” :

http://localhost:8088/rest/consumer/SubscribeToStateObjects?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&sentinel=MON-PC&package=HWMonitor&name=/intelcpu/load/0

ATTENTION : si vous souhaitez “ajouter” des SO à votre abonnement vous devez impérativement préciser votre ID d’abonnement récupéré lors du 1er appel autrement vous allez créer un nouvel abonnement.

Par exemple pour “ajouter” le SO correspondant à la consommation RAM :

http://localhost:8088/rest/consumer/SubscribeToStateObjects?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&sentinel=MON-PC&package=HWMonitor&name=/ram/load&subscriptionId=

Relever les StateObjects mis à jour

Pour récupérer les SO de votre abonnement qui ont changés entre deux appels vous devez invoquer l’action “GetStateObjects” en spécifiant l’ID de votre abonnement :

Action : “GetStateObjects” (GET)
Paramètres :
- subscriptionId : identifiant de l’abonnement
- timeout (optionnel – par défaut 60000) : temps maximal en milliseconde de la mise en attente de la requête (entre 1000ms et 120000ms)
- limit (optionnel – par défaut 0) : nombre maximum de message à retourner pour l’appel

Comme pour les message, vous pouvez limiter le nombre de SO (limit) et le timeout de la requête (timeout).

http://localhost:8088/rest/consumer/GetStateObjects?SentinelName=Consumer&PackageName=Demo&AccessKey=MaCleDeTest123&subscriptionId=

Notez que si un StateObject pour lequel vous êtes abonné change plusieurs fois entre deux appels “GetStateObjects”, vous obtiendrez la dernière valeur et non l’historique de tous les changements.

The post L’interface REST « Consumer » appeared first on Constellation.