Étape 14 : Mettre en place Freeboard.io
Nous approchons de la conclusion de ce projet ! La dernière tâche que nous devons terminer met en place Freeboard.io, le service, nous allons utiliser pour créer l’affichage d’horloge/météo ITO lui-même.
Premiers rendez-vous sur le site Freeboard.io et soit créent un compte que vous avez probablement fait avec des dizaines d’autres sites Web, ou connectez à l’aide de Twitter, Facebook ou GitHub. Une fois connecté, créer un franc-bord de nouveau à l’aide du bouton dans le coin supérieur droit de l’écran ; vous pouvez nommer ce qui vous plait.
Ajout de Sources de données
Vous devriez maintenant regarder un franc-bord vide. Nous allons commencer le processus de mise en place l’écran en ajoutant des sources de données. Sources de données sont des endroits d'où nos divers volets de franc-bord vont tirer des informations. Nous aurons besoin d’un total de trois sources de données :
Commencez par cliquer sur le bouton Ajouter dans le coin supérieur droit de l’écran. Dans le menu déroulant TYPE , choisissez horloge. Lorsque vous sélectionnez cette option, deux options supplémentaires seront affiche. Dans le champ nom , donner cette source de données, un nom qui vous permettra de différencier des autres sources de données, nous allons ajouter, j’ai nommé mine Datetime. Puis, dans le champ REFRESH EVERY , entrée 1 seconde, qui devrait être la valeur par défaut. Enfin, cliquez sur Enregistrer.
C’est une source de données vers le bas et deux à l’aller. Cliquez de nouveau sur le bouton Ajouter . Cette fois, dans la liste déroulante TYPE , sélectionnez Yahoo! Weather. Comme avant, un certain nombre d’autres domaines s’affiche lorsque vous sélectionnez cette option. Dans le champ nom , entrez météo. Dans le champ Code POSTAL CODE , inscrivez votre code postal. Dans le champ unités , choisissez impériales ou métriques, selon votre préférence. Dans le dernier champ, REFRESH EVERY, entrée 5 secondes. Puis cliquez sur Enregistrer.
Maintenant pour la source de données dernière et probablement la plus importante. Nous allons ajouter une source de données Dweet.io qui permettra aux Freeboard.io de tirer des informations poussées à Dweet.io de notre capteur Arduino IoT. Encore une fois, cliquez sur le bouton Ajouter dans le coin supérieur droit. Dans la liste déroulante TYPE , sélectionnez Dweet.io. Dans le champ nom , entrez Dweet.io. Puis, dans le champ Nom de la chose , saisissez le nom de chose, que vous avez utilisé dans votre sketch Arduino, tel que décrit à l’étape précédente. Le dernier champ, clé, restera vide sauf si vous avez payé pour une clé privée sur Dweet.io. Enfin, cliquez sur Enregistrer.
Ajout des volets
Maintenant que nous avons mis en place des sources de données, Freeboard.io sera en mesure d’accéder à toutes les informations que nous avons besoin de mettre en place l’affichage. L’écran lui-même utilise des volets, qui sont comme des fenêtres individuelles à l’intérieur de la page franc-bord que chacun affiche un élément de données de l’une des sources de données.
Pour ajouter notre premier volet, cliquez sur ADD volet dans le coin supérieur gauche de l’écran. Vous verrez une petite boîte blanche apparaissent sur l’écran de franc-bord. Ce premier volet va afficher notre intérieur niveaux sonores du micro sur le capteur de l’Arduino IoT. Cliquez sur l’icône de clé sur le volet nouvellement ajouté. Dans le champ titre , Intérieur son niveaud’entrée et dans le champ colonnes , entrée 3, qui fera de cette envergure de volet à travers la totalité de l’écran. Puis cliquez sur Enregistrer pour fermer la boîte de paramètres du volet.
Nous devons maintenant ajouter l’affichage capteur réelle vers le volet, qui est appelé un Widget. Le faire en cliquant sur le + (plus) icône dans le coin supérieur droit du volet, à côté de l’icône de clé. Dans la liste déroulante TYPE , sélectionnez graphique Sparkline. Dans le champ titre , entrez à l’intérieur de son niveau. Dans le champ valeur , nous allons sélectionner notre source de données Dweet.io, entrée datasources["Dweet.io"]["soundlevel »]. Dans la Légende incluent glisser le cabillot sur YES. Enfin, dans le domaine des Étiquettes de graphique SPARKLINE , entrée niveau sonore. Enfin, cliquez sur Enregistrer.
C’est un volet terminé. Nous aurons besoin d’ajouter un total de plus de quatre volets : météo, temps, à l’intérieur des conditions et à l’intérieur de l’intensité lumineuse. Pour ajouter notre volet suivant, cliquez de nouveau sur le bouton ADD volet . Comme avant un volet vierge apparaîtra en haut de la page. Cliquez et faites glisser le volet sous l’à l’intérieur de son niveau volet nous venons d’ajouter. Cliquez sur l’icône de clé et tempsd’entrée dans le champ titre . Laissez le champ colonnes 1.
Cliquez sur le + (plus) icône. Dans la liste déroulante TYPE , sélectionnez Text. Dans le champ titre , entrée Extérieur de température. Dans le menu déroulant taille , sélectionnez Big. Dans le champ valeur , entrez datasources ["météo"] ["current_temp"]. Attribuez le SPARKLINE comprennent les Animer les changements de valeur et Oui. Enfin, définir les unités pour correspondre à la valeur, impérial ou métrique, vous définissez pour la source de données météo de Yahoo! et cliquez sur Enregistrer.
Cliquez sur le + (plus) icône sur le volet météo à nouveau et l’entrée donnent toutes les mêmes valeurs que vous avez juste fait, sauf ce Widget un titre d’Humidité à l’extérieur et dans le champ valeur , entrez datasources ["météo"] ["humidité"].
Ensuite, nous allons créer l’affichage de l’horloge volet dans le centre du franc-bord. Encore une fois, cliquez sur le bouton de Volet ajouter pour créer un nouveau volet. Faites glisser le nouveau volet à droite du volet météo afin qu’il soit positionné au milieu de la page. Comme avant, cliquez sur l’icône de clé et nommez ce volet temps et lui donner une étendue de colonne de 1.
Cliquez sur le + (plus) icône pour créer un Widget pour ce volet. Dans la liste déroulante TYPE , sélectionnez le pointeur. Ce type de widget a deux valeurs, on détermine la direction de l’aiguille, l’autre détermine le texte à l’intérieur de l’affichage du pointeur circulaire. Pour obtenir notre affichage de l’horloge fonctionne correctement, nous allons utiliser un code JavaScript personnalisé dans les domaines de la DIRECTION et la Valeur TEXT . Cliquez d’abord sur la . ÉDITEUR de JS bouton du champ de la DIRECTION . Copiez et collez le code JavaScript ci-dessous dans la fenêtre.
Alors que fait ce code ? Eh bien, l’affichage du pointeur agit comme l’aiguille des heures sur une horloge analogique, avec l’aiguille en tournant autour du cercle une fois toutes les 12 heures. Donc, copiez le code suivant obtient l’heure et la minute puis calcule l’angle autour du cercle correspondant à cette heure.
Cliquez maintenant sur le . ÉDITEUR de JS bouton pour la zone de Texte valeur . Copiez et collez le code ci-dessous dans la fenêtre.
Ce code est simple. Il obtenir les horaires actuels et les minutes, puis affiche ces valeurs qu’ils apparaîtraient sur une horloge numérique normale.
Nous avons juste deux volets gauche pour créer, et ceux-ci seront simples. Le volet suivant, que nous allons faire est celui qui affiche la température intérieure et l’humidité. le processus de création de ce volet sera très similaire au volet météo, nous allons juste changer la source de données. Ainsi, ajouter un autre volet et placez-la à droite de l’horloge. Cliquez sur l’icône de clé et nommez le volet avec l’emplacement du capteur de l’Arduino, par exemple, les Conditions du premier étage. Ajouter un Widget sur le volet. Dans la liste déroulante TYPE , sélectionnez texte. Dans le champ titre , entrez < nom de salle > température. Dans le menu déroulant taille , choisissez Big. Puis, dans le champ valeur , entrez datasources["Dweet.io"]["temperature »]. Choisissez Oui pour les deux le champ Inclure SPARKLINE et Animer les changements de valeur . Enfin, définissez le champ unités pour faire correspondre les unités spécifiées dans le sketch Arduino sur la ligne 94.
Puis, répéter cette opération avec un autre Widget mais régler le champ de nom selon qu’il convient de dire "humidité" au lieu de "température" et dans le champ valeur , entrez datasources["Dweet.io"]["humidity »].
Bon, maintenant nous allons finir l’installation de Freeboard.io avec un dernier volet. Ajouter un autre volet de l’aide du bouton Ajouter volet et positionnez-le sous le volet de la météo. Cliquez sur l’icône de clé et donner le nouveau volet du titre, à l’intérieur le niveau de lumièreet dans le domaine de la colonne , entrez 3.
Puis ajouter un Widget sur le volet. Dans la liste déroulante TYPE , sélectionnez graphique Sparkline. Dans le champ titre , entrez à l’intérieur le niveau de lumière. Dans le champ valeur , entrez datasources["Dweet.io"]["lightlevel »]. Définissez le champ Inclure légende Oui. Enfin, dans le domaine des Étiquettes de graphique SPARKLINE , entrez niveau lumière.