MagPI 10 Page 4
Caméra robot télé-opérée – Seconde partie"
NIVEAU DE DIFFICULTÉ : AVANCÉ
Bâtir l'interface
Bâtir votre propre interface est également facile, se basant sur un fichier HTML incorporant du Javascript. Vous n'avez qu'à charger le fichier webiopi.js depuis votre fichier HTML pour accéder à la puissance de WebIOPi. Créez un nouveau fichier index.html à côté de votre script Python :
<html> <head> <title>Caméra robotisée</title> <script type="text/javascript" src="/webiopi.js"></script> <script type="text/javascript"> // Le code Javascript va ici </script> </head> <body> <div id=”box" align="center"> </div> </body> </html>
Notez bien le / au début pour le chargement de webiopi.js, pour s'assurer qu'il sera recherché à la racine du serveur, sinon il pourrait ne pas être trouvé. J'ai laissé un espace vide dans le script ; nous utiliserons la bibliothèque WebIOPi JS à cet endroit. Il y a aussi une balise DIV, qui contiendra les commandes.
Dans la zone réservée au script, nous ajoutons une fonction d'initialisation pour bâtir l'interface en utilisant la bibliothèque WebIOPi. Elle contient de nombreuses fonctions pour faciliter la création de boutons qui commandent la GPIO. Ici nous utilisons un bouton basique pour appeler une fonction différente selon qu'on le presse ou le relâche. Chaque fonction appelle une macro différente sur le serveur. N'oubliez pas d'enregistrer la fonction d'initialisation de WebIOPi. Elle sera appelée quand tout est chargé et prêt.
function init() {
var button =
webiopi().createButton(
"bt_up", // id
"/\\", // label
go_forward, // presser
stop); // relâcher
$("#box").append(button);
}
function go_forward() {
w().callMacro("go_forward");
}
function stop() {
w().callMacro("stop");
}
webiopi().ready(init);
