Semangat yg ingin dibangun dari platform Node-RED adalah bagaimana alat kontrol yg sudah ada sebelumnya kini bisa menjadi terhubung secara IOT. Itulah yg menjadi latar belakang dimana orang yg berkecimpung dalam dunia kontrol, PLC, Modbus , dan sebagainya, kini sudah dilibas juga oleh para opreker IT dengan iming-iming jargon industri 4.0. Tapi kenyataannya memang seperti itu di era setelah 2010 dimana dunia elektronika-kontrol mulai di gabungkan oleh platform hardware opensource dari eranya Arduino - Raspberry pi , hingga protokol komunikasi gratisan nan tangguh seperti MQTT.
Bagi insinyur yang mulai memasuki masa senja tidak perlu berkecil hati karena Node-RED menyediakan segala kemudahan, tidak lebih susah dibanding saat mempelajari bahasa assembly. Hanya butuh pengenalan disisi programming berbasis web, dimana Node-RED menggunakan Java /Node JS sebagai pembuat server di PC atau raspberry pi. Jadi tidak perlu lagi menginstall PHP TRIAD jaman dulu atau database mySql yg susah itu, kini cukup hanya dengan menginstall package Node bernama dashbord maka kita bisa membuat UI (User Interface) berbasis web sebagai IO ke perangkat yang ingin kita kontrol.
Langkah pertama untuk membuat UI yang cantik seperti gambar diatas adalah menginstall melalui command prompt :
npm i node-red-dashboardSelanjutnya kita akan meneruskan praktek Hello World bagian pertama ( baca disini ) , dan kita akan mengontrol display 7 segmen dari UI Node-RED.
Yang perlu diperhatikan dalam Node-RED adalah format pesan yg dialirkan melalui flow di tiap node adalah berupa JSON yang merupakan standar format komunikasi dalam Node JS / Java. Jadi pesan serial yg diterima PC melalui com port seperti berikut :
{"payload":"Humidity: 79.10 %, Temp: 28.70 Celsius\r\n","port":"COM17","_msgid":"1a33573e.67c289"}
Sehingga untuk menerima data ASCII nya yg dikirim arduino harus melakukan parsing JSON pada "payload" ( msg.payload).
Kembali ke praktek pembuatan UI web dari Node-RED, saya akan melakukan hello world ke UI dengan menuliskan pembacaan serial com port ( yg dikirim arduino sebagai suhu dan kelembaban). perhatikan gambar berikut :
Saya akan menempatkan text pada web UI dan meghubungkannya ke seral COM17 dari PC saya. Untuk itu saya butuh melakukan seting UI nya dengan pertama membuat UI GROUP sebagai canvas untuk menempatkan elemen web nya seperti text, form, grafik dan lain sebagainya.
Dari gambar diatas jangan lupa butuh meng-create nama dan tab dari group UI yg ingin ditampilkan dan hasilnya seperti gambar dibawah ini, web UI dapat diakses pada alamat : http://localhost:1880/ui .
Untuk membuat lebih cantik saya akan menambahkan item berupa gauge (meteran) dan grafik pada web UI, namun perlu melakukan parsing payload sehingga butuh script untuk mendapatkan angka suhu dan kelembaban nya saja. Saya menambahkan FUNCTION node pada flow seperti gambar dibawah :
Isi script pada function bernama temp adalah parsing nilai temperature seperti berikut :
Kita ingat payload string ascii yg dikirimkan arduino ber format seperti berikut :
Humidity: 79.10 %, Temp: 28.70 Celsius
Jadi parsingnya suhu pada karakter 25-29 dan kelembaban pada karakter 10-14. Script diatas berformat java dan hasil akhirnya mengembalikan nilai angka dalam format JSON.
Kemudian pada node gauge kita seting tampilan seperti berikut :
Saya juga menambahkan chart / grafik untuk nilai dari kelembaban. Hasil dari web UI nya seperti berikut :
Nah..bagaimana dengan kontrol 7 segmen dari web UI ? Saya akan menambahkan Slider yang kita bisa geser pada web UI dan otomatis mengirimkan ascii serial ke arduino dan mengubah 7 segmen.
Jangan lupa kalau data yg dikirimkan ke comport berupa ASCII karakter jadi topic yg dikirimkan harus sesuai. hasilnya bagaimana ? bagus kok ...
Bagaimana ? Tertarik untuk mengoprek lebih lanjut ? Tunggu tulisan saya berikutnya yaa....
0 komentar:
Posting Komentar