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 : Simple : Afficher un message dans une zone texte sur clic bouton

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

1.  Présentation

Dans cette webapp d'initiation simple, voyons comment afficher un message dans une zone texte sur un clic bouton.

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

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

<button style="width:50px; height:25px;" id="button">OK</button>
<br>
<textarea rows="4" cols="50" placeholder="Cliquer sur le bouton..." id="textarea"></textarea>

4.  Head : Inclusion des librairies utilisées

<script src="static/jquery.min.js" type="text/javascript"></script>

5.  Head : Code Javascript de la page

var compt=0;

$(document).ready(function(){

        $("#button").click(function(){

                compt=compt+1;

                if (compt==1)$("#textarea").append(compt + " Clic bouton"+"\n");
                else $("#textarea").append(compt + " Clics bouton"+"\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 function + fin action + fin $

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

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