Custom Node Question

[gonzalu]

Hi,

I have created a new custom node called Histograms. It basically takes in an image, and it calculates the histogram for the image and generates various graphs depicting the data graphically. I am a photographer, so this node helps me see how my images look like I am used to in Photoshop.

https://github.com/gonzalu/ComfyUI_YFG_Comical

Anyway, one of the functionalities I wanted to implement, is a self-output mechanism where the node displays the image itself without needing the PREVIEW IMAGE node.

I noticed that your SD Prompt Saver node does this...

Can you tell me what I need to do to my node to have it display the image?

Currently I generate 6 different images. One each for RGB filled, RGB lines, Red, Gree, Blue and Luminosity channels.

my idea was to have a selector that lets the user pick which histogram they want to display in the node and then the node generates it and displays it at once.

Thanks very much for your expertise and insight. Not much documentation on the way to self-display. I have been trying for like 4 days different methods. Searching does not produce any results of how it is done.

DISCLAIMER: I am NOT a developer at all. I created my nodes with the help of ChatGPT-4 and Google Gemini and lots of trial and error :D

Cheers!

[receyuki]

I'm not sure if this is good news or bad news for you, but I have never written any scripts related to preview images.
ComfyUI has built-in scripts for previews. As you know, the original Save Image node comes with a preview image. When your node returns an item like this "ui": {"images": your_image},, it will be automatically recognised by ComfyUI as a node similar to Save Image, and the preview script of Save Image will be called.

For example, this is your current return:

return (
    your_return_item1,
    your_return_item2,
    your_return_item3,
)

Add a new UI item:

return {
    "ui": {"images": the_image_you_wanna_display},
    "result": (
        your_return_item1,
        your_return_item2,
        your_return_item3,
    ),
}

If you want to display multiple images, such as histograms of different channels, you just need to combine them into one array:

return {
    "ui": {"images": [RGB_filled, RGB_lines, Red, Gree, Blue, Luminosity]},
    "result": (
        your_return_item1,
        your_return_item2,
        your_return_item3,
    ),
}

If you have any questions, please feel free to tell me.

[receyuki]

You don't need to import anything extra, as this feature is written in JS and will only be loaded during runtime.

The documentation isn't bad, it just doesn't exist at all lol. All the knowledge I used to write custom nodes was learned by reading the source code of other nodes.

[gonzalu]

OK thank you, cool.

While I am struggling a bit, I am so much further ahead than I was before. Right now, I can generate the images and the node expands but, the images are somehow invalid or incorrect path? I guess I need to define or generate temp files?

I'll try until I get it. I think it's just the complexity of my code with the lack of any knowledge of python. That's what it's all about.

Thank you again.

[gonzalu]

OK finally figured it out. That was rough but I think I got it working.

Here is my custom_node repo. The node you helped me with is: " YFG Histograms Generator (compact) "

https://github.com/gonzalu/ComfyUI_YFG_Comical

Thanks again for your insights and support.

[receyuki]

This is really good news, you have just completed your first custom node! About the issue you mentioned, I believe you may need some basic knowledge of Pillow. The biggest problem with writing custom nodes is that it's really hard to debug (or maybe, I haven't found the right way to make the debugger work).

[gonzalu]

Yeah, no kidding. My debugging is hours of restart ComfyUI server :( :D