Crie o aplicativo Fridgeye com uma tela Nextion
Componentes e suprimentos
 |
| × | 1 | |||
 |
| × | 1 | |||
| × | 1 | ||||
| × | 1 |
Aplicativos e serviços online
| ||||
 |
| |||
|
Sobre este projeto
Em julho deste ano, alguns estudantes de design da Alemanha lançaram um Kickstarter satírico para criar um protótipo do Fridgeye; um lindo sensor de luz para sua geladeira. Combine o fato de que geralmente esperamos que projetos de hardware ridículos apareçam no Kickstarter com quanto esforço a equipe colocou para fazer com que parecesse real, não é de admirar que as pessoas não tenham certeza do que pensar. Não é segredo que fui fã do projeto desde o início, mas não porque estou morrendo de vontade de saber o que a luz da minha geladeira está fazendo. O Fridgeye é um projeto com escopo perfeito para lidar com o potencial de crescimento se você estiver procurando começar na Internet das Coisas.
Construir o dispositivo Fridgeye
A maior parte desta postagem será focada em fazer o aplicativo Fridgeye rodar com a tela de toque Nextion conectada a um Arduino, mas antes de chegarmos tão longe, precisamos de um dispositivo real que possa sentir a luz. Sem problemas. Vamos levar 5 minutos e construir um. Eu prometo que não vai demorar mais um segundo. Tudo que você precisa é um Arduino, placa de ensaio, fotorresistor e um resistor de 3,3K. Vamos ligar assim. Não se preocupe com as conexões da tela ainda. Apenas se concentre no Arduino, no resistor e no fotorresistor.
Na verdade, eu tinha um ProtoShield por aí; então coloquei uma mini placa de ensaio sobre ela para que pudesse manter tudo em um pacote empilhado com escudo, mas ainda teria a liberdade de uma placa de ensaio. É assim que o meu se parece.
Ok, eu menti, isso levou apenas cerca de 4 minutos. Mas você pode usar o minuto que resta para lançar este esboço super simples em seu Arduino e observar a saída serial do sensor de luz de dentro do IDE do Arduino.
void setup () {Serial.begin (9600); } void loop () {int val =analogRead (A0); Serial.println (val); atraso (500); } Depois de programar o Arduino, abra o Monitor Serial em Ferramentas cardápio. Certifique-se de que a taxa de transmissão esteja definida como 9600. Você deve ver um novo valor inteiro representando o nível de luz a cada meio segundo. Vá em frente, pare um minuto e brinque com isso. Cubra o sensor, acenda e apague as luzes e talvez até tente apontar a lanterna do seu smartphone para ele. Observe a mudança de valores. Você notará que eles variam de quase 0 na escuridão total a quase 1024 quando bombardeados com luz.
Qual é o aplicativo Fridgeye?
O aplicativo Fridgeye é o companheiro confiável para o seu dispositivo Fridgeye. Já se foi o tempo em que os dispositivos não funcionavam. Todo mundo sabe que, no grande mundo da IoT de hoje, seu dispositivo não tem chance a menos que tenha algum tipo de aplicativo para acompanhar. É manteiga de amendoim e geleia, leite e cereais, ervilhas e cenouras.
O aplicativo é bastante simples. Se dermos uma olhada na página Kickstarter, é literalmente apenas a porcentagem de luz que o Fridgeye detecta e parece ser apenas 0 ou 100 por cento.
Tenho certeza de que podemos fazer um pouco melhor e usar alguns desses 99 valores intermediários para que não se sintam mal. Vamos direto dos desenhos conceituais e trazê-los para o mundo real.
Primeiros passos com a tela Nextion
Para este projeto, estou usando a tela de toque Nextion Enhanced 3,5 ". É uma tela de toque totalmente resistiva destinada a lidar com o trabalho pesado do controle gráfico, de modo que mesmo dispositivos muito simples, como o Arduino, possam se comunicar com ele por meio de um par de Embora a tela em si seja muito boa, a documentação pode ser muito difícil de navegar, especialmente para iniciantes, então vamos percorrer um passo de cada vez.
Exibir modelo de programação
Se você já programou um Arduino para usar um display antes, provavelmente já usou algo como uma biblioteca gráfica simples que abstraía os comandos de baixo nível de desenho na superfície da tela. Embora muito boas, essas bibliotecas ainda requerem que você faça muitos pushs de pixels para desenhar coisas na tela. Os visores Nextion usam uma abordagem diferente que parecerá muito familiar se você estiver acostumado com os padrões MVVM ou MVC. Essencialmente, a aparência do aplicativo é configurada totalmente na frente e armazenada na própria tela. No tempo de execução, o Arduino faz referência a partes da IU usando IDs pré-atribuídos. O Arduino também obtém informações da tela, como eventos de toque, da mesma maneira. Isso significa que, em vez de desenhar coisas em tempo de execução, o Arduino está agindo apenas como o condutor das visualizações e controles. Se isso não fizer sentido, espere mais um pouco enquanto avançamos.
Prepare a vista
Porque nosso aplicativo Fridgeye é tão simples, exigirá apenas uma única página. O display Nextion, no entanto, é capaz de lidar com aplicativos muito complexos com várias páginas e transições. Esteja você projetando um aplicativo simples como o nosso ou um muito complexo, você usará o Nextion GUI Editor. É um editor WYSIWYG para a família de monitores Nextion e nos ajudará a obter nosso layout perfeito. Novamente, a documentação e a experiência inicial podem ser muito desafiadoras para iniciantes, mas assim que você pegar o jeito, estará projetando layouts complexos rapidamente.
Antes de abrirmos o editor, precisamos preparar um recurso de plano de fundo. Referenciando nossa imagem simulada acima, podemos ver que a única coisa que mudará em nossa tela em tempo de execução é a porcentagem de luz detectada. O logotipo, a cor do plano de fundo e a barra verde na parte inferior são estáticos. Vamos fazer uma imagem com esses itens que podemos usar como fundo. Isso me levou 5 minutos no GIMP e é assim.
O importante a lembrar aqui é fazer com que a imagem tenha exatamente o tamanho que você precisa para a sua tela. No meu caso, estou usando a tela de 3,5 "que se traduz em 480 x 320 pixels. É exatamente o tamanho que fiz minha imagem no GIMP.
Usando o Editor Nextion
NOTA: O Nextion Editor requer o .NET Framework e atualmente é compatível apenas com Windows. Consegui executá-lo sem problemas em uma máquina virtual Windows 10 por meio do Parallels no meu Macbook. Não testei no Wine no Linux.
As etapas a seguir o orientarão na criação de nosso layout de aplicativo simples no Nextion Editor. Com o Nextion Editor aberto, execute as seguintes etapas.
1. Arquivo-> Novo . Dê ao seu projeto um nome e localização em sua máquina.
2. Uma caixa de diálogo aparecerá solicitando que você selecione o seu dispositivo. No meu caso, selecionei Avançado e o número do modelo de 3,5 ". NÃO CLIQUE EM OK . Continue para a etapa 3.
3. Clique em DISPLAY guia no canto superior esquerdo da caixa de diálogo. Selecione a direção de exibição 90 Horizontal.
4. Agora você pode clicar em OK.
5. Clique em Imagem na caixa de ferramentas à esquerda. Isso adicionará um elemento p0 ao seu esboço.
6. Na Imagem / Fonte painel no canto inferior esquerdo, certifique-se de que você tenha a Imagem guia selecionada.
7. Clique em + símbolo.
8. Navegue até a imagem que criamos no GIMP que fornece o plano de fundo para nosso aplicativo e clique em Abrir .
9. No painel de atributos à direita, clique duas vezes na foto área de valor de atributo. Uma caixa de diálogo de seleção de imagem será aberta com o plano de fundo do nosso aplicativo.
10. Selecione o plano de fundo do aplicativo e clique em OK .
11. Clique em Texto na caixa de ferramentas. Isso adicionará uma área de texto chamada t0 no canto superior esquerdo da tela. Observe o valor do id como você precisará dele mais tarde, ao programar o Arduino.
12. Arraste a área de texto para o local desejado abaixo das palavras "Status da luz" e redimensione-a para preencher uma área grande.
13. Para corrigir o fundo branco, precisamos definir o fundo da área de texto como uma versão recortada de nosso fundo principal. Com t0 selecionado alterar o sta atributo dentro do painel de atributos de cor sólida para recortar imagem .
14. Clique duas vezes no picc valor do atributo para a área de texto t0 . Isso abrirá a caixa de diálogo de seleção de imagem. Selecione a imagem de fundo principal novamente e clique em OK . Isso tem o efeito de tornar o fundo da área de texto transparente.
15. Alterar o pco atributo de t0 para ser a cor de fonte desejada. Optei por uma cor personalizada de vermelho:125, verde:231, azul:191.
16. Das Ferramentas no menu, selecione Gerador de fontes.
17. Na caixa de diálogo Font Creator, selecione uma altura de 96 e selecione a fonte que deseja usar. O meu é Montserrat.
18. Dê um nome à fonte e clique em Gerar fonte . Certifique-se de salvá-lo em um local fácil de lembrar. Vamos precisar de novo em um segundo.
19 Feche a caixa de diálogo Font Creator. Você será perguntado se deseja adicionar a fonte gerada. Clique em Sim . Essa fonte agora é referenciada como índice de fonte 0.
20. Adicione algum texto fictício a t0 para ver como ficará mudando o atributo txt de t0 a 100%. Você deve clicar fora da área de valor do atributo para que a área do editor seja atualizada.
21. Reposicionar t0 ao seu gosto.
22. Clique em Compilar na barra de ferramentas superior.
Se tudo tiver corrido bem, você agora terá um arquivo TFT compilado pronto para uso localizado em % AppData% \ Nextion Editor \ bianyi .
Atualize a tela
Existem algumas maneiras de colocar nosso novo design sofisticado na própria tela. Se você tiver um conversor USB-para-TTL, poderá conectar-se diretamente à sua tela de dentro do Nextion IDE e fazer o upload do arquivo TFT compilado diretamente. Caso contrário, você precisará copiar o arquivo TFT compilado para um cartão micro SD que pode ser inserido diretamente em um slot na parte traseira da tela. O cartão SD DEVE estar formatado em FAT32 e deve ter um único arquivo TFT ou você terá erros. O Nextion Editor coloca os arquivos compilados com êxito no seguinte diretório do Windows.
C:\ Usuários \ [seu nome de usuário] \ AppData \ Roaming \ Nextion IDE \ bianyi \ [nome do projeto] .tft Observe que pode ser necessário habilitar a visualização de arquivos ocultos, pois a pasta AppData está marcada como oculta.
Com o arquivo TFT no cartão SD, execute as seguintes etapas.
- Certifique-se de que a tela esteja desligada
- Insira o cartão SD na tela
- Ligue o monitor. A tela mostrará que está atualizando.
- Assim que a atualização terminar, desligue a tela
- Remova o cartão SD. Não se esqueça desta etapa, pois a tela não exibirá sua visualização com o cartão SD ainda inserido.
- Ligue a tela novamente. Agora você deve ver nosso belo aplicativo Fridgeye. A única coisa que falta é o valor do sensor de luz.
Ensine o Arduino a falar Nextion
Agora que o display tem nossa visualização do aplicativo, precisamos escrever algum código no Arduino para que ele possa interagir com ele e definir a porcentagem do status da luz.
Instale a Biblioteca Nextion
1. Baixe a versão mais recente da biblioteca Nextion Arduino.
2. Copie todo o
ITEADLIB_Arduino_Nextion pasta para a pasta de bibliotecas do Arduino. No Windows, ele estará localizado em: C:\ Users \ [your_username] \ Documents \ Arduino \ libraries No Mac, ele estará localizado em:
~ / Documents / Arduino / libraries 3. Se você estiver usando um Arduino Mega, pule para a etapa 7.
4. Se estiver usando um Arduino Uno, abra o
NexConfig.h arquivo localizado em ITEADLIB_Arduino_Nextion pasta que você acabou de copiar para a pasta de bibliotecas do Arduino. 5. Comente as seguintes linhas:
#define DEBUG_SERIAL_ENABLE #define dbSerial Serial 6. Altere o
#define para nexSerial para ser Serial em vez de Serial2. Isso nos permite conectar o display diretamente às linhas RX e TX no UNO. #define nexSerial Serial 7. Reinicie o IDE do Arduino se já estiver aberto. Isso fará com que a biblioteca fique disponível por meio dos menus.
8. Do Arquivo menu selecione Novo para criar um novo esboço.
9. Substitua o código de esboço padrão pelo seguinte:
#include "Nextion.h" long lastUpdate; int SENSOR =A0; NexText t0 =NexText (0, 2, "t0"); void checkSensor () {int val =map (analogRead (SENSOR), 0, 1024, 0, 100); String displayText =String (val) + "%"; t0.setText (displayText.c_str ()); } configuração de void (void) {lastUpdate =millis (); pinMode (SENSOR, INPUT); nexInit (); } loop vazio (vazio) {nexLoop (NULL); if (millis () - lastUpdate> 100) {checkSensor (); lastUpdate =millis (); }}
Passo a passo do código
Se o seu Arduino foo permitir que você entenda esse esboço, você pode pular esta seção completamente. Você é incrível. Se você é novo no código do Arduino, não se deixe assustar. Vamos dar uma olhada neste esboço peça por peça.
#include "Nextion.h" Isso indica nossa intenção de usar a biblioteca Nextion. Não precisamos fazer mais nada, pois o IDE do Arduino sabe onde encontrá-lo, já que o colocamos na pasta libraries.
long lastUpdate; Esta é simplesmente uma variável chamada lastUpdate isso nos permitirá controlar a frequência com que atualizamos a tela posteriormente no esboço.
int SENSOR =A0;
Aqui, estamos apenas dando ao pino A0 em nosso Arduino um nome mais legível por código que podemos usar para referenciá-lo posteriormente. Isso realmente não importa neste esboço, pois é o único pino de E / S com o qual estamos lidando, mas é um bom hábito, pois será útil quando você tiver muitos itens conectados ao Arduino.
NexText t0 =NexText (0, 2, "t0"); Aqui, estamos criando um objeto em nosso esboço que se refere ao elemento de texto que criamos na GUI. Lembre-se de que o chamamos de "
t0 ". O primeiro argumento é o número da página, que é 0 em nosso caso, e o segundo argumento é o ID do componente que lembramos anteriormente é 2. Se você se esqueceu de anotá-lo, volte para o Editor de Nextion, clique em void checkSensor () {int val =map (analogRead (SENSOR), 0, 1024, 0, 100); String displayText =String (val) + "%"; t0.setText (displayText.c_str ()); } O checkSensor () é a essência do nosso aplicativo. Na primeira linha, estamos realmente realizando duas operações. Primeiro chamamos
analogRead (SENSOR) que nos dá um valor inteiro que representa a tensão presente no pino A0 (lembre-se de que o chamamos de SENSOR). Em um Arduino UNO, a chamada analogRead retornará um valor de 0 a 1024, mas queremos mapear isso no intervalo de 0 a 100 por cento. Sem problemas. O IDE do Arduino nos cobre com um mapa () integrado função que nos permite especificar um valor seguido por [do intervalo] e [ao intervalo]. Em seguida, alteramos esse valor int para um tipo String e anexamos um sinal de%. A última etapa é chamar setText () em nosso NexText t0 objeto que criamos anteriormente. configuração de void (void) {lastUpdate =millis (); pinMode (SENSOR, INPUT); nexInit (); } Esta é a função de configuração padrão do Arduino que é executada antes de qualquer outro código de esboço. Inicializamos
lastUpdate para agora chamando o millis () , configure nosso pino A0 para ser uma entrada e inicialize a biblioteca Nextion. void loop (void) {nexLoop (NULL); if (millis () - lastUpdate> 100) {checkSensor (); lastUpdate =millis (); }} Na programação do Arduino, o
loop () A função é continuamente executada até que o Arduino seja desligado e ligado novamente ou reinicializado de alguma outra forma. Temos que atender continuamente a biblioteca Nextion chamando nexLoop () . O parâmetro NULL significa apenas que em nosso exemplo não estamos ouvindo nenhum evento de toque da tela. Em seguida, temos uma verificação muito simples para ver se já se passaram mais de 100 milissegundos desde nossa última leitura do sensor. Nesse caso, chamamos nosso checkSensor () método e defina o lastUpdate variável para agora com outra chamada para millis () . É isso. Menos de 30 linhas de código é o suficiente para interagir com nosso display Nextion a partir de um Arduino.
Conecte a tela
Antes de realmente conectarmos o display ao nosso Arduino, vamos prosseguir e enviar nosso código de esboço para ele a partir do IDE clicando na pequena seta para a direita na barra superior ou usando o atalho Ctrl + U.
A tela não pode ser conectada durante o upload porque no Arduino UNO as mesmas linhas seriais que o monitor usa são necessárias para o IDE para enviar novos esboços. Se você estiver usando um Arduino Mega, não precisa se preocupar com isso.
Agora, com o código enviado ao Arduino, vamos conectar o display. Não se esqueça de desligar o Arduino primeiro. Consulte o diagrama de Fritzing para obter informações de conexão.
Quando você liga o Arduino, seu aplicativo Fridgeye deve estar feliz mostrando a leitura do sensor de luz atual.
Concluindo
Uau! Conseguimos. Então, você pode estar se perguntando neste momento com um toque de raiva em seu tom "O que é bom? Tenho que colocar tudo na minha geladeira para que eu não consiga nem ver a tela." Você é um aluno muito astuto, mas nunca disse que nada disso fosse útil, apenas muito divertido de construir e aprender.
Se isso faz você se sentir melhor, eu o desafio a levar este projeto um passo adiante e descobrir como você poderia colocar o sensor em sua geladeira e ter o monitor em outro lugar. Existem muitas maneiras de atingir esse objetivo. WiFi, Bluetooth, Zigbee e transmissores de rádio genéricos são apenas alguns que vêm à mente. Muitas opções e muitas coisas para aprender. Se você tentar fazer isso, entre em contato comigo no Twitter @KevinSidwar ou envie-me um e-mail (Kevin em sidwar ponto com). Adoraria ouvir sobre suas aventuras na IoT. Até a próxima vez, feliz hackeando.
Se você gostou da minha postagem e gostaria de saber mais sobre os primeiros passos na IoT, pode estar interessado em curso que estou criando em torno do conceito Fridgeye . Se não, agradeço sinceramente por realmente ler até o fim. Espero que você tenha um dia incrível. Você merece isso.
Código
Aplicativo Arduino Sketch para Fridgeye
Este é o código executado no Arduino para que ele possa se comunicar com o display do Nextion e mostrar o leitor do sensor de luz atual. / code> Esquemas
Este é um diagrama de fiação de como conectar o Arduino, fotorresistor, resistor e tela para criar este projeto.
Processo de manufatura
- Compilação de boneca Squid Games usando Arduino UNO
- Capturando as gotas de água com Arduino
- Jogo Arduino Pong - Tela OLED
- Arduino Temp. Monitor e relógio em tempo real com tela 3.2
- Brincando com Nextion Display
- Tech-TicTacToe
- Voltímetro DIY com Arduino e um visor Nokia 5110
- BME280 Temperatura, Umidade e Pressão na Tela Nextion
- Dispositivos Bluetooth controlados por voz com OK Google
- Usando o sensor de pulso vestível MAX30100 com Arduino