﻿<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tag IoT - Constellation</title>
	<atom:link href="https://developer.myconstellation.io/tag/iot/feed/" rel="self" type="application/rss+xml" />
	<link>https://developer.myconstellation.io/tag/iot/</link>
	<description>Votre plateforme d&#039;interconnexion</description>
	<lastBuildDate>Sun, 29 Jul 2018 05:49:22 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.0.11</generator>

<image>
	<url>https://developer.myconstellation.io/wp-content/uploads/2016/02/256x256-e1457476015859.png</url>
	<title>Tag IoT - Constellation</title>
	<link>https://developer.myconstellation.io/tag/iot/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>FriendLeaf : la serre connectée grâce à Constellation</title>
		<link>https://developer.myconstellation.io/tutorials/friendleaf-la-serre-connectee-grace-a-constellation/</link>
					<comments>https://developer.myconstellation.io/tutorials/friendleaf-la-serre-connectee-grace-a-constellation/#respond</comments>
		
		<dc:creator><![CDATA[Sebastien Warin]]></dc:creator>
		<pubDate>Tue, 17 Jul 2018 09:40:50 +0000</pubDate>
				<category><![CDATA[Tutoriels]]></category>
		<category><![CDATA[Relais]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[Raspberry Pi]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[smartphone]]></category>
		<category><![CDATA[PushBullet]]></category>
		<category><![CDATA[Notification]]></category>
		<category><![CDATA[AngularJS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[Arduino]]></category>
		<category><![CDATA[Saga]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=6084</guid>

					<description><![CDATA[<p>Plus besoin de disposer d&#8217;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</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/friendleaf-la-serre-connectee-grace-a-constellation/">FriendLeaf : la serre connectée grâce à Constellation</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><i>Plus besoin de disposer d&rsquo;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.</i></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure1.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title=" FriendLeaf : la serre connectée grâce à Constellation" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure1_thumb.png" alt="FriendLeaf : la serre connectée grâce à Constellation" width="354" height="266" border="0" /></a></p>
<p>Projet réalisé par Théo DELOOSE, Clara BOMY, Clément NOUGÉ, Mathieu GABRIEL, Marine DAEL et Thaï-Son DANG.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure2.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="L'équipe FriendLeaf" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure2_thumb.png" alt="L'équipe FriendLeaf" width="254" height="208" border="0" /></a></p>
<p><span id="more-6084"></span></p>

<h3>Introduction</h3>
<p>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&rsquo;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.</p>
<p>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.</p>
<p>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.</p>
<h3>Fonctionnement général</h3>
<p>Nous avons pensé<i> FriendLeaf </i>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, <i>FriendLeaf </i>alerte l’utilisateur lorsque le réservoir d’eau est vide. Tout est synchronisé en temps réel comme par magie grâce à Constellation.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure3.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Communication" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure3_thumb.png" alt="Communication" width="400" height="150" border="0" /></a></p>
<p>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.</p>
<p align="center"> <a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure4.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Schéma général de la serre " src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure4_thumb.png" alt="Schéma général de la serre " width="450" height="244" border="0" /></a></p>
<h3>Matériel utilisé</h3>
<p>Pour réaliser notre projet, nous nous sommes servis des composants suivants :</p>
<p>Pour la Serre :</p>
<ul>
<li><u><a href="https://www.ikea.com/fr/fr/catalog/products/70186603/">Serre SOCKER Ikea</a></u> (12,99€), Ikea</li>
<li>Bac pour le terreau (1,50€), Jardinerie</li>
<li><u><a href="https://www.amazon.fr/Raspberry-Pi-3-Mod%C3%A8le-B-Carte-m%C3%A8re/dp/B07BDR5PDW/ref=sr_1_cc_3?s=aps&amp;ie=UTF8&amp;qid=1528895423&amp;sr=1-3-catcorr&amp;keywords=raspberry+pi+3B">Carte Raspberry Pi 3B </a></u>(40,80€), Amazon</li>
<li><u><a href="https://www.amazon.fr/Elegoo-Optocoupleur-Continu-Arduino-Raspberry/dp/B06XKST8XC/ref=sr_1_1?s=computers&amp;ie=UTF8&amp;qid=1528792288&amp;sr=1-1&amp;keywords=4%2Bcanaux%2B250V&amp;th=1">Relais 4 canaux</a></u> supportant jusqu’à 5A et 250V (AC) et 30V (DC) (9,99€), Amazon</li>
<li>Câbles de connexion</li>
<li>Boîte de dérivation</li>
</ul>
<p>Pour les capteurs :</p>
<ul>
<li>Humidité et température air : <u><a href="https://www.amazon.fr/SODIAL-Humidite-Numerique-Temperature-Arduino/dp/B00K67XRFC/ref=sr_1_1?ie=UTF8&amp;qid=1529502640&amp;sr=8-1&amp;keywords=dht+11">DHT11</a></u> (1,31€), Amazon</li>
<li>Luminosité : <u><a href="https://www.gotronic.fr/art-capteur-de-luminosite-tsl2561-19569.htm">TSL2561</a></u> (6,95€), Gotronic</li>
<li>Humidité sol : <u><a href="https://www.gotronic.fr/art-capteur-d-humidite-gt110-26091.htm#complte_desc">GT110</a></u> (2,40€), Gotronic</li>
<li>Niveau d’eau : <u><a href="https://www.gotronic.fr/art-detecteur-de-niveau-gravity-sen0205-25296.htm">Gravity SEN0205</a></u> (10,50€), Gotronic</li>
</ul>
<p>Pour le brumisateur :</p>
<ul>
<li>Un <u><a href="https://www.amazon.fr/Ultrasons-Shineus-Humidificateur-Fontaine-Atomisation/dp/B077HSKYN8/ref=sr_1_4?ie=UTF8&amp;qid=1528895226&amp;sr=8-4&amp;keywords=mist+maker">émetteur à ultrasons</a></u> (9,89€), Amazon</li>
<li>Une alimentation pour le brumisateur (24V DC, 1A) (25€), Derotronic, Lille</li>
<li>Un bol</li>
</ul>
<p>Pour le système d’arrosage :</p>
<ul>
<li>Une <u><a href="https://www.amazon.fr/Gugutogo-submersible-%C3%A9lectrique-silencieux-m%C3%A9canique/dp/B07BXJTND4/ref=sr_1_3?s=electronics&amp;ie=UTF8&amp;qid=1529927406&amp;sr=1-3&amp;keywords=pompe+%C3%A0+eau+12v">pompe à eau</a></u> (5,48€), Amazon</li>
<li>Une alimentation 12V 600mA (12€), Derotronic, Lille</li>
<li>Un jerrican (environ 10€)</li>
<li>Un tuyau (ø7mm -ø10mm), Diall</li>
</ul>
<p>Pour l’éclairage :</p>
<ul>
<li>2m de <u><a href="http://www.blachere-illumination-store.com/fr/nos-creations/326-fil-lumiere-blanc-8m-3587880017658.html">guirlandes lumineuses</a></u> (1m LED et 1m incandescent), Blachère</li>
<li>Une alimentation pour fil lumière, Blachère</li>
<li>Colliers de serrage</li>
</ul>
<h3>Conception de la serre</h3>
<h4>Étape 1 : Préparation de la serre</h4>
<p>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.</p>
<p>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.</p>
<p align="center"> <a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure5.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="La serre &quot;nue&quot; " src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure5_thumb.png" alt="La serre &quot;nue&quot; " width="354" height="266" border="0" /></a></p>
<h4>Étape 2 : Branchement du relais</h4>
<p align="center"> <a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure6.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Les relais" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure6_thumb.png" alt="Les relais" width="240" height="240" border="0" /></a></p>
<p>Afin de pouvoir contrôler les actionneurs, nous avons branché le relais quatre canaux à une carte Raspberry Pi.</p>
<p>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.</p>
<p>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.</p>
<h4>Etape 3 : Éclairage de la serre</h4>
<p>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 (<i>tension secteur</i>) et est composée d’un mètre de LEDs rouge et d’un mètre incandescent jaune.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure7.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Les LEDs" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure7_thumb.png" alt="Les LEDs" width="244" height="160" border="0" /></a></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure7bis.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Les LEDs" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure7bis_thumb.png" alt="Les LEDs" width="244" height="184" border="0" /></a></p>
<p>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.</p>
<h4>Etape 4 : Installation du brumisateur</h4>
<p align="center"> <a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure8.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Le relais avec les LEDs et le brumisateur " src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure8_thumb.png" alt="Le relais avec les LEDs et le brumisateur " width="244" height="324" border="0" /></a></p>
<p>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.</p>
<h4>Etape 5 : Installation du système d’arrosage</h4>
<h4 align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure9.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Installation du système d’arrosage" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure9_thumb.png" alt="Installation du système d’arrosage" width="184" height="244" border="0" /></a></h4>
<p>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.</p>
<p align="center"> <a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure10.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Le reservoir" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure10_thumb.png" alt="Le reservoir" width="184" height="244" border="0" /></a></p>
<p>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.</p>
<h4>Pour résumer&#8230;</h4>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure11.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Schéma du relais et de la Raspberry" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure11_thumb.png" alt="Schéma du relais et de la Raspberry" width="404" height="301" border="0" /></a></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure12.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Rendu dans la boite " src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure12_thumb.png" alt="Rendu dans la boite " width="185" height="244" border="0" /></a></p>
<h4>Étape 6 : Mise en place des capteurs et paramétrage de la carte Arduino</h4>
<p>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 :</p>
<ul>
<li>Les capteurs d’humidité du sol et de niveau d’eau se branchent sur du 5V.</li>
<li>Les capteurs d’humidité/température de l’air et de luminosité sont alimentés en 3,3V.</li>
</ul>
<h5>Étape 6.1 : Capteur d’humidité et de température de l’air</h5>
<p>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 :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure13.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Capteur d'humidité/température " src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure13_thumb.png" alt="Capteur d'humidité/température " width="350" height="134" border="0" /></a></p>
<h5>Étape 6.2 : Capteurs de luminosité, d’humidité du sol et de niveau d’eau</h5>
<p><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure14.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; margin-right: auto; border-width: 0px;" title=" Capteurs et Arduino sur la Raspberry " src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure14_thumb.png" alt=" Capteurs et Arduino sur la Raspberry " width="350" height="274" border="0" /></a></p>
<p>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 :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure15.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Arduino et ses capteurs" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure15_thumb.png" alt="Arduino et ses capteurs" width="244" height="184" border="0" /></a><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure16.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Arduino et ses capteurs" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure16_thumb.png" alt="Arduino et ses capteurs" width="244" height="185" border="0" /></a></p>
<h5>Étape 6.3 : Programmation de la carte Arduino</h5>
<p>Dans l’IDE Arduino, nous avons donc commencé par programmer la carte.</p>
<p>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<i> Croquis &gt; Inclure une bibliothèque</i>), nous avons installé les librairies suivantes :</p>
<ul>
<li>Adafruit Unified Sensor</li>
<li>Adafruit TSL2561</li>
</ul>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure17.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Les librairies Arduino " src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure17_thumb.png" alt="Les librairies Arduino " width="350" height="76" border="0" /></a></p>
<p>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é :</p>
<p></p><pre class="crayon-plain-tag">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);    
 
}</pre><p></p>
<p>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()  :</p>
<p></p><pre class="crayon-plain-tag">void loop(void) 
{  
  /*Pour recevoir une nouvelle donnée par le capteur de luminosité*/ 
  sensors_event_t event;
  tsl.getEvent(&amp;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 
}</pre><p></p>
<p>Nous récupèrerons ensuite les données des différents capteurs à l’aide de la carte Raspberry Pi.</p>
<h3>La programmation vers Constellation</h3>
<p>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.</p>
<h4>Etape 1 : Package relatif aux capteurs et actionneurs</h4>
<h5>Etape 1.1 : Acquisition des données des capteurs</h5>
<p>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.</p>
<p>La fonction ci-après permet de récupérer les valeurs des différents capteurs.</p>
<p></p><pre class="crayon-plain-tag">def getCapteur():
    humiditeAir, temperature = Adafruit_DHT.read_retry(11,4)
    lux, humiditeSol, eau = ser.readline()[:-2].split(",")</pre><p></p>
<p>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.</p>
<p></p><pre class="crayon-plain-tag">Constellation.PushStateObject("Capteurs", {"HumiditeSol": int(self.humiditeSol), "HumiditeAir": int(self.humiditeAir), "Temperature": int(self.temperature), "Luminosite": int(self.lux)}, "CapteursInfos")</pre><p></p>
<p align="center"> <a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure18.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title=" Le State Object des capteurs " src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure18_thumb.png" alt=" Le State Object des capteurs " width="350" height="169" border="0" /></a></p>
<h5>Etape 1.2 : Activation et désactivation des différents actionneurs (brumisateur, guirlande lumineuse et pompe à eau)</h5>
<p>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.</p>
<p>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.</p>
<p>Voici un exemple du code de l’activation et de la désactivation de notre pompe :</p>
<p></p><pre class="crayon-plain-tag">GPIO.setmode(GPIO.BOARD)
GPIO.setup(12,GPIO.OUT)
GPIO.output(12,0)</pre><p></p>
<p>Le pin 12 de la Raspberry est celui relié au relais contrôlant la pompe.</p>
<h5>Etape 1.3 : Automatisation des actionneurs</h5>
<p>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.</p>
<p>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%.</p>
<p></p><pre class="crayon-plain-tag">if humiditeAir &gt; 37 and brumisateur:
    DesactiverBrumisateur()
elif humiditeAir &lt; 35 and not brumisateur:
    ActiverBrumisateur()
    time.sleep(1)</pre><p></p>
<p>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.</p>
<p></p><pre class="crayon-plain-tag">if humiditeSol &lt; 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 &gt; 30:
                    self.next_water = 0
    elif pompe:
            self.ticks += 1
               if self.ticks &gt;= 3:
                    DesactiverPompe()
                       self.ticks = 0
time.sleep(1)</pre><p></p>
<p>Ces différentes fonctions sont exécutées dans des threads séparés pour ne pas que le code soit bloquant.</p>
<p>Maintenant, il ne reste plus qu&rsquo;à 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.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure19.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Package PushBullet" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure19_thumb.png" alt="Package PushBullet" width="354" height="163" border="0" /></a></p>
<p>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.</p>
<p></p><pre class="crayon-plain-tag">Constellation.SendMessage("PushBullet", "PushNote", [ "FriendLead", "Le reservoir d'eau est vide"], Constellation.MessageScope.package)</pre><p></p>
<div align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure20.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Notification sur smartphone" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure20_thumb.png" alt="Notification sur smartphone" width="184" height="364" border="0" /></a></div>
<h4>Étape 2 : Package relatif au stockage des données</h4>
<p>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.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure21.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Enregistrement CSV" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure21_thumb.png" alt="Enregistrement CSV" width="177" height="244" border="0" /></a></p>
<p>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.</p>
<p>Chaque ligne contient la date, l’heure, l’humidité du sol, l’humidité de l’air, la température et la luminosité.</p>
<p></p><pre class="crayon-plain-tag">@Constellation.StateObjectLink(package = "FriendLeafCapteurs", name = "Capteurs")
def RecupValue(stateObject):
    humiditeSol = stateObject.Value.HumiditeSol
    humiditeAir = stateObject.Value.HumiditeAir
    temperature = stateObject.Value.Temperature</pre><p></p>
<p>Nous avons ensuite créé un message callback qui permet de visualiser le fichier CSV dans notre Constellation.</p>
<p></p><pre class="crayon-plain-tag">@Constellation.MessageCallback()
def LireBDD():
'''
: return string : La base de données 
'''
    file = open('BDD.csv','r')
    lines = file.readlines()
    return lines</pre><p></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure22.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="La saga du Message Callback " src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure22_thumb.png" alt="La saga du Message Callback " width="350" height="203" border="0" /></a></p>
<h3>L’interface utilisateur : l’application mobile de monitoring et de pilotage de la serre</h3>
<h4>Étape 1 : Le noyau de l’application</h4>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure23.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="L'application Cordova" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure23_thumb.png" alt="L'application Cordova" width="184" height="364" border="0" /></a></p>
<p>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.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure24.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Cordova" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure24_thumb.png" alt="Cordova" width="240" height="98" border="0" /></a></p>
<p>Nous avons également utilisé jQuery et AngularJS pour faciliter l’interaction entre Javascript et HTML.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure27.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="AngularJS" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure27_thumb.png" alt="AngularJS" width="240" height="143" border="0" /></a></p>
<p>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.</p>
<h4>Étape 2 : Connexion à Constellation, State Object et Messages Callback</h4>
<p>Pour nous connecter à Constellation avec AngularJS, nous avons utilisé ces lignes de codes :</p>
<p></p><pre class="crayon-plain-tag">Constellation.initializeClient(url_port, sha, "FriendLeaf");

Constellation.onConnectionStateChanged(function (change) {
   //suite
});</pre><p></p>
<p>et une ligne de ce type pour chaque State Object :</p>
<p></p><pre class="crayon-plain-tag">Constellation.registerStateObjectLink("*", "FriendLeafCapteurs", "Actionneurs", "*", function (so) {
    //suite
});</pre><p></p>
<p>Quant aux messages Callback, ils sont envoyés comme suit :</p>
<p></p><pre class="crayon-plain-tag">Constellation.sendMessage({ Scope: 'Package', Args: ['FriendLeafCapteurs'] }, 'DesactiverBrumisateur');</pre><p></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure28.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Page de configuration" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure28_thumb.png" alt="Page de configuration" width="184" height="364" border="0" /></a></p>
<p>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.</p>
<p>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.</p>
<p>Lorsque l’application se lance pour la première fois, l&rsquo;utilisateur est directement redirigé vers cette page pour entrer les informations nécessaires.</p>
<h4>Étape 3 : Affichage des données en temps réel</h4>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure29.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Le tableau de bord " src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure29_thumb.png" alt="Le tableau de bord" width="184" height="364" border="0" /></a></p>
<p>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.</p>
<p>Le code JS :</p>
<p></p><pre class="crayon-plain-tag">//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");</pre><p></p>
<p>SVG en HTML :</p>
<p></p><pre class="crayon-plain-tag">&lt;svg viewbox="0 0.5 10 8"&gt;
    &lt;defs&gt;
    &lt;linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"&gt;
        &lt;stop offset="0%" stop-color="#00ee4f"/&gt;
        &lt;stop offset="66%" stop-color="#eeae00"/&gt;
        &lt;stop offset="100%" stop-color="#ee0000"/&gt;
    &lt;/linearGradient&gt;
    &lt;/defs&gt;
    &lt;text x="50%" y="50%" id="h_air_value" text-anchor="middle"  alignment-baseline="middle" fill="#00ee4f"&gt;
        {{Math.round(capteurs["humiditeAir"])}}%
    &lt;/text&gt;
    &lt;path d="M2 8 A 4 4 0 1 1 8 8" fill="none" stroke-width="0.78" stroke="#E8F6FD" /&gt;
    &lt;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)" /&gt;
&lt;/svg&gt;</pre><p></p>
<h4>Étape 4 : Contrôler sa serre</h4>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure32.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Page de contrôle" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure32_thumb.png" alt="Page de contrôle" width="124" height="244" border="0" /></a><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure30.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Page de contrôle" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure30_thumb.png" alt="Page de contrôle" width="124" height="244" border="0" /></a><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure31.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Page de contrôle" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure31_thumb.png" alt="Page de contrôle" width="124" height="244" border="0" /></a></p>
<p>Nous avons également prévu dans l’application de pouvoir gérer les différents actionneurs de la serre.</p>
<p>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.</p>
<h4>Étape 5 : Les graphiques</h4>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure33.png"><img class="colorbox-6084"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Graphiques" src="https://developer.myconstellation.io/wp-content/uploads/2018/07/figure33_thumb.png" alt="Graphiques" width="184" height="361" border="0" /></a></p>
<p>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.</p>
<h3>Conclusion</h3>
<p>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.</p>
<p>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.</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/friendleaf-la-serre-connectee-grace-a-constellation/">FriendLeaf : la serre connectée grâce à Constellation</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/tutorials/friendleaf-la-serre-connectee-grace-a-constellation/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Constellation à la DevCon #4 le 26 octobre à l&#8217;école 42</title>
		<link>https://developer.myconstellation.io/blog/devcon-4-le-26-octobre-lecole-42/</link>
					<comments>https://developer.myconstellation.io/blog/devcon-4-le-26-octobre-lecole-42/#comments</comments>
		
		<dc:creator><![CDATA[Sebastien Warin]]></dc:creator>
		<pubDate>Fri, 20 Oct 2017 09:02:14 +0000</pubDate>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Sentinel]]></category>
		<category><![CDATA[Raspberry Pi]]></category>
		<category><![CDATA[Constellation]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[Web Platform Installer]]></category>
		<category><![CDATA[Raspberry]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[Supervision]]></category>
		<category><![CDATA[Package]]></category>
		<category><![CDATA[conférence]]></category>
		<category><![CDATA[Python]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=5604</guid>

					<description><![CDATA[<p>Jeudi 26 octobre 2017 se tiendra la 4ème édition de la DevCon, la conférence technique du magazine Programmez! Le thème de cet après-midi sera 100 % Raspberry Pi &#38; Co en production : serveur, IoT, développement, Docker. Et à cette</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/blog/devcon-4-le-26-octobre-lecole-42/">Constellation à la DevCon #4 le 26 octobre à l&rsquo;école 42</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Jeudi 26 octobre 2017 se tiendra la 4ème édition de la <strong>DevCon</strong>, la conférence technique du magazine <a href="https://www.programmez.com/">Programmez!</a></p>
<p align="center"><a href="https://www.programmez.com/content/devcon-4-100-raspberry-pi-co"><img class="colorbox-5604"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="devcon-4" src="https://developer.myconstellation.io/wp-content/uploads/2017/10/devcon-4.jpg" alt="devcon-4" width="400" height="317" border="0" /></a></p>
<p>Le thème de cet après-midi sera <strong>100 % Raspberry Pi &amp; Co en production</strong> : serveur, IoT, développement, Docker.</p>
<p>Et à cette occasion, vous retrouverez une nouvelle fois une session dédiée à <a href="http://www.myconstellation.io/">Constellation</a> spécial Raspberry.</p>
<p>Au menu de cette session :</p>
<ul>
<li>Comment <a href="https://developer.myconstellation.io/constellation-platform/constellation-server/installer-constellation-sur-linux/">déployer une Constellation sur Raspbian</a> en une seule ligne de commande grâce au Web Platform Installer</li>
<li>Comment <a href="https://developer.myconstellation.io/getting-started/ajouter-des-sentinelles/#Installation_dune_sentinelle_sur_un_systeme_Linux">joindre des RPi v1, v2, v3 </a>dans Constellation pour y <a href="https://developer.myconstellation.io/plateforme/fonctionnalites/deploiement-administration/">déployer et superviser des packages</a> (programmes) depuis une interface Web centrale</li>
<li>Comment développer des packages avec <a href="https://developer.myconstellation.io/getting-started/creez-votre-premier-package-constellation-en-csharp/">Visual Studio</a> ou en ligne de commande avec le « <a href="https://developer.myconstellation.io/blog/developpez-vos-packages-python-ligne-de-commande/">Constellation Package Tools CLI</a> » et les déployer automatiquement sur vos RPi</li>
<li>Comment <a href="https://developer.myconstellation.io/client-api/python-api/">vos packages Python</a> sur RPi peuvent interagir avec vos autres systèmes et autres packages Python, C#, objets Arduino ou des ESP8266, des pages Javascript, ou autre</li>
<li>Comment contrôler un RPi depuis une pages Web ou une application mobile multi-plateforme avec quelques lignes !</li>
</ul>
<p>Nous verrons également plusieurs applications concrètes déployées pour ma « smarthome » comme : <a href="http://sebastien.warin.fr/2015/03/24/2478-senergy-la-solution-de-monitoring-des-ressources-energetiques-de-la-maison-geek-is-in-da-house-2015/">S-Energy</a>, ma solution de supervision des ressources énergique basée sur un Raspberry, <a href="http://sebastien.warin.fr/2015/08/20/2833-s-opener-connectez-et-scurisez-votre-porte-de-garage-avec-constellation-et-un-raspberry-pi-la-porte-de-garage-intelligente/">S-Opener</a> pour piloter la porte de garage depuis un Raspberry, <a href="https://developer.myconstellation.io/tutorials/un-capteur-de-luminosite-exterieur-pilote-par-raspberry/">capteurs luminosité</a>, gestion des volets, etc&#8230;</p>
<p><b>Quand ? </b>26 octobre à partir de 13h30</p>
<p><b>Où :</b> à l’école 42 (Paris)</p>
<p><b>Informations &amp; inscriptions :</b> <a href="https://www.programmez.com/content/devcon-4-100-raspberry-pi-co">https://www.programmez.com/content/devcon-4-100-raspberry-pi-co</a></p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/blog/devcon-4-le-26-octobre-lecole-42/">Constellation à la DevCon #4 le 26 octobre à l&rsquo;école 42</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/blog/devcon-4-le-26-octobre-lecole-42/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Créer une boite aux lettres connectée avec Constellation</title>
		<link>https://developer.myconstellation.io/showcases/creer-une-boite-aux-lettres-connectee-constellation/</link>
					<comments>https://developer.myconstellation.io/showcases/creer-une-boite-aux-lettres-connectee-constellation/#respond</comments>
		
		<dc:creator><![CDATA[Sebastien Warin]]></dc:creator>
		<pubDate>Wed, 27 Sep 2017 10:29:50 +0000</pubDate>
				<category><![CDATA[Showcases]]></category>
		<category><![CDATA[Ionic]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[Arduino]]></category>
		<category><![CDATA[ESP8266]]></category>
		<category><![CDATA[StateObject]]></category>
		<category><![CDATA[ESP]]></category>
		<category><![CDATA[MessageCallback]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Capteur]]></category>
		<category><![CDATA[PushBullet]]></category>
		<category><![CDATA[Constellation]]></category>
		<category><![CDATA[smartphone]]></category>
		<category><![CDATA[Consumer]]></category>
		<category><![CDATA[Cordova]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=5519</guid>

					<description><![CDATA[<p>Projet réalisé par Judith Caroff, Jeanne Leclercq, Luc Fermaut, Pierre Hourdé, Jean-Baptiste Lavoine et Victorien Renault. Introduction Étudiants en 3ème année à l’ISEN-Lille, nous avons eu l’idée de développer une boîte aux lettres connectée en utilisant la plateforme Constellation. En</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/showcases/creer-une-boite-aux-lettres-connectee-constellation/">Créer une boite aux lettres connectée avec Constellation</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><em>Projet réalisé par Judith Caroff, Jeanne Leclercq, Luc Fermaut, Pierre Hourdé, Jean-Baptiste Lavoine et Victorien Renault.</em></p>
<h2>Introduction</h2>
<p>Étudiants en 3<sup>ème</sup> 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.</p>
<p>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.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Schma-de-prsentation.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Schéma de fonctionnement global de notre boîte aux lettres" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Schma-de-prsentation_thumb.png" alt="Schéma de fonctionnement global de notre boîte aux lettres" width="450" height="225" border="0" /></a></p>
<p>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 <a href="https://developer.myconstellation.io/getting-started/connecter-un-arduino-ou-un-esp8266-constellation/">cette documentation sur le site Constellation</a>.</p>
<p>Nous détectons ensuite la présence de courriers à l’aide de capteurs à ultrasons.</p>
<p>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.</p>
<p>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.</p>
<h2>La boîte aux lettres connectée</h2>
<p><i>Prérequis : Avoir connecté l’ESP8266 à Constellation.</i></p>
<h3>Composants utilisés</h3>
<p>Pour connecter notre boîte aux lettres à Constellation, nous avons utilisé :</p>
<ul>
<li>Un ESP8266 D1 Mini (8€ sur Amazon)</li>
<li>Des capteurs à ultrasons HC SR04 (3€ sur Amazon)</li>
<li>Un lecteur de cartes NFC (8€ sur Amazon)</li>
<li>Un servo-moteur (6€ sur eBay)</li>
</ul>
<p>Voici la correspondance pour définir les différents pins avec cet ESP :</p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">D0</td>
<td valign="top">D1</td>
<td valign="top">D2</td>
<td valign="top">D3</td>
<td valign="top">D4</td>
<td valign="top">D5</td>
<td valign="top">D6</td>
<td valign="top">D7</td>
<td valign="top">D8</td>
<td valign="top">RX</td>
<td valign="top">TX</td>
</tr>
<tr>
<td valign="top">16</td>
<td valign="top">5</td>
<td valign="top">4</td>
<td valign="top">0</td>
<td valign="top">2</td>
<td valign="top">14</td>
<td valign="top">12</td>
<td valign="top">13</td>
<td valign="top">15</td>
<td valign="top">3</td>
<td valign="top">1</td>
</tr>
</tbody>
</table>
<h3>Etape 1 : Détecter la présence d’une lettre grâce à un capteur ultrason</h3>
<p><i>Nos capteurs fonctionnent avec une alimentation de 5V</i><i></i></p>
<p>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.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/capteur-ultrason.jpg"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Capteur ultrason" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/capteur-ultrason_thumb.jpg" alt="Capteur ultrason" width="300" height="136" border="0" /></a></p>
<p>Relier le capteur à notre ESP est assez simple, notre capteur à ultrasons possède 4 branches, chacune branchée sur un pin de notre ESP.</p>
<p>Ci-dessous, les correspondances entre les branches du capteur à ultrasons et les pins de l’ESP8266 :</p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="63%">
<p style="text-align: left;">Branche du capteur à ultrasons</p>
</td>
<td valign="top" width="36%">Pin de l’ESP8266</td>
</tr>
<tr>
<td valign="top" width="63%">VCC</td>
<td valign="top" width="36%">5V</td>
</tr>
<tr>
<td valign="top" width="63%">GND</td>
<td valign="top" width="36%">GND</td>
</tr>
<tr>
<td valign="top" width="63%">TRIG</td>
<td valign="top" width="36%">D4</td>
</tr>
<tr>
<td valign="top" width="63%">ECHO</td>
<td valign="top" width="36%">D3</td>
</tr>
</tbody>
</table>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Module-ultrasons.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Module à ultrasons connecté à notre ESP8266" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Module-ultrasons_thumb.png" alt="Module à ultrasons connecté à notre ESP8266" width="354" height="205" border="0" /></a></p>
<p style="text-align: left;">Dans notre code, nous configurons les pins dans le setup afin de préparer l’impulsion.</p>
<p></p><pre class="crayon-plain-tag">void setup() {
   pinMode(TRIGGER, OUTPUT);
   digitalWrite(TRIGGER, LOW); //La broche TRIGGER doit être à LOW au repos
   pinMode(ECHO, INPUT);
   Serial.begin(9600);
 }</pre><p></p>
<p style="text-align: left;">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.</p>
<p></p><pre class="crayon-plain-tag">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 &lt; defaultValue){
     constellation.sendMessage(Package, "Brain", "message");
   }
}</pre><p></p>
<p style="text-align: center;"><img loading="lazy" class="size-full wp-image-5527 aligncenter colorbox-5519" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/video1-2-gap.jpg" data-gif="https://developer.myconstellation.io/wp-content/uploads/2017/09/video1-2.gif" alt="" width="196" height="350" /></p>
<h3 style="text-align: left;">Etape 2 : Gérer les accès à la boîte aux lettres grâce à un lecteur de carte NFC</h3>
<p style="text-align: left;">Dans cette partie, nous allons envoyer un Message Callback à Constellation grâce à l’ID du badge NFC détecté par notre lecteur de cartes.</p>
<p style="text-align: left;">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).</p>
<p style="text-align: left;">Voici le câblage réalisé pour cette partie entre le NFC et l’ESP :</p>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="49%">Branche du NFC</td>
<td valign="top" width="50%">Pin de l’ESP8266</td>
</tr>
<tr>
<td valign="top" width="49%">RST</td>
<td valign="top" width="50%">D1</td>
</tr>
<tr>
<td valign="top" width="49%">SDA(SS)</td>
<td valign="top" width="50%">D2</td>
</tr>
<tr>
<td valign="top" width="49%">MOSI</td>
<td valign="top" width="50%">D7</td>
</tr>
<tr>
<td valign="top" width="49%">MISO</td>
<td valign="top" width="50%">D6</td>
</tr>
<tr>
<td valign="top" width="49%">SCK</td>
<td valign="top" width="50%">D5</td>
</tr>
<tr>
<td valign="top" width="49%">GND</td>
<td valign="top" width="50%">GND</td>
</tr>
<tr>
<td valign="top" width="49%">3.3 V</td>
<td valign="top" width="50%">3.3 V</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Lecteur-NFC.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Lecteur NFC connecté à notre ESP8266" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Lecteur-NFC_thumb.png" alt="Lecteur NFC connecté à notre ESP8266" width="354" height="183" border="0" /></a></p>
<p style="text-align: left;">Il faut commencer par télécharger la bibliothèque suivante :</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/bibliothque-arduino-1.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="bibliothèque arduino 1" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/bibliothque-arduino-1_thumb.png" alt="bibliothèque arduino 1" width="354" height="71" border="0" /></a></p>
<p style="text-align: left;">Voici ensuite la fonction nécessaire à l’envoi d’un Message Callback lorsque nous captons un nouveau badge.</p>
<p></p><pre class="crayon-plain-tag">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*/
}</pre><p></p>
<h3 style="text-align: left;">Etape 3 : Ouvrir et fermer la porte grâce à un servo-moteur</h3>
<p style="text-align: left;">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.</p>
<p style="text-align: left;">Voici les branchements qui relient notre moteur à l’ESP :</p>
<table class=" aligncenter" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="59%">PIN DU MOTEUR</td>
<td valign="top" width="40%">Pin de l’ESP8266</td>
</tr>
<tr>
<td valign="top" width="59%">5 V (câble orange)</td>
<td valign="top" width="40%">5 V</td>
</tr>
<tr>
<td valign="top" width="59%">GND (câble marron)</td>
<td valign="top" width="40%">GND</td>
</tr>
<tr>
<td valign="top" width="59%">Commande (câble jaune)</td>
<td valign="top" width="40%">D8</td>
</tr>
</tbody>
</table>
<p style="text-align: left;">Avant d’utiliser le code ci-dessous, il faut vérifier que vous avez bien installé les bibliothèques suivantes :</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/bibliothque-arduino-2.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="bibliothèque arduino 2" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/bibliothque-arduino-2_thumb.png" alt="bibliothèque arduino 2" width="354" height="128" border="0" /></a></p>
<p style="text-align: left;">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.</p>
<p></p><pre class="crayon-plain-tag">void setup() {
    monServo.attach(15); // Définit le moteur au D8
    monServo.write(0); // ServoMoteur à sa position initiale
    constellation.registerStateObjectLink("*", "Brain", "Porte_ouverte", [](JsonObject&amp; 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.
   });  
 }</pre><p></p>
<p style="text-align: center;"><img loading="lazy" class="alignnone size-full wp-image-5528 aligncenter colorbox-5519" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/video2-2-gap.jpg" data-gif="https://developer.myconstellation.io/wp-content/uploads/2017/09/video2-2.gif" alt="" width="196" height="350" /></p>
<h3 style="text-align: left;">Etape 4 : Synchroniser toutes nos parties avec un package Constellation</h3>
<p style="text-align: left;">Vous pouvez retrouver notre code complet pour la boîte aux lettres sur GitHub pour plus de précision (<a href="https://l.facebook.com/l.php?u=https%3A%2F%2Fgithub.com%2FSqyluck%2FBoite-aux-lettres-connectee&amp;h=ATO-A7kid-AyGmrtD0hCDSOEWcwWMsyF8aAuEcrDY3b1Q9b-_NEMOnsJ9DOWADshjfo8FwRAmqfoT5MoHe3RwBJ1U_2af1vgeNd_XHbk_4LNVdA4-AYBgC-v6mcC5YakbL12cgMSWJFFBA">https://github.com/Sqyluck/Boite-aux-lettres-connectee</a>).</p>
<p style="text-align: left;">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.</p>
<p style="text-align: left;">→ Voici les différents Message Callbacks créent dans le package afin de répondre à nos besoins.</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Message-Callbacks.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Message Callbacks" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Message-Callbacks_thumb.png" alt="Message Callbacks" width="354" height="357" border="0" /></a></p>
<p style="text-align: left;">→ 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.</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/State-Objects.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="State Objects" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/State-Objects_thumb.png" alt="State Objects" width="354" height="166" border="0" /></a></p>
<h3 style="text-align: left;">Etape 5 : Fabrication de la boîte aux lettres</h3>
<p style="text-align: left;">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.</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-extrieur.jpg"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Visuel boite au lettre extérieur" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-extrieur_thumb.jpg" alt="Visuel boite au lettre extérieur" width="254" height="310" border="0" /></a></p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-composants.jpg"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Visuel boite au lettre composants" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-composants_thumb.jpg" alt="Visuel boite au lettre composants" width="223" height="244" border="0" /></a> <a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-intrieur.jpg"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Visuel boite au lettre intérieur" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Visuel-boite-au-lettre-intrieur_thumb.jpg" alt="Visuel boite au lettre intérieur" width="207" height="244" border="0" /></a></p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/Schma-composants.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Schéma composants" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/Schma-composants_thumb.png" alt="Schéma composants" width="450" height="232" border="0" /></a></p>
<h2 style="text-align: left;">L’interface utilisateur</h2>
<p style="text-align: left;"><i>Prérequis : disposer de Node.js et de npm</i></p>
<h3 style="text-align: left;">Etape 1 : Créer une application avec ionic</h3>
<p style="text-align: left;">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.</p>
<p style="text-align: left;">Avant de commencer, il faut lancer l’installation de Ionic 1 depuis l’invite de commande :</p>
<p></p><pre class="crayon-plain-tag">npm install – g cordova ionic</pre><p></p>
<p style="text-align: left;"><i>(Attention : cette commande ne fonctionnera pas si vous ne disposez pas auparavant de node.js et de npm)</i><i></i></p>
<p style="text-align: left;">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.</p>
<p></p><pre class="crayon-plain-tag">ionic start myApp tabs --type ionic1</pre><p></p>
<p style="text-align: left;"><i>(Nous venons ici de créer un nouveau projet ionic 1 de type tabs intitulé myApp)</i></p>
<p style="text-align: left;">Dans l’invite de commande, placez-vous dans le dossier de l’application (en utilisant la commande cd).</p>
<p style="text-align: left;">La commande ionic serve permet d’exécuter l’application dans un navigateur.</p>
<p style="text-align: left;">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 » :</p>
<ul style="text-align: left;">
<li>Le fichier index.html</li>
<li>Les fichiers .html appartenant au dossier “templates” → C’est ici que vous pouvez modifier le contenu de chaque page de votre application.</li>
<li>Le fichier app.js dans le dossier “js” → Vous devez définir votre constellation à cet endroit.</li>
<li>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”.</li>
</ul>
<h3 style="text-align: left;">Etape 2 : Visualiser notre application sur un smartphone</h3>
<p style="text-align: left;">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.</p>
<p style="text-align: left;">Une fois l’application installée, vous devez ensuite vous rendre <a href="https://apps.ionic.io/apps/">sur ce site</a>, 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</p>
<p></p><pre class="crayon-plain-tag">ionic link 
ionic upload</pre><p></p>
<p style="text-align: left;">Ouvrez ensuite ionic view et visualisez votre application.</p>
<p style="text-align: left;">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.</p>
<h3 style="text-align: left;">Etape 3 : Connecter notre application à constellation</h3>
<p style="text-align: left;">Afin de connecter notre application à la plateforme constellation, nous allons modifier le fichier app.js ainsi que le index.html.</p>
<p style="text-align: left;">Pour cela, nous allons importer les bibliothèques suivantes dans le fichier index.html :</p>
<ul style="text-align: left;">
<li>jquery-2.2.4.min.js</li>
<li>jquery.signalr-2.2.1.min.js</li>
<li>Constellation-1.8.1.min.js</li>
<li>ngConstellation-1.8.1.min.js</li>
</ul>
<p style="text-align: left;">Les librairies sont disponibles sur cette <a href="http://cdn.myconstellation.io/js/">page</a>. Nous vous conseillons de créer un dossier intitulé constellation dans le dossier « lib » et d’y enregistrer ces différentes bibliothèques.</p>
<p style="text-align: left;">Il ne vous restera plus qu’à ajouter les lignes de code suivantes dans le fichier index.html :</p>
<p></p><pre class="crayon-plain-tag">&lt;script type="text/javascript" src="lib/constellation/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/constellation/jquery.signalr-2.2.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/constellation/Constellation-1.8.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/constellation/ngConstellation-1.8.1.min.js"&gt;&lt;/script&gt;</pre><p></p>
<p style="text-align: left;">Puis nous allons ajouter le code suivant à notre fichier app.js :</p>
<p style="text-align: left;">1. Modifier la ligne angular.module, y ajouter ‘ngConstellation’ comme ci-dessous :</p>
<p></p><pre class="crayon-plain-tag">angular.module('starter', ['ionic', 'starter.controllers', 'ngConstellation'])</pre><p></p>
<p style="text-align: left;">2. Modifier la fonction .run, y ajouter $rootScope et constellationConsumer :</p>
<p></p><pre class="crayon-plain-tag">.run(function($ionicPlatform, $rootScope, constellationConsumer)</pre><p></p>
<p style="text-align: left;">3. Ajouter le code suivant dans la fonction .run :</p>
<p></p><pre class="crayon-plain-tag">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;</pre><p></p>
<p style="text-align: left;">Vous pouvez maintenant vérifier que vous êtes bien connecté à votre constellation en regardant dans votre console (f12 dans votre navigateur).</p>
<h3 style="text-align: left;">Etape 4 : Connecter notre application à la boîte aux lettres</h3>
<p style="text-align: left;">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).</p>
<p style="text-align: left;">Le rôle de notre application ici est simplement de s’abonner aux State Objects et d’envoyer des messages Callbacks à notre constellation.</p>
<p style="text-align: left;">→ <b>Exemple de récupération d’un State Object</b> :</p>
<p style="text-align: left;">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 » :</p>
<p></p><pre class="crayon-plain-tag">//State Object Utilisateurs
constellationConsumer.registerStateObjectLink("*", "Brain", "Users", "*", function(so) {
    $rootScope.Users = so.Value;
    $rootScope.$apply();
});</pre><p></p>
<p style="text-align: left;">Pour afficher nos utlisateurs, il nous suffit maintenant, dans notre page html d’utiliser le code suivant :</p>
<p></p><pre class="crayon-plain-tag">&lt;ion-item ng-repeat="user in Users"&gt;
  &lt;h2&gt;{{user.firstName}} {{user.name}}&lt;/h2&gt;
  &lt;p&gt;{{user.client ? "client":"facteur"}}&lt;/p&gt;
&lt;/ion-item&gt;</pre><p></p>
<p style="text-align: left;">→ <b>Exemple d’envoi d’un message Callback</b> :</p>
<p style="text-align: left;">Les messages Callbacks s’envoient dans le fichier controllers.js. Voici l’exemple de code pour le Message Callback « DeleteUser » :</p>
<p></p><pre class="crayon-plain-tag">//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');
      }
    });
};</pre><p></p>
<p style="text-align: left;">Dans notre page html, on appelle maintenant la fonction créée dans notre controller.js dans un bouton par exemple :</p>
<p></p><pre class="crayon-plain-tag">&lt;button ng-click="deleteUser()"&gt;Supprimer cet utilisateur&lt;/button&gt;</pre><p></p>
<p style="text-align: left;">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.</p>
<p style="text-align: center;"><img loading="lazy" class="alignnone size-full wp-image-5530 aligncenter colorbox-5519" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/video3-2-gap.jpg" data-gif="https://developer.myconstellation.io/wp-content/uploads/2017/09/video3-2.gif" alt="" width="196" height="350" /></p>
<p style="text-align: left;">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.</p>
<p style="text-align: left;">Voici un aperçu de notre application ionic :</p>
<p style="text-align: center;" align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/notifications.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="notifications" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/notifications_thumb.png" alt="notifications" width="150" height="295" border="0" /></a><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/paramtres.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="paramètres" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/paramtres_thumb.png" alt="paramètres" width="150" height="295" border="0" /></a><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/utilisateurs.png"><img class="colorbox-5519"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="utilisateurs" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/utilisateurs_thumb.png" alt="utilisateurs" width="150" height="295" border="0" /></a></p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/showcases/creer-une-boite-aux-lettres-connectee-constellation/">Créer une boite aux lettres connectée avec Constellation</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/showcases/creer-une-boite-aux-lettres-connectee-constellation/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>S-Fit : Concevez un miroir connecté orienté fitness</title>
		<link>https://developer.myconstellation.io/showcases/s-fit-concevez-un-miroir-connecte-oriente-fitness/</link>
					<comments>https://developer.myconstellation.io/showcases/s-fit-concevez-un-miroir-connecte-oriente-fitness/#comments</comments>
		
		<dc:creator><![CDATA[Sebastien Warin]]></dc:creator>
		<pubDate>Wed, 27 Sep 2017 10:05:42 +0000</pubDate>
				<category><![CDATA[Showcases]]></category>
		<category><![CDATA[StateObject]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Miroir]]></category>
		<category><![CDATA[Constellation]]></category>
		<category><![CDATA[AngularJS]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[Consumer]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[ForecastIO]]></category>
		<category><![CDATA[Domotique]]></category>
		<category><![CDATA[Web]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=5474</guid>

					<description><![CDATA[<p>C’est l’été, la saison des maillots de bains, il est grand temps de se prendre en main et de se sculpter un corps de rêve. Pourquoi ne pas utiliser une des nombreuses solutions de tracker d’activités présentes sur le marché</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/showcases/s-fit-concevez-un-miroir-connecte-oriente-fitness/">S-Fit : Concevez un miroir connecté orienté fitness</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><i>C’est l’été, la saison des maillots de bains, il est grand temps de se prendre en main et de se sculpter un corps de rêve. Pourquoi ne pas utiliser une des nombreuses solutions de tracker d’activités présentes sur le marché ? Ce n’est pas assez drôle pour des makers, nous avons donc décidé de créer notre propre solution fitness axée autour d’un miroir connecté !</i></p>
<p style="text-align: center;"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig1.png"><img class="colorbox-5474"  loading="lazy" title="Résultat final du miroir connecté à Constellation" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig1_thumb.png" alt="Résultat final du miroir connecté à Constellation" width="300" height="381" border="0" /></a></p>
<h2>Introduction</h2>
<p>Nous sommes 5 étudiants en troisième année de Cycle Informatique et Réseaux à l’ISEN et nous avons conçu un nouveau concept de solution fitness basée sur un miroir. Pour réaliser notre projet, nous avions un budget de 0€ mais nous avions surtout une grande motivation pour créer un produit innovant et agréable à utiliser.</p>
<p>C’est pour cela que nous avons utilisé des produits de récupérations. En effet, nous avons tous dans notre garage un ordinateur portable que nous n’utilisons plus, une ancienne webcam, et quelques planches de contreplaqué. Concernant l’aspect miroir, nous avons utilisé du film sans tain car nous en avions déjà, cependant, pour une dizaine d’euros de plus, vous pourrez utiliser une vitre sans tain. Cette dernière donnera un rendu bien meilleur à votre miroir. Voilà qui devrait suffire pour la partie matérielle de notre projet.</p>
<p>Pour la partie logicielle, nous avons utilisé la plateforme Constellation. Les lecteurs réguliers de ce magazine la connaissent déjà, pour les autres, il s’agit d’une plateforme technique d’orchestration et d’interconnexion des objets, des services et des applications. Elle s’appuie sur des paquets qui peuvent publier et consommer des messages ainsi que sur des fonctions partagées. Concrètement, avec Constellation, en quelques lignes, il devient très simple de connecter des objets (ou applications) entre eux. Ces derniers vont donc dialoguer via Constellation comme le feraient des micro-services. L’avantage d’utiliser cette plateforme pour un tel projet c’est la facilité avec laquelle nous avons pu connecter et déployer les différentes briques de notre miroir. Pour en savoir plus sur cette technologie, vous pouvez vous rendre sur <a href="http://www.myconstellation.io/">http://www.myconstellation.io/</a></p>
<p>Pour résumer, en raison d’un coût très faible et d’un développement simplifié, S-Fit est le projet parfait pour vous occuper cet été.</p>
<h2>Fonctionnement général</h2>
<p>Nous avons tout d’abord pensé S-Fit comme une application dotée d’un podomètre. Cette dernière synchronise les différents profils des membres de la famille en temps réel grâce à Constellation. Vous pouvez ainsi y gérer vos propres objectifs et surveiller votre progression. Vous ne perdrez pas votre motivation grâce à notre système de trophées qui vous donnera envie de repousser vos limites chaque jour. Comme il n’existe pas de meilleure motivation que la compétition, vous pourrez vous comparer à vos proches grâces à des outils d’analyse s’appuyant sur une série de graphiques.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig7.png"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Les sources d’informations du miroir" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig7_thumb.png" alt="Les sources d’informations du miroir" width="240" height="240" border="0" /></a></p>
<p>Pour vous rappeler vos objectifs chaque matin, nous avons ajouté à S-Fit un miroir compagnon. Ce dernier a demandé beaucoup de réflexion car il s’agit d’un nouvel objet avec lequel il faut interagir de manière naturelle. De plus, il fallait faire de ce dernier un bel objet que l’on puisse retrouver chez soi. Nous avons donc fait le choix d’une interface minimaliste qui affiche seulement les informations pertinentes : la météo, les évènements à venir et votre progression. De ce fait, pas besoin de toucher le miroir et d’y laisser des traces de doigts.</p>
<p>Pour gérer les multiples profils, nous avons également intégré un module de reconnaissance faciale qui permettra au miroir d’afficher des informations personnalisées en fonction de son utilisateur.</p>
<p>Comme vous vous en doutez surement, le lien entre l’application et le miroir se fait par l&rsquo;intermédiaire de la plateforme Constellation. Tout est synchronisé en temps réel et cela fonctionne comme par magie.</p>
<h3>Etape 1 : Conception du boîtier</h3>
<p>Pour commencer, il faut démonter votre vieil ordinateur, afin d’en récupérer la dalle LCD. On utilise ensuite la référence de cette dernière pour pouvoir se procurer le contrôleur adapté.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig2.jpg"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="La dalle récupérée et son contrôleur" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig2_thumb.jpg" alt="La dalle récupérée et son contrôleur" width="236" height="244" border="0" /></a></p>
<p>Ensuite, il faut concevoir un boîtier capable d’accueillir l’ensemble de votre appareil. Son épaisseur et ses dimensions dépendent donc de votre miroir. Nous ne fournirons donc pas de plans pour rendre votre création unique.</p>
<p>Attention toutefois à prévoir des espaces pour l’aération, l’alimentation et les contrôles de la dalle.</p>
<p>C’est la partie la plus personnelle du projet, c’est le moment de libérer votre créativité pour mettre en place votre vision de S-Fit.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig3.jpg"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Assemblage du boîtier et vernissage" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig3_thumb.jpg" alt="Assemblage du boîtier et vernissage" width="244" height="125" border="0" /></a><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig4.jpg"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Assemblage du boîtier et vernissage" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig4_thumb.jpg" alt="Assemblage du boîtier et vernissage" width="244" height="127" border="0" /></a></p>
<p>Nous avons également prévu une trappe d’accès à l’arrière pour pouvoir modifier notre miroir plus tard.</p>
<p>Si vous avez fait le choix du film sans tain, il va falloir le poser. Pour cela, voici les quelques étapes à suivre :</p>
<ul>
<li>Nettoyer votre dalle à l’aide d’un chiffon doux</li>
<li>Appliquer un peu d’eau savonneuse sur celle-ci</li>
<li>Poser le film sans tain petit à petit en vous aidant d’un grattoir. Attention à ne pas rayer le film avec, c’est très fragile !</li>
<li>Chassez, toujours avec ce grattoir, les dernières bulles d’air</li>
</ul>
<p>Prenez bien votre temps lors de la pose, c’est une partie très délicate et elle affectera directement l’esthétique de votre miroir.</p>
<p>Vous avez maintenant l’ensemble des pièces qui vont constituer votre miroir. Pour terminer, il ne vous reste plus qu’à tout assembler en faisant attention à bien aligner la dalle et le boîtier.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig5.jpg"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Le miroir assemblé, prêt à être refermé" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig5_thumb.jpg" alt="Le miroir assemblé, prêt à être refermé" width="354" height="266" border="0" /></a></p>
<p>Si vous souhaitez intégrer un module de reconnaissance faciale, il va falloir ajouter une webcam (USB).</p>
<p>Pour cela, il faut la démonter, récupérer le circuit et le fixer dans le boîtier.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig07.jpg"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Miroir assemblé sans la webcam" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig07_thumb.jpg" alt="Miroir assemblé sans la webcam" width="304" height="404" border="0" /></a></p>
<h3>Etape 2 : Le développement logiciel</h3>
<h4>Etape 2.1 : L’interface du miroir</h4>
<p>Pour réaliser le miroir, nous avons choisi de concevoir une application web avec AngularJS. En effet, comme le dit le créateur de Constellation, Sébastien Warin, on peut connecter n’importe quoi avec quelques lignes de code qui vont bien.</p>
<p>Tout d’abord, il est important de rappeler que pour continuer ce tutoriel, il est nécessaire d’avoir une Constellation déployée chez soi. Vous trouverez la plateforme ainsi que les tutoriels de prise en main sur le portail <a href="https://developer.myconstellation.io/">https://developer.myconstellation.io/</a></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig8.png"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Le rôle de Constellation dans la plateforme S-Fit" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig8_thumb.png" alt="Le rôle de Constellation dans la plateforme S-Fit" width="300" height="300" border="0" /></a></p>
<p>Nous allons donc pouvoir connecter notre application Angular à Constellation :</p>
<p></p><pre class="crayon-plain-tag">var app = angular.module('Mirror', ['ngConstellation']);

app.controller('MyController', ['$scope', 'constellationConsumer', ($scope, constellation) =&gt; {

    constellation.initializeClient("maconstellation.local", "masupercle123", "MyMirror");

    constellation.connect();

}]);</pre><p></p>
<p>Il ne reste plus qu’à s’abonner aux StateObjects de Constellation que l’on veut voir sur le miroir. Par exemple, ici, nous allons récupérer la météo dans la ville de Lille :</p>
<p></p><pre class="crayon-plain-tag">constellation.registerStateObjectLink("*", "ForecastIO", "Lille", "*", (so) =&gt; {
    $scope.$apply(() =&gt; {
        $scope.temperature = so.Value.currently.temperature;
    });
});</pre><p></p>
<p>Pour en savoir plus, vous pouvez vous rendre sur le portail dont le lien se trouve plus haut pour y trouver la documentation complète. Vous trouverez d’ailleurs un tutoriel détaillé sur l’utilisation de Constellation en JavaScript. Mais rassurez vous, ce n’est pas plus compliqué que cela. Il ne manque que quelques lignes d’HTML et de CSS pour donner vie à votre miroir.</p>
<p>Si on continue l’exemple de la météo, le code HTML associé pourrait-être le suivant :</p>
<p></p><pre class="crayon-plain-tag">&lt;p&gt;{{temperature}}&lt;/p&gt;</pre><p></p>
<p>On obtiendrait alors une page sur laquelle la température va s’afficher dynamiquement.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig6.png"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="L’interface finale du miroir: le choix du noir et blanc permet un meilleur rendu sur le miroir" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig6_thumb.png" alt="L’interface finale du miroir: le choix du noir et blanc permet un meilleur rendu sur le miroir" width="450" height="336" border="0" /></a></p>
<h4>Etape 2.2 : La reconnaissance faciale</h4>
<p>Comme nous l’expliquions plus haut, nous avons ajouté un module de reconnaissance faciale pour gérer plusieurs profils. Il s’agit d’une partie facultative et plutôt complexe.</p>
<p>Pour cela, nous avons utilisé une <a href="https://www.codeproject.com/Articles/261550/EMGU-Multiple-Face-Recognition-using-PCA-and-Paral">application open source existante</a> qui s’appuie sur EMGU.CV. C’est un portage en C# d’OpenCV. Malheureusement, cette application était trop ancienne et nous n’avons pas réussi à la connecter directement à Constellation. Pour résoudre ce problème, nous avons conçu un paquet Constellation qui permet de publier et de s’abonner aux StateObjects par l’intermédiaire de sockets TCP.</p>
<p>Lors de l’ajout d’un nouvel utilisateur S-Fit, le paquet lance la séquence d’enregistrement d’un visage automatiquement.</p>
<p>Nous avons effectué plusieurs essais sur la quantité d’images à enregistrer, afin d’obtenir l’équilibre idéal entre une reconnaissance optimale et un minimum d’espace utilisé. Pour vous reconnaître, l’algorithme s’appuie sur plusieurs caractéristiques faciales, comme la forme du nez, de la bouche, des yeux, de vos sourcils…</p>
<p>De par le peu d’espace pris par la reconnaissance, vous pouvez aisément enregistrer toute votre famille, afin que le miroir devienne un élément à part entière de votre lieu de vie, et que tout le monde participe à la compétition !</p>
<p>La reconnaissance faciale se déroule en deux étapes. La première consiste à détecter un visage. Pour cela nous avons utilisé le classificateur Haar car il nous fallait une reconnaissance faciale en temps réel. Le classificateur Haar est, en fait, un fichier xml contenant une quantité énorme de photos dites négatives et positives. Les photos positives contiennent un visage, tandis que les photos négatives n’en contiennent pas. Cela permet donc de savoir si un visage est présent sur une photo ne faisant pas partie du classificateur. À noter qu’il est possible de créer soi-même son propre classificateur ou même d’en améliorer un.</p>
<p>Ici, nous nous servons donc de ce dernier afin de vérifier si, sur la frame actuelle, un visage est présent ou non de la sorte :</p>
<p></p><pre class="crayon-plain-tag">gray_frame = currentFrame.Convert&lt;Gray, Byte&gt;();

MCvAvgComp[][] facesDetected = gray_frame.DetectHaarCascade(Face, 1.2, 10, Emgu.CV.CvEnum.HAAR_DETECTION_TYPE.DO_CANNY_PRUNING, new Size(50, 50));</pre><p></p>
<p>Ceci va donc insérer dans le tableau facesDetected[0] tous les visages ayant eu un résultat positif après comparaison avec le classificateur Haar.</p>
<p>Dans un second temps, on cherche à reconnaître une personne à l’aide de son visage, l’application dispose donc d’une architecture très simple divisée en trois classes C#. La classe principale va capturer le flux vidéo de la webcam puis par la suite analyser chaque image via la classe de reconnaissance de personne qui, elle, aura au préalable chargé les données des personnes déjà enregistrées. La dernière classe sert, quant à elle, à enregistrer une personne en prenant une centaine de photos du visage de celle-ci.</p>
<p>Pour communiquer avec notre package, nous avons également ajouté une classe TCPClient.cs qui se connecte et échange les StateObjects via le réseau.</p>
<p>C’est d’ailleurs les paquets reçus qui vont démarrer les fonctions d’ajout d’utilisateur.</p>
<p>Pour rendre la gestion des utilisateurs agréable, nous avons intégré cette reconnaissance faciale de manière totalement transparente. Lorsqu’un utilisateur s’enregistre dans l’application il doit être face au miroir. Pour vérifier cela, l’utilisateur sera invité à saisir un code à six chiffres qui s’affichera quelques secondes sur le miroir. Une fois l’ensemble des informations saisies dans l’application, le miroir va automatiquement lancer une séquence de capture de 100 clichés du nouvel utilisateur.</p>
<p>Pour la reconnaissance des utilisateurs enregistrés, le paquet de reconnaissance faciale va capturer une image chaque seconde pour vérifier la présence ou non d’un individu connu.</p>
<p>Lorsque deux utilisateurs enregistrés sont face au miroir, ce dernier va se concentrer sur celui qu’il identifie le mieux.</p>
<h4>Etape 2.3 : L’application mobile</h4>
<p>L’application S-Fit a été conçue avec les frameworks Ionic 3 et Apache Cordova. Ces frameworks permettent d’obtenir une application Web à l&rsquo;intérieur d’une application native Android ou iOS qui embarque un serveur NodeJS sur le mobile. Comme nous l’avons vu plus haut, l’application qu’affiche le miroir est une page web, l’application mobile utilise donc les mêmes technologies.</p>
<p>Ainsi, la connexion s’effectuera tout aussi simplement :</p>
<p></p><pre class="crayon-plain-tag">var constellation = $.signalR.createConstellationConsumer("maconstellation.local", "masupercle123", "MonApp");

constellation.connection.start();</pre><p></p>
<p>Une application comme la nôtre peut alors consommer des StateObjects mais également envoyer des MessageCallbacks. C’est à dire exécuter des fonctions directement sur la Constellation. C’est particulièrement utile pour incrémenter le compteur de pas.</p>
<p>Nous avons découpé notre application en trois grandes parties : la gestion des profils, les activités et les trophées.</p>
<h5>Gestion des profils</h5>
<p>Comme S-Fit est pensé pour plusieurs utilisateurs, nous avons géré les profils dans notre application.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig10-1.png"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Choix d’utilisateur, nouvel utilisateur et informations" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig10_thumb-1.png" alt="Choix d’utilisateur, nouvel utilisateur et informations" width="354" height="202" border="0" /></a></p>
<p>Lorsqu’un utilisateur lance l’application, il peut choisir son profil. Cette action va établir la connexion avec la Constellation pour récupérer les informations personnelles et l’historique d’activités. Toutefois, s’il n’a pas de profil, il peut en ajouter un s’il est en face du miroir, qui lui affichera alors un code de vérification. Lors du lancement de l’application, cette dernière synchronise instantanément les nouvelles données d’activités avec le serveur Constellation.</p>
<p>L’utilisation d’S-Fit est totalement transparente et ne demande pas de manipulation particulière de l’utilisateur. En effet, nous avons cherché à fournir un produit simple, accessible et entièrement automatisé. Cette synchronisation est permise par Constellation.</p>
<h5>Les activités</h5>
<p>Cette partie se compose d’un podomètre, d’un récapitulatif de la journée en cours et d’un historique sous forme de graphiques.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig11-1.png"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Récapitulatif de la journée en temps réel et statistiques" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig11_thumb-1.png" alt="Récapitulatif de la journée en temps réel et statistiques" width="304" height="262" border="0" /></a></p>
<p>Pour le podomètre, nous nous sommes appuyés sur un plugin de Cordova permettant d’accéder aux données de l&rsquo;accéléromètre du mobile. A l’aide des données fournies par ce plugin, nous avons pu étudier les variations sur les axes x, y et z, dans l’optique de compter les pas.</p>
<p>L’application récupère donc les données accélérométriques de votre mobile toutes les 0.120 secondes. C’est une valeur que nous avons retenue après plusieurs jours de tests pour affiner la précision du compteur de pas, puis, en s’appuyant sur les précédentes valeurs, on va déterminer si le mouvement effectué est un pas ou non, et donc informer Constellation si elle doit incrémenter le nombre de pas de l’utilisateur.</p>
<p>Le développement de cette application ne se résume pas qu’à de la programmation informatique. Nous avons également réalisé des mesures sur plusieurs dizaines de personnes afin d’obtenir un lien entre la morphologie et la longueur des pas</p>
<p></p><pre class="crayon-plain-tag">var slope = 0.64878048 ;
var origin = 44.6744 ;

function getDistance(size, stepCounter) {
    return (size * slope - origin) * stepCounter;
}</pre><p></p>
<p>Avec les informations physiologiques et l’activité de l’utilisateur, on peut donc créer un ensemble de fonctions qui permettent d’étudier son état de santé, en calculant par exemple les calories dépensées chaque jour. C’est grâce à ces données qu’il est possible de créer une application fitness entièrement maîtrisée. On est alors libre d’appliquer les algorithmes souhaités sur les données récupérées.</p>
<p>Pour la page des graphiques sur l’application mobile, nous avons utilisé la bibliothèque Chart.js qui permet de tracer des graphiques dynamiques avec un rendu épuré. Son principal avantage est la prise en main rapide de la bibliothèque ainsi que toutes ses options.</p>
<p>Voici un exemple pour tracer un graphique linéaire</p>
<p></p><pre class="crayon-plain-tag">var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});</pre><p></p>
<p>Cependant, il faut tout d’abord récupérer les informations présentes dans les StateObjects pour les afficher dans les graphiques. Cela nous permet de faire des graphes qui se mettent à jour en temps réel.</p>
<h5>Les trophées</h5>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig12.png"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="La liste des trophées et détails d’un trophée" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig12_thumb.png" alt="La liste des trophées et détails d’un trophée" width="354" height="303" border="0" /></a></p>
<p>Comme nous l’expliquions plus haut, nous avons intégré un système de trophées et de récompense. Il se présente tout d’abord comme une liste de trophées que l’on débloque en réalisant des succès particuliers (pas, distance).</p>
<p>Les trophées montrent votre expérience sur S-Fit, et représentent donc la récompense pour vos efforts. Lorsque l’on clique sur un trophée débloqué, on affiche son détail et le nombre de points qu’il a rapporté.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig11.png"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Schéma récapitulatif de la synchronisation" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig11_thumb.png" alt="Schéma récapitulatif de la synchronisation" width="240" height="240" border="0" /></a></p>
<h2>Conclusion</h2>
<p>Voilà qui conclue les grandes étapes de la réalisation de S-Fit. Comme vous avez pu le voir les possibilités de personnalisation sont très nombreuses. C’est un projet ludique et facile à réaliser. C’est également un bon point de départ pour prendre en main la plateforme Constellation. Nous espérons vraiment qu’il vous a plu et que vous allez réaliser votre propre version.</p>
<p>Nous tenons également à remercier Julie, Adrien et tous ceux qui se sont impliqués de près ou de loin dans la réalisation de ce projet.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig9.jpg"><img class="colorbox-5474"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="L’équipe au complet" src="https://developer.myconstellation.io/wp-content/uploads/2017/09/fig9_thumb.jpg" alt="L’équipe au complet" width="404" height="256" border="0" /></a></p>
<p>Auteurs : Valentin BEQUART, David BRICENO-AGUILERA, Pierre-Alexandre CHOAIN, Milan FERTIN et Hugo MROCZKOWSKI.</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/showcases/s-fit-concevez-un-miroir-connecte-oriente-fitness/">S-Fit : Concevez un miroir connecté orienté fitness</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/showcases/s-fit-concevez-un-miroir-connecte-oriente-fitness/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>Connecter un vidéo projecteur standard à Constellation et synchroniser les volets</title>
		<link>https://developer.myconstellation.io/tutorials/connecter-un-video-projecteur-dans-constellation/</link>
					<comments>https://developer.myconstellation.io/tutorials/connecter-un-video-projecteur-dans-constellation/#respond</comments>
		
		<dc:creator><![CDATA[Lucas]]></dc:creator>
		<pubDate>Tue, 16 May 2017 10:23:36 +0000</pubDate>
				<category><![CDATA[Tutoriels]]></category>
		<category><![CDATA[Projecteur]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[Arduino]]></category>
		<category><![CDATA[ESP8266]]></category>
		<category><![CDATA[Domotique]]></category>
		<category><![CDATA[Volet]]></category>
		<category><![CDATA[.NET]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=4888</guid>

					<description><![CDATA[<p>Par Lucas Dupuis Ayant fait récemment l&#8217;acquisition d&#8217;un vidéo-projecteur pour mes soirées films, je me suis vite rendu compte qu&#8217;avec les jours qui rallongent, j&#8217;ai besoin de fermer les volets de mon salon afin de rester dans une certaine pénombre.</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/connecter-un-video-projecteur-dans-constellation/">Connecter un vidéo projecteur standard à Constellation et synchroniser les volets</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p><em>Par Lucas Dupuis</em></p>
<p>Ayant fait récemment l&rsquo;acquisition d&rsquo;un vidéo-projecteur pour mes soirées films, je me suis vite rendu compte qu&rsquo;avec les jours qui rallongent, j&rsquo;ai besoin de fermer les volets de mon salon afin de rester dans une certaine pénombre.</p>
<p>La présentation de mon système de pilotage de volets n&rsquo;est plus à faire, <a href="/showcases/connecter-volets-constellation-arduino-raspberry/">vous la retrouverez ici</a>. Vous pouvez aussi utiliser des modules Z-Wave comme le FGR-211 qu&rsquo;on connectera à Constellation via le package <a href="/package-library/vera/">Vera</a> ou <a href="/package-library/jeedom/">Jeedom</a>. Dans tous les cas, nous disposons un <a href="/concepts/messaging-message-scope-messagecallback-saga/">MessageCallback </a>pour ouvrir ou fermer nos volets !</p>
<p>La problématique qui se pose est la suivante : comment savoir que le projecteur est allumé et que je m&rsquo;apprête à regarder un film ?</p>
<p>J&rsquo;ai réfléchi à plusieurs solutions :</p>
<ul>
<li>Monitorer la consommation de la prise électrique afin de déduire que le projecteur est allumé
<ul>
<li>Avantages :
<ul>
<li>Permet d&rsquo;exposer un booléen indiquant que le projecteur est allumé et d&rsquo;ouvrir/fermer les volets en conséquence</li>
<li>Permet de monitorer la consommation en temps réel</li>
<li>Permet de monitorer la durée d&rsquo;utilisation de la lampe du vidéo-projecteur</li>
</ul>
</li>
<li>Inconvénients :
<ul>
<li>Nécessite une prise connectée avec conso-mètre (à fabriquer ou à acheter)</li>
<li>C&rsquo;est potentiellement complexe et coûteux</li>
</ul>
</li>
</ul>
</li>
<li>Surveiller le StateObject de mon médiacenter Kodi (exposé par le package <a href="/package-library/xbmc/">xbmc</a>)
<ul>
<li>Avantages :
<ul>
<li>J&rsquo;ai déjà une routine surveillant le stateobject pour allumer et éteindre le système de son lorsqu&rsquo;un média est joué</li>
<li>Il n&rsquo;y a que du code à mettre en place dans le package « cerveau » de la maison</li>
</ul>
</li>
<li>Inconvénients :
<ul>
<li>Il n&rsquo;y a pas de lien direct entre l&rsquo;allumage du projecteur et une action sur les volets</li>
<li>La sélection du film ou du média sur l&rsquo;écran se fait volets ouverts, et donc c&rsquo;est potentiellement gênant en cas de luminosité importante</li>
<li>Cela ne tient pas compte des autres sources branchées sur le projecteur (TV, console, &#8230;)</li>
</ul>
</li>
</ul>
</li>
<li>Utiliser un déclencheur sur le projecteur
<ul>
<li>Avantages :
<ul>
<li>Montage simple</li>
<li>Peu d&rsquo;investissement</li>
<li>Système embarqué trivial</li>
</ul>
</li>
<li>Inconvénients :
<ul>
<li>Pas de monitoring de consommation</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>J&rsquo;ai retenu la seconde et la troisième option : la seconde option, consistant à surveiller le stateobject de <a href="/package-library/xbmc/">kodi</a> permet l&rsquo;allumage du système de son lorsqu&rsquo;un média est lu, que ce soit un film ou un morceau de musique et la troisième option pour déclencher la fermeture des volets à l&rsquo;allumage du vidéo projecteur.</p>
<h3>Prerequis</h3>
<ul>
<li>Un serveur Constellation</li>
<li>Un vidéo-projecteur avec une sortie 12V</li>
<li>Un ESP8266 (ou Arduino connecté) avec un régulateur de tension</li>
<li>Le SDK Visual Studio</li>
</ul>
<h3>Etape 1 : connecter le vidéo projecteur dans Constellation</h3>
<p>En regardant les caractéristiques de mon projecteur, je me suis rendu compte qu&rsquo;il existait une sortie 12V permettant de déclencher un moteur pour une toile de projection.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/2017-05-03-21.19.35.jpg"><img class="colorbox-4888"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Le projecteur vidéo" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/2017-05-03-21.19.35_thumb.jpg" alt="Le projecteur vidéo" width="454" height="342" border="0" /></a></p>
<p>À la maison je projette sur un mur blanc, je n&rsquo;ai donc pas besoin de cette sortie. Il s&rsquo;agit d&rsquo;un connecteur jack mono que vous trouverez rapidement chez vous dans votre boite de récup&rsquo; ou bien directement sur le net pour quelques centimes.</p>
<p>Il suffit donc d&rsquo;un ESP8266 (par exemple un ESP-01, très petit et peu cher) et d&rsquo;un régulateur de tension 3.3v (ex. LD1117v33) acceptant en entrée une tension entre 5 et 15V et le tour est joué !</p>
<p>En effet, le projecteur envoie du 12v sur la sortie dès qu&rsquo;il est sous tension et du 0v lorsqu&rsquo;il est éteint. Ainsi notre ESP-01 sera alimenté par cette sortie. Lorsqu&rsquo;on allume le vidéo-projecteur, l&rsquo;ESP-01 sera démarré et lorsqu&rsquo;on éteint le vidéo projecteur, il sera éteint car plus d&rsquo;alimentation !</p>
<p>Aussi simple que cela !</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/2017-05-16-10.27.17.jpg"><img class="colorbox-4888"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Schéma du montage avec l'ESP8266" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/2017-05-16-10.27.17_thumb.jpg" alt="Schéma du montage avec l'ESP8266" width="454" height="193" border="0" /></a></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/2017-05-06-15.37.28.jpg"><img class="colorbox-4888"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Le vidéo projecteur avec l'ESP8266" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/2017-05-06-15.37.28_thumb.jpg" alt="Le vidéo projecteur avec l'ESP8266" width="454" height="342" border="0" /></a></p>
<p>L&rsquo;ESP, de son côté, publie simplement toutes les secondes un StateObject ayant une durée de vie de 5 secondes pour indiquer que le projecteur est allumé.</p>
<p>Pour connecter un ESP8266 (ou un Arduino) <a href="/getting-started/connecter-un-arduino-ou-un-esp8266-constellation/">suivez ce guide</a> ! Une fois connecté dans ma Constellation, je <a href="/client-api/arduino-esp-api/produire-des-stateobjects-depuis-arduino-esp/">publie le StateObject</a> dans la boucle principale <em>loop()</em></p>
<p></p><pre class="crayon-plain-tag">void loop() {
  constellation.loop();
 
  if(((millis() - lastTime) &gt; 1000) 
    || (millis() &lt; lastTime))
  {
    constellation.pushStateObject("Uptime",  millis(), 5);
    lastTime = millis();
  } 
}</pre><p></p>
<p>On a donc dans les StateObjects de notre Constellation, un StateObject « Uptime » publié dans mon cas par le package (virtuel)  « ESP01_Projector » qui contient l&rsquo;uptime de mon projecteur :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/Screenshot-SO.png"><img class="colorbox-4888"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Le StateObject de l'uptime du projecteur" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/Screenshot-SO_thumb.png" alt="Le StateObject de l'uptime du projecteur" width="457" height="332" border="0" /></a></p>
<p style="text-align: left;" align="center">Ce StateObject est mis à jour par l&rsquo;ESP toutes les secondes avec une durée de vie de 5 secondes ! Ainsi je n&rsquo;ai pas besoin de connaitre la valeur du StateObject, il me suffit juste de vérifier que le StateObject est « Valide » et non « Expiré » !</p>
<p style="text-align: left;" align="center">Si il est valide c&rsquo;est que dans les 5 dernières secondes il y a bien publié son Uptime, donc l&rsquo; ESP est démarré ce qui implique que mon vidéo projecteur est bien démarré (pour alimenter l&rsquo;ESP) !</p>
<p style="text-align: left;" align="center">En revanche si ce StateObject est expiré, c&rsquo;est à dire que le StateObject n&rsquo;a pas été mis à jour durant les 5 dernières secondes or l&rsquo;ESP est censé le faire à chaque seconde ! L&rsquo;ESP-01 est donc déconnecté ce qui impliquerai que le vidéo projecteur est arrêté !</p>
<h3 style="text-align: left;" align="center">Etape 2 : synchroniser le vidéo projecteur avec mes volets</h3>
<p style="text-align: left;" align="center">Maintenant, dans mon package « cerveau » de Constellation, il suffit de surveiller ce StateObject et son état expiré ou non pour savoir quelle commande envoyer aux volets.</p>
<p style="text-align: left;" align="center">J&rsquo;ai donc créé un package « cerveau » en C#.</p>
<p style="text-align: left;" align="center">Dans ma classe, je crée un <a href="/client-api/net-package-api/consommer-des-stateobjects/">StateObjectLink </a>pour lier le StateObject de l&rsquo;ESP dans une propriété .NET de mon code :</p>
<p></p><pre class="crayon-plain-tag">/// &lt;summary&gt;
/// StateObject du projecteur. Permet de connaitre l'uptime du projecteur.
/// &lt;/summary&gt;
[StateObjectLink("ESP01_Projector", "Uptime")]
public StateObjectNotifier ProjectorUptime { get; set; }</pre><p></p>
<p>Maintenant au démarrage de mon package, j&rsquo;attache un « handler » sur l&rsquo;événement « <em>ValueChanged</em> » permettant d&rsquo;ajouter du code en cas de mise à jour du StateObject.</p>
<p>Ici je vérifie que mon StateObjectLink est bien lié au StateObject (<em>HasValue</em>) et que ce StateObject n&rsquo;est pas expiré (<em>IsExpired</em>).</p>
<p>Si la condition est vrai, c&rsquo;est que mon projecteur est allumé, alors je peux fermer mes volets autrement je restaure les volets dans leurs positions précédentes.</p>
<p></p><pre class="crayon-plain-tag">this.ProjectorUptime.ValueChanged += (s, e) =&gt;
{
    // Projecteur allumé ?
    if (this.ProjectorUptime.HasValue == true &amp;&amp; this.ProjectorUptime.Value.IsExpired == false)
    {
        // Si projecteur est allumé, on ferme les volets.
        foreach (var volet in this.voletConfig)
        {
            if (this.ShowDebug)
            {
                PackageHost.WriteWarn($"Fermeture du volet {volet.Name} à 100%.");
            }
            
            // On enregistre au passage la position de départ pour la restaurer à la fin.
            volet.PreviousPosition = volet.CurrentPosition; 
            
            // Ordre de fermeture (100%).
            PackageHost.CreateMessageScope("ESP_Shutters").ChangePercent(volet.Name, 100);
        }
    }
    else
    {
        // Si projecteur est éteint, on rouvre les volets.
        foreach (var volet in this.voletConfig)
        {
            if (this.ShowDebug)
            {
                PackageHost.WriteWarn($"Ouverture du volet {volet.Name} à l'ancienne position, {Convert.ToInt32(volet.Percent * 100.0)}-&gt;{volet.PreviousPosition}% après {this.tempoReouvertureVolets} secs d'inactivité.");
            }

            // Pour chaque volet, on revient à la position initiale
            PackageHost.CreateMessageScope("ESP_Shutters").ChangePercent(volet.Name, volet.PreviousPosition);
        }
    }
};</pre><p></p>
<h3>Conclusion</h3>
<p>Une demi-heure de prototypage et de soudure, un petit quart d&rsquo;heure de développement, et le challenge est relevé !</p>
<p>L&rsquo;allumage du projecteur ferme les volets de mon salon selon une consigne, il déclenche également un scénario prédéfini pour les lampes Hue et active la prise du système de son. Le clic sur le bouton de la télécommande rend l&rsquo;expérience du film beaucoup plus profitable avec Constellation !</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/connecter-un-video-projecteur-dans-constellation/">Connecter un vidéo projecteur standard à Constellation et synchroniser les volets</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/tutorials/connecter-un-video-projecteur-dans-constellation/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Créer un capteur de luminosité dans une prise 220v avec un ESP8266</title>
		<link>https://developer.myconstellation.io/tutorials/creer-un-capteur-de-luminosite-dans-une-prise-220v/</link>
					<comments>https://developer.myconstellation.io/tutorials/creer-un-capteur-de-luminosite-dans-une-prise-220v/#respond</comments>
		
		<dc:creator><![CDATA[Sebastien Warin]]></dc:creator>
		<pubDate>Sat, 13 May 2017 13:35:14 +0000</pubDate>
				<category><![CDATA[Tutoriels]]></category>
		<category><![CDATA[ESP8266]]></category>
		<category><![CDATA[Lux]]></category>
		<category><![CDATA[TSL2561]]></category>
		<category><![CDATA[IoT]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=4819</guid>

					<description><![CDATA[<p>Ce tutoriel est sur le principe identique à celui-ci : Créer un capteur de température, humidité et luminosité connecté sauf que nous allons utiliser un ESP-01 beaucoup plus petit et moins cher qu&#8217;un D1 Mini Pro. Nous assemblerons l&#8217;ESP8266 et le capteur de</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/creer-un-capteur-de-luminosite-dans-une-prise-220v/">Créer un capteur de luminosité dans une prise 220v avec un ESP8266</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Ce tutoriel est sur le principe identique à celui-ci : <a href="/tutorials/creer-un-capteur-de-temperature-humidite-et-luminosite-connecte/">Créer un capteur de température, humidité et luminosité connecté</a> sauf que nous allons utiliser un ESP-01 beaucoup plus petit et moins cher qu&rsquo;un D1 Mini Pro.</p>
<p>Nous assemblerons l&rsquo;ESP8266 et le capteur de luminosité TSL2561 dans une prise 220v avec un convertisseur 220v -&gt; 3v3.</p>
<h3>Prérequis</h3>
<ul>
<li>Un serveur Constellation</li>
<li>Un ESP8266 comme l&rsquo;ESP-01 (entre 1,5€ et 2€)</li>
<li>Un capteur de luminosité TSL2561 (environ 2€)</li>
<li>Un convertisseur 220v -&gt; 3v3 (environ 2€)</li>
<li>Un boitier/prise 220v (entre 5 et 15 €)</li>
</ul>
<h3>Le montage</h3>
<p>Le capteur TSL2561 se connecte en I²C, il suffit donc de l&rsquo;alimenter en 3v3 et de connecter les deux GPIO de l&rsquo;ESP-01 (GPIO-0 et GPIO-2) aux pins SCL et SDA du capteur.</p>
<p>Le schéma de connexion est donc le suivant :</p>
<p style="text-align: center;"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/Fig-1.png"><img class="colorbox-4819"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Lux Sensor" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/Fig-1_thumb.png" alt="Lux Sensor" width="450" height="285" border="0" /></a></p>
<p>Sur le bornier 220v de notre prise nous allons souder deux fils (la phase et le neutre) vers l&rsquo;entrée convertisseur 220v AC. En sortie du convertisseur, on a une tension de 3v3 DC que nous connecterons à l&rsquo;ESP-01 ainsi qu&rsquo;au TSL2561.</p>
<p>N&rsquo;oubliez pas également de relier le port « CH_PD » de l&rsquo;ESP-01 au 3v3 pour activer le Wifi.</p>
<p>Pour plus d’information, je vous invite <a href="https://sebastien.warin.fr/2016/07/12/4138-decouverte-des-esp8266-le-microcontroleur-connecte-par-wifi-pour-2-au-potentiel-phenomenal-avec-constellation/" target="_blank" rel="noopener noreferrer">à lire cet article</a>.</p>
<p style="text-align: center;"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-84.png"><img class="colorbox-4819"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Lux Sensor" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-84.png" alt="Lux Sensor" width="454" height="403" border="0" /></a></p>
<p>Disposez les différents composants dans le boitier en prenant soin d&rsquo;isoler les parties 220v (avec de la colle thermofusibles ou du ruban isolant).</p>
<h3>Le code</h3>
<p>L&rsquo;ESP-01 ne dispose pas comme le D1 Mini Pro vu dans<a href="/tutorials/creer-un-capteur-de-temperature-humidite-et-luminosite-connecte/"> ce tutoriel</a> d&rsquo;une interface USB intégrée. Il vous faudra donc une interface USB/FTDI pour le programmer. Pour plus d’information, je vous invite <a href="https://sebastien.warin.fr/2016/07/12/4138-decouverte-des-esp8266-le-microcontroleur-connecte-par-wifi-pour-2-au-potentiel-phenomenal-avec-constellation/" target="_blank" rel="noopener noreferrer">à lire cet article</a>.</p>
<p>A l&rsquo;inverse du <a href="/tutorials/creer-un-capteur-de-temperature-humidite-et-luminosite-connecte/">tutoriel précédent</a>, ce code utilise la libraire <a href="https://github.com/adafruit/TSL2561-Arduino-Library" data-pjax="#js-repo-pjax-container">TSL2561-Arduino-Library</a> et non la « Unifed Sensor Library » afin de nous permettre de récupérer le Broadband et l&rsquo;IR en plus des Lux.</p>
<p>Il faudra donc installer la libraire « <em>TSL2561-Arduino-Library</em> » depuis le Gestionnaire de bibliothèque. De plus on utilise ici « ArduinoThread » pour ordonner les mesures à intervalle régulier. Vous devrez également installer cette librairie.</p>
<p><strong>Attention</strong> : si tout cela est nouveau pour vous, je vous recommande <a href="https://developer.myconstellation.io/getting-started/connecter-un-arduino-ou-un-esp8266-constellation/">de suivre ce guide d’introduction à l’API Constellation pour Arduino/ESP8266</a>.</p>
<p>Le code complet est :</p>
<p></p><pre class="crayon-plain-tag">#include &lt;ESP8266WiFi.h&gt;
const char* ssid     = "MON SSID";
const char* password = "lacléeWifi!!!!";

#include &lt;Constellation.h&gt;
Constellation&lt;WiFiClient&gt; constellation("IP ou DNS du serveur Constellation", 8088, "ESP-LightSensorSalon", "LightSensor", "123456789");

#include &lt;Wire.h&gt;
#include &lt;TSL2561.h&gt;
TSL2561 tsl(TSL2561_ADDR_FLOAT); 

#include &lt;Thread.h&gt;
Thread thrPushLux = Thread();

void pushLuxOnConstellation() {  
  uint32_t lum = tsl.getFullLuminosity();
  uint16_t ir, full;
  ir = lum &gt;&gt; 16;
  full = lum &amp; 0xFFFF;
  uint32_t lux = tsl.calculateLux(full, ir);
  
  constellation.pushStateObject("Lux", stringFormat("{ 'Lux':%d, 'Broadband':%d, 'IR':%d }", lux, full, ir), "LightSensor.Lux", 300);
}

void setup(void) {
  Serial.begin(115200);  delay(10);

  if (tsl.begin()) {
    Serial.println("Found sensor");
  } else {
    Serial.println("No sensor?");
    while (1);
  }
  
  // You can change the gain on the fly, to adapt to brighter/dimmer light situations
  //tsl.setGain(TSL2561_GAIN_0X);         // set no gain (for bright situtations)
  tsl.setGain(TSL2561_GAIN_16X);      // set 16x gain (for dim situations)  
  // Changing the integration time gives you a longer time over which to sense light
  // longer timelines are slower, but are good in very low light situtations!
  //tsl.setTiming(TSL2561_INTEGRATIONTIME_13MS);  // shortest integration time (bright light)
  //tsl.setTiming(TSL2561_INTEGRATIONTIME_101MS);  // medium integration time (medium light)
  tsl.setTiming(TSL2561_INTEGRATIONTIME_402MS);  // longest integration time (dim light)

  // Set Wifi mode
  if (WiFi.getMode() != WIFI_STA) {
    WiFi.mode(WIFI_STA);
    delay(10);
  }
  
  // Connect to Wifi  
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("WiFi connected. IP: ");
  Serial.println(WiFi.localIP());
  Serial.println(constellation.getSentinelName());
  
  JsonObject&amp; settings = constellation.getSettings();
  int interval = 10000; //ms
  if(settings.containsKey("Interval")) {
    interval = settings["Interval"].as&lt;int&gt;();
  }

  thrPushLux.onRun(pushLuxOnConstellation);
  thrPushLux.setInterval(interval);

  constellation.addStateObjectType("LightSensor.Lux", TypeDescriptor().setDescription("Lux data informations").addProperty("Broadband", "System.Int32").addProperty("IR", "System.Int32").addProperty("Lux", "System.Int32"));
  constellation.declarePackageDescriptor();
  
  constellation.writeInfo("ESP LightSensor '%s' is started (Push interval: %d sec)", constellation.getSentinelName(), interval);  
}

void loop(void) {
  if(thrPushLux.shouldRun()){
    thrPushLux.run();
  }
}</pre><p></p>
<p>Pour démarrer vous devez dans Constellation déclarer une sentinelle associée à une clé d’accès et un package virtuel. Ici notre ESP8266 est représenté par la sentinelle nommée “ESP-LightSensorSalon” et le package virtuel se nomme “LightSensor”.</p>
<p>Ensuite il faut définir le nom de notre réseau Wifi (SSID) ainsi que sa clé d’accès puis nous configurerons le client Constellation en spécifiant l’identité de notre package virtuel, sa clé d’accès et l’adresse/port de notre serveur Constellation.</p>
<p>Dans la méthode « <em>setup()</em>« , on initialise le capteur TSL puis on se connecte au Wifi et enfin on déclare l&rsquo;intervalle de temps entre chaque mesure, par défaut de 10 secondes qu&rsquo;on peut modifier en ajoutant un setting « Interval » sur notre package virtuel.</p>
<p>On configure ensuite un « thread » qui exécutera à l&rsquo;intervalle de temps spécifié la méthode « <em>pushLuxOnConstellation</em>« . Pour finir on déclare la description du StateObject par la méthode « <em>constellation.addStateObjectType</em> » et on affiche un log. Dans la <em>loop()</em>, on déclenche le thread.</p>
<p>La méthode « <em>pushLuxOnConstellation</em> » récupère les données du capteur et publie le StateObject « Lux » avec les trois propriétés :</p>
<p></p><pre class="crayon-plain-tag">constellation.pushStateObject("Lux", stringFormat("{ 'Lux':%d, 'Broadband':%d, 'IR':%d }", lux, full, ir), "LightSensor.Lux", 300);</pre><p></p>
<p>Une fois le programme téléversé, votre prise publiera le StateObject à l&rsquo;intervalle régulier la luminosité ambiante.</p>
<h3>Exploiter le capteur</h3>
<p>Comme vous le savez, une fois les données mesurées publiées dans un StateObject n&rsquo;importe quel système connecté dans Constellation peut récupérer ou s&rsquo;abonner en temps réel au StateObject.</p>
<p>On peut donc écrire des pages Web, des scripts, des packages .NET ou Python, Arduino, etc… qui exploiteront ces mesures en temps réel.</p>
<p>Je vous renvoie sur <a href="/tutorials/un-capteur-de-luminosite-exterieur-pilote-par-raspberry/#Exploitez_les_donnees">cette page</a> ou<a href="/tutorials/creer-un-capteur-de-temperature-humidite-et-luminosite-connecte/#Etape_3_Une_page_Web_pour_afficher_votre_capteur_en_temps_reel"> cette autre page</a> pour avoir quelques idées.</p>
<p>Pour ma part ce capteur installé dans le salon est affiché en temps réel sur <a href="https://sebastien.warin.fr/2015/07/15/3033-s-panel-une-interface-domotique-et-iot-multi-plateforme-avec-cordova-angularjs-et-constellation-ou-comment-crer-son-dashboard-domotique-mural/">un dashboard Web</a>,  stocké dans ElasticSearch et Cacti et exploité dans un package .NET nommé « MyBrain » car cette information sur la luminosité ambiante sert dans beaucoup de scénario : gestion des éclairages ou des volets.</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/creer-un-capteur-de-luminosite-dans-une-prise-220v/">Créer un capteur de luminosité dans une prise 220v avec un ESP8266</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/tutorials/creer-un-capteur-de-luminosite-dans-une-prise-220v/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Créer un relais connecté</title>
		<link>https://developer.myconstellation.io/tutorials/creer-un-relais-connecte/</link>
					<comments>https://developer.myconstellation.io/tutorials/creer-un-relais-connecte/#respond</comments>
		
		<dc:creator><![CDATA[Sebastien Warin]]></dc:creator>
		<pubDate>Wed, 10 May 2017 15:46:17 +0000</pubDate>
				<category><![CDATA[Tutoriels]]></category>
		<category><![CDATA[Relais]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Powershell]]></category>
		<category><![CDATA[AngularJS]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[Arduino]]></category>
		<category><![CDATA[ESP8266]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=4604</guid>

					<description><![CDATA[<p>Dans ce tutoriel nous allons créer un relais connecté qu’on pourra contrôler depuis une page Web, une montre ou même un script Powershell pour piloter une lumière, une porte de garage, une chaudière ou n’importe quelle charge électrique (10 ampères</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/creer-un-relais-connecte/">Créer un relais connecté</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Dans ce tutoriel nous allons créer un relais connecté qu’on pourra contrôler depuis une page Web, une montre ou même un script Powershell pour piloter une lumière, une porte de garage, une chaudière ou n’importe quelle charge électrique (10 ampères max) ou contact sec.</p>
<h3>Prérequis</h3>
<ul>
<li>Un Arduino connecté ou un ESP8266</li>
<li>Un shield relais (ou un relais seul avec une diode, une résistance et un transistor NPN)</li>
<li>Un serveur Constellation</li>
</ul>
<h3>Etape 1 : le montage</h3>
<p>Ici on utilisera un D1 Mini Pro (ESP8266) avec un « Shield » relais tout fait qu&rsquo;il n&rsquo;y a plus qu&rsquo;à déposer sur le « D1 Mini ». Si vous n&rsquo;avez de shield, vous pouvez utiliser un relais seul que vous piloterez avec un transistor NPN via une sortie de l&rsquo;ESP8266.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-58.png"><img class="colorbox-4604"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Relais connecté" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-58.png" alt="Relais connecté" width="454" height="257" border="0" /></a></p>
<p>Vous retrouverez sur ce shield un bornier à 3 pôles :</p>
<ul>
<li>Le pôle de gauche est « NO » (normalement ouvert)</li>
<li>Le pole du milieu est le commun</li>
<li>Le pôle de droite est « NC » (normalement fermé)</li>
</ul>
<p>Autrement dit, au repos il y a contact entre le 2<sup>ème</sup> et 3<sup>ème</sup> pole (normalement fermé). Lorsque que vous activez le relais, vous permutez le contact entre la 1<sup>ère</sup> et le 2<sup>ème</sup> pole.</p>
<p>Si vous voulez piloter une lampe, connectez un des fils entre la source d’énergie et votre lampe sur le pole « commun » et le pole « NO ». Ainsi au repos, votre lampe ne sera pas allumée mais si vous activez votre relais elle le sera.</p>
<p>Attention tout de même si vous manipulez des sources AC 220V et n’oubliez pas que votre relais ne supporte que des charges inférieures à 10A (soit environ 2200W).</p>
<h3>Etape 3 : la programmation</h3>
<p>Pour démarrer vous devez dans Constellation déclarer une sentinelle associée à une clé d’accès et un package virtuel. Ici notre ESP8266 est représenté par la sentinelle nommée “ESP8266” et le package virtuel se nomme “MyRelay”.</p>
<p>Dans l’Arduino IDE, nous créons un nouveau projet à partir du Starter Kit Constellation pour ESP8266 dans lequel nous allons définir le nom de notre réseau Wifi (SSID) ainsi que sa clé d’accès  puis nous configurerons le client Constellation en spécifiant l’identité de notre package virtuel, sa clé d’accès et l’adresse/port de notre serveur Constellation :</p>
<p></p><pre class="crayon-plain-tag">// ESP8266 Wifi
#include &lt;ESP8266WiFi.h&gt;
char ssid[] = "MON SSID";
char password[] = "macléWifi!!!!";

// Constellation client
Constellation&lt;WiFiClient&gt; constellation("X.X.X.X", 8088, "ESP8266", "MyRelay", "xxxxxxxxxxxxxxxxx")</pre><p></p>
<p>Encore une fois si tout cela est nouveau pour vous, je vous recommande <a href="/getting-started/connecter-un-arduino-ou-un-esp8266-constellation/">de suivre ce guide d’introduction à l’API Constellation pour Arduino/ESP8266</a>.</p>
<p>Notre relais se pilote par la sortie D1. Commencez donc par configurer cette sortie en ajoutant la ligne suivante dans la méthode «<em> setup()</em> » :</p>
<p></p><pre class="crayon-plain-tag">pinMode(D1, OUTPUT);</pre><p></p>
<p>Ensuite, toujours dans la méthode de démarrage « <em>setup()</em> » et une fois connecté au Wifi, déclarez le MessageCallback suivant :</p>
<p></p><pre class="crayon-plain-tag">constellation.registerMessageCallback("SwitchState",
  MessageCallbackDescriptor().setDescription("Set the state of the relay").addParameter&lt;bool&gt;("state", "The state of the relay"),
  [](JsonObject&amp; json) {
      bool state = json["Data"].as&lt;bool&gt;();
      // Changer l'état du relais
      digitalWrite(D1, state ? HIGH : LOW);
      // Mise à jour du StateObject de l'état du relais
      constellation.pushStateObject("State", state);
 });</pre><p></p>
<p>Nous exposons ici un MessageCallback nommé « <em>SwitchState</em> »  qui prend en paramètre un booléen pour définir l’état du relais (ON ou OFF).</p>
<p>Le code du MC pilotera alors la sortie D1 sur lequel est connecté notre relais et publiera un StateObject « <em>State</em> » avec l’état actuel du relais.</p>
<p>Pour finir, toujours au démarrage, ajoutez cette ligne après la déclaration de votre MC :</p>
<p></p><pre class="crayon-plain-tag">constellation.pushStateObject("State", false);</pre><p></p>
<p>Ainsi au démarrage de l’ESP8266, le relais est forcément sur Off, donc nous actualisation le StateObject « State » sur Constellation avec la valeur « false ».</p>
<p><b>Et voilà, votre relais connecté est opérationnel !</b></p>
<p>Vous pouvez connecter sur les pôles NO et commun une charge électrique comme une lampe ou une simple LED, en courant continue ou alternatif (220V par exemple) sans dépasser 10 ampères.</p>
<p>Si vous ne connectez rien sur votre relais, vous pouvez tout de même tester son bon fonctionnement :</p>
<ul>
<li>Le relais « claque » lorsqu’il change d’état</li>
<li>Une petite LED rouge à côté de l’inscription « NC » s’allumera quand le relais est sur « ON »</li>
</ul>
<p>Lancez le <a href="/constellation-platform/constellation-console/messagecallbacks-explorer/">MessageCallback Explorer</a> de la Console Constellation pour tester votre MessageCallback :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-59.png"><img class="colorbox-4604"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="MessageCallbacks Explorer" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-59.png" alt="MessageCallbacks Explorer" width="454" height="141" border="0" /></a></p>
<h3>Etape 3 : créer une page Web de pilotage du relais</h3>
<p>Créons maintenant une page Web pour piloter notre relais. Pour cela créez un fichier HTML sur votre poste avec une structure HTML de base.</p>
<p>Dans les entêtes ajoutez les scripts suivants :</p>
<p></p><pre class="crayon-plain-tag">&lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https:/cdn.myconstellation.io/js/Constellation-1.8.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://cdn.myconstellation.io/js/ngConstellation-1.8.1.min.js"&gt;&lt;/script&gt;</pre><p></p>
<p>Sur la balise &lt;html&gt; ajoutez l’attribut :</p>
<p></p><pre class="crayon-plain-tag">ng-app="MyDemoApp"</pre><p></p>
<p>Et sur la balise &lt;body&gt; ajoutez l’attribut :</p>
<p></p><pre class="crayon-plain-tag">ng-controller="MyController"</pre><p></p>
<p>Ajoutez ensuite le script suivant dans votre page (dans une balise &lt;script&gt;) :</p>
<p></p><pre class="crayon-plain-tag">var myDemoApp = angular.module('MyDemoApp', ['ngConstellation']);
myDemoApp.controller('MyController', ['$scope', 'constellationConsumer', function ($scope, constellation) {

      constellation.initializeClient("http://localhost:8088", "clé d'accès ici", "MyRelay Controller");
      constellation.onConnectionStateChanged(function (change) {
          if (change.newState === $.signalR.connectionState.connected) {
              console.log("Je suis connecté !");

              constellation.registerStateObjectLink("*", "MyRelay", "*", "*", function (so) {
                  $scope.$apply(function () {
                      $scope.RelayState = so.Value;
                  });
              });

          }
      });
      constellation.connect();
      $scope.constellation = constellation;
  }]);</pre><p></p>
<p>N’oubliez pas de définir l’adresse de votre Constellation ainsi que la clé d’accès pour vous connecter à votre Constellation lors de l’appel de la méthode « <em>constellation.initializeClient</em> ».</p>
<p>Enfin, ajoutez sur votre page la valeur du StateObject « State » et un bouton pour envoyer un message au package « MyRelay » afin d’invoquer le MC « SwitchState ».</p>
<p>Par exemple avec quelques classes CSS issues de Bootstrap :</p>
<p></p><pre class="crayon-plain-tag">&lt;div class="panel" ng-class="RelayState ? 'panel-danger' : 'panel-default'"&gt;
    &lt;div class="panel-heading"&gt;
        &lt;h3 class="panel-title"&gt;My Relay&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;
        &lt;p&gt;Current state : {{ RelayState ? "ON" : "OFF" }}&lt;/p&gt;
        &lt;a href="#" class="btn btn-primary" ng-click="constellation.sendMessage({ Scope: 'Package', Args: ['MyRelay'] }, 'SwitchState', !RelayState)"&gt;Switch {{ RelayState ? "OFF" : "ON" }}&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre><p></p>
<p><b>Vous obtenez en quelques minutes une page Web permettant de piloter en temps réel votre relais avec un retour sur son état courant.</b></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-66.png"><img class="colorbox-4604"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Page Web de contrôle" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-66.png" alt="Page Web de contrôle" width="382" height="246" border="0" /></a></p>
<p>Vous pouvez d’ailleurs ouvrir la page sur plusieurs navigateurs ou sur plusieurs machines et constater que toutes les pages se mettent à jour en temps réel dès que l’état du relais change.</p>
<h3>Etape 4 (optionnelle) : Piloter le relais avec un script Powershell</h3>
<p>Pour invoquer votre MessageCallback depuis un script Powershell nous allons utilisez l’interface http.</p>
<p>Vous pouvez d’ailleurs afficher le code snippet pour obtenir l’URL depuis le <a href="/constellation-platform/constellation-console/messagecallbacks-explorer/">MessageCallback Explorer</a>.</p>
<p>Dans notre cas l’URL sera : <a href="http://localhost:8088/rest/consumer/SendMessage?SentinelName=Consumer&amp;PackageName=DemoPowershel&amp;AccessKey=xxxx&amp;scope=Package&amp;args=MyRelay&amp;key=SwitchState&amp;data=true">http://localhost:8088/rest/consumer/SendMessage?SentinelName=Consumer&amp;PackageName=DemoPowershel&amp;AccessKey=xxxx&amp;scope=Package&amp;args=MyRelay&amp;key=SwitchState&amp;data=true</a></p>
<p>Comme vous le constatez nous utilisons l’interface « /consumer ». L&rsquo;argument « sentinelName » doit donc être « Consumer » et le nom du package est en fait un « friendly name » que nous appellerons ici « DemoPowershell ». Vous devez remplacer le « xxxx » par une clé d’accès valide, par exemple la même que celle utilisée par les ESP.</p>
<p>Notre Powershell est donc un « consommateur » et non un « package virtuel ». Il n’y a donc pas besoin de le déclarer dans la configuration de notre Constellation. Un consommateur peut envoyer ou recevoir des messages et consommer des StateObjects mais il ne peut pas écrire de log ni même publier des StateObjects.</p>
<p>Si vous souhaitez utiliser ce script sur une autre machine sur le serveur Constellation, remplacez dans l’URL « localhost » par l’adresse IP ou DNS de votre serveur Constellation.</p>
<p>Pour invoquer une URL en Powershell vous pouvez utiliser la command-let « Invoke-WebRequest ».</p>
<p>Créons alors un script Powershell que nous nommerons « SwitchRelay.ps1 » avec le code suivant :</p>
<p></p><pre class="crayon-plain-tag">param (
    [Parameter(Mandatory=$true)][bool]$state
 )
$res = Invoke-WebRequest ("http://localhost:8088//rest/consumer/SendMessage?SentinelName=Consumer&amp;PackageName=DemoPowershell&amp;AccessKey=5863d9e4cbdf522eaa62e0747fceb1c5b249ba13&amp;scope=Package&amp;args=MyRelay&amp;key=SwitchState&amp;data=" + $state.ToString().ToLower())
Write-Host "SwitchState to" $state</pre><p></p>
<p><b>Et voilà votre commande Powershell est capable d’invoquer un MessageCallback dans votre Constellation et donc de piloter le relais de votre ESP8266 !</b></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-60.png"><img class="colorbox-4604"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Script Powershell" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-60.png" alt="Script Powershell" width="454" height="92" border="0" /></a></p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/creer-un-relais-connecte/">Créer un relais connecté</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/tutorials/creer-un-relais-connecte/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Créer un moniteur connecté pour surveiller vos machines, équipements réseau et autres capteurs</title>
		<link>https://developer.myconstellation.io/tutorials/creer-un-moniteur-connecte-pour-surveiller-vos-machines-equipements-reseau-et-autres/</link>
					<comments>https://developer.myconstellation.io/tutorials/creer-un-moniteur-connecte-pour-surveiller-vos-machines-equipements-reseau-et-autres/#respond</comments>
		
		<dc:creator><![CDATA[Sebastien Warin]]></dc:creator>
		<pubDate>Wed, 10 May 2017 15:33:57 +0000</pubDate>
				<category><![CDATA[Tutoriels]]></category>
		<category><![CDATA[IoT]]></category>
		<category><![CDATA[Arduino]]></category>
		<category><![CDATA[ESP8266]]></category>
		<category><![CDATA[HWMonitor]]></category>
		<category><![CDATA[OLED]]></category>
		<category><![CDATA[Monitor]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=4616</guid>

					<description><![CDATA[<p>Créons dans ce tutoriel un petit moniteur pour afficher en temps réel des StateObjects de votre Constellation sur un écran OLED comme par exemple la consommation CPU d’une de vos machines Windows récupérée grâce au package HWMonitor. Prérequis Un ESP8266</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/creer-un-moniteur-connecte-pour-surveiller-vos-machines-equipements-reseau-et-autres/">Créer un moniteur connecté pour surveiller vos machines, équipements réseau et autres capteurs</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Créons dans ce tutoriel un petit moniteur pour afficher en temps réel des StateObjects de votre Constellation sur un écran OLED comme par exemple la consommation CPU d’une de vos machines Windows récupérée grâce au package <a href="/package-library/hwmonitor/">HWMonitor</a>.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-61.png"><img loading="lazy" class="alignnone colorbox-4616" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Monitor connecté" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-61.png" alt="Monitor connecté" width="454" height="295" border="0" /></a></p>
<h3>Prérequis</h3>
<ul>
<li>Un ESP8266 ou un Arduino avec interface réseau</li>
<li>Un petit écran OLED</li>
<li>Un serveur Constellation</li>
</ul>
<h3>Etape 1 : le montage</h3>
<p>Nous utilisons ici un ESP8266 de type D1 Mini Pro. Nous pouvons alors utiliser un écran OLED en Shield qu&rsquo;on a juste à « déposer » sur le D1 Mini :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-62.png"><img loading="lazy" class="alignnone colorbox-4616" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Shield OLED" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-62.png" alt="Shield OLED" width="454" height="362" border="0" /></a></p>
<p style="text-align: left;" align="center">Autre solution, utilisez un écran OLED classique :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-63.png"><img loading="lazy" class="alignnone colorbox-4616" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Ecran OLED I2C" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-63.png" alt="Ecran OLED I2C" width="454" height="295" border="0" /></a></p>
<p>Ces deux écrans OLED sont pilotables en I²C. Pour les connexions du 2ème écran, il suffit de connecter les masses (GND) ensemble, la pin « Vcc » de l’écran sur la pin « 3V3 » de la D1 Mini et le « SLK » sur « D2 » et « SDA » sur « D1 ».</p>
<h3>Etape 2 : la programmation</h3>
<p>Pour démarrer vous devez dans Constellation déclarer une sentinelle associée à une clé d’accès et un package virtuel. Ici notre ESP8266 est représenté par la sentinelle nommée “ESP8266” et le package virtuel se nomme “MyMonitor”.</p>
<p>Dans l’Arduino IDE, nous créons un nouveau projet à partir du Starter Kit Constellation pour ESP8266 dans lequel nous allons définir le nom de notre réseau Wifi (SSID) ainsi que sa clé d’accès  puis nous configurerons le client Constellation en spécifiant l’identité de notre package virtuel, sa clé d’accès et l’adresse/port de notre serveur Constellation :</p>
<p></p><pre class="crayon-plain-tag">// ESP8266 Wifi
#include &lt;ESP8266WiFi.h&gt;
char ssid[] = "MON SSID";
char password[] = "macléWifi!!!!";
 
// Constellation client
Constellation&lt;WiFiClient&gt; constellation("X.X.X.X", 8088, "ESP8266", "MyMonitor", "xxxxxxxxxxxxxxxxx")</pre><p></p>
<p>Encore une fois si tout cela est nouveau pour vous, je vous recommande <a href="/getting-started/connecter-un-arduino-ou-un-esp8266-constellation/">de suivre ce guide d’introduction à l’API Constellation pour Arduino/ESP8266</a>.</p>
<p>Maintenant que la coquille de notre package virtuel sur ESP8266 est prête, installons la librairie « ESP8266 Oled Driver for SSD1306 » pour pouvoir piloter l&rsquo;écran OLED depuis le gestionnaire de bibliothèque :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-64.png"><img loading="lazy" class="alignnone colorbox-4616" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Installation de la librarie" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-64.png" alt="Installation de la librarie" width="404" height="229" border="0" /></a></p>
<p>Il vous suffit ensuite d’importer cette librairie et déclarer l’objet « display » de cette façon :</p>
<p></p><pre class="crayon-plain-tag">#include &lt;Wire.h&gt;
#include "SSD1306.h"
SSD1306  display(0x3c, D1, D2);</pre><p></p>
<p>Au démarrage de votre programme, dans la méthode « <em>setup()</em> », initialisez votre écran :</p>
<p></p><pre class="crayon-plain-tag">display.init();
display.flipScreenVertically();
display.setFont(ArialMT_Plain_10);</pre><p></p>
<p>Toujours la méthode « <em>setup()</em> » et une fois connecté au Wifi, récupérez le setting « Machine » en prenant soin de recopier la valeur par les lignes :</p>
<p></p><pre class="crayon-plain-tag">JsonObject&amp; settings = constellation.getSettings();
static String machine = String(settings["Machine"].asString());</pre><p></p>
<p>Il ne nous reste plus qu’à enregistrer un ou plusieurs « <em>StateObjectLink</em> » pour récuperer les informations que vous souhaitez suivre.</p>
<p>Dans notre exemple nous allons enregistrer un « <em>StateObjectLink » </em>vers le StateObject « /intelcpu/0/load/0 » du package « HWMonitor » pour la sentinelle définie dans le setting « Machine ».</p>
<p>A chaque mise à jour du StateObject, nous afficherons sa valeur textuellement avec la méthode « <em>drawString</em> » ainsi que dans une barre de progression avec la méthode « <em>drawProgressBar</em> » :</p>
<p></p><pre class="crayon-plain-tag">constellation.registerStateObjectLink(machine.c_str(), "HWMonitor", "/intelcpu/0/load/0", [](JsonObject&amp; so) {
    int cpuUsage = so["Value"]["Value"].as&lt;int&gt;();
    // Vider l'écran
    display.clear();
    // Afficher une progressbar
    display.drawProgressBar(0, 32, 120, 10, cpuUsage);
    // Afficher la consommation du CPU
    display.setTextAlignment(TEXT_ALIGN_CENTER);
    display.drawString(64, 15, "CPU = " + String(cpuUsage) + "%");
    // Dessiner sur l'écran OLED
    display.display();
  )});</pre><p></p>
<h3>Demos</h3>
<p>Avant de lancer votre code, assurez-vous d’avoir bien déclaré le setting « Machine » avec le nom de la sentinelle sur laquelle est déployé le package « HWMonitor » :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-65.png"><img loading="lazy" class="alignnone colorbox-4616" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="Setting du package" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-65.png" alt="Setting du package" width="404" height="194" border="0" /></a></p>
<p>Il ne vous reste plus qu’à téléverser votre programme sur la D1 Mini et observer le résultat.</p>
<p style="text-align: center;"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-61.png"><img loading="lazy" class="alignnone colorbox-4616" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="MyMonitor en action" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-61.png" alt="MyMonitor en action" width="454" height="295" border="0" /></a></p>
<p><b>Et voilà comment en quelque ligne de code vous avez un moniteur temps réel de votre consommation CPU Windows sur un écran OLED piloté par un ESP8266.</b></p>
<h3>Pour aller plus loin</h3>
<p>Vous pouvez bien entendu adapter le ou les StateObjects à afficher. Nous avons dans ce tutoriel affiché la consommation CPU mesurée par le package « <a href="/package-library/hwmonitor/">HWMonitor </a>» mais ce même package met à disposition beaucoup d’autre StateObject : consommation RAM, des disques dur, réseau, température du châssis, consommation énergétique, etc. N’hésitez pas à utiliser le <a href="/constellation-platform/constellation-console/stateobjects-explorer/">StateObject Explorer</a> pour explorer les StateObjects de ce package.</p>
<p>Il existe aussi plein d’autres packages qui produisent des StateObjects que vous pourrez afficher sur votre écran OLED. Quelques exemples : le package « NetAtmo » pour les mesures sur la T°, humidité, taux de CO², ambiance sonore, pluviomètre et autre ; le package « Nest » sur l’état de votre chauffage, T° ambiante et de consigne ; package « Tesla » pour récupérer en temps réel toutes les données sur votre voiture ; package « DayInfo » pour connaitre les heures du soleil ou la fête du jour ; le package « NetworkTools » où vous pourrez superviser des services TCP ou les temps de réponse de vos sites Web ou encore le package « SNMP » pour pouvoir afficher sur votre écran OLED des informations issues du SNMP, comme par exemple la bande passante de votre routeur.</p>
<p>Bref vous l’aurez compris, la seule limite sera votre imagination !</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/creer-un-moniteur-connecte-pour-surveiller-vos-machines-equipements-reseau-et-autres/">Créer un moniteur connecté pour surveiller vos machines, équipements réseau et autres capteurs</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://developer.myconstellation.io/tutorials/creer-un-moniteur-connecte-pour-surveiller-vos-machines-equipements-reseau-et-autres/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Mise en cache de page à l’aide de Disk: Enhanced 

Served from: developer.myconstellation.io @ 2026-01-22 05:46:58 by W3 Total Cache
-->