Étape 3: HTML5 et JavaScript
Le fichier index.html , servi par le serveur de node.js à http://localhost: 8080 affiche un panneau de contrôle. Dans le panneau, un menu de configuration s’affiche sur la gauche côté et l’écran de toile sur le côté droit, avec une ligne de résumé sous la configuration. La toile auto-s’adapte à l’écran et utilisez les boutons de zoom +/-vous permettre d’exploser la forme d’onde et défiler à travers elle. La ligne de synthèse fournit une brève traduction en anglais de ce qui arrivera lorsque vous appuyez sur Start. Le menu de configuration est une correspondance 1:1 les fonctionnalités de sketch Arduino : chaque contrôle correspond à une commande de configuration TTY auquel répond l’Arduino. Nous vous en dirons plus sur les contrôles plus tard au cours de l’esquisse de l’Arduino. Pour l’instant, il est seulement important de se rappeler que les contrôles d’entrée sont convertis en une chaîne de commande et envoyés à l’Arduino, lorsque vous appuyez sur le bouton Démarrer .
Le code JavaScript situé dans controls.js communique dans quatre directions :
- HTML5 pour Client/JS : clics sur l’écran sont gérés par plusieurs gestionnaires de jQuery .on('click')
- Client/JS à HTML5 : Client/JS met à jour la boîte de résumé, l’état du bouton Démarrer/attente et la toile
- JS/client vers serveur : JS/Client envoie des requêtes AJAX au serveur pour lancer l’échantillonnage
- Serveur au Client : le serveur envoie les données vers la Client/JS via push asynchrone socket.io
Chaque fois que vous appuyez sur un contrôle, les mises à jour de barre de statut avec une description de ce qui vont se passer, et le cas échéant, un temps estimer. En appuyant sur Start entraîne la JS à compiler les contrôles d’entrée dans une chaîne de commande et l’envoyer au serveur et change le bouton commencer à attendre. (Actuellement il n’y a aucun moyen d’arrêter l’exécution, étant donné que l’Arduino ignore le port série en échantillonnage.)
Fin de l’échantillonnage, le serveur envoie les données au client JS à l’aide d’un coup de pouce socket.io asynchrone. La dernière étape dans le gestionnaire de pousser restitue les données de la toile et basculez le bouton attendre à Démarrer.
Un objet de JavaScript de singleton nommé viewport gère la toile et restitue les données des canaux. Pendant render(), l’objet fenêtre ajuste les données pour s’adapter à l’écran, puisque la toile peut gérer les coordonnées de sous-pixel joliment. Cela signifie que si l’Arduino prélevé des échantillons de plus que la largeur de l’écran, les formes d’onde peuvent apparaître sous forme de blocs solides. Pour résoudre ce problème, j’ai ajouté des boutons de zoom pour agrandir les données.
Remarque :
J’avais initialement codé marqueurs et un axes de temps, mais j’ai enlevé les parce que le code a faire sauter. Je voulais que le code soit aussi petite que possible. Je vais laisser au lecteur d’effectuer des modifications esthétiques. Cependant, ayant un axe de temps améliore-t-il utilisabilité lorsque le zoom : vous ne perdrez pas votre place aussi facile. Au lieu de cela, j’ai ajouté quelques simples rectangles gris entourant les ondes de canal, rendant plus facile à identifier les signaux qui ne changent pas haute et basse.
