SVG Screenshot node

Share Your Nodes
1

Hi There,

As part of a new collection of introspection nodes, I've created a screenshot node that creates an SVG of the current tab. The idea is one drags the node into the flow, double clicks on the node and the tray opens with the SVG code. With a download link in the tray, the SVG can be downloaded.

This is an editor-only node meaning there is no need to deploy this node but that also means it works in Node-RED read-only mode.

It improves on something like svgexport.io browser plugin:

  • Respects the 'hide' CSS class that is used to hide specific elements, this the svgexport plugin cannot know.
  • Compliments the setting of visibility on the 'g' element with opacity=0. The SVG Standard ignores visibility on 'g' elements but browsers don't seem to care, Inkscape does care.
  • Image data (i.e. icons) is inlined using data:image/XXXX;base64, - this is good for things such as Inkscape that can't resolve relative urls. PNG, JPEG and SVG are supported.
  • It also retrieves font details and includes them in the SVG. This makes the font italic, even if it's not the correct font family (because font might not be installed on system).

Why I did this? Because I find some flows simply artistically pleasing and wanted to scale them up! And also because svgexport did not give me what I wanted :slight_smile:

Example is available online, resulting SVG image is shown below. Codebase is on github.

Cheers!

img

1 Like
2

Sadly:

0|Node-RED  | 3 May 10:41:24 - [warn] ------------------------------------------
0|Node-RED  | 3 May 10:41:24 - [warn] npm WARN config production Use `--omit=dev` instead.
0|Node-RED  | npm ERR! code EBADENGINE
0|Node-RED  | npm ERR! engine Unsupported engine
0|Node-RED  | npm ERR! engine Not compatible with your version of node/npm: eslint-plugin-jsdoc@36.0.8
0|Node-RED  | npm ERR! notsup Not compatible with your version of node/npm: eslint-plugin-jsdoc@36.0.8
0|Node-RED  | npm ERR! notsup Required: {"node":"^12 || ^14 || ^16"}
0|Node-RED  | npm ERR! notsup Actual:   {"npm":"9.5.0","node":"v18.15.0"}
0|Node-RED  |
0|Node-RED  | npm ERR! A complete log of this run can be found in:
0|Node-RED  | npm ERR!     C:\Users\julia\AppData\Local\npm-cache\_logs\2023-05-03T09_41_15_280Z-debug-0.log
0|Node-RED  |
0|Node-RED  | 3 May 10:41:24 - [warn] ------------------------------------------
0|Node-RED  | Error: Install failed
0|Node-RED  |     at C:\src\nr\node_modules\@node-red\registry\lib\installer.js:285:25
0|Node-RED  |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
0|Node-RED  | 3 May 10:41:24 - [error] Error: Install failed

You've set it to require node.js v12, 14 or 16. Could you please update to the current LTS versions?

3

I now downdated it to being >=6 - I hope that's ok!

I also noticed that the screenshot node does not work with Opera, I'll have a look why in due course. Tested it with Firefox on Mac...

1 Like
4

Ouch - outlier! :rofl:

I'll have to install manually I think as the palette manager doesn't want to pick up the new version. I'll try to restart NR first, this is only my dev PC.

5

Nothing new there ...

SVG and browsers compatibility is a jungle of vines ... hopefully it's nothing major to get Opera working properly, don't have Chrome!

6

With version 0.0.3 it should be working with Opera.

7

Sadly, not working with Windows 11 and Edge:

image

No console output.

1 Like
8

That's weird, if it fails there should be an exception in the console. Alternative would be that the image retrieval somehow failed or wasn't triggered. The code for that assumes that all images are retrieved, else the SVG isn't dumped into the editor window.

9

...or wasn't triggered --> fixed with 0.0.4 --> if you drag the screenshot node onto an empty flow there happens to be no images! Fixed it so that svg is dump into editor when no images are defined.

Thanks for the heads :+1:

1 Like
10

Will try again when I get a chance.

11

OK, which happens to be now! :grin:

Interesting SVG output though:

image

<?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="10" height="10" pointer-events="all" style="cursor: crosshair; touch-action: none;">
    <circle cx="5" cy="5" r="5" fill="#00bcff" stroke="#1c668c" stroke-width="1px" fill-opacity="1" stroke-opacity="1"
        opacity="1" />
</svg>

Again no console errors but I do get this warning which I think means that you are missing a cleanup step for the Monaco editor:

image
image928Ă—254 14.5 KB

That circle is all the output I'm getting on any tab. I think it is the blue circle you get on a node in the editor if it needs deploying. But I get it even if nothing needs deploying. Tried on a couple of different tabs, restarted Node-RED and reloaded the editor, no difference I'm afraid.

12

The editor thing should easy, the blue dot of disaster won't be that easy....

Do you only ever get the dot or do you get something else for other flows?

13

With the power of copy & paste, I pronounce it fixed with version 0.0.6.

2 Likes
14

Nope, I'm only ever just getting that no matter what I do. Sorry.