Video: Konsol Admin Habr. Memungkinkan Anda mengatur karma, memberi peringkat, dan melarang pengguna.
TL; DR: Pada artikel ini saya akan mencoba membuat panel kontrol komik Habr menggunakan lingkungan pengembangan antarmuka industri Webaccess/HMI Designer dan terminal WebOP.
Antarmuka manusia-mesin (HMI) adalah seperangkat sistem untuk interaksi manusia dengan mesin yang dikendalikan. Biasanya istilah ini diterapkan pada sistem industri yang memiliki operator dan panel kontrol.
WebOP — terminal industri otonom untuk menciptakan antarmuka manusia-mesin. Digunakan untuk membuat panel kontrol produksi, sistem pemantauan, ruang kontrol, pengontrol rumah pintar, dll. Mendukung koneksi langsung ke peralatan industri dan dapat bekerja sebagai bagian dari sistem SCADA.
Terminal WebOP - perangkat keras
Terminal WebOP adalah komputer berdaya rendah berdasarkan prosesor ARM, dalam satu wadah dengan monitor dan layar sentuh, dirancang untuk menjalankan program dengan antarmuka grafis yang dibuat di HMI Designer. Tergantung pada modelnya, terminal memiliki berbagai antarmuka industri: RS-232/422/485, bus CAN untuk menghubungkan ke sistem otomotif, port Host USB untuk menghubungkan periferal tambahan, port Klien USB untuk menghubungkan terminal ke komputer, audio input dan output audio, pembaca kartu MicroSD untuk memori non-volatil dan transfer pengaturan.
Perangkat ini diposisikan sebagai pengganti anggaran untuk PC all-in-one, untuk tugas-tugas yang tidak memerlukan prosesor yang kuat dan sumber daya komputer desktop yang lengkap. WebOP dapat berfungsi sebagai terminal mandiri untuk kontrol dan input/output data, dipasangkan dengan WebOP lain, atau sebagai bagian dari sistem SCADA.
Terminal WebOP dapat terhubung langsung ke perangkat industri
Pendinginan pasif dan perlindungan IP66
Karena pembuangan panas yang rendah, beberapa model WebOP dirancang sepenuhnya tanpa pendingin udara aktif. Hal ini memungkinkan perangkat dipasang di area yang sensitif terhadap tingkat kebisingan dan mengurangi jumlah debu yang masuk ke dalam wadahnya.
Panel depan dibuat tanpa celah atau sambungan, memiliki tingkat perlindungan IP66, dan memungkinkan masuknya air secara langsung di bawah tekanan.
Panel belakang terminal WOP-3100T
Memori yang tidak mudah menguap
Untuk mencegah kehilangan data, WebOP memiliki memori non-volatil sebesar 128Kb, yang dapat digunakan dengan cara yang sama seperti RAM. Itu dapat menyimpan pembacaan meter dan data penting lainnya. Jika listrik padam, data akan disimpan dan dipulihkan setelah reboot.
Pembaruan jarak jauh
Program yang berjalan pada terminal dapat diperbarui dari jarak jauh melalui jaringan Ethernet atau melalui antarmuka serial RS-232/485. Hal ini menyederhanakan pemeliharaan, karena menghilangkan kebutuhan untuk pergi ke semua terminal untuk memperbarui perangkat lunak.
Model WebOP
- perangkat paling terjangkau yang dibangun berdasarkan sistem operasi real-time HMI RTOS. Seri ini diwakili oleh WebOP-///, dengan diagonal layar masing-masing 4,3 inci, 7 inci, 8 inci, dan 10.1 inci.
— model yang lebih canggih berdasarkan sistem operasi Windows CE. Mereka berbeda dari seri 2000T dalam sejumlah besar antarmuka perangkat keras dan memiliki antarmuka CAN. Perangkat beroperasi dalam rentang suhu yang diperluas (-20~60°C) dan memiliki perlindungan antistatis (Udara: 15KV/Kontak: 8KV). Saluran ini sepenuhnya memenuhi persyaratan standar IEC-61000, yang memungkinkan perangkat digunakan dalam manufaktur semikonduktor di mana pelepasan listrik statis menjadi masalah. Seri ini diwakili oleh WebOP-//, dengan diagonal layar masing-masing 7 inci, 10.1 inci, dan 12.1 inci.
Lingkungan pengembangan WebAccess/HMI Designer
Terminal WebOP hanyalah komputer ARM berdaya rendah tempat Anda dapat menjalankan perangkat lunak apa pun, namun inti dari solusi ini adalah lingkungan pengembangan antarmuka industri WebAcess/HMI yang dipatenkan. Sistem ini terdiri dari dua komponen:
- Desainer HMI — lingkungan untuk mengembangkan antarmuka dan logika pemrograman. Berjalan di bawah Windows pada komputer pemrogram. Program akhir dikompilasi menjadi satu file dan ditransfer ke terminal untuk dieksekusi pada saat runtime. Program ini tersedia dalam bahasa Rusia.
- Waktu Proses HMI — runtime untuk menjalankan program yang dikompilasi pada terminal akhir. Ini dapat bekerja tidak hanya pada terminal WebOP, tetapi juga pada Advantech UNO, MIC, dan komputer desktop biasa. Ada versi runtime untuk Linux, Windows, Windows CE.
Halo dunia - membuat proyek
Mari kita mulai membuat antarmuka pengujian untuk panel kontrol Habr kita. Saya akan menjalankan program di terminal menjalankan WinCE. Pertama, mari buat proyek baru di HMI Designer. Untuk menjalankan program di WebOP, penting untuk memilih model yang benar; format file akhir akan bergantung pada ini. Pada langkah ini, Anda juga dapat memilih arsitektur desktop, kemudian file akhir akan dikompilasi untuk runtime X86.
Membuat proyek baru dan memilih arsitektur
Memilih protokol komunikasi yang melaluinya program yang dikompilasi akan dimuat ke WebOP. Pada langkah ini, Anda dapat memilih antarmuka serial, atau menentukan alamat IP terminal.
Antarmuka pembuatan proyek. Di sebelah kiri terdapat diagram pohon komponen program masa depan. Untuk saat ini, kami hanya tertarik pada item Layar, ini adalah layar langsung dengan elemen antarmuka grafis yang akan ditampilkan di terminal.
Pertama, mari buat dua layar dengan teks "Halo Dunia" dan kemampuan untuk beralih di antara keduanya menggunakan tombol. Untuk melakukan ini, kita akan menambahkan layar baru, Layar #2, dan pada setiap layar kita akan menambahkan elemen teks dan dua tombol untuk beralih antar layar (Tombol Layar). Mari konfigurasikan setiap tombol untuk beralih ke layar berikutnya.
Antarmuka untuk mengatur tombol untuk beralih antar layar
Program Hello World sudah siap, sekarang Anda dapat mengkompilasi dan menjalankannya. Pada tahap kompilasi, kesalahan mungkin terjadi jika variabel atau alamat salah ditentukan. Kesalahan apa pun dianggap fatal; program akan dikompilasi hanya jika tidak ada kesalahan.
Lingkungan menyediakan kemampuan untuk mensimulasikan terminal sehingga Anda dapat men-debug program di komputer Anda secara lokal. Ada dua jenis simulasi:
- Simulasi daring — semua sumber data eksternal yang ditentukan dalam program akan digunakan. Ini bisa berupa USO atau perangkat yang terhubung melalui antarmuka serial atau Modbus TCP.
- Simulasi luring — simulasi tanpa menggunakan perangkat eksternal.
Meskipun kami tidak memiliki data eksternal, kami menggunakan simulasi offline, setelah menyusun program sebelumnya. Program terakhir akan ditempatkan di folder proyek, dengan nama Nama Proyek_NamaProgram.px3
Program yang berjalan dalam simulasi dapat dikontrol dengan kursor mouse dengan cara yang sama seperti pada layar sentuh terminal WebOP. Kami melihat semuanya berjalan sebagaimana mestinya. Besar.
Untuk mengunduh program ke terminal fisik, cukup klik tombol Unduh. Namun karena saya tidak mengonfigurasi koneksi terminal ke lingkungan pengembangan, Anda cukup mentransfer file menggunakan flash drive USB atau kartu memori MicroSD.
Antarmuka programnya intuitif, saya tidak akan membahas setiap blok grafis. Membuat latar belakang, bentuk, dan teks akan jelas bagi siapa saja yang pernah menggunakan program serupa dengan Word. Untuk membuat antarmuka grafis, tidak diperlukan keahlian pemrograman, semua elemen ditambahkan dengan menyeret mouse ke formulir.
Bekerja dengan memori
Sekarang setelah kita mengetahui cara membuat elemen grafis, mari pelajari cara bekerja dengan konten dinamis dan bahasa skrip. Mari kita membuat diagram batang yang menampilkan data dari suatu variabel U $ 100. Dalam pengaturan bagan, pilih tipe data: bilangan bulat 16-bit, dan rentang nilai bagan: dari 0 hingga 10.
Program ini mendukung penulisan skrip dalam tiga bahasa: VBScript, JavaScript dan bahasanya sendiri. Saya akan menggunakan opsi ketiga karena ada contohnya di dokumentasi dan bantuan sintaksis otomatis langsung di editor.
Mari tambahkan makro baru:
Mari kita tulis beberapa kode sederhana untuk mengubah data secara bertahap dalam variabel yang dapat dilacak pada grafik. Kita akan menambahkan 10 ke variabel, dan menyetel ulang ke nol jika lebih besar dari 100.
$U100=$U100+10
IF $U100>100
$U100=0
ENDIF
Untuk menjalankan skrip dalam satu lingkaran, atur di pengaturan Pengaturan Umum sebagai Makro Utama, dengan interval eksekusi 250 ms.
Mari kompilasi dan jalankan program di simulator:
Pada tahap ini kita telah belajar memanipulasi data dalam memori dan menampilkannya secara visual. Ini sudah cukup untuk membuat sistem pemantauan sederhana, menerima data dari perangkat eksternal (sensor, pengontrol) dan mencatatnya dalam memori. Di HMI Designer, tersedia berbagai blok tampilan data: dalam bentuk dial melingkar dengan panah, berbagai bagan, dan grafik. Dengan menggunakan skrip JavaScript, Anda dapat mendownload data dari sumber eksternal melalui HTTP.
Panel kontrol Habr
Dengan menggunakan keterampilan yang diperoleh, kami akan membuat antarmuka komik untuk konsol admin Habr.
Remote control kami harus dapat:
- Ganti profil pengguna
- Menyimpan data karma dan peringkat
- Ubah nilai karma dan peringkat menggunakan penggeser
- Ketika Anda mengklik tombol "larangan", profil tersebut akan ditandai sebagai dilarang, avatar akan berubah menjadi dicoret
Kami akan menampilkan setiap profil pada halaman terpisah, jadi kami akan membuat halaman untuk setiap profil. Kami akan menyimpan karma dan peringkat dalam variabel lokal di memori, yang akan diinisialisasi menggunakan Setup Macro saat program dimulai.
Gambarnya bisa diklik
Menyesuaikan karma dan peringkat
Untuk mengatur karma kita akan menggunakan slider (Slide Switch). Kami menentukan variabel yang diinisialisasi di Setup Macro sebagai alamat perekaman. Mari kita batasi rentang nilai penggeser dari 0 hingga 1500. Sekarang, saat penggeser bergerak, data baru akan ditulis ke memori. Dalam hal ini, keadaan awal penggeser akan sesuai dengan nilai variabel dalam memori.
Untuk menampilkan nilai numerik karma dan peringkat, kita akan menggunakan elemen tampilan Numerik. Prinsip operasinya mirip dengan diagram dari contoh program “Hello World”, kita cukup menunjukkan alamat variabel di Alamat Monitor.
Tombol larangan
Tombol “larangan” diimplementasikan menggunakan elemen Toggle Switch. Prinsip penyimpanan data mirip dengan contoh di atas. Dalam pengaturannya, Anda dapat memilih teks, warna, atau gambar yang berbeda, bergantung pada status tombol.
Saat tombol ditekan, avatar harus dicoret dengan warna merah. Ini mudah diimplementasikan menggunakan blok Tampilan Gambar. Ini memungkinkan Anda menentukan beberapa gambar yang terkait dengan status tombol Toggle Switch. Untuk melakukan ini, blok tersebut diberi alamat yang sama dengan blok dengan tombol dan jumlah negara bagian. Gambar dengan papan nama di bawah avatar diatur dengan cara yang sama.
Kesimpulan
Secara keseluruhan, saya menyukai produk ini. Sebelumnya, saya memiliki pengalaman menggunakan tablet Android untuk tugas serupa, tetapi mengembangkan antarmuka untuk tablet tersebut jauh lebih sulit, dan API browser tidak mengizinkan akses penuh ke periferal. Satu terminal WebOP dapat menggantikan kombinasi tablet Android, komputer, dan pengontrol.
HMI Designer, meski desainnya kuno, cukup canggih. Tanpa keahlian pemrograman khusus, Anda dapat dengan cepat membuat sketsa antarmuka yang berfungsi. Artikel ini tidak membahas semua blok grafis, yang banyak terdapat: pipa animasi, silinder, grafik, sakelar sakelar. Ini mendukung banyak pengontrol industri populer dan berisi konektor database.
referensi
Lingkungan pengembangan WebAccess/HMI Designer dan Runtime dapat diunduh
→
Sumber: www.habr.com