Модуль «Навигация» — интерактивная система навигации для многоэтажных объектов: торговых центров, университетов, бизнес-центров, аэропортов, медицинских комплексов и выставочных площадок. Модуль отображает планы этажей с кликабельными маркерами помещений, встроенной строкой поиска и виртуальной клавиатурой — без единого клика мышью или прикосновения к физической клавиатуре. Три режима работы Режим выбирается при настройке панели и определяет сценарий взаимодействия:

• Поиск (search) — посетитель ищет нужное помещение или арендатора, система подсвечивает его на плане и переключает этаж. На плане пульсирующим зелёным маркером отмечена точка «Вы здесь».
• Маршрут (route) — система прокладывает кратчайший путь от точки «Вы здесь» до выбранного помещения, рисует маршрутную линию на плане и указывает межэтажные переходы (лифт, лестница, эскалатор).
• Просмотр (browse) — план этажа без строки поиска, только переключение этажей и масштаб. Подходит для обзорных стендов.

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

• Маркеры помещений — круглые точки на координатах, заданных при настройке. При выборе или подсветке маркер увеличивается и меняет цвет на акцентный.
• Маршрутная линия — анимированная пунктирная линия вдоль рассчитанного пути.
• Межэтажные узлы — пульсирующие маркеры на точках перехода между этажами.
• Маркер назначения — пульсирующая точка с подписью и логотипом компании (если арендатор привязан к помещению).
• Маркер «Вы здесь» — пульсирующий зелёный маркер на стартовой позиции.

Масштаб плана регулируется кнопками «+» и «−» от 0.4× до 3×. Карусель этажей в нижней части позволяет переключаться между уровнями одним касанием; при прокладке маршрута этажи, задействованные в пути, выделяются отдельным цветом. Поиск с виртуальной клавиатурой Строка поиска в верхней части панели поддерживает ввод с сенсорного экрана. При нажатии на поле открывается встроенная экранная клавиатура:

• Русская и английская раскладки с переключением одной кнопкой.
• Цифровая раскладка со спецсимволами.
• Поиск работает в режиме реального времени — результаты обновляются с каждой введённой буквой.

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

• Категории — плитки с иконками (еда, одежда, услуги и т.д.). Выбор категории фильтрует список.
• Компании — карточки с логотипом и названием арендатора. Клик выбирает помещение и открывает боковую инфо-панель.

Инфо-панель компании выезжает справа и показывает логотип, название и описание. Её содержимое настраивается через Mustache-шаблон — можно добавить режим работы, номер телефона, акционные баннеры. Прокладка маршрута (A*) В режиме «route» модуль использует алгоритм A* для поиска кратчайшего пути по графу узлов навигации. Граф строится администратором: узлы расставляются на плане, соединяются рёбрами с заданными расстояниями. Специальные типы узлов — лифт, лестница, эскалатор — обеспечивают межэтажные переходы. Если путь пролегает через несколько этажей, карусель подсвечивает все задействованные уровни и позволяет просмотреть маршрут на каждом из них. Автосброс по бездействию Если посетитель не взаимодействует с панелью 45 секунд, модуль автоматически возвращается в начальное состояние: сбрасывает поиск, маршрут, масштаб и открывает этаж со стартовой точкой. Это гарантирует, что следующий посетитель увидит чистый экран. Темы и кастомизация CSS Визуальное оформление управляется через шесть встроенных цветовых пресетов:

• Светлый (дневной интерьер), тёмный (ночной/имиджевый), зелёный, тёплый бежевый, корпоративный синий, высококонтрастный чёрно-белый.

Каждый пресет задаёт набор CSS-переменных: фон, панели, линии, текст, акцент, цвета статусов. Любая переменная переопределяется индивидуально. Дополнительно — CSS-шаблоны через Mustache для заголовка, карусели, навигационной области и карточки компании, что позволяет полностью изменить внешний вид без программирования. Офлайн-режим и автообновление Данные навигационной панели (этажи, помещения, компании, граф узлов) кэшируются в IndexedDB. При недоступности сервера модуль продолжает работу с последним загруженным снимком данных. Актуальные данные подгружаются каждые 5 минут в фоне без перезагрузки страницы. Сценарии применения

• Торговый центр: поиск магазинов по категориям, маршрут к нужному арендатору с указанием лифтов.
• Университет: поиск аудитории или кафедры, план корпуса с этажами, стартовая точка у входа.
• Медицинский центр: навигация по кабинетам и отделениям, указание на лифты и лестницы между этажами.
• Бизнес-центр: поиск компании-арендатора с выводом логотипа и описания в боковой панели.
• Аэропорт / вокзал: обзорный режим зон и терминалов без поисковой строки.
• Выставочный комплекс: поиск стенда участника по названию компании или номеру павильона.