4. Dashboard Node-RED

Betapa menyenangkan sekali, ketika sesuatu yang sebelumnya terasa amat sangat sulit sekali, tiba-tiba, sekarang menjadi mudah dan gampang sekali, wow, betapa hidup itu menjadi menyenangkan sekali, amat sangat menyenangkan 😁😁😁😁. 

Apa itu yang terasa sulit? Menurut saya, membuat halaman web yang interaktif dengan pengguna itu sangat sulit. Namun sekarang, hal itu sudah tidak sulit lagi, karena adanya Node-RED. 

Jadi di bagian ini, saya akan menunjukkan pembuatan halaman web yang interaktif dengan pengguna, menggunakan bantuan Dashboard Node-RED.

Kebutuhan: saya ingin menampilkan halaman web berupa gambar proses kerja yang bisa berganti setiap kali tombol ditekan. Untuk menyederhanakan pembuatan, maka dibuat 8 buah tombol, dengan masing-masing tombol, setiap kali ditekan akan membuat halaman web menampilkan gambar tertentu.

Agar sesuai dengan nama blog ini, yaitu "Pemrograman Alat Medis", maka gambar proses kerja yang saya pilih tentunya harus berkaitan dengan alat medis. Dalam contoh di sini, saya memilih proses kerja CT Scan. Dari mencari gambar CT Scan di internet, saya menemukan 8 buah gambar yang saya urutkan berdasarkan tahapan proses kerjanya seperti terlihat dalam tabel berikut:

No

Proses

Gambar

1.

Pemberian cairan kontras

2.

Persiapan posisi pasien

3.

Meja CT Scan maju

4.

Pemindaian CT Scan1

5.

Pemindaian CT Scan2

6.

Pemindaian CT Scan3

7.

Pemindaian CT Scan4

8.

Pengolahan citra



Setelah mengumpulkan gambar proses kerja, simpan semua file gambar tersebut dalam satu folder, sebagai contoh di sini, semua file gambar tersebut disimpan di folder "gambar proses" di drive D. Beri nama file dengan menambahkan nomor sesuai urutan, sebagai contoh: step1, step2, step3, dst.nya.

Gambar 1. Tempatkan semua file gambar di satu folder, dan beri tambahan nama angka sesuai urutan

Gambar-gambar di atas dapat rekan-rekan unduh di link ini: 

Setelah file gambar diperoleh dan dikumpulkan dalam satu folder, maka berikutnya membuat program Node-RED untuk menampilkan semua gambar tersebut di halaman web secara interaktif. Berikut ini langkah-langkahnya:

1. Buka Node-RED. Cara membukanya, ketik "node-red" di command prompt, tunggu hingga muncul tulisan "Started flows". Setelah muncul tulisan tersebut, ketik "localhost:1880" di kolom browser. 

2. Setelah Node-RED terbuka. instal node dashboard Node-RED. Klik tombol menu di pojok kanan atas, klik Manage pallete, klik Tab Install, ketik dashboard, pilih node-red-dashboard, dan klik install.

Gambar 2. Instal node-red-dashboard dari Manage palette

3. Setelah node dashboard berhasil terinstal, ketik "ui" di kolom filter nodes di kotak palet, maka akan muncul bermacam-macam node dashboard seperti berikut:

Gambar 3. Ketik "ui" di filter nodes kotak palet, maka muncul bermacam-macam node dashboard

4. Tempatkan sebuah node button, sebuah node read file, sebuah node function dan sebuah node template, dan hubungkan keempatnya seperti ditunjukkan pada gambar berikut:

Gambar 4. Hubungkan node Button, node read file, node function dan node template

5. Klik 2 kali node button. Di kolom Group, klik tombol pensil, buat nama Tab Dashboard yang baru (Add new dashboard tab), dalam contoh di sini diberi nama Home, dan kemudian klik Add, kemudian beri nama Group: PROSES KERJA CT SCAN. Klik Add. Berikutnya isi Label = Step1, dan Payload = TAHAP 1 PEMBERIAN CAIRAN KONTRAS. Klik Done.

Gambar 5. Klik 2 kali node button, isi kolom Group, Label dan Payload

6. Klik 2 kali node read file, dan isi kolom Filename dengan lokasi file gambar yang pertama, dalam contoh di sini di D:\gambar proses\step1.png. Berikutnya di kolom output, pilih "a single Buffer object".

Gambar 6. Klik 2 kali node read file, isi kolom Filename dan Output

7. Klik 2 kali node function, dan isi kode program di kolom On Message untuk mengubah file gambar menjadi kode string base64 seperti berikut:

Gambar 7. Klik 2 kali node function, dan isi kode program seperti berikut ini:
  1. var getImageResult = msg.payload;
  2. var b64encoded = getImageResult.toString('base64');
  3. msg.payload = "data:image/jpg;base64," + b64encoded;
  4. return msg;
8. Berikutnya klik 2 kali node template, dan pilih nama Group sama seperti nama Group node button, kemudian isi kolom template dengan kode: <img ng-src="{{msg.payload}}"/> seperti gambar  berikut ini:

Gambar 8. Klik 2 kali node template, isi Group dan kolom template dengan kode <img ng-src="{{msg.payload}}"/>

9. Klik Done. Setelah keempat node terisi, maka berikutnya melakukan pengaturan layout tampilan dashboard di web. Klik tombol drop down di bawah tombol menu, kemudian pilih Dashboard.

Gambar 9. Klik tombol drop down di bawah menu, pilih Dashboard

10. Di kotak output Dashboard, di kolom Tabs & Links, terlihat nama Tab dan nama Group yang dibuat di node button dan node template. Klik pada nama Tab, pilih layout untuk membuka halaman layout.

Gambar 10. Buka layout di samping nama Tab yang digunakan untuk node button dan node template

11. Di halaman layout Dashboard, klik gambar gembok, kemudian atur posisi dan perlebar ukuran dashboard node button dan node template, buat Width = 16, seperti gambar berikut. Klik Done untuk menutup halaman layout.

Gambar 11. Atur posisi dan ukuran node button dan node template di halaman layout Dashboard

12. Berikutnya, tekan tombol Deploy untuk mengaktifkan program yang baru saja dibuat. Tombol Deploy ini memiliki 4 jenis tipe: Full, Modified Flows, Modified Nodes, Restart Flows. 
  • Pilihan Full akan mendeploy atau mengaktifkan semua program di semua Flow. 
  • Pilihan Modified Flows hanya akan mendeploy program di Flow yang sedang dibuat. 
  • Pilihan Modified Nodes hanya akan mendeploy node yang sedang dibuat. 
  • Pilihan Restart Flows akan me-restart kembali program di Flow yang sedang dibuat.
Gambar 12. Tekan tombol Deploy, namun sebelumnya, supaya deploy hanya dikenakan untuk Flow yang sedang dibuat, pilih Modified Flows, kemudian tekan tombol Deploy 

13. Berikutnya buka tampilan Dashboard dengan menekan tombol panah ke atas dalam kotak kecil (lihat Gambar 11), maka seharusnya akan muncul halaman web Dashboard seperti berikut (catatan: selain menggunakan tombol panah ke atas untuk membuka halaman web Dashboard, rekan-rekan juga bisa membukanya dengan cara mengetikkan langsung di kolom browser: "localhost:1880/ui").

Gambar 13. Halaman web menampilkan gambar proses yang pertama dan button STEP1

14. Berikutnya, agar kedelapan gambar proses bisa ditampilkan di halaman web, dan juga ada 8 button di halaman web, tambahkan node di Node-RED seperti gambar berikut:

Gambar 14. Menambahkan 7 node button dan 7 node read file untuk menampilkan 7 gambar yang lain

15. Tambahkan node text agar bisa menampilkan keterangan proses.

Gambar 15. Menambahkan node text untuk menampilkan keterangan proses

16. Klik 2 kali node text, pilih nama Group yang sama dengan node button, kosongi isian label, dan pilih salah satu layout text.

Gambar 16. Klik 2 kali node text, pilih nama Group, dan pilih salah satu layout text  

17. Tambahkan node audio out agar bisa memberikan keterangan proses melalui suara.

Gambar 17. Menambahkan node audio out untuk memberikan keterangan proses melalui suara

18. Klik 2 kali node audio out, pilih nama Group yang sama dengan node button, kemudian pilih TTS Voice: 160 : Microsoft Gadis Online (Natural) - Indonesian.

Gambar 18. Klik 2 kali node audio out, pilih nama Group, dan pilih salah satu TTS Voice (Indonesian)

19. Buka kotak output dashboard, dan klik pada tombol layout di samping nama Tab Home. Kemudian atur layout Dashboard kedelapan node button dan node template serta node text seperti berikut:

Gambar 19. Atur layout Dashboard dengan node text di atas node template dan kedelapan node button di bawahnya

20. Terakhir, tekan tombol Deploy. Kemudian buka Dashboard dengan menekan tombol tanda panah ke atas atau dengan mengetikkan "localhost:1880/ui" di kolom browser.

Gambar 20. Dashboard Node-RED menampilkan gambar proses dan keterangan proses di atasnya, dengan 8 buah tombol (STEP1- STEP8) sebagai pengatur tampilan

21. Agar lebih jelas, berikut ini video langkah-langkah pembuatan di atas.


Video pembuatan tampilan gambar proses kerja di halaman web

22. Sebagai latihan, silahkan untuk membuat gambar proses untuk salah satu dari alat ini:
  • baby incubator  
  • autoclave
  • syringe pump
Sebagai bantuan untuk mencari gambar proses kerja, berikut ini gambaran prosedur pengoperasian dari ketiga alat, yang saya peroleh dari ChatGPT:

Bagaimana prosedur pengoperasian baby incubator?
Baby incubator adalah perangkat medis yang dirancang untuk memberikan perawatan khusus kepada bayi yang baru lahir dengan masalah medis. Berikut adalah prosedur pengoperasian baby incubator yang umum dilakukan:
  1. Pastikan bahwa baby incubator sudah terpasang listrik dan suhu sudah mencapai suhu yang tepat (biasanya antara 36-37 derajat Celsius).
  2. Pastikan bahwa bayi yang akan dimasukkan ke dalam incubator sudah bersih dan kering. Bayi juga harus memakai pakaian yang sesuai.
  3. Posisikan bayi dengan hati-hati di dalam incubator. Pastikan bayi dalam posisi yang nyaman dan aman, dengan kepala sedikit lebih tinggi dari tubuh untuk membantu mengurangi risiko masalah pernapasan.
  4. Pastikan bahwa semua sensor, monitor, dan alat ukur lainnya di dalam incubator berfungsi dengan baik dan terkalibrasi dengan benar.
  5. Selama pengoperasian, perhatikan bayi secara terus-menerus untuk memastikan kondisinya stabil dan tidak ada tanda-tanda masalah kesehatan yang berkembang.
  6. Pastikan bahwa semua kabel dan saluran udara di dalam incubator teratur dan tidak terlipat atau tertekuk.
  7. Jangan biarkan bayi dalam incubator terlalu lama, biasanya selama beberapa hari atau minggu tergantung pada kondisinya. Periode waktu tersebut bisa berbeda-beda tergantung pada kebutuhan bayi dan rekomendasi dokter.
  8. Terakhir, pastikan untuk membersihkan dan mendesinfeksi incubator dengan benar setelah setiap penggunaan untuk mencegah infeksi.
Bagaimana prosedur pengoperasian Autoclave?
Autoclave adalah perangkat medis yang digunakan untuk membunuh mikroorganisme di dalam alat kesehatan atau benda-benda medis lainnya. Berikut adalah prosedur pengoperasian autoclave yang umum dilakukan:
  1. Persiapkan autoclave dengan mengisi air ke dalam bak air dan memeriksa bahwa ketinggian air sesuai dengan instruksi penggunaan.
  2. Pastikan bahwa semua benda atau alat yang akan disterilkan bersih dan tidak ada sisa bahan kimia atau cairan apapun yang menempel.
  3. Tempatkan benda atau alat ke dalam autoclave dan pastikan bahwa mereka tidak terlalu padat, agar uap panas bisa mengalir dengan mudah di antara mereka.
  4. Tutup pintu autoclave dengan rapat dan pastikan bahwa katup uap dan katup pengeluaran udara dalam posisi tertutup.
  5. Nyalakan autoclave dan atur suhu dan tekanan sesuai dengan instruksi penggunaan dan jenis benda atau alat yang akan disterilkan.
  6. Tunggu autoclave mencapai suhu dan tekanan yang sesuai dan biarkan proses sterilisasi berjalan sesuai dengan waktu yang direkomendasikan.
  7. 7Setelah proses sterilisasi selesai, matikan autoclave dan biarkan suhu dan tekanan di dalam autoclave turun sebelum membuka pintu.
  8. Saat membuka pintu, pastikan bahwa uap panas sudah hilang dan pastikan bahwa benda atau alat yang disterilkan sudah kering.
  9. Setelah penggunaan, bersihkan autoclave dengan benar dengan membersihkan bak air, mencuci bagian dalam dan luar autoclave, dan mendesinfeksi dengan menggunakan bahan desinfektan yang direkomendasikan.

Bagaimana prosedur pengoperasian Syringe Pump?
Syringe pump adalah perangkat medis yang digunakan untuk memberikan obat dalam jumlah kecil dan kontrol yang akurat melalui suntikan intravena atau infus. Berikut adalah prosedur pengoperasian syringe pump yang umum dilakukan:
  1. Persiapkan syringe pump dengan memastikan bahwa perangkat dalam kondisi baik dan terpasang dengan benar pada permukaan yang datar.
  2. Persiapkan syringe dengan memeriksa apakah syringe cocok dengan pompa. Pastikan juga bahwa syringe sudah diisi dengan obat yang tepat dan dalam jumlah yang tepat.
  3. Tempatkan syringe dengan hati-hati di dalam pompa dan kencangkan pengait syringe.
  4. Atur parameter pengoperasian, seperti kecepatan infus dan dosis obat yang harus diberikan.
  5. Pasang tabung infus ke dalam pompa dan kencangkan.
  6. Tekan tombol start untuk memulai infus dan pastikan bahwa obat keluar dari tabung infus dengan lancar.
  7. Periksa kondisi pasien secara teratur untuk memastikan bahwa infus berjalan dengan baik dan tidak ada masalah yang terjadi. Pastikan juga bahwa syringe masih terpasang dengan benar dan isi obat cukup untuk terus infus.
  8. Setelah penggunaan, matikan pompa dan lepaskan syringe dengan hati-hati. Pastikan bahwa syringe kosong dan tidak ada obat yang tersisa di dalamnya.
  9. Bersihkan pompa dengan menggunakan bahan pembersih yang direkomendasikan dan pastikan bahwa perangkat dalam kondisi bersih sebelum penyimpanan.

No comments:

Post a Comment