Créer un capteur de température, humidité et luminosité connecté

Sommaire

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 pour la luminosité par exemple)
Un serveur Constellation

Etape 1 : le montage

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’un capteur TSL2561 pour la luminosité.

Les deux capteurs seront alimentés en 3,3v par la D1 Mini.

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

Etape 2 : la programmation

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

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 :

// ESP8266 Wifi
#include <ESP8266WiFi.h>
char ssid[] = "MON SSID";
char password[] = "macléWifi!!!!";

// Constellation client
Constellation<WiFiClient> constellation("X.X.X.X", 8088, "ESP8266", "MySensor", "xxxxxxxxxxxxxxxxx")

// ESP8266 Wifi

#include <ESP8266WiFi.h>

char ssid[] = "MON SSID";

char password[] = "macléWifi!!!!";

// Constellation client

Constellation<WiFiClient> constellation("X.X.X.X", 8088, "ESP8266", "MySensor", "xxxxxxxxxxxxxxxxx")

Encore une fois si tout cela est nouveau pour vous, je vous recommande de suivre ce guide d’introduction à l’API Constellation pour Arduino/ESP8266.

Lancez maintenant le « gestionnaire de bibliothèque » (menu Croquis > Inclure une bibliothèque > Gérer les bibliothèques) et installez les bibliothèques suivantes :

Adafruit Unified Sensor (par Adafruit)
DHT Sensor library (par Adafruit)
Adafruit TSL2561 (par Adafruit)

Une fois les librairies installées, ajoutez en entête de votre code :

#include <Adafruit_TSL2561_U.h>
#include <DHT_U.h>
#include <Wire.h>

#include <Adafruit_TSL2561_U.h>

#include <DHT_U.h>

#include <Wire.h>

Déclarez ensuite, juste après la déclaration du client Constellation, le capteur TSL2561 et le DHT11 par les lignes :

DHT_Unified dht(D3, DHT11);
Adafruit_TSL2561_Unified tsl(TSL2561_ADDR_FLOAT);

1 2	DHT_Unified dht(D3, DHT11); Adafruit_TSL2561_Unified tsl(TSL2561_ADDR_FLOAT);

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 :

int interval = 10000; //ms

1	int interval = 10000; //ms

Dans la méthode « setup() » configurez les I/O utilisés par l’I²C (D1 et D2 dans notre cas) :

Wire.begin(D1, D2);

1	Wire.begin(D1, D2);

Initialisez ensuite le capteur DHT11 par la ligne :

dht.begin();

1	dht.begin();

Puis le capteur TSL2561 :

if(!tsl.begin())
{
  Serial.print("No TSL2561 detected!");
  while(1);
}
tsl.enableAutoRange(true);
tsl.setIntegrationTime(TSL2561_INTEGRATIONTIME_13MS);

if(!tsl.begin())

{

Serial.print("No TSL2561 detected!");

while(1);

}

tsl.enableAutoRange(true);

tsl.setIntegrationTime(TSL2561_INTEGRATIONTIME_13MS);

Toujours dans la méthode « setup », 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) :

JsonObject& settings = constellation.getSettings();
if(settings.containsKey("Interval")) {
  interval = settings["Interval"].as<int>();
}

JsonObject& settings = constellation.getSettings();

if(settings.containsKey("Interval")) {

interval = settings["Interval"].as<int>();

}

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 :

void loop(void) {
  constellation.loop();
  static int lastBeat = 0;
  if(millis() - lastBeat > interval) {
    lastBeat = millis();
    sensors_event_t event;
    // Luminosité
    tsl.getEvent(&event);
    if (event.light) {
      constellation.pushStateObject("Light", event.light, interval * 2);
    }  
    // Temperature
    dht.temperature().getEvent(&event);
    if (!isnan(event.temperature)) {
      constellation.pushStateObject("Temperature", event.temperature, interval * 2);
    }
    // Humidité
    dht.humidity().getEvent(&event);
    if (!isnan(event.relative_humidity)) {
      constellation.pushStateObject("Humidity", event.relative_humidity, interval * 2);
    }
  }
}

void loop(void) {

constellation.loop();

static int lastBeat = 0;

if(millis() - lastBeat > interval) {

lastBeat = millis();

sensors_event_t event;

// Luminosité

tsl.getEvent(&event);

if (event.light) {

constellation.pushStateObject("Light", event.light, interval * 2);

}

// Temperature

dht.temperature().getEvent(&event);

if (!isnan(event.temperature)) {

constellation.pushStateObject("Temperature", event.temperature, interval * 2);

}

// Humidité

dht.humidity().getEvent(&event);

if (!isnan(event.relative_humidity)) {

constellation.pushStateObject("Humidity", event.relative_humidity, interval * 2);

}

Et voilà votre capteur connecté est prêt !

Il ne reste plus qu’à téléverser votre programme et ouvrir votre Console Constellation pour constater qu’il est bien opérationnel :

Ouvrez maintenant le StateObject Explorer et rechercher le terme “MySensor” :

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.

Etape 3 : Une page Web pour afficher votre capteur en temps réel

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.

Dans les entêtes ajoutez les scripts suivants :

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

Sur la balise <html> ajoutez l’attribut :

ng-app="MyDemoApp"

1	ng-app="MyDemoApp"

Et sur la balise <body> ajoutez l’attribut :

ng-controller="MyController"

1	ng-controller="MyController"

Dans le corps de votre page, placez les valeurs vos StateObjects où bon vous semble. Par exemple :

<div>
    Temperature: <p>{{Temperature}}°C</p>
    Humidity: <p>{{Humidity}}%</p>
    Light: <p>{{Light}} lux</p>
</div>

<div>

Temperature: <p>{{Temperature}}°C</p>

Humidity: <p>{{Humidity}}%</p>

Light: <p>{{Light}} lux</p>

</div>

Pour finir ajoutez le script suivant dans votre page (dans une balise <script>):

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();
  }]);

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();

}]);

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 »

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 !

Etape 4 (optionnelle) : créer un package .NET pour exploiter les données du capteur

La page Web réalisée ci-dessus permet d’afficher en temps réel les valeurs de vos StateObjects.

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.

Pour cet exemple, réalisons un programme en C#. On part du principe que vous avez installé Visual Studio et le SDK Constellation depuis le « Web Platform Installer ».

Créez alors un nouveau projet de type « Constellation Package Console » :

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 »).

Par exemple pour inclure le StateObject « Light » dans notre classe C# :

[StateObjectLink("MySensor", "Light")]
public StateObjectNotifier Light { get; set; }

1 2	[StateObjectLink("MySensor", "Light")] public StateObjectNotifier Light { get; set; }

Vous pouvez maintenant afficher sa valeur à tout moment, par exemple :

PackageHost.WriteInfo($"Luminosité {this.Light.Value.LastUpdate} = {this.Light.DynamicValue} lux");

1	PackageHost.WriteInfo($"Luminosité {this.Light.Value.LastUpdate} = {this.Light.DynamicValue} lux");

La propriété « Light » de votre classe contiendra toujours la dernière valeur du StateObject connu dans votre Constellation.

Vous pouvez donc manipuler la valeur mesurée par votre ESP8266 dans votre code C# comme une simple propriété .NET de votre code.

Vous pouvez également vous abonner à chaque mise à jour du StateObject pour déclencher une action grâce à l’évènement « ValueChanged » :

this.Light.ValueChanged += (s, e) =>
{
    PackageHost.WriteInfo($"Nouvelle mesure à {this.Light.Value.LastUpdate} = {this.Light.DynamicValue} lux");
};

this.Light.ValueChanged += (s, e) =>

{

PackageHost.WriteInfo($"Nouvelle mesure à {this.Light.Value.LastUpdate} = {this.Light.DynamicValue} lux");

};

Créer un capteur de température, humidité et luminosité connecté

Editer la page sur GitHub

Étiqueté avec :StateObject Javascript AngularJS ESP8266 Capteur DHT11

Prérequis

Etape 1 : le montage

Etape 2 : la programmation

Etape 3 : Une page Web pour afficher votre capteur en temps réel

Etape 4 (optionnelle) : créer un package .NET pour exploiter les données du capteur

Démarrez la discussion sur le forum Constellation