Il existe actuellement deux librairies Constellation JavaScript :

1. Constellation for Javascript
2. 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 :

1. Consumer
2. 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 :

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

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

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

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

<script type="text/javascript" src="Scripts/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.signalR-2.2.2.min.js"></script>
<script type="text/javascript" src="Scripts/Constellation-1.8.2.js"></script>

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 <span> 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 :

<body>
    <span id="cpu"></span> %
</body>

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

• Consommer Constellation avec l’API Javascript
• Consommer Constellation avec Angular JS
• Contrôler votre Constellation en Javascript
• Créer une application mobile multi-plateforme avec Cordova et l’API Javascript
• Créer une application mobile multi-plateforme avec Ionic et Angular JS
• Créer une application pour une montre Samsung Gear avec Tizen et AngularJS

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

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 :

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

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.

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 :

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

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 <html> de votre page pour lier votre page HTML à votre module Angular :

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="MyDemoApp">

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 (<body>) à ce contrôleur :

<body ng-controller="MyController">

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 :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="MyDemoApp">
<head>
    <title>Test API AngularJS</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.myconstellation.io/js/Constellation-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.myconstellation.io/js/ngConstellation-1.8.2.min.js"></script>
    
    <script>
        var myDemoApp = angular.module('MyDemoApp', ['ngConstellation']);
        myDemoApp.controller('MyController', ['$scope',  'constellationConsumer', function ($scope, constellation) {

        }]);
    </script>

</head>
<body ng-controller="MyController">

</body>
</html>

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 :

<body ng-controller="MyController">
    <button ng-click="SetNestTemperature()">Set Nest to 19°C</button>
</body>

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 :

<body ng-controller="MyController">
    <button ng-click="constellation.sendMessage({ Scope: 'Package', Args: ['Nest'] }, 'SetTargetTemperature', 'my_thermostat_id', 19)">Set Nest to 19°C</button>
</body>

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 : <input type="number" ng-model="targetTemperature" />
<button ng-click="SetNestTemperature()">Set target temperature</button>

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.

<body ng-controller="MyController">
   Host/IP : <input ng-model="host" />
   <button ng-click="Ping()">Ping</button>
   <p ng-show="pingResult">Result : {{pingResult}}ms</p>
</body>

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 :

<body ng-controller="MyController">
    <p>CPU : {{cpu}}</p>
</body>

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  :

<body ng-controller="MyController">
    <p>CPU on {{cpu.SentinelName }} at {{cpu.LastUpdate}} is <strong>{{cpu.Value.Value}} {{cpu.Value.Unit}}</strong></p>
</body>

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 :

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

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 :

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

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” :

<p ng-repeat="cpu in cpus">CPU on {{cpu.SentinelName }} at {{cpu.LastUpdate | date : 'dd//MM/yyyy @ hh:mm:ss' }} is <strong>{{cpu.Value.Value | number:2}} {{cpu.Value.Unit}}</strong></p>

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.

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 :

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

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

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

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 :

<ul>
  <li ng-repeat="s in sentinels">{{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}})</li>
</ul>

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 :

<ul>
  <li ng-repeat="s in sentinels">{{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}})
    <ul>
      <li ng-repeat="p in s.Packages">{{p.Package.Name}} version {{p.PackageVersion}} [{{p.State}}]</li>
    </ul>
  </li>
</ul>

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 :

<ul>
  <li ng-repeat="s in sentinels">{{s.Description.SentinelName}} [{{s.IsConnected ? "CONNECTED" : "DISCONNECTED"}}] ({{s.Description.OSVersion}})
    <ul>
      <li ng-repeat="p in s.Packages">{{p.Package.Name}} version {{p.PackageVersion}} [{{p.State}}]
        <ul>
          <li>CPU: {{p.CPU | number : 0 }}% - RAM: {{p.RAM / 1024 / 1024 | number: 0}}Mo</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

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” :

<button ng-click="controller.start(s.Description.SentinelName, p.Package.Name)">Start</button>
<button ng-click="controller.stop(s.Description.SentinelName, p.Package.Name)">Stop</button>
<button ng-click="controller.reload(s.Description.SentinelName, p.Package.Name)">Reload</button>
<button ng-click="controller.restart(s.Description.SentinelName, p.Package.Name)">Restart</button>

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é :

<button ng-hide="p.State == 'Started'" ng-click="controller.start(s.Description.SentinelName, p.Package.Name)">Start</button>
<button ng-show="p.State == 'Started'" ng-click="controller.stop(s.Description.SentinelName, p.Package.Name)">Stop</button>
<button ng-click="controller.reload(s.Description.SentinelName, p.Package.Name)">Reload</button>
<button ng-show="p.State == 'Started'" ng-click="controller.restart(s.Description.SentinelName, p.Package.Name)">Restart</button>

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 :

<ul>
  <li ng-repeat="log in logs">{{log.Date | date: 'dd/MM/yyyy HH:mm:ss' }} on {{log.SentinelName}}/{{log.PackageName}} : [{{ log.Level.toUpperCase() }}] {{log.Message}}</li>
</ul>

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 :

<button ng-click="controller.requestPackageDescriptor(p.Package.Name)">Show MessageCallbacks</button>

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.

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 :

1. Installer NodeJS si vous ne l’avez pas déjà
2. 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 :

• Installer et configurer Cordova
• Guide de démarrage Cordova
• Guide pour la plate-forme Android

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’) :

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

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 :

• https://code.jquery.com/jquery-2.2.4.min.js
• https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js
• https://cdn.myconstellation.io/js/Constellation-1.8.1.min.js

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

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

Connecter votre application

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

<allow-intent href="ws://"/>
<allow-intent href="*" />
<access origin="*" subdomains="true" />

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 :

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval';">

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 :

<h2>PC-SEB CPU: <span id="cpu">0</span> %</h2>

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 :

<a id="lockPC" href="#" class="btn">LOCK MY PC</a>

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

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

Découverte de Tizen

La Samsung Gear S2 tourne sous Tizen. Cet OS a été initié par Samsung sous le nom LiMo (Linux Mobile) avant d’être renommé en 2011 par Tizen lorsque qu’Intel a rejoint le projet en abandonnant MeeGo. Depuis 2012, Tizen est développé par la “Tizen Association” qui regroupe entre autres Samsung et Intel mais aussi Huawei, Fujitsu, NEC, Panasonic, Orange, NTT DoCoMo ou encore Vodafone.

Dans ses premières versions toutes les applications Tizen étaient des applications HTML/JS permettant de garantir une portabilité entre les différents équipements. Depuis la version 2.0 sortie en 2013, il est également possible de développer des applications natives. C’est également à cette date que Samsung a annoncé l’abandon de son précédent système Bada pour se consacrer exclusivement à Tizen.

On retrouve Tizen dans plusieurs équipements de la marque : des smartphones (série Samsung Z), tablettes ou PC aux wearables (série Gear) en passant par les TV comme la dernière UN65H8000AF ou les appareils photos (comme le NX1). Cet OS a pour objectif d’équiper une multitude équipement dont des produits électroménagers (micro-onde, lave-linge, réfrigérateur), des voitures, des imprimantes, etc…

Hello World Tizen

Pour commencer, rendez-vous sur le site développeur Samsung pour télécharger le SDK Tizen.

Une fois la base installée, il faudra lancer l’Update Manager afin de sélectionner les composants dont vous avez besoin.

Dans notre cas, nous allons télécharger le Framework “Wearable” 2.3.1 pour développer des applications pour la Gear S2 ainsi que les outils du SDK Tizen (dont l’Emulateur Manager) mais surtout, dans la catégorie “Extras”, les extensions “Tizen Wearable” et le Certification Manager.

Pour développer une application Tizen Wearable, on peut soit faire une application “Web” en utilisant HTML5/CSS/JavaScript, soit une application native C/C++ ou soit une application hydride (Web + native).

Ces applications Wearables peuvent être rangées dans deux catégories :

• “Standalone” : fonctionne sur votre montre de manière autonome
• “Companion” : est liée à une application “host” qui tourne sur un mobile (Tizen ou Android)

Lançons donc l’IDE Tizen, un IDE basé sur Eclipse. Nous pouvons alors créer un nouveau projet à partir de template ou d’exemple prêt à l’emploi.

Ici la page HTML est un simple Hello World avec quelques lignes de JS pour changer le contenu d’une div au clic et gérer le bouton « back ».

Pour tester votre application, vous disposez du « Emulator Manager » vous permettant de créer des VM pour émuler votre Gear S2 et tester vos applications en local :

Comme pour le développement d’une application Cordova/Ionic sur Android, vous disposez de l’inspecteur Chrome intégré :

Bien entendu, vous pouvez également déployer et debugger directement sur votre montre. La première chose à faire est d’activer le débogage dans les paramètres de votre Gear S2 et de la connecter sur votre réseau Wifi.

Depuis le “Connection Explorer” de l’IDE Tizen, vous pourrez alors ajouter un nouveau “Remote Device” en spécifiant l’IP de votre Gear :

Vous devrez alors approuver la connexion sur votre montre :

Après quoi elle sera connectée dans l’IDE Tizen de la même manière que l’émulateur :

Nous pouvons alors relancer l’application en mode “Run” ou “Debug” :

Avec toujours avec la possibilité de faire du “Remote Debug” avec l’inspecteur Chrome directement sur la montre !

Créer une application Tizen connectée à Constellation

Comme il s’agit d’une application Web/Javascript, nous pouvons simplement utiliser la librairie JavaScript de Constellation. Et pour simplifier d’avantage le code, utilisons AngularJS et son module Constellation.

Créons donc un nouveau projet Tizen Wearable :

Puis ajoutons les libraires Constellation dans le dossier « js » :

Après avoir référencé ces libraires dans la page « index.html », éditons le fichier « app.js » à la racine pour créer un contrôleur AngularJS en y injectant le module Constellation.

Nous initialiserons le client Constellation avec l’URI de votre Constellation et une clé d’accès :

var swatch = angular.module('swatch', ['ngConstellation'])  .controller('MainController', ['$scope', 'constellationConsumer',
     function ($scope, constellation) { 
      
     constellation.initializeClient("https://monServerConstellation.com/constellation", "MonAccessKey", "SWatch");
        
     constellation.connect();  
}]);

Pour chaque StateObject reçu de la Constellation, stockons-le dans une variable de notre scope Angular ce qui nous permettra de les exploiter dans le template HTML :

constellation.onUpdateStateObject(function (message) {
  $scope.$apply(function () {                  
    if ($scope[message.PackageName] == undefined) {
      $scope[message.PackageName] = {}; 
    }
    $scope[message.PackageName][message.Name] = message;      
    });
});

Enfin, lorsque que nous sommes connecté à Constellation abonnons-nous aux StateObjects des différents packages de notre Constellation que nous souhaitons intégrer dans notre application Tizen.

Pour ma part je demande les StateObjects du thermostat Nest, des caméras de sécurité connectés à ZoneMinder, de mon système home-made de monitoring des ressources énergétiques S-Energy (basé sur un Raspberry) et S-Opener (gestion de la porte de garage), des capteurs NetAtmo et Oregon via un RFXCOM, de la domotique Z-Wave via une Vera, des media-centers Xbmc/Kodi, de mon ampli Pioneer, des onduleurs, de l’alarme (Paradox), des capteurs de luminosité home-made (à base de Raspberry et ESP8266), des capteurs hardware via WMI et ceux du routeur DD-WRT et également les StateObjects du package Tesla présentés dans l’article précédent.

constellation.onConnectionStateChanged(function (change) {
  if (change.newState === $.signalR.connectionState.connected) {
    constellation.requestSubscribeStateObjects("*", "tesla", "*", "*");
    constellation.requestSubscribeStateObjects("*", "ZoneMinder", "*", "ZoneMinder.Monitor");
    constellation.requestSubscribeStateObjects("*", "SEnergy", "*", "*");
    constellation.requestSubscribeStateObjects("*", "SOpener", "*", "*");       
    constellation.requestSubscribeStateObjects("*", "NetAtmo", "*", "*");       
    constellation.requestSubscribeStateObjects("*", "rfxcom", "*", "*");
    constellation.requestSubscribeStateObjects("*", "Vera", "*", "*");
    constellation.requestSubscribeStateObjects("*", "Nest", "*", "*");
    constellation.requestSubscribeStateObjects("*", "Xbmc", "*", "*");
    constellation.requestSubscribeStateObjects("*", "Pioneer", "*", "*");
    constellation.requestSubscribeStateObjects("*", "BatteryChecker", "*", "*");
    constellation.requestSubscribeStateObjects("*", "Paradox", "*", "*");       
    constellation.requestSubscribeStateObjects("*", "LightSensor", "Lux", "*");     
    constellation.requestSubscribeStateObjects("CEREBRUM", "HWMonitor", "*", "*");
    constellation.requestSubscribeStateObjects("*", "ddwrt", "RouterAJS.WAN", "*");
    constellation.requestSubscribeStateObjects("*", "ddwrt", "RouterAJS.WAN.Stats", "*");
  }
});

Pas besoin de plus de code, on peut dès maintenant éditer la page HTML pour créer notre interface.

Par exemple pour afficher la température et l’humidité captées par les sondes NetAtmo, il me suffira dans le template HTML d’ajouter le code suivant :

<p>Salon : {{NetAtmo['Salon.Temperature'].Value}}°C | {{NetAtmo['Salon.Humidity'].Value}}%</p>
<p>Jardin : {{NetAtmo['Jardin.Temperature'].Value}}°C | {{NetAtmo['Jardin.Humidity'].Value}}%</p>
<p>Chambre1 : {{NetAtmo['Chambre1.Temperature'].Value}}°C | {{NetAtmo['Chambre1.Humidity'].Value}}%</p>
<p>Chambre2 : {{NetAtmo['Chambre2.Temperature'].Value}}°C | {{NetAtmo['Chambre2.Humidity'].Value}}%</p>

Tizen propose des classes CSS prêtes à l’emploi que nous pouvons directement appliquer sur nos balises HTML pour rendre le visuel plus agréable :

De plus grâce à la notion de StateObjects de Constellation, nous pouvons sans trop d’effort afficher tout type de donnée peu importe la source. Par exemple, ici nous affichons la température de 3 pièces différentes captées par trois technologies différentes (NetAtmo, RFXCOM et Z-WAve)

<p>Chambre (Netatmo) : {{NetAtmo['Chambre1.Temperature'].Value}}°C</p>
<p>Bureau (RFXCOM/Oregon) : {{rfxcom['Capteur Bureau'].Value.Temperature}}°C</p>
<p>Cave (Vera/Z-WAve) : {{Vera['Temperature Cave'].Value.Temperature}}°C</p>

La librairie Tizen fournit également quelques contrôles Javascript. Par exemple utilisons le « tau.widget.CircleProgressBar » qui nous attachons sur un élément « progressbar » lié au StateObject « Nest » :

<div class="ui-content">
  <div>Consigne: <span id="nestTarget">{{ Nest['Living Room'].Value.target_temperature_c }}</span>°C</div>
  <div>Actuelle: {{Nest['Living Room'].Value.ambient_temperature_c}}°C</div>
</div>
<progress class="ui-circle-progress" id="nestProgress" value="{{(Nest['Living Room'].Value.target_temperature_c}}" min="9" max="32"></progress>

Ainsi il devient alors possible de contrôler son thermostat en tournant le cadran rotatif de la montre :

Pour envoyer la température de consigne, il me suffit d’invoquer le MessageCallback « SetTargetTemperature » au package Nest par la ligne :

constellation.sendMessage({ Scope: 'Package', Args: [ 'Nest' ] }, 'SetTargetTemperature', [ deviceid, temperature ])

Pour reprendre l’exemple de la sonnette connectée à Constellation par un ESP8266, on peut facilement ajouter le contrôle du mode « muet » sur notre montre. Il suffit d’ajouter une checkbox dont l’état est coché si notre StateObject « IsMute » est vrai :

<div class="ui-toggleswitch ui-toggleswitch-large">
  <input type="checkbox" class="ui-switch-input" ng-checked="DoorBell.IsMute" ng-click="SetMute(!DoorBell.IsMute)">
  <div class="ui-switch-button"></div>
</div>

Et lorsque l’on clique sur la checkbox, on invoque le MessageCallback « SetMute » en passant l’état inverse de notre StateObject :

$scope.SetMute = function(isMute) {
  constellation.sendMessage({ Scope: 'Package', Args: [ 'DoorBell' ] }, 'SetMute', isMute);                 
};

De quoi contrôler notre sonnette à n’importe quel moment depuis son poignet :

On peut aussi très facilement contrôler toute notre domotique Z-Wave. Pour ce faire, créons une listview (<ul>) pour tous nos StateObjects du package « Vera » afin d’afficher une checkbox liée à l’état de notre module Z-Wave en utilisant un « ng-repeat ».

Et comme pour la sonnette, lorsque l’on clique dessus, on envoie un message au package Vera pour définir le nouvel état :

<ul class="ui-listview">
  <li class="li-has-multiline li-has-toggle" ng-repeat="device in Vera">
   <label>{{device.Name}}
      <span class="li-text-sub ui-li-sub-text">{{device.Metadatas.Room}}</span>
      <div class="ui-toggleswitch">
         <input type="checkbox" class="ui-switch-input" ng-click="SwitchVeraDevice(device)" ng-checked="device.Value.Status">
         <div class="ui-switch-button"></div>
      </div>
   </label>
  </li>
</ul>

Et là encore, juste avec ces quelques lignes de code HTML on obtient une interface de contrôle de tous nos équipements Z-Wave (lumières, appliances, volets) sur notre poignet :

De ce fait, chaque objet, service ou programme connecté dans Constellation peut être facilement intégré dans vos applications Javascript, que ce soit une page Web, une application mobile Cordova/Ionic ou bien comme ici une application Tizen pour votre montre !

Au final avec à peine 150 lignes de Javascript et 350 de code HTML, cette application me permet au quotidien de garder un œil sur mes serveurs, ma consommation énergétique et les différents capteurs météo de la maison, voir en temps réel mes caméras de sécurité, piloter mon système d’alarme, les lampes et volets de la maison, le thermostat, l’ampli ou encore porte ma porte de garage.

The post Connecter une application Tizen sur Samsung Gear à Constellation appeared first on Constellation.