Модуль 4. Урок 3.

Додаток
Easy Editor. Частина 2

Методичка
Модуль 4. Урок 3. Додаток Easy Editor. Ч. 2

Обговорення:

Планування
роботи над проєктом
Продовжуємо працювати над замовленням!
Минулого разу до фахівців ProTeam звернувся представник міністерства
соціального розвитку.

Він готує пакет програм для людей похилого віку.

Одним із додатків має стати фоторедактор Easy Editor.

Виділимо робочі завдання на сьогодні!

робочих завдань
Обговорення
Олена,
менеджер проєктів
Загальне технічне завдання
Мета — запрограмувати додаток Easy Editor.
Очікуваний вид додатку:

робочих завдань
Обговорення
Плануємо роботу над проєктом
mind map проєкту:
Завантаження Вибір однієї Попередній
Створення Розміщення у
списку картинок або кількох для перегляд
віджетів леяутах
з папки редактури картинки

Обслуговування Розробка
списку картинок інтерфейсу

Фоторедактор

робочих завдань
Завдання на

Обговорення
сьогодні
Обробка картинок

Поворот Поворот Дзеркальне Навести Зберегти

Ч/б
праворуч праворуч відображення різкість результат
Попередній перегляд картинки
— складніше завдання, ніж може здатися.
❏ Зображення має адаптуватися до розміру вікна програми.
❏ При перемиканні між картинками прев'ю має змінюватися.
❏ Під час обробки має з'являтися прев'ю обробленої копії.

Завантаження Вибір однієї або Попередній

робочих завдань
списку картинок кількох для перегляд
з папки редактури картинки

Обговорення
Обслуговування
списку картинок

Фоторедактор
 Плануємо роботу над проєктом
Чек лист роботи згідно з mind map:
1. Створити інтерфейс програми.
2. Реалізувати завантаження картинок із бажаної папки.
3. Відобразити прев'ю зображення, вибраного зі списку.
4. Запрограмувати редагування фотографії:
● створення зміненої копії;
Сьогодні

робочих завдань
● показ прев'ю зміненої копії;

Обговорення
● збереження до підпапки Modified.
Мета робочого дня —
запрограмувати прев’ю картинок і взятися до їх обробки.

Сьогодні ви:

робочих завдань
● згадаєте роботу з об'єктами типу Image та модулем os.

Обговорення
● дізнаєтесь рішення нетривіальної задачі адаптації картинки під розміри
вікна програми.
● запрограмуєте відображення прев'ю картинок та обробите перше
зображення.
Модуль 4. Урок 3. Додаток Easy Editor. Ч. 2

Підтвердження
кваліфікації
Продемонструйте знання
роботи із зображеннями та
файлами комп'ютера.

Підтвердження
кваліфікації
Які формати графічних файлів ви знаєте?
Чим формат файлу відрізняється від розширення?

Підтвердження
кваліфікації
Формати графічних файлів:
❏ JPG-файл.
❏ PNG-файл.
❏ BMP-файл.
❏ SVG-файл.
❏ EPS-файл.
та інші.

filename abc

Підтвердження
кваліфікації
Назва Розширення

ІМ’Я ФАЙЛУ
Що таке шлях до папки? Шлях до файлу?
Яким буде значення змінної
workdir після виконання програми?

workdir = ''
def chooseWorkdir():

Підтвердження
global workdir

кваліфікації
workdir = QFileDialog.getExistingDirectory()
btn_dir.clicked.connect(chooseWorkdir)
Шлях до папки
— це послідовність з імен папок та додаткових символів, що задає маршрут
до папки.

Шлях до файлу
— це послідовність з імен папок, символів та імені шуканого файлу, що
задає маршрут до файлу.

С:\User\Sasha\School\IT — шлях до папки «IT»

Підтвердження
С:\User\Sasha\School\IT\project.py — шлях до файлу project.py в папці «IT»

кваліфікації
Шлях до папки
— це послідовність з імен папок та додаткових символів, що задає маршрут
до папки.

Шлях до файлу
— це послідовність з імен папок, символів та імені шуканого файлу, що
задає маршрут до файлу.

workdir = ''
def chooseWorkdir():

Підтвердження
global workdir

кваліфікації
workdir = QFileDialog.getExistingDirectory()
btn_dir.clicked.connect(chooseWorkdir)

Значення workdir — шлях до обраної папки.

Навіщо потрібний модуль os?
Яку функцію з os ви знаєте?

Підтвердження
кваліфікації
Модуль os
знаходиться у стандартній бібліотеці Python та містить функції для
роботи з операційною системою.

Команда Призначення

import os Підключення модуля os

Отримання списку імен файлів із

files = os.listdir(<папка>) зазначеної папки

Підтвердження
кваліфікації
У бібліотеці PIL є два модулі:
Image та ImageFilter.
Навіщо потрібен кожен із них?

Підтвердження
кваліфікації
Python Imaging Library (PIL) —
це бібліотека для роботи з растровою графікою

Бібліотека PIL має ієрархічну структуру.

Нам знадобляться два модулі з основи структури: Image та ImageFilter.

Image ImageFilter ...

Клас Image:
властивості та методи
роботи з картинкою як із
файлом
Підтвердження
кваліфікації
Модуль ImageFilter:
набір констант для накладання
фільтрів, повороту та
відображення картинки
Як відкрити зображення та створити об'єкт типу
Image?
Як зберегти зображення?

Підтвердження
кваліфікації
Відкрити та зберегти зображення
Команда Призначення

from PIL import Image З бібліотеки PIL підключити модуль

Image

cur_image = Image.open('photo.jpg') Відкрити графічний файл із папки

проєкту

Відкрити зображення, розташоване по

cur_image = Image.open(<повний шлях>)
заданому шляху

Підтвердження
cur_image.save('new_photo.jpg') Зберегти зображення у папці проєкту

кваліфікації
Зберегти зображення у довільному
cur_image.save(<повний шлях>)
місці комп'ютера
Кваліфікацію підтверджено!
Відмінно, ви готові до «мозкового штурму» та
реалізації робочого завдання!

Підтвердження квалификации
Модуль 4. Урок 3. Додаток Easy Editor. Ч. 2

«Мозковий штурм»:

Клас
ImageProcessor
Робочі завдання
Запрограмуємо клас ImageProcessor.
З його допомогою будемо:

- завантажувати фотографії із довільної папки;

- відображати прев'ю фотографії (і оригіналу, і обробленої);
- опрацьовувати фотографії;
- зберігати результат у папці Modified вибраної папки.

«Мозковий
штурм»
Mind map класу:
Повний шлях до
робочої папки Поточне зображення
(об'єкт Image)

Ім'я файлу
Конструктор
поточної картинки

Ім'я підпапки для

збереження фотографій

Клас ImageProcessor Завантажити картинку з

робочої папки

«Мозковий
Показати попередній
перегляд обраної картинки

штурм»
Методи
Зробити картинку чорно-
білою

Зберегти картинку у вибрану

підпапку
Очікуваний результат
Після реалізації методів завантаження та відображення картинки.

«Мозковий
штурм»
Клас ImageProcessor: поточні завдання
class ImageProcessor():
❏ поточне зображення (за
Екземпляр можна створити
замовчуванням None);

конструктор
відразу після відображення імен
❏ поточне ім'я файлу (за замовчуванням файлів папки.
None);
❏ ім'я підпапки для збереження
змінених картинок;

Потрібно вивчення нових

функцій з os для звернення до
❏ завантаження картинки з папки за

«Мозковий
картинки за повним шляхом.
вибраним ім'ям у списку картинок.

штурм»
методи
❏ відображення поточного зображення Майстер-клас від розробника
у вікні програми Кості!
1. Метод loadImage() — завантаження зображення
Як завантажити зображення з робочої папки, якщо відомо ім'я файлу?

def loadImage(self, filename):

Збережемо filename у властивості filename
екземпляра класу ImageProcessor

Зі шляху до робочої папки та імені файлу Скористайтеся новою

сформуємо шлях до картинки функцією з модуля os.

Відкриємо картинку (об'єкт Image),

«Мозковий
звернувшись за повним шляхом

штурм»
Збережемо отриманий об'єкт Image як
image екземпляра ImageProcessor
Модуль os: функція join()
Команда Призначення

import os Підключення модуля os

file_path = os.path.join(workdir, filename) Отримання повного шляху до

файлу об'єднанням шляху до
папки та імені файлу

Шлях до робочої папки

С:\User\Granny\Vacation2020
Результат роботи join()

«Мозковий
С:\User\Granny\Vacation2020\puppies.jpg

штурм»
Ім'я потрібного файлу

puppies.jpg
1. Метод loadImage() — завантаження зображення
Як завантажити зображення з робочої папки, якщо відомо ім'я файлу?

def loadImage(self, filename):

self.filename = filename
image_path = os.path.join(workdir, filename)
self.image = Image.open(image_path)

«Мозковий
штурм»
2. Метод showImage() — показати зображення
Показати картинку у вікні не так просто, як здається.
Цей складний трюк продемонструє розробник Костя.

Примітка.

«Мозковий
Завантаження зображення, що відображається, реалізуємо через
звернення до файлу за повним шляхом.

штурм»
Повний шлях може змінюватись в залежності від того, яку картинку
ми показуємо: оригінал або оброблену.
2. Метод showImage() — показати зображення
Показати картинку у вікні не так просто, як здається.
Цей складний трюк продемонструє розробник Костя.

def showImage(self, path):

Приховаємо віджет на час
lb_image.hide() «технічних робіт».

«Мозковий
штурм»
lb_image.show() Відобразимо змінений віджет.
2. Метод showImage() — показати зображення
Показати картинку у вікні не так просто, як здається.
Цей складний трюк продемонструє розробник Костя.

def showImage(self, path):

lb_image.hide() Повним шляхом до файлу створюємо
об'єкт QPixmap спеціально для
pixmapimage = QPixmap(path) відображення графіки в інтерфейсі.

«Мозковий
штурм»
lb_image.show()
2. Метод showImage() — показати зображення
Показати картинку у вікні не так просто, як здається.
Цей складний трюк продемонструє розробник Костя.

def showImage(self, path): Дізнаємося розміри поля для

lb_image.hide() розміщення картинки.

pixmapimage = QPixmap(path)
w, h = lb_image.width(), lb_image.height()

«Мозковий
штурм»
lb_image.show()
2. Метод showImage() — показати зображення
Показати картинку у вікні не так просто, як здається.
Цей складний трюк продемонструє розробник Костя.

def showImage(self, path):

lb_image.hide() Адаптуємо картинку
під розміри поля.
pixmapimage = QPixmap(path)
w, h = lb_image.width(), lb_image.height()
pixmapimage = pixmapimage.scaled(w, h, Qt.KeepAspectRatio)

«Мозковий
штурм»
lb_image.show()
2. Метод showImage() — показати зображення
Показати картинку у вікні не так просто, як здається.
Цей складний трюк продемонструє розробник Костя.

def showImage(self, path):

lb_image.hide()
pixmapimage = QPixmap(path)
w, h = lb_image.width(), lb_image.height()
pixmapimage = pixmapimage.scaled(w, h, Qt.KeepAspectRatio)

«Мозковий
lb_image.setPixmap(pixmapimage) Розміщуємо картинку

штурм»
lb_image.show() у віджеті lb_image.
2. Метод showImage() — показати зображення
Показати картинку у вікні не так просто, як здається.
Цей складний трюк продемонструє розробник Костя.

def showImage(self, path):

lb_image.hide()
pixmapimage = QPixmap(path)
w, h = lb_image.width(), lb_image.height()
pixmapimage = pixmapimage.scaled(w, h, Qt.KeepAspectRatio)

«Мозковий
lb_image.setPixmap(pixmapimage)

штурм»
lb_image.show()
Готово!
Відображаємо віджет!
3. Функція showChosenImage()
Щоб застосувати написаний функціонал у програмі, створимо функцію-
обробник натискання по елементу списку імен картинок.
Методи роботи з віджетом-списком вже знайомі вам за проєктом «Розумні
нотатки».

«Мозковий
штурм»
3. Функція showChosenImage()
Щоб застосувати написаний функціонал у програмі, створимо функцію-обробник
натискання по елементу списку імен картинок.

Так Вибрано елемент Ні

списку lw_files?

filename = вибраний рядок

віджету-списку

Завантажуємо картинку
методом loadImage()

«Мозковий
Формуємо шлях для
відображення картинки

штурм»
Відображаємо картинку
методом showImage()
3. Функція showChosenImage()
Щоб застосувати написаний функціонал у програмі, створимо функцію-обробник
натискання по елементу списку імен картинок.

def showChosenImage():
if lw_files.currentRow() >= 0:
filename = lw_files.currentItem().text()
workimage.loadImage(filename)
image_path = os.path.join(workdir, workimage.filename)
workimage.showImage(image_path)

«Мозковий
штурм»
lw_files.currentRowChanged.connect(showChosenImage)

Змінені зображення будуть лежати в іншій папці, тому для їх відображення буде
потрібний інший шлях.
Впроваджуємо рішення у проєкт:
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPixmap
Реалізовано
Описані елементи інтерфейсу
минулого разу.

workdir = ''
Читання та відображення імен файлів

class ImageProcessor(): Опис класу ImageProcessor

та
Опис класу
створення екземпляра
класу.

«Мозковий
workimage = ImageProcessor()

штурм»
Застосовуємо методи
def showChosenImage():
ImageProcessor для
Тіло функції
відображення прев'ю
картинки.
lw_files.currentRowChanged.connect(showChosenImage)
Ваше завдання:
Запрограмувати відображення прев'ю картинки.
Напишіть частину класу ImageProcessor. Використовуйте методи класу для відображення
прев'ю картинки функцією-обробником.

«Мозковий
штурм»
Костя,
старший розробник
Модуль 4. Урок 3. Додаток Easy Editor. Ч. 2

VS Code:

Додаток
Easy Editor
Виконайте завдання 3 в VS Code
«Додаток Easy Editor»

Visual Studio Code

Працюємо на
платформі
Перерва
Модуль 4. Урок 3. Додаток Easy Editor. Ч. 2

«Мозковий штурм»:

Клас
ImageProcessor
Переходимо до довгоочікуваної
обробки зображень!
До речі, ви вже виконували схоже завдання у тренувальній програмі
із класом ImageEditor!

Розберемо процес обробки з прикладу накладання чорно-білого

фільтра.

«Мозковий
штурм»
Очікуваний результат
При натисканні на "Ч/б" картинка стає чорно-білою.
Оброблена копія зберігається у підпапку Modified робочої папки.

«Мозковий
штурм»
Клас ImageProcessor потрібно
доповнити методами:
➔ do_bw() — метод, що накладає на картинку чорно-білий фільтр.
➔ saveImage() — метод, який зберігає змінену картинку Image в підпапку
Modified.

«Мозковий
штурм»
1. Метод do_bw() — зробити ч/б
def do_bw(self):
Обробляємо поточну картинку
вбудованим методом convert()

Зберегти змінений об'єкт Image як файл Програмуємо на цьому ж

методом save() етапі робочого дня

Формуємо шлях для відображення

зміненої картинки

«Мозковий
штурм»
Відображаємо змінену картинку
методом showImage()
1. Метод do_bw() — зробити ч/б
def do_bw(self):
self.image = self.image.convert("L")
self.saveImage()
image_path = os.path.join(workdir, self.save_dir, self.filename)
self.showImage(image_path)

«Мозковий
штурм»
2. Метод saveImage() — зберегти картинку

def saveImage(self):
Формуємо шлях до папки
для збереження

Так Якщо цей шлях не існує? Ні

(Папки для збереження ще
немає?)
За сформованим шляхом
створити нову папку

«Мозковий
штурм»
Формуємо шлях до картинки, що
зберігається (з ім'ям файлу картинки!)

Зберігаємо картинку вбудованим

методом класу Image
2. Метод saveImage() — зберегти картинку

def saveImage(self):
Формуємо шлях до папки Потрібно вивчити
для збереження нові команди os

Так Якщо цей шлях не існує? Ні

(Папки для збереження ще
немає?)
За сформованим шляхом
створити нову папку

«Мозковий
штурм»
Формуємо шлях до картинки, що
зберігається (з ім'ям файлу картинки!)

Зберігаємо картинку вбудованим

методом класу Image
Модуль os — нові команди
Команда Призначення

import os Підключити модуль os

os.mkdir(path) Створити за вказаним шляхом

нову папку (назва створюваної
папки - частина шляху!)

os.path.exists(path) Перевірити, чи вже існує щось за

цим шляхом (наприклад, папка)
os.path.isdir(path)

«Мозковий
штурм»
2. Метод saveImage() — зберегти картинку

def saveImage(self):
''' зберігає копію файлу в підпапці '''
path = os.path.join(workdir, self.save_dir)
if not(os.path.exists(path) or os.path.isdir(path)):
os.mkdir(path)
image_path = os.path.join(path, self.filename)
self.image.save(image_path)

«Мозковий
штурм»
Впроваджуємо рішення у проєкт:
Описані елементи інтерфейсу

Читання та відображення імен файлів

class ImageProcessor():
Опис класу
Додаємо нові методи
Метод saveImage()
обробки та збереження
Метод do_bw() картинки.

workimage = ImageProcessor()

«Мозковий
def showChosenImage():

штурм»
Тіло функції

lw_files.currentRowChanged.connect(showChosenImage)
Обробляємо натискання на
btn_bw.clicked.connect(workimage.do_bw) "Ч/б" методом do_bw().
Завдання:
Доповнити клас ImageProcessor методами do_bw() та saveImage().
Обробити зображення за допомогою натискання на кнопку «Ч/б».

«Мозковий
штурм»
Модуль 4. Урок 3. проєкт Easy Editor. Ч. 2

VS Code:

Додаток
Easy Editor
Виконайте завдання 4 в VS Code
«Додаток Easy Editor»

Visual Studio Code

Працюємо на
платформі
Модуль 4. Урок 3. Додаток Easy Editor. Ч. 2

Завершення
робочого дня
Для завершення пройдіть
технічне інтерв'ю:
1. Яким є призначення класу ImageProcessor?
Якими методами він може бути доповнений наступного разу

2. З чого складається шлях до файлу?

Які нові можливості модуля OS ви вивчили?

Підведення підсумків
робочого дня
Костя, Олена,
старший розробник менеджер проєктів
Відмінна робота!
Дорогі колеги!
Ви добре попрацювали сьогодні.
Наступного робочого дня ми завершимо роботу над
додатком Easy Editor і запрограмуємо фільтри, що
залишилися!

Підведення підсумків
робочого дня