ESP32-C3 Digital Watch using LVGL, Squareline Studio, and ESP32-C3 CrowPanel

ESP32-C3 Digital Watch:

ESP32-C3 Digital Watch using LVGL, Squareline Studio, and ESP32-C3 CrowPanel- This is my 3rd article in the smartwatch programming series using the CrowPanel ESP32-C3 1.28-inch IPS Capacitive Touch Display.

In Part 2, we designed a simple counter using buttons and labels. We will continue with the same project, add another screen, and make a digital watch. After reading this article, you will learn how to add multiple screens, how to switch between screens, how to use an image as the background, how to create custom fonts, and how to fix errors.

Note: if you want anything confusing; you can watch the video tutorial given at the end of this article.

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

This is the Counter GUI we designed in Part 2. For the digital watch, we are going to add a second screen. Go to the Widgets Tab, scroll down, and click on Screen.

On the Inspect tab, go to STYLE (MAIN) and set the background radius to 240 and set the background color. After this, you have to decide whether you want to make a simple digital watch or use some kind of watch face to make your digital watch look attractive.

While making this digital watch, I only used simple labels.

So, that’s why it’s not very attractive. If you search on Google, you will find thousands of watch faces that you can use as background images to take your digital smartwatch to the next level.

In my case, to avoid any copyright issues, I designed this simple watch face in Figma and saved it as a PNG file.

Now, to use this image as the watch face in SquareLine Studio, go to the Assets Tab, click on ADD FILE INTO ASSETS, and then select the image you want to use as the watch face.

As you can see, the image has been added to the Assets. Now, to use this image as the background, look at the right side where you can see the Background Image section. Expand it by clicking on the arrow, check the box to activate the background image, and then select the image. You can see the image has been set as the watch face.

If you want to change the opacity, simply check the box and try different values to see how it looks.

You can see the watch face border doesn’t look good at all. To hide this, I can make use of the Outline.

Now, it looks good.

To switch between the two screens; let’s say when I am on Screen1 and swipe my finger to the left side, Screen2 should show up, and when I swipe my finger to the right side, Screen1 should show up. Let’s do it.

While Screen1 is selected, click the ADD EVENT button.

Set the Trigger type to GESTURE_LEFT.

Next, set the Action type to CHANGE SCREEN.

Then click on the ADD button.

Select Screen2.

Now, repeat the same steps for Screen2.

Set the Trigger type to GESTURE_RIGHT.

Next, set the Action type to CHANGE SCREEN.

Then click on the ADD button.

Select Screen1.

Let’s play the simulation.

Great! It’s working.

Now, let’s add three labels for displaying Hours, Minutes, and Seconds.

Let’s name these labels so we can easily find them in the variables list on the Arduino side.

lblHour

lblminutes

lblseconds

After naming all the 3 labels, next, we have to select the fonts and set their size.

While designing the Counter GUI, I used the default text, but for the digital watch, I am going to create custom fonts. For this, I have downloaded the Seven Segment font. You can use any font as per your choice, you can search on Google and download any font you like. To import the font, simply click the ADD FILE INTO ASSETS button, then select the font. That’s it.

Now, let’s go to the Font Tab and create a font for the Hours label.

Name the font.

Select the Seven Segment font.

Set the font size.

Finally, Click the CREATE button.

You can see the font has been created.

Now, let’s go back to the Inspect Tab and change the Text Font to the one we just created. For this, simply go back to the Inspector Tab and on the SYLE(MAIN), check the Text Font and then click on the arrow head and select the HourFont we created.

You can see the font has been changed to Seven Segment.

I can assign the same font to Minutes and Seconds as well, but it’s good to have separate fonts for each one so we can individually modify any font. So, using the same method, create two more fonts for the Minutes and Seconds. Adjust their size and color. You can play with all the properties to check their effect on the text.

Our GUI is ready. Now, let’s save the project and generate the UI files.

As I explained in my previous article and video, 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 UI files, then you can go ahead and open the Arduino main file.

This time, you can see some new files have been added. You can see Screen2 and the three fonts we created.

If you open the ui_Screen2, you will find the properties of all the widgets used on Screen2. And if you go to the ui.h file, you will find all the variables.

Last time, we used the ui_lblCounter variable, and this time we will use ui_lblseconds, ui_lblminutes, and ui_lblHours for displaying the hour, minutes, and seconds.

In order to use custom large fonts, you will have to go to this file “lv_conf.h” and change the value of LV_FONT_FMT_TXT_LARGE from 0 to 1.

#define LV_FONT_FMT_TXT_LARGE 1

Then go to the ui.c file and change LV_COLOR_16_SWAP from 0 to 1. You will have to change this every time you generate the UI files. So, that’s all about the necessary changes to avoid any errors. Now, let’s start the programming.

In the previous article, I mentioned that it’s a basic template, and this template already has code for all the onboard components. So, we only need to access those values and display them on the screen. If you want to make it easier for yourself, you can download the template folder from my Patreon page. That template folder consists of all the files.

ESP32-C3 Digital Watch Code:

Output:

On the first screen, we have a fully functional Counter, and on the second screen, we have a Digital Watch. So, that’s all for now!

Watch Video Tutorial: