Сергей Турулин
449 subscribers
148 photos
22 videos
1 file
62 links
Автоматизирую дизайн в Адобе и генерю полиграфический PDF в браузерах. Для связи: @turulin

Иронизирую про жизнь в городе тут: @brgmstr
加入频道
Элементы дизайна и барьеры


Проблема

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

Пока эти случаи были единичными, я локально, то есть в самом месте рисования, смещал объекты на возможное расстояние. Но когда ситуация усложнилась (несколько «границ» в разных направлениях), появилось слишком много повторений кода, но с похожими действиями.

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


Решение — новый модуль

Суть модуля простая: у документа, например pdf-файла, есть место, где возможно пересечение элементов. Я инициализирую модуль, передаю ему элементы дизайна (которые можно двигать), барьеры (которые нельзя двигать) и границы возможного смещения. Элементы дизайна, включая барьеры, не рисуются в этот момент, а как бы складываются в «память файла» — в кэш.

И когда все элементы дизайна созданы и переданы в модуль, выполняется главный метод — запустить смещения. Модуль перебирает все барьеры и элементы дизайна, определяет зоны пересечения. Согласно доступным границам и разрешённым направлениям смещения модуль сам решает, куда попытаться сместить элементы.

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

И после этой всей логики мы рисуем объекты «из кэша». Готово.


Перспектива

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

В общем, очередная полезная функция, где сотня математических операций в циклах. Но главное — я сделал этот модуль универсальным. Можно запускать и в Адобе (Иллюстратор или Индизайн), и в браузерах. Потому что достаточно, чтобы у передаваемых элементов были свойства x, y, width, height и метод draw().
🔥4👏2👍1
Forwarded from Код Екатеринбурга (Паша Омелёхин)
💫 Запускаем карту Екатеринбурга!

Когда был построен ваш дом? Как много высоких зданий в центре? Сколько в городе объектов культурного наследия? Где чаще всего происходят ДТП? Чтобы ответить на эти и миллион других вопросов, мы разработали карту Екатеринбурга — сервис, где собраны и визуализированы все данные о городе.

У Екатеринбурга огромное количество интересных и открытых данных, о которых никто не знает. Раньше их было трудно найти, трудно пользоваться и трудно сделать из них выводы. А теперь они все в одном месте! Захо́дите на карту — и тут же попадаете в мир полезной и красивой картографии.

Какие фишки есть у сервиса:
— Скорость и производительность. Карта шустро работает с огромными объёмами данных и не падает.
— Легко добавить новые слои данных.
— Данные автоматически обновляются из источника.
— Красивая визуализация любых данных.
— Подробная карточка объекта.
— И всё это в 3D!

Какие планы
Сегодня мы запускаем бета-версию сервиса. В будущем мы планируем добавить новые слои данных, показывать сразу несколько слоёв, разработать API, визуализировать данные обо всех городах в мире и много чего ещё.

Самое важное
Проект является полностью открытым. Кто угодно может в него законтрибьютить или форкнуть. Заходите на гитхаб.

Итак, ссылка этого лета. Залипнуть на часок: 🗺️ map.ekaterinburg.city
🔥7👍1
Каждый Новый год мы с друзьями ходим в баню

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

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

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

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

Первый скрипт — серверный, с доступом по апи к данным Москвы. Он скачивает нужный квартал в базу данных на сайте metrostat.ru. А мой сайт уже знает всё о станциях и линиях метро, и может посчитать тысячи пассажиров с учётом дат открытия и закрытия станций. Например, на сайте Москвы хранятся данные суммарно за весь квартал, а новые станции БКЛ работали только с открытия в марте. Поэтому надо делить не на 90 дней, а на нужное число дней. Тоже самое с открывающимися после ремонта станциями. Данные по кроссплатформенным станциям тоже учитываются. Клик — и квартальные количества по входу и выходу превращаются в готовый джейсон с суммарными тысячами для запуска в Иллюстраторе.
🔥132👍1
Сергей Турулин
Каждый Новый год мы с друзьями ходим в баню Каждый квартал я генерю схему «Тысячи пассажиров метро». За 2 с лишним года процесс упростился от кропотливой ручной работы (иногда с калькулятором) до запуска 2 скриптов. Решил написать об эволюции процесса. Про…
Каждый Новый год мы с друзьями ходим в баню

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

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

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

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

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

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

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

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

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

Открываю «документацию», нахожу свойство документа
Document.tags
и метод
tags.add()
. Всё просто!

Но нет: оказывается, это теги не документа, а только всех объектов документа. И добавить теги самому документу нельзя. Хотя, например,
Document.textFrames.add()
отлично срабатывает и создаёт на дефолтном месте новый текст.

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

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

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

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