Site RESTful avec Slim3 et ng-admin

SLIM 3 est un microframework php qui permet de créer des API. Associé à un module AngularJS nommé ng-admin[0], il permet de construire un tableau de bord d’administration d’une base de données dans une application de type SPA (Single Page Application). Nous verrons ici comment mettre en œuvre l’ensemble.

Les vidéos

  1. Création du projet dans NetBeans, installation du micro Framework Slim 3 avec composer
  2. Création de l’API. mise en place du routage, interrogation de ma base mySQL
  3. Installation du moteur de vue ng-admin et affichage d’une liste de données.
  4. Ajout, modification et suppression de données en faisant interagir ng-admin et l’API Slim 3

Prérequis

L’ordinateur hôte de la solution doit avoir :

Tous ces logiciels sont multiplateformes et fonctionnent quel que soit l’OS.

Création de la solution (Netbeans)

Dans Netbeans (exemple pour créer un projet portant le nom : « monProjet »)

Fichier->Nouveau Projet cela lance un assistant en 5 points

  1. Sélectionner un projet : Choisir Catégories -> PHP et Projets -> PHP Application, cliquer sur Suivant
  2. Name and Location : Project Name : monProjet, Sources Folder : pointer sur le dossier root du serveur et un sous dossier portant le nom du projet : par exemple c:\laragon\www\monProjet, PHP version (celle qui est installée sur l’ordinateur), Default Encoding : UTF-8, cliquer sur Suivant.
  3. Run Configuration : Run As : Local Web Site, project URL : le chemin du virtual host créé sur le serveur (si ce n’est fait automatiquement, il faut le faire) : http://monProjet.dev:8080
  4. PHP Frameworks : laisser vide, cliquer sur Suivant
  5. Composer : (installation des bibliothèques php nécessaires au projet, ici nous allons ajouter le paquet Slim 3 et le paquet Slim PDO).
    Dans token -> slim puis cliquer sur Search, sélectionner slim/slim, dans la liste déroulante Version choisir 3.x-dev , puis cliquer sur le bouton afin de faire apparaitre slim/slim (3.x-dev) dans la fenêtre de droite.
    refaire la même chose avec le paquet slim/PDO version dev-master

Cliquer sur Terminer, les différents dossiers du projet vont être créés, et composer va télécharger et installer les bibliothèques

A l’issue de l’opération, le dossier du projet ressemble à ceci :

Le dossier nbprojet contient les fichiers de paramétrage du projet necessaires à NetBeans (on n’y touche jamais)

Le dossier vendor, qui contient les bibliothèques téléchargées et un fichier autoload.php, qui comme son nom l’indique, permet de charger automatiquement les classes et leur espace de nom afin de les rendre disponibles facilement.

Composer.json est le fichier qui contient les références des packages installés,

{
    "name": "vendor/mon-projet",
    "description": "Description of project monProjet.",
    "authors": [
        {
            "name": "francois",
            "email": "your@email.here"
        }
    ],
    "require": {
        "slim/slim": "3.x-dev",
        "slim/pdo": "dev-master"
    }
}

Si on ajoute ou supprime une dépendance dans la partie « require » du fichier, puis qu’on effectue une commande composer update, le projet se met à jour automatiquement et chargeant ou déchargeant les bibliothèques ajoutées ou retirées. Un autoload.php est alors recréer. Composer.lock contient les informations de l’autoload actuel. (on ne touche jamais ce fichier).

Enfin un fichier index.php et un squelette de page web

L’API

Dans notre application, tous les accès au modèle de données se font au travers de requêtes web vers une API en respectant le format REST[1].

Le format REST considère l’url, non plus comme l’appel d’une page web mais comme l’appel à une fonction, les arguments étant passés soit dans l’url (pour les requêtes de type GET, DELETE) dans le corps (pour les requêtes POST) ou bien les deux (requêtes PUT).

Dans le format REST, les verbes des requêtes permettent de définir le type d’action que le serveur devra effectuer.

Exemple :

Verbe

url

Action

GET

/products   

Récupère un jeu de
données contenant tous les éléments « products »

GET

/products/:id

Récupère un jeu de
données contenant 1 élément « products » ayant l’identifiant « :id »

POST

/products   

Créer un « product »
dans la table « products » , les paramètres passent dans le corps
de la requête

PUT

/products/:id

Mise à jour du product
 d’identifiant « :id », les
paramètres passent dans le corps de la requête

DELETE

/products/:id

Destruction du product
d’identifiant « :id »

Grâce à ces 4 verbes, on peut créer des services web qu’on nomme CRUD (Create Read Modify Delete).

Le serveur renvoie au client un jeu de données soit au format XML soit au format JSON.

Exemple :

GET /products

Renvoie un tableau JSON de type :

[
    {
      "id": 1,
      "name": "LG P880 4X HD",
      "description": "My first awesome phone!",
      "price": null,
      "category_id": 5,
      "created": "2014-06-01 01:12:26",
      "modified": "2014-05-31 17:12:26"
    },
    {
      "id": 2,
      "name": "Google Nexus 4",
      "description": "The most awesome phone of 2013!",
      "price": "56",
      "category_id": 2,
      "created": "2014-06-01 01:12:26",
      "modified": "2014-05-31 17:12:26"
    },
…
]

GET /products/2

Renvoie un objet JSON ressemblant à ceci :

{
      "id": 2,
      "name": "Google Nexus 4",
      "description": "The most awesome phone of 2013!",
      "price": "56",
      "category_id": 2,
      "created": "2014-06-01 01:12:26",
      "modified": "2014-05-31 17:12:26"
}

 

L’API sera construite à l’aide du microframework Slim Framework 3[2]. Ce dernier a été créé pour développer simplement des API, il possède un routeur pour gérer les diverses requêtes et un injecteur de dépendance qui permet d’utiliser les bibliothèques tierces.

Créer un dossier « api » sur la racine du projet. Ajouter un fichier index.php et un fichier .htaccess

Comme indiqué sur la page https://www.slimframework.com/docs/start/web-servers.html , compléter la fichier .htaccess de la manière suivante :

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [QSA,L]

Vérifier aussi que dans la configuration de Apache l’option AllowOverride est sur All.

Sur un raspberry il s’agit du fichier /etc/apache2/apache2.conf, section :

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

Comme indiqué page https://www.slimframework.com/docs/tutorial/first-app.html , le squelette de la page index est le suivant :

<?php
use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

require '../vendor/autoload.php';

$app = new \Slim\App;
$app->get('/hello/{name}', function (Request $request, Response $response) {
    $name = $request->getAttribute('name');
    $response->getBody()->write("Hello, $name");

    return $response;
});
$app->run();

Nous allons nous inspirer de ce squelette afin que l’api puisse répondre  des données statiques dans un premier temps, puis des données issues de la BDD

exemple avec des données issues de la base de données

On suppose que la base de données est créée et qu’elle contient une table « ouvrants » (champs id et nom) avec quelques valeurs.

Dans Slim l’accès à la base de donnée est simplifié grâce à la bibliothèque slim/PDO . D’après la documentation[3]

L’usage typique se fait de la manière suivante :

require_once 'vendor/autoload.php';

$dsn = 'mysql:host=your_db_host;dbname=your_db_name;charset=utf8';
$usr = 'your_db_username';
$pwd = 'your_db_password';

$pdo = new \Slim\PDO\Database($dsn, $usr, $pwd);

// SELECT * FROM users WHERE id = ?
$selectStatement = $pdo->select()
                       ->from('users')
                       ->where('id', '=', 1234);

$stmt = $selectStatement->execute();
$data = $stmt->fetch();

// INSERT INTO users ( id , usr , pwd ) VALUES ( ? , ? , ? )
$insertStatement = $pdo->insert(array('id', 'usr', 'pwd'))
                       ->into('users')
                       ->values(array(1234, 'your_username', 'your_password'));

$insertId = $insertStatement->execute(false);

// UPDATE users SET pwd = ? WHERE id = ?
$updateStatement = $pdo->update(array('pwd' => 'your_new_password'))
                       ->table('users')
                       ->where('id', '=', 1234);

$affectedRows = $updateStatement->execute();

// DELETE FROM users WHERE id = ?
$deleteStatement = $pdo->delete()
                       ->from('users')
                       ->where('id', '=', 1234);

$affectedRows = $deleteStatement->execute();

 

On a ici les prototypes de l’instanciation d’un objet $pdo et des diverses requêtes select, delete, insert et update. L’intégration dans Slim se fait via un « container » permettant d’instancier un objet de la bibliothèque slim/PDO qui se situe dans un autre espace de nom que l’objet $app de Slim…

Le container va permettre de préparer, gérer et injecter des dépendances à l’application. L’avantage est que l’objet lié au container est créé à la demande et non de manière permanente. D’autre part les objets de l’application pourront accéder à des ressources dans d’autres espaces de nom.

Pour créer un container « db », insérer le code suivant :

<?php

use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

require '../vendor/autoload.php';

$config = [
    'settings' => [
        'displayErrorDetails' => true,

       
    ],
];
$app = new \Slim\App($config);
$container = $app->getContainer();
$container['db'] = function () {
    $dsn = 'mysql:host=localhost;dbname=apidb;charset=utf8';
    $usr = 'root';
    $pwd = '';
    $pdo = new \Slim\PDO\Database($dsn, $usr, $pwd);
    return $pdo;
};

Cela permet de créer un objet « db » qui sera instancié à la demande.

création d’une requête SELECT

Remplacer le code de la fonction $app->get(…) par celui-ci

/*********************************************************
 *    gestion des requêtes GET
 ******************************************************** */
$app->get('/{table}', function (Request $request, Response $response) {
    $table = $request->getAttribute('table');
    // SELECT * FROM {table}
    $selectStatement = $this->db->select()
            ->from($table);
    $stmt = $selectStatement->execute();
    $data = $stmt->fetchAll();
    return $response->withJson($data);
});

$this->db fait référence au container  « db » créé précédemment.

Sur le même principe si on veut que l’api renvoie juste un produit dont on spécifie l’id, le code sera le suivant :

$app->get('/{table}/{id}', function (Request $request, Response $response) {
    $table = $request->getAttribute('table');
    $id = $request->getAttribute('id');
    // SELECT * FROM {table} WHERE id = {id}
    $selectStatement = $this->db->select()->from($table)->where("id","=",$id);
    $stmt = $selectStatement->execute();
    $data = $stmt->fetch();
    return $response->withJson($data);
});

Code complet de la page /api/index.php

<?php

use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

require '../vendor/autoload.php';

$config = [
    'settings' => [
        'displayErrorDetails' => true,
       
    ],
];
$app = new \Slim\App($config);
$container = $app->getContainer();
$container['db'] = function () {
    $dsn = 'mysql:host=localhost;dbname=apidb;charset=utf8';
    $usr = 'root';
    $pwd = '';
    $pdo = new \Slim\PDO\Database($dsn, $usr, $pwd);
    return $pdo;
};

$app->get('/{table}', function (Request $request, Response $response) {
    $table = $request->getAttribute('table');
    // SELECT * FROM users WHERE id = ?
    $selectStatement = $this->db->select()
            ->from($table);
    $stmt = $selectStatement->execute();
    $data = $stmt->fetchAll();
    return $response->withJson($data);
});

$app->get('/{table}/{id}', function (Request $request, Response $response) {
    $table = $request->getAttribute('table');
    $id = $request->getAttribute('id');
    // SELECT * FROM {table} WHERE id = {id}
    $selectStatement = $this->db->select()->from($table)->where("id","=",$id);
    $stmt = $selectStatement->execute();
    $data = $stmt->fetch();
    return $response->withJson($data);
});

$app->run();

Installation de NG-ADMIN

ouvrir un terminal dans le dossier qui contient la solution puis effectuer la commande

npm install -g npm@2.x (sous linux faire précéder de sudo)
npm install ng-admin –-save

Cela installera le dossier node_modules et le sous dossier ng-admin qui contient tout le matériel pour le front-end.

Le dossier du projet va ressembler à ceci :

Modifier la page web index.php à la racine du site. Le code de la page est le suivant :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Controle d'accès</title>
       <link rel="stylesheet" href="node_modules/ng-admin/build/ng-admin.min.css">
    </head>
    <body ng-app="myApp">
        <div ui-view="ng-admin"></div>
        <script src="node_modules/ng-admin/build/ng-admin.min.js" type="text/javascript"></script>
        <script src="js/app.js"></script>
    </body>
</html>

Le corps de la page est constitué d’une simple balise <div ui-view=”ng-admin”></div> et le <body> fait référence à l’application angularJS sous-jacente grâce à l’attribut ng-app=”myApp”[4]

Rajouter un dossier « js » et un fichier nommé app.js (dont il est fait référence dans la page index.php). Le script va créer un module angularJS nommé « myApp » et qui intégrera la bibliothèque [‘ng-admin’], la suite permet de configurer l’application. La documentation détaillée au format pdf de ng-admin est accessible ici : https://www.gitbook.com/book/marmelab/ng-admin/details

Code de /js/app.js

// declare a new module called 'myApp', and make it require the `ng-admin` module as a dependency
var myApp = angular.module('myApp', ['ng-admin']);
// declare a function to run when the module bootstraps (during the 'config' phase)
myApp.config(['NgAdminConfigurationProvider', function (nga) {
        // create an admin application
        var admin = nga.application('Mes produits')
                .baseApiUrl('/api/'); // main API endpoint;

        /************************************
         *  entité produts
         ************************************/
        var produits = nga.entity('products');
        var categories= nga.entity('categories');
        categories.listView();
        // tableau = listview
        produits.listView()
                .title('les produits')
                .fields([
                    nga.field('id'),
                    nga.field('name').label('nom'),
                    nga.field('description'),
                    nga.field('price').label('prix')
                  ]) ;
        admin.addEntity(produits);
        admin.addEntity(categories);
        nga.configure(admin);
    }]);

L’application fonctionne,

Reste à intégrer dasn l’API les fonctions d’ajout, de mise à jour et d’effacement des produits.

code complet

/api /index.php

<?php

use \Psr\Http\Message\ServerRequestInterface as Request;
use \Psr\Http\Message\ResponseInterface as Response;

require '../vendor/autoload.php';

$config = [
    'settings' => [
        'displayErrorDetails' => true,

       
    ],
];
$app = new \Slim\App($config);
$container = $app->getContainer();
$container['db'] = function () {
    $dsn = 'mysql:host=localhost;dbname=apidb;charset=utf8';
    $usr = 'root';
    $pwd = '';
    $pdo = new \Slim\PDO\Database($dsn, $usr, $pwd);
    return $pdo;
};

$app->get('/{table}', function (Request $request, Response $response) {
    $table = $request->getAttribute('table');
    // SELECT * FROM users WHERE id = ?
    $selectStatement = $this->db->select()
            ->from($table);
    $stmt = $selectStatement->execute();
    $data = $stmt->fetchAll();
    return $response->withJson($data);
});

$app->get('/{table}/{id}', function (Request $request, Response $response) {
    $table = $request->getAttribute('table');
    $id = $request->getAttribute('id');
    // SELECT * FROM users WHERE id = ?
    $selectStatement = $this->db->select()->from($table)->where("id","=",$id);
    $stmt = $selectStatement->execute();
    $data = $stmt->fetch();
    return $response->withJson($data);
});

$app->post('/{table}', function (Request $request, Response $response) {
    $data=$request->getParsedBody();
    $table = $request->getAttribute('table');
    $keys= array_keys($data);
    $values=array_values($data);
    $insertStatement= $this->db->insert($keys)
            ->into($table)
            ->values($values);
    $stmt = $insertStatement->execute();
    $response->withJson($stmt);  
    
});

$app->put('/{table}/{id}', function (Request $request, Response $response) {
    $table = $request->getAttribute('table');
    $id = $request->getAttribute('id');
    $data=$request->getParsedBody();
    $updateStatement = $this->db->update($data)
            ->table($table)
            ->where('id',"=",$id);
        $stmt = $updateStatement->execute();
    $response->withJson($stmt);

});
$app->delete('/{table}/{id}', function (Request $request, Response $response) {
    $table = $request->getAttribute('table');
    $id = $request->getAttribute('id');
    $deleteStatement = $this->db->delete()->from($table)->where('id', '=', $id);
    $stmt = $deleteStatement->execute();
    $response->withJson($stmt);
});

$app->run();

 

/js/app.js

// declare a new module called 'myApp', and make it require the `ng-admin` module as a dependency
var myApp = angular.module('myApp', ['ng-admin']);
// declare a function to run when the module bootstraps (during the 'config' phase)
myApp.config(['NgAdminConfigurationProvider', function (nga) {
        // create an admin application
        var admin = nga.application('Mes produits')
                .baseApiUrl('/api/'); // main API endpoint;

        /************************************
         *  entité produts
         ************************************/
        var produits = nga.entity('products');
        var categories= nga.entity('categories');
        categories.listView();
        // tableau = listview
        produits.listView()
                .title('les produits')
                .fields([
                    nga.field('id'),
                    nga.field('name').label('nom'),
                    nga.field('description'),
                    nga.field('price').label('prix'),
                    nga.field('category_id','reference')
                            .targetEntity(categories)
                            .targetField(nga.field('name'))
                            .label('catégorie')
                ])
                .listActions(['edit']);
        produits.creationView()
                .title('Ajout d\'un produit')
                .fields(produits.listView().fields());
        
        produits.editionView()
                .fields(produits.creationView().fields());
        admin.addEntity(produits);
        admin.addEntity(categories);
        nga.configure(admin);
    }]);

 

  1. https://marmelab.com/fr/blog
  2. https://openclassrooms.com/courses/utilisez-des-api-rest-dans-vos-projets-web/pourquoi-rest
  3. https://www.grafikart.fr/tutoriels/php/slim-framework-831
  4. https://github.com/FaaPz/Slim-PDO
  5. Voir formation angularJS : https://www.grafikart.fr/formations/angularjs
    ou le livre « AngularJS » editions ENI ISBN 978-2-7460-9334-8

PHP mySQL

L’objectif est ici d’afficher dans une page HTML des données issues d’une base de données mySQL. La page web va emettre des requêtes AJAX vers une page PHP. Cette dernière se chargera d’interroger la base et de fournir en réponse un fichier JSON que la page HTML pourra traiter et afficher les résultats

La première vidéo présente l’installation de la base de donnée  (elle est téléchargeable ici ). Ensuite on voit comment utiliser phpmyadmin afin de faire une requête avec des tables liées. Enfin, elle aborde la construction du script PHP, permettant d’interroger la base et de fournir un fichier JSON en réponse à une requête de type GET.

La seconde vidéo présente comment utiliser jQuery pour émettre une requête AJAX afin de récupérer un jeu de données. Puis comment insérer ces données dans un tableau.

La troisième vidéo montre comment peupler une liste déroulante à partir de la base de données, puis d’afficher les détails  de l’élément sélectionné. (Master/Detail)

Pilotage d’une LED RVB par la liaison Série

L’objectif est ici de faire interagir une carte Arduino et une application C#. Les échanges entre l’application et la carte Arduino s’effectuent via la liaison série. Le programme C# permet de sélectionner et d’ouvrir le port série de la carte Arduino. Ensuite le déplacement des curseurs de l’application envoie des messages sur la liaison série. Messages qui sont interprétés par la carte Arduino afin de commander l’intensité lumineuse l’une Led RVB.

câblage

La plus grande broche de la LED correspond à la cathode à relier à la masse

De gauche à droite

  1. Anode Bleu (+)
  2. Anode Vert (+)
  3. Cathode commune (-)
  4. Anode Rouge (+)
1234

Programme Arduino

Le programme consiste à lire les données reçues sur la liaison série, d’en extraire les données concernant la commande des leds. Le pilotage des leds à proprement parlé s’effectue à l’aide des instructions analogWrite.

Le programme est le suivant :

#define ROUGE 3
#define GND 4
#define VERT 5
#define BLEU 6
void setup() {
  // put your setup code here, to run once:
  pinMode(GND, OUTPUT);
  digitalWrite(GND, LOW);
  Serial.begin(115200);

}

void loop() {
  if (Serial.available() > 0)
  {
    byte valRouge = Serial.parseInt();
    byte valVert = Serial.parseInt();
    byte valBleu = Serial.parseInt();
    while(Serial.available() > 0) Serial.read();
    analogWrite(ROUGE, valRouge);
    analogWrite(VERT, valVert);
    analogWrite(BLEU, valBleu);
  }

}

 

programme C#

l’application ressemble à ceci :

Le code final est le suivant :

using System;
using System.Windows.Forms;
using System.IO.Ports;

namespace pilotage_led_RVB
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            if (serialPort1.IsOpen)
            {
                button1.Text = "Connexion";
                serialPort1.Close();
                trackBar1.Enabled = false;
                trackBar2.Enabled = false;
                trackBar3.Enabled = false;
            }
            else {
                button1.Text = "Déconnexion";
                serialPort1.PortName = comboBox1.SelectedItem.ToString();
                serialPort1.Open();
                trackBar1.Enabled = true;
                trackBar2.Enabled = true;
                trackBar3.Enabled = true;
            }
            
        }

        private void trackBar1_Scroll(object sender, EventArgs e)
        {
            serialPort1.WriteLine(trackBar1.Value + "/" + trackBar2.Value + "/" + trackBar3.Value);
        }

        private void trackBar2_Scroll(object sender, EventArgs e)
        {
            serialPort1.WriteLine(trackBar1.Value + "/" + trackBar2.Value + "/" + trackBar3.Value);
        }

        private void trackBar3_Scroll(object sender, EventArgs e)
        {
            serialPort1.WriteLine(trackBar1.Value + "/" + trackBar2.Value + "/" + trackBar3.Value);
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            String[] ports = SerialPort.GetPortNames();
            foreach (var port in ports)
            {
                comboBox1.Items.Add(port);
            }
        }
    }
}

 

Variables

Déclaration des variables dans arduino

variables globales, locales, static

Variables globales

Ce sont des variables déclarées au début du programme, en dehors de toute fonction. Ces variables ont une portée globale, c’est à dire que chaque fonction constituant le programme peut les utiliser, les manipuler.

Avantages :

  • On déclare les variables une fois pour toute, on n’a plus à y revenir…
  • Comme les variables sont accessibles à toutes les fonctions, on peut faire l’économie de passage de paramètres.

Inconvénients :

  • Les variables mobilisent l’espace mémoire durant toute la vie du programme, on peut ainsi saturer la mémoire vive avec des variables qui n’ont servi qu’une fois (à l’initialisation par exemple)
  • Si on utilise les mêmes variables dans diverses fonctions, il se peut qu’une fonction modifie la valeur d’une manière qui n’était pas attendue par une autre fonction qui utilisait la même variable, c’est un source importante de bugs…

On évite donc le plus possible d’utiliser les variables globales et en particulier pour des compteurs de boucles.

Variables locales

Ce sont des variables déclarées au sein d’une fonction. Ces variables ont une portée locale, c’est-à-dire qu’une fois sortie de la fonction elles sont détruites libérant ainsi de l’espace mémoire. Ce sont les variables internes à une fonction, nécessaire à son fonctionnement.

Avantage :

  • Variables uniquement utilisables par la fonction à laquelle elles appartiennent, les autres fonctions ne peuvent pas interférer.
  • Des fonctions diverses peuvent avoir des variables portant le même nom sans risque d’interférence.

Inconvénients :

  • On doit utiliser un passage paramètre pour renvoyer une variable de ce genre à une autre fonction.
  • Les variables sont détruites à la sortie de la fonction, il n’y a pas de mémorisation de la dernière valeur de la variable.

Variables statiques

Ce sont des variables déclarées au sein d’une fonction, mais qui ne sont pas détruites à la sortie de cette dernière, de cette manière au prochain rappel de la fonction cette variable n’est pas recrée, mais elle est toujours là avec la dernière valeur obtenue. Ces variables associent le coté permanent des variables globales et le fait que cette variable est isolée des autres fonctions.

Variables volatiles

Ce sont des variables globales amenées à être modifiées par un processus extérieur au programme principal. Le mot volatile est une indication donnée au compilateur de ne pas simplifier son code et supprimer cette variable même si elle semble inutile.

Par exemple Routine d’interruption
Les routines d’interruptions utilisent souvent des variables testées dans le programme principal. Par exemple, l’interruption d’un port série en réception : le programme d’interruption stocke et teste les caractères reçus, signalant la fin du message par une variable globale au programme principal :

int End_Message = FALSE; // variable globale
void main ( void )
{
    ....
        while (! End_Message) 
/* mal réglé le compilateur va supprimer ce test car pour lui 
!End_Message= !FALSE= TRUE et comme While(TRUE) est toujours vrai le compilateur simplifie en supprimant ce test « inutile », or End_Message est modifié dans sous programme d’interruption ce test ne doit donc pas être simplifié */
        {
        .....
        }
}
interrupt void Isr_Receive ( void )
        {
            .....
                if ( RX_CHAR == ETX ) { End_Message = TRUE;}
                .....
                    .....
        }

 

Si l’optimisation du compilateur est dé-validée, ce programme fonctionne correctement. Par contre n’importe quel compilateur “décent” avec l’optimisation validée, va supprimer le code après la boucle while dans le main(), la condition ( ! End_Message) étant toujours vraie pour lui : en effet le compilateur n’a pas idée que la variable End_Message est modifiée par la routine d’interruption !
Dans ce cas-là et pour que tout rentre dans l’ordre il suffit de déclarer la variable End_Message avec l’attribut volatile.

bibliothèque Ethernet et Udp

Fonctions de bases nécessaires à l’utilisation du protocole UDP

L’utilisation de la carte réseau avec Arduino est subordonnée à l’utilisation de la bibliothèque Ethernet. Nous passerons en revue les fonctions nécessaire à l’utilisation du protocole UDP.

Bibliothèques nécessaires :

La communication entre la carte Ethernet et l’Arduino s’appuie sur la liaison série synchrone (SPI) , suivant la version de Arduino il peut être nécessaire d’inclure la bibliothèque SPI.h. Les autres fichiers d’entête à inclure au projet sont Ethernet.h et Udp.h

Le début de notre programme contiendra donc au minimum les entêtes suivants :

#include <SPI.h>         
#include <Ethernet.h>
#include <EthernetUdp.h>

 Bibliothèque ethernet

Un objet « Ethernet » est auto-instancié lors de l’inclusion de la bibliothèque Ethernet. Pour utiliser le protocole UDP, une seule fonction de la bibliothèque Ethernet est nécessaire :

Ethernet.begin(mac,IP,gateway,subnet);

Cette fonction initialise la bibliothèque et les paramètres du réseau. Les paramètres sont les suivants :

  • mac: l’adresse MAC (Media Access Control) pour le composant (tableau de 6 octets) : c’est l’adresse Ethernet matérielle de votre module. Pour de nombreux composants Ethernet, cette adresse est prédéfinie par le fabricant. Pour le module Ethernet Arduino, vous devez choisir votre propre adresse MAC.
  • ip: l’adresse IP du composant (tableau de 4 octets).
  • gateway: l’adresse IP de la passerelle du réseau (tableau de 4 octets). Optionnel: la valeur par défaut est l’adresse IP de la carte avec le dernier octet à 1.
  • subnet: le masque du sous-réseau du réseau (tableau de 4 octets). Optionnel : la valeur par défaut est 255.255.255.0.

pour plus d’informations et les autres fonctions exposées, voir la documentation en français ici : http://www.mon-club-elec.fr/pmwiki_reference_arduino/pmwiki.php?n=Main.BibliothèqueEthernet#toc2

bibliothèque UDP

Un objet Udp s’instancie de la manière suivante :

EthernetUDP Udp;

On peut alors utiliser les méthodes suivantes :

  • Udp.begin(localPort);cette fonction initialise le protocole UDP et démarre l’écoute sur le port désigné
  • Udp.stop(); cette fonction stoppe l’écoute du port. Utile si le traitement d’un paquet est long. Cela évite le débordement du buffer d’entrée de la carte Ethernet. (cette fonction a été rajoutée dans la bibliothèque Eiffel)
  • Udp.parsePacket(); cette fonction retourne la taille d’un paquet en octets ou 0 si aucun paquet n’est disponible
  • Udp.available(); cette fonction permet de savoir s’il y a des données dans le buffer de reception. Elle retourne un entier (int) qui vaut 0 si le buffer est vide et le nombre d’octets disponible s autrement.
  • Udp.read(unsigned char* buffer, size_t len); cette fonction permet de lire le paquet reçu et de le placer dans buffer (dont la longueur maximum est spcécifiée par buflen).
    Avant d’appeler cette fonction, il faut s’assurer que le buffer de reception n’est pas vide , il faut donc faire un test avec la fonction Udp.parsePacket()
    La fonction renvoie un entier (int) qui correspond au nombre d’octets lus. Si le nombre d’octets contenus dans le paquet est supérieur à la longueur du buffer, il y a troncature, le nombre renvoyé est alors négatif.
  • Udp.beginPacket(IPAddress ip, uint16_t port); permet d’initier l’envoi d’un paquet vers l’hôte distant dont on spécifie l’adresse IP et le port. La fonction retourne 1 en cas de succès et 0 en cas d’échec.
  • Udp.beginPacket(const char *host, uint16_t port); autre version en passant en argument le nom d’hôte au lieu de l’adresse IP.
  • Udp.endPacket(); ferme le paquet et l’envoie à l’hôte distant.
  • Udp.write(byte data); écrit un octet unique dans le paquet à envoyer.
  • Udp.write(const byte *buffer, size_t taille); Envoie « taille » octets du buffer vers le paquet.

exemple

UDPSendReceiveString.ino

#include <SPI.h>         // needed for Arduino versions later than 0018
#include <Ethernet.h>
#include <EthernetUdp.h>         // UDP library from: bjoern@cs.stanford.edu 12/30/2008


// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {
    0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
};
IPAddress ip(192, 168, 1, 177);

unsigned int localPort = 8888;      // local port to listen on

// buffers for receiving and sending data
char packetBuffer[UDP_TX_PACKET_MAX_SIZE];  //buffer to hold incoming packet,
char  ReplyBuffer[] = "acknowledged";       // a string to send back

// An EthernetUDP instance to let us send and receive packets over UDP
EthernetUDP Udp;

void setup() {
    // start the Ethernet and UDP:
    Ethernet.begin(mac, ip);
    Udp.begin(localPort);

    Serial.begin(9600);
}

void loop() {
    // if there's data available, read a packet
    int packetSize = Udp.parsePacket();
    if (packetSize) {
        Serial.print("Received packet of size ");
        Serial.println(packetSize);
        Serial.print("From ");
        IPAddress remote = Udp.remoteIP();
        for (int i = 0; i < 4; i++) {
            Serial.print(remote[i], DEC);
            if (i < 3) {
                Serial.print(".");
            }
        }
        Serial.print(", port ");
        Serial.println(Udp.remotePort());

        // read the packet into packetBufffer
        Udp.read(packetBuffer, UDP_TX_PACKET_MAX_SIZE);
        Serial.println("Contents:");
        Serial.println(packetBuffer);

        // send a reply to the IP address and port that sent us the packet we received
        Udp.beginPacket(Udp.remoteIP(), Udp.remotePort());
        Udp.write(ReplyBuffer);
        Udp.endPacket();
    }
    delay(10);
}

 

 

Bibliothèques et débogage

bibliothèques

Définition

Une bibliothèque permet de mettre à disposition du programmeur des fonctions pré-écrites. On parle de fonctions haut-niveau. Par exemple dans la bibliothèque math.h (incluse par défaut dans tout programme Arduino) on trouvera des fonctions telles que sin() et cos() qui calculent le sinus ou le cosinus d’un angle exprimé en radiant.

La bibliothèque peut aussi être un pilote (driver) pour un composant que l’on veut interfacer avec la carte Arduino. Par exemple la bibliothèque LiquidCrystal pilote automatiquement un afficheur cristaux liquides de 2 lignes 16 caractères.

L’intérêt d’une telle bibliothèque est qu’on n’a pas à connaitre la manière dont l’afficheur est commandé pour l’utiliser. C’est la bibliothèque qui va prendre en charge la génération des signaux électriques (horloge, données..) pour piloter l’afficheur en fonction de la nature de la fonction.

Utilisation d’une bibliothèque dans un programme.

 Dans l’interface de développement (IDE) Arduino c’est on ne peut plus simple : depuis le menu « Croquis » sélectionner « Inclure une bibliothèque » puis la sélectionner dans la liste déroulante.

On voit alors apparaitre une directive de type « #include… » dans le programme

Dans l’exemple ci-dessus, on a importé  la bibliothèque LiquidCrystal.

Il faut souvent lire la documentation de la bibliothèque pour connaitre la manière de l’utiliser

Par exemple la bibliothèque LiquidCrystal expose les méthodes (ou fonctions) suivantes :

Fonctions d’initialisation

Fonctions de gestion de l’écran

Fonctions de positionnement du curseur

Fonctions modifiant l’aspect du curseur

 

Fonctions d’écriture

Fonctions de contrôle du mode d’affichage

Fonction de création de caractère personnalisé

createChar()

En général il faut initialiser la bibliothèque en instanciant un objet c’est-à-dire en créant une variable du type correspondant à l’objet.

Explication : dans le cas d’une variable simple on la crée en écrivant :

int valeur = 3;

On instancie un objet simple  de type Int (entier) auquel on affecte la valeur 3.
Pour un objet plus complexe on procède de manière analogue :

LiquidCrystal lcd(12, 11, 5, 4, 3, 2);

On créer ici un objet « lcd » de type LiquidCrystal, de plus on passe en paramètres les numéros de broches de l’Arduino permettant la connexion avec l’afficheur (voir la documentation de la bibliothèque)

Remarque : la création d’objet (que ce soit de simples variables ou des objets complexes) revient à faire des réservations d’espace mémoire et fournir des valeurs initiales.

L’appel des fonctions liées à l’objet se fait en indiquant le nom de l’objet suivi d’un « . » (point) suivi lui-même du nom de la fonction.

exemple

lcd.begin(16, 2); // initialise l’afficheur: 16 caractères, 2 lignes
lcd.print("hello, world!"); // affiche un message.

En général une bibliothèque est fournie avec des exemples d’utilisation. On y accède depuis le menu « Fichiers » puis « Exemples » enfin on choisit l’exemple dans la bibliothèque qui nous intéresse.

Installation d’une bibliothèque

Pour installer une bibliothèque il faut fermer l’IDE Arduino.

L’installation d’une bibliothèque est simple : il faut la copier dans le dossier « Libraries » contenu dans le dossier Arduino de l’utilisateur (« chemin de l’utilisateur »/documents/Arduino). Les bibliothèques « natives » c’est dire fournies d’office avec Arduino sont localisées dans « dossier d’installation d’Arduino »/libraries. Les bibliothèques natives contiennent par exemple Ethernt, Firmata,Keyboard, LiquidCrystal, Stepper, Wifi…

En général le dossier de la bibliothèque contient les éléments suivants :

  • Les fichiers codes de la bibliothèque (LiquidCrystal.h et LiquidCristal.cpp)
  • Un fichier texte keywords.txt permetaant la coloration syntaxique
  • Un dossier « examples » contenant lui-même des sous dossiers nommés avec le nom des exemples.

Le nom des exemples doit être le même que le dossier qui les contient . Par exemple le dossier  « HelloWorld » contient « HelloWorld.ino »

débogage

L’IDE Arduino ne possède pas d’outils tels qu’exécution en mode pas à pas, mode trace, visualisation des registres…

Il faut user de stratagèmes pour déboguer un programme. Le plus simple est d’utiliser le moniteur série et d’y faire afficher les valeurs de variables, les résultats de calculs…

Pour utiliser le moniteur il faut initialiser la liaison série. Puis à chaque fois qu’on désire afficher une valeur, il faut appeler la fonction « print » ou « println »

/* Blink without Delay*/
// set pin numbers:
const int ledPin =  13;      // the number of the LED pin
int ledState = LOW;             // ledState used to set the LED
long previousMillis = 0;        // will store last time LED was updated
long interval = 1000;           // interval at which to blink (milliseconds)
void setup() { 
    pinMode(ledPin, OUTPUT);       // set the digital pin as output:
    // -------------------- débogage ----------------------------//
    //  initialisation de la liaison série 
    // la ligne suivante pourra être commentée pour le passage en production
    Serial.begin(9600);
    //-------------------- fin débogage -------------------------//
}
void loop()
{
    unsigned long currentMillis = millis();
    if(currentMillis - previousMillis > interval) 
    {   
        // -------------------- débogage ----------------------------//
        // affichage de la valeur de CurrentMillis
        // la ligne suivante pourra être commentée pour le passage en production
        Serial.print("time: "); Serial.println(currentMillis,DEC); 
        //-------------------- fin débogage -------------------------//
        previousMillis = currentMillis;    // save the last time you blinked the LED 
        if (ledState == LOW)// if the LED is off turn it on and vice-versa
            ledState = HIGH;
        else
            ledState = LOW;

        // -------------------- débogage ----------------------------//
        // affichage de la valeur de ledState
        // la ligne suivante pourra être commentée pour le passage en production
        Serial.print("led state: "); Serial.println(ledState);  
        //-------------------- fin débogage -------------------------//   
        digitalWrite(ledPin, ledState); // set the LED with the ledState of the variable
    }
}

 

La fonction Serial.begin(9600); initialise la liaison série à un débit de 9600 bauds

Les fonctions Serial.print et Serial.println sont deux fonctions similaires : elles affichent des données sur la liaison série. À la différence de print, println affiche les données sur le port série suivi d’un caractère de “retour de chariot” (ASCII 13, or ‘\r’) et un caractère de “nouvelle ligne” (ASCII 10, or ‘\n’).

Serial.print(val)
Serial.print(val, format)

 

Serial.print(78); // affiche "78"
Serial.print(1.23456); // affiche "1.23"
Serial.print(byte(78)); // affiche "N" (dont la valeur ASCII est 78)
Serial.print('N'); // affiche "N"
Serial.print("Hello world."); // affiche "Hello world." 

Un second paramètre optionnel (format) spécifie :

  • pour les nombres entiers, la base à utiliser. Les valeurs autorisées sont BYTE, BIN (binaire, ou base 2), OCT (octal, ou base 8), DEC (décimal, ou base 10), HEX (hexadécimal, ou base 16),
  • pour les nombres à virgules (float), le paramètre précise le nombre de décimales après la virgule à utiliser.
Serial.print(78, BYTE); // affiche "N"
Serial.print(78, BIN) ; // affiche  "1001110"
Serial.print(78, OCT); // affiche "116"
Serial.print(78, DEC); // affiche "78"
Serial.print(78, HEX); // affiche "4E"
Serial.println(1.23456, 0); // affiche "1"
Serial.println(1.23456, 2); // affiche "1.23"

 

Lorsqu’on compile et qu’on lance le progamme, il faut appuyer sur l’icône « Serial Monitor »  dans l’IDE Arduino on voit alors une fenêtre qui s’ouvre et qui affiche les informations demandées dans le programme

À noter que le débit du moniteur doit être ajusté avec le débit de la liaison série ( 9600 baud)

En visualisant les variables et en plaçant des espions aux bons endroits du programme on se sort de quasiment toutes les situations.

Freeboard et Node-Red

Freeboard est un projet de tableau de bord gratuit et open source avec des abonnements hébergés optionnels, facile à intégrer à diverses sources de données. Ce projet a été développé par Bug Labs, les créateurs d’un puissant service appelé dweet , un service de messagerie conçu pour l’Internet des Objets. Il existe un nœud Node-Red qui permet de mettre en relation un flux et le tableau de bord freeboard. Nous allons voir ici comment l’installer et l’utiliser.

IPX800-V4

IPX800 est un automate programmable orienté domotique. Il possède 4 entrées analogiques, 8 entrées logiques et 8 sorties sur relais. Le paramétrage et la programmation se font via une interface WEB. Un système de bus permet de connecter divers périphériques et on peut accéder aux données via une API. La plateforme est donc polyvalente et ouverte, ce qui permet de l’inclure à de nombreux projets.

Présentation de l’IPX800-V4

Programmation d’un scénario : thermostat d’ambiance

Contrôle d’accès par lecture de plaques d’immatriculation (ALPR)

Ce système permet d’autoriser l’accès à un parking par lecture des plaques d’immatriculation. Il s’appuie sur une caméra IP associée à une carte Raspberry Pi et le logiciel de reconnaissance de plaques openALPR. Une base de donnée mongoDB contient la liste des plaques autorisées. Le middleware est assuré par un “flow” node-red. (liaison openALPR / mongoDB, déclenchement de l’ordre d’ouverture et IHM pour la gestion de la base)

Diagramme de cas d’utilisation

La lecture des plaques d’immatriculation va s’intégrer dans le cas d’utilisation « Contrôle d’accès ». L’ajout et la mise à jour de nouveaux véhicules sera lié au cas d’utilisation « Mise à jour de la base données ». Le système autorise l’accès au parking aux véhicules dont le numéro de plaque d’immatriculation est inscrit dans la base de données.

Constitution du système

  • Une caméra IP, elle sera positionnée afin de capter la plaque d’immatriculation du véhicule lorsque ce dernier de présentera à l’entrée du parking.
  • Une barrière automatisée. Elle est fermée par défaut et s’ouvre si la plaque du véhicule est reconnue.
  • Un ordinateur qui contient la base de données des plaques autorisées, l’IHM web permettant la maintenance de la BDD, un logiciel de reconnaissance de plaques en relation avec la caméra IP et un interlogiciel (middleware) permettant de faire communiquer les différentes applications.

Topologie du système

Solution retenue

Matériels

  • Une carte Raspberry (2 ou 3) / 16GB raspbian JESSIE (nov 2016) -> serveur
  • Une carte Arduino avec le firmware Firmata Standard -> extension E/S
  • Une caméra IP. On doit pouvoir accéder à l’image via le web. Pour l’exemple nous utiliserons une petite caméra motorisée db power clone d’une caméra FOSCAM FI8908W[1]. Sur cette caméra, d’après la documentation[2], l’accès au flux s’effectue à l’URL : http://<IP_CAMERA>:<PORT_CAMERA>//videostream.cgi?user=admin&pwd=&resolution=32&rate=0
  • Une barrière automatique pilotée par un signal logique (« 1 » ouverture, « 0 » fermeture). La barrière gère elle-même la sécurité de passage.

Logiciels

  • openALPR pour Raspberry : logiciel open source de reconnaissance de plaques d’immatriculation.
  • MongoDB et mongoExpress : serveur de base de données et client web.
  • NODE-RED avec node-red-contrib-gpio, node-red-dashboard, node-red-contrib-mongoDB2, ObjectID et mongoDB2 : logiciel de programmation orienté flux, permettant l’interconnexion d’applications hétérogènes devant échanger des données.

Installation Logicielle.

Node-red

dans une console lancer node-red : node-red-start puis à l’aide d’un navigateur  accéder à http://<ip raspberry>:1880  . Si le noeud Johnny5 est visible, il n’y a rien à faire sinon voir Réinstallation de node-red avec Johnny5

OpenAlpr

voir openAlpr sur Raspberry Pi

Base de données mongoDB

voir installation de mongoDB et mongo-express

Mise en oeuvre.

Test de openALPR avec la caméra

Compléter le fichier /etc/openalpr/alprd.conf et indiquer le chemin d’accès au flux vidéo de la caméra IP

; This configuration file overrides the default values specified 
; in /usr/local/share/openalpr/config/alprd.defaults.conf
[daemon]

; country determines the training dataset used for recognizing plates. Valid values are us, eu
country = eu
pattern = fr

; text name identifier for this location
site_id = rpi01

; Declare each stream on a separate line
; each unique stream should be defined as stream = [url]
; adresse de la camera IP accessible par le web
stream = http://192.168.5.23:8080/videostream.cgi?user=admin&pwd=&resolution=32&rate=0

; topn is the number of possible plate character variations to report
topn = 5

; Determines whether images that contain plates should be stored to disk
store_plates = 0
store_plates_location = /home/pi/plateimages/

; upload address is the destination to POST to
upload_data = 1
upload_address = http://localhost:1880/plate/

Lancer la commande alprd -fet placer une image comportant une plaque d’immatriculation devant la caméra

Observer la console :

pi@Raspberry Pipi:~ $ alprd -f
INFO - Running OpenALPR daemon in the foreground.
INFO - Using: /etc/openalpr/alprd.conf for daemon configuration
Missing config value for company_id
Missing config value for pattern
INFO - Using: /home/pi/plateimages/ for storing valid plate images
INFO - country: fr -- config file: /etc/openalpr/openalpr.conf
INFO - pattern:
INFO - Stream 1: http://192.168.5.23:8080/videostream.cgi?user=admin&pwd=&resolution=32&rate=0
INFO - Starting camera 1
INFO - Video stream connecting...
INFO - Video stream connected
DEBUG - Writing plate AV865XG (rpi01-cam1-1483036354101) to queue.

 

OpenALPR et node-red : lecture et affichage d’une plaque.

Node-red permet d’interconnecter des applications hétérogènes devant échanger des informations. On parle d’échange de messages. Aplrd permet d’envoyer une requête POST à un serveur web lors de la lecture d’une plaque. Nous allons donc créer un flux qui intercepte cette requête POST, va en extraire la donnée et publier cette dernière dans une fenêtre de débogage.

Vérification du fichier fichier /etc/openalpr/alprd.conf

Vérifier que les 3 dernières lignes du fichier alprd.cong correspondent à :

; upload address is the destination to POST to
upload_data = 1 ; « 1 » = envoi des données
upload_address = http://localhost:1880/plate/ ; adresse du serveur web où sont envoyées les requêtes POST

Ce qui impliquera que les données seront postées à l’adresse http://localhost:1880/plate

Flux node-red

Flux composé d’un node « http in », « http response » et « debug »

Lors de la reconnaissance d’une plaque on obtient un objet msg.payload en sortie du node « http in » qui une fois remis en forme ressemble à ceci :

{
    "version": 2,
    "data_type": "alpr_results",
    "epoch_time": 1483090959429,
    "img_width": 640,
    "img_height": 480,
    "processing_time_ms": 395.173157,
    "regions_of_interest": [],
    "results": [
        {
            "plate": "AV865XG",
            "confidence": 90.980667,
            "matches_template": 0,
            "plate_index": 0,
            "region": "",
            "region_confidence": 0,
            "processing_time_ms": 171.828781,
            "requested_topn": 5,
            "coordinates": [
                {…

On peut observer qu’il s’agit d’un objet JSON dont la propriété « results » est un tableau contenant les plaques reconnues avec leur score « confidence ».

On peut donc interroger l’objet msg.payload afin d’en extraire le numéro de plaque. Pour cela on introduit un script

 

On peut alors voir le numéro de la plaque apparaitre dans la fenêtre de débogage

Utilisation de mongoDB et ALPR dans node-red

L’objectif est de comparer la plaque lue par alprd avec une plaque contenue dans la base de données.

Ajout du node mongoDB2 à la palette de nodes :

Sélectionner le Menu de Node-red -> Manage palette

Sélectionner l’onglet « Install »

Dans l’espace de recherche taper « mongo »

On voit alors apparaitre les nodes disponibles. Cliquer sur le bouton « install » du node « node-red-contrib-mongoDB2 »

Le nœud s’installe est devient alors disponible dans la palette des nodes.

Installer aussi le node « node-red-contrib-objectid », il permet de gérer les propriétés « _id » des documents.

Paramétrage du nœud mongoDB2 et test de connexion

Faire glisser un node mongoDB2 dans l’espace de travail et l’éditer.

Sélectionner « External service » puis cliquer sur le petit crayon afin d’ajouter une connexion au serveur mongoDB Ajouter un serveur, l’URI est normalement : mongodb://localhost:27017/db
Une fois le serveur paramétré, sélectionner « db » dans l’option « Server », compléter l’option « Collection » avec le nom de la collection « LicencePlate » enfin dans « Operation » sélectionner « findOne » et cliquer sur « Done » Ajouter un nœud « Inject » dans l’espace de travail et le paramétrer de la manière suivante :

Compléter le flow de la manière suivante : ajouter un node « json » et un node « debug ». Lier l’ensemble.

Quand on clique sur le bouton du nœud inject, on voit apparaitre le document au format JSON dans la fenêtre de debug

code du Flow (à importer via le clipboard)
[{"id":"fcc8de73.b9a8e","type":"mongodb2 in","z":"de8a40ec.19323","service":"_ext_","configNode":"1d02b15c.4cf227","name":"","collection":"LicencePlate","operation":"findOne","x":1234.7665710449219,"y":157.85000610351562,"wires":[["c37c79dd.bbd448"]]},{"id":"5934a9db.1c3ee8","type":"json","z":"de8a40ec.19323","name":"","x":996.7665710449219,"y":158.01666259765625,"wires":[["fcc8de73.b9a8e"]]},{"id":"c37c79dd.bbd448","type":"debug","z":"de8a40ec.19323","name":"","active":true,"console":"false","complete":"false","x":1474.7666015625,"y":157.01666259765625,"wires":[]},{"id":"fea87bf7.46af38","type":"inject","z":"de8a40ec.19323","name":"","topic":"","payload":"{\"nom\":\"Hollande\"}","payloadType":"str","repeat":"","crontab":"","once":false,"x":774.7666320800781,"y":158.38333129882812,"wires":[["5934a9db.1c3ee8"]]},{"id":"1d02b15c.4cf227","type":"mongodb2","z":"","uri":"mongodb://localhost:27017/db","name":"db","options":"","parallelism":"-1"}]

 

Nous venons d’effectuer une requête dans la base mongoDB

Reconnaissance d’une plaque d’immatriculation.

En associant la gestion de la requête POST fournit par le logiciel alprd et une requête dans la base de données, on peut déterminer si l’accès est autorisé.

code du Flow (à importer via le clipboard)
[{"id":"cd7d103b.308a78","type":"mongoDB2 in","z":"1ee78c77.4f0c84","service":"_ext_","configNode":"d3816939.e303e8","name":"","collection":"LicencePlate","operation":"count","x":1201,"y":144,"wires":[["ae24a545.fb9ea","3fc0b1.16e58f5"]]},{"id":"ae24a545.fb9ea","type":"debug","z":"1ee78c77.4f0c84","name":"","active":true,"console":"false","complete":"false","x":1477.7666015625,"y":66.71665954589844,"wires":[]},{"id":"d96d3dcc.a4c3a8","type":"http in","z":"1ee78c77.4f0c84","name":"","url":"/plate","method":"post","swaggerDoc":"","x":697.7666015625,"y":147.18333435058594,"wires":[["e36dbbe7.4063c8"]]},{"id":"e36dbbe7.4063c8","type":"function","z":"1ee78c77.4f0c84","name":"extraction num plaque","func":"var plaque={}; //objet vide\nplaque.immatriculation=msg.payload.results[0].plate;\nmsg.payload=plaque;\nreturn msg;","outputs":1,"noerr":0,"x":939.7666015625,"y":145.9499969482422,"wires":[["cd7d103b.308a78","b918e1ce.d2721"]]},{"id":"b918e1ce.d2721","type":"debug","z":"1ee78c77.4f0c84","name":"","active":true,"console":"false","complete":"false","x":1184.7666015625,"y":61.716644287109375,"wires":[]},{"id":"3fc0b1.16e58f5","type":"http response","z":"1ee78c77.4f0c84","name":"","x":1457.7666015625,"y":142.4166717529297,"wires":[]},{"id":"d3816939.e303e8","type":"mongoDB2","z":"","uri":"mongoDB://localhost:27017/db","name":"db","options":"","parallelism":"-1"}]

 

Le script dans le node function (extraction num plaque) est le suivant :

var plaque={}; 
plaque.immatriculation=msg.payload.results[0].plate;
msg.payload=plaque;
return msg;

Le message de sortie sera donc de la forme : { "immatriculation": "AV865XG" }. Ce message sert d’argument d’entrée à la requête « count » du node mongoDB2. Autrement dit le node mongoDB2 va compter les documents qui contiennent un champ « immatriculation » ayant pour valeur « AV865XG ». Le message de sortie du node mongoDB sera un nombre. Si ce dernier vaut 0, c’est que le numéro de plaque n’est pas enregistré dans la base. Reste à commander l’ouverture de la barrière en fonction de cette information.

Pour cela nous allons utiliser une carte Arduino qui sera pilotée par la carte Raspberry.

Compléter le flow de la manière suivante en ajoutant les nœuds « switch », « trigger » et « gpio ».

code du Flow (à importer via le clipboard)
[{"id":"7ec1525b.cd9fac","type":"trigger","z":"1ee78c77.4f0c84","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"2000","extend":false,"units":"ms","reset":"","name":"","x":1270.7666015625,"y":243.18331909179688,"wires":[["1a99c7a1.ed34b8"]]},{"id":"1a99c7a1.ed34b8","type":"gpio out","z":"1ee78c77.4f0c84","name":"arduino","state":"OUTPUT","pin":"13","i2cDelay":"0","i2cAddress":"","i2cRegister":"","outputs":0,"board":"4a53a7ab.eb3e7","x":1475.7666015625,"y":242.11666870117188,"wires":[]},{"id":"fd89d95c.482bb","type":"switch","z":"1ee78c77.4f0c84","name":"","property":"payload","propertyType":"msg","rules":[{"t":"gte","v":"1","vt":"num"}],"checkall":"true","outputs":1,"x":1043.7666015625,"y":243.76663208007812,"wires":[["7ec1525b.cd9fac"]]},{"id":"4a53a7ab.eb3e7","type":"nodebot","z":"","name":"","username":"","password":"","boardType":"firmata","serialportName":"/dev/ttyUSB0","connectionType":"local","mqttServer":"","socketServer":"","pubTopic":"","subTopic":"","tcpHost":"","tcpPort":"","sparkId":"","sparkToken":"","beanId":"","impId":"","meshbluServer":"https://meshblu.octoblu.com","uuid":"","token":"","sendUuid":""}]

 

Le switch sera paramétré de la manière suivante :

Le trigger :

Le nœud gpio quant à lui sera paramétré pour piloter une broche digital d’une carte Arduino. La carte Arduino sera programmée avec le programme Firmata : (Menu fichier > Exemples > Firmata > StandardFirmata ) puis connectée à la carte Raspberry Pi par un câble USB.

Editer le nœud gpio puis cliquer sur le crayon afin de définir la cible :
Cliquer sur la loupe afin de trouver la carte Arduino connectée à la carte Raspberry (dans l’exemple c’est /dev/tty/USB0, mais cela peut être autre chose…). Configurer le reste comme suit :
Compléter alors le nœud gpio comme suit :

Si la configuration est correcte la broche 13 (et la led qui y est rattachée) passe à l’état logique « 1 » pour une durée de 2 sec lorsqu’une plaque est reconnue. Reste à interconnecter l’ensemble à la vraie barrière…

Outil d’administration de la base de donnée

voir : Gestion de mongoDB à l’aide de jsGrid et node-red

code du Flow (à importer via le clipboard)

il est disponible ici : http://flows.nodered.org/flow/e32f2b942bce77ef6079c0642b93c036

Ce flow fabrique une interface homme machine qui permet de maintenir la base de données des utilisateurs autorisés à accéder au parking. Il s’appuie sur un template html et le plugin jsGrid (dépend de jQuery). Son fonctionnement est dit « RESTfull » c’est-à-dire que la grille utilise une requête ajax de type POST pour insérer des valeurs dans la base, une requête de type PUT pour effectuer la mise à jour et une requête DELETE pour effacer un document. Pour fonctionner ce flow a besoin du node « ObjectId », qu’il faut installer si ce n’est pas déjà fait.

capture

Le format des documents doit être :

{
    "_id": ObjectID("585a4732ac11400192a60b85"),
    "nom": "nameOfUser",
    "prenom": "FirstNameOfUser",
    "immatriculation": "123456",
    "heure": "13",
    "minute": "30"
}

La grille est accessible à l’adresse : http://<node-red>:<port>/plates

Le code du node template est le suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Licence Plate</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

    <script type="text/javascript">
        $(function () {
            var db = {{#payload}}{{{.}}}{{/payload}};
                $("#jsgrid").jsGrid({
                    width: "100%",
                    inserting: true,
                    editing: true,
                    sorting: true,
                    paging: true,

                    data: db,

                    fields: [
                        { title:"Nom", name: "nom", type: "text", width: 50 },
                        { title:"Prénom", name: "prenom", type: "text", width: 50 },
                        { title:"Plaque", name: "immatriculation", type: "text", width: 50 },
                        { title:"Heure", name: "heure", type:"number", width: 25},
                        { title:"Minute", align:"left",  name: "minute", type:"number" , width: 25},
                        { type: "control" }
                    ],
               
                    controller: {
                        insertItem: function(item) {
                            return $.ajax({
                                type: "POST",
                                url: "/insert",
                                data: item
                            });
                        },
                        updateItem: function(item) {
                            return $.ajax({
                                type: "PUT",
                                url: "/update",
                                data: item
                            });
                        },
                        deleteItem: function(item) {
                            return $.ajax({
                                type: "DELETE",
                                url: "/delete",
                                data: item
                            });
                        }
                    }   
                });
            });
    
  </script>
</head>
<body class="container">
    <section class="row">

        <div class="col-md-6"></div>
        <div class="col-md-6" id="jsgrid">
        </div>
    </section>
</body>
</html>

La ligne var db = {{#payload}}{{{.}}}{{/payload}};utilise la notation « mustache » c’est la notation qui permet de à la page web de récupérer les informations contenues dans le message d’entrée du node. Dans notre cas msg.payload est le résultat de la requête effectuée dans la base de données. Il s’agit d’un tableau d’objets JSON le format est le suivant :

[
    {
        "nom": "TestName",
        "prenom": "Toto",
        "immatriculation": "AV865XG",
        "_id": "58667499d93f5401a2b4d2d5"
    },
    {
        "_id": "586666b73a3b9e2011963257",
        "nom": "Hollande",
        "prenom": "Francois",
        "immatriculation": "HE123LY"
    }
]

Le moteur de template mustache va itérer le tableau et passer les objets qu’il contient au rendu de la page web

Lors du rendu de la page, le texte du template

…
        $(function () {
            var db = {{#payload}}{{{.}}}{{/payload}};
                $("#jsgrid").jsGrid({
                    width: "100%",
                    inserting: true,
…

est remplacé par

…
        $(function () {
            var db = [{"nom":"TestName","prenom":"Toto","immatriculation":"AV865XG","_id":"58667499d93f5401a2b4d2d5"},{"_id":"586666b73a3b9e2011963257","nom":"Hollande","prenom":"Francois","immatriculation":"HE123LY"}];
                $("#jsgrid").jsGrid({
                    width: "100%",
                    inserting: true,
…

{{{.}}}(Avec triple « mustache ») signifie que l’objet entier doit être passé de manière brute, c’est-à-dire sans être mise au format html

Avec une {{.}}(double mustache) le texte serait remplacé par

var db = [{&quot;nom&quot;:&quot;TestName&quot;,&quot;prenom&quot…

c’est-à-dire que les « ” » sont remplacés par leur code html « &quot ; » de ce fait la variable « db » n’est plus un tableau JSON au vu du script.

Voir https://github.com/janl/mustache.js/#non-empty-lists et https://github.com/janl/mustache.js/#variables pour plus d’informations.

  1. http://www.gadgetvictims.com/2008/08/foscam-fi8908w-firmware-history-page.html
  2. https://docs.google.com/fileview?id=0B9kFXSWngqLWYjBlYjcyOWUtYzgxYy00MWYxLThhYjAtOTgwODgzOTRmOGM5&hl=en