Technologie Web

Html, css, javascript…

Introduction

Le web est un système client/ serveur qui permet au client d’afficher des pages web sur un terminal. L’envoi de requêtes et leurs décryptages est assuré par un logiciel nommé navigateur. Les terminaux qui peuvent se connecter à internet sont de type et de technologie différente (ordinateur, tablette, téléphone portable, objet connecté…).

Le format web doit pouvoir s’adapter à tous ces types de connexions. Le web s’appuie sur 3 langages :

  • HTML pour véhiculer le contenu (texte, images, son, vidéo…),
  • CSS pour la mise en forme et l’adaptation aux différents terminaux
  • JS pour rendre la page interactive avec l’utilisateur ou le serveur.

Requête http

Le diagramme de séquence d’une requête web est la suivante :

  • Le client appelle la page web grâce à son URI. On parle de requête de type GET.
  • Le serveur renvoie la page demandée au format html.
  • La page contenant des liens hypertextes dans son entête reformule elle-même des requêtes GET afin de rapatrier les autres éléments de la page web : JS et CSS.
  • Une fois l’ensemble des éléments reçus, la page s’affiche avec sa mise en forme et sa capacité à interagir avec l’utilisateur.
  • La page html peut aussi appeler des images, des vidéos, du son…

En fait tous les éléments constituant la page sont rapatriés et c’est le navigateur qui s’occupe de tout mettre en place en fonction du flux html et du fichier CSS

HTML[1]

L’HyperText Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom HTML.

Les balises sont invisibles à l’écran du navigateur, mais elles permettent à ce dernier de comprendre ce qu’il doit afficher. Les balises se repèrent facilement. Elles sont entourées de « chevrons », c’est-à-dire des symboles < et >, comme ceci :

[html]<balise>[/html]

Elles indiquent la nature du texte qu’elles encadrent. Elles veulent dire par exemple : «Ceci est le titre de la page», «Ceci est une image», «Ceci est un paragraphe de texte», etc.

[html]
<titre>Ceci est un titre</titre>
[/html]

On distingue une balise ouvrante <titre> et une balise fermante </titre> qui indique que le titre se termine.

Il existe des balises dites orphelines c’est-à-dire qu’on n’a pas de texte à insérer entre l’ouverture de la balise et sa fermeture. Par exemple <br/> (back return = saut de ligne) ou <image/> qui permet l’insertion d’image…

Les documents HTML ont une véritable structure en arbre, avec un élément racine contenant tous les autres éléments. Par exemple <html> contient <head> et <body>. Cet « arbre du document » est utilisé pour repérer les éléments de la page et permettre leur formatage ou l’interaction avec l’utilisateur par le biais de scripts.

liste des balises HTML voir le memento HTML

Tutoriel

On veut réaliser la page suivante :
(pour savoir comment créer un site et des pages avec Visual Studio cliquer ici):

Le code html est le suivant:

[html]

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Démonstration des éléments de section HTML5</title>
<style>
span.elem {
display: none;
}
</style>
</head>

<body>
<!– Header –>
<header>
<h1>Nouveaux éléments de section, article, header, footer, aside, nav</h1>
<!– nav principale –>
<nav>
<ul>
<li><a href="#">Rubrique 1</a></li>
<li><a href="#">Rubrique 2</a></li>
<li><a href="#">Rubrique 3</a></li>
<li><a href="#">Rubrique 4</a></li>
</ul>
</nav>
</header>
<!– Main –>
<section id="main">
<span class="elem">section</span>
<article>
<span class="elem">article</span>
<header>
<span class="elem">header</span>
<h2>En tête de l’article</h2>
<p>Date de publication, auteur</p>
</header>
<p>Contenu de l’article, contenu de l’article, contenu de l’article, contenu de l’article, contenu de l’article,
contenu de l’article, contenu de l’article…</p>
</article>
<article>
<span class="elem">article</span>
<header>
<span class="elem">header</span>
<h2>Harry Gruyaert</h2>
<p>Par François, le
<time datetime="2016-11-05">5 novembre 2016</time>
</p>
</header>
<p>Harry Gruyaert (né le 25 août 1941 à Anvers) est un photographe belge. Il est membre de l’agence Magnum Photos
depuis 1981</p>
<aside>
<span class="elem">aside</span>
<p><b>Magnum Photos</b> est une coopérative photographique. Créée en 1947 par Robert Capa, Henri Cartier-Bresson,
George Rodger, William Vandivert et David Seymour, elle fut la première de ce genre à voir le jour1.</p>
</aside>
<footer>
<span class="elem">footer</span>
<p>Source : <a href="http://fr.wikipedia.org/wiki/Magnum_Photos">Wikipedia</a></p>
</footer>
</article>
</section>
<!– sidebar –>
<aside id="sidebar">
<span class="elem">aside</span>
<h2>Sidebar</h2>
<h3>Navigation</h3>
<nav>
<span class="elem">nav</span>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</nav>
<h3>Autre titre</h3>
<p>Autres informations…</p>
</aside>
<!– footer –>
<footer>
<span class="elem">footer</span>
<p class="mentions">Page de démonstration de l’article <a href="/article/lire/1376-html5-section-article-nav-header-footer-aside.html">Nouveaux éléments de section, article, header, footer, aside, nav</a></p>
</footer>
</body>

</html>
[/html]

L’appel de cette page dans un navigateur montre le contenu mais la mise en page est linéaire est suit le flux, c’est-à-dire l’ordre d’apparition des éléments dans l’ordre d’écriture de la page

En reprenant la page et en faisant apparaitre les éléments de section HTML5, on peut voir que les sections s’imbriquent ou s’empilent les unes sur les autres.

Ajout de style afin de modifier l’aspect de la page

C’est grâce aux feuilles de style  CSS (Cascade Style Sheet) que le positionnement des sections va avoir lieu. Si on ajoute les instructions suivantes dans la balise <style> de l’entête du fichier html :

[css]
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Démonstration des éléments de section HTML5</title>
<style>
span.elem {
display: none;
}

body {
width: 980px;
margin: 0 auto 0 auto;
}

#main {
float: left;
width: 75%;
margin: 0 0 50px 0;
}

#sidebar {
float: left;
width: 22%;
margin-left: 1%;
margin-top: 1em;
}

footer {
clear: both;
}

nav ul li {
display: inline-block;
}
</style>
</head>
<body>
<!– Header –>

[/css]

La page prend l’aspect attendu. En faisant apparaitre les sections, on peut constater que la section “aside” est passée à droite (en rose).

Conclusion : Le code html contient le texte, les balises permettent de structurer la page c’est-à-dire définir les zones de contenu. Les feuilles de styles quant à elles, permettent de dimensionner et positionner les balises sectionnantes. Les feuilles de styles jouent aussi sur les éléments décoratifs de la page (couleurs, polices, encadrement…). Le code html contient le fond (la structure et le texte), le code css contient la forme (mise en page). Cette séparation permet à la page de s’adapter à n’importe quel terminal (écran d’ordinateur, tablette, téléphone…) En ajoutant à CSS quelques scripts, on peut créer une  mise en page « responsive » ou page réactive qui s’auto-adapte à l’écran.

Pour en savoir plus, voir le Memento CSS

  1. https://fr.wikipedia.org/wiki/Hypertext_Markup_Language#Description_de_HTML

Jeu de pong C#

Pong est un des premiers jeux vidéo d’arcade (1972). Au travers de quelques vidéos, nous allons recréer ce jeu dans l’environnement Windows, à l’aide du langage C#. Nous verrons comment intégrer des objets graphiques (pictureBox) et les faire se mouvoir, comment gérer les rebonds sur les bords et les raquettes. Nous verrons aussi comment ajouter du son.

PictureBox

le fichier contenant les images gif des balles est à télécharger ici

Déplacement d’une pictureBox

Reste à faire :

ajouter les boutons et le code afin que la balle puisse se déplacer en diagonale dans les 4 sens.

Résumé des informations concernant les timer :

Un composant Timer permet d’implémenter une minuterie déclenchant un événement selon un intervalle de temps défini par l’utilisateur.

Propriété Type Description
https://sites.google.com/site/notionscsharpcem/_/rsrc/1412335790755/guicontroles/timer/Propri%C3%A9t%C3%A9.png (Name) Indique le nom utilisé dans le code pour identifier l’objet. Préfixe : tmr Exemple : tmrHorloge
https://sites.google.com/site/notionscsharpcem/_/rsrc/1412335790755/guicontroles/timer/Propri%C3%A9t%C3%A9.png Enabled bool Obtient ou définit l’état de la minuterie, soit active ou non. true si la minuterie est active ; sinon, false.
L’état par défaut est false.
https://sites.google.com/site/notionscsharpcem/_/rsrc/1412335790755/guicontroles/timer/Propri%C3%A9t%C3%A9.png Interval int Obtient ou définit la fréquence de temps en millisecondes du déclenchement de l’événement Tick.
Événement Description
https://sites.google.com/site/notionscsharpcem/_/rsrc/1282076684193/guicontroles/button/Evenements.png Tick Se produit lorsque l’intervalle de temps spécifié s’est écoulé.
Méthodes Description
https://sites.google.com/site/notionscsharpcem/_/rsrc/1401026160445/instanciation_objet/M%C3%A9thode.png Start Démarre la minuterie. Exemple : tmrHorloge.Start();
https://sites.google.com/site/notionscsharpcem/_/rsrc/1401026160445/instanciation_objet/M%C3%A9thode.png Stop Arrête la minuterie. Exemple : tmrHorloge.Stop();

Déplacement et rebond de la balle

Reste à faire :
  • Modifier le code afin que la balle se déplace en diagonale et rebondisse sur les 4 bords du conteneur.
  • A l’aide des propriétés Height, Width, Location.X et Location.Y des divers composants modifier le code afin que les butées (les valeurs limites permettant de définir s’il y a rebond) soit indépendantes de la tailles des éléments : si l’utilisateur redimensionne la fenêtre de l’application, l’application doit toujours fonctionner.

Ajout d’une raquette et gestion de son déplacement à l’aide des touches du clavier.

L’image gif de la raquette peut être téléchargée ici

Reste à faire :
  • Modifier le code afin d’ajouter la raquette de gauche.
  • Provoquer le rebond de la balle sur les 2 raquettes, pour cela on utilisera les propriétés Location.X, Location.Y, ainsi que les propriétés Height et Width de la raquette.

Le rebond à lieu lorsque plusieurs conditions sont réunies :

  • horizontalement : lorsque pbBalle.Location.X + pbBalle.Width devient supérieur ou égale à pbRqDroite.Location.X
  • verticalement : pbBalle.Location.Y + pbBalle.Height supérieur ou égal à pbRqDroite.Location.Y ET pbBalle.Location.Y inférieure ou égal à pbRqDroite.location.Y + pbRqDroite.Height

gestion des scores :

  • Placer des labels afin d’afficher les scores : chaque fois que la balle rebondit sur les lignes verticales du conteneur, le score du joueur opposé s’incrémente ;
  • Ajouter une fonction indiquant une fin de partie lorsqu’un des scores arrive à 10.
  • Proposer une solution pour réinitialiser le jeu en fin de partie.

Simplification de  la gestion du rebond.

Ajouter du son[1]

  1. http://stackoverflow.com/questions/4125698/how-to-play-wav-audio-file-from-resources

Initiation C#

Visual Studio est un outils de développement (IDE en anglais : Integrated Development Environment) . Il s’agit d’un logiciel qui permet au développeur d’écrire des programmes. Visual Studio est une plateforme complète qui peut autorise le développement de toutes sortes d’applications (bureautique, web, jeux..) pour toutes sortes de plateformes (ordinateurs de bureaux, mobiles, serveurs, stations de jeux, Arduino…) et pour toutes sortes de langages (C , C++, C#, VB, JS, HTML, Python…) . Cette plateforme de développement est modulaire, c’est-à-dire qu’on peut rajouter des modules (gratuits ou payants) pour cibler un nouveau matériel ou un nouveau langage.

langage C# et utilisation de Visual Studio

De par la richesse du produit, la prise en main de ce logiciel peut être complexe. Nous allons voir comment développer des applications visuelles simples et comment l’utilisateur peut interragir avec l’application. On parle d’Interfaces Homme/ Machine (IHM).

tutoriel de découverte

détail du tutoriel

Lancer Visual studio

Choisir un modèle de type C# (prononcer C sharp)

Changer (éventuellement ) le nom du projet et l’emplacement, puis cliquer sur OK

Visual Studio initialise le projet en créant les dossiers et les fichiers nécessaires à la création de l’application.

Présentation de la fenêtre de l’IDE

A droite on trouve l’Explorateur de solution (1) il s’agit du dossier et les fichiers qui composent de projet.

A gauche on trouve l’espace de composition qui va permettre de dessiner l’application. Par défaut Visual Studio créer une fenêtre d’application Windows nommée Form1.

A gauche de la fenêtre de composition il y a 3 onglets, dont un qui porte le nom « Boite à Outils »  (3) .

En haut de la fenêtre de boite à outils, on voit une petite « punaise » qui permet d’ancrer la boite à outils et qui évite qu’elle se replie à chaque fois que la souris s’en écarte.

La boite à outils contient tous les éléments qui permettent de composer l’application

Depuis la boite à outils, faire glisser sur la « Form1 » un « Button » et deux « Textbox »

Modifier la propriété « Text » de button1 : remplacer le texte « button1 » par « Copier »

Sélectionner la « TextBox2 » , modifier la propriété « ReadOnly » pour la faire passer à « true ». de cette façon la boite de texte sera grisée et l’utilisateur de l’application n’aura pas la possibilité de modifier le texte.

Dans la fenêtre de composition : double-cliquer sur le bouton »Copier ». une nouvelle fenêtre s’ouvre alors (Form1.cs). Cette fenêtre contient le code affairant à l’application.

Modifier le code de la fonction button1_click de la manière suivante :

private void button1_Click(object sender, EventArgs e)
   {
       textBox2.Text = textBox1.Text;
   }

Cette fonction est appelée lorsque l’utilisateur clique sur le bouton.

Toutes les instructions comprises entre les accolades {} seront exécutées. Chaque instruction se termine obligatoirement par un « ; »

L’instruction textBox2.Text = textBox1.Text;peut se traduire par « la propriété Text de TextBox2 prend la valeur de la propriété Text de TextBox1 ». Autrement dit le texte de textBox1 sera recopié dans la textBox2.

Tester le programme : dans la barre d’outils cliquer sur le bouton « Démarrer »

Le programme est alors compilé et s’il ne contient pas d’erreurs, il se lance. Bravo !

Lecteur WebRadio avec node-red, MPD et MPC

Cet article propose de créer une IHM pour piloter un lecteur de radio internet. Le système est embarqué dans une carte Raspberry Pi équipée de node-red. Nous verrons d’abord comment installer MPD et MPC qui permettent de transformer la carte en lecteur audio. Nous verrons ensuite comment créer une interface web à l’aide de node-red qui permette de piloter le lecteur.

MPD est un lecteur média qui fonctionne comme un service (daemon). Il met en relation des sources de musiques, des codecs et une API de pilotage via le réseau. En fait il se comporte comme un serveur auquel on envoie des commandes de type « play », « stop »,… afin qu’il les exécute.
MPD / MPC[3]
Nous allons installer MDP (Music Player Daemon) qui va servir de lecteur de musique embarqué, ainsi que MPC (Music Player Command) qui servira à piloter MPD (telle une télécommande) :
MPD
Pré-requis
Vérifier que le driver audio est correctement installé :

[shell]
lsmod[/shell]

Il doit apparaître le driver snd_bcm2835 dans le résultat. Si ce n’est pas le cas, essayer :

[shell]sudo modprobe snd_bcm2835[/shell]

Forcer la sortie son sur la prise casque :

[shell]amixer cset numid=3 1
sudo alsactl store
[/shell]

Pour que la sortie audio soit toujours la prise Jack (au lieu de la prise HDMI), éditer le fichier /boot/config.txt et dé-commenter la ligne  hdmi_drive=2 en enlevant le dièse en début de ligne.

[shell]
# uncomment to force a HDMI mode rather than DVI. This can make audio work in
# DMT (computer monitor) modes
hdmi_drive=2
[/shell]

Installation

Sous Raspbian stretch, l’installation est facile (après mise à jour des dépôts) :

sudo apt update
sudo apt install mpc mpd

Il faut ensuite éditer le fichier /etc/mpd.conf et retirer le commentaire de la ligne “device” dans la section “audio_output”

# An example of an ALSA output:
#
audio_output {
    type		"alsa"
    name		"My ALSA Device"
    device		"hw:0,0"	# optional

il faut ensuite redémarrer MPD :

sudo /etc/init.d/mpd restart

Télécharger le fichier radio.m3u. Ce fichier contient la liste de quelques radios, il peut être édité. Pour ajouter d’autres radios rendez-vous à : www.ecouter-en-direct.com/
Coller le fichier playlist radio.m3u dans /var/lib/mpd/playlists/
Le fichier de configuration de mdp est /etc/mdp.conf. On pourra y paramétrer les dossiers où MPD ira chercher la musique et les playlist par exemple. Une fois les réglages effectués, redémarrer le service : [shell]sudo /etc/init.d/mpd restart[/shell]

charger le fichier playlist : [shell]mpc load radio[/shell]

lancer la diffusion : [shell]mpc play 1[/shell]

Vidéos

La playlist suivante contient 5 vidéos :

  1. installation de MPD et MPC
  2. Affichage de la liste des radio (DahBoard node-red)
    Remarque : bien décocher les cases “Pass through…” et “Add output…” dans le template  de la liste des radios.
  3. Déclenchement de la lecture au clic sur un élément de la liste.
  4. Ajout de boutons de commandes
  5. Affichage du nom de la radio et du titre en cours

Annexe

Le fichier css pour la mise en forme du tableau:

table {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    border: 1px solid transparent;
    /* No more visible border */
    height: 30px;
    transition: all 0.3s;
    /* Simple transition for hover effect */
}

th {
    background: #DFDFDF;
    /* Darken header a bit */
    font-weight: bold;
}

td {
    background: #3a3a3a;
    text-align: center;
}

/* Cells in even rows (2,4,6...) are one color */

tr:nth-child(even) td {
    background: #313131;
}

/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */

tr:nth-child(odd) td {
    background: #3e3e3e;
}

tr td:hover {
    background: #F1F1F1;
    color: #000;
}

 

  1. Voir : http://www.peyregne.info/wp/radio-internet-sur-raspberry-pi-partie-1-mpdmpc/

Interface de gestion de base de données

jsGrid est une bibliothèque jQuery qui permet de gérer un tableau de données et offre les options de CRUD (Create Read Update Delete) au travers de requêtes AJAX. L’objet de l’article consiste à mettre en œuvre ce composant en liaison avec une collection mongoDB, à travers l’interface de développement Node-Red.

Exemple de grille obtenue avec jsGrid

vidéos

La playlist suivante contient 5 vidéos :

  • Installation en local des fichiers scripts et CSS
  • Mise en œuvre de jsGrid à partir de l’exemple fournit sur le site de jsGrid dans une page structurée avec le framework BootStrap
  • Utilisation de la base de données afin de remplir la grille jsGrid avec les documents d’une collection.
  • Insertion et effacement d’un nouveau document dans la collection
  • Mise à jour d’un  document.

 

Mongodb et Node-red

Mongodb est un moteur de base de données noSQL (not only SQL) orienté documents. Ce genre de base de données est structurée autour de classeurs qu’on nomme “collections”, chaque collection contenant des documents. Les documents sont indexés afin de pouvoir y accéder rapidement. Les bases de données noSQL favorisent la vitesse d’accès aux données, au détriment parfois de la compacité. Nous verrons ici comment installer mongoDB sur Raspberry Pi, puis comment l’utiliser au sein de Node-Red.

Installation de mongoDB sur raspberry pi

(voir le document complet)

MongoDB et node-red

Installation du nœud mongodb2 et insertion d’un document dans une collection par injection :

Création d’un formulaire d’insertion de données à l’aide des nœuds Dashboard.

 

Installation de mongoDB et mongo-express

Pour mongoDB c’est plutôt simple :[shell]
sudo apt-get install mongodb
[/shell]

On peut vérifier que cela fonctionne :
Démarrage du service mongodb

[shell]
$ sudo /etc/init.d/mongodb start
[/shell]

Le serveur mongo db démarre normalement à l’adresse 127.0.0.1 :27017

[shell]
$ mongo
[/shell]

Ça lance une console

[shell]
> use myDB
> db.LicencePlate.insert({})
[/shell]

Confirmation de l’existence de la base et de la collection :

[shell]
> show dbs
> show collections
[/shell]

Mongo-express est une interface utilisateur permettant de manipuler mongoDB de manière visuelle. Il faut que node-red et npm soit installés (voir le document d’installation de node-red avec Johnny5)

[shell]
sudo npm install -g mongo-express
[/shell]

Par défaut le login et le mot de passe sont admin et pass cela peut être changé en modifiant le fichier de configuration. Sur raspberry le fichier de configuration se trouve dans /usr/lib/node_modules/mongo-express

Il faut recopier en le renommant config.js  puis l’éditer:

[shell]
sudo cp /usr/lib/node_modules/mongo-express/config.default.js /usr/lib/node_modules/mongo-express/config.js
sudo nano /usr/lib/node_modules/mongo-express/config.default.js
[/shell]

Si la base myDB a été créée (voir l’installation de mongodb et les commandes shell), il faut modifier le fichier config.js :

[js gutter=”off”]
// Accesing Bluemix variable to get MongoDB info
if (process.env.VCAP_SERVICES) {
var dbLabel = ‘mongodb-2.4’;
var env = JSON.parse(process.env.VCAP_SERVICES);
if (env[dbLabel]) {
mongo = env[dbLabel][0].credentials;
}
} else {
mongo = {
db: ‘myDB’,
host: ‘localhost’,
// password: ‘pass’,
port: 27017,
ssl: false,
url: ‘mongodb://localhost:27017/db’,
// username: ‘admin’,
};
}
[/js]

Si on veut accéder à l’interface utilisateur depuis un autre ordinateur que le raspberry, dans la section « site »,  il faut renseigner l’adresse IP du raspberry à la place de localhost et modifier le login et le mot de passe:

[js gutter=”off”]
site: {
// baseUrl: the URL that mongo express will be located at – Remember to add the forward slash at the start and end!
baseUrl: process.env.ME_CONFIG_SITE_BASEURL || ‘/’,
cookieKeyName: ‘mongo-express’,
cookieSecret: process.env.ME_CONFIG_SITE_COOKIESECRET || ‘cookiesecret’,
host: process.env.VCAP_APP_HOST || ‘0.0.0.0’, //connexion quelle que soit l’adresse de la carte Raspberry
port: process.env.VCAP_APP_PORT || 8081, //port du serveur web
requestSizeLimit: process.env.ME_CONFIG_REQUEST_SIZE || ’50mb’,
sessionSecret: process.env.ME_CONFIG_SITE_SESSIONSECRET || ‘sessionsecret’,
sslCert: process.env.ME_CONFIG_SITE_SSL_CRT_PATH || ”,
sslEnabled: process.env.ME_CONFIG_SITE_SSL_ENABLED || false,
sslKey: process.env.ME_CONFIG_SITE_SSL_KEY_PATH || ”,
},
//set useBasicAuth to true if you want to authenticate mongo-express loggins
//if admin is false, the basicAuthInfo list below will be ignored
//this will be true unless ME_CONFIG_BASICAUTH_USERNAME is set and is the empty string
useBasicAuth: process.env.ME_CONFIG_BASICAUTH_USERNAME !== ”,
//useBasicAuth: false,
basicAuth: {
username: process.env.ME_CONFIG_BASICAUTH_USERNAME || ‘admin’,
password: process.env.ME_CONFIG_BASICAUTH_PASSWORD || ‘pass’,
},
[/js]

Ensuite on peut lancer mongo-express :

[shell]
cd /usr/lib/node_modules/mongo-express/ && node app.js
[/shell]

ou plus simplement

[shell]
$ mongo-express
[/shell]

Lancer un navigateur http://<adresse_IP_Raspberry>:8081 puis s’authentifier avec le l’identifiant et le mot de passe choisit précédemment :

Page d’accueil de mongo express Collections de la base myDB(cliquer sur « View » sur la page d’accueil pour voir les collections)
Documents de la collection « LicencePlate », on voit qu’une plaque d’immatriculation est inscrite (AV865XG) Cliquer sur « New Document » pour créer une nouvelle plaque d’immatriculation : ajouter “immatriculation”:”XX123YY”, avant “_id”: ObjectID() puis cliquer sur Save.

En cliquant sur le numéro de plaque on peut modifier le document, en cliquant sur le bouton rouge représentant une poubelle, on peut effacer ce document.

openALPR sur raspberry

OpenALPR est un logiciel de reconnaissance de plaque d’immatriculation. Ce logiciel s’appuie sur la bibliothèque openCV et le logiciel de reconnaissance de caractères tesseract.

Raspbian Jessie

On trouve sur les forums tout ce qu’il faut pour télécharger, compiler et installer ce package depuis les sources. L’inconvénient est que la compilation sur raspberry est très longue. Nous proposons ici une version packagée de openALPR, ce qui réduit considérablement le temps d’installation.

sudo apt-get update
sudo apt-get install liblog4cplus-1.0-4 beanstalkd libgtk2.0-0 libtiff5 libdc1394-22 libavcodec-dev libavformat-dev libswscale-dev libv4l-dev libxvidcore-dev libx264-dev
wget http://www.rgot.org/wp-content/uploads/2016/12/openalpr.tgz
tar -zxvf openalpr.tgz
sudo dpkg -i openalpr_20161219-1-complet_armhf.deb
rm openalpr_20161219-1-complet_armhf.deb
rm openalpr.tgz

Pour déinstaller :

sudo dpkg -r openalpr

Pour Raspbian Stretch c’est plus simple :

il suffit de suivre les instructions disponibles sur le github de openalpr

sudo apt-get update && sudo apt-get install -y openalpr openalpr-daemon openalpr-utils libopenalpr-dev

Réinstallation de NODE-RED, RASPI-IO et JOHNNY-FIVE sur Raspberry Pi

La version intégrée de node-red permet de s’initier mais ne permet pas d’utiliser la bibliothèque raspi-io utilisée par le raspberry pour communiquer avec l’extérieur (problème de droits d’accès aux broches du raspi).
Pour pouvoir communiquer avec l’extérieur (capteurs, afficheurs, leds…) il faut donc réinstaller node.js et node-red.

Télécharger le fichier install_johnny5 , le rendre exécutable puis le lancer:

wget http://www.rgot.org/wp-content/uploads/2016/12/install_johnny5.txt
sudo chmod 755 install_johnny5.txt
./install_johnny5.txt

autre méthode : exécuter les lignes suivantes dans une console. (démarche issue de la note d’installation de node-red : http://nodered.org/docs/hardware/raspberrypi )

sudo apt-get update
sudo apt-get remove nodered
sudo apt-get remove nodejs nodejs-legacy
curl -sL https://deb.nodesource.com/setup_4.x | sudo bash -
sudo apt-get install -y build-essential python-rpi.gpio nodejs
sudo npm cache clean
sudo npm install -g --unsafe-perm node-red
sudo apt-get update && sudo apt-get install python-rpi.gpio
sudo wget https://raw.githubusercontent.com/node-red/raspbian-deb-package/master/resources/nodered.service -O /lib/systemd/system/nodered.service
sudo wget https://raw.githubusercontent.com/node-red/raspbian-deb-package/master/resources/node-red-start -O /usr/bin/node-red-start
sudo wget https://raw.githubusercontent.com/node-red/raspbian-deb-package/master/resources/node-red-stop -O /usr/bin/node-red-stop
sudo chmod +x /usr/bin/node-red-st*
sudo systemctl daemon-reload
sudo npm i -g npm@2.x

Pour les raspi 2 et 3 il faut aussi exécuter les lignes suivantes pour installer raspi-io (gestion des entrées/sorties) et johnny5 (bibliothèque permettant la programmation d’automates)

sudo npm install -g johnny-five --unsafe-perm --force
sudo npm install -g raspi-io --unsafe-perm --force
sudo npm install -g node-red-contrib-gpio --unsafe-perm --force
sudo npm install serialport --unsafe-perm --build-from-source
sudo npm i -g oled-js oled-font-5x7

Éditer le fichier /lib/systemd/system/nodered.serviceet remplacer USER=pi par USER=root
ainsi la commande node-red-start lancera node-red en mode root (dans le dossier /root/.node-red )

Activer SSH au premier boot d’une carte Raspberry Pi

Depuis la dernière version de Raspbian Jessie (nov 2016) ssh est déactivé par défaut. Il faut donc se connecter via l’interface graphique et activer ssh dans la configuration de raspberry ( bouton framboise -> Préférences -> configuration du Raspberry Pi puis dans l’onglet “Interfaces” cocher SSH)
Si on possède une carte Raspberry qui n’est pas connectée à un ensemble clavier/souris/écran, il semble impossible de se connecter…
La solution consiste à ajouter un fichier (vide) nommé ssh dans la partition boot (c’est la partition visible lorsque la carte SD est introduite dans un PC Windows).
Au premier boot Raspberry détecte le fichier ssh, active le protocole ssh et efface le fichier ssh sur la partition boot.