Frontend Helpers (JS)

These are the essential helper functions from BaseNode that you will use to build your node’s frontend.

Widget Management

this.addPropertyWidget(type, label, propertyKey, options)

The Best Way to add widgets. Automatically binds the UI widget to this.properties, ensuring values are saved and sent to the backend.

• type: "number", "slider", "combo", "text", "toggle"

// Slider Example
this.addPropertyWidget("slider", "Strength", "strength", {
    min: 0.0,
    max: 1.0
});

// Dropdown Example
this.addPropertyWidget("combo", "Mode", "mode", {
    values: ["Fast", "Quality", "Extreme"]
});

this.addReactColorWidget(label, propertyKey, defaultColor)

Adds a Color Picker. Opens a system color dialog when clicked.

this.addReactColorWidget("Text Color", "textColor", "#FFFFFF");

this.updateWidgets()

Syncs UI with Data. Call this if you change this.properties in your code and want the sliders/inputs to update visually.

// Example: Resetting a value programmatically
this.properties.strength = 0.5;
this.updateWidgets(); // Now the slider jumps to 0.5

Server Communication

this.normalizeUrl(path)

Fixes file paths for images/video. Converts a backend path (like temp/image.png) into a working browser URL (like http://localhost:5555/temp/image.png).

// Usage in onDrawBackground
const safeUrl = this.normalizeUrl(this.properties.preview_path);
const img = new Image();
img.src = safeUrl;

Drawing Updates

this.setDirtyCanvas(fg, bg)

Forces a Redraw. Essential for custom rendering. Blobit only repaints when it thinks it needs to. If you load an image or change an animation frame, you must tell it to repaint.

• fg: detailed boolean (foreground/widgets).
• bg: detailed boolean (background/connections).

// Example: Redraw after image loads
img.onload = () => {
    this.setDirtyCanvas(true, true);
};