Dashboard caching images? How to stop it?


#1

I'm using this flow:

[{"id":"53559a52.2e1c14","type":"mqtt in","z":"48ca8f09.5ed62","name":"Idle Image","topic":"IdleImage","qos":"0","broker":"bbe08c14.d3962","x":100,"y":600,"wires":[["9b3efa02.1513a8","a69d43fd.c9d2d"]]},{"id":"9b3efa02.1513a8","type":"change","z":"48ca8f09.5ed62","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"msg.filename","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":600,"wires":[["3484bc93.98b464"]]},{"id":"a69d43fd.c9d2d","type":"switch","z":"48ca8f09.5ed62","name":"","property":"payload","propertyType":"msg","rules":[{"t":"cont","v":"Cam0","vt":"str"},{"t":"cont","v":"Cam1","vt":"str"},{"t":"cont","v":"Cam2","vt":"str"},{"t":"cont","v":"Cam3","vt":"str"},{"t":"cont","v":"Cam4","vt":"str"},{"t":"cont","v":"Cam5","vt":"str"}],"checkall":"true","repair":false,"outputs":6,"x":275,"y":769,"wires":[["2e667d94.e96252"],["1fafa08a.564aaf"],["bb7010eb.c26e3"],["101f957c.66fafb"],["e87a9c06.6f5c2"],["7ed4d3ca.a9ec7c"]]},{"id":"7ed4d3ca.a9ec7c","type":"ui_button","z":"48ca8f09.5ed62","name":"filename5","group":"51715cb4.4a3ac4","order":11,"width":0,"height":0,"passthru":true,"label":"{{msg.payload}}","tooltip":"","color":"#101010","bgcolor":"#83ed7b","icon":"","payload":"","payloadType":"str","topic":"","x":465,"y":869,"wires":[[]]},{"id":"e87a9c06.6f5c2","type":"ui_button","z":"48ca8f09.5ed62","name":"filename4","group":"51715cb4.4a3ac4","order":9,"width":0,"height":0,"passthru":true,"label":"{{msg.payload}}","tooltip":"","color":"#101010","bgcolor":"#83ed7b","icon":"","payload":"","payloadType":"str","topic":"","x":465,"y":829,"wires":[[]]},{"id":"101f957c.66fafb","type":"ui_button","z":"48ca8f09.5ed62","name":"filename3","group":"51715cb4.4a3ac4","order":7,"width":0,"height":0,"passthru":true,"label":"{{msg.payload}}","tooltip":"","color":"#101010","bgcolor":"#83ed7b","icon":"","payload":"","payloadType":"str","topic":"","x":465,"y":789,"wires":[[]]},{"id":"bb7010eb.c26e3","type":"ui_button","z":"48ca8f09.5ed62","name":"filename2","group":"51715cb4.4a3ac4","order":5,"width":0,"height":0,"passthru":true,"label":"{{msg.payload}}","tooltip":"","color":"#101010","bgcolor":"#83ed7b","icon":"","payload":"","payloadType":"str","topic":"","x":465,"y":749,"wires":[[]]},{"id":"1fafa08a.564aaf","type":"ui_button","z":"48ca8f09.5ed62","name":"filename1","group":"51715cb4.4a3ac4","order":3,"width":0,"height":0,"passthru":true,"label":"{{msg.payload}}","tooltip":"","color":"#101010","bgcolor":"#83ed7b","icon":"","payload":"","payloadType":"str","topic":"","x":465,"y":709,"wires":[[]]},{"id":"2e667d94.e96252","type":"ui_button","z":"48ca8f09.5ed62","name":"filename0","group":"51715cb4.4a3ac4","order":1,"width":0,"height":0,"passthru":true,"label":"{{msg.payload}}","tooltip":"","color":"#101010","bgcolor":"#83ed7b","icon":"","payload":"","payloadType":"str","topic":"","x":465,"y":669,"wires":[[]]},{"id":"3484bc93.98b464","type":"file in","z":"48ca8f09.5ed62","name":"","filename":"","format":"","chunk":false,"sendError":false,"x":450,"y":600,"wires":[["e6dce4d6.32f848"]]},{"id":"e6dce4d6.32f848","type":"base64","z":"48ca8f09.5ed62","name":"","action":"str","property":"payload","x":580,"y":600,"wires":[["f0ea32f3.338f2"]]},{"id":"f0ea32f3.338f2","type":"template","z":"48ca8f09.5ed62","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img width=\"320px\" height=\"180px\" src=\"data:image/jpg;base64,{{{payload}}}\">","output":"str","x":720,"y":600,"wires":[["ac63d928.736bd8"]]},{"id":"ac63d928.736bd8","type":"switch","z":"48ca8f09.5ed62","name":"","property":"filename","propertyType":"msg","rules":[{"t":"cont","v":"Cam0","vt":"str"},{"t":"cont","v":"Cam1","vt":"str"},{"t":"cont","v":"Cam2","vt":"str"},{"t":"cont","v":"Cam3","vt":"str"},{"t":"cont","v":"Cam4","vt":"str"},{"t":"cont","v":"Cam5","vt":"str"}],"checkall":"true","repair":false,"outputs":6,"x":860,"y":600,"wires":[["7d3a7a4b.31db14"],["f77a9eb9.de054"],["fa461f5.23eeae"],["da68713f.4f342"],["bb8496f6.90ac78"],["6bc20b2b.c02044"]]},{"id":"7d3a7a4b.31db14","type":"ui_template","z":"48ca8f09.5ed62","group":"51715cb4.4a3ac4","name":"Cam0","order":2,"width":"7","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":1045,"y":569,"wires":[["6486c8f2.4b9468"]]},{"id":"f77a9eb9.de054","type":"ui_template","z":"48ca8f09.5ed62","group":"51715cb4.4a3ac4","name":"Cam1","order":4,"width":"7","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":1045,"y":609,"wires":[["6486c8f2.4b9468"]]},{"id":"fa461f5.23eeae","type":"ui_template","z":"48ca8f09.5ed62","group":"51715cb4.4a3ac4","name":"Cam2","order":6,"width":"7","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":1045,"y":649,"wires":[["6486c8f2.4b9468"]]},{"id":"da68713f.4f342","type":"ui_template","z":"48ca8f09.5ed62","group":"51715cb4.4a3ac4","name":"Cam3","order":8,"width":"7","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":1045,"y":689,"wires":[["6486c8f2.4b9468"]]},{"id":"bb8496f6.90ac78","type":"ui_template","z":"48ca8f09.5ed62","group":"51715cb4.4a3ac4","name":"Cam4","order":10,"width":"7","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":1045,"y":729,"wires":[["6486c8f2.4b9468"]]},{"id":"6bc20b2b.c02044","type":"ui_template","z":"48ca8f09.5ed62","group":"51715cb4.4a3ac4","name":"Cam5","order":12,"width":"7","height":"4","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":1045,"y":769,"wires":[["6486c8f2.4b9468"]]},{"id":"6486c8f2.4b9468","type":"file","z":"48ca8f09.5ed62","name":"","filename":"","appendNewline":true,"createDir":false,"overwriteFile":"delete","x":1230,"y":670,"wires":[[]]},{"id":"bbe08c14.d3962","type":"mqtt-broker","z":null,"name":"localhost:1883","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","closeTopic":"","closePayload":"","willTopic":"","willQos":"0","willRetain":"false","willPayload":""},{"id":"51715cb4.4a3ac4","type":"ui_group","z":"","name":"Person Detection","tab":"fb254a32.15a538","order":2,"disp":true,"width":"7","collapse":false},{"id":"fb254a32.15a538","type":"ui_tab","z":"","name":"AI Controller","icon":"dashboard","disabled":false,"hidden":false}]

To display image snapshots on the dashboard. Forget about the inefficiency of reading a temp file and then deleting it instead of sending an image buffer as the MQTT message, this quickly let me get something going to test.

I opened the dashboard again after several days of no use and its still showing the last images that were displayed -- despite them being gone from the disk. I cleared my browser cache and reloaded the page, the old images are still there!

I'd really rather have no image instead of something old and stale showing up!


Remove appCache from node-red-dashboard
How to display CCTV camera in dashboard (RTSP)
#2

Hi @wb666greene,

That is indeed weird.
I don't really have a solution, but a question. Have never used the ng-bind-html, but can't you do the same with a simpler flow? If you remove the template node, and put the '' tag directly in the camxxx nodes:

Until now I had never issues with caching, when using it like this ...

P.S. I highly recommend using node-red-contrib-image-output when troubleshooting image problems in a Node-RED flow. This way you can e.g. check which images are being send to your browser. Just to avoid that 'somehow' you are still sending old images. You never know ...


#3

BTW I have only had caching issues in the past when the 'src' attribute is pointing to an image on my server. But when you are pushing images (via websocket channel) to your dashboard, I had never caching troubles. The images are pushed to the browser, and put on the AngularJs scope (in 'msg'). And from there on it is binded to your image element in the html. Perhaps you can use the developer tools of your browser to see which images arrive via the websocket channel...


#4

It appears its not confined to the dashboard the Image Output node appears to be cached as well as I'm seeing old images after adding a new stream to your BigBuckBunny rtsp flow we've been discussing here: https://discourse.nodered.org/t/how-to-display-cctv-camera-in-dashboard-rtsp/5860/66


#5

Yes indees indeed, both Dasboard and node-red-contrib-image-output node use websockets. I don't use websockets anymore at the moment for this reason...