View  Edit  Attributes  History  Attach  Print  Search

ACCUEIL | ARDUINO > S'INSTALLER > DEBUTER > APPROFONDIR | PROCESSING | MECATRONIQUE | MATERIEL | OUTILS | TESTS | Plus...|
Python > Shell > ATELIERS Python + Qt > PyQt apps > PyQt+Arduino | Mes Robots | RepRap | Mes lib'Arduino | Mes shields Arduino | Mes distros | Les Mini-PC |
ATELIERS ARDUINO| VIDEOS | COMPRENDRE | REFERENCES | CODER | TECHNIQUE | GNU/LINUX | LIENS | Rien à voir |

Webapps d'initiation : Ajax : Ouvrir un fichier daté à partir d'un Datepicker par réponse Ajax

Mini-webapps avec Pyduino
Par X. HINAULT - Créé le 05/09/2014

1.  Présentation

Dans cette webapp d'initiation utilisant jQuery UI, voyons comment ouvrir un fichier daté à partir d'un Datepicker par réponse Ajax

2.  Structure type de la webapp

Comme cela est présenté dans les tutos dédiés, je rappelle que la structure type de la webapp est la suivante :

  • un seul répertoire incluant :
    • librairies utilisées
    • la page html de la webapp
    • le code serveur Pyduino opérationnel incluant la fonction d'envoi de réponse Ajax
  • la page HTML de la webapp incluant :
    • la définition des éléments graphique au niveau du body
    • l'inclusion des librairies utilisées
    • le code Javascript actif de la page incluant la fonction de gestion de la réponse Ajax

3.  Pré-requis

3.1  Créer une série de fichiers datés de test

A des fins de test, on pourra créer une série de fichiers datés du mois courant avec le code Pyduino suivant :

filenameList=list() # crée list de fichier
for jour in range(1,31):
    if jour<10 : filename="data_"+year()+"_"+month()+"_0"+str(jour)+".txt"
    else: filename ="data_"+year()+"_"+month()+"_"+str(jour)+".txt"

    print filename
    filenameList.append(filename) # ajoute le fichier à la list

print filenameList

dirname=mainPath()+dataPath(TEXT)
print dirname

for filename in filenameList:
    print filename
    myFile=open(dirname+filename,'w') # crée le fichier
    myFile.write("contenu du fichier "+ filename[5:-4]) # ecrit la date dans le fichier
    myFile.close()
 

3.2  Créer une série de fichiers datés de test contenant des séries de données horodatées

Encore mieux, on pourra créer une série de fichiers datés contenant chacun une série de 1440 données horodatées aléatoires de test :

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

import datetime as dt
from pyduino_light import *

# variables horaires utiles
hh=str(hour())
mm=str(minute())

# datetime de référence = date courante
refTime=dt.datetime(int(year()), int(month()), int(day())) # date a utiliser - heure 00:00:00 si pas precise
print refTime

dirname=mainPath()+dataPath(TEXT)
print dirname

# création d'une list de nom de fichiers
filenameList=list() # crée list de fichier
for jour in range(1,31):
        if jour<10 : filename="data_"+year()+"_"+month()+"_0"+str(jour)+".txt"
        else: filename ="data_"+year()+"_"+month()+"_"+str(jour)+".txt"

        print filename
        filenameList.append(filename) # ajoute le fichier à la list


        # datetime de référence = date courante
        refTime=dt.datetime(int(year()), int(month()), jour) # date a utiliser - heure 00:00:00 si pas precise
        print refTime

#for filename in filenameList:
        print "Création du fichier " + filename
        myFile=open(dirname+filename,'w') # crée le fichier

        # écriture des 1440 valeurs randomisées dans le fichier
        for t in range(1440) : # defile 1440 minutes theoriques
                dataValue=str(random(0,1023)) # genere une valeur aleatoire entiere

                dataTime=refTime+dt.timedelta(0, t*60) # jours, secondes - ici toutes les minutes

                # format de donnees utilise : JJ-MM-YYYY hh:mm:ss , val \n
                dataLine=str(dataTime)+","+dataValue+"\n" # format datetime automatique  JJ-MM-AAAA hh:mm:ss
                #print dataLine - debug
                myFile.write(dataLine) # ecrit la ligne dans le fichier

        myFile.close()

#print filenameList
 

4.  Body HTML : définition des éléments graphiques de la page

<div id="div"></div><br>
<textarea rows="4" cols="50" placeholder="Cliquer sur une date..." id="textarea"></textarea>

5.  Head : Inclusion des librairies utilisées

<script src="static/jquery.min.js" type="text/javascript"></script>
<script src="static/jquery-ui/jquery-ui.js" type="text/javascript"></script>
<link href="static/jquery-ui/jquery-ui.css" rel="stylesheet" type="text/css">

6.  Head : Code Javascript de la page

$(document).ready(function(){

        $( "#div" ).css({"font-size":"60%"}).datepicker({
                inline: true,

                onSelect:function(dateText, inst) {

                        //param=dateText.replace(/\//g, '_'); // remplace toutes les occurences
                        dateList=dateText.split('/');
                        filename="data_"+dateList[2] + "_" + dateList[0]+ "_" + dateList[1];
                        param="file("+filename+")"
                        //alert(param);

                        $.get("ajax/"+param, manageReponseAjaxServeur); // envoi d'une requete AJAX

                } // fin onSelect
        });


}); // fin function + fin ready + fin $

7.  Ajax : Code Python "côté serveur" : Envoi de la réponse Ajax

def reponseAJAX(paramIn):

        print "paramIn="+paramIn # debug

        filepath=mainPath()+dataPath(TEXT)+paramIn+".txt"
        print filepath

        try:
                dataFile=open(filepath,'r') # ouvre fichier
                data=dataFile.read()
                dataFile.close() # ferme fichier
        except:
                data="Pas de fichier pour cette date"

        # la reponse
        reponseAjax=( # debutreponse AJAX
data
)  # fin reponse AJAX

        return reponseAjax
 

8.  Ajax : Code Javascript "côté client" : Gestion de la réponse Ajax


function manageReponseAjaxServeur(dataIn){

        //dataIn=parseInt(dataIn);
        $("#textarea").append("ajax : " + dataIn+"\n");
        $("#textarea").get(0).setSelectionRange($("#textarea").get(0).selectionEnd-1,$("#textarea").get(0).selectionEnd-1); // se place en derniere ligne -1 pour avant saut de ligne

} // fin fonction de gestion de la reponse AJAX
 

9.  La webapp complète :

L'archive complète de la webapp est disponible ici, incluant :

  • La page HTML complète
  • Le serveur Pyduino opérationnel
  • Les librairies utilisées

Remarque : le serveur pyduino suppose que la librairie Pyduino et ses dépendances soient installées.