Оптимизация работы водозаготовительной станции с eHMI демо — витрина PLCnext Engineer

Всем привет, этим летом я впервые поработал с технологией PLCnext и хочу поделиться результатами. Конкретно — с технологией eHMI в PLCnext Engineer. Если вы как я не обладаете художественными способностями, не хотите рисовать экраны с нуля, а предпочитаете использовать готовые изображения от графического дизайнера — вот от чего начать.

Мне дали папку со множеством SVG-изображений, подготовленных дизайнером. SVG (Scalable Vector Graphics) — специальный формат: масштабирование не влияет на качество, в отличие от растра, который пикселится при увеличении.

Но есть нюанс: любой импортированный в PLCnext Engineer образ не может иметь детальных анимаций. Например, импортированный бак — нельзя выбрать его контур и покрасить в зелёный при наполнении. Любой анимируемый элемент HMI должен быть нарисован в самом PLCnext Engineer.

Поэтому пришел к компромиссу. Свободным инструментом Inkscape преобразовал данные изображения в нужную схему водозаготовительной станции. Затем выделил анимируемые элементы (которые нужно рисовать в Engineer) и удалил их из SVG. Получился "детальный слой":

Также хотел анимировать наполнение труб водой — создал clip-path (слой вырезки), который лежит за детальным слоем и скрывает фоновые элементы для анимации воды:

После импорта изображений и создания анимируемых элементов в PLCnext Engineer получился итоговый HMI-экран:

Проект на GitHub с подробным описанием создания и бонусным проектом: plcnextusa/eHMI_water_plant_demo.