le pcduino : installer des librairies javascript locales · le pcduino : installer des librairies...

Le pcDuino : Installer des librairies Javascript locales

Par X. HINAULT – Août 2013 – www.mon-club-elec.fr

Introduction

• Je vous propose ici de voir la procédure d'installation de librairies gaphiques Javascript localement sur le pcDuino, de façon à ne pas avoir besoin d'un serveur externe pour exécuter des codes de serveur fournissant au client distant des pages HTML intégrant des widgets graphiques javascript.

Le principe fonctionnel

• Le principe général fonctionnel est le suivant :

◦ un code Pyduino va fournir un serveur TCP/Http/Html qui envoie une page au client. Typiquement, ce serveur s'exécute sur le port 80.

◦ parallélement, on va exécuter sur le système un serveur Http « classique », de type Apache, qui lui fournira les fichiers de la librairie Javascript dont aura besoin la page qui s'exécute sur le client.

◦ on a donc le schéma fonctionnel suivant :

Le pcDuino : Installer des librairies Javascript locales - Par X. HINAULT – Août 2013 – www.mon-club-elec.fr – p. 1 / 24

http://www.mon-club-elec.fr/


Le principe fonctionnel avec Ajax

• Dans le cas d'une utilisation d'Ajax pour la communication serveur / client, le schéma fonctionnel est grosso-modo le même, si ce n'est que la communication serveur / client est plus élaborée :



Installation du serveur Http sur le système

Un serveur Http est un « logiciel » serveur capable de comprendre les requêtes htttp reçues par les clients et de renvoyer les pages demandées ou des messages d'erreur. C'est ce qui est installé sur tous les serveurs du web. Voir : http://fr.wikipedia.org/wiki/Serveur_HTTP

Il y a, comme toujours, plusieurs solutions de serveur Http sous Gnu/Linux, notamment :

• Apache HTTP Server

• Nginx

• Lighttpd



http://fr.wikipedia.org/wiki/Serveur_HTTP

• …

• Voir notamment : http://www.linuxplanet.com/linuxplanet/reviews/7239/1

Mon choix se porte sur Apache qui est le plus utilisé (plus de la moitié des serveurs mondiaux) et est très facile à installer :

On commence par installer un serveur http Apache sur le mini-PC. Se connecter en accès VNC et installer le paquet apache2 (4Mo) avec la commande : $ sudo apt-get install apache2



http://www.linuxplanet.com/linuxplanet/reviews/7239/1

Une fois fait, le serveur Apache est théoriquement opérationnel : pour le vérifier, ouvrir sur le miniPC le navigateur (Midori par exemple) et se connecter à l'adresse locale 127.0.0.1 ce qui doit donner :



On doit également pouvoir se connecter depuis un poste client, en utilisant l'adresse IP du miniPC, par exemple 192.168.1.12 (sous entendu, sur le port 80...) ce qui donne :

Voilà, le serveur Apache Http est opérationnel et installé. Difficile de faire plus simple non ??

Quelques remarques techniques :



• le serveur Http est disponible sur le port 80

• le répertoire racine sur le système du serveur http est : /var/www C'est dans ce répertoire système que devront être placés les fichiers à utiliser. Noter que ce répertoire est en zone « administrateur » pour des raisons de sécurité.

• pour info, il possible de paramétrer de manière assez avancée le serveur Apache au besoin, mais la configuration par défaut convient pour notre usage.

Pour que le serveur Apache se lance tout seul au démarrage sur le pcDuino :

J'ai réalisé l'installation initiale et tout fonctionnait OK... mais : j'ai constaté que le serveur Apache ne se lançait pas automatiquement au démarrage suivant, problème qui bizarrement était résolu en créant le répertoire /var/log/apache2

Ce fichier disparaissait à nouveau au redémarrage suivant.

L'explication : le rép /var/log était monté en tmpfs => autrement dit en RAM... et donc disparaissait au redémarrage.

La configuration de çà se fait dans le fichier /etc/fstab . Plus d'infos ici : http://fr.wikipedia.org/wiki/Fstab

j'ai donc ouvert ce fichier avec sudo geany /etc/fstab

J'ai mis # devant la ligne concernant /var/log

puis reboot

Puis recréation du rép /var/log/apache2cd /var/log

sudo mkdir apache2

puis reboot...

cette fois le rép /var/log/apache2 existe toujours après reboot, ce qui n'était pas le cas avec /var/log/ en tmpfs

et le serveur Apache se lance automatiquement au lancement.

J'ai été mis sur la piste avec çà : http://askubuntu.com/questions/64996/var-log-apache2-gets-deleted-on-restart-so-apache-doesnt-start-on-startup

Du coup, je découvre au passage la possibilité de mettre des répertoires en RAM... plus de détails ici : http://doc.ubuntu-fr.org/tmpfs

Voilà, c'est fini en ce qui concerne le serveur http !



http://fr.wikipedia.org/wiki/Fstab

http://doc.ubuntu-fr.org/tmpfs

http://askubuntu.com/questions/64996/var-log-apache2-gets-deleted-on-restart-so-apache-doesnt-start-on-startup

Installer la librairie graphique RGraph

Une librairie à découvrir absolument : Rgraph !• Si comme moi, vous faites quelques essais, vous verrez que les choses se compliquent vite lorsque l'on code de zéro des widgets analogiques dynamiques

en javascript. La vague impression de réinventer la roue...

• C'est pourquoi je vous propose ici de découvrir et tester une librairie absolument incroyable qui propose des dizaines de possibilités d'affichages analogiques ou graphiques facile à paramétrer en toute simplicité et à afficher dans des... canvas !

• J'ai nommé Rgraph : http://www.rgraph.net/

• La librairie complète est disponible au téléchargement, et est libre d'usage pour une utilisation personnelle ou éducative. • Des licences payantes sont proposées pour d'autres usages, commerciaux ou institutionnels, mais cela ne nous concerne pas ici et nous allons pouvoir passer à l'action très simplement.

Principe général d'utilisation • On commence par installer une fois pour toutes les fichiers javascript de la librairie rgraph dans un répertoire d'un serveur accessible depuis le réseau où se

trouve Arduino : ces fichiers contiennent les codes de dessin des éléments graphiques dans un canva

• Au niveau de la page HTML :

◦ on charge les fichiers *.js nécessaires de la librairie, généralement entre 2 et 3, mais çà peut aller jusqu'à 10 ou plus selon.

◦ ensuite, on insère un code javascript réduit dans la page HTML, ce qui va permettre de créer les éléments graphiques voulus et de les afficher avec les effets voulus.

Installer la librairie RGraph• La première chose à faire est donc d'installer la librairie RGraph sur un serveur http opérationnel. On commence par télécharger l'archive :

http://www.rgraph.net/download



http://www.rgraph.net/download

http://www.rgraph.net/

• Noter que dans un terminal, on peut aussi faire : $ cd Downloads

$ wget -4 http://www.rgraph.net/downloads/RGraph2_2013-08-01-stable.zip

• Puis ensuite, on extrait l'archive (clic droit sur l'archive et extraire ici)

• On obtient un répertoire avec plusieurs sous-répertoires : repérer le répertoire libraries qui contient tous les fichiers javascript de la librairie.



http://www.rgraph.net/downloads/RGraph2_2013-08-01-stable.zip

• Ce sont ces fichiers qu'il faut copier sur un serveur http opérationnel. Nous allons ici l'installer sur notre serveur Apache local.

• Au niveau du serveur choisi, se connecter par FTP, créer un répertoire appelé rgraph, lui-même éventuellement placé dans répertoire dédié aux fichiers javascripts et y copier tous les fichiers *.js du répertoire libraries précédent :



Dans notre cas, nous allons donc exécuter sur le miniPC les commandes suivantes : on va commencer par se placer dans le répertoire du serveur : $ cd /var/www

puis nous créeons un répertoire appelé javascript puis un répertoire rgraph dans le répertoire javascript :$ sudo mkdir javascript

$ cd javascript

$ cd mkdir rgraph

ensuite, on copie dans ce répertoire tous les fichiers obtenus. On pourrait le faire en ligne de commande, mais le plus pratique est de le faire en mode graphique tout en étant en sudo, ce que l'on peut faire en lançant le navigateur de fichier avec : $ sudo pcmanfm

ensuite copier coller les fichiers dans le répertoire /var/www/javascript/rgraph ce qui doit donner :



A ce stade, le plus dur est fait. Nous allons maintenant créer une page de test pour vérifier que tout fonctionne. Commencer par ouvrir geany en sudo (on va enregistrer notre fichier en /var/www/ qui est zone root..) :

$ sudo geany

Ensuite, copier/coller la page HTML suivante : <!DOCTYPE html >

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

<script language="javascript" type="text/javascript">

<!--

function path(jsFileNameIn) { // fonction pour fixer chemin absolu

var js = document.createElement("script");

js.type = "text/javascript";

// js.src = " http://www.mon-club-elec.fr/mes_javascripts/rgraph/"+jsFileNameIn; // <=== modifier ici chemin ++

js.src = " http://127.0.0.1/javascript/rgraph/"+jsFileNameIn; // <=== chemin serveur local

//js.src = " javascript/rgraph/"+jsFileNameIn; // <=== chemin local – le fichier doit etre place a la racine

document.head.appendChild(js);

//alert(js.src); // debug

}

//---- fichiers a charger ---

path('RGraph.common.core.js');

path('RGraph.gauge.js');

window.onload = function () { // fonction executee apres chargement de la page HTML

//--- code graphique ---

// parametres sont : nom du canva, min, max, valeur courante

var gauge = new RGraph.Gauge('nomCanvas', 0, 1023, 300); // declare widget graphique

gauge.Draw(); // dessine le widget graphique dans le canvas

} // fin fonction onload

-->

</script>

<title>Test RGraph simple</title>

</head>

<body>

<canvas id="nomCanvas" width="250" height="250">[Canvas non disponible]</canvas>

<br />

Test simple d'un afficheur analogique avec aiguille

</body>

</html>

Enregistrer le fichier dans /var/www/ en le nommant test_rgraph.html



A présent, ouvrir la page HTML de test avec le navigateur sur le miniPC en utilisant l'adresse suivante : 127.0.0.1/test_rgraph.html

On doit obtenir :

On doit également obtenir le même résultat sur le poste client en utilisant l'adresse ip du miniPC, sous la forme : 192.168.1.12/test_rgraph.html



Cool : la librairie fonctionne correctement et votre miniPC est transformé en serveur javascript graphique !

Installer la librairie graphique dygraphs

Cahier des charges, critères de choix d'un librairie supportant l'affichage d'une grane quantité de données

• La première chose, c'est qu'il faut une librairie supportant très bien l'affichage de grandes quantité de données facilement (une journée de mesure = 1440



valeurs), en mode multicourbes notamment

• d'autre part, il faut une librairie open source (afin de maîtriser totalement la solution utilisée au besoin...) : une solution « free » pour usage non -commercial étant acceptable mais non idéale

• une librairie qui supporte notamment les fonctions de zoom, sélection de type « timeline », l'affichage de la valeur courante sous le curseur,

• une librairie acceptant idéalement les données au format texte CSV ou équivalent

• une librairie facile à mettre en œuvre en terme de codage Javascript et sans besoin de ressources externes à part la librairie elle-même

• une librairie permettant un traitement mathématique des séries de données

• le « design graphique » n'est pas prioritaire dans le choix : ce qui prime étant la fonction recherchée

• ...

Vue d'ensemble des possibilités

• La première chose à dire, c'est que l'on a l'embarras du choix : ce sont plusieurs dizaines de solutions qui sont disponibles, aux possibilités étonnantes et avec beaucoup de choses inutiles dans notre cas précis... Une bonne vue d'ensemble est proposée ici : http://techslides.com/50-javascript-charting-and-graphics-libraries/

• On retrouve de grands noms, dont la plupart sont « free » pour usage non-commercial mais coûtent assez cher sinon... :

◦ http://www.highcharts.com/

◦ http://d3js.org/

• Une première librairie Javascript graphique que j'ai utilisée, notamment avec Arduino, est RGraph, en raison des nombreux widgets « analogiques » qu'elle propose : http://www.rgraph.net/examples/gauge.html Mais les possibilités pour l'affichage de courbe de cette librairie ne m'ont pas parues satisfaisante dans mon cas..

Mon choix : la librairie opensource dygraphs

• Après un examen attentif, je me suis assez naturellement porté vers la librairie dygraph, spécialisée dans l'affichage de grande quantité de données, supportant l'affichage type « timeline », acceptant les données de type texte, etc...

• Cette librairie est beaucoup moins développée dans ses possibilités graphiques que certaines autres, mais elle fait très très bien le job qu'on lui demande : afficher de grandes quantité de données.. et le tout assez simplement.

• En fait, je l'ai découvert secondairement, cette librairie totalement open source, avait été développée par Google initialement puis a été mise sous licence opensource.. et est utilisée par de grands noms du web pour les affichages de données, notamment Google, la NASA, NOAA, Eutelsat, Wikimedia, etc... donc, à priori une garantie de qualité...

• Pour découvrir les possibilités de dygraphs, c'est par ici :

◦ http://dygraphs.com/

◦ et des démos ici : http://dygraphs.com/gallery/#g/highlighted-series



http://dygraphs.com/gallery/#g/highlighted-series

http://dygraphs.com/

http://www.rgraph.net/examples/gauge.html

http://d3js.org/

http://www.highcharts.com/

http://techslides.com/50-javascript-charting-and-graphics-libraries/

http://techslides.com/50-javascript-charting-and-graphics-libraries/

L'exemple de la page d'accueil

• Pour mémoire, une autre librairie opensource m'a paru très intéressante également : http://jsxgraph.uni-bayreuth.de/wp/

Télécharger la librairie dygraphs et préparer l'utilisation

• commencer par télécharger l'archive ici : https://github.com/danvk/dygraphs ou avec la commande : $ cd /var/www

$ sudo wget -4 https://github.com/danvk/dygraphs/archive/master.zip

• L'extraire $ sudo unzip master.zip

• L'inclusion de la librairie dans un code Javascript se fait via un fichier appelé dygraph-combined qui est en fait un fichier unique plus facile à utiliser que tous les fichiers séparés... mais il faut le générer, ce qui se fait avec le fichier generate-combined.sh

• Attention : cette commande suppose que Java soit installé sur le miniPC, Si ce n'est pas le cas, soit installer simplement java (vérifier que vous avez de la place en Nand – prévoir au moins 80Mo... ) :

$ sudo apt-get install openjdk-7-jdk

• Lancer alors la génération du fichier : $mkdir javascript



https://github.com/danvk/dygraphs/archive/master.zip

https://github.com/danvk/dygraphs

http://jsxgraph.uni-bayreuth.de/wp/

$ sudo mv dygraphs-master javascript/dygraphs

$ cd javascript/dygraphs

$ sudo ./generate-combined.sh

çà peut durer un petit moment.. pas tant que çà en fait..

• On obtient alors le fichier basé sur les autres fichiers …

Voilà, à ce stade la librairie dygraphs est à priori opérationnelle. On va tester le résultat avec une page HTML simple intégrant un code javascript utilisant la librairie dygraphs. Ouvrir Geany en mode sudo : $ sudo geany

Copier/coller le code suivant :<!DOCTYPE html >

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 

<script language="javascript" type="text/javascript">

<!--

function path(jsFileNameIn) { // fonction pour fixer chemin absolu

var js = document.createElement("script");

js.type = "text/javascript";

//js.src = "javascript/dygraphs/"+jsFileNameIn; // <=== chemin local – le fichier doit etre place a la racine

js.src = "http://127.0.0.1/javascript/dygraphs/"+jsFileNameIn; // <=== chemin serveur local

document.head.appendChild(js);

//alert(js.src); // debug

}

//---- fichiers a charger ---

path('dygraph-combined.js');

window.onload = function () { // fonction executee apres chargement de la page HTML

//--- code graphique ---

g = new Dygraph( // cree l'objet du graphique

// containing div

document.getElementById("graphdiv"), // objet div utilise appelé par son nom

// CSV or path to a CSV file.

"Date,Temperature\n" +

"2008-05-07,75\n" +

"2008-05-08,70\n" +

"2008-05-09,80\n"

); // fin déclaration

} // fin fonction onload

-->

</script>

<title>Test Dygraphs simple</title>

</head>

<body>

<div id="graphdiv"></div>

<br />

Test simple d'une courbe dygraph

</body>

</html>

Enregistrer le fichier dans /var/www/ sous le nom test_dygraphs.html

En se connectant sur le miniPC depuis le navigateur à l'adresse 127.0.0.1/test_dygraphs.html on doit obtenir :



De la même façon, en se connectant à partir d'un poste client sur l'adresse ip du miniPC, par exemple 192.168.1.12 on doit obtenir :



Finalisation : on peut à présent supprimer les éléments inutiles :

supprimer master.zip$ cd /www/var

$ sudo rm master.zip



enlever java si vous n'en n'avez plus besoin$ sudo apt-get remove openjdk-7-jdk

$ sudo apt-get autoremove

Voilà, vous êtes parés pour utiliser la librairie graphique dygraphs en local sur votre mini PC !

Dépannage

Si Apache ne démarre pas au démarrage

J'ai réalisé l'installation initiale et tout fonctonnait OK... mais :

J'ai constaté que le serveur Apache ne se lançait pas automatiquement au démarrage suivant, problème qui bizarrement était résolu en créant le répertoire /var/log/apache2

Ce fichier disparaissait à nouveau au redémarrage suivant.

L'explication : le rép /var/log était monté en tmpfs => autrement dit en RAM... et donc disparaissait au redémarrage.

La configuration de çà se fait dans le fichier

/etc/fstab

Info ici : http://fr.wikipedia.org/wiki/Fstab

j'ai ouvert ce fichier avec $ sudo geany /etc/fstab

J'ai mis # devant la ligne concernant /var/log puis reboot

Puis recréation du rép /var/log/apache2cd /var/log

sudo mkdir apache2

puis reboot...

cette fois le rép /var/log/apache2 existe toujours après reboot, ce qui n'était pas le cas avec /var/log/ en tmpfs

et le serveur Apache se lance automatiquement au lancement.

J'ai été mis sur la piste avec çà : http://askubuntu.com/questions/64996/var-log-apache2-gets-deleted-on-restart-so-apache-doesnt-start-on-startup

Du coup, je découvre au passage la possibilité de mettre des répertoires en RAM... plus de détails ici : http://doc.ubuntu-fr.org/tmpfs



http://doc.ubuntu-fr.org/tmpfs

http://askubuntu.com/questions/64996/var-log-apache2-gets-deleted-on-restart-so-apache-doesnt-start-on-startup

http://fr.wikipedia.org/wiki/Fstab

Si problème :

vérifier que le serveur Apache fonctionne bien en se connectant sur le miniPC au port 127.0.0.1

Si le serveur Apache ne fonctionne pas : le relancer$ sudo service apache2 restart

On peut aussi regarder les messages d'erreur ici : tail /var/log/syslog

tail /var/log/apache2/access.log

tail /var/log/apache2/error.log

Le nom du serveur se définit dans : /etc/apache2/apache2.conf Ajouter la ligne : # ServerRoot: The top of the directory tree under which the server's# configuration, error, and log files are kept.## NOTE! If you intend to place this on an NFS (or otherwise network)# mounted filesystem then please read the LockFile documentation (available# at <URL:http://httpd.apache.org/docs-2.1/mod/mpm_common.html#lockfile>);# you will save yourself a lot of trouble.## Do NOT add a slash at the end of the directory path.#ServerRoot "/etc/apache2"ServerName localhost#AllowOverride All

Sinon, le chemin de log se définit dans le fichier : /etc/apache2/envvars

Ici :

APACHE_LOG_DIR

Si le serveur Apache fonctionne, vérifier les chemins, notamment / de début et de fin..



le pcduino : installer des librairies javascript locales · le pcduino : installer des librairies...

Documents