Build Your Pomodoro Timer with M5Stick and UIFlow

Introduction

The Pomodoro technique is a time management method designed to improve productivity and focus. It was created by Francesco Cirillo in the late 1980s. It is called "Pomodoro" because Cirillo used a kitchen timer shaped like a tomato ("pomodoro" in Italian) to measure his work intervals.

The method is based on dividing work or study time into intervals, typically 25 minutes, called "pomodoros, " followed by a short 5-minute break. After completing four pomodoros, a longer break of about 15 to 30 minutes is taken.

In this article, I will share the design of a Pomodoro timer programmed with an M5StickC Plus2 using UIFlow. This device will not only help you study or focus on various tasks but also allow you to practice and enhance your programming skills.

Interface

The program's interface is very simple and contains only four elements:

• Title: Displays the timer's status: Run or Pause
• Image: Decorative image
• Remaining time: Time left for this pomodoro. If it is in red, it is a work period. If it is in green, it is a break period.
• Progress bar: Complements the previous information with a bar. The same color convention applies.

Program

The Pomodoro timer program is made in UIFlow ver 1. It implements 25-minute work pomodoros followed by 5-minute breaks. Longer break periods are not implemented, and the times are fixed in the program (commonly referred to as "hardcoded").

Flowchart

To explain the program's operation, I will use the following simplified flowchart.

In the flowchart, you can see that the program is divided into three parts or modules:

• The main program, which starts in Setup
• A function called ShowTime
• A second function that responds to the event of pressing the "A" button (the one on the front of the M5Stick).

The main program starts in Setup where the interface is initialized, along with the various elements and colors of the screen and some variables, loading TIME with 25 to count the time for a pomodoro, and setting RUNNING to 0 so the timer starts in pause mode.

Next, a loop begins (yellow block Loop) where the state of RUNNING is checked, and if it equals 1 (timer running), a 1-minute delay is made, the time is decreased, it is displayed on the screen using ShowTime, and it is checked if it has reached zero.

When the time reaches zero, a new check is made: if the MODE variable indicates that the current pomodoro was a Work period, the time is set to 5 minutes and the mode is set to Break. Otherwise, the time is set to 25 minutes and the mode is set to Work. This is so that after a 25-minute work pomodoro, a 5-minute break follows, and vice versa.

If at any time the "A" button on the front is pressed, the corresponding event function alternates the value of RUNNING between 0 and 1. This way, if it is in Pause and we press the button, it will switch to Run, and if we press it again, it will switch back to Pause. This is updated in the title on the screen.

Finally, ShowTime is a function that displays the time with two digits on the screen, and the code is put separately to improve program clarity.

UIFlow Program

The complete UIFlow1 program can be seen below.

Repository

This project, like all the others I've done with the M5Stick, is in my GitHub repository.

More Info

M5StickC Plus2 page on M5Stack

Conclusions

Building a timer for the Pomodoro technique using an M5StickC Plus2 and the UIFlow platform is an excellent way to increase your productivity at work or study while improving your programming skills.

In this tutorial, I have guided you step-by-step in designing the timer, including a complete explanation of the program development. With this project, you will not only be able to manage your time better but also explore the programming and customization capabilities offered by the M5StickC Plus2.

As always, any questions or suggestions can be left below in the comments section. See you soon with another interesting and useful project!