본문 바로가기

프로그래밍/PyQt5 GUI

22. QSlider & QDial

QSlider는 수평 또는 수직 방향의 슬라이더를 제공합니다. 슬라이더는 제한된 범위 안에서 값을 조정하는 위젯입니다.  (QSlider 공식 문서) 참고

슬라이더의 틱(tick)의 간격을 조절하기 위해서는 setTickInterval() 메서드, 틱(tick)의 위치를 조절하기 위해서는 setTickPosition() 메서드를 사용합니다.

setTickInterval() 메서드의 입력값은 픽셀이 아니라 값을 의미합니다.

setTickPosition() 메서드의 입력값과 기능은 아래의 표와 같습니다. (예: setTickPosition(QSlider.NoTicks) 또는 setTickPosition(0))

상수 설명
QSlider.NoTicks 0 틱을 표시하지 않습니다.
QSlider.TicksAbsove 1 틱을 (수평) 슬라이더 위쪽에 표시합니다.
QSlider.TicksBelow 2 틱을 (수평) 슬라이더 아래쪽에 표시합니다.
QSlider.TicksBothSides 3 틱을 (수평) 슬라이더 양쪽에 표시합니다.
QSlider.TicksLeft TicksAbove 틱을 (수직) 슬라이더 왼쪽에 표시합니다.
QSlider.TicksRight TicksBelow 틱을 (수직) 슬라이더 오른쪽에 표시합니다.

QDial은 슬라이더를 둥근 형태로 표현한 다이얼 위젯이며, 기본적으로 같은 시그널과 슬롯, 메서드를 공유합니다. (QDial 공식 문서) 참고

위의 그림처럼 다이얼 위젯에 노치(notch)를 표시하기 위해서는 setNotchesVisible() 메서드를 사용합니다. True로 설정하면 둥근 다이얼을 따라서 노치들이 표시됩니다. 슬라이더의 setTickInterval() 과 마찬가지로 다이얼의 setNotchTarget() 메서드를 통하여 간격을 조절할 수 있습니다.

QSlider와 QDial 위젯에서 자주 사용하는 시그널은 아래와 같습니다.

시그널 설명
valueChanged() 슬라이더의 값이 변할 때 발생합니다.
sliderPressed() 사용자가 슬라이더를 움직이기 시작할 때 발생합니다.
sliderMoved() 사용자가 슬라이더를 움직이면 발생합니다.
sliderReleased() 사용자가 슬라이더를 놓을 때 발생합니다.

22-1 예제: ex21

import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QSlider, QDial, QPushButton)
from PyQt5.QtCore import Qt

class MyApp(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        self.slider = QSlider(Qt.Horizontal, self)
        self.slider.move(30, 30)
        self.slider.resize(300, 10)
        self.slider.setRange(0, 100)
        self.slider.setSingleStep(2)
        self.slider.setTickPosition(2) # QSlider.TickBelow
        self.slider.setTickInterval(10)

        self.dial = QDial(self)
        self.dial.move(120, 50)
        self.dial.setRange(0, 100)
        self.dial.setNotchesVisible(True)
        self.dial.setNotchTarget(10.0)

        btn = QPushButton('Default', self)
        btn.move(125, 160)

        self.slider.valueChanged.connect(self.dial.setValue)
        self.dial.valueChanged.connect(self.slider.setValue)
        btn.clicked.connect(self.button_clicked)

        self.setWindowTitle('QSlider and QDial')
        self.setGeometry(300, 300, 400, 200)
        self.show()

    def button_clicked(self):
        self.slider.setValue(0)
        self.dial.setValue(0)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = MyApp()
    sys.exit(app.exec_())

22-2 설명

슬라이더와 다이얼은 서로 연결되어 있어서 항상 같은 값을 가지고, 푸시 버튼을 누르면 두 위젯의 값이 모두 0이 됩니다.

self.slider = QSlider(Qt.Horizontal, self)

QSlider 위젯을 하나 만들고, 첫 번째 인자로 Qt.Horizontal을 입력하여 수평 방향으로 설정합니다.

self.slider.setRange(0, 100)
self.slider.setSingleStep(2)
self.slider.setTickPosition(2) # QSlider.TickBelow
self.slider.setTickInterval(10)
  • setRange() 메서드로 값의 범위를 0에서 100까지로 설정합니다.
  • setSingleStep() 메서드는 조절 가능한 최소 단위를 설정합니다.
  • setTickPosition() 메서드로 tick의 위치를 아래로 설정합니다.
  • setTickInterval() 메서드로 tick의 간격을 10 단위로 설정합니다.
self.dial = QDial(self)

QDial 위젯을 하나 만듭니다.

self.dial.setRange(0, 100)
self.dial.setNotchesVisible(True)
self.dial.setNotchTarget(10.0)
  • setRange() 메서드로 값의 범위를 0에서 100까지로 설정합니다.
  • setNotchesVisible() 메서드의 값을 True로 노치를 표시하도록 설정합니다.
  • setNotchTarget() 메서드로 노치 간격을 10 단위로 설정합니다.
self.slider.valueChanged.connect(self.dial.setValue)
self.dial.valueChanged.connect(self.slider.setValue)

슬라이더와 다이얼의 값이 변할 때 발생하는 시그널을 각각 다이얼과 슬라이더의 값을 조절해주는 메서드 setValue에 서로 연결함으로써 위젯의 값이 언제나 일치하도록 해줍니다.

btn.clicked.connect(self.button_clicked)

푸시 버튼을 클릭하면 발생하는 시그널을 button_clicked 슬롯에 연결합니다.

def button_clicked(self):
    self.slider.setValue(0)
    self.dial.setValue(0)

button_clicked() 메서드는 슬라이더와 다이얼의 값을 모두 0으로 조절합니다.

따라서 'Default' 푸시 버튼을 클릭하면, 슬라이더와 다이얼의 값이 0으로 초기화됩니다.

 

22-3 결과

'프로그래밍 > PyQt5 GUI' 카테고리의 다른 글

24. QGroupBox  (0) 2021.07.26
23. QSplitter  (0) 2021.07.26
21. QProgressBar  (0) 2021.07.26
20. QLineEdit  (0) 2021.07.23
19. QComboBox  (0) 2021.07.23