UI 프로그래밍 하기 tkinter & python 1 메인 화면 구성하기

 

일단은 그럴듯..?한 초기 UI구성이다.

현재까지 프로그램 파일

먼저 모듈화 구성을 위해서 MainFrame을 가장 먼저 작성했다. 

MainFrame은 위에서 아래로 내려가면서 4개의 프레임으로 구성된다. 가장 위에 비어 있는 하나는 관리자 버튼을 위한 영역으로 구성했고, 그 밑 영역은 음료수 상자가 구성되는 프레임이 존재한다 이 프레임을 2x3형태로 구성해서 음료를 균일하게 넣는 것을 목표로 코드를 작성했다. 아래 프레임에는 금액 입력 버튼이 존재한다. 금액입력 프레임은 5개의 버튼으로 구성되고, 이를 클릭하면 현재금액이 변경되는 이벤트 처리를 나중에 진행해야 한다.(기계 내부 금액의 개수 변경도..)이는 기본적으로 로컬 형태로 구성되어야 할 것이다.. 차차 나중에 하도록 하고..  마지막 제일 밑의 프레임은 현재 금액 출력과 반환하기로 구성된다. 우리는 밑에 money input 파일을 생성해서 이 파일을 통해 나중에 금액 입력을 진행했을 때의 전역 변수 이벤트 처리를 진행할 예정이다.

MainFrame.py

# 자판기 앱
import tkinter as tk 
import tkinter.font
from PIL import Image, ImageTk

# 파일 모듈화 
import drink_box_maker
import money_inout
import admin_btn 
import global_var

root = tk.Tk() # 창을 만드는 함수 TK()  변수로 저장해야 나중에 활용이 가능함
root.configure(bg="#008080") 
root.geometry("800x800") #창 크기를 지정하는 것이 가능하다. 
root.title("20194035 자판기 앱 ") # 창 제목 
font = tkinter.font.Font(family="Consolas", size=12) # 폰트정의
#이미지 객체를 변수에 저장 
# 2x3 그리드 형태로 음료 상자를 배치

#######################################################
# 음료 상자 프레임 생성
drink_frame = tk.Frame(root, bg="#008080")
drink_frame.grid(row=1, column=0, columnspan=3, padx=60, pady=10)
drk_img=drink_box_maker.drink_box(image_path='VM/img/커피.jpg', drink_name="커피", drink_quantity=5, drink_price=500, in_root=drink_frame, row = 1, column = 0)
drk_img=drink_box_maker.drink_box(image_path='VM/img/물.jpg', drink_name="물", drink_quantity=10, drink_price=1000, in_root=drink_frame, row = 1, column = 1)
drk_img=drink_box_maker.drink_box(image_path='VM/img/탄산음료.jpg', drink_name="탄산음료", drink_quantity=7, drink_price=700, in_root=drink_frame, row = 1, column = 2)
drk_img=drink_box_maker.drink_box(image_path='VM/img/특화음료.jpg', drink_name="특화음료", drink_quantity=8, drink_price=800, in_root=drink_frame, row = 2, column = 0)
drk_img=drink_box_maker.drink_box(image_path='VM/img/고급커피.jpg', drink_name="고급커피", drink_quantity=6, drink_price=600, in_root=drink_frame, row = 2, column = 1)
drk_img=drink_box_maker.drink_box(image_path='VM/img/이온음료.jpg', drink_name="이온음료", drink_quantity=4, drink_price=400, in_root=drink_frame, row = 2, column = 2)   

#######################################
# 관리자 버튼 생성
admin_btn.create_admin_button(root)

####################################################
# 하단에 금액 입력 버튼을 배치할 프레임 생성
money_frame = tk.Frame(root, bg="#008080")
money_frame.grid(row=2, column=0, columnspan=5, padx=30, pady=10)

money_amounts = [10, 50, 100, 500, 1000]
for idx, amount in enumerate(money_amounts):
    money_inout.create_money_button(amount=amount, row=4, column=idx, in_root=money_frame)  # 4번째 행에 금액 버튼 배치

#################################################
#하단 프레임 구성 (반환하기, 금액 출력 버튼)
# 금액 입력 창 및 반환하기 버튼을 배치할 프레임 생성
bottom_frame = tk.Frame(root, bg="#008080")
bottom_frame.grid(row=4, column=0, columnspan=5, padx=10, pady=10, sticky="we")

money_label = tk.Label(bottom_frame, text=("현재 금액: "+str(global_var.current_amount)+ " 원"), font=font, width = 40)
money_label.grid(row=0, column=0, padx=50, pady=20, sticky="w")

def return_money():
    money_inout.current_amount = 0
    money_label.config(text="현재 금액: 0 원")
    print("돈이 반환되었습니다.")

#반환하기 버튼 눌렀을 때 이벤트 처리 진행하기 
return_button = tk.Button(bottom_frame, text="반환하기", command=return_money, font=font)
return_button.grid(row=0, column=1, padx=50, pady=20, sticky="w")

# 하단 영역의 각 열 크기를 조정하여 균형 있게 배치
bottom_frame.grid_columnconfigure(0, weight=1)

root.mainloop()

위에서 언급한 대로 MainFrame에 대한 코드를 작성했다. 모듈화를 위해 다른 파일 3개와 연결되어있는 상태이다.

아래 코드는 음료박스 하나를 구성하기위해 작성한 코드이다. 인수가 많지만, 모두 필요하기는 했다.. 더 간결하게 할 수 있으면 좋겠지만,, 음료 이미지를 모듈화 과정에서 출력하지 않는 에러가 발생했었는데 이러한 오류처리를 위해서  main에서 drk_img를 통해 객체를 받아오는 과정이 존재한다.     button.image = photo  역시 이미지 참조를 유지하기 위한 코드이고 나머지는 특별할 것 없이 위에는 필요한 문구를 넣고 버튼에 대해서는 이미지와 문구를  넣고 이를 하나의 프레임으로 구성하기 위해 작성했다. 구매 이벤트 처리를 위해서 함수선언만 해두었다.

drink_box_maker.py

import tkinter as tk
import tkinter.font
from PIL import Image, ImageTk

#이미지경로, 음료이름, 음료 개수, 음료 가격, 그리드 뷰에서의 위치를 입력받아 시각화 하는 함수를 선언한다.
def drink_box( drink_name, drink_quantity, drink_price, in_root, image_path, row, column): # 프레임을 생성해 그 안에 데이터를 넣고 리턴시킨다.  
    # 이미지 로드
    image = Image.open(image_path)
    resized_image = image.resize((170, 170), Image.ANTIALIAS)
    photo = ImageTk.PhotoImage(resized_image)  
    font = tkinter.font.Font(family="Consolas", size=12) # 폰트 지정하기 
    #음료 설명 추가 (음료이름, 음료 수량)
    # 텍스트와 이미지를 포함하는 프레임 생성
    frame = tk.Frame(in_root, width=250, height=250) # 루트에 대한 프레임을 생성한다. 
    frame.grid(row=row, column=column, padx=10, pady=10)  # grid 메소드를 사용하여 그리드 형태로 배치
    frame.pack_propagate(False)  # 프레임 크기 고정

    # 텍스트 라벨 생성
    label1 = tk.Label(frame, text=drink_name, font = font)
    label2 = tk.Label(frame, text="수량: "+str(drink_quantity), font = font)
    # 라벨을 버튼 위에 배치
    label1.grid(row=0, column=0, sticky="w")  # 라벨을 왼쪽으로 정렬하여 그리드에 배치
    label2.grid(row=0, column=1, sticky="w")

    # 버튼 클릭 이벤트 핸들러 함수
    def on_button_click():
        print("Button clicked!")

    # 텍스트와 이미지를 포함하는 버튼 생성 
    #프레임을 대상으로 버튼 추가 
    button = tk.Button(frame, text=str(drink_price) + " 원", image=photo, 
                    command=on_button_click, width = 200, height = 200, font = font,
                    compound = tk.TOP # 텍스트 위치를 바닥으로
                    )
    #이미지 객체에 대한 참조를 유지 
    button.image = photo 
    button.grid(row=2, column=0, columnspan=2)  # 버튼을 2행 0열에 배치하고, 2열에 걸쳐 표시

금액 입출력을 위해서 존재하는 함수는 money_input를 통해 선언했다. 

import tkinter as tk 
import global_var
#금액 입력 
# 하단에 금액 입력 버튼 배치
def create_money_button(amount, row, column, in_root):
    button = tk.Button(in_root, text=f"{amount} 원", command=lambda: print(f"{amount} 원 버튼 클릭됨"), width= 15)
    button.grid(row=row, column=column, padx=10, pady=20)
    return button

아직 코드 내에서는 버튼 클릭에 대한 자동화 함수만 람다로 구현해 두었지만 이제 버튼의 함수는 돈을 누르면 전역변수 current_amount(현재금액)이 변하고, 돈의 갯수가 함께 변하는 코드를 작성해야 한다. 이 현재금액은 초깃값 0으로 지정해야 하지만 출력 시 확인을 위해 다음과 같이 10원으로 작성해 놓았다. 

global_var.py

# 전역 변수 선언해두기 

#현재 금액 전역 변수로 선언 
current_amount = 10

관리자 버튼은 생성 코드만 모듈화 해 두었고, 이벤트 처리에 대해서는 일단은 출력만 하도록 작성했다.

import tkinter.font
from PIL import Image, ImageTk
#관리자 버튼
def admin_button_click():
    print("Admin button clicked!")
    # 관리자 화면으로 이동하는 코드를 여기에 추가

def create_admin_button(in_root):
    image_path = 'VM/img/admin.jpg'  # 관리자 버튼 이미지 경로
    image = Image.open(image_path)
    resized_image = image.resize((35, 35), Image.LANCZOS)
    photo = ImageTk.PhotoImage(resized_image)
    
    admin_button = tk.Button(in_root, image=photo, command=admin_button_click)
    admin_button.image = photo
    admin_button.grid(row=0, column=0, padx=10, pady=10, columnspan=3,sticky='nw')
    return admin_button

다음에는 관리자 UI를 프로그래밍 해보자.