Картинки к сообщениям об изменениях от Бота

llirrikk commented 2 years ago

Дополнение к уведомлениям об изменениях в категориях Оценки и Новости

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

Пример с разделом оценок

📗 А/П.1 по «Электроника» Изменён балл за контрольное мероприятие: 0 —> 15 (из 20) (+ 15)

Общая сумма баллов: 30 из 40

grade_example

Пример с разделом новостей

📰 Выбор элективных и факультативных дисциплин на 1 семестр 2022-2023 уч.г.

Опубликована новость, подробности по ссылке: https://orioks.miet.ru/main/view-news?id=474

news_example

Готовые фоны для сообщений

Спасибо, @marplyn

Шрифт: PT Sans Caption Bold
Размер: верхний — 18 пт (24 px), нижний — 16 пт (22 px) (либо -1 в каждом соответственно)
Цвет: верхний — #FFFFFF (255, 255, 255), нижний — #C6F1FF (198, 241, 255) QR для новостей: цвет #008CBA, размер 160x160 px

Фоны имеют разрешение 1500x750 px и соотношение сторон 2:1, поэтому есть возможность видеть картинку полностью, без необходимости её открытия на весь экран.

Раздел оценок

Цвета эмодзи взяты из ОРИОКС.

Если «двойка»: current_grade / max_grade < 50%
Если «тройка»: 50% <= current_grade / max_grade < 70%
Если «»четвёрка»: 70% <= current_grade / max_grade < 85%
Если «пятёрка»: 85% <= current_grade / max_grade

Раздел новостей

news_tag

Whom-m0rty commented 2 years ago

Всем привет. Учавствовать в разработке можно?)

llirrikk commented 2 years ago

Привет, конечно. Какие технологии предлагаешь использовать для этого issue? Ты из МИЭТ?

Whom-m0rty commented 2 years ago

Да, я из МИЭТа. Думаю, буду использовать Pillow для генерации картинок. На счет Qr ещё не гуглил.

В каком формате возвращать картинки, сразу в байтах? Или путь?

Whom-m0rty commented 2 years ago

Размеры шрифтов в Pillow не совпадают с размерами шрифтов в PhotoShop

font_upper = ImageFont.truetype('source/PTSansCaption-Bold.ttf', size=32)

Так же, мне необходимо узнать межстрочное расстояние, в примере я использовал 40 px.

Whom-m0rty commented 2 years ago

Так же, хотелось бы узнать, будет ли удобно отправлять в мою реализацию сразу готовые строки?

llirrikk commented 2 years ago

У варианта с Pillow есть некоторые проблемы:

Многострочный текст костыльными путями добавляется на картинку;
Если текст длинный (особенно актуально для категории с новостями), то опять же костыльными-непонятно какими способами его нужно правильно масштабировать, чтобы он не вылезал за края экрана;
При использовании pillow, он блокирует ход выполнения программы, потому что нет поддержки асинхронности. Но, думаю, это не критично, поскольку ОРИОКС еле дышит и без Бота. А если попытаться ускорить запросы, то ОРИОКС вовсе умрёт и не встанет никогда. Поэтому задержки скрипта идут нам на руку.

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

llirrikk commented 2 years ago

В каком формате возвращать картинки, сразу в байтах? Или путь?

Думаю лучший вариант — это возвращать в байтах. Потому что в любом случае эта картинка нужна только для одноразовой отправки и нет необходимости её хранения на сервере. Вероятно для отправки будет использовано это: https://docs.aiogram.dev/en/dev-3.x/api/upload_file.html#upload-from-buffer

llirrikk commented 2 years ago

Так же, хотелось бы узнать, будет ли удобно отправлять в мою реализацию сразу готовые строки?

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

marplyn commented 2 years ago

Размеры шрифтов в Pillow не совпадают с размерами шрифтов в PhotoShop

font_upper = ImageFont.truetype('source/PTSansCaption-Bold.ttf', size=32)

Кегль: верхний — 75 px, нижний — 66 px

Так же, мне необходимо узнать межстрочное расстояние, в примере я использовал 40 px.

Интерлиньяж: верхний — 80 px, нижний — 70 px

Должно работать и при длинных названиях с переносами, в разных вариациях с ориентацией по центру изображения, с минимальными вертикальными полями около 230 px, горизонтальными около 150 px.

Конечно, размеры даны в базовом соотношении такими, какими использовались при верстке, их можно изменить исходя из текстового содержания.

Whom-m0rty commented 2 years ago

Посмотрел я на это все, принял решение переписать с Pillow на HTML

Whom-m0rty commented 2 years ago

В размеры снова не получилось попасть, я очень плох в html... Надеюсь, это не проблема. Сейчас напишу обертку этого веселья.

Кстати время исполнения достаточно долгое, потому что HTML рендерится в картинку. Есть другой способ скормить HTML телеграму?

llirrikk commented 2 years ago

Да размеры необязательно pixel perfect делать. На глаз можно :) Время исполнения - это действительно проблема, но зато появляется больше возможностей. Надо как-то выбрать, что важнее в данной задаче: время исполнения или гибкость настройки. Если тебе как-то удастся поработить многострочные/длинные тексты с Pillow, то можно и не использовать идею с html шаблонами. Других способов преобразовать текст в картинку я не знаю. Короче, четкого ТЗ от меня нет, делай как считаешь нужным, а я потом подстрою

скормить HTML телеграму

так это же надо в картинку скармливать, а в телеграм. Если ты про https://instantview.telegram.org/, то это же для статей в первую очередь

Whom-m0rty commented 2 years ago

После гнева, торга, депрессии, бутылки бренди и наконец смирения, я решил сделать перенос текста с помощью Pillow.

Вопрос таков:

Центровать строку после переноса?

marplyn commented 2 years ago

Вопрос таков:

Центровать строку после переноса?

Да! :)

llirrikk commented 2 years ago

После гнева, торга, депрессии, бутылки бренди и наконец смирения

это ты еще сервер ОРИОКС не ложил всего двумя запросами в одну секунду

marplyn commented 2 years ago

true story

llirrikk commented 2 years ago

Вопрос таков:

Центровать строку после переноса?

у drawer = ImageDraw.Draw(image) в методе multiline_text есть параметр align='center', который делает это автоматически

Whom-m0rty commented 2 years ago

Вот что у меня получилось:

Работает быстрее чем рендер HTML, хоть я и не засекал.

Whom-m0rty commented 2 years ago

Переходить к рефактору? Или что-то поправить нужно?

llirrikk commented 2 years ago

Выглядит красиво, но

Когда + 15 при 20 макс., это должно входить в зону "четверки", потому что 15/20 = 0,75 < 0,85. Или если ты принимаешь в функцию текст и фон, то вопросов нет: это уже моя будет задача передавать правильный фон;
Шрифты заголовка и текста под заголовком нужно сделать немного больше

Сделай, пожалуйста, второй пункт, затем пришли результат, и тогда наверное можно будет переходить к рефакторингу

Whom-m0rty commented 2 years ago

Когда + 15 при 20 макс., это должно входить в зону "четверки", потому что 15/20 = 0,75 < 0,85. Или если ты принимаешь в функцию текст и фон, то вопросов нет: это уже моя будет задача передавать правильный фон;