Как в marsy измерить расстояние между блоками

Marsy это онлайн инспектор файлов PSD для верстальщиков

Он позволяет получить всю информациию необходимую для комфортной работы верстальщика.

Работает в браузере и доступен абсолютно бесплатно.

Возможности инспектора

• Показывает стили элементов
• Показывает расстояния между элементами
• Есть пакетное скачивание изображений
• Быстрое копирование текста и стилей, причем можно копировать текст нескольких элементов, и в режиме мультикурсора вставлять его в разные места за один подход
• Возможность задавать переменные практически любой сложности
• Приводит список использованных шрифтов и цветов
• Для изображений возможно сохраниение в jpg или png
• Для векторных слоев можно получить svg файл или BASE64
• Доступны направляющие из Photoshop
• и другие возможности .

Обзор сервиса Marsy

Каждый, кому доводилось заниматься версткой html страниц, знает, что работа с макетом дизайна занимает довольно большое время, и чем сложнее макет, тем больше.

Некоторое время назад, когда не было ни avocode, ни zeplin, приходилось всю нужную информация о слоях и о самом макете получать из программ, не предусматривающих легкую конвертацию данных в представление необходимое для верстальщика, в данном случае — это Photoshop.

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

А значит пришло время взять инициативу в свои руки. И вот уже довольно долгое время, а именно с 2017 года я занимаюсь развитием своего сервиса. Далее я расскажу о нем более подробно.

Сервис Marsy доступен абсолютно бесплатно, но если он вам нравится, вы всегда можете помочь мне материально на это странице.

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

Создание проекта и загрузка макетов

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

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

Форма создания проекта, здесь можно задать его название и описание

После создания проекта кликаем по элементу в списке и переходим в сам проект, хранилище макетов.

Для того чтобы загрузить новый макет, нужно кликнуть по кнопке «Добавить макет», после этого откроется форма для загрузки макетов.

Добавить макет для загрузки можно несколькими способами: перетащить макет на область формы или нажать кнопку «Добавить файл» и выбрать макет в инспекторе. Одновременно можно загружать несколько макетов.

Также в этой форме можно изменить название макета и добавить описание к нему.

Для каждого макета доступны некоторые действия:

• Скачать макет — кликнув по этой кнопке можно скачать макет себе на компьютер
• Положить в архив — позволяет убрать макет в архив, при этом обработанная информация о нем будет удалена, а сам макет пропадет с этой страницы. Посмотреть макеты в архиве можно нажав на кнопку «Показать архив», число на ней указывает количество макетов в архиве. Макет из архива можно достать, но после этого его снова придется отправить на обработку, нажав на соответствующую кнопку.
• Обновить — при нажатии на нее макет будет снова отправлен на парсинг, используется при выходе нового обновления, в котором есть изменение работы с файлами.
• Удалить — удаляет макет, восстановить его после удаления невозможно.

Теперь можем перейти к самому «вкусному», к редактору.

Работа с редактором Marsy

Основная информация и контекстное меню

Первое, что можно тут сделать — это кликнуть мышкой по экрану, и если вы попадете в слой, то он станет активным. Около него будет отображаться размеры и появится плавающее окно со стилями этого слоя. Если же теперь зажать левый ctrl и навести на другой слой, то мы увидим расстояние между ними. Если вместо этого кликнуть правой кнопкой мыши, то появится контекстное меню слоя, в котором в зависимости от его типа могут быть следующие пункты:

• Копировать текст — копирует текст выделенных тестовых слоев
• Копировать стили — копирует стили выделенных слоев
• Скачать — открывает диалог для скачивания выделенных слоев
• Открыть смарт — открывает smart object связанный со слоем

Панель инструментов

Слева расположена панель инструментов, простые инструменты я объединю в один раздел, а о сложных расскажу подробнее.

• Выделение рамкой — позволяет выделить слои, захватив их рамкой, так же на ее сторонах написаны ее размеры, что можно использовать для измерений.
• Пипетка — с ее помощью можно скопировать цвет любого элемента, кликнув по нему.
• Назад — вкладка, в которой расположились кнопки возврата к проектам
• Направляющие — включает/выключает отображение направляющих из Photoshop
• Поддержать — сборная вкладка, на которой расположены ссылки на справочные материалы и страницу донатов

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

Список слоев

Слои и группы слоев можно скрывать, и самое главное- те слои, что были скрыты в Photoshop изначально, будут доступны, достаточно переключить их видимость.

Около группы слоев есть кнопка, при нажатии на которую будут выделены все дочерние слои.

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

Экспорт изображений

Перейдя на вкладку скачивания изображений вы увидите две кнопки, обе они откроют окно экспорта изображений. Разница в том, что при клике по одной из них будет предложено — скачать изображения выделенных слоев, в то время как вторая предложит скачать изображения всех не текстовых слоев, что иногда бывает полезно.

Окно экспорта изображений

Основной элемент здесь это список изображений для экспорта.

Слева расположена миниатюра изображения, далее идет текстовое поле, в нем можно изменить название, с которым изображение будет сохранено. После названия идут поля выбора формата изображения (png, jpg и svg при наличии) и настройки качества, доступно только для jpg формата. Последним элементом идет чекбокс, который указывает на то, нужно ли экспортировать конкретный элемент.

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

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

Первым идет редактор названия, позволяет называть однотипные элементы с нумерацией, например, если в нем написать «item_», то слои будут названы item_1, item_2, item_3 и т.д. Для того чтобы изменить стартовое число, нужно написать «item_» или «item_», и нумерация будет начинаться с 2 или с 8, соответственно.

Далее удит настройки качества, выбор формата изображения и кнопки переключения активности слоев.

Внизу расположена кнопка «скачать», если изображение одно, то скачается сразу файл, если их несколько, будет скачан архив со всеми изображениями, из списка.

На самом верху есть кнопка «Сохранить в один файл», переключив ее можно скачать слои, объединив их в один файл, расположены они будут относительно друг друга как и на макете.

Настройки

Большое внимание я уделяю кастомизации редактора под нужды пользователей. И в этой вкладке как раз собраны все эти настройки.

• Язык приложения
• Формат стилей css или sass — отличаются наличием «;» в конце строки стиля
• Показывать дубли для стилей текста — используется в текстовых слоях, у которых есть текст с разными стилями. Попробуйте изменить значение и поймете в чем суть, на словах это сложно рассказать.
• Плавающее окно стилей — скрывает окно со стилями, которое появляется при клике по слою
• Всегда показывать расстояние — выше я рассказывал о линейках, показывающих расстояние до другого слоя, так вот, при включении этой настройки не нужно зажимать ctrl, они всегда будут отображаться
• Показывать размеры блока — настраивает, когда показывать размеры слоя в его верхнем левом углу. По умолчанию при наведении и выделении слоя
• Настроить расположение вкладок — тут можно изменить порядок инструментов в панели, перенести их на правую сторону или вовсе скрыть неиспользуемые
• Настроить горячие клавиши — для многих действий (копирование стилей, текстов, скачивание изображений) я добавил горячие клавиши, в этом разделе вы можете перенастроить их.

Информация о слое

Тут расположена полная информация о слое полный текст, стили, изображения, svg и base64 представления при наличии.

Информация о макете

На этой вкладке расположились данные всего макета: список цветов, используемых в нем и всех шрифтов макета.

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

Панель масштабирования

Масштабировать макет можно как кнопками на панели, так и колесом мыши при зажатом ctrl и клавишами «+» и «-» на клавиатуре.

При клике на цифру масштаба, он сбрасывается на 100%

Как в marsy измерить расстояние между блоками

Лаборатория неразрушающего контроля

Лаборатория осуществляет работы по контролю качества сварочных работ неразрушающими методами. Лаборатория существует с момента основания организации в 1992 году. .

АПК «МАРС»

Аппаратно-программный комплекс (АПК) «МАРС» – был разработан ООО «ХАНК» в 2003 году для целей оцифровки рентгеногаммаграфических снимков сварных соединений. .

Разработка паспортов технических устройств и оборудования

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

• 
• 
• 

Возможности комплекса «МАРС»

Выполняемые функции

В процессе расшифровки снимка комплексом выполняются следующие функции:

• хранение информации по снимкам в иерархической структуре «Объект/Стык/Снимок»;
• осуществление оцифровки снимков с помощью сканера;
• определение по снимкам, относящимся к одному стыку, соответствия нормативным документам количества экспозиций и периметра сварного соединения;
• оценка взаимного положения эталонов и шва;
• определение чувствительности контроля снимков с точностью 0.1 мм;
• измерение оптической плотности изображения шва и эталонов чувствительности с точностью 0.1 Б;
• определение соответствия снимка требованиям нормативных документов в части допуска к расшифровке;
• определение наличия дефектов, их местоположение и классификация;
• измерение геометрических размеров дефектов с точностью 0.1 мм;
• оценка соответствия сварного соединения требованиям нормативных документов;
• формирование протокола или экспертного заключения по результатам расшифровки;
• фиксирование изменений, вносимых дефектоскопистом в протокол или заключение;
• хранение данных о протоколах с возможностью поиска по разным параметрам;
• кроме расшифровки снимка, комплекс позволяет измерять следующие параметры:
• размеры дефектов на снимке с точностью 0.1 мм;
• расстояние между дефектами и элементами снимка с точностью 0.1 мм;
• оптическую плотность в любой заданной точке снимка с точностью 0.1 Б;
• относительную высоту точки снимка над уровнем основного металла с точностью 0.1 мм.

• предоставление возможности просмотра рельефа шва и позиций залегания дефектов на трехмерном изображении снимка.

Нормативные документы

Аппаратно-программный комплекс «МАРС» поддерживает работу со следующими нормативными документами (список может быть расширен по требованию заказчика):

ГОСТ 7512-82

Соединения сварные. Радиографический метод.

ГОСТ 23055-78

Классификация сварных соединений по результатам радиографического контроля.

СНиП 42-01-2002

ВСН 012-88

Строительство магистральных и промысловых трубопроводов.

СНиП 3.05.05-84

Технологическое оборудование и технологические трубопроводы.

СП 42-102-2004

Проектирование и строительство газопроводов из металлических труб.

СТО Газпром 2-2.4-083-2006

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

РД ТРАНСНЕФТЬ 19.100.00-КТН-001-10

Неразрушающий контроль сварных соединений при строительстве и ремонте магистральных трубопроводов.

СА-03-05-007

Правила устройства и безопасной эксплуатации технологических трубопроводов.

РД 153.34.1-003-01

Сварка, термообработка и контроль трубных систем котлов и трубопроводов при монтаже и ремонте энергетического оборудования

СНиП III-18-75

СНиП 3.03.01-87

Несущие и ограждающие конструкции.

РД РОСЭК 01-002-96

Машины грузоподъемные. Конструкции металлические. Контроль радиационный. Основные положения.

Требования к оборудованию

Производительность комплекса в большой степени зависит от применяемого компьютера, а разрешение по линейным размерам и оптической плотности – от сканера. В связи с этим к аппаратной части комплекса предъявляются следующие минимальные и рекомендуемые требования:

Компьютер

• Процессор с тактовой частотой 1700 МГц (рекомендуется 2200 МГц и выше);
• Оперативная память: 1024Mb RAM (рекомендуется 2048 Mb и выше);
• HDD 250 Gb и выше, не менее двух USB -портов;
• Microsoft WINDOWS XP ивыше ;
• Монитор с разрешением от 1024 x 768.

Сканер

• Наличие функции сканирования прозрачных носителей: наличие полноформатного слайд-модуля;
• Максимальная оптическая плотность не менее 3,3Б;
• TWAIN -совместимость;
• Возможность сканирования в 16- bit и более черно-белых изображений c разрешением от 300 dpi .

Рекомендуемая модель сканера: EPSON Expression 10000 XL /11000 XL в комплекте со слайд-модулем.

• Набор мер оптической плотности для калибровки комплекса по оптической плотности и линейным размерам;
• Дополнительное оборудование: автоматический податчик рулонной пленки АПРП-3: осуществление оцифровки рулонной пленки в автоматическом режиме для получения единого изображения всего снимка. Требуется дополнительныйUSB -вход на компьютере.

Характеристики и рекомендации к работе с АПК «МАРС»

Сканер Epson Expression 10000 XL /11000 XL , используемый в данном комплексе, представляет собой наиболее дешёвый вариант профессиональных сканеров, которые могут служить для задач оцифровки промышленных рентгеновских плёнок.

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

Самым важным параметром оцифровщика является максимальная оптическая плотность. Для сканера Epson Expression 10000 XL , который использует для оцифровки флуоресцентную лампу (белый цвет), этот параметр имеет значение 3.6-3.8Б. Но наиболее качественные изображения получаются для снимков оптической плотностью до 3Б.

В последней версии ПО «АПК «МАРС» реализован следующий процесс сканирования снимков: настройки и работа со сканером перенесена полностью в программное обеспечение, в котором пользователь освобождён от управления окнами выбора параметров сканирования, имея возможность работать со сканируемыми изображениями напрямую. Важным результатом стало также то, что время сканирования снимков при выборе всей области сканирования уменьшилось со 110-120 до 40 секунд, включая время на постобработку.

Время сканирования меньшее, чем Epson Expression 10000 XL , при сходном или лучшем качестве показывают сканеры из более дорогостоящих секторов: светодиодные и лазерные.

Светодиодные сканеры имеют уменьшение времени сканирования по соответствующим позициям примерно на 20%, лазерные уже на 40-55%. Стоимости этих сканеров равны примерно от 600 тыс. руб. до 1 млн. руб. и более 1.5 млн. руб. соответственно.

В дальнейшем планируется производство собственного оцифровщика, имеющего лучшие характеристики по оцифровке рентгеновской плёнки, чем сканер Epson Expression 10000 XL , при сохранении порядка стоимости комплекса.

Вычисление расстояния до наблюдаемого объекта по изображениям со стереопары

Ильясов, Э. С. Вычисление расстояния до наблюдаемого объекта по изображениям со стереопары / Э. С. Ильясов. — Текст : непосредственный // Молодой ученый. — 2016. — № 14 (118). — С. 146-151. — URL: https://moluch.ru/archive/118/32662/ (дата обращения: 11.03.2024).

В данной работе предлагается алгоритм для вычисления расстояния до наблюдаемого объекта по изображениям со стереопары.

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

Одно из применений стереозрения — навигация подвижных роботов. Например, Национальное управление по воздухоплаванию и исследованию космических пространств (НАСА) разработала робота (марсоход Mars Exploration Rover) для исследования поверхности планеты Марс. С помощью системы стереозрения робот может определять расстояние до препятствия и успешно обходить его.

Используемое вработе оборудование.

1. две USB-камеры;
2. шаблон шахматной доски размера 594 x 841 мм;
3. ноутбук с операционной системой MacOS, Python 2.7;
4. рулетка измерительная.

Подготовительные работы перед разработкой алгоритма.

1. Изготовление шаблона шахматной доски размером 594 x 841 мм на основе стандартного шаблона библиотеки с открытым исходным кодом OpenCV. Данный шаблон имеет 6 узлов по вертикали и 9 узлов по горизонтали.
2. Создание стенда из двух USB-камер, закрепленных на твердой, ровной поверхности, расположенных на фиксированном расстоянии друг от друга.

Разработка алгоритма.

Рис. 1. Алгоритм вычисления расстояния до объекта

На рисунке 1 представлен алгоритм вычисления расстояния до наблюдаемого объекта. Приведем подробное пояснение каждого из шагов.

Шаг 1. На первом шаге производится сбор изображений, на которых изображен шаблон шахматной доски в различных положениях, с левой и правой камер стереопары. Для корректной работы реализации алгоритма необходимо, чтобы шаблон шахматной доски полностью попадал в область видимости камер стереопары и занимал как можно большую площадь кадра.

Шаг 2. На втором шаге производится поиск узлов шаблона шахматной доски на изображениях, полученных на шаге 1. Поиск узлов шаблона осуществляется при помощи библиотечной функции OpenCV find Chessboard Corners(). Координаты узлов шаблона сохраняются для дальнейшего использования.

Шаг 3. На третьем шаге производится калибровка каждой из стереопар по-отдельности. Калибровка камер стереопары осуществляется при помощи библиотечной функции OpenCV calibrate Camera().

Шаг 4. На четвертом шаге производится калибровка всей стереопары. Данные, полученные на третьем шаге подаются на вход библиотечной функции OpenCV stereo Calibrate(), которая считает внутренние параметры стереопары. После процедуры стерео калибровки мы получаем фокусное расстоянии камер в пикселях и координаты принципиальных точек камер.

Шаг 5. На пятом шаге производится устранение дисторсии на изображениях, полученных на первом шаге. Устранение дисторсии производится при помощи библиотечных функций OpenCV init Undistort Rectify Map() и remap(). После выполнения данного шага, все прямые линии наблюдаемых объектов окружающего мира становятся прямыми линиями на изображении.

Шаг 6. На шестом шаге производится ректификация изображений, полученных на шаге 5. Ректификация заключается в выравнивании деформированных изображений, полученных на шаге 5, таким образом, чтобы эпиполярные линии изображений с левой камеры совпадали с эпиполярными линиями изображений с правой камеры. Данную процедуру выполняет библиотечная функция OpenCV stereo Rectify().

Шаг 7. На седьмом шаге для каждой пары соответствующих изображений с левой и правой камер производится построение карты диспаратностей (или карты глубины (depth map)) по изображениям, полученным на шестом шаге. Каждый пиксель карты диспаратностей содержит в себе информацию о том, сколько пикселей по оси OX находится между соответствующие пикселями изображений объекта с левой и правой камер. Построение карты диспаратностей осуществляется на основе алгоритма SGBM при помощи библиотечной функции OpenCV Stereo SGBM.

Шаг 8. На восьмом шаге производится вычисление расстояния до наблюдаемого объекта. Вычисление расстояния до объекта напрямую связано с информацией, которую несет в себе карта диспаратностей, построенная на седьмом шаге.

Приведем вывод формулы для нахождения расстояния до наблюдаемого объекта.

1. расстояние между камерами стереопары (базовое расстояние, base length)
2. фокусное расстояние камеры стереопары
3. карта диспаратностей

Найти: расстояние до наблюдаемого объекта

– наблюдаемый объект

– расстояние между камерами стереопары (в метрах)

– фокусное расстояние камеры стереопары (в пикселях)

– координата по оси OX точки объекта P на изображении с левой камеры

– координата по оси OX точки объекта P на изображении с правой камеры

Рис. 2. Пояснительный рисунок

– диспаратность точки x0 объекта P (в пикселях)

– расстояние до наблюдаемого объекта (в метрах)

Посмотрев на Рисунок 2, можно заметить подобные треугольники. Из подобных треугольников следует соотношение:

Из данного соотношения следует, что

Получили формулу, для вычисления расстояния до наблюдаемого объекта.

Проанализировав данную формулу, можно сделать следующие выводы:

1. Расстояние до точки объекта обратно пропорционально диспаратности данной точки. Это свидетельствует о том, что точки, расположенные дальше от плоскости стереопары имеют меньшую диспаратность, нежели точки, расположенные ближе к плоскости стереопары.
2. Значение диспаратности прямо пропорционально расстоянию между камерами. Чем больше расстояние между камерами, тем выше диспаратность.
3. Разрешение карты диспаратностей линейно зависит от разрешения изображения. Чем выше разрешение изображения, тем более аккуратной получается карта диспаратностей.

Экспериментальная часть.

В данной части работы пройдемся по шагам алгоритма и рассмотрим артефакты, полученные на каждом шаге описанного выше алгоритма. Также построим зависимость ошибки определения диспаратноcтей от расстояния до наблюдаемого объекта.

Приведем наглядные иллюстрации результата работы алгоритма и построим зависимость ошибки определения диспаратноcтей от расстояния до наблюдаемого объекта.

Действительные расстояния от плоскости стереопары до наблюдаемых объектов

Объект

Расстояние от стереопары до объекта (м)