Как мы улучшили UX мобильного приложения

Дата публикации:

Продолжаем рассказ об интересных задачах, с которыми приходится сталкиваться мобильным разработчикам компании JetRuby. Сегодня мы поведаем вам, как простая оптимизация user experience (UX, он же — пользовательский опыт) может превратиться в магию автоматизации.

Постановка задачи

Изначальная задача была предельно простой: от пользователя требовалось навести прицел камеры на дисконтную карту и щелкнуть затвором. Приложение обрезало фотографию по краям прицела, и получалось достаточно милое изображение пластиковой карты. Однако не у всех пользователей это происходило столь легко и непринужденно. Некоторым из них для получения хорошей фотографии приходилось делать по 3-4 кадра. А приложение, на минуточку, предназначалось для хранения всех дисконтных карт в одном месте.

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

Реализация

Для исправления ситуации нам пришлось совершить три совершенно простых, на первый взгляд, шага:

  • предварительная фильтрация изображения;
  • выделение границ объекта;
  • проверка объекта на предмет попадания в прицел.

Но дьявол кроется в деталях. В процессе реализации принятого решения нам пришлось столкнуться с некоторыми сложностями. Наверное наибольшей из них стала производительность. Использование таких подходов, как Hough Line Transform позволяет выделять прямые линии объекта. Однако на мобильных устройствах все это происходит очень медленно. Даже расчет всех операций на GPU девайса не помогает достичь приемлемой производительности. В результате мы решили пойти другим путем.

Опустим малолюбопытные подробности. Как получить видеопоток с камеры и отправить его на предварительную фильтрацию, вы можете узнать и без нашей помощи. Перейдем сразу к делу.

Предварительная фильтрация

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

Для пикселизации изображения карты мы использовали комбинацию из Erosion и Dilation фильтров.

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

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

Далее добавляем легкое размытие, которым вы наверняка баловались графических редакторах.

Так выглядит наша карта после предварительной фильтрации.

карта-1

Выделение границ объекта

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

Но перед тем как показать вам код шейдера фильтра для определения границ объекта, мы бы хотели рассказать почему из множества подобных алгоритмов мы выбрали именно оператор Собеля . По нашему мнению его главным конкурентом является Canny Edge Detection. Проведя сравнительный анализ, мы пришли к однозначному выводу: оператор Собеля менее требователен к предварительной фильтрации. И это то, что нам нужно — подумали мы. Правда, наша интерпретация оператора Собеля не является его чистой реализацией. Классический Собель не добавляет цвета границ и является сугубо бинаризирующим фильтром. А вот его продолжение XY Derivative Filter уже делает то что нам надо.

Код шейдера фильтра для любознательных:

Теперь наше приложение видит мир в синих тонах.

карта-2
 

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

Проверка объекта на предмет попадания в прицел

Ну и последнее. В этом нет ничего сложного и тем более — сверхъестественного. Мы просто определяем “прямоугольник-зазор” с каждой стороны прицела и ожидаем получить в нем линию нужного цвета и длины, сопоставимой с длиной прямоугольника.

Самое время посмотреть как это работает.

Вот так с помощью “магии” автоматизации и компьютерного зрения мы упрощаем жизнь пользователям нашего приложения. Как говорится — все гениальное просто:)

Мы Крым Диджитал

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

Подпишись
на наши новости

Контакты пресс-службы

+ 7 (926) 118-80-32

WhatsApp, Viber, Telegram

Давайте обсудим Ваш проект

или свяжитесь с нами по почте projects@crimeadigital.ru

Нажимая кнопку «Отправить», вы даете согласие на обработку персональных данных

Прошел день карьеры в СевГУ

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая. Мероприятие длилось 3 часа. Компанией заинтересовались  более 35 студентов, которым была важна информация о прохождении практики, бесплатные курсы Академии и вакансии, не требующие опыта работы. Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов — как начать свою карьеру в ИТ? Есть ли возможность совмещать учебу с работой? Кем я смогу стать? Как понять, кем я хочу работать? И многие другие.

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая.

Мероприятие длилось 3 часа. Компанией заинтересовались  более 35 студентов, которым была важна информация о прохождении практики, бесплатные курсы Академии и вакансии, не требующие опыта работы.

Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов - как начать свою карьеру в ИТ?

Есть ли возможность совмещать учебу с работой?

Кем я смогу стать?

Как понять, кем я хочу работать?

И многие другие.

Завершен набор студентов на летнюю практику

Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться — front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.
Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться - front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.

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

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня. Вместе с Правительством Севастополя, Институтом информационных технологий и управления в технических системах СевГУ и приглашенными ИТ-компаниями города обсудили перспективу развития системы высшего образования в Севастополе.Представители бизнеса, власти и образовательной системы выступали со своим видением будущих потребностей региона в кадрах, поднимали насущные вопросы обучения студентов, прохождения практики и дальнейшего трудоустройства. Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня.

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

Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Выпуск курса Software Testing

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing! Всего курс успешно завершили 13 человек. В течение 2 месяцев несмотря на теплую погоду и манящее море ребята ответственно посещали занятия 2 раза в неделю, делали домашние задания и проверочные работы. Трое начинающих специалистов теперь стажеры нашей компании. Следующий курс намечен на август. Не пропусти анонс записи!

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing!

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

Следующий курс намечен на август. Не пропусти анонс записи!