Tableau de bord Web Arduino Live Wifi: 9 étapes (avec photos)

Tableau de bord Web Arduino Live Wifi: 9 étapes (avec photos)

Table des matières:

Anonim

Dans ce tutoriel, je vais expliquer comment j'ai créé un tableau de bord numérique avec des LED, un grand écran à matrice de points et des totaux numériques à 8 chiffres. L'appareil utilise une puce WiFi pour se connecter à Internet afin d'obtenir des valeurs d'état telles que les totaux et les comptages en temps réel, ainsi que des états tels que l'activation / désactivation des voyants. L'appareil est alimenté par un adaptateur d'alimentation USB générique. Sous le capot, il utilise une carte compatible Arduino Mega, facilement disponible, économique et qui communique bien avec les puces ESP8266.

Le tableau de bord est fabriqué à partir d'une boîte en bois, avec des charnières et un clip pour permettre l'accès aux éléments internes en cas de besoin. L'utilisation de l'alimentation est minime. Si vous utilisez l'appareil 24 heures sur 24, 7 jours sur 7, avec des connexions WiFi, chaque minute coûtera moins de 1 euro.

Provisions:

Étape 1: ce dont vous aurez besoin

1 x boîte en bois (4,50 € dans un magasin local)

1 x clone Arduino Mega - J'utilise les cartes Elegoo personnellement (11,50 € d'Amazon)

1 x série de 4 écrans à matrice de points (15 € d'Internet - bien que je l'ai déjà vu pour 5 €)

1 x paquet Sugru (1,65 € 1 sur 8 pour 13 € d'Amazon)

2 écrans à 7 segments à 8 chiffres (4 € pour 2 - ou 12 € pour livraison le lendemain)

1 x Collection de résistances de 220 ohms (0,25 € - le pack coûte 5 €).

3 x LED RVB (0,18 € - partie du paquet de 50 coûtant 3 €)

1 x puce ESP8266 (5 €)

1 commutateur de niveau 5v <> 3.5v (1,50 €)

1 x peinture en aérosol noir mat (boîte de 2 euros dans un magasin local).

1 x petite planche à pain

Câbles et broches 'DuPont' - (3 € - généralement inclus dans tout pack de démarrage)

Accès à une perceuse, un cutter, un câble USB

Le coût est donc d’environ 50 euros - bien que les pièces existantes puissent être réutilisées, et commander par l’intermédiaire d’Aliexpress, par exemple, permettrait de réduire les coûts à près de 30 euros.

Le projet prend 4 à 8 heures à compléter, y compris l’attente du séchage de la boîte.

Étape 2: Préparation des voyants RVB

La préparation des diodes électroluminescentes RVB (diodes électroluminescentes rouge-vert-bleu) prend beaucoup de temps, mais est satisfaisante une fois terminée. J'utilise des LED RVB pour me permettre de montrer différentes couleurs en utilisant la "même" LED. En réalité, ces LED RVB contiennent 3 LED à l'intérieur et en contrôlant chaque lumière, vous pouvez obtenir un mélange de couleurs.

Chaque LED a besoin d'une résistance dans le circuit, j'utilise des résistances de 220 ohms avec mes LED et je n'ai jamais eu de problème. D'autres tutoriels peuvent suggérer des valeurs différentes, utilisez les résistances que vous voulez, mais n'oubliez pas de les inclure, sinon vous brûleriez vos LED.

Je n’entrerai pas dans les détails sur les LED car des tutoriels comme celui-ci ont parfaitement couvert le sujet.

Ce que vous devez faire est de souder une résistance à chacune des trois branches les plus courtes de votre LED RVB. J'aime utiliser un dispositif d'aide tel que celui-ci. Enroulez d’abord les fils ensemble, puis soudez la connexion, attendez environ 30 secondes et vous devriez trouver que les fils sont fortement attachés les uns aux autres. Finalement, vous voudrez couvrir la connexion avec du ruban isolant ou une gaine thermorétractable.

Dans la deuxième image, vous pouvez voir mes trois DEL RVB, après avoir soudé trois résistances, puis des fils supplémentaires qui iront à l’Arduino. De plus, j'ai soudé un fil à la broche commune, qui retourne au rail de terre.

À ce stade, vous souhaiterez connecter les voyants à votre Arduino et tester leur fonctionnement. Je vous recommande de suivre tout tutoriel sur les LED RVB et de parcourir les couleurs pour vérifier que vos LED fonctionnent comme vous le souhaitez.

Dans mon cas, j'ai remarqué que le voyant vert était beaucoup plus lumineux que le voyant rouge. Cela semble être assez commun. Si cela pose un problème, vous pouvez envisager une résistance de valeur supérieure pour le voyant vert.

Une fois que vous avez 3 DEL RVB que vous pouvez contrôler et qui affichent les couleurs rouge, vert et bleu, passez à l’étape suivante.

Étape 3: Préparation des affichages LED à matrice de points et à 7 segments

Bien que l'affichage de voyants verts / rouges soit utile pour afficher des informations booléennes telles que vrai / faux, activé / désactivé, oui / non, pour que notre tableau de bord soit vraiment intéressant, nous allons vouloir afficher certains chiffres. Je vais utiliser deux composants différents pour montrer des informations, ils sont liés à un tel point que nous pouvons réellement les câbler en séquence et utiliser un nombre très minime de broches sur notre carte Arduino.

L’affichage à 8 chiffres présenté sur l’image est similaire à celui-ci. C’est extrêmement courant dans les packs de démarrage Arduino et, bien que les couleurs varient, le composant MAX7219 permet de définir les 8 chiffres avec seulement 5 broches. Sans le composant MAX7219, nous aurions besoin d'un grand nombre de broches et de résistances pour définir chaque chiffre à 7 segments, ce qui prendrait une éternité et utiliserait la plupart, sinon toutes nos broches Arduino. Un autre avantage de cette conception d’affichage 7 segments à 8 chiffres est qu’ils peuvent être chaînés en série, ce qui signifie que vous pouvez en avoir jusqu’à 8 en séquence, à nouveau contrôlés par seulement 5 broches.

L’affichage à matrice de points est une grille de diodes électroluminescentes qui est en fait un affichage à basse résolution. Nous choisissons celui qui est allumé et nous pouvons donc dessiner des formes simples, des lettres et des chiffres. Ici, j'utilise un composant spécial, à savoir quatre de ces écrans matriciels connectés entre eux. Cela nous donne un affichage 32 x 8, sur lequel nous pouvons afficher des informations. Cela compte pour 4 éléments de notre chaîne de 8, vous pouvez donc en utiliser deux ou, dans mon cas, en mélanger un avec des écrans à 7 segments. Pour ce tableau de bord, j'en utilise deux, ce qui porte à 6 le nombre total de composants chaînés. Tous pilotés à partir de 5 broches sur ma carte Arduino, ce qui inclut une pour 5v et une pour la terre. Assez efficace je pense!

Je vais approfondir le code requis pour piloter ces composants et afficher des informations utiles dans une étape ultérieure. Pour l'instant, assurez-vous que les composants sont connectés à votre carte Arduino et suivez peut-être un simple tutoriel (il en existe de nombreux) pour vous assurer que vos composants fonctionnent.

Étape 4: Préparation de notre enceinte

Pour ressembler à la pièce, notre appareil doit être confortablement installé dans un boîtier, où il peut vivre et ressembler à de l'électronique grand public, plutôt qu'à un projet de foire scientifique. La plupart des appareils modernes, tels que les téléviseurs, les téléphones mobiles et les lecteurs Blu-ray, utilisent des boîtiers en plastique en raison de leur nature légère et de leur forme homogène. Nous allons utiliser du bois, qui est plus lourd et plus fragile, mais pour nos besoins, cela fonctionnera parfaitement.

J'ai cherché sur Internet et dans des magasins de bricolage sans fin pour trouver la boîte à projets idéale. Finalement, j'ai trouvé la boîte de projet idéale dans un «magasin de bazar chinois» ici en Espagne. Celles-ci sont gérées universellement par des Chinois (d'où son nom) et stockent une vaste gamme de produits, presque tous importés de Chine. Ils sont une mine d'or pour les objets utiles. En fin de compte, j’en ai trouvé un qui contenait une telle gamme de boîtes qu’il s’agissait de la solution idéale pour mon projet de tableau de bord. Le prix était également excellent, à seulement 4,50 €.

La boîte est en contreplaqué, ce qui signifie qu’elle est solide, mais qu’elle est également facile à découper à l’aide d’un cutter. J'ai essayé d'utiliser une scie sauteuse et une scie, mais j'ai finalement trouvé qu'il était préférable de couper des fenêtres dans ces boîtes en utilisant un simple cutter. Mon ensemble de coupe-boîte ne coûte que 2 € dans le même magasin.

Pour mon projet, j'ai décidé de disposer de 3 LED RVB, régulièrement espacées au bas du tableau de bord. J'ai simplement utilisé une règle pour mesurer des points équidistants, puis une perceuse électrique pour créer un trou. Je devais expérimenter légèrement pour obtenir le bon morceau de perceuse pour les DEL. Vous devrez peut-être en créer un d'abord, puis insérer une DEL pour voir si elle est bien ajustée. Poussez rapidement la perceuse tout en maintenant la boîte à l'aide de deux colliers. Si vous n'avez pas accès à une pince, un ami pourrait le faire! Bien que je recommande fortement d’investir dans deux pinces de ce type, elles se rembourseront facilement au fil des ans.

Ma perceuse a été achetée au prix de 29,99 € dans un magasin de bricolage typique, ce n’est rien de spécial, vous n’avez vraiment besoin d’aucune perceuse électrique de base pour ces projets. J'imagine que ça va durer 20 ans, donc encore une fois, c'est très bon marché à long terme.

L’affichage dox-matrix et les composants à 8 chiffres à 7 segments auront besoin de fenêtres dans votre boîte. Encore une fois, j’ai utilisé une règle de base et un crayon pour mesurer les tailles et dessiner l’emplacement des fenêtres sur la boîte. Réfléchissez bien à ce stade, vous voudrez vous assurer que vos étalages sont bien espacés, la création de deux fenêtres rapprochées dans votre boîte pourrait provoquer la casse du bois. Je recommanderais au moins 15 mm entre les fenêtres, sinon plus.

Selon le nombre de broches disponibles sur votre Arduino, vous pouvez ajouter plusieurs fenêtres ou même plusieurs trous pour les DEL. Les cartes compatibles Arduino Mega ont beaucoup de broches disponibles, si vous utilisez une carte compatible Arduino Uno, vous serez beaucoup plus limité.

À ce stade, vous souhaiterez vérifier quelle carte vous utilisez, en déterminant son emplacement dans la boîte. La raison en est que vous devrez découper un trou pour le câble et le port USB. Je vous recommande d'utiliser le port USB pour l'alimentation, car vous pourrez alors vous connecter à un ordinateur en cas de besoin pour télécharger facilement un nouveau micrologiciel sur votre appareil. L'utilisation de la prise d'alimentation cylindrique présente des avantages minimes et vous aurez toujours besoin d'un moyen d'accéder au port USB ou aux broches série internes pour télécharger un nouveau micrologiciel. En résumé, lorsque vous utilisez une carte compatible Uno ou Mega, il est vivement recommandé de découper un trou pour le port USB et de le laisser tel quel.

La prochaine étape consiste à peindre votre boîte. J'ai utilisé de la peinture en aérosol bon marché que j'ai pu acheter pour seulement 2 euros par canette. Cela va durer plusieurs projets et le coût par projet est donc beaucoup moins élevé. Placez votre boîte dans un carton plus grand et sortez-la, vaporisez-la soigneusement, attendez 30 minutes environ, puis retournez-la soigneusement si elle semble avoir séché. Pulvériser le reste de la boîte. Vous voudrez peut-être attendre quelques heures que la boîte sèche avant de lui appliquer une seconde couche de peinture. Attendre que la boîte soit sèche est ennuyeux et donc peut-être travailler du côté logiciel du projet pendant le séchage.

Vous obtiendrez éventuellement un boîtier très élégant, avec des fenêtres de taille correcte pour vos composants et une petite sortie sur le côté pour le port USB de votre carte compatible Arduino.

Étape 5: Montage de vos composants

Après de nombreuses expériences avec des vis et des douilles de montage, du ruban adhésif et de la colle, j'ai découvert Sugru. Je vous recommande fortement de vous épargner de nombreuses heures avec des pièces de forage, des entretoises et des clous, etc., et d'investir dans du sucre. Pour ceux qui ne l'ont pas encore découvert, il s'agit essentiellement d'un mastic de style «blu-tac» que vous pouvez façonner entre vos mains, à la différence qu'il durcit après quelques minutes et colle à un très grand nombre de surfaces, notamment bois et Arduino conseils et composants. Vous placez une petite quantité de pois au dos de votre article et poussez-le fort sur le bois. En 24 heures, cette connexion sera solide et étonnamment difficile.

Sugru n’est pas bon marché, loin de là, mais si vous tenez compte de l’économie d’argent économisé sur les pots de vis et les entretoises, cela représente en fait un très bon rapport qualité-prix.

Prenez votre carte compatible Arduino et un paquet de Sugru, étalez un peu de mastic et placez des gouttes sur le dessous de votre carte, puis poussez la carte fermement en place de sorte que votre port USB s'aligne correctement avec le trou sur le côté. de votre boîte.

Maintenant, je ne recommanderais pas de fixer vos composants en place tant que vous n'êtes pas certain qu'ils fonctionneront. Comme ce tutoriel est divisé en sections distinctes, je vais supposer que vous êtes revenu à cette partie après avoir su que votre tableau de bord fonctionnait correctement.

Les affichages à 8 chiffres peuvent être montés à l’aide de Sugru sur la partie en plastique du câble de connexion, et éventuellement de Sugru par le biais d’écarts entre le composant et la fenêtre de votre boîtier. Assurez-vous que vous les avez montés dans le bon sens! Vous pouvez les manipuler en toute sécurité lorsque votre appareil est allumé. Je vous conseillerais donc de le faire pour vous assurer de placer les composants correctement. Vous pouvez lire votre écran pendant que vous le montez pour vous assurer à 100% qu'il est dans le bon sens.

Plus tard dans ce tutoriel, vous verrez pourquoi nous utilisons une planche à pain et deux autres puces. J'ai monté la planche à pain à l'aide de son support collant, qui colle très bien au bois, et de la bande adhésive pour maintenir la puce WiFi afin de l'empêcher de bouger trop.

Vous voudrez peut-être utiliser de la colle chaude pour fixer les fils à votre planche à pain. Je ne l'ai pas fait mais j'ai entendu dire que cela fonctionnait très bien. Cela peut être nécessaire si vos fils ne sont pas bien calés dans votre planche à pain.

Étape 6: Utilisation de la puce ESP8266

Notre tableau de bord doit se connecter à Internet pour que les données s'affichent sur nos composants LED. Les cartes compatibles Arduino Mega ou Uno ne contiennent pas de Wi-Fi intégré. Nous devons donc utiliser un composant supplémentaire pour connecter notre projet à Internet.

La puce ESP8266 est merveilleuse, à environ 6 $ aux États-Unis, ou 2 pour 10 euros ici en Europe, son rapport qualité-prix est extrêmement bon. Il s’agit en réalité d’un SOC (système sur puce) complet, ce qui signifie qu’à bien des égards est en réalité un «autre composant de style Arduino», vous pouvez télécharger du code sur l’appareil et l’utiliser seul. Dans ce projet, nous souhaitons toutefois l’utiliser avec notre carte compatible Arduino, les informations étant transmises de la puce ESP8266 à notre carte centrale.

Cette tâche est plus compliquée qu’elle pourrait être due au fait que l’ESP8266 tourne à 3,3 v et non à 5 v comme notre carte Arduino Mega. Cela signifie que les signaux envoyés depuis l'ESP8266 ne peuvent pas simplement être connectés aux broches numériques de notre Arduino et nous ne pouvons pas alimenter l'ESP8266 à partir de la broche 5v de notre Arduino.

Heureusement, nous avons une broche 3.3v sur notre Arduino qui convient à l’alimentation de l’ESP8266. Cependant, il reste encore le problème des broches de données. Pour résoudre ce problème, nous devons utiliser un convertisseur de niveau. Cette petite puce prend le courant, la terre et plusieurs fils de communication et émet les mêmes signaux après avoir été abaissés à 3,3 v. Cela signifie que les signaux de notre carte Arduino sont convertis en une tension utilisable par la carte ESP8266, et inversement au retour.

Comme cette configuration implique plusieurs fils et de multiples connexions aux broches d'alimentation, j'ai utilisé une carte d'identité. Cela nous permet de monter la puce de convertisseur au-dessus de la division de la planche à pain et d’avoir la moitié supérieure notre zone «5v» et la moitié inférieure notre zone «3,3v». Les rails d'alimentation de chaque côté portent 5v ou 3,3v, et les rails au sol sont eux-mêmes connectés ainsi que notre Arduino.

Pour me connecter à la puce ESP8266, j'utilise une bibliothèque écrite par Wu Pengfei - ce sont deux fichiers, ESP8266.cpp et ESP8266.h. Cela facilite la connexion à la puce et rend la requête relativement simple.

La plupart des explications de mon code viennent à côté du code lui-même, je ne vais donc pas entrer dans les détails au cours de cet Instructable. Cependant, en réalité, notre interface avec la puce consiste à créer une requête HTTP complète en une seule chaîne, à vous connecter au serveur Web à l'aide de TCP, puis à envoyer notre requête. Nous attendons ensuite la réponse, que nous plaçons dans une chaîne, puis extrayons les données de la chaîne, dans un format que nous comprenons déjà.

Mon tableau de bord traite d’un service en ligne que j’ai créé. Votre tableau de bord importera des données provenant d’une autre source. Cela peut être un serveur Web local fonctionnant sur votre réseau domestique ou un site Web sur Internet, le processus est identique. Si vous regardez à peu près la ligne 490, vous verrez comment je le fais. Ma méthode est basée sur des exemples trouvés sur Internet.

Étape 7: Câblage de l'appareil

Le diagramme ci-contre montre comment je brancher mon tableau de bord. Remarque: je n'ai pas essayé de créer un dialogue parfaitement reproductible, ceci est pour vous donner un aperçu de ce que je fais.

Vous verrez que le câblage de la puce ESP8266 passe par le convertisseur de niveau qui est attaché à la planche à pain.

Plusieurs fils sont nécessaires pour chaque LED, car ce sont des LED RGB, ce qui signifie que nous avons besoin d'un fil pour R (rouge), G (vert) et B (bleu). De plus, nous avons un fil de retour sur le rail de terre.

Heureusement, nous pouvons mettre en série les écrans à matrice de points et les composants numériques à 7 segments, ce qui signifie qu'un seul jeu de câbles est nécessaire.

De plus, vous constaterez que les câbles d'alimentation 5v et 3,3v vont à la fois à la carte de visite et au convertisseur.

J'avais envisagé de passer d'une maquette à une solution plus permanente, telle qu'un protoboard, mais au final, cette solution fonctionne bien pour ce projet. Si vous avez une planche à pain de bonne qualité, et (plus important encore) des fils de connexion 'Dupont' de bonne qualité, vous pouvez faire beaucoup de chemin.

J'ai lu que certaines personnes aiment recouvrir la planche à pain et les fils avec de la colle chaude, ce qui la maintiendrait fixe. La colle chaude séchée n'est pas un bon conducteur, le circuit ne devrait donc pas être affecté. Je n'ai pas encore essayé cela, mais c'est certainement une chose à considérer. En outre, plus de Sugru pourrait être utilisé pour maintenir les câbles de démarrage en place.

Étape 8: logiciel

Le logiciel fonctionnant sur la puce du microprocesseur est bien sûr essentiel au fonctionnement du tableau de bord. Cela nécessite de contrôler la puce ESP8266 et de demander des données mises à jour à Internet, puis d'interpréter ces données et de les afficher visuellement sur nos écrans à LED.

J'ai inclus le code source complet pour mon tableau de bord, vous devrez entrer vos propres identifiants WiFi (évidemment!) Et les diriger vers une page Web différente. Je n'entrerai pas dans les détails du côté serveur Web, car il s'agit d'une solution extrêmement flexible qui vous obligerait à créer la solution appropriée à votre problème.

Ma page renvoie une chaîne très simple, sous la forme: | $ | 1 | 1 | 0 | 51 | 36 | 2 | 2 | 1 |

Je cherche d'abord le '| $ |' motif, si je vois cela, alors je peux supposer que j’ai le bon début de ma chaîne. Ensuite, je me déplace dans la chaîne, en plaçant ce que je trouve dans de nouvelles chaînes, qui sont ensuite transformées en nombres entiers. Quand je trouve un '|' personnage, je sais que je suis sur le prochain. Vous pouvez voir exactement comment je fais cela dans le code.

Ensuite, nous devons mettre à jour les variables locales qui sont conservées dans notre tableau de bord. Vous aurez besoin d'une variable pour chaque élément d'information que vous souhaitez afficher. Dans mon cas, il s'agit de "serveur 1 d'accord", "serveur 2 d'accord", "tâche périodique effectuée", "utilisateurs actuels", "systèmes actuels", "utilisateurs quotidiens", "systèmes quotidiens".

Après avoir ré-extrait la page toutes les 60 secondes et converti la chaîne renvoyée par le serveur Web en une série de nombres, j'ai alors mis à jour mon tableau de bord avec les nouveaux numéros.

Pour les statuts de serveur et les statuts cron, il s’agit simplement de définir la couleur de l’une des DEL. Pour moi, vert signifie succès, rouge signifie échouer et bleu signifie qu'il y avait un problème de connexion.

Les deux affichages à 7 chiffres et à 7 segments sont tous deux divisés en segments de 4 chiffres. J'émets ensuite mes 4 données sur eux. Ceci est légèrement plus compliqué qu'il n'y paraît, car j'ai besoin de convertir un nombre entier en chiffres réels pour la colonne des 100, 10 et la colonne des chiffres de l'affichage. Comme vous définissez chaque chiffre séparément, cela est nécessaire. Vous pouvez voir dans le code comment j'ai abordé ce problème.

L'écran central à matrice de points affiche des informations qui changent toutes les 2 secondes. J'ai une fonction appelée displayMatrix qui configure l'un des 4 écrans pour afficher une "image" que j'ai stockée dans le tableau IMAGES. Ce tableau est intéressant car il a été généré par une page Web plutôt que par moi-même.

Je vous recommande vivement d'utiliser l'éditeur de matrice de LED. Cette page facilite grandement la création d'images au format 8x8 qui s'afficheront correctement sur vos composants à matrice de points. L'utilisation de la page est extrêmement simple, si vous cliquez sur le lien, vous obtiendrez l'éditeur avec les images de mon tableau de bord déjà chargées. Comme vous pouvez le constater, il suffit simplement de cliquer sur les points pour déterminer s'ils sont activés ou non. Vous pouvez facilement ajouter plus d'images ou déplacer l'ordre en le faisant glisser. Après avoir apporté vos modifications, marquez la page avec vos favoris pour pouvoir y revenir.

Dans le coin supérieur de l'éditeur, vous verrez la définition en code pour vos images. Copiez-le et collez-le dans votre "croquis" Arduino. Examinez le code de la fonction displayMatrix pour voir comment il parcourt les valeurs pour définir le voyant correspondant dans le composant.

Ceci résume assez bien le code de mon tableau de bord, des explications supplémentaires sont disponibles dans le code source lui-même. Si vous avez des questions, merci de les poser dans les commentaires.

Étape 9: Idées supplémentaires et résumé du projet

J'espère que vous avez apprécié la lecture de ce didacticiel et que vous êtes en mesure de créer votre propre tableau de bord Arduino WiFi. Je pense que ce qui est formidable dans ce projet, c'est qu'il peut être personnalisé de nombreuses manières. J'avais besoin de rapporter des données d'utilisateur en direct à partir d'un service Web, vos besoins seront probablement très différents.

Voici quelques idées de tableaux de bord que j'ai eu:

Un tableau de bord sportif montrant les scores actuels, peut-être utile pour un tournoi sportif scolaire.

Un moniteur de prix Bitcoin en direct, comprenant également les taux de conversion traditionnels, et éventuellement les valeurs boursières.

Un tableau de bord en temps réel, montrant les températures dans différentes villes, peut-être en parcourant des dizaines de villes en affichant une par seconde.

Nombre d'abonnés YouTube en direct

Résultats sportifs réels extraits d'un site sportif en direct tel que Livescores.com ou de quelque chose comme ESPN.

Les possibilités sont infinies. Je vous souhaite bonne chance dans vos projets. S'il vous plaît laissez des commentaires ci-dessous.