Ce chapitre montre comment afficher la valeur du potentiomètre sur une page html sans avoir à taper une URL, mais en exécutant un fichier index.html.

Afficher la valeur d'un potentiomètre sur une page nécessite trois fichiers (cliquer sur les liens pour télécharger les fichiers ici .

Procédure pour tester les programmes:

1 - télécharger le programme potentiometre.ino dans la carte.

2 - Créer un dossier nommé arduino, puis créer dans ce dossier un dossier nommé www. Placer ensuite les fichiers index.html et zepto.js dans ce sous-dossier.

3 - Placer la carte SD dans l'emplacement de la carte arduino Yun.

4 - Se connecter en Wifi sur la carte.

5 - Ouvrir un navigateur internet et taper l'url  192.168.240.1/sd/index.html pour accéder à la page de visualisation.

 Voici le fichier html:

   Pour que la valeur donnée par le potentiomètre puisse être transférée du serveur (carte arduino Yun) vers le serveur (ordinateur sur lequel on visualisera la page Web), on doit utiliser une bibliothèque javascript zepto.js (ligne 6). Sans cette bibliothèque, la ligne 9 ne pourrait pas s'effectuer.

ligne 13: la fonction refresh (javascript) s'effectue toutes les secondes (1000 millisecondes), à partir du moment où la page est chargée.

ligne 15: la valeur du potentiomètre (content) s'affiche dans la page web. Un délai d'attente est nécessaire. Avant l'apparition de la valeur du potentiomètre, la phrase "Waiting for Arduino..." s'affichera.

ligne 9: on demande au microcontroleur d'envoyer la valeur du potentiomètre dans l'élément "content"

 

Voici le fichier potentiometre.ino:

Ce programme fait tout d'abord appel à trois bibliothèques (Bridge, YunServer, YunClient).

La carte arduino Yun dispose d'un serveur web. Si il y a une requête d'un client (page web) et que cette requête consiste à connaître la valeur du potentiomètre ( if (command=="valeur") ), cette valeur va être renvoyée à la page web ( client.print(val); )

Pour des expications détaillées, cliquer ici, pour accéder a un excellent tutoriel en anglais!

Accéder aux activités

Les programmes ci-dessous vont permettre d'afficher la valeur du potentiomètre sur une jauge.

Vous pouvez télécharger le dossier des programmes ici.

Le programme arduino est identique à celui du paragraphe précedent.

Pour pouvoir effectuer la suite, il faut avoir effectué l'activité Jauges RGRaph: http://www.mytopschool.net/mysti2d/activites/polynesie2/SIN/08/jauges/index.html

Le programme index.html est le suivant:

• La ligne 16 assure le lien avec le programme arduino et permet de récupérer la valeur du potentiomètre dans "content".
• "content" une chaine de caractères. Les lignes 16 et 17 permettent d'effectuer la transformation de cette chaine en un nombre
• les lignes 18 à 23 créent la variable gauge.
• La ligne 29 permet d'afficher la valeur du potentiomètre (content). Tant que cette valeur n'a pas été transmise, "Waiting for Arduino..." apparaîtra.
• la ligne 31 permet de dessiner dans le canevas "cvs", la jauge.

Accéder aux activités

 Le but des programmes ci-dessous vont permettre de commander une led à partir de deux boutons ("LED ON" et "LED OFF").

 Vous pouvez télécharger les programmes ici.

 Voici le programme html:

 Si l'utilisateur clique sur le bouton LED ON, la fonction ledon est exécuter (ligne 17): Elle permet d'envoyer au programme arduino la commande "ledon" (ligne 8)

 S'il appuie sur le bouton LED OFF, la commande "ledoff" est envoyé au programme arduino.

Voici le proramme arduino:

 On lit ce qui est envoyé par le processeur (programme html): String command=clientReadString;

 Si la commande envoyée par le programme html est "ledon" (if command=="ledon")), on allume la led (digitalWrite(led,HIGH);).

 Si la commande envoyée par le programme html est "ledoff", on éteind la led.