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 :

<svg viewbox="0 0.5 10 8">
    <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#00ee4f"/>
        <stop offset="66%" stop-color="#eeae00"/>
        <stop offset="100%" stop-color="#ee0000"/>
    </linearGradient>
    </defs>
    <text x="50%" y="50%" id="h_air_value" text-anchor="middle"  alignment-baseline="middle" fill="#00ee4f">
        {{Math.round(capteurs["humiditeAir"])}}%
    </text>
    <path d="M2 8 A 4 4 0 1 1 8 8" fill="none" stroke-width="0.78" stroke="#E8F6FD" />
    <path class="loader" id="h_air_gauge" d="M2 8 A 4 4 0 1 1 8 8" fill="none" stroke-width="0.8" 
stroke="url(#linear)" />
</svg>

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

Introduction

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

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

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

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

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

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

La boîte aux lettres connectée

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

Composants utilisés

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

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

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

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

Nos capteurs fonctionnent avec une alimentation de 5V

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Etape 4 : Synchroniser toutes nos parties avec un package Constellation

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

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

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

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

Etape 5 : Fabrication de la boîte aux lettres

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

L’interface utilisateur

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

Etape 1 : Créer une application avec ionic

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

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

npm install – g cordova ionic

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

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

ionic start myApp tabs --type ionic1

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

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

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

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

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

Etape 2 : Visualiser notre application sur un smartphone

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

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

ionic link 
ionic upload

Ouvrez ensuite ionic view et visualisez votre application.

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

Etape 3 : Connecter notre application à constellation

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<ion-item ng-repeat="user in Users">
  <h2>{{user.firstName}} {{user.name}}</h2>
  <p>{{user.client ? "client":"facteur"}}</p>
</ion-item>

→ Exemple d’envoi d’un message Callback :

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

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

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

<button ng-click="deleteUser()">Supprimer cet utilisateur</button>

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

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

Voici un aperçu de notre application ionic :

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

The post Gammu : passerelle GSM pour envoyer et recevoir des SMS par Python-Gammu appeared first on Constellation.