Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

(AppStore *) Timera: зодчество приложения и особенности разработки

Anna | 2.07.2014 | нет комментариев
Настала пора поведать общественности о нашем приложении timera. C сегодняшнего дня его дозволено скачать в appstore.
Об архитектуре timera расскажет heximal (Павел), наш ios разработчик, у него теперь read only, следственно его пост публикую я.— > В этом посте я напишу о моем скромном участии в увлекательном и перспективном плане с крайне подлинным наименованием Timera (от слов time и era). По благополучному стечению обстоятельств я пребывал в энергичной фазе поисков новых горизонтов становления в тот самый момент, когда начальство стартапа искало кандидата на вакансию iOS-разработчика. Суть плана достаточно примитивна – ее визуальное представление и изложение архитектуры дозволено видеть на основной иллюстрации к посту, под катом.

image

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

Раньше каждого, хотелось бы пару слов сказать о всеобщей архитектуре. Центральным звеном является сервер, исполняющий функции back-end, front-end, data storage, web-api. Детально описывать серверную начинку не стану, от того что никакого касательства к ней не имею. Cкажу лишь, что production-версия работает на облачном хостинге от Microsoft, а для реализации server-side применялся классичиский на сегодняшний момент стэк: IIS MSSQL ASP.NET

Front-end системы (веб-сайт www.timera.com) предоставляет пользователю вероятность просматривать фотографии других пользователей, а так же оборудован функционалом общественной сети: присутствует вероятность ставить лайки, оставлять комментарии, есть функция Поделиться в других общественных сетях. Так же у пользователя веб-сайта есть вероятность загрузить ветхое фото. Что это значит, и для чего это необходимо? Об этом дальше.

Помимо веб-сайта неотделимую часть архитектуры составляет мобильное приложение. На сегодняшний день оно имплементировано для 2-х особенно знаменитых платформ – это безусловно же Android и iOS. Функционал приложения фактически всецело воспроизводит функционал веб-сайта, за исключением исключительной особенности, которой у веб-сайта быть не может. Речь идет о таймераграфии.

Термин «таймераграфия» применяется для обозначения стиля исторического коллажа. Он не новейший. чай эти работы давным-давно гуляют по интернету и многие из них стали дюже вирусными. Стоит только припомнить план Сергея Ларенкова «Связь времен» либо Шона Клавера с его слайд-шоу о землетрясении в Сан-Франциско в 1906 году. Собственно, наименование приложения придумал Девид Вебб, основатель плана, легко сократив термин «таймераграфия». Теперь самое время немножко пояснить саму механику таймерографии и то, как данный процесс реализован в мобильном приложении Timera.
Представим, у нас есть ветхая фотография Эйфелевой башни. Мне лично нравится фотография 1889 года, на которой башня построена лишь до первого яруса. Дабы сделать timera-снимок, необходимо обнаружить ракурс, с которого была сделана ветхая фотография, сделать снимок, «перегнать» на компьютер, и в каком-нибудь графическом редакторе произвести совмещение, применяя разные фильтры и градиенты. Задачка, скажем, не всякому по силам. Но но она по силам всякому пользователю приложения Timera. Каждый процесс максимально упрощен и даже может показаться крайне комичным (по крайней мере лично я его таковым и считаю).

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

image   image

Самое увлекательное начинается на третьем экране, где производится настройка time-tunnel (тайм-туннеля). Тут пользователю доступен тулбар с разными инструментами, такими как:
— слайдеры прозрачности и резкости границы тайм-тоннеля (transparency and softness)
— поворот тайм-тоннеля вокруг оси
— функция, которая получила наименование swap (поменять местами ветхую и новую фотографии, то есть ветхая уходит на задний план, а новая на передний)
— метаморфоза формы тайм-тоннеля: эллиптический либо прямоугольный
— обрезка (crop)

Во всех режимах доступно метаморфоза размера и расположения тайм-туннеля с поддержкой экранных жестов.

Казалось бы негусто? Допустимо, но даже с этим комплектом инструментов создаются дюже недурные композиции. И плюс ко каждому, планируется расширять данный функционал, идей по этому поводу хватает.
Позже редактирования появляется получившееся изображение дозволено загрузить на сервер и/или расшарить в соцсети. При загрузке на сервер дозволено установить флаг приватности, если нет мечты делать свое произведение наследием общественности.
Тут хотелось бы рассказать немножко нюансов о трудностях, возникших при создании основного use-case (таймерографировнии).

Во-первых, неприятной неожиданностью стало присутствие 2-х значений типа UIDeviceOrientation. В прошлом мне приходилось трудиться с iOS-акселерометром и доктриной ориентации устройства, и тогда число допустимых ориентаций устройства равнялось четырем: UIDeviceOrientationPortrait, UIDeviceOrientationPortraitUpsideDown, UIDeviceOrientationLandscapeLeft, UIDeviceOrientationLandscapeRight. На экране фотографирования ориентация устройства крайне критична, от того что ovelay-изображение нужно ориентировать соответствующим образом, чтоб ветхая фотка в результате не получилась вверх ногами, либо лежащей на боку. Как выяснилось, существует еще два расположения устройства: UIDeviceOrientationFaceUp и UIDeviceOrientationFaceDown. Много человекочасов ушло, Дабы понять данный факт и распознать в нем причину неадекватного поведения программы.

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

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(volumeChanged:) name:@"AVSystemController_SystemVolumeDidChangeNotification" object:nil];

Как выяснилось позднее, связано это с тем, что у нас применяется overlayView, на которой пользователь может менять прозрачность ветхой фотографии, и вообще видеть ее. Такое же верно поведение было найдено в других знаменитых фото-приложениях. В то же время приложения, которые применяют типовые контролы для фотографирования не страдают от отсутствия реакции на нажатие кнопок громкости.
Наибольшее время разработки ушло на реализацию экрана с эффетами тайм-туннеля. Алгорифм тайм-туннеля основан на способе вычитания градиентного трафарета из начального изображения: чем темнее пиксель изображения на маске, тем поменьше значение прозрачности одноименного пикселя маскируемого изображения. Каждая магия реализована при помощи стандартного фреймворка CoreGraphics и функции CGImageCreateWithMask, которой передаются на вход два вышеупомянутых изображения в виде CGImageRef объектов.

Образование таймерографии происходит в три этапа. Условимся применять для изображения на заднем плане обозначение «Изображение А», а для изображения на переднем плане «Изобраежение Б».

1. Отрисовывается прямоугольная маска с градиентными краями и применятся к Изображению Б. Это было сделано, Дабы временной туннель нигде круто не обрывался. Следует упомянуть, что пользователь имеет вероятность повернуть «Изображение Б», скажем, если горизонт завален. Таким образом, маска формируется исходя из слелующих параметров: размер «Изображения Б», угол поворота «Изображения Б», величина размытости границы (регулируется слайдером). Полученная маска вычитается из «Изображения Б», в результате получается «Изображение Б» с размытыми краями.

image

Довольно пришлось повозиться с разворотом градиента, тот, что осуществлялся при помощи все того же CoreGraphics через реформирования матрицы координат графического контекста:

CGFloat angleInRadians = angle * (M_PI / 180); CGContextRotateCTM(bmContext, angleInRadians); 

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

image

Я даже задал вопрос на stackoverflow, позже бесплодных поисков подсказки. Впрочем, не получив результата, обнаружил решение эмпирическим путем, и оставил результат на личный вопрос (http://stackoverflow.com/questions/19219855/uiimageview-get-transformed-uiimage)

Иной неожиданностью стало неимение готового метода отрисовать прямоугольный градиент для маски (такой, как на иллюстрации). Для эллептического решение в CoreGraphics есть, а вот именно для прямоугольного, со скругленными краями, пришлось изобретать (http://stackoverflow.com/questions/18918382/coregraphics-rectangle-gradient – еще один самоответ).

2. Отрисовывается градиентная маска и используется к «Изображению Б», полученному в итоге обработки на первом этапе. В различие от первого этапа пользователь может задавать вид маски: прямоугольный либо эллептический плюс те же самые размеры маски, угол поворота, степень размытости границы. Размеры маски и расположение пользователь меняет пальцами на экране. Таким образом формируется изображение тайм-туннеля.

image

3. На последнем этапе полученное изображение тайм-туннеля отрисовывается в необходимых координатах на «Изображении А»

image

Должен подметить, что CoreGraphics вдалеке не самая продуктивная вещь на свете, и исключительно это приметно на ветхих девайсах, начиная с iPhone 4 и ниже. В связи с этим был принят ряд мер по оптимизации функционала таймерографии. Но об этом и многом ином во 2-й части.

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

 

Источник: programmingmaster.ru

Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB