Display Time on M5Stack CoreS3 ESP32-S3

This project was made by Visuino user Rafał. Visit his youtube channel here: https://www.youtube.com/@Edappl/videos

Step 1: What You Will Need

• M5Stack CoreS3 ESP32S3 loT Development Kit
• Visuino program: Download Visuino

Step 2: Start Visuino, and Select the M5 Stack CoreS3 Board Type

Start Visuino as shown in the first picture Click on the "Tools" button on the Arduino component (Picture 1) in Visuino When the dialog appears, select "M5 Stack CoreS3" as shown on Picture 2

Step 3: In Visuino Add & Set Components

Add "Decode(Split) Date/Time" component

• Add "Formatted Text" component
• Double click on the "FormattedText1" and in the Elements window drag 3X "Text Element" to the left side and close the Elements window
• Select "FormattedText1" and in the properties window set "Text" to: %0:%1:%2

(Where %0 represents TextElement1, %1 represents TextElement2, %2 represents TextElement3)

Step 4: In Visuino Set M5 Stack CoreS3 Display

• Select "M5 Stack CoreS3" board and in the properties window expand "Modules">"TFT Display">"Elements" and click on the 3 dots button
• In the "Elements" window drag "Text Field" to the left side
• In the "Elements" window drag 6X "Draw Scene" to the left side, and in the properties window set "Color" to $FF0080FF, "Fill Color" to aclBlack, "Size" to 6, "Width" to 20, "X" to 20, "Y" to 10
• In the "Elements" window drag "Draw Bitmap" to the left side, and in the properties window set "X" to 50, "Y" to 90, Select "Bitmap" and click on the 3 dot button and in the Bitmap Editor Load the bitmap that is attached above (the Bell)
• Close All the windows

Step 5: In Visuino Connect Components

• Connect M5 Stack CoreS3>Real Time Alarm Clock(RTC) pin [Out] to "DecodeDateTime1" pin [In]
• Connect "DecodeDateTime1" pin [Hour] to "FormattedText1" > "TextElement1" pin [In]
• Connect "DecodeDateTime1" pin [Minute] to "FormattedText1" > "TextElement2" pin [In]
• Connect "DecodeDateTime1" pin [Second] to "FormattedText1" > "TextElement3" pin [In]
• Connect "DecodeDateTime1" pin [Second] to "FormattedText1" pin [Clock]
• Connect "FormattedText1" pin [Out] to M5 Stack CoreS3>TFT Display>Text Field1 pin [In]

Step 6: Generate, Compile, and Upload the Code

In Visuino, at the bottom click on the "Build" Tab, make sure the correct port is selected, then click on the "Compile/Build and Upload" button.

Step 7: Play

After uploading the project to the M5 Stack CoreS3 the board will start to display Time.

Congratulations! You have completed your LED project with Visuino. Also attached is the Visuino project, that was created for this Tutorial. You can download and open it in Visuino: https://www.visuino.com