Glad to hear it.
Some things that may not seem obvious but...
- You can get images from the internet (just put a URL in the image field)
- By the same token, you can get an image from a webcam
Ps, you could/should raise an issue on GitHub Here explaining the issue. Hopefully it will get fixed. (I think it doesn't work in IE also)
Hey @Steve-Mcl,
These are the kind of nodes that I just love!
Thanks for implementing and sharing them with us!!!!!!
You should have a look at the contributor list of that node. Think you know the second guy already ...
I have a small issue with your node (which I downloaded from NPM):
- I import your example (image processing incl. image-output node)
- Then I double click on the first Invert node in the flow
- But the dropdown is empty, i.e. I cannot select any options in it.
- So I had a look at the browser console, and saw this one:
- When I debug the code, it seems to be going wrong at this line:
- When I reopen the same config screen again, the dropdown is filled correctly ...
Would be nice if you could have a look at it please. Think you just need to change 'property' into 'key'?
Some other small remarks:
- If you ever find some time to add the examples and some explanation on your readme page, that would really be nice.
- Perhaps add some extra keywords (image, manipulation, ...) to your package.json file, to make sure users can find it easier.
- You have added a performanceLogger.js Is that something we can trigger somehow, or did you get any useful information from this yourself?
- You allow a 'jimp object' to be passed via the Node-RED wires. I didn't have a look at those Jimp objects yet, but I'm wondering if you had any issues passing these object in Node-RED? E.g. when your output is connected to two wires, the Jimp object will be cloned by Node-RED. We (@btsimonh) failed to do something similar with OpenCV image objects some time ago, but that was mostly caused by the fact that those C++ objects where allocated outside the NodeJs memory. So very nice to see that it works fine with pure Javascript image objects.
Good work !!!!!!
Bart
the issue with FF (and probably Edge) is that the svg getBbox() command returns 0 for the image size and offset. If anyone can help fix that then thanks in advance.
Would you believe it if I said it took longer to get the dynamic typedinput property widgets working than the rest of the whole project. P. I. T. A. Grrr
That particular line of code was last minute trying to get the node working in IE (another PITA)
I'll check it out as soon as I can.
As for keywords, now you have had a chance to explore the node and it's capabilities, could you suggest a list please?
Aha - maybe got the image sizes... version 0.4.1 of image viewer now works on FF.
1 Like
I created that class as image processing is something that particularly taxes the CPU and JS. So I added it to allow users to understand where there cycles are going. Its not exposed per-se but I have been considering separating it out as a node for measuring other nodes performance.
Not seeing any issues but to be truthful, I didn't consider it as it didn't crop up as an issue during development. Typically though, I expect users will be doing serial or batch processing to minimize CPU hit.
Yes I believe you 
Since your list of available actions is quite long, I was thinking more about the same keywords you also find at the top of the Jimp page:
So "image", "processing", "manipulation", "picture" ... perhaps ?
P.S. Thanks for the other information !!!
I'm impressed you solved it that quickly! Was also looking simultaneously, but didn't find anything useful that fast ... I can confirm it works now fine on both Chrome and Firefox ! But unfortunately no images are displayed on my Edge browser ...
Yet another Edge case. Will let the windows folk worry about it
Last update for a while (hopefully)
V0.1.2
- fixed issue pointed out by @BartButenaers
- updated readme
- added more keywords to package.json
- added
qualityfunction - added new example showing use of
qualityfunction and getting an image from the internet ...
1 Like
likewise image viewer 0.4.2 may now work with edge
1 Like
IE11? I seen to remember it didn't work with that when I tried 
Edit...
Same for my node (problem for another day)
I'll leave that as an exercise for someone else.
Just tried 'image-tools' with 'image-viewer' and can confirm the previews now appear in:
Firefox 68.0a1 (2019-05-09) (64-bit)
Waterfox 56.2.9 (64-bit)
as well as Chrome
Thanks guys for the updates.
Hey Dave,
Quick test before I'm off to work...
Your night work resulted in a major improvement, but there is still something wrong (on Microsoft Edge 42.17134.1.0):
I assume the images are displayed correctly on top of the colored bubble background, in your Edge version?
Steve,
If I where you, I wouldn't mention IE11 anymore to Dave, otherwise you will also not have much time to sleep next weekend:
That's the problem I was getting in IE. I have no idea how to fix this one.
There is nothing in log.
Anyone?
@knolleary, @dceejay, my apologies for tagging you guys directly but I'm certain in the development of nodes you will have seen this problem? As far as i can tell, its happening inside RED.nodes.registerType & its something IE doesn't support but there is nothing logged in console. Short of going through MDN and checking every line, i'm struggling with this & would appreciate it if you had any ideas?
Ok, I believe I have sorted this SyntaxError: Syntax Error problem in IE (and fixed a few bugs - update imminent)
I wish that node-red could have console logged the line in question?
Hey ho.
For anyone else facing this issue - IE11 doesn't like fat arrows (I already knew this but still used them!)
@dceejay would you be able to replace the fat arrows in node-red-contrib-image-output here and here with standard function callbacks please?
While on this, I was considering incorporating the code of node-red-contrib-image-output directly into my node. Makes sense as both nodes use Jimp. Thoughts?
busy today - but will happily take a PR
I'll try thanks.
PS, I think template strings are also a problem in IE11
probalby need to replace `image-output-img${id}` with 'image-output-img' + id
Firstly...
Hi I hope i don't offend anyone here but I decided for the reasons below to actually build-in to my image-tools nodes its own image viewer node.
- node-red-contrib-image-output (Image preview) didn't use Jimp so, to use the this original node with "image tools", the user needed to either convert his image to a buffer or strip the mime type off the base64 output (as the mime type is re-added as a hard coded png type inside image preview src)
- That meant adding jimp as a dependency to node-red-contrib-image-output
- Also, as base64 png type was hard coded in src, without the Jimp lib it would be difficult to determine mime type of a buffer or base64 (data without mime type)
- Lastly, at some point i wish to include image info (size, type etc) in the output of the preview node
- Additionally I wished to have an output on the viewer node for chaining operations
- I also hoped to improve user experience by having a viewer available without extra installation
For these reasons, I decided to leave "image preview" as its own light(er) weight entity.
Please feel free to tell me if there was a better way I could have/should have achieved this (I am unfamiliar with forking or if its possible to inherit existing node-red node into this one as a dependency somehow?)
Full credit to rikukissa and dceejay for the excellent node-red-contrib-image-output on which my "image viewer" node is heavily based. (Copy of this credit & MIT license included in src files as requested)
PS: I'll try over the weekend to make a PR for "image preview". If you beat me to it, you need to replace the fat arrows with regular functions & modify the `template ${strings}` to 'regular' + strings to make it work in IE.
Update...
V0.2.3 now in NPM.
Highlights...
- New node added "image viewer" (detailed above).
- This is heavily based on the image preview node
- works for Jimp image, Buffer, Base64 (bmp, png, jpg), URL and file path
- All nodes work in IE
- Bug fixes (more than i care to admit)
Example...
Known issues...
Clicking the image viewer in IE does not close the preview (works in chrome)
