Widget Navigation
Навигация SmartPlayer
Описание
Дополнительный продукт SmartPlayer предназначенный для развертывания системы навигации на объекте.
Сферы внедрения
- Образовательные учреждения
- ТЦ и БЦ
- Фабрики/заводы с обширной инфраструктурой
- Другие объекты по запросу заказчика
Технические требования
- Тач Панель на ОС Android, Windows
- Наличие лицензии Smart Touch от SmartPlayer
- Рекомендуемые параметры i5, 8 ОЗУ
Внешний вид (примеры)
Возможности настройки виджета
Виджет может быть настроен и отрисован как самостоятельно, так и с участием дизайнеров SmartPlayer.
Редактирование
В любой момент заказчик может самостоятельно изменить настройки и саму схему навигации (добавить, удалить или изменить помещения и объекты на карте).
Интерфейс
Интуитивно понятный конечному пользователю интерфейс. По запросу клиента в виджет навигации может быть встроен виджет расписания мероприятий и интегрирован в с внутренними базами данных заказчика.
Процесс взаимодействия прост: выбираем объект на схеме, либо мероприятие из предложенного списка. Далее запускаем построение маршрута и система автоматически показывает путь до выбранного помещения.
Инструкция по настройке виджета в личном кабинете
Установка виджета в личном кабинете
Пользователю необходимо получить виджет у команды SmartPlayer. Виджет будет предоставлен в виде архива. Чтобы перенести его в личный кабинет пользователю необходимо зайти на сайт/ в приложение, перейти в раздел “Контент” и перетащить архив с виджетом.
Данный виджет всегда можно будет найти в разделе “Контент”, во вкладке “виджет”.
Переход к разделу “Общие настройки, настройки карт”
После запуска виджета пользователю необходимо выставить базовые настройки. Данный шаг реализовывается с помощью нажатия на иконку “Общие настройки, настройки карт”, отображаемой в виде иконки шестеренки.
Примечание 1: При наведении на иконку курсора, можно увидеть ее название.
Раздел “Общие настройки, настройки карт”
Перейдя в раздел “Общие настройки, настройки карт” пользователю откроется окно, в котором будет указано название и версия виджета (сверху по-центру), а также ниже список параметров, которые необходимо настроить.
В список настраиваемых параметров входят следующие пункты:
- Выбор языка - в виджете представлены следующие языки - Русский, Английский, Казахский, Португальский, Испанский.
- Текущий этаж - в данном параметре необходимо проставить цифру текущего этажа. Эта настройка будет зависеть оттого, как будет настроена точка установки постамата в редакторе карт.
- Чекбокс (галочка) “Показывать навигацию прокладки маршрута” - включает/выключает отображение навигации на карте.
- Чекбокс (галочка) “Режим ожидания” - включает/выключает работу в виджете режима ожидания (в данном случае подразумевается что будет включена заставка пока устройство не будет использовано).
- Картинка режима ожидания - позволяет загрузить изображения, которое будет использоваться в качестве заставки в режиме ожидания.
- Видео режима ожидания - позволяет загрузить, которое будет использоваться в качестве заставки в режиме ожидания.
- Время выхода в режим ожидания - необходимо прописать время, через которое будет активироваться режим ожидания.
Примечание 1:указанное время будет рассчитываться виджетом в секундах.
- Карты - позволяет выбрать одну из загруженных карт.
Примечание 1: карту можно загрузить из личного кабинета. Но, перед этим пользователь должен загрузить саму карту в личный кабинет из устройства. Примечание 2:при добавлении карты, в имени добавляемой карты должно обязательно вначале названия фигурировать текстовая часть: “adpLOGO…”. Это ограничение касается не только карт, но и всех графических элементов (картинок, иконок, логотипов).
После добавления карты необходимо нажать кнопку “Сохранить карту”. На этой же страницы нажимаем кнопку “Применить настройки”. И в конце нажимаем по центру кнопку “Сохранить”.
Скачать/загрузить файл настроек
Также в приложении есть возможность выгрузить и загрузить настройки. Выгрузить и загрузить настройки можно по специально выделенным кнопкам: “Скачать файл настроек” и “Загрузить файл настроек”. Скачанные файлы с конфигурациями будут в формате “.json”. Загружать файл конфигурации также необходимо в формате “.json”.
Редакторы в виджете
После выставления всех вышеописанных настроек, пользователь может переходить в редакторы.
В виджете в разделе “Общие настройки, настройки карт”, доступно два редактора:
- Редактор карт
- Редактор навигации
В каждом из этих двух редакторов пользователь должен также произвести настройку параметров.
Перехода к редактору карт
Перейдя в раздел “Редактор карт”, может использовать и редактировать уже загруженную карту. Для её использования пользователю необходимо проскроллить страницу вниз до конца. Внизу будет размещена карта с описанием ”Последняя загруженная карта, все предыдущие карты стираются”. В данном случае мы выбираем не последнюю загруженную копию, а последнюю загруженную карту.
Примечание 1: виджет будет воспринимать и работать только с последней загруженной картой. Все предыдущие карты будут удалены, как и указано в описании карты. Примечание 2: также пользователь может удалить старую карту и загрузить новую карту нажав на кнопку “Удалить”.
Примечание 3: слева внизу есть отдельно вынесенная кнопка, которая позволяет выйти из редактора. Она так и называется - “Выйти из редактора”.
Редактор карт
После того как пользователь зайдет в редактор карт и найдет загруженную карту, ему необходимо один раз кликнуть по нужной карте, чтобы открыть редактор карт.
Данную страницу можно разделить на две части:
- Загруженная карта, с которой можно взаимодействовать (расположена справа).
- Список параметров (расположен слева).
Для того чтобы начать работать с заполнением карты в редакторе, необходимо выбрать указанный участок на карте. Это делается кликом на этом участке
Примечание 1: выделенный участок будет подсвечиваться.
После выделения необходимо перейти к списку параметров (расположен слева) и пройтись по всем пунктам этого списка.
Параметр настройки магазинов
Пользователю необходимо выбрать каждое помещение на карте и выставить ему свой номер.
Выбрав нужное помещение и перейдя к параметру “Настройка магазинов” пользователю необходимо проскроллить мышкой вниз, до конца.
Название магазина должны быть обязательно цифровым.
Например: 1.1.0, 1.2.0,1.3.0 и так далее. В таком типе обозначений обозначений указывается первой цифрой номер этажа, а второй номер помещения на этаже.
Примечание 1: обязательно должны быть заполнены все пустые помещения на этаже, в том числе технические помещения, уборные и прочие типы помещения. Ненужно заполнять только лестницы, для них вынесена отдельная настройка, о которой будет написано ниже.
Примечание 2: рекомендуется создать отдельный текстовый файл и заносить данные сразу и в карту и в документ. Также рекомендуется сделать скриншот карты с заполненным списком помещений. В разделе “Редактор навигации” (будет описан позже) при заполнении нужных данных пользователю будет проще с этими дополнительными материалами.
Параметр настройки лестниц
Пользователю необходимо на карте отметить лестницу, выделив ее одинарным кликом мышки и указать ее номер. Это делается схожим образом, как с помещениями, только сама нумерация немного изменяется. В данном случае каждая лестница обозначается одной цифрой по порядку.
Номера присваиваются стандартным способом: 1,2,3,4 и так далее.
Категории с типами помещений
Следующие семь пунктов идущие по списку в редакторе карт - категории типов помещений. Они также заполняются по аналогии: выделяется помещения (участок) на карте и ему присваивается категория.
В эти пункты входят следующие категории:
- Аптеки
- Молитвенные комнаты (Намазхана)
- Кафе и рестораны
- Банкоматы
- Эскалаторы
- Лифты
- Туалеты
- Паркинг
- Гардеробы
Примечание 1: на главной странице виджета можно выбрать категорию, кликнув по ней. После этого на карте можно будет увидеть подсвеченные помещения принадлежащие этой категории. Подсвеченные помещения будут помечены желтым цветом. Примечание 2: на главной странице указана еще одна дополнительная категория “Входы/Входы”, которой нет в списке. Это единственная категория которая не может быть настроена системно и была.
Категории с типами магазинов
Следующие 6 пунктов идущие по списку в редакторе карт - категории типов магазинов.. Они также заполняются по аналогии: выделяется помещения (участок) на карте и ему присваивается категория.
Примечание 1: внутри редактора карт данный список категорий представлен на английском языке. В интерфейсе виджета, они будут отображены на русском языке (с помощью UI) слева от карты. Такое решение было реализовано из-за технических ограничений.
В эти пункты входят следующие категории:
- Cloth (одежда)
- Cosmetics (косметика)
- Footwear (обувь)
- Accessories (аксессуары)
- Electronics (электроника)
- Supermarkets (супермаркеты)
- Cafes (кафе)
- Children's Entertainment (детские комнаты)
Примечание 1: на главной странице виджета можно выбрать категорию, кликнув по ней. После этого на карте можно будет увидеть подсвеченные помещения принадлежащие этой категории. Подсвеченные помещения будут помечены желтым цветом.
После того, как пользователь выставит все настройки, ему необходимо сначала нажать кнопку “Сохранить” в редакторе карт.
После добавления карты необходимо нажать кнопку “Сохранить карту”. На этой же страницы нажимаем кнопку “Применить настройки”. И в конце нажимает по центру кнопку “Сохранить”.
Примечание 1: если пользователь хочет вернуться на предыдущий шаг, ему необходимо назвать кнопку “Отменить”.
Взаимодействие с картами
После настройки карт, пользователю необходимо перезайти в редактор карт и найти свою настроенную карту.
Базовый вариант ненастроенной карты будет внизу (последняя загруженная пустая карта). Вверху будет расположена уже заполненная карта.
Примечание 1: у каждой карты есть свой присвоенный Id в названии. При редактировании карты у него изменяется id на 1 значение.
Редактор навигации
Перейдя в редактор навигаций пользователь увидит стартовую страницу этого редактора:
Данная страница делится также на две основные части:
- Список этажей с возможностью добавить этажи (вверху слева) - позволяет выбрать один из имеющихся этажей или добавить дополнительный этаж для размещения помещений.
- Настройки (справа на весь экран): включает в себя наименование этажа (необходимо указать цифру этажа) и список магазинов (прописывается как в редакторе карт: 1.1.0, 1.2.0,1.3.0 и так далее).
Примечание: в списке магазинов необходимо все номера указывать через запятую.
Далее пользователю необходимо нажать кнопку “Далее” для перехода на следующий шаг.
После нажатия кнопки далее виджет предложит выбрать схему для этажа (будет представлен список карт с ID). Пользователю нужно ориентироваться на ID схемы, который указан в названии схемы.
Следующим этапом пользователю необходимо нажать кнопку “Выбрать схему этажа” и нажать кнопку “Далее”.
Параметры карты
При переходе в раздел “Параметры карты” пользователю откроется новое окно со списком параметров и схемой карты.
В список параметров настройки карты входит:
- Настройка сетки - позволяет с помощью ползунков настроить параметры сетки.
Примечание: сетку нужно накладывать на картинку так, чтобы границы изображения максимально совпадали с границами сетки (по возможности).
Примечание 1: при постановке точки магазина на сетке рекомендуется отстраивать сетку так, чтобы точка магазина занимала клетку полностью или хотя бы большую часть клетки. Иначе, возможна ситуация что из-за миниатюрности выставленной точки пользователь не сможет активировать ее кликом. Это актуально для таких помещений как павильоны. Это приведет к неудобству при использовании виджетом пользователями в ТЦ.
- Установка стен - позволяет установить стены в качестве ограничений на карте. Выставить стены можно одиночным кликом по клетке или растянуть линию стены зажав левую кнопку мыши.
Примечание 1: границы стен выделены на карте темно-синим цветом.
Примечание 2: границы нужны для того, чтобы при построении маршрута виджет не прокладывал маршрут по самому короткому пути, через структурные элементы (сквозь магазины). При правильной установки стен маршрут будет проложен внутри установленных границ.
- Установка постамата - позволяет выставить на карте постамат, от которого будет рассчитываться. Установленная метка постамата подсвечивается оранжевым цветом.
- Установка лестниц - позволяет установить на карте точку для лестницу/эскалатор на карте. При этом у пользователя будет выбор как обозначить лестницу при построении маршрута:
- Покинуть этаж по этой лестнице
- Вернуться на этаж по этой лестнице
- Пропустить (не присваивать не одни из вариантов)
Установка магазинов - позволяет выставить точку, где располагается магазин. Чтобы установить магазин на карте необходимо кликнуть на пустое место и выбрать номерной элемент на карте.
Примечание 1: для правильной нумерации и выставления позиций магазина рекомендуется использовать скриншот и текстовый документ, который упоминался ранее в редакторе карт, для облегчения процесса заполнения карты.
Примечание 2: после всех настроек пользователю необходимо нажать “Сохранить”.
Примечание 3: для каждого магазина можно присвоить ближайшую лестницу.
После добавления карты необходимо нажать кнопку “Сохранить карту”. На этой же страницы нажимаем кнопку “Применить настройки”. И в конце нажимаем по центру кнопку “Сохранить”.
Построение навигации
Построение навигации на карте происходит следующим образом: на настроенной карте пользователь выбирает нужное заведение на любом этаже. Далее слева вверху пользователю необходимо нажать на кнопку “Проложить маршрут”.
После нажатия на кнопку “Проложить маршрут” на экране появиться оранжевая линия из точек ведущих к конечной точке на этаже.
Если же конечная цель находиться на другом этаже, то путь будет построен сначала до ближайшей к конечной точке лестницы и далее уже к самому помещению.
При этом справа вверху, где можно выбрать этаж карты появляется оповещение: “Перейдите на другой этаж”.
Возможности списков категорий
Для технической (неизменяемой) категорий которые расположены справа, есть возможность подсветить на карте все объекты, которые относятся к категории. Для этого пользователю необходимо просто кликнуть на название технической категории.
Для настраиваемых категорий (расположены слева от карты), есть возможность просмотреть список помещений, принадлежащих категории. Для этого, пользователь также должен кликнуть по названию категории.
Раздел “Настройки готовых карт и помещений”
Внутри самого раздела пользователь может выбрать любое помещение (магазин), выделить его одним кликом и слева увидеть информацию о нем.
Примечание: если после клика по магазину информации о магазине не высветилась, ее необходимо прописать в настройках. Как это сделать будет описано ниже.
После перехода в раздел “Настройки готовых карт и помещений” пользователю слева откроется окно с настройками UI (отображаемых параметров). Это окно можно разделить на два блока:
- Настройка помещений
- Настройка логотипа
Настройки помещений
Открыв блок “Настройка помещений”, пользователь сможет настраивать параметры каждого конкретного помещения. Для настройки каждого помещения в первую очередь его выделить на карте кликнув один раз по нему на карте.
После выделения конкретного помещения пользователю необходимо переключиться на левую сторону с параметрами.
В список параметров которые может настроить пользователь в блоке “Настройка помещения”:
- Строка поиска магазина - можно вписать название необходимого магазина и он подсветиться на карте.
- Список этажей - указывается номер этажа, который можно выбрать для настройки.
- Номер помещения - указывается номер присвоенный помещению на карте.
- Иконка “Скрыть номер помещения” - отображается иконкой в виде глаза, и позволяет скрыть номер помещения. То есть при нажатии на помещение выделения оранжевым цветом не будет.
- Название магазина - прописывается название магазина, которое потом будет указано на карте.
- Размер текста названия - позволяет с помощью ползунка выставить размер шрифта названия.
- Пример изменения размер шрифта - окно с текстом, которое при изменении ползунка размера текста меняет шрифт.
- Тип категории - можно присвоить одну из категорий во всплывающем окне. Список этих категорий отображается на английском внутри виджета, но далее, при выводе на экран пользователю текст будет преобразован на русский язык. В список категорий входит - cloth/одежда, cosmetics/косметика, footwear/обувь, accessories/аксессуары, electronics/электроника, supermarkets/супермаркеты.
- Описание - прописывается описание магазина, которая будет отображено в блоке “описание” внизу карточки магазина.
- Размер текста описания - позволяет с помощью ползунка выставить размер шрифта описания.
- Пример изменения размер шрифта - окно с текстом, которое при изменении ползунка размера текста меняет шрифт.
- Изображение - позволяет вставить ссылку и загрузить с помощью одноименной кнопки изображение.
После настройки всех параметров необходимо нажать кнопку “Сохранить карту”, в разделе “Общие настройки, настройки карт”. На открывшейся странице нажимаем кнопку “Применить настройки”. И в конце нажимае по центру кнопку “Сохранить”.
Настройка логотипа
Перейдя в блок “Настройка лого” пользователю откроется список с измененными параметрами.
В список параметров данного блока входят следующие параметры:
- Строка поиска магазина - можно вписать название необходимого магазина и он подсветиться на карте.
- Список этажей - указывается номер этажа, который можно выбрать для настройки.
- Загрузить новые логотипы - позволяет загрузить новые логотипы, из списка логотипов загруженного в качестве контента на профиль.
Примечание 1: карту можно загрузить из личного кабинета. Но, перед этим пользователь должен загрузить саму карту в личный кабинет из устройства.
Примечание 2: при добавлении карты, в имени добавляемой карты должно обязательно вначале названия фигурировать текстовая часть: “adpLOGO…”. Это ограничение касается не только карт, но и всех графических элементов (картинок, иконок, логотипов).
- Список логотипов - окно, в котором находятся все загруженные логотипы.
Примечание: чтобы установить необходимый логотип на карту, его необходимо с помощью курсора переместить на карту, в ячейку необходимого помещения.
- Страницы со списками логотипов- позволяет переключать страницы со списками логотипов.
После настройки всех параметров необходимо нажать кнопку “Сохранить карту”, в разделе “Общие настройки, настройки карт”. На открывшейся странице нажимаем кнопку “Применить настройки”. И в конце нажимаем по центру кнопку “Сохранить”.
Работа с логотипами на карте
После загрузки всех нужных логотипов их можно перенести на карту. Перенести логотип можно с помощью мышки, переведя курсор на нужный логотип и перетянув его на нужное помещение.
Если пользователь перенес не тот логотип на карту, он может его удалить нажав на иконку “Удалить”, в виде крестика на карте. После нажатия на иконку появится окно, которое требует подтвердить действие.
Примечание 1: удаляя логотип с карты вы не удаляете его со своего аккаунта. То есть в списке логотипов его можно будет найти и использовать для нанесения на карту снова.
Если пользователь хочет удалить логотип из списка логотипов он также может нажать иконку “Удалить”, в виде крестика. После нажатия на эту иконку, также появится всплывающее окно, которое требует подтвердить действие.
Примечание 1: удаляя логотип из списка логотипов пользователь полностью удаляет его из аккаунта. То есть пользователю необходимо будет снова загрузить логотип в список логотипов.
После настройки всех параметров необходимо нажать кнопку “Сохранить карту”, в разделе “Общие настройки, настройки карт”. На открывшейся странице нажимаем кнопку “Применить настройки”. И в конце нажимае по центру кнопку “Сохранить”.
Режим списка
Пользователь может изменить отображение карты, убрав карту и сделав список с категориями и магазина. Это можно сделать нажав на строку “Режим списка”.
После нажатия на кнопку “Режим списка” пользователю откроется новое окно. В него будут входить:
- Список неизменяемых категорий (первая строка)
- Список с изменяемыми категориями (вторая строка)
- Список со всеми помещениями и их описанием
Список неизменяемых категорий
Список неизменяемых категорий - список, в котором нельзя добавить категории, но можно скрыть (не подсвечивать на карте) категорию, нажав по нужной иконке в виде глаза или изменить ее описание нажав иконку в виде карандаша.
Нажав на иконку в виде карандаша раскроется окно настройки категории.
В список настраиваемых параметров входит:
- Возможность добавить описание на разных языках (Русский, Казахский, Английский).
- Возможность загрузить иконку категории (действуют те же правила загрузки как и для любого другого контента с изображением. То есть необходимо чтобы имя файла начиналось со слова “adpLOGO…”)
- Возможность скрыть категорию
- Сохранить настройки
- Закрыть окно не сохраняя параметры
Список изменяемых категорий
Список изменяемых категорий - список, в котором можно добавить категории, но можно скрыть (не подсвечивать на карте) категорию, нажав по нужной иконке в виде глаза или изменить ее описание нажав иконку в виде карандаша.
Нажав на иконку в виде карандаша раскроется окно настройки категории.
В список настраиваемых параметров входит:
- Возможность добавить описание на разных языках (Русский, Казахский, Английский).
- Возможность загрузить иконку категории (действуют те же правила загрузки как и для любого другого контента с изображением. То есть необходимо чтобы имя файла начиналось со слова “adpLOGO…”)
- Возможность скрыть категорию
- Сохранить настройки
- Закрыть окно не сохраняя параметры
Отличается данный список категорий , возможностью добавить новую категорию нажав на иконку "+". При нажатии на иконку пользователю достаточно только ввести название категории и нажать сохранить. Если он захочет отредактировать информацию о категории, можно это сделать способом описанным выше.
Список со всеми помещениями и их описанием
В данный список входят все помещения и описания к ним.
В этом списке можно найти информацию о:
- Возможности добавить помещение и магазин
- Нумерации помещения на этаже
- Названии магазина
- Размере шрифта магазина
- Выборе категории для магазина
- Возможность отредактировать описание по иконке карандаша, как в пунктах описанных выше
- Размер шрифта описания
- Ссылка на изображение магазина
- Возможность загрузить изображения для описания магазина (распространяются те же правила, что и на все картинки внутри виджета. То есть, все картинки должны иметь в имени “adpLOGO…”).
- Возможность скрыть (не выделять на карте) магазин.
- Возможность удалить помещение и магазин
После настройки всех параметров необходимо нажать кнопку “Сохранить карту”, в разделе “Общие настройки, настройки карт”. На открывшейся странице нажимаем кнопку “Применить настройки”. И в конце нажимае по центру кнопку “Сохранить”.
Изменения точек постаматов
Чтобы не делать все вышеописанные манипуляции снова, пользователь может просто клонировать и виджет и изменить точку, где будет находиться постамат с картой магазина.
Для этого пользователю достаточно выйти из виджета, выделить его и справой стороны в сайдбаре нажать иконку "Клонировать".
При нажатии на кнопку “Клонировать” пользователю необходимо будет указать сколько копий виджета ему нужно в цифровом значении. В итоге система сделает нужное количество клонов виджета в списке виджетов.
Завершение настроек
После завершения всех вышеописанных настроек виджет можно добавлять в трансляцию с расписанием.
