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 w2sidebar la liste des fichiers d'un répertoire et le nom du fichier sélectionné dans une zone texte

Mini-webapps avec Pyduino
Par X. HINAULT - Créé le 19/11/2014

1.  Présentation

Dans cette webapp d'initiation utilisant w2UI, voyons comment afficher une liste de fichiers dans un panneau graphique et afficher le nom du fichier sélectionné dans une zone texte.

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="sidebarDiv" style="width: 25%; height: 600px;" ></div>
        <br>
        <textarea rows="10" cols="50" placeholder="Sélectionner un fichier" id="textarea"></textarea>
 

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(){


                $('#sidebarDiv').w2sidebar({ // integre le sidebar dans le div dedie + parametrage du sidebar
                name: 'sidebard',
                img: null,
                nodes: [
                        { id: 'level-1', text: 'Liste des Fichiers :', img: 'icon-folder', expanded: true, group: true,
                          nodes: [
{ id: 'data_2014_09_01.txt', text: 'data_2014_09_01.txt', img: 'icon-page' },
{ id: 'data_2014_09_02.txt', text: 'data_2014_09_02.txt', img: 'icon-page' },
{ id: 'data_2014_09_03.txt', text: 'data_2014_09_03.txt', img: 'icon-page' },
{ id: 'data_2014_09_04.txt', text: 'data_2014_09_04.txt', img: 'icon-page' },
{ id: 'data_2014_09_05.txt', text: 'data_2014_09_05.txt', img: 'icon-page' },
{ id: 'data_2014_09_06.txt', text: 'data_2014_09_06.txt', img: 'icon-page' },
{ id: 'data_2014_09_07.txt', text: 'data_2014_09_07.txt', img: 'icon-page' },
{ id: 'data_2014_09_08.txt', text: 'data_2014_09_08.txt', img: 'icon-page' },
{ id: 'data_2014_09_09.txt', text: 'data_2014_09_09.txt', img: 'icon-page' },
{ id: 'data_2014_09_10.txt', text: 'data_2014_09_10.txt', img: 'icon-page' },
{ id: 'data_2014_09_11.txt', text: 'data_2014_09_11.txt', img: 'icon-page' },
{ id: 'data_2014_09_12.txt', text: 'data_2014_09_12.txt', img: 'icon-page' },
{ id: 'data_2014_09_13.txt', text: 'data_2014_09_13.txt', img: 'icon-page' },
{ id: 'data_2014_09_14.txt', text: 'data_2014_09_14.txt', img: 'icon-page' },
{ id: 'data_2014_09_15.txt', text: 'data_2014_09_15.txt', img: 'icon-page' },
{ id: 'data_2014_09_16.txt', text: 'data_2014_09_16.txt', img: 'icon-page' },
{ id: 'data_2014_09_17.txt', text: 'data_2014_09_17.txt', img: 'icon-page' },
{ id: 'data_2014_09_18.txt', text: 'data_2014_09_18.txt', img: 'icon-page' },
{ id: 'data_2014_09_19.txt', text: 'data_2014_09_19.txt', img: 'icon-page' }
]
                        }
                ], // fin nodes

                onClick: function (event) {
                        //alert('id: ' + event.target);
                        $("#textarea").val(event.target);

                } // fin onclick

        }); // w2sidebar

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

7.  La webapp complète :

L'archive complète de la webapp est , 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.