ESP32

DropDown Menu in SquareLine Studio LVGL Arduino IDE

Dropdown Menu in SquareLine Studio:

DropDown Menu in SquareLine Studio LVGL Arduino IDE– This is my 5th article in the Smartwatch programming series using the CrowPanel ESP32-C3 1.28-inch IPS Capacitive Touch Display. In part 3 and part 4 of this series, we designed two GUIs: one for a digital watch and the other for an analog watch.

Dropdown Menu and digital smart watch programming

It displays the correct time because, before uploading the actual code, I had already set the custom time using this set of instructions.

allpcb circuit




Now, let’s say I move to a different time zone and need to change the time. I would have to go through that tiring process again: connecting the smart watch to the laptop, uncommenting these instructions to set the custom time, uploading the code, then commenting these lines again, and finally uploading the actual code. It’s a long, tedious process.

Clearly, this method isn’t practical for everyday use, and it’s time to explore a better, more user-friendly approach to setting the time.

We can do it the easy way by using the DropDown Menu.

Dropdown Menu widget in squareline studio

With it, we can individually set the hours, minutes, and seconds without any need to reconnect the smartwatch to a laptop or modify the code repeatedly. The DropDown Menu provides an intuitive and flexible way to input custom values directly from the device itself.

You can not only use the DropDown Menu for setting the date and time, but you can also use it in thousands of other projects. For example, you could use it to select options such as modes for a device, a list of numbers for configuration settings, names for assigning tasks, or even pre-defined text messages to send quickly. Its versatility makes it a valuable component in GUI design for various applications.



In this article, we will focus on using the DropDown Menu to set a custom time. By the end of this article, you will see how easy and efficient it is to add this functionality to your projects, saving time and effort while making your smartwatch much more user-friendly.

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

Adding a Dropdown Menu:

Let’s continue with the same project. While Screen2 is selected add two DropDown Widgets, one for setting the hours and the other for setting the minutes.

Dropdown Menu options in squareline studio for time

If you want you can also add a third one for setting the seconds.

Next, name the DropDown widgets so that we can easily find them in the variables list on the Arduino side. I set the names as DropdownMinutes and DropdownHours. You can see in the image above.



Next, while the DropDown widget is selected, on the inspector tab go to the Dropdown and write the options. For the minutes dropdown widget I entered 60 options from 0 to 59.

Follow the same steps for the other Dropdown widget “0 to 23”.

Next, we need to add two events for the two Dropdown widgets. For this, while the Dropdown widget is selected, click on the ADD EVENT Button.

Dropdown Menu widget call function in squareline studio

Set the Trigger type to VALUE_CHANGE

Set the Action type to Call Function.

Next, click the ADD button.

Write the function name “SetMinutes”.

Now, follow the same steps for the other Dropdown widget. And this time write the function name “SetHours”.

Now, let’s save the project and export the UI files.

Then go to the UI files folder, copy all the files and paste them in the same Arduino project folder. Then go ahead and open the Arduino file.



Complete 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 Part 3 to learn how to avoid errors.

Dropdown Menu lv_color_16_swap

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.

Dropdown Menu lvgl arduino temple folder

It includes all the files with all errors already fixed for you. You can download this template folder for free from my Patreon page.




Practical Demonstration:

how to add Dropdown Menu in smartwatch using squareline studio

Now, you can see, the Dropdown menus are added to the digital watch. Now, I can set the hours and minutes in just a few seconds.

create esp32 squareline studio Dropdown Menu using arduino

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