ESP32

ESP32-C3 Analog Smart Watch Using LVGL, SquareLine Studio, and CrowPanel

ESP32-C3 Analog Smart Watch:

ESP32-C3 Analog Smart Watch Using LVGL, SquareLine Studio, and CrowPanel- This is my 4th article in the Smart Watch programming series using the CrowPanel ESP32-C3 1.28-inch IPS Capacitive Touch Display. In Part 3, we designed a digital watch using a background image designed in Figma as the watch face. Before reading today’s article, I highly recommend you read the previous article, as it explains how to add a screen, use a custom watch face, import and create custom fonts, add and name labels, and fix the most common errors.

In today’s article, we will continue with the same project, add a 3rd screen, and create an analog watch. After reading this article, you will learn how to add multiple screens, switch between screens, and animate hour and minute hands.




allpcb circuit

So, without any further delay, let’s get started!!!

ESP32-C3 Analog Smart Watch multiple screens in squareline studio

So far, we have designed two GUI’s; one for the Counter and the other one for the digital watch. For the analog watch, we are going to add a third screen. Go to the Widgets Tab, scroll down, and click on Screen.

ESP32-C3 Analog Smart Watch thrid screen in squareline studio

On the Inspector tab, go to STYLE (MAIN) and set the background radius to 240 and set the background color.

ESP32-C3 Analog Smart Watch background

For the digital watch, I designed the watch face in Figma. However, this time I used Adobe Photoshop to create the watch face, hour hand, and minute hand.

ESP32-C3 Analog Smart Watch face in squareline studio

To ensure a transparent background, I saved these images as PNG files. Now, let’s import all three images into SquareLine Studio. Simply, click the ADD FILE INTO ASSETS button and select the files you want to import.



As you can see, all three images have been added to the Assets. Let’s add the watch face image.

ESP32-C3 Analog Smart Watch face setting

Next, on the inspector tab go to the background and select the watch face you want to set as the background. You can see the image has been successfully set as the watch face.

Next, to add the hour and minute hands, we will use the image widget. Simply, click the image widget, the image box will be added on the screen3, then on the right side select the watch hand. As you can see in the image below, the hour hand has been added. Now, follow the same steps for adding the minute hand.

ESP32-C3 Analog Smart Watch hands



Now, name the image widgets so we can easily identify them on the Arduino side.

ESP32-C3 Analog Smart Watch hands naming in squareline studio

I named the two image widgets as;

Imagehourhand and imageminutehand.

In the previous video, I explained in detail how to switch between two screens. Let me also play the simulation so you can clearly see and understand what I am about to explain.

ESP32-C3 Analog Smart Watch simulations in squareline studio

As of now, you can see I can only switch between two screens: Screen1 and Screen2. Screen3 doesn’t show up because I haven’t set the screen change action for Screen3 yet.

While Screen2 is selected, you can see there’s only one event. Its trigger type is set to GESTURE_RIGHT, and the action is set to Screen1. This means that when I swipe my finger to the right on the display, Screen1 will show up.



Now, let’s add another event so that when I swipe my finger to the left, Screen3 will show up. Let’s do it!

Set the Trigger type to GESTURE_LEFT.

Next, set the Action type to CHANGE SCREEN.

Then click on the ADD button.

Select Screen3.

Now, repeat the same steps for Screen3.

While the Screen3 is selected, click on the ADD EVENT.

Set the Trigger type to GESTURE_RIGHT.

Next, set the Action type to CHANGE SCREEN.

Then click on the ADD button.

Select Screen2.

After adding the Change Screen events, play the simulation to ensure everything is working.

ESP32-C3 Analog Smart Watch multiple screens

Great! It’s working.

Now, save the project and Export the UI files. As I explained in my previous articles and videos, each time you generate the UI files, you have to copy all the files and paste them into the same Arduino project folder.

After copying and pasting the newly generated UI files. Then go ahead and open the main Arduino file.




ESP32-C3 Analog Smart Watch Code:

In Part 3, I already explained where to find the screen properties, how to enable support for large fonts, and how to locate all the variables. I recommend reading my previous article to learn how to avoid errors.

There is just one thing you need to do every time you generate new UI files: change LV_COLOR_16_SWAP from 0 to 1.

Let me tell you, if you want to make everything easier, simply download this template folder. It includes all the files with all errors already fixed for you.



Practical Demonstration:

ESP32-C3 Analog Smart Watch counter using lvgl and squareline studio

On the first screen, you can see a fully functional counter. I can increment the counter using the + button and long-press the Reset button to reset the counter value back to zero.

Now, if I swipe my finger to the left, Screen2 will appear, showing a digital watch with a custom watch face designed in Figma.

ESP32-C3 Analog Smart Watch designing using squareline lvgl

There are many online and offline software tools you can use to design amazing futuristic watch faces, or you can simply purchase ready-made watch faces.



If I swipe my finger to the left one more time, Screen3 will appear, showcasing our analog watch.

ESP32-C3 Analog Smart Watch

I am sure you now have an idea of how to use and animate PNG images. I know the design isn’t too attractive, and you can already see the colors are slightly distorted. This is because I used images with 32-bit color depth, while the CrowPanel uses 16-bit color depth. If these images were 16-bit, this analog watch would look much better.

ESP32-C3 Analog Smart Watch

So, here’s a pro tip: use images with 16-bit color depth for better results.

So, that’s all for now!



Watch Video Tutorial:

Engr Fahad

My name is Shahzada Fahad and I am an Electrical Engineer. I have been doing Job in UAE as a site engineer in an Electrical Construction Company. Currently, I am running my own YouTube channel "Electronic Clinic", and managing this Website. My Hobbies are * Watching Movies * Music * Martial Arts * Photography * Travelling * Make Sketches and so on...

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button