Создание графического интерфейса без использования программы-визуализатора

Вопросы:

·     Создание окна приложения в коде программы.

·     Запуск цикла обработки событий.

·     Размещение и настройка виджетов.

Итак, создадим в пустом модуле окно приложения. Для этого вначале к модулю нужно подключить некоторые, уже описанные модули, а также импортировать необходимые классы объектов, описанные в графической библиотеке PyQt5. Прежде всего нужно подключить модуль sys, он позволит запускать наше приложение из командной строки, а также принимать нашему приложению аргументы, заданные через командную строку. Элементы управления графическим интерфейсом описаны в модуле QtWidgets графической библиотеки PyQt5. Загрузим из этого модуля классы QWidget и QApplication.

import sys

from PyQt5.QtWidgets import QWidget, QApplication

Запуск любого приложения с графическим интерфейсом начинается с создания объекта класса QApplication. Создадим его в переменной a. Конструктор класса QApplication принимает на вход единственный параметр argv из модуля sys, это параметры командной строки, которые задаёт пользователь при запуске приложения. Дальше создадим в переменной window объект класса QWidget. Это и будет окно программы. Установим его размеры, вызвав у объекта window метод setGeometry, этот метод принимает на вход четыре целочисленных аргумента. Первые два числа – это координаты левого верхнего угла окна в пикселах, они определяют расположение окна на экране. Вторая пара чисел определяет размеры окна по соответствующим осям. При этом важно помнить, что при расчёте координат ось x направлена, как обычно, вправо, а ось y не вверх, а вниз. Зададим положение левого верхнего угла окна в точке с координатами 550 и 400, а размеры окна – 500 на 200. После того, как мы создали окно приложения, его нужно отобразить на экране. Для этого вызовем у объекта window метод show без параметров. Таким образом мы запускаем цикл обработки событий у нашего приложения. Цикл завершится, когда будет уничтожен объект window, или же при вызове функции exit. Вызов из модуля sys процедуры exit позволяет завершить работу программы корректно в том случае, если основное окно программы будет уничтожено. В качестве параметра этой функции указывается процесс, который необходимо завершить, то есть у объекта a метод exec.

a = QApplication (sys.argv)

window = QWidget ()

window.setGeometry (550, 400, 500, 200)

window.show ()

sys.exit (a.exec ())

Сохраним описанный модуль и запустим его на выполнение. На экран было выведено окно программы. Пока в нём нет виджетов.

Код, который мы описали, соответствует парадигме функционального программирования. Изменим его так, чтобы он стал объектным. Для этого перед основной программой добавим описание нового класса. Назовём его MainWindow, он будет наследником класса QWidget. Опишем его конструктор. В конструкторе класса MainWindow обратимся к его классу-предку, вызвав функцию super без параметров. Вызовем его конструктор. Для того, чтобы продолжить настройку окна программы, вызовем из конструктора класса метод setupUI. Далее опишем этот метод. Перенесём вызовы методов setGeometry и show из основной программы в метод. Теперь они будут вызываться у объекта класса. Пока описание метода setupUI завершено. В основной программе, в переменной window, создадим объект класса MainWindow. Сохраним получившийся код и запустим его на выполнение. На экран было выведено то же окно, что и в первый раз.

class MainWindow (QWidget):

    def __init__ (self):

        super ().__init__ ()

        self.setupUI ()

Решим задачу. Разместить в окне программы квадрат, цвет которого задан цветовой моделью RGB, а также 3 ползунка, регулирующие цветовые составляющие модели, то есть количества красного, синего и зелёного цветов.

Подумаем, как должно выглядеть окно программы. Справа разместим квадрат, а слева -три ползунка, которыми будут регулироваться составляющие цвета квадрата. Чтобы пользователь знал, параметры какой цветовой составляющей он изменяет, а также текущее значение этой цветовой составляющей, над каждым ползунком разместим метку, содержащую название цвета, количество которого изменяет соответствующий ползунок, двоеточие и текущее количество этого цвета. При перетаскивании ползунка будет изменяться и цвет квадрата. Мы продумали, как должно выглядеть окно программы.

Теперь начнём его описание. Для этого сначала загрузим в наш модуль необходмые виджеты из модуля QtWidgets. Пока мы не знаем, какие виджеты мы будем использовать, поэтому просто загрузим из него все классы. Теперь будем изменять окно программы. В теле метода setupUI зададим заголовок окна программы. Для этого у формы вызовем метод setWindowTitle. Назовём наше окно «Выбор цвета».

def setupUI (self):

        self.setGeometry (550, 400, 500, 200)

        self.setWindowTitle ('Выбор цвета')

После того, как мы задали заголовок окна, добавим на него квадрат, в котором будет отображаться выбранный цвет. Для этого добавим в класс нашей формы поле с названием frmColor. В этом поле создадим объект класса QFrame. На русский язык слово «frame» можно перевести как «рамка». Запустим модуль на выполнение. На экран было выведено окно программы с указанным нами заголовком, но никакого квадрата для отображения цвета в нём пока нет. Дело в том, что мы создали квадрат, но при этом не разместили его на форме и не указали его цвет.

Сделаем это. У поля frmColor вызовем метод setGeometry. Зададим положение левого верхнего угла нашего квадрата в точке с координатами триста десять, десять. И укажем его размер – триста восемьдесят на триста восемьдесят. Теперь установим цвет нашего квадрата. Для этого нужно изменить его стиль. Чтобы это сделать, вызовем у него метод setStyleSheet. Этот метод изменяет лист стиля элемента, который задаётся текстовой строкой. Нам нужно изменить цвет фона квадрата. Для этого в качестве параметра метода укажем текстовую строку, которая начинается со слова background-color, что в переводе означает «цвет фона», и двоеточия. Дальше нужно указать цвет. Его можно задать с помощью функции rgb, которая принимает на вход 3 целых числа – количества цветовых составляющих. По умолчанию сделаем их равными 0.

self.frmColor = QFrame (self)

self.frmColor.setGeometry (310, 10, 180, 180)

self.frmColor.setStyleSheet ('background-color: rgb(0, 0, 0)')

Снова запустим модуль на выполнение. На экран было выведено созданное нами окно, в правой части которого появился чёрный квадрат. Он и должен быть чёрным, так как количества его цветовых составляющих равны нулю.

Теперь нужно добавить на форму окна ползунки и метки. Добавим в методе setupUI описание нового поля. Назовём его sldRed. В этом поле будет храниться объект класса QSlider. Запустим модуль на выполнение. На экран было выведено окно программы. В левом верхнем его углу появился ползунок, но он расположен вертикально, а нам нужно расположить его горизонтально. Для этого при создании этого ползунка при вызове метода конструктора нужно указать ещё один параметр – его ориентацию в пространстве. Однако для того, чтобы указать ориентацию, нужно сначала получить к ней доступ. Для этого в начале модуля, там же, где мы подключали другие классы, загрузим из модуля QtCore библиотеки PyQt5 класс Qt. Теперь при создании ползунка зададим в качестве параметра метода-конструктора значение поля Horizontal из класса Qt.

Далее зададим расположение и размеры ползунка. Для этого у поля sldRed вызовем метод setGeometry. Укажем расположение левого верхнего угла ползунка в точке 10, 40. Укажем его размер – 280 на 20. Cнова запустим наш модуль на выполнение. Теперь ползунок в окне программы расположен, как и было задумано, однако на этом его настройка не закончена.

Главное свойство ползунка – это целочисленное значение, которое задаётся его положением. Оно зависит не только от положения ползунка, но и от диапазона значений, который ему задан. Поэтому нужно настроить диапазон значений для нашего ползунка. Для этого вызовем у него метод setRange. Этот метод принимает на вход 2 целых числа – начальное и конечное значения из нового диапазона. Как мы помним, количества цветовых составляющих в модели RGB задаются целыми числами в диапазоне от 0 до 255. Таким образом мы настроили ползунок, который будет задавать количество красного цвета.

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

self.sldRed.setGeometry (10, 40, 280, 20)

self.sldRed.setRange (0, 255)

После того, как мы настроили первый ползунок, разместим над ним метку, которая будет отображать количество красного цвета. Для этого добавим в класс нашей формы поле lblRed. В нём создадим объект класса QLabel. Мы можем задать текст метки в процессе её создания. Для этого методу-конструктору задаётся текстовая строка – будущий текст метки. Напомним, что она должна содержать название соответствующего цвета, то есть «Красный», двоеточие и его количество, которое по умолчанию будет равным нулю. Теперь зададим размер метки и её расположение. Сделаем их такими же, как у соответствующего ползунка, с той лишь разницей, что метка будет располагаться на тридцать пикселов выше, то есть координата игрек её верхнего левого угла будет равна десяти.

self.lblRed = QLabel ('Красный: 0', self)

self.lblRed.setGeometry (10, 10, 280, 20)

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

Снова запустим модуль на выполнение. Теперь у нас есть ползунок и метка над ним. Разместим ещё два ползунка с метками. Дважды скопируем код, который настраивает ползунок и метку для красного цвета и изменим его для задания таких же элементов управления для зелёного и для синего цветов. Для зелёного цвета назовём ползунок sldGreen, а метку, соответственно, lblGreen. Зададим положение метки и ползунка на шестьдесят пикселов ниже соответствующих элементов для красного цвета. Также изменим название цвета в тексте метки на зелёный. Для синего цвета назовём ползунок lblBlue, а метку – lblBlue. Элементы управления для синего цвета будут располагаться на сто двадцать пикселов ниже соответствующих элементов для красного цвета. Также изменим название цвета в тексте метки на синий.

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

self.sldGreen.setGeometry (10, 100, 280, 20)

self.sldGreen.setRange (0, 255)

self.lblGreen = QLabel ('Зелёный: 0', self)

self.lblGreen.setGeometry (10, 70, 280, 20)

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

self.sldBlue.setGeometry (10, 160, 280, 20)

self.sldBlue.setRange (0, 255)

self.lblBlue = QLabel ('Синий: 0', self)

self.lblBlue.setGeometry (10, 130, 280, 20)

Снова запустим модуль на выполнение. Внешний вид окна полностью соответствует задуманному, однако пока при перетаскивании ползунков ничего не происходит. Для этого нужно описать обработчик события. Поэтому добавим в описанный нами класс ещё один метод. Назовём его ResetColor. В этом методе сначала считаем значения, которые заданы ползунками, в числовые переменные. В переменную r считаем значение, заданное ползунком sldRed. Для этого вызовем у этого ползунка метод «Вэлью» без параметров. Дважды скопируем эту строку кода и изменим её для считывания в переменную g значения ползунка sldGreen, а в переменную b - значения ползунка lblBlue. После того, как мы считали значения ползунков, изменим текст в соответствующих им метках. Зададим метке lblRed текст, состоящий из слова «Красный», двоеточия и значения переменной r, преобразованного в строковый тип. Аналогично изменим текст в метках для зелёного и синего цветов. Осталось лишь изменить цвет нашего квадрата. Для этого у поля frmColor вызовем метод setStyleSheet. Сформируем для него строковый параметр, состоящий из слова background-color, двоеточия, слова rgb, после которого в скобках записано три целочисленных параметра. Для формирования строки используем метод format со значениями переменных r, g и b в качестве параметров.

def ResetColor (self):

    r = self.sldRed.value ()

    g = self.sldGreen.value ()

    b = self.sldBlue.value ()

    self.lblRed.setText ('Красный: ' + str (r))

    self.lblGreen.setText ('Зелёный: ' + str (g))

    self.lblBlue.setText ('Синий: ' + str (b))

    self.frmColor.setStyleSheet ('background-color: rgb({0:d}, {1:d}, {2:d})'.format (r, g, b))

На этом описание метода ResetColor завершено. Теперь в методе setupUI назначим для ползунка sldRed, для события valueChanged в качестве обработчика метод ResetColor, который мы описали. Назначим этот же метод для обработки этого же события у оставшихся двух ползунков. Описание модуля завершено. Сохраним его и запустим на выполнение. Теперь в окне нашей программы при перетаскивании ползунков соответствующим образом изменяется текст меток над ними, а также цвет квадрата в правой части окна. Так, например, если мы зададим с помощью ползунков максимальные количества всех цветовых составляющих, то цвет квадрата станет белым. Программа работает правильно. Задача решена.

Мы научились:

·     В коде программы создавать окно приложения.

·     Размещать на нём элементы управления.

·     Настраивать их.