Open EliCDavis opened 2 months ago
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
<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>
#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;
}
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;
}
}
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:
https://github.com/jagenjo/litegraph.js/assets/9094977/44bdd2f6-173d-4b9f-9119-d528acf17122
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: