Building a Pomodoro App

The Pomodoro Technique

  • 두뇌가 작동하는 방식을 효과적으로 활용
  • 시간 관리를 돕고 더 많은 일을 하게 해주는 기법
  • 정보, 동기 유지하기 쉬움

1️⃣ 해야할 과제가 무엇인지 결정

2️⃣ 타이머를 25분에 설정하기

3️⃣ 25분 동안 과제하기

4️⃣ 짧게 5분 쉬기

5️⃣ 위의 방법으로 4번을 반복한 후 15분에서 30분 쉬기


캔버스 위젯을 다루고 TKinter에 이미지를 추가하는 방법

TKinter 캔버스 위젯

  • 레이어가 있음

1


애플리케이션의 사용자 인터페이스(UI) 완성하기

2

COUNTDOWN MECHANISM

Event Driven(이벤트 구동형)

  • mainloop()를 통해 구동
  • GUI는 사용자가 무엇을 하는지 화면에서 지켜보고 있어야 함
  • 본질적으로 리프레싱을 하고 계속 이벤트를 주시하게 됨
  • 매초마다 계속 해서 무슨일이 일어났는지 체크하게 됨
    ⇨ 다른 루프인 while문을 쓰게되면 아무 일도 일어나지 않음
    ⇨ 내장 메소드 after() 사용
  • after() : 대기해야 할 시간의 양을 취하고 그 시간이 지난 뒤에
    호출하라고 한 특정한 함수를 호출하고 인자를 함수에 집어 넣음


캔버스에서 인자를 변경하는 방법

config가 아닌 itemconfig메소드를 호출해야 함

3


TIMER MECHANISM

Start button과 연계하기

4


5분 타이머 설정하기

5



Dynamic Typing(동적 타이핑)

  • 변수 안의 콘텐츠를 변경해서 변수의 데이터형을 변경할 수 있음
a = 3 (int)
a = "Hello"(str)


10초 미만일때와 00일 때 앞자리에 0을 붙이는 방법

6



타이머 세션 및 값 설정하기

7



각 세션 정보 레이블 변경

8



체크 표시 추가하고 애플리케이션 리셋하기

사용자가 작업 카운트다운을 완료했을 때 레이블에 체크 표시 추가

9


TIMER RESET

command 설정
reset_button = Button(text="Reset", highlightthickness=0, command=reset_timer)

10

Final Code

from tkinter import *
import math
# ---------------------------- CONSTANTS ------------------------------- #
PINK = "#e2979c"
RED = "#e7305b"
GREEN = "#9bdeac"
YELLOW = "#f7f5dd"
FONT_NAME = "Courier"
WORK_MIN = 25
SHORT_BREAK_MIN = 5
LONG_BREAK_MIN = 20
reps = 0
timer = None

# ---------------------------- TIMER RESET ------------------------------- #

def reset_timer():
    window.after_cancel(timer)
    canvas.itemconfig(timer_text, text="00:00")
    title_label.config(text="Timer")
    check_marks.config(text="")
    global reps
    reps = 0

# ---------------------------- TIMER MECHANISM ------------------------------- #

def start_timer():
    global reps
    reps += 1

    work_sec = WORK_MIN * 60
    short_break_sec = SHORT_BREAK_MIN * 60
    long_break_sec = LONG_BREAK_MIN * 60

    if reps % 8 == 0:
        count_down(long_break_sec)
        title_label.config(text="Break", fg=RED)
    elif reps % 2 == 0:
        count_down(short_break_sec)
        title_label.config(text="Break", fg=PINK)
    else:
        count_down(work_sec)
        title_label.config(text="Work", fg=GREEN)


# ---------------------------- COUNTDOWN MECHANISM ------------------------------- #
def count_down(count):

    count_min = math.floor(count / 60)
    count_sec = count % 60
    if count_sec < 10:
        count_sec = f"0{count_sec}"

    canvas.itemconfig(timer_text, text=f"{count_min}:{count_sec}")
    if count > 0:
        global timer
        timer = window.after(1000, count_down, count-1)
    else:
        start_timer()
        marks = ""
        work_sessions = math.floor(reps/2)
        for _ in range(work_sessions):
            marks += "✔︎"
        check_marks.config(text=marks)


# ---------------------------- UI SETUP ------------------------------- #
window = Tk()
window.title("Pomodoro")
window.config(padx=100, pady=50, bg=YELLOW)

title_label = Label(text="Timer", fg=GREEN, bg=YELLOW, font=(FONT_NAME, 50))
title_label.grid(column=1, row=0)

canvas = Canvas(width=200, height=224, bg=YELLOW, highlightthickness=0)
tomato_img = PhotoImage(file="tomato.png")
canvas.create_image(100, 112, image=tomato_img)
timer_text = canvas.create_text(100, 130, text="00:00", fill="white", font=(FONT_NAME, 35, "bold"))
canvas.grid(column=1, row=1)

start_button = Button(text="Start", highlightthickness=0, command=start_timer)
start_button.grid(column=0, row=2)

reset_button = Button(text="Reset", highlightthickness=0, command=reset_timer)
reset_button.grid(column=2, row=2)

check_marks = Label(fg=GREEN, bg=YELLOW)
check_marks.grid(column=1, row=3)

window.mainloop()