BAB II
GUI DAN HISTOGRAM
2.1. Graphical User Interface (GUI)
Selama ini, Python terkenal sebagai bahasa pemrograman yang fleksibel.
Namun Python juga memiliki kemampuan untuk membuat aplikasi dengan
antarmuka pengguna grafis (GUI) yang menarik dan interaktif? GUIDE atau GUI
builder merupakan sebuah graphical user interface (GUI) yang dibangun dengan
obyek grafik seperti tombol (button), kotak teks, slider, menu dan lain - lain.
Aplikasi yang menggunakan GUI umumnya lebih mudah dipelajari dan digunakan
karena orang yang menjalankannya tidak perlu mengetahui perintah yang ada dan
bagaimana kerjanya.
A. GUI dengan Tkinter
Python Tkinter adalah library GUI yang memungkinkan kamu
membangun aplikasi dengan antarmuka pengguna grafis secara efisien.
Sebagai bagian dari distribusi standar Python, Tkinter termasuk library
yang mudah diakses dan digunakan, membuatnya menjadi pilihan populer
bagi para pemula dan profesional dalam pembuatan aplikasi GUI.
library ini menawarkan kemudahan dalam mempelajari dan
menerapkan konsep-konsep GUI, memungkinkan pemula di bidang
software engineering untuk memulai dan menguasai dasar-dasar pembuatan
GUI dalam waktu relatif singkat.
Tak hanya itu, Python Tkinter juga menawarkan keleluasaan tinggi.
Artinya, developer dapat membuat GUI yang sederhana ataupun kompleks,
sesuai kebutuhan aplikasi yang mereka kembangkan.
Keuntungan lain dari Python Tkinter adalah fleksibilitasnya.
Sebagai library Python, Tkinter dapat berfungsi di berbagai sistem operasi,
termasuk Windows, MacOS, dan Linux. Dengan kata lain, GUI yang kamu
bangun menggunakan Tkinter bisa berjalan di hampir semua sistem
operasi. Inilah salah satu alasan mengapa banyak developer memilih
Python Tkinter untuk pembuatan GUI-nya.
2
B. Installasi Tkinter
1. Untuk cek installasi melanjutkan bab 1. bisa ketikkan kode dibawah ini di
terminal :
Python -m tkinter
2. Cek apakah sudah muncul gui seperti dibawah ini, apabila sudah muncul
maka tkinter sudah terinstall.
Gambar 2.1 Cek Installasi Tkinter
C. Komponen Graphical User Interface (GUI) Tkinter
Berikut beberapa komponen utama Python Tkinter :
1. Window
Gambar 2.2 Tampilan Window GUI
Window adalah komponen utama dalam GUI yang berfungsi
sebagai wadah untuk komponen-komponen lainnya. Dalam
Python Tkinter, window bisa dibuat menggunakan fungsi Tk().
Contoh Penggunaannya :
from tkinter import*
window = Tk()
window.mainloop()
3
2. Button
Gambar 2.3 Tampilan Button GUI
Button adalah komponen yang memungkinkan pengunjung berinteraksi
dengan aplikasi, seperti mengirimkan formulir atau menavigasi antar
halaman. Button bisa dibuat dengan menggunakan fungsi Button().
Contoh penggunaan:
from tkinter import*
window = Tk()
button = Button (window, text="Open")
button.pack()
window.mainloop()
3. Label
Gambar 2.4 Tampilan Label GUI
Label adalah komponen yang digunakan untuk menampilkan teks atau
gambar. Label bisa dibuat dengan menggunakan fungsi Label().
Contoh penggunaan:
from tkinter import*
window = Tk()
label = Label (window, text="Ini adalah label")
label.pack()
window.mainloop()
4. Input Field
Gambar 2.5 Tampilan Input GUI
Input fields digunakan untuk menerima input dari pengunjung. Kamu bisa
membuat input fields dengan kelas Entry().
Contoh penggunaan:
4
from tkinter import*
window = Tk()
entry = Entry (window)
entry.pack()
window.mainloop()
5. Listbox
Gambar 2.6 Tampilan Listbox GUI
ListBox adalah komponen yang menampilkan daftar pilihan kepada
pengunjung. ListBox dapat diterapkan menggunakan fungsi Listbox().
Contoh penggunaan:
from tkinter import*
window = Tk()
listbox = Listbox(window)
listbox.insert(1, "Pilihan 1")
listbox.insert(2, "Pilihan 2")
listbox.insert(3, "Pilihan 3")
listbox.pack()
window.mainloop()
5
D. Tata Letak (Layout) GUI Tkinter
Dalam Python Tkinter, ada tiga metode yang umum digunakan untuk
mengatur layout dari komponen-komponen user interface, yaitu pack(),
grid(), dan place(). Berikut penjelasannya :
1. Pack()
Gambar 2.7 Tampilan Pack()
Metode ini adalah metode termudah untuk mengatur widget. Metode
pack() akan secara otomatis menempatkan widget dalam window.
Pack() mengatur widget secara berurutan, baik secara vertikal maupun
horizontal, tergantung pada bagaimana kamu menambahkannya
ke window. Berikut contoh penggunaannya:
from tkinter import Tk, Button
window = Tk()
button1 = Button (window, text="Button 1")
button1.pack()
button2 = Button (window, text="Button 2")
button2.pack()
window.mainloop()
2. Grid()
Gambar 2.8 Tampilan Grid()
Metode grid() memberikan kontrol yang lebih baik terhadap
penempatan widget. Widget akan ditempatkan dalam grid atau tabel virtual,
di mana kamu bisa menentukan baris dan kolom tempat widget sesuai
keinginanmu.
6
Berikut contoh penggunaannya:
from tkinter import Tk, Button
window = Tk()
button1 = Button (window, text="Button 1")
button1.grid(row=0, column=0)
button2 = Button(window, text="Button 2”)
button2.grid(row=0, column=1)
window.mainloop()
3. Place()
Gambar 2.9 Tampilan Place()
Metode place() memberikan kontrol paling banyak terhadap
penempatan widget. Dengan metode ini, kamu bisa menentukan koordinat
x dan y tempat widget akan ditempatkan.
Berikut contoh penggunaannya:
from tkinter import Tk, Button
window = Tk()
button1 = Button (window, text="Button 1")
button1.place(x=50, y=50)
button2 = Button (window, text="Button 2")
button2.place (x=100, y=100)
window.mainloop()
7
2.2. Implementasi GUI
TkInter mengimplementasikan GUI sebagai sebuah figure yang berisi
barbagai style obyek UIControl. Selanjutnya kita harus memprogram
masing-masing obyek agar dapat bekerja ketika diaktifkan oleh pemakai
GUI. Sebuah contoh untuk membuat suatu pengolahan citra pada GUI
Tkinter :
1. Untuk membuat GUI agar dapat menampilkan gambar, Masukkan
source code dibawah ini:
Penyelesaian error : pip install Pillow (PIL), pip install matplotlib
import cv2
import numpy as np
import matplotlib.pyplot as plt
from tkinter import Tk, Label, Button, filedialog
from PIL import Image, ImageTk
# Fungsi untuk memproses gambar dan menghitung histogram
def process_image():
if hasattr(root, 'image_path'):
# Membaca gambar
img = cv2.imread(root.image_path,
cv2.IMREAD_GRAYSCALE)
# Mendapatkan ukuran gambar
r, c = img.shape
# Mereshape gambar menjadi satu dimensi
data = img.reshape(r*c)
# Menghitung histogram
angka, jumlah_angka = np.unique(data,
return_counts=True)
# Menghitung histogram normalisasi
total = r * c
H1 = jumlah_angka / total
# Menampilkan gambar asli
plt.figure()
plt.imshow(img, cmap='gray')
plt.title('Gambar Asli')
# Menampilkan histogram
plt.figure()
plt.bar(angka, H1)
plt.title('Histogram')
8
plt.show()
# Fungsi untuk menampilkan gambar di GUI Tkinter
def show_image():
if hasattr(root, 'image_path'):
img = Image.open(root.image_path)
img_tk = ImageTk.PhotoImage(img)
panel.config(image=img_tk)
panel.image = img_tk
# Fungsi untuk membuka file gambar
def open_image():
file_path =
filedialog.askopenfilename(filetypes=[("Image files",
"*.jpg *.bmp *.tif")])
if file_path:
root.image_path = file_path
show_image()
# Membuat GUI Tkinter
root = Tk()
root.title("Image Viewer and Histogram")
# Membuat panel untuk menampilkan gambar
panel = Label(root)
panel.pack()
# Tombol untuk membuka file dialog dan menampilkan
gambar
btn_open_image = Button(root, text="Open Image",
command=open_image)
btn_open_image.pack()
# Tombol untuk memproses dan menampilkan histogram
btn_process_image = Button(root, text="Process Image",
command=process_image)
btn_process_image.pack()
root.mainloop()
9
Hasil :
Gambar 2.10 Menampilkan Gambar
2. Untuk menempatkan posisi gambar dan hasil disatu GUI yang sama
masukkan source code ini :
import tkinter as tk
from tkinter import filedialog
from PIL import Image, ImageTk
import matplotlib.pyplot as plt
from matplotlib.backends.backend_tkagg import
FigureCanvasTkAgg
class ImageApp:
def init (self, root):
self.root = root
self.root.title("Image Viewer")
self.figure1 = plt.Figure(figsize=(5, 4),
dpi=100) self.axes1 =
self.figure1.add_subplot(111)
self.canvas1 = FigureCanvasTkAgg(self.figure1,
master=root)
self.canvas1.get_tk_widget().pack(side=tk.LEFT,
fill=tk.BOTH)
self.figure2 = plt.Figure(figsize=(5, 4),
dpi=100) self.axes2 =
self.figure2.add_subplot(111)
self.canvas2 = FigureCanvasTkAgg(self.figure2,
master=root)
self.canvas2.get_tk_widget().pack(side=tk.RIGHT,
fill=tk.BOTH)
self.open_button = tk.Button(root, text="Open
Image", command=self.open_image)
self.open_button.pack()
self.transfer_button = tk.Button(root,
text="Transfer Image", command=self.transfer_image)
self.transfer_button.pack()
10
def open_image(self):
file_path =
filedialog.askopenfilename(filetypes=[("Image files",
"*.jpg *.bmp *.tif")])
if file_path:
self.image_data =
Image.open(file_path).convert('L')
self.axes1.imshow(self.image_data, cmap='gray')
self.canvas1.draw()
def transfer_image(self):
if self.image_data:
self.axes2.imshow(self.image_data, cmap='gray')
self.canvas2.draw()
if name == " main ":
root = tk.Tk()
app = ImageApp(root)
root.mainloop()
Maka akan tampil seperti pada Gambar dibawah ini :
Gambar 2.11 Tampilan GUI Konversi
11
Latihan:
1. Buatlah tampilan sebagai berikut
2.3. Histogram Citra
Histogram citra merupakan diagram yang menggambarkan frekuensi
setiap nilai intensitas yang muncul di seluruh piksel citra. Nilai besar
menyatakan bahwa piksel – piksel yang mempunyai intensitas tersebut sangat
banyak. Pada citra berskala keabuan, jumlah aras keabuan sebanyak 256. Nilai
aras dimulai dari 0 hingga 255.
A. Menggambar Kurva Histogram
Secara matematis histogram citra dihitung dengan rumus :
Dimana :
ni = jumlah pixel yang memiliki derajat
keabuan n = jumlah seluruh pixel di dalam citra
12
Contoh Soal :7
Citra Digital yang berukuran 8 x 8 pixel dengan derajat keabuan dari 0
sampai 15 (ada 16 buah derajat keabuan.
Tabulasi perhitungan histogram :
nhi
i ni i
n
0 8 8/64 = 0.125000
1 4 4/64 = 0.062500
2 5 5/64 = 0.078125
3 2 2/64 = 0.031250
4 2 2/64 = 0.031250
5 3 3/64 = 0.046875
6 1 1/64 = 0.015625
7 3 3/64 = 0.046875
8 6 6/64 = 0.093750
9 3 3/64 = 0.046875
10 7 7/64 = 0.109375
11 4 4/64 = 0.062500
12 5 5/64 = 0.078125
13 3 3/64 = 0.046875
14 4 4/64 = 0.062500
15 3 3/64 = 0.046875
Total (n) 64
13
Histogram Citra Digital
0.140000
0.120000
0.100000
0.080000
0.060000
0.040000
0.020000
-
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Gambar 2.12 Histogram citra digital
Source Code berikut menunjukan cara membuat histogram citra RGB pada
Tkinter :
import cv2
import numpy as np
import matplotlib.pyplot as plt
#histogram
def process_image(img_path):
img = cv2.imread(img_path, cv2.IMREAD_GRAYSCALE)
histogram = cv2.calcHist([img], [0], None, [256], [0,
256])
plt.figure(figsize=(12, 6))
plt.subplot(1, 2, 1)
plt.imshow(img, cmap='gray')
plt.title('Gambar Grayscale')
plt.axis('off')
plt.subplot(1, 2, 2)
plt.title('Histogram Grayscale')
plt.xlabel('Pixel Value')
plt.ylabel('Frequency')
bins = np.arange(256) # Bin untuk pixel value dari 0
hingga 255
plt.bar(bins, histogram.flatten(), width=0.8,
color='black')
plt.xlim([0, 256])
14
plt.show()
img_path = 'C:/Users/LENOVO/OneDrive/KULIAH/LAB GAMA/Praktikum
PCD 2024/Gambar bahan/lena.jpg'
process_image(img_path)
Gambar 2.13 Tampilan Histogram
15
