How to use noflo - 10 common examples

$(document).ready(function () {
  $('canvas').css('z-index', '-5');
  $('body').append($('<input>').attr('type', 'range').attr('min', '0.1').attr('value', '0.1').attr('max', '255').attr('step', '0.1').attr('id', 'sigma'));
  $('body').append($('<input>').attr('type', 'range').attr('min', '0').attr('value', '1').attr('max', '255').attr('step', '1').attr('id', 'radius'));

  let nofloGraph = new noflo.graph.Graph('wat');

  function getNofloGraph () {
    return nofloGraph;
  }

  let dag = pipeline.DAG({regl, resl, getNofloGraph, pipeline});

  // so we can access stuff easily from the console.
  window.dag = dag;

  nofloGraph.addNode('src-texture', 'texture', {});
  nofloGraph.addNode('fbo', 'framebuffer', {});
  nofloGraph.addNode('blur', 'brute-gaussian', {});
  nofloGraph.addNode('sink-canvas', 'canvas', {});

  for (let node of dag.nodes()) {

$(document).ready(function () {
  // put the canvas in front of everything, but don't let it interfere with the
  // input events and steal focus etc.
  $('body > canvas')
      .css('z-index:', '1000')
      .css('pointer-events', 'none');

  // initialize the graph model
  let nofloGraph = new noflo.graph.Graph({options: {caseSensitive: true}});
  function getNofloGraph () {
    return nofloGraph;
  }

  // initialize the DAG/pipeline
  let dag = pipeline.DAG({regl, resl, getNofloGraph, pipeline, $});

  // so we can access stuff easily from the console.
  window.dag = dag;

  // create a few nodes
  dag.n('src', 'texture');
  dag.n('fbo', 'framebuffer');
  dag.n('blur', 'brute-gaussian');
  dag.n('sink', 'canvas');
  // hardcode some values on to the texture

graph.addEdge('Touch', 'end', 'DragY', 'close');
      graph.addEdge('DragY', 'out', 'PosY', 'in');

      // up-down axis return when touch ends
      graph.addEdge('AnchorY', 'out', 'SpringY', 'anchor');
      graph.addEdge('Touch', 'moveY', 'NewY', 'data');
      graph.addEdge('Touch', 'end', 'NewY', 'in');
      graph.addEdge('NewY', 'out', 'SpringY', 'in');
      graph.addEdge('SpringY', 'out', 'PosY', 'in');

      // write graph JSON to textarea
      var g = document.getElementById('graph');
      g.value = JSON.stringify(graph.toJSON(), null, 2);
      
      // run the graph
      noflo.createNetwork(graph, function (network) {
        console.log("Network created");
      });
    };

window.loadGraph = function (json) {
          // Remove loading message
          var loading = document.getElementById("loading");
          loading.parentNode.removeChild(loading);
          // Load graph
          var editor = document.getElementById('editor');
          var graph = json.data ? JSON.parse(json.data.files['noflo.json'].content) : json;
          var graphString = JSON.stringify(graph);
          editor.graph = graph;

          // Attach editor to nav
          var nav = document.getElementById('nav');
          nav.editor = editor;

          // Simulate a library update
          setTimeout(function () {
            var originalComponent = editor.getComponent('core/Split');
            if (!originalComponent) {
              console.warn("Didn't find component. Something is amiss.");
              return;
            }
            var component = JSON.parse(JSON.stringify(originalComponent));
            component.icon = 'github';

server.ext('onPreHandler', (request, reply) => {

            const settings = request.route.settings.plugins[name];

            if (settings) {
                //console.log(Util.inspect(`flow-loader.plugin [${settings.name}] -> ${JSON.stringify(request.path)} `, { colors: true })); // TODO: REMOVE!!!!
                const data = { request: new NoFlo.IP('data', request, { scope: request.id }) };
                if (_.isArray(settings.consumes)) {
                    settings.consumes.forEach((service) => {

                        data[service] = new NoFlo.IP('data', server.app[service], { scope: request.id });
                    });
                }
                const graph = NoFlo.asCallback(settings.name, { loader });
                const promisedGraph = Util.promisify(graph);
                promisedGraph(data)
                    .then((result) => {

                        if (!result) {
                            return reply.continue();
                        }
                        if (result.error) {
                            throw new Error(new Boom.internal(result.error));
                        }
                        request.plugins[name] = result.out;
                        return reply.continue();
                    })
                    .catch((err) => {

                        console.error(err);

const getComponent = (): NofloComponent => {
  const c: NofloComponent = new noflo.Component()

  /* META */
  c.description = 'For a prompt, collect statements numbering up to a given maximum (or unlimited) from a list of participants'
  c.icon = 'compress'

  /* IN PORTS */
  c.inPorts.add('max_responses', {
    datatype: 'all', // string or number
    description: 'the number of responses to stop collecting at, use "*" for any amount',
    required: true
  })
  c.inPorts.add('max_time', {
    datatype: 'int',
    description: 'the number of seconds to wait until stopping this process automatically',
    required: true
  })

DataflowNoflo.registerGraph = function(graph) {
      // Plugin: library
      var cl = new noflo.ComponentLoader();
      cl.baseDir = graph.baseDir;
      cl.listComponents(function(types){
        for (name in types) {
          cl.load(name, function(component){
            makeDataflowNode(name, component);
          });
        }
      });
      // Might have to wait for the load callbacks
      dataflow.plugins.library.update({
        exclude: ["base", "base-resizable", "test", "noflo-base"]
      });

      // Plugin: source
      var sourceChanged = function(graph) {
        dataflow.plugins.source.show( JSON.stringify(graph.toJSON(), null, 2) );

$.getJSON('clock.json', function (graphDefinition) {
        noflo.graph.loadJSON(graphDefinition, function (graph) {
          window.graph = graph;
          // Which component to start with when loading components
          graph.baseDir = '/dataflow-noflo';

          var dataflow = new Dataflow({appendTo:"#noflo-ui"});

          // Dataflow-Noflo connection
          dataflow.plugins.noflo.registerGraph(graph, dataflow, function (dfGraph) {
            // Run the graph
            noflo.createNetwork(graph, function (network) {
              graph.on('addInitial', function () {
                network.sendInitials();
              });
            });
          });
        });

window.onload = function () {
      // Dependencies
      var Dataflow = require('/meemoo-dataflow').Dataflow;
      require('/dataflow-noflo');
      var noflo = require('noflo');

      // Start dataflow
      var dataflow = new Dataflow({appendTo:"#noflo-ui"});
      // Load blank graph
      var nfGraph = noflo.graph.createGraph("NoFlo");
      nfGraph.baseDir = "/dataflow-noflo";

      // Dataflow-Noflo connection
      dataflow.plugins.noflo.registerGraph(nfGraph, dataflow);
      // Show source
      nfGraph.dataflowGraph.trigger("change");
    };

$.getJSON('draggabilly.json', function (graphDefinition) {
        noflo.graph.loadJSON(graphDefinition, function (graph) {
          window.graph = graph;
          // Which component to start with when loading components
          graph.baseDir = '/dataflow-noflo';

          var dataflow = new Dataflow({appendTo:"#noflo-ui"});

          // Dataflow-Noflo connection
          dataflow.plugins.noflo.registerGraph(graph, dataflow);
      
          // Run the graph
          noflo.createNetwork(graph, function (network) {
            graph.on('addInitial', function () {
              network.sendInitials();
            });
          });
        });