الدرس 18 – استخدام QDial في PyQt

الفكرة العامة

عنصر QDial يتيح للمستخدم تغيير قيمة رقمية عن طريق تدوير مؤشر دائري.
يمكن تحديد الحد الأدنى والأقصى للقيمة، والقيمة الابتدائية.
يمكن ربطه بأي عملية مثل تغيير لون، حجم، أو صوت.

المكتبات المطلوبة

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QDial
from PyQt5.QtCore import Qt

مثال أساسي على QDial

class DialExample(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("مثال على QDial")
        self.setGeometry(200, 200, 300, 200)

        layout = QVBoxLayout()

        self.label = QLabel("القيمة: 50", self)
        self.label.setAlignment(Qt.AlignCenter)

        self.dial = QDial()
        self.dial.setMinimum(0)
        self.dial.setMaximum(100)
        self.dial.setValue(50)
        self.dial.setNotchesVisible(True)  # لعرض علامات على الدائرة

        # ربط تغيير القيمة بتحديث النص
        self.dial.valueChanged.connect(self.update_label)

        layout.addWidget(self.label)
        layout.addWidget(self.dial)
        self.setLayout(layout)

    def update_label(self, value):
        self.label.setText(f"القيمة: {value}")

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = DialExample()
    window.show()
    sys.exit(app.exec_())

شرح الكود

QDial() لإنشاء عنصر التحكم الدائري.
setNotchesVisible(True) لعرض العلامات على الدائرة لسهولة معرفة القيم.
valueChanged.connect(...) لربط أي تغيير في القيمة بدالة محددة.

تمرين عملي على QDial – التحكم في لون الخلفية

في هذا التمرين سنستخدم 3 QDial للتحكم في قيم RGB، تمامًا مثل التمرين المطور في QSlider، لكن بشكل دوائر.

الكود مع الحل

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QLabel, QDial, QHBoxLayout
from PyQt5.QtCore import Qt

class RGBDialPicker(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("تغيير لون الخلفية بـ 3 QDial")
        self.setGeometry(200, 200, 400, 300)

        self.r = 128
        self.g = 128
        self.b = 128

        main_layout = QVBoxLayout()

        self.label = QLabel(f"RGB: ({self.r}, {self.g}, {self.b})", self)
        self.label.setAlignment(Qt.AlignCenter)
        main_layout.addWidget(self.label)

        # تخطيط أفقي للألوان
        color_layout = QHBoxLayout()

        color_layout.addLayout(self.create_dial("أحمر", self.r, self.update_red))
        color_layout.addLayout(self.create_dial("أخضر", self.g, self.update_green))
        color_layout.addLayout(self.create_dial("أزرق", self.b, self.update_blue))

        main_layout.addLayout(color_layout)
        self.setLayout(main_layout)

        self.update_color()

    def create_dial(self, text, value, slot_function):
        layout = QVBoxLayout()
        label = QLabel(text)
        dial = QDial()
        dial.setMinimum(0)
        dial.setMaximum(255)
        dial.setValue(value)
        dial.setNotchesVisible(True)
        dial.valueChanged.connect(slot_function)
        layout.addWidget(label)
        layout.addWidget(dial)
        return layout

    def update_red(self, value):
        self.r = value
        self.update_color()

    def update_green(self, value):
        self.g = value
        self.update_color()

    def update_blue(self, value):
        self.b = value
        self.update_color()

    def update_color(self):
        self.label.setText(f"RGB: ({self.r}, {self.g}, {self.b})")
        self.setStyleSheet(f"background-color: rgb({self.r}, {self.g}, {self.b});")

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = RGBDialPicker()
    window.show()
    sys.exit(app.exec_())

شرح التمرين

3 دوائر QDial للتحكم في اللون الأحمر، الأخضر، والأزرق.
تحديث لون الخلفية مباشرة عند تدوير أي دائرة.
عرض القيم الحالية على الشاشة.

📌 النتيجة:
ستتمكن من اختيار أي لون تريده بتحريك الدوائر الثلاثة، مما يعطيك تجربة تحكم أنيقة مثل أدوات الميكسر الصوتي.

تعديل المقال

تقنيات نور التعليمية