How to add a preview texture in CustomNode？

Unity Engine
, ,
1

Hey guys.

I’m writing a CustomNode, and since it has something to do with graphics, I want to add a preview texture under the Node.

Like in ShaderGraph, so that I can debug it more easily.

8168831--1062983--Snipaste_2022-05-31_10-52-58.png

How can I add such a preview texture?
Sorry I can’t find a function to override in the documentation.
Please help me, thank you very much!

2

Good question, that could be useful. I don’t have a direct answer, but perhaps this link might help: Visual scripting — Bolt — Reroute Node

The reroute node from the repository mentioned in the thread above (RealityStop/Bolt.Addons.Community) has a custom painter. This example could perhaps serve as an inspiration for implementing your own custom painter, drawing a texture directly in the graph. That is just a supposition, though, not entirely sure that would be feasible.

3

I was working on some custom graphics when last messing around with VS. I didn’t get round to finishing but just a case of using the the editor gui, drawing the node yourself.

[Widget(typeof(ModularControllerUnit))]
public class ModularControllerWidget : UnitWidget<ModularControllerUnit>
{
    public ModularControllerWidget(FlowCanvas canvas, ModularControllerUnit unit) : base(canvas, unit)
    {
    }

    Texture2D graphTex, graphBlank;
    Color32[] blankPixels, tempPixels;
    bool colorBlue = false;

    AnimationCurve curve = new AnimationCurve();

    int counter = 0;
    public override bool overlayRequiresInput => true;
    public override void DrawOverlay()
    {

... GUI code

And use position. to find out where everything goes, eg. position.x, position.xMax (width)

Was working on a Node Designer for designing nodes in the editor. There was a lot of code on that one and I have a habit of writing code ideas within code, hence the random graph to the right which was part of another goal. Also put alongside the AnimationCurve to compare as I needed higher fidelity. The goal was more to do with formula based curves rather than left to right, eg. spirals, I have a thing about spirals! And then using as a controller output.

What I was using for the Node Designer for at the same time, was to re-define the look of this node which is the manual trigger in the addons (in this case the button part which was done without the UnitButton in the original code). Doing editor design in code is as tedious as can be!!

4

Thanks, I’ll give it a try.

5

Nice try!
What I’m trying to do is very similar to yours. Also need to change parameters and then can have live preview of the image.
But it seems to be a bit tricky to try to do.
In fact, I really think there should be an official API that allows developers to add what they want under Unit Nodes. Because a Unit Node, not only the input and output, it may have a very complex internal process, it is necessary to debug. Especially if I want to use it for image processing, it is basically hard to use it if you can’t see the image result of each step.

6

Well just draw the base inspector + additional. Eg. A checkbox/button to show the preview. You dont want graphview hammering your cpu while running but useful for debug. Maybe just have an image preview node to plug in between nodes to start.