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

24.10.2019 2 Comments

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

,


    СхемаОбработка.png
    Схема.png
В статье рассмотрен пример использования 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С:Предприятие.

Related Posts

2 Comments

  1. Terve!R

    А где еще можно увидеть пример? Непонятно что за живые картинки)

    Возможно, стоило в публикацию добавить gif этой схемы. По статичным картинкам непонятно.

    Reply ↓
  2. blackhole321
    А где еще можно увидеть пример? Непонятно что за живые картинки)

    В тексте статьи есть все необходимое. Ctrl+C -> Ctrl+V. Изображение svg создаете сами ну и раскрашиваете по своему усмотрению.

    Reply ↓

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *