Welcome to BLOKIST

BLOKIST is a portable rapid prototyping tool for developers and non-developers. How? By keeping things visual & clickable from the start.

Usecases:

• share prototypes & simulations
• embeddable businesslogic (iframe)
• dynamic JSON configuration & statemachines
• app development (phonegap)
• dashboards (widescreen / BI / BigData)
• education

Getting started

Eventhough BLOKIST should run fine using touch, an keyboard & mouse is adviced for serious work. Basically the workflow is:

1. open the graph-view

2. add nodes (right-click mouse or double-tap)

3. connect by click+drag connectors

NOTE: there are 2 types of connectors, (JS) events & simple values.

4. write javascript (for advanced users)

Extend or create nodes programmatically using javascript:

4. share or embed!

Press the < > icon in the topbar.

Tutorials

The best way to start is looking at examples (click book-icon in the topbar, next to the cpu-meters)

JS Reference

Here you can find documentation concerning nodes, javascript function etc. Every existing function can be extended like so:

Global objects:

Node events

Each node can be extended using javascript, just create a script node and copy/paste this into the editor:

    // note: this runs every frame
    this.var = this.getInputDataByName("var", !this.var)
    this.setOutputData("var", this.var * 2 )

    this.onLoad  = () => {
      // this runs before nodes are added to the graph (pageload etc)
      require('./stdnodes.js')
      window.padstring = require('https://unpkg.com/padstring@1.0.0/padString.js')
    }

    this.onInit = () => {
        // this runs once a node is added to the graph
        // custom io instead of default inputs/outputs (rightclick node to enable)
        this.addInput("in2",LiteGraph.EVENT)
        this.addInput("var")
        this.addOutput("out2",LiteGraph.EVENT)
        this.addOutput("var")
    }

    this.onEvent = (action,args) => {
        // called when 'in2' or 'in' input is triggered
        this.trigger(false,{action,args}) // forward data to all (=false) outputs
    }

    return this.onEvent // optional: return promise for async support

The above demonstrates:

• custom inputs & outputs
• outputting data (trigger)
• using an npm module (`require')
• importing all the standard nodes (`stdnodes')

NOTE 1: In case you want to modify global node-behaviour see the Global modifications section.

NOTE 2: This would overwrite functions for certain nodes, in such case wrapping is better:

    _.wrap(node, 'onMouseDown', function(onMouseDown){
        // do stuff before
        onMouseDown()
        // do stuff after
    })

Global modifications

In case eventlisteners are too limited, here's how you monkeypatch the whole editor / engine:

// extend graph-function
_.wrap( graph, 'createNode', (createNode, type, title, opts) => {
    // do stuff before
    createNode(type, title, opts)
    // do stuff later
})

Same goes for nodes:

// inspect node functions
var nodes = LiteGraph.registered_node_types
console.dir(nodes["graphics/image"])

// extend node prototype function
_.wrap( nodes["graphics/image"].prototype, 'collapse', (collapse) => {
    alert("don't collapse this one!")
    // collapse()
})

NOTE: the wrapping-technique above will affect all newly created nodes. To modify the behaviour of already created nodes, Node events section above

FAQ

• Q: how can i debug connections

• F: use the 'watch' or 'console' nodes (doubleclick on console-node)

• Q: how can i debug scripts

• F: add the console-node, doubleclick it, and use console.log(myvar) in your scripts

Contributing / Bugs

• Please report bugs here (However, you are probably best off by extending/wrapping functions in vJS's javascript editor).
• Update documentation: please report here or do a pullrequest here in case you're familiar with gitlab.

Nodes

• audio/source: LGAudioSource
• audio/media_source: LGAudioMediaSource
• audio/analyser: LGAudioAnalyser
• audio/gain: LGAudioGain
• audio/convolver: LGAudioConvolver
• audio/waveShaper: LGAudioWaveShaper
• audio/mixer: LGAudioMixer
• audio/adsr: LGAudioADSR
• audio/delay: LGAudioDelay
• audio/biquadfilter: LGAudioBiquadFilter
• audio/oscillator: LGAudioOscillatorNode
• audio/visualization: LGAudioVisualization
• audio/signal: LGAudioBandSignal
• audio/script: LGAudioScript
• audio/destination: LGAudioDestination
• basic/time: Time
• graph/subgraph: Subgraph
• graph/input: GraphInput
• graph/output: GraphOutput
• basic/const: ConstantNumber
• basic/string: ConstantString
• basic/data: ConstantData
• basic/object_property: ObjectProperty
• basic/watch: Watch
• basic/cast: Cast
• basic/console: Console
• basic/alert: Alert
• basic/script: NodeScript
• events/log: LogEvent
• events/sequencer: Sequencer
• events/filter: FilterEvent
• events/counter: EventCounter
• events/delay: DelayEvent
• events/timer: TimerEvent
• fx/lens: LGraphFXLens
• fx/DOF: LGraphDepthOfField
• fx/bokeh: LGraphFXBokeh
• fx/generic: LGraphFXGeneric
• fx/vigneting: LGraphFXVigneting
• texture/texture: LGraphTexture
• texture/preview: LGraphTexturePreview
• texture/save: LGraphTextureSave
• texture/operation: LGraphTextureOperation
• texture/shader: LGraphTextureShader
• texture/warp: LGraphTextureWarp
• texture/copy: LGraphTextureCopy
• texture/average: LGraphTextureAverage
• texture/temporal_smooth: LGraphTextureTemporalSmooth
• texture/linear_avg_smooth: LGraphTextureLinearAvgSmooth
• texture/LUT: LGraphTextureLUT
• texture/color: LGraphTextureColor
• texture/gradient: LGraphTextureGradient
• texture/mix: LGraphTextureMix
• texture/edges: LGraphTextureEdges
• texture/blur: LGraphTextureBlur
• texture/glow: LGraphTextureGlow
• texture/xDoG: LGraphTextureXDoGFilter
• texture/webcam: LGraphTextureWebcam
• texture/lensfx: LGraphLensFX
• texture/exposition: LGraphExposition
• texture/tonemapping: LGraphToneMapping
• texture/perlin: LGraphTexturePerlin
• texture/canvas2D: LGraphTextureCanvas2D
• texture/matte: LGraphTextureMatte
• texture/cubemap: LGraphCubemap
• graphics/plot: GraphicsPlot
• graphics/image: GraphicsImage
• color/palette: ColorPalette
• graphics/frame: ImageFrame
• graphics/imagefade: ImageFade
• graphics/cropImage: ImageCrop
• graphics/canvas: CanvasNode
• graphics/drawImage: DrawImageNode
• graphics/drawRectangle: DrawRectangleNode
• graphics/video: ImageVideo
• graphics/webcam: ImageWebcam
• input/gamepad: GamepadInput
• widget/button: WidgetButton
• widget/toggle: WidgetToggle
• widget/number: WidgetNumber
• widget/knob: WidgetKnob
• widget/internal_slider: WidgetSliderGUI
• widget/hslider: WidgetHSlider
• widget/progress: WidgetProgress
• widget/text: WidgetText
• widget/panel: WidgetPanel
• logic/selector: Selector
• logic/sequence: Sequence
• math/converter: Converter
• math/bypass: Bypass
• math/to_number: ToNumber
• math/range: MathRange
• math/rand: MathRand
• math/noise: MathNoise
• math/spikes: MathSpikes
• math/clamp: MathClamp
• math/lerp: MathLerp
• math/abs: MathAbs
• math/floor: MathFloor
• math/frac: MathFrac
• math/smoothstep: MathSmoothStep
• math/scale: MathScale
• math/average: MathAverageFilter
• math/tendTo: MathTendTo
• math/operation: MathOperation
• math/compare: MathCompare
• math/condition: MathCondition
• math/accumulate: MathAccumulate
• math/trigonometry: MathTrigonometry
• math/formula: MathFormula
• math3d/vec2-to-xyz: Math3DVec2ToXYZ
• math3d/xy-to-vec2: Math3DXYToVec2
• math3d/vec3-to-xyz: Math3DVec3ToXYZ
• math3d/xyz-to-vec3: Math3DXYZToVec3
• math3d/vec4-to-xyzw: Math3DVec4ToXYZW
• math3d/xyzw-to-vec4: Math3DXYZWToVec4
• math3d/quaternion: Math3DQuaternion
• math3d/rotation: Math3DRotation
• math3d/rotate_vec3: Math3DRotateVec3
• math3d/mult-quat: Math3DMultQuat
• math3d/quat-slerp: Math3DQuatSlerp
• math3d/vec2-to-xyz: Math3DVec2ToXYZ
• math3d/xy-to-vec2: Math3DXYToVec2
• math3d/vec3-to-xyz: Math3DVec3ToXYZ
• math3d/xyz-to-vec3: Math3DXYZToVec3
• math3d/vec4-to-xyzw: Math3DVec4ToXYZW
• math3d/xyzw-to-vec4: Math3DXYZWToVec4
• math3d/vec3-scale: Math3DVec3Scale
• math3d/vec3-length: Math3DVec3Length
• math3d/vec3-normalize: Math3DVec3Normalize
• math3d/vec3-lerp: Math3DVec3Lerp
• math3d/vec3-dot: Math3DVec3Dot
• math3d/quaternion: Math3DQuaternion
• math3d/rotation: Math3DRotation
• math3d/rotate_vec3: Math3DRotateVec3
• math3d/mult-quat: Math3DMultQuat
• math3d/quat-slerp: Math3DQuatSlerp
• midi/input: LGMIDIIn
• midi/output: LGMIDIOut
• midi/show: LGMIDIShow
• midi/filter: LGMIDIFilter
• midi/event: LGMIDIEvent
• midi/cc: LGMIDICC
• midi/generator: LGMIDIGenerator
• midi/transpose: LGMIDITranspose
• midi/quantize: LGMIDIQuantize
• midi/play: LGMIDIPlay
• midi/keys: LGMIDIKeys
• network/websocket: LGWebSocket
• network/sillyclient: LGSillyClient

LiteGraph

The Global Scope. It contains all the registered node classes.

LiteGraph = new LiteGraph()

LiteGraph.registerNodeType(type,base_class)

Register a node class so it can be listed when the user wants to create a new one

LiteGraph.wrapFunctionAsNode(name,func,param_types,return_type,properties)

Create a new nodetype by passing a function, it wraps it with a proper class and generates inputs according to the parameters of the function. Useful to wrap simple methods that do not require properties, and that only process some input to generate an output.

LiteGraph.addNodeMethod(func)

Adds this method to all nodetypes, existing and to be created (You can add it to LGraphNode.prototype but then existing node types wont have it)

LiteGraph.createNode(type,name,options)

Create a node of a given type with a name. The node is not attached to any graph yet.

LiteGraph.getNodeType(type)

Returns a registered node type with a given name

returns Class: the node class

LiteGraph.getNodeType(category)

Returns a list of node types matching one category

returns Array: array with all the node classes

LiteGraph.getNodeTypesCategories()

Returns a list with all the node type categories

returns Array: array with all the names of the categories

LGraph

LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop.

graph = new LGraph()

graph.clear()

Removes all nodes from this graph

graph.attachCanvas(graph_canvas)

Attach Canvas to this graph

graph.detachCanvas(graph_canvas)

Detach Canvas from this graph

graph.start(interval)

Starts running this graph every interval milliseconds.

graph.stop()

Stops the execution loop of the graph

graph.runStep(num)

Run N steps (cycles) of the graph

graph.updateExecutionOrder()

Updates the graph execution order according to relevance of the nodes (nodes with only outputs have more relevance than nodes with only inputs.

graph.getAncestors()

Returns all the nodes that could affect this one (ancestors) by crawling all the inputs recursively. It doesn't include the node itself

returns Array: an array with all the LGraphNodes that affect this node, in order of execution

graph.arrange()

Positions every node in a more readable manner

graph.getTime()

Returns the amount of time the graph has been running in milliseconds

returns number: number of milliseconds the graph has been running

graph.getFixedTime()

Returns the amount of time accumulated using the fixedtime_lapse var. This is used in context where the time increments should be constant

returns number: number of milliseconds the graph has been running

graph.getElapsedTime()

Returns the amount of time it took to compute the latest iteration. Take into account that this number could be not correct if the nodes are using graphical actions

returns number: number of milliseconds it took the last cycle

graph.sendEventToAllNodes(eventname,params)

Sends an event to all the nodes, useful to trigger stuff

graph.add(node)

Adds a new node instance to this graph

graph.remove(node)

Removes a node from the graph

graph.getNodeById(id)

Returns a node by its id.

graph.findNodesByClass(classObject)

Returns a list of nodes that matches a class

returns Array: a list with all the nodes of this type

graph.findNodesByType(type)

Returns a list of nodes that matches a type

returns Array: a list with all the nodes of this type

graph.findNodeByTitle(name)

Returns the first node that matches a name in its title

returns Node: the node or null

graph.findNodesByTitle(name)

Returns a list of nodes that matches a name

returns Array: a list with all the nodes with this name

graph.getNodeOnPos(x,y,nodes_list)

Returns the top-most node in this position of the canvas

returns LGraphNode: the node at this position or null

graph.getGroupOnPos(x,y)

Returns the top-most group in that position

returns LGraphGroup: the group or null

graph.checkNodeTypes()

Checks that the node type matches the node type registered, used when replacing a nodetype by a newer version during execution this replaces the ones using the old version with the new version

graph.addGlobalInput(name,type,value)

Tell this graph it has a global graph input of this type

graph.setGlobalInputData(name,data)

Assign a data to the global graph input

graph.getInputData(name)

Returns the current value of a global graph input

returns undefined: the data

graph.renameInput(old_name,new_name)

Changes the name of a global graph input

graph.changeInputType(name,type)

Changes the type of a global graph input

graph.removeInput(name,type)

Removes a global graph input

graph.addOutput(name,type,value)

Creates a global graph output

graph.setOutputData(name,value)

Assign a data to the global output

graph.getOutputData(name)

Returns the current value of a global graph output

returns undefined: the data

graph.renameOutput(old_name,new_name)

Renames a global graph output

graph.changeOutputType(name,type)

Changes the type of a global graph output

graph.removeOutput(name)

Removes a global graph output

graph.isLive()

returns if the graph is in live mode

graph.clearTriggeredSlots()

clears the triggered slot animation in all links (stop visual animation)

graph.removeLink(link_id)

Destroys a link

graph.serialize()

Creates a Object containing all the info about this graph, it can be serialized

returns Object: value of the node

graph.configure(str,returns)

Configure a graph from a JSON string

LGraphNode

myLGraphNode.method(name)

Base Class for all the node type classes

myLGraphNode.configure()

configure a node from an object containing the serialized info

myLGraphNode.serialize()

serialize the content

myLGraphNode.toString()

serialize and stringify

myLGraphNode.getTitle()

get the title string

myLGraphNode.setProperty(name,value)

sets the value of a property

myLGraphNode.setOutputData(slot,data)

sets the output data

myLGraphNode.setOutputDataType(slot,datatype)

sets the output data type, useful when you want to be able to overwrite the data type

myLGraphNode.getInputData(slot,force_update)

Retrieves the input data (data traveling through the connection) from one slot

returns undefined: data or if it is not connected returns undefined

myLGraphNode.getInputDataType(slot)

Retrieves the input data type (in case this supports multiple input types)

returns String: datatype in string format

myLGraphNode.getInputDataByName(slot_name,force_update)

Retrieves the input data from one slot using its name instead of slot number

returns undefined: data or if it is not connected returns null

myLGraphNode.isInputConnected(slot)

tells you if there is a connection in one input slot

returns boolean:

myLGraphNode.getInputInfo(slot)

tells you info about an input connection (which node, type, etc)

returns Object: object or null { link: id, name: string, type: string or 0 }

myLGraphNode.getInputNode(slot)

returns the node connected in the input slot

returns LGraphNode: node or null

myLGraphNode.getInputOrProperty(name)

returns the value of an input with this name, otherwise checks if there is a property with that name

returns undefined: value

myLGraphNode.getOutputData(slot)

tells you the last output data that went in that slot

returns Object: object or null

myLGraphNode.getOutputInfo(slot)

tells you info about an output connection (which node, type, etc)

returns Object: object or null { name: string, type: string, links: [ ids of links in number ] }

myLGraphNode.isOutputConnected(slot)

tells you if there is a connection in one output slot

returns boolean:

myLGraphNode.isAnyOutputConnected()

tells you if there is any connection in the output slots

returns boolean:

myLGraphNode.getOutputNodes(slot)

retrieves all the nodes connected to this output slot

returns array:

myLGraphNode.trigger(event,param)

Triggers an event in this node, this will trigger any output with the same name

myLGraphNode.triggerSlot(slot,param,link_id)

Triggers an slot event in this node

myLGraphNode.clearTriggeredSlot(slot,link_id)

clears the trigger slot animation

myLGraphNode.addProperty(name,default_value,type,extra_info)

add a new property to this node

myLGraphNode.addOutput(name,type,extra_info)

add a new output slot to use in this node

myLGraphNode.addOutputs(array)

add a new output slot to use in this node

myLGraphNode.removeOutput(slot)

remove an existing output slot

myLGraphNode.addInput(name,type,extra_info)

add a new input slot to use in this node

myLGraphNode.addInputs(array)

add several new input slots in this node

myLGraphNode.removeInput(slot)

remove an existing input slot

myLGraphNode.addConnection(name,type,pos,direction)

add an special connection to this node (used for special kinds of graphs)

myLGraphNode.computeSize(minHeight)

computes the size of a node according to its inputs and output slots

returns number: the total size

myLGraphNode.addWidget()

Allows to pass

returns Object: the created widget

myLGraphNode.getBounding()

returns the bounding of the object, used for rendering purposes bounding is: [topleft_cornerx, topleft_cornery, width, height]

returns Float32Array: the total size

myLGraphNode.isPointInside(x,y)

checks if a point is inside the shape of a node

returns boolean:

myLGraphNode.getSlotInPosition(x,y)

checks if a point is inside a node slot, and returns info about which slot

returns Object: if found the object contains { input|output: slot object, slot: number, link_pos: [x,y] }

myLGraphNode.findInputSlot(name)

returns the input slot with a given name (used for dynamic slots), -1 if not found

returns number: the slot (-1 if not found)

myLGraphNode.findOutputSlot(name)

returns the output slot with a given name (used for dynamic slots), -1 if not found

returns number: the slot (-1 if not found)

myLGraphNode.connect(slot,node,target_slot)

connect this node output to the input of another node

returns Object: the link_info is created, otherwise null

myLGraphNode.disconnectOutput(slot,target_node)

disconnect one output to an specific node

returns boolean: if it was disconnected successfully

myLGraphNode.disconnectInput(slot)

disconnect one input

returns boolean: if it was disconnected successfully

myLGraphNode.getConnectionPos(is_input,slot,out)

returns the center of a connection point in canvas coords

returns undefined: the position

myLGraphNode.collapse()

Collapse the node to make it smaller on the canvas

myLGraphNode.pin()

Forces the node to do not move or realign on Z

LGraphCanvas

This class is in charge of rendering one graph inside a canvas. And provides all the interaction required. Valid callbacks are: onNodeSelected, onNodeDeselected, onShowNodePanel, onNodeDblClicked

myLGraphCanvas = new LGraphCanvas()

myLGraphCanvas.clear()

clears all the data inside

myLGraphCanvas.setGraph(graph)

assigns a graph, you can reassign graphs to the same canvas

myLGraphCanvas.openSubgraph(graph)

opens a graph contained inside a node in the current graph

myLGraphCanvas.closeSubgraph(assigns)

closes a subgraph contained inside a node

myLGraphCanvas.getCurrentGraph()

returns the visualy active graph (in case there are more in the stack)

returns LGraph: the active graph

myLGraphCanvas.setCanvas(assigns)

assigns a canvas

myLGraphCanvas.bindEvents()

binds mouse, keyboard, touch and drag events to the canvas

myLGraphCanvas.unbindEvents()

unbinds mouse events from the canvas

myLGraphCanvas.enableWebGL()

this function allows to render the canvas using WebGL instead of Canvas2D this is useful if you plant to render 3D objects inside your nodes, it uses litegl.js for webgl and canvas2DtoWebGL to emulate the Canvas2D calls in webGL

LGraphCanvas

myLGraphCanvas.setDirty(fgcanvas,bgcanvas)

marks as dirty the canvas, this way it will be rendered again

myLGraphCanvas.getCanvasWindow()

Used to attach the canvas in a popup

returns window: returns the window where the canvas is attached (the DOM root node)

myLGraphCanvas.startRendering()

starts rendering the content of the canvas when needed

myLGraphCanvas.stopRendering()

stops rendering the content of the canvas (to save resources)

myLGraphCanvas.processMouseMove()

Called when a mouse move event has to be processed

myLGraphCanvas.processMouseUp()

Called when a mouse up event has to be processed

myLGraphCanvas.processMouseWheel()

Called when a mouse wheel event has to be processed

myLGraphCanvas.isOverNodeBox()

returns true if a position (in graph space) is on top of a node little corner box

myLGraphCanvas.isOverNodeInput()

returns true if a position (in graph space) is on top of a node input slot

myLGraphCanvas.processKey()

process a key event

myLGraphCanvas.processDrop()

process a item drop event on top the canvas

myLGraphCanvas.selectNode()

selects a given node (or adds it to the current selection)

myLGraphCanvas.selectNodes()

selects several nodes (or adds them to the current selection)

myLGraphCanvas.deselectNode()

removes a node from the current selection

myLGraphCanvas.deselectAllNodes()

removes all nodes from the current selection

myLGraphCanvas.deleteSelectedNodes()

deletes all nodes in the current selection from the graph

myLGraphCanvas.centerOnNode()

centers the camera on a given node

myLGraphCanvas.adjustMouseEvent()

adds some useful properties to a mouse event, like the position in graph coordinates

myLGraphCanvas.setZoom()

changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom

myLGraphCanvas.convertOffsetToCanvas()

converts a coordinate from graph coordinates to canvas2D coordinates

myLGraphCanvas.convertCanvasToOffset()

converts a coordinate from Canvas2D coordinates to graph space

myLGraphCanvas.bringToFront()

brings a node to front (above all other nodes)

myLGraphCanvas.sendToBack()

sends a node to the back (below all other nodes)

myLGraphCanvas.computeVisibleNodes()

checks which nodes are visible (inside the camera area)

myLGraphCanvas.draw()

renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes)

myLGraphCanvas.drawFrontCanvas()

draws the front canvas (the one containing all the nodes)

myLGraphCanvas.renderInfo()

draws some useful stats in the corner of the canvas

myLGraphCanvas.drawBackCanvas()

draws the back canvas (the one containing the background and the connections)

myLGraphCanvas.drawNode()

draws the given node inside the canvas

myLGraphCanvas.drawNodeShape()

draws the shape of the given node in the canvas

myLGraphCanvas.drawConnections()

draws every connection visible in the canvas OPTIMIZE THIS: pre-catch connections position instead of recomputing them every time

myLGraphCanvas.renderLink(a,b,link,skip_border,flow,color,start_dir,end_dir,num_sublines)

draws a link between two points

myLGraphCanvas.drawNodeWidgets()

draws the widgets stored inside a node

myLGraphCanvas.processNodeWidgets()

process an event on widgets

myLGraphCanvas.drawGroups()

draws every group area in the background

myLGraphCanvas.resize()

resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode

myLGraphCanvas.switchLiveMode()

switches to live mode (node shapes are not rendered, only the content) this feature was designed when graphs where meant to create user interfaces

ContextMenu

ContextMenu from LiteGUI

myContextMenu = new ContextMenu()