Инструкция по работе с виджетом навигации: различия между версиями

Текущая версия от 09:40, 2 декабря 2025

Описание ситуации

Данный виджет выводит на устройства (панели под управлением Windows OS и Linux OS) информацию о навигации внутри определенного здания. Виджет требует предварительной настройки, после которой он будет корректно работать на обозначенных выше панелях.

Серверная логика

Серверная часть отсутствует. Вся работа виджета проводится внутри личного кабинета SmartPlayer и информация выводится на устройства благодаря функционалу платформы и личного кабинета.

Добавление виджета в личный кабинет

Чтобы добавить данный виджет в личный кабинет, пользователю необходимо запросить у специалиста команды технической поддержки архив с содержимым. Он будет предоставлен в формате .zip-архива.

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

Пример отображения раздела «Контент» в личном кабинете

В разделе «Контент» необходимо перенести данный виджет из локального хранилища в личный кабинет. После того как пользователь перенесет виджет в личный кабинет, он отобразится в списке с контентом.

Пример отображения переноса виджета в личном кабинете SmartPlayer

Главная страница виджета

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

Пример отображения главной страницы виджета

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

Пример отображения иконки для перехода в настройки виджета

Также, на главное странице виджета если он предварительно был настроен доступно превью настройки карты, которое включает в себя:

карту помещения (с обозначением панели на ней) занимающая большую часть главной страницы;

переключатель с нумерацией этажей (если этажей больше 1), который расположен в правой верхней части главной страницы;

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

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

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

Пример отображения иконки клавиатуры для поиска объектов

Кнопка «Настройки»

Перейдя на страницу «Настройки» пользователь может настроить следующие параметры:

разрешение — можно выбрать разрешения для виджета. Доступно: Full HD (1920X1080) или 4K(3840X2160);
время сессии - прописать значение длительности рабочей сессии. Измеряется в секундах;
чекбокс (галочка) «Показывать навигацию прокладки маршрута» — активирует прокладку маршрута в виджете;
кнопка «Удалить» карту — позволяет удалить добавленную в виджет карту;
поле с объектами — прописать значение с для объекта. По умолчанию значение: [object Object];

Ниже будут описаны два отдельных блока настроек вынесенных в виде кнопок:

Редактор карт.
Редактора навигации.

Пример отображения настроек виджета навигации

Редактора карт

Данный блок настройки параметров будет доработан ко второй итерации виджета. На данный момент недоступен.

Редактора навигации

При нажатии на кнопку «Редактор навигации» открывается новая страница, в которой пользователь увидит:

список этажей (если этажи были преднастроены) — отображаются добавленные этажи с описанием;
кнопку «Добавить этаж» — кнопка, позволяющая добавить этаж в список. Заполнение параметров для этажа будет описано в следующем разделе;
кнопка «Сохранить карты» — позволяет сохранить настроенные этажи и карты;
кнопка «Выйти из редактора» — позволяет вернутся обратно к главному экрану без сохранения изменений.

Любой добавленный этаж можно удалить кликнув на иконку в виде корзины.

Пример отображения иконки для удаления этажа

Процесс настройки этажа в виджете

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

название этажа — проставить числовое значение этажа;
список кабинетов — поле для текстового ввода названия типов кабинетов доступных на этаже. Разделителем для поля является запятая (",");
список категории комнат — поле для текстового ввода названия типов комнат доступных на этаже. Разделителем для поля является запятая (",");
список общих категорий комнат — поле для текстового ввода названия категорий комнат доступных на этаже. Разделителем для поля является запятая (",").

После заполнения всех полей необходимо нажать на кнопку «Далее» чтобы перейти к следующему шагу

Пример отображения полей для создания этажа

Следующим этапом будет добавление различных типов SVG-иконок отображающих помещения. Если иконки отсутствуют то будет текст категории помещения и рядом с ним кнопка «Загрузить изображение», которое позволит добавить SVG-файл из устройства в личный кабинет

После заполнения всех полей необходимо нажать на кнопку «Далее» чтобы перейти к следующему шагу. Если необходимо вернуться на предыдущий шаг нажмите на кнопку «Назад».

Пример отображения страницы с загруженными SVG-иконками

Далее переходим на следующую страницу настройки. Здесь будет вестись работа со схемами этажа. Если она есть - пользователь сможет ее выбрать. Если схем отсутствует, ее можно добавить кликнуть по кнопке «Выбрать схему этажа».

После заполнения всех полей необходимо нажать на кнопку «Далее» чтобы перейти к следующему шагу. Если необходимо вернуться на предыдущий шаг нажмите на кнопку «Назад».

Пример отображения кнопки «Выбрать схему этажа»

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

настроить сетку — отображает параметры, которые позволяют управлять сеткой: количество строк сетки, количество столбцов сетки, размер клеток, смещение по оси X, смещение по оси Y. Все параметры настраиваются ползунками;

установка стен — с помощью кликов по сетке позволяет построить стены на ячейках сетки. Закрашенный квадрат показывает что блок стены для виджета установлен;

Пример отображения работы системы установки стен в виджете

смещение точек — отображает смещение точек в виджете по осям X и Y. Смещение можно настроить значением в пикселях (px);

Пример отображения смещение точек на карте

установка постамата — с помощью клика на карте позволяет установить маркер постамата с виджетом от которого будет строиться маршрут;

установка лестниц — даёт возможность обозначить лестницу на карте. При выставлении лестницы всплывает модальное окно, в котором определяется статус лестницы как альтернативный маршрут. Нужно выбрать назначение лестницы - по ней можно покинуть этаж или вернуться;

Пример отображения работы с лестницами на карте

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

|

Завершив настройку всех параметров пользователю необходимо нажать на кнопку «Сохранить» на экране сетки. Если необходимо вернуться на предыдущий шаг нажмите на кнопку «Назад».

Пример отображения нужной кнопки «Сохранить»

Завершение настройки виджета

После завершения работ по настройке виджета пользователь должен нажать на кнопку «Применить настройки» внизу экрана и еще ниже кликнуть на кнопку «Сохранить».

Пример отображения кнопок для завершения настройки виджета

Загрузка и скачивание настроек

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

Пример отображения кнопок для загрузки и выгрузки настроек

Управление настроенным виджетом

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

Пример отображения маршрута до нужного объекта

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

Пример отображения подсказки с указателями перехода на другой этаж

При выборе фильтров по объектам доступна два типа отображения:

если объект на карте один до него строится маршрут на карте;

если объектов поиска на этаж несколько они подсвечиваются внутри виджета.

Пример отображения подсветки подходящих под описание объектов

Добавление настроенного виджета в трансляцию

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

Видеоинструкция

Инструкция по работе с виджетом навигации

Дополнительная информация

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

Пример отображения вкладки «Обсуждения» на wiki-странице

Также дополнительную информацию можно узнать на странице Как взаимодействовать пользователю с разделом "Обсуждения"

@@ Строка 1: / Строка 1: @@
 == '''Описание ситуации''' ==
-Данный виджет выводит на устройства информацию с расписанием занятий, при этом позволит виджету работать с необходимым фоновым контентом в рамках функционала личного кабинета SmartPlayer.
+Данный виджет выводит на устройства (панели под управлением Windows OS и Linux OS) информацию о навигации внутри определенного здания. Виджет требует предварительной настройки, после которой он будет корректно работать на обозначенных выше панелях.
 == '''Серверная логика''' ==
-Серверная часть отсутствует. Данный виджет все данные для вывода получает через Excel-файл. После получения информации, обрабатывает данные и выводит их в трансляцию через функционал личного кабинета SmartPlayer.
+Серверная часть отсутствует. Вся работа виджета проводится внутри личного кабинета SmartPlayer и информация выводится на устройства благодаря функционалу платформы и личного кабинета.
 == '''Добавление виджета в личный кабинет''' ==
 Чтобы добавить данный виджет в личный кабинет, пользователю необходимо запросить у специалиста команды технической поддержки архив с содержимым. Он будет предоставлен в формате .zip-архива.
-[[File:Пример_виджета.png|thumb|center| Пример виджета в формате .zip-архива|800px]]
+[[File:Пример виджета навигации.png|thumb|center| Пример виджета в формате .zip-архива|800px]]
 После этого, пользователь должен авторизоваться в личном кабинете и перейти в раздел «Контент».
 [[File:Раздел_контент_личного_кабиента.png|thumb|center| Пример отображения раздела «Контент» в личном кабинете |800px]]
 В разделе «Контент» необходимо перенести данный виджет из локального хранилища в личный кабинет. После того как пользователь перенесет виджет в личный кабинет, он отобразится в списке с контентом.
-[[File:Отображение_виджета расписания.png|thumb|center| Пример отображения переноса виджета в личном кабинете SmartPlayer|800px]]
+[[File:Виджет_навигации.png|thumb|center| Пример отображения переноса виджета в личном кабинете SmartPlayer|800px]]
 == '''Главная страница виджета''' ==
 После переноса виджета для первичной настройки пользователю необходимо дважды кликнуть по иконке виджета. Данное действие перенесет его на главную страницу.
-[[File:Виджет_стартовая_страница.png|thumb|center| Пример отображения главной страницы виджета|800px]]
+[[File:Главная_страница_виджета_навигации.png|thumb|center| Пример отображения главной страницы виджета|800px]]
 На главной странице виджета пользователь может кликнуть по иконке в виде шестеренки, чтобы перейти в настройки виджета.
-[[File:Настройка_виджета_занятий.png|thumb|center| Пример отображения иконки для перехода в настройки виджета|800px]]
+[[File:Настройка_виджета_навигации.png|thumb|center| Пример отображения иконки для перехода в настройки виджета|800px]]
+Также, на главное странице виджета если он предварительно был настроен доступно превью настройки карты, которое включает в себя:
+* карту помещения (с обозначением панели на ней) занимающая большую часть главной страницы;
+[[File:Карта_помещений.png|thumb|center| Пример отображения карты помещений|800px]]
+* переключатель с нумерацией этажей (если этажей больше 1), который расположен в правой верхней части главной страницы;
+[[File:Переключатель_этажей.png|thumb|center| Пример отображения переключателя этажей |800px]]
+* объекты фильтрации для быстрого построения маршрута (коворкинг, принтер, гардероб и прочие), которые при клике отрисуют маршрут до ближайшего объекта. Располагается под списком этажей.
+[[File:Виджет_и_фильтрация.png|thumb|center| Пример отображения объектов фильтрации в виджете |800px]]
+* клавиатура с ручным вводом, позволяющая искать необходимые на карте объекты. Работает на двух языках: русский и английский. Отображается в виде строки с иконкой лупы в правой нижней части экрана. По умолчанию находится в скрытом состоянии, по клику разворачивается на половину экрана настройки.
+[[File:Клавиатура_виджета.png|thumb|center| Пример отображения иконки клавиатуры для поиска объектов|800px]]
 == '''Кнопка «Настройки»''' ==
+Перейдя на страницу «Настройки» пользователь может настроить следующие параметры:
+* разрешение — можно выбрать разрешения для виджета. Доступно: Full HD (1920X1080) или 4K(3840X2160);
+* время сессии - прописать значение длительности рабочей сессии. Измеряется в секундах;
+* чекбокс (галочка) «Показывать навигацию прокладки маршрута» — активирует прокладку маршрута в виджете;
+* кнопка «Удалить» карту — позволяет удалить добавленную в виджет карту;
+* поле с объектами — прописать значение с для объекта. По умолчанию значение: [object Object];
+{{Note|Ниже будут описаны два отдельных блока настроек вынесенных в виде кнопок:
+# Редактор карт.
+# Редактора навигации.|warh}}
+[[File:Список_настроек_навигации.png|thumb|center| Пример отображения настроек виджета навигации|800px]]
+=== '''Редактора карт''' ===
+{{Note|Данный блок настройки параметров будет доработан ко второй итерации виджета. На данный момент недоступен.|warn}}
+=== '''Редактора навигации''' ===
+При нажатии на кнопку «Редактор навигации» открывается новая страница, в которой пользователь увидит:
+* список этажей (если этажи были преднастроены) — отображаются добавленные этажи с описанием;
+* кнопку «Добавить этаж» — кнопка, позволяющая добавить этаж в список. Заполнение параметров для этажа будет описано в следующем разделе;
+* кнопка «Сохранить карты» — позволяет сохранить настроенные этажи и карты;
+* кнопка «Выйти из редактора» — позволяет вернутся обратно к главному экрану без сохранения изменений.
+[[File:Страница_редактора_навигации изм.png|thumb|center| Пример отображения управления этажами|800px]]
+{{Note|Любой добавленный этаж можно удалить кликнув на иконку в виде корзины.
+[[File:Удаление_этажа.png|thumb|center| Пример отображения иконки для удаления этажа|800px]]|warn}}
+===='''Процесс настройки этажа в виджете''' ====
+Если пользователь добавил новый этаж то в правой части экрана настроек виджета появится набор полей, который будут первым шагом настройки навигации. В список полей которые необходимо заполнить входят:
+* название этажа — проставить числовое значение этажа;
+* список кабинетов — поле для текстового ввода названия типов кабинетов доступных на этаже. Разделителем для поля является запятая (",");
+* список категории комнат — поле для текстового ввода названия типов комнат доступных на этаже. Разделителем для поля является запятая (",");
+* список общих категорий комнат — поле для текстового ввода названия категорий комнат доступных на этаже. Разделителем для поля является запятая (",").
+{{Note|После заполнения всех полей необходимо нажать на кнопку «Далее» чтобы перейти к следующему шагу|warn}}
+[[File:Поля_для_этажа.png|thumb|center| Пример отображения полей для создания этажа|800px]]
+Следующим этапом будет добавление различных типов SVG-иконок отображающих помещения. Если иконки отсутствуют то будет текст категории помещения и рядом с ним кнопка «Загрузить изображение», которое позволит добавить SVG-файл из устройства в личный кабинет
+{{Note|После заполнения всех полей необходимо нажать на кнопку «Далее» чтобы перейти к следующему шагу. Если необходимо вернуться на предыдущий шаг нажмите на кнопку «Назад».|warn}}
+[[File:Загрузка_иконки.png|thumb|center| Пример отображения страницы с загруженными SVG-иконками|800px]]
+Далее переходим на следующую страницу настройки. Здесь будет вестись работа со схемами этажа. Если она есть - пользователь сможет ее выбрать. Если схем отсутствует, ее можно добавить кликнуть по кнопке «Выбрать схему этажа».
+{{Note|После заполнения всех полей необходимо нажать на кнопку «Далее» чтобы перейти к следующему шагу. Если необходимо вернуться на предыдущий шаг нажмите на кнопку «Назад».|warn}}
+[[File:Выбор_схемы_этажа_.png|thumb|center| Пример отображения кнопки «Выбрать схему этажа»|800px]]
+Последним этапом будет многоуровневая настройка схемы самого этажа, которые будут расположены в правом верхнем углу. Здесь пользователь сможет:
+* настроить сетку — отображает параметры, которые позволяют управлять сеткой: количество строк сетки, количество столбцов сетки, размер клеток, смещение по оси X, смещение по оси Y. Все параметры настраиваются ползунками;
+[[File:Настройка_сетки.png|thumb|center| Пример отображения настроек сетки|800px]]
+* установка стен — с помощью кликов по сетке позволяет построить стены на ячейках сетки. Закрашенный квадрат показывает что блок стены для виджета установлен;
+[[File:Установка_стен.png|thumb|center| Пример отображения работы системы установки стен в виджете|800px]]
+* смещение точек — отображает смещение точек в виджете по осям X и Y. Смещение можно настроить значением в пикселях (px);
+[[File:Смещение_точек.png|thumb|center| Пример отображения смещение точек на карте|800px]]
+* установка постамата — с помощью клика на карте позволяет установить маркер постамата с виджетом от которого будет строиться маршрут;
+[[File:Постамат.png|thumb|center| Пример отображения постамата на карте|800px]]
+* установка лестниц — даёт возможность обозначить лестницу на карте. При выставлении лестницы всплывает модальное окно, в котором определяется статус лестницы как альтернативный маршрут. Нужно выбрать назначение лестницы - по ней можно покинуть этаж или вернуться;
+[[File:Модальное_окно для лестниц.png|thumb|center| Пример отображения работы с лестницами на карте|800px]]
+* установка кабинетов — при наличии свободных слотов для кабинетов позволяет выставить их на карте и заполнить информацию о кабинетах.
+[[File:Работа_с_кабинетами.png|thumb|center| Пример отображения настройки кабинетов |800px]]|
+{{Note|Завершив настройку всех параметров пользователю необходимо нажать на кнопку «Сохранить» на экране сетки. Если необходимо вернуться на предыдущий шаг нажмите на кнопку «Назад».
+[[File:Нужная_кнопка_сохранить.png|thumb|center| Пример отображения нужной кнопки «Сохранить»|800px]]|warn}}
 == '''Завершение настройки виджета''' ==
-После завершения работ по настройке виджета пользователь должен нажать на кнопку «Применить настройки» в правой нижней части экрана.
+После завершения работ по настройке виджета пользователь должен нажать на кнопку «Применить настройки» внизу экрана и еще ниже кликнуть на кнопку «Сохранить».
-[[File:Применение_настрок.png|thumb|center| Пример отображения кнопки «Применить настройки»|800px]]
+[[File:Применить_и_сохранить_навигация.png|thumb|center| Пример отображения кнопок для завершения настройки виджета|800px]]
-Далее виджет растянется на весь экран и пользователь должен нажать на кнопку «Сохранить», внизу по центру экрана.
-[[File:Сохран.png|thumb|center| Пример отображения кнопки «Сохранить»|800px]]
 == '''Загрузка и скачивание настроек''' ==
-В процессе взаимодействия с настройками виджета пользователь может загрузить или выгрузить настройки виджета. Каждое из указанных действий можно сделать с помощью отдельных иконок в интерфейсе виджета. Иконки расположены в виджете снизу по центру.
+В процессе взаимодействия с настройками виджета пользователь может загрузить или выгрузить настройки виджета. Каждое из указанных действий работает с помощью отдельных иконок в интерфейсе виджета. Иконки расположены в виджете снизу по центру.
-[[File:Иконки_загрузки.png|thumb|center| Пример отображения иконок в настройках виджета |800px]]
+[[File:Скачка_и_загрузка_навигации.png|thumb|center| Пример отображения кнопок для загрузки и выгрузки настроек|800px]]
+== '''Управление настроенным виджетом''' ==
+Как только виджет будет настроен пользователь сможет проверить его работу. Необходимо выбрать объект и посмотреть маршрут на карте. В виджете кроме маршрута также появится подсказка с описанием действия.
+[[File:Подсказка_с_описание.png|thumb|center| Пример отображения маршрута до нужного объекта|800px]]
+{{Note|Если объект находится на другом этаже то в подсказке отобразится указанием какую лестницу или лифт использовать чтобы добраться до конечной точки назначения.
+[[File:Подсказка_переход.png|thumb|center| Пример отображения подсказки с указателями перехода на другой этаж|800px]]|warn}}
+При выборе фильтров по объектам доступна два типа отображения:
+* если объект на карте один до него строится маршрут на карте;
+[[File:Один_объект.png|thumb|center| Пример отображения маршрута до нужного объекта|800px]]
+* если объектов поиска на этаж несколько они подсвечиваются внутри виджета.
+[[File:Подсветка_объектов.png|thumb|center| Пример отображения подсветки подходящих под описание объектов|800px]]
 == '''Добавление настроенного виджета в трансляцию''' ==
 Чтобы полностью ознакомиться с работой данной функциональности, пользователю необходимо запустить трансляцию с расписанием и добавить в качестве контента данный виджет. Чтобы ознакомиться с описанными ранее шагами по созданию трансляции и расписания рекомендуется просмотреть следующие статьи из Wiki SmartPlayer:
@@ Строка 31: / Строка 99: @@
 * [[Раздел "Расписание"]]
 == '''Видеоинструкция''' ==
-[https://vk.com/video-227547238_456239103 Инструкция по работе с виджетом «Расписание занятий»]
+[https://vk.com/video-227547238_456239103 Инструкция по работе с виджетом навигации]
 == '''Дополнительная информация''' ==
 Если данная статья не помогает использовать функционал по назначению или после прочтения остаются вопросы, их можно озвучить в разделе "Обсуждения" вверху страницы.
-[[File:Обсуждение_расписания_занятий.png|thumb|center| Пример отображения вкладки «Обсуждения» на wiki-странице |800px]]
+[[File:Обсуждение_виджета_навигаций.png|thumb|center| Пример отображения вкладки «Обсуждения» на wiki-странице |800px]]
 Также дополнительную информацию можно узнать на странице [[Как взаимодействовать пользователю с разделом "Обсуждения"]]

Аноним

Поиск

Инструкция по работе с виджетом навигации: различия между версиями

Пространства имён

Ещё

Действия на странице

Текущая версия от 09:40, 2 декабря 2025

Содержание

Описание ситуации

Серверная логика

Добавление виджета в личный кабинет

Главная страница виджета