Create a Basic Color node or Widget

[EliCDavis]

It would be nice if there were a node we could use that created a color selector GUI similar to dat GUI's color selector so people could configure colors.

Something like:

[EliCDavis]

I've recreated this for my own purposes. I don't want to install Java to work on this repo, so I'll just post what I did here, if anyone's interested in integrating.

Snippets of code can be found here:
https://github.com/EliCDavis/polyform/blob/da485af4c39498f558c90565230f0cff919b5031/generator/html/server.html
https://github.com/EliCDavis/polyform/blob/da485af4c39498f558c90565230f0cff919b5031/generator/html/js/node_manager.js
https://github.com/EliCDavis/polyform/blob/da485af4c39498f558c90565230f0cff919b5031/generator/html/js/nodes/color_parameter.js
https://github.com/EliCDavis/polyform/blob/da485af4c39498f558c90565230f0cff919b5031/generator/html/js/color_selector.js

HTML For the Color Selecting

    <div id="colorSelectorContainer">
        <div id="colorSelector">
            <h2 style="margin-top: 0">Select Color</h2>
            <div>
                <input id="colorSelectorInput" type="color" name="color" value="#e66465" />
                <label for="color">Color</label>
            </div>

            <div
                style="margin-top: 16px; justify-content: space-around; align-items: center; flex-direction: row; display: flex;">
                <button id="colorSelectorOK" style="flex-grow: 1; margin-right: 8px;">OK</button>
                <button id="colorSelectorCancel" style="flex-grow: 1; margin-left: 8px;">Cancel</button>
            </div>

        </div>
    </div>

CSS For The Color Selecting

#colorSelectorContainer {
    position: absolute;
    width: 100%;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: #00000050;
}

#colorSelector {
    background-color: #000;
    color: white;
    border-radius: 8px;
    padding: 16px;
}

Color Selecting Code

export class ColorSelector {

    constructor(selectorContainerId) {
        this.okayCallback = null;
        this.cancelCallback = null;

        this.selectorContainer = document.getElementById(selectorContainerId);
        this.input = document.getElementById("colorSelectorInput");
        this.okButton = document.getElementById("colorSelectorOK");
        this.cancelButton = document.getElementById("colorSelectorCancel");

        this.okButton.onclick = () => {
            this.hide();
            if (this.okayCallback) {
                this.okayCallback(this.input.value);
            }
        }

        this.cancelButton.onclick = () => {
            this.hide();
            if (this.cancelCallback) {
                this.cancelCallback();
            }
        }

        this.hide();
    }

    hide() {
        this.selectorContainer.style.display = "none";
    }


    show(value, okay, cancel) {
        this.selectorContainer.style.display = "flex";
        this.input.value = value;
        this.okayCallback = okay;
        this.cancelCallback = cancel;
    }

}

Widget Code

const imgWidget = myNode.addWidget("color", "Color", "#00FF00", {});
const margin = 15;
imgWidget.draw = (ctx, node, widget_width, y, H) => {
    const adjustedWidth = widget_width - margin * 2
    ctx.beginPath(); 
    ctx.rect(margin, y, adjustedWidth, H); 
    ctx.fillStyle = imgWidget.value;
    ctx.fill(); 
}

imgWidget.mouse = (event, pos, node) => {
    if (event.type !== "mouseup") {
        return;
    }
    app.ColorSelector.show(imgWidget.value, (newColor) => {
        imgWidget.value = newColor;
        LightGraph.setDirtyCanvas(true);
    })
}

Results in this:

2024-04-01.09-43-31.mp4