Arbre de Noël contrôlé par le site Web (tout le monde peut le contrôler) : 19 étapes (avec photos)

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

Vous voulez savoir à quoi ressemble un sapin de Noël contrôlé par un site Web ?

Voici la vidéo présentant mon projet de mon sapin de Noël. La diffusion en direct est maintenant terminée, mais j'ai fait une vidéo, capturant ce qui se passait:

Cette année, à la mi-décembre, j'étais allongée dans mon lit, essayant de dormir au milieu d'une semaine de travail. Et au lieu de dormir, je pensais à ce que serait un projet de Noël sympa à faire. Et puis une idée géniale m'a frappé.

Comme je suis paresseux avec les décorations de Noël, ce serait cool de laisser quelqu'un d'autre contrôler mes lumières de Noël, donc je n'aurai pas à m'en soucier.

« Et si je fabriquais des lumières de sapin de Noël que TOUT LE MONDE pourrait contrôler via une interface de site Web ? »

(insérer deux semaines de nuits blanches)

Alors je l'ai fait.

Un sapin de Noël avec vingt LED RGB connectées à internet via ESP8266 Arduino.

Un de mes amis (merci JP) m'a aidé à créer un site Web (puisque je ne suis pas un programmeur fluide pour les choses liées au site Web).

Et nous avons mis en place un flux en direct youtube 24h/24 et 7j/7 de mon arbre afin que vous puissiez voir ce que vous activez ou désactivez à tout moment.

Ce projet est idéal pour cette année, car beaucoup d'entre nous étaient en confinement, incapables de se rencontrer et de socialiser avec leurs amis et leur famille. Pourquoi ne pas s'unir via l'arbre de Noël:)

Dans ce Instructable, je vais expliquer en détail comment ce projet a été réalisé.

Étape 1: Niveau de compétence

Ce projet est plus orienté logiciel. Mais n'ayez pas peur Un peu de chance et l'aide de l'oncle Google vous aideront énormément:)

Il vous faudra un ensemble de 3 compétences (ou vous les apprendrez sans soucis): une partie serveur web, la partie Arduino et sapin de Noël bien sûr !

Connaissances recommandées:

• Compétences de base en informatique et en programmation

• Connaissance de base des terminaux Linux

• Connaissances de base des réseaux informatiques

• Connaissances de base en électronique

• Compétences pour utiliser Google et d'autres capacités « spéciales »

• Devrait savoir comment mettre en place un arbre de Noël:)

Si vous avez un certain sens de la technologie et de la programmation, vous devriez pouvoir apprendre à configurer cette chose selon ce Instructable.

Étape 2: Outils et composants

Côté sapin, il vous faudra:• Sapin de Noël (d'oh…)

• Une carte micro-contrôleur NodeMCU

(vous pouvez également utiliser ESP32 ou d'autres cartes compatibles Wi-Fi ou Ethernet)

• Bande LED RVB adressable. La bande led RGB adressable économisera beaucoup de GPIO Arduino (https://www.sparkfun.com/products/11020)

• Logiciel pour le NodeMCU (fourni dans ce instructable)

Côté serveur, vous aurez besoin de:

• Un serveur privé virtuel avec IP publique. Ici, vous obtenez 100 $ gratuits sur DigitalOcean

• Un domaine (facultatif) que vous pouvez enregistrer auprès de n'importe quel bureau d'enregistrement, par exemple

• Code dédié (fourni avec ce Instructable)

Étape 3: Configurer la machine virtuelle (ordinateur) PARTIE 1

Passons directement au codage:)

Nous avons besoin d'un serveur qui communiquera avec le site Web et NodeMCU.

Les serveurs sur DigitalOcean nous permettent d'avoir une machine virtuelle avec une adresse IP publique, ce qui signifie que nous pouvons y exécuter des services et y accéder dans le monde entier.

Une fois que vous avez payé un abonnement mensuel DigitalOcean (vous pouvez utiliser un essai gratuit de 60 jours), créez un projet et nommez-le un arbre de Noël ou ce que vous voulez.

Vous pouvez maintenant créer votre machine virtuelle (ordinateur virtuel accessible à distance) en cliquant sur "Commencer avec un droplet" (qui est essentiellement le nom de DigitalOcean pour une machine virtuelle).

Une page de configuration s'affichera et vous pourrez rester avec une valeur par défaut: image Ubuntu, plan de base et aucun stockage en bloc (5 $/mois)

Étape 4: Configurer la machine virtuelle (ordinateur) PARTIE 2

Une région de centre de données est l'endroit où votre serveur sera créé.

Choisissez le plus proche de vous et de vos utilisateurs potentiels. Cela fournira le temps de réponse le plus bas.

De plus, dans la section Authentification, il vous sera demandé de saisir un mot de passe pour accéder à votre machine virtuelle.

Dans la section Finaliser et créer, conservez par défaut 1 droplet, choisissez un nom d'hôte (à nouveau l'arbre de Noël), sélectionnez votre projet créé précédemment s'il n'est pas sélectionné par défaut et cliquez sur Create droplet. Cela prendra quelques minutes. En cliquant sur votre projet dans la section de navigation à gauche, vous verrez votre gouttelette.

Étape 5: Configurer la machine virtuelle (ordinateur) PARTIE 3

En cliquant sur les trois points à droite de la goutte, vous pouvez cliquer sur Console d'accès, ce qui vous fera accéder à votre ordinateur virtuel.

Une nouvelle petite fenêtre de navigateur s'ouvrira. Maintenant, ce n'est pas un environnement de bureau, comme sur votre ordinateur Windows 10 ou Ubuntu avec interface graphique.

Cependant, tout peut être fait via une interface console.

Ce n'est pas aussi effrayant que ça en a l'air:)

Étape 6: Configurer la machine virtuelle (ordinateur) PARTIE 4

Vous avez créé avec succès votre propre machine virtuelle dans un cloud DigitalOcean.

Dans les étapes suivantes, vous allez configurer un serveur Web, appelé Apache et configurer votre propre page Web.

Téléchargez le client Filezilla ici https://filezilla-project.org/download.php?platfo… (ou trouvez la version 32 bits pour le système d'exploitation 32 bits) et installez-le. C'est un client FTP (File Transfer Protocol).

Vous pourrez accéder et transférer des fichiers depuis et vers votre machine virtuelle.

Une fois installé, cliquez sur fichier → gestionnaire de site → nouveau site et entrez les données comme sur une image ci-dessus.

Protocole: SFTP (Secure File Transfer Protocol)

Host: IP de votre serveur, à retrouver dans votre projet DigitalOcean.

L'utilisateur est root et le mot de passe est ce que vous avez défini lors de la création de votre droplet.

Cliquez sur OK et connectez-vous à votre machine virtuelle.

Vous serez prévenu, la clé de l'hôte est inconnue. Suivez la deuxième image.

Créez un dossier local pour le projet et extrayez les fichiers de votre projet que vous téléchargerez ici.

Vous éditerez vos fichiers sur votre ordinateur et les transférerez sur votre machine virtuelle chaque fois que vous voudrez tester ou mettre à jour le code.

Étape 7: Installer un serveur Web

Connectez-vous à votre console droplet avec le nom d'utilisateur root et votre mot de passe.

Comme nous n'avons pas d'interface graphique, nous utilisons des commandes pour contrôler votre machine virtuelle. Voici quelques commandes courantes que vous utiliserez sur Ubuntu (Linux):

• pwd – imprime mon répertoire courant

• ls - liste les fichiers et dossiers dans mon répertoire actuel

• cd / - déplacer vers / répertoire (dossier, qui inclut les principaux répertoires Linux comme etc, bin, boot, dev, root, home, var et ainsi de suite)

Par exécuter, je veux dire, entrez la commande et appuyez sur Entrée.

Maintenant, nous allons exécuter apt-get update -y pour mettre à jour le système.

Exécutez apt install apache2 -y pour installer le serveur Web Apache.

Votre écran d'accueil Apache doit être accessible sur votre https://virtual-machine-ip depuis votre navigateur.

Remplacez virtual-machine-ip par l'adresse IP de votre machine virtuelle, par exemple 165.12.45.123. Vous pouvez également ignorer le https:// car il sera automatiquement ajouté.

Félicitations!

Noter:

Si vous souhaitez que votre site Web soit accessible via un nom plutôt qu'une adresse IP (comme j'ai utilisé https://blinkmytree.live/), accédez au site du fournisseur de domaine GoDaddy ou similaire (namecheap.com etc.) et suivez les instructions. ici:

Certains noms de domaine sont très bon marché. Mon domaine n'a coûté que 2$ par an. Ça vaut vraiment le coup:)

Étape 8: Installer un framework d'applications Web

Retour à notre console. N'ayez pas peur:)

Utilisez Filezilla pour créer un dossier nommé app dans /home, donc /home/app sera votre dossier

Exécutez cd /home/app pour accéder au dossier de l'application.

Exécutez apt install npm -y pour installer le gestionnaire de packages npm. Cela prendra quelques minutes.

Exécutez npm init -y pour créer un fichier package.json, qui suivra/se souviendra des principales données de package concernant une application.

Exécutez npm --save install cors express pour installer les modules cors, express

Cors est un module de configuration d'accès intersites et express est un framework d'application Web.

Npm est un gestionnaire de packages que nous avons utilisé et nous utiliserons le runtime JavaScript node.js pour programmer notre interface de programmation d'applications (API), qui, combinée à un serveur http, acceptera les requêtes HTTP pour appliquer des couleurs aux LED, marquer leurs valeurs (couleurs) en mémoire, et passe les valeurs à NodeMcu, lorsqu'il le demande.

Remarque: le nœud dans NodeMcu n'a rien à voir avec le nœud dans node.js. NodeMcu peut être remplacé par n'importe quelle carte de développement arduino connectée à Internet, carte de développement NXP ou carte PCB personnalisée Microchip/NXP/Renesas/STM/Atmel. Node.js pourrait également être remplacé par le framework. Net, PHP ou toute autre plate-forme. Mais pour plus de simplicité, nous utilisons NodeMCU et Node.js.

Maintenant, faisons un test, si nous pouvons exécuter un petit programme dans node.js

Créez un fichier nommé index.js avec notepad/notepad++ ou un autre éditeur ou environnement de développement intégré que vous utilisez (Visual Studio Code https://code.visualstudio.com/) dans votre dossier local.

Mettez ce code dedans:

var http = require('http');

http.createServer(fonction (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Bonjour tout le monde !');

}).écouter(8080);

Enregistrez-le et transférez-le dans le dossier /home/app sous le nom index.js avec un double-clic/glisser-déposer sur le fichier dans FileZilla.

Exécutez node index.js et laissez-le fonctionner.

Maintenant, nous pouvons accéder à notre page à l'adresse https://virtual-machine-ip:8080 depuis notre navigateur. Une page blanche avec le texte Hello World apparaîtra.

Félicitations, vous venez de créer un serveur Web dans node.js !

Étape 9: préparer le logiciel

Allez dans la console et arrêtez le programme en appuyant sur ctrl+C.

Remplacez votre fichier index.js dans /home/app/ et remplacez-le par notre index.js dans.

Vous pouvez télécharger tous les fichiers du site ici:

drive.google.com/file/d/1oIFdipoJxg6PF5klO…

Copiez notre code d'arbre de Noël du dossier html vers le répertoire distant /var/www/html/ avec Filezilla. Cela prendra du temps. S'il vous le demande, remplacez index.html par un nouveau.

Remettez votre IP dans votre navigateur Web préféré.

Vous venez de rendre disponible le front-end de votre application web sur

Étape 10: Comprendre le code back-end et le faire fonctionner

Remarque: votre code back-end se trouve dans /home/app

N'oubliez pas qu'après avoir modifié votre code localement, n'oubliez pas de le télécharger sur votre serveur à l'aide de FileZilla et de redémarrer votre application de nœud (console: ctrl+c, flèche vers le haut (affiche la dernière commande node index.js), entrez)

Pour que le code fonctionne, vous devrez d'abord saisir quelques données.

Tout d'abord, vous devrez changer la variable de nom d'hôte dans index.js en votre propre domaine ou IP, (quelque chose qui ressemble à: 165.13.45.123).

Deuxièmement, je vais vous guider à travers le code pour le comprendre. Assurez-vous de ne pas sauter les commentaires que j'ai faits dans le code.

Vous pouvez voir dans le fichier index.js, que nous créons une application en utilisant le module express. Ensuite, nous lui appliquons les règles CORS, ajoutons les API et démarrons un serveur http. Ce serveur ne servira pas une page Web via les requêtes GET http, mais il servira les états de led via la requête GET http et mettra à jour les états de led sur les requêtes PUT http reçues.

Les API sont une pratique courante pour échanger des informations entre les applications. Les API REST que nous utilisons nous-mêmes sont les plus courantes. Ils sont apatrides et n'ont pas de connexion persistante (shorturl.at/aoBC3, Les demandes PUT mettent simplement à jour les états des leds dans la variable de tableau d'applications (mémoire), les demandes GET envoient simplement les états des leds à un client.

La réponse au client est généralement en notation JSON, mais pour cette simple réponse de 30 états de LED, nous envoyons simplement une chaîne de 30 valeurs séparées par des virgules.

Étape 11: Comprendre le code frontal et le faire fonctionner PARTIE 1

Remarque: votre code frontal se trouve dans /var/www/html

N'oubliez pas qu'après avoir modifié votre code localement, n'oubliez pas de le télécharger sur votre serveur à l'aide de FileZilla. Contrairement à node.js, Apache se redémarre automatiquement, mais vous devrez recharger votre page dans votre navigateur. Utilisez ctrl+f5 pour rafraîchir et supprimer également le cache de votre page.

Pour que le code fonctionne, vous devrez entrer quelques données. Tout d'abord, vous devrez changer la variable url dans la fonction send_request dans index.html de blinkmytree.live à votre propre domaine ou IP, par exemple: 165.13.45.123.

Deuxièmement, je vais vous guider à travers le code pour le comprendre. Assurez-vous de ne pas sauter les commentaires que j'ai faits dans le code. La page est un document HTML. En laissant de côté toutes les règles CSS (style de page et position du contenu), nous examinerons le contenu important pour les fonctionnalités. Pour en savoir plus sur CSS, consultez

Nous voulions ces fonctionnalités principales (les experts des méthodes agiles diraient les user stories) sur la page:

• Vidéo en direct intégrée à la page

• Une LED cliquable sur un sapin de Noël, qui a été manipulée dans l'éditeur d'images Gimp (https://www.gimp.org/).

• Communication réelle avec un serveur, en attente de changement d'état des leds.

Étape 12: Comprendre le code frontal et le faire fonctionner PARTIE 2

Une fois que nous avons notre arbre de Noël avec un nombre de LED et de couleurs à choisir, nous devons créer des zones et leur appliquer des actions, donc une fois que nous cliquons sur la LED colorée dans une section de sélection d'une image, une couleur sera sélectionnée, et une nous cliquons sur une LED, la commande sera envoyée au serveur, où l'Arduino choisira sa valeur.

En HTML5, la norme HTML la plus récente, il existe ce qu'on appelle une image cliquable. Cela nous permet de définir des zones sur une image, sur lesquelles nous pouvons appliquer des écouteurs d'action.

Comme nous avons beaucoup de zones à définir, nous avons utilisé un outil en ligne https://www.image-map.net/ pour définir ces zones et copié le code HTML sur notre page.

Une fois que nous avons fait cela, nous pouvons mettre l'événement onclick avec une fonction qu'il appelle et le paramètre d'un numéro de LED pour chacune de ces zones. Voir la capture d'écran ci-dessus.

Étape 13: Comprendre le code frontal et le faire fonctionner PARTIE 3

À la fin du corps HTML, dans une région, nous mettons du JavaScript pour définir les fonctions que nous appelons dans les événements onclick. Globalement, nous définissons une XMLHttpRequest, que nous utilisons pour envoyer une requête PUT

Nous avons deux fonctions:

fonction set_color(val)

fonction send_request(id)

Pour tester la demande d'API, je recommande un outil logiciel couramment utilisé appelé Postman https://www.postman.com/. Il nous permet d'envoyer simplement une requête API au serveur, sans compétences en programmation. Il permet de se moquer d'un serveur, et aussi d'accepter des requêtes.

Étape 14: Comprendre le code frontal et le faire fonctionner PARTIE 4

Votre application fonctionne.

Attention, les nombres sont inversés, c'est-à-dire que 20 est 1 et 1 est 20, c'est parce que les LED de l'arbre commencent en bas, mais pour une meilleure expérience utilisateur, nous mettons une LED de départ vers le haut.

Vous devrez toujours créer un flux en direct sur YouTube si vous le souhaitez et remplacer le code d'intégration de la vidéo YouTube par le vôtre.

Étape 15: Le code Arduino

L'ESP8266 exécute un exemple d'esquisse de client HTTP de base légèrement modifié, recevant les données de mon site Web via un appel API.

Vous devrez également installer des bibliothèques pour contrôler la bande LED si vous souhaitez utiliser la même bande RVB adressable que moi.

github.com/adafruit/Adafruit-WS2801-Librar…

Dans le croquis que j'ai joint, vous devrez insérer votre nom et mot de passe wi-fi et une URL vers votre site Web (voir les commentaires)

Nous convertissons essentiellement une réponse http en une chaîne de type C, nous pouvons donc utiliser la fonction C strtok pour diviser la chaîne par des virgules et remplir le tableau des leds avec les valeurs lues à partir d'un serveur. Ensuite, nous appelons une fonction où nous parcourons le tableau et, en fonction des valeurs, nous tournons la couleur correcte attendue par l'utilisateur.

C'est ça !

Félicitations, vous avez réussi !

Étape 16: Chaîne LED RVB

Euh, oh. Il est maintenant temps de faire une petite pause dans tout le codage:)

Étant donné que l'ESP8266 n'a pas beaucoup de broches GPIO pour contrôler les LED individuellement, j'ai utilisé cette chaîne de LED RVB adressable:

www.sparkfun.com/products/11020

De cette façon, les 20 leds RVB (60 leds au total) peuvent être contrôlées par seulement deux broches - "données" et "horloge" et une alimentation 5V directement à partir de l'ESP8266.

La connexion de la bande au NodeMcu est facile. 5V à Vin sur NodeMcu (5V de l'USB), fil jaune à la broche 12, fil vert à la broche 14, terre à terre.

Vous pouvez définir une couleur RVB et une luminosité individuelles. Avec un peu de mélange de couleurs, vous pouvez produire BEAUCOUP de couleurs pour chaque LED.

Il existe également une bibliothèque très intéressante pour toutes sortes d'effets FX sympas avec ces LED. Essayez-le si vous aimez:

github.com/r41d/WS2801FX

Étape 17: Décorez le sapin de Noël

Rendez-le joli et assurez-vous que toutes les LED sont visibles et bien réparties sur l'arbre.

Étape 18: Touches finales

Lorsque vous avez l'arbre prêt, prenez une belle photo et répétez l'étape de création de la carte-image des positions cliquables (positions LED)

C'est la manière la plus intuitive de s'interfacer avec les LED.

Si vous ne voulez pas trop compliquer les choses, vous pouvez utiliser des boutons normaux.

Vous devez également lancer une diffusion en direct de votre arbre sur YouTube (si vous souhaitez regarder ce qui se passe en temps réel) et intégrer le flux dans votre site.

Étape 19: Admirez votre site Web

Vous êtes génial si vous êtes arrivé jusqu'ici:) Invitez vos amis (et moi bien sûr:P) et faites-les cliquer le plus possible sur votre arbre:)

m

C'était un très long Instructable, pour un projet assez compliqué. Mais ça vaut le coup à la fin:D

Merci! Si vous voulez rester en contact sur ce sur quoi je travaille:

Vous pouvez vous abonner à ma chaîne YouTube:

www.youtube.com/c/JTMakesIt

Vous pouvez également me suivre sur Facebook et Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

pour les spoilers sur ce sur quoi je travaille actuellement, les coulisses et autres extras ! PS:., si vous l'avez VRAIMENT, VRAIMENT aimé, vous pouvez aussi m'acheter un café ici, ainsi j'aurai plus d'énergie pour de futurs projets (celui-ci m'a pris 2 semaines de sommeil, car j'ai eu cette idée trop tard):)

www.buymeacoffee.com/JTMakesIt

Et n'oubliez pas de voter pour ce concours Instructable dans « Anything Goes »:)