Скрипт на Perl в помощь HTML-верстальщику

в 13:06, , рубрики: linux, perl

Привет! Я веб-разработчик, и при вёрстке того или иного HTML-шаблона постоянно приходится проверять пиксельные расстояния, соотношения, углы и пр. ненужные мелочи. Разумеется, есть всевозможные dev-тулзы, экранные лупы, скриншоты с графическим редактором, наконец, прости Господи. Но это всё не то. И тут мне пришла в голову идея. На что нам композитные менеджеры и мышка? Почему бы не мерять прямо поверх страницы браузера? Загвоздка была лишь в том, что кроме Perl, JavaScript, и прочих пхп и башей я толком никаких языков не знаю. Но я упорный. В результате я-таки написал нечто.

Получилась очень забавная зверушка, о которой и пишу здесь, теша себя надеждой, что кому-то может пригодится. Хотя… По причине, изложенной выше, получилась зверушка своеобразной: Linux, GTK+ 2, Perl (с модулями GTK2-Perl, Perl YAML, Perl Math::Round).

Итак, идея была вот в чём. Запускаем скрипт (я для удобства повесил его на хоткей), открывается GTK-шное окно в фулскрине с прозрачным фоном. Всё. Дальше с помощью Cairo, Perl и чьей-то бабушки поверх текущей живой отрисовки экрана выводятся линии курсора (горизонтальная и вертикальная — перекрестие во весь экран). С помощью мышки и клавиатуры можно выделять различные области экрана. При этом отрисовывается прямоугольник выделения, диагональ, числовые значения (ширина, высота, начальные и конечные координаты, угол), вспомогательные направляющие (центровые, золотое сечение и пр.; всё это включается/отключается и настраивается в конфиге). Требуется включенный композитный режим вывода.

Замерщик

В процессе выделения есть возможность делать скриншоты выделенного в буфер обмена и/или файл на диске, сохранять в буфер обмена текущие числовые значения выделения, переключаться в режим выделения из центра, ограничивать выделение каким-либо из заданных соотношений сторон (можно настраивать их и добавлять новые в конфиге), менять цвета разных линий по списку цветовых схем (настраиваются в том же конфиге; вообще, там почти всё настраивается, так что дальше постараюсь не оговариваться) и др.

Текущие выделения можно сохранять. То есть, нажал кнопочку, выделение остаётся на экране — можно делать новое. Кроме того, можно ставить направляющие — пока только горизонтальные и вертикальные (с возможностью прилипания к ним при выделении, естественно). Направляющие, ясень пень, тоже сохраняются.

Замерщик

Вообще, существует как бы три основных слоя: текущего выделения, сохранённых выделений и сохранённых направляющих. Между слоями сохранённых выделений и направляющих можно переключаться, выбирать какое-либо сохранённое выделение или направляющую, перетаскивать, удалять… Остапа понесло, и он начал описывать почти векторный редактор, только без фигур и на прозрачном фоне приложения. Собственно, в этом и суть скрипта + полезные циферки измерений перед глазами.

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

Замерщик

В общем, функционала нарасло уже довольно много, и сейчас ловлю себя на мысли, что бессистемно, сумбурно и без подробностей начинаю переписывать уже собственноручно написанный мануал. Скрипт опенсорсный, GPL v3, так что это не реклама, и пишу о нём сюда с двумя целями: поделиться с миром, и получить по возможности конструктивную критику с целью его улучшения.

Подробнее можно почитать в мануале на моём сайте.

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

Буду рад комментариям, предложениям и критике.

Автор: Дмитрий Соколов

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js