Use case 03 radar picture with history

This use case is showing you how to set up a image viewer. For what I need it you may ask. :) Imagine you have a local radar weather station, in my case it's panama canal radar weather located in address https://pancanal.com/en/weather-radar/ you can see on that page that thay provide us with nice radar picture and ~1MB of additional crap. To add to it it's only there when you have internet and no historical view available. So by extracting the last image url in my case it's https://radar-meteorologico.delcanal.com/current_image.gif we will set up in oiyshTerminal a node-red flow to store that image and be able to come when ever we want to it. As long your terminal have internet it will download image and store it for later view. You can do it with any image you want: passage wather forcast, web cam or different stuff.

You will need: working node-red, sshd, mysql, grafana (optional)

Ok let's do it!

import json to node red as new flow node red json: [ { "id": "1906e7aa5220053f", "type": "inject", "z": "59f8c157b9329c7d", "name": "radarPanamaCanal", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "*/5 0-23 * * *", "once": false, "onceDelay": 0.1, "topic": "", "payload": "", "payloadType": "date", "x": 180, "y": 540, "wires": [ [ "429dd01f778c80bb" ] ] }, { "id": "429dd01f778c80bb", "type": "http request", "z": "59f8c157b9329c7d", "name": "", "method": "GET", "ret": "bin", "paytoqs": "ignore", "url": "https://radar-meteorologico.delcanal.com/current_image.gif", "tls": "", "persist": false, "proxy": "", "authType": "", "senderr": false, "x": 390, "y": 620, "wires": [ [ "47d840b097562abb" ] ] }, { "id": "47d840b097562abb", "type": "function", "z": "59f8c157b9329c7d", "name": "", "func": "if( msg.payload.length > 1000 ){\n t = parseInt( Date.now() / 1000 ); \n \n node.status({\n text: \"OK:\"+msg.payload.length\n });\n \n return {\n fileName: \"pcr_\"+t+\".gif\",\n entryDate: t,\n payload: msg.payload,\n filename: \"/data/data/com.termux/files/usr/var/lib/proot-distro/installed-rootfs/debian/usr/share/grafana/public/prc/pcr_\"+t+\".gif\"\n \n };\n}else{\n node.status({\n text: \"file error it's to small :(\"\n });\n}", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 580, "y": 620, "wires": [ [ "7b38205253f0674a", "11d932ca9be5fc0c" ] ] }, { "id": "7b38205253f0674a", "type": "file", "z": "59f8c157b9329c7d", "name": "", "filename": "", "appendNewline": false, "createDir": false, "overwriteFile": "false", "encoding": "none", "x": 780, "y": 700, "wires": [ [] ] }, { "id": "11d932ca9be5fc0c", "type": "function", "z": "59f8c157b9329c7d", "name": "", "func": "if( msg.payload.length > 1000 ){\n return {\n topic: \"prc/img\",\n payload: msg.fileName\n };\n \n}", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 780, "y": 620, "wires": [ [ "e4aed3da87a13e66", "4c1743b99ea8d816" ] ] }, { "id": "e4aed3da87a13e66", "type": "mqtt out", "z": "59f8c157b9329c7d", "name": "", "topic": "", "qos": "", "retain": "", "respTopic": "", "contentType": "", "userProps": "", "correl": "", "expiry": "", "broker": "d611ceefa2b9fd0b", "x": 1070, "y": 580, "wires": [] }, { "id": "a5bbe4632f6e501e", "type": "inject", "z": "59f8c157b9329c7d", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "payload": "new img", "payloadType": "str", "x": 1320, "y": 600, "wires": [ [ "af111f5be02e3b6b" ] ] }, { "id": "af111f5be02e3b6b", "type": "websocket out", "z": "59f8c157b9329c7d", "name": "", "server": "a9d942b1a9429b90", "client": "", "x": 1520, "y": 680, "wires": [] }, { "id": "facc7bd8e163a42d", "type": "function", "z": "59f8c157b9329c7d", "name": "reload on new img", "func": "\nreturn { payload: \"new img\"};", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 1250, "y": 680, "wires": [ [ "af111f5be02e3b6b" ] ] }, { "id": "4c1743b99ea8d816", "type": "delay", "z": "59f8c157b9329c7d", "name": "", "pauseType": "delay", "timeout": "5", "timeoutUnits": "seconds", "rate": "1", "nbRateUnits": "1", "rateUnits": "second", "randomFirst": "1", "randomLast": "5", "randomUnits": "seconds", "drop": false, "allowrate": false, "outputs": 1, "x": 1080, "y": 680, "wires": [ [ "facc7bd8e163a42d" ] ] }, { "id": "88f22ccd478d70ee", "type": "status", "z": "59f8c157b9329c7d", "name": "ws", "scope": [ "af111f5be02e3b6b" ], "x": 1430, "y": 840, "wires": [ [ "cd0c297d322a09ff", "348be5b9666ef0f8" ] ] }, { "id": "cd0c297d322a09ff", "type": "debug", "z": "59f8c157b9329c7d", "name": "", "active": false, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "x": 1570, "y": 840, "wires": [] }, { "id": "348be5b9666ef0f8", "type": "function", "z": "59f8c157b9329c7d", "name": "", "func": "if( msg.status.event == 'connect'){\n node.status({\n text:\"uuu connection :)\"\n });\n \n \n q = select \n id,msg,entryDate \n from topic_prc_img\n order by entryDate desc\n limit 100;\n \n msg.topic = q;\n return msg;\n \n}", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 1480, "y": 960, "wires": [ [ "b49048a604d9fb22" ] ] }, { "id": "b49048a604d9fb22", "type": "mysql", "z": "59f8c157b9329c7d", "mydb": "cbada9e3a1ba45d8", "name": "", "x": 1640, "y": 960, "wires": [ [ "61a139ed2f4f8a86" ] ] }, { "id": "61a139ed2f4f8a86", "type": "function", "z": "59f8c157b9329c7d", "name": "", "func": "\nvar imgs = [];\nvar imgOne = \"\";\nfor(var i=0;i<msg.payload.length; i++){\n if( i == 0 )\n imgOne = msg.payload[i].msg;\n imgs.push( msg.payload[i].msg );\n}\n\nnode.send({\n payload: imgs\n});", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 1780, "y": 960, "wires": [ [ "af111f5be02e3b6b" ] ] }, { "id": "a081bb74900136bd", "type": "comment", "z": "59f8c157b9329c7d", "name": "history for passafe weather", "info": "", "x": 150, "y": 1000, "wires": [] }, { "id": "d611ceefa2b9fd0b", "type": "mqtt-broker", "name": "nodeRedAtHu", "broker": "localhost", "port": "10883", "clientid": "nodeRedHu", "autoConnect": true, "usetls": false, "protocolVersion": "4", "keepalive": "60", "cleansession": true, "birthTopic": "", "birthQos": "0", "birthPayload": "", "birthMsg": {}, "closeTopic": "", "closeQos": "0", "closePayload": "", "closeMsg": {}, "willTopic": "", "willQos": "0", "willPayload": "", "willMsg": {}, "sessionExpiry": "" }, { "id": "a9d942b1a9429b90", "type": "websocket-listener", "path": "/ws/pcr/newImg", "wholemsg": "false" }, { "id": "cbada9e3a1ba45d8", "type": "MySQLdatabase", "name": "", "host": "127.0.0.1", "port": "3306", "db": "svoiysh", "tz": "", "charset": "UTF8" } ]

you can import it as a new flow or add it to existing one. You need to edit some stuff. First node on the left 'radarPanamaCanal' double click on it and edit interval time to your need. In my case as you can see it's 5min. Your image can by update every ? yy different time interval you need to know that. Name you can change also :)

Confirm by pressing DONE

Edit next in line node 'http request'. You can see URL to your internet file. Put there yours.

Confirm by pressing DONE

Edit next in line node 'function'. You can see fileName at line 9 and filename at line 12 edit it and on oiyshTerminal by making remote file access create target directory from 'filename' variable.

Confirm by pressing DONE

now you have form. Go bottom path you will see at the end [ws] .... Edit it. Set your path or live it as it's. It can stay like this as long you don't have more then one historical images is system. If you have more you need to set new path.

If you have more then one historical image you need to edit topic in top path in form node 'function' change topic to your need and same value need to be enter (Case B) in 'function' before 'svoiysh'.

you cen find there

from topic_prc_img

change it to same value as in Case B.

ok Deploy node-red

from repository gram index.html from imgHistoryViewer You can find in it config section. Set up to yours case. If yours oiyshTerminal have different ip or you set up different ws path or img is in different path, or you have defferent refresh intervals.

You can use index.html file as it is or put in to your oiyshTerminal that it will be accessible to all your devices. I'm putting it to grafana directory :P putting it using remote file access in /data/data/com.termux/files/home/debiar_rootfs/usr/share/grafana/public/ and renaming index.html to pcr.html so I can access it by http://192.168.43.1:3000/public/pcr.html