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 : w2UI : Afficher dans un w2grid une série de données horodatées

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

1.  Présentation

Dans cette webapp d'initiation utilisant un tableau graphique (grid) w2UI, voyons comment afficher une série de valeurs horodatées au format JJ/MM/YYYY HH:MM:SS

2.  Ressources utiles

3.  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
  • 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

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

<div id="gridDiv" style="width: 100%; height: 250px;" ></div>

5.  Head : Inclusion des librairies utilisées

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

6.  Head : Code Javascript de la page

        $(document).ready(function(){

        // initialisation tableau w2ui grid
        $('#gridDiv').w2grid({ // integre le grid dans le div dedie + parametrage du Grid
                name: 'grid',
                header: 'Données horodatées',
                show: {
                        toolbar: true,
                        footer: true
                }, // fin show
                multiSearch: true,
                searches: [
                        { field: 'recid', caption: 'ID ', type: 'int' },
                        { field: 'date', caption: 'Date', type: 'date' },
                        { field: 'heure', caption: 'Heure', type: 'text' },
                        { field: 'val1', caption: 'Valeur'},
                ], // fin search
                columns: [
                        //{ field: 'recid', caption: 'ID', size: '20px'},
                        //{ field: 'date', caption: 'Date', size: '120px', render: 'date' },
                        { field: 'date', caption: 'Date', size: '120px'},
                        { field: 'heure', caption: 'Heure', size: '20%' },
                        { field: 'val1', caption: 'Valeur', size: '30%' }
                ], // fin columns
                records: [ // les records doit utiliser le memes champs que columns
                        { recid: 1, date: '06/10/2014', heure: "12:05:32", val1: '235'},
                        { recid: 1, date: '06/10/2014', heure: "12:06:32", val1: '240'},
                        { recid: 1, date: '06/10/2014', heure: "12:07:32", val1: '260'},
                        { recid: 1, date: '06/10/2014', heure: "12:08:32", val1: '270'},
                        { recid: 1, date: '06/10/2014', heure: "12:09:32", val1: '287'},
                        { recid: 1, date: '06/10/2014', heure: "12:10:32", val1: '298'},
                        { recid: 1, date: '06/10/2014', heure: "12:11:32", val1: '302'}
                ] // fin records
        }); // w2grid


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

7.  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.