Каждый Новый год мы с друзьями ходим в баню

Каждый квартал я генерю схему «Тысячи пассажиров метро». За 2 с лишним года процесс упростился от кропотливой ручной работы (иногда с калькулятором) до запуска 2 скриптов. Решил написать об эволюции процесса. Про изменения самой схемы (то есть дизайн) тут не будет.

2021 год. Первые появившиеся данные я скачивал в Экселе в виндовой кодировке, конвертировал кодировку с ручной правкой некоторых станций. Названия пишутся в «их» системе неграмотно: заглавные буквы не соблюдаются, буквы «ё» где-то есть, где-то нет. А у Савёловской вообще: на серой линии буква «ё», а на БКЛ — «е». Но это всё просто исправлялось единожды. Потом из Экселя выгружал нужный мне джейсон для Иллюстратора. Про весь этот процесс можно прочитать пост на сайте.

2022 год. Начал качать данные с сайта Москвы в джейсоне и промежуточным скриптом конвертировал «их» данные в свои. Ручные правки остались только в Иллюстраторе: двигал сгенерированные кружочки, потому что данные рисовались на точках станций, а не на некотором расстоянии друг от друга.

2023 год. Теперь я только запускаю 2 скрипта: скачать данные о пассажиропотоке и нарисовать в Иллюстраторе.

Первый скрипт — серверный, с доступом по апи к данным Москвы. Он скачивает нужный квартал в базу данных на сайте metrostat.ru. А мой сайт уже знает всё о станциях и линиях метро, и может посчитать тысячи пассажиров с учётом дат открытия и закрытия станций. Например, на сайте Москвы хранятся данные суммарно за весь квартал, а новые станции БКЛ работали только с открытия в марте. Поэтому надо делить не на 90 дней, а на нужное число дней. Тоже самое с открывающимися после ремонта станциями. Данные по кроссплатформенным станциям тоже учитываются. Клик — и квартальные количества по входу и выходу превращаются в готовый джейсон с суммарными тысячами для запуска в Иллюстраторе.

Каждый Новый год мы с друзьями ходим в баню

Продолжение.

Второй скрипт — в Иллюстраторе рисует на местах предыдущих кружочков станций новые кружочки и цифры. Двигать кружочки теперь тоже не надо. Клик — и готово. Из ручных операций в Иллюстраторе остались только кроссплатформенные кружочки, которые я стал делить пополам.

Конечно, после каждой генерации надо руками подтюнить позиции окружностей. Без этого никуда.

Теперь самым долгим процессом стало сохранение схемы в 4 файла: растры разных размеров и пдф (после каждой найденной ошибки 😞). Решил в следующую итерацию сделать это тоже скриптом: экспортировать 4 файла и отправить их через апишку на сайт я могу с помощью экстеншена прямо из Иллюстратора. Апишка на сайте metrostat.ru уже есть. Так что буду ещё упрощать процесс.

И в планах — сделать свг на сайте и добавить на сайт другие города. Если есть какие предложения ещё, пишите. Подумаем.

ps: кстати, эту схему и сайт я делаю без финансирования (а то меня тут спросили про госденьги). Исключительно на энтузиазме. В подвале сайта metrostat.ru есть ссылочка, по которой можно задонатить.

Программирование внутри Адоба — это качели

На этой неделе я научился работать с масками в Иллюстраторе: заходить внутрь, доставать оттуда объекты, менять форму маски и даже делать маску несколькими формами. Хотя на протяжении нескольких лет думал, что в Иллюстраторе нельзя нормально работать с ними, и если надо было что-то сделать, то разрушал маску, производил манипуляции и потом снова создавал маску. Такой маскарад был 👺. Но такие задачи редко попадались.

И вот я вдохновлённый решением, наконец, давней проблемы сел программировать. Думаю «может действительно всё можно делать в Иллюстраторе? и это я просто плохо читаю документацию?».

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

Открываю «документацию», нахожу свойство документа

Document.tags

и метод

tags.add()

. Всё просто!

Но нет: оказывается, это теги не документа, а только всех объектов документа. И добавить теги самому документу нельзя. Хотя, например,

Document.textFrames.add()

отлично срабатывает и создаёт на дефолтном месте новый текст.

Уверен на 100%, что разработчикам (прости господи) скриптов Иллюстратора просто было лень делать отдельное свойство для тегов самого документа. В Индизайне, например, есть

Document.pageItems

— это элементы документа, и есть

Document.allPageItems

— это вообще все элементы, включая внутри групп.

И проблема эта кроется в отсутствии нормальной документации. Впрочем, не только нормальной, вообще документации. Можно сказать, что она существует только в виде списка объектов, их свойств и методов (не на сайте Адоба, естественно) и поиска ответов на вопросы на форуме Адоба (форум они сделать смогли).

И на этом форуме есть ответ, как сохранить информацию к документу: надо записать в его XMP-свойства (это который в File / File info...). 🤯 То есть надо открыть XML-файл Иллюстратора, пройтись по дереву и добавить нужную информацию в нужное место. И даже пример скрипта прилагают. Вот какой костылище!

Но на написание этого поста меня подтолкнула другая ситуация: Иллюстратор отказался выделять текст. Вот лежит на странице 10 текстов, 8 штук выделяет, а 2 не хочет. Если выводишь в лог свойства текста, всё есть: содержание, шрифт, позиция, не заблокирован. А выделять отказывается собака! Хоть ты тресни! Но это уже тема для другого поста.

Самое смешное, что на сайте Адоба эта проблема помечена как «Решено». 4 года назад

Или может быть это «Решено не делать»?

Когда осваиваешь новую технологию, мне кажется, это самое креативное время: заказов ещё нет, ответственности никакой. Сплошное исследование! Так у меня было и с экстеншенами в люстре и индюке.

Вот нашёл видео тетриса, который делал для Иллюстратора: открываешь панельку, нажимаешь «Старт» и погнали (на видео не финальная версия, но новее не нашёл). Adobe.Games назывался у меня экстеншен :-)

Если вы ещё не знаете, то Аффинити сейчас тоже работает над добавлением скриптов. На обложке они аккуратно пишут год «больше или равно» 2024, при этом как-то подозрительно перечёркивая красными полосочками скрипты :-)

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

Тема обсуждается тут с марта этого года:
https://forum.affinity.serif.com/index.php?/topic/64885-scripting/page/16/#comment-1067052

У Корела тоже есть скрипты (или макросы?), вроде тоже на JS можно писать и давно (но примеры на VBA). Сообщество на сайте запаролено и посмотреть примеры я не смог. Надо регистрироваться. Или там их можно только записывать, как экшены в Иллюстраторе — ничего не понятно.

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

Забыл приложить ссылку, которую нагуглил, где написано, как вроде можно всё-таки перевести в кривые с сохранением всего форматирования: https://creativepro.com/converting-text-to-outlines-the-right-way/

И там в комментах от 2023 года есть ссылки на способ перевода в кривые через сохранение в PDF

(но я не проверял ни один способ пока)

Всем привет! ⚡️⚡️⚡️

5-го декабря в Белграде буду выступать на YaTalks 2023 — главной конференции Яндекса для IT-сообщества — с докладом про автоматизацию дизайна.

Это моя первая конференция, надеюсь будет круто. 😎

Автоматизация полиграфического дизайна

Выступил на Yatalks.Yandex с докладом на любимую тему.

Рассказал, как перестать верстать в Адобе силами верстальщиков и переходить на веб-технологии, сохраняя все требования к макетам в PDF.

Показал, как мой JP-движок работает с текстом, чтобы PDF «выглядел точно как в Иллюстраторе» — лигатуры, кернинг, трекинг, кривые. Моментально и без ошибок. Как движок встраивается в JS-приложения: браузер, PDF-сервер, Google-данные, OSM.

Показал Autocráft — веб-сервис инфопланирования с автоматической вёрсткой макетов в Adobe InDesign или прямо в браузере. Как это решение позволяет разделить работу на аналитику, расстановку и вёрстку навигации. И как сэкономить на лицензиях и верстальщиках. Скоро подробный анонс!

Смотрите, лайкайте (и на Ютубе тоже), шерьте, зовите на конференции и подкасты!

https://www.youtube.com/watch?v=CEEpBQ9GilY&list=PLQC2_0cDcSKCfKYWz21xB8UfCiMD4HqZJ

Что-то я забросил писать в этот канал. Надо как-то восстановить регулярность. И попробую начать с подведения итогов ушедшегода.

Итак, итоги (порядок случайный)

1. Выступил на конференции.
Понравилось, планирую в этом году ещё выступить, и не только про автоматизацию дизайна.

2. Провёл стрим по генерации дизайна.
Понравилось. Возникли технические проблемы и не всё пошло, как хотелось, но хочу ещё попробовать.

3. Сделал масштабный проект по генерации дизайна.
Когда-нибудь расскажу о нём. Думаю, он масштабный не только для меня, но и для технологии в целом.

Макет состоял из независимых модулей, логика и дизайн которых был в процессе разработки. Некоторые части влияли на другие и надо было как-то делать одну часть, иногда ломая другую. И я решил писать в базу данных логи по каждому модулю + итоговый статус. Получилось круто.

Это стал пдф-сервер на nodejs с контроль-панелью: клиент выполняет запросы, получает пдф-файлы и оценивает дизайн. А я захожу в админку и смотрю статус по каждой части макета: где «200», «400», а где 500 (коды статусов взял из веба :)) И большинство причин ошибок тоже удалось писать в логи.

4. Довели с ребятами Автокрафт до стабильной версии, которая уже начинает генерить сложные макеты и с текстами, и с графикой (что такое Автокрафт, можно чуть-чуть подсмотреть в видео на 25 минуте).

5. Выпустил генератор уличных указателей Екатеринбурга. Вот тут написано про проект, а тут — про создание генератора.

6. Научился более-менее рисовать карты в своём пдф по сырым данным из OSM.

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


А теперь планы на этот год:

1. Выпустить Автокрафт.
2. Запустить публичный пдф-сервер с какими-то простыми макетами.
3. Выступить на конференции.
4. Начать вести канал полезнее про это всё добро, а не только «про себя любимого».
5. Выпустить 2 экстеншена: свободный и платный.
6. Может быть всё-таки получится выпустить JP в библиотеке.
7. Сэкономить ещё кому-то несколько сот, а может и тысяч часов рутинной работы.

Как-то так.

Дилемма вертикальных метрик в веб-дизайне. Подробный разбор очень наболевшей темы совместимости вертикального выравнивания текста в браузерах/фигме/индизайне от Ани Даниловой для type today. Ценный материал, обязательный для всех, кто верстает текст в вебе: type.today/ru/journal/verticalmetrics

…и всех, кто хочет, чтобы его шрифтами чаще верстали текст в вебе, конечно. Внутри много полезных ссылок.

Вот у вас, уважаемые разработчики, обычно фронтенд и бэкенд. А у меня ещё дизайненд.

Красишь кнопочку, потом нажимаешь её и отправляешь запрос на сервер. На выходе — PDF-файл, который генерится в Индизайне или Иллюстраторе, и потом растровая картинка отправляется на сайт, чтобы показать превью носителя.

Вот и приходится запускать 3 «консоли»:
— фронтенд: pnpm dev
— бэкенд: symfony server:start -d
— дизайненд: открываю Adobe InDesign или Illustrator

Интересно, что Иллюстратор и Индизайн являются продуктами одной компании, используют одни и те же языки скриптования, но делать сетевые скрипты в Иллюстраторе в миллион раз сложнее Индизайна. Чтобы протестировать экстеншен (сетевые скрипты) в Индизайне, достаточно закрыть/открыть панель экстеншена, а в Иллюстраторе — надо закрыть/открыть сам Иллюстратор.

Но при этом если объявить константу в экстеншене Индизайна, то можно словить ошибку попытки переопределения константы, потому что файлы запускаются «заново», но «не все». Почему? А потому. И чтобы поймать подробности этой ошибки ещё надо очень сильно исхитриться, потому что по умолчанию ты видишь тупо Script eval error.

Вот так и живёшь: постоянно думаешь, что можно, а что нельзя. Зато Чат-джипити не скоро разберётся во всём этом добре.

Традиционная схема пасспотоков станций Мосметро за 4 квартал 2023 года без цифр — просто красивая картинка. Генерит её скрипт в Иллюстраторе