스크롤바 만들기 1

스크롤바 만들기

앱을 만들면서 느꼈던 어려운 점은 클래스의 연결, 즉 시그널 슬롯을 만드는 것이었다. 이번에는 스크롤 함수에 클래스의 연결을 말로 표현할 예정이다.

ui에서 설정했던 Qscrollbar 오브젝트에서 valueChanged.connect(함수)를 지정한 다음 그 함수를 설정하면 따로 value 설정을 안하더라도 scroll을 움직일 때, value값이 변한다.

함수는 value 값이 변할 때마다 value의 값을 출력하는 것이다. 근데 문제는 여러 웹사이트에서는 이를 구현하는 내용밖에 나오지 않았다. 다른 응용은 전혀 찾을 수가 없었다.

class Window(QMainWindow):
  
    def __init__(self):
        super().__init__()
        self.UiComponents()
        self.show()

    def UiComponents(self):
        self.main_widget = QtUiTools.QUiLoader().load(
            'ui 경로')
        self.setCentralWidget(self.main_widget)
        self.main_widget.Axial_scroll.setValue(0)
        self.main_widget.Axial_scroll.valueChanged.connect(lambda: do_action())
        self.main_widget.Axial_scroll.setMaximum(100)

        def do_action():
            self.main_widget.Axial_View.setText("Current Value : " + str(self.main_widget.Axial_scroll.value()))
  
App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec_())

참고로 이 때, 함수를 self 설정을 안하고 그냥 컴포넌트 안의 함수로서 설정할수도 있다.
그 모습이 바로 위의 모습이다.

class Window(QMainWindow):
  
    def __init__(self):
        super().__init__()
        self.UiComponents()
        self.show()

    def UiComponents(self):
        self.main_widget = QtUiTools.QUiLoader().load(
            'ui 경로')
        self.setCentralWidget(self.main_widget)
        self.main_widget.Axial_scroll.setValue(0)
        self.main_widget.Axial_scroll.valueChanged.connect(self.do_action)
        self.main_widget.Axial_scroll.setMaximum(100)

    def do_action(self):
        self.main_widget.Axial_View.setText("Current Value : " + str(self.main_widget.Axial_scroll.value()))
  
App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec_())

self 설정을 하고서도 물론 구현할 수 있긴 하다.

스크롤바에 따른 이미지 변환

스크롤을 움직일 때마다 value가 바뀌는 것이면, 바뀌는 value의 값에 따라 이미지의 순서를 지정해 출력할 수 있지 않을까 생각했다. 다만 걱정되는 부분이라면 서로 다른 크기의 이미지라도 깨지지 않고 잘 출력될 것인가 하는 것이었는데, 잘 되었다. 사진은 11장이었기 때문에 setMaximum을 11로 지정했다.

import sys
from PySide2 import QtGui, QtUiTools, QtCore
from PySide2.QtCore import *
from PySide2.QtGui import *
from PySide2.QtWidgets import *

from tqdm import tqdm
  
class Window(QMainWindow):
  
    def __init__(self):
        super().__init__()

        self.UiComponents()
        self.show()

    def UiComponents(self):
        self.main_widget = QtUiTools.QUiLoader().load(
            'ui 경로')
        self.setCentralWidget(self.main_widget)

        self.main_widget.Axial_scroll.valueChanged.connect(lambda: do_action())
        self.main_widget.Axial_scroll.setMaximum(11)
        self.main_widget.Axial_View.resize(700, 700)

        self.img_list = []
        for i in tqdm(range(11)):
            img = QImage(f"이미지{i}.jpg")
            self.img_list.append(img)

        self.main_widget.Axial_View.setPixmap(QPixmap(img))

        def do_action():
            self.main_widget.Axial_View.setPixmap(QPixmap(self.img_list[self.main_widget.Axial_scroll.value()]))

App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec_())

이미지의 크기를 변환해서 출력

import sys
from PySide2 import QtGui, QtUiTools, QtCore
from PySide2.QtCore import *
from PySide2.QtGui import *
from PySide2.QtWidgets import *

from tqdm import tqdm
  
class Window(QMainWindow):
  
    def __init__(self):
        super().__init__()

        self.UiComponents()
        self.show()

    def UiComponents(self):
        self.main_widget = QtUiTools.QUiLoader().load(
            'ui 경로')
        self.setCentralWidget(self.main_widget)

        img = QImage(f"이미지.jpg")

        original_img = QPixmap(img)
        smaller_img = original_img.scaled(100, 100)
        
        self.main_widget.Axial_View.setPixmap(original_img)
        self.main_widget.Coronal_View.setPixmap(smaller_img)
        
App = QApplication(sys.argv)
window = Window()
sys.exit(App.exec_())