Horloge météo Arduino IoT (14 / 15 étapes)

É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.

Articles Liés

Arduino IOT : Température et humidité (avec WiFi ESP8266)

Arduino IOT : Température et humidité (avec WiFi ESP8266)

Bonjour à tous ! Je suis Michalis Vasilakis de www.ardumotive.com et dans cette Instructables, je vais vous montrer comment faire votre propre thermomètre de l'Internet des choses (IOT) à l'aide de la carte de Arduino uno.Vous pouvez l'utiliser à la
Faire une horloge précise d’Arduino n'utilisant qu’un seul fil - aucun matériel externe nécessaire !

Faire une horloge précise d’Arduino n'utilisant qu’un seul fil - aucun matériel externe nécessaire !

Comment faire une horloge Arduino - sans utiliser les oscillateurs externes ou puces d'horloge :(plusieurs de mes projets sur notre site de recherche - cliquez en haut de la page d'Accueil logo arduino)Vous aurez besoin :Une carte Arduino (à peu près
Prise de courant de grande laize de WiDo de monde!! L’ultime Arduino IoT DIY

Prise de courant de grande laize de WiDo de monde!! L’ultime Arduino IoT DIY

WWWWiDo est une prise de courant accessible depuis n'importe quel appareil avec un navigateur qui peut contrôler à distance un appareil branché et peut être étendue à la surveillance et d'automatisation de capteurs et d'actionneurs. Ce système est un
Automatisation d’Arduino IOT avec ESP8266

Automatisation d’Arduino IOT avec ESP8266

Il s'agit d'un projet d'automatisation de l'ITO. pas comme les autres qui récupère uniquement les données du capteur à internet. J'ai utilisé il technique pour contrôler les périphériques de lecture à celui web api utilisant wifi module esp8266. avec
Horloge anneau LED avec Arduino

Horloge anneau LED avec Arduino

Je regarde horloge de Fibonacci de pchretien la semaine dernière, j'ai décidé de partager mon projet d'horloge LED ring.Comme vous pouvez voir que le temps est représenté sur deux anneaux de LED WS2812.Dans la bague extérieure, il y a 24 LEDs, il mon
Horloge de mots simple (arduino)

Horloge de mots simple (arduino)

Il s'agit d'une version simplifiée de l'horloge de mots originaux de Doug--voir iciTous les crédits vont à lui et sa extrêmement bien construite code...!!J'ai juste modifié le code pour le faire fonctionner avec ICs plus fréquents et pour exécuter si
Raspberry pi & Arduino IOT Automation

Raspberry pi & Arduino IOT Automation

i, m revient avec un projet plus de l'ITO. Cette fois avec arduino et respberry pi 2 B +.comme nous le savons Rpi ont de grande puissance, la connectivité et les option d'affichage en comparaison avec arduino mais arduino ont grand d'e/s de contrôles
Stargate inspiré horloge imprimés 3D Arduino NeoPixel

Stargate inspiré horloge imprimés 3D Arduino NeoPixel

Le DHD Stargate horloge affichera l'heure à l'aide de NeoPixel LED construits autour d'un cadran simulée. L'horloge fournit un carillon toutes les heures et les demi-heures qui peut être activé ou désactivée. Les heures et les minutes réglable par bo
L’horloge de l’histoire : Arduino LCD w / capteurs de cap

L’horloge de l’histoire : Arduino LCD w / capteurs de cap

C'est encore une autre horloge LCD Arduino, mais avec une torsion ; Cette horloge connaît quelques fêtes et anniversaires, effectuent des calculs à la volée de quel âge une personne est et ensuite afficher les informations sur l'écran LCD. Je me suis
Horloge analogique/numérique - Arduino + PaperCraft

Horloge analogique/numérique - Arduino + PaperCraft

dans ce instructable nous va être recréer une horloge inspiré par le design original de Alvin Aronson. Quand j'ai vu cette horloge, que j'ai été très impressionné par Comment nettoyer un élégant la conception a été que tout de suite, j'ai voulu recré
Grande, auto dim, chambre horloge (en utilisant l’arduino et WS2811)

Grande, auto dim, chambre horloge (en utilisant l’arduino et WS2811)

Premier Bonjour instructables.Il s'agit de mon premier contact avec :InstructablesArduinoProgrammable LEDAlors s'il vous plaît ne pas trow rocks à moi pour les fautes de noobish.Que garder à l'esprit, que je suis en attente de lire vos commentaires a
Horloge de parquet « Atomique » Arduino

Horloge de parquet « Atomique » Arduino

J'ai voulu une horloge électromécanique n'exigeant pas de bobinage et de corriger toutes les semaines, mais qui avait l'air et semblait aussi original que possible.consultez mon site ici Site Web horloge de parquetCe Instructable montre comment ajout
Ajouter Bluetooth 4.0 à votre projet Arduino [IoT] - contrôlée par Smartphone

Ajouter Bluetooth 4.0 à votre projet Arduino [IoT] - contrôlée par Smartphone

Nous sommes le groupe d'internet de passionnés de choses qui aiment le piratage ensemble différents dispositifs. Découvrez notre projet en cours sur notre site Web et jetez un oeil à ce guide dans un format différent sur notre blog.Étape 1: Introduct
À l’intérieur d’entraînement moteur pas à pas avec Raspberry Pi & Arduino Iot

À l’intérieur d’entraînement moteur pas à pas avec Raspberry Pi & Arduino Iot

Bonjour tout le monde.Le but de ce projet consiste à utiliser une à l'intérieur d'entraînement moteur pas à pas avec le Raspbery Pi et Arduino. Ce genre de moteur pas à pas ont généralement petit écran et vous devez regarder vers le bas au cours de v