====== Развертывание и настройка LSS визуализатора ======
===== Введение =====
В этой инструкции мы опишем, как подключить **LSS визуализатор** к произвольному сайту.
Мы подготовим статичную HTML страницу, запускающую работу **LSS визуализатора** и опишем доступные варианты настроек.
Для работы **визуализатора** потребуется **web-сервер**, например Apache.
===== Развертывание LSS визуализатора =====
==== Инструкция по развертыванию ====
* Установить **web-сервер**, например Apache
* Скачать **архив базового примера**, разархивировать его в соответствующую папку **web-сервера**
* обратиться посредством **web-браузера** к соответствующей странице **web-сервера**
==== Структура базового примера ====
* папка **lss-viewer** содержит JavaScript реализацию **LSS визуализатора**
* файл **index.html** описывает вариант простейшего подключения **LSS визуализатора**
базовый пример развертывания LSS визуализатора
* файл **server.xml** заглушка, выполняющая роль **LSS сервера**
=== о файле index.html ===
* **div FormPanelMain** задает место в HTML документе, где будут развернуты элементы **LSS визуализатора**
* настройка **lss.config['urlServer']** задает url точки входа сервера, куда визуализатор будет направлять свои запросы
=== о сервере (файле server.xml) ===
В нашем демонстрационном примере подключения **LSS визуализатора** нет реализации сервера, поэтому тут вместо сервера мы используем заглушку, которая на любой запрос визуализатора будет отвечать ошибкой авторизации (пользователь не залогинен в системе, необходимо пройти аутентификацию). В качестве заглушки в примере используется статичный XML файл со следующем содержимым:
==== Работа базового примера ====
* Начав работу, **LSS визуализатор** обращается к **серверу** (его адрес задается настройкой **lss.config['urlServer']**), с запросом - получить описание главной экранной формы (ее имя по умолчанию **formMain**).
* В ответ, вместо описания формы, приходит сообщение об ошибке авторизации.
* По этой ошибке визуализатор выводит стандартный диалог аутентификации.
===== Настройка LSS визуализатора =====
Расширенный пример развертывается аналогично базовому. От базового отличается наличием дополнительных настроек.
==== Настройка цветовой схемы приложения ====
**LSS визуализатор** поставляется со следующими, готовыми и пригодными для использования цветовыми схемами: **black**, **red**, **m**, **rzd**
Для задания цветовой схемы необходимо в файле **index.html** в разделе **Конфигурирование LSS визуализатора** задать значение настроечной константы:
lss.config['appColorScheme']='red'; // цветовая схема приложения, возможные значения black, red, m, rzd
==== Настройка аутентификации приложения ====
Когда визуализатор получает от сервера сообщение об ошибке авторизации, он автоматически вызывает режим аутентификации пользователя. Возможны 2 режима работы аутентификации:
* Можно настроить внешний вид встроенного в LSS визуализатор **диалога аутентификации**.
* Можно указать url адрес **внешней HTML страницы**, выполняющей аутентификацию.
По умолчанию используется встроенный **диалог аутентификации**. Доступны следующие настройки:
* **width** - ширина диалога (по умолчанию '380px')
* **height** - высота диалога (по умолчанию '220px')
* **iconUrl** - url иконки аутентификации
* **iconWidth** - ширина иконки аутентификации (по умолчанию '128px')
* **title** - заголовок окна аутентификации (по умолчанию 'Представьтесь')
* **loginUrl** - url адрес слоя фона, поверх которого показывать стандартный диалог аутентификации
* **loginOpacity** - прозрачность слоя фона (по умолчанию '0.35')
// Настройка встроенного диалога аутентификации
var confDialogLogin=lss.config['dialogLogin'];
confDialogLogin['loginUrl']='logoscreen/';
confDialogLogin['loginOpacity']='0.35';
confDialogLogin['title']='Hello';
Если используется **внешняя страница** аутентификации, ее адрес можно задать следующим образом:
lss.config['mainFormLoginUrl']='url адрес страницы аутентификации';
по завершении аутентификации, эта страница должна выполнить редирект обратно на **LSS визуализатор**.
==== Подключение дополнительных иконок ====
В **LSS визуализаторе** иконки используются в кнопках, пунктах меню, деревьях, таблицах. К иконкам обращаются по имени. Иконки с одним и тем-же именем по разному выглядят на светлом и темном фоне.
Есть набор иконок, включенный в визуализатор по умолчанию. При запуске визуализатора стандартный набор иконок можно пополнить.
=== Подключение иконки png и gif ===
Необходимо подготовить 2 иконки: для отображения на светлом и на темном фоне. Подключать следует так:
lss.icons.registerIconImg('iconname', 'url до иконки на светлом фоне', 'url до иконки на темном фоне');
=== Подключение иконок svg ===
Иконка SVG автоматически может подстраиваться для отображения как на светлом, так и на темном фоне. Для этого используются **макроподстановки** обозначения цветов, автоматически корректирующиеся в зависимости от используемой **цветовой схемы** приложения:
* **#000000** - на светлом фоне **основной цвет** используемой **цветовой схемы** приложения, на темном фоне **белый**
* **red** - на светлом фоне **красный**, на темном фоне **белый**
* **green** - на светлом фоне **зеленый**, на темном фоне **белый**
* **blue** - на светлом фоне **синий**, на темном фоне **белый**
* **yellow** - на светлом фоне **желтый**, на темном фоне **белый**
Подключать SVG иконки следует так:
lss.icons.registerIconSvg('ok','');
в качестве параметра задается содержимое SVG иконки с использованием макросов для привязки отображения к цветовой схеме и фону.
===== Демонстрационные примеры и ссылки =====
* демонстрация работы **базового** примера подключения LSS визуализатора у нас на сайте: [[https://lss.m-cti.ru/storage/example/viewer/001]]
* демонстрация работы **расширенного** примера подключения LSS визуализатора у нас на сайте: [[https://lss.m-cti.ru/storage/example/viewer/002]]