"Живые" картинки со Snap.SVG

24.10.19

Интеграция - WEB-интеграция

В статье рассмотрен пример использования http-сервисов для визуализации данных

Скачать файлы

Наименование Файл Версия Размер
"Живые" картинки со Snap.SVG:
.cf 86,18Kb
32
.cf 86,18Kb 32 Скачать

Введение

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

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

О том, что из этого получилось – читайте ниже.

Системные требования

Платформа 1С:Предприятие, версии не ниже 8.3.5

Описание механизма

Механизм не отличается большой оригинальностью и суть его заключается в том, что содержимое виджета представляет собой html-страницу,  которая возвращается при обращении к http-сервису 1С:Предприятие. В процессе отображения страницы клиент обращается к http-сервису 1С:Предприятие для загрузки изображения, которое хранится в виде макета в теле конфигурации. Через определенные промежутки времени, клиент, средствами javascript  генерирует http-запросы, возвращающие обновленное состояние виджета. Затем, производится изменение изображения в соответствии с полученным состоянием.

Для манипуляций с изображением воспользуемся популярной библиотекой - Snap.SVG. При достаточно сложной логике изменения изображения в зависимости от состояния, возможно появление большого количества кода javascript, размещенного в теле страницы или отдельных макетах, что в совокупности с отсутствием встроенных в платформу средств разработки и отладки javascript кода, может сделать процесс создания виджета сложным и неудобным. Во избежание озвученной проблемы, мы будем генерировать javascript код для изменения изображения автоматически, при поступлении запроса с клиента, а затем передавать его для выполнения клиенту вместе с состоянием.  Также, для уменьшения количества этого кода, клиент будет хранить свое состояние и передавать его вместе с запросом. Таким образом, если состояние с момента последнего запроса не изменилось, необходимость в генерации и выполнении кода отсутствует.

Реализация

Формирование HTML страницы

Создадим обработку ВиджетSVG, которая будет отвечать за формирования html-страницы содержимого виджета.       

Для использования в качестве основы нашей страницы создадим макет нижеследующего содержания:

 

фрагмент

<meta http-equiv="X-UA-Compatible" content="IE=11"/>

отвечает за возможность использования svg из поля html документа.

фрагмент

<script src="{{UrlБиблиотекиSnapSVG}}snap.svg-min.js"></script>

подключает библиотеку Snap.SVG. Поскольку url размещения библиотеки может отличаться от url виджета, предусмотрим возможность его настройки.

фрагмент

	<style>
		html, body { margin:0; padding:0; overflow:hidden }
		svg { position:fixed; top:0; left:0; height:100%; width:100% }
	</style>

позволяет масштабировать изображение на весь экран и пропорционально изменять его размеры при изменении размеров окна.

Для размещения изображения на странице используется элемент

<svg id="drawing" style="width:100%;height:100%"></svg>

Для обеспечения необходимой функциональности, в конец страницы добавлен нижеследующий скрипт:

 

фрагмент

var geval = eval;

Необходим для того, чтобы при выполнении динамического кода использовалась глобальная область видимости.

Объекты state и newState используются для хранения соответственно текущего и нового состояний страницы.

		// Текущее состояние параметров
		let state = {};
		// Новое состояние, полученное при обновлении
		var newState;

фрагмент

var drawing = Snap('#drawing');

создает область рисования и подключает ее к ранее созданному элементу svg, а фрагмент

		// Перед загрузкой

		// Загрузка
		Snap.load("{{UrlИзображения}}", function(f) {

			drawing.append(f.select("#{{ИмпортируемыйЭлемент}}"));
			
			// После загрузки
			
		});

осуществляет загрузку изображения, а также добавление необходимой части изображения в область рисования.

Вместо комментариев

// Перед загрузкой

И

// После загрузки

Может быть размещен код javascript.

Фрагмент

var myVar = setInterval(myTimer, {{ПериодОбновления}});

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

		function myTimer() {
	  
			xhr = new XMLHttpRequest();
			var url = "{{UrlСервисаОбновленияДанных}}";
			xhr.open("POST", url, true);
			xhr.setRequestHeader("Content-type", "application/json");
	  
			xhr.onreadystatechange = function () { 
	    
	  			if (xhr.readyState == 4 && xhr.status == 200) {
	        
	        		var json = JSON.parse(xhr.responseText);
	        		newState = json.state;
	        		geval(json.script);
				}
			}

			var data = JSON.stringify(state);
			xhr.send(data);
		}

Выполняет запрос обновлений, передавая в качестве параметра текущее состояние, получение ответа и выполнение кода, сформированного сервером.

Для хранения библиотеки Snap.SVG создадим макет snap_svg_min_js и поместим в него код библиотеки. Для загрузки библиотеки создадим http-сервис, обработчик которого имеет нижеследующий вид:

Функция БиблиотекаSnapSVGПолучить(Запрос)
	
	Ответ = Новый HTTPСервисОтвет(200);
	Ответ.УстановитьТелоИзДвоичныхДанных(Обработки.ВиджетSVG.ПолучитьМакет("snap_svg_min_js"));
	Возврат Ответ;
	
КонецФункции

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

 

Для формирования результирующего содержимого страницы используется функция  ПолучитьHTML. Как можно увидеть, обработка содержит переменные с глобальной областью видимости, соответствующие параметрам html-шаблона. Значения этих переменных должны быть заполнены до вызова функции ПолучитьHTML.

Формирование обновлений

Для реализации механизма обновлений создадим обработку ОбновлениеДанныхSVG.

 

Функция ПолучитьТекущееСостояние используется для получения текущего состояния, переданного клиентом, а функция ПолучитьТелоОтвета для формирования тела ответа.

Генерация кода JavaScript

Для динамической генерации javascript создадим обработку КомандыSVG, которая будет генерировать фрагменты кода javascript при вызове соответствующих методов

 

Также, для генерации элементов атрибутов и стилей создадим соответствующие общие модули

 
 

Таким образом, мы сможем генерировать фрагменты кода javascript примерно следующим образом:

 

 

Создание виджета

Создание http-сервиса

Дабы не смешивать код, относящийся к виджету с кодом, относящимся к ранее созданной библиотеки, создадим новый http-сервис ДемоВиджетыSVG (mywidgets).

Определим для него три шаблона url, соответствующие html-странице (ВиджетSVG, /sheet), изображению (СхемаSVG, /sheet.svg) и обновлению данных (ОбновлениеДанных, /update).

Создание изображения

В качестве среды, для создания изображений может быть использован любой редактор, позволяющий сохранять результаты в формате svg или в формате, который может быть конвертирован в этот формат. В качестве визуализируемого компонента, под влиянием этой публикации и доклада Юрия Мороза, была выбрана технологическая схема ректификационной установки. Для создания схемы использовался online редактор draw.io, поскольку в нем уже имеется библиотека технологического оборудования. В дальнейшем, полученный svg файл был модифицирован редактором inkscape.

В качестве хранилища исходного изображения используется общий макет СхемаSVG. Для отправки изображения на клиент используется нижеследующий код (обработчик шаблона СхемаSVG).

 

Формирование HTML страницы

Формирование html-страницы производится в обработчике шаблона ВиджетSVG.

 

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

 

Формирование обновлений

Формирование обновлений реализовано в обработчике шаблона ОбновлениеДанных, примерно следующим образом:

 

Тестирование

После публикации информационной базы на web-сервере, протестировать результаты можно обратившись к http-сервису из браузера, либо из обработки, содержащей поле html-документа со ссылкой на http-сервис.

 
 

Как можно увидеть, внешний вид элементов схемы динамически изменяется во времени.

Заключение

Надеюсь, что настоящая публикация будет полезным примером использования http-сервисов в 1С:Предприятие.

Snap SVG виджеты визуализация javascript

См. также

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме. Без существенных изменений типовой конфигурации. Проверено с брендами: Интеграция 1С и GEELY Интеграция 1С и HAVAL Интеграция 1С и KIA Интеграция 1С и FORD Интеграция 1С и LADA ГАРАНТИЯ 100% ВНЕДРЕНИЯ!

36000 руб.

03.08.2020    15663    9    17    

9

Модуль для обмена "1С:Предприятие 8. УАТ. ПРОФ" с FortMonitor

WEB-интеграция 8.3.8 Конфигурации 1cv8 Автомобили, автосервисы Беларусь Украина Россия Казахстан Управленческий учет Платные (руб)

Расширение предназначено для конфигурации "1С:Предприятие 8. Управление Автотранспортом. ПРОФ". Функционал модуля: 1. Заполнение регистров сведений по подсистеме "Мониторинг", а именно: события по мониторингу, координаты по мониторингу, пробег и расход по мониторингу, текущее местоположение ТС по мониторингу 2. Заполнение путевого листа: пробег по мониторингу, время выезда/заезда, табличная часть ГСМ, места стоянок по геозонам. 3. Отчеты по данным загруженным в регистры сведений. 4. Предусмотрена автоматическая загрузка данных в фоновом режиме (условия работы данной загрузке читайте в описании товара) Модуль работает без включенной константы по настройкам мониторинга. Модуль формы предоставляется с открытым кодом, общий модуль защищен. Любой заинтересованный пользователь, имеет возможность скачать демо-версию расширения.

22656 руб.

25.05.2021    12810    30    8    

10

Интеграция 1С — Битрикс24. Обмен задачами

Сайты и интернет-магазины Интеграция WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 Управленческий учет Платные (руб)

Интеграция 1С и Битрикс24. Разработка имеет двухстороннюю синхронизацию 1С и Битрикс24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (8.3.18.1289). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

5040 руб.

04.05.2021    17430    6    15    

13

[Расширение] БОР-Навигатор.Культура

Зарплата Бюджетный учет WEB-интеграция Обмен с ГосИС Платформа 1С v8.3 Сложные периодические расчеты 1С:Зарплата и кадры государственного учреждения 3 Государственные, бюджетные структуры Россия Бюджетный учет Платные (руб)

Расширение конфигурации, включающее в себя объекты, необходимые для подготовки и сдачи отчета "Штатная численность" системы "БОР-Навигатор.Культура" в программе "1С:Зарплата и кадры государственного учреждения", редакция 3.1.

8400 руб.

01.02.2019    25688    9    0    

7

Интеграция с сервисом vetmanager

WEB-интеграция Платформа 1С v8.3 Бухгалтерский учет 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Внешняя обработка разрабатывалась для загрузки документов из Ветменеджер в 1С: Бухгалтерия 3.0

12000 руб.

02.02.2021    16260    41    49    

22
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. TerveRus 01.11.19 16:48 Сейчас в теме
А где еще можно увидеть пример? Непонятно что за живые картинки)
Возможно, стоило в публикацию добавить gif этой схемы. По статичным картинкам непонятно.
Izumov; утюгчеловек; tsmult; maksa2005; +4 Ответить
2. blackhole321 1303 01.11.19 17:02 Сейчас в теме
А где еще можно увидеть пример? Непонятно что за живые картинки)

В тексте статьи есть все необходимое. Ctrl+C -> Ctrl+V. Изображение svg создаете сами ну и раскрашиваете по своему усмотрению.
3. r2d255 03.01.20 17:33 Сейчас в теме
(2) Изображение чего? В статье только код непонятного назначения.
4. blackhole321 1303 03.01.20 18:29 Сейчас в теме
(3) Того, чего желаете увидеть :) В статье код, который позволяет отображать и работать с изображениями в формате svg.
5. kuzyara 1896 20.05.20 06:56 Сейчас в теме
(4) (1) ну вот представьте что вам нужно сделать карту земли со странами на сайте. С выделением границ при наведении и каким-нибудь действием. Из 1с.

Для этого либо мутим что-то на js и canvas, либо прописываем массив точек границ в векторах svg и оно само всё рисуется кривой линией. Автор же поднял веб-сервис чтобы данные ещё и из 1с интерактивно подтягивались, и в той же 1с отображались. Это если упрощённо)

http://snapsvg.io
http://snapsvg.io/demos/#coffee
6. Yashazz 4707 24.05.20 12:32 Сейчас в теме
Вообще - дельно и интересно.
Для ВебКит новых релизов - много переделывать придётся? Не пробовали?
7. blackhole321 1303 24.05.20 15:47 Сейчас в теме
(6)Не пробовал, но думаю, что переделывать не придется, т.к. вся работа (отдача контента и запрос изменений) ведется через http сервис.
Оставьте свое сообщение