custom_widget

Widgets that are just for show

You can add a widget to a node on the fly:

import { $el } from "../../../scripts/ui.js";

const widget = {
    type: "HTML",
    name: "flying",
    size: [80,40], 
    get value() { return "";},
    set value(newValue) {  },
    async serializeValue(nodeId,widgetIndex) { return this.value; }
};
widget.inputEl = $el("img", { src: "" });

document.body.appendChild(widget.inputEl);
widget.parent = node;
node.addCustomWidget(widget);
node.onRemoved = function () { widget.inputEl.remove(); };

Widgets that handle input and output

A node plugin can provide a method getCustomWidgets to declare a widget that handles the datatype CHEESE

  getCustomWidgets(app) {
    return {
      CHEESE(node, inputName, inputData, app) { // We return an object containing a field CHEESE which has a function (taking node, name, data, app)
         const widget = /* see below */;        // that creates a widget
         widget.something = something;          // maybe adds stuff to it
         node.addCustomWidget(widget);          // adds it to the node
         return  widget;                        // and returns it.
      } 
    }
  },

We can then use CHEESE in inputs and outputs.

    "required": { "slice": ("CHEESE",),     

A custom widget can probably have lots of fields, but here are some to start with:

const widget = {
    type: inputData[0],       // the type, CHEESE
    name: inputName,          // the name, slice
    size: [128,128],          // a default size
    draw(ctx, node, width, y) {
                              // a method to draw the widget (ctx is a CanvasRenderingContext2D)
    },
    computeSize(...args) {    
       return [128,128];      // a method to compute the current size of the widget
    },
    async serializeValue(nodeId,widgetIndex) {
       return "Data That Goes to the Python Side";
    }
}

Looking at litegraph.js will give you more info on node widgets.