Здравствуйте, пользователи сообщества Хабр.
Цель статьи: Демонстрация реализации дешевого решения для визуализации данных, которое можно применять в системах диспетчеризации.
С чего началось.
На одном из производств энергетического сектора было автоматизировано порядка 20 агрегатов с количеством сигналов более 10000, необходимо было разработать систему диспетчеризации для мониторинга данных АСУ ТП.
В связи с этим, мне было интересно реализовать IT-решение для визуализации данных в виде графиков и видеокадров (мнемосхем). Решение должно быть масштабируемым, кроссплатформенным, простым в использовании, web-приложением. И так, функционал – мнемосхемы, графики. Поехали …
Для разработки мнемосхем необходим графический редактор.
Разрабатывать свой сложно, дорого, поэтому был выбран Visio.
Почему именно Visio?
1 – поддерживает векторную графику;
2 – имеет встроенный редактор vba;
3 — позволяет создавать свою библиотеку графических элементов;
4 — имеет возможность добавить к графическому объекту произвольный набор свойств (см. рис.1)
5- распространённый редактор, много пользователей.
Поэтому идеальным редактором для моих целей стал Visio.
Рис.1.
Тут было проще, сначала рассматривалась библиотека highcharts, но так как она платная,
выбор был сделан в пользу d3.js.
d3.js – очень крутой framework, большие возможности, немного сложен в освоении, но на просторах сети много примеров.
Web-форма “Графики” позволяет просматривать графики на разных временных диапазонах, координатных плоскостях, задавать шкалы и другие возможности.
Для разработки web-приложения выбрана платформа web-программирования ASP.NET, framework ASP.NET MVC, в дальнейшем приложение было переведено на ASP.NET Core MVC.
Итак, как работает приложение?
Приложение получает данные через web api интерфейс и отображает их пользователю в виде графиком и мнемосхем.
Приложение может работать в двух вариантах.
Первый вариант:
Рис.2.
Как было уже сказано, в приложении реализован web api интерфейс, через который оно получает данные, непосредственно получением данных с источников занимаются сервисы данных (программные модули). В первом варианте работы видно, что сервисы реализованы внутри приложения, это удобно когда, например, приложение и источники данных находятся в одной сети.
Второй вариант:
Рис.3
Во втором варианте сервисы – отдельные программные модули, к которым обращается приложение за данными. Второй вариант может использоваться, когда источники и приложение находятся в разных сетях, приложение, например, развернуто на хостинге.
Основным объектом в приложении является Tag – переменная, измеренное значение технологического процесса. Набор методов (например GetTagOnline, GetTagArchive и др.) для работы с тегами реализует web api интерфейс.
Итак, приложение забирает данные с сервисов, подгружает мнемосхему, разработанную пользователем в Visio, и отображает эти данные.
Для анимации графических элементов мнемосхемы используется javascript. Для того, чтобы упростить пользователю разработку функций анимации, в приложении есть небольшая библиотека, которая включает, например следующие функции: printf(Text), SetText(Object, Index, Value), SetBackColor(Object, Index, Value), SetVisible(Object, Value), GetTag(TagName) и др.
Например, функция отображения измеренного значения:
Администрирование, настройка.
Для настройки используются конфигурационные файлы, где пользователь создаёт профили, добавляет сервисы и др. Данное приложение – консольное, может работать как win-сервис.
Приложение использует встроенный кроссплатформенный веб-сервер Kestrel.
Статья называется “Мониторинг данных АСУ ТП и не только.”. Приложение может отображать в принципе любые данные, которые можно представить в виде схемы, диаграммы и т.п.
Всем спасибо, что дочитали, интересна критика, любые отзывы. Спасибо.
На этом всё, ниже несколько картинок работы приложения.
Пример мнемосхемы (была сделана из файла eplan — >autocad ->visio. ):
Графики:
Цель статьи: Демонстрация реализации дешевого решения для визуализации данных, которое можно применять в системах диспетчеризации.
С чего началось.
На одном из производств энергетического сектора было автоматизировано порядка 20 агрегатов с количеством сигналов более 10000, необходимо было разработать систему диспетчеризации для мониторинга данных АСУ ТП.
В связи с этим, мне было интересно реализовать IT-решение для визуализации данных в виде графиков и видеокадров (мнемосхем). Решение должно быть масштабируемым, кроссплатформенным, простым в использовании, web-приложением. И так, функционал – мнемосхемы, графики. Поехали …
Мнемосхемы
Для разработки мнемосхем необходим графический редактор.
Разрабатывать свой сложно, дорого, поэтому был выбран Visio.
Почему именно Visio?
1 – поддерживает векторную графику;
2 – имеет встроенный редактор vba;
3 — позволяет создавать свою библиотеку графических элементов;
4 — имеет возможность добавить к графическому объекту произвольный набор свойств (см. рис.1)
5- распространённый редактор, много пользователей.
Поэтому идеальным редактором для моих целей стал Visio.
Рис.1.
Графики
Тут было проще, сначала рассматривалась библиотека highcharts, но так как она платная,
выбор был сделан в пользу d3.js.
d3.js – очень крутой framework, большие возможности, немного сложен в освоении, но на просторах сети много примеров.
Web-форма “Графики” позволяет просматривать графики на разных временных диапазонах, координатных плоскостях, задавать шкалы и другие возможности.
Платформа для разработки приложения
Для разработки web-приложения выбрана платформа web-программирования ASP.NET, framework ASP.NET MVC, в дальнейшем приложение было переведено на ASP.NET Core MVC.
Как работает приложение
Итак, как работает приложение?
Приложение получает данные через web api интерфейс и отображает их пользователю в виде графиком и мнемосхем.
Приложение может работать в двух вариантах.
Первый вариант:
Рис.2.
Как было уже сказано, в приложении реализован web api интерфейс, через который оно получает данные, непосредственно получением данных с источников занимаются сервисы данных (программные модули). В первом варианте работы видно, что сервисы реализованы внутри приложения, это удобно когда, например, приложение и источники данных находятся в одной сети.
Второй вариант:
Рис.3
Во втором варианте сервисы – отдельные программные модули, к которым обращается приложение за данными. Второй вариант может использоваться, когда источники и приложение находятся в разных сетях, приложение, например, развернуто на хостинге.
Основным объектом в приложении является Tag – переменная, измеренное значение технологического процесса. Набор методов (например GetTagOnline, GetTagArchive и др.) для работы с тегами реализует web api интерфейс.
Итак, приложение забирает данные с сервисов, подгружает мнемосхему, разработанную пользователем в Visio, и отображает эти данные.
Анимация графических объектов на мнемосхеме
Для анимации графических элементов мнемосхемы используется javascript. Для того, чтобы упростить пользователю разработку функций анимации, в приложении есть небольшая библиотека, которая включает, например следующие функции: printf(Text), SetText(Object, Index, Value), SetBackColor(Object, Index, Value), SetVisible(Object, Value), GetTag(TagName) и др.
Например, функция отображения измеренного значения:
Function Field (Object, Property) {
var Tag = GetTag(Property.Tag1);
SetText(Object,1,Tag.Value);
}Администрирование, настройка.
Для настройки используются конфигурационные файлы, где пользователь создаёт профили, добавляет сервисы и др. Данное приложение – консольное, может работать как win-сервис.
Приложение использует встроенный кроссплатформенный веб-сервер Kestrel.
Статья называется “Мониторинг данных АСУ ТП и не только.”. Приложение может отображать в принципе любые данные, которые можно представить в виде схемы, диаграммы и т.п.
Всем спасибо, что дочитали, интересна критика, любые отзывы. Спасибо.
На этом всё, ниже несколько картинок работы приложения.
Пример мнемосхемы (была сделана из файла eplan — >autocad ->visio. ):
Графики:
romanetz_omsk
А чем существующие решения не устроили, та же опенскада?