Редактор мнемосхем для промышленных предприятий

Заказчик

Разработчик программных продуктов для автоматизации энергетических и промышленных предприятий — химических и нефтехимических заводов, электрогенерирующих компаний, ТЭЦ и АЭС.

Задача

Разработать браузерный редактор векторной графики: операторы должны создавать мнемосхемы и настраивать их в зависимости от поступающих с оборудования данных.

Проект

Программный комплекс для мониторинга работы оборудования и автоматизированных информационных систем, учёта качества энергоресурсов, регистрации аварийных событий, помощи в принятии решений на основе данных с полевых датчиков.

Проблема

Важная функциональность программного комплекса — отображение данных с приборов на диспетчерском пульте или компьютере оператора в формате мнемосхем.

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

В электронном виде мнемосхемы создаются в специализированном графическом редакторе. Чтобы сделать мнемосхему интерактивной, нужно интегрировать её элементы с поступающими от приборов данными. Это требует постоянного участия разработчиков, что усложняет отладку, увеличивает сроки внедрения и стоимость. Для промышленных предприятий требуется разработать и подключить тысячи мнемосхем.

Заказчик решил разработать инструмент, интегрируемый в программный комплекс, позволяющий наладчикам АСУ предприятий самостоятельно, без участия разработчиков, создавать интерактивные мнемосхемы. Это должен быть редактор векторной графики работающий в браузере. С помощью графических примитивов (простейших геометрических объектов) и библиотеки компонентов, наладчики должны самостоятельно создавать мнемосхемы и настраивать их поведение в зависимости от поступающих с оборудования данных.

Штатные программисты заказчика разрабатывали другие модули комплекса. Заказчику потребовалось быстро расширить команду проекта узкоспециализированными кадрами.

Технологии

Использовали движок векторной графики mxGraph, дополнительные интерфейсы разрабатывали на React.

Почему мы

Заказчик отправил запросы нескольким компаниям специализирующимся на фронтенд-разработке. Мы предложили обсудить проект на уровне технических лидеров и исполнителей. Провели несколько таких обсуждений. Через 4–5 месяцев заказчик вернулся с намерением подписать договор — исходя из проведённых технических консультаций тимлиды рекомендовали руководству заключить контракт с нами.

Процесс

В связи со сложностью и высокой степенью неопределенности проекта согласовали работу по схеме Time and materials (T@M — оплата затраченного времени).

Первоначально заказчик ставил задачу разработать редактор с нуля. Мы предложили исследовать рынок готовых движков и редакторов для работы с векторными примитивами. Было предположение, что так сможем сократить сроки и бюджет проекта. Решили начать с этапа аналитики.

1. Этап аналитики

Задача: погрузиться в сложный программный комплекс, исследовать предметную специфичную область, предложить решения.

Редактор является модулем крупной автоматизированной системы управления промышленными предприятиями — нужно учитывать архитектуру всей системы и возможности для интеграций.

Стартовали с исследования Open Source движков для создания векторной графики, которые позволяют работать с простыми геометрическими объектами (графическими примитивами). Подходящим кажется только одно решение — библиотека mxGraph: открытый исходный код, 12 лет на рынке, лежит в основе популярного сервиса Draw.io, интегрируемого с GoogleDocs.

Согласовали с клиентом предварительный выбор. После консультаций с юристами клиент утвердил библиотеку для детального исследования.

Провели технический аудит исходного кода mxGraph. Резюме:

1. Инструмент с задачами справится.
2. Ввиду «старости» у библиотеки специфический синтаксис, её использование приравнивается к изучению нового фреймворка.
3. Порог вхождения высокий, документация не полная.

Утвердили у заказчика создание редактора на основе mxGraph. Использование готового решения накладывает технические ограничения, но даёт возможность оперативно сосредоточиться на важной для бизнеса функциональности, а также уменьшить срок и бюджет проекта.

2. Разработка MVP

Создание минимально жизнеспособного продукта (minimum viable product, MVP) заняло полгода. Работали в условиях сильной интеграции с командой разработчиков заказчика. Ежедневно обсуждали технические решения. Каждая неделя завершалась демонстрацией результатов работы, обсуждением проблем и планированием.

Жёсткие требования предъявлялись к производительности редактора. Браузер оператора должен работать без перезагрузки месяцами. При большом количестве элементов мнемосхемы (несколько тысяч) обнаружились проблемы в работе mxGraph. Требовалось уделить внимание утечкам памяти и скорости отображения элементов. Чтобы снизить нагрузку на CPU (центральный процессор) и устранить другие проблемы мы внесли корректировки непосредственно в движок mxGraph.

Ближе к окончанию работ у заказчика появилась необходимость оперативно внедрить редактор в систему управления электроснабжением действующего завода. Мы помогли это сделать. Демонстрационная мнемосхема состояла из 20 000 векторных элементов меняющих состояние в реальном времени.

Результат

Сократили бюджет проекта в два раза, а срок на 3–6 месяцев за счёт проведения этапа аналитики и предложения использовать готовую библиотеку. Хотя заказчик пришёл с задачей разработать редактор с нуля.

Разработали редактор векторной графики на базе библиотеки mxGraph. Расширили его недостающей функциональностью, которая позволила наладчикам АСУ организовать библиотеку компонентов и повторно использовать элементы графической нотации и целые мнемосхемы. Разработали интерфейс, с помощью которого устанавливаются правила отображения графических элементов в зависимости от получаемых данных. Внесли изменения в mxGraph, чтобы обеспечить требуемую производительность.

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

Интегрировали готовый редактор в автоматизированную систему управления заводом.

Ретроспектива

• Работу сложных промышленных IT-систем возможно реализовать на базе браузера. При автоматизации производств всё чаще используются веб-технологии, которые заменяют десктопные программы. Плюсы таких решений: оперативное, дешёвое и незаметное пользователю обновление; работа в облаке или локально; применение относительно простых, надёжных и дешёвых технологий с большим количеством разработчиков на рынке.
• Модель Time and materials идеально сработала в проекте. Обеспечила высокую гибкость и скорость разработки.
• Можно значительно экономить бюджеты и уменьшать сроки проектов. Один из механизмов — проведение предварительной аналитики способа решения задачи. Первоначальный вариант не всегда самый эффективный. Даже заказчик может не всё увидеть и предусмотреть.
• Главные факторы успешной реализации подобного проекта: готовность погружаться в нестандартную предметную область и бизнес процессы, высокий уровень проектного менеджмента, способность выстраивать эффективные коммуникации, сильные тимлиды и разработчики с обеих сторон.
• Если в команде заказчика работают сильные разработчики, то нужно это использовать по максимуму для достижения целей проекта. Совместными усилиями решаются сложнейшие задачи.