파이썬] 기본라이브러리 TKinter로 GUI 만들기 3탄 - 무료 아이콘 이미지 넣기, 창 추가하기, 창종료, 단축키기능 넣기

지난 시간에 기본적인 GUI 기능을 실습하면서 버튼을 추가하고

간단한 텍스트 처리 기능을 만들어 봤습니다.

이번 시간에도 필수적인 기능을 사용해서 많은 예시 드리도록 하겠습니다.

 

이미지 아이콘을 추가해보도록 할텐데요. 검색을 통해 어렵지 않게 많은 #무료아이콘 을 다운 받을 수 있어요

 

https://www.alessioatzeni.com/wp-content/cache/page_enhanced/www.alessioatzeni.com/metrize-icons/_index.html_gzip

 

https://remixicon.com/

 

그 중에서도 위의 링크에 있는 종류의 아이콘들이 여기 저기 활용하기 유용하답니다. PDF나 여러 양식으로 다운받아 자유롭게 이용할 수 있어요. (특히 두번 째 링크가 좋습니다.)

 

다운 받아 실행하면 아래와 같이 선명하게 나와요

 

이렇게 한판 받아놓고 개발하시면 편하답니다.

 

하지만 직접 만들어서 써야하는 경우도 꽤 많아요.

그럼 이제 이미지를 UI속에 입력해 보도록 하겠습니다.

 

#TKinter이미지넣기

WDIR = "C:/gom"
img_name = "home.png"
img_name_s = "home_scale.png"

image_path = os.path.join(WDIR, img_name)
image_s_path = os.path.join(WDIR, img_name_s)

img = PhotoImage(file=image_s_path)
img_lb = tk.Label(window, image=img)
img_lb.place(x=360, y=300)

 

위와 같이 PhotoImage기능으로 이미지를 불러올 수 있어요.

이미지를 img에 지정하고 이 파일을 tk.Label 로 띄워 보겠습니다.

 

 

중앙에 유튜브 아이콘을 불러왔습니다.

 

이제 이 버튼을 누르면 새 창이 나타나도록 해볼게요.

def new_win(event):
    nw=Tk()
    nw.title("Select video")

    nw.geometry('300x300+300+100')
    nw.mainloop()    

WDIR = "C:/gom"
img_name = "home.png"
img_name_s = "home_scale.png"

image_path = os.path.join(WDIR, img_name)
image_s_path = os.path.join(WDIR, img_name_s)

img = PhotoImage(file=image_s_path)
img_lb = tk.Label(window, image=img)
img_lb.bind("<Button-1>", new_win)
img_lb.place(x=360, y=300)

#TKinter새창생성 #새로운창만들기

 

이미지 라벨에 bind 기능을 써서 새창을 만드는 함수를 연결합니다.

"<Button-1>"은 왼쪽 클릭 시 동작하도록 하는 기능이에요

 

그럼 맨 위의 new_win() 함수가 작동해서 창이 나타납니다.

내용은 차차 채워나가도록 합시다...

 

다음으로 이미지라벨을 다른 이미지로 바꿔보도록 할텐데요.

bind기능을 사용하면 간단하게 적용할 수 있어요

#TKinter이미지바꾸기 #이미지교체

 

지금 유튜브 아이콘이 작게 들어가 있는데요. 커서를 올려 놓으면 아이콘이 커지도록 해볼게요 !. !

def scaled(event):
    img_lb.configure(image=img_big)
    img_lb.place(x=330, y=270)

def Re(event):
    img_lb.config(image=img)
    img_lb.place(x=360, y=300)

WDIR = "C:/gom"
img_name = "home.png"
img_name_s = "home_scale.png"

image_path = os.path.join(WDIR, img_name)
image_s_path = os.path.join(WDIR, img_name_s)

img = PhotoImage(file=image_s_path)
img_big = PhotoImage(file=image_path)
img_lb = tk.Label(window, image=img)
img_lb.bind("<Button-1>", new_win)
img_lb.bind("<Enter>", scaled)
img_lb.bind("<Leave>", Re)
img_lb.place(x=360, y=300)

우선 bind 기능 중 <Enter> 를 이용하면 커서가 이미지 라벨 위에 올라가 있을 때의 기능을 적용할 수 있어요.

scaled라는 함수를 만들어서 큰 이미지로 교체 되도록 해봤어요

 

img _lb.configure(image=) 기능으로 큰 이미지를 지정해 줍니다.

이미지가 커지면 위치도 변경해줘야 자연스럽게 된답니다.

 

이제 커서가 밖으로 나오면 <Leave> 라는 bind기능으로 다시 원래대로 이미지 크기를 줄일 수 있어요.

#configure #bind #Leave #Enter

 

Re라는 함수를 만들어서 다시 원래 이미지로 지정해 줍니다.

위치도 원래의 좌표를 넣어 주고요. 실행하면 이렇게 커서가 아이콘 위로 가면 이미지가 확대되는 효과를 줄 수 있어요

커서를 밖으로 이동시키면 다시 작아집니다.

이렇게 이미지에 여러 액션을 줄 수 있어요

 

다음으로 유튜브 아이콘을 클릭하면 창이 켜졌었죠?

그럼 x버튼 누르는거 말고 Esc 버튼 눌러서 창이 꺼지도록 해볼게요

bind 기능을 쓰면 마우스 액션 외에도 키입력으로 조작할 수도 있는데요.

#Esc종료 #단축키 #TKinter단축키 #Key

 

def new_win(event):
    nw=Tk()
    nw.title("Select video")

    def closer(event):
        nw.destroy()
    nw.bind("<Escape>", closer)

    nw.geometry('300x300+300+100')
    nw.mainloop()

 

nw라는 새창을 띄우고 <Escape> 바인드 기능으로 Esc 입력하면 창이 꺼지게 됩니다. 만약 엔터로 종료하고 싶다면 <Return>을 쓸 수 있고요.

키입력은 <q>, <r> 이렇게 특정 키를 넣어서 이용할 수 있어요.

 

이렇게 해당창에 포커스가 갔을 때 Esc를 클릭하면..

 

창이 정상적으로 잘 종료 됩니다 !. !

간단하게 기능을 하나 둘 만들어가고 있어요.

 

다음시간에 이어갈게요 !

 

전체 코드입니다.

from tkinter import *
import tkinter as tk
import os
from collections import Counter

window = Tk()

window.title("Naver Store management program")

def closing(event):
    window.destroy()
    os.system('C:\\gom\\python gom_gui.py')
    
lb_hi = Label(window, text="Reboot", bg='gray19', fg='gray60',width=10, height=3)
lb_hi.bind('<Button-1>',closing)
lb_hi.place(x=10,y=10)

entry = tk.Entry(fg="gray19", bg="snow", width=20)
blog='blog.naver.com/xenostep'
entry.insert(0,blog)
entry.place(x=10,y=80)

entry1 = tk.Entry(fg="gray19", bg="snow", width=20)
entry1.insert(0, entry.get().split("/")[1])
entry1.place(x=10,y=100)



def cus():
    cus_list = []
    with open('C:\\gom\\gom.txt') as cus:
        for line in cus:
            cus_list.append(line)

    cus_list = cus_list[2:]

    for i in range(len(cus_list)):
        cus_all.insert(INSERT, cus_list[i])
    cus_all1.insert(INSERT, '\n'+Counter(cus_list).most_common(1)[0][0])

def clear():
    cus_all.delete(0.0,10.0)
    cus_all1.delete(0.0,3.0)

cus_all = tk.Text(window, width=20, height=10)
cus_all.place(x=200, y=100)
cus_all1 = tk.Text(window, width=20, height=3)
cus_all1.place(x=400, y=100)

load_bt = tk.Button(window, text='Load', bg='gray19', fg='snow', width=10, command=cus)
load_bt.place(x=300, y=400)
clear_bt = tk.Button(window, text='Clear', bg='royalblue', fg='snow', width=7, command=clear)
clear_bt.place(x=385, y=400)
save_bt = tk.Button(window, text='Save', bg='gray19', fg='snow', width=10)
save_bt.place(x=450, y=400)
lb_hi = Label(window, text="->",fg='gray19')
lb_hi.place(x=360,y=110)

def new_win(event):
    nw=Tk()
    nw.title("Select video")

    def closer(event):
        nw.destroy()
    nw.bind("<Escape>", closer)

    nw.geometry('300x300+300+100')
    nw.mainloop()

def scaled(event):
    img_lb.configure(image=img_big)
    img_lb.place(x=330, y=270)

def Re(event):
    img_lb.config(image=img)
    img_lb.place(x=360, y=300)

WDIR = "C:/gom"
img_name = "home.png"
img_name_s = "home_scale.png"

image_path = os.path.join(WDIR, img_name)
image_s_path = os.path.join(WDIR, img_name_s)

img = PhotoImage(file=image_s_path)
img_big = PhotoImage(file=image_path)
img_lb = tk.Label(window, image=img)
img_lb.bind("<Button-1>", new_win)
img_lb.bind("<Enter>", scaled)
img_lb.bind("<Leave>", Re)
img_lb.place(x=360, y=300)

window.geometry('800x500+300+100')
window.mainloop()