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 de test

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 un w2grid de test.

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: 'List of Names',
                show: {
                        toolbar: true,
                        footer: true
                }, // fin show
                multiSearch: true,
                searches: [
                        { field: 'recid', caption: 'ID ', type: 'int' },
                        { field: 'lname', caption: 'Last Name', type: 'text' },
                        { field: 'fname', caption: 'First Name', type: 'text' },
                        { field: 'email', caption: 'Email', type: 'list', options: { items: ['peter@gmail.com', 'jim@gmail.com', 'jdoe@gmail.com']} },
                        { field: 'sdate', caption: 'Start Date', type: 'date' }
                ], // fin search
                columns: [
                        { field: 'fname', caption: 'First Name', size: '30%' },
                        { field: 'lname', caption: 'Last Name', size: '30%' },
                        { field: 'email', caption: 'Email', size: '40%' },
                        { field: 'sdate', caption: 'Start Date', size: '120px' }
                ], // fin columns
                records: [
                        { recid: 1, fname: "Peter", lname: "Jeremia", email: 'peter@mail.com', sdate: '2/1/2010' },
                        { recid: 2, fname: "Bruce", lname: "Wilkerson", email: 'bruce@mail.com', sdate: '6/1/2010' },
                        { recid: 3, fname: "John", lname: "McAlister", email: 'john@mail.com', sdate: '1/16/2010' },
                        { recid: 4, fname: "Ravi", lname: "Zacharies", email: 'ravi@mail.com', sdate: '3/13/2007' },
                        { recid: 5, fname: "William", lname: "Dembski", email: 'will@mail.com', sdate: '9/30/2011' },
                        { recid: 6, fname: "David", lname: "Peterson", email: 'david@mail.com', sdate: '4/5/2010' }
                ] // 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.