해커를 꿈꾸는 개발자

파이썬 GUI PyQt5(4) - Horizontal / Vertical Slider 사용하기

1. Qt Designer로 Horizontal / Vertical Slider 생성

Horizontal Slider와 Vertical Slider 컴포넌트와 Label Text 컴포넌트를 생성합니다. 

그리고 각 Slider를 조절할 때마다 Label Text의 값을 변경해 보도록 하겠습니다.

Slider의 값의 범위는 0 ~ 50 까지로 설정해 놓았습니다.

각 Slider의 valueChanged(int) signal과 slot_x_changed(), slot_y_changed() slot을 연동합니다.

valueChanged signal은 slider의 값이 변경될 때마다 이벤트가 발생됩니다.

2. 파이썬 코드로 slot 구현하기

각 slot 함수의 전달인자로 slider값인 data를 전달 받습니다. 

data를 label의 setText 함수로 값을 표시하도록 합니다. 

data는 정수이기 때문에 string으로 변경하여 전달인자로 넣어줍니다.

    def slot_x_changed(self, data):
        self.ui.label_x_value.setText(str(data))
    def slot_y_changed(self, data):
        self.ui.label_y_value.setText(str(data))

3. 전체 코드

import sys
from PyQt5 import QtWidgets
from PyQt5.QtWidgets import QFileDialog
from PyQt5 import uic

class MyApp(QtWidgets.QDialog):
    def __init__(self, parent = None):
        super().__init__(parent)
        self.ui = uic.loadUi("./file/myapp.ui", self)
        self.ui.show()
    def slot_x_changed(self, data):
        self.ui.label_x_value.setText(str(data))
    def slot_y_changed(self, data):
        self.ui.label_y_value.setText(str(data))

app = QtWidgets.QApplication(sys.argv)
me = MyApp()
sys.exit(app.exec())

QT qml의 slider를 이용해 Rectangle 색상 변경하기

Vertical Slider와 Horizotal Slider를 이용하여 Rectangle의 색상을 변경해 보겠습니다. 

Rectangle 정의 하기

Rectangle의 정의해 보겠습니다. 

Qt.rgba의 전달 인자는 Red, Green, Blue, Alpha 값이고, 각각의 값의 범위는 0부터 1까지 입니다. 

여기에서는 Slider에 따라 Red 값과 Green값만 변경되도록 하겠습니다. 

    Rectangle{
        id: rect
        width: 300
        height: 300
        color: Qt.rgba(slider_h.value, slider_v.value, 0, 1)
    }

Slider 정의

Red 값을 변경시킬 Slider와 Green 값을 변경시킬 Slider를 만들어 정의하였습니다. 

두 Slider 값은 0부터 1까지 변경되도록 하였습니다. 

Slider의 Default는 가로(Qt.Horizontal)이며, 하나의 Slider는 세로(Qt.Vertical)로 정의하였습니다.

    Slider {
        id: slider_h
        y: rect.height + 10
        value: 0.5
        width: 300
        from: 0
        to : 1
    }

    Slider {
        id: slider_v
        x: rect.width + 10
        value: 0.5
        height: 300
        from: 0
        to : 1
        orientation : Qt.Vertical
    }

전체 코드

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    width: 640
    height: 480
    visible: true

    Rectangle{
        id: rect
        width: 300
        height: 300
        color: Qt.rgba(slider_h.value, slider_v.value, 0, 1)
    }

    Slider {
        id: slider_h
        y: rect.height + 10
        value: 0.5
        width: 300
        from: 0
        to : 1
    }

    Slider {
        id: slider_v
        x: rect.width + 10
        value: 0.5
        height: 300
        from: 0
        to : 1
        orientation : Qt.Vertical
    }
}