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

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

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


Замерщик


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


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


Замерщик


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


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


Замерщик


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


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


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


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

Комментарии (8)


  1. Pinsky
    28.08.2017 17:43

    Спасибо, что не электрон!


    1. Assador Автор
      28.08.2017 18:26

      Пожалуйста. Эх. Мог бы я в C… Но руки не доходят освоить.


  1. ViktorIsVeid
    28.08.2017 18:20

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


    1. Assador Автор
      28.08.2017 18:24

      Ну, я перфекционист :) Мне проще, потому что я одновременно и дизайнер, и верстальщик. Так что могу позволить себе надизайнить то, что хочу, прикидывая при этом, насколько сложно будет всё это верстать. А скриптик… Для домохозяек, например, очень востребован как скриншотер. Моя жена, например, в восторге. Имхо, получился удобнее многих штатных.


  1. eugenebb
    28.08.2017 18:40
    +2

    Если я правильно понимаю функиональность, то подобное можно реализовать не как дополнительную программу, а средствами браузера. т.е. что-то типа версия «developer tools верстальщика».

    Основная проблема внедрить скрипт на страницу. Для этого можно использовать расширение браузера или установить MitM (что-то типа github.com/joeferner/node-http-mitm-proxy) и работать через него.

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

    Ничего не имею против Perl-a, лет 20-ть назад даже писал на нём, но думаю сейчас он не очень популярен в массах.


    1. Assador Автор
      28.08.2017 19:05

      Универсальнее. То, что предлагаете вы, будет работать только в браузере, а этот скриптик — везде. Играешь ты в игрушку, фильм смотришь… Тут, конечно, лишь для скриншотов области экрана вижу применение. Да не знаю… Хоть проверить корректность рендеринга по размерам шрифтов в какой-нибудь проге вроде LibreOffice’а (ну, просто для примера), которая использует свой велосипедный тулкит. Или при просмотре (не редактировании, а просто просмотре) новой фотки оценить размещение объектов на ней по правилу третей (золотому сечению, как захочется). Куча применений.


  1. delvin-fil
    29.08.2017 06:48

    После установки нескольких модулей программа заработала, но. Экран черный. Изменение alpha в colors: default: ничего не дает. Где смотреть?


    1. Assador Автор
      29.08.2017 14:24

      В настройках оконного композитора, а не программы. Должен быть включен композитный режим. Чёрный экран говорит о том, что не поддерживается прозрачность окна. Какая операционная система, окружение рабочего стола? Gnome, KDE, Xfce?