Meningkatkan Operasi Pengelolaan Air dengan eHMI Demo – Showcase PLCnext Engineer

Halo Semua orang, musim panas ini adalah pertama kalinya saya bekerja dengan teknologi PLCnext dan saya ingin membagikan apa yang saya capai. Lebih spesifik, saya bekerja dengan teknologi eHMI di PLCnext Engineer. Jika beberapa dari Anda seperti saya dan tidak memiliki kemampuan artistik Anda mungkin tidak ingin menggambar layar dari nol dan lebih suka menggunakan seperangkat gambar yang sudah dibuat untuk Anda oleh desainer grafis atau orang serupa. Jadi, inilah tempat saya memulai.

Saya diberikan folder dengan banyak gambar SVG yang sudah dirancang oleh desainer grafis. Bagi yang tidak tahu, SVG adalah Scalable Vector Graphics. Ini adalah jenis gambar khusus karena ukuran gambar tidak akan mempengaruhi kualitas gambar. Jadi, di mana gambar normal saat diperbesar akan menjadi pikselasi, gambar SVG akan mempertahankan kualitasnya.

Namun, bagian berikutnya adalah tempat hal-hal bisa menjadi sulit. Setiap gambar yang diimpor ke PLCnext Engineer tidak boleh memiliki animasi detail. Misalnya, jika Anda mengimpor gambar tangki Anda tidak dapat memilih garis tepi tangki dan mengubah warnanya menjadi hijau ketika penuh. Setiap elemen yang ingin Anda animasikan di HMI harus digambar di PLCnext Engineer.

Oleh karena itu saya harus berkompromi. Dengan menggunakan sumber eksternal gratis yang disebut Inkscape saya dapat memanipulasi gambar yang saya terima menjadi sistem pengelolaan air yang saya inginkan. Kemudian saya dapat memilih elemen yang perlu dianimasikan yang akan digambar di PLCnext Engineer dan menghapusnya. Saya akhirnya mendapatkan apa yang disebut saya lapisan detail yang ditunjukkan di bawah ini:

Saya juga ingin menganimasikan air mengisi pipa jadi saya membuat lapisan clip-path atau potongan yang akan berada di balik lapisan detail untuk menyembunyikan elemen latar belakang yang saya gunakan untuk menganimasikan air:

Setelah mengimpor gambar di atas dan membuat elemen animasi di PLCnext Engineer saya akhirnya mendapatkan layar HMI berikut:

Proyek ini dapat ditemukan di GitHub saya bersama dengan penjelasan detail tentang bagaimana itu dibuat dan proyek bonus: plcnextusa/eHMI_water_plant_demo: High Graphic Water Plant Animation (github.com)