Get a remote image and display on Lovelace

Configuration
1

Keen for some advice to create a solution for this:

I have build a remote ESP32/SIM7600 IOT sensor at a remote property. It has a PIR, shock, temp and camera.

IOT device sends images in this format
160223181139.jpg
160223181140.jpg
160223181141.jpg

Build a pane inside of Lovelace. What I need to now figure out is how to get the image off a hosted FTP server and then add to /media/camera/CamImage.jpg.

Started with a Node Red flow but most FTP get’s dont support using a variable i.e., msg.payload unless someone can point me in the right direction. I was filtering by the last image date and then that image was the msg.payload.

So perhaps there is another way to approach this without Node Red? I do want a copy of the image off the FTP and stored local rather than say scraping the image.

Second question is if I store locally to here over writing the /media/camera/CamImage.jpg image how do I show the image in Lovelace pane? At the moment it has the full Home Assistant URL i.e., the URL of the image but I should be able to use a internal path.

Hopefully this makes sense looking for ideas on how to achieve this please?

image
image616×614 79.4 KB

2

Ok have the flow now working

[{"id":"467354e6dd094a5f","type":"tab","label":"FTP","disabled":false,"info":"","env":[]},{"id":"693ccb5aebc659fc","type":"inject","z":"467354e6dd094a5f","name":"Get Image every 15 min","props":[{"p":"payload"}],"repeat":"900","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"domain.com/Camera","payloadType":"str","x":170,"y":60,"wires":[["31ff6b36e0b622f5"]]},{"id":"db3c92f6d1276edb","type":"debug","z":"467354e6dd094a5f","name":"Debug Output","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":880,"y":340,"wires":[]},{"id":"7a6112c6c872a215","type":"function","z":"467354e6dd094a5f","name":"Filter by modification time","func":"msg.payload = msg.payload.filter(f => f.type === '-' && f.name.endsWith('.jpg'));\nmsg.payload.sort((a, b) => b.mtime - a.mtime);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":320,"wires":[["f1bb984e6636c890"]]},{"id":"f1bb984e6636c890","type":"function","z":"467354e6dd094a5f","name":"Get lastest JPG","func":"msg.payload = msg.payload[0];\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":460,"y":420,"wires":[["db3c92f6d1276edb","48739aa8b805ab67"]]},{"id":"31ff6b36e0b622f5","type":"change","z":"467354e6dd094a5f","name":"Move Payload to Filename","rules":[{"t":"move","p":"payload","pt":"msg","to":"filename","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":160,"wires":[["edb48ac579207041"]]},{"id":"48739aa8b805ab67","type":"function","z":"467354e6dd094a5f","name":"Fn add remote file path + image","func":"msg.filename = \"/domain.com/Camera/\" + msg.payload.name;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":520,"wires":[["db3c92f6d1276edb","d5c53eae596e0b98"]]},{"id":"edb48ac579207041","type":"ftp in","z":"467354e6dd094a5f","ftp":"88b86ecb9b39502e","operation":"list","filename":"","localFilename":"","name":"List","x":430,"y":240,"wires":[["7a6112c6c872a215","db3c92f6d1276edb"]]},{"id":"d5c53eae596e0b98","type":"ftp in","z":"467354e6dd094a5f","ftp":"88b86ecb9b39502e","operation":"get","filename":"","localFilename":"/media/camera/CamImage.jpg","name":"Get latest image","x":460,"y":620,"wires":[["db3c92f6d1276edb"]]},{"id":"88b86ecb9b39502e","type":"ftp","host":"00.00.00.00","port":"21","secureOptions":"","user":"FTPuser","connTimeout":"30000","pasvTimeout":"10000","keepalive":"10000"}]
3

So the last piece to the puzzle is the NR flow saves to

/media/camera/CamImage.jpg

So if I want to show a image on the dashboard what is the path to use in a Picture Card Configuration?

4

image string Required

The URL of an image. When you want to store images in your Home Assistant installation use the hosting files documentation. After storing your files, use the /local path, for example, /local/filename.jpg.

5

What access does Node Red have?

Works:
/media/camera/CamImage.jpg

Stops Node Red
/local/camera/CamImage.jpg

23 Feb 13:24:43 - [info] [server:Home Assistant] Connected to http://supervisor/core
23 Feb 13:24:43 - [info] [server:Home Assistant] Connected to http://supervisor/core
23 Feb 13:25:03 - [red] Uncaught Exception:
23 Feb 13:25:03 - [error] Error: ENOENT: no such file or directory, open ‘/local/camera/CamImage.jpg’
[13:25:03] INFO: Service Node-RED exited with code 1 (by signal 0)
s6-rc: info: service legacy-services: stopping
s6-rc: info: service legacy-services successfully stopped
s6-rc: info: service nginx: stopping
[13:25:03] INFO: Service NGINX exited with code 0 (by signal 0)
s6-rc: info: service nginx successfully stopped
s6-rc: info: service init-nginx: stopping