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

Публикация № 1144129

Разработка - Практика программирования

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

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

Введение

Прочитав публикации Самый примитивный 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:
.cf 86,18Kb
24.10.19
17
.cf 86,18Kb 17 Скачать

Специальные предложения

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

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

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

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

См. также

daСклонение: склонение ФИО, должностей, чисел, прилагательных, существительных на языке 1С + ТестЦентр Промо

Универсальные функции v8 1cv8.cf Абонемент ($m)

Функция предназначена для склонения выражений, которые часто требуется при формировании печатных форм договоров и прочих печатных форм. Функция склоняет по падежам ФИО, должности, числительные, валюты, единицы измерения, предметы. Также функция склоняет глаголы и прилагательные по числам и родам и существительные по числам. Имеется режим определения рода переданного выражения. Поддержка форматной строки для вывода результата. Функция не использует внешние библиотеки и веб-сервисы, написана на чистом языке 1С, и поэтому легко встраивается в любую конфигурацию или внешнюю обработку. Правила склонения оформлены в виде таблицы и могут быть легко изменены при необходимости.

1 стартмани

14.02.2015    99311    96    daMaster    88    

Сравнение реального дохода со средним доходом из API.HH.RU

Зарплата Управленческие v8 v8::СПР ЗУП3.x УУ Абонемент ($m)

Внешняя обработка на управляемой форме для 1С:Предприятие 8.3 по интеграции с HH.RU используя HH REST API. Ключевые функции: получение списка вакансий по должностям (Ключ для работы не нужен); расчет среднего дохода; Тестирование проводилось на платформе 1С:Предприятие 8.3 (8.3.13.1513) Зарплата и управление персоналом, редакция 3.1 (3.1.11.68) совместно с API.HH.RU.

1 стартмани

11.11.2019    3679    4    solaru    2    

Конфигурация для рекламного агентства

Управление услугами и сервисом Управление взаимоотношениями с клиентами (СRM) Производство готовой продукции (работ, услуг) Управление взаимоотношениями с клиентами (СRM) Производство готовой продукции (работ, услуг) v8 Реклама, PR и маркетинг УУ Абонемент ($m)

Данная конфигурация выполнена для решения тестового задания: Цель задания: 1) Понять, на каком из клиентов сколько мы заработали;  2) Понять, по какому виду СМИ сколько мы заработали;  3) Проследить по каждой услуге: у кого за сколько купили и кому за сколько продали, с возможностью перейти в соответствующий документ. Реализовано с помощью: 1. Справочники - контрагенты, номенклатура 2. Документы - Поступление услуг, реализация услуг 3. Отчеты - отчет по контрагентам, номенклатуре и движений.

1 стартмани

21.05.2019    3983    0    solaru    0    

Загрузка номенклатуры в УТ 10.3 из Excel файла с генерацией штрихкодов

Загрузка и выгрузка в Excel Обработка справочников Оптовая торговля Розничная торговля Учет ТМЦ Оптовая торговля Розничная торговля Учет ТМЦ v8 УТ10 Россия Абонемент ($m)

Обработка позволяет генерировать новые номенклатурные позиции на основе данных из файла Excel с последующей генерацией штрихкодов (ШК). Может быть полезна при больших поступлениях товаров на склад, где ручное создание и присваивание штрихкода  (ШК) может занимать много времени.

1 стартмани

24.03.2017    7557    6    solaru    0    

Под капотом управляемых форм

Практика программирования v8 1cv8.cf Бесплатно (free)

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

26.08.2013    260928    0    Evil Beaver    266    

[NotaBene] Универсальный отчет по таблице значений

Практика программирования v77::ОУ v77::БУ v77::Расчет 1cv7.md Россия Абонемент ($m)

1C v.7.7 Готовое решение. Не требует настройки. Не требует допрограммирования. Данная обработка решает часто встречающуюся задачу вывода в "красивом" виде таблицы значений (полученной, например, из запроса). Поддерживается произвольное группирование данных, отключение/включение группировок, в т.ч и создание "шахматок" (типа "продажи понедельно"). Обработка может использоваться как и в отладочных целях (для нормального просмотра ТЗ), так и в составе вполне рабочих отчетов. По крайней мере, я неоднократно клиентам данную обработку ставил вместо того, чтобы каждый раз писать замороченные выводы данных. И клиенты довольны, и мне - проще...

2 стартмани

07.05.2007    27966    1    CheBurator    61