Horloge d'animation SMART LED connectée au Web avec panneau de commande Web, synchronisation du serveur de temps : 11 étapes (avec images)

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

L'histoire de cette horloge remonte à plus de 30 ans. Mon père a lancé cette idée quand j'avais à peine 10 ans, bien avant la révolution des LED - à l'époque où les LED atteignaient 1/1000 de la luminosité de leur éclat aveuglant actuel. Véritable innovateur, il a codé en langage assembleur et câblé à la main chaque LED individuellement (un exploit impressionnant de patience et de détermination) ! Sa version originale fonctionne encore à ce jour.

Je voulais reprendre là où il s'était arrêté et tirer parti des avancées technologiques pour créer une belle horloge connectée au Web, colorée, amusante à jouer et pleine d'intérêt. C'est avancé au point où nous aimerions rendre l'horloge au public en tant que projet open source, mais aussi fournir des produits finis à ceux qui souhaitent acheter. Consultez notre campagne indiegogo si vous souhaitez soutenir !

L'horloge telle qu'elle se présente aujourd'hui a une multitude de fonctionnalités et est un produit entièrement fini et fonctionnel. Nous sommes très satisfaits du résultat, à la fois en termes de qualité et de fonctionnalité, mais également en termes de fonctionnalités et de stabilité. L'horloge se synchronise chaque minute avec un serveur de temps garantissant que l'heure sera toujours parfaite. Les utilisateurs n'ont besoin de régler le fuseau horaire qu'une seule fois, d'activer le mode d'heure d'été et ils n'auront plus jamais à se soucier de régler l'horloge à nouveau !

52 animations différentes avec une couleur, une vitesse et une luminosité réglables donnent à l'utilisateur un contrôle précis et une variation infinie. Les modes favoris sont enregistrés en mémoire. Des minuteries d'éclairage et des événements quotidiens peuvent être réglés, ce qui permet aux utilisateurs d'être visuellement avertis à l'heure sélectionnée. Des modes de vacances spéciaux peuvent ajouter de la fête à votre maison pendant Halloween, le Nouvel An ou Noël. Nous avons même un mode spécial pour le jour pi où l'horloge anime les chiffres de pi pour 100 chiffres toutes les heures.

L'horloge est alimentée par un nœud MCU ESP8266 connecté au Web et est programmée à l'aide du langage arduino et des bibliothèques c++ populaires fournies en standard dans la plate-forme arduino. Vous voulez en faire un ? Voici comment:

Étape 1: Assembler les matériaux

Voici une liste complète de tout ce dont vous aurez besoin avec les prix et les liens.

• Blanc de bois circulaire de 18" de diamètre 1" d'épaisseur - 10,40 $ - Lowes
• Acrylique diffusant la lumière - 5,79 $ + 6,55 $ Livraison = 12,34 $ d'Amazon
• (2) chaînes LED précâblées de 50 - 11,67 $ x 2 = 23,34 $ d'eBay
• LED à émission latérale - 26,62 $ d'Adafruit
• MCU de nœud ESP 8266 - 8,39 $ d'Amazon
• Pigtail 2,5 mm - 6,99 $ (lot de 10) d'Amazon
• Circuit imprimé de prototypage de 4 cm x 6 cm - 9,99 $ (lot de 10 - vous en aurez besoin de 1) d'Amazon
• Borniers - 7,99 $ (paquet de 20 - vous en aurez besoin de 5)
• 1x8 morceau de pin - 4,79 $ de Lowes
• 1/4 morceau de matériau de revêtement de sol en bois dur (pour le support) Numéro d'article 422633 - 10,48 $ de Lowes
• (1) alimentation 5v, 5a - 14,99 $ d'Amazon
• Matériau de support utilitaire de 2,7 mm (article 757295000023) - 10,98 $ de Home Depot
• (20) vis à bois noires #6 - 6,83 $ - Amazon
• Teinture et couche transparente. Finitions générales recommandées ! - environ 20 $ de Woodcraft
• (2) écrous noirs 1/4-20 (article 755801) - 1,38 $ de Lowes
• (2) vis à tête cylindrique noire 1/4-20 (article 755806) - 1,49 $

Prix total des articles répertoriés ici: 177,38 $

Outils nécessaires:

1. Machine cnc
2. Pistolet à colle chaude
3. Fer à souder
4. Dremel ou lime à main
5. Pince à dénuder

Étape 2: Familiarisez-vous avec la page Web

Cette partie est ce qui rend l'horloge à la fois amusante et cool. La page Web est divisée en quatre sections: Paramètres généraux, Couleur, Animations de sonnerie et Animations numériques.

• Paramètres généraux - Cette section comprend des réglages tels que l'heure d'été, le fuseau horaire, etc. Cette page propose également une option pour enregistrer et rappeler trois configurations d'horloge différentes. Cela permet à l'utilisateur d'enregistrer des scènes préférées. Tous les paramètres sont enregistrés dans l'eeprom (mémoire non volatile); De plus, les réglages actuels sont toujours sauvegardés afin qu'en cas de panne de courant, l'horloge reprenne là où elle s'était arrêtée.
• Options de couleur - Chaque aspect de l'horloge est personnalisable. Pour changer la couleur de n'importe quel élément, cliquez simplement sur le bouton correspondant à l'élément que vous souhaitez modifier, puis cliquez sur la roue des couleurs. L'intérieur de la roue chromatique est d'un blanc pur. À l'extérieur, la roue chromatique éteint la LED.
• Animations en anneau - Les animations en anneau sont des événements qui se produisent chaque minute (c'est-à-dire des animations qui font avancer l'aiguille des minutes) ou une activité intéressante comme un pendule. Choisissez parmi une variété d'options ici
• Animations numériques - Les animations numériques sont des affichages lumineux qui ne sont pas liés à un événement temporel. Au contraire, ils créent des humeurs ou de l'intérêt. Il y a 52 options différentes ici et elles peuvent être rendues encore plus intéressantes en ajustant la luminosité ou la vitesse à l'aide des barres de défilement.

Le html et le javascript de cette page sont inclus dans le code source hébergé sur github. Nous y viendrons dans un instant.

Étape 3: préparer les fichiers CNC

Les travaux de construction de la machine CNC sont pressés sur votre machine CNC. Mais comme tout le monde le sait, le travail CNC est configuré à 95 % et à 5 % de coupe ! Quelques mots sur la configuration sont importants ici.

Tout d'abord, il est essentiel d'avoir un appareil solide. Je choisis de maintenir le flan de bois avec ces pinces à came. Ils fonctionnent à merveille et sont très forts ! Pour qu'ils n'abîment pas le bois, j'ai mis quelques petits morceaux de caoutchouc entre la zone de contact et le bois (cela ne réduira pas la force de serrage). En plus d'être incroyablement solides, un autre avantage majeur de ces pinces est le fait que la hauteur totale de la pince est en dessous de la surface de travail, il n'y a donc jamais de risque de collision. Si vous ne disposez pas de ces pinces, du ruban adhésif double face peut fonctionner. Quelle que soit votre méthode, assurez-vous d'avoir de solides maintiens et un bon alignement du grain.

Remarque importante: vous devrez retourner l'horloge et la CNC des deux côtés de la machine, alors assurez-vous d'indexer votre morceau de bois. Assurez-vous que vous pouvez le retourner et être EXACTEMENT au même endroit. C'est essentiel pour couper une bonne horloge !

Maintenant, pour quelques notes sur le travail CAD et CAM.

Le fichier CAO (ProductionClockMaster.3dm) est un fichier Rhino3d et contient toutes les couches CAO nécessaires pour l'horloge. Si vous avez besoin d'un format plus générique, j'ai également inclus un export *dxf des couches avant et arrière de l'horloge. Cela devrait être toutes les informations dont vous avez besoin.

Le travail CNC CAM est divisé en 9 opérations CNC distinctes. Les fichiers gcode Mach3 réels sont inclus dans le référentiel GitHub ainsi que les fichiers VCarve qui les ont produits (si vous devez les ouvrir et les exporter à l'aide d'un post-processeur différent).

Tous les fichiers du projet sont disponibles sur GItHub. Voici comment interpréter les fichiers. Ils sont relativement explicites, mais voici une aide supplémentaire pour dissiper toute confusion possible. Les cinq premiers fichiers sont répertoriés par ordre d'opération de coupe. Le nom du fichier se termine entre parenthèses par la taille de l'outil de coupe. Ainsi, par exemple - 01_Rear Pockets_v1.8_(1-2 pouces)

• Ce nom de fichier commence par 01, c'est donc la première opération.
• Il découpera les poches arrière.
• Il s'agit de la version 1.8 (j'ai commencé avec 0.0 donc ça vous dit combien d'erreurs j'ai commises !)
• Utilisez un outil de coupe de 1/2 pouce

En plus de ces cinq opérations de bloc de bois, il y a deux opérations de support, une opération d'élément acrylique et une opération de plaque de couverture arrière.

Une opération qui est unique est l'opération CNC à rainure en T. Cela fournit un canal dans lequel les boulons du support de bureau peuvent glisser. Vous aurez besoin d'un embout pour rainure en T comme celui illustré sur la photo ci-dessus.

Encore une fois, si vous avez besoin de quelque chose d'autre que le post-processeur Mach3 standard, ouvrez les fichiers VCarve et exportez-les dans votre format local. La prochaine étape, nous allons réellement passer en revue la découpe du noyau et illustrer étape par étape à quoi devrait ressembler l'horloge à chaque étape.

Étape 4: Coupez le noyau de l'horloge, le support de bureau, les carreaux acryliques et le matériau de support

Voici quelques photos de chacune des pièces terminées au fur et à mesure qu'elles sortent de la machine. L'acrylique est la coupe la plus difficile car l'acrylique a tendance à fondre s'il fait trop chaud et il claque et se soulève s'il n'est pas maintenu solidement. Un cutter laser serait idéal si vous en avez un. Comme vous pouvez le voir sur la photo, j'ai fabriqué un gabarit spécial qui maintient fermement les quatre côtés. Le ruban adhésif double face serait probablement le meilleur pour cette opération, mais son retrait prendrait un peu plus de temps.

Étape 5: Personnaliser avec l'art du cadran et la finition

L'horloge peut très bien être utilisée sans cette étape mais c'est amusant de la personnaliser selon vos besoins ou vos goûts. Nous avons essayé beaucoup de conceptions différentes et le ciel est la limite ici. Nous aimerions voir des exemples de choses que vous proposez !

En termes de finition, nous avons essayé beaucoup de choses différentes, mais nous aimons la simplicité et la facilité de coloration. Nous aimons aussi la couche de finition General Finishes car elle est particulièrement facile à installer, durable et a fière allure! C'est le moment de le faire avant de commencer à installer l'électronique.

Astuce: n'oubliez pas de teindre également le support de bureau, la fiche de la plaque arrière et la plaque arrière en même temps. Il est facile de s'emballer et d'oublier ces pièces accessoires !

Étape 6: Assemblage des carreaux acryliques et du support

Après avoir appliqué la finition sur les pièces de bois, il est temps d'enfoncer les carreaux acryliques et d'assembler le support. Les carreaux acryliques sont des tolérances d'ajustement serré et ne nécessitent généralement aucun adhésif. Quelques-uns des carreaux peuvent nécessiter de petites quantités de ponçage ou de limage, mais généralement, ceux-ci appuient simplement en place et vous êtes prêt à partir. Si vous trouvez que certains d'entre eux sont trop lâches et tombent, nous utilisons quelques gouttes de colle scolaire Elmers blanche car elle est facile à appliquer, sèche parfaitement et offre une bonne adhérence. Le devant de votre horloge est maintenant COMPLET ! Prenez du recul et profitez.

Également à ce moment-là, vous pouvez également enfoncer dans le support les écrous 1/4-20 et lacer les boulons qui glissent le long des rainures en T. Déposez le support dans la base avec un peu de colle et votre support de bureau est maintenant prêt !

Étape 7: Installez les LED pré-câblées dans le noyau de l'horloge

Bon, on se rapproche ! La partie la plus chronophage de l'horloge est probablement d'appuyer sur les LED individuelles. Il y a un total de 100 LED dans cette partie de l'horloge et comme les LED sont disponibles en bandes de 50, vous aurez besoin de deux bandes connectées bout à bout. Les tolérances des cavités LED sont telles qu'elles sont fondamentalement ajustées par pression. Même si les tolérances d'ajustement à la presse maintiennent les LED en place, nous utilisons une petite (très petite touche) de colle chaude pour offrir une sécurité supplémentaire. Trop de colle et l'excès va s'échapper et bloquer les LED.

Après cette étape, de nombreuses boucles sortiront de l'arrière de l'horloge et devront être enfoncées pour que le panneau arrière s'adapte. Un peu d'air chaud provenant d'un sèche-cheveux rend les fils plus souples et plus faciles à plier. Encore une fois, l'utilisation de colle chaude maintient ces fils sécurisés.

Au total, ce processus prend environ 45 minutes à une heure. Voir les images ci-dessus pour voir à quoi devrait ressembler cette étape. Regardez aussi la vidéo amusante en accéléré ! Si seulement nous pouvions câbler aussi rapidement !

Étape 8: Assembler l'électronique

Le câblage électrique est à peu près facile à faire mais voici une explication détaillée. Nous avons trouvé que le moyen le plus simple de câbler est d'utiliser une carte proto de 4 cm x 6 cm (la taille de la cavité CNC) et d'installer des bornes à vis qui recevront les bandes LED ainsi que l'adaptateur d'alimentation CC. Nous avons essayé de souder de manière plus directe et non seulement c'est encombrant et difficile, mais cela rend impossible le retrait ou le remplacement des entrailles de l'horloge au cas où l'ESP8266 se casserait ou aurait besoin d'être mis à niveau. L'utilisation des en-têtes est plus flexible et, selon nous, plus facile.

Une fois les bornes à vis installées, suivez simplement le schéma de câblage pour connecter les bornes aux broches appropriées. Il n'y a pas de composants réels sur le PCB, seulement des traces des en-têtes aux broches ESP8266 appropriées.

La broche 4 est la broche pour les LED de l'anneau et la broche 2 est la broche pour les chiffres. Le positif va à VSS et le négatif va à la terre.

La seule autre chose nécessaire est une résistance de 300 ohms sur la broche de données de la bande LED. Dans chaque bande WS2812b que j'ai jamais vue (et j'en ai vu beaucoup), c'est la broche centrale. Cette résistance protège la bande contre les pointes de tension et les surtensions dangereuses qui pourraient causer des dommages ou un comportement imprévisible. J'ai négligé d'installer cette résistance et j'ai grillé la première LED de la bande (d'autres fois rien ne s'est passé et cela a parfaitement fonctionné). La résistance doit être ajoutée en ligne, ce qui signifie qu'elle fonctionne comme un maillon de la chaîne reliant la carte au fil de la LED. Certaines bandes LED ont ces résistances déjà installées et d'autres non. Si vous n'êtes pas sûr si votre bande LED en a une, allez-y et ajoutez-en une quand même. Il n'y a pas de mal à le faire. Assurez-vous d'ajouter cette résistance en ligne aussi près que possible du côté LED du fil de connexion PAS du côté PCB.

La cavité à l'arrière de l'horloge est conçue à deux fins. Soit il peut recevoir le corps d'un transformateur 5v pour un montage mural, soit il peut contenir une batterie en option. Illustré ici est une batterie 5v commune utilisée pour étendre la portée des appareils sans fil. Achetez simplement un adaptateur USB vers 2,5 mm et votre horloge est maintenant alimentée par batterie !

Vous devrez percer un trou de la cavité centrale au PCB pour recevoir la queue de cochon femelle DC. Cela se fait facilement en inclinant simplement votre foret. Assurez-vous de rester peu profond afin de ne pas percer le cadran de l'horloge ! L'opération de forage terminée est illustrée avec une queue de cochon soigneusement enveloppée dans la cavité.

Étape 9: Téléchargez le code

Le code de l'horloge se trouve sur la page github de brightlightart. Le code est constamment amélioré et bien commenté. Si vous n'êtes pas familier avec les fichiers *.ino, il s'agit d'un format de fichier Arduino et doit être compilé avec l'IDE Arduino. Une fois compilé, vous téléchargez via la prise microUSB standard de l'ESP8266. Si vous avez besoin d'aide pour savoir comment faire cela en utilisant l'ESP 8266, voici un excellent tutoriel sur la programmation avec cette interface populaire. C'est assez proche de la sortie de la boîte mais pas tout à fait !

A quoi servent ces différents fichiers ? Voici une ventilation de la structure de ces fichiers et de ce qu'ils font dans l'ensemble.

Dossier du serveur Web

Index.htm -Lorsque le code est initialement téléchargé sur l'ESP8266, une page de téléchargement vous sera présentée vous demandant de télécharger un fichier. Téléchargez le fichier index.htm. Ce fichier sert à la page Web - les autres fichiers du dossier sont hébergés sur brightlightart.com mais sont ici pour votre référence au cas où vous souhaiteriez modifier les feuilles de style/javascript et les héberger vous-mêmes

Dossier principal

• enLIGHTen-LED-Clock.ino - Il s'agit du fichier parent et provient de l'excellent projet McLighting. Le script a été fortement modifié par rapport à son état d'origine, mais nous sommes redevables à ce projet comme un excellent point de départ pour notre projet.
• colormodes.h - Gère la plupart des animations lumineuses sur l'anneau. Gère également les fonctions de temps.
• definitions.h - Définit la plupart des variables globales.
• request_handlers.h - Ceci communique avec l'ESP8266 et gère les demandes entrantes et envoie des informations à l'ESP8266.
• spiffs_webserver.h - Aide à servir et à interpréter la page Web. C'est le seul fichier sans changement par rapport au projet McLighting.
• WS2812FX.cpp - Gère les animations lumineuses sur les nombres. Ceci est presque entièrement tiré de l'excellente bibliothèque kitsurfer WS2812B. Le principal changement ici est l'ajout de fonctionnalités pour que l'aiguille des heures reste allumée
• WS2812FX.h - fichier d'en-tête associé à la bibliothèque WS2812fx. Ceci est en grande partie inchangé.

Fichiers d'inclusion supplémentaires

En plus des fichiers inclus ici, vous aurez besoin des bibliothèques suivantes. Ce sont des bibliothèques standard et facilement incluses en recherchant dans l'IDE.

• NtpClientLib.h
• DNSServer.h
• FS.h
• ESP8266mDNS.h
• EEPROM.h
• WiFiClient.h
• Ticker.h
• WiFiUdp.h
• WiFiManager.h
• WebSocketsServer.h
• WebSockets.h
• ESP8266WiFi.h
• Serveur Web ESP8266.

Étape 10: Configuration initiale de l'horloge EnLIGHTen et démonstration

Après avoir téléchargé le code source et mis sous tension pour la première fois, tous les voyants seront bleus statiques. Ceci est votre indication que l'horloge diffuse un point d'accès et attend que vous vous connectiez. À l'aide d'un téléphone, d'un ordinateur portable ou de tout autre appareil sans fil, analysez les réseaux à proximité (comme vous le feriez si vous essayiez de vous connecter à Internet dans un café). Dans la liste des réseaux disponibles, vous devriez en voir un intitulé « horloge ». Connectez-vous.

Une fois que vous vous connectez à ce réseau, il chargera automatiquement une page Web (encore une fois, comme une redirection que vous rencontreriez dans un café). Soyez patient car cela peut parfois prendre jusqu'à 30 secondes. La page Web vous demandera de rechercher les réseaux à proximité. Sélectionnez votre réseau domestique ou professionnel et fournissez-lui le mot de passe WiFi. Une fois que vous avez cliqué sur Soumettre, le mot de passe sans fil de votre réseau local sera enregistré en mémoire. Vous n'aurez à le faire qu'une seule fois. L'horloge va redémarrer.

Lorsqu'il redémarre, vous le verrez afficher une série de chiffres dans l'ordre. Les chiffres qu'il affiche sont l'adresse IP de la page Web à laquelle vous devez vous connecter. Ainsi, par exemple, il peut afficher 1, 9, 2,., 1, 6, 8,., 0,., 3, 1. Cela se traduit par https://192.168.0.31. Tapez cette adresse dans la page Web et vous devriez maintenant être connecté à votre horloge. Configurez et amusez-vous ! Encore une fois, l'horloge utilise la technologie Websocket, de sorte que toute modification que vous apportez doit être reflétée immédiatement sans qu'il soit nécessaire d'appuyer sur Enregistrer ou de mettre à jour la page Web. C'est très interactif et amusant à cet égard!

Si, pour une raison quelconque, vous perdez la connexion, actualisez simplement votre page Web. La plupart des routeurs conservent la même adresse IP pour les appareils connectés, mais de temps en temps, ils ont tendance à changer, alors faites attention au démarrage. Si vous avez besoin de vous rappeler l'adresse IP de la page Web, redémarrez simplement l'horloge.

Une fois que vous êtes à l'aise avec le fonctionnement du code, n'oubliez pas d'installer le support ! Les trous pré-percés facilitent l'alignement. Appuyez sur tous les fils qui se tiennent fiers et maintenant votre câblage est sécurisé et l'horloge a l'air très finie !

Étape 11: Créer, développer, soutenir et profiter

Nous aimerions voir autant de personnes construire et profiter de cette horloge que possible. Nous avons adoré ce projet et nous voulons que d'autres partagent l'expérience ! Nous nous sommes tellement amusés à résoudre des problèmes, à surmonter des obstacles, à éliminer des bugs et à être récompensés par une lumière amusante et significative. L'avantage que nous avons reçu de la communauté créative open source est inestimable et nous a encouragés à publier ce matériel source pour un apprentissage partagé, une amélioration continue et un plaisir technique. Nous aimerions connaître les versions réussies et les façons dont vous avez amélioré l'horloge enLIGHTen. S'il vous plaît envoyez-nous une ligne et laissez-nous savoir!

Tout le monde n'a pas le temps, les compétences, les outils ou les ressources pour construire une de ces horloges à partir de zéro, donc si vous êtes intéressé à acheter une horloge terminée, soit comme produit fini, soit comme base pour un développement continu, veuillez nous soutenir sur indiegogo.