Reloj de aspecto fresco M5StickC con menú y control de brillo: 8 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:40

En este tutorial aprenderemos cómo programar ESP32 M5Stack StickC con Arduino IDE y Visuino para mostrar una hora en la pantalla LCD y también configurar la hora y el brillo usando el menú y los botones StickC.

Vea un video de demostración.

Paso 1: lo que necesitará

M5StickC ESP32: puedes conseguirlo aquí

Programa Visuino: Descarga Visuino

Nota: Consulte este tutorial aquí sobre cómo instalar la placa StickC ESP32

Paso 2: Inicie Visuino y seleccione el tipo de placa M5 Stack Stick C

Inicie Visuino como se muestra en la primera imagen Haga clic en el botón "Herramientas" en el componente Arduino (Imagen 1) en Visuino Cuando aparezca el cuadro de diálogo, seleccione "M5 Stack Stick C" como se muestra en la Imagen 2

Paso 3: En Visuino, coloque la placa StickC

1. Haga clic en el tablero "M5 Stack Stick C" para seleccionarlo
2. En la ventana "Propiedades", seleccione "Módulos" y haga clic en "+" para expandir,
3. Seleccione "Display ST7735" y haga clic en "+" para expandirlo,
4. Establece "Orientación" en "ir a la derecha"
5. Establezca "Color de fondo" en "ClBlack"
6. Seleccione "Elementos" y haga clic en el botón azul con 3 puntos …
7. Se mostrará el cuadro de diálogo de elementos
8. En el cuadro de diálogo Elementos, arrastre 2X "Campo de texto" del lado derecho al izquierdo.
9. Haga clic en el "Campo de texto1" en el lado izquierdo para seleccionarlo, luego en la "ventana Propiedades" haga clic en "Color" y configúrelo en "aclOrange" y haga clic en "Color de relleno" y configúrelo en "aclBlack" (Usted puede jugar con los colores si lo desea) -también en las ventanas de propiedades configure X: 10 e Y: 20 aquí es donde desea mostrar la hora en el tamaño de la pantalla LCD: 3 (este es el tamaño de fuente de la hora)
10. Haga clic en el "Campo de texto 2" en el lado izquierdo para seleccionarlo, luego en la "ventana Propiedades" haga clic en "Color" y configúrelo en "aclAqua" y haga clic en "Color de relleno" y configúrelo en "aclBlack"

(Puede jugar con los colores si lo desea) -configurar "Valor inicial" en: Establecer HORA

-también en las ventanas de propiedades configure X: 10 e Y: 2 aquí es donde desea mostrar el menú en la pantalla LCD -set size: 1 (este es el tamaño de fuente del menú)

Cerrar la ventana de elementos

1. Haga clic en el tablero "M5 Stack Stick C" para seleccionarlo
2. En la ventana "Propiedades", seleccione "Módulos" y haga clic en "+" para expandir,
3. Seleccione "Mostrar reloj despertador en tiempo real (RTC)" y haga clic en "+" para expandirlo,
4. Seleccione "Elementos" y haga clic en el botón azul con 3 puntos …
5. En el cuadro de diálogo Elementos, arrastre "Establecer hora" de la derecha a la izquierda y, en la ventana de propiedades, establezca "Agregar valor" en: Verdadero y "Valor" en: 1
6. En el cuadro de diálogo Elementos, arrastre "Establecer minuto" del lado derecho a la izquierda y, en la ventana de propiedades, establezca "Agregar valor" en: Verdadero y "Valor" en: 1
7. En el cuadro de diálogo Elementos, arrastre "Establecer segundo" de la derecha a la izquierda y, en la ventana de propiedades, establezca "Agregar valor" en: Verdadero y "Valor" en: 1

Cerrar la ventana de elementos

Paso 4: Agregar componentes en Visuino

1. Agregue el componente 2x "Botón de rebote"
2. Agregar el componente "Botón de repetición automática"
3. Agregar el componente "Text Array"
4. Agregar el componente "Analog Array"
5. Agregar 2 veces el componente "Contador"
6. Agregue el componente "Clock Demux (interruptor de canal de salida múltiple)"
7. Agregar el componente "Decodificar (dividir) fecha / hora"
8. Agregar el componente "FormattedText1"

Paso 5: en los componentes del conjunto de Visuino

1. Seleccione el componente "FormattedText1" y en la ventana "Propiedades" establezca "Texto" en:% 0:% 1:% 2
2. Haga doble clic en el componente "FormattedText1" y, en el cuadro de diálogo Elementos, arrastre 3 veces "Elemento de texto" hacia la izquierda.
3. Seleccione "TextElement1" en el lado izquierdo y en la ventana de propiedades establezca "Carácter de relleno" en: 0 y "Longitud" en: 2
4. Seleccione "TextElement2" en el lado izquierdo y en la ventana de propiedades establezca "Carácter de relleno" en: 0 y "Longitud" en: 2
5. Seleccione "TextElement3" en el lado izquierdo y en la ventana de propiedades establezca "Carácter de relleno" en: 0 y "Longitud" en: 2
6. Seleccione el componente "ClockDemmux1" y en la ventana de propiedades establezca "Pines de salida" en: 5
7. Seleccione el componente "Contador1" y en la ventana de propiedades expanda "Máx" y establezca "Valor" en: 4
8. Seleccione el componente "Contador1" y en la ventana de propiedades expanda "Mín." Y establezca "Valor" en: 0
9. Seleccione el componente "Contador2" y en la ventana de propiedades expanda "Máx." Y establezca "Valor" en: 6
10. Seleccione el componente "Contador2" y en la ventana de propiedades expanda "Mín" y establezca "Valor" en: 0 CONSTRUYENDO EL MENÚ:
11. Seleccione el componente "Array1" (Text Array) y haga doble clic en él. -En la ventana de elementos, arrastre 4X "Valor" hacia el lado izquierdo - En el lado izquierdo, seleccione "Elemento [1]" y en la ventana de propiedades establezca "Valor" a: SET HOURS-En el lado izquierdo, seleccione "Item [2]" y en la ventana de propiedades configure "Value" a: SET MINUTES-En el lado izquierdo seleccione "Item [3]" y en la ventana de propiedades configure "Value" para: CONFIGURAR SEGUNDOS: en el lado izquierdo, seleccione "Elemento [4]" y en la ventana de propiedades configure "Valor" para: CONFIGURAR BRILLO Cierra la ventana Elementos. CONFIGURAR LOS VALORES DE BRILLO:

12. Seleccione el componente "Array2" (Analog Array) y haga doble clic en él. -En la ventana de elementos, arrastre 6X "Valor" hacia el lado izquierdo-En el lado izquierdo, seleccione "Elemento [0]" y en la ventana de propiedades establezca "Valor" a 1

    -En el lado izquierdo, seleccione "Elemento [1]" y en la ventana de propiedades establezca "Valor" en: 0.9

    -En el lado izquierdo, seleccione "Elemento [2]" y en la ventana de propiedades establezca "Valor" en: 0,8 -En el lado izquierdo seleccione "Elemento [3]" y en la ventana de propiedades establezca "Valor" en: 0,7-Activado el lado izquierdo Seleccione "Elemento [4]" y en la ventana de propiedades establezca "Valor" en: 0,6-En el lado izquierdo seleccione "Elemento [5]" y en la ventana de propiedades establezca "Valor" en: 0,55

Paso 6: en los componentes de Visuino Connect

1. Conecte el pin A (M5) del "M5 Stack Stick C" al pin "Button2" [In]
2. Conecte el pin [B] del "M5 Stack Stick C" al pin "Button1" [In]
3. Conecte el pin "Button2" [Out] al pin "RepeatButton1" [In]
4. Conecte el pin "RepeatButton1" [Out] al pin "ClockDemmux1" [In]
5. Conecte el pin "Button1" [Out] al pin "Counter1" [In]
6. Conecte el pin "M5 Stack Stick C"> "Reloj despertador en tiempo real (RTC)" [Salida] al pin "DecodeDateTime1" [In]
7. Conecte el pin "DecodeDateTime1" [Hora] al pin "FormattedText1"> "TextElement1" [In]
8. Conecte el pin [Minuto] "DecodeDateTime1" al pin "FormattedText1"> "TextElement2" [In]
9. Conecte el pin "DecodeDateTime1" [Second] al pin "FormattedText1"> "TextElement3" [In]
10. Conecte el pin "FormattedText1" [Out] a la placa "M5 Stack Stick C"> "Display ST7735"> pin "Text Field1" [In]
11. Conecte el pin "Contador1" [Salida] al pin "ClockDemmux1" [Seleccionar] y al pin "Array1" [Índice]
12. Conecte el pin "Contador2" [Salida] al pin "Array2" [Índice]
13. Conecte el pin "Array1" [Out] a la placa "M5 Stack Stick C"> "Display ST7735"> pin "Text Field2" [In]
14. Conecte el pin "Array2" [Salida] a la placa "M5 Stack Stick C"> "Display ST7735"> pin [Brillo]
15. Conecte el pin "ClockDemmux1" [1] a la placa "M5 Stack Stick C"> "Reloj de alarma en tiempo real (RTC)"> pin "Set Hour1" [Reloj]
16. Conecte el pin "ClockDemmux1" [2] a la placa "M5 Stack Stick C"> "Reloj de alarma en tiempo real (RTC)"> pin "Set Minute1" [Reloj]
17. Conecte el pin "ClockDemmux1" [3] a la placa "M5 Stack Stick C"> "Reloj despertador en tiempo real (RTC)"> pin "Set Second1" [Reloj]
18. Conecte el pin "ClockDemmux1" [4] al pin "Counter2" [In]

Paso 7: Genere, compile y cargue el código Arduino

En Visuino, en la parte inferior, haga clic en la pestaña "Construir", asegúrese de que esté seleccionado el puerto correcto, luego haga clic en el botón "Compilar / Construir y Cargar".

Paso 8: jugar

Si enciende el módulo M5Sticks, la pantalla debería comenzar a mostrar la hora. Puede cambiar la hora y el brillo usando los botones "B" para mostrar el menú y cambiar entre (Configurar horas, Configurar minutos, Configurar segundos, Configurar brillo) y usar el botón "M5" para configurarlo.

¡Felicidades! Ha completado su proyecto M5Sticks con Visuino. También se adjunta el proyecto Visuino, que creé para este Instructable, puedes descargarlo aquí. Puede descargarlo y abrirlo en Visuino: