Le pcDuino est une plateforme de développement open source qui permet aux développeurs de créer des applications et des systèmes embarqués. Avec le pcDuino, les développeurs peuvent programmer leurs applications en utilisant le langage de programmation Python et le framework Pyduino. Ce tutoriel vous guidera à travers le processus de création d’un réseau de serveurs TCP / HTTP / HTML / JavaScript qui affichera six afficheurs analogiques à aiguille. Vous apprendrez à configurer le réseau, à créer un serveur web et à afficher les données sur les afficheurs.
Programmer le pcDuino : Pyduino : Réseau : Serveur TCP / Http / Html / Javascript : afficher 6 afficheurs analogiques à aiguille.

Ce que l’on va faire ici
- Dans ce code, je vous montre comment mettre en place un serveur TCP / Http / Html / Javascript permettant d’afficher 6 afficheurs analogiques à aiguille.
- On n’utilise ici une fonction dédiée pour fournir la page HTML+ code Javascript, rendant le code plus facile à maintenir.
Note technique
- A nouveau, un peu à la façon des « poupées gigognes » notre code est écrit en Python…
- qui intègre lui-même la page HTML
- qui intègre elle-même le code Javascript qui sera exécuté côté client !
- qui lui-même va appeler du code Javascript placé dans la librairie graphique utilisée
- qui intègre elle-même le code Javascript qui sera exécuté côté client !
- qui intègre lui-même la page HTML
Principe fonctionnel
Ce qui est très très intéressant avec l’utilisation d’un miniPC, c’est qu’il est possible d’utiliser sur la même carte à la fois le code Pyduino fournissant le serveur ET un serveur http installé sur le système qui va fournir la librairie Javascript. Le « truc » va consister à utiliser 2 ports différents pour accéder aux 2 depuis le navigateur client.
Du coup, le miniPC va permettre la mise en place d’un serveur graphique autonome pouvant fonctionner totalement sur une seule plateforme (le miniPC) sans besoin de serveur externe et pouvant donc être utilisé sur un réseau local !!
Ceci est tout simplement impossible à faire avec un couple Arduino + shield Ethernet sans disposer d’un serveur sur le réseau.
Pré-requis
- un mini-PC (pcDuino conseillé) avec système Lubuntu opérationnel. Voir si besoin la page d’accueil du pcDuino
- Langage Python (2.7) et l’IDE Pyduino ou l’éditeur Geany installés. Voir si besoin : Logiciel pour développer avec Pyduino
- ma librairie pyDuino installée : voir si besoin : Télécharger et installer Pyduino sur le pcDuino
- Un serveur Http opérationnel ainsi que la librairie Javascript utilisée doivent également avoir été installés au préalable sur le miniPC.
- Pour plus de détails, voir : Installer des librairies Javascript locales
Activité préalable
- Avant de générer votre page HTML et Javascript avec pyduino, vous pouvez la créer et la tester sur votre poste fixe.
- Si vous ne connaissez pas l’HTML ou le langage Javascript (langage exécuté côté client), voir les tutos PDF dédiés au réseau.
- Vous trouverez ici le page HTML+code javascript utilisée : Javascript : Afficher 6 widgets graphiques fournis par une librairie graphique externe.
- Ensuite ouvrez cette page dans votre navigateur : vous devez la visualiser correctement.
Schéma fonctionnel
- Le code Pyduino communique avec l’interface réseau du système qui assure la connexion avec le client distant :
- Noter que ce code fonctionne aussi bien en éthernet (filaire) qu’en wifi (sans fil) sous réserve que la connexion matérielle soit opérationnelle.
Le réseau utilisé
- Note : le poste fixe peut évidemment être le poste depuis lequel vous accédez au pcDuino par VNC, au moins en phase d’essai.
Matériel nécessaire
Système
- Le pcDuino
- connecté à un réseau local actif associant :
- un routeur (une box internet typiquement) +/- un switch réseau
- d’autres postes sur le réseau, notamment un poste fixe ou une tablette.
- voire un poste distant sur le web
- Si on utilise le wifi, on utilisera le dongle wifi ou une clé USB wifi au lieu de l’interface réseau ethernet. Mais pour un simple test, rester en filaire, c’est plus simple !
E/S
- Pas utilisées.
Instructions de montage
- Simplement connecter le pcDuino au réseau, ce qui est normalement déjà le cas si vous travaillez en accès VNC !
Le montage à réaliser
Le fichier *.py
Copier/coller ce code dans l’éditeur Geany :
# -*- coding: utf-8 -*-
# exemple pyDuino – par X. HINAULT – www.mon-club-elec.fr
# Juillet 2013 – Tous droits réservés – GPLv3
# voir : https://github.com/sensor56/pyDuino
# Serveur TCP generant une page HTML avec code Javascript utilisant un widget graphique RGraph
from pyduino import * # importe les fonctions Arduino pour Python
# entete declarative
ipLocale=Ethernet.localIP() # auto – utilise l’ip de l’interface eth0 du systeme
#ipLocale= »192.168.1.25″ # manuel – attention : utiliser la meme IP qu’une interface reseau du systeme
# pour connaitre les interfaces reseau sur le systeme : utiliser la commande $ ifconfig
print ipLocale # affiche l’adresse IP
port=8080 # attention port doit etre au dessus de 1024 sinon permission refusee par securite – 8080 pour http
serverHTTP=EthernetServer(ipLocale, port) # crée un objet serveur utilisant le port 8080 = port HTTP > 1024
#— setup —
def setup():
global serverHTTP, ipLocale, port
#serverHTTP.begin(10) # initialise le serveur – fixe nombre max connexion voulu
serverHTTP.begin() # initialise le serveur – nombre max connexion par defaut = 5
print (« Serveur TCP actif avec ip : « + ipLocale + » sur port : « + str(port) )
#— fin setup
# — loop —
def loop():
global serverHTTP
print (« Attente nouvelle connexion entrante… »)
clientDistant, ipDistante = serverHTTP.clientAvailable() # attend client entrant
# code bloque ici tant que pas client ! Si present, on recupere d’un coup objet client ET son ip
print « Client distant connecte avec ip : »+str(ipDistante) # affiche IP du client
#— requete client —
requete=serverHTTP.readDataFrom(clientDistant) # lit les donnees en provenance client d’un coup
print requete # affiche requete recue
#— reponse serveur —
reponse=( # ( … ) pour permettre multiligne..
httpResponse() # entete http OK 200 automatique fournie par la librairie Pyduino
# contenu page – ici date / heure du serveur et mesure nalogique A2
+
pageHTML() # voir la fonction separee – pour clarte du code
+« \n« ) # fin reponse
serverHTTP.writeDataTo(clientDistant, reponse) # envoie donnees vers client d’un coup
print « Reponse envoyee au client distant : «
#print (bytes(reponse))
print (reponse) # affiche la reponse envoyee
#serverHTTP.close()
# remarque : le socket = serveur doit rester ouvert
# quand on quitte l’application: la connexion TCP reste active un peu donc erreur si re-execution trop rapide du code
# on peut utiliser un port voisin dans ce cas…
delay(10) # entre 2 loop()
# — fin loop —
#— fonction fournissant la page HTML —
def pageHTML():
pageHTML=( # debut page HTML
« » »
<!DOCTYPE html >
<html>
<head>
<meta http-equiv= »content-type » content= »text/html; charset=UTF-8″ /> <!– Encodage de la page –>
<script language= »javascript » type= »text/javascript »>
<!–
// code javascript par X. HINAULT – www.mon-club-elec.fr – tous droits reserves – 2013 – GPL v3
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; // <=== serveur externe – modifier chemin ++ si besoin
//js.src = « http://127.0.0.1/javascript/rgraph/ »+jsFileNameIn; // serveur local
//js.src = « http://web.archive.org/web/20210804223007/http://www.mon-club-elec.fr/pmwiki_mon_club_elec/javascript/rgraph/ »+jsFileNameIn; // chemin local – fichier doit etre a la racine serveur
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 gauge1 = new RGraph.Gauge(‘Canvas1’, 0, 1023, 100); // declare widget graphique
gauge1.Draw(); // dessine le widget graphique dans le canvas
var gauge2 = new RGraph.Gauge(‘Canvas2’, 0, 1023, 200); // declare widget graphique
gauge2.Draw(); // dessine le widget graphique dans le canvas
var gauge3 = new RGraph.Gauge(‘Canvas3’, 0, 1023, 300); // declare widget graphique
gauge3.Draw(); // dessine le widget graphique dans le canvas
var gauge4 = new RGraph.Gauge(‘Canvas4’, 0, 1023, 400); // declare widget graphique
gauge4.Draw(); // dessine le widget graphique dans le canvas
var gauge5 = new RGraph.Gauge(‘Canvas5’, 0, 1023, 500); // declare widget graphique
gauge5.Draw(); // dessine le widget graphique dans le canvas
var gauge6 = new RGraph.Gauge(‘Canvas6’, 0, 1023, 600); // declare widget graphique
gauge6.Draw(); // dessine le widget graphique dans le canvas
} // fin fonction onload
–>
</script>
<title>Test RGraph simple</title>
</head>
<body>
<table>
<tr>
<td>
<canvas id= »Canvas1″ width= »250″ height= »250″>[Canvas non disponible]</canvas>
<br />
<div style= »text-align: center »>Valeur 1</div>
</td>
<td>
<canvas id= »Canvas2″ width= »250″ height= »250″>[Canvas non disponible]</canvas>
<br />
<div style= »text-align: center »>Valeur 2</div>
</td>
<td>
<canvas id= »Canvas3″ width= »250″ height= »250″>[Canvas non disponible]</canvas>
<br />
<div style= »text-align: center »>Valeur 3</div>
</td>
</tr>
<tr>
<td>
<canvas id= »Canvas4″ width= »250″ height= »250″>[Canvas non disponible]</canvas>
<br />
<div style= »text-align: center »>Valeur 4</div>
</td>
<td>
<canvas id= »Canvas5″ width= »250″ height= »250″>[Canvas non disponible]</canvas>
<br />
<div style= »text-align: center »>Valeur 5</div>
</td>
<td>
<canvas id= »Canvas6″ width= »250″ height= »250″>[Canvas non disponible]</canvas>
<br />
<div style= »text-align: center »>Valeur 6</div>
</td>
</tr>
</table>
<br />
Test simple de 6 afficheurs analogiques avec aiguille
</body>
</html>
« » »
) # fin page HTML
return pageHTML # la fonction renvoie la page HTML
#— obligatoire pour lancement du code —
if __name__==« __main__ »: # pour rendre le code executable
setup() # appelle la fonction setup
while not noLoop: loop() # appelle fonction loop sans fin
Ce code est également disponible ici :
Utilisation
- Connecter le mini-PC au réseau
- Appuyer sur le bouton exécuter dans Geany
- Une fenêtre de Terminal doit apparaître : un message indique que le serveur attend un client entrant.
- Ouvrir alors sur le poste client un navigateur, par exemple firefox, et saisir l’adresse ip du mini-PC suivie de :8080 ce qui donne par exemple 192.168.1.13:8080. On utilise ici le port 8080 d’où le :8080…
- A ce moment là, on doit voir sur le mini-PC les messages attestant de la connexion du client ainsi que le requête reçue
- Puis le serveur envoie sa réponse intégrant l’entête http et la page HTML avec le code Javascript
- Du côté client, la page HTML doit s’afficher : le code javascript va afficher un tableau contenant les 6 canvas dans la fenêtre du navigateur intégrant chacun le widget graphique fourni par la librairie RGraph
- Il est possible également d’éditer le source de la page permettant de s’assurer que le code HTML + javascript envoyé par le code pyduino est correct

- Noter que le poste fixe peut simultanément accéder au mini-PC par VNC (qui utilise le port 5900) et par le navigateur client ( qui utilise le port 8080 et 80) !
Discussion technique
- Ce code pourra servir de base pour mise en place d’une serveur Python renvoyant une page HTML + Javascript avec un canva visualisant des valeurs analogiques sous forme de widgets graphiques, le tout en parfaite autonomie sans besoin de serveur externe !
Articles similaires:
- Javascript : Afficher 6 widgets graphiques fournis par une librairie graphique externe.
- Javascript : Afficher un simple widget graphique fournit par une librairie graphique externe.
- http://web.archive.org/web/20210804223007/http://www.mon-club-elec.fr/pmwiki_mon_club_elec/pmwiki.php?n=MAIN.ATELIERSReseauServeurJavascriptDonneesCanvasRGraph
- http://web.archive.org/web/20210804223007/http://www.mon-club-elec.fr/pmwiki_mon_club_elec/pmwiki.php?n=MAIN.ATELIERSReseauServeurJavascriptAfficherCanvas
- http://web.archive.org/web/20210804223007/http://www.mon-club-elec.fr/pmwiki_mon_club_elec/pmwiki.php?n=MAIN.ATELIERSReseauServeurJavascriptDonneesGraphiqueCanvas
Articles Liés
- Javascript : Graphique Dygraphs simple
Le Javascript est un langage de programmation très populaire et puissant qui permet aux développeurs…
- Javascript : Graphique Dygraphs : afficher date à partir unixtime
Le langage de programmation Javascript est très populaire et est utilisé pour créer des applications…
- Javascript :Graphique Dygraphs simple avec timeline
Le Javascript est un langage de programmation très populaire et puissant qui permet aux développeurs…