Создание графического редактора на Python: PySimpleGUI и Tkinter

0
32

Содержание

Краткая памятка по созданию графического редактора на Python

  1. Установите библиотеку PySimpleGUI через pip.
  2. Импортируйте библиотеку в свой Python-скрипт.
  3. Определите макет интерфейса с помощью списков и кортежей.
  4. Создайте окно приложения с помощью функции Window.
  5. Добавьте виджеты: кнопки, текстовые поля, выпадающие списки.
  6. Настройте обработчики событий для каждого виджета.
  7. Реализуйте логику рисования с помощью элемента Graph.
  8. Добавьте возможность выбора цвета и толщины кисти.
  9. Реализуйте функции сохранения и загрузки изображений.
  10. Протестируйте приложение на различных сценариях использования.
  11. Упакуйте готовое приложение в EXE-файл с помощью PyInstaller.
  12. Документируйте код для дальнейшего развития проекта.

Что для этого нужно

How to - изображение номер один
How to — изображение номер один

Для установки PySimpleGUI в командной строке компьютера или среды разработки пишем такую команду:

После этого библиотеку сразу можно подключать и использовать в проектах командой import PySimpleGUI. Но чтобы не писать каждый раз в коде такое громоздкое название, ей можно задать другое имя при подключении, например:

Создание своего графического редактора на - изображение номер два
Создание своего графического редактора на — изображение номер два

Библиотека PySimpleGUI — простой интерфейс для Python

Создаём графический интерфейс на - изображение номер три
Создаём графический интерфейс на — изображение номер три

На самом деле у Python есть много библиотек, которые позволяют создать графический интерфейс — Tkinter, Qt, Remi или WxPython. Но проблема в том, что каждую из них нужно осваивать отдельно. Например, в одной удобно создавать графики, но неудобно — кнопки и надписи.

Чтобы сделать создание интерфейсов проще, придумали PySimpleGUI. Идея в том, чтобы объединить лучшие идеи из каждой библиотеки и написать для них внешнюю обёртку.

В итоге программисту на Python достаточно взять уже готовую команду создания кнопки, а отрисовку и внешний вид программа возьмёт на себя.

Ещё PySimpleGUI — это кросс-платформенное решение. Это значит, что интерфейсы, созданные с помощью этой библиотеки, будут работать одинаково на разных операционных системах.

Question - изображение номер четыре
Question — изображение номер четыре

python - изображение номер пять
python — изображение номер пять

Create - изображение номер шесть
Create — изображение номер шесть

Intro to - изображение номер семь
Intro to — изображение номер семь

Создаём простой интерфейс

Красивый графический интерфейс на - изображение номер восемь
Красивый графический интерфейс на — изображение номер восемь

Сегодня мы посмотрим, как всё работает, и сделаем маленькую программу. Как разберёмся — возьмём проекты помасштабнее.

В редакторе кода создаём новый Python-файл и пишем такой код — в нём мы создаём простое окно с кнопкой и текстом:

import PySimpleGUI as sg import random layout = [[(‘Новое число’,enable_events=True, key=’-FUNCTION-‘, font=’Helvetica 16’)], [(‘Результат:’, size=(25, 1), key=’-text-‘, font=’Helvetica 16’)]] window = (‘Генератор случайных чисел’, layout, size=(350,100)) while True: event, values = () if event in (sg.WIN_CLOSED, ‘Exit’): break ()

Tkinter - изображение номер девять
Tkinter — изображение номер девять

Мы только что создали простой графический интерфейс, указав только три параметра: размер окна, кнопку и текстовое поле. Так как мы не задавали дополнительных параметров, библиотека сама разместила элементы внутри окна. Ещё у нас не прописана внутренняя логика, поэтому при нажатии на кнопку ничего не произойдёт. Исправим это и привяжем нажатие кнопки к появлению нового случайного числа.

Создание своего первого графического интерфейса

КАК - изображение номер десять
КАК — изображение номер десять

Для начала, следует импортировать Tkinter и создать окно, в котором мы зададим его название:

Результат будет выглядеть следующим образом: Прекрасно! Наше приложение работает. Последняя строка вызывает функцию mainloop. Эта функция вызывает бесконечный цикл окна, поэтому окно будет ждать любого взаимодействия с пользователем, пока не будет закрыто.

Создай своё первое - изображение номер одиннадцать
Создай своё первое — изображение номер одиннадцать

В случае, если вы забудете вызвать функцию mainloop, для пользователя ничего не отобразится.

Создание виджета Label

Label, tkinter and - изображение номер двенадцать
Label, tkinter and — изображение номер двенадцать

Чтобы добавить текст в наш предыдущий пример, мы создадим lbl, с помощью класса Label, например:

Затем мы установим позицию в окне с помощью функции grid и укажем ее следующим образом:

И вот как будет выглядеть результат: Если функция grid не будет вызвана, текст не будет отображаться.

Виджет - изображение номер тринадцать
Виджет — изображение номер тринадцать

Настройка размера и шрифта текста

Changing - изображение номер четырнадцать
Changing — изображение номер четырнадцать

Вы можете задать шрифт текста и размер. Также можно изменить стиль шрифта. Для этого передайте параметр font таким образом:

Обратите внимание, что параметр font может быть передан любому виджету, для того, чтобы поменять его шрифт, он применяется не только к Label.

How to increase font size in python - изображение номер пятнадцать
How to increase font size in python — изображение номер пятнадцать

Отлично, но стандартное окно слишком мало. Как насчет настройки размера окна?

Настройка размеров окна приложения

Simple - изображение номер шестнадцать
Simple — изображение номер шестнадцать

Мы можем установить размер окна по умолчанию, используя функцию geometry следующим образом:

В приведенной выше строке устанавливается окно шириной до 400 пикселей и высотой до 250 пикселей.

Попробуем добавить больше виджетов GUI, например, кнопки и посмотреть, как обрабатывается нажатие кнопок.

Добавление виджета Button

ส อ น - изображение номер семнадцать
ส อ น — изображение номер семнадцать

Начнем с добавления кнопки в окно. Кнопка создается и добавляется в окно так же, как и метка:

ЧИТАТЬ ТАКЖЕ:  Python sort и sorted: в чем разница и как выбрать метод сортировки

Результат будет следующим: Обратите внимание, что мы помещаем кнопку во второй столбец окна, что равно 1. Если вы забудете и поместите кнопку в том же столбце, который равен 0, он покажет только кнопку.

how to put an image on push button in python gui insert image on push button in - изображение номер восемнадцать
how to put an image on push button in python gui insert image on push button in — изображение номер восемнадцать

Изменение цвета текста и фона у Button

Change - изображение номер девятнадцать
Change — изображение номер девятнадцать

Вы можете поменять цвет текста кнопки или любого другого виджета, используя свойство fg. Кроме того, вы можете поменять цвет фона любого виджета, используя свойство bg.

Теперь, если вы попытаетесь щелкнуть по кнопке, ничего не произойдет, потому что событие нажатия кнопки еще не написано.

Change the style and background color of - изображение номер двадцать
Change the style and background color of — изображение номер двадцать

Кнопка Click

How to make a clickable button in - изображение номер двадцать один
How to make a clickable button in — изображение номер двадцать один

Для начала, мы запишем функцию, которую нужно выполнить при нажатии кнопки:

Обратите внимание: мы пишем clicked, а не clicked()с круглыми скобками. Теперь полный код будет выглядеть так:

При нажатии на кнопку, результат, как и ожидалось, будет выглядеть следующим образом: Круто!

tkinter button click with python - изображение номер двадцать два
tkinter button click with python — изображение номер двадцать два

Получение ввода с использованием класса Entry (текстовое поле Tkinter)

How to create an - изображение номер двадцать три
How to create an — изображение номер двадцать три

В предыдущих примерах GUI Python мы ознакомились со способами добавления простых виджетов, а теперь попробуем получить пользовательский ввод, используя класс Tkinter Entry (текстовое поле Tkinter). Вы можете создать текстовое поле с помощью класса Tkinter Entry следующим образом:

Затем вы можете добавить его в окно, используя функцию grid. Наше окно будет выглядеть так:

Полученный результат будет выглядеть так: Теперь, если вы нажмете кнопку, она покажет то же самое старое сообщение, но что же будет с отображением введенного текста в виджет Entry?

Tkinter 03 entry box (text input) - изображение номер двадцать четыре
Tkinter 03 entry box (text input) — изображение номер двадцать четыре

Во-первых, вы можете получить текст ввода, используя функцию get. Мы можем записать код для выбранной функции таким образом:

Если вы нажмете на кнопку — появится текст «Привет» вместе с введенным текстом в виджете записи. Вот полный код:

Запустите вышеуказанный код и проверьте результат: Прекрасно!

python tkinter поле для ввода урок 2 - изображение номер двадцать пять
python tkinter поле для ввода урок 2 — изображение номер двадцать пять

Каждый раз, когда мы запускаем код, нам нужно нажать на виджет ввода, чтобы настроить фокус на ввод текста, но как насчет автоматической настройки фокуса?

Установка фокуса виджета ввода

59 - изображение номер двадцать шесть
59 — изображение номер двадцать шесть

Здесь все очень просто, ведь все, что нам нужно сделать, — это вызвать функцию focus:

Когда вы запустите свой код, вы заметите, что виджет ввода в фокусе, который дает возможность сразу написать текст.

Добавление виджета Combobox

Py - изображение номер двадцать семь
Py — изображение номер двадцать семь

Как видите с примера, мы добавляем элементы combobox, используя значения tuple. Чтобы установить выбранный элемент, вы можете передать индекс нужного элемента текущей функции. Чтобы получить элемент select, вы можете использовать функцию get вот таким образом:

wx - изображение номер двадцать восемь
wx — изображение номер двадцать восемь

Установка состояния Checkbutton

Здесь мы создаем переменную типа BooleanVar, которая не является стандартной переменной Python, это переменная Tkinter, затем передаем ее классу Checkbutton, чтобы установить состояние чекбокса как True в приведенном выше примере.

Вы можете установить для BooleanVar значение false, что бы чекбокс не был отмечен. Так же, используйте IntVar вместо BooleanVar и установите значения 0 и 1.

Добавление виджетов Radio Button

how to create a radio button in python - изображение номер тридцать
how to create a radio button in python — изображение номер тридцать

Обратите внимание, что вы должны установить value для каждой radio кнопки с уникальным значением, иначе они не будут работать.

Результатом вышеприведенного кода будет следующий: Кроме того, вы можете задать command любой из этих кнопок для определенной функции. Если пользователь нажимает на такую кнопку, она запустит код функции. Вот пример:

Radio - изображение номер тридцать один
Radio — изображение номер тридцать один

Получение значения Radio Button (Избранная Radio Button)

Radio button in python tkinter - изображение номер тридцать два
Radio button in python tkinter — изображение номер тридцать два

Чтобы получить текущую выбранную radio кнопку или ее значение, вы можете передать параметр переменной и получить его значение.

74 - изображение номер тридцать три
74 — изображение номер тридцать три

Показ сообщений о предупреждениях и ошибках

python 10 graphics - изображение номер тридцать четыре
python 10 graphics — изображение номер тридцать четыре

Вы можете показать предупреждающее сообщение или сообщение об ошибке таким же образом. Единственное, что нужно изменить—это функция сообщения.

Показ диалоговых окон с выбором варианта

Чтобы показать пользователю сообщение “да/нет”, вы можете использовать одну из следующих функций messagebox:

Вы можете выбрать соответствующий стиль сообщения согласно вашим потребностям. Просто замените строку функции showinfo на одну из предыдущих и запустите скрипт. Кроме того, можно проверить, какая кнопка нажата, используя переменную результата.

Если вы кликнете OK, yes или retry, значение станет True, а если выберете no или cancel, значение будет False. Единственной функцией, которая возвращает одно из трех значений, является функция askyesnocancel; она возвращает True/False/None.

Добавление SpinBox (Виджет спинбокс)

Spin - изображение номер тридцать шесть
Spin — изображение номер тридцать шесть

Таким образом, мы создаем виджет Spinbox, и передаем параметры from и to, чтобы указать диапазон номеров. Кроме того, вы можете указать ширину виджета с помощью параметра width:

Вы можете указать числа для Spinbox, вместо использования всего диапазона следующим образом:

Spinbox in tkinter - изображение номер тридцать семь
Spinbox in tkinter — изображение номер тридцать семь

Добавление виджета Progressbar

pyqt5 progressbar using - изображение номер тридцать восемь
pyqt5 progressbar using — изображение номер тридцать восемь

Вы можете установить это значение на основе любого процесса или при выполнении задачи.

Изменение цвета Progressbar

Create a - изображение номер тридцать девять
Create a — изображение номер тридцать девять

Изменение цвета Progressbar немного сложно. Сначала нужно создать стиль и задать цвет фона, а затем настроить созданный стиль на Progressbar. Посмотрите следующий пример:

python 3 - изображение номер сорок
python 3 — изображение номер сорок

Добавление поля загрузки файла

Современные графические приложения на - изображение номер сорок один
Современные графические приложения на — изображение номер сорок один

Сначала мы создаем меню, затем добавляем наш первый пункт подменю. Вы можете добавлять пункты меню в любое меню с помощью функции add_cascade() таким образом:

Live - изображение номер сорок два
Live — изображение номер сорок два

Теперь мы добавляем еще один пункт меню “Изменить” с разделителем меню. Вы можете заметить пунктирную линию в начале, если вы нажмете на эту строку, она отобразит пункты меню в небольшом отдельном окне.

Свой - изображение номер сорок три
Свой — изображение номер сорок три

Просто отредактируйте new_item, как в приведенном выше примере и он больше не будет отображать пунктирную линию. Вы так же можете ввести любой код, который работает, при нажатии пользователем на любой элемент меню, задавая свойство команды.

ЧИТАТЬ ТАКЖЕ:  Установка более старой версии Python: пошаговая инструкция с фото

Указание типа файлов (расширение фильтра файлов)

Введение в обработку изображений в - изображение номер сорок четыре
Введение в обработку изображений в — изображение номер сорок четыре

Возможность указания типа файлов доступна при использовании параметра filetypes, однако при этом важно указать расширение в tuples.

Вы можете указать начальную директорию для диалогового окна файла, указав initialdir следующим образом:

Добавление панели меню

Как сделать графический интерфейс на - изображение номер сорок пять
Как сделать графический интерфейс на — изображение номер сорок пять

После создания вкладок вы можете поместить виджеты внутри этих вкладок, назначив родительское свойство нужной вкладке.

Четыре способа написать - изображение номер сорок шесть
Четыре способа написать — изображение номер сорок шесть

Добавление виджета Notebook (Управление вкладкой)

How to use - изображение номер сорок семь
How to use — изображение номер сорок семь

Таким образом, вы можете добавлять столько вкладок, сколько нужно.

Создаем - изображение номер сорок восемь
Создаем — изображение номер сорок восемь

Добавление виджетов на вкладку

Add - изображение номер сорок девять
Add — изображение номер сорок девять

Вы можете добавить отступы для элементов управления, чтобы они выглядели хорошо организованными с использованием свойств padx иpady.

В этом уроке мы увидели много примеров GUI Python с использованием библиотеки Tkinter. Так же рассмотрели основные аспекты разработки графического интерфейса Python. Не стоит на этом останавливаться. Нет учебника или книги, которая может охватывать все детали. Надеюсь, эти примеры были полезными для вас.

Выдаём случайные числа

Программирование на - изображение номер пятьдесят
Программирование на — изображение номер пятьдесят

Это значит, что при нажатии на кнопку окно отправит внутреннее системное сообщение с текстом -FUNCTION-. Если мы привяжем свою функцию к этому сообщению, то она будет выполняться при каждом нажатии кнопки.

Чтобы связать функцию с сообщением от окна, добавим в конец основного цикла такую проверку:

Теперь у нас есть привязанная функция update (), но в коде её ещё нет. Исправим это и добавим новую функцию сразу после команд импорта:

def update(): r = (1,100) text_elem = window[‘-text-‘] text_elem.update(«Результат: {}».format(r))

При нажатии на кнопку скрипт обработает системное сообщение и начнёт выполнять эту функцию: создаст новое случайное число и отправит его в текстовое поле.

HOW - изображение номер пятьдесят один
HOW — изображение номер пятьдесят один

import PySimpleGUI as sg import random def update(): r = (1,100) text_elem = window[‘-text-‘] text_elem.update(«Результат: {}».format(r)) layout = [[(‘Новое число’,enable_events=True, key=’-FUNCTION-‘, font=’Helvetica 16’)], [(‘Результат:’, size=(25, 1), key=’-text-‘, font=’Helvetica 16’)]] window = (‘Генератор случайных чисел’, layout, size=(350,100)) while True: event, values = () if event in (sg.WIN_CLOSED, ‘Exit’): break if event == ‘-FUNCTION-‘: update() ()

Что дальше

Making a - изображение номер пятьдесят два
Making a — изображение номер пятьдесят два

Мы сделали самый простой интерфейс и посмотрели, как можно связать внутреннюю логику и кнопки. В следующий раз используем это для более серьёзных проектов — нарисуем им свой интерфейс и научимся менять его внешний вид.

Как в PySimpleGUI обрабатывать ввод данных из текстового поля?

Создайте текстовое поле с уникальным ключом, например (key=’-INPUT-‘). Когда пользователь введёт текст и нажмёт кнопку, прочитайте значение через словарь values в основном цикле: user_text = values[‘-INPUT-‘].

После этого можете использовать введённый текст как обычную переменную — передать в функцию, сохранить в файл или вывести в другой элемент интерфейса. Главное — не забудьте присвоить каждому элементу свой уникальный ключ, чтобы потом к нему обратиться.

Можно ли упаковать программу на PySimpleGUI в исполняемый EXE-файл?

Demo of - изображение номер пятьдесят четыре
Demo of — изображение номер пятьдесят четыре

Да, для этого используйте утилиту PyInstaller. Установите её командой pip install pyinstaller, затем в терминале перейдите в папку с вашим скриптом и выполните pyinstaller –onefile –windowed имя_файла.py. Параметр –onefile упакует всё в один EXE-файл, а –windowed скроет консольное окно, оставив только графический интерфейс.

Готовый файл появится в папке dist — его можно запускать на любом windows-компьютере без установки Python. Для Linux и macOS процесс аналогичный, только на выходе получится исполняемый файл под соответствующую систему.

Как изменить тему оформления (скин) окна в PySimpleGUI?

py185 - изображение номер пятьдесят пять
py185 — изображение номер пятьдесят пять

Когда выберете, просто укажите название в коде, и все элементы интерфейса автоматически перекрасятся в новые цвета.

Как создать многооконное приложение?

Изучение - изображение номер пятьдесят шесть
Изучение — изображение номер пятьдесят шесть

Создайте несколько объектов окон, например window1 и window2, но не запускайте для них разные циклы. В PySimpleGUI используется единый цикл событий для всех окон сразу. Вместо обычного () используйте специальную функцию read_all_windows:

while True: window, event, values = sg.read_all_windows() if window is None and event == sg.WIN_CLOSED: break if window == window1 and event == ‘Ok’: print(‘Нажали кнопку в первом окне’) if window == window2 and event == ‘Exit’: ()

Функция read_all_windows() сама определяет, в каком окне произошло действие, и возвращает ссылку на него в переменной window. Это самый эффективный способ, который не нагружает процессор лишними проверками.

Где найти полный список всех элементов (виджетов) PySimpleGUI и их параметров?

py189 - изображение номер пятьдесят семь
py189 — изображение номер пятьдесят семь

Полная документация находится на официальном сайте PySimpleGUI по адресу. Там описаны все элементы: кнопки, текстовые поля, слайдеры, графики, таблицы, вкладки и многое другое. Для каждого виджета перечислены доступные параметры, примеры использования и скриншоты результата.

Ещё на GitHub в репозитории PySimpleGUI есть папка DemoPrograms с готовыми примерами программ — можно скачать их, запустить и посмотреть, как реализованы разные элементы интерфейса.

Эта библиотека бесплатная?

  • Для коммерческой разработки лицензия платная (99 $).
  • Для обучения и хобби лицензия условно-бесплатная на 30 дней, и нужна обязательная регистрация. Без этого окно программы не откроется.

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

Чтобы его использовать, установите pip install FreeSimpleGUI. Затем в коде скрипта замените строку import PySimpleGUI as sg на import FreeSimpleGUI as sg.

Топ 5 библиотек - изображение номер пятьдесят восемь
Топ 5 библиотек — изображение номер пятьдесят восемь

Часто задаваемые вопросы по созданию графического редактора на Python

Вопрос: Какая библиотека лучше всего подходит для создания графического редактора на Python?
Ответ: Для простых редакторов отлично подходит PySimpleGUI, для более сложных — Tkinter или PyQt.

Вопрос: Можно ли создать графический редактор на Python без использования сторонних библиотек?
Ответ: Да, можно использовать встроенную библиотеку Tkinter, но функционал будет ограничен.

Вопрос: Как добавить возможность рисования в графическом редакторе на PySimpleGUI?
Ответ: Используйте элемент Graph для создания холста и обработки событий мыши.

Вопрос: Сложно ли научиться создавать GUI на Python новичку?
Ответ: PySimpleGUI специально создан для новичков и имеет очень простой синтаксис.

Вопрос: Как сохранить изображение, созданное в графическом редакторе на Python?
Ответ: Используйте библиотеку PIL (Pillow) для сохранения холста в файл.

Вопрос: Поддерживает ли PySimpleGUI работу с изображениями?
Ответ: Да, библиотека поддерживает отображение и базовую обработку изображений.

Вопрос: Можно ли создать многооконный графический редактор на PySimpleGUI?
Ответ: Да, библиотека поддерживает создание многооконных приложений.

Вопрос: Как обрабатывать нажатия клавиш в графическом редакторе?
Ответ: Используйте параметр key для привязки событий клавиатуры к элементам интерфейса.

Вопрос: Какие форматы файлов поддерживает PySimpleGUI для загрузки изображений?
Ответ: PySimpleGUI поддерживает PNG, JPG, GIF и другие популярные форматы.

Вопрос: Есть ли готовые шаблоны графических редакторов на PySimpleGUI?
Ответ: Да, в официальной документации и на GitHub есть примеры простых редакторов.