mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 22:59:14 +00:00
added support for onResourceRenamed
This commit is contained in:
tamat
@@ -559,16 +559,23 @@ LGraph.prototype.getElapsedTime = function()
|
||||
/**
|
||||
* Sends an event to all the nodes, useful to trigger stuff
|
||||
* @method sendEventToAllNodes
|
||||
* @param {String} eventname the name of the event
|
||||
* @param {Object} param an object containing the info
|
||||
* @param {String} eventname the name of the event (function to be called)
|
||||
* @param {Array} params parameters in array format
|
||||
*/
|
||||
|
||||
LGraph.prototype.sendEventToAllNodes = function(eventname, param)
|
||||
LGraph.prototype.sendEventToAllNodes = function(eventname, params)
|
||||
{
|
||||
var M = this._nodes_in_order ? this._nodes_in_order : this._nodes;
|
||||
for(var j in M)
|
||||
if(M[j][eventname])
|
||||
M[j][eventname](param);
|
||||
{
|
||||
if(params === undefined)
|
||||
M[j][eventname]();
|
||||
else if(params && params.constructor === Array)
|
||||
M[j][eventname].apply(M[j], params);
|
||||
else
|
||||
M[j][eventname](params);
|
||||
}
|
||||
}
|
||||
|
||||
LGraph.prototype.sendActionToCanvas = function(action, params)
|
||||
@@ -1966,8 +1973,6 @@ LGraphNode.prototype.captureInput = function(v)
|
||||
|
||||
//change
|
||||
c.node_capturing_input = v ? this : null;
|
||||
if(this.graph.debug)
|
||||
console.log(this.title + ": Capturing input " + (v?"ON":"OFF"));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2274,7 +2279,7 @@ LGraphCanvas.prototype.setCanvas = function(canvas)
|
||||
|
||||
//read data
|
||||
var type = file.type.split("/")[0];
|
||||
if(type == "text")
|
||||
if(type == "text" || type == "")
|
||||
reader.readAsText(file);
|
||||
else if (type == "image")
|
||||
reader.readAsDataURL(file);
|
||||
@@ -2738,7 +2743,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
|
||||
*/
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
//e.stopPropagation();
|
||||
return false;
|
||||
//this is not really optimal
|
||||
//this.graph.change();
|
||||
@@ -6463,7 +6468,6 @@ GraphicsImage.prototype.loadImage = function(url)
|
||||
return;
|
||||
}
|
||||
|
||||
this.trace("loading image...");
|
||||
this.img = document.createElement("img");
|
||||
|
||||
var url = name;
|
||||
@@ -7019,12 +7023,22 @@ ImageWebcam.prototype.openStream = function()
|
||||
|
||||
var that = this;
|
||||
function onFailSoHard(e) {
|
||||
trace('Webcam rejected', e);
|
||||
console.log('Webcam rejected', e);
|
||||
that._webcam_stream = false;
|
||||
that.box_color = "red";
|
||||
};
|
||||
}
|
||||
|
||||
ImageWebcam.prototype.onRemoved = function()
|
||||
{
|
||||
if(this._webcam_stream)
|
||||
{
|
||||
this._webcam_stream.stop();
|
||||
this._webcam_stream = null;
|
||||
this._video = null;
|
||||
}
|
||||
}
|
||||
|
||||
ImageWebcam.prototype.streamReady = function(localMediaStream)
|
||||
{
|
||||
this._webcam_stream = localMediaStream;
|
||||
@@ -7044,8 +7058,6 @@ ImageWebcam.prototype.streamReady = function(localMediaStream)
|
||||
console.log(e);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
ImageWebcam.prototype.onExecute = function()
|
||||
@@ -7056,10 +7068,35 @@ ImageWebcam.prototype.onExecute = function()
|
||||
if(!this._video || !this._video.videoWidth) return;
|
||||
|
||||
this._video.width = this._video.videoWidth;
|
||||
this._video.hieght = this._video.videoHeight;
|
||||
this._video.height = this._video.videoHeight;
|
||||
this.setOutputData(0, this._video);
|
||||
}
|
||||
|
||||
ImageWebcam.prototype.getExtraMenuOptions = function(graphcanvas)
|
||||
{
|
||||
var that = this;
|
||||
var txt = !that.properties.show ? "Show Frame" : "Hide Frame";
|
||||
return [ {content: txt, callback:
|
||||
function() {
|
||||
that.properties.show = !that.properties.show;
|
||||
}
|
||||
}];
|
||||
}
|
||||
|
||||
ImageWebcam.prototype.onDrawBackground = function(ctx)
|
||||
{
|
||||
if(this.flags.collapsed || this.size[1] <= 20 || !this.properties.show)
|
||||
return;
|
||||
|
||||
if(!this._video)
|
||||
return;
|
||||
|
||||
//render to graph canvas
|
||||
ctx.save();
|
||||
ctx.drawImage(this._video, 0, 0, this.size[0], this.size[1]);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
LiteGraph.registerNodeType("graphics/webcam", ImageWebcam );
|
||||
|
||||
|
||||
@@ -7113,6 +7150,7 @@ if(typeof(LiteGraph) != "undefined")
|
||||
//texture must be loaded
|
||||
if(LGraphTexture.loadTextureCallback)
|
||||
{
|
||||
//calls the method in charge of loading resources (in LiteScene would be ResourcesManager.load)
|
||||
var loader = LGraphTexture.loadTextureCallback;
|
||||
if(loader)
|
||||
loader( name );
|
||||
@@ -7228,6 +7266,12 @@ if(typeof(LiteGraph) != "undefined")
|
||||
this.setOutputData(0, tex);
|
||||
}
|
||||
|
||||
LGraphTexture.prototype.onResourceRenamed = function(old_name,new_name)
|
||||
{
|
||||
if(this.properties.name == old_name)
|
||||
this.properties.name = new_name;
|
||||
}
|
||||
|
||||
LGraphTexture.prototype.onDrawBackground = function(ctx)
|
||||
{
|
||||
if( this.flags.collapsed || this.size[1] <= 20 )
|
||||
@@ -7282,6 +7326,9 @@ if(typeof(LiteGraph) != "undefined")
|
||||
var size = LGraphTexture.image_preview_size;
|
||||
var temp_tex = tex;
|
||||
|
||||
if(tex.format == gl.DEPTH_COMPONENT)
|
||||
return null; //cannot generate from depth
|
||||
|
||||
//Generate low-level version in the GPU to speed up
|
||||
if(tex.width > size || tex.height > size)
|
||||
{
|
||||
@@ -7402,6 +7449,35 @@ if(typeof(LiteGraph) != "undefined")
|
||||
LGraphTextureOperation.title = "Operation";
|
||||
LGraphTextureOperation.desc = "Texture shader operation";
|
||||
|
||||
LGraphTextureOperation.prototype.getExtraMenuOptions = function(graphcanvas)
|
||||
{
|
||||
var that = this;
|
||||
var txt = !that.properties.show ? "Show Texture" : "Hide Texture";
|
||||
return [ {content: txt, callback:
|
||||
function() {
|
||||
that.properties.show = !that.properties.show;
|
||||
}
|
||||
}];
|
||||
}
|
||||
|
||||
LGraphTextureOperation.prototype.onDrawBackground = function(ctx)
|
||||
{
|
||||
if(this.flags.collapsed || this.size[1] <= 20 || !this.properties.show)
|
||||
return;
|
||||
|
||||
if(!this._tex)
|
||||
return;
|
||||
|
||||
//only works if using a webgl renderer
|
||||
if(this._tex.gl != ctx)
|
||||
return;
|
||||
|
||||
//render to graph canvas
|
||||
ctx.save();
|
||||
ctx.drawImage(this._tex, 0, 0, this.size[0], this.size[1]);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
LGraphTextureOperation.prototype.onExecute = function()
|
||||
{
|
||||
var tex = this.getInputData(0);
|
||||
@@ -7747,39 +7823,44 @@ if(typeof(LiteGraph) != "undefined")
|
||||
LGraphTextureCopy.prototype.onExecute = function()
|
||||
{
|
||||
var tex = this.getInputData(0);
|
||||
if(!tex) return;
|
||||
if(!tex && !this._temp_texture)
|
||||
return;
|
||||
|
||||
var width = tex.width;
|
||||
var height = tex.height;
|
||||
|
||||
if(this.properties.size != 0)
|
||||
//copy the texture
|
||||
if(tex)
|
||||
{
|
||||
width = this.properties.size;
|
||||
height = this.properties.size;
|
||||
}
|
||||
var width = tex.width;
|
||||
var height = tex.height;
|
||||
|
||||
var temp = this._temp_texture;
|
||||
if(this.properties.size != 0)
|
||||
{
|
||||
width = this.properties.size;
|
||||
height = this.properties.size;
|
||||
}
|
||||
|
||||
var type = tex.type;
|
||||
if(this.properties.precision === LGraphTexture.LOW)
|
||||
type = gl.UNSIGNED_BYTE;
|
||||
else if(this.properties.precision === LGraphTexture.HIGH)
|
||||
type = gl.HIGH_PRECISION_FORMAT;
|
||||
var temp = this._temp_texture;
|
||||
|
||||
if(!temp || temp.width != width || temp.height != height || temp.type != type )
|
||||
{
|
||||
var minFilter = gl.LINEAR;
|
||||
if( this.properties.generate_mipmaps && isPowerOfTwo(width) && isPowerOfTwo(height) )
|
||||
minFilter = gl.LINEAR_MIPMAP_LINEAR;
|
||||
this._temp_texture = new GL.Texture( width, height, { type: type, format: gl.RGBA, minFilter: minFilter, magFilter: gl.LINEAR });
|
||||
}
|
||||
tex.copyTo(this._temp_texture);
|
||||
var type = tex.type;
|
||||
if(this.properties.precision === LGraphTexture.LOW)
|
||||
type = gl.UNSIGNED_BYTE;
|
||||
else if(this.properties.precision === LGraphTexture.HIGH)
|
||||
type = gl.HIGH_PRECISION_FORMAT;
|
||||
|
||||
if(this.properties.generate_mipmaps)
|
||||
{
|
||||
this._temp_texture.bind(0);
|
||||
gl.generateMipmap(this._temp_texture.texture_type);
|
||||
this._temp_texture.unbind(0);
|
||||
if(!temp || temp.width != width || temp.height != height || temp.type != type )
|
||||
{
|
||||
var minFilter = gl.LINEAR;
|
||||
if( this.properties.generate_mipmaps && isPowerOfTwo(width) && isPowerOfTwo(height) )
|
||||
minFilter = gl.LINEAR_MIPMAP_LINEAR;
|
||||
this._temp_texture = new GL.Texture( width, height, { type: type, format: gl.RGBA, minFilter: minFilter, magFilter: gl.LINEAR });
|
||||
}
|
||||
tex.copyTo(this._temp_texture);
|
||||
|
||||
if(this.properties.generate_mipmaps)
|
||||
{
|
||||
this._temp_texture.bind(0);
|
||||
gl.generateMipmap(this._temp_texture.texture_type);
|
||||
this._temp_texture.unbind(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7949,12 +8030,11 @@ if(typeof(LiteGraph) != "undefined")
|
||||
|
||||
this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision );
|
||||
|
||||
var mesh = Mesh.getScreenQuad();
|
||||
//var mesh = Mesh.getScreenQuad();
|
||||
|
||||
this._tex.drawTo(function() {
|
||||
tex.bind(0);
|
||||
lut_tex.bind(1);
|
||||
LGraphTextureLUT._shader.uniforms({u_texture:0, u_textureB:1, u_amount: intensity, uViewportSize:[tex.width,tex.height]}).draw(mesh);
|
||||
tex.toViewport( LGraphTextureLUT._shader, {u_texture:0, u_textureB:1, u_amount: intensity} );
|
||||
});
|
||||
|
||||
this.setOutputData(0,this._tex);
|
||||
@@ -7992,7 +8072,7 @@ if(typeof(LiteGraph) != "undefined")
|
||||
LiteGraph.registerNodeType("texture/LUT", LGraphTextureLUT );
|
||||
window.LGraphTextureLUT = LGraphTextureLUT;
|
||||
|
||||
// Texture Mix *****************************************
|
||||
// Texture Channels *****************************************
|
||||
function LGraphTextureChannels()
|
||||
{
|
||||
this.addInput("Texture","Texture");
|
||||
@@ -8007,7 +8087,7 @@ if(typeof(LiteGraph) != "undefined")
|
||||
LGraphTextureChannels._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureChannels.pixel_shader );
|
||||
}
|
||||
|
||||
LGraphTextureChannels.title = "Channels";
|
||||
LGraphTextureChannels.title = "Texture to Channels";
|
||||
LGraphTextureChannels.desc = "Split texture channels";
|
||||
|
||||
LGraphTextureChannels.prototype.onExecute = function()
|
||||
@@ -8065,9 +8145,76 @@ if(typeof(LiteGraph) != "undefined")
|
||||
}\n\
|
||||
";
|
||||
|
||||
LiteGraph.registerNodeType("texture/channels", LGraphTextureChannels );
|
||||
LiteGraph.registerNodeType("texture/textureChannels", LGraphTextureChannels );
|
||||
window.LGraphTextureChannels = LGraphTextureChannels;
|
||||
|
||||
|
||||
// Texture Channels to Texture *****************************************
|
||||
function LGraphChannelsTexture()
|
||||
{
|
||||
this.addInput("R","Texture");
|
||||
this.addInput("G","Texture");
|
||||
this.addInput("B","Texture");
|
||||
this.addInput("A","Texture");
|
||||
|
||||
this.addOutput("Texture","Texture");
|
||||
|
||||
this.properties = {};
|
||||
if(!LGraphChannelsTexture._shader)
|
||||
LGraphChannelsTexture._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphChannelsTexture.pixel_shader );
|
||||
}
|
||||
|
||||
LGraphChannelsTexture.title = "Channels to Texture";
|
||||
LGraphChannelsTexture.desc = "Split texture channels";
|
||||
|
||||
LGraphChannelsTexture.prototype.onExecute = function()
|
||||
{
|
||||
var tex = [ this.getInputData(0),
|
||||
this.getInputData(1),
|
||||
this.getInputData(2),
|
||||
this.getInputData(3) ];
|
||||
|
||||
if(!tex[0] || !tex[1] || !tex[2] || !tex[3])
|
||||
return;
|
||||
|
||||
gl.disable( gl.BLEND );
|
||||
gl.disable( gl.DEPTH_TEST );
|
||||
|
||||
var mesh = Mesh.getScreenQuad();
|
||||
var shader = LGraphChannelsTexture._shader;
|
||||
|
||||
this._tex = LGraphTexture.getTargetTexture( tex[0], this._tex );
|
||||
|
||||
this._tex.drawTo( function() {
|
||||
tex[0].bind(0);
|
||||
tex[1].bind(1);
|
||||
tex[2].bind(2);
|
||||
tex[3].bind(3);
|
||||
shader.uniforms({u_textureR:0, u_textureG:1, u_textureB:2, u_textureA:3 }).draw(mesh);
|
||||
});
|
||||
this.setOutputData(0, this._tex);
|
||||
}
|
||||
|
||||
LGraphChannelsTexture.pixel_shader = "precision highp float;\n\
|
||||
precision highp float;\n\
|
||||
varying vec2 v_coord;\n\
|
||||
uniform sampler2D u_textureR;\n\
|
||||
uniform sampler2D u_textureG;\n\
|
||||
uniform sampler2D u_textureB;\n\
|
||||
uniform sampler2D u_textureA;\n\
|
||||
\n\
|
||||
void main() {\n\
|
||||
gl_FragColor = vec4( \
|
||||
texture2D(u_textureR, v_coord).r,\
|
||||
texture2D(u_textureG, v_coord).r,\
|
||||
texture2D(u_textureB, v_coord).r,\
|
||||
texture2D(u_textureA, v_coord).r);\n\
|
||||
}\n\
|
||||
";
|
||||
|
||||
LiteGraph.registerNodeType("texture/channelsTexture", LGraphChannelsTexture );
|
||||
window.LGraphChannelsTexture = LGraphChannelsTexture;
|
||||
|
||||
// Texture Mix *****************************************
|
||||
function LGraphTextureMix()
|
||||
{
|
||||
@@ -8353,17 +8500,15 @@ if(typeof(LiteGraph) != "undefined")
|
||||
var scale = this.properties.scale || [1,1];
|
||||
|
||||
//blur sometimes needs an aspect correction
|
||||
var aspect = LiteGraph.aspect;
|
||||
var aspect = LiteGraph.camera_aspect;
|
||||
if(!aspect && window.gl !== undefined)
|
||||
aspect = gl.canvas.height / gl.canvas.width;
|
||||
if(window.Renderer !== undefined)
|
||||
aspect = window.Renderer._current_camera.aspect;
|
||||
if(!aspect)
|
||||
aspect = 1;
|
||||
|
||||
//iterate
|
||||
var start_texture = tex;
|
||||
var aspect = this.properties.preserve_aspect ? aspect : 1;
|
||||
aspect = this.properties.preserve_aspect ? aspect : 1;
|
||||
for(var i = 0; i < iterations; ++i)
|
||||
{
|
||||
this._temp_texture.drawTo( function() {
|
||||
@@ -8465,9 +8610,19 @@ if(typeof(LiteGraph) != "undefined")
|
||||
}
|
||||
}
|
||||
|
||||
LGraphTextureWebcam.prototype.onRemoved = function()
|
||||
{
|
||||
if(this._webcam_stream)
|
||||
{
|
||||
this._webcam_stream.stop();
|
||||
this._webcam_stream = null;
|
||||
this._video = null;
|
||||
}
|
||||
}
|
||||
|
||||
LGraphTextureWebcam.prototype.onDrawBackground = function(ctx)
|
||||
{
|
||||
if(!this.flags.collapsed || this.size[1] <= 20)
|
||||
if(this.flags.collapsed || this.size[1] <= 20)
|
||||
return;
|
||||
|
||||
if(!this._video)
|
||||
@@ -8479,8 +8634,13 @@ if(typeof(LiteGraph) != "undefined")
|
||||
{
|
||||
ctx.translate(0,this.size[1]);
|
||||
ctx.scale(1,-1);
|
||||
ctx.drawImage(this._video, 0, 0, this.size[0], this.size[1]);
|
||||
}
|
||||
else
|
||||
{
|
||||
if(this._temp_texture)
|
||||
ctx.drawImage(this._temp_texture, 0, 0, this.size[0], this.size[1]);
|
||||
}
|
||||
ctx.drawImage(this._video, 0, 0, this.size[0], this.size[1]);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
|
||||
100
build/litegraph.min.js
vendored
100
build/litegraph.min.js
vendored
@@ -12,7 +12,7 @@ LGraph.prototype.runStep=function(a){a=a||1;var b=LiteGraph.getTime();this.globa
|
||||
1);this.elapsed_time=0.001*a;this.globaltime+=0.001*a;this.iteration+=1};LGraph.prototype.updateExecutionOrder=function(){this._nodes_in_order=this.computeExecutionOrder()};
|
||||
LGraph.prototype.computeExecutionOrder=function(){var a=[],b=[],c={},d={},e={},f;for(f in this._nodes){var g=this._nodes[f];c[g.id]=g;var h=0;if(g.inputs)for(var l=0,n=g.inputs.length;l<n;l++)g.inputs[l]&&null!=g.inputs[l].link&&(h+=1);0==h?b.push(g):e[g.id]=h}for(;0!=b.length;)if(g=b.shift(),a.push(g),delete c[g.id],g.outputs)for(f=0;f<g.outputs.length;f++)if(h=g.outputs[f],null!=h&&null!=h.links&&0!=h.links.length)for(l=0;l<h.links.length;l++)if((n=this.links[h.links[l]])&&!d[n.id]){var k=this.getNodeById(n.target_id);
|
||||
null==k?d[n.id]=!0:(d[n.id]=!0,e[k.id]-=1,0==e[k.id]&&b.push(k))}for(f in c)a.push(c[f]);a.length!=this._nodes.length&&LiteGraph.debug&&console.log("something went wrong, nodes missing");for(f in a)a[f].order=f;return a};LGraph.prototype.getTime=function(){return this.globaltime};LGraph.prototype.getFixedTime=function(){return this.fixedtime};LGraph.prototype.getElapsedTime=function(){return this.elapsed_time};
|
||||
LGraph.prototype.sendEventToAllNodes=function(a,b){var c=this._nodes_in_order?this._nodes_in_order:this._nodes,d;for(d in c)if(c[d][a])c[d][a](b)};LGraph.prototype.sendActionToCanvas=function(a,b){if(this.list_of_graphcanvas)for(var c in this.list_of_graphcanvas){var d=this.list_of_graphcanvas[c];d[a]&&d[a].apply(d,b)}};
|
||||
LGraph.prototype.sendEventToAllNodes=function(a,b){var c=this._nodes_in_order?this._nodes_in_order:this._nodes,d;for(d in c)if(c[d][a])if(void 0===b)c[d][a]();else if(b&&b.constructor===Array)c[d][a].apply(c[d],b);else c[d][a](b)};LGraph.prototype.sendActionToCanvas=function(a,b){if(this.list_of_graphcanvas)for(var c in this.list_of_graphcanvas){var d=this.list_of_graphcanvas[c];d[a]&&d[a].apply(d,b)}};
|
||||
LGraph.prototype.add=function(a,b){if(a&&(-1==a.id||null==this._nodes_by_id[a.id])){if(this._nodes.length>=LiteGraph.MAX_NUMBER_OF_NODES)throw"LiteGraph: max number of nodes in a graph reached";if(null==a.id||-1==a.id)a.id=this.last_node_id++;a.graph=this;this._nodes.push(a);this._nodes_by_id[a.id]=a;if(a.onAdded)a.onAdded();this.config.align_to_grid&&a.alignToGrid();b||this.updateExecutionOrder();if(this.onNodeAdded)this.onNodeAdded(a);this.setDirtyCanvas(!0);this.change();return a}};
|
||||
LGraph.prototype.remove=function(a){if(null!=this._nodes_by_id[a.id]&&!a.ignore_remove){if(a.inputs)for(var b=0;b<a.inputs.length;b++){var c=a.inputs[b];null!=c.link&&a.disconnectInput(b)}if(a.outputs)for(b=0;b<a.outputs.length;b++)c=a.outputs[b],null!=c.links&&c.links.length&&a.disconnectOutput(b);a.id=-1;if(a.onRemoved)a.onRemoved();a.graph=null;for(b in this.list_of_graphcanvas)c=this.list_of_graphcanvas[b],c.selected_nodes[a.id]&&delete c.selected_nodes[a.id],c.node_dragged==a&&(c.node_dragged=
|
||||
null);b=this._nodes.indexOf(a);-1!=b&&this._nodes.splice(b,1);delete this._nodes_by_id[a.id];if(this.onNodeRemoved)this.onNodeRemoved(a);this.setDirtyCanvas(!0,!0);this.change();this.updateExecutionOrder()}};LGraph.prototype.getNodeById=function(a){return null==a?null:this._nodes_by_id[a]};LGraph.prototype.findNodesByType=function(a){var b=[],c;for(c in this._nodes)this._nodes[c].type==a&&b.push(this._nodes[c]);return b};
|
||||
@@ -52,17 +52,18 @@ LGraphNode.prototype.getConnectionPos=function(a,b){return this.flags.collapsed?
|
||||
a?[this.pos[0],this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]:[this.pos[0]+this.size[0]+1,this.pos[1]+10+b*LiteGraph.NODE_SLOT_HEIGHT]};LGraphNode.prototype.alignToGrid=function(){this.pos[0]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[0]/LiteGraph.CANVAS_GRID_SIZE);this.pos[1]=LiteGraph.CANVAS_GRID_SIZE*Math.round(this.pos[1]/LiteGraph.CANVAS_GRID_SIZE)};
|
||||
LGraphNode.prototype.trace=function(a){this.console||(this.console=[]);this.console.push(a);this.console.length>LGraphNode.MAX_CONSOLE&&this.console.shift();this.graph.onNodeTrace(this,a)};LGraphNode.prototype.setDirtyCanvas=function(a,b){this.graph&&this.graph.sendActionToCanvas("setDirty",[a,b])};LGraphNode.prototype.loadImage=function(a){var b=new Image;b.src=LiteGraph.node_images_path+a;b.ready=!1;var c=this;b.onload=function(){this.ready=!0;c.setDirtyCanvas(!0)};return b};
|
||||
LGraphNode.prototype.executeAction=function(a){if(""==a)return!1;if(-1!=a.indexOf(";")||-1!=a.indexOf("}"))return this.trace("Error: Action contains unsafe characters"),!1;var b=a.split("(")[0];if("function"!=typeof this[b])return this.trace("Error: Action not found on node: "+b),!1;try{b=eval,eval=null,(new Function("with(this) { "+a+"}")).call(this),eval=b}catch(c){return this.trace("Error executing action {"+a+"} :"+c),!1}return!0};
|
||||
LGraphNode.prototype.captureInput=function(a){if(this.graph&&this.graph.list_of_graphcanvas){var b=this.graph.list_of_graphcanvas,c;for(c in b){var d=b[c];if(a||d.node_capturing_input==this)d.node_capturing_input=a?this:null,this.graph.debug&&console.log(this.title+": Capturing input "+(a?"ON":"OFF"))}}};LGraphNode.prototype.collapse=function(){this.flags.collapsed=this.flags.collapsed?!1:!0;this.setDirtyCanvas(!0,!0)};
|
||||
LGraphNode.prototype.pin=function(a){this.flags.pinned=void 0===a?!this.flags.pinned:a};LGraphNode.prototype.localToScreen=function(a,b,c){return[(a+this.pos[0])*c.scale+c.offset[0],(b+this.pos[1])*c.scale+c.offset[1]]};function LGraphCanvas(a,b,c){"string"==typeof a&&(a=document.querySelector(a));if(!a)throw"no canvas found";this.max_zoom=10;this.min_zoom=0.1;b&&b.attachCanvas(this);this.setCanvas(a);this.clear();c||this.startRendering()}LGraphCanvas.link_type_colors={number:"#AAC",node:"#DCA"};
|
||||
LGraphNode.prototype.captureInput=function(a){if(this.graph&&this.graph.list_of_graphcanvas){var b=this.graph.list_of_graphcanvas,c;for(c in b){var d=b[c];if(a||d.node_capturing_input==this)d.node_capturing_input=a?this:null}}};LGraphNode.prototype.collapse=function(){this.flags.collapsed=this.flags.collapsed?!1:!0;this.setDirtyCanvas(!0,!0)};LGraphNode.prototype.pin=function(a){this.flags.pinned=void 0===a?!this.flags.pinned:a};
|
||||
LGraphNode.prototype.localToScreen=function(a,b,c){return[(a+this.pos[0])*c.scale+c.offset[0],(b+this.pos[1])*c.scale+c.offset[1]]};function LGraphCanvas(a,b,c){"string"==typeof a&&(a=document.querySelector(a));if(!a)throw"no canvas found";this.max_zoom=10;this.min_zoom=0.1;b&&b.attachCanvas(this);this.setCanvas(a);this.clear();c||this.startRendering()}LGraphCanvas.link_type_colors={number:"#AAC",node:"#DCA"};
|
||||
LGraphCanvas.prototype.clear=function(){this.fps=this.render_time=this.last_draw_time=this.frame=0;this.scale=1;this.offset=[0,0];this.selected_nodes={};this.connecting_node=this.node_capturing_input=this.node_over=this.node_dragged=null;this.highquality_render=!0;this.editor_alpha=1;this.pause_rendering=!1;this.dirty_bgcanvas=this.dirty_canvas=this.render_shadows=!0;this.dirty_area=null;this.render_only_selected=!0;this.live_mode=!1;this.allow_dragnodes=this.allow_dragcanvas=this.show_info=!0;this.node_in_panel=
|
||||
null;this.last_mouse=[0,0];this.last_mouseclick=0;this.title_text_font="bold 14px Arial";this.inner_text_font="normal 12px Arial";this.render_connections_shadows=!1;this.render_connection_arrows=this.render_curved_connections=this.render_connections_border=!0;this.connections_width=4;if(this.onClear)this.onClear()};LGraphCanvas.prototype.setGraph=function(a){this.graph!=a&&(this.clear(),!a&&this.graph?this.graph.detachCanvas(this):(a.attachCanvas(this),this.setDirty(!0,!0)))};
|
||||
LGraphCanvas.prototype.openSubgraph=function(a){if(!a)throw"graph cannot be null";if(this.graph==a)throw"graph cannot be the same";this.clear();this.graph&&(this._graph_stack||(this._graph_stack=[]),this._graph_stack.push(this.graph));a.attachCanvas(this);this.setDirty(!0,!0)};LGraphCanvas.prototype.closeSubgraph=function(){this._graph_stack&&0!=this._graph_stack.length&&(this._graph_stack.pop().attachCanvas(this),this.setDirty(!0,!0))};
|
||||
LGraphCanvas.prototype.setCanvas=function(a){var b=this;"string"==typeof a&&(a=document.getElementById(a));if(null==a)throw"Error creating LiteGraph canvas: Canvas not found";if(a!=this.canvas){this.canvas=a;a.className+=" lgraphcanvas";a.data=this;this.bgcanvas=null;this.bgcanvas||(this.bgcanvas=document.createElement("canvas"),this.bgcanvas.width=this.canvas.width,this.bgcanvas.height=this.canvas.height);if(null==a.getContext)throw"This browser doesnt support Canvas";null==(this.ctx=a.getContext("2d"))&&
|
||||
(console.warn("This canvas seems to be WebGL, enabling WebGL renderer"),this.enableWebGL());this._mousemove_callback=this.processMouseMove.bind(this);this._mouseup_callback=this.processMouseUp.bind(this);a.addEventListener("mousedown",this.processMouseDown.bind(this),!0);a.addEventListener("mousemove",this._mousemove_callback);a.addEventListener("contextmenu",function(a){a.preventDefault();return!1});a.addEventListener("mousewheel",this.processMouseWheel.bind(this),!1);a.addEventListener("DOMMouseScroll",
|
||||
this.processMouseWheel.bind(this),!1);a.addEventListener("touchstart",this.touchHandler,!0);a.addEventListener("touchmove",this.touchHandler,!0);a.addEventListener("touchend",this.touchHandler,!0);a.addEventListener("touchcancel",this.touchHandler,!0);a.addEventListener("keydown",function(a){b.processKeyDown(a)});a.addEventListener("keyup",function(a){b.processKeyUp(a)});a.ondragover=function(){console.log("hover");return!1};a.ondragend=function(){console.log("out");return!1};a.ondrop=function(a){a.preventDefault();
|
||||
b.adjustMouseEvent(a);var d=[a.canvasX,a.canvasY],e=b.graph.getNodeOnPos(d[0],d[1]);if(e&&e.onDropFile){var f=a.dataTransfer.files[0],g=f.name;LGraphCanvas.getFileExtension(g);a=new FileReader;a.onload=function(a){e.onDropFile(a.target.result,g,f)};d=f.type.split("/")[0];"text"==d?a.readAsText(f):"image"==d?a.readAsDataURL(f):a.readAsArrayBuffer(f);return!1}}}};LGraphCanvas.getFileExtension=function(a){var b=a.indexOf("?");-1!=b&&(a=a.substr(0,b));b=a.lastIndexOf(".");return-1==b?"":a.substr(b+1).toLowerCase()};
|
||||
LGraphCanvas.prototype.enableWebGL=function(){if(void 0===typeof GL)throw"litegl.js must be included to use a WebGL canvas";if(void 0===typeof enableWebGLCanvas)throw"webglCanvas.js must be included to use this feature";this.gl=this.ctx=enableWebGLCanvas(this.canvas);this.ctx.webgl=!0;this.bgcanvas=this.canvas;this.bgctx=this.gl};LGraphCanvas.prototype.setDirty=function(a,b){a&&(this.dirty_canvas=!0);b&&(this.dirty_bgcanvas=!0)};
|
||||
LGraphCanvas.prototype.getCanvasWindow=function(){var a=this.canvas.ownerDocument;return a.defaultView||a.parentWindow};LGraphCanvas.prototype.startRendering=function(){function a(){this.pause_rendering||this.draw();var b=this.getCanvasWindow();this.is_rendering&&b.requestAnimationFrame(a.bind(this))}this.is_rendering||(this.is_rendering=!0,a.call(this))};LGraphCanvas.prototype.stopRendering=function(){this.is_rendering=!1};
|
||||
b.adjustMouseEvent(a);var d=[a.canvasX,a.canvasY],e=b.graph.getNodeOnPos(d[0],d[1]);if(e&&e.onDropFile){var f=a.dataTransfer.files[0],g=f.name;LGraphCanvas.getFileExtension(g);a=new FileReader;a.onload=function(a){e.onDropFile(a.target.result,g,f)};d=f.type.split("/")[0];"text"==d||""==d?a.readAsText(f):"image"==d?a.readAsDataURL(f):a.readAsArrayBuffer(f);return!1}}}};
|
||||
LGraphCanvas.getFileExtension=function(a){var b=a.indexOf("?");-1!=b&&(a=a.substr(0,b));b=a.lastIndexOf(".");return-1==b?"":a.substr(b+1).toLowerCase()};LGraphCanvas.prototype.enableWebGL=function(){if(void 0===typeof GL)throw"litegl.js must be included to use a WebGL canvas";if(void 0===typeof enableWebGLCanvas)throw"webglCanvas.js must be included to use this feature";this.gl=this.ctx=enableWebGLCanvas(this.canvas);this.ctx.webgl=!0;this.bgcanvas=this.canvas;this.bgctx=this.gl};
|
||||
LGraphCanvas.prototype.setDirty=function(a,b){a&&(this.dirty_canvas=!0);b&&(this.dirty_bgcanvas=!0)};LGraphCanvas.prototype.getCanvasWindow=function(){var a=this.canvas.ownerDocument;return a.defaultView||a.parentWindow};LGraphCanvas.prototype.startRendering=function(){function a(){this.pause_rendering||this.draw();var b=this.getCanvasWindow();this.is_rendering&&b.requestAnimationFrame(a.bind(this))}this.is_rendering||(this.is_rendering=!0,a.call(this))};
|
||||
LGraphCanvas.prototype.stopRendering=function(){this.is_rendering=!1};
|
||||
LGraphCanvas.prototype.processMouseDown=function(a){if(this.graph){this.adjustMouseEvent(a);var b=this.getCanvasWindow();this.canvas.removeEventListener("mousemove",this._mousemove_callback);b.document.addEventListener("mousemove",this._mousemove_callback,!0);b.document.addEventListener("mouseup",this._mouseup_callback,!0);var c=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes);if(1==a.which){if(!a.shiftKey){var d=[],e;for(e in this.selected_nodes)this.selected_nodes[e]!=c&&d.push(this.selected_nodes[e]);
|
||||
for(e in d)this.processNodeDeselected(d[e])}d=!1;if(c){this.live_mode||c.flags.pinned||this.bringToFront(c);var f=!1;if(!this.connecting_node&&!c.flags.collapsed&&!this.live_mode){if(c.outputs){e=0;for(var g=c.outputs.length;e<g;++e){var h=c.outputs[e],l=c.getConnectionPos(!1,e);if(isInsideRectangle(a.canvasX,a.canvasY,l[0]-10,l[1]-5,20,10)){this.connecting_node=c;this.connecting_output=h;this.connecting_pos=c.getConnectionPos(!1,e);this.connecting_slot=e;f=!0;break}}}if(c.inputs)for(e=0,g=c.inputs.length;e<
|
||||
g;++e)h=c.inputs[e],l=c.getConnectionPos(!0,e),isInsideRectangle(a.canvasX,a.canvasY,l[0]-10,l[1]-5,20,10)&&h.link&&(c.disconnectInput(e),f=this.dirty_bgcanvas=!0);!f&&isInsideRectangle(a.canvasX,a.canvasY,c.pos[0]+c.size[0]-5,c.pos[1]+c.size[1]-5,5,5)&&(this.resizing_node=c,this.canvas.style.cursor="se-resize",f=!0)}!f&&isInsideRectangle(a.canvasX,a.canvasY,c.pos[0],c.pos[1]-LiteGraph.NODE_TITLE_HEIGHT,LiteGraph.NODE_TITLE_HEIGHT,LiteGraph.NODE_TITLE_HEIGHT)&&(c.collapse(),f=!0);if(!f){e=!1;if(300>
|
||||
@@ -72,7 +73,7 @@ LGraphCanvas.prototype.processMouseMove=function(a){if(this.graph){this.adjustMo
|
||||
b!=this.graph._nodes[d]){this.graph._nodes[d].mouseOver=!1;if(this.node_over&&this.node_over.onMouseLeave)this.node_over.onMouseLeave(a);this.node_over=null;this.dirty_canvas=!0}if(b){if(!b.mouseOver&&(b.mouseOver=!0,this.node_over=b,this.dirty_canvas=!0,b.onMouseEnter))b.onMouseEnter(a);if(b.onMouseMove)b.onMouseMove(a);if(this.connecting_node){var e=this._highlight_input||[0,0],f=this.isOverNodeInput(b,a.canvasX,a.canvasY,e);-1!=f&&b.inputs[f]?(f=b.inputs[f].type,f!=this.connecting_output.type&&
|
||||
f&&this.connecting_output.type||(this._highlight_input=e)):this._highlight_input=null}isInsideRectangle(a.canvasX,a.canvasY,b.pos[0]+b.size[0]-5,b.pos[1]+b.size[1]-5,5,5)?this.canvas.style.cursor="se-resize":this.canvas.style.cursor=null}else this.canvas.style.cursor=null;if(this.node_capturing_input&&this.node_capturing_input!=b&&this.node_capturing_input.onMouseMove)this.node_capturing_input.onMouseMove(a);if(this.node_dragged&&!this.live_mode){for(d in this.selected_nodes)b=this.selected_nodes[d],
|
||||
b.pos[0]+=c[0]/this.scale,b.pos[1]+=c[1]/this.scale;this.dirty_bgcanvas=this.dirty_canvas=!0}this.resizing_node&&!this.live_mode&&(this.resizing_node.size[0]+=c[0]/this.scale,this.resizing_node.size[1]+=c[1]/this.scale,c=Math.max(this.resizing_node.inputs?this.resizing_node.inputs.length:0,this.resizing_node.outputs?this.resizing_node.outputs.length:0),this.resizing_node.size[1]<c*LiteGraph.NODE_SLOT_HEIGHT+4&&(this.resizing_node.size[1]=c*LiteGraph.NODE_SLOT_HEIGHT+4),this.resizing_node.size[0]<
|
||||
LiteGraph.NODE_MIN_WIDTH&&(this.resizing_node.size[0]=LiteGraph.NODE_MIN_WIDTH),this.canvas.style.cursor="se-resize",this.dirty_bgcanvas=this.dirty_canvas=!0)}a.preventDefault();a.stopPropagation();return!1}};
|
||||
LiteGraph.NODE_MIN_WIDTH&&(this.resizing_node.size[0]=LiteGraph.NODE_MIN_WIDTH),this.canvas.style.cursor="se-resize",this.dirty_bgcanvas=this.dirty_canvas=!0)}a.preventDefault();return!1}};
|
||||
LGraphCanvas.prototype.processMouseUp=function(a){if(this.graph){var b=this.getCanvasWindow().document;b.removeEventListener("mousemove",this._mousemove_callback,!0);this.canvas.addEventListener("mousemove",this._mousemove_callback,!0);b.removeEventListener("mouseup",this._mouseup_callback,!0);this.adjustMouseEvent(a);if(1==a.which)if(this.connecting_node){this.dirty_bgcanvas=this.dirty_canvas=!0;if(b=this.graph.getNodeOnPos(a.canvasX,a.canvasY,this.visible_nodes))if("node"==this.connecting_output.type)this.connecting_node.connect(this.connecting_slot,
|
||||
b,-1);else{var c=this.isOverNodeInput(b,a.canvasX,a.canvasY);-1!=c?this.connecting_node.connect(this.connecting_slot,b,c):(c=b.getInputInfo(0))&&!c.link&&c.type==this.connecting_output.type&&this.connecting_node.connect(this.connecting_slot,b,0)}this.connecting_node=this.connecting_pos=this.connecting_output=null;this.connecting_slot=-1}else if(this.resizing_node)this.dirty_bgcanvas=this.dirty_canvas=!0,this.resizing_node=null;else if(this.node_dragged)this.dirty_bgcanvas=this.dirty_canvas=!0,this.node_dragged.pos[0]=
|
||||
Math.round(this.node_dragged.pos[0]),this.node_dragged.pos[1]=Math.round(this.node_dragged.pos[1]),this.graph.config.align_to_grid&&this.node_dragged.alignToGrid(),this.node_dragged=null;else{this.dirty_canvas=!0;this.dragging_canvas=!1;if(this.node_over&&this.node_over.onMouseUp)this.node_over.onMouseUp(a);if(this.node_capturing_input&&this.node_capturing_input.onMouseUp)this.node_capturing_input.onMouseUp(a)}else 2==a.which?(this.dirty_canvas=!0,this.dragging_canvas=!1):3==a.which&&(this.dirty_canvas=
|
||||
@@ -183,55 +184,60 @@ a){var b=this.getInputData(1);null!=b&&(a=quat.multiply(quat.create(),a,b),this.
|
||||
(function(){function a(){this.inputs=[];this.addOutput("frame","image");this.properties={url:""}}function b(){this.addInput("f","number");this.addOutput("Color","color");this.properties={colorA:"#444444",colorB:"#44AAFF",colorC:"#44FFAA",colorD:"#FFFFFF"}}function c(){this.addInput("","image");this.size=[200,200]}function d(){this.addInputs([["img1","image"],["img2","image"],["fade","number"]]);this.addInput("","image");this.properties={fade:0.5,width:512,height:512}}function e(){this.addInput("",
|
||||
"image");this.addOutputs("","image");this.properties={width:256,height:256,x:0,y:0,scale:1};this.size=[50,20]}function f(){this.addInput("t","number");this.addOutputs([["frame","image"],["t","number"],["d","number"]]);this.properties={url:""}}function g(){this.addOutput("Webcam","image");this.properties={}}a.title="Image";a.desc="Image loader";a.widgets=[{name:"load",text:"Load",type:"button"}];a.prototype.onAdded=function(){""!=this.properties.url&&null==this.img&&this.loadImage(this.properties.url)};
|
||||
a.prototype.onDrawBackground=function(a){this.img&&5<this.size[0]&&5<this.size[1]&&a.drawImage(this.img,0,0,this.size[0],this.size[1])};a.prototype.onExecute=function(){this.img||(this.boxcolor="#000");this.img&&this.img.width?this.setOutputData(0,this.img):this.setOutputData(0,null);this.img&&this.img.dirty&&(this.img.dirty=!1)};a.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"url"==a&&""!=b&&this.loadImage(b);return!0};a.prototype.onDropFile=function(a,b){var c=new Image;c.src=a;
|
||||
this.img=c};a.prototype.loadImage=function(a){if(""==a)this.img=null;else{this.trace("loading image...");this.img=document.createElement("img");a=name;"http://"==a.substr(0,7)&&LiteGraph.proxy&&(a=LiteGraph.proxy+a.substr(7));this.img.src=a;this.boxcolor="#F95";var b=this;this.img.onload=function(){b.trace("Image loaded, size: "+b.img.width+"x"+b.img.height);this.dirty=!0;b.boxcolor="#9F9";b.setDirtyCanvas(!0)}}};a.prototype.onWidget=function(a,b){"load"==b.name&&this.loadImage(this.properties.url)};
|
||||
LiteGraph.registerNodeType("graphics/image",a);b.title="Palette";b.desc="Generates a color";b.prototype.onExecute=function(){var a=[];null!=this.properties.colorA&&a.push(hex2num(this.properties.colorA));null!=this.properties.colorB&&a.push(hex2num(this.properties.colorB));null!=this.properties.colorC&&a.push(hex2num(this.properties.colorC));null!=this.properties.colorD&&a.push(hex2num(this.properties.colorD));var b=this.getInputData(0);null==b&&(b=0.5);1<b?b=1:0>b&&(b=0);if(0!=a.length){var c=[0,
|
||||
0,0];if(0==b)c=a[0];else if(1==b)c=a[a.length-1];else{var d=(a.length-1)*b,b=a[Math.floor(d)],a=a[Math.floor(d)+1],d=d-Math.floor(d);c[0]=b[0]*(1-d)+a[0]*d;c[1]=b[1]*(1-d)+a[1]*d;c[2]=b[2]*(1-d)+a[2]*d}for(var e in c)c[e]/=255;this.boxcolor=colorToString(c);this.setOutputData(0,c)}};LiteGraph.registerNodeType("color/palette",b);c.title="Frame";c.desc="Frame viewerew";c.widgets=[{name:"resize",text:"Resize box",type:"button"},{name:"view",text:"View Image",type:"button"}];c.prototype.onDrawBackground=
|
||||
function(a){this.frame&&a.drawImage(this.frame,0,0,this.size[0],this.size[1])};c.prototype.onExecute=function(){this.frame=this.getInputData(0);this.setDirtyCanvas(!0)};c.prototype.onWidget=function(a,b){if("resize"==b.name&&this.frame){var c=this.frame.width,d=this.frame.height;c||null==this.frame.videoWidth||(c=this.frame.videoWidth,d=this.frame.videoHeight);c&&d&&(this.size=[c,d]);this.setDirtyCanvas(!0,!0)}else"view"==b.name&&this.show()};c.prototype.show=function(){showElement&&this.frame&&showElement(this.frame)};
|
||||
LiteGraph.registerNodeType("graphics/frame",c);d.title="Image fade";d.desc="Fades between images";d.widgets=[{name:"resizeA",text:"Resize to A",type:"button"},{name:"resizeB",text:"Resize to B",type:"button"}];d.prototype.onAdded=function(){this.createCanvas();var a=this.canvas.getContext("2d");a.fillStyle="#000";a.fillRect(0,0,this.properties.width,this.properties.height)};d.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=
|
||||
this.properties.height};d.prototype.onExecute=function(){var a=this.canvas.getContext("2d");this.canvas.width=this.canvas.width;var b=this.getInputData(0);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);b=this.getInputData(2);null==b?b=this.properties.fade:this.properties.fade=b;a.globalAlpha=b;b=this.getInputData(1);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);a.globalAlpha=1;this.setOutputData(0,this.canvas);this.setDirtyCanvas(!0)};LiteGraph.registerNodeType("graphics/imagefade",
|
||||
d);e.title="Crop";e.desc="Crop Image";e.prototype.onAdded=function(){this.createCanvas()};e.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height};e.prototype.onExecute=function(){var a=this.getInputData(0);a&&(a.width?(this.canvas.getContext("2d").drawImage(a,-this.properties.x,-this.properties.y,a.width*this.properties.scale,a.height*this.properties.scale),this.setOutputData(0,this.canvas)):
|
||||
this.setOutputData(0,null))};e.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"scale"==a?(this.properties[a]=parseFloat(b),0==this.properties[a]&&(this.trace("Error in scale"),this.properties[a]=1)):this.properties[a]=parseInt(b);this.createCanvas();return!0};LiteGraph.registerNodeType("graphics/cropImage",d);f.title="Video";f.desc="Video playback";f.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"}];f.prototype.onExecute=function(){if(this.properties.url&&(this.properties.url!=this._video_url&&this.loadVideo(this.properties.url),this._video&&0!=this._video.width)){var a=this.getInputData(0);a&&0<=a&&1>=a&&(this._video.currentTime=a*this._video.duration,this._video.pause());this._video.dirty=!0;this.setOutputData(0,this._video);this.setOutputData(1,this._video.currentTime);this.setOutputData(2,this._video.duration);this.setDirtyCanvas(!0)}};f.prototype.onStart=
|
||||
function(){this.play()};f.prototype.onStop=function(){this.stop()};f.prototype.loadVideo=function(a){this._video_url=a;this._video=document.createElement("video");this._video.src=a;this._video.type="type=video/mp4";this._video.muted=!0;this._video.autoplay=!0;var b=this;this._video.addEventListener("loadedmetadata",function(a){b.trace("Duration: "+this.duration+" seconds");b.trace("Size: "+this.videoWidth+","+this.videoHeight);b.setDirtyCanvas(!0);this.width=this.videoWidth;this.height=this.videoHeight});
|
||||
this._video.addEventListener("progress",function(a){});this._video.addEventListener("error",function(a){console.log("Error loading video: "+this.src);b.trace("Error loading video: "+this.src);if(this.error)switch(this.error.code){case this.error.MEDIA_ERR_ABORTED:b.trace("You stopped the video.");break;case this.error.MEDIA_ERR_NETWORK:b.trace("Network error - please try again later.");break;case this.error.MEDIA_ERR_DECODE:b.trace("Video is broken..");break;case this.error.MEDIA_ERR_SRC_NOT_SUPPORTED:b.trace("Sorry, your browser can't play this video.")}});
|
||||
this.img=c};a.prototype.loadImage=function(a){if(""==a)this.img=null;else{this.img=document.createElement("img");a=name;"http://"==a.substr(0,7)&&LiteGraph.proxy&&(a=LiteGraph.proxy+a.substr(7));this.img.src=a;this.boxcolor="#F95";var b=this;this.img.onload=function(){b.trace("Image loaded, size: "+b.img.width+"x"+b.img.height);this.dirty=!0;b.boxcolor="#9F9";b.setDirtyCanvas(!0)}}};a.prototype.onWidget=function(a,b){"load"==b.name&&this.loadImage(this.properties.url)};LiteGraph.registerNodeType("graphics/image",
|
||||
a);b.title="Palette";b.desc="Generates a color";b.prototype.onExecute=function(){var a=[];null!=this.properties.colorA&&a.push(hex2num(this.properties.colorA));null!=this.properties.colorB&&a.push(hex2num(this.properties.colorB));null!=this.properties.colorC&&a.push(hex2num(this.properties.colorC));null!=this.properties.colorD&&a.push(hex2num(this.properties.colorD));var b=this.getInputData(0);null==b&&(b=0.5);1<b?b=1:0>b&&(b=0);if(0!=a.length){var c=[0,0,0];if(0==b)c=a[0];else if(1==b)c=a[a.length-
|
||||
1];else{var d=(a.length-1)*b,b=a[Math.floor(d)],a=a[Math.floor(d)+1],d=d-Math.floor(d);c[0]=b[0]*(1-d)+a[0]*d;c[1]=b[1]*(1-d)+a[1]*d;c[2]=b[2]*(1-d)+a[2]*d}for(var e in c)c[e]/=255;this.boxcolor=colorToString(c);this.setOutputData(0,c)}};LiteGraph.registerNodeType("color/palette",b);c.title="Frame";c.desc="Frame viewerew";c.widgets=[{name:"resize",text:"Resize box",type:"button"},{name:"view",text:"View Image",type:"button"}];c.prototype.onDrawBackground=function(a){this.frame&&a.drawImage(this.frame,
|
||||
0,0,this.size[0],this.size[1])};c.prototype.onExecute=function(){this.frame=this.getInputData(0);this.setDirtyCanvas(!0)};c.prototype.onWidget=function(a,b){if("resize"==b.name&&this.frame){var c=this.frame.width,d=this.frame.height;c||null==this.frame.videoWidth||(c=this.frame.videoWidth,d=this.frame.videoHeight);c&&d&&(this.size=[c,d]);this.setDirtyCanvas(!0,!0)}else"view"==b.name&&this.show()};c.prototype.show=function(){showElement&&this.frame&&showElement(this.frame)};LiteGraph.registerNodeType("graphics/frame",
|
||||
c);d.title="Image fade";d.desc="Fades between images";d.widgets=[{name:"resizeA",text:"Resize to A",type:"button"},{name:"resizeB",text:"Resize to B",type:"button"}];d.prototype.onAdded=function(){this.createCanvas();var a=this.canvas.getContext("2d");a.fillStyle="#000";a.fillRect(0,0,this.properties.width,this.properties.height)};d.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height};d.prototype.onExecute=
|
||||
function(){var a=this.canvas.getContext("2d");this.canvas.width=this.canvas.width;var b=this.getInputData(0);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);b=this.getInputData(2);null==b?b=this.properties.fade:this.properties.fade=b;a.globalAlpha=b;b=this.getInputData(1);null!=b&&a.drawImage(b,0,0,this.canvas.width,this.canvas.height);a.globalAlpha=1;this.setOutputData(0,this.canvas);this.setDirtyCanvas(!0)};LiteGraph.registerNodeType("graphics/imagefade",d);e.title="Crop";e.desc=
|
||||
"Crop Image";e.prototype.onAdded=function(){this.createCanvas()};e.prototype.createCanvas=function(){this.canvas=document.createElement("canvas");this.canvas.width=this.properties.width;this.canvas.height=this.properties.height};e.prototype.onExecute=function(){var a=this.getInputData(0);a&&(a.width?(this.canvas.getContext("2d").drawImage(a,-this.properties.x,-this.properties.y,a.width*this.properties.scale,a.height*this.properties.scale),this.setOutputData(0,this.canvas)):this.setOutputData(0,null))};
|
||||
e.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"scale"==a?(this.properties[a]=parseFloat(b),0==this.properties[a]&&(this.trace("Error in scale"),this.properties[a]=1)):this.properties[a]=parseInt(b);this.createCanvas();return!0};LiteGraph.registerNodeType("graphics/cropImage",d);f.title="Video";f.desc="Video playback";f.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"}];f.prototype.onExecute=function(){if(this.properties.url&&(this.properties.url!=this._video_url&&this.loadVideo(this.properties.url),this._video&&0!=this._video.width)){var a=this.getInputData(0);a&&0<=a&&1>=a&&(this._video.currentTime=a*this._video.duration,this._video.pause());this._video.dirty=!0;this.setOutputData(0,this._video);this.setOutputData(1,this._video.currentTime);this.setOutputData(2,this._video.duration);this.setDirtyCanvas(!0)}};f.prototype.onStart=function(){this.play()};
|
||||
f.prototype.onStop=function(){this.stop()};f.prototype.loadVideo=function(a){this._video_url=a;this._video=document.createElement("video");this._video.src=a;this._video.type="type=video/mp4";this._video.muted=!0;this._video.autoplay=!0;var b=this;this._video.addEventListener("loadedmetadata",function(a){b.trace("Duration: "+this.duration+" seconds");b.trace("Size: "+this.videoWidth+","+this.videoHeight);b.setDirtyCanvas(!0);this.width=this.videoWidth;this.height=this.videoHeight});this._video.addEventListener("progress",
|
||||
function(a){});this._video.addEventListener("error",function(a){console.log("Error loading video: "+this.src);b.trace("Error loading video: "+this.src);if(this.error)switch(this.error.code){case this.error.MEDIA_ERR_ABORTED:b.trace("You stopped the video.");break;case this.error.MEDIA_ERR_NETWORK:b.trace("Network error - please try again later.");break;case this.error.MEDIA_ERR_DECODE:b.trace("Video is broken..");break;case this.error.MEDIA_ERR_SRC_NOT_SUPPORTED:b.trace("Sorry, your browser can't play this video.")}});
|
||||
this._video.addEventListener("ended",function(a){b.trace("Ended.");this.play()})};f.prototype.onPropertyChange=function(a,b){this.properties[a]=b;"url"==a&&""!=b&&this.loadVideo(b);return!0};f.prototype.play=function(){this._video&&this._video.play()};f.prototype.playPause=function(){this._video&&(this._video.paused?this.play():this.pause())};f.prototype.stop=function(){this._video&&(this._video.pause(),this._video.currentTime=0)};f.prototype.pause=function(){this._video&&(this.trace("Video paused"),
|
||||
this._video.pause())};f.prototype.onWidget=function(a,b){};LiteGraph.registerNodeType("graphics/video",f);g.title="Webcam";g.desc="Webcam image";g.prototype.openStream=function(){function a(c){trace("Webcam rejected",c);b._webcam_stream=!1;b.box_color="red"}navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;window.URL=window.URL||window.webkitURL;if(navigator.getUserMedia){this._waiting_confirmation=!0;navigator.getUserMedia({video:!0},
|
||||
this.streamReady.bind(this),a);var b=this}};g.prototype.streamReady=function(a){this._webcam_stream=a;var b=this._video;b||(b=document.createElement("video"),b.autoplay=!0,b.src=window.URL.createObjectURL(a),this._video=b,b.onloadedmetadata=function(a){console.log(a)})};g.prototype.onExecute=function(){null!=this._webcam_stream||this._waiting_confirmation||this.openStream();this._video&&this._video.videoWidth&&(this._video.width=this._video.videoWidth,this._video.hieght=this._video.videoHeight,this.setOutputData(0,
|
||||
this._video))};LiteGraph.registerNodeType("graphics/webcam",g)})();
|
||||
this._video.pause())};f.prototype.onWidget=function(a,b){};LiteGraph.registerNodeType("graphics/video",f);g.title="Webcam";g.desc="Webcam image";g.prototype.openStream=function(){function a(c){console.log("Webcam rejected",c);b._webcam_stream=!1;b.box_color="red"}navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;window.URL=window.URL||window.webkitURL;if(navigator.getUserMedia){this._waiting_confirmation=!0;navigator.getUserMedia({video:!0},
|
||||
this.streamReady.bind(this),a);var b=this}};g.prototype.onRemoved=function(){this._webcam_stream&&(this._webcam_stream.stop(),this._video=this._webcam_stream=null)};g.prototype.streamReady=function(a){this._webcam_stream=a;var b=this._video;b||(b=document.createElement("video"),b.autoplay=!0,b.src=window.URL.createObjectURL(a),this._video=b,b.onloadedmetadata=function(a){console.log(a)})};g.prototype.onExecute=function(){null!=this._webcam_stream||this._waiting_confirmation||this.openStream();this._video&&
|
||||
this._video.videoWidth&&(this._video.width=this._video.videoWidth,this._video.height=this._video.videoHeight,this.setOutputData(0,this._video))};g.prototype.getExtraMenuOptions=function(a){var b=this;return[{content:b.properties.show?"Hide Frame":"Show Frame",callback:function(){b.properties.show=!b.properties.show}}]};g.prototype.onDrawBackground=function(a){this.flags.collapsed||20>=this.size[1]||!this.properties.show||!this._video||(a.save(),a.drawImage(this._video,0,0,this.size[0],this.size[1]),
|
||||
a.restore())};LiteGraph.registerNodeType("graphics/webcam",g)})();
|
||||
if("undefined"!=typeof LiteGraph){var LGraphTexture=function(){this.addOutput("Texture","Texture");this.properties={name:""};this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphTexture.title="Texture";LGraphTexture.desc="Texture";LGraphTexture.widgets_info={name:{widget:"texture"}};LGraphTexture.textures_container={};LGraphTexture.loadTextureCallback=null;LGraphTexture.image_preview_size=256;LGraphTexture.PASS_THROUGH=1;LGraphTexture.COPY=2;LGraphTexture.LOW=3;LGraphTexture.HIGH=
|
||||
4;LGraphTexture.REUSE=5;LGraphTexture.DEFAULT=2;LGraphTexture.MODE_VALUES={"pass through":LGraphTexture.PASS_THROUGH,copy:LGraphTexture.COPY,low:LGraphTexture.LOW,high:LGraphTexture.HIGH,reuse:LGraphTexture.REUSE,"default":LGraphTexture.DEFAULT};LGraphTexture.getTexture=function(a){var b=LGraphTexture.textures_container||gl.textures;if(!b)throw"Cannot load texture, container of textures not found";var c=b[a];if(!c&&a&&":"!=a[0]){if(LGraphTexture.loadTextureCallback)return(b=LGraphTexture.loadTextureCallback)&&
|
||||
b(a),null;c=a;"http://"==c.substr(0,7)&&LiteGraph.proxy&&(c=LiteGraph.proxy+c.substr(7));c=b[a]=GL.Texture.fromURL(c,{})}return c};LGraphTexture.getTargetTexture=function(a,b,c){if(!a)throw"LGraphTexture.getTargetTexture expects a reference texture";var d=null;switch(c){case LGraphTexture.LOW:d=gl.UNSIGNED_BYTE;break;case LGraphTexture.HIGH:d=gl.HIGH_PRECISION_FORMAT;break;case LGraphTexture.REUSE:return a;default:d=a?a.type:gl.UNSIGNED_BYTE}b&&b.width==a.width&&b.height==a.height&&b.type==d||(b=
|
||||
new GL.Texture(a.width,a.height,{type:d,format:gl.RGBA,filter:gl.LINEAR}));return b};LGraphTexture.getNoiseTexture=function(){if(this._noise_texture)return this._noise_texture;for(var a=new Uint8Array(1048576),b=0;1048576>b;++b)a[b]=255*Math.random();return this._noise_texture=a=GL.Texture.fromMemory(512,512,a,{format:gl.RGBA,wrap:gl.REPEAT,filter:gl.NEAREST})};LGraphTexture.prototype.onDropFile=function(a,b,c){if(a){var d=null;"string"==typeof a?d=GL.Texture.fromURL(a):-1!=b.toLowerCase().indexOf(".dds")?
|
||||
d=GL.Texture.fromDDSInMemory(a):(a=new Blob([c]),a=URL.createObjectURL(a),d=GL.Texture.fromURL(a));this._drop_texture=d;this.properties.name=b}else this._drop_texture=null,this.properties.name=""};LGraphTexture.prototype.getExtraMenuOptions=function(a){var b=this;if(this._drop_texture)return[{content:"Clear",callback:function(){b._drop_texture=null;b.properties.name=""}}]};LGraphTexture.prototype.onExecute=function(){if(this._drop_texture)this.setOutputData(0,this._drop_texture);else if(this.properties.name){var a=
|
||||
LGraphTexture.getTexture(this.properties.name);a&&(this._last_tex=a,this.setOutputData(0,a))}};LGraphTexture.prototype.onDrawBackground=function(a){if(!(this.flags.collapsed||20>=this.size[1]))if(this._drop_texture&&a.webgl)a.drawImage(this._drop_texture,0,0,this.size[0],this.size[1]);else{if(this._last_preview_tex!=this._last_tex)if(a.webgl)this._canvas=this._last_tex;else{var b=LGraphTexture.generateLowResTexturePreview(this._last_tex);if(!b)return;this._last_preview_tex=this._last_tex;this._canvas=
|
||||
cloneCanvas(b)}this._canvas&&(a.save(),a.webgl||(a.translate(0,this.size[1]),a.scale(1,-1)),a.drawImage(this._canvas,0,0,this.size[0],this.size[1]),a.restore())}};LGraphTexture.generateLowResTexturePreview=function(a){if(!a)return null;var b=LGraphTexture.image_preview_size,c=a;if(a.width>b||a.height>b)c=this._preview_temp_tex,this._preview_temp_tex||(this._preview_temp_tex=c=new GL.Texture(b,b,{minFilter:gl.NEAREST})),a.copyTo(c);a=this._preview_canvas;a||(this._preview_canvas=a=createCanvas(b,b));
|
||||
c&&c.toCanvas(a);return a};LiteGraph.registerNodeType("texture/texture",LGraphTexture);window.LGraphTexture=LGraphTexture;var LGraphTexturePreview=function(){this.addInput("Texture","Texture");this.properties={flipY:!1};this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphTexturePreview.title="Preview";LGraphTexturePreview.desc="Show a texture in the graph canvas";LGraphTexturePreview.prototype.onDrawBackground=function(a){if(!this.flags.collapsed){var b=this.getInputData(0);
|
||||
if(b){var c=null,c=!b.handle&&a.webgl?b:LGraphTexture.generateLowResTexturePreview(b);a.save();this.properties.flipY&&(a.translate(0,this.size[1]),a.scale(1,-1));a.drawImage(c,0,0,this.size[0],this.size[1]);a.restore()}}};LiteGraph.registerNodeType("texture/preview",LGraphTexturePreview);window.LGraphTexturePreview=LGraphTexturePreview;var LGraphTextureSave=function(){this.addInput("Texture","Texture");this.addOutput("","Texture");this.properties={name:""}};LGraphTextureSave.title="Save";LGraphTextureSave.desc=
|
||||
"Save a texture in the repository";LGraphTextureSave.prototype.onExecute=function(){var a=this.getInputData(0);a&&(this.properties.name&&(LGraphTexture.textures_container[this.properties.name]=a),this.setOutputData(0,a))};LiteGraph.registerNodeType("texture/save",LGraphTextureSave);window.LGraphTextureSave=LGraphTextureSave;var LGraphTextureOperation=function(){this.addInput("Texture","Texture");this.addInput("TextureB","Texture");this.addInput("value","number");this.addOutput("Texture","Texture");
|
||||
this.help="<p>pixelcode must be vec3</p>\t\t\t<p>uvcode must be vec2, is optional</p>\t\t\t<p><strong>uv:</strong> tex. coords</p><p><strong>color:</strong> texture</p><p><strong>colorB:</strong> textureB</p><p><strong>time:</strong> scene time</p><p><strong>value:</strong> input value</p>";this.properties={value:1,uvcode:"",pixelcode:"color + colorB * value",precision:LGraphTexture.DEFAULT}};LGraphTextureOperation.widgets_info={uvcode:{widget:"textarea",height:100},pixelcode:{widget:"textarea",height:100},
|
||||
precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureOperation.title="Operation";LGraphTextureOperation.desc="Texture shader operation";LGraphTextureOperation.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else{var b=this.getInputData(1);if(this.properties.uvcode||this.properties.pixelcode){var c=512,d=512;a?(c=a.width,d=a.height):b&&(c=b.width,d=b.height);this._tex=a||this._tex?LGraphTexture.getTargetTexture(a||
|
||||
this._tex,this._tex,this.properties.precision):new GL.Texture(c,d,{type:this.precision===LGraphTexture.LOW?gl.UNSIGNED_BYTE:gl.HIGH_PRECISION_FORMAT,format:gl.RGBA,filter:gl.LINEAR});var e="";this.properties.uvcode&&(e="uv = "+this.properties.uvcode,-1!=this.properties.uvcode.indexOf(";")&&(e=this.properties.uvcode));var f="";this.properties.pixelcode&&(f="result = "+this.properties.pixelcode,-1!=this.properties.pixelcode.indexOf(";")&&(f=this.properties.pixelcode));var g=this._shader;if(!g||this._shader_code!=
|
||||
e+"|"+f){try{this._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureOperation.pixel_shader,{UV_CODE:e,PIXEL_CODE:f}),this.boxcolor="#00FF00"}catch(h){console.log("Error compiling shader: ",h);this.boxcolor="#FF0000";return}this._shader_code=e+"|"+f;g=this._shader}if(g){this.boxcolor="green";var l=this.getInputData(2);null!=l?this.properties.value=l:l=parseFloat(this.properties.value);var n=this.graph.getTime();this._tex.drawTo(function(){gl.disable(gl.DEPTH_TEST);gl.disable(gl.CULL_FACE);
|
||||
gl.disable(gl.BLEND);a&&a.bind(0);b&&b.bind(1);var e=Mesh.getScreenQuad();g.uniforms({u_texture:0,u_textureB:1,value:l,texSize:[c,d],time:n}).draw(e)});this.setOutputData(0,this._tex)}else this.boxcolor="red"}}};LGraphTextureOperation.pixel_shader="precision highp float;\n\t\t\t\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform vec2 texSize;\n\t\t\tuniform float time;\n\t\t\tuniform float value;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec2 uv = v_coord;\n\t\t\t\tUV_CODE;\n\t\t\t\tvec3 color = texture2D(u_texture, uv).rgb;\n\t\t\t\tvec3 colorB = texture2D(u_textureB, uv).rgb;\n\t\t\t\tvec3 result = color;\n\t\t\t\tfloat alpha = 1.0;\n\t\t\t\tPIXEL_CODE;\n\t\t\t\tgl_FragColor = vec4(result, alpha);\n\t\t\t}\n\t\t\t";
|
||||
LGraphTexture.getTexture(this.properties.name);a&&(this._last_tex=a,this.setOutputData(0,a))}};LGraphTexture.prototype.onResourceRenamed=function(a,b){this.properties.name==a&&(this.properties.name=b)};LGraphTexture.prototype.onDrawBackground=function(a){if(!(this.flags.collapsed||20>=this.size[1]))if(this._drop_texture&&a.webgl)a.drawImage(this._drop_texture,0,0,this.size[0],this.size[1]);else{if(this._last_preview_tex!=this._last_tex)if(a.webgl)this._canvas=this._last_tex;else{var b=LGraphTexture.generateLowResTexturePreview(this._last_tex);
|
||||
if(!b)return;this._last_preview_tex=this._last_tex;this._canvas=cloneCanvas(b)}this._canvas&&(a.save(),a.webgl||(a.translate(0,this.size[1]),a.scale(1,-1)),a.drawImage(this._canvas,0,0,this.size[0],this.size[1]),a.restore())}};LGraphTexture.generateLowResTexturePreview=function(a){if(!a)return null;var b=LGraphTexture.image_preview_size,c=a;if(a.format==gl.DEPTH_COMPONENT)return null;if(a.width>b||a.height>b)c=this._preview_temp_tex,this._preview_temp_tex||(this._preview_temp_tex=c=new GL.Texture(b,
|
||||
b,{minFilter:gl.NEAREST})),a.copyTo(c);a=this._preview_canvas;a||(this._preview_canvas=a=createCanvas(b,b));c&&c.toCanvas(a);return a};LiteGraph.registerNodeType("texture/texture",LGraphTexture);window.LGraphTexture=LGraphTexture;var LGraphTexturePreview=function(){this.addInput("Texture","Texture");this.properties={flipY:!1};this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphTexturePreview.title="Preview";LGraphTexturePreview.desc="Show a texture in the graph canvas";
|
||||
LGraphTexturePreview.prototype.onDrawBackground=function(a){if(!this.flags.collapsed){var b=this.getInputData(0);if(b){var c=null,c=!b.handle&&a.webgl?b:LGraphTexture.generateLowResTexturePreview(b);a.save();this.properties.flipY&&(a.translate(0,this.size[1]),a.scale(1,-1));a.drawImage(c,0,0,this.size[0],this.size[1]);a.restore()}}};LiteGraph.registerNodeType("texture/preview",LGraphTexturePreview);window.LGraphTexturePreview=LGraphTexturePreview;var LGraphTextureSave=function(){this.addInput("Texture",
|
||||
"Texture");this.addOutput("","Texture");this.properties={name:""}};LGraphTextureSave.title="Save";LGraphTextureSave.desc="Save a texture in the repository";LGraphTextureSave.prototype.onExecute=function(){var a=this.getInputData(0);a&&(this.properties.name&&(LGraphTexture.textures_container[this.properties.name]=a),this.setOutputData(0,a))};LiteGraph.registerNodeType("texture/save",LGraphTextureSave);window.LGraphTextureSave=LGraphTextureSave;var LGraphTextureOperation=function(){this.addInput("Texture",
|
||||
"Texture");this.addInput("TextureB","Texture");this.addInput("value","number");this.addOutput("Texture","Texture");this.help="<p>pixelcode must be vec3</p>\t\t\t<p>uvcode must be vec2, is optional</p>\t\t\t<p><strong>uv:</strong> tex. coords</p><p><strong>color:</strong> texture</p><p><strong>colorB:</strong> textureB</p><p><strong>time:</strong> scene time</p><p><strong>value:</strong> input value</p>";this.properties={value:1,uvcode:"",pixelcode:"color + colorB * value",precision:LGraphTexture.DEFAULT}};
|
||||
LGraphTextureOperation.widgets_info={uvcode:{widget:"textarea",height:100},pixelcode:{widget:"textarea",height:100},precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureOperation.title="Operation";LGraphTextureOperation.desc="Texture shader operation";LGraphTextureOperation.prototype.getExtraMenuOptions=function(a){var b=this;return[{content:b.properties.show?"Hide Texture":"Show Texture",callback:function(){b.properties.show=!b.properties.show}}]};LGraphTextureOperation.prototype.onDrawBackground=
|
||||
function(a){this.flags.collapsed||20>=this.size[1]||!this.properties.show||!this._tex||this._tex.gl!=a||(a.save(),a.drawImage(this._tex,0,0,this.size[0],this.size[1]),a.restore())};LGraphTextureOperation.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else{var b=this.getInputData(1);if(this.properties.uvcode||this.properties.pixelcode){var c=512,d=512;a?(c=a.width,d=a.height):b&&(c=b.width,d=b.height);this._tex=
|
||||
a||this._tex?LGraphTexture.getTargetTexture(a||this._tex,this._tex,this.properties.precision):new GL.Texture(c,d,{type:this.precision===LGraphTexture.LOW?gl.UNSIGNED_BYTE:gl.HIGH_PRECISION_FORMAT,format:gl.RGBA,filter:gl.LINEAR});var e="";this.properties.uvcode&&(e="uv = "+this.properties.uvcode,-1!=this.properties.uvcode.indexOf(";")&&(e=this.properties.uvcode));var f="";this.properties.pixelcode&&(f="result = "+this.properties.pixelcode,-1!=this.properties.pixelcode.indexOf(";")&&(f=this.properties.pixelcode));
|
||||
var g=this._shader;if(!g||this._shader_code!=e+"|"+f){try{this._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureOperation.pixel_shader,{UV_CODE:e,PIXEL_CODE:f}),this.boxcolor="#00FF00"}catch(h){console.log("Error compiling shader: ",h);this.boxcolor="#FF0000";return}this._shader_code=e+"|"+f;g=this._shader}if(g){this.boxcolor="green";var l=this.getInputData(2);null!=l?this.properties.value=l:l=parseFloat(this.properties.value);var n=this.graph.getTime();this._tex.drawTo(function(){gl.disable(gl.DEPTH_TEST);
|
||||
gl.disable(gl.CULL_FACE);gl.disable(gl.BLEND);a&&a.bind(0);b&&b.bind(1);var e=Mesh.getScreenQuad();g.uniforms({u_texture:0,u_textureB:1,value:l,texSize:[c,d],time:n}).draw(e)});this.setOutputData(0,this._tex)}else this.boxcolor="red"}}};LGraphTextureOperation.pixel_shader="precision highp float;\n\t\t\t\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform vec2 texSize;\n\t\t\tuniform float time;\n\t\t\tuniform float value;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec2 uv = v_coord;\n\t\t\t\tUV_CODE;\n\t\t\t\tvec3 color = texture2D(u_texture, uv).rgb;\n\t\t\t\tvec3 colorB = texture2D(u_textureB, uv).rgb;\n\t\t\t\tvec3 result = color;\n\t\t\t\tfloat alpha = 1.0;\n\t\t\t\tPIXEL_CODE;\n\t\t\t\tgl_FragColor = vec4(result, alpha);\n\t\t\t}\n\t\t\t";
|
||||
LiteGraph.registerNodeType("texture/operation",LGraphTextureOperation);window.LGraphTextureOperation=LGraphTextureOperation;var LGraphTextureShader=function(){this.addOutput("Texture","Texture");this.properties={code:"",width:512,height:512};this.properties.code="\nvoid main() {\n vec2 uv = coord;\n vec3 color = vec3(0.0);\n//your code here\n\ngl_FragColor = vec4(color, 1.0);\n}\n"};LGraphTextureShader.title="Shader";LGraphTextureShader.desc="Texture shader";LGraphTextureShader.widgets_info={code:{widget:"code"},
|
||||
precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureShader.prototype.onExecute=function(){if(this._shader_code!=this.properties.code)if(this._shader_code=this.properties.code,this._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureShader.pixel_shader+this.properties.code))this.boxcolor="green";else{this.boxcolor="red";return}this._tex&&this._tex.width==this.properties.width&&this._tex.height==this.properties.height||(this._tex=new GL.Texture(this.properties.width,
|
||||
this.properties.height,{format:gl.RGBA,filter:gl.LINEAR}));var a=this._tex,b=this._shader,c=this.graph.getTime();a.drawTo(function(){b.uniforms({texSize:[a.width,a.height],time:c}).draw(Mesh.getScreenQuad())});this.setOutputData(0,this._tex)};LGraphTextureShader.pixel_shader="precision highp float;\n\t\t\t\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform float time;\n\t\t\t";LiteGraph.registerNodeType("texture/shader",LGraphTextureShader);window.LGraphTextureShader=LGraphTextureShader;var LGraphTextureToViewport=
|
||||
function(){this.addInput("Texture","Texture");this.properties={additive:!1,antialiasing:!1,disable_alpha:!1};this.size[0]=130;LGraphTextureToViewport._shader||(LGraphTextureToViewport._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureToViewport.pixel_shader))};LGraphTextureToViewport.title="to Viewport";LGraphTextureToViewport.desc="Texture to viewport";LGraphTextureToViewport.prototype.onExecute=function(){var a=this.getInputData(0);if(a)if(this.properties.disable_alpha?gl.disable(gl.BLEND):
|
||||
(gl.enable(gl.BLEND),this.properties.additive?gl.blendFunc(gl.SRC_ALPHA,gl.ONE):gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA)),gl.disable(gl.DEPTH_TEST),this.properties.antialiasing){gl.getViewport();var b=Mesh.getScreenQuad();a.bind(0);LGraphTextureToViewport._shader.uniforms({u_texture:0,uViewportSize:[a.width,a.height],inverseVP:[1/a.width,1/a.height]}).draw(b)}else a.toViewport()};LGraphTextureToViewport.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 uViewportSize;\n\t\t\tuniform vec2 inverseVP;\n\t\t\t#define FXAA_REDUCE_MIN (1.0/ 128.0)\n\t\t\t#define FXAA_REDUCE_MUL (1.0 / 8.0)\n\t\t\t#define FXAA_SPAN_MAX 8.0\n\t\t\t\n\t\t\t/* from mitsuhiko/webgl-meincraft based on the code on geeks3d.com */\n\t\t\tvec4 applyFXAA(sampler2D tex, vec2 fragCoord)\n\t\t\t{\n\t\t\t\tvec4 color = vec4(0.0);\n\t\t\t\t/*vec2 inverseVP = vec2(1.0 / uViewportSize.x, 1.0 / uViewportSize.y);*/\n\t\t\t\tvec3 rgbNW = texture2D(tex, (fragCoord + vec2(-1.0, -1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbNE = texture2D(tex, (fragCoord + vec2(1.0, -1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbSW = texture2D(tex, (fragCoord + vec2(-1.0, 1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbSE = texture2D(tex, (fragCoord + vec2(1.0, 1.0)) * inverseVP).xyz;\n\t\t\t\tvec3 rgbM = texture2D(tex, fragCoord * inverseVP).xyz;\n\t\t\t\tvec3 luma = vec3(0.299, 0.587, 0.114);\n\t\t\t\tfloat lumaNW = dot(rgbNW, luma);\n\t\t\t\tfloat lumaNE = dot(rgbNE, luma);\n\t\t\t\tfloat lumaSW = dot(rgbSW, luma);\n\t\t\t\tfloat lumaSE = dot(rgbSE, luma);\n\t\t\t\tfloat lumaM = dot(rgbM, luma);\n\t\t\t\tfloat lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));\n\t\t\t\tfloat lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));\n\t\t\t\t\n\t\t\t\tvec2 dir;\n\t\t\t\tdir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));\n\t\t\t\tdir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE));\n\t\t\t\t\n\t\t\t\tfloat dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) * (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);\n\t\t\t\t\n\t\t\t\tfloat rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);\n\t\t\t\tdir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX), max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX), dir * rcpDirMin)) * inverseVP;\n\t\t\t\t\n\t\t\t\tvec3 rgbA = 0.5 * (texture2D(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz + \n\t\t\t\t\ttexture2D(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);\n\t\t\t\tvec3 rgbB = rgbA * 0.5 + 0.25 * (texture2D(tex, fragCoord * inverseVP + dir * -0.5).xyz + \n\t\t\t\t\ttexture2D(tex, fragCoord * inverseVP + dir * 0.5).xyz);\n\t\t\t\t\n\t\t\t\treturn vec4(rgbA,1.0);\n\t\t\t\tfloat lumaB = dot(rgbB, luma);\n\t\t\t\tif ((lumaB < lumaMin) || (lumaB > lumaMax))\n\t\t\t\t\tcolor = vec4(rgbA, 1.0);\n\t\t\t\telse\n\t\t\t\t\tcolor = vec4(rgbB, 1.0);\n\t\t\t\treturn color;\n\t\t\t}\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t gl_FragColor = applyFXAA( u_texture, v_coord * uViewportSize) ;\n\t\t\t}\n\t\t\t";
|
||||
LiteGraph.registerNodeType("texture/toviewport",LGraphTextureToViewport);window.LGraphTextureToViewport=LGraphTextureToViewport;var LGraphTextureCopy=function(){this.addInput("Texture","Texture");this.addOutput("","Texture");this.properties={size:0,generate_mipmaps:!1,precision:LGraphTexture.DEFAULT}};LGraphTextureCopy.title="Copy";LGraphTextureCopy.desc="Copy Texture";LGraphTextureCopy.widgets_info={size:{widget:"combo",values:[0,32,64,128,256,512,1024,2048]},precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};
|
||||
LGraphTextureCopy.prototype.onExecute=function(){var a=this.getInputData(0);if(a){var b=a.width,c=a.height;0!=this.properties.size&&(c=b=this.properties.size);var d=this._temp_texture,e=a.type;this.properties.precision===LGraphTexture.LOW?e=gl.UNSIGNED_BYTE:this.properties.precision===LGraphTexture.HIGH&&(e=gl.HIGH_PRECISION_FORMAT);d&&d.width==b&&d.height==c&&d.type==e||(d=gl.LINEAR,this.properties.generate_mipmaps&&isPowerOfTwo(b)&&isPowerOfTwo(c)&&(d=gl.LINEAR_MIPMAP_LINEAR),this._temp_texture=
|
||||
new GL.Texture(b,c,{type:e,format:gl.RGBA,minFilter:d,magFilter:gl.LINEAR}));a.copyTo(this._temp_texture);this.properties.generate_mipmaps&&(this._temp_texture.bind(0),gl.generateMipmap(this._temp_texture.texture_type),this._temp_texture.unbind(0));this.setOutputData(0,this._temp_texture)}};LiteGraph.registerNodeType("texture/copy",LGraphTextureCopy);window.LGraphTextureCopy=LGraphTextureCopy;var LGraphTextureAverage=function(){this.addInput("Texture","Texture");this.addOutput("","Texture");this.properties=
|
||||
{low_precision:!1}};LGraphTextureAverage.title="Average";LGraphTextureAverage.desc="Compute average of a texture and stores it as a texture";LGraphTextureAverage.prototype.onExecute=function(){var a=this.getInputData(0);if(a){if(!LGraphTextureAverage._shader){LGraphTextureAverage._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureAverage.pixel_shader);for(var b=new Float32Array(32),c=0;32>c;++c)b[c]=Math.random();LGraphTextureAverage._shader.uniforms({u_samples_a:b.subarray(0,16),u_samples_b:b.subarray(16,
|
||||
32)})}b=this._temp_texture;c=this.properties.low_precision?gl.UNSIGNED_BYTE:a.type;b&&b.type==c||(this._temp_texture=new GL.Texture(1,1,{type:c,format:gl.RGBA,filter:gl.NEAREST}));var d=LGraphTextureAverage._shader;this._temp_texture.drawTo(function(){a.toViewport(d,{u_texture:0})});this.setOutputData(0,this._temp_texture)}};LGraphTextureAverage.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tuniform mat4 u_samples_a;\n\t\t\tuniform mat4 u_samples_b;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tvarying vec2 v_coord;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec4 color = vec4(0.0);\n\t\t\t\tfor(int i = 0; i < 4; ++i)\n\t\t\t\t\tfor(int j = 0; j < 4; ++j)\n\t\t\t\t\t{\n\t\t\t\t\t\tcolor += texture2D(u_texture, vec2( u_samples_a[i][j], u_samples_b[i][j] ) );\n\t\t\t\t\t\tcolor += texture2D(u_texture, vec2( 1.0 - u_samples_a[i][j], u_samples_b[i][j] ) );\n\t\t\t\t\t}\n\t\t\t gl_FragColor = color * 0.03125;\n\t\t\t}\n\t\t\t";
|
||||
LGraphTextureCopy.prototype.onExecute=function(){var a=this.getInputData(0);if(a||this._temp_texture){if(a){var b=a.width,c=a.height;0!=this.properties.size&&(c=b=this.properties.size);var d=this._temp_texture,e=a.type;this.properties.precision===LGraphTexture.LOW?e=gl.UNSIGNED_BYTE:this.properties.precision===LGraphTexture.HIGH&&(e=gl.HIGH_PRECISION_FORMAT);d&&d.width==b&&d.height==c&&d.type==e||(d=gl.LINEAR,this.properties.generate_mipmaps&&isPowerOfTwo(b)&&isPowerOfTwo(c)&&(d=gl.LINEAR_MIPMAP_LINEAR),
|
||||
this._temp_texture=new GL.Texture(b,c,{type:e,format:gl.RGBA,minFilter:d,magFilter:gl.LINEAR}));a.copyTo(this._temp_texture);this.properties.generate_mipmaps&&(this._temp_texture.bind(0),gl.generateMipmap(this._temp_texture.texture_type),this._temp_texture.unbind(0))}this.setOutputData(0,this._temp_texture)}};LiteGraph.registerNodeType("texture/copy",LGraphTextureCopy);window.LGraphTextureCopy=LGraphTextureCopy;var LGraphTextureAverage=function(){this.addInput("Texture","Texture");this.addOutput("",
|
||||
"Texture");this.properties={low_precision:!1}};LGraphTextureAverage.title="Average";LGraphTextureAverage.desc="Compute average of a texture and stores it as a texture";LGraphTextureAverage.prototype.onExecute=function(){var a=this.getInputData(0);if(a){if(!LGraphTextureAverage._shader){LGraphTextureAverage._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureAverage.pixel_shader);for(var b=new Float32Array(32),c=0;32>c;++c)b[c]=Math.random();LGraphTextureAverage._shader.uniforms({u_samples_a:b.subarray(0,
|
||||
16),u_samples_b:b.subarray(16,32)})}b=this._temp_texture;c=this.properties.low_precision?gl.UNSIGNED_BYTE:a.type;b&&b.type==c||(this._temp_texture=new GL.Texture(1,1,{type:c,format:gl.RGBA,filter:gl.NEAREST}));var d=LGraphTextureAverage._shader;this._temp_texture.drawTo(function(){a.toViewport(d,{u_texture:0})});this.setOutputData(0,this._temp_texture)}};LGraphTextureAverage.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tuniform mat4 u_samples_a;\n\t\t\tuniform mat4 u_samples_b;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tvarying vec2 v_coord;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec4 color = vec4(0.0);\n\t\t\t\tfor(int i = 0; i < 4; ++i)\n\t\t\t\t\tfor(int j = 0; j < 4; ++j)\n\t\t\t\t\t{\n\t\t\t\t\t\tcolor += texture2D(u_texture, vec2( u_samples_a[i][j], u_samples_b[i][j] ) );\n\t\t\t\t\t\tcolor += texture2D(u_texture, vec2( 1.0 - u_samples_a[i][j], u_samples_b[i][j] ) );\n\t\t\t\t\t}\n\t\t\t gl_FragColor = color * 0.03125;\n\t\t\t}\n\t\t\t";
|
||||
LiteGraph.registerNodeType("texture/average",LGraphTextureAverage);window.LGraphTextureAverage=LGraphTextureAverage;var LGraphImageToTexture=function(){this.addInput("Image","image");this.addOutput("","Texture");this.properties={}};LGraphImageToTexture.title="Image to Texture";LGraphImageToTexture.desc="Uploads an image to the GPU";LGraphImageToTexture.prototype.onExecute=function(){var a=this.getInputData(0);if(a){var b=a.videoWidth||a.width,c=a.videoHeight||a.height;if(a.gltexture)this.setOutputData(0,
|
||||
a.gltexture);else{var d=this._temp_texture;d&&d.width==b&&d.height==c||(this._temp_texture=new GL.Texture(b,c,{format:gl.RGBA,filter:gl.LINEAR}));try{this._temp_texture.uploadImage(a)}catch(e){console.error("image comes from an unsafe location, cannot be uploaded to webgl");return}this.setOutputData(0,this._temp_texture)}}};LiteGraph.registerNodeType("texture/imageToTexture",LGraphImageToTexture);window.LGraphImageToTexture=LGraphImageToTexture;var LGraphTextureLUT=function(){this.addInput("Texture",
|
||||
"Texture");this.addInput("LUT","Texture");this.addInput("Intensity","number");this.addOutput("","Texture");this.properties={intensity:1,precision:LGraphTexture.DEFAULT};LGraphTextureLUT._shader||(LGraphTextureLUT._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureLUT.pixel_shader))};LGraphTextureLUT.widgets_info={precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureLUT.title="LUT";LGraphTextureLUT.desc="Apply LUT to Texture";LGraphTextureLUT.prototype.onExecute=function(){var a=
|
||||
this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else if(a){var b=this.getInputData(1);if(b){b.bind(0);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);gl.bindTexture(gl.TEXTURE_2D,null);var c=this.properties.intensity;this.isInputConnected(2)&&(this.properties.intensity=c=this.getInputData(2));this._tex=
|
||||
LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);var d=Mesh.getScreenQuad();this._tex.drawTo(function(){a.bind(0);b.bind(1);LGraphTextureLUT._shader.uniforms({u_texture:0,u_textureB:1,u_amount:c,uViewportSize:[a.width,a.height]}).draw(d)});this.setOutputData(0,this._tex)}else this.setOutputData(0,a)}};LGraphTextureLUT.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tuniform float u_amount;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\t lowp vec4 textureColor = clamp( texture2D(u_texture, v_coord), vec4(0.0), vec4(1.0) );\n\t\t\t\t mediump float blueColor = textureColor.b * 63.0;\n\t\t\t\t mediump vec2 quad1;\n\t\t\t\t quad1.y = floor(floor(blueColor) / 8.0);\n\t\t\t\t quad1.x = floor(blueColor) - (quad1.y * 8.0);\n\t\t\t\t mediump vec2 quad2;\n\t\t\t\t quad2.y = floor(ceil(blueColor) / 8.0);\n\t\t\t\t quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n\t\t\t\t highp vec2 texPos1;\n\t\t\t\t texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\t\t\t\t texPos1.y = 1.0 - ((quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\t\t\t\t highp vec2 texPos2;\n\t\t\t\t texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\t\t\t\t texPos2.y = 1.0 - ((quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\t\t\t\t lowp vec4 newColor1 = texture2D(u_textureB, texPos1);\n\t\t\t\t lowp vec4 newColor2 = texture2D(u_textureB, texPos2);\n\t\t\t\t lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n\t\t\t\t gl_FragColor = vec4( mix( textureColor.rgb, newColor.rgb, u_amount), textureColor.w);\n\t\t\t}\n\t\t\t";
|
||||
LiteGraph.registerNodeType("texture/LUT",LGraphTextureLUT);window.LGraphTextureLUT=LGraphTextureLUT;var LGraphTextureChannels=function(){this.addInput("Texture","Texture");this.addOutput("R","Texture");this.addOutput("G","Texture");this.addOutput("B","Texture");this.addOutput("A","Texture");this.properties={};LGraphTextureChannels._shader||(LGraphTextureChannels._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureChannels.pixel_shader))};LGraphTextureChannels.title="Channels";LGraphTextureChannels.desc=
|
||||
"Split texture channels";LGraphTextureChannels.prototype.onExecute=function(){var a=this.getInputData(0);if(a){this._channels||(this._channels=Array(4));for(var b=0,c=0;4>c;c++)this.isOutputConnected(c)?(this._channels[c]&&this._channels[c].width==a.width&&this._channels[c].height==a.height&&this._channels[c].type==a.type||(this._channels[c]=new GL.Texture(a.width,a.height,{type:a.type,format:gl.RGBA,filter:gl.LINEAR})),b++):this._channels[c]=null;if(b){gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);
|
||||
for(var d=Mesh.getScreenQuad(),e=LGraphTextureChannels._shader,f=[[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]],c=0;4>c;c++)this._channels[c]&&(this._channels[c].drawTo(function(){a.bind(0);e.uniforms({u_texture:0,u_mask:f[c]}).draw(d)}),this.setOutputData(c,this._channels[c]))}}};LGraphTextureChannels.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec4 u_mask;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t gl_FragColor = vec4( vec3( length( texture2D(u_texture, v_coord) * u_mask )), 1.0 );\n\t\t\t}\n\t\t\t";
|
||||
LiteGraph.registerNodeType("texture/channels",LGraphTextureChannels);window.LGraphTextureChannels=LGraphTextureChannels;var LGraphTextureMix=function(){this.addInput("A","Texture");this.addInput("B","Texture");this.addInput("Mixer","Texture");this.addOutput("Texture","Texture");this.properties={precision:LGraphTexture.DEFAULT};LGraphTextureMix._shader||(LGraphTextureMix._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureMix.pixel_shader))};LGraphTextureMix.title="Mix";LGraphTextureMix.desc=
|
||||
LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);this._tex.drawTo(function(){b.bind(1);a.toViewport(LGraphTextureLUT._shader,{u_texture:0,u_textureB:1,u_amount:c})});this.setOutputData(0,this._tex)}else this.setOutputData(0,a)}};LGraphTextureLUT.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tuniform float u_amount;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\t lowp vec4 textureColor = clamp( texture2D(u_texture, v_coord), vec4(0.0), vec4(1.0) );\n\t\t\t\t mediump float blueColor = textureColor.b * 63.0;\n\t\t\t\t mediump vec2 quad1;\n\t\t\t\t quad1.y = floor(floor(blueColor) / 8.0);\n\t\t\t\t quad1.x = floor(blueColor) - (quad1.y * 8.0);\n\t\t\t\t mediump vec2 quad2;\n\t\t\t\t quad2.y = floor(ceil(blueColor) / 8.0);\n\t\t\t\t quad2.x = ceil(blueColor) - (quad2.y * 8.0);\n\t\t\t\t highp vec2 texPos1;\n\t\t\t\t texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\t\t\t\t texPos1.y = 1.0 - ((quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\t\t\t\t highp vec2 texPos2;\n\t\t\t\t texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);\n\t\t\t\t texPos2.y = 1.0 - ((quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g));\n\t\t\t\t lowp vec4 newColor1 = texture2D(u_textureB, texPos1);\n\t\t\t\t lowp vec4 newColor2 = texture2D(u_textureB, texPos2);\n\t\t\t\t lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));\n\t\t\t\t gl_FragColor = vec4( mix( textureColor.rgb, newColor.rgb, u_amount), textureColor.w);\n\t\t\t}\n\t\t\t";
|
||||
LiteGraph.registerNodeType("texture/LUT",LGraphTextureLUT);window.LGraphTextureLUT=LGraphTextureLUT;var LGraphTextureChannels=function(){this.addInput("Texture","Texture");this.addOutput("R","Texture");this.addOutput("G","Texture");this.addOutput("B","Texture");this.addOutput("A","Texture");this.properties={};LGraphTextureChannels._shader||(LGraphTextureChannels._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureChannels.pixel_shader))};LGraphTextureChannels.title="Texture to Channels";
|
||||
LGraphTextureChannels.desc="Split texture channels";LGraphTextureChannels.prototype.onExecute=function(){var a=this.getInputData(0);if(a){this._channels||(this._channels=Array(4));for(var b=0,c=0;4>c;c++)this.isOutputConnected(c)?(this._channels[c]&&this._channels[c].width==a.width&&this._channels[c].height==a.height&&this._channels[c].type==a.type||(this._channels[c]=new GL.Texture(a.width,a.height,{type:a.type,format:gl.RGBA,filter:gl.LINEAR})),b++):this._channels[c]=null;if(b){gl.disable(gl.BLEND);
|
||||
gl.disable(gl.DEPTH_TEST);for(var d=Mesh.getScreenQuad(),e=LGraphTextureChannels._shader,f=[[1,0,0,0],[0,1,0,0],[0,0,1,0],[0,0,0,1]],c=0;4>c;c++)this._channels[c]&&(this._channels[c].drawTo(function(){a.bind(0);e.uniforms({u_texture:0,u_mask:f[c]}).draw(d)}),this.setOutputData(c,this._channels[c]))}}};LGraphTextureChannels.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec4 u_mask;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t gl_FragColor = vec4( vec3( length( texture2D(u_texture, v_coord) * u_mask )), 1.0 );\n\t\t\t}\n\t\t\t";
|
||||
LiteGraph.registerNodeType("texture/textureChannels",LGraphTextureChannels);window.LGraphTextureChannels=LGraphTextureChannels;var LGraphChannelsTexture=function(){this.addInput("R","Texture");this.addInput("G","Texture");this.addInput("B","Texture");this.addInput("A","Texture");this.addOutput("Texture","Texture");this.properties={};LGraphChannelsTexture._shader||(LGraphChannelsTexture._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphChannelsTexture.pixel_shader))};LGraphChannelsTexture.title=
|
||||
"Channels to Texture";LGraphChannelsTexture.desc="Split texture channels";LGraphChannelsTexture.prototype.onExecute=function(){var a=[this.getInputData(0),this.getInputData(1),this.getInputData(2),this.getInputData(3)];if(a[0]&&a[1]&&a[2]&&a[3]){gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var b=Mesh.getScreenQuad(),c=LGraphChannelsTexture._shader;this._tex=LGraphTexture.getTargetTexture(a[0],this._tex);this._tex.drawTo(function(){a[0].bind(0);a[1].bind(1);a[2].bind(2);a[3].bind(3);c.uniforms({u_textureR:0,
|
||||
u_textureG:1,u_textureB:2,u_textureA:3}).draw(b)});this.setOutputData(0,this._tex)}};LGraphChannelsTexture.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_textureR;\n\t\t\tuniform sampler2D u_textureG;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tuniform sampler2D u_textureA;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t gl_FragColor = vec4( \t\t\t\t\t\ttexture2D(u_textureR, v_coord).r,\t\t\t\t\t\ttexture2D(u_textureG, v_coord).r,\t\t\t\t\t\ttexture2D(u_textureB, v_coord).r,\t\t\t\t\t\ttexture2D(u_textureA, v_coord).r);\n\t\t\t}\n\t\t\t";
|
||||
LiteGraph.registerNodeType("texture/channelsTexture",LGraphChannelsTexture);window.LGraphChannelsTexture=LGraphChannelsTexture;var LGraphTextureMix=function(){this.addInput("A","Texture");this.addInput("B","Texture");this.addInput("Mixer","Texture");this.addOutput("Texture","Texture");this.properties={precision:LGraphTexture.DEFAULT};LGraphTextureMix._shader||(LGraphTextureMix._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureMix.pixel_shader))};LGraphTextureMix.title="Mix";LGraphTextureMix.desc=
|
||||
"Generates a texture mixing two textures";LGraphTextureMix.widgets_info={precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphTextureMix.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else{var b=this.getInputData(1),c=this.getInputData(2);if(a&&b&&c){this._tex=LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var d=Mesh.getScreenQuad(),
|
||||
e=LGraphTextureMix._shader;this._tex.drawTo(function(){a.bind(0);b.bind(1);c.bind(2);e.uniforms({u_textureA:0,u_textureB:1,u_textureMix:2}).draw(d)});this.setOutputData(0,this._tex)}}};LGraphTextureMix.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_textureA;\n\t\t\tuniform sampler2D u_textureB;\n\t\t\tuniform sampler2D u_textureMix;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t gl_FragColor = mix( texture2D(u_textureA, v_coord), texture2D(u_textureB, v_coord), texture2D(u_textureMix, v_coord) );\n\t\t\t}\n\t\t\t";
|
||||
LiteGraph.registerNodeType("texture/mix",LGraphTextureMix);window.LGraphTextureMix=LGraphTextureMix;var LGraphTextureEdges=function(){this.addInput("Tex.","Texture");this.addOutput("Edges","Texture");this.properties={invert:!0,precision:LGraphTexture.DEFAULT};LGraphTextureEdges._shader||(LGraphTextureEdges._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureEdges.pixel_shader))};LGraphTextureEdges.title="Edges";LGraphTextureEdges.desc="Detects edges";LGraphTextureEdges.widgets_info={precision:{widget:"combo",
|
||||
@@ -243,14 +249,14 @@ this.isInputConnected(1)&&(c=this.getInputData(1),this.properties.distance=c);va
|
||||
LGraphTextureDepthRange.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_camera_planes;\n\t\t\tuniform float u_distance;\n\t\t\tuniform float u_range;\n\t\t\t\n\t\t\tfloat LinearDepth()\n\t\t\t{\n\t\t\t\tfloat n = u_camera_planes.x;\n\t\t\t\tfloat f = u_camera_planes.y;\n\t\t\t\treturn (2.0 * n) / (f + n - texture2D(u_texture, v_coord).x * (f - n));\n\t\t\t}\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tfloat diff = abs(LinearDepth() * u_camera_planes.y - u_distance);\n\t\t\t\tfloat dof = 1.0;\n\t\t\t\tif(diff <= u_range)\n\t\t\t\t\tdof = diff / u_range;\n\t\t\t gl_FragColor = vec4(dof);\n\t\t\t}\n\t\t\t";
|
||||
LiteGraph.registerNodeType("texture/depth_range",LGraphTextureDepthRange);window.LGraphTextureDepthRange=LGraphTextureDepthRange;var LGraphTextureBlur=function(){this.addInput("Texture","Texture");this.addInput("Iterations","number");this.addInput("Intensity","number");this.addOutput("Blurred","Texture");this.properties={intensity:1,iterations:1,preserve_aspect:!1,scale:[1,1]};LGraphTextureBlur._shader||(LGraphTextureBlur._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphTextureBlur.pixel_shader))};
|
||||
LGraphTextureBlur.title="Blur";LGraphTextureBlur.desc="Blur a texture";LGraphTextureBlur.max_iterations=20;LGraphTextureBlur.prototype.onExecute=function(){var a=this.getInputData(0);if(a){var b=this._temp_texture;b&&b.width==a.width&&b.height==a.height&&b.type==a.type||(this._temp_texture=new GL.Texture(a.width,a.height,{type:a.type,format:gl.RGBA,filter:gl.LINEAR}),this._final_texture=new GL.Texture(a.width,a.height,{type:a.type,format:gl.RGBA,filter:gl.LINEAR}));b=this.properties.iterations;this.isInputConnected(1)&&
|
||||
(b=this.getInputData(1),this.properties.iterations=b);b=Math.min(Math.floor(b),LGraphTextureBlur.max_iterations);if(0==b)this.setOutputData(0,a);else{var c=this.properties.intensity;this.isInputConnected(2)&&(c=this.getInputData(2),this.properties.intensity=c);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var d=Mesh.getScreenQuad(),e=LGraphTextureBlur._shader,f=this.properties.scale||[1,1],g=LiteGraph.aspect;g||void 0===window.gl||(g=gl.canvas.height/gl.canvas.width);void 0!==window.Renderer&&(g=
|
||||
window.Renderer._current_camera.aspect);g||(g=1);for(var h=a,g=this.properties.preserve_aspect?g:1,a=0;a<b;++a)this._temp_texture.drawTo(function(){h.bind(0);e.uniforms({u_texture:0,u_intensity:1,u_offset:[0,1/h.height*f[1]]}).draw(d)}),this._temp_texture.bind(0),this._final_texture.drawTo(function(){e.uniforms({u_texture:0,u_intensity:c,u_offset:[g/h.width*f[0],0]}).draw(d)}),h=this._final_texture;this.setOutputData(0,this._final_texture)}}};LGraphTextureBlur.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_offset;\n\t\t\tuniform float u_intensity;\n\t\t\tvoid main() {\n\t\t\t vec4 sum = vec4(0.0);\n\t\t\t vec4 center = texture2D(u_texture, v_coord);\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -4.0) * 0.05/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -3.0) * 0.09/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -2.0) * 0.12/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -1.0) * 0.15/0.98;\n\t\t\t sum += center * 0.16/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 4.0) * 0.05/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 3.0) * 0.09/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 2.0) * 0.12/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 1.0) * 0.15/0.98;\n\t\t\t gl_FragColor = u_intensity * sum;\n\t\t\t /*gl_FragColor.a = center.a*/;\n\t\t\t}\n\t\t\t";
|
||||
(b=this.getInputData(1),this.properties.iterations=b);b=Math.min(Math.floor(b),LGraphTextureBlur.max_iterations);if(0==b)this.setOutputData(0,a);else{var c=this.properties.intensity;this.isInputConnected(2)&&(c=this.getInputData(2),this.properties.intensity=c);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var d=Mesh.getScreenQuad(),e=LGraphTextureBlur._shader,f=this.properties.scale||[1,1],g=LiteGraph.camera_aspect;g||void 0===window.gl||(g=gl.canvas.height/gl.canvas.width);g||(g=1);for(var h=a,
|
||||
g=this.properties.preserve_aspect?g:1,a=0;a<b;++a)this._temp_texture.drawTo(function(){h.bind(0);e.uniforms({u_texture:0,u_intensity:1,u_offset:[0,1/h.height*f[1]]}).draw(d)}),this._temp_texture.bind(0),this._final_texture.drawTo(function(){e.uniforms({u_texture:0,u_intensity:c,u_offset:[g/h.width*f[0],0]}).draw(d)}),h=this._final_texture;this.setOutputData(0,this._final_texture)}}};LGraphTextureBlur.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_offset;\n\t\t\tuniform float u_intensity;\n\t\t\tvoid main() {\n\t\t\t vec4 sum = vec4(0.0);\n\t\t\t vec4 center = texture2D(u_texture, v_coord);\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -4.0) * 0.05/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -3.0) * 0.09/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -2.0) * 0.12/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * -1.0) * 0.15/0.98;\n\t\t\t sum += center * 0.16/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 4.0) * 0.05/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 3.0) * 0.09/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 2.0) * 0.12/0.98;\n\t\t\t sum += texture2D(u_texture, v_coord + u_offset * 1.0) * 0.15/0.98;\n\t\t\t gl_FragColor = u_intensity * sum;\n\t\t\t /*gl_FragColor.a = center.a*/;\n\t\t\t}\n\t\t\t";
|
||||
LiteGraph.registerNodeType("texture/blur",LGraphTextureBlur);window.LGraphTextureBlur=LGraphTextureBlur;var LGraphTextureWebcam=function(){this.addOutput("Webcam","Texture");this.properties={}};LGraphTextureWebcam.title="Webcam";LGraphTextureWebcam.desc="Webcam texture";LGraphTextureWebcam.prototype.openStream=function(){function a(a){trace("Webcam rejected",a);b._webcam_stream=!1;b.box_color="red"}navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||
|
||||
navigator.msGetUserMedia;window.URL=window.URL||window.webkitURL;if(navigator.getUserMedia){this._waiting_confirmation=!0;navigator.getUserMedia({video:!0},this.streamReady.bind(this),a);var b=this}};LGraphTextureWebcam.prototype.streamReady=function(a){this._webcam_stream=a;var b=this._video;b||(b=document.createElement("video"),b.autoplay=!0,b.src=window.URL.createObjectURL(a),this._video=b,b.onloadedmetadata=function(a){console.log(a)})};LGraphTextureWebcam.prototype.onDrawBackground=function(a){!this.flags.collapsed||
|
||||
20>=this.size[1]||!this._video||(a.save(),a.webgl||(a.translate(0,this.size[1]),a.scale(1,-1)),a.drawImage(this._video,0,0,this.size[0],this.size[1]),a.restore())};LGraphTextureWebcam.prototype.onExecute=function(){null!=this._webcam_stream||this._waiting_confirmation||this.openStream();if(this._video&&this._video.videoWidth){var a=this._video.videoWidth,b=this._video.videoHeight,c=this._temp_texture;c&&c.width==a&&c.height==b||(this._temp_texture=new GL.Texture(a,b,{format:gl.RGB,filter:gl.LINEAR}));
|
||||
this._temp_texture.uploadImage(this._video);this.setOutputData(0,this._temp_texture)}};LiteGraph.registerNodeType("texture/webcam",LGraphTextureWebcam);window.LGraphTextureWebcam=LGraphTextureWebcam;var LGraphCubemap=function(){this.addOutput("Cubemap","Cubemap");this.properties={name:""};this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphCubemap.prototype.onDropFile=function(a,b,c){a?(this._drop_texture="string"==typeof a?GL.Texture.fromURL(a):GL.Texture.fromDDSInMemory(a),
|
||||
this.properties.name=b):(this._drop_texture=null,this.properties.name="")};LGraphCubemap.prototype.onExecute=function(){if(this._drop_texture)this.setOutputData(0,this._drop_texture);else if(this.properties.name){var a=LGraphTexture.getTexture(this.properties.name);a&&(this._last_tex=a,this.setOutputData(0,a))}};LGraphCubemap.prototype.onDrawBackground=function(a){this.flags.collapsed||20>=this.size[1]||a.webgl&&(gl.meshes.cube||(gl.meshes.cube=GL.Mesh.cube({size:1})))};LiteGraph.registerNodeType("texture/cubemap",
|
||||
LGraphCubemap);window.LGraphCubemap=LGraphCubemap}
|
||||
navigator.msGetUserMedia;window.URL=window.URL||window.webkitURL;if(navigator.getUserMedia){this._waiting_confirmation=!0;navigator.getUserMedia({video:!0},this.streamReady.bind(this),a);var b=this}};LGraphTextureWebcam.prototype.streamReady=function(a){this._webcam_stream=a;var b=this._video;b||(b=document.createElement("video"),b.autoplay=!0,b.src=window.URL.createObjectURL(a),this._video=b,b.onloadedmetadata=function(a){console.log(a)})};LGraphTextureWebcam.prototype.onRemoved=function(){this._webcam_stream&&
|
||||
(this._webcam_stream.stop(),this._video=this._webcam_stream=null)};LGraphTextureWebcam.prototype.onDrawBackground=function(a){this.flags.collapsed||20>=this.size[1]||!this._video||(a.save(),a.webgl?this._temp_texture&&a.drawImage(this._temp_texture,0,0,this.size[0],this.size[1]):(a.translate(0,this.size[1]),a.scale(1,-1),a.drawImage(this._video,0,0,this.size[0],this.size[1])),a.restore())};LGraphTextureWebcam.prototype.onExecute=function(){null!=this._webcam_stream||this._waiting_confirmation||this.openStream();
|
||||
if(this._video&&this._video.videoWidth){var a=this._video.videoWidth,b=this._video.videoHeight,c=this._temp_texture;c&&c.width==a&&c.height==b||(this._temp_texture=new GL.Texture(a,b,{format:gl.RGB,filter:gl.LINEAR}));this._temp_texture.uploadImage(this._video);this.setOutputData(0,this._temp_texture)}};LiteGraph.registerNodeType("texture/webcam",LGraphTextureWebcam);window.LGraphTextureWebcam=LGraphTextureWebcam;var LGraphCubemap=function(){this.addOutput("Cubemap","Cubemap");this.properties={name:""};
|
||||
this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphCubemap.prototype.onDropFile=function(a,b,c){a?(this._drop_texture="string"==typeof a?GL.Texture.fromURL(a):GL.Texture.fromDDSInMemory(a),this.properties.name=b):(this._drop_texture=null,this.properties.name="")};LGraphCubemap.prototype.onExecute=function(){if(this._drop_texture)this.setOutputData(0,this._drop_texture);else if(this.properties.name){var a=LGraphTexture.getTexture(this.properties.name);a&&(this._last_tex=
|
||||
a,this.setOutputData(0,a))}};LGraphCubemap.prototype.onDrawBackground=function(a){this.flags.collapsed||20>=this.size[1]||a.webgl&&(gl.meshes.cube||(gl.meshes.cube=GL.Mesh.cube({size:1})))};LiteGraph.registerNodeType("texture/cubemap",LGraphCubemap);window.LGraphCubemap=LGraphCubemap}
|
||||
if("undefined"!=typeof LiteGraph){var LGraphFXLens=function(){this.addInput("Texture","Texture");this.addInput("Aberration","number");this.addInput("Distortion","number");this.addInput("Blur","number");this.addOutput("Texture","Texture");this.properties={aberration:1,distortion:1,blur:1,precision:LGraphTexture.DEFAULT};LGraphFXLens._shader||(LGraphFXLens._shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphFXLens.pixel_shader))};LGraphFXLens.title="Lens";LGraphFXLens.desc="Camera Lens distortion";
|
||||
LGraphFXLens.widgets_info={precision:{widget:"combo",values:LGraphTexture.MODE_VALUES}};LGraphFXLens.prototype.onExecute=function(){var a=this.getInputData(0);if(this.properties.precision===LGraphTexture.PASS_THROUGH)this.setOutputData(0,a);else if(a){this._tex=LGraphTexture.getTargetTexture(a,this._tex,this.properties.precision);var b=this.properties.aberration;this.isInputConnected(1)&&(b=this.getInputData(1),this.properties.aberration=b);var c=this.properties.distortion;this.isInputConnected(2)&&
|
||||
(c=this.getInputData(2),this.properties.distortion=c);var d=this.properties.blur;this.isInputConnected(3)&&(d=this.getInputData(3),this.properties.blur=d);gl.disable(gl.BLEND);gl.disable(gl.DEPTH_TEST);var e=Mesh.getScreenQuad(),f=LGraphFXLens._shader;this._tex.drawTo(function(){a.bind(0);f.uniforms({u_texture:0,u_aberration:b,u_distortion:c,u_blur:d}).draw(e)});this.setOutputData(0,this._tex)}};LGraphFXLens.pixel_shader="precision highp float;\n\t\t\tprecision highp float;\n\t\t\tvarying vec2 v_coord;\n\t\t\tuniform sampler2D u_texture;\n\t\t\tuniform vec2 u_camera_planes;\n\t\t\tuniform float u_aberration;\n\t\t\tuniform float u_distortion;\n\t\t\tuniform float u_blur;\n\t\t\t\n\t\t\tvoid main() {\n\t\t\t\tvec2 coord = v_coord;\n\t\t\t\tfloat dist = distance(vec2(0.5), coord);\n\t\t\t\tvec2 dist_coord = coord - vec2(0.5);\n\t\t\t\tfloat percent = 1.0 + ((0.5 - dist) / 0.5) * u_distortion;\n\t\t\t\tdist_coord *= percent;\n\t\t\t\tcoord = dist_coord + vec2(0.5);\n\t\t\t\tvec4 color = texture2D(u_texture,coord, u_blur * dist);\n\t\t\t\tcolor.r = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0+0.01*u_aberration), u_blur * dist ).r;\n\t\t\t\tcolor.b = texture2D(u_texture,vec2(0.5) + dist_coord * (1.0-0.01*u_aberration), u_blur * dist ).b;\n\t\t\t\tgl_FragColor = color;\n\t\t\t}\n\t\t\t";
|
||||
|
||||
5927
build/litescene.js
5927
build/litescene.js
File diff suppressed because it is too large
Load Diff
@@ -405,7 +405,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l586"><code>../src/litegraph.js:586</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l593"><code>../src/litegraph.js:593</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -637,7 +637,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1051"><code>../src/litegraph.js:1051</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1058"><code>../src/litegraph.js:1058</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -818,7 +818,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l730"><code>../src/litegraph.js:730</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l737"><code>../src/litegraph.js:737</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -925,7 +925,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l714"><code>../src/litegraph.js:714</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l721"><code>../src/litegraph.js:721</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1175,7 +1175,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l701"><code>../src/litegraph.js:701</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l708"><code>../src/litegraph.js:708</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1279,7 +1279,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l746"><code>../src/litegraph.js:746</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l753"><code>../src/litegraph.js:753</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1477,7 +1477,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l985"><code>../src/litegraph.js:985</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l992"><code>../src/litegraph.js:992</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1542,7 +1542,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l635"><code>../src/litegraph.js:635</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l642"><code>../src/litegraph.js:642</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1693,7 +1693,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
<li class="arg">
|
||||
|
||||
<code>param</code>
|
||||
<code>params</code>
|
||||
|
||||
</li>
|
||||
|
||||
@@ -1756,7 +1756,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
<div class="param-description">
|
||||
<p>the name of the event</p>
|
||||
<p>the name of the event (function to be called)</p>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1765,14 +1765,14 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
<li class="param">
|
||||
|
||||
<code class="param-name">param</code>
|
||||
<span class="type">Object</span>
|
||||
<code class="param-name">params</code>
|
||||
<span class="type">Array</span>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="param-description">
|
||||
<p>an object containing the info</p>
|
||||
<p>parameters in array format</p>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1825,7 +1825,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1018"><code>../src/litegraph.js:1018</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1025"><code>../src/litegraph.js:1025</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1910,7 +1910,7 @@ if the nodes are using graphical actions</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l933"><code>../src/litegraph.js:933</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l940"><code>../src/litegraph.js:940</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2020,7 +2020,7 @@ can be easily accesed from the outside of the graph</p>
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l948"><code>../src/litegraph.js:948</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l955"><code>../src/litegraph.js:955</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
@@ -96,7 +96,7 @@
|
||||
|
||||
|
||||
<div class="foundat">
|
||||
Defined in: <a href="../files/.._src_litegraph.js.html#l2369"><code>../src/litegraph.js:2369</code></a>
|
||||
Defined in: <a href="../files/.._src_litegraph.js.html#l2374"><code>../src/litegraph.js:2374</code></a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -163,7 +163,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l2369"><code>../src/litegraph.js:2369</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l2374"><code>../src/litegraph.js:2374</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -353,7 +353,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l2047"><code>../src/litegraph.js:2047</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l2052"><code>../src/litegraph.js:2052</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -418,7 +418,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l2156"><code>../src/litegraph.js:2156</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l2161"><code>../src/litegraph.js:2161</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -501,7 +501,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l2385"><code>../src/litegraph.js:2385</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l2390"><code>../src/litegraph.js:2390</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -580,7 +580,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l2129"><code>../src/litegraph.js:2129</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l2134"><code>../src/litegraph.js:2134</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -668,7 +668,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l2171"><code>../src/litegraph.js:2171</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l2176"><code>../src/litegraph.js:2176</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -757,7 +757,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l2101"><code>../src/litegraph.js:2101</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l2106"><code>../src/litegraph.js:2106</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -835,7 +835,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l2397"><code>../src/litegraph.js:2397</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l2402"><code>../src/litegraph.js:2402</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -890,7 +890,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l2420"><code>../src/litegraph.js:2420</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l2425"><code>../src/litegraph.js:2425</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
@@ -96,7 +96,7 @@
|
||||
|
||||
|
||||
<div class="foundat">
|
||||
Defined in: <a href="../files/.._src_litegraph.js.html#l1130"><code>../src/litegraph.js:1130</code></a>
|
||||
Defined in: <a href="../files/.._src_litegraph.js.html#l1137"><code>../src/litegraph.js:1137</code></a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -415,7 +415,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1539"><code>../src/litegraph.js:1539</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1546"><code>../src/litegraph.js:1546</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -563,7 +563,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1479"><code>../src/litegraph.js:1479</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1486"><code>../src/litegraph.js:1486</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -683,7 +683,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1500"><code>../src/litegraph.js:1500</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1507"><code>../src/litegraph.js:1507</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -784,7 +784,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1419"><code>../src/litegraph.js:1419</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1426"><code>../src/litegraph.js:1426</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -904,7 +904,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1440"><code>../src/litegraph.js:1440</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1447"><code>../src/litegraph.js:1447</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -983,7 +983,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1973"><code>../src/litegraph.js:1973</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1978"><code>../src/litegraph.js:1978</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1052,7 +1052,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1552"><code>../src/litegraph.js:1552</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1559"><code>../src/litegraph.js:1559</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1144,7 +1144,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1165"><code>../src/litegraph.js:1165</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1172"><code>../src/litegraph.js:1172</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1225,7 +1225,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1632"><code>../src/litegraph.js:1632</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1639"><code>../src/litegraph.js:1639</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1364,7 +1364,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1782"><code>../src/litegraph.js:1782</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1789"><code>../src/litegraph.js:1789</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1477,7 +1477,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1715"><code>../src/litegraph.js:1715</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1722"><code>../src/litegraph.js:1722</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1600,7 +1600,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1602"><code>../src/litegraph.js:1602</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1609"><code>../src/litegraph.js:1609</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1707,7 +1707,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1617"><code>../src/litegraph.js:1617</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1624"><code>../src/litegraph.js:1624</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1804,7 +1804,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1570"><code>../src/litegraph.js:1570</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1577"><code>../src/litegraph.js:1577</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -1893,7 +1893,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1839"><code>../src/litegraph.js:1839</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1846"><code>../src/litegraph.js:1846</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2016,7 +2016,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1322"><code>../src/litegraph.js:1322</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1329"><code>../src/litegraph.js:1329</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2122,7 +2122,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1348"><code>../src/litegraph.js:1348</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1355"><code>../src/litegraph.js:1355</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2226,7 +2226,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1363"><code>../src/litegraph.js:1363</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1370"><code>../src/litegraph.js:1370</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2330,7 +2330,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1390"><code>../src/litegraph.js:1390</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1397"><code>../src/litegraph.js:1397</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2420,7 +2420,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1290"><code>../src/litegraph.js:1290</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1297"><code>../src/litegraph.js:1297</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2489,7 +2489,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1336"><code>../src/litegraph.js:1336</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1343"><code>../src/litegraph.js:1343</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2593,7 +2593,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1378"><code>../src/litegraph.js:1378</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1385"><code>../src/litegraph.js:1385</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2703,7 +2703,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1580"><code>../src/litegraph.js:1580</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1587"><code>../src/litegraph.js:1587</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2808,7 +2808,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1986"><code>../src/litegraph.js:1986</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1991"><code>../src/litegraph.js:1991</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2873,7 +2873,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1525"><code>../src/litegraph.js:1525</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1532"><code>../src/litegraph.js:1532</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -2961,7 +2961,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1465"><code>../src/litegraph.js:1465</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1472"><code>../src/litegraph.js:1472</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -3039,7 +3039,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1224"><code>../src/litegraph.js:1224</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1231"><code>../src/litegraph.js:1231</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -3110,7 +3110,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1303"><code>../src/litegraph.js:1303</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1310"><code>../src/litegraph.js:1310</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
@@ -3203,7 +3203,7 @@
|
||||
|
||||
|
||||
|
||||
<a href="../files/.._src_litegraph.js.html#l1278"><code>../src/litegraph.js:1278</code></a>
|
||||
<a href="../files/.._src_litegraph.js.html#l1285"><code>../src/litegraph.js:1285</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
108
doc/data.json
108
doc/data.json
@@ -51,7 +51,7 @@
|
||||
"plugin_for": [],
|
||||
"extension_for": [],
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1130,
|
||||
"line": 1137,
|
||||
"description": "Base Class for all the node type classes",
|
||||
"params": [
|
||||
{
|
||||
@@ -70,7 +70,7 @@
|
||||
"plugin_for": [],
|
||||
"extension_for": [],
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 2369,
|
||||
"line": 2374,
|
||||
"description": "marks as dirty the canvas, this way it will be rendered again",
|
||||
"is_constructor": 1,
|
||||
"params": [
|
||||
@@ -313,20 +313,20 @@
|
||||
"params": [
|
||||
{
|
||||
"name": "eventname",
|
||||
"description": "the name of the event",
|
||||
"description": "the name of the event (function to be called)",
|
||||
"type": "String"
|
||||
},
|
||||
{
|
||||
"name": "param",
|
||||
"description": "an object containing the info",
|
||||
"type": "Object"
|
||||
"name": "params",
|
||||
"description": "parameters in array format",
|
||||
"type": "Array"
|
||||
}
|
||||
],
|
||||
"class": "LGraph"
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 586,
|
||||
"line": 593,
|
||||
"description": "Adds a new node instasnce to this graph",
|
||||
"itemtype": "method",
|
||||
"name": "add",
|
||||
@@ -341,7 +341,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 635,
|
||||
"line": 642,
|
||||
"description": "Removes a node from the graph",
|
||||
"itemtype": "method",
|
||||
"name": "remove",
|
||||
@@ -356,7 +356,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 701,
|
||||
"line": 708,
|
||||
"description": "Returns a node by its id.",
|
||||
"itemtype": "method",
|
||||
"name": "getNodeById",
|
||||
@@ -371,7 +371,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 714,
|
||||
"line": 721,
|
||||
"description": "Returns a list of nodes that matches a type",
|
||||
"itemtype": "method",
|
||||
"name": "findNodesByType",
|
||||
@@ -390,7 +390,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 730,
|
||||
"line": 737,
|
||||
"description": "Returns a list of nodes that matches a name",
|
||||
"itemtype": "method",
|
||||
"name": "findNodesByName",
|
||||
@@ -409,7 +409,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 746,
|
||||
"line": 753,
|
||||
"description": "Returns the top-most node in this position of the canvas",
|
||||
"itemtype": "method",
|
||||
"name": "getNodeOnPos",
|
||||
@@ -438,7 +438,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 933,
|
||||
"line": 940,
|
||||
"description": "Assigns a value to all the nodes that matches this name. This is used to create global variables of the node that\ncan be easily accesed from the outside of the graph",
|
||||
"itemtype": "method",
|
||||
"name": "setInputData",
|
||||
@@ -458,7 +458,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 948,
|
||||
"line": 955,
|
||||
"description": "Returns the value of the first node with this name. This is used to access global variables of the graph from the outside",
|
||||
"itemtype": "method",
|
||||
"name": "setInputData",
|
||||
@@ -477,7 +477,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 985,
|
||||
"line": 992,
|
||||
"description": "returns if the graph is in live mode",
|
||||
"itemtype": "method",
|
||||
"name": "isLive",
|
||||
@@ -485,7 +485,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1018,
|
||||
"line": 1025,
|
||||
"description": "Creates a Object containing all the info about this graph, it can be serialized",
|
||||
"itemtype": "method",
|
||||
"name": "serialize",
|
||||
@@ -497,7 +497,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1051,
|
||||
"line": 1058,
|
||||
"description": "Configure a graph from a JSON string",
|
||||
"itemtype": "method",
|
||||
"name": "configure",
|
||||
@@ -512,7 +512,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1165,
|
||||
"line": 1172,
|
||||
"description": "configure a node from an object containing the serialized info",
|
||||
"itemtype": "method",
|
||||
"name": "configure",
|
||||
@@ -520,7 +520,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1224,
|
||||
"line": 1231,
|
||||
"description": "serialize the content",
|
||||
"itemtype": "method",
|
||||
"name": "serialize",
|
||||
@@ -528,7 +528,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1278,
|
||||
"line": 1285,
|
||||
"description": "serialize and stringify",
|
||||
"itemtype": "method",
|
||||
"name": "toString",
|
||||
@@ -536,7 +536,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1290,
|
||||
"line": 1297,
|
||||
"description": "get the title string",
|
||||
"itemtype": "method",
|
||||
"name": "getTitle",
|
||||
@@ -544,7 +544,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1303,
|
||||
"line": 1310,
|
||||
"description": "sets the output data",
|
||||
"itemtype": "method",
|
||||
"name": "setOutputData",
|
||||
@@ -564,7 +564,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1322,
|
||||
"line": 1329,
|
||||
"description": "retrieves the input data from one slot",
|
||||
"itemtype": "method",
|
||||
"name": "getInputData",
|
||||
@@ -583,7 +583,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1336,
|
||||
"line": 1343,
|
||||
"description": "tells you if there is a connection in one input slot",
|
||||
"itemtype": "method",
|
||||
"name": "isInputConnected",
|
||||
@@ -602,7 +602,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1348,
|
||||
"line": 1355,
|
||||
"description": "tells you info about an input connection (which node, type, etc)",
|
||||
"itemtype": "method",
|
||||
"name": "getInputInfo",
|
||||
@@ -621,7 +621,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1363,
|
||||
"line": 1370,
|
||||
"description": "tells you info about an output connection (which node, type, etc)",
|
||||
"itemtype": "method",
|
||||
"name": "getOutputInfo",
|
||||
@@ -640,7 +640,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1378,
|
||||
"line": 1385,
|
||||
"description": "tells you if there is a connection in one output slot",
|
||||
"itemtype": "method",
|
||||
"name": "isOutputConnected",
|
||||
@@ -659,7 +659,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1390,
|
||||
"line": 1397,
|
||||
"description": "retrieves all the nodes connected to this output slot",
|
||||
"itemtype": "method",
|
||||
"name": "getOutputNodes",
|
||||
@@ -678,7 +678,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1419,
|
||||
"line": 1426,
|
||||
"description": "add a new output slot to use in this node",
|
||||
"itemtype": "method",
|
||||
"name": "addOutput",
|
||||
@@ -703,7 +703,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1440,
|
||||
"line": 1447,
|
||||
"description": "add a new output slot to use in this node",
|
||||
"itemtype": "method",
|
||||
"name": "addOutputs",
|
||||
@@ -718,7 +718,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1465,
|
||||
"line": 1472,
|
||||
"description": "remove an existing output slot",
|
||||
"itemtype": "method",
|
||||
"name": "removeOutput",
|
||||
@@ -733,7 +733,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1479,
|
||||
"line": 1486,
|
||||
"description": "add a new input slot to use in this node",
|
||||
"itemtype": "method",
|
||||
"name": "addInput",
|
||||
@@ -758,7 +758,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1500,
|
||||
"line": 1507,
|
||||
"description": "add several new input slots in this node",
|
||||
"itemtype": "method",
|
||||
"name": "addInputs",
|
||||
@@ -773,7 +773,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1525,
|
||||
"line": 1532,
|
||||
"description": "remove an existing input slot",
|
||||
"itemtype": "method",
|
||||
"name": "removeInput",
|
||||
@@ -788,7 +788,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1539,
|
||||
"line": 1546,
|
||||
"description": "add an special connection to this node (used for special kinds of graphs)",
|
||||
"itemtype": "method",
|
||||
"name": "addConnection",
|
||||
@@ -818,7 +818,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1552,
|
||||
"line": 1559,
|
||||
"description": "computes the size of a node according to its inputs and output slots",
|
||||
"itemtype": "method",
|
||||
"name": "computeSize",
|
||||
@@ -837,7 +837,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1570,
|
||||
"line": 1577,
|
||||
"description": "returns the bounding of the object, used for rendering purposes",
|
||||
"itemtype": "method",
|
||||
"name": "getBounding",
|
||||
@@ -849,7 +849,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1580,
|
||||
"line": 1587,
|
||||
"description": "checks if a point is inside the shape of a node",
|
||||
"itemtype": "method",
|
||||
"name": "isPointInsideNode",
|
||||
@@ -873,7 +873,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1602,
|
||||
"line": 1609,
|
||||
"description": "returns the input slot with a given name (used for dynamic slots), -1 if not found",
|
||||
"itemtype": "method",
|
||||
"name": "findInputSlot",
|
||||
@@ -892,7 +892,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1617,
|
||||
"line": 1624,
|
||||
"description": "returns the output slot with a given name (used for dynamic slots), -1 if not found",
|
||||
"itemtype": "method",
|
||||
"name": "findOutputSlot",
|
||||
@@ -911,7 +911,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1632,
|
||||
"line": 1639,
|
||||
"description": "connect this node output to the input of another node",
|
||||
"itemtype": "method",
|
||||
"name": "connect",
|
||||
@@ -940,7 +940,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1715,
|
||||
"line": 1722,
|
||||
"description": "disconnect one output to an specific node",
|
||||
"itemtype": "method",
|
||||
"name": "disconnectOutput",
|
||||
@@ -964,7 +964,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1782,
|
||||
"line": 1789,
|
||||
"description": "disconnect one input",
|
||||
"itemtype": "method",
|
||||
"name": "disconnectInput",
|
||||
@@ -983,7 +983,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1839,
|
||||
"line": 1846,
|
||||
"description": "returns the center of a connection point in canvas coords",
|
||||
"itemtype": "method",
|
||||
"name": "getConnectionPos",
|
||||
@@ -1007,7 +1007,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1973,
|
||||
"line": 1978,
|
||||
"description": "Collapse the node to make it smaller on the canvas",
|
||||
"itemtype": "method",
|
||||
"name": "collapse",
|
||||
@@ -1015,7 +1015,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 1986,
|
||||
"line": 1991,
|
||||
"description": "Forces the node to do not move or realign on Z",
|
||||
"itemtype": "method",
|
||||
"name": "pin",
|
||||
@@ -1023,7 +1023,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 2047,
|
||||
"line": 2052,
|
||||
"description": "clears all the data inside",
|
||||
"itemtype": "method",
|
||||
"name": "clear",
|
||||
@@ -1031,7 +1031,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 2101,
|
||||
"line": 2106,
|
||||
"description": "assigns a graph, you can reasign graphs to the same canvas",
|
||||
"itemtype": "method",
|
||||
"name": "setGraph",
|
||||
@@ -1046,7 +1046,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 2129,
|
||||
"line": 2134,
|
||||
"description": "opens a graph contained inside a node in the current graph",
|
||||
"itemtype": "method",
|
||||
"name": "openSubgraph",
|
||||
@@ -1061,7 +1061,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 2156,
|
||||
"line": 2161,
|
||||
"description": "closes a subgraph contained inside a node",
|
||||
"itemtype": "method",
|
||||
"name": "closeSubgraph",
|
||||
@@ -1076,7 +1076,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 2171,
|
||||
"line": 2176,
|
||||
"description": "assigns a canvas",
|
||||
"itemtype": "method",
|
||||
"name": "setCanvas",
|
||||
@@ -1091,7 +1091,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 2385,
|
||||
"line": 2390,
|
||||
"description": "Used to attach the canvas in a popup",
|
||||
"itemtype": "method",
|
||||
"name": "getCanvasWindow",
|
||||
@@ -1103,7 +1103,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 2397,
|
||||
"line": 2402,
|
||||
"description": "starts rendering the content of the canvas when needed",
|
||||
"itemtype": "method",
|
||||
"name": "startRendering",
|
||||
@@ -1111,7 +1111,7 @@
|
||||
},
|
||||
{
|
||||
"file": "../src/litegraph.js",
|
||||
"line": 2420,
|
||||
"line": 2425,
|
||||
"description": "stops rendering the content of the canvas (to save resources)",
|
||||
"itemtype": "method",
|
||||
"name": "stopRendering",
|
||||
|
||||
@@ -652,16 +652,23 @@ LGraph.prototype.getElapsedTime = function()
|
||||
/**
|
||||
* Sends an event to all the nodes, useful to trigger stuff
|
||||
* @method sendEventToAllNodes
|
||||
* @param {String} eventname the name of the event
|
||||
* @param {Object} param an object containing the info
|
||||
* @param {String} eventname the name of the event (function to be called)
|
||||
* @param {Array} params parameters in array format
|
||||
*/
|
||||
|
||||
LGraph.prototype.sendEventToAllNodes = function(eventname, param)
|
||||
LGraph.prototype.sendEventToAllNodes = function(eventname, params)
|
||||
{
|
||||
var M = this._nodes_in_order ? this._nodes_in_order : this._nodes;
|
||||
for(var j in M)
|
||||
if(M[j][eventname])
|
||||
M[j][eventname](param);
|
||||
{
|
||||
if(params === undefined)
|
||||
M[j][eventname]();
|
||||
else if(params && params.constructor === Array)
|
||||
M[j][eventname].apply(M[j], params);
|
||||
else
|
||||
M[j][eventname](params);
|
||||
}
|
||||
}
|
||||
|
||||
LGraph.prototype.sendActionToCanvas = function(action, params)
|
||||
@@ -2059,8 +2066,6 @@ LGraphNode.prototype.captureInput = function(v)
|
||||
|
||||
//change
|
||||
c.node_capturing_input = v ? this : null;
|
||||
if(this.graph.debug)
|
||||
console.log(this.title + ": Capturing input " + (v?"ON":"OFF"));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2367,7 +2372,7 @@ LGraphCanvas.prototype.setCanvas = function(canvas)
|
||||
|
||||
//read data
|
||||
var type = file.type.split("/")[0];
|
||||
if(type == "text")
|
||||
if(type == "text" || type == "")
|
||||
reader.readAsText(file);
|
||||
else if (type == "image")
|
||||
reader.readAsDataURL(file);
|
||||
@@ -2831,7 +2836,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
|
||||
*/
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
//e.stopPropagation();
|
||||
return false;
|
||||
//this is not really optimal
|
||||
//this.graph.change();
|
||||
|
||||
@@ -558,16 +558,23 @@ LGraph.prototype.getElapsedTime = function()
|
||||
/**
|
||||
* Sends an event to all the nodes, useful to trigger stuff
|
||||
* @method sendEventToAllNodes
|
||||
* @param {String} eventname the name of the event
|
||||
* @param {Object} param an object containing the info
|
||||
* @param {String} eventname the name of the event (function to be called)
|
||||
* @param {Array} params parameters in array format
|
||||
*/
|
||||
|
||||
LGraph.prototype.sendEventToAllNodes = function(eventname, param)
|
||||
LGraph.prototype.sendEventToAllNodes = function(eventname, params)
|
||||
{
|
||||
var M = this._nodes_in_order ? this._nodes_in_order : this._nodes;
|
||||
for(var j in M)
|
||||
if(M[j][eventname])
|
||||
M[j][eventname](param);
|
||||
{
|
||||
if(params === undefined)
|
||||
M[j][eventname]();
|
||||
else if(params && params.constructor === Array)
|
||||
M[j][eventname].apply(M[j], params);
|
||||
else
|
||||
M[j][eventname](params);
|
||||
}
|
||||
}
|
||||
|
||||
LGraph.prototype.sendActionToCanvas = function(action, params)
|
||||
@@ -1965,8 +1972,6 @@ LGraphNode.prototype.captureInput = function(v)
|
||||
|
||||
//change
|
||||
c.node_capturing_input = v ? this : null;
|
||||
if(this.graph.debug)
|
||||
console.log(this.title + ": Capturing input " + (v?"ON":"OFF"));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2273,7 +2278,7 @@ LGraphCanvas.prototype.setCanvas = function(canvas)
|
||||
|
||||
//read data
|
||||
var type = file.type.split("/")[0];
|
||||
if(type == "text")
|
||||
if(type == "text" || type == "")
|
||||
reader.readAsText(file);
|
||||
else if (type == "image")
|
||||
reader.readAsDataURL(file);
|
||||
@@ -2737,7 +2742,7 @@ LGraphCanvas.prototype.processMouseMove = function(e)
|
||||
*/
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
//e.stopPropagation();
|
||||
return false;
|
||||
//this is not really optimal
|
||||
//this.graph.change();
|
||||
|
||||
@@ -1,738 +0,0 @@
|
||||
//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);
|
||||
},
|
||||
});
|
||||
|
||||
*/
|
||||
@@ -47,6 +47,7 @@ if(typeof(LiteGraph) != "undefined")
|
||||
//texture must be loaded
|
||||
if(LGraphTexture.loadTextureCallback)
|
||||
{
|
||||
//calls the method in charge of loading resources (in LiteScene would be ResourcesManager.load)
|
||||
var loader = LGraphTexture.loadTextureCallback;
|
||||
if(loader)
|
||||
loader( name );
|
||||
@@ -162,6 +163,12 @@ if(typeof(LiteGraph) != "undefined")
|
||||
this.setOutputData(0, tex);
|
||||
}
|
||||
|
||||
LGraphTexture.prototype.onResourceRenamed = function(old_name,new_name)
|
||||
{
|
||||
if(this.properties.name == old_name)
|
||||
this.properties.name = new_name;
|
||||
}
|
||||
|
||||
LGraphTexture.prototype.onDrawBackground = function(ctx)
|
||||
{
|
||||
if( this.flags.collapsed || this.size[1] <= 20 )
|
||||
@@ -216,6 +223,9 @@ if(typeof(LiteGraph) != "undefined")
|
||||
var size = LGraphTexture.image_preview_size;
|
||||
var temp_tex = tex;
|
||||
|
||||
if(tex.format == gl.DEPTH_COMPONENT)
|
||||
return null; //cannot generate from depth
|
||||
|
||||
//Generate low-level version in the GPU to speed up
|
||||
if(tex.width > size || tex.height > size)
|
||||
{
|
||||
@@ -336,6 +346,35 @@ if(typeof(LiteGraph) != "undefined")
|
||||
LGraphTextureOperation.title = "Operation";
|
||||
LGraphTextureOperation.desc = "Texture shader operation";
|
||||
|
||||
LGraphTextureOperation.prototype.getExtraMenuOptions = function(graphcanvas)
|
||||
{
|
||||
var that = this;
|
||||
var txt = !that.properties.show ? "Show Texture" : "Hide Texture";
|
||||
return [ {content: txt, callback:
|
||||
function() {
|
||||
that.properties.show = !that.properties.show;
|
||||
}
|
||||
}];
|
||||
}
|
||||
|
||||
LGraphTextureOperation.prototype.onDrawBackground = function(ctx)
|
||||
{
|
||||
if(this.flags.collapsed || this.size[1] <= 20 || !this.properties.show)
|
||||
return;
|
||||
|
||||
if(!this._tex)
|
||||
return;
|
||||
|
||||
//only works if using a webgl renderer
|
||||
if(this._tex.gl != ctx)
|
||||
return;
|
||||
|
||||
//render to graph canvas
|
||||
ctx.save();
|
||||
ctx.drawImage(this._tex, 0, 0, this.size[0], this.size[1]);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
LGraphTextureOperation.prototype.onExecute = function()
|
||||
{
|
||||
var tex = this.getInputData(0);
|
||||
@@ -681,39 +720,44 @@ if(typeof(LiteGraph) != "undefined")
|
||||
LGraphTextureCopy.prototype.onExecute = function()
|
||||
{
|
||||
var tex = this.getInputData(0);
|
||||
if(!tex) return;
|
||||
if(!tex && !this._temp_texture)
|
||||
return;
|
||||
|
||||
var width = tex.width;
|
||||
var height = tex.height;
|
||||
|
||||
if(this.properties.size != 0)
|
||||
//copy the texture
|
||||
if(tex)
|
||||
{
|
||||
width = this.properties.size;
|
||||
height = this.properties.size;
|
||||
}
|
||||
var width = tex.width;
|
||||
var height = tex.height;
|
||||
|
||||
var temp = this._temp_texture;
|
||||
if(this.properties.size != 0)
|
||||
{
|
||||
width = this.properties.size;
|
||||
height = this.properties.size;
|
||||
}
|
||||
|
||||
var type = tex.type;
|
||||
if(this.properties.precision === LGraphTexture.LOW)
|
||||
type = gl.UNSIGNED_BYTE;
|
||||
else if(this.properties.precision === LGraphTexture.HIGH)
|
||||
type = gl.HIGH_PRECISION_FORMAT;
|
||||
var temp = this._temp_texture;
|
||||
|
||||
if(!temp || temp.width != width || temp.height != height || temp.type != type )
|
||||
{
|
||||
var minFilter = gl.LINEAR;
|
||||
if( this.properties.generate_mipmaps && isPowerOfTwo(width) && isPowerOfTwo(height) )
|
||||
minFilter = gl.LINEAR_MIPMAP_LINEAR;
|
||||
this._temp_texture = new GL.Texture( width, height, { type: type, format: gl.RGBA, minFilter: minFilter, magFilter: gl.LINEAR });
|
||||
}
|
||||
tex.copyTo(this._temp_texture);
|
||||
var type = tex.type;
|
||||
if(this.properties.precision === LGraphTexture.LOW)
|
||||
type = gl.UNSIGNED_BYTE;
|
||||
else if(this.properties.precision === LGraphTexture.HIGH)
|
||||
type = gl.HIGH_PRECISION_FORMAT;
|
||||
|
||||
if(this.properties.generate_mipmaps)
|
||||
{
|
||||
this._temp_texture.bind(0);
|
||||
gl.generateMipmap(this._temp_texture.texture_type);
|
||||
this._temp_texture.unbind(0);
|
||||
if(!temp || temp.width != width || temp.height != height || temp.type != type )
|
||||
{
|
||||
var minFilter = gl.LINEAR;
|
||||
if( this.properties.generate_mipmaps && isPowerOfTwo(width) && isPowerOfTwo(height) )
|
||||
minFilter = gl.LINEAR_MIPMAP_LINEAR;
|
||||
this._temp_texture = new GL.Texture( width, height, { type: type, format: gl.RGBA, minFilter: minFilter, magFilter: gl.LINEAR });
|
||||
}
|
||||
tex.copyTo(this._temp_texture);
|
||||
|
||||
if(this.properties.generate_mipmaps)
|
||||
{
|
||||
this._temp_texture.bind(0);
|
||||
gl.generateMipmap(this._temp_texture.texture_type);
|
||||
this._temp_texture.unbind(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -883,12 +927,11 @@ if(typeof(LiteGraph) != "undefined")
|
||||
|
||||
this._tex = LGraphTexture.getTargetTexture( tex, this._tex, this.properties.precision );
|
||||
|
||||
var mesh = Mesh.getScreenQuad();
|
||||
//var mesh = Mesh.getScreenQuad();
|
||||
|
||||
this._tex.drawTo(function() {
|
||||
tex.bind(0);
|
||||
lut_tex.bind(1);
|
||||
LGraphTextureLUT._shader.uniforms({u_texture:0, u_textureB:1, u_amount: intensity, uViewportSize:[tex.width,tex.height]}).draw(mesh);
|
||||
tex.toViewport( LGraphTextureLUT._shader, {u_texture:0, u_textureB:1, u_amount: intensity} );
|
||||
});
|
||||
|
||||
this.setOutputData(0,this._tex);
|
||||
@@ -926,7 +969,7 @@ if(typeof(LiteGraph) != "undefined")
|
||||
LiteGraph.registerNodeType("texture/LUT", LGraphTextureLUT );
|
||||
window.LGraphTextureLUT = LGraphTextureLUT;
|
||||
|
||||
// Texture Mix *****************************************
|
||||
// Texture Channels *****************************************
|
||||
function LGraphTextureChannels()
|
||||
{
|
||||
this.addInput("Texture","Texture");
|
||||
@@ -941,7 +984,7 @@ if(typeof(LiteGraph) != "undefined")
|
||||
LGraphTextureChannels._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphTextureChannels.pixel_shader );
|
||||
}
|
||||
|
||||
LGraphTextureChannels.title = "Channels";
|
||||
LGraphTextureChannels.title = "Texture to Channels";
|
||||
LGraphTextureChannels.desc = "Split texture channels";
|
||||
|
||||
LGraphTextureChannels.prototype.onExecute = function()
|
||||
@@ -999,9 +1042,76 @@ if(typeof(LiteGraph) != "undefined")
|
||||
}\n\
|
||||
";
|
||||
|
||||
LiteGraph.registerNodeType("texture/channels", LGraphTextureChannels );
|
||||
LiteGraph.registerNodeType("texture/textureChannels", LGraphTextureChannels );
|
||||
window.LGraphTextureChannels = LGraphTextureChannels;
|
||||
|
||||
|
||||
// Texture Channels to Texture *****************************************
|
||||
function LGraphChannelsTexture()
|
||||
{
|
||||
this.addInput("R","Texture");
|
||||
this.addInput("G","Texture");
|
||||
this.addInput("B","Texture");
|
||||
this.addInput("A","Texture");
|
||||
|
||||
this.addOutput("Texture","Texture");
|
||||
|
||||
this.properties = {};
|
||||
if(!LGraphChannelsTexture._shader)
|
||||
LGraphChannelsTexture._shader = new GL.Shader( Shader.SCREEN_VERTEX_SHADER, LGraphChannelsTexture.pixel_shader );
|
||||
}
|
||||
|
||||
LGraphChannelsTexture.title = "Channels to Texture";
|
||||
LGraphChannelsTexture.desc = "Split texture channels";
|
||||
|
||||
LGraphChannelsTexture.prototype.onExecute = function()
|
||||
{
|
||||
var tex = [ this.getInputData(0),
|
||||
this.getInputData(1),
|
||||
this.getInputData(2),
|
||||
this.getInputData(3) ];
|
||||
|
||||
if(!tex[0] || !tex[1] || !tex[2] || !tex[3])
|
||||
return;
|
||||
|
||||
gl.disable( gl.BLEND );
|
||||
gl.disable( gl.DEPTH_TEST );
|
||||
|
||||
var mesh = Mesh.getScreenQuad();
|
||||
var shader = LGraphChannelsTexture._shader;
|
||||
|
||||
this._tex = LGraphTexture.getTargetTexture( tex[0], this._tex );
|
||||
|
||||
this._tex.drawTo( function() {
|
||||
tex[0].bind(0);
|
||||
tex[1].bind(1);
|
||||
tex[2].bind(2);
|
||||
tex[3].bind(3);
|
||||
shader.uniforms({u_textureR:0, u_textureG:1, u_textureB:2, u_textureA:3 }).draw(mesh);
|
||||
});
|
||||
this.setOutputData(0, this._tex);
|
||||
}
|
||||
|
||||
LGraphChannelsTexture.pixel_shader = "precision highp float;\n\
|
||||
precision highp float;\n\
|
||||
varying vec2 v_coord;\n\
|
||||
uniform sampler2D u_textureR;\n\
|
||||
uniform sampler2D u_textureG;\n\
|
||||
uniform sampler2D u_textureB;\n\
|
||||
uniform sampler2D u_textureA;\n\
|
||||
\n\
|
||||
void main() {\n\
|
||||
gl_FragColor = vec4( \
|
||||
texture2D(u_textureR, v_coord).r,\
|
||||
texture2D(u_textureG, v_coord).r,\
|
||||
texture2D(u_textureB, v_coord).r,\
|
||||
texture2D(u_textureA, v_coord).r);\n\
|
||||
}\n\
|
||||
";
|
||||
|
||||
LiteGraph.registerNodeType("texture/channelsTexture", LGraphChannelsTexture );
|
||||
window.LGraphChannelsTexture = LGraphChannelsTexture;
|
||||
|
||||
// Texture Mix *****************************************
|
||||
function LGraphTextureMix()
|
||||
{
|
||||
@@ -1287,17 +1397,15 @@ if(typeof(LiteGraph) != "undefined")
|
||||
var scale = this.properties.scale || [1,1];
|
||||
|
||||
//blur sometimes needs an aspect correction
|
||||
var aspect = LiteGraph.aspect;
|
||||
var aspect = LiteGraph.camera_aspect;
|
||||
if(!aspect && window.gl !== undefined)
|
||||
aspect = gl.canvas.height / gl.canvas.width;
|
||||
if(window.Renderer !== undefined)
|
||||
aspect = window.Renderer._current_camera.aspect;
|
||||
if(!aspect)
|
||||
aspect = 1;
|
||||
|
||||
//iterate
|
||||
var start_texture = tex;
|
||||
var aspect = this.properties.preserve_aspect ? aspect : 1;
|
||||
aspect = this.properties.preserve_aspect ? aspect : 1;
|
||||
for(var i = 0; i < iterations; ++i)
|
||||
{
|
||||
this._temp_texture.drawTo( function() {
|
||||
@@ -1399,9 +1507,19 @@ if(typeof(LiteGraph) != "undefined")
|
||||
}
|
||||
}
|
||||
|
||||
LGraphTextureWebcam.prototype.onRemoved = function()
|
||||
{
|
||||
if(this._webcam_stream)
|
||||
{
|
||||
this._webcam_stream.stop();
|
||||
this._webcam_stream = null;
|
||||
this._video = null;
|
||||
}
|
||||
}
|
||||
|
||||
LGraphTextureWebcam.prototype.onDrawBackground = function(ctx)
|
||||
{
|
||||
if(!this.flags.collapsed || this.size[1] <= 20)
|
||||
if(this.flags.collapsed || this.size[1] <= 20)
|
||||
return;
|
||||
|
||||
if(!this._video)
|
||||
@@ -1413,8 +1531,13 @@ if(typeof(LiteGraph) != "undefined")
|
||||
{
|
||||
ctx.translate(0,this.size[1]);
|
||||
ctx.scale(1,-1);
|
||||
ctx.drawImage(this._video, 0, 0, this.size[0], this.size[1]);
|
||||
}
|
||||
else
|
||||
{
|
||||
if(this._temp_texture)
|
||||
ctx.drawImage(this._temp_texture, 0, 0, this.size[0], this.size[1]);
|
||||
}
|
||||
ctx.drawImage(this._video, 0, 0, this.size[0], this.size[1]);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
|
||||
@@ -66,7 +66,6 @@ GraphicsImage.prototype.loadImage = function(url)
|
||||
return;
|
||||
}
|
||||
|
||||
this.trace("loading image...");
|
||||
this.img = document.createElement("img");
|
||||
|
||||
var url = name;
|
||||
@@ -622,12 +621,22 @@ ImageWebcam.prototype.openStream = function()
|
||||
|
||||
var that = this;
|
||||
function onFailSoHard(e) {
|
||||
trace('Webcam rejected', e);
|
||||
console.log('Webcam rejected', e);
|
||||
that._webcam_stream = false;
|
||||
that.box_color = "red";
|
||||
};
|
||||
}
|
||||
|
||||
ImageWebcam.prototype.onRemoved = function()
|
||||
{
|
||||
if(this._webcam_stream)
|
||||
{
|
||||
this._webcam_stream.stop();
|
||||
this._webcam_stream = null;
|
||||
this._video = null;
|
||||
}
|
||||
}
|
||||
|
||||
ImageWebcam.prototype.streamReady = function(localMediaStream)
|
||||
{
|
||||
this._webcam_stream = localMediaStream;
|
||||
@@ -647,8 +656,6 @@ ImageWebcam.prototype.streamReady = function(localMediaStream)
|
||||
console.log(e);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
ImageWebcam.prototype.onExecute = function()
|
||||
@@ -659,10 +666,35 @@ ImageWebcam.prototype.onExecute = function()
|
||||
if(!this._video || !this._video.videoWidth) return;
|
||||
|
||||
this._video.width = this._video.videoWidth;
|
||||
this._video.hieght = this._video.videoHeight;
|
||||
this._video.height = this._video.videoHeight;
|
||||
this.setOutputData(0, this._video);
|
||||
}
|
||||
|
||||
ImageWebcam.prototype.getExtraMenuOptions = function(graphcanvas)
|
||||
{
|
||||
var that = this;
|
||||
var txt = !that.properties.show ? "Show Frame" : "Hide Frame";
|
||||
return [ {content: txt, callback:
|
||||
function() {
|
||||
that.properties.show = !that.properties.show;
|
||||
}
|
||||
}];
|
||||
}
|
||||
|
||||
ImageWebcam.prototype.onDrawBackground = function(ctx)
|
||||
{
|
||||
if(this.flags.collapsed || this.size[1] <= 20 || !this.properties.show)
|
||||
return;
|
||||
|
||||
if(!this._video)
|
||||
return;
|
||||
|
||||
//render to graph canvas
|
||||
ctx.save();
|
||||
ctx.drawImage(this._video, 0, 0, this.size[0], this.size[1]);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
LiteGraph.registerNodeType("graphics/webcam", ImageWebcam );
|
||||
|
||||
|
||||
|
||||
@@ -1,692 +0,0 @@
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
@@ -1,685 +0,0 @@
|
||||
//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";
|
||||
},
|
||||
|
||||
onDrawForeground: 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);
|
||||
},
|
||||
|
||||
onDrawForeground: 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";
|
||||
},
|
||||
|
||||
onDrawForeground: 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;
|
||||
},
|
||||
onDrawForeground: 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},
|
||||
|
||||
onDrawForeground: 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"]);
|
||||
},
|
||||
|
||||
onDrawForeground: 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);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,2 +1,3 @@
|
||||
cd "$(dirname "$0")"
|
||||
python builder.py deploy_files.txt -o ../build/litegraph.min.js -o2 ../build/litegraph.js
|
||||
chmod a+rw ../build/*
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
cd "$(dirname "$0")"
|
||||
python builder.py deploy_files.txt -o ../build/litegraph.min.js -o2 ../build/litegraph.js --nomin
|
||||
chmod a+rw ../build/*
|
||||
|
||||
Reference in New Issue
Block a user