SmartCampus2014/Tutoriels

Liens

• Présentation du projet SmartCampus
• Fiche de suivi du projet
• Cahier des charges

Mosquitto

Mosquitto est une implémentation de MQTT, un protocole de M2M de type publish-subscribe.

Installation

• Documentation officielle : [1]
• Pour Debian/Ubuntu et dérivés: [2]
• Ensuite télécharger le client en ligne de commande:

---

sudo apt-get install mosquitto python-mosquitto
sudo apt-get install mosquitto-clients

---

Exemple de communication

• Dans un premier terminal on lance le broker :

---

>mosquitto
1391181009: mosquitto version 1.2.3 (build date 2013-12-04 21:22:55+0000) starting
1391181009: Using default config.
1391181009: Opening ipv4 listen socket on port 1883.
1391181009: Opening ipv6 listen socket on port 1883.

---

Sur certaines distributions, mosquitto peut se trouver dans /usr/sbin/.

• Dans un second terminal on crée un topic "toto" sur lequel on publie des messages.

---

mosquitto_sub -d -t toto

---

• Dans un dernier terminal on publie sur le topic "toto".

---

mosquitto_pub  -t toto -m "Hello world "

---

• Pour communiquer entre différents devices, il faut lancer le broker sur chacun d'eux, puis indiquer lors du subscribe l'adresse IP du publisher. Par exemple :

---

mosquitto_sub -d -h 192.168.0.1 -t toto

---

Comment utiliser openHAB avec Mosquitto ?

Requis

Il faut en premier lieu ajouter le bundle MQTT bindings (disponible ici) dans le dossier "addons" du runtime openHAB.

Ne pas oublier de lancer le broker Mosquitto (commande mosquitto).

Ajouter l'URL du broker dans le fichier de configuration d'openHAB (e.g. openhab.cfg) :

---

mqtt:mosquitto.url=tcp://localhost:1883

---

Subscribe

Lier un item à un topic en indiquant l'alias du broker, le type des messages transmis, et l'action effectuée sur openHAB sur réception des messages :

---

{ mqtt="<[<broker>:<topic>:<type>:<transformation>]" }

---

où <type> est soit "command" soit "state" (pour l'update), et où <transformation> est "default".

Par exemple :

---

Number Temperature_GF_Corridor 	"Temperature [%.1f °C]"	<temperature>	(Temperature, GF_Corridor) { mqtt="<[mosquitto:temperature:state:default]" }

---

On peut alors publier avec "mosquitto_pub" sur le topic défini (e.g. "temperature") et voir le changement dans l'interface openHAB.

Publish

Le principe est relativement semblable. On lance "mosquitto_sub" sur le topic voulu (e.g. "light"). Lier un item à un topic en indiquant l'alias du broker, le type des messages transmis, le déclencheur de l'envoi de message, et la transformation :

---

{ mqtt=">[<broker>:<topic>:<type>:<trigger>:<transformation>]" }

---

Par exemple :

---

Switch Light_Outdoor_Garage "Garage" (Outdoor, Lights)  { mqtt=">[mosquitto:light:command:ON:1],>[mosquitto:light:command:OFF:0]" }

---

Ici, lorsque l'interrupteur de la lumière du garage est actionné, le subscriber Mosquitto reçoit 0 ou 1.

Pour plus d'informations, voir le wiki officiel ici.

Comment se connecter en SSH à la carte Galileo

Voir le tutoriel officiel d'Intel : Galileo_GettingStarted.pdf

Configuration de la carte Galileo

• Avant tout, il est important de toujours alimenter la carte Galileo avant de la brancher à l’ordinateur !
• Connecter le Galileo à l’ordinateur avec le câble USB (port USB client de la carte).
  
• Lancer l'IDE Arduino et sélectionner le port série (Outils > Port série). Si le port série n'est pas reconnu, essayez de relancer l'IDE en Administrateur.
• Updater le firmware via l’IDE Arduino (Aide > Firmware Update). Cette étape est primordiale pour pouvoir se connecter en SSH. Il est aussi important de ne pas lancer de sketchs avant ou pendant la mise à jour.
• Créer un nouveau sketch :

---

void setup() {
  // put your setup code here, to run once:
  system("telnetd -l /bin/sh");
  system("ifconfig eth0 169.254.1.1 netmask 255.255.0.0 up"); //adapter l’adresse ip et le masque
  system("route add default gw 169.254.1.2"); // le PC devient passerelle par défaut
}

void loop() {
  // put your main code here, to run repeatedly: 
}

---

Attention, il faut garder la boucle loop dans le code, même vide, pour ne pas avoir d'erreur. Dans cet exemple, nous lançons le service Telnet mais si on utilise seulement SSH, cette ligne n'est pas nécessaire.

• Flasher ce code sur la carte Galileo.

• Configurer le PC en mode routeur (en root sous Linux) :

---

sysctl net.ipv4.ip_forward=1

---

• Activer le NAT sur le PC (en root sous Linux) :

---

iptables -t nat -A POSTROUTING -o wlan0 -j MASQUERADE
iptables -A FORWARD -i wlan0 -o eth0:avahi -m state --state RELATED,ESTABLISHED -j ACCEPT
iptables -A FORWARD -i eth0:avahi -o wlan0 -j ACCEPT

---

• Sur Galileo, si la résolution d'adresse ne fonctionne pas (e.g. ping www.google.com ne marche pas), configurer le DNS en ajoutant à /etc/resolv.conf :

---

domain grenet.fr
search grenet.fr
nameserver 130.190.190.4

---

Attention : les domaines ci-dessus sont valables seulement pour un PC connecté à wifi-campus. Sur un autre réseau, il suffit (sur un système UNIX) de copier le contenu de /etc/resolv.conf

Connexion en SSH

• Relier le Galileo à l’ordinateur avec le câble Ethernet.
• Sur windows la connexion se fera automatiquement, mais sur Linux il faut changer l’adresse IP de la carte Ethernet pour être sur le même réseau que le Galileo :

---

sudo ifconfig eth0 169.254.1.2 up

---

• Faire un ping vers l’adresse ip 169.254.1.1 pour vérifier que la connexion fonctionne (si cela ne marche pas, il peut être judicieux de déconnecter la prise secteur de la carte et de la rebrancher).

• Lorsque le ping fonctionne, il est possible de se connecter en root à la carte Galileo, soit en utilisant un client SSH de type PuTTY, ou via la commande :

---

ssh root@169.254.1.1

---

Mis en place d'une base de donnée mongodb (en local)

Installation et lancement

Par la suite il est possible d'accéder à différentes informations de votre BD via l'url :

• http://localhost:28017/

Accéder au contenu

Pour accéder au contenu d'une collection de votre base de donnée, lancer la base de donnée en utilisant la commande :

---

sudo mongod --rest

---

puis dans votre navigateur, accéder à l'URL :

• http://localhost:28017/nomDeVotreBD/nomDeVotreCollection/

Ajouter une base de donnée

Pour ajouter une base de donnée lancer mongo en version shell :

---

mongo

---

Pour visualiser l'ensemble des bases de données :

---

show dbs

---

Afin de créer une base de donnée ou se connecter à l'une d'elle :

---

use nomBD

---

Mise en place NodeJs Mongoose

Prérequis

Effectuer le point précédent Lancer les commandes :

---

sudo npm install express mongoose mongoose-schema-extend express-restify-mongoose

---

Connexion à la BD

• Afin de se connecter à la BD réalisée précédemment :

---

//Connection to the a mongodb database path localhost:port/nameOfDB
mongoose.connect("mongodb://localhost:27017/Client", function(err) {
    if (err) {
        throw err;
    }
});

---

• On définit le schéma d'une collection en définissant son id et un champs

---

//Definition of a schema
var Temperature = new Schema({
    _id: Number,
    temp: Number
});

---

• Création du modèle

---

var TemperatureModel = mongoose.model('temperature', Temperature);

//Creation of an object which respect the model define before
var myTemperatureModel = new TemperatureModel({_id: 1473, temp: 16});

---

• Ajout d'un élèment dans la base de donnée.

---

//saved the temperature in the mongodb database
myTemperatureModel.save(function(err){
  if (err) { throw err; }
  console.log('Commentaire ajouté avec succès !');
  // On se déconnecte de MongoDB maintenant
  mongoose.connection.close();
});

---

Mise en place NodeJs Mongoose MQTT

Prérequis

Installation de mqtt

---

npm install mqtt

---

Utilisation

On fait appel à la librairie mqtt :

---

var mqtt = require('mqtt')

---

Connexion au broker sur le port 1883 :

---

client = mqtt.createClient(1883, 'localhost');

---

On subscribe au topic 'temperature', et à chaque réception de ce topic on affiche ce qui a été reçu dans la console:

---

client.subscribe('temperature');
client.on('message', function (topic, message) {
  console.log(message);
});

---

On peut également publier sur le topic 'light' l'info 'On' :

---

client.publish('light', 'On');

---

En lançant ces commandes le texte 'On' devrait apparaître sur votre console.

Utilisation de NodeJS Mongoose MQTT et Mosquitto

Prérequis

Suivre le tuto sur mosquitto, NodeJS Mongoose MQTT et Mosquitto. Lancer MongoDB. Ajouter une DB dans mongo "Client" (cf tuto NodeJS Mongoose MQTT).

Test

Dans le .js Node ajouter le code suivant :

---

var http = require('http');
var express = require('express');
var mongoose = require('mongoose');
var mqtt = require('mqtt')
var Schema = mongoose.Schema;
var restify = require('express-restify-mongoose')

///////////////////////////////////
/////// MONGODB  //////////////////
//////////////////////////////////
//Connection to the a mongodb database path localhost:port/nameOfCollection
mongoose.connect("mongodb://localhost:27017/Client", function(err) {
    if (err) {
        throw err;
    }
});

//Definition of a schema
var Temperature = new Schema({
    _id: Number,
    temp: Number
});
//Creation of the model
var TemperatureModel = mongoose.model('temperatures', Temperature);


///////////////////////////////////
/////// MQTT  //////////////////
//////////////////////////////////

client = mqtt.createClient(1883, 'localhost');

client.subscribe('temperature');

var i = 0;
client.on('message', function(topic, message) {
    console.log(message);
    var myTemperatureModel = new TemperatureModel({_id: i++, temp: message});
    myTemperatureModel.save(function(err) {
        if (err) {
            throw err;
        }
        console.log('Température ajouté à la BD avec succès !');
    });
});


var app = express();
app.configure(function() {
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    restify.serve(app, TemperatureModel);
});


//Run the server
http.createServer(app).listen(4242, function() {
    console.log("Express server listening on port 4242");
});

---

Lancer ceci avec Node.

Lancer mosquitto et publier sur le topic 'light' :

---

mosquitto
mosquitto_pub  -t temperature -m "25"

---

Par la suite, vous devriez voir le message "25°C" dans la console. De plus, à l'adresse http://localhost:28017/Client/temperatures/ vous devriez apercevoir l'ajout d'un objet JSON contenant en paramètre 'temp' à 25.

Carte interactive

Google Maps

Voir la documentation de l'API.

• Intégrer la carte :

---

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { height: 100% }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">

            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(45.19091427, 5.76828361), // centrer sur le campus de SMH
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"),
                        mapOptions);

                // bounds of the desired area
                var allowedBounds = new google.maps.LatLngBounds( // limites du campus
                  new google.maps.LatLng(45.18575736, 5.75114965),
                  new google.maps.LatLng(45.20112086, 5.78054667)
                );
                var boundLimits = {
                    maxLat : allowedBounds.getNorthEast().lat(),
                    maxLng : allowedBounds.getNorthEast().lng(),
                    minLat : allowedBounds.getSouthWest().lat(),
                    minLng : allowedBounds.getSouthWest().lng()
                };

                var lastValidCenter = map.getCenter();
                var newLat, newLng;
                google.maps.event.addListener(map, 'center_changed', function() {
                    center = map.getCenter();
                    if (allowedBounds.contains(center)) {
                        // still within valid bounds, so save the last valid position
                        lastValidCenter = map.getCenter();
                        return;
                    }
                    newLat = lastValidCenter.lat();
                    newLng = lastValidCenter.lng();
                    if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
                        newLng = center.lng();
                    }
                    if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
                        newLat = center.lat();
                    }
                    map.panTo(new google.maps.LatLng(newLat, newLng));
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>
        <div id="map-canvas"/>
    </body>
</html>

---

• Ajouter un POI et une infobulle :

---

var latLng = new google.maps.LatLng(45.187778,5.726945);

var marker = new google.maps.Marker({
    position : latLng,
    map      : map,
    title    : "titre"
    //icon     : "marker.gif"
});

var infoWindow = new google.maps.InfoWindow({
    content  : 'infobulle',
    position : latLng
});

---

Leaflet

Voir la documentation de l'API.

• Intégrer la carte (+ marqueurs et popups) :

---

<!DOCTYPE html>
<html>
    <head>
	<title>Leaflet Example</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    </head>
    <body>
	<div id="map" style="width: 600px; height: 400px"></div>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
	<script>

        var map = L.map('map').setView([45.19091427, 5.76828361], 14);
	L.tileLayer('http://{s}.tile.cloudmade.com/ec5901144ac74caeb0bf17aeaeea442f/997/256/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            maxZoom: 18
        }).addTo(map);
        
        // add a marker
        var marker = L.marker([45.19, 5.77]).addTo(map);
        
        // add a circle
        var circle = L.circle([45.20, 5.76], 300, {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5
        }).addTo(map);

        // add a polygon
        var polygon = L.polygon([
            [45.189, 5.765],
            [45.193, 5.762],
            [45.192, 5.750]
        ]).addTo(map);

        // add popups        
        marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
        circle.bindPopup("I am a circle.");
        polygon.bindPopup("I am a polygon.");
        
        // add a standalone popup
        var popup = L.popup()
            .setLatLng([45.185, 5.775])
            .setContent("I am a standalone popup.")
            .openOn(map);         
            
        // event
        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(map);
        }
        map.on('click', onMapClick);

	</script>
	
    </body>
</html>

---

Création d'une route personnalisée avec Express (framework node.js)

Prérequis

• nodejs et Express installés

Installer nodejs et npm. [3] Ensuite :

 npm install express

Introduction

Express est un framework Node.js MVC. Il s'organise autour de trois dossiers principaux : routes, views et public.

• views : regroupe l'ensemble des vues ; dans notre présentation une simple page HTML.
• routes : le modèle où l'on définit les fonctionnalités de chaque "route"
• public : rassemble les éléments statiques (js, css, ...)

Une route désigne une adresse adresse:port/une/route/personnalisee.

Le fichier principal fait office de contrôleur.

Un hello world avec Express

Un simple hello world avec Express.

serveur.js

---

var express = require('express');  // include express
var app = express();               // lance l'application

app.get('/', function(req, res){   // définit la route racine
  res.send('hello world');
});

app.listen(4242);                  // ecoute sur le port 4242

---

Pour lancer l'application

 nodejs serveur.js
 Allez sur http://localhost:4242/

Organiser le routage

L'ensemble des routes peut être décrit dans le fichier principal serveur.js. Cependant pour plus de clarté les routes sont généralement définies dans le dossier /routes.

serveur.js

---

var express = require('express');  // include express
var routes = require('./routes');
var app = express();               // lance l'application

app.get('/', routes.hello);        // définit la route racine
app.get('/json', routes.exjson);        
app.get('/unepage', routes.unepage);    

app.listen(4242);                  // ecoute sur le port 4242

---

/routes/index.js

---

exports.hello = function(req, res) {
    res.send("<h1>Hello World !</h1>");
};
exports.unepage = function(req, res) {
    res.render('une_page.html');
}
exports.exjson = function(req, res) {
    res.json(200, {message: "Welcome in our site !"});
};

---

views/une_page.html

---

<!DOCTYPE html>
<html>
    <head>
	<title>Leaflet Example</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
	Une simple page	
    </body>
</html>

---