Tujuan artikel: Mendemonstrasikan implementasi solusi visualisasi data berbiaya rendah yang dapat digunakan dalam sistem pengiriman.
Bagaimana itu dimulai.
Di salah satu industri di bidang energi, sekitar 20 unit dengan lebih dari 10.000 sinyal diotomatiskan, perlu dikembangkan sistem dispatching untuk memantau data APCS.
Berkaitan dengan hal tersebut, saya tertarik untuk mengimplementasikan solusi IT untuk visualisasi data dalam bentuk grafik dan frame video (diagram mnemonik). Solusinya harus skalabel, lintas platform, mudah digunakan, berbasis web. Jadi, fungsinya adalah diagram mnemonik, grafik. Pergilah …
Diagram mnemonik
Untuk mengembangkan diagram mnemonik, diperlukan editor grafis.
Mengembangkan sendiri itu sulit, mahal, jadi Visio dipilih.
Mengapa Visio?
1 - mendukung grafik vektor;
2 - memiliki editor vba built-in;
3 - memungkinkan Anda membuat perpustakaan elemen grafik Anda sendiri;
4 - memiliki kemampuan untuk menambahkan sekumpulan properti sewenang-wenang ke objek grafis (lihat Gambar 1)
5 - editor umum, banyak pengguna.
Oleh karena itu, Visio menjadi editor yang ideal untuk tujuan saya.
Gambar 1.
Grafik
Lebih mudah di sini, pertama kami mempertimbangkan pustaka highcharts, tetapi karena berbayar,
pilihan dibuat untuk d3.js.
d3.js adalah kerangka kerja yang sangat keren, fitur-fitur hebat, sedikit sulit dipelajari, tetapi ada banyak contoh di Internet.
Formulir web "Bagan" memungkinkan Anda untuk melihat bagan pada rentang waktu yang berbeda, mengoordinasikan bidang, mengatur skala, dan kemungkinan lainnya.
Platform pengembangan aplikasi
Untuk pengembangan aplikasi web dipilih platform pemrograman web ASP.NET yaitu framework ASP.NET MVC, kemudian aplikasi tersebut dipindahkan ke ASP.NET Core MVC.
Bagaimana aplikasi bekerja
Jadi, bagaimana cara kerja aplikasinya?
Aplikasi menerima data melalui antarmuka web api dan menampilkannya kepada pengguna dalam bentuk grafik dan diagram mnemonik.
Aplikasi dapat bekerja dengan dua cara.
Opsi pertama:
Gbr.2.
Seperti yang telah disebutkan, aplikasi mengimplementasikan antarmuka api web yang melaluinya menerima data, layanan data (modul program) terlibat langsung dalam menerima data dari sumber. Di versi pertama karya, Anda dapat melihat bahwa layanan diimplementasikan di dalam aplikasi, yang praktis jika, misalnya, aplikasi dan sumber data berada di jaringan yang sama.
Opsi kedua:
Gbr . 3
Di versi kedua, layanan adalah modul perangkat lunak terpisah yang diakses aplikasi untuk data. Opsi kedua dapat digunakan ketika sumber dan aplikasi berada di jaringan yang berbeda, aplikasi, misalnya, digunakan di hosting.
Objek utama dalam aplikasi adalah Tag - variabel, nilai terukur dari proses teknologi. Serangkaian metode (misalnya GetTagOnline, GetTagArchive, dll.) Untuk bekerja dengan tag mengimplementasikan antarmuka api web.
Jadi, aplikasi mengambil data dari layanan, memuat diagram mnemonik, yang dikembangkan oleh pengguna di Visio, dan menampilkan data ini.
Animasi objek grafik pada diagram mnemonik
Javascript digunakan untuk menganimasikan elemen grafis dari skema mnemonik. Untuk memudahkan pengguna mengembangkan fungsi animasi, aplikasi memiliki perpustakaan kecil yang mencakup, misalnya, fungsi berikut: printf (Teks), SetText (Object, Index, Value), SetBackColor (Object, Index, Value), SetVisible (Object, Value), GetTag (TagName), dll.
Misalnya, fungsi tampilan nilai terukur:
Function Field (Object, Property) {
var Tag = GetTag(Property.Tag1);
SetText(Object,1,Tag.Value);
}Administrasi, konfigurasi.
Untuk konfigurasi, file konfigurasi digunakan, di mana pengguna membuat profil, menambahkan layanan, dll. Aplikasi ini adalah aplikasi konsol, dapat berfungsi sebagai win-service.
Aplikasi ini menggunakan server web lintas platform Kestrel bawaan.
Artikel tersebut disebut "Pemantauan data dari sistem kontrol proses otomatis dan tidak hanya". Aplikasi pada prinsipnya dapat menampilkan setiap data yang dapat direpresentasikan dalam bentuk diagram, diagram, dll.
Terima kasih semua telah membaca, saya tertarik dengan kritik, umpan balik apa pun. Terima kasih.
Itu saja, di bawah ini adalah beberapa gambar aplikasi.
Contoh diagram mnemonik (dibuat dari file eplan -> autocad -> visio.):
Grafik:
