Comments (1)
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
from litegraph.js.
Related Issues (20)
- Linting question HOT 7
- Preview of what link is sending to node doesn't work after saving and reloading with configure HOT 1
- Text button and prompt dialog HOT 1
- Background turns black when zooming out HOT 2
- how to render a different link color when mouseover a link? HOT 1
- Getting the coordinates on a graph HOT 1
- How to realize redo and undo? HOT 2
- When the canvas attribute size and CSS style size are inconsistent, interactive events such as clicking on nodes fail. HOT 1
- Bootstrap 5.0.2 makes "Add Node" invisible
- Issue with Output Port Position Adjustment
- Numberpad enter creates a new line in input field of the properties. HOT 1
- Issue with Editor Resizing Not Centered on Mouse Position HOT 2
- npm run build error
- How do I change the color of a slot? HOT 3
- [question] How to clear all previously defined nodes? HOT 2
- How to run a graph with my own node in Node JS and in the browser?
- Connections incorrectly assumed during LGraphNode.prototype.configure HOT 1
- In `createDefaultNodeForSlot`, why read from a short cache list while the nodeType is readily available? HOT 8
- Angular component support
- Python binding
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from litegraph.js.