الدرس 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_())

---

شرح الكود

1. QDial() لإنشاء عنصر التحكم الدائري.
2. setNotchesVisible(True) لعرض العلامات على الدائرة لسهولة معرفة القيم.
3. 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 للتحكم في اللون الأحمر، الأخضر، والأزرق.
• تحديث لون الخلفية مباشرة عند تدوير أي دائرة.
• عرض القيم الحالية على الشاشة.

---

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