Демонстрация водяной установки eHMI

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

Мне дали папку с множеством разных SVG-изображений, уже разработанных графическим дизайнером. Для тех, кто не знает, SVG — это масштабируемая векторная графика. Это особый вид изображения, поскольку размер изображения не влияет на качество изображения. Таким образом, там, где обычное изображение при увеличении становится пиксельным, изображение SVG сохраняет свое качество.

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

Поэтому мне пришлось пойти на компромисс. Используя бесплатный сторонний ресурс под названием Inkscape, я смог манипулировать изображениями, которые мне дали, в систему водных растений, которую я хотел. Затем я смог выбрать анимированные элементы, которые нужно было нарисовать в PLCnext Engineer, и удалить их. Я закончил тем, что я назвал подробным слоем, показанным ниже:

Я также хотел анимировать воду, заполняющую трубы, поэтому я создал слой clip-path или вырез, который располагался бы за слоем с деталями, чтобы скрыть элементы фона, которые я использовал для анимации воды:

После импорта приведенных выше изображений и создания анимированных элементов в PLCnext Engineer я получил следующий экран ЧМИ:

Этот проект можно найти на моем GitHub вместе с подробным объяснением того, как он был создан, и бонусным проектом:plcnextusa/eHMI_water_plant_demo:High Graphic Water Plant Animation (github.com)