Widgets in Tkinter

การใช้งาน Widgets ต่างใน Tkinter

ในการพัฒนาโปรแกรมแสดงต่างผลแสดงผล และรับข้อมูล (GUI) บน Python ในหัวข้อนี้จะพัฒนาโปรแกรมโดยใช้โมดูล Tkinter เป็นโมดูลที่พัฒนามาจาก Tk GUI Toolkit ซึ่งต้องทำการติดตั้งให้เรียบร้อยก่อนจึงจะสามารถใช้งานได้ ซึ่งในโมดูล Tkinter จะมี Widgets ให้ใช้งานมากมาย เช่น  Button, Label, Frame, Checkbox, Scrollbars เป็นต้น ในการเรียกใช้งาน Widgets จะเรียกใช้งานด้วยคำสั่งรูปแบบต่างๆ ซึ่งจะสามารถศึกษาเรียนรู้ได้ตามรายละเอียดต่อไปนี้

👉การสร้างหน้าต่างแสดงผล ด้วย โมดูล Tkinter จะเริ่มต้นจากการ 1) นำเข้าไลบรารี tkinter และสร้างคลาส Tk โดยใช้คำสั่ง from tkinter import Tk 2) สร้างหน้าต่างแรกของโปรแกรม ซึ่งเป็น root หรือเป็นหน้าต่างหลัง ของโปรแกรม โดยใช้คำสั่ง  root = Tk() 3) กำหนดชื่อของ title ของหน้าต่างโปรแกรมโดยใช้คำสั่ง root.title("First program") 4) กำหนดขนาดหน้าต่าง และตำแหน่งของหน้าต่างโดยใช้คำสั่ง root.geometry ("500x500+100+100") และ 5) สั่งให้โปรแกรมวนลูปรับคำสั่งจากผู้ใช้งานไปเรื่อยๆ จนกว่าจะปิดโปรแกรม ด้วยคำสั่ง root.mainloop()

1. from tkinter import Tk

2. # create the main windown

3. root = tk.Tk()

4. root.title("First program") # set title of windown

5. root.geometry("500x500+100+100")  # set size and position of windown

6. root.mainloop()

เมื่อรันโปรแกรมแล้วผลลัพท์ที่ได้

👉การแสดงผลตัวหนังสือหรือข้อความต่างๆ (Label) จะมีขั้นตอนการดังต่อไปนี้ 1) กำหนดคลาสเพิ่มโดยใช้คำสั่ง from tkinter import Tk, Label 2) สร้างหน้าต่างแสดงผล 3) ใช้คำสั่ง Label(root, text="Automationlearn", bg="red", font=('Courier 22 bold'), width=15, height=1).place(x=30, y=100) เพื่อทดลองแสดงข้อความในหน้าต่างแสดงผล

1. from tkinter import Tk, Label

2. # create the main windown

3. root = tk.Tk()

4. root.title("First program") # set title of windown

5. root.geometry("500x500+100+100")  # set size and position of windown

6. Label(root, text="Automationlearn", bg="red", font=('Courier 22 bold'), width=15, height=1).place(x=30, y=100)

7. root.mainloop()

เมื่อรันโปรแกรมแล้วผลลัพท์ที่ได้

👉การสร้างตัวรับค่า slide bar แสดงผลออกเป็นข้อความ Label จะมีขั้นตอนการดังต่อไปนี้

1. from tkinter import Tk, Canvas, Button, Scale, HORIZONTAL, Label

2. 
   

3. def update_value(val)

4.     label.config(text=f"Value: {val}")  # Correctly update the label instance

5. 
   

6. # Create main window

7. root = tk.Tk()

8. root.title("Slider Example")

9. root.geometry("700x700+300+300")  # User prefers 500x500 window

10. 
    

11. # Create a slider

12. slider = Scale(root, from_=0, to=100, orient=HORIZONTAL, length=300, label="Input 1", command=update_value, font=('Courier 15 bold'))

13. slider.place(x=200, y=100)

14. 
    

15. # Create a label to display the value

16. label = Label(root, text="Value: 0", bg="red", font=('Courier 25 bold'), width=10, height=1)

17. label.place(x=250, y=245)

18. 
    

19. # Run the application

20. root.mainloop()

👉การสร้างตัวรับค่า slide bar 2 ตัว นำค่าบวกกัน และแสดงผลออกเป็นข้อความ Label จะมีขั้นตอนการดังต่อไปนี้

1. from tkinter import Tk, Canvas, Button, Scale, HORIZONTAL, Label

2. 
   

3. def update_value(val):

4.     total = slider1.get() + slider2.get() 

5.     label.config(text=f"Value: {total}")  

6. 
   

7. # Create main window

8. root = tk.Tk()

9. root.title("Slider Example")

10. root.geometry("700x700+300+300")  

11. 
    

12. # Create a slider1

13. slider1 = Scale(root, from_=0, to=100, orient=HORIZONTAL, length=300, label="Data1",command=update_value, font=('Courier 15 bold'))

14. slider1.place(x=200, y=100)

15. 
    

16. # Create a slider2

17. slider2 = Scale(root, from_=0, to=100, orient=HORIZONTAL, length=300, label="Data2",command=update_value, font=('Courier 15 bold'))

18. slider2.place(x=200, y=200)

19. 
    

20. # Create a label to display the value

21. label = Label(root, text="Value: 0", bg="red", font=('Courier 30 bold'), width=10, height=1)

22. label.place(x=240, y=345)

23. 
    

24. # Run the application

25. root.mainloop()

👉การสร้างปุ่ม (Button) จะมีขั้นตอนการดังต่อไปนี้

1. from tkinter import Tk, Canvas, Button, Scale, HORIZONTAL, Label

2. 
   

3. def cal():

4.     total = slider1.get() + slider2.get()  

5.     label.config(text=f"Value: {total}")  

6. 
   

7. # Create main window

8. root = tk.Tk()

9. root.title("Slider Example")

10. root.geometry("700x700+300+300")  

11. 
    

12. # Create a slider1

13. slider1 = Scale(root, from_=0, to=100, orient=HORIZONTAL, length=300, label="Data1", font=('Courier 15 bold'))

14. slider1.place(x=200, y=100)

15. 
    

16. # Create a slider2

17. slider2 = Scale(root, from_=0, to=100, orient=HORIZONTAL, length=300, label="Data2", font=('Courier 15 bold'))

18. slider2.place(x=200, y=200)

19. 
    

20. # Create a button

21. button = Button(root, text ="Cal", font=('Courier 25 bold'), command = cal,width=5, height=1,bg="green")

22. button.place(x=300,y=450)

23. 
    

24. # Create a label to display the value

25. label = Label(root, text="Value: 0", bg="red", font=('Courier 30 bold'), width=10, height=1)

26. label.place(x=240, y=345)

27. 
    

28. # Run the application

29. root.mainloop()

👉การสร้างปุ่มหมุน (Knob) จะมีขั้นตอนการดังต่อไปนี้

1. from tkinter import Tk, Canvas, Button, Scale, HORIZONTAL, Label

2. from tkdial import Dial

3. 
   

4. def update_value():

5.     total = dial1.get()

6.     label.config(text=f"Value:{total}")  # Correctly update the label instance

7. 
   

8. # Create main window

9. root = tk.Tk()

10. root.title("Knob Example")

11. root.geometry("700x700+300+300")  

12. 
    

13. # Create a label to display the value

14. label = Label(root, text="Value: 0", bg="red", font=('Courier 30 bold'), width=11, height=1)

15. label.place(x=220, y=100)

16. 
    

17. # Create a knob

18. dial1 = Dial(master=root, color_gradient=("green", "red"),text_color="red", text="Value: ", command=update_value, unit_length=20, radius=50)

19. dial1.place(x=270, y=250)

20. 
    

21. # Run the application

22. root.mainloop()

1. from tkinter import Tk, Canvas, Button, Scale, HORIZONTAL, Label

2. from tkdial import Jogwheel

3. 
   

4. def update_value():

5.     total = dial1.get()

6.     label.config(text=f"Value:{total}")  # Correctly update the label instance

7. 
   

8. # Create main window

9. root = Tk()

10. root.title("Knob Example")

11. root.geometry("700x700+300+300")  

12. 
    

13. # Create a label to display the value

14. label = Label(root, text="Value: 0", bg="red", font=('Courier 30 bold'), width=11, height=1)

15. label.place(x=220, y=100)

16. 
    

17. # Create a knob

18. dial1 = Jogwheel(root, radius=200, fg="MediumOrchid", scale_color="white",

19.                 start=0, end=200, text="Volume: ", button_radius=10, command = update_value)

20. dial1.set_mark(0,50, "blue")

21. dial1.set_mark(50, 90, "green")

22. dial1.set_mark(90, 150, "orange")

23. dial1.set_mark(150, 200, "red")

24. dial1.place(x=250,y=200)

25. 
    

26. root.mainloop()

1. from tkinter import Tk

2. from tkdial import Jogwheel, Meter

3. 
   

4. # Create main window

5. root = Tk()

6. root.title("Knob Example")

7. root.geometry("700x700+300+300")

8. 
   

9. def update_value():

10.     meter.set(int(dial.get()))

11. 
    

12. # Create a meter (Gauge)

13. meter = Meter(root, radius=200, start=0, end=200, border_width=5,

14.               fg="black", text_color="white", start_angle=270, end_angle=-360,

15.               text_font="DS-Digital 30", scale_color="black", axis_color="white",

16.               needle_color="white")

17. meter.set_mark(1, 100, "#92d050")   

18. meter.set_mark(105, 150, "yellow")  

19. meter.set_mark(155, 196, "red")     

20. meter.place(x=450, y=200)

21. 
    

22. # Create a knob (Jogwheel)

23. dial = Jogwheel(root, radius=200, fg="MediumOrchid", scale_color="white",

24.                 start=0, end=200, text="Volume: ", button_radius=10, command = update_value)

25. dial.set_mark(0,50, "blue")

26. dial.set_mark(50, 90, "green")

27. dial.set_mark(90, 150, "orange")

28. dial.set_mark(150, 200, "red")

29. dial.place(x=150,y=200)

30. 
    

31. root.mainloop()

32. 
    

1. from tkinter import Tk

2. from tkdial import Jogwheel, Meter

3. from tk_tools import Led

4. 
   

5. # Create main window

6. root = Tk()

7. root.title("Knob Example")

8. root.geometry("700x700+300+300")

9. 
   

10. def update_value():

11.     meter.set(int(dial.get()))

12.     if int(dial.get()) < 50:

13.         led.to_green(on=True)

14.     else: 

15.         led.to_green(on=False)

16. 
    

17. # Create a meter (Gauge)

18. meter = Meter(root, radius=200, start=0, end=200, border_width=5,

19.               fg="black", text_color="white", start_angle=270, end_angle=-360,

20.               text_font="DS-Digital 30", scale_color="black", axis_color="white",

21.               needle_color="white")

22. meter.set_mark(1, 100, "#92d050")   

23. meter.set_mark(105, 150, "yellow")  

24. meter.set_mark(155, 196, "red")     

25. meter.place(x=450, y=200)

26. 
    

27. # Create a knob (Jogwheel)

28. dial = Jogwheel(root, radius=200, fg="MediumOrchid", scale_color="white",

29.                 start=0, end=200, text="Volume: ", button_radius=10, command = update_value)

30. dial.set_mark(0,50, "blue")

31. dial.set_mark(50, 90, "green")

32. dial.set_mark(90, 150, "orange")

33. dial.set_mark(150, 200, "red")

34. dial.place(x=150,y=200)

35. 
    

36. # Create a LED 

37. led = Led(root, size=50)

38. led.place(x=500,y=50)

39. 
    

40. root.mainloop()

👉การสร้างหลอด LED และการควบคุมสถานะด้วย Button Switch จะมีขั้นตอนการดังต่อไปนี้

1. from tkinter import Tk, Button

2. from tk_tools import Led

3. 
   

4. def onled():

5.     led.to_green(on=True)

6. def offled():

7.     led.to_green(on=False)

8.     

9. root = tk.Tk()

10. root.title("LED Example")

11. root.geometry("600x500+300+300")

12. 
    

13. # Create and display LED

14. led = Led(root, size=50)

15. led.place(x=250,y=80)

16. 
    

17. button = Button(root, text ="on", font=('Courier 20 bold'), command = onled,width=5, height=1,bg="gray")

18. button.place(x=150,y=400)

19. 
    

20. button = Button(root, text ="off", font=('Courier 20 bold'), command = offled,width=5, height=1,bg="gray")

21. button.place(x=350,y=400)

22. 
    

23. root.mainloop()

👉การสร้างหลอด LED กระพริบ และการควบคุมสถานะด้วย Button Switch จะมีขั้นตอนการดังต่อไปนี้

1. from tkinter import Tk, Button

2. from tk_tools import Led

3. 
   

4. root = Tk()

5. root.title("LED Blinking Example")

6. root.geometry("600x500+300+300")

7. 
   

8. blinking = False

9. led_state = False 

10. 
    

11. def blink_led():

12.     global led_state

13.     if blinking:

14.         led_state = not led_state  # Toggle LED state

15.         led.to_green(on=led_state)  # Update LED

16.         root.after(1000, blink_led)  # Repeat every 1000ms (1 second)

17. 
    

18. def onled():

19.     global blinking

20.     if not blinking:

21.         blinking = True

22.         blink_led()  # Start blinking

23. 
    

24. def offled():

25.     global blinking, led_state

26.     blinking = False  # Stop blinking

27.     led_state = False  # Reset LED state

28.     led.to_green(on=False)  # Ensure LED is off

29. 
    

30. button_on = Button(root, text="ON", font=('Courier 20 bold'), command=onled, width=5, height=1, bg="gray")

31. button_on.place(x=150, y=400)

32. 
    

33. button_off = Button(root, text="OFF", font=('Courier 20 bold'), command=offled, width=5, height=1, bg="gray")

34. button_off.place(x=350, y=400)

35. 
    

36. led = Led(root, size=50)

37. led.place(x=250, y=80)

38. 
    

39. root.mainloop()

👉การสร้างตัวรับข้อมูลแบบ Text รับค่าด้วยการกดปุ่ม Button Switch จะมีขั้นตอนการดังต่อไปนี้

1. from tkinter import Tk, Button, Label, Text

2. from PIL import Image, ImageTk

3. 
   

4. # Create main window

5. root = tk.Tk()

6. root.title("Text Input Example")

7. root.geometry("700x500+300+300") 

8.   

9. def printInput(): 

10.     inp = inputtext.get(1.0, "end-1c") 

11.     lbl.config(text ="ได้รับข้อมูล: "+inp) 

12.   

13. # TextBox Creation 

14. inputtext = Text(root, bg="white", font=('Courier 20 bold'), width=11, height=1)

15. inputtext.pack(), inputtext.place(x=220, y=100) 

16.   

17. # Button Creation 

18. printButton = Button(root, text = "ตกลง", command = printInput, font=('Courier 15 bold')) 

19. printButton.pack(), printButton.place(x=220, y=200)

20.   

21. # Label Creation 

22. lbl = Label(root, text = "กรุณาป้อนข้อมูล", font=('Courier 15 bold')) 

23. lbl.pack(), lbl.place(x=220, y=50)

24. 
    

25. # Label Creation 

26. lbl = Label(root, text = "", font=('Courier 15 bold')) 

27. lbl.pack(), lbl.place(x=220, y=150)

28. 
    

29. root.mainloop()

👉การสร้างตัวรับข้อมูลแบบ Text รับค่าด้วยการกดปุ่ม Enter บน Keyboard จะมีขั้นตอนการดังต่อไปนี้

1. from tkinter import Tk, Label, Text, Entry, END

2.    

3. # Create the main window

4. root = tk.Tk()

5. root.geometry("700x700")

6. 
   

7. def on_enter(event):

8.     text = entry.get()

9.     lbl.config(text=f"ได้รับข้อมูล: {text}")

10.     entry.delete(0, END)

11. 
    

12. # Create an Entry widget

13. entry = Entry(root, font=('Courier 18 bold'))

14. entry.place(x=180, y=200)

15. entry.bind("<Return>", on_enter)

16. 
    

17. # Label Creation 

18. lbl = Label(root, text = "ป้อนข้อมูลและกดปุ่ม Enter บน Keyboard", font=('Courier 18 bold')) 

19. lbl.pack(), lbl.place(x=160, y=150)

20. 
    

21. root.mainloop()

👉การแสดงข้อมูลแบบตาราง จะมีขั้นตอนการดังต่อไปนี้

1. from tkinter import Tk, Frame, ttk

2. 
   

3. # Sample 2D array (rows of data)

4. data = [

5.     [1, 512, 1],

6.     [2, 623, 0],

7.     [3, 431, 1],

8.     [4, 789, 0],

9.     [5, 250, 1]

10. ]

11. 
    

12. # Create Tkinter window (same size as before)

13. root = Tk()

14. root.title("2D Array in Table")

15. root.geometry("800x800")  # Keep window size the same

16. 
    

17. # Set Treeview style

18. style = ttk.Style()

19. style.configure("Treeview", font=("Courier 15 bold"), rowheight=25)  # Reduce row height

20. style.configure("Treeview.Heading", font=("Courier 15 bold"))

21. 
    

22. # Create frame for table and scrollbar

23. frame = Frame(root, width=600, height=200)  # Fixed frame size

24. frame.pack(pady=20)

25. frame.pack_propagate(False)  # Prevent frame from shrinking

26. 
    

27. # Create Treeview with limited height

28. columns = ("Id", "Analog Value", "Digital Value")

29. tree = ttk.Treeview(frame, columns=columns, show="headings", height=3)  # Show only 3 rows

30. 
    

31. # Define column headers

32. for col in columns:

33.     tree.heading(col, text=col)

34.     tree.column(col, width=180, anchor="center")

35. 
    

36. tree.pack(side="left", fill="both", expand=True)

37. 
    

38. # Add scrollbar

39. scrollbar = ttk.Scrollbar(frame, orient="vertical", command=tree.yview)

40. tree.configure(yscroll=scrollbar.set)

41. scrollbar.pack(side="right", fill="y")

42. 
    

43. # Insert 2D array data into table

44. for row in data:

45.     tree.insert("", "end", values=row)

46. 
    

47. root.mainloop()

👉การแสดงผลหรือการรับข้อมูลแบบหลายหน้าจอ จะมีขั้นตอนการดังต่อไปนี้

1. from tkinter import Tk, Button

2. 
   

3. def open_secondary_window():

4.     secondary_window = Tk.()

5.     secondary_window.title("Secondary Window")

6.     secondary_window.geometry("500x500+300+300")

7.     button_close = Button(secondary_window,text="Close window",command=secondary_window.destroy)

8.     button_close.place(x=100, y=80)

9. 
   

10. main_window = Tk()

11. main_window.geometry("800x800+100+100")

12. main_window.title("Main Window")

13. button = Button(main_window,text="Open secondary window",command=open_secondary_window)

14. button.place(x=100, y=100)

15. main_window.mainloop()

👉การแสดงผลภาพบนหน้าจอ จะมีขั้นตอนการดังต่อไปนี้

1. from tkinter import Tk, Label

2. from PIL import Image, ImageTk  

3. 
   

4. root = Tk()

5. root.title("Motor_Monitoring")

6. root.geometry("700x700+300+300")  

7. 
   

8. # Load and display an image

9. image_path = r"C:\Users\user\Desktop\motor.jpg" 

10. try:

11.     img = Image.open(image_path)

12.     img = img.resize((350, 300))  # Resize image

13.     img = ImageTk.PhotoImage(img)

14. 
    

15.     img_label = Label(root, image=img)

16.     img_label.place(x=200, y=20)  # Adjust position

17. except Exception as e:

18.     print(f"Error loading image: {e}")

19. 
    

20. # Keep the reference to the image to prevent garbage collection

21. root.mainloop()