Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-21 15:24:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
tamat
2013-09-26 19:40:42 +02:00
commit a0b689da2b
46 changed files with 13015 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3593
src/litegraph.js Normal file
View File

File diff suppressed because it is too large Load Diff

738
src/nodes/basicnodes.js Normal file
View File

@@ -0,0 +1,738 @@
//basic nodes
LiteGraph.registerNodeType("basic/const",{
title: "Const",
desc: "Constant",
outputs: [["value","number"]],
properties: {value:1.0},
editable: { property:"value", type:"number" },
setValue: function(v)
{
if( typeof(v) == "string") v = parseFloat(v);
this.properties["value"] = v;
this.setDirtyCanvas(true);
},
onExecute: function()
{
this.setOutputData(0, parseFloat( this.properties["value"] ) );
},
onDrawBackground: function(ctx)
{
//show the current value
this.outputs[0].label = this.properties["value"].toFixed(3);
},
onWidget: function(e,widget)
{
if(widget.name == "value")
this.setValue(widget.value);
}
});
LiteGraph.registerNodeType("math/rand",{
title: "Rand",
desc: "Random number",
outputs: [["value","number"]],
properties: {min:0,max:1},
size: [60,20],
onExecute: function()
{
var min = this.properties.min;
var max = this.properties.max;
this._last_v = Math.random() * (max-min) + min;
this.setOutputData(0, this._last_v );
},
onDrawBackground: function(ctx)
{
//show the current value
if(this._last_v)
this.outputs[0].label = this._last_v.toFixed(3);
else
this.outputs[0].label = "?";
}
});
LiteGraph.registerNodeType("math/clamp",{
title: "Clamp",
desc: "Clamp number between min and max",
inputs: [["in","number"]],
outputs: [["out","number"]],
size: [60,20],
properties: {min:0,max:1},
onExecute: function()
{
var v = this.getInputData(0);
if(v == null) return;
v = Math.max(this.properties.min,v);
v = Math.min(this.properties.max,v);
this.setOutputData(0, v );
}
});
LiteGraph.registerNodeType("math/abs",{
title: "Abs",
desc: "Absolute",
inputs: [["in","number"]],
outputs: [["out","number"]],
size: [60,20],
onExecute: function()
{
var v = this.getInputData(0);
if(v == null) return;
this.setOutputData(0, Math.abs(v) );
}
});
LiteGraph.registerNodeType("math/floor",{
title: "Floor",
desc: "Floor number to remove fractional part",
inputs: [["in","number"]],
outputs: [["out","number"]],
size: [60,20],
onExecute: function()
{
var v = this.getInputData(0);
if(v == null) return;
this.setOutputData(0, v|1 );
}
});
LiteGraph.registerNodeType("math/frac",{
title: "Frac",
desc: "Returns fractional part",
inputs: [["in","number"]],
outputs: [["out","number"]],
size: [60,20],
onExecute: function()
{
var v = this.getInputData(0);
if(v == null) return;
this.setOutputData(0, v%1 );
}
});
LiteGraph.registerNodeType("basic/watch", {
title: "Watch",
desc: "Show value",
size: [60,20],
inputs: [["value",0,{label:""}]],
outputs: [["value",0,{label:""}]],
properties: {value:""},
onExecute: function()
{
this.properties.value = this.getInputData(0);
this.setOutputData(0, this.properties.value);
},
onDrawBackground: function(ctx)
{
//show the current value
if(this.inputs[0] && this.properties["value"] != null)
{
if (this.properties["value"].constructor === Number )
this.inputs[0].label = this.properties["value"].toFixed(3);
else
this.inputs[0].label = this.properties["value"];
}
}
});
LiteGraph.registerNodeType("math/scale",{
title: "Scale",
desc: "1 - value",
inputs: [["value","number",{label:""}]],
outputs: [["value","number",{label:""}]],
size:[70,20],
properties: {"factor":1},
onExecute: function()
{
var value = this.getInputData(0);
if(value != null)
this.setOutputData(0, value * this.properties.factor );
}
});
LiteGraph.registerNodeType("math/operation",{
title: "Operation",
desc: "Easy math operators",
inputs: [["A","number"],["B","number"]],
outputs: [["A+B","number"]],
size: [80,20],
//optional_inputs: [["start","number"]],
properties: {A:1.0, B:1.0},
setValue: function(v)
{
if( typeof(v) == "string") v = parseFloat(v);
this.properties["value"] = v;
this.setDirtyCanvas(true);
},
onExecute: function()
{
var A = this.getInputData(0);
var B = this.getInputData(1);
if(A!=null)
this.properties["A"] = A;
else
A = this.properties["A"];
if(B!=null)
this.properties["B"] = B;
else
B = this.properties["B"];
for(var i = 0, l = this.outputs.length; i < l; ++i)
{
var output = this.outputs[i];
if(!output.links || !output.links.length)
continue;
switch( output.name )
{
case "A+B": value = A+B; break;
case "A-B": value = A-B; break;
case "A*B": value = A*B; break;
case "A/B": value = A/B; break;
}
this.setOutputData(i, value );
}
},
onGetOutputs: function()
{
return [["A-B","number"],["A*B","number"],["A/B","number"]];
}
});
LiteGraph.registerNodeType("math/compare",{
title: "Compare",
desc: "compares between two values",
inputs: [["A","number"],["B","number"]],
outputs: [["A==B","number"],["A!=B","number"]],
properties:{A:0,B:0},
onExecute: function()
{
var A = this.getInputData(0);
var B = this.getInputData(1);
if(A!=null)
this.properties["A"] = A;
else
A = this.properties["A"];
if(B!=null)
this.properties["B"] = B;
else
B = this.properties["B"];
for(var i = 0, l = this.outputs.length; i < l; ++i)
{
var output = this.outputs[i];
if(!output.links || !output.links.length)
continue;
switch( output.name )
{
case "A==B": value = A==B; break;
case "A!=B": value = A!=B; break;
case "A>B": value = A>B; break;
case "A<B": value = A<B; break;
case "A<=B": value = A<=B; break;
case "A>=B": value = A>=B; break;
}
this.setOutputData(i, value );
}
},
onGetOutputs: function()
{
return [["A==B","number"],["A!=B","number"],["A>B","number"],["A<B","number"],["A>=B","number"],["A<=B","number"]];
}
});
if(window.math) //math library for safe math operations without eval
LiteGraph.registerNodeType("math/formula",{
title: "Formula",
desc: "Compute safe formula",
inputs: [["x","number"],["y","number"]],
outputs: [["","number"]],
properties: {x:1.0, y:1.0, formula:"x+y"},
onExecute: function()
{
var x = this.getInputData(0);
var y = this.getInputData(1);
if(x != null)
this.properties["x"] = x;
else
x = this.properties["x"];
if(y!=null)
this.properties["y"] = y;
else
y = this.properties["y"];
var f = this.properties["formula"];
var value = math.eval(f,{x:x,y:y,T: this.graph.globaltime });
this.setOutputData(0, value );
},
onDrawBackground: function()
{
var f = this.properties["formula"];
this.outputs[0].label = f;
},
onGetOutputs: function()
{
return [["A-B","number"],["A*B","number"],["A/B","number"]];
}
});
LiteGraph.registerNodeType("math/trigonometry",{
title: "Trigonometry",
desc: "Sin Cos Tan",
bgImageUrl: "nodes/imgs/icon-sin.png",
inputs: [["v","number"]],
outputs: [["sin","number"]],
properties: {amplitude:1.0},
size:[100,20],
onExecute: function()
{
var v = this.getInputData(0);
var amp = this.properties["amplitude"];
for(var i = 0, l = this.outputs.length; i < l; ++i)
{
var output = this.outputs[i];
switch( output.name )
{
case "sin": value = Math.sin(v); break;
case "cos": value = Math.cos(v); break;
case "tan": value = Math.tan(v); break;
case "asin": value = Math.asin(v); break;
case "acos": value = Math.acos(v); break;
case "atan": value = Math.atan(v); break;
}
this.setOutputData(i, amp * value );
}
},
onGetOutputs: function()
{
return [["sin","number"],["cos","number"],["tan","number"],["asin","number"],["acos","number"],["atan","number"]];
}
});
//if glMatrix is installed...
if(window.glMatrix)
{
LiteGraph.registerNodeType("math3d/vec3-to-xyz",{
title: "Vec3->XYZ",
desc: "vector 3 to components",
inputs: [["vec3","vec3"]],
outputs: [["x","number"],["y","number"],["z","number"]],
onExecute: function()
{
var v = this.getInputData(0);
if(v == null) return;
this.setOutputData( 0, v[0] );
this.setOutputData( 1, v[1] );
this.setOutputData( 2, v[2] );
}
});
LiteGraph.registerNodeType("math3d/xyz-to-vec3",{
title: "XYZ->Vec3",
desc: "components to vector3",
inputs: [["x","number"],["y","number"],["z","number"]],
outputs: [["vec3","vec3"]],
onExecute: function()
{
var x = this.getInputData(0);
if(x == null) x = 0;
var y = this.getInputData(1);
if(y == null) y = 0;
var z = this.getInputData(2);
if(z == null) z = 0;
this.setOutputData( 0, vec3.fromValues(x,y,z) );
}
});
LiteGraph.registerNodeType("math3d/rotation",{
title: "Rotation",
desc: "rotation quaternion",
inputs: [["degrees","number"],["axis","vec3"]],
outputs: [["quat","quat"]],
properties: {angle:90.0, axis:[0,1,0]},
onExecute: function()
{
var angle = this.getInputData(0);
if(angle == null) angle = this.properties.angle;
var axis = this.getInputData(1);
if(axis == null) axis = this.properties.axis;
var R = quat.setAxisAngle(quat.create(), axis, angle * 0.0174532925 );
this.setOutputData( 0, R );
}
});
LiteGraph.registerNodeType("math3d/rotate_vec3",{
title: "Rot. Vec3",
desc: "rotate a point",
inputs: [["vec3","vec3"],["quat","quat"]],
outputs: [["result","vec3"]],
properties: {vec:[0,0,1]},
onExecute: function()
{
var vec = this.getInputData(0);
if(vec == null) vec = this.properties.vec;
var quat = this.getInputData(1);
if(quat == null)
this.setOutputData(vec);
else
this.setOutputData( 0, vec3.transformQuat( vec3.create(), vec, quat ) );
}
});
LiteGraph.registerNodeType("math3d/mult-quat",{
title: "Mult. Quat",
desc: "rotate quaternion",
inputs: [["A","quat"],["B","quat"]],
outputs: [["A*B","quat"]],
onExecute: function()
{
var A = this.getInputData(0);
if(A == null) return;
var B = this.getInputData(1);
if(B == null) return;
var R = quat.multiply(quat.create(), A,B);
this.setOutputData( 0, R );
}
});
} //glMatrix
/*
LiteGraph.registerNodeType("math/sinusoid",{
title: "Sin",
desc: "Sinusoidal value generator",
bgImageUrl: "nodes/imgs/icon-sin.png",
inputs: [["f",'number'],["q",'number'],["a",'number'],["t",'number']],
outputs: [["",'number']],
properties: {amplitude:1.0, freq: 1, phase:0},
onExecute: function()
{
var f = this.getInputData(0);
if(f != null)
this.properties["freq"] = f;
var q = this.getInputData(1);
if(q != null)
this.properties["phase"] = q;
var a = this.getInputData(2);
if(a != null)
this.properties["amplitude"] = a;
var t = this.graph.getFixedTime();
if(this.getInputData(3) != null)
t = this.getInputData(3);
// t = t/(2*Math.PI); t = (t-Math.floor(t))*(2*Math.PI);
var v = this.properties["amplitude"] * Math.sin((2*Math.PI) * t * this.properties["freq"] + this.properties["phase"]);
this.setOutputData(0, v );
},
onDragBackground: function(ctx)
{
this.boxcolor = colorToString(v > 0 ? [0.5,0.8,1,0.5] : [0,0,0,0.5]);
this.setDirtyCanvas(true);
},
});
*/
/*
LiteGraph.registerNodeType("basic/number",{
title: "Number",
desc: "Fixed number output",
outputs: [["","number"]],
color: "#66A",
bgcolor: "#336",
widgets: [{name:"value",text:"Value",type:"input",property:"value"}],
properties: {value:1.0},
setValue: function(v)
{
if( typeof(v) == "string") v = parseFloat(v);
this.properties["value"] = v;
this.setDirtyCanvas(true);
},
onExecute: function()
{
this.outputs[0].name = this.properties["value"].toString();
this.setOutputData(0, this.properties["value"]);
},
onWidget: function(e,widget)
{
if(widget.name == "value")
this.setValue(widget.value);
}
});
LiteGraph.registerNodeType("basic/string",{
title: "String",
desc: "Fixed string output",
outputs: [["","string"]],
color: "#66A",
bgcolor: "#336",
widgets: [{name:"value",text:"Value",type:"input"}],
properties: {value:"..."},
setValue: function(v)
{
this.properties["value"] = v;
this.setDirtyCanvas(true);
},
onExecute: function()
{
this.outputs[0].name = this.properties["value"].toString();
this.setOutputData(0, this.properties["value"]);
},
onWidget: function(e,widget)
{
if(widget.name == "value")
this.setValue(widget.value);
}
});
LiteGraph.registerNodeType("basic/trigger",{
title: "Trigger",
desc: "Triggers node action",
inputs: [["!0","number"]],
outputs: [["M","node"]],
properties: {triggerName:null},
onExecute: function()
{
if( this.getInputData(0) )
{
var m = this.getOutputNode(0);
if(m && m.onTrigger)
m.onTrigger();
if(m && this.properties.triggerName && typeof(m[this.properties.triggerName]) == "function")
m[this.properties.triggerName].call(m);
}
}
});
LiteGraph.registerNodeType("basic/switch",{
title: "Switch",
desc: "Switch between two inputs",
inputs: [["i","number"],["A",0],["B",0]],
outputs: [["",0]],
onExecute: function()
{
var f = this.getInputData(0);
if(f)
{
f = Math.round(f)+1;
if(f < 1) f = 1;
if(f > 2) f = 2;
this.setOutputData(0, this.getInputData(f) );
}
else
this.setOutputData(0, null);
}
});
// System vars *********************************
LiteGraph.registerNodeType("session/info",{
title: "Time",
desc: "Seconds since start",
outputs: [["secs",'number']],
properties: {scale:1.0},
onExecute: function()
{
this.setOutputData(0, this.session.getTime() * this.properties.scale);
}
});
LiteGraph.registerNodeType("system/fixedtime",{
title: "F.Time",
desc: "Constant time value",
outputs: [["secs",'number']],
properties: {scale:1.0},
onExecute: function()
{
this.setOutputData(0, this.session.getFixedTime() * this.properties.scale);
}
});
LiteGraph.registerNodeType("system/elapsedtime",{
title: "Elapsed",
desc: "Seconds elapsed since last execution",
outputs: [["secs",'number']],
properties: {scale:1.0},
onExecute: function()
{
this.setOutputData(0, this.session.getElapsedTime() * this.properties.scale);
}
});
LiteGraph.registerNodeType("system/iterations",{
title: "Iterations",
desc: "Number of iterations (executions)",
outputs: [["",'number']],
onExecute: function()
{
this.setOutputData(0, this.session.iterations );
}
});
LiteGraph.registerNodeType("system/trace",{
desc: "Outputs input to browser's console",
inputs: [["",0]],
onExecute: function()
{
var data = this.getInputData(0);
if(data)
trace("DATA: "+data);
}
});
/*
LiteGraph.registerNodeType("math/not",{
title: "Not",
desc: "0 -> 1 or 0 -> 1",
inputs: [["A",'number']],
outputs: [["!A",'number']],
size: [60,22],
onExecute: function()
{
var v = this.getInputData(0);
if(v != null)
this.setOutputData(0, v ? 0 : 1);
}
});
// Nodes for network in and out
LiteGraph.registerNodeType("network/general/network_input",{
title: "N.Input",
desc: "Network Input",
outputs: [["",0]],
color: "#00ff96",
bgcolor: "#004327",
setValue: function(v)
{
this.value = v;
},
onExecute: function()
{
this.setOutputData(0, this.value);
}
});
LiteGraph.registerNodeType("network/general/network_output",{
title: "N.Output",
desc: "Network output",
inputs: [["",0]],
color: "#a8ff00",
bgcolor: "#293e00",
properties: {value:null},
getValue: function()
{
return this.value;
},
onExecute: function()
{
this.value = this.getOutputData(0);
}
});
LiteGraph.registerNodeType("network/network_trigger",{
title: "N.Trigger",
desc: "Network input trigger",
outputs: [["",0]],
color: "#ff9000",
bgcolor: "#522e00",
onTrigger: function(v)
{
this.triggerOutput(0,v);
},
});
LiteGraph.registerNodeType("network/network_callback",{
title: "N.Callback",
desc: "Network callback output.",
outputs: [["",0]],
color: "#6A6",
bgcolor: "#363",
setTrigger: function(func)
{
this.callback = func;
},
onTrigger: function(v)
{
if(this.callback)
this.callback(v);
},
});
*/

692
src/nodes/imagenodes.js Normal file
View File

@@ -0,0 +1,692 @@
LiteGraph.registerNodeType("color/palette",{
title: "Palette",
desc: "Generates a color",
inputs: [["f","number"]],
outputs: [["Color","color"]],
properties: {colorA:"#444444",colorB:"#44AAFF",colorC:"#44FFAA",colorD:"#FFFFFF"},
onExecute: function()
{
var c = [];
if (this.properties.colorA != null)
c.push( hex2num( this.properties.colorA ) );
if (this.properties.colorB != null)
c.push( hex2num( this.properties.colorB ) );
if (this.properties.colorC != null)
c.push( hex2num( this.properties.colorC ) );
if (this.properties.colorD != null)
c.push( hex2num( this.properties.colorD ) );
var f = this.getInputData(0);
if(f == null) f = 0.5;
if (f > 1.0)
f = 1.0;
else if (f < 0.0)
f = 0.0;
if(c.length == 0)
return;
var result = [0,0,0];
if(f == 0)
result = c[0];
else if(f == 1)
result = c[ c.length - 1];
else
{
var pos = (c.length - 1)* f;
var c1 = c[ Math.floor(pos) ];
var c2 = c[ Math.floor(pos)+1 ];
var t = pos - Math.floor(pos);
result[0] = c1[0] * (1-t) + c2[0] * (t);
result[1] = c1[1] * (1-t) + c2[1] * (t);
result[2] = c1[2] * (1-t) + c2[2] * (t);
}
/*
c[0] = 1.0 - Math.abs( Math.sin( 0.1 * reModular.getTime() * Math.PI) );
c[1] = Math.abs( Math.sin( 0.07 * reModular.getTime() * Math.PI) );
c[2] = Math.abs( Math.sin( 0.01 * reModular.getTime() * Math.PI) );
*/
for(var i in result)
result[i] /= 255;
this.boxcolor = colorToString(result);
this.setOutputData(0, result);
}
});
LiteGraph.registerNodeType("graphics/frame", {
title: "Frame",
desc: "Frame viewerew",
inputs: [["","image"]],
size: [200,200],
widgets: [{name:"resize",text:"Resize box",type:"button"},{name:"view",text:"View Image",type:"button"}],
onDrawBackground: function(ctx)
{
if(this.frame)
ctx.drawImage(this.frame, 0,0,this.size[0],this.size[1]);
},
onExecute: function()
{
this.frame = this.getInputData(0);
this.setDirtyCanvas(true);
},
onWidget: function(e,widget)
{
if(widget.name == "resize" && this.frame)
{
var width = this.frame.width;
var height = this.frame.height;
if(!width && this.frame.videoWidth != null )
{
width = this.frame.videoWidth;
height = this.frame.videoHeight;
}
if(width && height)
this.size = [width, height];
this.setDirtyCanvas(true,true);
}
else if(widget.name == "view")
this.show();
},
show: function()
{
//var str = this.canvas.toDataURL("image/png");
if(showElement && this.frame)
showElement(this.frame);
}
});
LiteGraph.registerNodeType("visualization/graph", {
desc: "Shows a graph of the inputs",
inputs: [["",0],["",0],["",0],["",0]],
size: [200,200],
properties: {min:-1,max:1,bgColor:"#000"},
onDrawBackground: function(ctx)
{
/*
ctx.save();
ctx.beginPath();
ctx.rect(2,2,this.size[0] - 4, this.size[1]-4);
ctx.clip();
//*/
var colors = ["#FFF","#FAA","#AFA","#AAF"];
if(this.properties.bgColor != null && this.properties.bgColor != "")
{
ctx.fillStyle="#000";
ctx.fillRect(2,2,this.size[0] - 4, this.size[1]-4);
}
if(this.data)
{
var min = this.properties["min"];
var max = this.properties["max"];
for(var i in this.data)
{
var data = this.data[i];
if(!data) continue;
if(this.getInputInfo(i) == null) continue;
ctx.strokeStyle = colors[i];
ctx.beginPath();
var d = data.length / this.size[0];
for(var j = 0; j < data.length; j += d)
{
var value = data[ Math.floor(j) ];
value = (value - min) / (max - min);
if (value > 1.0) value = 1.0;
else if(value < 0) value = 0;
if(j == 0)
ctx.moveTo( j / d, (this.size[1] - 5) - (this.size[1] - 10) * value);
else
ctx.lineTo( j / d, (this.size[1] - 5) - (this.size[1] - 10) * value);
}
ctx.stroke();
}
}
//*/
//ctx.restore();
},
onExecute: function()
{
if(!this.data) this.data = [];
for(var i in this.inputs)
{
var value = this.getInputData(i);
if(typeof(value) == "number")
{
value = value ? value : 0;
if(!this.data[i])
this.data[i] = [];
this.data[i].push(value);
if(this.data[i].length > (this.size[1] - 4))
this.data[i] = this.data[i].slice(1,this.data[i].length);
}
else
this.data[i] = value;
}
if(this.data.length)
this.setDirtyCanvas(true);
}
});
LiteGraph.registerNodeType("graphics/supergraph", {
title: "Supergraph",
desc: "Shows a nice circular graph",
inputs: [["x","number"],["y","number"],["c","color"]],
outputs: [["","image"]],
widgets: [{name:"clear_alpha",text:"Clear Alpha",type:"minibutton"},{name:"clear_color",text:"Clear color",type:"minibutton"}],
properties: {size:256,bgcolor:"#000",lineWidth:1},
bgcolor: "#000",
flags: {allow_fastrender:true},
onLoad: function()
{
this.createCanvas();
},
createCanvas: function()
{
this.canvas = document.createElement("canvas");
this.canvas.width = this.properties["size"];
this.canvas.height = this.properties["size"];
this.oldpos = null;
this.clearCanvas(true);
},
onExecute: function()
{
var x = this.getInputData(0);
var y = this.getInputData(1);
var c = this.getInputData(2);
if(x == null && y == null) return;
if(!x) x = 0;
if(!y) y = 0;
x*= 0.95;
y*= 0.95;
var size = this.properties["size"];
if(size != this.canvas.width || size != this.canvas.height)
this.createCanvas();
if (!this.oldpos)
{
this.oldpos = [ (x * 0.5 + 0.5) * size, (y*0.5 + 0.5) * size];
return;
}
var ctx = this.canvas.getContext("2d");
if(c == null)
c = "rgba(255,255,255,0.5)";
else if(typeof(c) == "object") //array
c = colorToString(c);
//stroke line
ctx.strokeStyle = c;
ctx.beginPath();
ctx.moveTo( this.oldpos[0], this.oldpos[1] );
this.oldpos = [ (x * 0.5 + 0.5) * size, (y*0.5 + 0.5) * size];
ctx.lineTo( this.oldpos[0], this.oldpos[1] );
ctx.stroke();
this.canvas.dirty = true;
this.setOutputData(0,this.canvas);
},
clearCanvas: function(alpha)
{
var ctx = this.canvas.getContext("2d");
if(alpha)
{
ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
this.trace("Clearing alpha");
}
else
{
ctx.fillStyle = this.properties["bgcolor"];
ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
}
},
onWidget: function(e,widget)
{
if(widget.name == "clear_color")
{
this.clearCanvas(false);
}
else if(widget.name == "clear_alpha")
{
this.clearCanvas(true);
}
},
onPropertyChange: function(name,value)
{
if(name == "size")
{
this.properties["size"] = parseInt(value);
this.createCanvas();
}
else if(name == "bgcolor")
{
this.properties["bgcolor"] = value;
this.createCanvas();
}
else if(name == "lineWidth")
{
this.properties["lineWidth"] = parseInt(value);
this.canvas.getContext("2d").lineWidth = this.properties["lineWidth"];
}
else
return false;
return true;
}
});
LiteGraph.registerNodeType("graphics/imagefade", {
title: "Image fade",
desc: "Fades between images",
inputs: [["img1","image"],["img2","image"],["fade","number"]],
outputs: [["","image"]],
properties: {fade:0.5,width:512,height:512},
widgets: [{name:"resizeA",text:"Resize to A",type:"button"},{name:"resizeB",text:"Resize to B",type:"button"}],
onLoad: function()
{
this.createCanvas();
var ctx = this.canvas.getContext("2d");
ctx.fillStyle = "#000";
ctx.fillRect(0,0,this.properties["width"],this.properties["height"]);
},
createCanvas: function()
{
this.canvas = document.createElement("canvas");
this.canvas.width = this.properties["width"];
this.canvas.height = this.properties["height"];
},
onExecute: function()
{
var ctx = this.canvas.getContext("2d");
this.canvas.width = this.canvas.width;
var A = this.getInputData(0);
if (A != null)
{
ctx.drawImage(A,0,0,this.canvas.width, this.canvas.height);
}
var fade = this.getInputData(2);
if(fade == null)
fade = this.properties["fade"];
else
this.properties["fade"] = fade;
ctx.globalAlpha = fade;
var B = this.getInputData(1);
if (B != null)
{
ctx.drawImage(B,0,0,this.canvas.width, this.canvas.height);
}
ctx.globalAlpha = 1.0;
this.setOutputData(0,this.canvas);
this.setDirtyCanvas(true);
}
});
LiteGraph.registerNodeType("graphics/image", {
title: "Image",
desc: "Image loader",
inputs: [],
outputs: [["frame","image"]],
properties: {"url":""},
widgets: [{name:"load",text:"Load",type:"button"}],
onLoad: function()
{
if(this.properties["url"] != "" && this.img == null)
{
this.loadImage(this.properties["url"]);
}
},
onStart: function()
{
},
onExecute: function()
{
if(!this.img)
this.boxcolor = "#000";
if(this.img && this.img.width)
this.setOutputData(0,this.img);
else
this.setOutputData(0,null);
if(this.img.dirty)
this.img.dirty = false;
},
onPropertyChange: function(name,value)
{
this.properties[name] = value;
if (name == "url" && value != "")
this.loadImage(value);
return true;
},
loadImage: function(url)
{
if(url == "")
{
this.img = null;
return;
}
this.trace("loading image...");
this.img = document.createElement("img");
this.img.src = "miniproxy.php?url=" + url;
this.boxcolor = "#F95";
var that = this;
this.img.onload = function()
{
that.trace("Image loaded, size: " + that.img.width + "x" + that.img.height );
this.dirty = true;
that.boxcolor = "#9F9";
that.setDirtyCanvas(true);
}
},
onWidget: function(e,widget)
{
if(widget.name == "load")
{
this.loadImage(this.properties["url"]);
}
}
});
LiteGraph.registerNodeType("graphics/cropImage", {
title: "Crop",
desc: "Crop Image",
inputs: [["","image"]],
outputs: [["","image"]],
properties: {width:256,height:256,x:0,y:0,scale:1.0 },
size: [50,20],
onLoad: function()
{
this.createCanvas();
},
createCanvas: function()
{
this.canvas = document.createElement("canvas");
this.canvas.width = this.properties["width"];
this.canvas.height = this.properties["height"];
},
onExecute: function()
{
var input = this.getInputData(0);
if(!input) return;
if(input.width)
{
var ctx = this.canvas.getContext("2d");
ctx.drawImage(input, -this.properties["x"],-this.properties["y"], input.width * this.properties["scale"], input.height * this.properties["scale"]);
this.setOutputData(0,this.canvas);
}
else
this.setOutputData(0,null);
},
onPropertyChange: function(name,value)
{
this.properties[name] = value;
if(name == "scale")
{
this.properties[name] = parseFloat(value);
if(this.properties[name] == 0)
{
this.trace("Error in scale");
this.properties[name] = 1.0;
}
}
else
this.properties[name] = parseInt(value);
this.createCanvas();
return true;
}
});
LiteGraph.registerNodeType("graphics/video", {
title: "Video",
desc: "Video playback",
inputs: [["t","number"]],
outputs: [["frame","image"],["t","number"],["d","number"]],
properties: {"url":""},
widgets: [{name:"play",text:"PLAY",type:"minibutton"},{name:"stop",text:"STOP",type:"minibutton"},{name:"demo",text:"Demo video",type:"button"},{name:"mute",text:"Mute video",type:"button"}],
onClick: function(e)
{
if(!this.video) return;
//press play
if( distance( [e.canvasX,e.canvasY], [ this.pos[0] + 55, this.pos[1] + 40] ) < 20 )
{
this.play();
return true;
}
},
onKeyDown: function(e)
{
if(e.keyCode == 32)
this.playPause();
},
onLoad: function()
{
if(this.properties.url != "")
this.loadVideo(this.properties.url);
},
play: function()
{
if(this.video)
{
this.trace("Video playing");
this.video.play();
}
},
playPause: function()
{
if(this.video)
{
if(this.video.paused)
this.play();
else
this.pause();
}
},
stop: function()
{
if(this.video)
{
this.trace("Video stopped");
this.video.pause();
this.video.currentTime = 0;
}
},
pause: function()
{
if(this.video)
{
this.trace("Video paused");
this.video.pause();
}
},
onExecute: function()
{
if(!this.video)
return;
var t = this.getInputData(0);
if(t && t >= 0 && t <= 1.0)
{
this.video.currentTime = t * this.video.duration;
this.video.pause();
}
this.video.dirty = true;
this.setOutputData(0,this.video);
this.setOutputData(1,this.video.currentTime);
this.setOutputData(2,this.video.duration);
this.setDirtyCanvas(true);
},
onStart: function()
{
//this.play();
},
onStop: function()
{
this.pause();
},
loadVideo: function(url)
{
this.video = document.createElement("video");
if(url)
this.video.src = url;
else
{
this.video.src = "modules/data/video.webm";
this.properties.url = this.video.src;
}
this.video.type = "type=video/mp4";
//this.video.loop = true; //not work in FF
this.video.muted = true;
this.video.autoplay = false;
//if(reModular.status == "running") this.play();
var that = this;
this.video.addEventListener("loadedmetadata",function(e) {
//onload
that.trace("Duration: " + that.video.duration + " seconds");
that.trace("Size: " + that.video.videoWidth + "," + that.video.videoHeight);
that.setDirtyCanvas(true);
this.width = this.videoWidth;
this.height = this.videoHeight;
});
this.video.addEventListener("progress",function(e) {
//onload
//that.trace("loading...");
});
this.video.addEventListener("error",function(e) {
that.trace("Error loading video: " + this.src);
if (this.error) {
switch (this.error.code) {
case this.error.MEDIA_ERR_ABORTED:
that.trace("You stopped the video.");
break;
case this.error.MEDIA_ERR_NETWORK:
that.trace("Network error - please try again later.");
break;
case this.error.MEDIA_ERR_DECODE:
that.trace("Video is broken..");
break;
case this.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
that.trace("Sorry, your browser can't play this video.");
break;
}
}
});
this.video.addEventListener("ended",function(e) {
that.trace("Ended.");
this.play();
});
//$("body").append(this.video);
},
onPropertyChange: function(name,value)
{
this.properties[name] = value;
if (name == "url" && value != "")
this.loadVideo(value);
return true;
},
onWidget: function(e,widget)
{
if(widget.name == "demo")
{
this.loadVideo();
}
else if(widget.name == "play")
{
if(this.video)
this.playPause();
}
if(widget.name == "stop")
{
this.stop();
}
else if(widget.name == "mute")
{
if(this.video)
this.video.muted = !this.video.muted;
}
}
});

685
src/nodes/uinodes.js Normal file
View File

@@ -0,0 +1,685 @@
//widgets
LiteGraph.registerNodeType("widget/knob",{
title: "Knob",
desc: "Circular controller",
size: [64,84],
outputs: [["",'number']],
properties: {min:0,max:1,value:0.5,wcolor:"#7AF",size:50},
widgets: [{name:"increase",text:"+",type:"minibutton"},{name:"decrease",text:"-",type:"minibutton"}],
onInit: function()
{
this.value = (this.properties["value"] - this.properties["min"]) / (this.properties["max"] - this.properties["min"]);
this.imgbg = this.loadImage("imgs/knob_bg.png");
this.imgfg = this.loadImage("imgs/knob_fg.png");
},
onDrawImageKnob: function(ctx)
{
if(!this.imgfg || !this.imgfg.width) return;
var d = this.imgbg.width*0.5;
var scale = this.size[0] / this.imgfg.width;
ctx.save();
ctx.translate(0,20);
ctx.scale(scale,scale);
ctx.drawImage(this.imgbg,0,0);
//ctx.drawImage(this.imgfg,0,20);
ctx.translate(d,d);
ctx.rotate(this.value * (Math.PI*2) * 6/8 + Math.PI * 10/8);
//ctx.rotate(this.value * (Math.PI*2));
ctx.translate(-d,-d);
ctx.drawImage(this.imgfg,0,0);
ctx.restore();
ctx.font = "bold 16px Criticized,Tahoma";
ctx.fillStyle="rgba(100,100,100,0.8)";
ctx.textAlign = "center";
ctx.fillText(this.name.toUpperCase(), this.size[0] * 0.5, 18 );
ctx.textAlign = "left";
},
onDrawVectorKnob: function(ctx)
{
if(!this.imgfg || !this.imgfg.width) return;
//circle around
ctx.lineWidth = 1;
ctx.strokeStyle= this.mouseOver ? "#FFF" : "#AAA";
ctx.fillStyle="#000";
ctx.beginPath();
ctx.arc(this.size[0] * 0.5,this.size[1] * 0.5 + 10,this.properties.size * 0.5,0,Math.PI*2,true);
ctx.stroke();
if(this.value > 0)
{
ctx.strokeStyle=this.properties["wcolor"];
ctx.lineWidth = (this.properties.size * 0.2);
ctx.beginPath();
ctx.arc(this.size[0] * 0.5,this.size[1] * 0.5 + 10,this.properties.size * 0.35,Math.PI * -0.5 + Math.PI*2 * this.value,Math.PI * -0.5,true);
ctx.stroke();
ctx.lineWidth = 1;
}
ctx.font = (this.properties.size * 0.2) + "px Arial";
ctx.fillStyle="#AAA";
ctx.textAlign = "center";
var str = this.properties["value"];
if(typeof(str) == 'number')
str = str.toFixed(2);
ctx.fillText(str,this.size[0] * 0.5,this.size[1]*0.65);
ctx.textAlign = "left";
},
onDrawBackground: function(ctx)
{
this.onDrawImageKnob(ctx);
},
onExecute: function()
{
this.setOutputData(0, this.properties["value"] );
this.boxcolor = colorToString([this.value,this.value,this.value]);
},
onMouseDown: function(e)
{
if(!this.imgfg || !this.imgfg.width) return;
//this.center = [this.imgbg.width * 0.5, this.imgbg.height * 0.5 + 20];
//this.radius = this.imgbg.width * 0.5;
this.center = [this.size[0] * 0.5, this.size[1] * 0.5 + 20];
this.radius = this.size[0] * 0.5;
if(e.canvasY - this.pos[1] < 20 || distance([e.canvasX,e.canvasY],[this.pos[0] + this.center[0],this.pos[1] + this.center[1]]) > this.radius)
return false;
this.oldmouse = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ];
this.captureInput(true);
/*
var tmp = this.localToScreenSpace(0,0);
this.trace(tmp[0] + "," + tmp[1]); */
return true;
},
onMouseMove: function(e)
{
if(!this.oldmouse) return;
var m = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ];
var v = this.value;
v -= (m[1] - this.oldmouse[1]) * 0.01;
if(v > 1.0) v = 1.0;
else if(v < 0.0) v = 0.0;
this.value = v;
this.properties["value"] = this.properties["min"] + (this.properties["max"] - this.properties["min"]) * this.value;
this.oldmouse = m;
this.setDirtyCanvas(true);
},
onMouseUp: function(e)
{
if(this.oldmouse)
{
this.oldmouse = null;
this.captureInput(false);
}
},
onMouseLeave: function(e)
{
//this.oldmouse = null;
},
onWidget: function(e,widget)
{
if(widget.name=="increase")
this.onPropertyChange("size", this.properties.size + 10);
else if(widget.name=="decrease")
this.onPropertyChange("size", this.properties.size - 10);
},
onPropertyChange: function(name,value)
{
if(name=="wcolor")
this.properties[name] = value;
else if(name=="size")
{
value = parseInt(value);
this.properties[name] = value;
this.size = [value+4,value+24];
this.setDirtyCanvas(true,true);
}
else if(name=="min" || name=="max" || name=="value")
{
this.properties[name] = parseFloat(value);
}
else
return false;
return true;
}
});
LiteGraph.registerNodeType("widget/hslider",{
title: "H.Slider",
desc: "Linear slider controller",
size: [160,26],
outputs: [["",'number']],
properties: {wcolor:"#7AF",min:0,max:1,value:0.5},
onInit: function()
{
this.value = 0.5;
this.imgfg = this.loadImage("imgs/slider_fg.png");
},
onDrawVectorial: function(ctx)
{
if(!this.imgfg || !this.imgfg.width) return;
//border
ctx.lineWidth = 1;
ctx.strokeStyle= this.mouseOver ? "#FFF" : "#AAA";
ctx.fillStyle="#000";
ctx.beginPath();
ctx.rect(2,0,this.size[0]-4,20);
ctx.stroke();
ctx.fillStyle=this.properties["wcolor"];
ctx.beginPath();
ctx.rect(2+(this.size[0]-4-20)*this.value,0, 20,20);
ctx.fill();
},
onDrawImage: function(ctx)
{
if(!this.imgfg || !this.imgfg.width) return;
//border
ctx.lineWidth = 1;
ctx.fillStyle="#000";
ctx.fillRect(2,9,this.size[0]-4,2);
ctx.strokeStyle= "#333";
ctx.beginPath();
ctx.moveTo(2,9);
ctx.lineTo(this.size[0]-4,9);
ctx.stroke();
ctx.strokeStyle= "#AAA";
ctx.beginPath();
ctx.moveTo(2,11);
ctx.lineTo(this.size[0]-4,11);
ctx.stroke();
ctx.drawImage(this.imgfg, 2+(this.size[0]-4)*this.value - this.imgfg.width*0.5,-this.imgfg.height*0.5 + 10);
},
onDrawBackground: function(ctx)
{
this.onDrawImage(ctx);
},
onExecute: function()
{
this.properties["value"] = this.properties["min"] + (this.properties["max"] - this.properties["min"]) * this.value;
this.setOutputData(0, this.properties["value"] );
this.boxcolor = colorToString([this.value,this.value,this.value]);
},
onMouseDown: function(e)
{
if(e.canvasY - this.pos[1] < 0)
return false;
this.oldmouse = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ];
this.captureInput(true);
return true;
},
onMouseMove: function(e)
{
if(!this.oldmouse) return;
var m = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ];
var v = this.value;
var delta = (m[0] - this.oldmouse[0]);
v += delta / this.size[0];
if(v > 1.0) v = 1.0;
else if(v < 0.0) v = 0.0;
this.value = v;
this.oldmouse = m;
this.setDirtyCanvas(true);
},
onMouseUp: function(e)
{
this.oldmouse = null;
this.captureInput(false);
},
onMouseLeave: function(e)
{
//this.oldmouse = null;
},
onPropertyChange: function(name,value)
{
if(name=="wcolor")
this.properties[name] = value;
else
return false;
return true;
}
});
LiteGraph.registerNodeType("widget/kpad",{
title: "KPad",
desc: "bidimensional slider",
size: [200,200],
outputs: [["x",'number'],["y",'number']],
properties:{x:0,y:0,borderColor:"#333",bgcolorTop:"#444",bgcolorBottom:"#000",shadowSize:1, borderRadius:2},
createGradient: function(ctx)
{
this.lineargradient = ctx.createLinearGradient(0,0,0,this.size[1]);
this.lineargradient.addColorStop(0,this.properties["bgcolorTop"]);
this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]);
},
onDrawBackground: function(ctx)
{
if(!this.lineargradient)
this.createGradient(ctx);
ctx.lineWidth = 1;
ctx.strokeStyle = this.properties["borderColor"];
//ctx.fillStyle = "#ebebeb";
ctx.fillStyle = this.lineargradient;
ctx.shadowColor = "#000";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = this.properties["shadowSize"];
ctx.roundRect(0,0,this.size[0],this.size[1],this.properties["shadowSize"]);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = "#A00";
ctx.fillRect(this.size[0] * this.properties["x"] - 5, this.size[1] * this.properties["y"] - 5,10,10);
},
onWidget: function(e,widget)
{
if(widget.name == "update")
{
this.lineargradient = null;
this.setDirtyCanvas(true);
}
},
onExecute: function()
{
this.setOutputData(0, this.properties["x"] );
this.setOutputData(1, this.properties["y"] );
},
onMouseDown: function(e)
{
if(e.canvasY - this.pos[1] < 0)
return false;
this.oldmouse = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ];
this.captureInput(true);
return true;
},
onMouseMove: function(e)
{
if(!this.oldmouse) return;
var m = [ e.canvasX - this.pos[0], e.canvasY - this.pos[1] ];
this.properties.x = m[0] / this.size[0];
this.properties.y = m[1] / this.size[1];
if(this.properties.x > 1.0) this.properties.x = 1.0;
else if(this.properties.x < 0.0) this.properties.x = 0.0;
if(this.properties.y > 1.0) this.properties.y = 1.0;
else if(this.properties.y < 0.0) this.properties.y = 0.0;
this.oldmouse = m;
this.setDirtyCanvas(true);
},
onMouseUp: function(e)
{
if(this.oldmouse)
{
this.oldmouse = null;
this.captureInput(false);
}
},
onMouseLeave: function(e)
{
//this.oldmouse = null;
}
});
LiteGraph.registerNodeType("widget/button", {
title: "Button",
desc: "A send command button",
widgets: [{name:"test",text:"Test Button",type:"button"}],
size: [100,40],
properties:{text:"clickme",command:"",color:"#7AF",bgcolorTop:"#f0f0f0",bgcolorBottom:"#e0e0e0",fontsize:"16"},
outputs:[["M","module"]],
createGradient: function(ctx)
{
this.lineargradient = ctx.createLinearGradient(0,0,0,this.size[1]);
this.lineargradient.addColorStop(0,this.properties["bgcolorTop"]);
this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]);
},
drawVectorShape: function(ctx)
{
ctx.fillStyle = this.mouseOver ? this.properties["color"] : "#AAA";
if(this.clicking)
ctx.fillStyle = "#FFF";
ctx.strokeStyle = "#AAA";
ctx.roundRect(5,5,this.size[0] - 10,this.size[1] - 10,4);
ctx.stroke();
if(this.mouseOver)
ctx.fill();
//ctx.fillRect(5,20,this.size[0] - 10,this.size[1] - 30);
ctx.fillStyle = this.mouseOver ? "#000" : "#AAA";
ctx.font = "bold " + this.properties["fontsize"] + "px Criticized,Tahoma";
ctx.textAlign = "center";
ctx.fillText(this.properties["text"],this.size[0]*0.5,this.size[1]*0.5 + 0.5*parseInt(this.properties["fontsize"]));
ctx.textAlign = "left";
},
drawBevelShape: function(ctx)
{
ctx.shadowColor = "#000";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = this.properties["shadowSize"];
if(!this.lineargradient)
this.createGradient(ctx);
ctx.fillStyle = this.mouseOver ? this.properties["color"] : this.lineargradient;
if(this.clicking)
ctx.fillStyle = "#444";
ctx.strokeStyle = "#FFF";
ctx.roundRect(5,5,this.size[0] - 10,this.size[1] - 10,4);
ctx.fill();
ctx.shadowColor = "rgba(0,0,0,0)";
ctx.stroke();
ctx.fillStyle = this.mouseOver ? "#000" : "#444";
ctx.font = "bold " + this.properties["fontsize"] + "px Century Gothic";
ctx.textAlign = "center";
ctx.fillText(this.properties["text"],this.size[0]*0.5,this.size[1]*0.5 + 0.40*parseInt(this.properties["fontsize"]));
ctx.textAlign = "left";
},
onDrawBackground: function(ctx)
{
this.drawBevelShape(ctx);
},
clickButton: function()
{
var module = this.getOutputModule(0);
if(this.properties["command"] && this.properties["command"] != "")
{
if (! module.executeAction(this.properties["command"]) )
this.trace("Error executing action in other module");
}
else if(module && module.onTrigger)
{
module.onTrigger();
}
},
onMouseDown: function(e)
{
if(e.canvasY - this.pos[1] < 2)
return false;
this.clickButton();
this.clicking = true;
return true;
},
onMouseUp: function(e)
{
this.clicking = false;
},
onExecute: function()
{
},
onWidget: function(e,widget)
{
if(widget.name == "test")
{
this.clickButton();
}
},
onPropertyChange: function(name,value)
{
this.properties[name] = value;
return true;
}
});
LiteGraph.registerNodeType("widget/progress",{
title: "Progress",
desc: "Shows data in linear progress",
size: [160,26],
inputs: [["",'number']],
properties: {min:0,max:1,value:0,wcolor:"#AAF"},
onExecute: function()
{
var v = this.getInputData(0);
if( v != undefined )
this.properties["value"] = v;
},
onDrawBackground: function(ctx)
{
//border
ctx.lineWidth = 1;
ctx.fillStyle=this.properties.wcolor;
var v = (this.properties.value - this.properties.min) / (this.properties.max - this.properties.min);
v = Math.min(1,v);
v = Math.max(0,v);
ctx.fillRect(2,2,(this.size[0]-4)*v,this.size[1]-4);
}
});
LiteGraph.registerNodeType("widget/text", {
title: "Text",
desc: "Shows the input value",
widgets: [{name:"resize",text:"Resize box",type:"button"},{name:"led_text",text:"LED",type:"minibutton"},{name:"normal_text",text:"Normal",type:"minibutton"}],
inputs: [["",0]],
properties:{value:"...",font:"Arial", fontsize:18, color:"#AAA", align:"left", glowSize:0, decimals:1},
onDrawBackground: function(ctx)
{
//ctx.fillStyle="#000";
//ctx.fillRect(0,0,100,60);
ctx.fillStyle = this.properties["color"];
var v = this.properties["value"];
if(this.properties["glowSize"])
{
ctx.shadowColor = this.properties["color"];
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = this.properties["glowSize"];
}
else
ctx.shadowColor = "transparent";
var fontsize = this.properties["fontsize"];
ctx.textAlign = this.properties["align"];
ctx.font = fontsize.toString() + "px " + this.properties["font"];
this.str = typeof(v) == 'number' ? v.toFixed(this.properties["decimals"]) : v;
if( typeof(this.str) == 'string')
{
var lines = this.str.split("\\n");
for(var i in lines)
ctx.fillText(lines[i],this.properties["align"] == "left" ? 15 : this.size[0] - 15, fontsize * -0.15 + fontsize * (parseInt(i)+1) );
}
ctx.shadowColor = "transparent";
this.last_ctx = ctx;
ctx.textAlign = "left";
},
onExecute: function()
{
var v = this.getInputData(0);
if(v != null)
this.properties["value"] = v;
else
this.properties["value"] = "";
this.setDirtyCanvas(true);
},
resize: function()
{
if(!this.last_ctx) return;
var lines = this.str.split("\\n");
this.last_ctx.font = this.properties["fontsize"] + "px " + this.properties["font"];
var max = 0;
for(var i in lines)
{
var w = this.last_ctx.measureText(lines[i]).width;
if(max < w) max = w;
}
this.size[0] = max + 20;
this.size[1] = 4 + lines.length * this.properties["fontsize"];
this.setDirtyCanvas(true);
},
onWidget: function(e,widget)
{
if(widget.name == "resize")
this.resize();
else if (widget.name == "led_text")
{
this.properties["font"] = "Digital";
this.properties["glowSize"] = 4;
this.setDirtyCanvas(true);
}
else if (widget.name == "normal_text")
{
this.properties["font"] = "Arial";
this.setDirtyCanvas(true);
}
},
onPropertyChange: function(name,value)
{
this.properties[name] = value;
this.str = typeof(value) == 'number' ? value.toFixed(3) : value;
//this.resize();
return true;
}
});
LiteGraph.registerNodeType("widget/panel", {
title: "Panel",
desc: "Non interactive panel",
widgets: [{name:"update",text:"Update",type:"button"}],
size: [200,100],
properties:{borderColor:"#ffffff",bgcolorTop:"#f0f0f0",bgcolorBottom:"#e0e0e0",shadowSize:2, borderRadius:3},
createGradient: function(ctx)
{
if(this.properties["bgcolorTop"] == "" || this.properties["bgcolorBottom"] == "")
{
this.lineargradient = 0;
return;
}
this.lineargradient = ctx.createLinearGradient(0,0,0,this.size[1]);
this.lineargradient.addColorStop(0,this.properties["bgcolorTop"]);
this.lineargradient.addColorStop(1,this.properties["bgcolorBottom"]);
},
onDrawBackground: function(ctx)
{
if(this.lineargradient == null)
this.createGradient(ctx);
if(!this.lineargradient)
return;
ctx.lineWidth = 1;
ctx.strokeStyle = this.properties["borderColor"];
//ctx.fillStyle = "#ebebeb";
ctx.fillStyle = this.lineargradient;
if(this.properties["shadowSize"])
{
ctx.shadowColor = "#000";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = this.properties["shadowSize"];
}
else
ctx.shadowColor = "transparent";
ctx.roundRect(0,0,this.size[0]-1,this.size[1]-1,this.properties["shadowSize"]);
ctx.fill();
ctx.shadowColor = "transparent";
ctx.stroke();
},
onWidget: function(e,widget)
{
if(widget.name == "update")
{
this.lineargradient = null;
this.setDirtyCanvas(true);
}
}
});