Étape 4: Client side (le navigateur)
Nous allons maintenant travailler avec notre/public dossier, là, nous allons ajouter l’index de notre application et les fichiers JS qui rendent dynamique, alors allons-y :
Tout d’abord, créez un dossier nommé « actif » et à l’intérieur, créez deux plus nommé « lib » et « styles », sur le dossier/lib, mettre « bootstrap », jquery et les fichiers p5, ceux-ci nous aidera à approcher notre objectif et bootstrap à regarder sans heurt et p5 jquery pour ajouter des fonctionnalités personnalisées et un graphique pour suivre la température de la maison.
Puis, dans le dossier principal (/ public) créez un fichier nommé index.html, vous pouvez vérifier la mienne et collez-le si vous voulez et après avoir terminé l’instructable personnalisez pour vous et amusez !
Après que vous avez votre fichier d’index il doit y avoir également deux fichiers javascript, l’un d’eux pour contrôler l’interface avec jquery et une autre pour créer un graphique montrant la température en temps réel. Aussi, nous allons commencer à travailler avec socket.io en ce moment.
Socket.IO est une librairie JS puissante pour générer des applications web en temps réel, nous en profiter et utiliser pour émettre des événements de l’Arduino-serveur pour le client et vice versa, vous pouvez consulter la documentation de socket.io ici et il y a aussi beaucoup d’exemples sur la façon de l’utiliser. Nous allons continuer à nos fichiers précédemment mentionnés.
Un seul fichier s’appellera script.js et doit contenir les éléments suivants :
Ici, nous traitons les événements de l’interface utilisateur (clic et un curseur) et avec eux émettant messages par l’intermédiaire de sockets qui seront reçus sur le serveur et feront Arduino travailler basé dessus.
Dans l’autre dossier, que nous allons nommer « temperature_canvas_sketch » nous allons afficher les données que nous avons obtenues de la sonde de température à l’aide de p5.js, une grande bibliothèque JS basée sur traitement lang. Donc dans notre fichier temperature_canvas_sketch.js ajoutons ceci :
Cela prendra soin de dessiner un graphique avec les données que nous envoyons, dans ce cas est de montrer la température direct de notre maison.
Mais maintenant que nous avons prises sur le client et non pas dans le serveur, nous devons y retourner et ajoutez-les à travailler correctement, alors allez.
temperature_canvas_sketch.js script.js