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 Pyduino, un langage de programmation Python spécialement conçu pour le pcDuino, il est possible de créer des applications réseau. Dans cet article, nous allons voir comment créer un serveur TCP / HTTP / HTML qui affichera une liste déroulante contenant la liste des fichiers d’un répertoire du système. Nous verrons comment configurer le serveur, comment le connecter à un réseau et comment afficher la liste des fichiers.
Programmer le pcDuino : Pyduino : Réseau : Créer un serveur TCP / Http / HTML affichant une liste déroulante contenant la liste des fichiers d’un répertoire du système.
Ce que l’on va faire ici
- Dans ce code, je vous montre comment mettre un place un serveur Http / html affichant une liste déroulante contenant la liste des fichiers d’un répertoire du système.
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
Activité préalable
- Avant de générer votre page HTML avec pyduino, vous pouvez la créer et la tester sur votre poste fixe.
- Voir la page d’exemple ici : Javascript : Récupérer la valeur de la sélection courante d’une liste déroulante
- 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 générant une page HTML affichant une liste déroulante listant les fichiers d’un repertoire
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():
dirPath=homePath()+« data/text »
print dirPath
files=listfiles(dirPath)
print files
optionsFiles=« »
for filename in files:
print filename
optionsFiles=optionsFiles+« \t\t\t<option value=\ »« +filename+« \ » label=\ »« +filename+« \ »> »+filename+« </option> \n«
print optionsFiles
pageHTML=( # debut page HTML
« » »
<!DOCTYPE HTML>
<!– Debut de la page HTML –>
<html>
<!– Debut entete –>
<head>
<meta charset= »utf-8″ /> <!– Encodage de la page –>
<title>JavaScript: Test </title> <!– Titre de la page –>
<!– Debut du code Javascript –>
<script language= »javascript » type= »text/javascript »>
<!–
// code Javascript
//— variables globales —
var myselect=null; // objet global
//— fonction appelee au chargement de la page
window.onload = function () { // au chargement de la page
// code Javascript ici, avec sa syntaxe specifique…
print(« Javascript OK »)
myselect=document.getElementById(« liste »)
for (var i=0; i<myselect.options.length; i++){
print(« Option index « +i + « : » + myselect.options[i].text + » ( » + myselect.options[i].value + « ) ») // affiche la liste des options
} // fin for
// fonction de gestion d’un changement select – ici placee dans le code JS initial
myselect.onchange=function () {
var index=this.selectedIndex
print (« Index courant = »+index + » soit : » + this.options[index].text); // this represent myselect
} // fin fonction onchangeSelect
} // fin onload
//—- fonctions utiles —
function print(textIn) { // fonction pour ajouter un element a la page – utile ++ pour debug
// Ajouter un element a la page sans effacer le reste
//var txt= »Hello »;
var txt=textIn;
var newtext = document.createTextNode(txt);
document.body.appendChild(newtext);
document.body.appendChild(document.createElement(« br »)); // ajoute saut de ligne
document.body.appendChild(newtext);
} // fin print
//–>
</script>
<!– Fin du code Javascript –>
</head>
<!– Fin entete –>
<!– Debut Corps de page HTML –>
<body >
<select style= »width: 300px » id= »liste » >
« » »
+
optionsFiles
+
« » »
</select>
</body>
<!– Fin de corps de page HTML –>
</html>
<!– Fin de la page 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 : https://raw.github.com/sensor56/pyduino-exemples/master/Ethernet/EthernetServerHTMLJSSelectFiles.py
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
- Du côté client, la page HTML doit s’afficher : une liste déroulante avec le contenu du répertoire utilisé côté serveur. Sélectionner un fichier donné entraîne l’affichage de sa valeur dans le bas de la page HTML.
- Il est possible également d’éditer le source de la page permettant de s’assurer que le code HTML 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) !
Discussion technique
- La voie est ouverte pour sélectionner un fichier de travail côté serveur à partir du client.
Articles similaires:
- Programmer le pcDuino : Pyduino : Réseau : Créer un serveur TCP / Http générant une page HTML intégrant un code Javascript simple.
- Programmer le pcDuino : Pyduino : Réseau : Créer un serveur TCP / Http générant une page HTML intégrant un code Javascript affichant un canva widget graphique simple (un vumètre graphique).
- Programmer le pcDuino : Pyduino : Réseau : Créer un serveur TCP / Http générant une page HTML intégrant un code Javascript affichant un canva un widget graphique fournit par une librairie Javascript locale.
- http://web.archive.org/web/20210804223007/http://www.mon-club-elec.fr/pmwiki_mon_club_elec/pmwiki.php?n=MAIN.ATELIERSReseauServeurJavascriptAfficherCanvas
- Programmer le pcDuino : Pyduino : Réseau : Créer un serveur TCP / Http générant une page HTML intégrant un code Javascript envoyant une requete Ajax vers le serveur, gérant requête ajax et renvoyant une réponse ajax vers le client.
