Tag Mobile - Constellation

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

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

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

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

Introduction

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

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

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

Fonctionnement général

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

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

Matériel utilisé

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

Pour la Serre :

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

Pour les capteurs :

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

Pour le brumisateur :

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

Pour le système d’arrosage :

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

Pour l’éclairage :

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

Conception de la serre

Étape 1 : Préparation de la serre

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

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

Étape 2 : Branchement du relais

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

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

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

Etape 3 : Éclairage de la serre

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

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

Etape 4 : Installation du brumisateur

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

Etape 5 : Installation du système d’arrosage

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

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

Pour résumer…

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

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

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

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

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

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

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

Étape 6.3 : Programmation de la carte Arduino

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

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

Adafruit Unified Sensor
Adafruit TSL2561

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

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

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

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

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

La programmation vers Constellation

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

Etape 1 : Package relatif aux capteurs et actionneurs

Etape 1.1 : Acquisition des données des capteurs

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

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

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

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

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

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

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

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

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

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

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

Etape 1.3 : Automatisation des actionneurs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Étape 1 : Le noyau de l’application

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

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

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

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

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

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

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

et une ligne de ce type pour chaque State Object :

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

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

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

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

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

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

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

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

Le code JS :

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

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

SVG en HTML :

Étape 4 : Contrôler sa serre

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

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

Étape 5 : Les graphiques

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

Conclusion

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

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

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

Créer une 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.