Place image in a pdf automatically generated by node-red

General
1

I'm trying to put an image of my dashboard into a PDF automatically clicking on inject, this image is generated by the "node-red-contrib-web-page-screenshot"
but I'm not getting it, here's my flow

[{"id":"67c61941.053d58","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"2fe6f48.ec2f80c","type":"screenshot","z":"67c61941.053d58","name":"","url":"http://localhost:1880/ui/","path":"","x":270,"y":200,"wires":[["1e113dda9c6c4827"]]},{"id":"962a41100eaf3347","type":"inject","z":"67c61941.053d58","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":160,"y":160,"wires":[["2fe6f48.ec2f80c"]]},{"id":"1e113dda9c6c4827","type":"pdfmake","z":"67c61941.053d58","name":"","outputType":"base64","inputProperty":"payload","options":"{}","outputProperty":"payload","x":300,"y":240,"wires":[["30ba1a2058d41330"]]},{"id":"30ba1a2058d41330","type":"file","z":"67c61941.053d58","name":"","filename":"C:/Users/Smart4.0/Downloads/pdfdash.pdf","filenameType":"str","appendNewline":true,"createDir":false,"overwriteFile":"false","encoding":"none","x":510,"y":300,"wires":[["bcc52d7892a83a76"]]},{"id":"bcc52d7892a83a76","type":"debug","z":"67c61941.053d58","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":700,"y":340,"wires":[]}]
2
  1. what platform is NR running on?
  2. what version of NR and node.js are you running (see startup log for this info)
  3. does NR crash when you run your flow?

I just tried your flow on my Mac and there was an Uncaught Exception
(GitHub issue opened: Crashes Node-RED with an 'Uncaught Exception' running on Mac · Issue #13 · pokiiio/node-red-contrib-web-page-screenshot · GitHub)

Please check your node-red log after you run a test.

3

I'm running version 3.1 on my personal computer, but I'm using port 1881, but that doesn't change anything.

Updated node:

[{"id":"9922be47d9a20ea8","type":"screenshot","z":"4748a14914e6348b","name":"","url":"http://localhost:1881/ui/","path":"","x":570,"y":240,"wires":[["6db30aa8db46f05d"]]}]
4

so is that a Mac or Windows or a pi or maybe a linux bus...

what do you see in the node-red log?

5

Its Windows, when I run it it runs normally

6

I would put a debug node (set to display the complete msg object) on the output of both the 'screenshot' and 'pdfmake' nodes to see what they are showing.

7

I changed some things, now I don't think it's going to fall

[{"id":"92eb446abd94871c","type":"inject","z":"4748a14914e6348b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":220,"y":140,"wires":[["9922be47d9a20ea8"]]}]
8

It generates the pdf, but I don't know how to work with the image data type and place it in the pdf

9

The docs for pdfmake show you how to include images

https://pdfmake.github.io/docs/0.3/document-definition-object/images/

So extrapolating from that, convert image to base64, add it to PDF content, save to file

image
image810×298 62.6 KB

Flow for above demo: requires node-red-contrib-image-tools & node-red-contrib-pdfmake

[{"id":"7855b31f.be455c","type":"inject","z":"73b44920080e0db3","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":480,"y":500,"wires":[["deb0cb7887a86149"]]},{"id":"54ef025d.56fccc","type":"template","z":"73b44920080e0db3","name":"","field":"payload","fieldType":"msg","format":"json","syntax":"mustache","template":"{\n    \"pageSize\": \"A4\",\n    \"pageOrientation\": \"portrait\",\n    \"pageMargins\": [\n        40,\n        60,\n        40,\n        60\n    ],\n    \"info\": {\n        \"title\": \"awesome Document\",\n        \"author\": \"john doe\",\n        \"subject\": \"subject of document\",\n        \"keywords\": \"keywords for document\"\n    },\n    \"content\": [\n        \"Sample Image from file\",\n        {\n            \"image\": \"{{{payload}}}\",\n            \"width\": 200\n        },\n        \"Sample SVG\",\n        {\n            \"svg\": \"<svg width=\\\"300\\\" height=\\\"200\\\" viewBox=\\\"0 0 300 200\\\"><polygon points=\\\"100,10 40,198 190,78 10,78 160,198\\\" style=\\\"fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;stroke-linecap:round;\\\"/></svg>\",\n            \"width\": 150\n        }\n\n    ]\n}","output":"json","x":660,"y":560,"wires":[["bdd7feab.d9412"]]},{"id":"57c0a23a.ab3bec","type":"file","z":"73b44920080e0db3","name":"","filename":"test.pdf","filenameType":"str","appendNewline":false,"createDir":false,"overwriteFile":"true","encoding":"none","x":660,"y":620,"wires":[[]]},{"id":"bdd7feab.d9412","type":"pdfmake","z":"73b44920080e0db3","name":"","outputType":"Buffer","inputProperty":"payload","options":"{}","outputProperty":"payload","x":820,"y":560,"wires":[["57c0a23a.ab3bec"]]},{"id":"deb0cb7887a86149","type":"jimp-image","z":"73b44920080e0db3","name":"Kitten from placekitten.com","data":"http://placekitten.com/300/300","dataType":"str","ret":"b64","parameter1":"","parameter1Type":"msg","parameter2":"","parameter2Type":"msg","parameter3":"","parameter3Type":"msg","parameter4":"","parameter4Type":"msg","parameter5":"","parameter5Type":"msg","parameter6":"","parameter6Type":"msg","parameter7":"","parameter7Type":"msg","parameter8":"","parameter8Type":"msg","sendProperty":"payload","parameterCount":0,"jimpFunction":"none","selectedJimpFunction":{"name":"none","fn":"none","description":"Just loads the image.","parameters":[]},"x":700,"y":500,"wires":[["20e4615dd8c0dee8"]]},{"id":"20e4615dd8c0dee8","type":"image viewer","z":"73b44920080e0db3","name":"","width":"200","data":"payload","dataType":"msg","active":true,"x":990,"y":500,"wires":[["54ef025d.56fccc"]]}]

There is also a built in demo CTRL-I -> examples -> node-red-contrib-pdfmake

image
image698×587 12.8 KB

10

Thank you very much for the explanation, I had no idea that the nodes had these examples ready, and how would I go about adding more than one image?

11

Well, add more images to the msg object and then update the template to use them.

If you don't know what that means then I recommend watching this playlist: Node-RED Essentials. The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.

12

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.