Penjelasan Terstruktur: GUI Color Spaces (HSV & YCrCb)

Dokumen ini menjelaskan setiap deklarasi pada script, disertai snippet kode berformat Python, terurut sesuai alur file.

1) Import Library

Bagian ini mengimpor pustaka yang dibutuhkan: OpenCV untuk pemrosesan citra, Tkinter untuk GUI (termasuk dialog file dan pesan), Pillow untuk mengubah array menjadi gambar yang bisa ditampilkan di Tkinter, NumPy untuk representasi citra, serta os/sys untuk pengelolaan path modul.

import cv2
import tkinter as tk
from tkinter import filedialog, messagebox
from PIL import Image, ImageTk
import numpy as np
import os, sys

2) Setup Path Proyek

Menentukan direktori file saat ini dan direktori induk proyek, lalu menambahkannya ke sys.path agar modul internal proyek dapat ditemukan ketika script dijalankan langsung.

_FILE_DIR = os.path.dirname(__file__)
_ROOT_DIR = os.path.abspath(os.path.join(_FILE_DIR, ".."))
if _ROOT_DIR not in sys.path:
    sys.path.insert(0, _ROOT_DIR)

3) Import Fungsi Pembaca Gambar

Mengimpor fungsi kustom read_image dari modul internal proyek untuk membaca file gambar dengan hasil berupa array RGB secara konsisten.

from common.io import read_image

4) Deklarasi Kelas GUI

Mendefinisikan kelas utama aplikasi GUI. Konstruktor menerima jendela Tkinter (root) dan memberi judul pada jendela aplikasi.

class ColorSpacesGUI:
    def __init__(self, root):
        self.root = root
        self.root.title("Color Spaces - HSV & YCrCb")

5) State Aplikasi

Menyimpan data citra: img_rgb (asli/RGB), img_hsv (konversi HSV), img_ycc (konversi YCrCb). Variabel photo menampung objek gambar Tkinter terakhir agar tidak dihapus oleh garbage collector.

# State
self.img_rgb: np.ndarray | None = None
self.img_hsv: np.ndarray | None = None
self.img_ycc: np.ndarray | None = None
self.photo: ImageTk.PhotoImage | None = None

6) Frame Atas (Tombol & Status)

Membuat frame bagian atas yang memuat tombol 'Buka Gambar…' untuk memilih file serta label status untuk menampilkan jalur file atau pesan singkat.

top = tk.Frame(root)
top.pack(side=tk.TOP, fill=tk.X, padx=8, pady=8)

btn_open = tk.Button(top, text="Buka Gambar...", command=self.open_image)
btn_open.pack(side=tk.LEFT)

self.status = tk.Label(top, text="Tidak ada gambar", anchor="w")
self.status.pack(side=tk.LEFT, padx=10)

7) Frame Kontrol (Tombol Kanal)

Menyediakan tombol-tombol untuk menampilkan citra asli dan masing-masing kanal dari HSV maupun YCrCb. Parameter ruang warna dan indeks kanal disuntik melalui lambda.

controls = tk.LabelFrame(root, text="Proses Color Spaces")
controls.pack(side=tk.TOP, fill=tk.X, padx=8, pady=4)

btns = [
    ("Tampilkan Asli", self.show_original),
    ("HSV - C1", lambda: self.show_channel("HSV", 0)),
    ("HSV - C2", lambda: self.show_channel("HSV", 1)),
    ("HSV - C3", lambda: self.show_channel("HSV", 2)),
    ("YCrCb - C1", lambda: self.show_channel("YCrCb", 0)),
    ("YCrCb - C2", lambda: self.show_channel("YCrCb", 1)),
    ("YCrCb - C3", lambda: self.show_channel("YCrCb", 2)),
]
for text, cmd in btns:
    tk.Button(controls, text=text, command=cmd).pack(side=tk.LEFT, padx=4, pady=4)

8) Area Judul & Tampilan Gambar

title_label menampilkan judul konteks (mis. 'HSV - C2'). img_label bertindak sebagai kanvas tempat gambar ditampilkan dengan latar abu-abu dan ukuran awal 640×360.

self.title_label = tk.Label(root, text="", font=("Segoe UI", 10, "bold"))
self.title_label.pack(side=tk.TOP, padx=8, pady=(6, 0), anchor="w")

self.img_label = tk.Label(root, bg="#ddd", width=640, height=360)
self.img_label.pack(side=tk.TOP, padx=8, pady=8, fill=tk.BOTH, expand=True)

9) Memilih & Membaca Gambar + Pra-Konversi

Menampilkan dialog pilih file, membaca gambar via read_image. Jika berhasil, langsung mengonversi ke HSV dan YCrCb (pra-hitung agar cepat saat kanal dipilih), memperbarui status, lalu menampilkan citra asli.

def open_image(self):
    path = filedialog.askopenfilename(
        title="Pilih Gambar",
        filetypes=[
            ("Gambar", "*.png;*.jpg;*.jpeg;*.bmp;*.tif;*.tiff"),
            ("Semua File", "*.*"),
        ],
    )
    if not path:
        return
    try:
        self.img_rgb = read_image(path)
    except Exception as e:
        messagebox.showerror("Gagal Membaca", str(e))
        return

    # Precompute color spaces
    self.img_hsv = cv2.cvtColor(self.img_rgb, cv2.COLOR_RGB2HSV)
    self.img_ycc = cv2.cvtColor(self.img_rgb, cv2.COLOR_RGB2YCrCb)

    self.status.config(text=path)
    self.show_original()

10) Menampilkan Citra Asli (RGB)

Memastikan gambar sudah dimuat, kemudian merender citra RGB dengan judul yang sesuai.

def show_original(self):
    if self._ensure_image_loaded():
        self._render(self.img_rgb, title="Citra Asli (RGB)")

11) Menampilkan Kanal HSV/YCrCb

Memilih array ruang warna sesuai parameter, mengekstrak kanal ke-idx, lalu merender kanal tersebut sebagai citra grayscale dengan judul yang informatif.

def show_channel(self, space: str, idx: int):
    if not self._ensure_image_loaded():
        return
    if space == "HSV":
        arr = self.img_hsv
    elif space == "YCrCb":
        arr = self.img_ycc
    else:
        return
    ch = arr[:, :, idx]
    name = f"{space} - C{idx+1}"
    self._render(ch, title=name)

12) Validasi Ketersediaan Gambar

Mencegah aksi dilakukan sebelum gambar dimuat. Jika belum ada gambar, tampilkan informasi kepada pengguna dan hentikan proses.

def _ensure_image_loaded(self) -> bool:
    if self.img_rgb is None:
        messagebox.showinfo("Info", "Silakan buka gambar terlebih dahulu.")
        return False
    return True

13) Render Gambar ke Label Tkinter

Mengubah array (grayscale atau RGB) menjadi gambar PIL, me-resize proporsional hingga maksimum 960×600, mengonversinya ke PhotoImage untuk Tkinter, lalu menampilkannya pada img_label dan memperbarui judul.

def _render(self, img: np.ndarray, title: str = ""):
    # Convert numpy array (RGB or grayscale) to ImageTk and fit to label
    if img.ndim == 2:
        pil = Image.fromarray(img.astype(np.uint8), mode="L")
    else:
        pil = Image.fromarray(img.astype(np.uint8))

    # Fit to a reasonable max size while keeping aspect ratio
    max_w, max_h = 960, 600
    pil = self._fit_image(pil, max_w, max_h)

    self.photo = ImageTk.PhotoImage(pil)
    self.img_label.configure(image=self.photo)
    self.title_label.configure(text=title)

14) Helper Resize Proporsional

Menghitung faktor skala terbaik agar gambar muat dalam batas lebar/tinggi tanpa merusak rasio. Menggunakan LANCZOS untuk kualitas resize yang halus.

@staticmethod
def _fit_image(im: Image.Image, max_w: int, max_h: int) -> Image.Image:
    w, h = im.size
    scale = min(max_w / w, max_h / h, 1.0)
    new_size = (int(w * scale), int(h * scale))
    return im.resize(new_size, Image.Resampling.LANCZOS)

15) Entry Point Aplikasi

Menjalankan aplikasi ketika file dieksekusi langsung: membuat jendela Tkinter, menginstansiasi kelas GUI, dan memulai event loop agar antarmuka responsif.

if __name__ == "__main__":
    root = tk.Tk()
    app = ColorSpacesGUI(root)
    root.mainloop()

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

Artikel Blog

GUI Color Spaces (HSV & YCrCb)

1) Import Library

2) Setup Path Proyek

3) Import Fungsi Pembaca Gambar

4) Deklarasi Kelas GUI

5) State Aplikasi

6) Frame Atas (Tombol & Status)

7) Frame Kontrol (Tombol Kanal)

8) Area Judul & Tampilan Gambar

9) Memilih & Membaca Gambar + Pra-Konversi

10) Menampilkan Citra Asli (RGB)

11) Menampilkan Kanal HSV/YCrCb

12) Validasi Ketersediaan Gambar

13) Render Gambar ke Label Tkinter

14) Helper Resize Proporsional

15) Entry Point Aplikasi

Search

Artikel Terbaru

Halaman

Kategori