Logo Mon Club Elec

Programmer le pcDuino : Pyduino : Réseau : Serveur TCP/Http/Html/Javascript fournissant un graphique Dygraphs généré à partir d’un fichier texte de n séries données.

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 framework open source pour le pcDuino, les développeurs peuvent créer des applications réseau qui peuvent fournir des graphiques Dygraphs générés à partir d’un fichier texte contenant des séries de données. Dans cet article, nous allons examiner comment programmer le pcDuino pour créer un serveur TCP/HTTP/HTML/Javascript qui fournira un graphique Dygraphs généré à partir d’un fichier texte de n séries de données.

Programmer le pcDuino : Pyduino : Réseau : Serveur TCP/Http/Html/Javascript fournissant un graphique Dygraphs généré à partir d’un fichier texte de n séries données.

Programmer le pcDuino : Pyduino : Réseau : Serveur TCP/Http/Html/Javascript fournissant un graphique Dygraphs généré à partir d’un fichier texte de n séries données.

Le graphique affiché dans le navigateur client connecté au serveur Pyduino : 20 séries de 1440 valeurs (soit 28800 valeurs !) lues à partir d’un fichier texte ! Réponse envoyée en 1 à 2 secondes seulement…

Ce que l’on va faire ici

  • Dans ce code, je vous montre comment mettre en place un serveur TCP/Http/Html/Javascript fournissant un graphique à l’aide de la librairie Dygraphs : le graphique affiche ici des valeurs obtenues par la lecture d’un fichier texte. Le format utiliser pour les données est compatible Dygraphs, à savoir « JJ/MM/AAAA hh:mm:ss, val1, val2, val3, val4, .., valn \n ».
  • Simple extrapolation d’un code vu précédemment pour 6 séries, ce code apparaît comme une solution « universelle » de visualisation de n séries de données dans un navigateur.
  • On pourra générer un fichier de test avec le code suivant notamment : Créer un fichier de 24H de 6 séries données horodatées de test.
  • Ce code est au final très polyvalent car il pourra être exécuté en parallèle d’un code enregistrant des données dans un fichier. Il pourra également également, sans modification afficher 10 données ou 1440 !
  • On 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

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.

Programmer le pcDuino : Pyduino : Réseau : Serveur TCP/Http/Html/Javascript fournissant un graphique Dygraphs généré à partir d’un fichier texte de n séries données.

Liens utiles :

Pré-requis

Schéma fonctionnel

  • Le code Pyduino communique avec l’interface réseau du système qui assure la connexion avec le client distant. On communique également ici avec le fichier texte :
Programmer le pcDuino : Pyduino : Réseau : Serveur TCP/Http/Html/Javascript fournissant un graphique Dygraphs généré à partir d’un fichier texte de n séries données.
  • 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é

Programmer le pcDuino : Pyduino : Réseau : Serveur TCP/Http/Html/Javascript fournissant un graphique Dygraphs généré à partir d’un fichier texte de n séries données.
  • 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

Programmer le pcDuino : Pyduino : Réseau : Serveur TCP/Http/Html/Javascript fournissant un graphique Dygraphs généré à partir d’un fichier texte de n séries données.

Le fichier *.py

Copier/coller ce code dans l’éditeur Geany :

#!/usr/bin/python
# -*- coding: utf-8 -*-

# exemple pyDuino – par X. HINAULT – www.mon-club-elec.fr
# Sept 2013 – Tous droits réservés – GPLv3
# voir : https://github.com/sensor56/pyDuino

# Serveur TCP générant une page HTML + Javascript affichant un graphique avec la librairie dygraphs.

from pyduino import * # importe les fonctions Arduino pour Python

import numpy as np

# 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():

        # code Python a executer avant envoyer page

        #chemin fichier

        myDataPath=(« data/text/ »)

        path=homePath()+myDataPath  # chemin du répertoire à utiliser
        filename=« testdata.txt » # nom du fichier
        filepath=path+filename # chemin du fichier

        #– lecture du fichier —
        myFile=open(filepath,‘r’) # ouverture en lecture
        print (« Contenu du fichier : « )
        myFile.seek(0) # se met au debut du fichier

        linesList=myFile.readlines() # lit le fichier – renvoie list

        myFile.close() # fermeture du fichier

        #print linesList

        # test le nombre de data dispo
        testData=linesList[0].split(« , »)
        print testData
        print len(testData)
        nombreData=len(testData)1 # la premiere colonne correspond a x, ensuite les series y

        # titre serie pour Dygraphs – creation liste des series au format « y1= », « y2″, .. »yn= »
        listeSeries=«  »
        for i in range(nombreData):
                if i==nombreData-1: # si derniere data
                        listeSeries=listeSeries+« \ »y »+str(i+1)+« =\ »«  # pas de virgule
                else:
                        listeSeries=listeSeries+« \ »y »+str(i+1)+« =\ », »  # sinon virgule
        # fin for

        print listeSeries

        # donnees sous forme d’une chaine
        # format ligne data dans la page HTML « x,y1, y2, y3, y4,…, yn \n »
        dataGraph=«  »

        for dataLine in linesList[:-1]: # defile lignes sauf la derniere
                dataGraph=dataGraph+« \ »« +dataLine.rstrip(\n)+ » \\n \ » + » + « \n«  # dataLine.rstrip(‘\n’) = enleve \n de la ligne

        dataGraph=dataGraph+« \ »« +linesList[1].rstrip(\n)+ » \\n \ » «  # derniere ligne sans le +

        # options du graphique Dygraph a utiliser
        optionsGraph=(«  » »
        labels: [ « x », «  » »

        +
        listeSeries
        +
        «  » »], // labels series
        width : 800, // largeur
        height: 600, // hauteur
        showRangeSelector: true // affiche l’outil de selection plage voulue
        «  » »

        ) # fin optionsGraph
        # Attention, pas de , pour la derniere ligne !

        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 =  » https://www.mon-club-elec.fr/mes_javascripts/dygraphs/ »+jsFileNameIn; // <=== serveur externe – modifier chemin ++ si besoin
                        //js.src = « http://127.0.0.1/javascript/dygraphs/ »+jsFileNameIn; // serveur local
                        //js.src = « http://web.archive.org/web/20210804223007/https://www.mon-club-elec.fr/pmwiki_mon_club_elec/javascript/rgraph/ »+jsFileNameIn; // chemin local  – fichier doit etre a la racine serveur
                        js.src = « http:// »+window.location.hostname+ »:80″+ »/javascript/dygraphs/ »+jsFileNameIn; // si utilisation server http local port 80

                        document.head.appendChild(js);                                  
                        //alert(js.src); // debug

                } // fin fonction path

                //—- fichiers a charger —                            
                path(‘dygraph-combined.js’); // fichier simplifiant acces a tous les fichiers de la librairie dygraph

                window.onload = function () { // au chargement de la page

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

                        // containing div
                        document.getElementById(« graphdiv »), // objet div utilise appele par son nom

                        // CSV ou chemin fichier CSV.

                        // donnees valides au format x,y1, y2, …, yn \n
                        // x = horodatage ou chiffre
                        // horodatages valides : voir http://dygraphs.com/data.html#csv
«  » »
        +
        dataGraph
        +
«  » »,

                        //– parametres a utiliser pour le graphique
                        {
«  » »
        +
        optionsGraph
        +
«  » »
                        } // fin parametres

                        ); // fin declaration Dygraph

                } // fin onload

        –>      
    </script>  

    <title>Test Dygraphs</title>

    </head>

    <body>

    <div id= »graphdiv »></div>
    <br />
    Test de graphique Dygraphs : affichage de n s&eacute;ries de donn&eacute;es par lecture d’un fichier

    </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 : https://raw.github.com/sensor56/pyduino-exemples/master/Ethernet/EthernetServerHTMLJSDygraphsFileDataxn.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 avec le code Javascript
  • Du côté client, la page HTML doit s’afficher : le code javascript va afficher un div dans la fenêtre du navigateur intégrant le graphique fourni par la librairie Dygraphs
  • 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
Programmer le pcDuino : Pyduino : Réseau : Serveur TCP/Http/Html/Javascript fournissant un graphique Dygraphs généré à partir d&rsquo;un fichier texte de n séries données.
  • 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 est au final très polyvalent car il pourra être exécuté en parallèle d’un code enregistrant des données dans un fichier. Il pourra également également, sans modification afficher 10 données ou 1440 !
  • Le code est de plus relativement compact pour le résultat obtenu.
Noter cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Archive Mon Club Elec

Articles populaires

Newsletter

Inscrivez-vous maintenant et bénéficiez d'un soutien continu pour réaliser vos travaux électriques en toute sécurité.