﻿<?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 DHT11 - Constellation</title>
	<atom:link href="https://developer.myconstellation.io/tag/dht11/feed/" rel="self" type="application/rss+xml" />
	<link>https://developer.myconstellation.io/tag/dht11/</link>
	<description>Votre plateforme d&#039;interconnexion</description>
	<lastBuildDate>Thu, 19 Apr 2018 05:12:07 +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 DHT11 - Constellation</title>
	<link>https://developer.myconstellation.io/tag/dht11/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Créer un capteur de température, humidité et luminosité connecté</title>
		<link>https://developer.myconstellation.io/tutorials/creer-un-capteur-de-temperature-humidite-et-luminosite-connecte/</link>
					<comments>https://developer.myconstellation.io/tutorials/creer-un-capteur-de-temperature-humidite-et-luminosite-connecte/#respond</comments>
		
		<dc:creator><![CDATA[Sebastien Warin]]></dc:creator>
		<pubDate>Wed, 10 May 2017 15:55:52 +0000</pubDate>
				<category><![CDATA[Tutoriels]]></category>
		<category><![CDATA[StateObject]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[AngularJS]]></category>
		<category><![CDATA[ESP8266]]></category>
		<category><![CDATA[Capteur]]></category>
		<category><![CDATA[DHT11]]></category>
		<guid isPermaLink="false">https://developer.myconstellation.io/?p=4588</guid>

					<description><![CDATA[<p>Dans ce tutoriel créons un capteur de température, d’humidité et de luminosité connecté avec une page Web de visualisation des données en temps réel. Prérequis Un Arduino connecté ou un ESP8266 Des capteurs (DHT11 pour l’humidité et la température, un TSL2561</p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/creer-un-capteur-de-temperature-humidite-et-luminosite-connecte/">Créer un capteur de température, humidité et luminosité connecté</a> appeared first on <a rel="nofollow" href="https://developer.myconstellation.io">Constellation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Dans ce tutoriel créons un capteur de température, d’humidité et de luminosité connecté avec une page Web de visualisation des données en temps réel.</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-52.png"><img loading="lazy" class=" colorbox-4588" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="Capteur connecté" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-52.png" alt="Capteur connecté" width="399" height="248" border="0" /></a><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-55.png"><img loading="lazy" class=" colorbox-4588" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-55.png" alt="image" width="271" height="248" border="0" /></a></p>
<h3>Prérequis</h3>
<ul>
<li>Un Arduino connecté ou un ESP8266</li>
<li>Des capteurs (DHT11 pour l’humidité et la température, un TSL2561 pour la luminosité par exemple)</li>
<li>Un serveur Constellation</li>
</ul>
<h3>Etape 1 : le montage</h3>
<p>Ici nous utiliserons un D1 Mini Pro (ESP8266) avec un capteur DHT11 combinant la mesure de la température et de l’humidité ainsi qu&rsquo;un capteur TSL2561 pour la luminosité.</p>
<p>Les deux capteurs seront alimentés en 3,3v par la D1 Mini.</p>
<p>Le TSL2561 dispose d’une interface I²C (SDA et SDL qu’on connectera sur D1 et D2) et le DHT11 n’a besoin que d’une entrée digitale (qu’on connectera sur D3).</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 “MySensor”.</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", "MySensor", "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>Lancez maintenant le « gestionnaire de bibliothèque » (menu <i>Croquis &gt; Inclure une bibliothèque &gt; Gérer les bibliothèques</i>) et installez les bibliothèques suivantes :</p>
<ul>
<li>Adafruit Unified Sensor (par Adafruit)</li>
<li>DHT Sensor library (par Adafruit)</li>
<li>Adafruit TSL2561 (par Adafruit)</li>
</ul>
<p>Une fois les librairies installées, ajoutez en entête de votre code :</p>
<p></p><pre class="crayon-plain-tag">#include &lt;Adafruit_TSL2561_U.h&gt;
#include &lt;DHT_U.h&gt;
#include &lt;Wire.h&gt;</pre><p></p>
<p>Déclarez ensuite, juste après la déclaration du client Constellation, le capteur TSL2561 et le DHT11 par les lignes :</p>
<p></p><pre class="crayon-plain-tag">DHT_Unified dht(D3, DHT11);
Adafruit_TSL2561_Unified tsl(TSL2561_ADDR_FLOAT);</pre><p></p>
<p>Déclarez également un entier pour définir l’intervalle de temps (en ms) entre deux mesures que nous fixons à 10 secondes par défaut :</p>
<p></p><pre class="crayon-plain-tag">int interval = 10000; //ms</pre><p></p>
<p>Dans la méthode « <em>setup()</em> » configurez les I/O utilisés par l’I²C (D1 et D2 dans notre cas) :</p>
<p></p><pre class="crayon-plain-tag">Wire.begin(D1, D2);</pre><p></p>
<p>Initialisez ensuite le capteur DHT11 par la ligne :</p>
<p></p><pre class="crayon-plain-tag">dht.begin();</pre><p></p>
<p>Puis le capteur TSL2561 :</p>
<p></p><pre class="crayon-plain-tag">if(!tsl.begin())
{
  Serial.print("No TSL2561 detected!");
  while(1);
}
tsl.enableAutoRange(true);
tsl.setIntegrationTime(TSL2561_INTEGRATIONTIME_13MS);</pre><p></p>
<p>Toujours dans la méthode «<em> setup</em> », récupérons les settings de notre package sur Constellation et affectons le setting « Interval » si défini sur Constellation (autrement c’est la valeur de 10 secondes déclarée ci-dessus qui sera utilisée) :</p>
<p></p><pre class="crayon-plain-tag">JsonObject&amp; settings = constellation.getSettings();
if(settings.containsKey("Interval")) {
  interval = settings["Interval"].as&lt;int&gt;();
}</pre><p></p>
<p>Pour finir dans la boucle principale, nous allons prendre les mesures de nos capteurs et publier trois StateObjects avec une durée de vie de deux fois l’intervalle de temps :</p>
<p></p><pre class="crayon-plain-tag">void loop(void) {
  constellation.loop();
  static int lastBeat = 0;
  if(millis() - lastBeat &gt; interval) {
    lastBeat = millis();
    sensors_event_t event;
    // Luminosité
    tsl.getEvent(&amp;event);
    if (event.light) {
      constellation.pushStateObject("Light", event.light, interval * 2);
    }  
    // Temperature
    dht.temperature().getEvent(&amp;event);
    if (!isnan(event.temperature)) {
      constellation.pushStateObject("Temperature", event.temperature, interval * 2);
    }
    // Humidité
    dht.humidity().getEvent(&amp;event);
    if (!isnan(event.relative_humidity)) {
      constellation.pushStateObject("Humidity", event.relative_humidity, interval * 2);
    }
  }
}</pre><p></p>
<p><strong>Et voilà votre capteur connecté est prêt !</strong></p>
<p>Il ne reste plus qu’à téléverser votre programme et ouvrir votre Console Constellation pour constater qu’il est bien opérationnel :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-53.png"><img class="colorbox-4588"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-53.png" alt="image" width="404" height="149" border="0" /></a></p>
<p>Ouvrez maintenant le <a href="/constellation-platform/constellation-console/stateobjects-explorer/">StateObject Explorer</a> et rechercher le terme “MySensor” :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-54.png"><img class="colorbox-4588"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-width: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-54.png" alt="image" width="404" height="154" border="0" /></a></p>
<p>On retrouve bien, en temps réel, les trois mesures réalisées par notre ESP8266. N’hésitez pas à ouvrir ces StateObjects et cliquez sur « Subscribe » pour voir les mesures en temps réel dans la Console Constellation.</p>
<h3>Etape 3 : Une page Web pour afficher votre capteur en temps réel</h3>
<p>Créons maintenant une page Web pour afficher en temps réel les mesures de notre capteur connecté. 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>Dans le corps de votre page, placez les valeurs vos StateObjects où bon vous semble. Par exemple :</p>
<p></p><pre class="crayon-plain-tag">&lt;div&gt;
    Temperature: &lt;p&gt;{{Temperature}}°C&lt;/p&gt;
    Humidity: &lt;p&gt;{{Humidity}}%&lt;/p&gt;
    Light: &lt;p&gt;{{Light}} lux&lt;/p&gt;
&lt;/div&gt;</pre><p></p>
<p>Pour finir ajoutez 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 constellation", "MySensor WebPage");

    constellation.onConnectionStateChanged(function (change) {
      if (change.newState === $.signalR.connectionState.connected) {

        constellation.registerStateObjectLink("*", "MySensor", "*", "*", function (so) {
          $scope.$apply(function () {
           $scope[so.Name] = so.Value;
          });
        });
      }
    });

    constellation.connect();
  }]);</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 « constellation.initializeClient »</p>
<p><b>Vous obtenez en quelques minutes une page Web permettant d’afficher en temps réel les mesures de température, d’humidité et de luminosité réalisées par votre ESP8266 !</b></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-55.png"><img class="colorbox-4588"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-55.png" alt="image" width="404" height="369" border="0" /></a></p>
<h3>Etape 4 (optionnelle) : créer un package .NET pour exploiter les données du capteur</h3>
<p>La page Web réalisée ci-dessus permet d’afficher en temps réel les valeurs de vos StateObjects.</p>
<p>Si maintenant vous souhaitez récupérer la valeur de ces StateObject dans un programme pour réagir en fonction de certaines valeurs (par exemple alerter si T° trop froide ou allumer des lumières si la luminosité est trop faible) ou bien tout simplement enregistrer ces valeurs dans un fichier, une base de données ou un service de cloud, suivez la suite.</p>
<p>Pour cet exemple, réalisons un programme en C#. On part du principe que vous avez installé Visual Studio et <a href="/getting-started/installer-constellation/">le SDK Constellation depuis le « Web Platform Installer »</a>.</p>
<p>Créez alors un nouveau projet de type « Constellation Package Console » :</p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-56.png"><img class="colorbox-4588"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-56.png" alt="image" width="404" height="266" border="0" /></a></p>
<p>Dans votre classe, ajoutez simplement des propriétés pour chaque StateObject avec l’attribut « StateObjectLink » pour lier ces propriétés .NET aux StateObjects de votre capteur (servez-vous du snippet « stateobjectlink »).</p>
<p>Par exemple pour inclure le StateObject « Light » dans notre classe C# :</p>
<p></p><pre class="crayon-plain-tag">[StateObjectLink("MySensor", "Light")]
public StateObjectNotifier Light { get; set; }</pre><p></p>
<p>Vous pouvez maintenant afficher sa valeur à tout moment, par exemple :</p>
<p></p><pre class="crayon-plain-tag">PackageHost.WriteInfo($"Luminosité {this.Light.Value.LastUpdate} = {this.Light.DynamicValue} lux");</pre><p></p>
<p>La propriété « Light » de votre classe contiendra toujours la dernière valeur du StateObject connu dans votre Constellation.</p>
<p>Vous pouvez donc manipuler la valeur mesurée par votre ESP8266 dans votre code C# comme une simple propriété .NET de votre code.</p>
<p>Vous pouvez également vous abonner à chaque mise à jour du StateObject pour déclencher une action grâce à l’évènement « ValueChanged » :</p>
<p></p><pre class="crayon-plain-tag">this.Light.ValueChanged += (s, e) =&gt;
{
    PackageHost.WriteInfo($"Nouvelle mesure à {this.Light.Value.LastUpdate} = {this.Light.DynamicValue} lux");
};</pre><p></p>
<p align="center"><a href="https://developer.myconstellation.io/wp-content/uploads/2017/05/image-57.png"><img class="colorbox-4588"  loading="lazy" style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="image" src="https://developer.myconstellation.io/wp-content/uploads/2017/05/image_thumb-57.png" alt="image" width="404" height="206" border="0" /></a></p>
<p>The post <a rel="nofollow" href="https://developer.myconstellation.io/tutorials/creer-un-capteur-de-temperature-humidite-et-luminosite-connecte/">Créer un capteur de température, humidité et luminosité 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-capteur-de-temperature-humidite-et-luminosite-connecte/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 02:29:26 by W3 Total Cache
-->