Video: Panel admin Habr. Memungkinkan Anda menyesuaikan karma, memberi peringkat, dan mencekal pengguna.TL; DR: dalam artikel saya akan mencoba membuat panel kontrol komik untuk Habr menggunakan lingkungan pengembangan industri Perancang HMI Designer dan terminal WebOP.
Antarmuka manusia-mesin (HMI) adalah seperangkat sistem untuk interaksi manusia dengan mesin yang dikendalikan. Biasanya istilah ini digunakan untuk sistem industri di mana ada operator dan panel kontrol.
WebOP adalah terminal industri mandiri untuk membuat antarmuka manusia-mesin. Ini digunakan untuk membuat panel kontrol produksi, sistem pemantauan, ruang kontrol, pengontrol rumah pintar, dll. Ini mendukung koneksi langsung ke peralatan industri, dapat bekerja sebagai bagian dari sistem SCADA.
Terminal WebOP - Perangkat Keras

Terminal WebOP adalah komputer berdaya rendah yang didasarkan pada prosesor ARM, dalam satu kasus dengan monitor dan layar sentuh, yang 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 mobil, port USB Host untuk menghubungkan perangkat tambahan, port USB Client untuk menghubungkan terminal ke komputer, input audio dan output audio , Pembaca kartu MicroSD untuk memori yang tidak mudah menguap dan pengaturan transfer.
Perangkat diposisikan sebagai pengganti anggaran untuk monoblock, untuk tugas-tugas yang tidak memerlukan prosesor yang kuat dan sumber daya dari komputer desktop yang lengkap. WebOP dapat beroperasi sebagai terminal mandiri untuk mengelola dan memasukkan / mengeluarkan data, dipasangkan dengan WebOP lain, atau sebagai bagian dari sistem SCADA.
Terminal WebOP dapat terhubung langsung ke perangkat industriPendinginan pasif dan perlindungan IP66
Karena disipasi panasnya yang rendah, beberapa model WebOP dibuat sepenuhnya tanpa pendingin udara aktif. Ini memungkinkan Anda untuk memasang perangkat pada benda yang penting untuk tingkat kebisingan, dan mengurangi jumlah debu yang jatuh ke dalam case.
Panel depan dibuat tanpa celah dan sambungan, memiliki tingkat perlindungan IP66, dan memungkinkan kontak langsung dengan air di bawah tekanan.
Panel belakang terminal WOP-3100TMemori tidak mudah menguap
Untuk mencegah kehilangan data di WebOP, ada 128KB memori non-volatil, yang dapat Anda gunakan dengan cara yang sama seperti dengan RAM. Ini dapat menyimpan pembacaan meter dan data penting lainnya. Jika terjadi kegagalan daya, data akan disimpan dan dikembalikan setelah reboot.
Pembaruan jarak jauh
Program yang berjalan di terminal dapat diperbarui dari jarak jauh melalui jaringan Ethernet atau melalui antarmuka serial RS-232/485. Ini menyederhanakan perawatan, karena menghilangkan kebutuhan untuk memotong semua terminal untuk pembaruan perangkat lunak.
Model WebOP
Seri 2000T adalah perangkat paling terjangkau yang dibangun di atas sistem operasi real-time HMI RTOS. Seri ini diwakili oleh WebOP-
2040T /
2070T /
2080T /
2100T , dengan layar diagonal masing-masing 4,3 inci, 7 inci, 8 inci, dan 10,1 inci.
Seri 3000T adalah model yang lebih maju 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 diperpanjang (-20 ~ 60 ° C) dan memiliki perlindungan anti-statis (Udara: 15KV / Kontak: 8KV). Jalur ini sepenuhnya memenuhi persyaratan standar IEC-61000, yang memungkinkan penggunaan perangkat dalam pembuatan semikonduktor, di mana pelepasan muatan statis menjadi masalah. Seri ini diwakili oleh model WebOP-
3070T /
3100T /
3120T , dengan layar diagonal masing-masing 7 inci, 10,1 inci, dan 12,1 inci.
WebAkses / Lingkungan Pengembangan Desainer HMI
Di luar kotak, terminal WebOP hanyalah komputer ARM berdaya rendah di mana Anda dapat menjalankan perangkat lunak apa pun, tetapi inti dari solusi ini adalah di lingkungan pengembangan antarmuka antarmuka industri WebAcess / HMI. Sistem ini terdiri dari dua komponen:
- HMI Designer adalah lingkungan untuk mengembangkan antarmuka dan logika pemrograman. Ini bekerja di bawah Windows, pada pemrogram komputer. Program akhir dikompilasi menjadi satu file dan dikirim ke terminal untuk eksekusi runtime. Program ini tersedia dalam bahasa Rusia.
- HMI Runtime - runtime untuk menjalankan program yang dikompilasi di terminal. Ini dapat bekerja tidak hanya pada terminal WebOP, tetapi juga pada Advantech UNO, komputer MIC, dan komputer desktop biasa. Ada versi runtime untuk Linux, Windows, Windows CE.

Halo dunia - membuat proyek
Mari mulai membuat antarmuka uji untuk panel kontrol Habr kami. Saya akan menjalankan program di terminal
WebOP-3100T yang menjalankan WinCE. Pertama, buat proyek baru di HMI Designer. Untuk menjalankan program di WebOP, penting untuk memilih model yang benar, format file akhir akan tergantung pada ini. Pada langkah ini, Anda juga dapat memilih arsitektur desktop, maka file yang dihasilkan akan dikompilasi di bawah runtime X86.
Membuat proyek baru dan memilih arsitekturPemilihan protokol komunikasi yang dengannya 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 adalah diagram pohon dari komponen program masa depan. Meskipun kami hanya tertarik pada item Layar, ini adalah layar langsung dengan elemen GUI yang akan ditampilkan di terminal.
Pertama, buat dua layar dengan teks "Hello World" dan kemampuan untuk beralih di antara mereka menggunakan tombol. Untuk melakukan ini, tambahkan Layar Layar baru # 2, dan pada setiap layar kami menambahkan elemen teks dan dua tombol untuk beralih di antara layar (Tombol Layar). Setiap tombol dikonfigurasi untuk beralih ke layar berikutnya.
Antarmuka untuk mengatur tombol untuk beralih antar layarProgram Hello World siap, sekarang Anda dapat mengkompilasi dan menjalankannya. Mungkin ada kesalahan pada tahap kompilasi dalam hal variabel atau alamat yang ditentukan salah. Setiap kesalahan dianggap fatal, program akan dikompilasi hanya jika tidak ada kesalahan.
Lingkungan menyediakan kemampuan untuk mensimulasikan terminal sehingga Anda dapat men-debug suatu program pada komputer secara lokal. Ada dua jenis simulasi:
- Simulasi online - semua sumber data eksternal yang ditentukan dalam program akan terlibat. Ini bisa berupa USO atau perangkat yang terhubung melalui antarmuka serial atau Modbus TCP.
- Simulasi offline - simulasi tanpa menggunakan perangkat eksternal.
Meskipun kami tidak memiliki data eksternal, kami menggunakan simulasi offline, setelah menyusun program. Program akhir akan terletak di folder proyek, dengan nama
ProjectName_Program Name.px3Program yang diluncurkan dalam simulasi dapat dikontrol oleh kursor mouse dengan cara yang sama seperti pada layar sentuh terminal WebOP. Kami melihat bahwa semuanya berfungsi sebagaimana mestinya. Bagus
Untuk mengunduh program ke terminal fisik, cukup klik tombol Unduh. Tetapi karena saya tidak mengonfigurasi koneksi terminal ke lingkungan pengembangan, Anda cukup mentransfer file menggunakan USB flash drive atau kartu memori microSD.
Antarmuka program intuitif, saya tidak akan membongkar setiap blok grafik. Membuat latar belakang, bentuk, teks akan jelas bagi siapa saja yang menggunakan program yang mirip dengan Word. Membuat antarmuka grafis tidak memerlukan keterampilan pemrograman, semua elemen ditambahkan dengan menyeret dan menjatuhkan formulir.
Bekerja dengan memori
Sekarang kami dapat membuat elemen grafis, kami akan belajar bekerja dengan konten dinamis dan bahasa scripting. Buat bagan batang yang menampilkan data dari 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 untuk itu ada contoh dalam dokumentasi dan bantuan otomatis pada sintaks langsung di editor.
Tambahkan makro baru:

Kami akan menulis kode sederhana untuk secara bertahap mengubah data dalam suatu variabel, yang dapat dilacak pada diagram. Kami akan menambahkan 10 ke variabel, dan nol ketika lebih dari 100.
$U100=$U100+10 IF $U100>100 $U100=0 ENDIF
Untuk menjalankan skrip dalam satu lingkaran, instal skrip dalam pengaturan Pengaturan Umum sebagai Makro Utama, dengan interval eksekusi 250ms.
Kompilasi dan jalankan program dalam simulator:

Pada tahap ini, kami belajar cara memanipulasi data dalam memori dan menampilkannya dalam bentuk visual. Ini sudah cukup untuk membuat sistem pemantauan sederhana, menerima data dari perangkat eksternal (sensor, pengontrol) dan menuliskannya ke memori. Di HMI Designer, tersedia berbagai unit tampilan data: dalam bentuk panggilan melingkar dengan panah, berbagai grafik, grafik. Menggunakan skrip JavaScript, Anda dapat menerapkan pemuatan data dari sumber eksternal melalui HTTP.
Panel kontrol Habr
Menggunakan keterampilan yang didapat, kami akan membuat antarmuka komik dari panel admin Habrom.
Remote kami harus dapat:
- Ganti profil pengguna
- Simpan karma dan data peringkat
- Ubah nilai karma dan nilai menggunakan bilah geser
- Ketika Anda mengklik tombol larangan, profil harus ditandai sebagai dilarang, gambar profil harus berubah menjadi dicoret
Setiap profil akan ditampilkan pada halaman terpisah, jadi kami akan membuat halaman untuk setiap profil. Kami akan menyimpan karma dan memberi peringkat pada variabel lokal dalam memori, yang akan diinisialisasi menggunakan Setup Macro ketika program dimulai.
Gambar yang dapat diklikSesuaikan karma dan peringkat
Untuk menyesuaikan karma, kita akan menggunakan slider (Slide Switch). Sebagai alamat rekaman, kami menentukan variabel yang diinisialisasi dalam Pengaturan Makro. Kami membatasi rentang nilai slider dari 0 hingga 1500. Sekarang, ketika slider bergerak, data baru akan ditulis ke memori. Dalam hal ini, keadaan awal slider akan sesuai dengan nilai-nilai variabel dalam memori.
Untuk menampilkan nilai numerik karma dan peringkat, kami akan menggunakan elemen tampilan Numerik. Prinsip operasinya mirip dengan diagram dari contoh program Hello World, kami hanya menunjukkan alamat variabel dalam Alamat Monitor.
Tombol larangan
Tombol larangan diimplementasikan menggunakan elemen Toggle Switch. Prinsip penyimpanan data mirip dengan contoh di atas. Dalam pengaturan, Anda dapat memilih teks, warna, atau gambar yang berbeda, tergantung pada kondisi tombol.
Pada saat tombol ditekan, avatar harus dicoret dengan warna merah. Ini mudah diterapkan dengan unit Picture Display. Hal ini memungkinkan Anda untuk menentukan beberapa gambar yang terkait dengan keadaan tombol Toggle Switch. Untuk ini, blok diberikan alamat yang sama dengan blok dengan tombol, dan jumlah status. Gambar yang dikonfigurasi dengan cara yang sama dengan nameplates di bawah avatar.
Kesimpulan
Secara umum, saya suka produknya. Sebelumnya, saya memiliki pengalaman menggunakan tablet Android untuk tugas serupa, tetapi mengembangkan antarmuka untuknya jauh lebih rumit, dan API peramban tidak memungkinkan akses penuh ke periferal. Satu terminal WebOP dapat mengganti bundel dari tablet Android, komputer, dan pengontrol.
Desainer HMI, meskipun desain kuno, agak maju. Tanpa keterampilan pemrograman khusus, Anda dapat dengan cepat membuat sketsa antarmuka yang berfungsi. Artikel ini tidak mempertimbangkan semua blok grafik, yang ada banyak: pipa animasi, silinder, grafik, sakelar sakelar. Itu di luar kotak mendukung banyak pengontrol industri populer, berisi konektor database.
Referensi
WebAccess / HMI Designer dan lingkungan pengembangan Runtime dapat diunduh
di sini→
Sumber proyek panel kontrol Habrom