Instructables View Counter + Guide ESP8266 : 6 étapes (avec photos)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Les compteurs d'abonnés pour Youtube et Facebook sont assez courants, mais pourquoi ne pas faire quelque chose de similaire pour Instructables ? C'est exactement ce que nous allons faire: dans cet instructable, nous allons faire un compteur de vue Instructables !

Les vues devront être capturées à partir des interwebs, nous utiliserons donc le module WiFi ESP8266 commun (et bon marché) pour obtenir les informations requises. Il a besoin d'une certaine configuration, mais je vais passer par toutes les étapes nécessaires pour le faire fonctionner.

Pour garder le projet aussi accessible que possible (c'est-à-dire ne nécessitant pas d'imprimante 3D, de découpe laser ou d'accélérateur de particules), j'ai décidé d'utiliser Lego pour le boîtier ! Alors sortez ce bac de Lego et commençons à construire !

Étape 1: Pièces et outils

les pièces

• ESP8266 ESP-01
• MAX7219 Module d'affichage LED à 7 chiffres
• Dérivation FTDI compatible 3.3V (programmeur)
• En-têtes de broches
• Résistance 4x 10k Ohm
• 2x bouton poussoir
• 2x condensateur 10uF
• Régulateur 3.3V (LM1117-3.3V)
• cable USB
• Lego !

Coût total: < 10$

Outils

Fer à souder

Étape 2: Électronique

Commençons le projet en construisant le circuit.

L'électronique du projet n'est pas très compliquée, mais le module ESP8266 nécessite un traitement particulier pour le faire fonctionner. Alors tout d'abord, de quoi s'agit-il avec l'ESP ?

L'ESP8266 est surtout connu comme une puce WiFi à faible coût, mais il possède également une capacité d'unité de microcontrôleur à part entière. Cela le rend idéal pour les projets qui nécessitent le WiFi et le contrôle de composants externes comme notre écran à 7 segments. La programmation se fait avec un convertisseur USB vers série, également appelé convertisseur FTDI.

Schématique

Les composants peuvent simplement être connectés comme dans le schéma, mais un peu plus d'informations sont données ici.

Tout d'abord, l'ESP8266 fonctionne à partir de 3,3V, tandis que l'écran (et l'USB que nous utiliserons pour l'alimentation) fonctionne sur 5V. Cela signifie que nous aurons besoin d'un convertisseur de tension pour transformer le 5V de l'USB en 3,3V pour l'ESP8266.

Lors de la mise sous tension de l'ESP8266, il entrera dans l'un de ses "modes de démarrage", en fonction de la tension sur ses broches IO. En d'autres termes: si nous voulons qu'il exécute notre code au démarrage, nous devrons configurer ceci ! Pour l'exécution du programme, cela signifie:

• CH_PD à VCC
• RST à VCC
• GPIO0 à VCC
• GPIO2 vers VCC

Alors que pour la programmation de l'appareil, cela se traduit par:

• CH_PD à VCC
• RST à VCC
• GPIO0 à GND
• GPIO2 vers VCC

Comme on peut le voir, la seule différence est l'état de la broche GPIO0. Par conséquent, nous utiliserons un bouton poussoir pour connecter GPIO0 à GND lors de la programmation. Après le démarrage, les broches peuvent être utilisées librement, dans notre cas pour 2 choses:

1. En entrée: il y a un bouton connecté au GPIO2.
2. Conduire l'écran. Comme il a besoin de plus de 2 signaux, les lignes TX et RX seront également utilisées comme IO.

Maintenant que nous avons éliminé la théorie de fonctionnement, nous pouvons la traduire en une conception physique.

PCB

Pour faire le PCB, j'ai conçu un layout perfboard/stripboard dans KiCad (un logiciel de layout PCB open source). En réglant l'espacement de la grille sur 2,54 mm (0,1 pouce), vous pouvez créer des dispositions qui peuvent être soudées sur un stripboard.

Cela rend très facile de souder l'électronique ensemble: il suffit d'imprimer le design (inclus au format PDF) et de copier le design sur le stripboard. Utilisez des broches d'en-tête pour connecter l'écran, FTDI et ESP8266.

Après avoir soudé, coupez le panneau perforé à la bonne taille et branchez tous les composants. Avec l'électronique soudée ensemble, nous pouvons leur donner vie avec du code !

Étape 3: Programmation de l'ESP8266

Mise en place des bibliothèques

Avant de pouvoir télécharger du code sur la carte à l'aide de l'IDE Arduino, nous devrons ajouter ses bibliothèques. Cela peut être fait en suivant les étapes suivantes:

1. Allez dans Fichier>Préférences et collez le lien suivant dans la case "URL de gestion de carte supplémentaires":
2. Allez dans Outils> Cartes> Gestionnaire de cartes et recherchez ESP8266
3. Depuis cette fenêtre, installez le package le plus récent
4. Redémarrer l'IDE
5. Dans Outils> Cartes, sélectionnez "Module générique ESP8266" en tant que carte
6. Ouvrez le croquis et effectuez le rendu (ctrl+R) pour voir si le tableau a été ajouté correctement.

Téléchargement du code

Pour programmer notre appareil, nous devrons le mettre en mode programmation et le connecter à la carte de dérivation FTDI. Cela peut être fait en tirant les broches appropriées sur VCC ou GND et en effectuant les connexions comme indiqué ci-dessous.

• CH_PD à VCC
• RST à VCC
• GPIO0 à GND
• GPIO2 vers VCC
• RX à TX de FTDI
• TX à RX de FTDI

Heureusement, toutes les connexions ces connexions sont déjà présentes sur notre PCB. Je l'ai d'abord essayé sur une planche à pain, et comme vous pouvez le voir, c'est un peu maladroit. Donc pour télécharger le code:

1. Retirez l'écran et branchez le FTDI
2. Maintenez enfoncé le bouton de programme lors de la connexion du câble USB
3. Téléchargez le code. Après le téléchargement, "Set net" devrait être affiché

Erreurs possibles

Vous pouvez obtenir une erreur lors du téléchargement comme "error: espcomm_upload_mem_failed", il suffit de télécharger à nouveau le code. Si l'affichage reste vide à la mise sous tension, téléchargez également à nouveau le code.

Exécuter le code

Pour exécuter le code que nous venons de télécharger, le mode de programmation doit être désactivé en tirant la broche GPIO0 sur VCC. Ou dans notre cas, allumez l'appareil sans appuyer sur le bouton de programme.

Avec le code téléchargé et en cours d'exécution, nous pouvons maintenant configurer notre compteur de vues !

Étape 4: Configuration du compteur de vues

La configuration du compteur de vues se fait via une interface de page Web. Cela permet de modifier les paramètres à la volée au lieu d'avoir à recharger le code à chaque fois.

Configuration du serveur Web

1. Mettez l'appareil sous tension et attendez que "set net" s'affiche
2. Appuyez sur le bouton Mode, l'appareil affichera « configuration »
3. Sur votre PC, accédez à vos réseaux WiFi et sélectionnez "Instructables Hit Counter" (lorsqu'un mot de passe vous est demandé, entrez "mot de passe".)
4. Une fenêtre de navigateur devrait s'ouvrir (sinon, ouvrez-en une vous-même et tapez 192.168.4.1)
5. Une page s'ouvre, appuyez sur "Configurer WiFi"
6. Choisissez un réseau et saisissez votre mot de passe. Renseignez une IP statique, une passerelle et un sous-réseau
7. Appuyez sur Enregistrer, une page de confirmation apparaîtra

Maintenant que l'ESP8266 est connecté à notre réseau WiFi, nous pouvons remplir nos informations d'identification Instructable.

Configuration de l'utilisateur

1. Ouvrez un navigateur et saisissez l'adresse IP statique que vous avez choisie à l'étape précédente.
2. Allez dans l'onglet "Configuration utilisateur"
3. Remplissez votre nom Instructables et enregistrez
4. Pour voir les vues d'un Instructable spécifique, suivez les instructions sur la page
5. Appuyez sur Enregistrer, vos vues seront maintenant affichées !
6. Pour plus d'options, explorez les paramètres;)

Le compteur est maintenant entièrement fonctionnel, mais a toujours l'air un peu terne. Changeons cela en créant un cas génial!

Noter

Le code de ce projet vient de ce gars génial: https://www.instructables.com/id/Instructables-Hi… Tout le mérite du code lui revient, je l'utilise simplement pour créer ma propre version du projet. La principale raison pour laquelle j'écris ceci est parce que j'ai dû résoudre certaines choses ensemble pour le faire fonctionner (comme comment programmer l'ESP8266, ajouter les bibliothèques, obtenir l'ID instructables, faire le PCB, …) et je voulais faire un guide autonome complet.

Étape 5: boîtier

C'est la partie où vous pouvez devenir super créatif. N'importe quel cas peut fonctionner, mais en faire un beau peut faire ou défaire un projet. Par conséquent, j'ai décidé de faire le mien en Lego !

Montage de l'écran

Pour fixer l'écran en place, j'ai trouvé qu'un "panneau Lego sans support latéral" s'adapte parfaitement à l'écran. Il n'y a qu'un seul bémol: il est deux fois plus large que je le souhaiterais… Heureusement, cela se résout facilement en le coupant en 2. Nous avons maintenant un joli support pour l'écran, et un bon point de départ pour l'ensemble du boîtier !

Faire les lettres

Pour rendre plus évident qu'il s'agit d'un compteur de vues, j'ai voulu inclure une étiquette avec "vues". Mais ensuite je me suis dit, pourquoi utiliser une étiquette stupide quand on peut faire des lettres avec des Lego ? C'est ce que j'ai fait ! J'ai inclus un gros plan des lettres afin qu'elles soient plus faciles à reproduire.

Faire le robot

Je cherchais quelque chose pour terminer cette construction et suis tombé sur ce génial instructable:

Le robot instructables construit à partir de Lego, le compagnon idéal pour le compteur de vue ! Je n'entrerai pas dans les étapes détaillées de sa fabrication ici, car il est expliqué étape par étape dans l'original instructable. Notre petit compagnon est la touche finale à notre cas; avaient fini!

Étape 6: Testez et appréciez

Avaient fini! Il ne reste plus qu'à tester notre nouveau compteur de vues.

Connectez-le à un port USB et admirez vos vues ! J'espère que vous avez aimé le projet et que vous êtes inspiré pour faire quelque chose de similaire.

N'hésitez pas à consulter mes autres instructables: