How to embed google map at node-red ui template


This is some example how to embed google map at your template for node-red ui dashboard, hope this help and don’t forget to add your own key for google map at gmap template

Good Luck

Happy Coding

Salam ngoprek

[{"id":"cab47749.47c698","type":"inject","z":"322d96d4.be125a","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":560,"wires":[["c80c476c.d450c8"]]},{"id":"c80c476c.d450c8","type":"function","z":"322d96d4.be125a","name":"map","func":"\nvar latitude =-6.21462;\nvar longitude =106.84513;\n\n\nmsg.payload = {latitude, longitude}\n\n\nreturn msg;","outputs":1,"noerr":0,"x":470,"y":560,"wires":[["22edf841.88a418"]]},{"id":"22edf841.88a418","type":"ui_template","z":"322d96d4.be125a","group":"8add4fe8.53baf","name":"GMAP","order":3,"width":"6","height":"6","format":"<!DOCTYPE html>\n<html>\n  <head>\n    <style>\n       /* Set the size of the div element that contains the map */\n      #map {\n        height: 100%;  /* The height is 400 pixels */\n        width: 100%;  /* The width is the width of the web page */\n       }\n    </style>\n  </head>\n  <body>\n\n    <!--The div element for the map -->\n    <div id=\"map\"></div>\n \n\n<script>  \n\nvar latitude;\nvar longitude;\n\n(function(scope) {\n        //Have to use $watch so we pick up new, incoming msg's\n        scope.$watch('msg.payload', function() {\n\n        initMap(scope.msg.payload)     \n            \n        })\n\n\n    })(scope)\n    \n\n\n\n// // // Initialize and add the map\n function initMap(data) {\n\n  \n  var latitude = data.latitude\n  var longitude = data.longitude\n  \n  console.log(latitude);\n  console.log(longitude);\n  \n  var jakarta = {lat:latitude , lng: longitude };\n\n\n  var map = new google.maps.Map(\n      document.getElementById('map'), {zoom: 18, center: jakarta, mapTypeId: 'satellite'});\n\n  var marker = new google.maps.Marker({position: jakarta, map: map});\n}\n\n    </script>\n\n    <script async defer\n    src=\"https://maps.googleapis.com/maps/api/js?key=<yourkeyhere>&callback=initMap\">\n    </script>\n\n  </body>\n</html>\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":690,"y":560,"wires":[["92a07c8.8e7118"]]},{"id":"92a07c8.8e7118","type":"debug","z":"322d96d4.be125a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":870,"y":560,"wires":[]},{"id":"8add4fe8.53baf","type":"ui_group","z":"","name":"Pictures","tab":"c23383c7.b69a7","order":1,"disp":false,"width":"6","collapse":false},{"id":"c23383c7.b69a7","type":"ui_tab","z":"","name":"LIGHTING PLANT","icon":"dashboard","order":2}]

Add map to node-red


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>

<script>
    (function() {
        const cScope = this.scope;
        setTimeout(function () {
            
        	const map = L.map('mapid').setView([48.204550, 16.364333], 13);
            let marker;
            
        	L.tileLayer('https://{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png', {
        		maxZoom: 18,
                subdomains: ["maps1", "maps2", "maps3", "maps4"]
        	}).addTo(map);
        	
        	map.on('click', function(e) {
                cScope.send(e.latlng);
                if (marker) {
                    map.removeLayer(marker);
                };
                marker = L.circleMarker(e.latlng).addTo(map);
            });
            
            setTimeout(function () {
                map.invalidateSize();
            }, 100);
        }, 300);
    })();
</script>

<div id="mapid" style="width: 100%; height: 320px;"></div>

This is some sample ui template for node-red ui, hope this help

Happy Coding

Salam ngoprek

Simple scheduler in node-red


This is sample flow for scheduling task in node-red, i’m using this for controling pump in my diy indoor hydroponics system

[{"id":"7092122b.f6593c","type":"inject","z":"fee8201c.ff1e","name":"timer lamp on","topic":"lamp","payload":"1","payloadType":"str","repeat":"","crontab":"00 06 * * *","once":false,"onceDelay":0.1,"x":460,"y":1660,"wires":[["85b40c2d.7fdcc"]]},{"id":"e3a49fce.3cda7","type":"inject","z":"fee8201c.ff1e","name":"timer lamp off","topic":"lamp","payload":"0","payloadType":"str","repeat":"","crontab":"00 06 * * *","once":false,"onceDelay":0.1,"x":460,"y":1620,"wires":[["85b40c2d.7fdcc"]]},{"id":"85b40c2d.7fdcc","type":"debug","z":"fee8201c.ff1e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":730,"y":1640,"wires":[]}]

Happy Coding

Salam Ngoprek

Cara subscribe dan publish mqtt menggunakan node-red


Ok kali ini saya akan membagikan cara bagaimana pubsub (publish dan subscribe) di node-red, pertama tama pastikan node-red sudah terinstall kalau belum terinstall coba buka postingan saya dibawah tentang bagaimana cara install node-red di raspberry pi.

Langkah pertama buka browser kalian dan jalankan http://localhost:1880 kalau kalian menjalankannya didalam raspberry pi, kalau remote tinggal masukkan ip raspberry pi diikuti dengan portnya misalkan jadinya http://192.168.0.3:1880 cara mengetahui ip raspberry pi kalian berapa coba jalankan ifconfig di terminal, nanti kalian bisa menemukan ip kalian disana.

Ok setelah terbuka node-red maka akan menampilkan seperti dibawah ini

Screenshot from 2019-11-01 09-57-33

setelah itu kita install mqtt plugin di node-red dengan cara buka manage pallete didalam menu ( garis 3 = ) dibagian atas lihat gambar dibawah

Screenshot from 2019-11-01 09-59-48

setelah terbuka maka masuk ke pallete install lalu masukkan mqtt di search dan install node-red-contrib-mqtt-broker

Screenshot from 2019-11-01 10-01-45

Tunggu beberapa saat sampai terinstall selanjutnya kembali ke halaman depan dan ketikkan mqtt di filter nodes, maka plugin mqtt sudah terinstall.

Screenshot from 2019-11-01 10-03-12

Cara menggunakan plugin ini adalah dengan cara drag n drop ke dalam Flow, kalau kita  perhatian ada dua macam nodes yaitu mqtt in dan mqtt out mqtt in artinya kita subscribe ke topik apabila mqtt out maka kita publish ke mqtt broker.

Ok langkah selanjutnya adalah pastikan kalian menginstall mqtt broker kalau belum silahkan lihat postingan sebelum ini mengenai cara menginstall mqtt di raspberry pi, detailnya howto nya silahkan lihat video dibawah

untuk alamat ip di mosquitto server saya menggunakan 10.81.141.48 kalau di tempat kalian bisa menggunakan ip kalian masing masing atau bisa juga localhost kalau kalian menjalankannya langsung di raspberry pi.

Demikian tutorial ini semoga bermanfaat

Happy Coding …

Salam ngoprek …

Menginstall node-red di Raspberry pi


Cara mudah menginstall node-red di Raspberry

  1. Pastikan internet lancar
  2. Jalankan perintah dibawah ini
bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)

Tunggu sampai selesai kalau sukses maka node-red sudah terinstall

 

 

Playing with node-red and firebase


Screenshot from 2019-03-13 08-53-48

[{"id":"b4b35eea.927f1","type":"firebase modify","z":"1998deec.25e9e1","name":"","firebaseconfig":"","childpath":"data/level2","method":"set","value":"msg.payload","priority":"msg.priority","x":562,"y":285,"wires":[[]]},{"id":"d1031a34.0b5af8","type":"firebase modify","z":"1998deec.25e9e1","name":"","firebaseconfig":"","childpath":"data/level/","method":"set","value":"msg.payload","priority":"msg.priority","x":564,"y":200,"wires":[[]]},{"id":"5f50c27e.cc4b3c","type":"inject","z":"1998deec.25e9e1","name":"","topic":"","payload":"200","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":158,"y":200,"wires":[["d1031a34.0b5af8"]]},{"id":"a271ad16.9eab5","type":"inject","z":"1998deec.25e9e1","name":"","topic":"","payload":"{\"dev_id\":\"coba\",\"height\":200}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":158,"y":282,"wires":[["b4b35eea.927f1"]]},{"id":"6d4975ae.f1823c","type":"firebase.on","z":"1998deec.25e9e1","name":"","firebaseconfig":"","childpath":"data","atStart":true,"eventType":"value","queries":[],"x":258,"y":380,"wires":[["35856d82.641bb2"]]},{"id":"35856d82.641bb2","type":"debug","z":"1998deec.25e9e1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":614,"y":378,"wires":[]}]

Parsing data from mqtt ttn


Postingan kali ini adalah lanjutan dari postingan saya sebelumnya disini , nah pada postingan saya kali ini akan membahas bagaimana cara memparsing data json yang kita dapat dari ttn kemudian menampilkannya ke dalam dashboard, sehingga hasilnya seperti dibawah ini

[{"id":"1f1f6ed1.81cf91","type":"mqtt in","z":"7609c47a.c51b3c","name":"","topic":"+/devices/+/up","qos":"2","broker":"7833904b.af11d","x":220,"y":200,"wires":[["d839d790.4b77c8"]]},{"id":"d839d790.4b77c8","type":"json","z":"7609c47a.c51b3c","name":"","property":"payload","action":"obj","pretty":true,"x":470,"y":200,"wires":[["e2efc94c.1de158","47698174.a787f","9db17467.71c868","b38807c2.074058","6cc7cd06.b7c634"]]},{"id":"e2efc94c.1de158","type":"function","z":"7609c47a.c51b3c","name":"battery","func":"var obj = msg.payload;\nmsg.payload = obj.payload_fields.analog_in_3;\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":180,"wires":[["9ea82fec.53c49"]]},{"id":"47698174.a787f","type":"function","z":"7609c47a.c51b3c","name":"temperature","func":"var obj = msg.payload;\nmsg.payload = obj.payload_fields.temperature_1;\nreturn msg;","outputs":1,"noerr":0,"x":710,"y":240,"wires":[["491b941b.7cb80c"]]},{"id":"9db17467.71c868","type":"function","z":"7609c47a.c51b3c","name":"humidity","func":"var obj = msg.payload;\nmsg.payload = obj.payload_fields.relative_humidity_2;\nreturn msg;","outputs":1,"noerr":0,"x":700,"y":300,"wires":[["754ca03c.46161"]]},{"id":"491b941b.7cb80c","type":"ui_chart","z":"7609c47a.c51b3c","name":"","group":"7fb7eee3.fc934","order":1,"width":0,"height":0,"label":"Temperature","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":930,"y":240,"wires":[[],[]]},{"id":"9ea82fec.53c49","type":"ui_gauge","z":"7609c47a.c51b3c","name":"","group":"d98f26c6.56b8b8","order":1,"width":0,"height":0,"gtype":"gage","title":"Battery","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":920,"y":180,"wires":[]},{"id":"754ca03c.46161","type":"ui_chart","z":"7609c47a.c51b3c","name":"","group":"7fb7eee3.fc934","order":2,"width":0,"height":0,"label":"Humidity","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":920,"y":300,"wires":[[],[]]},{"id":"b38807c2.074058","type":"function","z":"7609c47a.c51b3c","name":"rssi","func":"var obj = msg.payload;\nmsg.payload = obj.metadata.gateways[0].rssi;\nreturn msg;","outputs":1,"noerr":0,"x":690,"y":360,"wires":[["9e68c3c6.729e5"]]},{"id":"9e68c3c6.729e5","type":"ui_chart","z":"7609c47a.c51b3c","name":"","group":"9a2e91ee.5594a","order":2,"width":0,"height":0,"label":"RSSI","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":910,"y":360,"wires":[[],[]]},{"id":"6cc7cd06.b7c634","type":"function","z":"7609c47a.c51b3c","name":"rssi","func":"var obj = msg.payload;\nmsg.payload = obj.metadata.gateways[0].snr;\nreturn msg;","outputs":1,"noerr":0,"x":690,"y":420,"wires":[["c2e09073.55f99"]]},{"id":"c2e09073.55f99","type":"ui_chart","z":"7609c47a.c51b3c","name":"","group":"9a2e91ee.5594a","order":3,"width":0,"height":0,"label":"SNR","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"86400","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":910,"y":420,"wires":[[],[]]},{"id":"7833904b.af11d","type":"mqtt-broker","z":"","name":"application_name","broker":"asia-se.thethings.network","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"7fb7eee3.fc934","type":"ui_group","z":"","name":"Chart","tab":"5d83a158.d5268","order":2,"disp":true,"width":"6","collapse":false},{"id":"d98f26c6.56b8b8","type":"ui_group","z":"","name":"Gauge","tab":"5d83a158.d5268","order":1,"disp":true,"width":"6","collapse":false},{"id":"9a2e91ee.5594a","type":"ui_group","z":"","name":"Others","tab":"5d83a158.d5268","order":3,"disp":true,"width":"6","collapse":false},{"id":"5d83a158.d5268","type":"ui_tab","z":"","name":"Home","icon":"timeline"}]

Parsing value json di node-red


Kali ini saya akan share bagaimana caranya parsing data json (dari mqtt) di node-red untuk mengambil valuenya saja yang nantinya data tersebut bebas kita gunakan untuk mentrigger sesuatu atau hanya untuk ditampilkan di ui node-red. Setelah browsing sana sini, tanya sana sini akhirnya entah kenapa tiba tiba malah bisa memparsing data dari mqtt yang bentuknya json, simplenya silahkan copas aja langsung flow node-red dibawah ini

[{"id":"cf8a386d.c705e8","type":"inject","z":"527576f4.5e79c8","name":"","topic":"lora","payload":"{\"temperature\":26,\"humidity\":30}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":900,"wires":[["5979b9b5.eb2a48"]]},{"id":"5979b9b5.eb2a48","type":"json","z":"527576f4.5e79c8","name":"","property":"payload","action":"obj","pretty":true,"x":290,"y":900,"wires":[["28036454.a91e2c","422cfaee.d99884"]]},{"id":"28036454.a91e2c","type":"function","z":"527576f4.5e79c8","name":"data","func":"var obj = msg.payload;\nmsg.payload = obj.temperature;\nreturn msg;","outputs":1,"noerr":0,"x":450,"y":900,"wires":[["b7bc5dc0.c6099"]]},{"id":"422cfaee.d99884","type":"function","z":"527576f4.5e79c8","name":"data","func":"var obj = msg.payload;\nmsg.payload = obj.humidity;\nreturn msg;","outputs":1,"noerr":0,"x":450,"y":960,"wires":[["71392630.791538"]]},{"id":"b7bc5dc0.c6099","type":"debug","z":"527576f4.5e79c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":650,"y":900,"wires":[]},{"id":"71392630.791538","type":"debug","z":"527576f4.5e79c8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":650,"y":960,"wires":[]}]

Disini saya mencontohkan untuk menginjek data berupa json kalau mau ngambil dari mqtt juga bisa cuman untuk praktisnya saja saya masukkan kedalam inject, datanya simple sebenarnya hanya berupa json seperti dibawah ini

{
"temperature": 26,
"humidity": 30
}

Kemudian data tersebut saya ubah didalam function sehingga nanti value dari temperature dan humiditynya saja yang diambil untuk diolah lebih lanjut. Demikian catatan saya kali ini semoga bermanfaat.

Happy Coding …

Salam Ngoprek …

Memasang Password di node-red


node-redAda yang belum tau node-red? yang suka main main dengan raspberry pi atau iot pasti familiar dengan node-red, ya node-red adalah suatu aplikasi dengan banyak fitur yang simple dan sangat gampang digunakan, kali ini saya akan share cara untuk memasang username dan password di node-red karena defaultnya node-red ini tidak memiliki authentifikasi.

Caranya gampang banget tinggal ke home dan akses .node-red dengan cara

cd $HOME/.node-red/

lalu buka setting.js dengan editor kesukaan kalian masing masing, saya sukanya pake nano jadi caranya akses ke nano setting.js tapi sebaiknya sebelum akses ke setting kita siapin passwordnya dulu yang nantinya akan kita ubah didalam setting.js, nah node-red sudah nyiapin password hashnya cara tinggal ketik command dibawah ini lalu masukkan password yang ingin kita hash lalu, copy hasil hashnya dan nanti masukkan ke dalam setting.jsnya. Dibawah ini cara hash passwordnya.

node-red-admin hash-pw

lalu kita bukan setting.js dengan cara

nano setting.js

Lalu cari setingan dibawah ini ubah username dan password dengan hasil hash yang tadi sudah kita buat.

adminAuth: {
    type: "credentials",
    users: [{
        username: "admin",
        password: "$2a$08$zZWtXTja0fB1pzD4sHCMyOCMYz2Z6dNbM6tl8sJogENOMcxWV9DN.",
        permissions: "*"
    }]
},

Setelah itu kita restart node-red dengan cara

sudo service node-red restart

Selesai setelah itu coba akses node-red dan masukkan username dan password yang sudah kita buat dan node-red pun sudah memiliki autentifikasi sehingga lebih secure

Sekian tutorial kali ni semoga bermanfaat dan Happy Coding …