[Python] Tkinter - Canvas Widget

Tkinter에서 그림을 표시하기 위해서 Canvas 기능을 사용한다

아래와 같은 예시 코드를 통해서 사용 방법을 알 수 있다 (Udemy Python 강의를 보면서 학습 중)

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

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

# ---------------------------- TIMER MECHANISM ------------------------------- # 
def start_timer():
    count_down(60 * 5)

# ---------------------------- COUNTDOWN MECHANISM ------------------------------- # 
def count_down(count):
    # 00:00 으로 바꾸기 (분은 60으로 나눈 몫 floor, 초는 60으로 나눈 나머지)
    count_min = math.floor(count / 60)
    count_sec = count % 60

    # 캔버스에 설정한 아이템의 config를 바꾸는 용도로 사용
    canvas.itemconfig(timer_text, text=f"{count_min}:{count_sec}")
    if count > 0:
        # after 함수는 특정 ms 후에 콜백을 호출하는 기능 (예시로 1초에 한번씩)
        window.after(1000, count_down, count - 1)

# ---------------------------- UI SETUP ------------------------------- #
window = Tk()
window.title("Pomodoro")
# bg는 RGB값을 칼라토드로 입력
window.config(padx=100, pady=50, bg=YELLOW)

# 타이틀 라벨 설정. fg는 글자 색상
title_label = Label(text="Timer", fg=GREEN, bg=YELLOW, font=(FONT_NAME, 50))
title_label.grid(column=1, row=0)

# 이미지를 넣기 위한 캔버스를 설정 (bg는 마찬가지로 RGB값 칼라코드, highlightthickness는 캔버스 외곽 테두리 선 두께)
canvas = Canvas(width=200, height=224, bg=YELLOW, highlightthickness=0)
# 캔버스에 이미지를 넣기 위해서 PhotoImage라는 것을 세팅 (경로에 맞게 파일 이름 설정 필요)
tomato_img = PhotoImage(file="tomato.png")
# 캔버스에 이미지 생성을 하기. 인자로 x, y 위치와 image 파일을 넣음 (파일 이름으로 안됨)
canvas.create_image(100, 112, image=tomato_img)
# 캔버스에 텍스트 생성. (추후 시간 변경을 위해 변수 timer_text에 지정)
timer_text = canvas.create_text(100,130, text="00:00", fill="white", font=(FONT_NAME, 35, "bold"))
# pack으로 레이아웃을 하지 않으면 화면에 안 보임
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)
reset_button.grid(column=2, row=2)

# 추가로 버튼을 텍스트가 아니고 이미지로 설정할 경우 아래처럼 설정 가능
#test_img = PhotoImage(file="tomato.png")
#reset_button = Button(image=test_img)
#reset_button.grid(column=2, row=3)

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

window.mainloop()

 

Tkinter Canvas 위젯 사용한 예시 코드 화면 스크린샷

 

만들고자 하는 프로그램이 gui로 만들어야 한다면 유용하게 사용할 수 있는 기능으로 보인다.