Bricolaje Cómo mostrar la hora en M5StickC ESP32 con Visuino - Fácil de hacer: 9 pasos

2025 Autor: John Day | [email protected]. Última modificación: 2025-01-23 14:39

En este tutorial aprenderemos cómo programar ESP32 M5Stack StickC con Arduino IDE y Visuino para mostrar la hora en la pantalla LCD.

Paso 1: lo que necesitará

1. M5StickC ESP32: puedes conseguirlo aquí
2. 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: Agregar y configurar componentes en Visuino

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, seleccione "Pantalla ST7735" y haga clic en "+" para expandirlo
3. Establezca la Orientación en "goRight" <esto significa cómo se orientará el tiempo en la pantalla LCD
4. Seleccione "Elementos" y haga clic en el botón azul con 3 puntos …
5. Se mostrará el cuadro de diálogo de elementos
6. En el cuadro de diálogo Elementos, arrastre "Campo de texto" de la derecha a la izquierda.

Haga clic en el "Campo de texto1" en el lado izquierdo para seleccionarlo, luego en la "ventana Propiedades" haga clic en el color y configúrelo en "aclOrange"

-también en las ventanas de propiedades, configure X: 10 e Y: 20 aquí es donde desea mostrar la hora en la pantalla LCD

-set size: 3 este es el tamaño de fuente de la época

-Puedes configurar el tamaño y el color del texto si quieres

Cerrar la ventana de elementos

Opcionalmente:

Haga clic en el tablero "M5 Stack Stick C" para seleccionarlo

En la ventana "Propiedades", seleccione "Módulos" y haga clic en "+" para expandir, seleccione "Pantalla ST7735" y haga clic en "+" para expandirlo y verá "Color de fondo", este es el color predeterminado de la pantalla, cámbielo a su color favorito, también puede configurar el brillo de la pantalla, el valor predeterminado es 1 (máximo), puede configurarlo en 0.5 o algún otro valor para hacerlo más tenue

6. Agregar el componente "Decodificar (dividir) fecha / hora" 7. Agregar el componente "Texto formateado"

Paso 4: en los componentes del conjunto de Visuino

1. Seleccione el componente "FormattedTxt1" 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.

Paso 5: en los componentes de Visuino Connect

• Conecte "M5 Stack Stick C"> Reloj de alarma en tiempo real (RTC)> Pin [Out] al pin del componente "DecodeDateTime1" [In]
• Conecte el pin [Hora] del componente "DecodeDateTime1" al pin [In] del componente "FormattedText1" "TextElement1"
• Conecte el pin [Minuto] del componente "DecodeDateTime1" al pin [In] del componente "FormattedText1" "TextElement2"
• Conecte el pin del componente "DecodeDateTime1" [Segundo] al pin del componente "FormattedText1" "TextElement3" [In]
• Conecte el pin del componente "FormattedText1" [Out] a la placa "M5 Stack Stick C" "Display ST7735"> pin "Text Field1" [In]

Paso 6: 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 7: jugar

Si enciende el módulo M5Sticks, la pantalla debería comenzar a mostrar la hora.

¡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:

Paso 8: Extra: Truco simple

Puede usar la hora actual que estaba en su computadora en el momento en que compiló el código en Arduino.

Para hacer eso, simplemente suelte un componente "Compile Date / Time" y conéctelo al pin "M5 Stack Stick C"> "Real Time Alarm Clock (RTC)" [Establecer]

Puedes descargar el archivo del proyecto con este truco aquí.

Paso 9: en el siguiente tutorial …

En el siguiente tutorial, te mostraré cómo hacer un reloj de aspecto genial en el que puedes configurar la hora con los botones StickC. Manténgase atento y consulte mis otros tutoriales aquí.