الدرس 17 – استخدام QSlider في PyQt

عنصر QSlider مفيد للتحكم في القيم المتغيرة مثل مستوى الصوت، السطوع، أو أي قيمة رقمية ضمن نطاق معين.

يمكنك تحديد الحد الأدنى والأقصى للقيمة، وتغيير اتجاهه (أفقي أو عمودي).

---

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

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

---

مثال تطبيقي

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

        # إنشاء تخطيط عمودي
        layout = QVBoxLayout()

        # إضافة عنوان يوضح القيمة
        self.label = QLabel("القيمة الحالية: 50", self)
        self.label.setAlignment(Qt.AlignCenter)

        # إنشاء الـ Slider
        self.slider = QSlider(Qt.Horizontal)  # يمكن تغيير إلى Qt.Vertical للاتجاه العمودي
        self.slider.setMinimum(0)    # الحد الأدنى
        self.slider.setMaximum(100)  # الحد الأقصى
        self.slider.setValue(50)     # القيمة الابتدائية
        self.slider.setTickPosition(QSlider.TicksBelow)  # عرض علامات أسفل السلايدر
        self.slider.setTickInterval(10)  # الفاصل بين العلامات

        # ربط السلايدر بالدالة التي تعرض القيمة
        self.slider.valueChanged.connect(self.update_label)

        # إضافة العناصر للتخطيط
        layout.addWidget(self.label)
        layout.addWidget(self.slider)

        # تطبيق التخطيط على النافذة
        self.setLayout(layout)

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


# تشغيل التطبيق
if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = SliderExample()
    window.show()
    sys.exit(app.exec_())

---

شرح الكود

1. QSlider(Qt.Horizontal)
   لتحديد الاتجاه أفقي، ويمكن تغييره إلى Qt.Vertical ليصبح عمودي.
2. setMinimum() و setMaximum()
   لتحديد نطاق القيم.
3. setValue()
   لتحديد القيمة الافتراضية عند بداية التشغيل.
4. setTickPosition() و setTickInterval()
   لعرض العلامات على السلايدر وجعل المستخدم يعرف مواقع القيم.
5. valueChanged.connect()
   لربط أي تغيير في القيمة بدالة تقوم بتحديث النص أو أي وظيفة أخرى.

---

أفكار عملية لاستخدام QSlider

• التحكم في مستوى الصوت في مشغل موسيقى.
• التحكم في سطوع الشاشة.
• اختيار قيمة معينة لضبط حجم الخط في محرر نصوص.
• تغيير لون عنصر عن طريق مزج قيم RGB.

---

تمرين عملي – تغيير لون الخلفية باستخدام QSlider

الفكرة

• لدينا سلايدر من 0 إلى 255.
• عند تغيير قيمة السلايدر، تتغير درجة اللون الأحمر (Red) في خلفية النافذة.
• اللون سيكون بتنسيق RGB: حيث الأخضر والأزرق ثابتان، والأحمر يتغير.

---

الكود مع الحل

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

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

        # تخطيط عمودي
        layout = QVBoxLayout()

        # النص لعرض قيمة السلايدر
        self.label = QLabel("القيمة: 128", self)
        self.label.setAlignment(Qt.AlignCenter)

        # إنشاء السلايدر
        self.slider = QSlider(Qt.Horizontal)
        self.slider.setMinimum(0)
        self.slider.setMaximum(255)
        self.slider.setValue(128)
        self.slider.setTickPosition(QSlider.TicksBelow)
        self.slider.setTickInterval(25)

        # ربط السلايدر بدالة تحديث اللون
        self.slider.valueChanged.connect(self.change_color)

        # إضافة العناصر للتخطيط
        layout.addWidget(self.label)
        layout.addWidget(self.slider)

        # تطبيق التخطيط
        self.setLayout(layout)

        # تغيير اللون الابتدائي
        self.change_color(128)

    def change_color(self, value):
        self.label.setText(f"القيمة: {value}")
        # تغيير لون الخلفية باستخدام قيمة الأحمر فقط
        self.setStyleSheet(f"background-color: rgb({value}, 100, 150);")

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

---

شرح التمرين

1. slider.setMaximum(255)
   لأن قيم ألوان RGB تتراوح بين 0 و 255.
2. self.setStyleSheet(...)
   لتغيير لون الخلفية ديناميكيًا بناءً على قيمة السلايدر.
3. self.change_color(128)
   لضبط اللون الابتدائي عند تشغيل التطبيق.
4. الأخضر (100) والأزرق (150) ثابتان، بينما الأحمر يتغير من 0 إلى 255.

---

📌 النتيجة: عند تحريك السلايدر، ستلاحظ أن درجة اللون الأحمر في الخلفية تتغير مباشرة.

---

تمرين مطور – التحكم الكامل في لون الخلفية بـ 3 سلايدرات (RGB)

الكود مع الحل

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

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

        # القيم الابتدائية
        self.r = 128
        self.g = 128
        self.b = 128

        # تخطيط رئيسي عمودي
        main_layout = QVBoxLayout()

        # تسمية لعرض قيم RGB الحالية
        self.label = QLabel(f"RGB: ({self.r}, {self.g}, {self.b})", self)
        self.label.setAlignment(Qt.AlignCenter)
        main_layout.addWidget(self.label)

        # إضافة سلايدر للأحمر
        main_layout.addLayout(self.create_slider("أحمر", self.r, self.update_red))

        # إضافة سلايدر للأخضر
        main_layout.addLayout(self.create_slider("أخضر", self.g, self.update_green))

        # إضافة سلايدر للأزرق
        main_layout.addLayout(self.create_slider("أزرق", self.b, self.update_blue))

        # تطبيق التخطيط
        self.setLayout(main_layout)

        # ضبط اللون الابتدائي
        self.update_color()

    def create_slider(self, text, value, slot_function):
        """إنشاء سلايدر مع تسمية في صف أفقي"""
        layout = QHBoxLayout()
        label = QLabel(text)
        slider = QSlider(Qt.Horizontal)
        slider.setMinimum(0)
        slider.setMaximum(255)
        slider.setValue(value)
        slider.setTickPosition(QSlider.TicksBelow)
        slider.setTickInterval(25)
        slider.valueChanged.connect(slot_function)
        layout.addWidget(label)
        layout.addWidget(slider)
        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 = RGBColorPicker()
    window.show()
    sys.exit(app.exec_())

---

شرح الفكرة

1. 3 سلايدرات كل واحد يتحكم في لون أساسي من ألوان RGB.
2. كل سلايدر يربط بقيمة خاصة (self.r, self.g, self.b) ويتم تحديث اللون مباشرة عند التغيير.
3. update_color() تقوم بضبط النص ولون الخلفية معًا.
4. القيم من 0 إلى 255 تمثل قوة اللون (0 يعني انعدام اللون، 255 يعني أقوى درجة).

---

📌 النتيجة:
يمكنك الآن سحب أي من السلايدرات الثلاثة لتغيير درجة الأحمر أو الأخضر أو الأزرق، وسيظهر اللون النهائي في الخلفية مباشرة مع عرض القيم على الشاشة.