Представление информации об экспонате

При осуществлении описанного выше перехода создается новый контроллер с классом DetailViewController (Приложение 9). Его визуальный интерфейс состоит из поля для идентифицированного изображения, текстового поля для информации о нем и навигационной полоски вверху экрана, содержащей кнопки для перехода обратно к распознаванию, использования социальных сервисов и приобретения дополнительного контента.

В классе DetailViewController реализован метод displayPhotoInfo, который получает из файла DBData.plist информацию для экспоната, идентификатор которого записан в поле definedPhotoID. Этот метод вызывается при инициализации контроллера. Важно, что изображения маркеров представляют собой стереопары. Это означает, что при выводе фотографии в представлении контроллера ее необходимо разделить на две части (для определенности на экран выводится левая половина).

По нажатии на кнопку «Поделиться» появляется Activity View Controller, предлагающий выбрать опцию для отправки, копирования или сохранения изображения и информации о нем.

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

Визуальный интерфейс

Далее представлен визуальный интерфейс раздела «Распознавание» на примере изображений из базы данных:

Рис. 5. Пользовательский интерфейс класса RecognitionViewController (а), класса DetailViewController (б), связи с социальными сервисами (в), подтверждения покупки пакета стереопар (г), класса StereopairViewController (д)

Интерфейс 5в появляется по нажатии на кнопку «Поделиться» на интерфейсе 5б справа вверху; 5г - по нажатии на кнопку «Еще» на 5б, если стереопара еще не доступна, иначе появляется интерфейс 5д. Последний можно скрыть, нажав на изображение.

4.3 Реализация раздела «События»

Как было сказано ранее, новости и события музея должны выгружаться с его веб-сайта. Для этого необходимо анализировать его HTML-страницы и находить нужные элементы. Для парсинга HTML был выбран инструментарий Objective-C-HTML-Parser, и на основе его методов был создан вспомогательный класс HTMLWrapper (Приложение 11). Его интерфейс содержит два статических метода:

+ (NSArray*) getEvents;

+ (NSString*) getEventContents: (NSString*) url;

Загрузка общих данных о событиях

Первый метод загружает данные из раздела «События» веб-сайта chelnokov.org. События на сайте размещены на нескольких страницах по четыре на одной. Информация о каждом событии заключена в тег DIV с классом «post-item». Этот тег имеет сложную вложенную структуру, но, благодаря возможности инструментария искать теги по названию класса, исключается необходимость последовательного спуска к ним. Таким образом, было установлено, что необходимую информацию о событии можно получить из следующих тегов:

· DIV (Блок) с классом «image_wrapper». Этот тег содержит в себе вложенную ссылку (тег A), в которую, в свою очередь, вложено изображение (тег IMG). Обращаясь к атрибуту «src» этого тега, можно получить ссылку на исходное изображение. Если у события нет прикрепленного изображения, тег A отсутствует.

· H2 (Заголовок второго уровня) с классом «entry-title». В этот тег вложена ссылка (тег A), из атрибута «href» которой получается прямая ссылка на полный текст о событии. Кроме того, между открывающим и закрывающим тегами этой ссылки заключен заголовок события, который можно получить с помощью метода contents класса HTMLNode инструментария.

· DIV с классом «post-excerpt». В рамках этого тега заключено начало статьи, которое можно получить с помощью метода contents.

Метод getEvents проходит по страницам событий, получая описанным образом информацию о них. В результате, метод возвращает массив словарей с ключами «title», «abstract», «imLink» и «moreLink». Этот массив используется для заполнения данных в таблице контроллера NewsTableViewController (Приложение 12), а также записывается в файл events.plist в локальной директории приложения.

Ячейки таблицы

Контроллер реализует методы для таблицы, определяя ее структуру и переходы. Содержание ячеек задается в методе:

func tableView (_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

В параметре indexPath содержатся координаты (индекс) ячейки. Метод возвращает инициализированный объект класса клетки UITableViewCell или его наследника. Для клеток таблицы событий используются объекты созданного класса NewsTableViewCell, пользовательский интерфейс которого показан на рисунке 6.

Рис. 6. Визуальный интерфейс класса NewsTableViewCell

Очевидно, что число элементов в массиве событий и число клеток в таблице одинаково. Тогда ячейка таблицы инициализируется элементом словаря из массива событий с тем же порядковым номером. Это также удобно при реализации метода, определяющего поведение при выборе некоторой клетки:

func tableView (_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)

В коде этого метода осуществляется переход к контроллеру, отображающему полное содержание новости:

self.performSegue (withIdentifier: «SHOW_NEWS_SEGUE», sender: m_Events [indexPath.row])

В описанном ранее методе prepareForSegue получается целевой контроллер класса DetailNewsViewController, и в его поле link записывается ссылка на статью.

Отображение полного содержания

За показ полного текста события отвечает класс DetailNewsViewController (Приложение 13). Его визуальным представлением является интерфейс для просмотра веб-страниц класса UIWebView. Также пользователь может поделиться новостью в социальных сетях, воспользовавшись кнопкой в правом верхнем углу экрана.

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

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

Поскольку объект класса UIWebView способен отображать не только Интернет-страницы, но и части HTML-кода, записанные в строковой переменной, было принято решение отображать в UIWebView только разметку, содержащую текст события. Для этого в классе HTMLWrapper был реализован второй метод (getEventContents), который принимает на вход URL страницы события и возвращает строку, в которой записана разметка с его содержанием.

Было установлено, что основное содержание статьи заключено в двух тегах:

· DIV с классом «section-post-header». Здесь размещаются заголовок статьи и изображение (если есть).

· DIV с классом «post-wrapper-content». В нем содержится основной текст статьи.

Разметки этих тегов совмещаются вместе в одну строковую переменную.

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

· При выводе в UIWebView вверху страницы появляется надпись «$0», которой нет при просмотре полной версии сайта. Было установлено, что такую надпись дает тег DIV с классом «button-love». С помощью инструментария был получен HTML-код этого тега, и он был заменен в общей разметке новости на пустую строку «».

· Внизу страницы остается надпись: «Поделиться в соцсетях». Она была заменена на пустую строку «» в общей разметке.

· После извлечения тегов события, их текстовое содержание остается адаптированным для экрана мобильного устройства, но изображения оказываются значительно растянутыми горизонтально. Это было решено путем присвоения им стилей CSS: во всей строке разметки была произведена замена '<img' на '<img style=» max-width: 100%; height: auto» '. Благодаря этому, изображения принимают максимально возможную ширину (т.е. ширину экрана), и при этом масштабируются, а не растягиваются лишь в одном направлении.

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

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

Визуальный интерфейс

Рис. 7. Пользовательский интерфейс класса NewsTableViewController (а), класса DetailNewsViewController (б), связи с социальными сервисами (в)

Интерфейс 7в появляется по нажатии на кнопку «Поделиться» на интерфейсе 7б справа вверху.

4.4 Реализация раздела «Библиотека»

Пользовательский интерфейс этого раздела представлен контроллером с классом LibraryTableViewController (Приложение 14). В его представлении содержится таблица, каждая ячейка которой содержит фотографию и ее название.

Ячейки таблицы заполняются путем чтения данных из словаря, содержащегося в файле DBdata.plist. Поскольку у элемента словаря нет порядкового индекса, возникает проблема сопоставления определенной фотографии и нумерованной клетки таблицы. Эта проблема решается путем использования массива ключей словаря, в котором, очевидно, все элементы уже имеют нумерацию. Тогда при заполнении ячейки соответствующий ключ определяется так:

let key = (DBData.allKeys as NSArray) [indexPath.row] as! String

Здесь DBData - словарь, считанный из файла, indexPath.row - индекс ячейки. После определения ключа можно получить словарь параметров фотографии:

let val = DBData.value (forKey: key) as! NSDictionary

Рис. 8. Интерфейс класса LibraryTableViewCell

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

Рис. 9. Интерфейс класса LibraryTableViewController



Объект класса ячейки имеет поле photoID, в которое записывается идентификатор фотографии, представленной в данной ячейке. Благодаря этому, можно определить выбранное изображение без дополнительных операций, что актуально при передаче данных в DetailViewController, представляющий данные о фотографиях. Для вывода информации об экспонатах здесь используется такой же контроллер, как и в разделе «Распознавание». Единственное отличие заключается в том, что здесь используется переход с другим идентификатором, так как визуальное переключение представлений должно выглядеть иначе.

Таким образом, пользовательский интерфейс раздела «Библиотека» представлен на рисунке 9. При выборе ячейки отображается DetailViewController, интерфейс которого идентичен интерфейсам на рисунках 5а-5д.

4.5 Реализация раздела «Дополнительно»

Пользовательский интерфейс этого раздела - представление с четырьмя кнопками, отвечающими за удаление загруженных данных, показ информации о фотографе, переход на веб-сайт Фонда сохранения фотонаследия С.В. Челнокова и показ информации о приложении. Программный интерфейс раздела реализован в классе AdditionalViewController (Приложение 15).

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

При нажатии на кнопку «О фотографе» происходит переход к новому контроллеру с классом MuseumInfoViewController (Приложение 16). Его представление состоит из WebView, в котором отображается HTML-разметка раздела «О фотографе» веб-сайта Фонда. В частности, для вывода выбрано содержание тега DIV с классом «the_content_wrapper», которое содержит несколько абзацев текста и два изображения. Так как предполагается, что эта информация должна быть доступна оффлайн, было выполнено следующее:

· Изображения были сохранены в локальную директорию приложения.

· Адреса файлов изображений, записанные в атрибуте «src» тегов IMG, были заменены на адреса в локальной директории.

· Для верного отображения изображений к тегам IMG были добавлены стили CSS, как описано в пункте 4.3.3.

· Разметка была сохранена в файл generalInfo.plist в локальной директории. В его корне находится словарь, из которого можно по ключу «photographerInfo» получить строку с разметкой.

По нажатии на кнопку «Сайт Фонда» происходит перенаправление запроса и открытие веб-сайта в стандартном браузере устройства.

Наконец, при выборе опции «О приложении» происходит переход на View Controller с общей информацией о приложении (Приложение 17). Здесь пользователь может связаться с представителем Фонда: по нажатии на соответствующую кнопку появляется интерфейс, позволяющий осуществить звонок или написать email. Аналогично этому, реализована возможность связаться по email с разработчиком.

Таким образом, пользовательский интерфейс раздела имеет вид:



Рис. 10. Визуальный интерфейс класса AdditionalViewController (а), уведомления об успешном удалении загруженных из интернета данных (б), класса MuseumInfoViewController (в), класса AppInfoViewController (г), связи с представителем Фонда разными способами

Интерфейсы 10б, 10в, 10г появляются по нажатии на соответствующие кнопки на 10а; 10д можно вызвать по нажатии на кнопку «Связь с Фондом» на интерфейсе 10г.

4.6 Тестирование приложения

Обобщая результаты описанной выше разработки, можно сформировать пользовательский сценарий для приложения:

Рис. 11. Пользовательский сценарий приложения



Тестирование приложения проводилось на устройстве iPhone 6S под управлением iOS 10.3.2. Тестовая выборка изображений состояла из 47 стереопар. Для каждого изображения из выборки было проведено по 5 замеров времени с момента появления маркера в кадре до момента появления информации о нем. Результат, усредненный по всем замерам, составил 0.96 секунды. Также было замечено, что для идентификации всех изображений достаточно, чтобы в поле зрения камеры находилась только половина изображения. Случаев неверного распознавания выявлено не было.

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



Заключение

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

Анализ предметной области позволил дать оценку подходам к распознаванию экспонатов (раздел 1.2) и сформулировать требования к разрабатываемому приложению (раздел 1.4). Был сделан вывод о том, что распознавание экспоната с камеры устройства является наиболее естественным и эффективным для пользователя способом взаимодействия.

Обзор и сравнительный анализ методов разработки приложения позволили сделать вывод о том, инструментарий Vuforia SDK является наиболее эффективным средством для реализации функционала распознавания изображений (раздел 2.1). Для парсинга HTML-кода веб-страниц был выбран инструментарий Objective-C-HTML-Parser (раздел 2.2).

В результате теоретической части работы была сформирована общая структура приложения, определен функционал разных его частей и порядок хранения данных (раздел 3.1). Также были рассмотрены особенности создания пользовательского интерфейса приложения в ОС iOS 9 или новее.

В ходе разработки приложения был определен порядок подготовки изображений для распознавания (раздел 4.1). Был описан процесс разработки программного обеспечения всех разделов приложения (разделы 4.2-4.5). Приведены результаты тестирования приложения, подтверждающие эффективность выбранных методов и средств разработки (раздел 4.6). Представлен пользовательский сценарий использования приложения.

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

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

Предполагается дальнейшее применение приложения на выставках фоторабот С.В. Челнокова. Ожидается, что база распознаваемых изображений будет пополнена и приложение будет размещено в Apple App Store (магазине приложений Apple).

Список использованных источников

1. Number of smartphone users worldwide 2014-2020 | Statista. URL: https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/ (дата обращения: 18. 04. 2017).

2. He Z. и др. A proposal of interaction system between visitor and collection in museum hall by iBeacon // 2015 10th International Conference on Computer Science & Education (ICCSE). 2015.

3. Jevremovic V., Petrovski S. MUZZEUM - Augmented Reality and QR codes enabled mobile platform with digital library, used to Guerrilla open the National Museum of Serbia // 2012 18th International Conference on Virtual Systems and Multimedia. 2012.

4. О фотографе - Сайт фонда Челнокова. URL: https://chelnokov.org/o-fotografe/ (дата обращения: 08. 05. 2017).

5. Chen B. If You're Not Seeing Data, You're Not Seeing // Wired. 2009.

6. Azuma R. A Survey of Augmented Reality // Presence: Teleoperators and Virtual Environments. 1997. Т. 4. С. 355-385.

7. Zhou F., Duh H., Billinghurst M. Trends in augmented reality tracking, interaction and display: A review of ten years of ISMAR // ISMAR '08 Proceedings of the 7th IEEE/ACM International Symposium on Mixed and Augmented Reality. 2008. С. 193-202.

8. Damala A. и др. Bridging the gap between the digital and the physical // Proceedings of the 3rd international conference on Digital Interactive Media in Entertainment and Arts - DIMEA '08. 2008. С. 120-127.

9. Навигация в помещениях с iBeacon и ИНС. URL: https://habrahabr.ru/post/245325 (дата обращения: 18. 04. 2017).

10. Jevremovic V., Petrovski S. MUZZEUM - Augmented Reality and QR codes enabled mobile platform with digital library, used to Guerrilla open the National Museum of Serbia // 2012 18th International Conference on Virtual Systems and Multimedia. 2012.

11. Chang K. и др. Development and behavioral pattern analysis of a mobile guide system with augmented reality for painting appreciation instruction in an art museum // Computers & Education. 2014. Т. 71. С. 185-197.

12. CHESS - Project. URL: http://www.chessexperience.eu/project.html (дата обращения: 18. 04. 2017).

13. Operating system market share. URL: https://www.netmarketshare.com/operating-system-market-share.aspx (дата обращения: 18. 04. 2017).

14. App Store - Support - Apple Developer. URL: https://developer.apple.com/support/app-store/ (дата обращения: 18. 04. 2017).

15. Swift против Objective-C: 10 причин почему будущее за Swift. URL: http://swiftbook.ru/blog/swift-vs-objective-c-10-reasons-the-future-favors-swift (дата обращения: 18. 04. 2017).

16. OpenCV library. URL: http://opencv.org/ (дата обращения: 18. 04. 2017).

17. OpenCV Tutorial: Real-time Object Detection Using MSER in iOS. URL: https://www.toptal.com/machine-learning/real-time-object-detection-using-mser-in-ios (дата обращения: 18. 04. 2017).

18. Vuforia | Augmented Reality. URL: https://www.vuforia.com (дата обращения: 18. 04. 2017).

19. Catchoom - Image Recognition and Augmented Reality. URL: https://catchoom.com (дата обращения: 18. 04. 2017).

20. Open Source Augmented Reality SDK | ARToolKit.org. URL: https://artoolkit.org/ (дата обращения: 18. 04. 2017).

21. Training ARToolKit Natural Feature Tracking (NFT) to Recognize and Track an Image [ARToolkit]. URL: https://artoolkit.org/documentation/doku.php? id=3_Marker_Training:marker_nft_training (дата обращения: 18. 04. 2017).

22. topfunky/hpple: An XML/HTML parser for Objective-C, inspired by Hpricot. URL: https://github.com/topfunky/hpple (дата обращения: 07. 05. 2017).

23. tid-kijyun/Kanna: Kanna(зо) is an XML/HTML parser for Swift. URL: https://github.com/tid-kijyun/Kanna (дата обращения: 07. 05. 2017).

24. zootreeves/Objective-C-HMTL-Parser: An objective c wrapper around libxml for parsing HTML. URL: https://github.com/zootreeves/Objective-C-HMTL-Parser (дата обращения: 07. 05. 2017).

25. Property list. URL: https://en.wikipedia.org/wiki/Property_list (дата обращения: 07. 05. 2017).

26. Обобщенный Model-View-Controller. URL: http://rsdn.org/article/patterns/generic-mvc.xml (дата обращения: 08. 05. 2017).

27. Delegation. URL: https://developer.apple.com/library/content/documentation/General/Conceptual/DevPedia-CocoaCore/Delegation.html (дата обращения: 09. 05. 2017).

28. NeXTSTEP. URL: https://en.wikipedia.org/wiki/NeXTSTEP (дата обращения: 12. 05. 2017).

29. OpenGL ES. URL: https://ru.wikipedia.org/wiki/OpenGL_ES (дата обращения: 09. 05. 2017).

30. Shader. URL: https://en.wikipedia.org/wiki/Shader (дата обращения: 09. 05. 2017).



Приложения

Приложение 1

Содержимое файла generalInfo.plist



Приложение 2

Примеры элементов словаря в файле DBData.plist



Приложение 3

Файл RecognitionViewController.h



Приложение 4

Файл RecognitionViewController.mm



Приложение 5

Файл RecognitionEAGLView.h



Приложение 6

Файл RecognitionEAGLView.mm



Приложение 7

Файл RecognitionSession.h



Приложение 8

Файл RecognitionSession.mm

 

Приложение 9

Файл DetailViewController.swift



Размещено на Allbest.ru