Introdução
O Clockwise é um projeto open-source que transforma uma matriz de LEDs RGB 64×64 e um ESP32 em um relógio digital dinâmico, personalizável e conectado. Ele é capaz de exibir não só data e hora como clima, notificações e qualquer outra informação que achar relevante e tudo isso dentro de temas customizados como do clássico Mario Bros.
Este post é o primeiro de uma série de artigos sobre o Clockwise. Neste primeiro, vamos entender o contexto do projeto, aprender como montar o hardware básico e carregar o firmware diretamente pelo site.
A nossa intenção é explorar mais possibilidades que o Clockwise oferece nos próximos posts, como personalizar o Clockwise sem código, utilizando o ClockClub e o Canvas. E ainda ensinar como criar um tema próprio do zero, utilizando a estrutura de desenvolvimento do projeto. Portanto, se curtir esse post, não deixe de comentar sobre o que gostaria de ver nessa série, postar suas dúvidas e sugestões!
Ok, se você está pronto para montar seu próprio smart watch, vamos começar! 🚀
Motivação
Em 2020, após concluir meu primeiro projeto, o Pixie, comecei a explorar novas ideias e comecei a observar alguns makers utilizando matrizes de LEDs em seus projetos, imaginei a possibilidade de criar um relógio de parede inteligente e personalizável. Foi assim que nasceu o Clockwise.
O primeiro tema foi do Mario Bros., onde o Mario interage com blocos para exibir as horas e minutos, semelhante ao visual nostálgico do jogo para NES. Depois comecei a desenvolver outros temas, que estou chamando de clockface, como um que exibe as horas por extenso, outro com o mapa mundi indicando o horário e até uma versão que emula um relógio analógico. Todos estão disponíveis no site do Clockwise.
Minha visão para o Clockwise sempre foi oferecer um relógio de parede inteligente, onde os usuários pudessem alternar entre diferentes temas e adicionar widgets relevantes ao seu contexto, transformando-o em uma espécie de “smartwatch de parede” com funcionalidades ampliadas.
O projeto essencialmente é bem acessível para todos, pois ele usa apenas um ESP32 e uma matrix de LEDs. Claro que ele pode ser melhorado, adicionando sensores e criando uma PCB própria mas nesse primeiro artigo, quero manter o mais simples possível. Portanto, vamos utilizar uma placa de desenvolvimento ESP32 conectada diretamente ao display através de jumpers. Essa configuração permite que, mesmo aqueles sem experiência avançada em eletrônica possam montar e personalizar seu próprio Clockwise, podendo deixar como uma peça decorativa retrô e funcional para qualquer ambiente.
Materiais Necessários
Para montar essa versão do Clockwise, você precisará:
Do bom e velho ESP32 DevKit V1 – Link da Eletrogate
O display é uma matriz de LEDs RGB de 64×64 (tipo de conexão HUB75) – Link da Eletrogate
Fonte de alimentação 5V 3A – Link da Eletrogate e um conector P4 fêmea – Link da Eletrogate
Jumpers fêmea-macho para as conexões – Link da Eletrogate
⚠️ Importante: Certifique-se de que sua matriz de LEDs é compatível com HUB75, pois esse é o protocolo utilizado pelo Clockwise.
Circuito
Sendo bem direto ao ponto, o diagrama abaixo é o que conecta o microcontrolador (ESP32) à matriz de LEDs. Essa é a parte mais complicada do projeto e toda atenção é pouca pois são muitos jumpers e é bem fácil se confundir. A cada ligação feita, confirme no diagrama novamente e ao final, faça uma última confêrencia em todos as ligações. Caso algum jumper esteja ligado num pino errado, o Clockwise não vai funcionar.
A placa da matriz de LEDs realiza parte do trabalho, já que nela contém os shift registers e multiplexadores (LINK PARA ARTIGO) que controlam todos os leds, deixando a conexão bem mais simples para o nosso ESP32. Os pinos R1,G1,B1 e R2,G2,B2 recebem os dados (cores RGB) que serão exibidas na metade de cima e na metade de baixo da matriz (dual-scan), já os pinos A,B,C,D e E são os endereços onde o dado será apresentado. E por fim os pinos de Clock, Latch e OutputEnable sincronizam a exibição do que queremos. Tudo isso pode parecer confuso, mas não temos que nos preocupar com isso já que as bibliotecas para a matriz de LEDs abstrai toda essa lógica.
⚠️ Atenção na Conexão do Display!
A matriz de LEDs possui dois conectores HUB75, um para entrada e outro para saída. Certifique-se de conectar o cabo no slot indicado pela seta apontando para a direita (geralmente identificado como “IN” ou “INPUT” na placa). Caso o display seja conectado no conector errado, a matriz não exibirá nada corretamente.
Alimentação do Circuito
A matriz que estamos usando tem 64×64 LEDs, isso significa um total de 4096 LEDs, mas não é apenas um LED, como devem saber um LED RGB na verdade tem 3 LEDs dentro dele, um pra cada cor, portanto a alimentação é super importante, caso liguemos um fonte pouco potente ela vai se sobrecarregar pois esses milhares de LEDs ligados precisam de muita corrente!
Assim como o VIN do ESP32, a tensão da matriz é de 5V o que facilita bastante nosso circuito, podemos usar a mesma fonte de alimentação para ambos os casos. Embora o consumo do ESP32 seja bem baixo, a matriz necessita de pelo menos 3 amperes para operar corretamente. Essa amperagem vai variar bastante dependendo do brilho e das imagens exibidas, por exemplo a matriz vai consumir mais corrente com o brilho no máximo e exibindo imagens muito claras, já que para gerar a cor branca, é necessário acender os três LEDs ao mesmo tempo. Ao mesmo tempo que o consumo deve ficar abaixo de 1A caso o brilho seja baixo com cores mais escuras.
Instalando o firmware
Agora é hora de fazer o upload do firmware para o ESP32. Esse é processo é bem fácil pois usamos a WebSerial API para se comunicar com o microcontrolador atráves do próprio browser, ou seja, nao é necessário instalar nada no seu computador. Ambos navegadores, Edge e Chrome suportam essa feature.
Antes de mais nada, conecte seu ESP32 na porta USB do seu computador. Acesse o site do Clockwise, selecione o clockface que deseja e clique em CONNECT!
Você verá uma janela solicitando para que você selecione a porta para conexão, como essa abaixo. Selecione em qual porta está conectado seu ESP32 e clique em Connect. Caso a porta não apareça na listagem, você pode precisar instalar um driver, esse artigo da Eletrogate fala sobre isso.
Uma mensagem de confirmação deve aparecer, clique em INSTALL e aguarde até que o upload termine com sucesso.
Conectando na sua rede local
Um último passo desse processo de instalação, logo após terminar a instalação será a conexão com sua rede wifi. Uma nova janela deve aparecer pedindo para selecionar sua rede e password como na janela abaixo.
Caso a conexão tenha sido bem sucedida, uma mensagem deve aparecer com um botão de VISIT DEVICE. Ao clicar nesse botão você será redirecionado para a página interna de configuração do Clockwise. Dica: salve essa página nos seus favoritos, é um endereço local e portanto não é tão fácil de lembrar, algo como 192.168.1.4.
⚠️ Importante
- A partir desse momento, a fonte de energia deve estar ligada para que o display funcione corretamente
- Recomendo reiniciar o seu ESP32 (clicando no botão de RESET do ESP32 mesmo) para que o relógio possa exibir as horas corretamente, que vem da internet (NTP).
- Para acessar a página interna, seu computador e o Clockwise devem estar na mesma rede
Muitos dos parâmetros da página de configuração são auto-explicativos, mas vou deixar um link para a documentação aqui.
Referências
- Artigo Shift register
- Artigo multiplex
- Artigo corrente, tensão
- Everything You Didn’t Want to Know About RGB Matrix Panels
- Github do Clockwise
- Instructables do Clockwise
Conclusão
O Clockwise é um projeto que une criatividade, eletrônica e programação em um relógio inteligente open-source. Com apenas um ESP32 e uma matriz de LEDs HUB75, conseguimos criar uma interface dinâmica para exibir horário, animações e muito mais.
Neste artigo, exploramos o conceito do Clockwise, aprendemos a montar o hardware e carregar o firmware diretamente pelo site. Agora que você tem seu relógio funcionando, há muitas possibilidades para expandir esse projeto!
Nos próximos artigos, veremos como personalizar ainda mais o Clockwise: Vamos conhecer o ClockClub e o tema Canvas, que permite criar temas personalizados sem escrever código. E como desenvolver um tema do zero, utilizando a estrutura do firmware do Clockwise.
Se tiver dúvidas ou quiser compartilhar seu progresso, deixe um comentário. Nos vemos no próximo post! 🚀