From 21323a10098d0a70cd0244a713831d6f3085b08c Mon Sep 17 00:00:00 2001 From: tamat Date: Tue, 4 Oct 2016 17:45:50 +0200 Subject: [PATCH] fixes in drop --- build/litegraph.js | 715 +++++++++++++++++++++------------ build/litegraph.min.js | 146 +++---- demo/code.js | 34 +- demo/code_old.js | 547 ------------------------- demo/examples/audio.json | 1 + demo/examples/audio_delay.json | 1 + demo/index.html | 5 +- demo/style.css | 12 + src/litegraph-editor.js | 15 +- src/litegraph.js | 91 ++++- src/nodes/audio.js | 582 ++++++++++++++++----------- src/nodes/image.js | 42 +- style.css | 3 +- 13 files changed, 1049 insertions(+), 1145 deletions(-) delete mode 100755 demo/code_old.js create mode 100644 demo/examples/audio.json create mode 100644 demo/examples/audio_delay.json diff --git a/build/litegraph.js b/build/litegraph.js index adb3bdfff..5f3d9b4cd 100644 --- a/build/litegraph.js +++ b/build/litegraph.js @@ -45,6 +45,7 @@ var LiteGraph = { debug: false, throw_errors: true, registered_node_types: {}, //nodetypes by string + node_types_by_file_extension: {}, //used for droping files in the canvas Nodes: {}, //node types by classname /** @@ -82,6 +83,12 @@ var LiteGraph = { //warnings if(base_class.prototype.onPropertyChange) console.warn("LiteGraph node class " + type + " has onPropertyChange method, it must be called onPropertyChanged with d at the end"); + + if( base_class.supported_extensions ) + { + for(var i in base_class.supported_extensions ) + this.node_types_by_file_extension[ base_class.supported_extensions[i].toLowerCase() ] = base_class; + } }, /** @@ -120,8 +127,8 @@ var LiteGraph = { title = title || base_class.title || type; var node = new base_class( name ); - node.type = type; + if(!node.title) node.title = title; if(!node.properties) node.properties = {}; if(!node.properties_info) node.properties_info = []; @@ -1186,7 +1193,15 @@ LGraph.prototype.configure = function(data, keep_old) node.id = n_info.id; //id it or it will create a new id this.add(node, true); //add before configure, otherwise configure cannot create links - node.configure(n_info); + } + + //configure nodes afterwards so they can reach each other + for(var i = 0, l = nodes.length; i < l; ++i) + { + var n_info = nodes[i]; + var node = this.getNodeById( n_info.id ); + if(node) + node.configure( n_info ); } this.updateExecutionOrder(); @@ -1194,6 +1209,27 @@ LGraph.prototype.configure = function(data, keep_old) return error; } +LGraph.prototype.load = function(url) +{ + var that = this; + var req = new XMLHttpRequest(); + req.open('GET', url, true); + req.send(null); + req.onload = function (oEvent) { + if(req.status !== 200) + { + console.error("Error loading graph:",req.status,req.response); + return; + } + var data = JSON.parse( req.response ); + that.configure(data); + } + req.onerror = function(err) + { + console.error("Error loading graph:",err); + } +} + LGraph.prototype.onNodeTrace = function(node, msg, color) { //TODO @@ -1332,7 +1368,26 @@ LGraphNode.prototype.configure = function(info) } if(this.onConnectionsChange) - this.onConnectionsChange(); + { + if(this.inputs) + for(var i = 0; i < this.inputs.length; ++i) + { + var input = this.inputs[i]; + var link_info = this.graph.links[ input.link ]; + this.onConnectionsChange( LiteGraph.INPUT, i, true, link_info ); //link_info has been created now, so its updated + } + + if(this.outputs) + for(var i = 0; i < this.outputs.length; ++i) + { + var output = this.outputs[i]; + for(var j = 0; j < output.links.length; ++j) + { + var link_info = this.graph.links[ output.links[j] ]; + this.onConnectionsChange( LiteGraph.OUTPUT, i, true, link_info ); //link_info has been created now, so its updated + } + } + } //FOR LEGACY, PLEASE REMOVE ON NEXT VERSION for(var i in this.inputs) @@ -1555,7 +1610,10 @@ LGraphNode.prototype.getInputNode = function( slot ) var input = this.inputs[slot]; if(!input || !input.link) return null; - return this.graph.getNodeById( input.link.origin_id ); + var link_info = this.graph.links[ input.link ]; + if(!link_info) + return null; + return this.graph.getNodeById( link_info.origin_id ); } @@ -3448,8 +3506,11 @@ LGraphCanvas.prototype.processDrop = function(e) if(!node) { + var r = null; if(this.onDropItem) - this.onDropItem( event ); + r = this.onDropItem( event ); + if(!r) + this.checkDropItem(e); return; } @@ -3497,6 +3558,26 @@ LGraphCanvas.prototype.processDrop = function(e) return false; } +//called if the graph doesnt have a default drop item behaviour +LGraphCanvas.prototype.checkDropItem = function(e) +{ + if(e.dataTransfer.files.length) + { + var file = e.dataTransfer.files[0]; + var ext = LGraphCanvas.getFileExtension( file.name ).toLowerCase(); + var nodetype = LiteGraph.node_types_by_file_extension[ext]; + if(nodetype) + { + var node = LiteGraph.createNode( nodetype.type ); + node.pos = [e.canvasX, e.canvasY]; + this.graph.add( node ); + if( node.onDropFile ) + node.onDropFile( file ); + } + } +} + + LGraphCanvas.prototype.processNodeSelected = function(n,e) { n.selected = true; @@ -7960,12 +8041,13 @@ GraphicsImage.title = "Image"; GraphicsImage.desc = "Image loader"; GraphicsImage.widgets = [{name:"load",text:"Load",type:"button"}]; +GraphicsImage.supported_extensions = ["jpg","jpeg","png","gif"]; GraphicsImage.prototype.onAdded = function() { if(this.properties["url"] != "" && this.img == null) { - this.loadImage(this.properties["url"]); + this.loadImage( this.properties["url"] ); } } @@ -7997,14 +8079,7 @@ GraphicsImage.prototype.onPropertyChanged = function(name,value) return true; } -GraphicsImage.prototype.onDropFile = function(file, filename) -{ - var img = new Image(); - img.src = file; - this.img = img; -} - -GraphicsImage.prototype.loadImage = function(url) +GraphicsImage.prototype.loadImage = function( url, callback ) { if(url == "") { @@ -8014,7 +8089,6 @@ GraphicsImage.prototype.loadImage = function(url) this.img = document.createElement("img"); - var url = name; if(url.substr(0,7) == "http://") { if(LiteGraph.proxy) //proxy external files @@ -8026,6 +8100,8 @@ GraphicsImage.prototype.loadImage = function(url) var that = this; this.img.onload = function() { + if(callback) + callback(this); that.trace("Image loaded, size: " + that.img.width + "x" + that.img.height ); this.dirty = true; that.boxcolor = "#9F9"; @@ -8041,6 +8117,18 @@ GraphicsImage.prototype.onWidget = function(e,widget) } } +GraphicsImage.prototype.onDropFile = function(file) +{ + var that = this; + if(this._url) + URL.revokeObjectURL( this._url ); + this._url = URL.createObjectURL( file ); + this.properties.url = this._url; + this.loadImage( this._url, function(img){ + that.size[1] = (img.height / img.width) * that.size[0]; + }); +} + LiteGraph.registerNodeType("graphics/image", GraphicsImage); @@ -8311,7 +8399,7 @@ LiteGraph.registerNodeType("graphics/imagefade", ImageFade); function ImageCrop() { this.addInput("","image"); - this.addOutputs("","image"); + this.addOutput("","image"); this.properties = {width:256,height:256,x:0,y:0,scale:1.0 }; this.size = [50,20]; } @@ -8334,7 +8422,8 @@ ImageCrop.prototype.createCanvas = function() ImageCrop.prototype.onExecute = function() { var input = this.getInputData(0); - if(!input) return; + if(!input) + return; if(input.width) { @@ -8347,6 +8436,14 @@ ImageCrop.prototype.onExecute = function() this.setOutputData(0,null); } +ImageCrop.prototype.onDrawBackground = function(ctx) +{ + if(this.flags.collapsed) + return; + if(this.canvas) + ctx.drawImage( this.canvas, 0,0,this.canvas.width,this.canvas.height, 0,0, this.size[0], this.size[1] ); +} + ImageCrop.prototype.onPropertyChanged = function(name,value) { this.properties[name] = value; @@ -8368,7 +8465,7 @@ ImageCrop.prototype.onPropertyChanged = function(name,value) return true; } -LiteGraph.registerNodeType("graphics/cropImage", ImageFade ); +LiteGraph.registerNodeType("graphics/cropImage", ImageCrop ); function ImageVideo() @@ -11908,33 +12005,8 @@ function now() { return window.performance.now() } (function( global ) { -function LGAudio() -{ - this.properties = { - src: "demodata/audio.wav", - gain: 0.5, - loop: true - }; - - this._loading_audio = false; - this._audio_buffer = null; - this._audionodes = []; - - this.addOutput( "out", "audio" ); - this.addInput( "gain", "number" ); - - //init context - var context = LGAudio.getAudioContext(); - - //create gain node - this.audionode = context.createGain(); - this.audionode.graphnode = this; - this.audionode.gain.value = this.properties.gain; - - //debug - if(this.properties.src) - this.loadSound( this.properties.src ); -} +var LGAudio = {}; +global.LGAudio = LGAudio; LGAudio.getAudioContext = function() { @@ -11960,128 +12032,94 @@ LGAudio.getAudioContext = function() LGAudio.connect = function( audionodeA, audionodeB ) { - audionodeA.connect( audionodeB ); - - /* - if(!nodeA.outputs) - nodeA.outputs = []; - nodeA.outputs.push( nodeB ); - if(!nodeB.inputs) - nodeB.inputs = []; - nodeB.inputs.push( nodeA ); - */ + try + { + audionodeA.connect( audionodeB ); + } + catch (err) + { + console.warn("LGraphAudio:",err); + } } LGAudio.disconnect = function( audionodeA, audionodeB ) { - audionodeA.disconnect( audionodeB ); - - /* - if(nodeA.outputs) + try { - var index = nodeA.outputs.indexOf( nodeB ); - if(index != -1) - nodeA.outputs.splice(index,1); + audionodeA.disconnect( audionodeB ); } - if(nodeB.inputs) + catch (err) { - var index = nodeB.inputs.indexOf( nodeA ); - if(index != -1) - nodeB.inputs.splice(index,1); - } - */ -} - -LGAudio.prototype.onAdded = function(graph) -{ - if(graph.status === LGraph.STATUS_RUNNING) - this.onStart(); -} - -LGAudio.prototype.onStart = function() -{ - if(!this._audio_buffer) - return; - - this.playBuffer( this._audio_buffer ); -} - -LGAudio.prototype.onStop = function() -{ - this.stopAllSounds(); -} - -LGAudio.prototype.onRemoved = function() -{ - this.stopAllSounds(); -} - -LGAudio.prototype.stopAllSounds = function() -{ - //iterate and stop - for(var i = 0; i < this._audionodes.length; ++i ) - { - this._audionodes[i].stop(); - //this._audionodes[i].disconnect( this.audionode ); - } - this._audionodes.length = 0; -} - -LGAudio.prototype.onExecute = function() -{ - var v = this.getInputData(0); - if( v !== undefined ) - this.audionode.gain.value = v; -} - -LGAudio.prototype.onAction = function(event) -{ - if(this._audio_buffer) - { - if(event == "Play") - this.playBuffer(this._audio_buffer); - else if(event == "Stop") - this.stopAllSounds(); + console.warn("LGraphAudio:",err); } } -LGAudio.prototype.onPropertyChanged = function( name, value ) +LGAudio.changeAllAudiosConnections = function( node, connect ) { - if( name == "src" ) - this.loadSound( value ); - else if(name == "gain") - this.audionode.gain.value = value; -} - -LGAudio.prototype.playBuffer = function( buffer ) -{ - var that = this; - var context = LGAudio.getAudioContext(); - - //create a new audionode (this is mandatory, AudioAPI doesnt like to reuse old ones) - var audionode = context.createBufferSource(); //create a AudioBufferSourceNode - audionode.graphnode = this; - audionode.buffer = buffer; - audionode.loop = this.properties.loop; - this._audionodes.push( audionode ); - audionode.connect( this.audionode ); //connect to gain - this._audionodes.push( audionode ); - - audionode.onended = function() + if(node.inputs) { - console.log("ended!"); - that.trigger("ended"); - //remove - var index = that._audionodes.indexOf( audionode ); - if(index != -1) - that._audionodes.splice(index,1); + for(var i = 0; i < node.inputs.length; ++i) + { + var input = node.inputs[i]; + var link_info = node.graph.links[ input.link ]; + if(!link_info) + continue; + + var origin_node = node.graph.getNodeById( link_info.origin_id ); + var origin_audionode = null; + if( origin_node.getAudioNodeInOutputSlot ) + origin_audionode = origin_node.getAudioNodeInOutputSlot( link_info.origin_slot ); + else + origin_audionode = origin_node.audionode; + + var target_audionode = null; + if( node.getAudioNodeInInputSlot ) + target_audionode = node.getAudioNodeInInputSlot( i ); + else + target_audionode = node.audionode; + + if(connect) + LGAudio.connect( origin_audionode, target_audionode ); + else + LGAudio.disconnect( origin_audionode, target_audionode ); + } } - audionode.start(); - return audionode; + if(node.outputs) + { + for(var i = 0; i < node.outputs.length; ++i) + { + var output = node.outputs[i]; + for(var j = 0; j < output.links.length; ++j) + { + var link_info = node.graph.links[ output.links[j] ]; + if(!link_info) + continue; + + var origin_audionode = null; + if( node.getAudioNodeInOutputSlot ) + origin_audionode = node.getAudioNodeInOutputSlot( i ); + else + origin_audionode = node.audionode; + + var target_node = node.graph.getNodeById( link_info.target_id ); + var target_audionode = null; + if( target_node.getAudioNodeInInputSlot ) + target_audionode = target_node.getAudioNodeInInputSlot( link_info.target_slot ); + else + target_audionode = target_node.audionode; + + if(connect) + LGAudio.connect( origin_audionode, target_audionode ); + else + LGAudio.disconnect( origin_audionode, target_audionode ); + } + } + } } -LGAudio.prototype.onConnectionsChange = function( connection, slot, connected, link_info ) +//used by many nodes +LGAudio.onConnectionsChange = function( connection, slot, connected, link_info ) { //only process the outputs events if(connection != LiteGraph.OUTPUT) @@ -12094,23 +12132,169 @@ LGAudio.prototype.onConnectionsChange = function( connection, slot, connected, l if( !target_node ) return; - if( connected ) - { - if(target_node.connectAudioToSlot) - target_node.connectAudioToSlot( this.audionode, link_info.target_slot ); - else - LGAudio.connect( this.audionode, target_node.audionode ); - } + //get origin audionode + var local_audionode = null; + if(this.getAudioNodeInOutputSlot) + local_audionode = this.getAudioNodeInOutputSlot( slot ); else + local_audionode = this.audionode; + + //get target audionode + var target_audionode = null; + if(target_node.getAudioNodeInInputSlot) + target_audionode = target_node.getAudioNodeInInputSlot( link_info.target_slot ); + else + target_audionode = target_node.audionode; + + //do the connection/disconnection + if( connected ) + LGAudio.connect( local_audionode, target_audionode ); + else + LGAudio.disconnect( local_audionode, target_audionode ); +} + + +//**************************************************** + +function LGAudioSource() +{ + this.properties = { + src: "demodata/audio.wav", + gain: 0.5, + loop: true, + autoplay: true, + playbackRate: 1 + }; + + this._loading_audio = false; + this._audio_buffer = null; + this._audionodes = []; + + this.addOutput( "out", "audio" ); + this.addInput( "gain", "number" ); + + //init context + var context = LGAudio.getAudioContext(); + + //create gain node + this.audionode = context.createGain(); + this.audionode.graphnode = this; + this.audionode.gain.value = this.properties.gain; + + //debug + if(this.properties.src) + this.loadSound( this.properties.src ); +} + +LGAudioSource.supported_extensions = ["wav","ogg","mp3"]; + + +LGAudioSource.prototype.onAdded = function(graph) +{ + if(graph.status === LGraph.STATUS_RUNNING) + this.onStart(); +} + +LGAudioSource.prototype.onStart = function() +{ + if(!this._audio_buffer) + return; + + if(this.properties.autoplay) + this.playBuffer( this._audio_buffer ); +} + +LGAudioSource.prototype.onStop = function() +{ + this.stopAllSounds(); +} + +LGAudioSource.prototype.onRemoved = function() +{ + this.stopAllSounds(); +} + +LGAudioSource.prototype.stopAllSounds = function() +{ + //iterate and stop + for(var i = 0; i < this._audionodes.length; ++i ) { - if(target_node.disconnectAudioFromSlot) - target_node.disconnectAudioFromSlot( this.audionode, link_info.target_slot ); - else - LGAudio.disconnect( this.audionode, target_node.audionode ); + this._audionodes[i].stop(); + //this._audionodes[i].disconnect( this.audionode ); + } + this._audionodes.length = 0; +} + +LGAudioSource.prototype.onExecute = function() +{ + if(!this.inputs) + return; + + for(var i = 0; i < this.inputs.length; ++i) + { + var input = this.inputs[i]; + if(!input.link) + continue; + + var v = this.getInputData(i); + if( v === undefined ) + continue; + if( input.name == "gain" ) + this.audionode.gain.value = v; + else if( input.name == "playbackRate" ) + this.properties.playbackRate = v; } } -LGAudio.prototype.loadSound = function( url ) +LGAudioSource.prototype.onAction = function(event) +{ + if(this._audio_buffer) + { + if(event == "Play") + this.playBuffer(this._audio_buffer); + else if(event == "Stop") + this.stopAllSounds(); + } +} + +LGAudioSource.prototype.onPropertyChanged = function( name, value ) +{ + if( name == "src" ) + this.loadSound( value ); + else if(name == "gain") + this.audionode.gain.value = value; +} + +LGAudioSource.prototype.playBuffer = function( buffer ) +{ + var that = this; + var context = LGAudio.getAudioContext(); + + //create a new audionode (this is mandatory, AudioAPI doesnt like to reuse old ones) + var audionode = context.createBufferSource(); //create a AudioBufferSourceNode + audionode.graphnode = this; + audionode.buffer = buffer; + audionode.loop = this.properties.loop; + audionode.playbackRate.value = this.properties.playbackRate; + this._audionodes.push( audionode ); + audionode.connect( this.audionode ); //connect to gain + this._audionodes.push( audionode ); + + audionode.onended = function() + { + //console.log("ended!"); + that.trigger("ended"); + //remove + var index = that._audionodes.indexOf( audionode ); + if(index != -1) + that._audionodes.splice(index,1); + } + + audionode.start(); + return audionode; +} + +LGAudioSource.prototype.loadSound = function( url ) { var that = this; @@ -12140,6 +12324,12 @@ LGAudio.prototype.loadSound = function( url ) request.onload = function() { context.decodeAudioData( request.response, function(buffer) { that._audio_buffer = buffer; + if(that._url) + { + URL.revokeObjectURL( that._url ); + that._url = null; + } + that._loading_audio = false; //if is playing, then play it if(that.graph && that.graph.status === LGraph.STATUS_RUNNING) @@ -12154,21 +12344,33 @@ LGAudio.prototype.loadSound = function( url ) } } -LGAudio.prototype.onGetInputs = function() +//Helps connect/disconnect AudioNodes when new connections are made in the node +LGAudioSource.prototype.onConnectionsChange = LGAudio.onConnectionsChange; + +LGAudioSource.prototype.onGetInputs = function() { - return [["Play",LiteGraph.ACTION],["Stop",LiteGraph.ACTION]]; + return [["playbackRate","number"],["Play",LiteGraph.ACTION],["Stop",LiteGraph.ACTION]]; } -LGAudio.prototype.onGetOutputs = function() +LGAudioSource.prototype.onGetOutputs = function() { return [["ended",LiteGraph.EVENT]]; } +LGAudioSource.prototype.onDropFile = function(file) +{ + if(this._url) + URL.revokeObjectURL( this._url ); + this._url = URL.createObjectURL( file ); + this.properties.src = this._url; + this.loadSound( this._url ); +} + + +LGAudioSource.title = "Source"; +LGAudioSource.desc = "Plays audio"; +LiteGraph.registerNodeType("audio/source", LGAudioSource); -LGAudio.title = "Source"; -LGAudio.desc = "Plays audio"; -LiteGraph.registerNodeType("audio/source", LGAudio); -global.LGAudio = LGAudio; //***************************************************** @@ -12191,7 +12393,7 @@ function LGAudioAnalyser() this.audionode.smoothingTimeConstant = this.properties.smoothingTimeConstant; this.addInput("in","audio"); - this.addOutput("freqs","FFT"); + this.addOutput("freqs","array"); //this.addOutput("time","freq"); this._freq_bin = null; @@ -12256,33 +12458,7 @@ function createAudioNodeWrapper( class_object ) this.audionode[ name ] = value; } - class_object.prototype.onConnectionsChange = function( connection, slot, connected, link_info ) - { - //only process the outputs events - if(connection != LiteGraph.OUTPUT) - return; - - var target_node = null; - if( link_info ) - target_node = this.graph.getNodeById( link_info.target_id ); - if( !target_node ) - return; - - if( connected ) - { - if(target_node.connectAudioToSlot) - target_node.connectAudioToSlot( this.audionode, link_info.target_slot ); - else - LGAudio.connect( this.audionode, target_node.audionode ); - } - else - { - if(target_node.disconnectAudioFromSlot) - target_node.disconnectAudioFromSlot( this.audionode, link_info.target_slot ); - else - LGAudio.disconnect( this.audionode, target_node.audionode ); - } - } + class_object.prototype.onConnectionsChange = LGAudio.onConnectionsChange; } @@ -12322,6 +12498,44 @@ LGAudioGain.desc = "Audio gain"; LiteGraph.registerNodeType("audio/gain", LGAudioGain); + + + +function LGAudioWaveShaper() +{ + //default + this.properties = { + }; + + this.audionode = LGAudio.getAudioContext().createWaveShaper(); + this.addInput("in","audio"); + this.addInput("shape","waveshape"); + this.addOutput("out","audio"); +} + +LGAudioWaveShaper.prototype.onExecute = function() +{ + if(!this.inputs || !this.inputs.length) + return; + var v = this.getInputData(1); + if(v === undefined) + return; + this.audionode.curve = v; +} + +LGAudioWaveShaper.prototype.setWaveShape = function(shape) +{ + this.audionode.curve = shape; +} + +createAudioNodeWrapper( LGAudioWaveShaper ); + +/* disabled till I dont find a way to do a wave shape +LGAudioWaveShaper.title = "WaveShaper"; +LGAudioWaveShaper.desc = "Distortion using wave shape"; +LiteGraph.registerNodeType("audio/waveShaper", LGAudioWaveShaper); +*/ + function LGAudioMixer() { //default @@ -12348,20 +12562,12 @@ function LGAudioMixer() this.addOutput("out","audio"); } -LGAudioMixer.prototype.connectAudioToSlot = function( audionode, slot ) +LGAudioMixer.prototype.getAudioNodeInInputSlot = function( slot ) { if(slot == 0) - LGAudio.connect( audionode, this.audionode1 ); + return this.audionode1; else if(slot == 2) - LGAudio.connect( audionode, this.audionode2 ); -} - -LGAudioMixer.prototype.disconnectAudioFromSlot = function( audionode, slot ) -{ - if(slot == 0) - LGAudio.disconnect( audionode, this.audionode1 ); - else if(slot == 2) - LGAudio.disconnect( audionode, this.audionode2 ); + return this.audionode2; } LGAudioMixer.prototype.onExecute = function() @@ -12397,46 +12603,23 @@ function LGAudioDelay() { //default this.properties = { - time: 5 + delayTime: 0.5 }; - this.audionode = LGAudio.getAudioContext().createDelay( this.properties.time ); + this.audionode = LGAudio.getAudioContext().createDelay( 10 ); + this.audionode.delayTime.value = this.properties.delayTime; this.addInput("in","audio"); + this.addInput("time","number"); this.addOutput("out","audio"); } createAudioNodeWrapper( LGAudioDelay ); -LGAudioDelay.prototype.onPropertyChanged = function( name, value ) +LGAudioDelay.prototype.onExecute = function() { - if(name == "time") - { - if(value > 500) - value = 500; - if(value < 0) - value = 0; - - var input_node = this.getInputNode(0); - var output_nodes = this.getOutputNodes(0); - - if(input_node) - input_node.audionode.disconnect( this.audionode ); - if(output_nodes) - { - for(var i = 0; i < output_nodes.length; ++i) - this.audionode.disconnect( output_nodes[i].audionode ); - } - - this.audionode = LGAudio.getAudioContext().createDelay( value ); - - if(input_node) - input_node.audionode.connect( this.audionode ); - if(output_nodes) - { - for(var i = 0; i < output_nodes.length; ++i) - this.audionode.connect( output_nodes[i].audionode ); - } - } + var v = this.getInputData(1); + if(v !== undefined ) + this.audionode.delayTime.value = v; } LGAudioDelay.title = "Delay"; @@ -12490,25 +12673,16 @@ LiteGraph.registerNodeType("audio/biquadfilter", LGAudioBiquadFilter); //***************************************************** -function LGAudioDestination() -{ - this.audionode = LGAudio.getAudioContext().destination; - this.addInput("in","audio"); -} - - -LGAudioDestination.title = "Destination"; -LGAudioDestination.desc = "Audio output"; -LiteGraph.registerNodeType("audio/destination", LGAudioDestination); - - - //EXTRA function LGAudioVisualization() { - this.addInput("freqs","FFT"); + this.properties = { + continuous: true + }; + + this.addInput("freqs","array"); this.size = [300,200]; this._last_buffer = null; } @@ -12533,11 +12707,24 @@ LGAudioVisualization.prototype.onDrawForeground = function(ctx) ctx.strokeStyle = "white"; ctx.beginPath(); var x = 0; - for(var i = 0; i < buffer.length; i+= delta) + + if(this.properties.continuous) { ctx.moveTo(x,h); - ctx.lineTo(x,h - (buffer[i|0]/255) * h); - x++; + for(var i = 0; i < buffer.length; i+= delta) + { + ctx.lineTo(x,h - (buffer[i|0]/255) * h); + x++; + } + } + else + { + for(var i = 0; i < buffer.length; i+= delta) + { + ctx.moveTo(x,h); + ctx.lineTo(x,h - (buffer[i|0]/255) * h); + x++; + } } ctx.stroke(); } @@ -12548,4 +12735,18 @@ LiteGraph.registerNodeType("audio/visualization", LGAudioVisualization); +function LGAudioDestination() +{ + this.audionode = LGAudio.getAudioContext().destination; + this.addInput("in","audio"); +} + + +LGAudioDestination.title = "Destination"; +LGAudioDestination.desc = "Audio output"; +LiteGraph.registerNodeType("audio/destination", LGAudioDestination); + + + + })( window ); diff --git a/build/litegraph.min.js b/build/litegraph.min.js index e82e74e4b..76750ff49 100755 --- a/build/litegraph.min.js +++ b/build/litegraph.min.js @@ -1,10 +1,11 @@ -var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,CANVAS_GRID_SIZE:10,NODE_TITLE_COLOR:"#222",NODE_DEFAULT_COLOR:"#999",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",INPUT:1,OUTPUT:2,EVENT:-1,ACTION:-1,ALWAYS:0,ON_EVENT:1,NEVER:2,proxy:null,debug:!1,throw_errors:!0,registered_node_types:{},Nodes:{},registerNodeType:function(a, -b){if(!b.prototype)throw"Cannot register a simple object, it must be a class with a prototype";b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");b.category=a.substr(0,c);if(b.prototype)for(var d in LGraphNode.prototype)b.prototype[d]||(b.prototype[d]=LGraphNode.prototype[d]);this.registered_node_types[a]=b;b.constructor.name&&(this.Nodes[b.constructor.name]=b);b.prototype.onPropertyChange&&console.warn("LiteGraph node class "+a+" has onPropertyChange method, it must be called onPropertyChanged with d at the end")}, -addNodeMethod:function(a,b){LGraphNode.prototype[a]=b;for(var c in this.registered_node_types)this.registered_node_types[c].prototype[a]=b},createNode:function(a,b,c){var d=this.registered_node_types[a];if(!d)return LiteGraph.debug&&console.log('GraphNode type "'+a+'" not registered.'),null;b=b||d.title||a;d=new d(name);d.type=a;d.title||(d.title=b);d.properties||(d.properties={});d.properties_info||(d.properties_info=[]);d.flags||(d.flags={});d.size||(d.size=d.computeSize());d.pos||(d.pos=LiteGraph.DEFAULT_POSITION.concat()); -d.mode||(d.mode=LiteGraph.ALWAYS);if(c)for(var e in c)d[e]=c[e];return d},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a){var b=[],c;for(c in this.registered_node_types)""==a?null==this.registered_node_types[c].category&&b.push(this.registered_node_types[c]):this.registered_node_types[c].category==a&&b.push(this.registered_node_types[c]);return b},getNodeTypesCategories:function(){var a={"":1},b;for(b in this.registered_node_types)this.registered_node_types[b].category&& -!this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),c=[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0];a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g; -LiteGraph.debug&&console.log("Error while reloading "+e)}}LiteGraph.debug&&console.log("Nodes reloaded")},cloneObject:function(a,b){if(null==a)return null;var c=JSON.parse(JSON.stringify(a));if(!b)return c;for(var d in c)b[d]=c[d];return b},isValidConnection:function(a,b){return!a||!b||a==a||a!==LiteGraph.EVENT&&b!==LiteGraph.EVENT&&a.toLowerCase()==b.toLowerCase()?!0:!1}};LiteGraph.getTime="undefined"!=typeof performance?function(){return performance.now()}:function(){return Date.now()}; -function LGraph(){LiteGraph.debug&&console.log("Graph created");this.list_of_graphcanvas=null;this.clear()}LGraph.supported_types=["number","string","boolean"];LGraph.prototype.getSupportedTypes=function(){return this.supported_types||LGraph.supported_types};LGraph.STATUS_STOPPED=1;LGraph.STATUS_RUNNING=2; +var LiteGraph={NODE_TITLE_HEIGHT:16,NODE_SLOT_HEIGHT:15,NODE_WIDTH:140,NODE_MIN_WIDTH:50,NODE_COLLAPSED_RADIUS:10,NODE_COLLAPSED_WIDTH:80,CANVAS_GRID_SIZE:10,NODE_TITLE_COLOR:"#222",NODE_DEFAULT_COLOR:"#999",NODE_DEFAULT_BGCOLOR:"#444",NODE_DEFAULT_BOXCOLOR:"#AEF",NODE_DEFAULT_SHAPE:"box",MAX_NUMBER_OF_NODES:1E3,DEFAULT_POSITION:[100,100],node_images_path:"",INPUT:1,OUTPUT:2,EVENT:-1,ACTION:-1,ALWAYS:0,ON_EVENT:1,NEVER:2,proxy:null,debug:!1,throw_errors:!0,registered_node_types:{},node_types_by_file_extension:{}, +Nodes:{},registerNodeType:function(a,b){if(!b.prototype)throw"Cannot register a simple object, it must be a class with a prototype";b.type=a;LiteGraph.debug&&console.log("Node registered: "+a);a.split("/");var c=a.lastIndexOf("/");b.category=a.substr(0,c);if(b.prototype)for(var d in LGraphNode.prototype)b.prototype[d]||(b.prototype[d]=LGraphNode.prototype[d]);this.registered_node_types[a]=b;b.constructor.name&&(this.Nodes[b.constructor.name]=b);b.prototype.onPropertyChange&&console.warn("LiteGraph node class "+ +a+" has onPropertyChange method, it must be called onPropertyChanged with d at the end");if(b.supported_extensions)for(d in b.supported_extensions)this.node_types_by_file_extension[b.supported_extensions[d].toLowerCase()]=b},addNodeMethod:function(a,b){LGraphNode.prototype[a]=b;for(var c in this.registered_node_types)this.registered_node_types[c].prototype[a]=b},createNode:function(a,b,c){var d=this.registered_node_types[a];if(!d)return LiteGraph.debug&&console.log('GraphNode type "'+a+'" not registered.'), +null;b=b||d.title||a;d=new d(name);d.type=a;d.title||(d.title=b);d.properties||(d.properties={});d.properties_info||(d.properties_info=[]);d.flags||(d.flags={});d.size||(d.size=d.computeSize());d.pos||(d.pos=LiteGraph.DEFAULT_POSITION.concat());d.mode||(d.mode=LiteGraph.ALWAYS);if(c)for(var e in c)d[e]=c[e];return d},getNodeType:function(a){return this.registered_node_types[a]},getNodeTypesInCategory:function(a){var b=[],c;for(c in this.registered_node_types)""==a?null==this.registered_node_types[c].category&& +b.push(this.registered_node_types[c]):this.registered_node_types[c].category==a&&b.push(this.registered_node_types[c]);return b},getNodeTypesCategories:function(){var a={"":1},b;for(b in this.registered_node_types)this.registered_node_types[b].category&&!this.registered_node_types[b].skip_list&&(a[this.registered_node_types[b].category]=1);var c=[];for(b in a)c.push(b);return c},reloadNodes:function(a){var b=document.getElementsByTagName("script"),c=[],d;for(d in b)c.push(b[d]);b=document.getElementsByTagName("head")[0]; +a=document.location.href+a;for(d in c){var e=c[d].src;if(e&&e.substr(0,a.length)==a)try{LiteGraph.debug&&console.log("Reloading: "+e);var f=document.createElement("script");f.type="text/javascript";f.src=e;b.appendChild(f);b.removeChild(c[d])}catch(g){if(LiteGraph.throw_errors)throw g;LiteGraph.debug&&console.log("Error while reloading "+e)}}LiteGraph.debug&&console.log("Nodes reloaded")},cloneObject:function(a,b){if(null==a)return null;var c=JSON.parse(JSON.stringify(a));if(!b)return c;for(var d in c)b[d]= +c[d];return b},isValidConnection:function(a,b){return!a||!b||a==a||a!==LiteGraph.EVENT&&b!==LiteGraph.EVENT&&a.toLowerCase()==b.toLowerCase()?!0:!1}};LiteGraph.getTime="undefined"!=typeof performance?function(){return performance.now()}:function(){return Date.now()};function LGraph(){LiteGraph.debug&&console.log("Graph created");this.list_of_graphcanvas=null;this.clear()}LGraph.supported_types=["number","string","boolean"]; +LGraph.prototype.getSupportedTypes=function(){return this.supported_types||LGraph.supported_types};LGraph.STATUS_STOPPED=1;LGraph.STATUS_RUNNING=2; LGraph.prototype.clear=function(){this.stop();this.status=LGraph.STATUS_STOPPED;this.last_node_id=0;this._nodes=[];this._nodes_by_id={};this.last_link_id=0;this.links={};this.iteration=0;this.config={};this.fixedtime=this.runningtime=this.globaltime=0;this.elapsed_time=this.fixedtime_lapse=0.01;this.starttime=0;this.global_inputs={};this.global_outputs={};this.debug=!0;this.change();this.sendActionToCanvas("clear")}; LGraph.prototype.attachCanvas=function(a){if(a.constructor!=LGraphCanvas)throw"attachCanvas expects a LGraphCanvas instance";a.graph&&a.graph!=this&&a.graph.detachCanvas(a);a.graph=this;this.list_of_graphcanvas||(this.list_of_graphcanvas=[]);this.list_of_graphcanvas.push(a)};LGraph.prototype.detachCanvas=function(a){if(this.list_of_graphcanvas){var b=this.list_of_graphcanvas.indexOf(a);-1!=b&&(a.graph=null,this.list_of_graphcanvas.splice(b,1))}}; LGraph.prototype.start=function(a){if(this.status!=LGraph.STATUS_RUNNING){this.status=LGraph.STATUS_RUNNING;if(this.onPlayEvent)this.onPlayEvent();this.sendEventToAllNodes("onStart");this.starttime=LiteGraph.getTime();var b=this;this.execution_timer_id=setInterval(function(){b.runStep(1)},a||1)}}; @@ -27,15 +28,17 @@ LGraph.prototype.changeGlobalOutputType=function(a,b){if(!this.global_outputs[a] LGraph.prototype.setInputData=function(a,b){for(var c=this.findNodesByName(a),d=0,e=c.length;d!a.length||(this._pos[0]=a[0],this._pos[1]=a[1])},get:function(){return this._pos},enumerable:!0});this.id=-1;this.type=null;this.inputs=[];this.outputs=[];this.connections=[];this.properties={};this.properties_info=[];this.data=null;this.flags={}}; -LGraphNode.prototype.configure=function(a){for(var b in a)if("console"!=b)if("properties"==b)for(var c in a.properties){if(this.properties[c]=a.properties[c],this.onPropertyChanged)this.onPropertyChanged(c,a.properties[c])}else null!=a[b]&&("object"==typeof a[b]?this[b]&&this[b].configure?this[b].configure(a[b]):this[b]=LiteGraph.cloneObject(a[b],this[b]):this[b]=a[b]);if(this.onConnectionsChange)this.onConnectionsChange();for(var d in this.inputs){var e=this.inputs[d];e.link&&e.link.length&&(c=e.link, -"object"==typeof c&&(e.link=c[0],this.graph.links[c[0]]={id:c[0],origin_id:c[1],origin_slot:c[2],target_id:c[3],target_slot:c[4]}))}for(d in this.outputs)if(e=this.outputs[d],e.links&&0!=e.links.length)for(b in e.links)c=e.links[b],"object"==typeof c&&(e.links[b]=c[0]);if(this.onConfigured)this.onConfigured(a)}; +LGraphNode.prototype.configure=function(a){for(var b in a)if("console"!=b)if("properties"==b)for(var c in a.properties){if(this.properties[c]=a.properties[c],this.onPropertyChanged)this.onPropertyChanged(c,a.properties[c])}else null!=a[b]&&("object"==typeof a[b]?this[b]&&this[b].configure?this[b].configure(a[b]):this[b]=LiteGraph.cloneObject(a[b],this[b]):this[b]=a[b]);if(this.onConnectionsChange){if(this.inputs)for(var d=0;d=this.inputs.length||null==this.inputs[a].link)){var c=this.graph.links[this.inputs[a].link];if(!b)return c.data;var d=this.graph.getNodeById(c.origin_id);if(!d)return c.data;if(d.updateOutputData)d.updateOutputData(c.origin_slot);else if(d.onExecute)d.onExecute();return c.data}};LGraphNode.prototype.isInputConnected=function(a){return this.inputs?a=this.inputs.length?null:(a=this.inputs[a])&&a.link?this.graph.getNodeById(a.link.origin_id):null};LGraphNode.prototype.getOutputInfo=function(a){return this.outputs?a=this.inputs.length)return null;a=this.inputs[a];return a&&a.link?(a=this.graph.links[a.link])?this.graph.getNodeById(a.origin_id):null:null};LGraphNode.prototype.getOutputInfo=function(a){return this.outputs?athis.max_zoom?this.scale=this.max_zoom:this.scalec&&0.01>b.editor_alpha&&(clearInterval(d),1>c&&(b.live_mode=!0));1"+h+""+(void 0!==a.properties[h]?a.properties[h]:" ")+"",value:h});if(g.length)return LiteGraph.createContextMenu(g,{event:b,callback:d,from:c},f),!1}}; -LGraphCanvas.prototype.showEditPropertyValue=function(a,b,c){function d(){e(q.value)}function e(c){"number"==typeof a.properties[b]&&(c=Number(c));a.properties[b]=c;if(a.onPropertyChanged)a.onPropertyChanged(b,c);l.parentNode.removeChild(l);a.setDirtyCanvas(!0,!0)}if(a&&void 0!==a.properties[b]){c=c||{};var f="string";null!==a.properties[b]&&(f=typeof a.properties[b]);var g=null;a.getPropertyInfo&&(g=a.getPropertyInfo(b));if(a.properties_info)for(var h=0;h";else if("enum"==f&&g.values){k=""}else"boolean"==f&&(k="");var l=document.createElement("div");l.className="graphdialog";l.innerHTML=""+b+""+k+"";if("enum"==f&&g.values){var q=l.querySelector("select");q.addEventListener("change",function(a){e(a.target.value)})}else if("boolean"==f)(q=l.querySelector("input"))&&q.addEventListener("click",function(a){e(!!q.checked)});else if(q=l.querySelector("input"))q.value=void 0!==a.properties[b]?a.properties[b]:"",q.addEventListener("keydown",function(a){13== +"checked":"")+"/>");var l=document.createElement("div");l.className="graphdialog";l.innerHTML=""+b+""+k+"";if("enum"==f&&g.values){var p=l.querySelector("select");p.addEventListener("change",function(a){e(a.target.value)})}else if("boolean"==f)(p=l.querySelector("input"))&&p.addEventListener("click",function(a){e(!!p.checked)});else if(p=l.querySelector("input"))p.value=void 0!==a.properties[b]?a.properties[b]:"",p.addEventListener("keydown",function(a){13== a.keyCode&&(d(),a.preventDefault(),a.stopPropagation())});f=this.canvas.getClientRects()[0];h=g=-20;f&&(g-=f.left,h-=f.top);c.event?(l.style.left=c.event.pageX+g+"px",l.style.top=c.event.pageY+h+"px"):(l.style.left=0.5*this.canvas.width+g+"px",l.style.top=0.5*this.canvas.height+h+"px");l.querySelector("button").addEventListener("click",d);this.canvas.parentNode.appendChild(l)}};LGraphCanvas.onMenuNodeCollapse=function(a){a.flags.collapsed=!a.flags.collapsed;a.setDirtyCanvas(!0,!0)}; LGraphCanvas.onMenuNodePin=function(a){a.pin()};LGraphCanvas.onMenuNodeMode=function(a,b,c){LiteGraph.createContextMenu(["Always","On Event","Never"],{event:b,callback:function(b){if(a)switch(b){case "On Event":a.mode=LiteGraph.ON_EVENT;break;case "Never":a.mode=LiteGraph.NEVER;break;default:a.mode=LiteGraph.ALWAYS}},from:c});return!1}; LGraphCanvas.onMenuNodeColors=function(a,b,c){var d=[],e;for(e in LGraphCanvas.node_colors){var f=LGraphCanvas.node_colors[e];d.push({value:e,content:""+e+""})}LiteGraph.createContextMenu(d,{event:b,callback:function(b){a&&(b=LGraphCanvas.node_colors[b.value])&&(a.color=b.color,a.bgcolor=b.bgcolor,a.setDirtyCanvas(!0))},from:c});return!1}; @@ -206,7 +210,7 @@ c;return a}};a.prototype.onDrawBackground=function(a){};a.prototype.onGetOutputs "number"]]};LiteGraph.registerNodeType("input/gamepad",a)})(); (function(){function a(){this.addInput("in","*");this.size=[60,20]}function b(){this.addInput("in");this.addOutput("out");this.size=[60,20]}function c(){this.addInput("in","number",{locked:!0});this.addOutput("out","number",{locked:!0});this.addProperty("in",0);this.addProperty("in_min",0);this.addProperty("in_max",1);this.addProperty("out_min",0);this.addProperty("out_max",1)}function d(){this.addOutput("value","number");this.addProperty("min",0);this.addProperty("max",1);this.size=[60,20]}function e(){this.addInput("in", "number");this.addOutput("out","number");this.size=[60,20];this.addProperty("min",0);this.addProperty("max",1)}function f(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20]}function g(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20]}function h(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20]}function k(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20];this.properties={A:0,B:1}} -function n(){this.addInput("in","number",{label:""});this.addOutput("out","number",{label:""});this.size=[60,20];this.addProperty("factor",1)}function l(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20];this.addProperty("samples",10);this._values=new Float32Array(10);this._current=0}function q(){this.addInput("A","number");this.addInput("B","number");this.addOutput("=","number");this.addProperty("A",1);this.addProperty("B",1);this.addProperty("OP","+","string",{values:q.values})} +function n(){this.addInput("in","number",{label:""});this.addOutput("out","number",{label:""});this.size=[60,20];this.addProperty("factor",1)}function l(){this.addInput("in","number");this.addOutput("out","number");this.size=[60,20];this.addProperty("samples",10);this._values=new Float32Array(10);this._current=0}function p(){this.addInput("A","number");this.addInput("B","number");this.addOutput("=","number");this.addProperty("A",1);this.addProperty("B",1);this.addProperty("OP","+","string",{values:p.values})} function r(){this.addInput("A","number");this.addInput("B","number");this.addOutput("A==B","boolean");this.addOutput("A!=B","boolean");this.addProperty("A",0);this.addProperty("B",0)}function s(){this.addInput("A","number");this.addInput("B","number");this.addOutput("out","boolean");this.addProperty("A",1);this.addProperty("B",1);this.addProperty("OP",">","string",{values:s.values});this.size=[60,40]}function u(){this.addInput("inc","number");this.addOutput("total","number");this.addProperty("increment", 1);this.addProperty("value",0)}function t(){this.addInput("v","number");this.addOutput("sin","number");this.addProperty("amplitude",1);this.addProperty("offset",0);this.bgImageUrl="nodes/imgs/icon-sin.png"}function v(){this.addInput("vec2","vec2");this.addOutput("x","number");this.addOutput("y","number")}function w(){this.addInputs([["x","number"],["y","number"]]);this.addOutput("vec2","vec2");this.properties={x:0,y:0};this._data=new Float32Array(2)}function x(){this.addInput("vec3","vec3");this.addOutput("x", "number");this.addOutput("y","number");this.addOutput("z","number")}function y(){this.addInputs([["x","number"],["y","number"],["z","number"]]);this.addOutput("vec3","vec3");this.properties={x:0,y:0,z:0};this._data=new Float32Array(3)}function z(){this.addInput("vec4","vec4");this.addOutput("x","number");this.addOutput("y","number");this.addOutput("z","number");this.addOutput("w","number")}function A(){this.addInputs([["x","number"],["y","number"],["z","number"],["w","number"]]);this.addOutput("vec4", @@ -218,44 +222,44 @@ function(a){this.outputs[0].label=this._last_v?this._last_v.toFixed(3):"?"};d.pr "clamp({{0}},"+this.properties.min+","+this.properties.max+")");return a};LiteGraph.registerNodeType("math/clamp",e);f.title="Abs";f.desc="Absolute";f.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&this.setOutputData(0,Math.abs(a))};LiteGraph.registerNodeType("math/abs",f);g.title="Floor";g.desc="Floor number to remove fractional part";g.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&this.setOutputData(0,Math.floor(a))};LiteGraph.registerNodeType("math/floor", g);h.title="Frac";h.desc="Returns fractional part";h.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&this.setOutputData(0,a%1)};LiteGraph.registerNodeType("math/frac",h);k.title="Smoothstep";k.desc="Smoothstep";k.prototype.onExecute=function(){var a=this.getInputData(0);if(void 0!==a){var b=this.properties.A,a=Math.clamp((a-b)/(this.properties.B-b),0,1);this.setOutputData(0,a*a*(3-2*a))}};LiteGraph.registerNodeType("math/smoothstep",k);n.title="Scale";n.desc="v * factor";n.prototype.onExecute= function(){var a=this.getInputData(0);null!=a&&this.setOutputData(0,a*this.properties.factor)};LiteGraph.registerNodeType("math/scale",n);l.title="Average";l.desc="Average Filter";l.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=0);var b=this._values.length;this._values[this._current%b]=a;this._current+=1;this._current>b&&(this._current=0);for(var c=a=0;cb&&(b=1);this.properties.samples= -Math.round(b);var c=this._values;this._values=new Float32Array(this.properties.samples);c.length<=this._values.length?this._values.set(c):this._values.set(c.subarray(0,this._values.length))};LiteGraph.registerNodeType("math/average",l);q.values="+-*/%^".split("");q.title="Operation";q.desc="Easy math operators";q["@OP"]={type:"enum",title:"operation",values:q.values};q.prototype.setValue=function(a){"string"==typeof a&&(a=parseFloat(a));this.properties.value=a};q.prototype.onExecute=function(){var a= -this.getInputData(0),b=this.getInputData(1);null!=a?this.properties.A=a:a=this.properties.A;null!=b?this.properties.B=b:b=this.properties.B;var c=0;switch(this.properties.OP){case "+":c=a+b;break;case "-":c=a-b;break;case "x":case "X":case "*":c=a*b;break;case "/":c=a/b;break;case "%":c=a%b;break;case "^":c=Math.pow(a,b);break;default:console.warn("Unknown operation: "+this.properties.OP)}this.setOutputData(0,c)};q.prototype.onDrawBackground=function(a){this.flags.collapsed||(a.font="40px Arial", -a.fillStyle="black",a.textAlign="center",a.fillText(this.properties.OP,0.5*this.size[0],0.5*this.size[1]+LiteGraph.NODE_TITLE_HEIGHT),a.textAlign="left")};LiteGraph.registerNodeType("math/operation",q);r.title="Compare";r.desc="compares between two values";r.prototype.onExecute=function(){var a=this.getInputData(0),b=this.getInputData(1);void 0!==a?this.properties.A=a:a=this.properties.A;void 0!==b?this.properties.B=b:b=this.properties.B;for(var c=0,d=this.outputs.length;cB":value=a>b;break;case "A=B":value=a>=b}this.setOutputData(c,value)}}};r.prototype.onGetOutputs=function(){return[["A==B","boolean"],["A!=B","boolean"],["A>B","boolean"],["A=B","boolean"],["A<=B","boolean"]]};LiteGraph.registerNodeType("math/compare",r);s.values="> < == != <= >=".split(" ");s["@OP"]={type:"enum",title:"operation", values:s.values};s.title="Condition";s.desc="evaluates condition between A and B";s.prototype.onExecute=function(){var a=this.getInputData(0);void 0===a?a=this.properties.A:this.properties.A=a;var b=this.getInputData(1);void 0===b?b=this.properties.B:this.properties.B=b;var c=!0;switch(this.properties.OP){case ">":c=a>b;break;case "<":c=a=":c=a>=b}this.setOutputData(0,c)};LiteGraph.registerNodeType("math/condition", s);u.title="Accumulate";u.desc="Increments a value every time";u.prototype.onExecute=function(){null===this.properties.value&&(this.properties.value=0);var a=this.getInputData(0);this.properties.value=null!==a?this.properties.value+a:this.properties.value+this.properties.increment;this.setOutputData(0,this.properties.value)};LiteGraph.registerNodeType("math/accumulate",u);t.title="Trigonometry";t.desc="Sin Cos Tan";t.filter="shader";t.prototype.onExecute=function(){var a=this.getInputData(0);null== a&&(a=0);var b=this.properties.amplitude,c=this.findInputSlot("amplitude");-1!=c&&(b=this.getInputData(c));var d=this.properties.offset,c=this.findInputSlot("offset");-1!=c&&(d=this.getInputData(c));for(var c=0,e=this.outputs.length;cVec2";w.desc="components to vector2";w.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.x);var b=this.getInputData(1);null==b&&(b=this.properties.y);var c=this._data;c[0]=a;c[1]=b;this.setOutputData(0,c)};LiteGraph.registerNodeType("math3d/xy-to-vec2", +b*value+d)}};t.prototype.onGetInputs=function(){return[["v","number"],["amplitude","number"],["offset","number"]]};t.prototype.onGetOutputs=function(){return[["sin","number"],["cos","number"],["tan","number"],["asin","number"],["acos","number"],["atan","number"]]};LiteGraph.registerNodeType("math/trigonometry",t);if(window.math){var q=function(){this.addInputs("x","number");this.addInputs("y","number");this.addOutputs("","number");this.properties={x:1,y:1,formula:"x+y"}};q.title="Formula";q.desc= +"Compute safe formula";q.prototype.onExecute=function(){var a=this.getInputData(0),b=this.getInputData(1);null!=a?this.properties.x=a:a=this.properties.x;null!=b?this.properties.y=b:b=this.properties.y;a=math.eval(this.properties.formula,{x:a,y:b,T:this.graph.globaltime});this.setOutputData(0,a)};q.prototype.onDrawBackground=function(){this.outputs[0].label=this.properties.formula};q.prototype.onGetOutputs=function(){return[["A-B","number"],["A*B","number"],["A/B","number"]]};LiteGraph.registerNodeType("math/formula", +q)}v.title="Vec2->XY";v.desc="vector 2 to components";v.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&(this.setOutputData(0,a[0]),this.setOutputData(1,a[1]))};LiteGraph.registerNodeType("math3d/vec2-to-xyz",v);w.title="XY->Vec2";w.desc="components to vector2";w.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.x);var b=this.getInputData(1);null==b&&(b=this.properties.y);var c=this._data;c[0]=a;c[1]=b;this.setOutputData(0,c)};LiteGraph.registerNodeType("math3d/xy-to-vec2", w);x.title="Vec3->XYZ";x.desc="vector 3 to components";x.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&(this.setOutputData(0,a[0]),this.setOutputData(1,a[1]),this.setOutputData(2,a[2]))};LiteGraph.registerNodeType("math3d/vec3-to-xyz",x);y.title="XYZ->Vec3";y.desc="components to vector3";y.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.x);var b=this.getInputData(1);null==b&&(b=this.properties.y);var c=this.getInputData(2);null==c&&(c=this.properties.z); var d=this._data;d[0]=a;d[1]=b;d[2]=c;this.setOutputData(0,d)};LiteGraph.registerNodeType("math3d/xyz-to-vec3",y);z.title="Vec4->XYZW";z.desc="vector 4 to components";z.prototype.onExecute=function(){var a=this.getInputData(0);null!=a&&(this.setOutputData(0,a[0]),this.setOutputData(1,a[1]),this.setOutputData(2,a[2]),this.setOutputData(3,a[3]))};LiteGraph.registerNodeType("math3d/vec4-to-xyzw",z);A.title="XYZW->Vec4";A.desc="components to vector4";A.prototype.onExecute=function(){var a=this.getInputData(0); -null==a&&(a=this.properties.x);var b=this.getInputData(1);null==b&&(b=this.properties.y);var c=this.getInputData(2);null==c&&(c=this.properties.z);var d=this.getInputData(3);null==d&&(d=this.properties.w);var e=this._data;e[0]=a;e[1]=b;e[2]=c;e[3]=d;this.setOutputData(0,e)};LiteGraph.registerNodeType("math3d/xyzw-to-vec4",A);window.glMatrix&&(p=function(){this.addOutput("quat","quat");this.properties={x:0,y:0,z:0,w:1};this._value=quat.create()},p.title="Quaternion",p.desc="quaternion",p.prototype.onExecute= -function(){this._value[0]=this.properties.x;this._value[1]=this.properties.y;this._value[2]=this.properties.z;this._value[3]=this.properties.w;this.setOutputData(0,this._value)},LiteGraph.registerNodeType("math3d/quaternion",p),p=function(){this.addInputs([["degrees","number"],["axis","vec3"]]);this.addOutput("quat","quat");this.properties={angle:90,axis:vec3.fromValues(0,1,0)};this._value=quat.create()},p.title="Rotation",p.desc="quaternion rotation",p.prototype.onExecute=function(){var a=this.getInputData(0); -null==a&&(a=this.properties.angle);var b=this.getInputData(1);null==b&&(b=this.properties.axis);a=quat.setAxisAngle(this._value,b,0.0174532925*a);this.setOutputData(0,a)},LiteGraph.registerNodeType("math3d/rotation",p),p=function(){this.addInputs([["vec3","vec3"],["quat","quat"]]);this.addOutput("result","vec3");this.properties={vec:[0,0,1]}},p.title="Rot. Vec3",p.desc="rotate a point",p.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.vec);var b=this.getInputData(1); -null==b?this.setOutputData(a):this.setOutputData(0,vec3.transformQuat(vec3.create(),a,b))},LiteGraph.registerNodeType("math3d/rotate_vec3",p),p=function(){this.addInputs([["A","quat"],["B","quat"]]);this.addOutput("A*B","quat");this._value=quat.create()},p.title="Mult. Quat",p.desc="rotate quaternion",p.prototype.onExecute=function(){var a=this.getInputData(0);if(null!=a){var b=this.getInputData(1);null!=b&&(a=quat.multiply(this._value,a,b),this.setOutputData(0,a))}},LiteGraph.registerNodeType("math3d/mult-quat", -p),p=function(){this.addInputs([["A","quat"],["B","quat"],["factor","number"]]);this.addOutput("slerp","quat");this.addProperty("factor",0.5);this._value=quat.create()},p.title="Quat Slerp",p.desc="quaternion spherical interpolation",p.prototype.onExecute=function(){var a=this.getInputData(0);if(null!=a){var b=this.getInputData(1);if(null!=b){var c=this.properties.factor;null!=this.getInputData(2)&&(c=this.getInputData(2));a=quat.slerp(this._value,a,b,c);this.setOutputData(0,a)}}},LiteGraph.registerNodeType("math3d/quat-slerp", -p))})();function Selector(){this.addInput("sel","boolean");this.addOutput("value","number");this.properties={A:0,B:1};this.size=[60,20]}Selector.title="Selector";Selector.desc="outputs A if selector is true, B if selector is false"; +null==a&&(a=this.properties.x);var b=this.getInputData(1);null==b&&(b=this.properties.y);var c=this.getInputData(2);null==c&&(c=this.properties.z);var d=this.getInputData(3);null==d&&(d=this.properties.w);var e=this._data;e[0]=a;e[1]=b;e[2]=c;e[3]=d;this.setOutputData(0,e)};LiteGraph.registerNodeType("math3d/xyzw-to-vec4",A);window.glMatrix&&(q=function(){this.addOutput("quat","quat");this.properties={x:0,y:0,z:0,w:1};this._value=quat.create()},q.title="Quaternion",q.desc="quaternion",q.prototype.onExecute= +function(){this._value[0]=this.properties.x;this._value[1]=this.properties.y;this._value[2]=this.properties.z;this._value[3]=this.properties.w;this.setOutputData(0,this._value)},LiteGraph.registerNodeType("math3d/quaternion",q),q=function(){this.addInputs([["degrees","number"],["axis","vec3"]]);this.addOutput("quat","quat");this.properties={angle:90,axis:vec3.fromValues(0,1,0)};this._value=quat.create()},q.title="Rotation",q.desc="quaternion rotation",q.prototype.onExecute=function(){var a=this.getInputData(0); +null==a&&(a=this.properties.angle);var b=this.getInputData(1);null==b&&(b=this.properties.axis);a=quat.setAxisAngle(this._value,b,0.0174532925*a);this.setOutputData(0,a)},LiteGraph.registerNodeType("math3d/rotation",q),q=function(){this.addInputs([["vec3","vec3"],["quat","quat"]]);this.addOutput("result","vec3");this.properties={vec:[0,0,1]}},q.title="Rot. Vec3",q.desc="rotate a point",q.prototype.onExecute=function(){var a=this.getInputData(0);null==a&&(a=this.properties.vec);var b=this.getInputData(1); +null==b?this.setOutputData(a):this.setOutputData(0,vec3.transformQuat(vec3.create(),a,b))},LiteGraph.registerNodeType("math3d/rotate_vec3",q),q=function(){this.addInputs([["A","quat"],["B","quat"]]);this.addOutput("A*B","quat");this._value=quat.create()},q.title="Mult. Quat",q.desc="rotate quaternion",q.prototype.onExecute=function(){var a=this.getInputData(0);if(null!=a){var b=this.getInputData(1);null!=b&&(a=quat.multiply(this._value,a,b),this.setOutputData(0,a))}},LiteGraph.registerNodeType("math3d/mult-quat", +q),q=function(){this.addInputs([["A","quat"],["B","quat"],["factor","number"]]);this.addOutput("slerp","quat");this.addProperty("factor",0.5);this._value=quat.create()},q.title="Quat Slerp",q.desc="quaternion spherical interpolation",q.prototype.onExecute=function(){var a=this.getInputData(0);if(null!=a){var b=this.getInputData(1);if(null!=b){var c=this.properties.factor;null!=this.getInputData(2)&&(c=this.getInputData(2));a=quat.slerp(this._value,a,b,c);this.setOutputData(0,a)}}},LiteGraph.registerNodeType("math3d/quat-slerp", +q))})();function Selector(){this.addInput("sel","boolean");this.addOutput("value","number");this.properties={A:0,B:1};this.size=[60,20]}Selector.title="Selector";Selector.desc="outputs A if selector is true, B if selector is false"; Selector.prototype.onExecute=function(){var a=this.getInputData(0);if(void 0!==a){for(var b=1;bb&&(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.onPropertyChanged=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.onPropertyChanged=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){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)})(); +"image");this.addOutput("","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.supported_extensions=["jpg","jpeg","png","gif"];a.prototype.onAdded=function(){""!=this.properties.url&& +null==this.img&&this.loadImage(this.properties.url)};a.prototype.onDrawBackground=function(a){this.img&&5b&&(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.onDrawBackground=function(a){this.flags.collapsed||this.canvas&&a.drawImage(this.canvas,0,0,this.canvas.width,this.canvas.height,0,0,this.size[0],this.size[1])};e.prototype.onPropertyChanged=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",e);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.onPropertyChanged=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){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:"",filter:!0};this.size=[LGraphTexture.image_preview_size,LGraphTexture.image_preview_size]};LGraphTexture.title="Texture";LGraphTexture.desc="Texture";LGraphTexture.widgets_info={name:{widget:"texture"},filter:{widget:"checkbox"}};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.getTexturesContainer=function(){return gl.textures};LGraphTexture.loadTexture=function(a,b){b=b||{};var c=a;"http://"==c.substr(0,7)&&LiteGraph.proxy&&(c=LiteGraph.proxy+c.substr(7));return LGraphTexture.getTexturesContainer()[a]=GL.Texture.fromURL(c, b)};LGraphTexture.getTexture=function(a){var b=this.getTexturesContainer();if(!b)throw"Cannot load texture, container of textures not found";b=b[a];return!b&&a&&":"!=a[0]?(this.loadTexture(a),null):b};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&& @@ -336,8 +340,8 @@ LGraphFXLens.widgets_info={precision:{widget:"combo",values:LGraphTexture.MODE_V LiteGraph.registerNodeType("fx/lens",LGraphFXLens);window.LGraphFXLens=LGraphFXLens;var LGraphFXBokeh=function(){this.addInput("Texture","Texture");this.addInput("Blurred","Texture");this.addInput("Mask","Texture");this.addInput("Threshold","number");this.addOutput("Texture","Texture");this.properties={shape:"",size:10,alpha:1,threshold:1,high_precision:!1}};LGraphFXBokeh.title="Bokeh";LGraphFXBokeh.desc="applies an Bokeh effect";LGraphFXBokeh.widgets_info={shape:{widget:"texture"}};LGraphFXBokeh.prototype.onExecute= function(){var a=this.getInputData(0),b=this.getInputData(1),c=this.getInputData(2);if(a&&c&&this.properties.shape){b||(b=a);var d=LGraphTexture.getTexture(this.properties.shape);if(d){var e=this.properties.threshold;this.isInputConnected(3)&&(e=this.getInputData(3),this.properties.threshold=e);var f=gl.UNSIGNED_BYTE;this.properties.high_precision&&(f=gl.half_float_ext?gl.HALF_FLOAT_OES:gl.FLOAT);this._temp_texture&&this._temp_texture.type==f&&this._temp_texture.width==a.width&&this._temp_texture.height== a.height||(this._temp_texture=new GL.Texture(a.width,a.height,{type:f,format:gl.RGBA,filter:gl.LINEAR}));var g=LGraphFXBokeh._first_shader;g||(g=LGraphFXBokeh._first_shader=new GL.Shader(Shader.SCREEN_VERTEX_SHADER,LGraphFXBokeh._first_pixel_shader));var h=LGraphFXBokeh._second_shader;h||(h=LGraphFXBokeh._second_shader=new GL.Shader(LGraphFXBokeh._second_vertex_shader,LGraphFXBokeh._second_pixel_shader));var k=this._points_mesh;k&&k._width==a.width&&k._height==a.height&&2==k._spacing||(k=this.createPointsMesh(a.width, -a.height,2));var n=Mesh.getScreenQuad(),l=this.properties.size,q=this.properties.alpha;gl.disable(gl.DEPTH_TEST);gl.disable(gl.BLEND);this._temp_texture.drawTo(function(){a.bind(0);b.bind(1);c.bind(2);g.uniforms({u_texture:0,u_texture_blur:1,u_mask:2,u_texsize:[a.width,a.height]}).draw(n)});this._temp_texture.drawTo(function(){gl.enable(gl.BLEND);gl.blendFunc(gl.ONE,gl.ONE);a.bind(0);d.bind(3);h.uniforms({u_texture:0,u_mask:2,u_shape:3,u_alpha:q,u_threshold:e,u_pointSize:l,u_itexsize:[1/a.width,1/ -a.height]}).draw(k,gl.POINTS)});this.setOutputData(0,this._temp_texture)}}else this.setOutputData(0,a)};LGraphFXBokeh.prototype.createPointsMesh=function(a,b,c){for(var d=Math.round(a/c),e=Math.round(b/c),f=new Float32Array(d*e*2),g=-1,h=2/a*c,k=2/b*c,n=0;nc&&(c=0);var d=this.getInputNode(0),e=this.getOutputNodes(0);d&&d.audionode.disconnect(this.audionode);if(e)for(var f=0;f Stop"); - graph.start(1); - } - else - { - $(this).html(" Play"); - graph.stop(); - } - }); - - $("#playstepnode_button").click( function() { - graph.runStep(1); - graphcanvas.draw(true,true); - }); - - $("#playfastnode_button").click( function() { - graph.runStep(5000); - graphcanvas.draw(true,true); - }); - - $("#collapsenode_button").click( function() { - /* - for(var i in graphcanvas.nodes_selected) - graphcanvas.nodes_selected[i].collapse(); - */ - if( graphcanvas.node_in_panel ) - graphcanvas.node_in_panel.collapse(); - - graphcanvas.draw(); - }); - - $("#pinnode_button").click( function() { - if( graphcanvas.node_in_panel ) - graphcanvas.node_in_panel.pin(); - }); - - $("#sendtobacknode_button").click( function() { - if( graphcanvas.node_in_panel ) - graphcanvas.sendToBack( graphcanvas.node_in_panel ); - graphcanvas.draw(true); - }); - - - - $("#confirm-createnode_button").click(function() { - var element = $(".node-type.selected")[0]; - var name = element.data; - var n = LiteGraph.createNode(name); - graph.add(n); - n.pos = graphcanvas.convertOffsetToCanvas([30,30]); - graphcanvas.draw(true,true); - $("#modal-blocking-box").hide(); - $("#nodes-browser").hide(); - }); - - $("#cancel-createnode_button").click(function() { - $("#modal-blocking-box").hide(); - $("#nodes-browser").hide(); - }); - - $("#close-area_button").click(function() { - $("#modal-blocking-box").hide(); - $("#data-visor").hide(); - }); - - $("#confirm-loadsession_button").click(function() { - var element = $(".session-item.selected")[0]; - var info = element.data; - - var str = localStorage.getItem("graph_session_" + info.id ); - graph.stop(); - graph.unserialize(str); - - graphcanvas.draw(true,true); - $("#modal-blocking-box").hide(); - $("#sessions-browser").hide(); - }); - - $("#cancel-loadsession_button").click(function() { - $("#modal-blocking-box").hide(); - $("#sessions-browser").hide(); - }); - - $("#livemode_button").click( function() { - graphcanvas.switchLiveMode(true); - graphcanvas.draw(); - var url = graphcanvas.live_mode ? "imgs/gauss_bg_medium.jpg" : "imgs/gauss_bg.jpg"; - $("#livemode_button").html(!graphcanvas.live_mode ? " Live" : " Edit" ); - //$("canvas").css("background-image","url('"+url+"')"); - }); - - $("#newsession_button").click( function() { - $("#main-area").hide(); - graph.clear(); - graphcanvas.draw(); - $("#main-area").show(); - }); - - $("#savesession_button").click( function() { - onSaveSession(); - }); - - $("#loadsession_button").click( function() { - onLoadSession(); - }); - - $("#cancelsession-dialog_button").click(function() - { - $("#modal-blocking-box").hide(); - $("#savesession-dialog").hide(); - }); - - $("#savesession-dialog_button").click(function() - { - var name = $("#session-name-input").val(); - var desc = $("#session-description-input").val(); - - saveSession(name,desc); - - $("#modal-blocking-box").hide(); - $("#savesession-dialog").hide(); - - }); - - $("#closepanel_button").click(function() - { - graphcanvas.showNodePanel(null); - }); - - $("#maximize_button").click(function() - { - if($("#main").width() != window.innerWidth) - { - $("#main").width( (window.innerWidth).toString() + "px"); - $("#main").height( (window.innerHeight - 40).toString() + "px"); - graphcanvas.resizeCanvas(window.innerWidth,window.innerHeight - 100); - } - else - { - $("#main").width("800px"); - $("#main").height("660px"); - graphcanvas.resizeCanvas(800,600); - } - }); - - $("#resetscale_button").click(function() - { - graph.config.canvas_scale = 1.0; - graphcanvas.draw(true,true); - }); - - $("#resetpos_button").click(function() - { - graph.config.canvas_offset = [0,0]; - graphcanvas.draw(true,true); - }); - - $(".nodecolorbutton").click(function() - { - if( graphcanvas.node_in_panel ) - { - graphcanvas.node_in_panel.color = this.getAttribute("data-color"); - graphcanvas.node_in_panel.bgcolor = this.getAttribute("data-bgcolor"); - } - graphcanvas.draw(true,true); - }); - - - if ("onhashchange" in window) // does the browser support the hashchange event? - { - window.onhashchange = function () { - var h = window.location.hash.substr(1); - //action - return false; - } - } - - LiteGraph.node_images_path = "../nodes_data/"; - graph = new LGraph(); - graphcanvas = new LGraphCanvas("graphcanvas",graph); - graphcanvas.background_image = "imgs/grid.png"; - - graph.onAfterExecute = function() { graphcanvas.draw(true) }; - demo(); - - graph.onPlayEvent = function() - { - $("#playnode_button").addClass("playing"); - $("#playnode_button").removeClass("stopped"); - } - - graph.onStopEvent = function() - { - $("#playnode_button").addClass("stopped"); - $("#playnode_button").removeClass("playing"); - } - - graphcanvas.draw(); - - //update load counter - setInterval(function() { - $("#cpuload .fgload").width( (2*graph.elapsed_time) * 90); - if(graph.status == LGraph.STATUS_RUNNING) - $("#gpuload .fgload").width( (graphcanvas.render_time*10) * 90); - else - $("#gpuload .fgload").width( 4 ); - },200); - - //LiteGraph.run(100); -}); - - -function onShowNodes() -{ - $("#nodes-list").empty(); - - for (var i in LiteGraph.registered_node_types) - { - var node = LiteGraph.registered_node_types[i]; - var categories = node.category.split("/"); - - //create categories and find the propper one - var root = $("#nodes-list")[0]; - for(var i in categories) - { - var result = $(root).find("#node-category_" + categories[i] + " .container"); - if (result.length == 0) - { - var element = document.createElement("div"); - element.id = "node-category_" + categories[i]; - element.className = "node-category"; - element.data = categories[i]; - element.innerHTML = ""+categories[i]+""; - root.appendChild(element); - - $(element).find(".title").click(function(e){ - var element = $("#node-category_" + this.parentNode.data + " .container"); - $(element[0]).toggle(); - }); - - - var container = document.createElement("div"); - container.className = "container"; - element.appendChild(container); - - root = container; - } - else - root = result[0]; - } - - //create entry - var type = node.type; - var element = document.createElement("div"); - element.innerHTML = ""+node.title+" " + (node.desc? node.desc : ""); - element.className = "node-type"; - element.id = "node-type-" + node.name; - element.data = type; - root.appendChild(element); - } - - $(".node-type").click( function() { - $(".node-type.selected").removeClass("selected"); - $(this).addClass("selected"); - $("#confirm-createnode_button").attr("disabled",false); - }); - - $(".node-type").dblclick( function() { - $("#confirm-createnode_button").click(); - }); - - $("#confirm-createnode_button").attr("disabled",true); - - $("#modal-blocking-box").show(); - $("#nodes-browser").show(); -} - -function onDeleteNode() -{ - if(!graphcanvas.node_in_panel) return; - - graph.remove( graphcanvas.node_in_panel ); - graphcanvas.draw(); - $("#node-panel").hide(); - graphcanvas.node_in_panel = null; -} - -function onCloneNode() -{ - if(!graphcanvas.node_in_panel) return; - - var n = graphcanvas.node_in_panel.clone(); - n.pos[0] += 10; - n.pos[1] += 10; - - graph.add(n); - graphcanvas.draw(); -} - -function onSaveSession() -{ - if(graph.session["name"]) - $("#session-name-input").val(graph.session["name"]); - - if(graph.session["description"]) - $("#session-desc-input").val(graph.session["description"]); - - $("#modal-blocking-box").show(); - $("#savesession-dialog").show(); - //var str = LiteGraph.serialize(); - //localStorage.setItem("graph_session",str); -} - -function saveSession(name,desc) -{ - desc = desc || ""; - - graph.session["name"] = name; - graph.session["description"] = desc; - if(!graph.session["id"]) - graph.session["id"] = new Date().getTime(); - - var str = graph.serializeSession(); - localStorage.setItem("graph_session_" + graph.session["id"],str); - - var sessions_str = localStorage.getItem("node_sessions"); - var sessions = []; - - if(sessions_str) - sessions = JSON.parse(sessions_str); - - var pos = -1; - for(var i = 0; i < sessions.length; i++) - if( sessions[i].id == graph.session["id"] && sessions[i].name == name) - { - pos = i; - break; - } - - if(pos != -1) - { - //already on the list - } - else - { - var current_session = {name:name, desc:desc, id:graph.session["id"]}; - sessions.unshift(current_session); - localStorage.setItem("graph_sessions", JSON.stringify(sessions)); - } -} - -function onLoadSession() -{ - $("#sessions-browser-list").empty(); - - $("#modal-blocking-box").show(); - $("#sessions-browser").show(); - - var sessions_str = localStorage.getItem("graph_sessions"); - var sessions = []; - - if(sessions_str) - sessions = JSON.parse(sessions_str); - - for(var i in sessions) - { - var element = document.createElement("div"); - element.className = "session-item"; - element.data = sessions[i]; - $(element).html(""+sessions[i].name+""+sessions[i].desc+"x"); - $("#sessions-browser-list").append(element); - } - - $(".session-item").click( function() { - $(".session-item.selected").removeClass("selected"); - $(this).addClass("selected"); - $("#confirm-loadsession_button").attr("disabled",false); - }); - - $(".session-item").dblclick( function() { - $("#confirm-loadsession_button").click(); - }); - - $(".delete_session").click(function(e) { - var root = $(this).parent(); - var info = root[0].data; - - var sessions_str = localStorage.getItem("graph_sessions"); - var sessions = []; - if(sessions_str) - sessions = JSON.parse(sessions_str); - var pos = -1; - for(var i = 0; i < sessions.length; i++) - if( sessions[i].id == info.id ) - { - pos = i; - break; - } - - if(pos != -1) - { - sessions.splice(pos,1); - localStorage.setItem("graph_sessions", JSON.stringify(sessions)); - } - - root.remove(); - }); - - $("#confirm-loadsession_button").attr("disabled",true); - - /* - LiteGraph.stop(); - var str = localStorage.getItem("graph_session"); - LiteGraph.unserialize(str); - LiteGraph.draw(); - */ -} - -function onShagraph() -{ - -} - -function showImage(data) -{ - var img = new Image(); - img.src = data; - $("#data-visor .content").empty(); - $("#data-visor .content").append(img); - $("#modal-blocking-box").show(); - $("#data-visor").show(); -} - -function showElement(data) -{ - setTimeout(function(){ - $("#data-visor .content").empty(); - $("#data-visor .content").append(data); - $("#modal-blocking-box").show(); - $("#data-visor").show(); - },100); -} - - -// ********* SEEDED RANDOM ****************************** -function RandomNumberGenerator(seed) -{ - if (typeof(seed) == 'undefined') - { - var d = new Date(); - this.seed = 2345678901 + (d.getSeconds() * 0xFFFFFF) + (d.getMinutes() * 0xFFFF); - } - else - this.seed = seed; - - this.A = 48271; - this.M = 2147483647; - this.Q = this.M / this.A; - this.R = this.M % this.A; - this.oneOverM = 1.0 / this.M; - this.next = nextRandomNumber; - return this; -} - -function nextRandomNumber(){ - var hi = this.seed / this.Q; - var lo = this.seed % this.Q; - var test = this.A * lo - this.R * hi; - if(test > 0){ - this.seed = test; - } else { - this.seed = test + this.M; - } - return (this.seed * this.oneOverM); -} - -var RAND_GEN = RandomNumberGenerator(0); - -function RandomSeed(s) { RAND_GEN = RandomNumberGenerator(s); }; - -function myrand(Min, Max){ - return Math.round((Max-Min) * RAND_GEN.next() + Min); -} - -function myrandom() { return myrand(0,100000) / 100000; } - -// @format (hex|rgb|null) : Format to return, default is integer -function random_color(format) -{ - var rint = Math.round(0xffffff * myrandom()); - switch(format) - { - case 'hex': - return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1'); - break; - - case 'rgb': - return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')'; - break; - - default: - return rint; - break; - } -} - -$.extend({ - getUrlVars: function(){ - var vars = [], hash; - var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); - for(var i = 0; i < hashes.length; i++) - { - hash = hashes[i].split('='); - vars.push(hash[0]); - vars[hash[0]] = hash[1]; - } - return vars; - }, - getUrlVar: function(name){ - return $.getUrlVars()[name]; - } -}); - -function trace(a) -{ - if(typeof(console) == "object") - console.log(a); -} \ No newline at end of file diff --git a/demo/examples/audio.json b/demo/examples/audio.json new file mode 100644 index 000000000..8a6d853ca --- /dev/null +++ b/demo/examples/audio.json @@ -0,0 +1 @@ +{"iteration":55277,"last_node_id":11,"last_link_id":10,"links":{"0":{"id":0,"origin_id":0,"origin_slot":0,"target_id":2,"target_slot":0,"data":null},"1":{"id":1,"origin_id":2,"origin_slot":0,"target_id":1,"target_slot":0,"data":null},"2":{"id":2,"origin_id":2,"origin_slot":0,"target_id":3,"target_slot":0,"data":null},"3":{"id":3,"origin_id":3,"origin_slot":0,"target_id":4,"target_slot":0,"data":null},"4":{"id":4,"origin_id":5,"origin_slot":0,"target_id":2,"target_slot":1,"data":null},"5":{"id":5,"origin_id":6,"origin_slot":0,"target_id":0,"target_slot":0,"data":null},"6":{"id":6,"origin_id":7,"origin_slot":0,"target_id":0,"target_slot":1,"data":null},"7":{"id":7,"origin_id":8,"origin_slot":0,"target_id":0,"target_slot":2,"data":null},"8":{"id":8,"origin_id":9,"origin_slot":0,"target_id":0,"target_slot":3,"data":null},"9":{"id":9,"origin_id":9,"origin_slot":0,"target_id":10,"target_slot":0,"data":null}},"config":{},"nodes":[{"id":1,"title":"Destination","type":"audio/destination","pos":[673,171],"size":{"0":140,"1":20},"flags":{},"inputs":[{"name":"in","type":"audio","link":1}],"mode":0,"properties":{}},{"id":2,"title":"BiquadFilter","type":"audio/biquadfilter","pos":[437,251],"size":{"0":140,"1":34},"flags":{},"inputs":[{"name":"in","type":"audio","link":0},{"name":"frequency","type":"number","link":4}],"outputs":[{"name":"out","type":"audio","links":[1,2]}],"mode":0,"properties":{"frequency":350,"detune":0,"Q":1,"type":"lowpass"}},{"id":3,"title":"Analyser","type":"audio/analyser","pos":[672,306],"size":{"0":140,"1":20},"flags":{},"inputs":[{"name":"in","type":"audio","link":2}],"outputs":[{"name":"freqs","type":"array","links":[3]}],"mode":0,"properties":{"fftSize":2048,"minDecibels":-100,"maxDecibels":-10,"smoothingTimeConstant":0.5}},{"id":6,"title":"Knob","type":"widget/knob","pos":[120,183],"size":[54,74],"flags":{},"outputs":[{"name":"","type":"number","links":[5]}],"mode":0,"properties":{"min":0,"max":1,"value":0.5099999999999996,"wcolor":"#7AF","size":50},"boxcolor":"rgba(128,128,128,1.0)"},{"id":0,"title":"Source","type":"audio/source","pos":[251,196],"size":{"0":140,"1":62},"flags":{},"inputs":[{"name":"gain","type":"number","link":5},{"name":"Play","type":-1,"link":6},{"name":"Stop","type":-1,"link":7},{"name":"playbackRate","type":"number","link":8}],"outputs":[{"name":"out","type":"audio","links":[0]}],"mode":0,"properties":{"src":"demodata/audio.wav","gain":0.5,"loop":false,"autoplay":true,"playbackRate":1.0000000000000002}},{"id":8,"title":"Button","type":"widget/button","pos":[274,106],"size":[128,43],"flags":{},"outputs":[{"name":"clicked","type":-1,"links":[7]}],"mode":0,"properties":{"text":"Stop","font":"40px Arial","message":""}},{"id":5,"title":"Knob","type":"widget/knob","pos":[125,293],"size":[54,74],"flags":{},"outputs":[{"name":"","type":"number","links":[4]}],"mode":0,"properties":{"min":0,"max":20000,"value":14800.00000000001,"wcolor":"#7AF","size":50},"boxcolor":"rgba(189,189,189,1.0)"},{"id":10,"title":"Watch","type":"basic/watch","pos":[516,123],"size":{"0":140,"1":20},"flags":{},"inputs":[{"name":"value","type":0,"link":9,"label":"1.000"}],"outputs":[{"name":"value","type":0,"links":null,"label":""}],"mode":0,"properties":{"value":1.0000000000000002}},{"id":9,"title":"Knob","type":"widget/knob","pos":[429,119],"size":[64,84],"flags":{},"outputs":[{"name":"","type":"number","links":[8,9]}],"mode":0,"properties":{"min":0,"max":4,"value":1.0000000000000002,"wcolor":"#7AF","size":50},"boxcolor":"rgba(64,64,64,1.0)"},{"id":7,"title":"Button","type":"widget/button","pos":[114,103],"size":[128,43],"flags":{},"outputs":[{"name":"clicked","type":-1,"links":[6]}],"mode":0,"properties":{"text":"Play","font":"40px Arial","message":""}},{"id":4,"title":"Visualization","type":"audio/visualization","pos":[132,394],"size":[662,180],"flags":{},"inputs":[{"name":"freqs","type":"array","link":3}],"mode":0,"properties":{"continuous":true}}]} \ No newline at end of file diff --git a/demo/examples/audio_delay.json b/demo/examples/audio_delay.json new file mode 100644 index 000000000..1ba5c6375 --- /dev/null +++ b/demo/examples/audio_delay.json @@ -0,0 +1 @@ +{"iteration":27893,"last_node_id":7,"last_link_id":7,"links":{"0":{"id":0,"origin_id":0,"origin_slot":0,"target_id":1,"target_slot":0,"data":null},"1":{"id":1,"origin_id":0,"origin_slot":0,"target_id":2,"target_slot":0,"data":null},"2":{"id":2,"origin_id":2,"origin_slot":0,"target_id":1,"target_slot":2,"data":null},"3":{"id":3,"origin_id":1,"origin_slot":0,"target_id":3,"target_slot":0,"data":null},"4":{"id":4,"origin_id":4,"origin_slot":0,"target_id":1,"target_slot":1,"data":null},"5":{"id":5,"origin_id":5,"origin_slot":0,"target_id":1,"target_slot":3,"data":null},"6":{"id":6,"origin_id":6,"origin_slot":0,"target_id":2,"target_slot":1,"data":null}},"config":{},"nodes":[{"id":0,"title":"Source","type":"audio/source","pos":[195,187],"size":{"0":140,"1":20},"flags":{},"inputs":[{"name":"gain","type":"number","link":null}],"outputs":[{"name":"out","type":"audio","links":[0,1]}],"mode":0,"properties":{"src":"demodata/audio.wav","gain":0.5,"loop":true,"autoplay":true,"playbackRate":1}},{"id":1,"title":"Mixer","type":"audio/mixer","pos":[655,183],"size":{"0":140,"1":62},"flags":{},"inputs":[{"name":"in1","type":"audio","link":0},{"name":"in1 gain","type":"number","link":4},{"name":"in2","type":"audio","link":2},{"name":"in2 gain","type":"number","link":5}],"outputs":[{"name":"out","type":"audio","links":[3]}],"mode":0,"properties":{"gain1":0.5,"gain2":0.8}},{"id":3,"title":"Destination","type":"audio/destination","pos":[911,180],"size":{"0":140,"1":20},"flags":{},"inputs":[{"name":"in","type":"audio","link":3}],"mode":0,"properties":{}},{"id":4,"title":"Knob","type":"widget/knob","pos":[408,59],"size":[54,74],"flags":{},"outputs":[{"name":"","type":"number","links":[4]}],"mode":0,"properties":{"min":0,"max":1,"value":0.24000000000000007,"wcolor":"#7AF","size":50},"boxcolor":"rgba(128,128,128,1.0)"},{"id":5,"title":"Knob","type":"widget/knob","pos":[433,371],"size":[54,74],"flags":{},"outputs":[{"name":"","type":"number","links":[5]}],"mode":0,"properties":{"min":0,"max":1,"value":0.5199999999999996,"wcolor":"#7AF","size":50},"boxcolor":"rgba(128,128,128,1.0)"},{"id":2,"title":"Delay","type":"audio/delay","pos":[385,255],"size":{"0":142,"1":38},"flags":{},"inputs":[{"name":"in","type":"audio","link":1},{"name":"time","type":"number","link":6}],"outputs":[{"name":"out","type":"audio","links":[2]}],"mode":0,"properties":{"delayTime":0.5,"time":1}},{"id":6,"title":"Knob","type":"widget/knob","pos":[199,296],"size":[64,84],"flags":{},"outputs":[{"name":"","type":"number","links":[6]}],"mode":0,"properties":{"min":0,"max":2,"value":0.8799999999999999,"wcolor":"#7AF","size":50},"boxcolor":"rgba(112,112,112,1.0)"}]} \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index a10b5cc19..d60561768 100755 --- a/demo/index.html +++ b/demo/index.html @@ -4,10 +4,11 @@ LiteGraph - + - + +
diff --git a/demo/style.css b/demo/style.css index 898865354..ecf79c0e7 100755 --- a/demo/style.css +++ b/demo/style.css @@ -241,3 +241,15 @@ textarea { margin: 10px; } +.selector { + font-size: 1.8em; +} + + +.selector select { + color: white; + background-color: black; + border: 0; + font-size: 1em; +} + diff --git a/src/litegraph-editor.js b/src/litegraph-editor.js index 690238f95..9d121d1c3 100755 --- a/src/litegraph-editor.js +++ b/src/litegraph-editor.js @@ -1,6 +1,5 @@ -//NOT FINISHED - -function Editor(container_id, options) +//Creates an interface to access extra features from a graph (like play, stop, live, etc) +function Editor( container_id, options ) { //fill container var html = "
"; @@ -12,6 +11,8 @@ function Editor(container_id, options) root.className = "litegraph-editor"; root.innerHTML = html; + this.tools = root.querySelector(".tools"); + var canvas = root.querySelector(".graphcanvas"); //create graph @@ -64,7 +65,8 @@ Editor.prototype.addLoadCounter = function() Editor.prototype.addToolsButton = function(id,name,icon_url, callback, container) { - if(!container) container = ".tools"; + if(!container) + container = ".tools"; var button = this.createButton(name, icon_url); button.id = id; @@ -183,7 +185,9 @@ Editor.prototype.addMiniWindow = function(w,h) var graphcanvas = new LGraphCanvas(canvas, this.graph); graphcanvas.background_image = "imgs/grid.png"; - graphcanvas.scale = 0.5; + graphcanvas.scale = 0.25; + this.miniwindow_graphcanvas = graphcanvas; + graphcanvas.onClear = function() { graphcanvas.scale = 0.25; }; miniwindow.style.position = "absolute"; miniwindow.style.top = "4px"; @@ -198,7 +202,6 @@ Editor.prototype.addMiniWindow = function(w,h) }); miniwindow.appendChild(close_button); - this.root.querySelector(".content").appendChild(miniwindow); } diff --git a/src/litegraph.js b/src/litegraph.js index 918bb06db..173a31222 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -44,6 +44,7 @@ var LiteGraph = { debug: false, throw_errors: true, registered_node_types: {}, //nodetypes by string + node_types_by_file_extension: {}, //used for droping files in the canvas Nodes: {}, //node types by classname /** @@ -81,6 +82,12 @@ var LiteGraph = { //warnings if(base_class.prototype.onPropertyChange) console.warn("LiteGraph node class " + type + " has onPropertyChange method, it must be called onPropertyChanged with d at the end"); + + if( base_class.supported_extensions ) + { + for(var i in base_class.supported_extensions ) + this.node_types_by_file_extension[ base_class.supported_extensions[i].toLowerCase() ] = base_class; + } }, /** @@ -119,8 +126,8 @@ var LiteGraph = { title = title || base_class.title || type; var node = new base_class( name ); - node.type = type; + if(!node.title) node.title = title; if(!node.properties) node.properties = {}; if(!node.properties_info) node.properties_info = []; @@ -1185,7 +1192,15 @@ LGraph.prototype.configure = function(data, keep_old) node.id = n_info.id; //id it or it will create a new id this.add(node, true); //add before configure, otherwise configure cannot create links - node.configure(n_info); + } + + //configure nodes afterwards so they can reach each other + for(var i = 0, l = nodes.length; i < l; ++i) + { + var n_info = nodes[i]; + var node = this.getNodeById( n_info.id ); + if(node) + node.configure( n_info ); } this.updateExecutionOrder(); @@ -1193,6 +1208,27 @@ LGraph.prototype.configure = function(data, keep_old) return error; } +LGraph.prototype.load = function(url) +{ + var that = this; + var req = new XMLHttpRequest(); + req.open('GET', url, true); + req.send(null); + req.onload = function (oEvent) { + if(req.status !== 200) + { + console.error("Error loading graph:",req.status,req.response); + return; + } + var data = JSON.parse( req.response ); + that.configure(data); + } + req.onerror = function(err) + { + console.error("Error loading graph:",err); + } +} + LGraph.prototype.onNodeTrace = function(node, msg, color) { //TODO @@ -1331,7 +1367,26 @@ LGraphNode.prototype.configure = function(info) } if(this.onConnectionsChange) - this.onConnectionsChange(); + { + if(this.inputs) + for(var i = 0; i < this.inputs.length; ++i) + { + var input = this.inputs[i]; + var link_info = this.graph.links[ input.link ]; + this.onConnectionsChange( LiteGraph.INPUT, i, true, link_info ); //link_info has been created now, so its updated + } + + if(this.outputs) + for(var i = 0; i < this.outputs.length; ++i) + { + var output = this.outputs[i]; + for(var j = 0; j < output.links.length; ++j) + { + var link_info = this.graph.links[ output.links[j] ]; + this.onConnectionsChange( LiteGraph.OUTPUT, i, true, link_info ); //link_info has been created now, so its updated + } + } + } //FOR LEGACY, PLEASE REMOVE ON NEXT VERSION for(var i in this.inputs) @@ -1554,7 +1609,10 @@ LGraphNode.prototype.getInputNode = function( slot ) var input = this.inputs[slot]; if(!input || !input.link) return null; - return this.graph.getNodeById( input.link.origin_id ); + var link_info = this.graph.links[ input.link ]; + if(!link_info) + return null; + return this.graph.getNodeById( link_info.origin_id ); } @@ -3447,8 +3505,11 @@ LGraphCanvas.prototype.processDrop = function(e) if(!node) { + var r = null; if(this.onDropItem) - this.onDropItem( event ); + r = this.onDropItem( event ); + if(!r) + this.checkDropItem(e); return; } @@ -3496,6 +3557,26 @@ LGraphCanvas.prototype.processDrop = function(e) return false; } +//called if the graph doesnt have a default drop item behaviour +LGraphCanvas.prototype.checkDropItem = function(e) +{ + if(e.dataTransfer.files.length) + { + var file = e.dataTransfer.files[0]; + var ext = LGraphCanvas.getFileExtension( file.name ).toLowerCase(); + var nodetype = LiteGraph.node_types_by_file_extension[ext]; + if(nodetype) + { + var node = LiteGraph.createNode( nodetype.type ); + node.pos = [e.canvasX, e.canvasY]; + this.graph.add( node ); + if( node.onDropFile ) + node.onDropFile( file ); + } + } +} + + LGraphCanvas.prototype.processNodeSelected = function(n,e) { n.selected = true; diff --git a/src/nodes/audio.js b/src/nodes/audio.js index 947b470ae..c7440a0cc 100644 --- a/src/nodes/audio.js +++ b/src/nodes/audio.js @@ -3,33 +3,8 @@ (function( global ) { -function LGAudio() -{ - this.properties = { - src: "demodata/audio.wav", - gain: 0.5, - loop: true - }; - - this._loading_audio = false; - this._audio_buffer = null; - this._audionodes = []; - - this.addOutput( "out", "audio" ); - this.addInput( "gain", "number" ); - - //init context - var context = LGAudio.getAudioContext(); - - //create gain node - this.audionode = context.createGain(); - this.audionode.graphnode = this; - this.audionode.gain.value = this.properties.gain; - - //debug - if(this.properties.src) - this.loadSound( this.properties.src ); -} +var LGAudio = {}; +global.LGAudio = LGAudio; LGAudio.getAudioContext = function() { @@ -55,128 +30,94 @@ LGAudio.getAudioContext = function() LGAudio.connect = function( audionodeA, audionodeB ) { - audionodeA.connect( audionodeB ); - - /* - if(!nodeA.outputs) - nodeA.outputs = []; - nodeA.outputs.push( nodeB ); - if(!nodeB.inputs) - nodeB.inputs = []; - nodeB.inputs.push( nodeA ); - */ + try + { + audionodeA.connect( audionodeB ); + } + catch (err) + { + console.warn("LGraphAudio:",err); + } } LGAudio.disconnect = function( audionodeA, audionodeB ) { - audionodeA.disconnect( audionodeB ); - - /* - if(nodeA.outputs) + try { - var index = nodeA.outputs.indexOf( nodeB ); - if(index != -1) - nodeA.outputs.splice(index,1); + audionodeA.disconnect( audionodeB ); } - if(nodeB.inputs) + catch (err) { - var index = nodeB.inputs.indexOf( nodeA ); - if(index != -1) - nodeB.inputs.splice(index,1); - } - */ -} - -LGAudio.prototype.onAdded = function(graph) -{ - if(graph.status === LGraph.STATUS_RUNNING) - this.onStart(); -} - -LGAudio.prototype.onStart = function() -{ - if(!this._audio_buffer) - return; - - this.playBuffer( this._audio_buffer ); -} - -LGAudio.prototype.onStop = function() -{ - this.stopAllSounds(); -} - -LGAudio.prototype.onRemoved = function() -{ - this.stopAllSounds(); -} - -LGAudio.prototype.stopAllSounds = function() -{ - //iterate and stop - for(var i = 0; i < this._audionodes.length; ++i ) - { - this._audionodes[i].stop(); - //this._audionodes[i].disconnect( this.audionode ); - } - this._audionodes.length = 0; -} - -LGAudio.prototype.onExecute = function() -{ - var v = this.getInputData(0); - if( v !== undefined ) - this.audionode.gain.value = v; -} - -LGAudio.prototype.onAction = function(event) -{ - if(this._audio_buffer) - { - if(event == "Play") - this.playBuffer(this._audio_buffer); - else if(event == "Stop") - this.stopAllSounds(); + console.warn("LGraphAudio:",err); } } -LGAudio.prototype.onPropertyChanged = function( name, value ) +LGAudio.changeAllAudiosConnections = function( node, connect ) { - if( name == "src" ) - this.loadSound( value ); - else if(name == "gain") - this.audionode.gain.value = value; -} - -LGAudio.prototype.playBuffer = function( buffer ) -{ - var that = this; - var context = LGAudio.getAudioContext(); - - //create a new audionode (this is mandatory, AudioAPI doesnt like to reuse old ones) - var audionode = context.createBufferSource(); //create a AudioBufferSourceNode - audionode.graphnode = this; - audionode.buffer = buffer; - audionode.loop = this.properties.loop; - this._audionodes.push( audionode ); - audionode.connect( this.audionode ); //connect to gain - this._audionodes.push( audionode ); - - audionode.onended = function() + if(node.inputs) { - console.log("ended!"); - that.trigger("ended"); - //remove - var index = that._audionodes.indexOf( audionode ); - if(index != -1) - that._audionodes.splice(index,1); + for(var i = 0; i < node.inputs.length; ++i) + { + var input = node.inputs[i]; + var link_info = node.graph.links[ input.link ]; + if(!link_info) + continue; + + var origin_node = node.graph.getNodeById( link_info.origin_id ); + var origin_audionode = null; + if( origin_node.getAudioNodeInOutputSlot ) + origin_audionode = origin_node.getAudioNodeInOutputSlot( link_info.origin_slot ); + else + origin_audionode = origin_node.audionode; + + var target_audionode = null; + if( node.getAudioNodeInInputSlot ) + target_audionode = node.getAudioNodeInInputSlot( i ); + else + target_audionode = node.audionode; + + if(connect) + LGAudio.connect( origin_audionode, target_audionode ); + else + LGAudio.disconnect( origin_audionode, target_audionode ); + } } - audionode.start(); - return audionode; + if(node.outputs) + { + for(var i = 0; i < node.outputs.length; ++i) + { + var output = node.outputs[i]; + for(var j = 0; j < output.links.length; ++j) + { + var link_info = node.graph.links[ output.links[j] ]; + if(!link_info) + continue; + + var origin_audionode = null; + if( node.getAudioNodeInOutputSlot ) + origin_audionode = node.getAudioNodeInOutputSlot( i ); + else + origin_audionode = node.audionode; + + var target_node = node.graph.getNodeById( link_info.target_id ); + var target_audionode = null; + if( target_node.getAudioNodeInInputSlot ) + target_audionode = target_node.getAudioNodeInInputSlot( link_info.target_slot ); + else + target_audionode = target_node.audionode; + + if(connect) + LGAudio.connect( origin_audionode, target_audionode ); + else + LGAudio.disconnect( origin_audionode, target_audionode ); + } + } + } } -LGAudio.prototype.onConnectionsChange = function( connection, slot, connected, link_info ) +//used by many nodes +LGAudio.onConnectionsChange = function( connection, slot, connected, link_info ) { //only process the outputs events if(connection != LiteGraph.OUTPUT) @@ -189,23 +130,169 @@ LGAudio.prototype.onConnectionsChange = function( connection, slot, connected, l if( !target_node ) return; - if( connected ) - { - if(target_node.connectAudioToSlot) - target_node.connectAudioToSlot( this.audionode, link_info.target_slot ); - else - LGAudio.connect( this.audionode, target_node.audionode ); - } + //get origin audionode + var local_audionode = null; + if(this.getAudioNodeInOutputSlot) + local_audionode = this.getAudioNodeInOutputSlot( slot ); else + local_audionode = this.audionode; + + //get target audionode + var target_audionode = null; + if(target_node.getAudioNodeInInputSlot) + target_audionode = target_node.getAudioNodeInInputSlot( link_info.target_slot ); + else + target_audionode = target_node.audionode; + + //do the connection/disconnection + if( connected ) + LGAudio.connect( local_audionode, target_audionode ); + else + LGAudio.disconnect( local_audionode, target_audionode ); +} + + +//**************************************************** + +function LGAudioSource() +{ + this.properties = { + src: "demodata/audio.wav", + gain: 0.5, + loop: true, + autoplay: true, + playbackRate: 1 + }; + + this._loading_audio = false; + this._audio_buffer = null; + this._audionodes = []; + + this.addOutput( "out", "audio" ); + this.addInput( "gain", "number" ); + + //init context + var context = LGAudio.getAudioContext(); + + //create gain node + this.audionode = context.createGain(); + this.audionode.graphnode = this; + this.audionode.gain.value = this.properties.gain; + + //debug + if(this.properties.src) + this.loadSound( this.properties.src ); +} + +LGAudioSource.supported_extensions = ["wav","ogg","mp3"]; + + +LGAudioSource.prototype.onAdded = function(graph) +{ + if(graph.status === LGraph.STATUS_RUNNING) + this.onStart(); +} + +LGAudioSource.prototype.onStart = function() +{ + if(!this._audio_buffer) + return; + + if(this.properties.autoplay) + this.playBuffer( this._audio_buffer ); +} + +LGAudioSource.prototype.onStop = function() +{ + this.stopAllSounds(); +} + +LGAudioSource.prototype.onRemoved = function() +{ + this.stopAllSounds(); +} + +LGAudioSource.prototype.stopAllSounds = function() +{ + //iterate and stop + for(var i = 0; i < this._audionodes.length; ++i ) { - if(target_node.disconnectAudioFromSlot) - target_node.disconnectAudioFromSlot( this.audionode, link_info.target_slot ); - else - LGAudio.disconnect( this.audionode, target_node.audionode ); + this._audionodes[i].stop(); + //this._audionodes[i].disconnect( this.audionode ); + } + this._audionodes.length = 0; +} + +LGAudioSource.prototype.onExecute = function() +{ + if(!this.inputs) + return; + + for(var i = 0; i < this.inputs.length; ++i) + { + var input = this.inputs[i]; + if(!input.link) + continue; + + var v = this.getInputData(i); + if( v === undefined ) + continue; + if( input.name == "gain" ) + this.audionode.gain.value = v; + else if( input.name == "playbackRate" ) + this.properties.playbackRate = v; } } -LGAudio.prototype.loadSound = function( url ) +LGAudioSource.prototype.onAction = function(event) +{ + if(this._audio_buffer) + { + if(event == "Play") + this.playBuffer(this._audio_buffer); + else if(event == "Stop") + this.stopAllSounds(); + } +} + +LGAudioSource.prototype.onPropertyChanged = function( name, value ) +{ + if( name == "src" ) + this.loadSound( value ); + else if(name == "gain") + this.audionode.gain.value = value; +} + +LGAudioSource.prototype.playBuffer = function( buffer ) +{ + var that = this; + var context = LGAudio.getAudioContext(); + + //create a new audionode (this is mandatory, AudioAPI doesnt like to reuse old ones) + var audionode = context.createBufferSource(); //create a AudioBufferSourceNode + audionode.graphnode = this; + audionode.buffer = buffer; + audionode.loop = this.properties.loop; + audionode.playbackRate.value = this.properties.playbackRate; + this._audionodes.push( audionode ); + audionode.connect( this.audionode ); //connect to gain + this._audionodes.push( audionode ); + + audionode.onended = function() + { + //console.log("ended!"); + that.trigger("ended"); + //remove + var index = that._audionodes.indexOf( audionode ); + if(index != -1) + that._audionodes.splice(index,1); + } + + audionode.start(); + return audionode; +} + +LGAudioSource.prototype.loadSound = function( url ) { var that = this; @@ -235,6 +322,12 @@ LGAudio.prototype.loadSound = function( url ) request.onload = function() { context.decodeAudioData( request.response, function(buffer) { that._audio_buffer = buffer; + if(that._url) + { + URL.revokeObjectURL( that._url ); + that._url = null; + } + that._loading_audio = false; //if is playing, then play it if(that.graph && that.graph.status === LGraph.STATUS_RUNNING) @@ -249,21 +342,33 @@ LGAudio.prototype.loadSound = function( url ) } } -LGAudio.prototype.onGetInputs = function() +//Helps connect/disconnect AudioNodes when new connections are made in the node +LGAudioSource.prototype.onConnectionsChange = LGAudio.onConnectionsChange; + +LGAudioSource.prototype.onGetInputs = function() { - return [["Play",LiteGraph.ACTION],["Stop",LiteGraph.ACTION]]; + return [["playbackRate","number"],["Play",LiteGraph.ACTION],["Stop",LiteGraph.ACTION]]; } -LGAudio.prototype.onGetOutputs = function() +LGAudioSource.prototype.onGetOutputs = function() { return [["ended",LiteGraph.EVENT]]; } +LGAudioSource.prototype.onDropFile = function(file) +{ + if(this._url) + URL.revokeObjectURL( this._url ); + this._url = URL.createObjectURL( file ); + this.properties.src = this._url; + this.loadSound( this._url ); +} + + +LGAudioSource.title = "Source"; +LGAudioSource.desc = "Plays audio"; +LiteGraph.registerNodeType("audio/source", LGAudioSource); -LGAudio.title = "Source"; -LGAudio.desc = "Plays audio"; -LiteGraph.registerNodeType("audio/source", LGAudio); -global.LGAudio = LGAudio; //***************************************************** @@ -286,7 +391,7 @@ function LGAudioAnalyser() this.audionode.smoothingTimeConstant = this.properties.smoothingTimeConstant; this.addInput("in","audio"); - this.addOutput("freqs","FFT"); + this.addOutput("freqs","array"); //this.addOutput("time","freq"); this._freq_bin = null; @@ -351,33 +456,7 @@ function createAudioNodeWrapper( class_object ) this.audionode[ name ] = value; } - class_object.prototype.onConnectionsChange = function( connection, slot, connected, link_info ) - { - //only process the outputs events - if(connection != LiteGraph.OUTPUT) - return; - - var target_node = null; - if( link_info ) - target_node = this.graph.getNodeById( link_info.target_id ); - if( !target_node ) - return; - - if( connected ) - { - if(target_node.connectAudioToSlot) - target_node.connectAudioToSlot( this.audionode, link_info.target_slot ); - else - LGAudio.connect( this.audionode, target_node.audionode ); - } - else - { - if(target_node.disconnectAudioFromSlot) - target_node.disconnectAudioFromSlot( this.audionode, link_info.target_slot ); - else - LGAudio.disconnect( this.audionode, target_node.audionode ); - } - } + class_object.prototype.onConnectionsChange = LGAudio.onConnectionsChange; } @@ -417,6 +496,44 @@ LGAudioGain.desc = "Audio gain"; LiteGraph.registerNodeType("audio/gain", LGAudioGain); + + + +function LGAudioWaveShaper() +{ + //default + this.properties = { + }; + + this.audionode = LGAudio.getAudioContext().createWaveShaper(); + this.addInput("in","audio"); + this.addInput("shape","waveshape"); + this.addOutput("out","audio"); +} + +LGAudioWaveShaper.prototype.onExecute = function() +{ + if(!this.inputs || !this.inputs.length) + return; + var v = this.getInputData(1); + if(v === undefined) + return; + this.audionode.curve = v; +} + +LGAudioWaveShaper.prototype.setWaveShape = function(shape) +{ + this.audionode.curve = shape; +} + +createAudioNodeWrapper( LGAudioWaveShaper ); + +/* disabled till I dont find a way to do a wave shape +LGAudioWaveShaper.title = "WaveShaper"; +LGAudioWaveShaper.desc = "Distortion using wave shape"; +LiteGraph.registerNodeType("audio/waveShaper", LGAudioWaveShaper); +*/ + function LGAudioMixer() { //default @@ -443,20 +560,12 @@ function LGAudioMixer() this.addOutput("out","audio"); } -LGAudioMixer.prototype.connectAudioToSlot = function( audionode, slot ) +LGAudioMixer.prototype.getAudioNodeInInputSlot = function( slot ) { if(slot == 0) - LGAudio.connect( audionode, this.audionode1 ); + return this.audionode1; else if(slot == 2) - LGAudio.connect( audionode, this.audionode2 ); -} - -LGAudioMixer.prototype.disconnectAudioFromSlot = function( audionode, slot ) -{ - if(slot == 0) - LGAudio.disconnect( audionode, this.audionode1 ); - else if(slot == 2) - LGAudio.disconnect( audionode, this.audionode2 ); + return this.audionode2; } LGAudioMixer.prototype.onExecute = function() @@ -492,46 +601,23 @@ function LGAudioDelay() { //default this.properties = { - time: 5 + delayTime: 0.5 }; - this.audionode = LGAudio.getAudioContext().createDelay( this.properties.time ); + this.audionode = LGAudio.getAudioContext().createDelay( 10 ); + this.audionode.delayTime.value = this.properties.delayTime; this.addInput("in","audio"); + this.addInput("time","number"); this.addOutput("out","audio"); } createAudioNodeWrapper( LGAudioDelay ); -LGAudioDelay.prototype.onPropertyChanged = function( name, value ) +LGAudioDelay.prototype.onExecute = function() { - if(name == "time") - { - if(value > 500) - value = 500; - if(value < 0) - value = 0; - - var input_node = this.getInputNode(0); - var output_nodes = this.getOutputNodes(0); - - if(input_node) - input_node.audionode.disconnect( this.audionode ); - if(output_nodes) - { - for(var i = 0; i < output_nodes.length; ++i) - this.audionode.disconnect( output_nodes[i].audionode ); - } - - this.audionode = LGAudio.getAudioContext().createDelay( value ); - - if(input_node) - input_node.audionode.connect( this.audionode ); - if(output_nodes) - { - for(var i = 0; i < output_nodes.length; ++i) - this.audionode.connect( output_nodes[i].audionode ); - } - } + var v = this.getInputData(1); + if(v !== undefined ) + this.audionode.delayTime.value = v; } LGAudioDelay.title = "Delay"; @@ -585,25 +671,16 @@ LiteGraph.registerNodeType("audio/biquadfilter", LGAudioBiquadFilter); //***************************************************** -function LGAudioDestination() -{ - this.audionode = LGAudio.getAudioContext().destination; - this.addInput("in","audio"); -} - - -LGAudioDestination.title = "Destination"; -LGAudioDestination.desc = "Audio output"; -LiteGraph.registerNodeType("audio/destination", LGAudioDestination); - - - //EXTRA function LGAudioVisualization() { - this.addInput("freqs","FFT"); + this.properties = { + continuous: true + }; + + this.addInput("freqs","array"); this.size = [300,200]; this._last_buffer = null; } @@ -628,11 +705,24 @@ LGAudioVisualization.prototype.onDrawForeground = function(ctx) ctx.strokeStyle = "white"; ctx.beginPath(); var x = 0; - for(var i = 0; i < buffer.length; i+= delta) + + if(this.properties.continuous) { ctx.moveTo(x,h); - ctx.lineTo(x,h - (buffer[i|0]/255) * h); - x++; + for(var i = 0; i < buffer.length; i+= delta) + { + ctx.lineTo(x,h - (buffer[i|0]/255) * h); + x++; + } + } + else + { + for(var i = 0; i < buffer.length; i+= delta) + { + ctx.moveTo(x,h); + ctx.lineTo(x,h - (buffer[i|0]/255) * h); + x++; + } } ctx.stroke(); } @@ -643,4 +733,18 @@ LiteGraph.registerNodeType("audio/visualization", LGAudioVisualization); +function LGAudioDestination() +{ + this.audionode = LGAudio.getAudioContext().destination; + this.addInput("in","audio"); +} + + +LGAudioDestination.title = "Destination"; +LGAudioDestination.desc = "Audio output"; +LiteGraph.registerNodeType("audio/destination", LGAudioDestination); + + + + })( window ); \ No newline at end of file diff --git a/src/nodes/image.js b/src/nodes/image.js index 81fe0b496..659776e3c 100755 --- a/src/nodes/image.js +++ b/src/nodes/image.js @@ -14,12 +14,13 @@ GraphicsImage.title = "Image"; GraphicsImage.desc = "Image loader"; GraphicsImage.widgets = [{name:"load",text:"Load",type:"button"}]; +GraphicsImage.supported_extensions = ["jpg","jpeg","png","gif"]; GraphicsImage.prototype.onAdded = function() { if(this.properties["url"] != "" && this.img == null) { - this.loadImage(this.properties["url"]); + this.loadImage( this.properties["url"] ); } } @@ -51,14 +52,7 @@ GraphicsImage.prototype.onPropertyChanged = function(name,value) return true; } -GraphicsImage.prototype.onDropFile = function(file, filename) -{ - var img = new Image(); - img.src = file; - this.img = img; -} - -GraphicsImage.prototype.loadImage = function(url) +GraphicsImage.prototype.loadImage = function( url, callback ) { if(url == "") { @@ -68,7 +62,6 @@ GraphicsImage.prototype.loadImage = function(url) this.img = document.createElement("img"); - var url = name; if(url.substr(0,7) == "http://") { if(LiteGraph.proxy) //proxy external files @@ -80,6 +73,8 @@ GraphicsImage.prototype.loadImage = function(url) var that = this; this.img.onload = function() { + if(callback) + callback(this); that.trace("Image loaded, size: " + that.img.width + "x" + that.img.height ); this.dirty = true; that.boxcolor = "#9F9"; @@ -95,6 +90,18 @@ GraphicsImage.prototype.onWidget = function(e,widget) } } +GraphicsImage.prototype.onDropFile = function(file) +{ + var that = this; + if(this._url) + URL.revokeObjectURL( this._url ); + this._url = URL.createObjectURL( file ); + this.properties.url = this._url; + this.loadImage( this._url, function(img){ + that.size[1] = (img.height / img.width) * that.size[0]; + }); +} + LiteGraph.registerNodeType("graphics/image", GraphicsImage); @@ -365,7 +372,7 @@ LiteGraph.registerNodeType("graphics/imagefade", ImageFade); function ImageCrop() { this.addInput("","image"); - this.addOutputs("","image"); + this.addOutput("","image"); this.properties = {width:256,height:256,x:0,y:0,scale:1.0 }; this.size = [50,20]; } @@ -388,7 +395,8 @@ ImageCrop.prototype.createCanvas = function() ImageCrop.prototype.onExecute = function() { var input = this.getInputData(0); - if(!input) return; + if(!input) + return; if(input.width) { @@ -401,6 +409,14 @@ ImageCrop.prototype.onExecute = function() this.setOutputData(0,null); } +ImageCrop.prototype.onDrawBackground = function(ctx) +{ + if(this.flags.collapsed) + return; + if(this.canvas) + ctx.drawImage( this.canvas, 0,0,this.canvas.width,this.canvas.height, 0,0, this.size[0], this.size[1] ); +} + ImageCrop.prototype.onPropertyChanged = function(name,value) { this.properties[name] = value; @@ -422,7 +438,7 @@ ImageCrop.prototype.onPropertyChanged = function(name,value) return true; } -LiteGraph.registerNodeType("graphics/cropImage", ImageFade ); +LiteGraph.registerNodeType("graphics/cropImage", ImageCrop ); function ImageVideo() diff --git a/style.css b/style.css index e11d9efd9..e148d570f 100755 --- a/style.css +++ b/style.css @@ -10,4 +10,5 @@ h1 { padding: 1em; background-color: white; box-shadow: 0 0 2px #333; -} \ No newline at end of file +} +