Índice:

Relógio M5StickC Cool Com Menu e Controle de Brilho: 8 Passos
Relógio M5StickC Cool Com Menu e Controle de Brilho: 8 Passos

Vídeo: Relógio M5StickC Cool Com Menu e Controle de Brilho: 8 Passos

Vídeo: Relógio M5StickC Cool Com Menu e Controle de Brilho: 8 Passos
Vídeo: M5StickC ESP32 Cool Looking watch with a Menu and Brightness Control -Arduino Tutorial 2024, Maio
Anonim

Neste tutorial aprenderemos como programar ESP32 M5Stack StickC com Arduino IDE e Visuino para exibir uma hora no LCD e também definir a hora e o brilho usando o menu e os botões StickC.

Assista a um vídeo de demonstração.

Etapa 1: O que você precisa

O que você vai precisar
O que você vai precisar
O que você vai precisar
O que você vai precisar

M5StickC ESP32: você pode obtê-lo aqui

Programa Visuino: Baixe o Visuino

Nota: Verifique este tutorial aqui sobre como instalar a placa StickC ESP32

Etapa 2: Inicie o Visuino e selecione o tipo de placa M5 Stack Stick C

Inicie o Visuino e selecione o tipo de placa M5 Stack Stick C
Inicie o Visuino e selecione o tipo de placa M5 Stack Stick C
Inicie o Visuino e selecione o tipo de placa M5 Stack Stick C
Inicie o Visuino e selecione o tipo de placa M5 Stack Stick C
Inicie o Visuino e selecione o tipo de placa M5 Stack Stick C
Inicie o Visuino e selecione o tipo de placa M5 Stack Stick C

Inicie o Visuino como mostrado na primeira imagem Clique no botão "Ferramentas" no componente Arduino (Figura 1) no Visuino. Quando a caixa de diálogo aparecer, selecione "M5 Stack Stick C" como mostrado na Figura 2

Etapa 3: no Visuino, defina a placa StickC

No Visuino, defina a placa StickC
No Visuino, defina a placa StickC
No Visuino, defina a placa StickC
No Visuino, defina a placa StickC
No Visuino, defina a placa StickC
No Visuino, defina a placa StickC
No Visuino, defina a placa StickC
No Visuino, defina a placa StickC
  1. Clique na placa "M5 Stack Stick C" para selecioná-la
  2. Na janela "Propriedades" selecione "Módulos" e clique em "+" para expandir,
  3. Selecione "Display ST7735" e clique em "+" para expandi-lo,
  4. Defina "Orientação" como "goRight"
  5. Defina "Background Color" para "ClBlack"
  6. Selecione "Elementos" e clique no botão azul com 3 pontos …
  7. A caixa de diálogo de elementos mostrará
  8. Na caixa de diálogo de elementos, arraste 2X "Campo de texto" do lado direito para a esquerda
  9. Clique em "Text Field1" no lado esquerdo para selecioná-lo, então na "janela Properties" clique em "Color" e defina-o como "aclOrange" e clique em "Fill Color" e defina-o como "aclBlack" (você pode brincar com as cores, se quiser) -também nas janelas de propriedades, defina X: 10 e Y: 20 aqui é onde você deseja exibir a hora no LCD - defina o tamanho: 3 (esse é o tamanho da fonte da hora)
  10. Clique em "Text Field2" no lado esquerdo para selecioná-lo, então na "janela Properties" clique em "Color" e defina como "aclAqua" e clique em "Fill Color" e defina como "aclBlack"

(Você pode brincar com as cores se quiser) - defina "Valor inicial" para: Defina HORA

-também nas janelas de propriedades, defina X: 10 e Y: 2, aqui é onde você deseja exibir o menu no LCD -set size: 1 (esse é o tamanho da fonte do menu)

Feche a janela de elementos

  1. Clique na placa "M5 Stack Stick C" para selecioná-la
  2. Na janela "Propriedades" selecione "Módulos" e clique em "+" para expandir,
  3. Selecione "Exibir despertador em tempo real (RTC)" e clique em "+" para expandi-lo,
  4. Selecione "Elementos" e clique no botão azul com 3 pontos …
  5. Na caixa de diálogo Elementos, arraste "Definir hora" do lado direito para a esquerda e, na janela de propriedades, defina "Adicionar valor" como: Verdadeiro e "Valor" como: 1
  6. Na caixa de diálogo de elementos, arraste "Definir minuto" da direita para a esquerda e, na janela de propriedades, defina "Adicionar valor" para: Verdadeiro e "Valor" para: 1
  7. Na caixa de diálogo Elementos, arraste "Definir segundo" da direita para a esquerda e, na janela de propriedades, defina "Adicionar valor" como: Verdadeiro e "Valor" como: 1

Feche a janela de elementos

Etapa 4: Adicionar componentes no Visuino

No Visuino Adicionar Componentes
No Visuino Adicionar Componentes
  1. Adicionar 2x componente "Botão Debounce"
  2. Adicionar componente "Botão de repetição automática"
  3. Adicionar componente "Text Array"
  4. Adicionar componente "Matriz analógica"
  5. Adicionar 2x componente "Contador"
  6. Adicionar componente "Clock Demux (Multiple Output channel Switch)"
  7. Adicionar componente "Decodificar (Dividir) Data / Hora"
  8. Adicionar componente "FormattedText1"

Etapa 5: nos componentes do conjunto Visuino

No Visuino Set Components
No Visuino Set Components
No Visuino Set Components
No Visuino Set Components
No Visuino Set Components
No Visuino Set Components
  1. Selecione o componente "FormattedText1" e na janela "Propriedades" defina "Texto" para:% 0:% 1:% 2
  2. Clique duas vezes no componente "FormattedText1" e na caixa de diálogo Elementos arraste 3x "Elemento de texto" para a esquerda
  3. Selecione "TextElement1" no lado esquerdo e na janela de propriedades defina "Fill Character" para: 0 e "Length" para: 2
  4. Selecione "TextElement2" no lado esquerdo e na janela de propriedades defina "Fill Character" para: 0 e "Length" para: 2
  5. Selecione "TextElement3" no lado esquerdo e na janela de propriedades defina "Fill Character" para: 0 e "Length" para: 2
  6. Selecione o componente "ClockDemmux1" e na janela de propriedades defina "Pinos de saída" para: 5
  7. Selecione o componente "Contador1" e na janela de propriedades expanda "Máx" e defina "Valor" para: 4
  8. Selecione o componente "Contador1" e, na janela de propriedades, expanda "Min" e defina "Valor" como: 0
  9. Selecione o componente "Contador2" e na janela de propriedades expanda "Máx" e defina "Valor" para: 6
  10. Selecione o componente "Contador2" e na janela de propriedades expanda "Min" e defina "Valor" para: 0 CONSTRUINDO O MENU:
  11. Selecione o componente "Array1" (Text Array) e clique duas vezes nele. - Na janela de elementos, arraste 4X "Value" para o lado esquerdo - No lado esquerdo selecione "Item [1]" e na janela de propriedades defina "Value" para: DEFINIR HORAS - No lado esquerdo selecione "Item [2]" e na janela de propriedades defina "Valor" para: DEFINIR MINUTOS - No lado esquerdo selecione "Item [3]" e na janela de propriedades defina "Valor" para: DEFINIR SEGUNDOS - No lado esquerdo, selecione "Item [4]" e na janela de propriedades defina "Valor" para: DEFINIR BRILHOFeche a janela Elementos. DEFININDO OS VALORES DE BRILHO:
  12. Selecione o componente "Array2" (Matriz analógica) e clique duas vezes nele. - Na janela de elementos, arraste 6X "Valor" para o lado esquerdo - No lado esquerdo selecione "Item [0]" e na janela de propriedades defina "Valor" para: 1

    - No lado esquerdo selecione "Item [1]" e na janela de propriedades defina "Valor" para: 0,9

    - No lado esquerdo selecione "Item [2]" e na janela de propriedades defina "Valor" para: 0,8 - No lado esquerdo selecione "Item [3]" e na janela de propriedades defina "Valor" para: 0,7-Ligado no lado esquerdo Selecione "Item [4]" e na janela de propriedades defina "Valor" para: 0,6-No lado esquerdo selecione "Item [5]" e na janela de propriedades defina "Valor" para: 0,55

Etapa 6: nos componentes do Visuino Connect

Nos componentes do Visuino Connect
Nos componentes do Visuino Connect
Nos componentes do Visuino Connect
Nos componentes do Visuino Connect
Nos componentes do Visuino Connect
Nos componentes do Visuino Connect
Nos componentes do Visuino Connect
Nos componentes do Visuino Connect
  1. Conecte o pino A (M5) do "M5 Stack Stick C" ao pino "Button2" [In]
  2. Conecte o pino "M5 Stack Stick C" [B] ao pino "Button1" [In]
  3. Conecte o pino "Button2" [Out] ao pino 'RepeatButton1 "[In]
  4. Conecte o pino "RepeatButton1" [Out] ao pino "ClockDemmux1" [In]
  5. Conecte o pino "Button1" [Saída] ao pino "Contador1" [Entrada]
  6. Conecte "M5 Stack Stick C"> pino "Real Time Alarm Clock (RTC)" [Out] ao pino "DecodeDateTime1" [In]
  7. Conecte o pino "DecodeDateTime1" [Hour] a "FormattedText1"> pino "TextElement1" [In]
  8. Conecte o pino "DecodeDateTime1" [Minute] a "FormattedText1"> pino "TextElement2" [In]
  9. Conecte o pino "DecodeDateTime1" [Second] a "FormattedText1"> pino "TextElement3" [In]
  10. Conecte o pino "FormattedText1" [Out] à placa "M5 Stack Stick C"> "Display ST7735"> pino "Text Field1" [In]
  11. Conecte o pino "Counter1" [Out] ao pino "ClockDemmux1" [Selecionar] e ao pino "Array1" [Índice]
  12. Conecte o pino "Counter2" [Out] ao pino "Array2" [Index]
  13. Conecte o pino "Array1" [Out] à placa "M5 Stack Stick C"> "Display ST7735"> pino "Text Field2" [In]
  14. Conecte o pino "Array2" [Saída] à placa "M5 Stack Stick C"> "Display ST7735"> pino [Brilho]
  15. Conecte o pino "ClockDemmux1" [1] à placa "M5 Stack Stick C"> "Real Time Alarm Clock (RTC)"> pino "Set Hour1" [Clock]
  16. Conecte o pino "ClockDemmux1" [2] à placa "M5 Stack Stick C"> "Real Time Alarm Clock (RTC)"> pino "Set Minute1" [Clock]
  17. Conecte o pino "ClockDemmux1" [3] à placa "M5 Stack Stick C"> "Real Time Alarm Clock (RTC)"> pino "Set Second1" [Clock]
  18. Conecte o pino "ClockDemmux1" [4] ao pino "Counter2" [In]

Etapa 7: gerar, compilar e fazer upload do código do Arduino

Gere, compile e carregue o código do Arduino
Gere, compile e carregue o código do Arduino

No Visuino, na parte inferior, clique na guia "Construir", certifique-se de que a porta correta esteja selecionada e, em seguida, clique no botão "Compilar / Construir e Carregar".

Etapa 8: Jogue

Se você ligar o módulo M5Sticks, o display deve começar a mostrar a hora. Você pode alterar o tempo e o brilho usando os botões "B" para exibir o Menu e alternando entre (Definir Horas, Definir Minutos, Definir Segundos, Definir Brilho) e usar o botão "M5" para defini-lo.

Parabéns! Você concluiu seu projeto M5Sticks com Visuino. Também está em anexo o projeto Visuino, que criei para este Instructable, que você pode baixar aqui. Você pode fazer o download e abri-lo em Visuino:

Recomendado: