Развертывание и настройка LSS визуализатора

Введение

В этой инструкции мы опишем, как подключить LSS визуализатор к произвольному сайту. Мы подготовим статичную HTML страницу, запускающую работу LSS визуализатора и опишем доступные варианты настроек.

Для работы визуализатора потребуется web-сервер, например Apache.

Развертывание LSS визуализатора

Инструкция по развертыванию

Установить web-сервер, например Apache
Скачать архив базового примера, разархивировать его в соответствующую папку web-сервера
обратиться посредством web-браузера к соответствующей странице web-сервера

Структура базового примера

папка lss-viewer содержит JavaScript реализацию LSS визуализатора
файл index.html описывает вариант простейшего подключения LSS визуализатора

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Content-Language" content="ru"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>базовый пример развертывания LSS визуализатора</title>
	<link rel="stylesheet" type="text/css" href="lss-viewer/lss/cssdojo/main.css"/>
	<link rel="stylesheet" type="text/css" href="lss-viewer/lss/main.css"/>

<!-- подключаем сжатую версию Dojo Toolkit-->
	<script type="text/javascript">
		dojoConfig = {
			cacheBust: true,
			parseOnLoad: false,
			async: true,
			baseUrl: 'lss-viewer/dojocompressed',
			packages: [
				{
					name: 'lss',
					location: '../lss'
				}
			]
		};
	</script>
	<script type="text/javascript" src="lss-viewer/dojocompressed/dojo.js.uncompressed.js"></script>
	<script type="text/javascript" src="lss-viewer/dojocompressed/lss-dojo.js"></script>
</head>
<body>
<!-- Выделяем место под размещение элементов LSS визуализатора -->
	<div id="FormPanelMain"></div>

	<script>
		require(
			[
				'lss',
				'dojo/domReady!'
			],
			function() {
				// Конфигурируем визуализатор
				lss.config['urlServer']='server.xml';	// url адрес точки входа сервера для обработки запросов LSS визуализатора

				// запускаем работу визуализатора
				lss.application.go();
			}
		);
	</script>
</body>
</html>

файл server.xml заглушка, выполняющая роль LSS сервера

о файле index.html

div FormPanelMain задает место в HTML документе, где будут развернуты элементы LSS визуализатора
настройка lss.config['urlServer'] задает url точки входа сервера, куда визуализатор будет направлять свои запросы

о сервере (файле server.xml)

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

<root type="lss">
  <response name="disconnected"/>
</root>

Работа базового примера

Начав работу, 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#000000">  <path d="M 28.28125 6.28125 L 11 23.5625 L 3.71875 16.28125 L 2.28125 17.71875 L 10.28125 25.71875 L 11 26.40625 L 11.71875 25.71875 L 29.71875 7.71875 Z"/></svg>');

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

Демонстрационные примеры и ссылки

демонстрация работы базового примера подключения LSS визуализатора у нас на сайте: https://lss.m-cti.ru/storage/example/viewer/001
демонстрация работы расширенного примера подключения LSS визуализатора у нас на сайте: https://lss.m-cti.ru/storage/example/viewer/002