Приложение Easy Editor. Ч. 1 (new)

1.

Приложение
Easy Editor. Часть 1
Ссылка на методичку

2.

Приложение Easy Editor. Ч. 1
Обсуждение:
Планирование
работы над проектом

3.

Приступаем к большому заказу!
В прошлый раз к специалистам ProTeam обратился
представитель министерства социального развития.
Он готовит пакет программ для пожилых людей.
Одним из приложений должен стать фоторедактор Easy Editor.
Обсуждение
рабочих задач
Чтобы сдать приложение в срок, спланируем работу над заказом!
Алёна,
менеджер проектов

4.

Техническое задание
Цель — запрограммировать приложение Easy Editor.
Обсуждение
рабочих задач
Ожидаемый вид приложения:

5.

Техническое задание
Цель — запрограммировать приложение Easy Editor.
Требования:
❏ Интерфейс должен быть как на картинке.
❏ Возможность выбора на компьютере папки с изображениями.
«Сделать чёрно-белым».
«Повернуть влево (на 90°)».
«Повернуть вправо (на 90°)».
«Навести резкость».
«Отразить зеркально (слева направо)».
«Убрать обработку».
❏ Сохранение обработанных фотографий (копий оригинала) в новую
подпапку Modified.
Обсуждение
рабочих задач
❏ Инструменты обработки:

6.

Планируем работу над проектом
Составим mind map проекта:
Разработка
интерфейса
Фоторедактор
Обработка
картинок
Разработчик Костя уже выделил три главных направления.
Какими блоками можно дополнить схему?
Обсуждение
рабочих задач
Обслуживание
списка картинок

7.

Планируем работу над проектом
Mind map проекта:
Превью
выделенной
картинки
Выбор картинки
для редактуры
Создание
виджетов
Обслуживание
списка картинок
Размещение в
лэйаутах
Разработка
интерфейса
Фоторедактор
Обработка
картинок
Поворот
вправо
Поворот
влево
Зеркальное
отражение
Ч/б
Навести
резкость
Убрать
обработку
Сохранить
результат
Обсуждение
рабочих задач
Загрузка списка
картинок из
папки

8.

Планируем работу над проектом
1.
Создать интерфейс приложения.
2.
Сделать загрузку картинок из желаемой папки.
3.
Отобразить превью картинки, выделенной в
списке.
4. Запрограммировать редактирование
фотографии:
создание изменённой копии;
показ превью изменённой копии;
сохранение в подпапку Modified.
Обсуждение
рабочих задач
Чек-лист работы с опорой на mind map:

9.

Планируем работу над проектом
1.
Создать интерфейс приложения.
2.
Сделать загрузку картинок из желаемой папки.
3.
Отобразить превью картинки, выделенной в
списке.
4. Запрограммировать редактирование
фотографии:
создание изменённой копии;
показ превью изменённой копии;
сохранение в подпапку Modified.
Обсуждение
рабочих задач
Сегодня
Чек-лист работы с опорой на mind map:

10.

Планируем работу над проектом
Mind map проекта:
Превью
выделенной
картинки
Выбор картинки
для редактуры
Создание
виджетов
Обслуживание
списка картинок
Размещение в
лэйаутах
Разработка
интерфейса
Фоторедактор
Задачи на
сегодня
Обработка
картинок
Поворот
вправо
Поворот
влево
Зеркальное
отражение
Ч/б
Навести
резкость
Убрать
обработку
Сохранить
результат
Обсуждение
рабочих задач
Загрузка списка
картинок из
папки

11.

Цель рабочего дня —
Сегодня вы:
Вспомните создание интерфейсов с помощью PyQt.
Начнёте изучение возможностей модуля os для
работы с операционной системой.
Запрограммируете собственный класс DirList
загрузки и отображения списка картинок.
Обсуждение
рабочих задач
создать интерфейс приложения Easy Editor и
настроить загрузку картинок из произвольной
папки компьютера.

12.

Приложение Easy Editor. Ч. 1
Подтверждение
квалификации

13.

Продемонстрируй знание
Подтверждение
квалификации
областей видимости и
элементов интерфейса

14.

Какие форматы графических файлов вы
знаете?
Подтверждение
квалификации
Чем формат файла отличается от
расширения?

15.

Форматы графических файлов:
❏
❏
❏
❏
❏
JPG.
PNG.
BMP.
SVG.
EPS.
filename
abc
Название
Расширение
ИМЯ ФАЙЛА
Подтверждение
квалификации
и другие.

16.

Подтверждение
квалификации
Покажите и назовите все виджеты,
которые есть на изображении:

17.

Названия виджетов:
Статичная надпись/картинка —
QLabel
Окно приложения —
QWidget
Подтверждение
квалификации
Cписок с
возможностью
выбора
элементов —
QListWidget
Кнопка — QPushButton

18.

Как создать пустое окно приложения?
Подтверждение
квалификации
Назовите нужные модули и команды PyQt5.
Если затрудняетесь, воспользуйтесь теоретической документацией!

19.

Создание пустого окна приложения:
from PyQt5.QtWidgets import QApplication, QWidget
app = QApplication([])
main_win = QWidget()
main_win.setWindowTitle('Пустое окно')
app.exec_()
Подтверждение
квалификации
main_win.show()

20.

Подтверждение
квалификации
Как создать и разместить в пустом окне
виджеты как на картинке?
Если затрудняетесь, воспользуйтесь теоретической документацией!

21.

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QLabel, QVBoxLayout, QHBoxLayout
from PyQt5.QtCore import Qt
app = QApplication([])
main_win = QWidget()
main_win.resize(300, 200)
main_win.setWindowTitle('Верю - не верю')
statement = QLabel('Млекопитающие с самыми большими ушами — слоны!')
btn_yes = QPushButton('Да')
line1 = QHBoxLayout()
line2 = QHBoxLayout()
line1.addWidget(statement, alignment = Qt.AlignCenter)
line2.addWidget(btn_yes)
line2.addWidget(btn_no)
line3 = QVBoxLayout()
line3.addLayout(line1)
line3.addLayout(line2)
main_win.setLayout(line3)
main_win.show()
app.exec_()
Подтверждение
квалификации
btn_no = QPushButton('Нет')

22.

Что такое глобальная переменная?
Подтверждение
квалификации
Как её создать?

23.

Глобальная переменная —
Локальная переменная —
Глобальная переменная
переменная, которая
объявляется и использует только
внутри функций.
объявляется в основной части
программы. Её значение можно
получать и изменять из любой части
программы.
def setName(name, format):
filename = ''
filename = name + '.' + format
return filename
def setName(name, format):
global filename
filename = name + '.' + format
filename = setName(name, format)
setName('pic', 'jpg')
print(filename)
print(filename)
Подтверждение
квалификации
это переменная, которая видна (доступна) из любой части
программы.

24.

Квалификация подтверждена!
Подтверждение
квалификации
Отлично, вы готовы к «мозговому штурму»
и реализации рабочей задачи!

25.

Приложение Easy Editor. Ч. 1
«Мозговой штурм»:
Интерфейс
Easy Editor

26.

Список картинок запрограммируем позднее.
Вместо графического файла из списка пока сделаем надпись «Картинка».
«Мозговой
штурм»
Внимательно рассмотрим интерфейс

27.

Как запрограммировать такой интерфейс?
Как разместить виджеты по лэйаутам?
«Мозговой
штурм»
Внимательно рассмотрим интерфейс

28.

Размещение виджетов
2
1
3
«Мозговой
штурм»
4

29.

Создание интерфейса
from PyQt5.QtWidgets import
Нужные модули PyQt
app = QApplication([])
win = QWidget()
btn_dir = QPushButton("Папка")
И другие элементы интерфейса
Создание виджетов
win.resize(700, 400)
И другие свойства элементов
И другие лэйауты
Размещение в лэйаутах
col1.addWidget(btn_dir)
Размещение виджетов в лэйаутах
win.setLayout(row)
win.show()
app.exec()
Размещение в лэйаутах
«Мозговой
штурм»
row = QHBoxLayout()

30.

Ваша задача:
Запрограммировать интерфейс приложения Easy Editor.
Необходимые параметры есть в техническом задании.
«Мозговой
штурм»
Если необходимо, используйте техническую документацию
прошлых рабочих дней.
Костя,
старший разработчик

31.

Приложение Easy Editor. Ч. 1
VS Code:
Приложение
Easy Editor

32.

Выполните задачу 1 в VS Code
«Приложение Easy Editor»
Работаем на
платформе
Visual Studio Code

33.

Приложение Easy Editor. Ч. 1
«Мозговой штурм»:
Загрузка списка
графических файлов

34.

«Мозговой
штурм»
Как отобразить названия картинок из папки
компьютера в интерфейсе приложения?

35.

Как отобразить названия картинок из папки
компьютера в интерфейсе приложения?
Пользователь
Компьютер
Пользователь нажимает
кнопку «Папка»
Какие действия
должен выполнить
компьютер?
«Мозговой
штурм»
Пользователь выбирает
папку с файлами
Пользователь видит список
названий файлов

36.

Как отобразить названия картинок из папки
компьютера в интерфейсе приложения?
Пользователь
Компьютер
Пользователь нажимает
кнопку «Папка»
Пользователь выбирает
папку с файлами
Загрузить в программу
все файлы из папки
Отобрать графические файлы
Пользователь видит список
названий файлов
Отобразить графические файлы
в виджете-списке
«Мозговой
штурм»
Открыть окно выбора папки

37.

Необходимый функционал
1
Окно-виджет PyQt: QFileDialog
Открыть окно выбора папки
2
Модуль os: функция listdir()
Загрузить (в программу)
названия всех файлов из папки
3
Собственная функция filter(),
отбирающая файлы
Отобрать графические файлы
Отобразить графические файлы
в виджете-списке
«Мозговой
штурм»
Разработчик Костя предложил список необходимого функционала.
Некоторые команды нужно изучить перед началом работы.

38.

1. Выбор рабочей папки для работы
Воспользуемся новым виджетом библиотеки PyQt5 — QFileDialog.
С его помощью вызывается окно выбора папки («Проводник» или Finder)
PyQt5:
from PyQt5.QtWidgets import QFileDialog
workdir =
QFileDialog.getExistingDirectory()
Назначение
Подключение виджета
Получение пути к
выбранной папке из окна
QFileDialog
«Мозговой
штурм»
Команда

39.

1. Выбор рабочей папки для работы
Воспользуемся новым виджетом библиотеки PyQt5 — QFileDialog.
С его помощью вызывается окно выбора папки («Проводник» или Finder)
PyQt5:
from PyQt5.QtWidgets import QFileDialog
workdir =
QFileDialog.getExistingDirectory()
Назначение
Подключение виджета
Получение пути к
выбранной папке из окна
QFileDialog
Путь к папке — это последовательность из имён папок (директорий) и
дополнительных символов, задающая маршрут к папке.
Пример: С:\User\Sasha\School\IT — путь к папке «IT»
«Мозговой
штурм»
Команда

40.

1. Выбор рабочей папки для работы
Воспользуемся новым виджетом библиотеки PyQt5 — QFileDialog.
С его помощью вызывается окно выбора папки («Проводник» или Finder)
PyQt5:
from PyQt5.QtWidgets import QFileDialog
workdir =
QFileDialog.getExistingDirectory()
Назначение
Подключение виджета
Получение пути к
выбранной папке из окна
QFileDialog
Задавать такие пути вручную нам не нужно. За нас это сделает Python.
Пример: С:\User\Sasha\School\IT — путь к папке «IT»
«Мозговой
штурм»
Команда

41.

2. Получить из папки и загрузить в
программу названия всех файлов
Воспользуемся модулем os стандартной библиотеки Python.
«Мозговой
штурм»
Из множества функций os мы будем использовать команды для
обращения к файлам и папкам по пути.

42.

Модуль os
находится в стандартной библиотеке Python и содержит
функции для работы с операционной системой.
os:
Команда
Назначение
files = os.listdir(workdir)
Путь к папке получен на
прошлом шаге работы
Получение файлов из
папки (аргумент — путь)
«Мозговой
штурм»
Подключение модуля os
import os

43.

Модуль os
находится в стандартной библиотеке Python и содержит
функции для работы с операционной системой.
os:
Команда
files = os.listdir(workdir)
‘robotics_article.doc’
‘turtles game.py’
‘vacation2020.jpg’
‘crazy_cat.gif’
Подключение модуля os
Получение файлов из
папки (аргумент — путь)
Загрузились имена
разных видов файлов.
Нужно оставить только
графические файлы.
«Мозговой
штурм»
import os
Назначение

44.

3. Отбор графических файлов
Выберем файлы только с графическими расширениями.
Все допустимые расширения удобно разместить в списке extensions.
Список extensions
расширений
графических
файлов
Функция, отбирающая
из files файлы с
расширениями из
extensions
Список result
имён графических
файлов в папке
workdir
«Мозговой
штурм»
Список files
всех имён файлов
в папке workdir

45.

3. Отбор графических файлов
Проверим, какие имена файлов имеют расширения
графических файлов (.jpg, .png и др.)
def filter(files, extensions):
❏ Создать пустой список result для имён файлов.
❏ Для каждого имени файла из списка files:
❏ Если имя заканчивается на это расширение,
то добавить его в список results.
❏ Вернуть список result.
«Мозговой
штурм»
❏ И каждого расширения из списка extensions:

46.

3. Отбор графических файлов
Проверим, какие имена файлов имеют расширения
графических файлов (.jpg, .png и др.)
def filter(files, extensions):
❏ Создать пустой список result для имён файлов.
❏ Для каждого имени файла из списка files:
if filename.endswith(extension):
result.append(filename)
❏ Вернуть список result.
Метод endswith(<строка>).
Вернёт True, если имя
файла оканчивается на
extension и False — если
нет.
«Мозговой
штурм»
❏ И каждого расширения из списка extensions:

47.

4. Отображение списка имён в виджете
Аналогичную задачу мы уже реализовывали для проекта
«Умные заметки» (для списка названий заметок)
def showFilenamesList():
❏ Выбираем рабочую папку (workdir).
❏ Загружаем имена файлов папки и оставляем только с
расширениями extensions.
❏ Очищаем виджет-список (на случай, если там остались имена
файлов другой папки).
❏ По одному добавляем в виджет отобранные имена файлов.
«Мозговой
штурм»
❏ Задаём список допустимых расширений.

48.

Введём фрагменты кода в программу:
import os
from PyQt5.QtWidgets import QFileDialog
Подключение остальных объектов PyQt и создание интерфейса
def chooseWorkdir():
Функция выбора рабочей папки
def filter(files, extensions):
Функция отбора имён файлов по расширениям
def showFilenamesList():
Функция-обработчик нажатия на кнопку «Папка».
Отвечает за выбор папки, отбор файлов и отображение их в виджете.
Использует chooseWorkdir() и filter()
btn_dir.clicked.connect(showFilenamesList)

49.

Введём фрагменты кода в программу:
Замечание:
import os
from PyQt5.QtWidgets import QFileDialog
Подключение остальных объектов PyQt и создание интерфейса
def chooseWorkdir():
Функция выбора рабочей папки
def filter(files, extensions):
Функция отбора имён файлов по расширениям
Для работы понадобится не
только список файлов (есть в
виджете), но и рабочая
папка.
Сейчас имя папки удаляется
после завершения работы
showFilenamesList()
Чтобы сохранить папку,
определим её как
глобальную переменную.
def showFilenamesList():
Функция-обработчик нажатия на кнопку «Папка».
workdir = ''
Отвечает за выбор папки, отбор файлов и отображение их в виджете.
def chooseWorkdir():
Использует chooseWorkdir() и filter()
global workdir
workdir = QFileDialog...
btn_dir.clicked.connect(showFilenamesList)

50.

import os
from PyQt5.QtWidgets import QFileDialog
Подключение остальных объектов PyQt и создание интерфейса
workdir = '' #вводим глобальную переменную
def chooseWorkdir():
global workdir #обращаемся к глобальной переменной
workdir = QFileDialog.getExistingDirectory()
def filter(files, extensions):
Функция отбора имён файлов по расширениям
def showFilenamesList():
Функция-обработчик нажатия на кнопку «Папка».
Отвечает за выбор папки, отбор файлов и отображение их в виджете.
Использует chooseWorkdir() и filter()
btn_dir.clicked.connect(showFilenamesList)
Командное слово global
показывает интерпретатору,
что результат нужно
сохранить именно в
глобальной переменной.

51.

Задача:
«Мозговой
штурм»
Написать функции для выбора рабочей директории и
отображения имён графических файлов из неё в виджете.

52.

Проект Easy Editor. Ч. 1
VS Code:
Приложение
Easy Editor

53.

Выполните задачу 2 в VS Code
«Приложение Easy Editor»
Работаем на
платформе
Visual Studio Code

54.

Приложение Easy Editor. Ч. 1
Завершение
рабочего дня

55.

Для завершения пройдите
техническое интервью:
2. Какая переменная называется глобальной? Почему
переменная workdir определена глобально?
Костя,
Алёна,
старший разработчик менеджер проектов
Подведение итогов
рабочего дня
1. Какой модуль содержит функции для работы с
операционной системой компьютера?

56.

Отличная работа!
Дорогие коллеги!
В следующий рабочий день мы продолжим
работу над приложением Easy Editor и с его
помощью обработаем первые фотографии!
Подведение итогов
рабочего дня
Вы отлично потрудились сегодня.