"Живые" картинки со 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 1015 20.05.20 06:56 Сейчас в теме
(4) (1) ну вот представьте что вам нужно сделать карту земли со странами на сайте. С выделением границ при наведении и каким-нибудь действием. Из 1с.

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

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

См. также

Работа с картой. Кадастровый учет (Росреестр). Тематические карты Промо

WEB Рабочее место v8 v8::УФ 1cv8.cf Абонемент ($m)

Внешняя обработка для работы с картами в 1С. Получения изображения с публичной кадастровой карты России, построения тематических карт

5 стартмани

31.08.2017    14894    10    vipchep    0    

Интеграция 1С с промышленным оборудованием

Интеграция Бесплатно (free)

Эффективность управленческой информации в производственном процессе зависит от данных, собираемых на нижних уровнях. Про автоматизацию получения этих данных с использованием технологии OPC (OLE for process control) на конференции Infostart Event 2018 Education рассказал Юрий Коноваленко.

06.09.2019    7871    0    user642664_yurkeshk    12    

Загрузка изображений с поисковых сайтов сети Интернет в 1С

Обработка справочников WEB Оптовая торговля Розничная торговля Оптовая торговля Розничная торговля v8 v8::ОУ УТ10 УТ11 Абонемент ($m)

Обработка загрузки изображений из интернета в 1С:Предприятие. Платформа 1С:Предприятие версий 8.2 и 8.3.

10 стартмани

13.10.2015    37929    153    premierex    133    

Автоматическая загрузка классификатора адресов КЛАДР

Обработка справочников WEB v8 УТ10 Россия Абонемент ($m)

Обработка автоматически загружает классификатор с сайта www.gnivc.ru, распаковывает и загружает все регионы в информационную базу.

1 стартмани

02.09.2015    23025    39    kolos    1    

Пример использования REST API Яндекс Диска Промо

WEB v8 1cv8.cf Абонемент ($m)

Пример использования REST API Яндекс Диска: чтение диска, добавление каталога, загрузка файла, скачивание файлов или каталогов, удаление файлов или каталогов.

1 стартмани

26.06.2018    20335    32    MKFreeUser    14    

Загрузка товаров с Яндекс.Маркет

Обработка справочников WEB v8 УТ10 Абонемент ($m)

Обработка предназначена для загрузки товаров (их описаний, свойств, изображений) с торговой площадки Яндекс.Маркет в базу Управление Торговлей 11. В отличие от других подобных обработок Вам самим не придется парсить страницы Яндекс.Маркет и решать сопутствующие этому процессу проблемы (бан, капча, поиск прокси-серверов, длительное ожидание результатов при больших объемах данных), так как все данные уже загружены на наш сервер и готовы для использования. Обновление данных осуществляется раз в месяц. Таким образом, все что Вам нужно - подключиться раз в месяц к нашему сервису и получить обновленный ассортимент товаров.

1 стартмани

12.01.2015    34638    80    Sirruf    81    

Банк-Информ для 1С (8.3)

WEB v8 1cv8.cf Россия Абонемент ($m)

Универсальная внешняя обработка для автоматизации запросов к сервису ФНС: Банк-Информ. Проверка на наличие у контрагента заблокированных ФНС расч. счетов. Предотвращение "зависания" денег при платежах контрагенту, у которого приостановлены банковские операции по расчетным счетам.

1 стартмани

05.11.2014    11014    4    ZOMI    5    

Загрузка курсов валют

Обработка справочников WEB v8 1cv8.cf Абонемент ($m)

Загрузка актуальных курсов валют с web - сервиса Сбербанка. На обычных и управляемых формах.

1 стартмани

15.10.2014    15711    18    miller-adm    3    

Обмен файловыми базами данных через Yandex диск Промо

WEB v8 Россия Абонемент ($m)

Выполнение операций обмена с Yandex диском для файловых БД, по протоколу WebDav, в автоматическом или ручном режимах.

1 стартмани

11.06.2018    14703    5    slimper    1    

Загрузка картинок для номенклатуры (google image API)

Обработка справочников WEB v8 1cv8.cf Абонемент ($m)

Обработка предназначена для поиска и загрузки картинок номенклатуры.

1 стартмани

04.06.2014    14218    34    OVladius    4    

Быстрый ввод контрагентов и организаций по данным ФНС

Обработка справочников WEB v8 КА1 БП2.0 УТ10 УПП1 УНФ Абонемент ($m)

Обработка для быстрого создания карточки контрагента/организации по данным ЕГРЮЛ/ЕГРИП.

1 стартмани

20.05.2014    40670    249    Sirruf    71    

Загрузка картинок с сайта из 1С (HTTPСоединение)

WEB v8 Абонемент ($m)

В этой статье я объясню как сохранять картинки сайта с помощью 1С. Для этого буду использовать встроенные объекты 1С (HTTPСоединение, HTTPЗапрос, HTTPОтвет).

1 стартмани

10.02.2014    46277    201    opx    25    

Сервер push сообщений “Push0k“ 18.05 Промо

WEB v8 1cv8.cf Абонемент ($m)

Аналог других “мессенджеров“. Позволяет практически все то же самое, что и другие решения. За исключением смайлов, эмодзи, голосовой и видео связи. Основное отличие от других решений, открыта и доступна для изменения серверная и клиентская часть месенджера. Общедоступной серверной части нет, за серверную часть отвечаете вы сами.

1 стартмани

19.12.2017    15375    12    PloAl    20    

Менеджер по работе с Google календарем

Универсальные обработки WEB v8 v8::УФ УТ10 Розница ДО Абонемент ($m)

Обработка на управляемых формах для работы с календарями google, событиями календарей и контактами.

1 стартмани

06.02.2014    33943    112    sapervodichka    54    

Перенос данных Яндекс Маркет -> УТ11

WEB v8 УТ11 Абонемент ($m)

Внешняя обработка загрузки товаров из каталога Яндекс Маркет в УТ 11 (11.1.2.22 - 11.1.9.51)

1 стартмани

22.01.2014    17695    24    sdn-1    21    

Парсинг картинок с Лепры

WEB v8 1cv8.cf Абонемент ($m)

Модно нынче стало парсить сайты и качать картинки. Моя обработка ищет gif-ки на Лепре. Обработка предельно простая в изпользовании.

1 стартмани

12.09.2013    13786    3    kser87    8    

Построение маршрута доставки с расчётом расстояния для любой базы УФ Промо

Универсальные обработки WEB Оптовая торговля Оптовая торговля v8 v8::УФ 1cv8.cf Абонемент ($m)

Графическое изображение маршрутного листа по картам гугл. Работает на любой конфигурации с управляемыми формами. Использует новую версию api google-карт от 13.02.2018 года под IE11.

10 стартмани

24.02.2018    31133    40    KorotkovRV    16    

Редактор MXL – вырезание группировок в любом отчете

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

Часто встречал у пользователей желание быстрым способом убрать из отчета MXL ненужный уровень группировок. Но подходящего инструмента не нашел, поэтому написал свой.

1 стартмани

11.04.2013    19146    3    fixin    19    

Внешняя печатная форма для проверки контрагентов с помощью Контур.Фокус

WEB v8 1cv8.cf Абонемент ($m)

Помогает быстро найти сведения по контрагенту: Реквизиты, информацию по учредителю, данные ЕГРЮЛ / ЕГРИП, запрос на выписку, финансовые данные, госконтракты, арбитражные дела, список связанных организаций

1 стартмани

17.03.2013    25468    63    kstukov    21    

Калькулятор стоимости доставки "Деловых линий"

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

Калькулятор стоимости доставки "Деловых линий". Была поставлена задача интегрировать калькулятор в 1с.

1 стартмани

15.02.2013    13905    12    John_d    6    

Проверка контрагентов по ИНН и КПП через веб-сервис ФНС (внешняя) Промо

Обработка справочников WEB v8 1cv8.cf Россия Абонемент ($m)

Обработка проверяет контрагентов по ИНН и КПП через веб-сервис ФНС на наличие регистрации в ЕГРН. Может выполняться в любых типовых конфигурациях, при наличии справочника "Контрагенты" и реквизитов "ИНН" и "КПП"

1 стартмани

25.12.2014    37099    129    Willforre    12    

Загрузка адресного классификатора в базу 1С теперь с сайта www.gnivc.ru

Универсальные обработки Обработка справочников WEB v8 Россия Абонемент ($m)

При помощи данной обработки Вы можете загрузить адресный классификатор "КЛАДР" с сайта www.gnivc.ru прямо в вашу базу 1С.

1 стартмани

21.10.2012    18919    10    dimabenyash    34    

Вытягивание многоэтажных списков MXL

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

Вытянуть таблицу MXL со списком в одну строчку для Excel

1 стартмани

19.01.2012    14985    0    fixin    11    

Цветной журнал документов

Обработка документов Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Разработка, которая поможет вам скрасить вашу жизнь и сохранить зрение. Создан журнал документов с возможностью их цветового выделения по определенному реквизиту (организации, складу, контрагенту и т. д.).

1 стартмани

23.11.2009    14078    3    Svetozor    43    

Настройка рекламной кампании Яндекс.Директ на 30000 ключевых фраз за 60 минут - теперь это реально! Промо

WEB v8 Реклама, PR и маркетинг Россия Абонемент ($m)

Конфигурация для настройки Яндекс.Директа.

10 стартмани

20.10.2016    27316    51    avalakh    10    

Парсинг и анализ топ рейтинга Самиздата (samlib.ru) v2.02 (СКД, XPath, Управляемые и обычные формы) Промо

WEB v8 v8::УФ v8::СКД 1cv8.cf Россия Абонемент ($m)

Хочется почитать хорошую книгу? На сайте Самиздата samlib.ru публикуются сотни интереснейших книг... и тысячи, читать которые далеко не так интересно.

2 стартмани

16.12.2010    27054    26    milkers    16    

Импорт из EXCEL и других источников (xls, xlsx, xlsb, ods, sxc, dbf, mxl, csv, clipboard, sql) в 1С Промо

Загрузка и выгрузка в Excel Внешние источники данных Обработка справочников Практика программирования Обработка документов v8 КА1 БП2.0 УТ10 Розница Беларусь Украина Россия БУ Абонемент ($m)

-Наглядная, контролируемая загрузка иерархической номенклатуры с различными атрибутами и картинками из прайсов, файлов табличного вида xls,xlsx,xlsb,ods,sxc,dbf,mxl,csv произвольной структуры по указанному диапазону строк, а также из буфера обмена и внешнего SQL-источника данных в основные, дополнительные и пользовательские реквизиты. -Вариантный поиск номенклатуры. -Создание сопутствующей справочной информации. -Создание документов в национальной/иностранной валюте. -Обычное и управляемое приложение. Файл и Клиент-Сервер.

1 стартмани

16.03.2012    356524    2840    StepByStep    732    

Маршруты в GoogleMaps для типовых конфигураций Промо

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

Данное решение позволяет проложить маршрут, используя GoogleMaps API без внесения изменений в конфигурацию

1 стартмани

21.08.2014    29189    95    RocKeR_13    13    

Просмотр данных системы Платон на картах Google Промо

Универсальные обработки WEB v8 1cv8.cf Автомобили, автосервисы Транспорт, автопарки, такси Абонемент ($m)

Обработка для просмотра предполагаемых треков движения транспортного средства на карте Google согласно данным, предоставляемым системой Платон в формате CSV. Работает под 8.2 и 8.3, обычное и управляемое приложение, может подключаться к типовым конфигурациям в качестве внешней обработки.

1 стартмани

15.04.2016    29379    18    anig99    8    

Загрузка документов из системы Emex через веб-сервисы (Коммерция-Автологистика) Промо

Внешние источники данных WEB v8 v8::ОУ УТ10 УУ Абонемент ($m)

Обработка предназначенная для дилеров системы Emex, для загрузки документов из программы Коммерция(Автологистика) в 1С 8.2 Управление торговлей 10. Для загрузки используются веб-сервисы программы Автологистика.

10 стартмани

11.08.2014    19314    2    desarz    1