Árvore de Natal controlada pelo site (qualquer pessoa pode controlá-la): 19 etapas (com fotos)

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:34

Você quer saber a aparência de uma árvore de Natal controlada por site?

Aqui está o vídeo mostrando meu projeto da minha árvore de natal. A transmissão ao vivo já terminou, mas fiz um vídeo, capturando o que estava acontecendo:

Este ano, em meados de dezembro, eu estava deitado na minha cama, tentando dormir no meio de uma semana de trabalho. E, em vez de dormir, estava pensando em qual seria um projeto legal de Natal para fazer. E então uma ideia legal me ocorreu.

Como sou preguiçosa com as decorações de Natal, seria legal deixar outra pessoa controlar minhas luzes de Natal, então não precisarei me preocupar com isso.

"E se eu fizesse luzes para uma árvore de Natal que QUALQUER PESSOA pudesse controlar através da interface de um site?"

(insira duas semanas de noites sem dormir)

Então eu fiz isso.

Uma árvore de Natal com vinte LEDs RGB conectados à internet via ESP8266 Arduino.

Um amigo meu (obrigado JP) me ajudou a criar um site (já que não sou um programador fluente para coisas relacionadas a sites).

E configuramos uma transmissão ao vivo 24 horas por dia, 7 dias por semana, da minha árvore no youtube, para que você possa ver o que está ligando ou desligando a qualquer momento.

Este projeto é ideal para este ano, já que muitos de nós estávamos no bloqueio, incapazes de nos encontrar e conviver com amigos e familiares. Por que não se unir através da árvore de Natal:)

Neste Instructable irei explicar detalhadamente como este projeto foi feito.

Etapa 1: Nível de habilidade

Este projeto é mais voltado para software. Mas não tenha medo Um pouco de sorte e ajuda do tio Google vai ajudar imensamente:)

Você precisará ter um conjunto de 3 habilidades (ou você as aprenderá sem problemas): uma parte do servidor web, a parte do Arduino e a árvore de Natal, é claro!

Conhecimento recomendado:

• Conhecimentos básicos de computação e programação

• Conhecimento básico de terminal Linux

• Conhecimento básico de rede de computadores

• Conhecimento básico de eletrônica

• Habilidades para usar o Google e outras habilidades "especiais"

• Deve saber como montar uma árvore de Natal:)

Se você tem algum senso de tecnologia e programação, você deve ser capaz de aprender a configurar isso de acordo com este Instructable.

Etapa 2: Ferramentas e componentes

No lado da árvore de Natal, você precisará de: • Árvore de Natal (d'oh …)

• Uma placa de microcontrolador NodeMCU

(você também pode usar ESP32 ou outras placas compatíveis com Wi-Fi ou Ethernet)

• Faixa LED RGB endereçável. faixa LED RGB endereçável economizará muitos GPIOs do Arduino (https://www.sparkfun.com/products/11020)

• Software para o NodeMCU (fornecido neste instrutível)

No lado do servidor, você precisará de:

• Um servidor virtual privado com IP público. Aqui você ganha $ 100 grátis no DigitalOcean

• Um domínio (opcional) que você pode registrar em qualquer organização de registro, por exemplo

• Código dedicado (fornecido com este Instructable)

Etapa 3: Configurar Máquina Virtual (computador) PARTE 1

Vamos direto para a codificação:)

Precisamos de um servidor, que irá se comunicar com o site e NodeMCU.

Os servidores do DigitalOcean nos permitem ter uma máquina virtual com um endereço IP público, ou seja, podemos executar serviços nela e acessá-los em todo o mundo.

Depois de pagar uma assinatura mensal do DigitalOcean (você pode usar o teste gratuito de 60 dias), crie um projeto e nomeie-o como uma árvore de Natal ou o que você quiser.

Agora você pode criar sua máquina virtual (computador virtual acessível remotamente) clicando em "Começar com uma gota" (que basicamente é o nome do DigitalOcean para uma máquina virtual).

Uma página de configuração aparecerá e você pode ficar com um padrão: imagem do Ubuntu, plano básico e sem armazenamento em bloco (5 $ / mês)

Etapa 4: configurar a máquina virtual (computador) PARTE 2

Uma região de datacenter é o local onde seu servidor será criado.

Escolha o mais próximo de você e de seus usuários em potencial. Isso fornecerá o menor tempo de resposta.

Além disso, na seção Autenticação, você será solicitado a inserir uma senha para acessar sua máquina virtual.

Na seção Finalizar e criar, mantenha o padrão de 1 droplet, escolha um nome de host (árvore de Natal novamente), selecione o projeto criado anteriormente se não for selecionado por padrão e clique em Criar droplet. Isto leverá alguns minutos. Ao clicar em seu projeto na seção de navegação à esquerda, você verá seu droplet.

Etapa 5: configurar a máquina virtual (computador) PARTE 3

Ao clicar nos três pontos à direita da gota, você pode clicar em Acessar console, o que fará com que você acesse seu computador virtual.

Uma nova pequena janela do navegador será aberta. Agora, este não é um ambiente de desktop, como em seu computador Windows 10 ou Ubuntu com interface gráfica.

No entanto, tudo pode ser feito por meio de uma interface de console.

Não é tão assustador quanto parece:)

Etapa 6: Configurar Máquina Virtual (computador) PARTE 4

Você criou com sucesso sua própria máquina virtual em uma nuvem DigitalOcean.

Nas próximas etapas, você configurará um servidor web, chamado Apache, e configurará sua própria página web.

Baixe o cliente Filezilla aqui https://filezilla-project.org/download.php?platfo… (ou encontre a versão de 32 bits para o sistema operacional de 32 bits) e instale-o. É um cliente FTP (File Transfer Protocol).

Você poderá acessar e transferir arquivos de e para sua máquina virtual.

Uma vez instalado, clique em arquivo → gerente do site → novo site e insira os dados como na imagem acima.

Protocolo: SFTP (Secure File Transfer Protocol)

Host: IP do seu servidor, encontre no seu projeto DigitalOcean.

O usuário é root e a senha é o que você definiu na criação de seu droplet.

Clique em OK e conecte-se à sua máquina virtual.

Você será avisado, a chave do host é desconhecida. Siga a segunda imagem.

Crie uma pasta local para o projeto e extraia os arquivos do projeto que você baixará aqui.

Você editará seus arquivos em seu computador e os transferirá para sua máquina virtual sempre que desejar testar ou atualizar o código.

Etapa 7: Instale um servidor web

Faça login em seu console droplet com o nome de usuário root e sua senha.

Como não temos interface gráfica, usamos comandos para controlar sua máquina virtual. Aqui estão alguns comandos comuns que você usará no Ubuntu (Linux):

• pwd - imprime meu diretório atual

• ls - lista arquivos e pastas em meu diretório atual

• cd / - move para o diretório / (pasta, que inclui os principais diretórios do Linux como etc, bin, boot, dev, root, home, var e assim por diante)

Por executar, quero dizer, digite o comando e pressione enter.

Agora, executaremos apt-get update -y para atualizar o sistema.

Execute apt install apache2 -y para instalar o servidor web Apache.

A tela de boas-vindas do Apache deve estar acessível em https:// virtual-machine-ip do navegador.

Substitua virtual-machine-ip pelo ip da máquina virtual, por exemplo 165.12.45.123. Você também pode pular o https://, pois ele será adicionado automaticamente.

Parabéns!

Observação:

Se você deseja que seu site seja acessível por meio de um nome, em vez de endereço IP (como eu usei https://blinkmytree.live/), vá para o site do provedor de domínio GoDaddy ou semelhante (namecheap.com etc.) e siga as instruções aqui:

Alguns nomes de domínio são muito baratos. Meu domínio custava apenas 2 $ por ano. Definitivamente vale a pena o dinheiro gasto:)

Etapa 8: Instale uma estrutura de aplicativo da Web

De volta ao nosso console. Não tenha medo:)

Use o Filezilla para criar uma pasta chamada app dentro de / home, então / home / app será sua pasta

Execute cd / home / app para ir para a pasta do app.

Execute apt install npm -y para instalar o gerenciador de pacotes npm. Isto leverá alguns minutos.

Execute npm init -y para criar um arquivo package.json, que rastreará / lembrará os principais dados do pacote sobre um aplicativo.

Execute npm --save install cors express para instalar os módulos cors, express

Cors é um módulo para configurar o acesso entre sites e express é uma estrutura de aplicativo da web.

Npm é um gerenciador de pacotes que usamos e usaremos o runtime JavaScript node.js para programar nossa interface de programação de aplicativos (API), que irá, combinada com um servidor http, aceitar solicitações HTTP para aplicar cores a LEDs, marcar seus valores (cores) na memória, e passar os valores para o NodeMcu, quando ele solicitar.

Nota: Node em NodeMcu não tem nada a ver com node em node.js. O NodeMcu pode ser substituído por qualquer placa de desenvolvimento Arduino conectada à Internet, placa de desenvolvimento NXP ou um Microchip / NXP / Renesas / STM / PCB Atmel personalizado. Node.js também pode ser substituído por. Net framework, PHP ou qualquer outra plataforma. Mas, para simplificar, estamos usando NodeMCU e Node.js.

Agora, vamos fazer um teste, se podemos executar um pequeno programa em node.js

Crie um arquivo denominado index.js com notepad / notepad ++ ou outro editor ou ambiente de desenvolvimento integrado de seu uso (Visual Studio Code https://code.visualstudio.com/) em sua pasta local.

Coloque este código nele:

var http = requer ('http');

http.createServer (função (req, res) {

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

res.end ('Olá, mundo!');

}). ouça (8080);

Salve-o e transfira-o para a pasta / home / app como index.js com um clique duplo / arraste e solte no arquivo no FileZilla.

Execute o node index.js e deixe-o em execução.

Agora, podemos acessar nossa página em https:// virtual-machine-ip: 8080 de nosso navegador. Uma página em branco com o texto Hello World aparecerá.

Parabéns, você acabou de criar um servidor da web em node.js!

Etapa 9: Prepare o software

Vá para o console e pare o programa pressionando ctrl + C.

Substitua seu arquivo index.js em / home / app / e substitua-o por nosso index.js em.

Você pode baixar todos os arquivos do site aqui:

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

Copie nosso código da árvore de Natal da pasta html para o diretório remoto / var / www / html / com Filezilla. Vai levar algum tempo. Se ele perguntar a você, substitua index.html por um novo.

Coloque seu IP novamente em seu navegador favorito.

Você acabou de disponibilizar o front-end de seu aplicativo da Web em https:// virtual-machine-ip.

Etapa 10: Entendendo o código de back-end e fazendo-o funcionar

Observação: seu código de back-end está em / home / app

Lembre-se, depois de editar seu código localmente, não se esqueça de enviá-lo para seu servidor usando FileZilla e reinicie seu aplicativo de nó (console: ctrl + c, seta para cima (mostra o último nó de comando index.js), digite)

Para que o código funcione, você precisará inserir alguns dados primeiro.

Em primeiro lugar, você precisará alterar a variável do nome do host em index.js para seu próprio domínio ou IP (algo parecido com: 165.13.45.123).

Em segundo lugar, vou guiá-lo através do código para entendê-lo. Certifique-se de não pular os comentários que fiz no código.

Você pode ver no arquivo index.js, que criamos um aplicativo usando o módulo expresso. Em seguida, aplicamos as regras CORS a ele, adicionamos as APIs e iniciamos um servidor http. Este servidor não servirá uma página da Web por meio de solicitações GET http, mas servirá estados de led por meio de solicitação GET http e atualizará os estados de led nas solicitações PUT http recebidas.

APIs são uma prática comum para a troca de informações entre aplicativos. Mais comuns que usamos são APIs REST que usamos nós mesmos. Eles não têm estado e não têm uma conexão persistente (shorturl.at/aoBC3, As solicitações PUT simplesmente atualizam os estados do led na variável da matriz do aplicativo (memória), as solicitações GET simplesmente enviam os estados do led para um cliente.

A resposta para o cliente é geralmente em notação JSON, mas para esta resposta simples de 30 estados de LED, simplesmente enviamos uma string de 30 valores separados por vírgula.

Etapa 11: Compreendendo o código de front-end e fazendo-o funcionar PARTE 1

Observação: seu código de front-end está em / var / www / html

Lembre-se, depois de editar seu código localmente, não se esqueça de enviá-lo para o seu servidor usando o FileZilla. Ao contrário do node.js, o Apache se reinicia automaticamente, mas você terá que recarregar sua página no navegador. Use ctrl + f5 para atualizar e deletar o cache de sua página também.

Para que o código funcione, você precisará inserir alguns dados. Primeiro, você precisará alterar a variável url na função send_request dentro de index.html de blinkmytree.live para seu próprio domínio ou IP, por exemplo: 165.13.45.123.

Em segundo lugar, vou guiá-lo através do código para entendê-lo. Certifique-se de não pular os comentários que fiz no código. A página é um documento HTML. Deixando todas as regras CSS (estilo de página e posição do conteúdo) de lado, examinaremos o conteúdo importante da funcionalidade. Para saber mais sobre CSS, verifique

Queríamos estes recursos principais (especialistas em métodos ágeis diriam histórias de usuários) na página:

• Vídeo ao vivo embutido na página

• Um LED clicável em uma árvore de natal, que foi manipulado no editor de imagens Gimp (https://www.gimp.org/).

• Comunicação real com um servidor, aguardando a alteração dos estados do led.

Etapa 12: Compreendendo o código de front-end e fazendo-o funcionar PARTE 2

Assim que tivermos nossa árvore de Natal com um número de LEDs e cores para escolher, precisamos criar áreas e aplicar ações a elas, então, assim que clicarmos no LED colorido em uma seção do seletor de uma imagem, uma cor será selecionada e outra clicamos em um LED, o comando será enviado para o servidor, onde o Arduino escolherá seu valor.

No HTML5, o mais novo padrão HTML, existe algo chamado mapa de imagem. Ele nos permite definir áreas em uma imagem, que podemos aplicar ouvintes de ação nela.

Como temos muitas áreas a definir, usamos uma ferramenta online https://www.image-map.net/ para definir essas áreas e copiamos o código HTML para a nossa página.

Depois de fazer isso, podemos colocar o evento onclick com uma função que ele chama e o parâmetro de um número de LED para cada uma dessas áreas. Veja a imagem acima.

Etapa 13: Compreendendo o código de front-end e fazendo-o funcionar PARTE 3

Dentro do final do corpo HTML, em uma região, colocamos um pouco de JavaScript, para definir as funções que chamamos em eventos onclick. Globalmente, definimos um XMLHttpRequest, que usamos para enviar uma solicitação PUT

Temos duas funções:

função set_color (val)

função send_request (id)

Para testar a solicitação da API, recomendo uma ferramenta de software comumente usada chamada Postman https://www.postman.com/. Ele nos permite simplesmente enviar uma solicitação de API ao servidor, sem habilidades de programação. Ele permite simular um servidor e aceitar solicitações também.

Etapa 14: Compreendendo o código de front-end e fazendo-o funcionar PARTE 4

Seu aplicativo funciona.

Esteja ciente, os números estão invertidos, ou seja, 20 é 1 e 1 é 20, isso porque os LEDs na árvore começam na parte inferior, mas para uma melhor experiência do usuário, colocamos um led inicial na parte superior.

Você ainda precisará criar uma transmissão ao vivo no YouTube, se quiser, e substituir o código de incorporação do vídeo do YouTube pelo seu próprio.

Etapa 15: o código do Arduino

O ESP8266 executa um esboço de exemplo de cliente HTTP básico que é ligeiramente modificado, recebendo os dados do meu site por meio de uma chamada de API.

Você também precisará instalar bibliotecas para controlar a faixa de LED se quiser usar a mesma faixa RGB endereçável que eu usei.

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

No esboço que anexei, você precisará inserir seu nome e senha wi-fi e uma url para o seu site (veja os comentários)

Basicamente, convertemos uma resposta http em uma string do tipo C, então podemos usar a função C strtok para dividir a string por vírgulas e preencher a tabela de leds com os valores lidos de um servidor. Em seguida, chamamos uma função onde percorremos a tabela e, com base nos valores, viramos a cor correta que o usuário espera.

É isso aí!

Parabéns, você conseguiu!

Etapa 16: Cadeia de LED RGB

Uh, oh. Agora é hora de fazer uma pequena pausa de toda a codificação:)

Como o ESP8266 não tem muitos pinos GPIO para controlar LEDs individualmente, usei esta cadeia de LED RGB endereçável:

www.sparkfun.com/products/11020

Desta forma, todos os 20 leds RGB (60 leds no total) podem ser controlados por apenas dois pinos - "dados" e "relógio" e alimentação de 5 V diretamente do ESP8266.

Conectar a tira ao NodeMcu é fácil. 5 V para Vin no NodeMcu (5 V de USB), fio amarelo para o pino 12, fio verde para o pino 14, aterrado para o aterramento.

Você pode definir a cor RGB individual e o brilho. Com alguma mistura de cores, você pode produzir MUITAS cores para cada LED.

Há também uma biblioteca muito legal para todos os tipos de efeitos FX legais com esses LEDs. Experimente se você gosta de:

github.com/r41d/WS2801FX

Etapa 17: Decore a Árvore de Natal

Deixe-o bonito e certifique-se de que todos os LEDs estejam visíveis e bem espalhados pela árvore.

Etapa 18: toques finais

Quando você tiver a árvore pronta, tire uma boa foto e repita a etapa para criar o mapa de imagem das posições clicáveis (posições de LED)

Esta é a forma mais intuitiva de interface com os LEDs.

Se você não quiser complicar as coisas, pode usar botões normais.

Você também deve iniciar uma transmissão ao vivo de sua árvore no YouTube (se quiser assistir o que acontece em tempo real) e incorporar a transmissão em seu site.

Etapa 19: admire seu site

Você é incrível se chegou até aqui:) Convide seus amigos (e eu, é claro: P) e faça-os clicar na sua árvore o máximo possível:)

n

Este foi um Instructable muito longo, para um projeto bastante complicado. Mas vale a pena no final: D

Obrigado! Se você quiser ficar por dentro do que estou trabalhando:

Você pode se inscrever no meu canal no YouTube:

www.youtube.com/c/JTMakesIt

Você também pode me seguir no Facebook e Instagram

www.facebook.com/JTMakesIt

www.instagram.com/jt_makes_it

para spoilers sobre o que estou trabalhando atualmente, nos bastidores e outros extras! PS:., Se você gostou MUITO, MUITO, você também pode me comprar um café aqui, então terei mais energia para projetos futuros (este tirou 2 semanas de sono, pois tive essa ideia tarde demais):)

www.buymeacoffee.com/JTMakesIt

E não se esqueça de votar neste Instructable no concurso "Anything Goes":)