diff --git a/index.html b/index.html
index e766490..8213fed 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html>
 
-<!-- 
+<!--
 
-    Thanks for viewing source! 
+    Thanks for viewing source!
 Try debug.html if you want to poke the insides.
 
         _________________
@@ -32,13 +32,13 @@
   <title>meemoo: use, build, share, and hack creative apps in the browser</title>
 
   <script type="text/javascript">
-    
+
     // Force HTTPS
     if (window.location.host === 'app.meemoo.org' && window.location.protocol === 'http:') {
       window.location.href = window.location.href.replace('http:', 'https:');
     }
-  
-  
+
+
   (function(){
     "use strict";
 
@@ -97,14 +97,14 @@
     }
 
   })();
-  </script>  
+  </script>
 
 </head>
 <body>
-  
+
   <footer style="font-size: 10px; font-family: Monaco, monospace;">
     <span id="debug-info"></span>
-    <a href="http://meemoo.org/" target="_blank">meemoo</a> &raquo; 
+    <a href="http://meemoo.org/" target="_blank">meemoo</a> &raquo;
     <a href="https://github.com/meemoo/iframework" target="_blank">source</a>
     <span id="iframework-info"></span>
     <noscript>&raquo; This web app uses JavaScript (and plenty of it).</noscript>
@@ -129,4 +129,4 @@
   <link href="iframework.css" rel="stylesheet" type="text/css"></link>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/edge-view.js b/src/edge-view.js
index 105d1e7..e8ef430 100644
--- a/src/edge-view.js
+++ b/src/edge-view.js
@@ -1,8 +1,7 @@
-$(function(){
-
+$(function () {
   Iframework.EdgeView = Backbone.View.extend({
-    tagName: "div",
-    className: "edge",
+    tagName: 'div',
+    className: 'edge',
     // template: _.template(template),
     positions: null,
     graphSVGElement: null,
@@ -33,18 +32,26 @@ $(function(){
 
         $(this.elementWire)
           .data({
-            "model": this.model
+            model: this.model,
           })
-          .click( function(event){
-            $(event.target).data("model").view.click(event);
+          .click(function (event) {
+            $(event.target).data('model').view.click(event);
           });
 
         // Listen for changes to redraw
         if (this.model.Source) {
-          this.model.Source.parentNode.on("change:x change:y change:w change:h", this.redraw, this);
+          this.model.Source.parentNode.on(
+            'change:x change:y change:w change:h',
+            this.redraw,
+            this
+          );
         }
         if (this.model.Target) {
-          this.model.Target.parentNode.on("change:x change:y", this.redraw, this);
+          this.model.Target.parentNode.on(
+            'change:x change:y',
+            this.redraw,
+            this
+          );
         }
       }
     },
@@ -52,18 +59,18 @@ $(function(){
       this.calcPositions();
 
       this.elementGroup = this.makeSVG('g', {
-        "transform": "translate("+this.svgX()+","+this.svgY()+")",
-        "class": "wire-group"+(this.isPreview ? " preview" : "")
+        transform: 'translate(' + this.svgX() + ',' + this.svgY() + ')',
+        class: 'wire-group' + (this.isPreview ? ' preview' : ''),
       });
 
       this.elementShadow = this.makeSVG('path', {
-        "class": "wire-shadow",
-        "d": this.svgPathShadow()
+        class: 'wire-shadow',
+        d: this.svgPathShadow(),
       });
       this.elementWire = this.makeSVG('path', {
-        "class": "wire",
-        "d": this.svgPath(),
-        "stroke": this.color()
+        class: 'wire',
+        d: this.svgPath(),
+        stroke: this.color(),
       });
 
       this.elementGroup.appendChild(this.elementShadow);
@@ -73,8 +80,8 @@ $(function(){
 
       // Unhide port plugends
       if (this.model) {
-        this.model.Source.view.$(".plugend").show();
-        this.model.Target.view.$(".plugend").show();
+        this.model.Source.view.$('.plugend').show();
+        this.model.Target.view.$('.plugend').show();
         this.model.parentGraph.view.resizeEdgeSVG();
       }
 
@@ -82,9 +89,12 @@ $(function(){
     },
     redraw: function () {
       this.calcPositions();
-      $(this.elementGroup).attr( "transform", "translate("+this.svgX()+", "+this.svgY()+")" );
-      $(this.elementWire).attr( "d", this.svgPath() );
-      $(this.elementShadow).attr( "d", this.svgPathShadow() );
+      $(this.elementGroup).attr(
+        'transform',
+        'translate(' + this.svgX() + ', ' + this.svgY() + ')'
+      );
+      $(this.elementWire).attr('d', this.svgPath());
+      $(this.elementShadow).attr('d', this.svgPathShadow());
 
       if (this.model) {
         this.model.parentGraph.view.resizeEdgeSVG();
@@ -101,12 +111,24 @@ $(function(){
     calcPositions: function () {
       if (this.model) {
         // Connected edge
-        var sourceName = this.model.get("source")[1];
-        var targetName = this.model.get("target")[1];
-        this.positions.fromX = this.model.Source.view.portOffsetLeft('out', sourceName);
-        this.positions.fromY = this.model.Source.view.portOffsetTop('out', sourceName);
-        this.positions.toX = this.model.Target.view.portOffsetLeft('in', targetName);
-        this.positions.toY = this.model.Target.view.portOffsetTop('in', targetName);
+        var sourceName = this.model.get('source')[1];
+        var targetName = this.model.get('target')[1];
+        this.positions.fromX = this.model.Source.view.portOffsetLeft(
+          'out',
+          sourceName
+        );
+        this.positions.fromY = this.model.Source.view.portOffsetTop(
+          'out',
+          sourceName
+        );
+        this.positions.toX = this.model.Target.view.portOffsetLeft(
+          'in',
+          targetName
+        );
+        this.positions.toY = this.model.Target.view.portOffsetTop(
+          'in',
+          targetName
+        );
       }
     },
     svgX: function () {
@@ -128,10 +150,32 @@ $(function(){
       var fromY = this.positions.fromY - this.svgY();
       var toX = this.positions.toX - this.svgX();
       var toY = this.positions.toY - this.svgY();
-      return "M "+ fromX +" "+ fromY +
-        " L "+ (fromX+this.pathStraight) +" "+ fromY +
-        " C "+ (fromX+this.pathCurve) +" "+ fromY +" "+ (toX-this.pathCurve) +" "+ toY +" "+ (toX-this.pathStraight) +" "+ toY +
-        " L "+ toX +" "+ toY;
+      return (
+        'M ' +
+        fromX +
+        ' ' +
+        fromY +
+        ' L ' +
+        (fromX + this.pathStraight) +
+        ' ' +
+        fromY +
+        ' C ' +
+        (fromX + this.pathCurve) +
+        ' ' +
+        fromY +
+        ' ' +
+        (toX - this.pathCurve) +
+        ' ' +
+        toY +
+        ' ' +
+        (toX - this.pathStraight) +
+        ' ' +
+        toY +
+        ' L ' +
+        toX +
+        ' ' +
+        toY
+      );
     },
     svgPathShadow: function () {
       // Same as svgPath() but y+1
@@ -139,10 +183,32 @@ $(function(){
       var fromY = this.positions.fromY - this.svgY() + 1;
       var toX = this.positions.toX - this.svgX();
       var toY = this.positions.toY - this.svgY() + 1;
-      return "M "+ fromX +" "+ fromY +
-        " L "+ (fromX+this.pathStraight) +" "+ fromY +
-        " C "+ (fromX+this.pathCurve) +" "+ fromY +" "+ (toX-this.pathCurve) +" "+ toY +" "+ (toX-this.pathStraight) +" "+ toY +
-        " L "+ toX +" "+ toY;
+      return (
+        'M ' +
+        fromX +
+        ' ' +
+        fromY +
+        ' L ' +
+        (fromX + this.pathStraight) +
+        ' ' +
+        fromY +
+        ' C ' +
+        (fromX + this.pathCurve) +
+        ' ' +
+        fromY +
+        ' ' +
+        (toX - this.pathCurve) +
+        ' ' +
+        toY +
+        ' ' +
+        (toX - this.pathStraight) +
+        ' ' +
+        toY +
+        ' L ' +
+        toX +
+        ' ' +
+        toY
+      );
     },
     color: function () {
       if (this._color) {
@@ -157,49 +223,57 @@ $(function(){
         return Iframework.wireColors[Iframework.wireColorIndex];
       }
     },
-    setColor: function(c) {
+    setColor: function (c) {
       this._color = c;
-      $(this.elementWire).attr( "stroke", c );
+      $(this.elementWire).attr('stroke', c);
     },
     label: function () {
-      return this.model.get("source")[0] +":"+ this.model.get("source")[1] + 
-        '<span class="wiresymbol" style="color:' + this._color + '">&rarr;</span>' + 
-        this.model.get("target")[0] +":"+ this.model.get("target")[1];
+      return (
+        this.model.get('source')[0] +
+        ':' +
+        this.model.get('source')[1] +
+        '<span class="wiresymbol" style="color:' +
+        this._color +
+        '">&rarr;</span>' +
+        this.model.get('target')[0] +
+        ':' +
+        this.model.get('target')[1]
+      );
     },
     // Thanks bobince http://stackoverflow.com/a/3642265/592125
-    makeSVG: function(tag, attrs) {
-      var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
+    makeSVG: function (tag, attrs) {
+      var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
       for (var k in attrs) {
-        if (k === "xlink:href") {
+        if (k === 'xlink:href') {
           // Pssh namespaces...
-          el.setAttributeNS('http://www.w3.org/1999/xlink','href', attrs[k]);
+          el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]);
         } else {
           el.setAttribute(k, attrs[k]);
         }
       }
       return el;
     },
-    dim: function(){
-      $(this.elementGroup).attr("opacity", 0.2);
+    dim: function () {
+      $(this.elementGroup).attr('opacity', 0.2);
     },
-    undim: function(){
-      $(this.elementGroup).attr("opacity", 1);
+    undim: function () {
+      $(this.elementGroup).attr('opacity', 1);
     },
-    click: function(event) {
+    click: function (event) {
       // If not on top already
-      if (this._z < this.model.parentGraph.edgeCount-1) {
+      if (this._z < this.model.parentGraph.edgeCount - 1) {
         // Bring to top (z-order of SVG can't be done with CSS)
         this.graphSVGElement.appendChild(this.elementGroup);
         this._z = this.model.parentGraph.edgeCount++;
       }
       this.highlight();
     },
-    highlight: function() {
+    highlight: function () {
       // Highlight edge and plugends
       var shadow = $(this.elementShadow);
-      shadow.attr("class", "wire-shadow highlight");
-      setTimeout(function(){
-        shadow.attr("class", "wire-shadow");
+      shadow.attr('class', 'wire-shadow highlight');
+      setTimeout(function () {
+        shadow.attr('class', 'wire-shadow');
       }, 1000);
       if (this.model.Source.view) {
         this.model.Source.view.highlight();
@@ -207,9 +281,6 @@ $(function(){
       if (this.model.Target.view) {
         this.model.Target.view.highlight();
       }
-    }
-
-
+    },
   });
-
 });
diff --git a/src/edge.js b/src/edge.js
index 2954024..9a53ebc 100644
--- a/src/edge.js
+++ b/src/edge.js
@@ -1,15 +1,14 @@
-$(function(){
-
+$(function () {
   Iframework.Edge = Backbone.Model.extend({
     defaults: {
-      source: [0, "default"], 
-      target: [0, "default"]
+      source: [0, 'default'],
+      target: [0, 'default'],
     },
     initialize: function () {
-      this.parentGraph = this.get("parentGraph");
+      this.parentGraph = this.get('parentGraph');
     },
     initializeView: function () {
-      this.view = new Iframework.EdgeView({model:this});
+      this.view = new Iframework.EdgeView({model: this});
       return this.view;
     },
     Source: null,
@@ -19,14 +18,25 @@ $(function(){
     connect: function () {
       // Called from graph.connectEdges()
       try {
-        this.Source = this.parentGraph.get("nodes").get( this.get("source")[0] ).Outputs.get( this.get("source")[1] );
-        this.Target = this.parentGraph.get("nodes").get( this.get("target")[0] ).Inputs.get( this.get("target")[1] );
+        this.Source = this.parentGraph
+          .get('nodes')
+          .get(this.get('source')[0])
+          .Outputs.get(this.get('source')[1]);
+        this.Target = this.parentGraph
+          .get('nodes')
+          .get(this.get('target')[0])
+          .Inputs.get(this.get('target')[1]);
       } catch (e) {
-        console.warn("Edge source or target port not found, try #"+this.connectTryCount+": "+this.toString());
+        console.warn(
+          'Edge source or target port not found, try #' +
+            this.connectTryCount +
+            ': ' +
+            this.toString()
+        );
         if (this.connectTryCount > 0) {
           this.connectTryCount--;
           var self = this;
-          _.delay(function(){
+          _.delay(function () {
             self.connect();
           }, 1000);
         }
@@ -38,10 +48,10 @@ $(function(){
       this.Source.connect(this);
       this.Target.connect(this);
       this.Source.node.receive({
-        connect: { 
+        connect: {
           source: [this.Source.node.id, this.Source.id],
-          target: [this.Target.node.id, this.Target.id]
-        }
+          target: [this.Target.node.id, this.Target.id],
+        },
       });
       if (this.parentGraph.view) {
         this.parentGraph.view.addEdge(this);
@@ -52,12 +62,12 @@ $(function(){
       this.connected = true;
 
       // Set up listener
-      this.Source.node.on( "send:"+this.Source.id, this.send, this );
+      this.Source.node.on('send:' + this.Source.id, this.send, this);
 
       return this;
     },
     send: function (value) {
-      this.Target.node.receive( this.Target.id, value );
+      this.Target.node.receive(this.Target.id, value);
     },
     disconnect: function () {
       // Called from graph.removeEdge()
@@ -65,10 +75,10 @@ $(function(){
         this.Source.disconnect(this);
         this.Target.disconnect(this);
         this.Source.node.receive({
-          disconnect: { 
+          disconnect: {
             source: [this.Source.node.id, this.Source.id],
-            target: [this.Target.node.id, this.Target.id]
-          }
+            target: [this.Target.node.id, this.Target.id],
+          },
         });
         if (this.Target.node.view && this.Target.node.view.Native) {
           this.Target.node.view.Native.disconnectEdge(this);
@@ -79,26 +89,33 @@ $(function(){
       }
 
       // Remove listener
-      this.Source.node.off( "send:"+this.Source.id, this.send, this );
+      this.Source.node.off('send:' + this.Source.id, this.send, this);
 
       this.connected = false;
     },
-    remove: function(){
+    remove: function () {
       this.parentGraph.removeEdge(this);
     },
     toJSON: function () {
       return {
-        source: this.get("source"),
-        target: this.get("target")
+        source: this.get('source'),
+        target: this.get('target'),
       };
     },
-    toString: function(){
-      return this.get("source")[0]+":"+this.get("source")[1]+"->"+this.get("target")[0]+":"+this.get("target")[1];
-    }
+    toString: function () {
+      return (
+        this.get('source')[0] +
+        ':' +
+        this.get('source')[1] +
+        '->' +
+        this.get('target')[0] +
+        ':' +
+        this.get('target')[1]
+      );
+    },
   });
-  
+
   Iframework.Edges = Backbone.Collection.extend({
-    model: Iframework.Edge
+    model: Iframework.Edge,
   });
-
 });
diff --git a/src/eventshistory.js b/src/eventshistory.js
index c555c22..bbbf787 100644
--- a/src/eventshistory.js
+++ b/src/eventshistory.js
@@ -1,22 +1,20 @@
-$(function(){
-  
+$(function () {
   Iframework.Event = Backbone.Model.extend({
     defaults: function () {
       return {
-        action: "",
-        args: {}
+        action: '',
+        args: {},
       };
     },
-    initialize: function () {
-    }
+    initialize: function () {},
   });
 
   Iframework.EventsHistory = Backbone.Collection.extend({
-    model: Iframework.Event
+    model: Iframework.Event,
   });
-  
+
   // binding undo to ctrl+z
-  Mousetrap.bind(['command+z', 'ctrl+z'], function(e) {
+  Mousetrap.bind(['command+z', 'ctrl+z'], function (e) {
     // TODO work with subgraph
     // actual graph shown by iframework
     var graph = window.Iframework.shownGraph;
@@ -24,29 +22,28 @@ $(function(){
     var event = graph.eventsHistory.last();
 
     // what kind of action ocurred?
-    if (event.get("action") === "removeNode") {
-      var node = event.get("args").node;
+    if (event.get('action') === 'removeNode') {
+      var node = event.get('args').node;
       // make sure the node will use the same id
-      var originalIndex = graph.usedIds.indexOf(node.get("id"));
+      var originalIndex = graph.usedIds.indexOf(node.get('id'));
       graph.usedIds.splice(originalIndex, 1);
       // add the node again
       graph.addNode(node);
       // add input and output ports
       var i;
-      for (i=0; i<node.Inputs.length; i++) {
+      for (i = 0; i < node.Inputs.length; i++) {
         node.view.addInput(node.Inputs.at(i));
       }
-      for (i=0; i<node.Outputs.length; i++) {
+      for (i = 0; i < node.Outputs.length; i++) {
         node.view.addOutput(node.Outputs.at(i));
       }
       // add edges
-      var edges = event.get("args").edges;
-      for (i=0; i<edges.length; i++) {
+      var edges = event.get('args').edges;
+      for (i = 0; i < edges.length; i++) {
         graph.addEdge(edges[i]);
       }
     }
     // updates the events stack
     graph.eventsHistory.pop();
   });
-
-});
\ No newline at end of file
+});
diff --git a/src/graph-view.js b/src/graph-view.js
index 71e0398..056a021 100644
--- a/src/graph-view.js
+++ b/src/graph-view.js
@@ -1,32 +1,31 @@
-$(function(){
-
-  var template = 
-    '<div class="edges">'+
-      '<svg class="edgesSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"></svg>'+
-    '</div>'+
-    '<div class="nodes" />'+
-    '<div class="iframework-graph-nav" style="display:none;">'+
-      '<button class="show-parent-graph">back to parent graph</button>'+
+$(function () {
+  var template =
+    '<div class="edges">' +
+    '<svg class="edgesSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"></svg>' +
+    '</div>' +
+    '<div class="nodes" />' +
+    '<div class="iframework-graph-nav" style="display:none;">' +
+    '<button class="show-parent-graph">back to parent graph</button>' +
     '</div>';
 
   Iframework.GraphView = Backbone.View.extend({
-    tagName: "div",
-    className: "graph",
+    tagName: 'div',
+    className: 'graph',
     template: _.template(template),
     events: {
-      "click":           "click",
-      "dragenter":       "ignoreDrag",
-      "dragover":        "ignoreDrag",
-      "drop":            "drop",
-      "selectablestart": "selectableStart",
-      "selectablestop":  "selectableStop",
-      "click .show-parent-graph": "showParentGraph"
+      click: 'click',
+      dragenter: 'ignoreDrag',
+      dragover: 'ignoreDrag',
+      drop: 'drop',
+      selectablestart: 'selectableStart',
+      selectablestop: 'selectableStop',
+      'click .show-parent-graph': 'showParentGraph',
     },
     unhidden: false,
     initialize: function () {
       this.render();
       if (this.model.isSubgraph) {
-        this.$(".iframework-graph-nav").show();
+        this.$('.iframework-graph-nav').show();
         this.$el.hide();
       }
       Iframework.$el.prepend(this.el);
@@ -34,15 +33,15 @@ $(function(){
       this.edgesSvg = this.$('.edgesSvg')[0];
 
       // HACK Panel visible?
-      if ( Iframework.$(".panel").is(":visible") ){
-        this.$el.css("right", "350px");
+      if (Iframework.$('.panel').is(':visible')) {
+        this.$el.css('right', '350px');
       }
 
-      this.model.get("nodes").each( this.addNode.bind(this) );
+      this.model.get('nodes').each(this.addNode.bind(this));
 
       // Drag helper from module library
-      this.$el.droppable({ 
-        accept: ".addnode, .canvas, .meemoo-plugin-images-thumbnail"
+      this.$el.droppable({
+        accept: '.addnode, .canvas, .meemoo-plugin-images-thumbnail',
       });
 
       // Thanks Stu Cox http://stackoverflow.com/a/14578826/592125
@@ -50,13 +49,12 @@ $(function(){
       if (!supportsTouch) {
         // Selectable messes up scroll on touch devices
         this.$el.selectable({
-          filter: ".module",
-          delay: 20
+          filter: '.module',
+          delay: 20,
         });
       }
 
       this.resizeEdgeSVG();
-
     },
     render: function () {
       this.$el.html(this.template(this.model.toJSON()));
@@ -64,7 +62,7 @@ $(function(){
     },
     renderAnimationFrame: function (timestamp) {
       // Hit all nodes
-      this.model.get("nodes").each(function(node){
+      this.model.get('nodes').each(function (node) {
         if (node.view.Native) {
           node.view.Native.renderAnimationFrame(timestamp);
         }
@@ -72,13 +70,13 @@ $(function(){
     },
     click: function (event) {
       // Hide dis/connection boxes
-      $(".edge-edit").remove();
+      $('.edge-edit').remove();
       Iframework.selectedPort = null;
-      
+
       // Deactivate modules
-      this.$(".module").removeClass("active");
+      this.$('.module').removeClass('active');
       // Deselect modules
-      this.$(".module").removeClass("ui-selected");
+      this.$('.module').removeClass('ui-selected');
     },
     ignoreDrag: function (event) {
       event.originalEvent.stopPropagation();
@@ -91,27 +89,27 @@ $(function(){
       var dt = event.originalEvent.dataTransfer;
       if (dt) {
         var files = dt.files;
-        if ( dt.files.length > 0 ) {
+        if (dt.files.length > 0) {
           var file = dt.files[0];
-          var split = file.type.split("/");
+          var split = file.type.split('/');
           var o = {
             x: this.el.scrollLeft + event.originalEvent.clientX + 10,
-            y: this.el.scrollTop + event.originalEvent.clientY + 35
+            y: this.el.scrollTop + event.originalEvent.clientY + 35,
           };
-          if (split[0]==="image"){
-            o.src = "meemoo:image/in";
-            o.state = { url: window.URL.createObjectURL( file ) };
-            Iframework.shownGraph.addNode( o );
-          } else if (split[0]==="video"){
-            o.src = "meemoo:video/player";
-            o.state = { url: window.URL.createObjectURL( file ) };
-            Iframework.shownGraph.addNode( o );
-          } else if (split[0]==="text"){
+          if (split[0] === 'image') {
+            o.src = 'meemoo:image/in';
+            o.state = {url: window.URL.createObjectURL(file)};
+            Iframework.shownGraph.addNode(o);
+          } else if (split[0] === 'video') {
+            o.src = 'meemoo:video/player';
+            o.state = {url: window.URL.createObjectURL(file)};
+            Iframework.shownGraph.addNode(o);
+          } else if (split[0] === 'text') {
             var reader = new FileReader();
-            reader.onload = function(e) {
-              o.src = "meemoo:ui/textarea";
-              o.state = { value: e.target.result };
-              Iframework.shownGraph.addNode( o );
+            reader.onload = function (e) {
+              o.src = 'meemoo:ui/textarea';
+              o.state = {value: e.target.result};
+              Iframework.shownGraph.addNode(o);
             };
             reader.readAsText(file);
           }
@@ -119,37 +117,41 @@ $(function(){
       }
 
       // Drop images or mods from libraries
-      if (!ui) {return false;}
+      if (!ui) {
+        return false;
+      }
 
-      var type = ui.helper.data("meemoo-drag-type");
-      if (!type) {return false;}
+      var type = ui.helper.data('meemoo-drag-type');
+      if (!type) {
+        return false;
+      }
 
       var options = {
         x: Math.round(this.el.scrollLeft + ui.offset.left + 10),
-        y: Math.round(this.el.scrollTop + ui.offset.top + 35)
+        y: Math.round(this.el.scrollTop + ui.offset.top + 35),
       };
 
-      switch(type){
-        case "library-module":
-          var module = ui.draggable.data("module");
+      switch (type) {
+        case 'library-module':
+          var module = ui.draggable.data('module');
           if (module) {
             // Add module
-            module.view.dragAddNode( options );
+            module.view.dragAddNode(options);
           }
           break;
-        case "canvas":
-          var canvas = ui.helper.data("meemoo-drag-canvas");
+        case 'canvas':
+          var canvas = ui.helper.data('meemoo-drag-canvas');
           // Copy canvas
           if (canvas) {
-            options.src = "meemoo:image/in";
+            options.src = 'meemoo:image/in';
             options.canvas = canvas;
-            var url = ui.helper.data("meemoo-image-url");
-            if (url && url.slice(0,4)==="http") {
+            var url = ui.helper.data('meemoo-image-url');
+            if (url && url.slice(0, 4) === 'http') {
               // Dragged from public image library
               options.state = {};
               options.state.url = url;
             }
-            Iframework.shownGraph.addNode( options );
+            Iframework.shownGraph.addNode(options);
           }
           break;
         default:
@@ -158,7 +160,7 @@ $(function(){
       return false;
     },
     addNode: function (node) {
-      this.$(".nodes").append( node.initializeView().el );
+      this.$('.nodes').append(node.initializeView().el);
       // Render the native view
       if (node.lazyLoadType) {
         node.view.initializeNative();
@@ -174,7 +176,7 @@ $(function(){
         edge.Target.view.resetRelatedEdges();
       }
     },
-    remove: function(){
+    remove: function () {
       this.$el.remove();
     },
     removeNode: function (node) {
@@ -193,7 +195,7 @@ $(function(){
         edge.view.remove();
       }
     },
-    resizeEdgeSVG: _.debounce( function () {
+    resizeEdgeSVG: _.debounce(function () {
       // _.debounce keeps it from getting called more than needed
       var svg = this.$('.edgesSvg')[0];
       // Don't choke on off-screen svg
@@ -211,11 +213,11 @@ $(function(){
         height = this.$el.height();
       }
       // Only get bigger
-      if (svg.getAttribute("width") < width) {
-        svg.setAttribute("width", Math.round(width));
+      if (svg.getAttribute('width') < width) {
+        svg.setAttribute('width', Math.round(width));
       }
-      if (svg.getAttribute("height") < height) {
-        svg.setAttribute("height", Math.round(height));
+      if (svg.getAttribute('height') < height) {
+        svg.setAttribute('height', Math.round(height));
       }
     }, 100),
     selectableStart: function () {
@@ -227,42 +229,43 @@ $(function(){
       this.unmaskFrames();
     },
     selectAll: function () {
-      this.$(".module").addClass("ui-selected");
+      this.$('.module').addClass('ui-selected');
     },
     selectNone: function () {
-      this.$(".module").removeClass("ui-selected");
+      this.$('.module').removeClass('ui-selected');
     },
-    cut: function(){
+    cut: function () {
       // Copy selected
       this.copy();
       var i;
-      for (i=0; i<Iframework._copied.nodes.length; i++) {
+      for (i = 0; i < Iframework._copied.nodes.length; i++) {
         // HACK offset cut for pasting in same spot
         Iframework._copied.nodes[i].x -= 50;
         Iframework._copied.nodes[i].y -= 50;
       }
       // Delete selected
-      var uiselected = this.$(".module.ui-selected");
-      for (i=0; i<uiselected.length; i++) {
-        $(uiselected[i]).data("iframework-node-view").removeModel();
+      var uiselected = this.$('.module.ui-selected');
+      for (i = 0; i < uiselected.length; i++) {
+        $(uiselected[i]).data('iframework-node-view').removeModel();
       }
     },
-    copy: function(){
-      var copied = {nodes:[],edges:[]};
-      var uiselected = this.$(".module.ui-selected");
+    copy: function () {
+      var copied = {nodes: [], edges: []};
+      var uiselected = this.$('.module.ui-selected');
       var i, selected;
 
       // Copy selected nodes
-      for (i=0; i<uiselected.length; i++) {
-        selected = $(uiselected[i]).data("iframework-node-view").model;
-        copied.nodes.push( JSON.parse(JSON.stringify(selected)) );
+      for (i = 0; i < uiselected.length; i++) {
+        selected = $(uiselected[i]).data('iframework-node-view').model;
+        copied.nodes.push(JSON.parse(JSON.stringify(selected)));
       }
 
       // Copy common edges
-      this.model.get("edges").each(function(edge){
-        var sourceSelected, targetSelected = false;
-        for (i=0; i<uiselected.length; i++) {
-          selected = $(uiselected[i]).data("iframework-node-view").model;
+      this.model.get('edges').each(function (edge) {
+        var sourceSelected,
+          targetSelected = false;
+        for (i = 0; i < uiselected.length; i++) {
+          selected = $(uiselected[i]).data('iframework-node-view').model;
           if (edge.Source.node === selected) {
             sourceSelected = true;
           }
@@ -271,20 +274,20 @@ $(function(){
           }
         }
         if (sourceSelected && targetSelected) {
-          copied.edges.push( JSON.parse(JSON.stringify(edge)) );
+          copied.edges.push(JSON.parse(JSON.stringify(edge)));
         }
       }, this);
       // Save these to Iframework so can paste to other graphs
       Iframework._copied = copied;
     },
-    paste: function(){
+    paste: function () {
       var copied = Iframework._copied;
       if (copied && copied.nodes.length > 0) {
         var newNodes = [];
         // Select none
-        this.$(".module").removeClass("ui-selected");
-        for (var i=0; i<copied.nodes.length; i++) {
-          var oldNode = JSON.parse(JSON.stringify( copied.nodes[i] ));
+        this.$('.module').removeClass('ui-selected');
+        for (var i = 0; i < copied.nodes.length; i++) {
+          var oldNode = JSON.parse(JSON.stringify(copied.nodes[i]));
           // Offset pasted
           oldNode.x += 50;
           oldNode.y += 50;
@@ -298,10 +301,10 @@ $(function(){
           }
         }
         // Add edges
-        for (var j=0; j<copied.edges.length; j++) {
-          var oldEdge = JSON.parse(JSON.stringify( copied.edges[j] ));
-          var newEdge = {source:[],target:[]};
-          for (var k=0; k<newNodes.length; k++) {
+        for (var j = 0; j < copied.edges.length; j++) {
+          var oldEdge = JSON.parse(JSON.stringify(copied.edges[j]));
+          var newEdge = {source: [], target: []};
+          for (var k = 0; k < newNodes.length; k++) {
             var node = newNodes[k];
             if (oldEdge.source[0] === node.copiedFrom) {
               newEdge.source[0] = node.id;
@@ -313,30 +316,28 @@ $(function(){
           newEdge.source[1] = oldEdge.source[1];
           newEdge.target[1] = oldEdge.target[1];
           newEdge.parentGraph = this.model;
-          newEdge = new Iframework.Edge( newEdge );
+          newEdge = new Iframework.Edge(newEdge);
           this.model.addEdge(newEdge);
         }
       }
     },
     maskFrames: function () {
-      $(".iframe-type").append( '<div class="iframemask" />' );
+      $('.iframe-type').append('<div class="iframemask" />');
     },
     unmaskFrames: function () {
-      $(".iframemask").remove();
+      $('.iframemask').remove();
     },
     showParentGraph: function () {
       if (this.model.parentGraph) {
-        Iframework.showGraph( this.model.parentGraph );
+        Iframework.showGraph(this.model.parentGraph);
       }
     },
     rerenderEdges: function () {
-      this.model.get("edges").each(function(edge){
+      this.model.get('edges').each(function (edge) {
         if (edge.view) {
           edge.view.redraw();
         }
       }, this);
-    }
-    
+    },
   });
-
 });
diff --git a/src/graph.js b/src/graph.js
index 775b64c..202b649 100644
--- a/src/graph.js
+++ b/src/graph.js
@@ -1,17 +1,16 @@
-$(function(){
-
+$(function () {
   Iframework.Graph = Backbone.Model.extend({
     loaded: false,
     defaults: {
       info: {
-        author: "meemoo",
-        title: "Untitled",
-        description: "Meemoo app description",
+        author: 'meemoo',
+        title: 'Untitled',
+        description: 'Meemoo app description',
         parents: [],
-        url: ""
+        url: '',
       },
       nodes: [],
-      edges: []
+      edges: [],
     },
     usedIds: [],
     edgeCount: 0,
@@ -20,7 +19,7 @@ $(function(){
     // loadingNodes: [],
     initialize: function () {
       // Is this a subgraph?
-      var parentGraph = this.get("parentGraph");
+      var parentGraph = this.get('parentGraph');
       if (parentGraph) {
         this.isSubgraph = true;
         this.parentGraph = parentGraph;
@@ -31,7 +30,7 @@ $(function(){
       if (this.attributes.nodes) {
         var nodes = this.attributes.nodes;
         this.attributes.nodes = new Iframework.Nodes();
-        for (var i=0; i<nodes.length; i++) {
+        for (var i = 0; i < nodes.length; i++) {
           var node = this.makeNode(nodes[i]);
           if (node) {
             this.addNode(node);
@@ -41,7 +40,7 @@ $(function(){
       if (this.attributes.edges) {
         var edges = this.attributes.edges;
         this.attributes.edges = new Iframework.Edges();
-        for (var j=0; j<edges.length; j++) {
+        for (var j = 0; j < edges.length; j++) {
           edges[j].parentGraph = this;
           var edge = new Iframework.Edge(edges[j]);
           this.addEdge(edge);
@@ -50,17 +49,17 @@ $(function(){
       this.eventsHistory = new Iframework.EventsHistory();
 
       var self = this;
-      _.defer(function(){
+      _.defer(function () {
         self.testLoaded();
       });
 
       // Change event
-      this.on("change", this.graphChanged);
+      this.on('change', this.graphChanged);
     },
-    testLoaded: function(){
+    testLoaded: function () {
       var allLoaded = true;
-      this.get("nodes").each(function(node){
-        if (node.hasOwnProperty("lazyLoadType")) {
+      this.get('nodes').each(function (node) {
+        if (node.hasOwnProperty('lazyLoadType')) {
           if (!Iframework.NativeNodes.hasOwnProperty(node.lazyLoadType)) {
             // That nativenode's js hasn't loaded yet
             allLoaded = false;
@@ -76,18 +75,18 @@ $(function(){
       }
       return allLoaded;
     },
-    initializeView: function() {
+    initializeView: function () {
       if (!this.view) {
-        this.view = new Iframework.GraphView({model:this});
+        this.view = new Iframework.GraphView({model: this});
       }
     },
     setInfo: function (key, val) {
-      var info = this.get("info");
+      var info = this.get('info');
       info[key] = val;
-      this.trigger("change");
+      this.trigger('change');
     },
     makeNode: function (info) {
-      if (!info.src){
+      if (!info.src) {
         return false;
       }
       info.parentGraph = this;
@@ -96,44 +95,46 @@ $(function(){
       if (Iframework.util.isImageURL(info.src)) {
         // Probably an image
         var src = info.src;
-        info.src = "meemoo:image/in";
-        if (!info.state){
+        info.src = 'meemoo:image/in';
+        if (!info.state) {
           info.state = {};
         }
         info.state.url = src;
       }
       // Test if native
-      var srcSplit = info.src.split(":");
+      var srcSplit = info.src.split(':');
       if (srcSplit.length < 2) {
         // No protocol
         return false;
       }
-      if (srcSplit[0] === "meemoo") {
+      if (srcSplit[0] === 'meemoo') {
         // Native type node
-        var id = srcSplit[srcSplit.length-1];
-        var path = id.split("/");
-        id = path.join("-");
+        var id = srcSplit[srcSplit.length - 1];
+        var path = id.split('/');
+        id = path.join('-');
 
         // Load js if needed
         // HACK only for loading meemoo:group/node
-        //   from src/nodes/group-node.js 
+        //   from src/nodes/group-node.js
         //   to Iframework.NativeNodes[group-node]
         var self = this;
         if (path[0] && path[1]) {
           yepnope([
             {
               test: Iframework.NativeNodes.hasOwnProperty(path[0]),
-              nope: "src/nodes/"+path[0]+".js"
+              nope: 'src/nodes/' + path[0] + '.js',
             },
             {
-              test: Iframework.NativeNodes.hasOwnProperty(path[0]+"-"+path[1]),
-              nope: "src/nodes/"+path[0]+"-"+path[1]+".js",
-              complete: function() {
-                _.defer(function(){
+              test: Iframework.NativeNodes.hasOwnProperty(
+                path[0] + '-' + path[1]
+              ),
+              nope: 'src/nodes/' + path[0] + '-' + path[1] + '.js',
+              complete: function () {
+                _.defer(function () {
                   self.testLoaded();
                 });
-              }
-            }
+              },
+            },
           ]);
         }
         // Native node
@@ -154,54 +155,66 @@ $(function(){
         }
       }
 
-      var count = this.get("nodes").length;
+      var count = this.get('nodes').length;
       // Give id if not defined or NaN
       var nodeId = parseInt(node.get('id'), 10);
       if (nodeId !== nodeId) {
-        node.set({"id": count});
+        node.set({id: count});
       }
       // Make sure node id is unique
-      while ( this.usedIds.indexOf(node.get('id')) >= 0 ) {
+      while (this.usedIds.indexOf(node.get('id')) >= 0) {
         count++;
-        node.set({"id": count});
+        node.set({id: count});
       }
-      this.usedIds.push( node.get('id') );
+      this.usedIds.push(node.get('id'));
 
-      var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-      var randomKey = "";
-      for (var i=0; i<5; i++) {
-        randomKey += keyStr.charAt( Math.floor(Math.random()*keyStr.length) );
+      var keyStr =
+        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      var randomKey = '';
+      for (var i = 0; i < 5; i++) {
+        randomKey += keyStr.charAt(Math.floor(Math.random() * keyStr.length));
       }
 
       // Iframework.frameCount works around a FF bug with recycling iframes with the same name
-      node.frameIndex = "frame_"+node.get('id')+"_"+(Iframework.frameCount++)+randomKey+"_through";
+      node.frameIndex =
+        'frame_' +
+        node.get('id') +
+        '_' +
+        Iframework.frameCount++ +
+        randomKey +
+        '_through';
 
-      this.get("nodes").add(node);
+      this.get('nodes').add(node);
 
       if (this.view) {
         this.view.addNode(node);
       }
 
-      this.trigger("change");
+      this.trigger('change');
 
       return node;
     },
     addEdge: function (edge) {
       // Make sure edge is unique
-      var isDupe = this.get("edges").any(function(_edge) {
-        return ( _edge.get('source')[0] === edge.get('source')[0] && _edge.get('source')[1] === edge.get('source')[1] && _edge.get('target')[0] === edge.get('target')[0] && _edge.get('target')[1] === edge.get('target')[1] );
+      var isDupe = this.get('edges').any(function (_edge) {
+        return (
+          _edge.get('source')[0] === edge.get('source')[0] &&
+          _edge.get('source')[1] === edge.get('source')[1] &&
+          _edge.get('target')[0] === edge.get('target')[0] &&
+          _edge.get('target')[1] === edge.get('target')[1]
+        );
       });
       if (isDupe) {
-        console.warn("duplicate edge ignored", edge);
+        console.warn('duplicate edge ignored', edge);
         return false;
       } else {
-        this.trigger("change");
-        return this.get("edges").add(edge);
+        this.trigger('change');
+        return this.get('edges').add(edge);
       }
     },
-    remove: function() {
+    remove: function () {
       // Called from IframeworkView.loadGraph
-      this.get("nodes").each(function(node){
+      this.get('nodes').each(function (node) {
         node.remove(false);
       });
       if (this.view) {
@@ -212,15 +225,18 @@ $(function(){
       var connected = [];
 
       // Disconnect edges
-      this.get("edges").each(function (edge) {
+      this.get('edges').each(function (edge) {
         if (edge.Source && edge.Target) {
-          if (edge.Source.parentNode === node || edge.Target.parentNode === node) {
+          if (
+            edge.Source.parentNode === node ||
+            edge.Target.parentNode === node
+          ) {
             connected.push(edge);
           }
         }
       }, this);
 
-      _.each(connected, function(edge){
+      _.each(connected, function (edge) {
         edge.remove();
       });
 
@@ -228,71 +244,71 @@ $(function(){
         this.view.removeNode(node);
       }
 
-      this.get("nodes").remove(node);
+      this.get('nodes').remove(node);
 
-      this.eventsHistory.add( 
+      this.eventsHistory.add(
         new Iframework.Event({
-          action: "removeNode", 
+          action: 'removeNode',
           args: {
-            "node": node, 
-            "edges": connected
-          }
+            node: node,
+            edges: connected,
+          },
         })
       );
 
-      this.trigger("change");
+      this.trigger('change');
     },
     removeEdge: function (edge) {
       edge.disconnect();
-      this.get("edges").remove(edge);
+      this.get('edges').remove(edge);
       if (this.view) {
         this.view.removeEdge(edge);
       }
-      this.trigger("change");
+      this.trigger('change');
     },
     checkLoaded: function () {
       // Called from NodeBoxView.initializeNative()
-      for (var i=0; i<this.get("nodes").length; i++) {
-        if (this.get("nodes").at(i).loaded === false) { 
-          return false; 
+      for (var i = 0; i < this.get('nodes').length; i++) {
+        if (this.get('nodes').at(i).loaded === false) {
+          return false;
         }
       }
       this.loaded = true;
-      
+
       // Connect edges when all modules have loaded (+.5 seconds)
       var self = this;
-      setTimeout(function(){
+      setTimeout(function () {
         self.connectEdges();
       }, 500);
-      
+
       return true;
     },
     reconnectEdges: function () {
-      for(var i=0; i<this.get("edges").length; i++) {
+      for (var i = 0; i < this.get('edges').length; i++) {
         // Disconnect them first to be sure not doubled
-        this.get("edges").at(i).disconnect();
+        this.get('edges').at(i).disconnect();
       }
       // Connect edges when all modules have loaded (+.5 seconds)
       var self = this;
-      _.delay(function(){
+      _.delay(function () {
         self.connectEdges();
       }, 500);
     },
     connectEdges: function () {
       // Connect edges
-      this.get("edges").each(function(edge){
+      this.get('edges').each(function (edge) {
         if (!edge.connected) {
           edge.connect();
         }
       });
 
       // Set state of nodes
-      this.get("nodes").each(function(node){
+      this.get('nodes').each(function (node) {
         node.setState();
       });
     },
     graphChanged: function () {
-      Iframework.trigger("change", this);
+      Iframework.trigger('change', this);
       // if (Iframework.$(".source").is(":visible")) {
       //   window.setTimeout(function(){
       //     Iframework.sourceRefresh();
@@ -301,15 +317,14 @@ $(function(){
     },
     toJSON: function () {
       return {
-        info: this.get("info"),
-        nodes: this.get("nodes"),
-        edges: this.get("edges")
+        info: this.get('info'),
+        nodes: this.get('nodes'),
+        edges: this.get('edges'),
       };
-    }
+    },
   });
-  
+
   Iframework.Graphs = Backbone.Collection.extend({
-    model: Iframework.Graph
+    model: Iframework.Graph,
   });
-
 });
diff --git a/src/iframework-last.js b/src/iframework-last.js
index 087d46c..bf2ddf5 100644
--- a/src/iframework-last.js
+++ b/src/iframework-last.js
@@ -1,31 +1,30 @@
-$(function(){
-
+$(function () {
   // Start
   Iframework.allLoaded();
 
   // Bind shortcuts
-  Mousetrap.bind(['command+a', 'ctrl+a'], function(e) {
+  Mousetrap.bind(['command+a', 'ctrl+a'], function (e) {
     if (Iframework.shownGraph && Iframework.shownGraph.view) {
       e.preventDefault();
       Iframework.shownGraph.view.selectAll();
     }
   });
 
-  Mousetrap.bind(['command+x', 'ctrl+x'], function(e) {
+  Mousetrap.bind(['command+x', 'ctrl+x'], function (e) {
     if (Iframework.shownGraph && Iframework.shownGraph.view) {
       // e.preventDefault();
       Iframework.shownGraph.view.cut();
     }
   });
 
-  Mousetrap.bind(['command+c', 'ctrl+c'], function(e) {
+  Mousetrap.bind(['command+c', 'ctrl+c'], function (e) {
     if (Iframework.shownGraph && Iframework.shownGraph.view) {
       // e.preventDefault();
       Iframework.shownGraph.view.copy();
     }
   });
 
-  Mousetrap.bind(['command+v', 'ctrl+v'], function(e) {
+  Mousetrap.bind(['command+v', 'ctrl+v'], function (e) {
     if (Iframework.shownGraph && Iframework.shownGraph.view) {
       // e.preventDefault();
       Iframework.shownGraph.view.paste();
@@ -38,5 +37,4 @@ $(function(){
   //     Iframework.shownGraph.view.deleteSelected();
   //   }
   // });
-
-});
\ No newline at end of file
+});
diff --git a/src/iframework-utils.js b/src/iframework-utils.js
index 234e7f6..0673d28 100644
--- a/src/iframework-utils.js
+++ b/src/iframework-utils.js
@@ -1,60 +1,69 @@
-$(function(){
-
+$(function () {
   Iframework.util = {
     // From YUI3 via http://stackoverflow.com/a/7390555/592125
     types: {
-      'undefined'        : 'undefined',
-      'number'           : 'number',
-      'boolean'          : 'boolean',
-      'string'           : 'string',
+      undefined: 'undefined',
+      number: 'number',
+      boolean: 'boolean',
+      string: 'string',
       '[object Function]': 'function',
-      '[object RegExp]'  : 'regexp',
-      '[object Array]'   : 'array',
-      '[object Date]'    : 'date',
-      '[object Error]'   : 'error',
+      '[object RegExp]': 'regexp',
+      '[object Array]': 'array',
+      '[object Date]': 'date',
+      '[object Error]': 'error',
       '[object HTMLCanvasElement]': 'HTMLCanvasElement',
-      '[object ImageData]': 'ImageData'
+      '[object ImageData]': 'ImageData',
     },
-    type: function(o) {
-      return this.types[typeof o] || this.types[Object.prototype.toString.call(o)] || (o ? 'object' : 'null');
+    type: function (o) {
+      return (
+        this.types[typeof o] ||
+        this.types[Object.prototype.toString.call(o)] ||
+        (o ? 'object' : 'null')
+      );
     },
-    imageTypes: ["png", "gif", "jpg", "jpeg", "webp"],
-    isImageURL: function(url) {
-      var fileTypeSplit = url.split(".");
+    imageTypes: ['png', 'gif', 'jpg', 'jpeg', 'webp'],
+    isImageURL: function (url) {
+      var fileTypeSplit = url.split('.');
       if (fileTypeSplit.length > 1) {
-        var fileType = fileTypeSplit[fileTypeSplit.length-1];
-        return (this.imageTypes.indexOf(fileType) > -1);
+        var fileType = fileTypeSplit[fileTypeSplit.length - 1];
+        return this.imageTypes.indexOf(fileType) > -1;
       }
       return false;
     },
-    imageDrop: function(event, ui){
+    imageDrop: function (event, ui) {
       // Used in image.js and variable-animation.js
       // TODO only drop to top
 
       // Don't deal with dropped file
-      if (!ui) { return false; }
+      if (!ui) {
+        return false;
+      }
 
       // Don't also drop on graph
       event.stopPropagation();
 
       var self = event.data.self;
 
-      var type = ui.helper.data("meemoo-drag-type");
-      if ( !type || type !== "canvas" ) { return false; }
+      var type = ui.helper.data('meemoo-drag-type');
+      if (!type || type !== 'canvas') {
+        return false;
+      }
 
       var inputName = event.data.inputName;
-      if ( !inputName ) { return false; }
+      if (!inputName) {
+        return false;
+      }
 
       var canvas;
 
-      var url = ui.helper.data("meemoo-image-url");
+      var url = ui.helper.data('meemoo-image-url');
       if (url) {
         // Load big image instead of thumbnail
         var img = new Image();
-        img.crossOrigin = "anonymous";
-        img.onload = function(){
-          canvas = document.createElement("canvas");
-          var context = canvas.getContext("2d");
+        img.crossOrigin = 'anonymous';
+        img.onload = function () {
+          canvas = document.createElement('canvas');
+          var context = canvas.getContext('2d');
           canvas.width = img.width;
           canvas.height = img.height;
           context.drawImage(img, 0, 0);
@@ -63,42 +72,41 @@ $(function(){
         };
         img.src = url;
       } else {
-        canvas = ui.helper.data("meemoo-drag-canvas");
-        if ( !canvas) { return false; }
+        canvas = ui.helper.data('meemoo-drag-canvas');
+        if (!canvas) {
+          return false;
+        }
         // Hit own input with image
         self.receive(inputName, canvas);
       }
-
     },
-    fitAndCopy: function(source, target){
+    fitAndCopy: function (source, target) {
       // source and target 2d canvases
 
       var w = target.width;
       var h = target.height;
-      var ratio = w/h;
+      var ratio = w / h;
 
       var inWidth = source.width;
       var inHeight = source.height;
-      var inRatio = inWidth/inHeight;
+      var inRatio = inWidth / inHeight;
 
       var sx, sy, sw, sh;
 
       if (ratio >= inRatio) {
         sw = inWidth;
-        sh = Math.floor(inWidth/ratio);
+        sh = Math.floor(inWidth / ratio);
         sx = 0;
-        sy = Math.floor((inHeight-sh)/2);
+        sy = Math.floor((inHeight - sh) / 2);
       } else {
-        sw = Math.floor(inHeight*ratio);
+        sw = Math.floor(inHeight * ratio);
         sh = inHeight;
-        sx = Math.floor((inWidth-sw)/2);
+        sx = Math.floor((inWidth - sw) / 2);
         sy = 0;
       }
 
-      var context = target.getContext("2d");
+      var context = target.getContext('2d');
       context.drawImage(source, sx, sy, sw, sh, 0, 0, w, h);
-    }
-
+    },
   };
-
 });
diff --git a/src/iframework.js b/src/iframework.js
index abd1ae9..d5894af 100644
--- a/src/iframework.js
+++ b/src/iframework.js
@@ -40,9 +40,9 @@ $(function () {
     '<button class="savelocal icon-install">save local</button>' +
     '<button class="forklocal icon-split" title="save as... copy app and save under a new name">fork</button>' +
     '<button class="deletelocal icon-trash" title="delete local app"></button>' +
-    '<button class="savegist button icon-globe-1" title="save app to Github gist.github.com">save gist</button>' +
-    '<button class="login button icon-login" title="login to save app to gist.github.com">github login</button>' +
-    '<button class="logout button icon-logout">github logout</button>' +
+    '<button class="savegist button icon-globe-1" title="save app to gist.github.com">make public</button>' +
+    '<button class="login button icon-login" title="login to save app to gist.github.com">login</button>' +
+    '<button class="logout button icon-logout">logout</button>' +
     '</div>' +
     '<div class="permalink" title="last publicly saved version">' +
     '</div>';
diff --git a/src/local-app-view.js b/src/local-app-view.js
index d2b3f2e..ac51792 100644
--- a/src/local-app-view.js
+++ b/src/local-app-view.js
@@ -1,23 +1,22 @@
-$(function(){
-
-  var template = 
-    '<a class="url" href="#local/<%= graph.info.url %>"></a> - '+
+$(function () {
+  var template =
+    '<a class="url" href="#local/<%= graph.info.url %>"></a> - ' +
     '<a class="macro" title="load as subgraph into current graph" href="#">sub</a> ';
-    // '<div class="info">'+
-    //   '<h2 class="title"><%= graph.info.title %></h2>' +
-    //   '<p class="description"><%= graph.info.description %></p>' +
-    // '</div>';
+  // '<div class="info">'+
+  //   '<h2 class="title"><%= graph.info.title %></h2>' +
+  //   '<p class="description"><%= graph.info.description %></p>' +
+  // '</div>';
 
   Iframework.LocalAppView = Backbone.View.extend({
-    tagName: "div",
-    className: "localapp",
+    tagName: 'div',
+    className: 'localapp',
     template: _.template(template),
     events: {
-      "click .macro": "loadAsMacro"
+      'click .macro': 'loadAsMacro',
     },
     initialize: function () {
       this.render();
-      Iframework.$(".localapps").append( this.el );
+      Iframework.$('.localapps').append(this.el);
 
       this.model.on('change', this.update, this);
       this.model.on('destroy', this.remove, this);
@@ -26,7 +25,9 @@ $(function(){
     },
     render: function () {
       this.$el.html(this.template(this.model.toJSON()));
-      this.$(".url").text( decodeURIComponent(this.model.get("graph")["info"]["url"]) );
+      this.$('.url').text(
+        decodeURIComponent(this.model.get('graph')['info']['url'])
+      );
       // this.$(".info").hide();
     },
     update: function () {
@@ -37,19 +38,17 @@ $(function(){
       event.preventDefault();
 
       Iframework.shownGraph.addNode({
-        src: "meemoo:subgraph/subgraph",
+        src: 'meemoo:subgraph/subgraph',
         state: {
-          label: decodeURIComponent(this.model.get("graph")["info"]["url"]),
-          graph: this.model.get("graph")
-        }
+          label: decodeURIComponent(this.model.get('graph')['info']['url']),
+          graph: this.model.get('graph'),
+        },
       });
 
       return false;
     },
     remove: function () {
       this.$el.remove();
-    }
-
+    },
   });
-
 });
diff --git a/src/local-app.js b/src/local-app.js
index 3f28231..00a2078 100644
--- a/src/local-app.js
+++ b/src/local-app.js
@@ -1,17 +1,15 @@
-$(function(){
-
+$(function () {
   Iframework.LocalApp = Backbone.Model.extend({
     initializeView: function () {
       if (!this.view) {
-        this.view = new Iframework.LocalAppView({model:this});
+        this.view = new Iframework.LocalAppView({model: this});
       }
       return this.view;
     },
-    load: function(){
-      
+    load: function () {
       Iframework._loadedLocalApp = this;
       // Clone graph
-      var graph = JSON.parse(JSON.stringify(this.get("graph")));
+      var graph = JSON.parse(JSON.stringify(this.get('graph')));
       Iframework.loadGraph(graph);
 
       //DEBUG
@@ -20,35 +18,33 @@ $(function(){
     toJSON: function () {
       return {
         id: this.id,
-        graph: this.get("graph")
+        graph: this.get('graph'),
       };
-    }
+    },
   });
 
   Iframework.LocalApps = Backbone.Collection.extend({
     model: Iframework.LocalApp,
-    localStorage: new Backbone.LocalStorage("LocalApps"),
+    localStorage: new Backbone.LocalStorage('LocalApps'),
     getByUrl: function (url) {
-      var app = this.find(function(app){
-        return app.get("graph")["info"]["url"] === url;
+      var app = this.find(function (app) {
+        return app.get('graph')['info']['url'] === url;
       });
       return app;
     },
     updateOrCreate: function (graph) {
       var app;
-      app = this.find(function(app){
-        return app.get("graph")["info"]["url"] === graph["info"]["url"];
+      app = this.find(function (app) {
+        return app.get('graph')['info']['url'] === graph['info']['url'];
       });
       if (app) {
-        app.save({graph:graph});
-        app.trigger("change");
+        app.save({graph: graph});
+        app.trigger('change');
       } else {
-        app = this.create({graph:graph});
+        app = this.create({graph: graph});
         app.initializeView();
       }
       return app;
-    }
-
+    },
   });
-    
 });
diff --git a/src/module-view.js b/src/module-view.js
index c223d70..b49f5fa 100644
--- a/src/module-view.js
+++ b/src/module-view.js
@@ -1,41 +1,49 @@
-$(function(){
-
-  var template = 
+$(function () {
+  var template =
     '<div class="addnode button module-icon" title="<%= info.description %>"></div>' +
     '<h2 class="title" title="<%= src %>"><%= info.title %></h2>';
 
   Iframework.ModuleView = Backbone.View.extend({
-    tagName: "div",
-    className: "library-module",
+    tagName: 'div',
+    className: 'library-module',
     template: _.template(template),
     events: {
-      "click .addnode":     "addNode",
-      "dragstart .addnode": "dragStart",
-      "dragstop .addnode":  "dragStop"
+      'click .addnode': 'addNode',
+      'dragstart .addnode': 'dragStart',
+      'dragstop .addnode': 'dragStop',
     },
     initialize: function () {
       this.render();
 
       var self = this;
-      this.$(".addnode")
+      this.$('.addnode')
         .data({module: this.model})
         .draggable({
           helper: function () {
-            var h = $('<div class="addnode-drag-helper module-icon" />')
-              .data({
-                "meemoo-drag-type": "library-module"
-              });
-              // .text( self.model.get("info")["title"]);
+            var h = $('<div class="addnode-drag-helper module-icon" />').data({
+              'meemoo-drag-type': 'library-module',
+            });
+            // .text( self.model.get("info")["title"]);
             if (self.model.isNative) {
-              h.addClass("module-icon-"+self.model.groupAndName[0]+"-"+self.model.groupAndName[1]);
+              h.addClass(
+                'module-icon-' +
+                  self.model.groupAndName[0] +
+                  '-' +
+                  self.model.groupAndName[1]
+              );
             }
-            $(".app").append(h);
+            $('.app').append(h);
             return h;
-          }
+          },
         });
-      
+
       if (this.model.isNative) {
-        this.$(".addnode").addClass("module-icon-"+this.model.groupAndName[0]+"-"+this.model.groupAndName[1]);
+        this.$('.addnode').addClass(
+          'module-icon-' +
+            this.model.groupAndName[0] +
+            '-' +
+            this.model.groupAndName[1]
+        );
       }
 
       return this;
@@ -43,22 +51,20 @@ $(function(){
     render: function () {
       this.$el.html(this.template(this.model.toJSON()));
     },
-    addNode: function(options) {
-      Iframework.$(".addbyurlinput").val( this.model.get("src") );
+    addNode: function (options) {
+      Iframework.$('.addbyurlinput').val(this.model.get('src'));
       Iframework.addByUrl(options);
     },
-    dragAddNode: function(options) {
+    dragAddNode: function (options) {
       // options has x and y from GraphView.drop()
-      options.src = this.model.get("src");
-      Iframework.shownGraph.addNode( options );
+      options.src = this.model.get('src');
+      Iframework.shownGraph.addNode(options);
     },
-    dragStart: function() {
+    dragStart: function () {
       Iframework.shownGraph.view.maskFrames();
     },
-    dragStop: function() {
+    dragStop: function () {
       Iframework.shownGraph.view.unmaskFrames();
-    }
-
+    },
   });
-
 });
diff --git a/src/module.js b/src/module.js
index 12c72f4..e3e6340 100644
--- a/src/module.js
+++ b/src/module.js
@@ -1,47 +1,45 @@
 // Module is used for Iframework.Library and has info about ins and outs
 // Node is used by Graph, and has info about x, y, w, h
 
-$(function(){
-
+$(function () {
   Iframework.Module = Backbone.Model.extend({
     defaults: {
-      "src": "",
-      "info": {}
+      src: '',
+      info: {},
     },
     initialize: function () {
-      var srcSplit = this.get("src").split(":");
-      this.isNative = (srcSplit[0] === "meemoo");
+      var srcSplit = this.get('src').split(':');
+      this.isNative = srcSplit[0] === 'meemoo';
       if (this.isNative) {
-        this.groupAndName = srcSplit[1].split("/");
+        this.groupAndName = srcSplit[1].split('/');
       }
     },
     initializeView: function () {
       if (!this.view) {
-        this.view = new Iframework.ModuleView({model:this});
+        this.view = new Iframework.ModuleView({model: this});
       }
       return this.view;
     },
     toJSON: function () {
       return {
-        "src": this.get("src"),
-        "info": this.get("info")
+        src: this.get('src'),
+        info: this.get('info'),
       };
-    }
+    },
   });
-  
+
   Iframework.Modules = Backbone.Collection.extend({
     model: Iframework.Module,
     findOrAdd: function (node) {
       var module;
-      module = this.find(function(module){
-        return module.get("src") === node.get("src");
+      module = this.find(function (module) {
+        return module.get('src') === node.get('src');
       });
       if (!module) {
-        module = new Iframework.Module({"node":node});
+        module = new Iframework.Module({node: node});
         this.add(module);
       }
       return module;
-    }
+    },
   });
-
 });
diff --git a/src/node-box-iframe-view.js b/src/node-box-iframe-view.js
index e308010..99e33e5 100644
--- a/src/node-box-iframe-view.js
+++ b/src/node-box-iframe-view.js
@@ -1,5 +1,4 @@
-$(function(){
-
+$(function () {
   // var innerTemplate = '<iframe class="iframe" name="<%= frameIndex %>" src="<%= get("src") %>"></iframe>';
 
   Iframework.NodeBoxIframeView = Iframework.NodeBoxView.extend({
@@ -9,15 +8,16 @@ $(function(){
       Iframework.NodeBoxView.prototype.initialize.call(this);
 
       // Add refresh button
-      this.$("button.remove")
-        .after(
-          $('<button title="reload iframe" type="button" class="refresh icon-cw"></button>')
-        );
+      this.$('button.remove').after(
+        $(
+          '<button title="reload iframe" type="button" class="refresh icon-cw"></button>'
+        )
+      );
       // Add refresh event
-      this.events["click .refresh"] = "refresh";
+      this.events['click .refresh'] = 'refresh';
 
       // .inner style for css
-      this.$(".inner").addClass("iframe-type");
+      this.$('.inner').addClass('iframe-type');
 
       var self = this;
       this.iframe.onload = function () {
@@ -27,21 +27,19 @@ $(function(){
     render: function () {
       this.$el.html(this.template(this.model));
 
-      this.iframe = document.createElement("iframe");
+      this.iframe = document.createElement('iframe');
 
       $(this.iframe).attr({
-        "class": "iframe",
-        "name": this.model.frameIndex,
-        "src": this.model.get("src")
+        class: 'iframe',
+        name: this.model.frameIndex,
+        src: this.model.get('src'),
       });
 
-      this.$(".inner").html( this.iframe );
+      this.$('.inner').html(this.iframe);
       return this;
     },
     refresh: function () {
-      this.$("iframe")[0].src = this.model.get("src");
-    }
-
+      this.$('iframe')[0].src = this.model.get('src');
+    },
   });
-
 });
diff --git a/src/node-box-iframe.js b/src/node-box-iframe.js
index 5380fe8..3f69ebb 100644
--- a/src/node-box-iframe.js
+++ b/src/node-box-iframe.js
@@ -1,20 +1,19 @@
-$(function(){
-
+$(function () {
   Iframework.NodeBoxIframe = Iframework.NodeBox.extend({
     initializeView: function () {
       // Called from GraphView.addNode();
-      this.view = new Iframework.NodeBoxIframeView({model:this});
+      this.view = new Iframework.NodeBoxIframeView({model: this});
       return this.view;
     },
     info: {
-      title: "iframe-node",
-      description: "extend me"
+      title: 'iframe-node',
+      description: 'extend me',
     },
     sendFromFrame: function (message) {
       var name = message.output;
       var value = message.value;
       // Convert pixels message to canvas
-      if (Iframework.util.type(message.value) === "ImageData") {
+      if (Iframework.util.type(message.value) === 'ImageData') {
         value = this.makeCanvas(value);
       }
       this.send(name, value);
@@ -22,9 +21,11 @@ $(function(){
     receive: function (name, value) {
       if (this.view && this.view.iframeloaded) {
         // Convert canvas message to pixels
-        if (Iframework.util.type(value) === "HTMLCanvasElement") {
+        if (Iframework.util.type(value) === 'HTMLCanvasElement') {
           try {
-            value = value.getContext("2d").getImageData(0, 0, value.width, value.height);
+            value = value
+              .getContext('2d')
+              .getImageData(0, 0, value.width, value.height);
           } catch (e) {
             // Dirty canvas
             return false;
@@ -32,13 +33,13 @@ $(function(){
         }
         var m = {};
         m[name] = value;
-        this.view.iframe.contentWindow.postMessage(m, "*");
+        this.view.iframe.contentWindow.postMessage(m, '*');
       } else {
-        console.error("wat "+this.id+" "+this.frameIndex);
+        console.error('wat ' + this.id + ' ' + this.frameIndex);
       }
     },
     setState: function () {
-      var state = this.get("state");
+      var state = this.get('state');
       if (state) {
         this.receive({setState: state});
       }
@@ -47,32 +48,33 @@ $(function(){
       this.loaded = true;
       this.parentGraph.checkLoaded();
     },
-    toString: function() {
+    toString: function () {
       if (this.info) {
-        return "Iframe node "+this.get("id")+": "+this.info.title;
+        return 'Iframe node ' + this.get('id') + ': ' + this.info.title;
       } else {
-        return "Iframe node "+this.get("id");
+        return 'Iframe node ' + this.get('id');
       }
     },
-    makeCanvas: function(imageData) {
+    makeCanvas: function (imageData) {
       if (!this.canvas) {
         // Make internal canvas to pass
-        this.canvas = document.createElement("canvas");
+        this.canvas = document.createElement('canvas');
         this.context = this.canvas.getContext('2d');
       }
-      if (this.canvas.width !== imageData.width || this.canvas.height !== imageData.height) {
+      if (
+        this.canvas.width !== imageData.width ||
+        this.canvas.height !== imageData.height
+      ) {
         // Resize if needed
         this.canvas.width = imageData.width;
         this.canvas.height = imageData.height;
       }
       this.context.putImageData(imageData, 0, 0);
       return this.canvas;
-    }
-
+    },
   });
-  
+
   Iframework.Nodes = Backbone.Collection.extend({
-    model: Iframework.Node
+    model: Iframework.Node,
   });
-
 });
diff --git a/src/node-box-native-view.js b/src/node-box-native-view.js
index 72c40d9..5551e67 100644
--- a/src/node-box-native-view.js
+++ b/src/node-box-native-view.js
@@ -1,14 +1,13 @@
-$(function(){
-
+$(function () {
   var template = '<div class="info" />';
 
   Iframework.NodeBoxNativeView = Backbone.View.extend({
-    tagName: "div",
-    className: "nativenode",
+    tagName: 'div',
+    className: 'nativenode',
     template: _.template(template),
     info: {
-      title: "native-node-view",
-      description: "extend me"
+      title: 'native-node-view',
+      description: 'extend me',
     },
     inputs: {},
     outputs: {},
@@ -39,10 +38,10 @@ $(function(){
 
       return this;
     },
-    initializeCategory: function(){
+    initializeCategory: function () {
       // for example, override in nodes/image.js
     },
-    initializeModule: function(){
+    initializeModule: function () {
       // for example, override in nodes/image-combine.js
     },
     render: function () {
@@ -85,7 +84,9 @@ $(function(){
           }
         } catch (error) {
           // If equation doesn't parse, pass through val
-          this.equations[name] = function(vars){return vars.x;};
+          this.equations[name] = function (vars) {
+            return vars.x;
+          };
         }
       } else {
         if (this.equations[name]) {
@@ -94,34 +95,32 @@ $(function(){
       }
     },
     receive: function (name, value) {
-      if (this.equations && this.equations[name]){
-        value = this.equations[name].evaluate({x:value});
+      if (this.equations && this.equations[name]) {
+        value = this.equations[name].evaluate({x: value});
       }
-      if (this["input"+name]){
-        this["input"+name](value);
+      if (this['input' + name]) {
+        this['input' + name](value);
         // Must manually set _triggerRedraw in that function if needed
       } else {
-        this["_"+name] = value;
+        this['_' + name] = value;
         // Will trigger a NodeBoxNativeView.redraw() on next renderAnimationFrame
         this._triggerRedraw = true;
       }
     },
-    toString: function() {
-      return "Native view: "+this.model.get("id")+": "+this.info.title;
+    toString: function () {
+      return 'Native view: ' + this.model.get('id') + ': ' + this.info.title;
     },
-    resize: function(w,h) {
+    resize: function (w, h) {
       // Called from NodeBoxView.resizestop()
     },
-    connectEdge: function(edge) {
+    connectEdge: function (edge) {
       // Called from Edge.connect();
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
     },
-    remove: function(){
+    remove: function () {
       // Called from NodeBoxView.remove();
-    }
-
+    },
   });
-
 });
diff --git a/src/node-box-view.js b/src/node-box-view.js
index db12ae3..ecf4c93 100644
--- a/src/node-box-view.js
+++ b/src/node-box-view.js
@@ -1,6 +1,6 @@
-$(function(){
-
-  var template = 
+$(function () {
+  // prettier-ignore
+  var template =
     '<div class="module" style="left:<%= get("x")-10 %>px;top:<%= get("y")-30 %>px;width:<%= get("w")+20 %>px;height:<%= get("h")+40 %>px;" >'+
       '<div class="outer"></div>'+
       '<div class="ports ports-in"></div>'+
@@ -21,63 +21,70 @@ $(function(){
   // var innerTemplate = '<div class="info" />';
 
   Iframework.NodeBoxView = Iframework.NodeView.extend({
-    tagName: "div",
-    className: "node",
+    tagName: 'div',
+    className: 'node',
     template: _.template(template),
     // innerTemplate: _.template(innerTemplate),
     events: {
-      "dragstart .module":   "dragStart",
-      "drag .module":        "drag",
-      "dragstop .module":    "dragStop",
-      "resizestart .module": "resizestart",
-      "resize .module":      "resize",
-      "resizestop .module":  "resizestop",
-      "mousedown .module, .title": "mousedown",
-      "click .module, .title": "click",
-      "click .showcontrols": "showControls",
-      "click .hidecontrols": "hideControls",
-      "click .remove":       "removeModel"
+      'dragstart .module': 'dragStart',
+      'drag .module': 'drag',
+      'dragstop .module': 'dragStop',
+      'resizestart .module': 'resizestart',
+      'resize .module': 'resize',
+      'resizestop .module': 'resizestop',
+      'mousedown .module, .title': 'mousedown',
+      'click .module, .title': 'click',
+      'click .showcontrols': 'showControls',
+      'click .hidecontrols': 'hideControls',
+      'click .remove': 'removeModel',
     },
     initialize: function () {
       this.render();
-      this.$(".module")
-        .data({"iframework-node-view": this})
-        .draggable({ 
-          handle: "h1",
-          helper: function(event) {
+      this.$('.module')
+        .data({'iframework-node-view': this})
+        .draggable({
+          handle: 'h1',
+          helper: function (event) {
             var node = $(this);
-            return $('<div class="ui-draggable-helper" style="width:'+node.width()+'px; height:'+node.height()+'px">');
-          }
+            return $(
+              '<div class="ui-draggable-helper" style="width:' +
+                node.width() +
+                'px; height:' +
+                node.height() +
+                'px">'
+            );
+          },
         })
-        .resizable({ 
-          minHeight: 100, 
-          minWidth: 100, 
-          helper: "ui-draggable-helper"
+        .resizable({
+          minHeight: 100,
+          minWidth: 100,
+          helper: 'ui-draggable-helper',
         });
 
       // View source button
       if (this.model.lazyLoadType) {
-        this.$(".viewsource").attr({
-          "href": "src/nodes/"+this.model.lazyLoadType+".js",
-          "target": "_blank"
+        this.$('.viewsource').attr({
+          href: 'src/nodes/' + this.model.lazyLoadType + '.js',
+          target: '_blank',
         });
       } else {
-        this.$(".viewsource").hide();
+        this.$('.viewsource').hide();
       }
 
       // Disable selection for better drag+drop
-      this.$("h1").disableSelection();
+      this.$('h1').disableSelection();
 
       // Bring newest to top
       this.mousedown();
-
     },
     initializeNative: function () {
       // Called from GraphView.addNode
-      if (!this.Native){
+      if (!this.Native) {
         if (Iframework.NativeNodes.hasOwnProperty(this.model.lazyLoadType)) {
-          this.Native = new Iframework.NativeNodes[this.model.lazyLoadType]({model:this.model});
-          this.$(".inner").append( this.Native.$el );
+          this.Native = new Iframework.NativeNodes[this.model.lazyLoadType]({
+            model: this.model,
+          });
+          this.$('.inner').append(this.Native.$el);
           // Check if all modules are loaded
           this.model.loaded = true;
           this.model.parentGraph.checkLoaded();
@@ -91,93 +98,108 @@ $(function(){
       return this;
     },
     infoLoaded: function (info) {
-      this.$('h1')
-        .attr("title", this.model.get("id") + ": " + (info.author ? "by "+info.author+": " : "" ) + info.description);
-      this.$('.node-box-title-name')
-        .text(info.title);
+      this.$('h1').attr(
+        'title',
+        this.model.get('id') +
+          ': ' +
+          (info.author ? 'by ' + info.author + ': ' : '') +
+          info.description
+      );
+      this.$('.node-box-title-name').text(info.title);
 
       if (this.model.lazyLoadType) {
-        this.$(".module-icon").addClass("module-icon-"+this.model.lazyLoadType);
+        this.$('.module-icon').addClass(
+          'module-icon-' + this.model.lazyLoadType
+        );
       }
     },
     _alsoDrag: [],
     _dragDelta: {},
-    dragStart: function(event, ui){
-      if (event.target !== this.$(".module")[0]) { return; }
+    dragStart: function (event, ui) {
+      if (event.target !== this.$('.module')[0]) {
+        return;
+      }
 
       // Add a mask so that iframes don't steal mouse
       this.model.parentGraph.view.maskFrames();
 
       // Select
-      if (!this.$(".module").hasClass("ui-selected")){
+      if (!this.$('.module').hasClass('ui-selected')) {
         this.click(event);
       }
 
       // Make helper and save start position of all other selected
       var self = this;
       this._alsoDrag = [];
-      this.model.parentGraph.view.$(".ui-selected").each(function() {
-        if (self.$(".module")[0] !== this) {
+      this.model.parentGraph.view.$('.ui-selected').each(function () {
+        if (self.$('.module')[0] !== this) {
           var el = $(this);
           var position = {
-            left: parseInt( el.css('left'), 10 ), 
-            top: parseInt( el.css('top'), 10 )
+            left: parseInt(el.css('left'), 10),
+            top: parseInt(el.css('top'), 10),
           };
-          el.data("ui-draggable-alsodrag-initial", position);
+          el.data('ui-draggable-alsodrag-initial', position);
           // Add helper
           var helper = $('<div class="ui-draggable-helper">').css({
             width: el.width(),
             height: el.height(),
             left: position.left,
-            top: position.top
+            top: position.top,
           });
           el.parent().append(helper);
-          el.data("ui-draggable-alsodrag-helper", helper);
+          el.data('ui-draggable-alsodrag-helper', helper);
           // Add to array
           self._alsoDrag.push(el);
         }
       });
     },
-    drag: function(event, ui){
-      if (event.target !== this.$(".module")[0]) { return; }
+    drag: function (event, ui) {
+      if (event.target !== this.$('.module')[0]) {
+        return;
+      }
 
       // Drag other helpers
       if (this._alsoDrag.length) {
-        var self = $(event.target).data("ui-draggable");
+        var self = $(event.target).data('ui-draggable');
         var op = self.originalPosition;
         var delta = {
-          top: (self.position.top - op.top) || 0, 
-          left: (self.position.left - op.left) || 0
+          top: self.position.top - op.top || 0,
+          left: self.position.left - op.left || 0,
         };
 
-        _.each(this._alsoDrag, function(el){
-          var initial = el.data("ui-draggable-alsodrag-initial");
-          var helper = el.data("ui-draggable-alsodrag-helper");
+        _.each(this._alsoDrag, function (el) {
+          var initial = el.data('ui-draggable-alsodrag-initial');
+          var helper = el.data('ui-draggable-alsodrag-helper');
           helper.css({
             left: initial.left + delta.left,
-            top: initial.top + delta.top
+            top: initial.top + delta.top,
           });
         });
       }
     },
-    dragStop: function(event, ui){
-      if (event.target !== this.$(".module")[0]) { return; }
+    dragStop: function (event, ui) {
+      if (event.target !== this.$('.module')[0]) {
+        return;
+      }
 
       var x = parseInt(ui.position.left, 10);
       var y = parseInt(ui.position.top, 10);
-      this.moveToPosition(x,y);
+      this.moveToPosition(x, y);
       // Also drag
       if (this._alsoDrag.length) {
-        _.each(this._alsoDrag, function(el){
-          var initial = el.data("ui-draggable-alsodrag-initial");
-          var helper = el.data("ui-draggable-alsodrag-helper");
-          var node = el.data("iframework-node-view");
+        _.each(this._alsoDrag, function (el) {
+          var initial = el.data('ui-draggable-alsodrag-initial');
+          var helper = el.data('ui-draggable-alsodrag-helper');
+          var node = el.data('iframework-node-view');
           // Move other node
-          node.moveToPosition(parseInt(helper.css("left"), 10), parseInt(helper.css("top"), 10));
+          node.moveToPosition(
+            parseInt(helper.css('left'), 10),
+            parseInt(helper.css('top'), 10)
+          );
           // Remove helper
           helper.remove();
-          el.data("ui-draggable-alsodrag-initial", null);
-          el.data("ui-draggable-alsodrag-helper", null);
+          el.data('ui-draggable-alsodrag-initial', null);
+          el.data('ui-draggable-alsodrag-helper', null);
         });
         this._alsoDrag = [];
       }
@@ -185,65 +207,64 @@ $(function(){
       // Remove iframe masks
       this.model.parentGraph.view.unmaskFrames();
     },
-    moveToPosition: function(x, y){
-      this.$(".module").css({
+    moveToPosition: function (x, y) {
+      this.$('.module').css({
         left: x,
-        top: y
+        top: y,
       });
       this.model.set({
         x: x + 10,
-        y: y + 30
+        y: y + 30,
       });
     },
     resizestart: function (event, ui) {
       // Add a mask so that iframes don't steal mouse
       this.model.parentGraph.view.maskFrames();
     },
-    resize: function (event, ui) {
-    },
+    resize: function (event, ui) {},
     resizestop: function (event, ui) {
       // Remove iframe masks
       this.model.parentGraph.view.unmaskFrames();
-      
+
       // Set model w/h
       var newW = ui.size.width;
       var newH = ui.size.height;
       this.model.set({
         w: newW - 20,
-        h: newH - 40
+        h: newH - 40,
       });
       if (this.Native) {
-        this.Native.resize(newW,newH);
+        this.Native.resize(newW, newH);
       }
       this.model.parentGraph.view.resizeEdgeSVG();
     },
     mousedown: function (event, ui) {
       // Bring to top
       var topZ = 0;
-      $("div.module").each(function(){
-        var thisZ = Number($(this).css("z-index"));
-        if (thisZ > topZ) { 
-          topZ = thisZ; 
+      $('div.module').each(function () {
+        var thisZ = Number($(this).css('z-index'));
+        if (thisZ > topZ) {
+          topZ = thisZ;
         }
       });
-      this.$(".module")
-        .css("z-index", topZ+1);
+      this.$('.module').css('z-index', topZ + 1);
 
       if (event) {
         // Don't select
         event.stopPropagation();
       }
-
     },
     click: function (event) {
       // Select
       if (event.ctrlKey || event.metaKey) {
         // Command key is pressed, toggle selection
-        this.$(".module").toggleClass("ui-selected");
+        this.$('.module').toggleClass('ui-selected');
       } else {
         // Command key isn't pressed, deselect others and select this one
-        this.model.parentGraph.view.$(".ui-selected").removeClass("ui-selected");
-        this.$(".module").addClass("ui-selected");
+        this.model.parentGraph.view
+          .$('.ui-selected')
+          .removeClass('ui-selected');
+        this.$('.module').addClass('ui-selected');
       }
 
       // Don't fire click on graph
@@ -251,21 +272,21 @@ $(function(){
     },
     select: function (event) {
       // Called from code
-      this.$(".module").addClass("ui-selected");
+      this.$('.module').addClass('ui-selected');
     },
     addInput: function (port) {
-      this.$(".ports-in").append( port.initializeView().el );
+      this.$('.ports-in').append(port.initializeView().el);
     },
     addOutput: function (port) {
-      this.$(".ports-out").append( port.initializeView().el );
+      this.$('.ports-out').append(port.initializeView().el);
     },
     showControls: function () {
-      this.$(".showcontrols").hide();
-      this.$(".controls").show();
+      this.$('.showcontrols').hide();
+      this.$('.controls').show();
     },
     hideControls: function () {
-      this.$(".showcontrols").show();
-      this.$(".controls").hide();
+      this.$('.showcontrols').show();
+      this.$('.controls').hide();
     },
     removeModel: function () {
       this.model.remove(true);
@@ -277,11 +298,7 @@ $(function(){
       }
       this.$el.remove();
     },
-    refresh: function () {
-    },
-    popout: function () {
-    }
-
+    refresh: function () {},
+    popout: function () {},
   });
-
 });
diff --git a/src/node-box.js b/src/node-box.js
index 657cc86..38d90e0 100644
--- a/src/node-box.js
+++ b/src/node-box.js
@@ -1,42 +1,41 @@
-$(function(){
-
+$(function () {
   Iframework.NodeBox = Iframework.Node.extend({
     loaded: false,
-    defaults: function() {
+    defaults: function () {
       return {
-        src: "",
+        src: '',
         x: 100,
         y: 400,
         z: 0,
         w: 200,
         h: 210,
-        state: {}
+        state: {},
       };
     },
     info: {
-      title: "native-node",
-      description: "extend me"
+      title: 'native-node',
+      description: 'extend me',
     },
     initialize: function () {
       this.Inputs = new Iframework.PortsIn();
       this.Outputs = new Iframework.PortsOut();
 
-      this.parentGraph = this.get("parentGraph");
+      this.parentGraph = this.get('parentGraph');
 
       // Change event
-      this.on("change", this.nodeChanged);
+      this.on('change', this.nodeChanged);
     },
     initializeView: function () {
       // Called from GraphView.addNode
-      this.view = new Iframework.NodeBoxView({model:this});
+      this.view = new Iframework.NodeBoxView({model: this});
       return this.view;
     },
     send: function (name, value) {
       // Send message out to connected modules
       // Defer to make this safe for infinite loops
       var self = this;
-      _.defer(function(){
-        self.trigger("send:"+name, value);
+      _.defer(function () {
+        self.trigger('send:' + name, value);
       });
     },
     receive: function (name, value) {
@@ -52,8 +51,8 @@ $(function(){
       }
     },
     setState: function () {
-      var state = this.get("state");
-      if (state && this.view.Native){
+      var state = this.get('state');
+      if (state && this.view.Native) {
         for (var name in state) {
           var eqSet = this.setEquation(name, state[name]);
           if (!eqSet) {
@@ -82,9 +81,13 @@ $(function(){
         this.view.addInput(newPort);
       }
       // Set state to post defaults
-      var currentState = this.get("state");
-      if ( info.hasOwnProperty("default") && info["default"] !== "" && !currentState.hasOwnProperty(info.name) ) {
-        currentState[info.name] = info["default"];
+      var currentState = this.get('state');
+      if (
+        info.hasOwnProperty('default') &&
+        info['default'] !== '' &&
+        !currentState.hasOwnProperty(info.name)
+      ) {
+        currentState[info.name] = info['default'];
       }
       return newPort;
     },
@@ -111,7 +114,7 @@ $(function(){
     },
     nodeChanged: function () {
       if (this.parentGraph) {
-        this.parentGraph.trigger("change");
+        this.parentGraph.trigger('change');
       }
     },
     remove: function (fromView) {
@@ -127,24 +130,28 @@ $(function(){
         }
       }
     },
-    setValues: function(info) {
+    setValues: function (info) {
       for (var name in info) {
         this.setValue(name, info[name]);
       }
       this.nodeChanged();
     },
-    setValue: function(name, value) {
+    setValue: function (name, value) {
       this.setEquation(name, value);
-      this.get("state")[name] = value;
+      this.get('state')[name] = value;
       this.nodeChanged();
     },
     setEquation: function (name, value) {
-      if (!this.view.Native) { return; }
+      if (!this.view.Native) {
+        return;
+      }
       var input = this.Inputs.get(name);
-      if (!input) { return; }
-      var type = input.get("type");
-      if ( type === "int" || type === "float" || type === "number" ) {
-        if (value && value.toString().substr(0,1) === "=") {
+      if (!input) {
+        return;
+      }
+      var type = input.get('type');
+      if (type === 'int' || type === 'float' || type === 'number') {
+        if (value && value.toString().substr(0, 1) === '=') {
           this.view.Native.setEquation(name, value.substr(1));
           return true;
         } else {
@@ -152,29 +159,27 @@ $(function(){
         }
       }
     },
-    toString: function() {
+    toString: function () {
       if (this.info) {
-        return "Native node "+this.get("id")+": "+this.info.title;
+        return 'Native node ' + this.get('id') + ': ' + this.info.title;
       } else {
-        return "Native node "+this.get("id");
+        return 'Native node ' + this.get('id');
       }
     },
     toJSON: function () {
       return {
         id: this.id,
-        src: this.get("src"),
-        x: this.get("x"),
-        y: this.get("y"),
-        w: this.get("w"),
-        h: this.get("h"),
-        state: this.get("state")
+        src: this.get('src'),
+        x: this.get('x'),
+        y: this.get('y'),
+        w: this.get('w'),
+        h: this.get('h'),
+        state: this.get('state'),
       };
-    }
-
+    },
   });
-  
+
   Iframework.Nodes = Backbone.Collection.extend({
-    model: Iframework.Node
+    model: Iframework.Node,
   });
-
 });
diff --git a/src/node-view.js b/src/node-view.js
index e770e4f..c426eb1 100644
--- a/src/node-view.js
+++ b/src/node-view.js
@@ -1,12 +1,10 @@
-$(function(){
-
+$(function () {
   Iframework.NodeView = Backbone.View.extend({
-    send: function(message) {
+    send: function (message) {
       this.model.send(message);
     },
-    receive: function(message) {
+    receive: function (message) {
       this.model.receive(message);
-    }
+    },
   });
-
 });
diff --git a/src/node.js b/src/node.js
index 5589695..16b6bf4 100644
--- a/src/node.js
+++ b/src/node.js
@@ -1,5 +1,4 @@
-$(function(){
-
+$(function () {
   Iframework.Node = Backbone.Model.extend({
     send: function (message) {
       // Send message out to connected nodes
@@ -8,13 +7,11 @@ $(function(){
       // Get message from another node
     },
     //iframe only
-    sendFromFrame: function(){},
-    iframeLoaded: function(){}
-
+    sendFromFrame: function () {},
+    iframeLoaded: function () {},
   });
-  
+
   Iframework.Nodes = Backbone.Collection.extend({
-    model: Iframework.Node
+    model: Iframework.Node,
   });
-
 });
diff --git a/src/nodes/audio.js b/src/nodes/audio.js
index beb432d..03a4a9a 100644
--- a/src/nodes/audio.js
+++ b/src/nodes/audio.js
@@ -2,23 +2,20 @@
 /*global AudioContext:true, webkitAudioContext:true*/
 // extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="info" />';
-
-  Iframework.NativeNodes["audio"] = Iframework.NodeBoxNativeView.extend({
+$(function () {
+  var template = '<div class="info" />';
 
+  Iframework.NativeNodes['audio'] = Iframework.NodeBoxNativeView.extend({
     template: _.template(template),
-    initializeCategory: function() {
+    initializeCategory: function () {
       // See if an AudioContext is initialized
       if (Iframework.audioContext) {
         this.audioContext = Iframework.audioContext;
       } else {
         var audioContext;
-        if (typeof AudioContext !== "undefined") {
+        if (typeof AudioContext !== 'undefined') {
           audioContext = new AudioContext();
-        } else if (typeof webkitAudioContext !== "undefined") {
+        } else if (typeof webkitAudioContext !== 'undefined') {
           audioContext = new webkitAudioContext();
         } else {
           throw new Error('AudioContext not supported. :(');
@@ -27,9 +24,6 @@ $(function(){
           Iframework.audioContext = this.audioContext = audioContext;
         }
       }
-    }
-    
+    },
   });
-
-
 });
diff --git a/src/nodes/file-lottie.js b/src/nodes/file-lottie.js
index 6f49212..3f9de01 100644
--- a/src/nodes/file-lottie.js
+++ b/src/nodes/file-lottie.js
@@ -1,4 +1,4 @@
-$(function() {
+$(function () {
   var template = '<div class="info" />' + '<div class="videos" />';
 
   Iframework.NativeNodes['file-lottie'] = Iframework.NativeNodes['file'].extend(
@@ -9,7 +9,7 @@ $(function() {
         description: 'encode animation to lottie.json file',
       },
       _animation: null,
-      inputanimation: function(animation) {
+      inputanimation: function (animation) {
         if (!animation || !animation.frames || !animation.frames.length) {
           this._animation = null;
           this.$('.info').text('...');
@@ -20,7 +20,7 @@ $(function() {
           `${animation.width}x${animation.height}, ${animation.frames.length} frames`
         );
       },
-      inputbuild: function() {
+      inputbuild: function () {
         if (!this._animation) {
           return;
         }
@@ -48,8 +48,8 @@ $(function() {
         this.$('.videos').prepend(info);
       },
       _builds: [],
-      inputclear: function() {
-        this._builds.forEach(function(url) {
+      inputclear: function () {
+        this._builds.forEach(function (url) {
           window.URL.revokeObjectURL(url);
         });
         this._builds = [];
@@ -88,13 +88,13 @@ $(function() {
       },
     }
   );
-  
+
   // Modified from https://observablehq.com/@forresto/video-to-lottie
   function animationToLottie(animation, quality) {
     const {width, height, fps, frames} = animation;
 
     return frames.reduce(
-      function(lottie, frame, index) {
+      function (lottie, frame, index) {
         const id = 'fr_' + index;
         const w = width;
         const w2 = Math.floor(w / 2);
diff --git a/src/nodes/file-webm.js b/src/nodes/file-webm.js
index 0c34a2f..dbcbb45 100644
--- a/src/nodes/file-webm.js
+++ b/src/nodes/file-webm.js
@@ -1,5 +1,6 @@
-$(function() {
-  var template =  '<div class="info" />' +
+$(function () {
+  var template =
+    '<div class="info" />' +
     '<button class="start">start capture</button>' +
     '<button class="stop">stop</button><br />' +
     '<video class="video" autoplay controls style="max-width: 100%"/>' +
@@ -9,19 +10,19 @@ $(function() {
     template: _.template(template),
     info: {
       title: 'webm',
-      description: 'encode canvas stream to WebM video'
+      description: 'encode canvas stream to WebM video',
     },
-    initializeModule: function() {
+    initializeModule: function () {
       var self = this;
       this.$('.start')
         .button()
-        .click(function() {
+        .click(function () {
           self.inputstart();
         })
         .prop('disabled', true);
       this.$('.stop')
         .button()
-        .click(function() {
+        .click(function () {
           self.inputstop();
         })
         .prop('disabled', true);
@@ -33,13 +34,13 @@ $(function() {
       }
     },
     _image: null,
-    inputimage: function(image) {
+    inputimage: function (image) {
       if (image !== this._image) {
         this._image = image;
         this.$('.start').prop('disabled', false);
       }
     },
-    inputstart: function() {
+    inputstart: function () {
       this.$('.start').prop('disabled', true);
       this.$('.stop').prop('disabled', false);
 
@@ -77,15 +78,15 @@ $(function() {
         }
       }
     },
-    inputstop: function() {
+    inputstop: function () {
       this.$('.start').prop('disabled', false);
       this.$('.stop').prop('disabled', true);
       if (!this._mediaRecorder) return;
       this._mediaRecorder.stop();
     },
-    makeUrl: function() {
+    makeUrl: function () {
       var buffer = new Blob(this._recordedChunks, {
-        type: 'video/webm'
+        type: 'video/webm',
       });
       var url = window.URL.createObjectURL(buffer);
 
@@ -96,41 +97,39 @@ $(function() {
       var size = Math.ceil(buffer.size / 2014);
       var info = $(
         '<p><a href="${url}" target="_blank" download="meemoo.webm">Download</a> ☙ ' +
-        String(size) +
-        'kb</p>'
+          String(size) +
+          'kb</p>'
       );
 
       // TODO: delete option w/ window.URL.revokeObjectURL(url);
       this.$('.videos').prepend(info);
 
-      this.$('.video')
-        .attr('src', url)
-        .show();
+      this.$('.video').attr('src', url).show();
     },
     inputs: {
       image: {
         type: 'image',
-        description: 'canvas to be captured to the webm video'
+        description: 'canvas to be captured to the webm video',
       },
       fps: {
         type: 'int',
         description: 'framerate in frames per second',
-        'default': 30
+        default: 30,
       },
       start: {
         type: 'bang',
-        description: 'start capturing frames into a video'
+        description: 'start capturing frames into a video',
       },
       stop: {
         type: 'bang',
-        description: 'stop capturing frames, save video'
-      }
+        description: 'stop capturing frames, save video',
+      },
     },
     outputs: {
       url: {
         type: 'string',
-        description: 'local blob url of video'
-      }
-    }
+        description: 'local blob url of video',
+      },
+    },
   });
 });
diff --git a/src/nodes/file.js b/src/nodes/file.js
index b6035c1..03ec398 100644
--- a/src/nodes/file.js
+++ b/src/nodes/file.js
@@ -1,20 +1,14 @@
 // extends src/node-box-native-view.js
 
-$(function(){
-
+$(function () {
   var template = '<div class="info" />';
 
-  Iframework.NativeNodes["file"] = Iframework.NodeBoxNativeView.extend({
-
+  Iframework.NativeNodes['file'] = Iframework.NodeBoxNativeView.extend({
     template: _.template(template),
     info: {
-      title: "file",
-      description: "extend me"
+      title: 'file',
+      description: 'extend me',
     },
-    initializeCategory: function() {
-    }
-
+    initializeCategory: function () {},
   });
-
-
 });
diff --git a/src/nodes/image-ascii.js b/src/nodes/image-ascii.js
index 5cc95dd..308b0ab 100644
--- a/src/nodes/image-ascii.js
+++ b/src/nodes/image-ascii.js
@@ -1,14 +1,12 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-
+$(function () {
   /*
     // Thanks ecellingsworth http://stackoverflow.com/a/14641495/592125
 
     if (String.prototype.ucLength === undefined) {
         String.prototype.ucLength = function() {
-            // this solution was taken from 
+            // this solution was taken from
             // http://stackoverflow.com/questions/3744721/javascript-strings-outside-of-the-bmp
             return this.length - this.split(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g).length + 1;
         };
@@ -23,7 +21,7 @@ $(function(){
             var codePoint = null;
             var pairFound = false;
             var ucIndex = -1;
-            var i = 0;  
+            var i = 0;
             while (i < str.length){
                 ucIndex += 1;
                 var code = str.charCodeAt(i);
@@ -161,62 +159,62 @@ $(function(){
 
   */
 
-
-
-  var template = '<pre class="output" style="font-family:monospace; font-size:12px; line-height:70%;"></pre>'+
-    '<div class="char-sets">'+
-      '<button class="set-chars ascii" title="#MBX$PxOo=*!~-^,._ " data-h="70%">ascii</button>'+
-      '<button class="set-chars ansi" title="█ " data-h="90%">ansi</button>'+
-      '<button class="set-chars katakana" title="テチタヌオネモキツシウミリンソトレニノ　" data-h="100%">katakana</button>'+
-      // '<button class="set-chars emoji" title="🌑🌒🌘🌓🌗🌔🌖🌕" data-h="90%">emoji</button>'+
+  var template =
+    '<pre class="output" style="font-family:monospace; font-size:12px; line-height:70%;"></pre>' +
+    '<div class="char-sets">' +
+    '<button class="set-chars ascii" title="#MBX$PxOo=*!~-^,._ " data-h="70%">ascii</button>' +
+    '<button class="set-chars ansi" title="█ " data-h="90%">ansi</button>' +
+    '<button class="set-chars katakana" title="テチタヌオネモキツシウミリンソトレニノ　" data-h="100%">katakana</button>' +
+    // '<button class="set-chars emoji" title="🌑🌒🌘🌓🌗🌔🌖🌕" data-h="90%">emoji</button>'+
     '</div>';
 
   var lumR = [];
   var lumG = [];
   var lumB = [];
-  for (var i=0; i<256; i++) {
-    lumR[i] = i*0.299;
-    lumG[i] = i*0.587;
-    lumB[i] = i*0.114;
+  for (var i = 0; i < 256; i++) {
+    lumR[i] = i * 0.299;
+    lumG[i] = i * 0.587;
+    lumB[i] = i * 0.114;
   }
 
-  Iframework.NativeNodes["image-ascii"] = Iframework.NativeNodes["image"].extend({
-
+  Iframework.NativeNodes['image-ascii'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "ascii",
-      author: "forresto",
-      description: "ascii text or emoji art"
+      title: 'ascii',
+      author: 'forresto',
+      description: 'ascii text or emoji art',
     },
     template: _.template(template),
     events: {
-      "click .set-chars": "setChars"
+      'click .set-chars': 'setChars',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       $(this.canvas).remove();
     },
     inputcharacters: function (characters) {
       this._characters = characters;
       // var split = characters.ucSplit("");
-      var split = characters.split("");
+      var split = characters.split('');
       // console.log(split);
       var splitLength = split.length;
       this._charr = [];
-      for (var i=0; i<256; i++) {
-        this._charr[i] = split[ Math.floor(i/256*splitLength) ];
+      for (var i = 0; i < 256; i++) {
+        this._charr[i] = split[Math.floor((i / 256) * splitLength)];
       }
       this._triggerRedraw = true;
     },
     setChars: function (event) {
       var button = $(event.target);
-      this.$(".output").css("line-height", button.data("h"));
-      var chars = button.attr("title");
+      this.$('.output').css('line-height', button.data('h'));
+      var chars = button.attr('title');
       this.inputcharacters(chars);
-      this.set("characters", chars);
+      this.set('characters', chars);
     },
     inputsend: function () {
-      this.send("text", this.outputString);
+      this.send('text', this.outputString);
     },
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
       if (this._image) {
         if (this.canvas.width !== this._width) {
@@ -227,67 +225,76 @@ $(function(){
         }
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
         Iframework.util.fitAndCopy(this._image, this.canvas);
-        var imageData = this.context.getImageData(0,0, this.canvas.width, this.canvas.height);
+        var imageData = this.context.getImageData(
+          0,
+          0,
+          this.canvas.width,
+          this.canvas.height
+        );
 
-        var string = "";
+        var string = '';
         var count = 0;
-        for (var y=0; y<this._height; y++) {
-          for (var x=0; x<this._width; x++) {
+        for (var y = 0; y < this._height; y++) {
+          for (var x = 0; x < this._width; x++) {
             var r = imageData.data[count++];
             var g = imageData.data[count++];
             var b = imageData.data[count++];
             var lum = Math.floor(lumR[r] + lumG[g] + lumB[b]);
-            string += (this._color ? '<span style="color:rgb('+r+','+g+','+b+')">' : "") + this._charr[lum] + (this._color ? '</span>' : "");
+            string +=
+              (this._color
+                ? '<span style="color:rgb(' + r + ',' + g + ',' + b + ')">'
+                : '') +
+              this._charr[lum] +
+              (this._color ? '</span>' : '');
             count++; // ignore alpha
           }
-          string += "\n";
+          string += '\n';
         }
-        this.$(".output").html(string);
-        this.outputString = (this._color ? '<pre>' : "") + string + (this._color ? '</pre>' : "");
+        this.$('.output').html(string);
+        this.outputString =
+          (this._color ? '<pre>' : '') + string + (this._color ? '</pre>' : '');
         this.inputsend();
       }
     },
     inputs: {
       image: {
-        type: "image",
-        description: "image to dither"
+        type: 'image',
+        description: 'image to dither',
       },
       characters: {
-        type: "string",
-        description: "the characters that will be used in the conversion, dark to light",
-        "default": "#MBX$PxOo=*!~-^,._ "
+        type: 'string',
+        description:
+          'the characters that will be used in the conversion, dark to light',
+        default: '#MBX$PxOo=*!~-^,._ ',
       },
       color: {
-        type: "boolean",
-        description: "each character will keep its color",
-        "default": false
+        type: 'boolean',
+        description: 'each character will keep its color',
+        default: false,
       },
       width: {
-        type: "int",
-        description: "text width",
+        type: 'int',
+        description: 'text width',
         min: 1,
         max: 500,
-        "default": 20
+        default: 20,
       },
       height: {
-        type: "int",
-        description: "text height",
+        type: 'int',
+        description: 'text height',
         min: 1,
         max: 500,
-        "default": 20
+        default: 20,
       },
       send: {
-        type: "bang",
-        description: "send the text"
-      }
+        type: 'bang',
+        description: 'send the text',
+      },
     },
     outputs: {
       text: {
-        type: "string"
-      }
-    }
-
+        type: 'string',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-chromakey.js b/src/nodes/image-chromakey.js
index 86f0ba8..33ca274 100644
--- a/src/nodes/image-chromakey.js
+++ b/src/nodes/image-chromakey.js
@@ -1,9 +1,10 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
+$(function () {
   function rgb2hsl(r, g, b) {
-    r /= 255; g /= 255; b /= 255;
+    r /= 255;
+    g /= 255;
+    b /= 255;
     var min = Math.min(r, g, b);
     var max = Math.max(r, g, b);
     var delta = max - min;
@@ -39,17 +40,18 @@ $(function(){
     return [h, s, l];
   }
 
-  Iframework.NativeNodes["image-chromakey"] = Iframework.NativeNodes["image"].extend({
-
+  Iframework.NativeNodes['image-chromakey'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "chromakey",
-      description: "alpha key based on hue"
+      title: 'chromakey',
+      description: 'alpha key based on hue',
     },
-    initializeModule: function(){
-      $(this.canvas).addClass("alpha-bg");
+    initializeModule: function () {
+      $(this.canvas).addClass('alpha-bg');
     },
     _hue: 0.33,
-    _hueRange: 0.1, 
+    _hueRange: 0.1,
     _hueMin: this._hue - this._hueRange,
     _hueMax: this._hue + this._hueRange,
     inputhue: function (percent) {
@@ -65,7 +67,7 @@ $(function(){
       this._triggerRedraw = true;
     },
     _sat: 0.55,
-    _satRange: 0.35, 
+    _satRange: 0.35,
     _satMin: this._sat - this._satRange,
     _satMax: this._sat + this._satRange,
     inputsat: function (percent) {
@@ -81,7 +83,7 @@ $(function(){
       this._triggerRedraw = true;
     },
     _lightness: 0.5,
-    _lightnessRange: 0.3, 
+    _lightnessRange: 0.3,
     _lightnessMin: this._lightness - this._lightnessRange,
     _lightnessMax: this._lightness + this._lightnessRange,
     inputlightness: function (percent) {
@@ -96,14 +98,14 @@ $(function(){
       this._lightnessMax = this._lightness + this._lightnessRange;
       this._triggerRedraw = true;
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "image") {
+      if (edge.Target.id === 'image') {
         this._image = null;
         this._triggerRedraw = true;
       }
     },
-    redraw: function(){
+    redraw: function () {
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
       if (this._image) {
         if (this.canvas.height !== this._image.height) {
@@ -114,8 +116,19 @@ $(function(){
         }
 
         // With help from http://timtaubert.de/blog/2012/10/building-a-live-green-screen-with-getusermedia-and-mediastreams/
-        this.context.drawImage(this._image, 0, 0, this._image.width, this._image.height);
-        var frame = this.context.getImageData(0, 0, this._image.width, this._image.height);
+        this.context.drawImage(
+          this._image,
+          0,
+          0,
+          this._image.width,
+          this._image.height
+        );
+        var frame = this.context.getImageData(
+          0,
+          0,
+          this._image.width,
+          this._image.height
+        );
         var len = frame.data.length / 4;
 
         // Iterate over all pixels in the current frame.
@@ -131,9 +144,14 @@ $(function(){
           var l = hsl[2];
 
           // ... and check if we have a somewhat green pixel.
-          if (h >= this._hueMin && h <= this._hueMax &&
-              s >= this._satMin && s <= this._satMax &&
-              l >= this._lightnessMin && l <= this._lightnessMax) {
+          if (
+            h >= this._hueMin &&
+            h <= this._hueMax &&
+            s >= this._satMin &&
+            s <= this._satMax &&
+            l >= this._lightnessMin &&
+            l <= this._lightnessMax
+          ) {
             frame.data[i * 4 + 3] = 0;
           }
         }
@@ -144,67 +162,64 @@ $(function(){
       }
     },
     inputsend: function () {
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
     inputs: {
       image: {
-        type: "image",
-        description: "image to key"
+        type: 'image',
+        description: 'image to key',
       },
       hue: {
-        type: "float",
-        description: "hue, 0 = red, .33 = green, .67 = blue",
+        type: 'float',
+        description: 'hue, 0 = red, .33 = green, .67 = blue',
         min: 0,
         max: 1,
-        "default": 0.33
+        default: 0.33,
       },
       hueRange: {
-        type: "float",
-        description: "hue range plus or minus",
+        type: 'float',
+        description: 'hue range plus or minus',
         min: 0,
         max: 1,
-        "default": 0.2
+        default: 0.2,
       },
       sat: {
-        type: "float",
-        description: "saturation",
+        type: 'float',
+        description: 'saturation',
         min: 0,
         max: 1,
-        "default": 0.55
+        default: 0.55,
       },
       satRange: {
-        type: "float",
-        description: "saturation range plus or minus",
+        type: 'float',
+        description: 'saturation range plus or minus',
         min: 0,
         max: 1,
-        "default": 0.4
+        default: 0.4,
       },
       lightness: {
-        type: "float",
-        description: "lightness",
+        type: 'float',
+        description: 'lightness',
         min: 0,
         max: 1,
-        "default": 0.5
+        default: 0.5,
       },
       lightnessRange: {
-        type: "float",
-        description: "lightness range plus or minus",
+        type: 'float',
+        description: 'lightness range plus or minus',
         min: 0,
         max: 1,
-        "default": 0.4
+        default: 0.4,
       },
       send: {
-        type: "bang",
-        description: "send the image"
-      }
+        type: 'bang',
+        description: 'send the image',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-circle.js b/src/nodes/image-circle.js
index 56471b6..d7f1e5f 100644
--- a/src/nodes/image-circle.js
+++ b/src/nodes/image-circle.js
@@ -1,16 +1,14 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-circle"] = Iframework.NativeNodes["image"].extend({
-
+$(function () {
+  Iframework.NativeNodes['image-circle'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "circle",
-      description: "draw a circle"
-    },
-    initializeModule: function(){
-      
+      title: 'circle',
+      description: 'draw a circle',
     },
+    initializeModule: function () {},
     inputmatte: function (image) {
       this._matte = image;
       this._triggerRedraw = true;
@@ -30,37 +28,37 @@ $(function(){
       this._strokewidth = w;
       this.context.lineWidth = this._strokewidth;
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "matte") {
+      if (edge.Target.id === 'matte') {
         this._matte = null;
         this._triggerRedraw = true;
       }
     },
     canvasSettings: function () {
-      if (this._fill === "") {
-        this.context.fillStyle = "none";
+      if (this._fill === '') {
+        this.context.fillStyle = 'none';
       } else {
         this.context.fillStyle = this._fill;
       }
-      if (this._stroke === "") {
-        this.context.strokeStyle = "none";
+      if (this._stroke === '') {
+        this.context.strokeStyle = 'none';
       } else {
         this.context.strokeStyle = this._stroke;
       }
       this.context.lineWidth = this._strokewidth;
     },
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
       var setSettings = false;
-      var width = 2*this._x;
+      var width = 2 * this._x;
       if (this.canvas.width !== width) {
         this.canvas.width = width;
         setSettings = true;
       }
-      var height = 2*this._y;
+      var height = 2 * this._y;
       if (this.canvas.height !== height) {
         this.canvas.height = height;
         setSettings = true;
@@ -70,73 +68,75 @@ $(function(){
       }
       // Fill
       this.context.beginPath();
-      this.context.arc(this._x, this._y, this._r, 0, Math.PI*2);
-      if (this._fill && this._fill!=="") {
+      this.context.arc(this._x, this._y, this._r, 0, Math.PI * 2);
+      if (this._fill && this._fill !== '') {
         this.context.fill();
       }
       this.context.closePath();
       // Stroke
-      if (this._stroke && this._stroke!=="" && this._strokewidth && this._strokewidth>0) {
+      if (
+        this._stroke &&
+        this._stroke !== '' &&
+        this._strokewidth &&
+        this._strokewidth > 0
+      ) {
         this.context.stroke();
       }
       if (this._matte) {
-        this.context.globalCompositeOperation = "source-in";
+        this.context.globalCompositeOperation = 'source-in';
         this.context.drawImage(this._matte, 0, 0);
         // Iframework.util.fitAndCopy(this._matte, this.canvas);
-        this.context.globalCompositeOperation = "source-over";
+        this.context.globalCompositeOperation = 'source-over';
       }
       this.inputsend();
     },
     inputsend: function () {
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
     inputs: {
       matte: {
-        type: "image",
-        description: "image to cut out"
+        type: 'image',
+        description: 'image to cut out',
       },
       x: {
-        type: "float",
-        description: "x of center",
-        "default": 50
+        type: 'float',
+        description: 'x of center',
+        default: 50,
       },
       y: {
-        type: "float",
-        description: "y of center",
-        "default": 50
+        type: 'float',
+        description: 'y of center',
+        default: 50,
       },
       r: {
-        type: "float",
-        description: "circle radius",
-        "default": 50
+        type: 'float',
+        description: 'circle radius',
+        default: 50,
       },
       fill: {
-        type: "color",
-        description: "fill color",
-        "default": "black"
+        type: 'color',
+        description: 'fill color',
+        default: 'black',
       },
       stroke: {
-        type: "color",
-        description: "stroke color",
-        "default": ""
+        type: 'color',
+        description: 'stroke color',
+        default: '',
       },
       strokewidth: {
-        type: "float",
-        description: "stroke width",
-        "default": 1
+        type: 'float',
+        description: 'stroke width',
+        default: 1,
       },
       send: {
-        type: "bang",
-        description: "send the combined canvas"
-      }
+        type: 'bang',
+        description: 'send the combined canvas',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-crop.js b/src/nodes/image-crop.js
index aa2708e..a227469 100644
--- a/src/nodes/image-crop.js
+++ b/src/nodes/image-crop.js
@@ -1,114 +1,120 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-crop"] = Iframework.NativeNodes["image"].extend({
-
-    info: {
-      title: "crop",
-      description: "crop an image to x, y, width, height"
-    },
-    initializeModule: function(){
-    },
-    setSizes: function(){
-      var w = this._width;
-      var h = this._height;
-      if (this.canvas.width !== w) {
-        this.canvas.width = w;
-      }
-      if (this.canvas.height !== h) {
-        this.canvas.height = h;
-      }
-    },
-    _image: null,
-    inputimage: function(image){
-      this._image = image;
-      this._triggerRedraw = true;
-    },
-    inputsend: function () {
-      this.send("image", this.canvas);
-    },
-    resetSizes: false,
-    inputrect: function (rect) {
-      this._x = rect[0];
-      this._y = rect[1];
-      this._width = rect[2];
-      this._height = rect[3];
-      this.resetSizes = true;
-    },
-    inputwidth: function(w){
-      this._width = w;
-      this.resetSizes = true;
-      this._triggerRedraw = true;
-    },
-    inputheight: function(h){
-      this._height = h;
-      this.resetSizes = true;
-      this._triggerRedraw = true;
-    },
-    disconnectEdge: function(edge) {
-      // Called from Edge.disconnect();
-      if (edge.Target.id === "image") {
-        this._image = null;
-        // this._triggerRedraw = true;
-      }
-    },
-    redraw: function(){
-      // Called from NodeBoxNativeView.renderAnimationFrame()
-      if (this._image) {
-        if (this.resetSizes) {
-          this.setSizes();
-          this.resetSizes = false;
+$(function () {
+  Iframework.NativeNodes['image-crop'] = Iframework.NativeNodes['image'].extend(
+    {
+      info: {
+        title: 'crop',
+        description: 'crop an image to x, y, width, height',
+      },
+      initializeModule: function () {},
+      setSizes: function () {
+        var w = this._width;
+        var h = this._height;
+        if (this.canvas.width !== w) {
+          this.canvas.width = w;
+        }
+        if (this.canvas.height !== h) {
+          this.canvas.height = h;
         }
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.context.drawImage(this._image, this._x, this._y, this._width, this._height, 0, 0, this._width, this._height);
-        this.inputsend();
-      }
-    },
-    inputs: {
-      image: {
-        type: "image",
-        description: "image to crop and size"
       },
-      rect: {
-        type: "array:f4",
-        description: "a rectangle array with x, y, width, height"
+      _image: null,
+      inputimage: function (image) {
+        this._image = image;
+        this._triggerRedraw = true;
       },
-      x: {
-        type: "int",
-        min: 0,
-        "default": 0
+      inputsend: function () {
+        this.send('image', this.canvas);
       },
-      y: {
-        type: "int",
-        min: 0,
-        "default": 0
+      resetSizes: false,
+      inputrect: function (rect) {
+        this._x = rect[0];
+        this._y = rect[1];
+        this._width = rect[2];
+        this._height = rect[3];
+        this.resetSizes = true;
       },
-      width: {
-        type: "int",
-        min: 1,
-        max: 2000,
-        "default": 100
+      inputwidth: function (w) {
+        this._width = w;
+        this.resetSizes = true;
+        this._triggerRedraw = true;
       },
-      height: {
-        type: "int",
-        min: 1,
-        max: 2000,
-        "default": 100
+      inputheight: function (h) {
+        this._height = h;
+        this.resetSizes = true;
+        this._triggerRedraw = true;
+      },
+      disconnectEdge: function (edge) {
+        // Called from Edge.disconnect();
+        if (edge.Target.id === 'image') {
+          this._image = null;
+          // this._triggerRedraw = true;
+        }
+      },
+      redraw: function () {
+        // Called from NodeBoxNativeView.renderAnimationFrame()
+        if (this._image) {
+          if (this.resetSizes) {
+            this.setSizes();
+            this.resetSizes = false;
+          }
+          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+          this.context.drawImage(
+            this._image,
+            this._x,
+            this._y,
+            this._width,
+            this._height,
+            0,
+            0,
+            this._width,
+            this._height
+          );
+          this.inputsend();
+        }
+      },
+      inputs: {
+        image: {
+          type: 'image',
+          description: 'image to crop and size',
+        },
+        rect: {
+          type: 'array:f4',
+          description: 'a rectangle array with x, y, width, height',
+        },
+        x: {
+          type: 'int',
+          min: 0,
+          default: 0,
+        },
+        y: {
+          type: 'int',
+          min: 0,
+          default: 0,
+        },
+        width: {
+          type: 'int',
+          min: 1,
+          max: 2000,
+          default: 100,
+        },
+        height: {
+          type: 'int',
+          min: 1,
+          max: 2000,
+          default: 100,
+        },
+        send: {
+          type: 'bang',
+          description: 'send the image',
+        },
+      },
+      outputs: {
+        image: {
+          type: 'image',
+          description: 'sized and cropped image',
+        },
       },
-      send: {
-        type: "bang",
-        description: "send the image"
-      }
-    },
-    outputs: {
-      image: {
-        type: "image",
-        description: "sized and cropped image"
-      }
     }
-
-  });
-
-
+  );
 });
diff --git a/src/nodes/image-fit.js b/src/nodes/image-fit.js
index 4f96c11..373d601 100644
--- a/src/nodes/image-fit.js
+++ b/src/nodes/image-fit.js
@@ -1,17 +1,15 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-fit"] = Iframework.NativeNodes["image"].extend({
-
+$(function () {
+  Iframework.NativeNodes['image-fit'] = Iframework.NativeNodes['image'].extend({
     info: {
-      title: "fit",
-      description: "scale and crop an image to fit the given size"
+      title: 'fit',
+      description: 'scale and crop an image to fit the given size',
     },
-    initializeModule: function(){
-      this._crop = {left:0, top:0, width:320, height:240};
+    initializeModule: function () {
+      this._crop = {left: 0, top: 0, width: 320, height: 240};
     },
-    setSizes: function(){
+    setSizes: function () {
       var w = this._width;
       var h = this._height;
       if (this.canvas.width !== w) {
@@ -20,32 +18,36 @@ $(function(){
       if (this.canvas.height !== h) {
         this.canvas.height = h;
       }
-      var ratio = w/h;
+      var ratio = w / h;
 
       var inWidth = this._image.width;
       var inHeight = this._image.height;
-      this.$(".info").text("input: "+inWidth+"x"+inHeight+", output: "+w+"x"+h);
+      this.$('.info').text(
+        'input: ' + inWidth + 'x' + inHeight + ', output: ' + w + 'x' + h
+      );
 
-      var inRatio = inWidth/inHeight;
+      var inRatio = inWidth / inHeight;
 
       if (ratio >= inRatio) {
         this._crop.width = inWidth;
-        this._crop.height = Math.floor(inWidth/ratio);
+        this._crop.height = Math.floor(inWidth / ratio);
         this._crop.left = 0;
-        this._crop.top = Math.floor((inHeight-this._crop.height)/2);
+        this._crop.top = Math.floor((inHeight - this._crop.height) / 2);
       } else {
-        this._crop.width = Math.floor(inHeight*ratio);
+        this._crop.width = Math.floor(inHeight * ratio);
         this._crop.height = inHeight;
-        this._crop.left = Math.floor((inWidth-this._crop.width)/2);
+        this._crop.left = Math.floor((inWidth - this._crop.width) / 2);
         this._crop.top = 0;
       }
-
     },
     _image: null,
     _imageWidth: 0,
     _imageHeight: 0,
-    inputimage: function(image){
-      if (this._imageWidth !== image.width || this._imageHeight !== image.height) {
+    inputimage: function (image) {
+      if (
+        this._imageWidth !== image.width ||
+        this._imageHeight !== image.height
+      ) {
         // New image, different size
         this._imageWidth = image.width;
         this._imageHeight = image.height;
@@ -55,27 +57,27 @@ $(function(){
       this._triggerRedraw = true;
     },
     inputsend: function () {
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
     resetSizes: false,
-    inputwidth: function(w){
+    inputwidth: function (w) {
       this._width = w;
       this.resetSizes = true;
       this._triggerRedraw = true;
     },
-    inputheight: function(h){
+    inputheight: function (h) {
       this._height = h;
       this.resetSizes = true;
       this._triggerRedraw = true;
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "image") {
+      if (edge.Target.id === 'image') {
         this._image = null;
         // this._triggerRedraw = true;
       }
     },
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
       if (this._image) {
         if (this.resetSizes) {
@@ -83,40 +85,47 @@ $(function(){
           this.resetSizes = false;
         }
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.context.drawImage(this._image, this._crop.left, this._crop.top, this._crop.width, this._crop.height, 0, 0, this._width, this._height);
+        this.context.drawImage(
+          this._image,
+          this._crop.left,
+          this._crop.top,
+          this._crop.width,
+          this._crop.height,
+          0,
+          0,
+          this._width,
+          this._height
+        );
         this.inputsend();
       }
     },
     inputs: {
       image: {
-        type: "image",
-        description: "image to crop and size"
+        type: 'image',
+        description: 'image to crop and size',
       },
       width: {
-        type: "int",
+        type: 'int',
         min: 1,
         max: 2000,
-        "default": 320
+        default: 320,
       },
       height: {
-        type: "int",
+        type: 'int',
         min: 1,
         max: 2000,
-        "default": 240
+        default: 240,
       },
       send: {
-        type: "bang",
-        description: "send the image"
-      }
+        type: 'bang',
+        description: 'send the image',
+      },
     },
     outputs: {
       image: {
-        type: "image",
-        description: "sized and cropped image"
-      }
-    }
-
+        type: 'image',
+        description: 'sized and cropped image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-grid.js b/src/nodes/image-grid.js
index 2fbd10b..1298a93 100644
--- a/src/nodes/image-grid.js
+++ b/src/nodes/image-grid.js
@@ -1,184 +1,186 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-grid"] = Iframework.NativeNodes["image"].extend({
-
-    info: {
-      title: "grid",
-      author: "forresto",
-      description: "grid of images"
-    },
-    initializeModule: function(){
-    },
-    _tileWidth: 50,
-    _tileHeight: 50,
-    _tileCount: 100,
-    _tiles: [],
-    inputimage: function (image) {
-      this._image = image;
-      var data = image.getContext('2d').getImageData(0, 0, this._tileWidth, this._tileHeight);
-      if (this._reverse) {
-        this._tiles.unshift(data);
-      } else {
-        this._tiles.push(data);
-      }
-      if (this._tiles.length>this._tileCount) {
+$(function () {
+  Iframework.NativeNodes['image-grid'] = Iframework.NativeNodes['image'].extend(
+    {
+      info: {
+        title: 'grid',
+        author: 'forresto',
+        description: 'grid of images',
+      },
+      initializeModule: function () {},
+      _tileWidth: 50,
+      _tileHeight: 50,
+      _tileCount: 100,
+      _tiles: [],
+      inputimage: function (image) {
+        this._image = image;
+        var data = image
+          .getContext('2d')
+          .getImageData(0, 0, this._tileWidth, this._tileHeight);
         if (this._reverse) {
-          this._tiles.pop();
+          this._tiles.unshift(data);
         } else {
-          this._tiles.shift();
+          this._tiles.push(data);
         }
-      }
-      this._triggerRedraw = true;
-    },
-    inputwidth: function (i) {
-      this._width = i;
-      this._regrid = true;
-      this._triggerRedraw = true;
-    },
-    inputheight: function (i) {
-      this._height = i;
-      this._regrid = true;
-      this._triggerRedraw = true;
-    },
-    inputrows: function (i) {
-      this._rows = i;
-      this._regrid = true;
-      this._triggerRedraw = true;
-    },
-    inputcolumns: function (i) {
-      this._columns = i;
-      this._regrid = true;
-      this._triggerRedraw = true;
-    },
-    _reverse: false,
-    inputreverse: function (boo) {
-      if (boo !== this._reverse) {
-        this._tiles = this._tiles.reverse();
-      }
-      this._reverse = boo;
-      this._triggerRedraw = true;
-    },
-    _clear: false,
-    inputclear: function () {
-      this._clear = true;
-      this._tiles = [];
-      this._triggerRedraw = true;
-    },
-    inputsend: function () {
-      this.send("image", this.canvas);
-    },
-    _regrid: false,
-    regrid: function() {
-      // Canvas size
-      if (this.canvas.width !== this._width) {
-        this.canvas.width = this._width;
-      }
-      if (this.canvas.height !== this._height) {
-        this.canvas.height = this._height;
-      }
-      // Reset tile sizes
-      this._tileWidth = Math.floor(this._width / this._columns);
-      this._tileHeight = Math.floor(this._height / this._rows);
-      this._tileCount = this._rows * this._columns;
-      if (this._tiles.length>this._tileCount) {
-        this._tiles = this._tiles.splice(0,this._tileCount);
-      }
-      this.inputclear();
-      this._regrid = false;
-    },
-    redraw: function(){
-      // Called from NodeBoxNativeView.renderAnimationFrame()
-      if (this._regrid) {
-        this.regrid();
-      }
-      if (this._clear) {
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this._clear = false;
-      }
-      if (this._image) {
-        // Too expensive
-        // // Shift previous tiles
-        // var r, c;
-        // for (r=this._rows-1; r>=0; r--) {
-        //   for (c=this._columns-1; c>=0; c--) {
-        //     if (r===0 && c===0) {
-        //       // Last tile
-        //       continue;
-        //     }
-        //     var previousX = c>0 ? (c-1)*this._tileWidth : (this._columns-1)*this._tileWidth;
-        //     var previousY = c>0 ? r*this._tileHeight : (r-1)*this._tileHeight;
-        //     // Blurs out in Chrome
-        //     // this.context.drawImage(this.canvas, previousTile.x, previousTile.y, this._tileWidth, this._tileHeight, c*this._tileHeight, r*this._tileWidth, this._tileWidth, this._tileHeight );
-        //     var previous = this.context.getImageData(previousX, previousY, this._tileWidth, this._tileHeight);
-        //     this.context.putImageData(previous, c*this._tileWidth, r*this._tileHeight);
-        //   }
-        // }
-        // Draw new tile
-        // this.context.drawImage(this._image, 0, 0, this._tileWidth, this._tileHeight );
-
-        var r, c;
-        for (r=0; r<this._rows; r++) {
-          for (c=0; c<this._columns; c++) {
-            var tile = this._tiles[r*this._columns+c];
-            if (tile) {
-              this.context.putImageData(tile, c*this._tileWidth, r*this._tileHeight);
-            }
+        if (this._tiles.length > this._tileCount) {
+          if (this._reverse) {
+            this._tiles.pop();
+          } else {
+            this._tiles.shift();
           }
         }
-        this.inputsend();
-      }
-    },
-    inputs: {
-      image: {
-        type: "image",
-        description: "image to add to grid"
+        this._triggerRedraw = true;
+      },
+      inputwidth: function (i) {
+        this._width = i;
+        this._regrid = true;
+        this._triggerRedraw = true;
       },
-      width: {
-        type: "int",
-        description: "grid width",
-        min: 1,
-        "default": 500
+      inputheight: function (i) {
+        this._height = i;
+        this._regrid = true;
+        this._triggerRedraw = true;
       },
-      height: {
-        type: "int",
-        description: "grid height",
-        min: 1,
-        "default": 500
+      inputrows: function (i) {
+        this._rows = i;
+        this._regrid = true;
+        this._triggerRedraw = true;
       },
-      rows: {
-        type: "int",
-        description: "grid row count",
-        "default": 10
+      inputcolumns: function (i) {
+        this._columns = i;
+        this._regrid = true;
+        this._triggerRedraw = true;
       },
-      columns: {
-        type: "int",
-        description: "grid column count",
-        "default": 10
+      _reverse: false,
+      inputreverse: function (boo) {
+        if (boo !== this._reverse) {
+          this._tiles = this._tiles.reverse();
+        }
+        this._reverse = boo;
+        this._triggerRedraw = true;
       },
-      reverse: {
-        type: "boolean",
-        description: "if true, most recent in upper-left",
-        "default": false
+      _clear: false,
+      inputclear: function () {
+        this._clear = true;
+        this._tiles = [];
+        this._triggerRedraw = true;
       },
-      clear: {
-        type: "bang",
-        description: "clear the image and tiles"
+      inputsend: function () {
+        this.send('image', this.canvas);
       },
-      send: {
-        type: "bang",
-        description: "send the image"
-      }
-    },
-    outputs: {
-      image: {
-        type: "image",
-        description: "the whole grid image"
-      }
-    }
-
-  });
-
+      _regrid: false,
+      regrid: function () {
+        // Canvas size
+        if (this.canvas.width !== this._width) {
+          this.canvas.width = this._width;
+        }
+        if (this.canvas.height !== this._height) {
+          this.canvas.height = this._height;
+        }
+        // Reset tile sizes
+        this._tileWidth = Math.floor(this._width / this._columns);
+        this._tileHeight = Math.floor(this._height / this._rows);
+        this._tileCount = this._rows * this._columns;
+        if (this._tiles.length > this._tileCount) {
+          this._tiles = this._tiles.splice(0, this._tileCount);
+        }
+        this.inputclear();
+        this._regrid = false;
+      },
+      redraw: function () {
+        // Called from NodeBoxNativeView.renderAnimationFrame()
+        if (this._regrid) {
+          this.regrid();
+        }
+        if (this._clear) {
+          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+          this._clear = false;
+        }
+        if (this._image) {
+          // Too expensive
+          // // Shift previous tiles
+          // var r, c;
+          // for (r=this._rows-1; r>=0; r--) {
+          //   for (c=this._columns-1; c>=0; c--) {
+          //     if (r===0 && c===0) {
+          //       // Last tile
+          //       continue;
+          //     }
+          //     var previousX = c>0 ? (c-1)*this._tileWidth : (this._columns-1)*this._tileWidth;
+          //     var previousY = c>0 ? r*this._tileHeight : (r-1)*this._tileHeight;
+          //     // Blurs out in Chrome
+          //     // this.context.drawImage(this.canvas, previousTile.x, previousTile.y, this._tileWidth, this._tileHeight, c*this._tileHeight, r*this._tileWidth, this._tileWidth, this._tileHeight );
+          //     var previous = this.context.getImageData(previousX, previousY, this._tileWidth, this._tileHeight);
+          //     this.context.putImageData(previous, c*this._tileWidth, r*this._tileHeight);
+          //   }
+          // }
+          // Draw new tile
+          // this.context.drawImage(this._image, 0, 0, this._tileWidth, this._tileHeight );
 
+          var r, c;
+          for (r = 0; r < this._rows; r++) {
+            for (c = 0; c < this._columns; c++) {
+              var tile = this._tiles[r * this._columns + c];
+              if (tile) {
+                this.context.putImageData(
+                  tile,
+                  c * this._tileWidth,
+                  r * this._tileHeight
+                );
+              }
+            }
+          }
+          this.inputsend();
+        }
+      },
+      inputs: {
+        image: {
+          type: 'image',
+          description: 'image to add to grid',
+        },
+        width: {
+          type: 'int',
+          description: 'grid width',
+          min: 1,
+          default: 500,
+        },
+        height: {
+          type: 'int',
+          description: 'grid height',
+          min: 1,
+          default: 500,
+        },
+        rows: {
+          type: 'int',
+          description: 'grid row count',
+          default: 10,
+        },
+        columns: {
+          type: 'int',
+          description: 'grid column count',
+          default: 10,
+        },
+        reverse: {
+          type: 'boolean',
+          description: 'if true, most recent in upper-left',
+          default: false,
+        },
+        clear: {
+          type: 'bang',
+          description: 'clear the image and tiles',
+        },
+        send: {
+          type: 'bang',
+          description: 'send the image',
+        },
+      },
+      outputs: {
+        image: {
+          type: 'image',
+          description: 'the whole grid image',
+        },
+      },
+    }
+  );
 });
diff --git a/src/nodes/image-in.js b/src/nodes/image-in.js
index 05f9911..7a685e1 100644
--- a/src/nodes/image-in.js
+++ b/src/nodes/image-in.js
@@ -1,66 +1,65 @@
 /*global filepicker:true*/
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="info" />';
-    // '<div class="choosers">'+
-    //   '<button class="publicfile icon-globe-1">choose or upload public image</button> (choose from device, Flickr, Dropbox, Google...) <br />'+
-    //   '<button class="localfile icon-camera">choose or take local image</button> (not public. from device, mobile camera...) '+
-    // '<div>'+
-    // '<div class="savers">'+
-    //   '<button class="publicfile icon-globe-1">save image publicly</button> this canvas is not saved'+
-    // '<div>';
-
-  Iframework.NativeNodes["image-in"] = Iframework.NativeNodes["image"].extend({
+$(function () {
+  var template = '<div class="info" />';
+  // '<div class="choosers">'+
+  //   '<button class="publicfile icon-globe-1">choose or upload public image</button> (choose from device, Flickr, Dropbox, Google...) <br />'+
+  //   '<button class="localfile icon-camera">choose or take local image</button> (not public. from device, mobile camera...) '+
+  // '<div>'+
+  // '<div class="savers">'+
+  //   '<button class="publicfile icon-globe-1">save image publicly</button> this canvas is not saved'+
+  // '<div>';
 
+  Iframework.NativeNodes['image-in'] = Iframework.NativeNodes['image'].extend({
     template: _.template(template),
     info: {
-      title: "image",
-      description: "hold a canvas or get image from url"
+      title: 'image',
+      description: 'hold a canvas or get image from url',
     },
     // events: {
     //   "click .publicfile": "loadPublic",
     //   "click .localfile":  "loadLocal"
     // },
-    initializeModule: function(){
-      var canvas = this.model.get("canvas");
-      if (canvas){
-        this.inputimage( canvas );
+    initializeModule: function () {
+      var canvas = this.model.get('canvas');
+      if (canvas) {
+        this.inputimage(canvas);
       }
-      this.$(".savers").hide();
+      this.$('.savers').hide();
 
       var self = this;
-      this.$el.on("drop", function(event, ui){
+      this.$el.on('drop', function (event, ui) {
         self.dropUrlTest(event, ui);
       });
     },
     dropUrlTest: function (event, ui) {
-      var url = ui.helper.data("meemoo-image-url");
+      var url = ui.helper.data('meemoo-image-url');
       if (url) {
-        this.set("url", url);
+        this.set('url', url);
         this.inputurl(url);
       }
     },
-    inputimage: function(image){
+    inputimage: function (image) {
       this._image = image;
       this._triggerRedraw = true;
-      this.$(".choosers").hide();
+      this.$('.choosers').hide();
     },
     inputurl: function (url) {
-      if ( url==="" ){ return false; }
+      if (url === '') {
+        return false;
+      }
       this._url = url;
       this._image = null;
 
-      this.$(".info").text("Loading image...");
+      this.$('.info').text('Loading image...');
 
       // Internal image to copy to canvas
       this._img = new Image();
-      this._img.crossOrigin = "anonymous";
+      this._img.crossOrigin = 'anonymous';
       var self = this;
-      this._img.onload = function(){
-        self.$(".info").text("");
+      this._img.onload = function () {
+        self.$('.info').text('');
 
         self.canvas.width = self._img.width;
         self.canvas.height = self._img.height;
@@ -69,12 +68,13 @@ $(function(){
       };
       this._img.src = url;
       // make sure the load event fires for cached images too
-      if ( this._img.complete || this._img.complete === undefined ) {
-        this._img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+      if (this._img.complete || this._img.complete === undefined) {
+        this._img.src =
+          'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
         this._img.src = url;
       }
-      
-      this.$(".choosers, .savers").hide();
+
+      this.$('.choosers, .savers').hide();
     },
     // loadPublic: function(){
     //   var self = this;
@@ -84,7 +84,7 @@ $(function(){
     //       mimetype: 'image/*',
     //       multiple: false,
     //       maxSize: 5*1024*1024
-    //     }, 
+    //     },
     //     {
     //       location: 'S3',
     //       path: 'v1/',
@@ -99,8 +99,8 @@ $(function(){
     // },
     // loadLocal: function() {
     // },
-    inputsend: function(){
-      this.send("image", this.canvas);
+    inputsend: function () {
+      this.send('image', this.canvas);
     },
     redraw: function () {
       if (this._image) {
@@ -117,28 +117,25 @@ $(function(){
     },
     inputs: {
       image: {
-        type: "image",
-        description: "image to hold"
+        type: 'image',
+        description: 'image to hold',
       },
       url: {
-        type: "string",
-        description: "url to image to load"
+        type: 'string',
+        description: 'url to image to load',
       },
       send: {
-        type: "bang",
-        description: "send canvas version"
-      }
+        type: 'bang',
+        description: 'send canvas version',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
+        type: 'image',
+      },
       // dataurl: {
       //   type: "data:image"
       // }
-    }
-
+    },
   });
-
-
 });
diff --git a/src/nodes/image-layers.js b/src/nodes/image-layers.js
index e22819c..7a60a19 100644
--- a/src/nodes/image-layers.js
+++ b/src/nodes/image-layers.js
@@ -1,8 +1,8 @@
 // extends src/nodes/view.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
+$(function () {
+  // prettier-ignore
+  var template =
     '<div class="layers" style="position:absolute; top:0; left:110px; bottom:0; right:0px; overflow: auto; z-index:0;">'+
       '<canvas class="resizer" style="position:absolute; top:0px; left:0px; z-index:2;" width="500" height="500" ></canvas>'+
     '</div>'+
@@ -13,7 +13,8 @@ $(function(){
       '<div class="info"></div>'+
     '</div>';
 
-  var layerTemplate = 
+  // prettier-ignore
+  var layerTemplate =
     '<li class="list-item" title="drag to sort, select to move">'+
       '<input class="list-item-visible" type="checkbox" title="visible" <%= visible ? "checked" : "" %> ></input>'+
       '<canvas class="list-item-preview" width="50" height="50"></canvas>'+
@@ -26,46 +27,54 @@ $(function(){
       '</span>'+
     '</li>';
 
-  Iframework.NativeNodes["image-layers"] = Iframework.NativeNodes["image"].extend({
-
+  Iframework.NativeNodes['image-layers'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "layers",
-      description: "make a stack of canvases"
+      title: 'layers',
+      description: 'make a stack of canvases',
     },
     template: _.template(template),
     layerTemplate: _.template(layerTemplate),
     events: {
-      "sortstop .list":     "sortLayers",
-      "click .list-item":   "selectLayer",
-      "focus .list-item-visible": "focusLayer",
-      "change .list-item-visible": "setVisible",
-      "focus .list-item-alpha": "disableNudge",
-      "click .list-item-alpha": "disableNudge",
-      "change .list-item-alpha": "setAlpha",
-      "mousedown .list-item-preview": "checkDirty",
-      "click .list-item-delete": "deleteLayer",
-      "click .drag-flat":   "deselect",
-      "dragstart .resizer": "startMove",
-      "drag .resizer":      "move",
-      "dragstop .resizer":  "stopMove",
-      "mouseover":          "enableNudge",
-      "mouseout":           "disableNudge"
+      'sortstop .list': 'sortLayers',
+      'click .list-item': 'selectLayer',
+      'focus .list-item-visible': 'focusLayer',
+      'change .list-item-visible': 'setVisible',
+      'focus .list-item-alpha': 'disableNudge',
+      'click .list-item-alpha': 'disableNudge',
+      'change .list-item-alpha': 'setAlpha',
+      'mousedown .list-item-preview': 'checkDirty',
+      'click .list-item-delete': 'deleteLayer',
+      'click .drag-flat': 'deselect',
+      'dragstart .resizer': 'startMove',
+      'drag .resizer': 'move',
+      'dragstop .resizer': 'stopMove',
+      mouseover: 'enableNudge',
+      mouseout: 'disableNudge',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       // Move default canvas
-      this.$(".layers").prepend(this.canvas);
+      this.$('.layers').prepend(this.canvas);
       $(this.canvas)
         // .draggable("destroy")
-        .css("maxWidth", "none");
+        .css('maxWidth', 'none');
 
-      this.$(".list").sortable();
+      this.$('.list').sortable();
 
       // Set up layers from saved state
       this.layerInfo = {};
-      var layers = this.model.get("state")["layers"];
+      var layers = this.model.get('state')['layers'];
       if (layers) {
-        for (var i=0; i<layers.length; i++) {
-          var info = _.pick(layers[i], ['name', 'visible', 'sort', 'x', 'y', 'alpha']);
+        for (var i = 0; i < layers.length; i++) {
+          var info = _.pick(layers[i], [
+            'name',
+            'visible',
+            'sort',
+            'x',
+            'y',
+            'alpha',
+          ]);
           info.id = info.name;
           info.x = info.x ? info.x : 0;
           info.y = info.y ? info.y : 0;
@@ -74,35 +83,36 @@ $(function(){
       }
 
       // Move layers
-      this.resizer = this.$(".resizer")[0];
+      this.resizer = this.$('.resizer')[0];
       this.resizerContext = this.resizer.getContext('2d');
-      this.$(".resizer").draggable({
-        helper: function(){
-          return $("<div>");
-        }
+      this.$('.resizer').draggable({
+        helper: function () {
+          return $('<div>');
+        },
       });
 
       // Drag canvas
       var self = this;
-      this.$(".drag-flat").draggable({
-        cursor: "pointer",
-        cursorAt: { top: -10, left: -10 },
-        helper: function( event ) {
-          var helper = $( '<div class="drag-image"><h2>Copy this</h2></div>' )
-            .data({
-              "meemoo-drag-type": "canvas",
-              "meemoo-source-node": self
-            });
+      this.$('.drag-flat').draggable({
+        cursor: 'pointer',
+        cursorAt: {top: -10, left: -10},
+        helper: function (event) {
+          var helper = $(
+            '<div class="drag-image"><h2>Copy this</h2></div>'
+          ).data({
+            'meemoo-drag-type': 'canvas',
+            'meemoo-source-node': self,
+          });
           $(document.body).append(helper);
-          _.delay(function(){
+          _.delay(function () {
             self.dragCopyCanvas(helper);
           }, 100);
           return helper;
-        }
+        },
       });
 
       // Nudge layer
-      document.addEventListener("keydown", function(event){
+      document.addEventListener('keydown', function (event) {
         switch (event.keyCode) {
           case 38: // up
             self.nudgeUp(event);
@@ -120,13 +130,12 @@ $(function(){
             break;
         }
       });
-
     },
-    inputsend: function(){
-      this.send("image", this.canvas);
+    inputsend: function () {
+      this.send('image', this.canvas);
     },
     layerInfo: {},
-    inputimage: function(i){
+    inputimage: function (i) {
       // Find or make layer
       var layer;
       var len = this.$('.list-item').length;
@@ -135,7 +144,15 @@ $(function(){
         // From input, updates with input
         if (!this.layerInfo[i.id]) {
           // Add new
-          this.layerInfo[i.id] = {id: i.id, name: i.id, visible: true, sort: len+10, x:0, y:0, alpha:1};
+          this.layerInfo[i.id] = {
+            id: i.id,
+            name: i.id,
+            visible: true,
+            sort: len + 10,
+            x: 0,
+            y: 0,
+            alpha: 1,
+          };
           newLayer = true;
         }
         layer = this.layerInfo[i.id];
@@ -144,12 +161,20 @@ $(function(){
         }
       } else {
         // Dropped, does not update
-        var randomId = Math.round(Math.random()*100000);
-        while ( this.layerInfo[randomId] ) {
+        var randomId = Math.round(Math.random() * 100000);
+        while (this.layerInfo[randomId]) {
           // Make sure unique
-          randomId = Math.round(Math.random()*100000);
+          randomId = Math.round(Math.random() * 100000);
         }
-        layer = this.layerInfo[randomId] = {id: randomId, name:"dropped", visible: true, sort: len+10, x:0, y:0, alpha:1};
+        layer = this.layerInfo[randomId] = {
+          id: randomId,
+          name: 'dropped',
+          visible: true,
+          sort: len + 10,
+          x: 0,
+          y: 0,
+          alpha: 1,
+        };
         newLayer = true;
       }
 
@@ -159,25 +184,33 @@ $(function(){
         layer.listViewDirty = true;
       } else {
         // Defaults
-        if (layer.x === undefined) { layer.x = 0; }
-        if (layer.y === undefined) { layer.x = 0; }
-        if (layer.alpha === undefined) { layer.alpha = 1; }
+        if (layer.x === undefined) {
+          layer.x = 0;
+        }
+        if (layer.y === undefined) {
+          layer.x = 0;
+        }
+        if (layer.alpha === undefined) {
+          layer.alpha = 1;
+        }
         // Make list item
-        listView = layer.listView = $( this.layerTemplate(layer) );
-        listView.data({"iframework-image-layers-layer": layer});
-        var preview = layer.listViewCanvas = listView.find("canvas.list-item-preview")[0];
+        listView = layer.listView = $(this.layerTemplate(layer));
+        listView.data({'iframework-image-layers-layer': layer});
+        var preview = (layer.listViewCanvas = listView.find(
+          'canvas.list-item-preview'
+        )[0]);
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
         Iframework.util.fitAndCopy(i, preview);
-        layer.listViewDirty = false; 
+        layer.listViewDirty = false;
         // Add to list
-        this.$(".list").prepend(listView);
+        this.$('.list').prepend(listView);
         // Resort
-        var sorted = this.$('.list-item').sort(function(a, b){
-          var aa = $(a).data("iframework-image-layers-layer").sort;
-          var bb = $(b).data("iframework-image-layers-layer").sort;
-          return bb-aa;
+        var sorted = this.$('.list-item').sort(function (a, b) {
+          var aa = $(a).data('iframework-image-layers-layer').sort;
+          var bb = $(b).data('iframework-image-layers-layer').sort;
+          return bb - aa;
         });
-        this.$(".list").append(sorted);
+        this.$('.list').append(sorted);
         // Select
         listView.click();
       }
@@ -196,31 +229,35 @@ $(function(){
     inputwidth: function (w) {
       this._w = w;
       this.resizer.width = w;
-      this.$(".canvases").css("width", w);
+      this.$('.canvases').css('width', w);
       this._triggerRedraw = true;
     },
     inputheight: function (h) {
       this._h = h;
       this.resizer.height = h;
-      this.$(".canvases").css("height", h);
+      this.$('.canvases').css('height', h);
       this._triggerRedraw = true;
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "image") {
+      if (edge.Target.id === 'image') {
         // Remove canvas
         // Remove list preview
         // Remove layer
       }
     },
-    sortLayers: function(event, ui){
-      var layers = this.$(".list-item");
+    sortLayers: function (event, ui) {
+      var layers = this.$('.list-item');
       var count = layers.length;
-      _.each(layers, function(item){
-        var layer = $(item).data("iframework-image-layers-layer");
-        layer.sort = count;
-        count--;
-      }, this);
+      _.each(
+        layers,
+        function (item) {
+          var layer = $(item).data('iframework-image-layers-layer');
+          layer.sort = count;
+          count--;
+        },
+        this
+      );
 
       this.saveLayerInfo();
       this.rebuildDrawStack();
@@ -230,35 +267,39 @@ $(function(){
       $(event.target).parent().click();
     },
     setVisible: function (event) {
-      var layer = $(event.target).parent().data("iframework-image-layers-layer");
+      var layer = $(event.target)
+        .parent()
+        .data('iframework-image-layers-layer');
       layer.visible = event.target.checked;
 
       this.saveLayerInfo();
       this.rebuildDrawStack();
     },
     setAlpha: function (event) {
-      var layer = $(event.target).parent().parent().data("iframework-image-layers-layer");
-      layer.alpha = parseFloat( event.target.value );
+      var layer = $(event.target)
+        .parent()
+        .parent()
+        .data('iframework-image-layers-layer');
+      layer.alpha = parseFloat(event.target.value);
 
       this.saveLayerInfo();
       this.rebuildDrawStack();
     },
     saveLayerInfo: _.debounce(function () {
       // Filter only relevant layers
-      var saveable = _.filter(this.layerInfo, function(item){ 
-        return item.name && item.name !== "dropped"; 
+      var saveable = _.filter(this.layerInfo, function (item) {
+        return item.name && item.name !== 'dropped';
       });
       // Filter relevant info
-      saveable = _.map(saveable, function(value, key, list){ 
+      saveable = _.map(saveable, function (value, key, list) {
         return _.pick(value, ['name', 'visible', 'sort', 'x', 'y', 'alpha']);
       });
       // Sort
-      saveable = saveable.sort(function(a, b){
-        return a.sort-b.sort;
+      saveable = saveable.sort(function (a, b) {
+        return a.sort - b.sort;
       });
       // Save to graph
-      this.set("layers", saveable);
-
+      this.set('layers', saveable);
     }, 100),
     stack: [],
     rebuildDrawStack: function () {
@@ -270,8 +311,8 @@ $(function(){
           stack.push(layer);
         }
       }
-      stack = stack.sort(function(a, b){
-        return (a.sort - b.sort);
+      stack = stack.sort(function (a, b) {
+        return a.sort - b.sort;
       });
       this.stack = stack;
 
@@ -279,28 +320,37 @@ $(function(){
     },
     checkDirty: function (event) {
       // Only update previews when clicked
-      var layer = $(event.target).parent().data("iframework-image-layers-layer");
+      var layer = $(event.target)
+        .parent()
+        .data('iframework-image-layers-layer');
       if (layer && layer.listViewDirty) {
-        layer.listViewCanvas.getContext("2d").clearRect(0, 0, layer.listViewCanvas.width, layer.listViewCanvas.height);
+        layer.listViewCanvas
+          .getContext('2d')
+          .clearRect(
+            0,
+            0,
+            layer.listViewCanvas.width,
+            layer.listViewCanvas.height
+          );
         Iframework.util.fitAndCopy(layer.canvas, layer.listViewCanvas);
       }
     },
     deselect: function () {
       this.selected = null;
-      this.$(".list-item").removeClass("selected");
-      $(".resizer").hide();
+      this.$('.list-item').removeClass('selected');
+      $('.resizer').hide();
     },
     selectLayer: function (event) {
       // Deselect others
-      this.$(".list-item").removeClass("selected");
+      this.$('.list-item').removeClass('selected');
       // Select this
-      $(event.currentTarget).addClass("selected");
+      $(event.currentTarget).addClass('selected');
       // Only update previews when clicked
-      var layer = $(event.currentTarget).data("iframework-image-layers-layer");
+      var layer = $(event.currentTarget).data('iframework-image-layers-layer');
       if (layer) {
         // Select this
         this.selected = layer;
-        $(".resizer").show();
+        $('.resizer').show();
       }
       this.enableNudge();
     },
@@ -319,47 +369,47 @@ $(function(){
     },
     moveLayer: function (layer, x, y) {
       if (this._tile) {
-        while (x < 0-this._w){
+        while (x < 0 - this._w) {
           x += this._w;
         }
-        while (x > this._w){
+        while (x > this._w) {
           x -= this._w;
         }
-        while (y < 0-this._h){
+        while (y < 0 - this._h) {
           y += this._h;
         }
-        while (y > this._h){
+        while (y > this._h) {
           y -= this._h;
         }
       }
       $(layer.canvas).css({
-        left: x+"px",
-        top: y+"px"
+        left: x + 'px',
+        top: y + 'px',
       });
       layer.x = x;
       layer.y = y;
-      layer.listView.find(".list-item-x").text( x );
-      layer.listView.find(".list-item-y").text( y );
+      layer.listView.find('.list-item-x').text(x);
+      layer.listView.find('.list-item-y').text(y);
 
       this.saveLayerInfo();
       this._triggerRedraw = true;
     },
     startX: 0,
     startY: 0,
-    startMove: function(event, ui){
+    startMove: function (event, ui) {
       if (this.selected) {
         this.startX = this.selected.x;
         this.startY = this.selected.y;
       }
     },
-    move: function(event, ui){
+    move: function (event, ui) {
       if (this.selected) {
-        var x = this.startX+ui.position.left;
-        var y = this.startY+ui.position.top;
+        var x = this.startX + ui.position.left;
+        var y = this.startY + ui.position.top;
         this.moveLayer(this.selected, x, y);
       }
     },
-    stopMove: function(event, ui){
+    stopMove: function (event, ui) {
       if (this.selected) {
         this.move(event, ui);
       }
@@ -377,28 +427,28 @@ $(function(){
     nudgeUp: function (event) {
       if (this._enableNudge && this.selected) {
         event.preventDefault(); // Don't scroll
-        this.moveLayer(this.selected, this.selected.x, this.selected.y-1);
+        this.moveLayer(this.selected, this.selected.x, this.selected.y - 1);
       }
     },
     nudgeDown: function (event) {
       if (this._enableNudge && this.selected) {
         event.preventDefault(); // Don't scroll
-        this.moveLayer(this.selected, this.selected.x, this.selected.y+1);
+        this.moveLayer(this.selected, this.selected.x, this.selected.y + 1);
       }
     },
     nudgeLeft: function (event) {
       if (this._enableNudge && this.selected) {
         event.preventDefault(); // Don't scroll
-        this.moveLayer(this.selected, this.selected.x-1, this.selected.y);
+        this.moveLayer(this.selected, this.selected.x - 1, this.selected.y);
       }
     },
     nudgeRight: function (event) {
       if (this._enableNudge && this.selected) {
         event.preventDefault(); // Don't scroll
-        this.moveLayer(this.selected, this.selected.x+1, this.selected.y);
+        this.moveLayer(this.selected, this.selected.x + 1, this.selected.y);
       }
     },
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
 
       // Resize if needed
@@ -408,12 +458,12 @@ $(function(){
       }
 
       // Clear
-      this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
+      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
       // Draw stack
       var stackLength = this.stack.length;
       if (stackLength > 0) {
-        for (var i=0; i<stackLength; i++) {
+        for (var i = 0; i < stackLength; i++) {
           var layer = this.stack[i];
 
           // Layer alpha
@@ -423,18 +473,23 @@ $(function(){
           if (this._tile) {
             // Draw enough times to make it tile
             var x = layer.x;
-            while (x<this._w) {
+            while (x < this._w) {
               x += this._w;
             }
             var y = layer.y;
-            while (y<this._h) {
+            while (y < this._h) {
               y += this._h;
             }
             var yStart = y;
 
-            while (x > 0-layer.canvas.width) {
-              while (y > 0-layer.canvas.height) {
-                if (x<this._w && x>0-layer.canvas.width && y<this._h && y>0-layer.canvas.height ) {
+            while (x > 0 - layer.canvas.width) {
+              while (y > 0 - layer.canvas.height) {
+                if (
+                  x < this._w &&
+                  x > 0 - layer.canvas.width &&
+                  y < this._h &&
+                  y > 0 - layer.canvas.height
+                ) {
                   this.context.drawImage(layer.canvas, x, y);
                 }
                 y -= this._h;
@@ -449,49 +504,45 @@ $(function(){
 
           // Reset alpha
           this.context.globalAlpha = 1;
-
         }
       }
 
       this.inputsend();
-
     },
     inputs: {
       image: {
-        type: "image",
-        description: "all of the images that go into the layers"
+        type: 'image',
+        description: 'all of the images that go into the layers',
       },
       width: {
-        type: "int",
-        description: "exported image width",
+        type: 'int',
+        description: 'exported image width',
         min: 1,
         max: 6826,
-        "default": 500
+        default: 500,
       },
       height: {
-        type: "int",
-        description: "exported image height",
+        type: 'int',
+        description: 'exported image height',
         min: 1,
         max: 6826,
-        "default": 500
+        default: 500,
       },
       tile: {
-        type: "boolean",
-        description: "tile for wallpaper or textile printing",
-        "default": false
+        type: 'boolean',
+        description: 'tile for wallpaper or textile printing',
+        default: false,
       },
       send: {
-        type: "bang",
-        description: "send flattened image"
-      }
+        type: 'bang',
+        description: 'send flattened image',
+      },
     },
     outputs: {
       image: {
-        type: "image",
-        description: "flattened image"
-      }
-    }
+        type: 'image',
+        description: 'flattened image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-lumakey.js b/src/nodes/image-lumakey.js
index 58f3e3c..57780c5 100644
--- a/src/nodes/image-lumakey.js
+++ b/src/nodes/image-lumakey.js
@@ -1,24 +1,24 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-lumakey"] = Iframework.NativeNodes["image"].extend({
-
+$(function () {
+  Iframework.NativeNodes['image-lumakey'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "lumakey",
-      description: "alpha key based on luma"
+      title: 'lumakey',
+      description: 'alpha key based on luma',
     },
-    initializeModule: function(){
-      $(this.canvas).addClass("alpha-bg");
+    initializeModule: function () {
+      $(this.canvas).addClass('alpha-bg');
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "image") {
+      if (edge.Target.id === 'image') {
         this._image = null;
         this._triggerRedraw = true;
       }
     },
-    redraw: function(){
+    redraw: function () {
       // this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
       if (this._image) {
         if (this.canvas.height !== this._image.height) {
@@ -28,20 +28,31 @@ $(function(){
           this.canvas.width = this._image.width;
         }
 
-        this.context.drawImage(this._image, 0, 0, this._image.width, this._image.height);
-        var frame = this.context.getImageData(0, 0, this._image.width, this._image.height);
+        this.context.drawImage(
+          this._image,
+          0,
+          0,
+          this._image.width,
+          this._image.height
+        );
+        var frame = this.context.getImageData(
+          0,
+          0,
+          this._image.width,
+          this._image.height
+        );
         var len = frame.data.length;
 
         // Iterate over all pixels in the current frame.
-        for (var i = 0; i < len; i+=4) {
+        for (var i = 0; i < len; i += 4) {
           var r = frame.data[i + 0];
           var g = frame.data[i + 1];
           var b = frame.data[i + 2];
 
-          var luma = (0.299*r + 0.587*g + 0.11*b) / 255;
+          var luma = (0.299 * r + 0.587 * g + 0.11 * b) / 255;
 
           // alpha zero
-          if ( (this._invert ? luma < this._threshold : luma >= this._threshold ) ) {
+          if (this._invert ? luma < this._threshold : luma >= this._threshold) {
             frame.data[i + 3] = 0;
           }
         }
@@ -52,35 +63,32 @@ $(function(){
       }
     },
     inputsend: function () {
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
     inputs: {
       image: {
-        type: "image",
-        description: "image to key"
+        type: 'image',
+        description: 'image to key',
       },
       threshold: {
-        type: "float",
-        description: "luma value, 0-1",
-        "default": 0.8
+        type: 'float',
+        description: 'luma value, 0-1',
+        default: 0.8,
       },
       invert: {
-        type: "boolean",
-        description: "checked: cut black; not checked: cut white",
-        "default": false
+        type: 'boolean',
+        description: 'checked: cut black; not checked: cut white',
+        default: false,
       },
       send: {
-        type: "bang",
-        description: "send the image"
-      }
+        type: 'bang',
+        description: 'send the image',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-mapper.js b/src/nodes/image-mapper.js
index d6649ec..fe25113 100644
--- a/src/nodes/image-mapper.js
+++ b/src/nodes/image-mapper.js
@@ -1,60 +1,71 @@
 // extends src/nodes/view.js which extends src/node-box-native-view.js
 
-$(function(){
-
+$(function () {
   // Returns style object with matrix3d with prefixes
   // THANK YOU MvG http://math.stackexchange.com/a/339033/78081
-  var quadWarpMatrix = function(w, h, xTL, yTL, xTR, yTR, xBL, yBL, xBR, yBR) {
-
-    function adj(m) { // Compute the adjugate of m
+  var quadWarpMatrix = function (w, h, xTL, yTL, xTR, yTR, xBL, yBL, xBR, yBR) {
+    function adj(m) {
+      // Compute the adjugate of m
       return [
-        m[4]*m[8]-m[5]*m[7], m[2]*m[7]-m[1]*m[8], m[1]*m[5]-m[2]*m[4],
-        m[5]*m[6]-m[3]*m[8], m[0]*m[8]-m[2]*m[6], m[2]*m[3]-m[0]*m[5],
-        m[3]*m[7]-m[4]*m[6], m[1]*m[6]-m[0]*m[7], m[0]*m[4]-m[1]*m[3]
+        m[4] * m[8] - m[5] * m[7],
+        m[2] * m[7] - m[1] * m[8],
+        m[1] * m[5] - m[2] * m[4],
+        m[5] * m[6] - m[3] * m[8],
+        m[0] * m[8] - m[2] * m[6],
+        m[2] * m[3] - m[0] * m[5],
+        m[3] * m[7] - m[4] * m[6],
+        m[1] * m[6] - m[0] * m[7],
+        m[0] * m[4] - m[1] * m[3],
       ];
     }
-    function multmm(a, b) { // multiply two matrices
+    function multmm(a, b) {
+      // multiply two matrices
       var c = Array(9);
       for (var i = 0; i != 3; ++i) {
         for (var j = 0; j != 3; ++j) {
           var cij = 0;
           for (var k = 0; k != 3; ++k) {
-            cij += a[3*i + k]*b[3*k + j];
+            cij += a[3 * i + k] * b[3 * k + j];
           }
-          c[3*i + j] = cij;
+          c[3 * i + j] = cij;
         }
       }
       return c;
     }
-    function multmv(m, v) { // multiply matrix and vector
+    function multmv(m, v) {
+      // multiply matrix and vector
       return [
-        m[0]*v[0] + m[1]*v[1] + m[2]*v[2],
-        m[3]*v[0] + m[4]*v[1] + m[5]*v[2],
-        m[6]*v[0] + m[7]*v[1] + m[8]*v[2]
+        m[0] * v[0] + m[1] * v[1] + m[2] * v[2],
+        m[3] * v[0] + m[4] * v[1] + m[5] * v[2],
+        m[6] * v[0] + m[7] * v[1] + m[8] * v[2],
       ];
     }
     function pdbg(m, v) {
       var r = multmv(m, v);
-      return r + " (" + r[0]/r[2] + ", " + r[1]/r[2] + ")";
+      return r + ' (' + r[0] / r[2] + ', ' + r[1] / r[2] + ')';
     }
     function basisToPoints(x1, y1, x2, y2, x3, y3, x4, y4) {
-      var m = [
-        x1, x2, x3,
-        y1, y2, y3,
-         1,  1,  1
-      ];
+      var m = [x1, x2, x3, y1, y2, y3, 1, 1, 1];
       var v = multmv(adj(m), [x4, y4, 1]);
-      return multmm(m, [
-        v[0], 0, 0,
-        0, v[1], 0,
-        0, 0, v[2]
-      ]);
+      return multmm(m, [v[0], 0, 0, 0, v[1], 0, 0, 0, v[2]]);
     }
     function general2DProjection(
-      x1s, y1s, x1d, y1d,
-      x2s, y2s, x2d, y2d,
-      x3s, y3s, x3d, y3d,
-      x4s, y4s, x4d, y4d
+      x1s,
+      y1s,
+      x1d,
+      y1d,
+      x2s,
+      y2s,
+      x2d,
+      y2d,
+      x3s,
+      y3s,
+      x3d,
+      y3d,
+      x4s,
+      y4s,
+      x4d,
+      y4d
     ) {
       var s = basisToPoints(x1s, y1s, x2s, y2s, x3s, y3s, x4s, y4s);
       var d = basisToPoints(x1d, y1d, x2d, y2d, x3d, y3d, x4d, y4d);
@@ -62,109 +73,150 @@ $(function(){
     }
     function project(m, x, y) {
       var v = multmv(m, [x, y, 1]);
-      return [v[0]/v[2], v[1]/v[2]];
+      return [v[0] / v[2], v[1] / v[2]];
     }
 
     function matrix3d(w, h, x1, y1, x2, y2, x3, y3, x4, y4) {
       // var w = elt.offsetWidth, h = elt.offsetHeight;
-      var t = general2DProjection( 0, 0, x1, y1, w, 0, x2, y2, 0, h, x3, y3, w, h, x4, y4 );
-      for (i = 0; i != 9; ++i) t[i] = t[i]/t[8];
-      t = [t[0], t[3], 0, t[6],
-           t[1], t[4], 0, t[7],
-           0   , 0   , 1, 0   ,
-           t[2], t[5], 0, t[8]];
-      t = "matrix3d(" + t.join(", ") + ")";
+      var t = general2DProjection(
+        0,
+        0,
+        x1,
+        y1,
+        w,
+        0,
+        x2,
+        y2,
+        0,
+        h,
+        x3,
+        y3,
+        w,
+        h,
+        x4,
+        y4
+      );
+      for (i = 0; i != 9; ++i) t[i] = t[i] / t[8];
+      t = [
+        t[0],
+        t[3],
+        0,
+        t[6],
+        t[1],
+        t[4],
+        0,
+        t[7],
+        0,
+        0,
+        1,
+        0,
+        t[2],
+        t[5],
+        0,
+        t[8],
+      ];
+      t = 'matrix3d(' + t.join(', ') + ')';
       return t;
     }
 
     function prefixTransform(val) {
       return {
-        "-webkit-transform": val,
-        "-moz-transform": val,
-        "-o-transform": val,
-        "transform": val
+        '-webkit-transform': val,
+        '-moz-transform': val,
+        '-o-transform': val,
+        transform: val,
       };
     }
 
-    return prefixTransform(matrix3d(w, h, xTL, yTL, xTR, yTR, xBL, yBL, xBR, yBR));
-
+    return prefixTransform(
+      matrix3d(w, h, xTL, yTL, xTR, yTR, xBL, yBL, xBR, yBR)
+    );
   };
 
-
-
-  var template = 
-    '<div class="layers" style="position:absolute; top:0; left:110px; bottom:0; right:0px; overflow:auto; z-index:0; background-color:black;">'+
-      '<div class="canvases" style="position:absolute; top:0px; left:0px; z-index:1;" ></div>'+
-      '<div class="control-points" style="position:absolute; top:0px; left:0px; z-index:2;" >'+
-        '<div title="top-left"     class="control-point tl c0" data-handle="0" style="position:absolute" ></div>'+
-        '<div title="top-right"    class="control-point tr c1" data-handle="1" style="position:absolute" ></div>'+
-        '<div title="bottom-left"  class="control-point bl c2" data-handle="2" style="position:absolute" ></div>'+
-        '<div title="bottom-right" class="control-point br c3" data-handle="3" style="position:absolute" ></div>'+
-      '</div>'+
-    '</div>'+
-    '<div style="position:absolute; top:0; left:0; bottom:0; width:110px; overflow: auto;">'+
-      '<ul class="list" style="list-style-type:none; margin:0 0 10px 0; padding:0;"></ul>'+
-      '<button class="deselect button">deselect</button>'+
-      // '<span class="button flatten" title="flatten image layer to one">flatten</span>'+
-      '<div class="info"></div>'+
+  var template =
+    '<div class="layers" style="position:absolute; top:0; left:110px; bottom:0; right:0px; overflow:auto; z-index:0; background-color:black;">' +
+    '<div class="canvases" style="position:absolute; top:0px; left:0px; z-index:1;" ></div>' +
+    '<div class="control-points" style="position:absolute; top:0px; left:0px; z-index:2;" >' +
+    '<div title="top-left"     class="control-point tl c0" data-handle="0" style="position:absolute" ></div>' +
+    '<div title="top-right"    class="control-point tr c1" data-handle="1" style="position:absolute" ></div>' +
+    '<div title="bottom-left"  class="control-point bl c2" data-handle="2" style="position:absolute" ></div>' +
+    '<div title="bottom-right" class="control-point br c3" data-handle="3" style="position:absolute" ></div>' +
+    '</div>' +
+    '</div>' +
+    '<div style="position:absolute; top:0; left:0; bottom:0; width:110px; overflow: auto;">' +
+    '<ul class="list" style="list-style-type:none; margin:0 0 10px 0; padding:0;"></ul>' +
+    '<button class="deselect button">deselect</button>' +
+    // '<span class="button flatten" title="flatten image layer to one">flatten</span>'+
+    '<div class="info"></div>' +
     '</div>';
 
-  var layerTemplate = 
-    '<li class="list-item" title="drag to sort, select to move">'+
-      '<input class="list-item-visible" type="checkbox" title="visible" <%= visible ? "checked" : "" %> ></input>'+
-      '<canvas class="list-item-preview" width="50" height="50"></canvas>'+
-      '<button class="list-item-delete no-label icon-trash" title="delete layer"></button>'+
-      '<span class="list-item-name"><%= name %></span>'+
-      '<%= ( name==="dropped" ? \'<span class="list-item-info" title="will not save" >*</span>\' : "" ) %>'+
-      '<span class="list-item-controls"><br/>'+
-        // 'x: <span class="list-item-x"><%= x %></span>, y: <span class="list-item-y"><%= y %></span>'+
-      '</span>'+
+  var layerTemplate =
+    '<li class="list-item" title="drag to sort, select to move">' +
+    '<input class="list-item-visible" type="checkbox" title="visible" <%= visible ? "checked" : "" %> ></input>' +
+    '<canvas class="list-item-preview" width="50" height="50"></canvas>' +
+    '<button class="list-item-delete no-label icon-trash" title="delete layer"></button>' +
+    '<span class="list-item-name"><%= name %></span>' +
+    '<%= ( name==="dropped" ? \'<span class="list-item-info" title="will not save" >*</span>\' : "" ) %>' +
+    '<span class="list-item-controls"><br/>' +
+    // 'x: <span class="list-item-x"><%= x %></span>, y: <span class="list-item-y"><%= y %></span>'+
+    '</span>' +
     '</li>';
 
-  Iframework.NativeNodes["image-mapper"] = Iframework.NativeNodes["image"].extend({
-
+  Iframework.NativeNodes['image-mapper'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "mapper",
-      description: "make a stack of canvases"
+      title: 'mapper',
+      description: 'make a stack of canvases',
     },
     template: _.template(template),
     layerTemplate: _.template(layerTemplate),
     events: {
-      "sortstop .list":               "sortLayers",
-      "click .list-item":             "selectLayer",
-      "change .list-item-visible":    "setVisible",
-      "mousedown .list-item-preview": "checkDirty",
-      "click .list-item-delete":      "deleteLayer",
-      "click .deselect":              "deselect",
-      "click .control-point":         "selectPoint",
-      "dragstart .control-point":     "startMove",
-      "drag .control-point":          "move",
-      "dragstop .control-point":      "stopMove",
-      "mouseover":                    "mouseOver",
-      "mouseout":                     "mouseOut",
-      "click .mapper-canvas":         "selectCanvas"
+      'sortstop .list': 'sortLayers',
+      'click .list-item': 'selectLayer',
+      'change .list-item-visible': 'setVisible',
+      'mousedown .list-item-preview': 'checkDirty',
+      'click .list-item-delete': 'deleteLayer',
+      'click .deselect': 'deselect',
+      'click .control-point': 'selectPoint',
+      'dragstart .control-point': 'startMove',
+      'drag .control-point': 'move',
+      'dragstop .control-point': 'stopMove',
+      mouseover: 'mouseOver',
+      mouseout: 'mouseOut',
+      'click .mapper-canvas': 'selectCanvas',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       // Don't use default canvas
-      $(this.canvas)
-        .draggable("destroy")
-        .remove();
+      $(this.canvas).draggable('destroy').remove();
 
-      this.$(".list").sortable();
+      this.$('.list').sortable();
 
       // Set up layers from saved state
       this.layerInfo = {};
-      var layers = this.model.get("state")["layers"];
+      var layers = this.model.get('state')['layers'];
       if (layers) {
-        for (var i=0; i<layers.length; i++) {
-          var info = _.pick(layers[i], ['name','visible','sort', 'x0','y0','x1','y1','x2','y2','x3','y3']);
+        for (var i = 0; i < layers.length; i++) {
+          var info = _.pick(layers[i], [
+            'name',
+            'visible',
+            'sort',
+            'x0',
+            'y0',
+            'x1',
+            'y1',
+            'x2',
+            'y2',
+            'x3',
+            'y3',
+          ]);
           info.id = info.name;
           this.layerInfo[info.id] = info;
         }
       }
 
-      this.$(".control-points").hide();
-      this.$(".control-point").draggable();
+      this.$('.control-points').hide();
+      this.$('.control-point').draggable();
 
       // Move layers
       // this.resizer = this.$(".resizer")[0];
@@ -177,7 +229,7 @@ $(function(){
 
       // Nudge layer
       var self = this;
-      document.addEventListener("keydown", function(event){
+      document.addEventListener('keydown', function (event) {
         switch (event.keyCode) {
           case 38: // up
             self.nudgeUp(event);
@@ -195,10 +247,9 @@ $(function(){
             break;
         }
       });
-
     },
     layerInfo: {},
-    inputimage: function(i){
+    inputimage: function (i) {
       // Find or make layer
       var layer;
       var len = this.$('.list-item').length;
@@ -208,26 +259,46 @@ $(function(){
         if (!this.layerInfo[i.id]) {
           // Add new
           this.layerInfo[i.id] = {
-            id: i.id, name: i.id, visible: true, sort: len+10, 
-            w: i.width, h:i.height,
-            x0: 0, y0: 0,        x1: i.width, y1: 0,
-            x2: 0, y2: i.height, x3: i.width, y3: i.height
+            id: i.id,
+            name: i.id,
+            visible: true,
+            sort: len + 10,
+            w: i.width,
+            h: i.height,
+            x0: 0,
+            y0: 0,
+            x1: i.width,
+            y1: 0,
+            x2: 0,
+            y2: i.height,
+            x3: i.width,
+            y3: i.height,
           };
           newLayer = true;
         }
         layer = this.layerInfo[i.id];
       } else {
         // Dropped, does not update
-        var randomId = Math.round(Math.random()*100000);
-        while ( this.layerInfo[randomId] ) {
+        var randomId = Math.round(Math.random() * 100000);
+        while (this.layerInfo[randomId]) {
           // Make sure unique
-          randomId = Math.round(Math.random()*100000);
+          randomId = Math.round(Math.random() * 100000);
         }
         layer = this.layerInfo[randomId] = {
-          id: randomId, name:"dropped", visible: true, sort: len+10, 
-          w: i.width, h: i.height,
-          x0: 0, y0: 0,        x1: i.width, y1: 0, 
-          x2: 0, y2: i.height, x3: i.width, y3: i.height
+          id: randomId,
+          name: 'dropped',
+          visible: true,
+          sort: len + 10,
+          w: i.width,
+          h: i.height,
+          x0: 0,
+          y0: 0,
+          x1: i.width,
+          y1: 0,
+          x2: 0,
+          y2: i.height,
+          x3: i.width,
+          y3: i.height,
         };
         newLayer = true;
       }
@@ -237,25 +308,25 @@ $(function(){
 
       if (!layer.canvas) {
         layer.source = i;
-        layer.canvas = document.createElement("canvas");
+        layer.canvas = document.createElement('canvas');
         layer.w = layer.canvas.width = i.width;
         layer.h = layer.canvas.height = i.height;
-        layer.context = layer.canvas.getContext("2d");
+        layer.context = layer.canvas.getContext('2d');
         $(layer.canvas)
-          .addClass("mapper-canvas")
+          .addClass('mapper-canvas')
           .css({
-            position: "absolute",
+            position: 'absolute',
             left: 0,
             top: 0,
             zIndex: layer.sort,
-            "transform-origin": "0 0",
-            "-webkit-transform-origin": "0 0",
-            "-moz-transform-origin": "0 0",
-            "-o-transform-origin": "0 0"
+            'transform-origin': '0 0',
+            '-webkit-transform-origin': '0 0',
+            '-moz-transform-origin': '0 0',
+            '-o-transform-origin': '0 0',
           })
-          .data("layer", layer);
+          .data('layer', layer);
         layer.reMatrix = true;
-        this.$(".canvases").append(layer.canvas);
+        this.$('.canvases').append(layer.canvas);
         newLayer = true;
       }
 
@@ -264,20 +335,22 @@ $(function(){
       if (listView) {
         layer.listViewDirty = true;
       } else {
-        listView = layer.listView = $( this.layerTemplate(layer) );
-        listView.data({"iframework-image-layers-layer": layer});
-        var preview = layer.listViewCanvas = listView.find("canvas.list-item-preview")[0];
+        listView = layer.listView = $(this.layerTemplate(layer));
+        listView.data({'iframework-image-layers-layer': layer});
+        var preview = (layer.listViewCanvas = listView.find(
+          'canvas.list-item-preview'
+        )[0]);
         Iframework.util.fitAndCopy(i, preview);
-        layer.listViewDirty = false; 
+        layer.listViewDirty = false;
         // Add to list
-        this.$(".list").prepend(listView);
+        this.$('.list').prepend(listView);
         // Resort
-        var sorted = this.$('.list-item').sort(function(a, b){
-          var aa = $(a).data("iframework-image-layers-layer").sort;
-          var bb = $(b).data("iframework-image-layers-layer").sort;
-          return bb-aa;
+        var sorted = this.$('.list-item').sort(function (a, b) {
+          var aa = $(a).data('iframework-image-layers-layer').sort;
+          var bb = $(b).data('iframework-image-layers-layer').sort;
+          return bb - aa;
         });
-        this.$(".list").append(sorted);
+        this.$('.list').append(sorted);
         // Select
         listView.click();
       }
@@ -299,43 +372,49 @@ $(function(){
     //   var img = document.createElement("img");
     //   img.onload = function (e) {
     //     layer = this.layerInfo[randomId] = {
-    //       id: randomId, name: url, visible: true, sort: len+10, 
+    //       id: randomId, name: url, visible: true, sort: len+10,
     //       w: img.width, h: img.height,
-    //       x0: 0, y0: 0,          x1: img.width, y1: 0, 
+    //       x0: 0, y0: 0,          x1: img.width, y1: 0,
     //       x2: 0, y2: img.height, x3: img.width, y3: img.height
     //     };
     //     newLayer = true;
     //   };
     //   img.src = url;
     // },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "image") {
+      if (edge.Target.id === 'image') {
         // Remove canvas
         // Remove list preview
         // Remove layer
       }
     },
-    sortLayers: function(event, ui){
-      var layers = this.$(".list-item");
+    sortLayers: function (event, ui) {
+      var layers = this.$('.list-item');
       var count = layers.length;
-      _.each(layers, function(item){
-        var layer = $(item).data("iframework-image-layers-layer");
-        layer.sort = count;
-        $(layer.canvas).css("z-index", count);
-        count--;
-      }, this);
+      _.each(
+        layers,
+        function (item) {
+          var layer = $(item).data('iframework-image-layers-layer');
+          layer.sort = count;
+          $(layer.canvas).css('z-index', count);
+          count--;
+        },
+        this
+      );
 
       this.saveLayerInfo();
       this.rebuildDrawStack();
     },
     setVisible: function (event) {
-      var layer = $(event.target).parent().data("iframework-image-layers-layer");
+      var layer = $(event.target)
+        .parent()
+        .data('iframework-image-layers-layer');
       layer.visible = event.target.checked;
 
       if (layer.canvas) {
         if (layer.visible) {
-          this.$(".canvases").append(layer.canvas);
+          this.$('.canvases').append(layer.canvas);
         } else {
           $(layer.canvas).detach();
         }
@@ -346,20 +425,31 @@ $(function(){
     },
     saveLayerInfo: _.debounce(function () {
       // Filter only relevant layers
-      var saveable = _.filter(this.layerInfo, function(item){ 
-        return item.name && item.name !== "dropped"; 
+      var saveable = _.filter(this.layerInfo, function (item) {
+        return item.name && item.name !== 'dropped';
       });
       // Filter relevant info
-      saveable = _.map(saveable, function(value, key, list){ 
-        return _.pick(value, ['name','visible','sort', 'x0','y0','x1','y1','x2','y2','x3','y3']);
+      saveable = _.map(saveable, function (value, key, list) {
+        return _.pick(value, [
+          'name',
+          'visible',
+          'sort',
+          'x0',
+          'y0',
+          'x1',
+          'y1',
+          'x2',
+          'y2',
+          'x3',
+          'y3',
+        ]);
       });
       // Sort
-      saveable = saveable.sort(function(a, b){
-        return a.sort-b.sort;
+      saveable = saveable.sort(function (a, b) {
+        return a.sort - b.sort;
       });
       // Save to graph
-      this.set("layers", saveable);
-
+      this.set('layers', saveable);
     }, 100),
     stack: [],
     rebuildDrawStack: function () {
@@ -371,8 +461,8 @@ $(function(){
           stack.push(layer);
         }
       }
-      stack = stack.sort(function(a, b){
-        return (a.sort - b.sort);
+      stack = stack.sort(function (a, b) {
+        return a.sort - b.sort;
       });
       this.stack = stack;
 
@@ -380,39 +470,48 @@ $(function(){
     },
     checkDirty: function (event) {
       // Only update previews when clicked
-      var layer = $(event.target).parent().data("iframework-image-layers-layer");
+      var layer = $(event.target)
+        .parent()
+        .data('iframework-image-layers-layer');
       if (layer && layer.listViewDirty) {
-        layer.listViewCanvas.getContext("2d").clearRect(0, 0, layer.listViewCanvas.width, layer.listViewCanvas.height);
+        layer.listViewCanvas
+          .getContext('2d')
+          .clearRect(
+            0,
+            0,
+            layer.listViewCanvas.width,
+            layer.listViewCanvas.height
+          );
         Iframework.util.fitAndCopy(layer.canvas, layer.listViewCanvas);
       }
     },
     deselect: function () {
       this.selected = null;
-      this.$(".list-item").removeClass("selected");
+      this.$('.list-item').removeClass('selected');
       this.selectedPoint = null;
-      this.$(".control-point").removeClass("selected");
-      this.$(".control-points").hide();
+      this.$('.control-point').removeClass('selected');
+      this.$('.control-points').hide();
     },
     selected: null,
     selectLayer: function (event) {
       // Deselect others
-      this.$(".list-item").removeClass("selected");
+      this.$('.list-item').removeClass('selected');
       this.selectedPoint = null;
-      this.$(".control-point").removeClass("selected");
+      this.$('.control-point').removeClass('selected');
       // Select this
-      $(event.currentTarget).addClass("selected");
+      $(event.currentTarget).addClass('selected');
       // Only update previews when clicked
-      var layer = $(event.currentTarget).data("iframework-image-layers-layer");
+      var layer = $(event.currentTarget).data('iframework-image-layers-layer');
       if (layer) {
         // Select this
         this.selected = layer;
         // Show control corners
-        this.$(".control-points").show();
+        this.$('.control-points').show();
         this.updateControlPoints();
       }
     },
     selectCanvas: function (event) {
-      var layer = $(event.target).data("layer");
+      var layer = $(event.target).data('layer');
       if (layer) {
         layer.listView.click();
       }
@@ -420,10 +519,22 @@ $(function(){
     updateControlPoints: function () {
       if (this.selected) {
         var layer = this.selected;
-        this.$(".control-point.tl").css({ left: layer.x0+"px", top: layer.y0+"px" });
-        this.$(".control-point.tr").css({ left: layer.x1+"px", top: layer.y1+"px" });
-        this.$(".control-point.bl").css({ left: layer.x2+"px", top: layer.y2+"px" });
-        this.$(".control-point.br").css({ left: layer.x3+"px", top: layer.y3+"px" });
+        this.$('.control-point.tl').css({
+          left: layer.x0 + 'px',
+          top: layer.y0 + 'px',
+        });
+        this.$('.control-point.tr').css({
+          left: layer.x1 + 'px',
+          top: layer.y1 + 'px',
+        });
+        this.$('.control-point.bl').css({
+          left: layer.x2 + 'px',
+          top: layer.y2 + 'px',
+        });
+        this.$('.control-point.br').css({
+          left: layer.x3 + 'px',
+          top: layer.y3 + 'px',
+        });
       }
     },
     deleteLayer: function (event) {
@@ -445,10 +556,10 @@ $(function(){
     },
     movePoint: function (layer, point, x, y) {
       // Move one control point
-      layer["x"+point] = x;
-      layer["y"+point] = y;
+      layer['x' + point] = x;
+      layer['y' + point] = y;
 
-      this.$(".control-point.c"+point).css({ left: x+"px", top: y+"px" });
+      this.$('.control-point.c' + point).css({left: x + 'px', top: y + 'px'});
 
       layer.reMatrix = true;
 
@@ -458,10 +569,10 @@ $(function(){
     selectedPoint: null,
     selectPoint: function (event) {
       if (this.selected) {
-        this.$(".control-point").removeClass("selected");
+        this.$('.control-point').removeClass('selected');
         var dragger = $(event.target);
-        dragger.addClass("selected");
-        this.selectedPoint = dragger.data("handle");
+        dragger.addClass('selected');
+        this.selectedPoint = dragger.data('handle');
       }
     },
     moveLayer: function (layer, x, y) {
@@ -484,19 +595,18 @@ $(function(){
     },
     // movingPointStartX: 0,
     // movingPointStartY: 0,
-    startMove: function(event, ui){
+    startMove: function (event, ui) {
       this.selectPoint(event);
     },
-    move: function(event, ui){
+    move: function (event, ui) {
       if (this.selected) {
-        var p = $(event.target).data("handle");
+        var p = $(event.target).data('handle');
         var x = ui.position.left;
         var y = ui.position.top;
         this.movePoint(this.selected, p, x, y);
       }
     },
-    stopMove: function(event, ui){
-    },
+    stopMove: function (event, ui) {},
     _enableNudge: false,
     mouseOver: function () {
       this._enableNudge = true;
@@ -508,11 +618,11 @@ $(function(){
       if (this._enableNudge && this.selected) {
         event.preventDefault(); // Don't scroll
         if (this.selectedPoint !== null) {
-          var x = this.selected["x"+this.selectedPoint];
-          var y = this.selected["y"+this.selectedPoint];
-          this.movePoint(this.selected, this.selectedPoint, x, y-1);
+          var x = this.selected['x' + this.selectedPoint];
+          var y = this.selected['y' + this.selectedPoint];
+          this.movePoint(this.selected, this.selectedPoint, x, y - 1);
         } else {
-          this.moveLayer(this.selected, 0, 0-1);
+          this.moveLayer(this.selected, 0, 0 - 1);
         }
       }
     },
@@ -520,11 +630,11 @@ $(function(){
       if (this._enableNudge && this.selected) {
         event.preventDefault(); // Don't scroll
         if (this.selectedPoint !== null) {
-          var x = this.selected["x"+this.selectedPoint];
-          var y = this.selected["y"+this.selectedPoint];
-          this.movePoint(this.selected, this.selectedPoint, x, y+1);
+          var x = this.selected['x' + this.selectedPoint];
+          var y = this.selected['y' + this.selectedPoint];
+          this.movePoint(this.selected, this.selectedPoint, x, y + 1);
         } else {
-          this.moveLayer(this.selected, 0, 0+1);
+          this.moveLayer(this.selected, 0, 0 + 1);
         }
       }
     },
@@ -532,11 +642,11 @@ $(function(){
       if (this._enableNudge && this.selected) {
         event.preventDefault(); // Don't scroll
         if (this.selectedPoint !== null) {
-          var x = this.selected["x"+this.selectedPoint];
-          var y = this.selected["y"+this.selectedPoint];
-          this.movePoint(this.selected, this.selectedPoint, x-1, y);
+          var x = this.selected['x' + this.selectedPoint];
+          var y = this.selected['y' + this.selectedPoint];
+          this.movePoint(this.selected, this.selectedPoint, x - 1, y);
         } else {
-          this.moveLayer(this.selected, 0-1, 0);
+          this.moveLayer(this.selected, 0 - 1, 0);
         }
       }
     },
@@ -544,24 +654,35 @@ $(function(){
       if (this._enableNudge && this.selected) {
         event.preventDefault(); // Don't scroll
         if (this.selectedPoint !== null) {
-          var x = this.selected["x"+this.selectedPoint];
-          var y = this.selected["y"+this.selectedPoint];
-          this.movePoint(this.selected, this.selectedPoint, x+1, y);
+          var x = this.selected['x' + this.selectedPoint];
+          var y = this.selected['y' + this.selectedPoint];
+          this.movePoint(this.selected, this.selectedPoint, x + 1, y);
         } else {
-          this.moveLayer(this.selected, 0+1, 0);
+          this.moveLayer(this.selected, 0 + 1, 0);
         }
       }
     },
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
 
       // Draw stack
       var stackLength = this.stack.length;
       if (stackLength > 0) {
-        for (var i=0; i<stackLength; i++) {
+        for (var i = 0; i < stackLength; i++) {
           var layer = this.stack[i];
           if (layer.reMatrix) {
-            var matrix3d = quadWarpMatrix( layer.w, layer.h, layer.x0, layer.y0, layer.x1, layer.y1, layer.x2, layer.y2, layer.x3, layer.y3);
+            var matrix3d = quadWarpMatrix(
+              layer.w,
+              layer.h,
+              layer.x0,
+              layer.y0,
+              layer.x1,
+              layer.y1,
+              layer.x2,
+              layer.y2,
+              layer.x3,
+              layer.y3
+            );
             // console.log( layer.w, layer.h, layer.x0, layer.y0, layer.x1, layer.y1, layer.x2, layer.y2, layer.x3, layer.y3 );
             // console.log( matrix3d.transform );
             $(layer.canvas).css(matrix3d);
@@ -570,24 +691,28 @@ $(function(){
           }
           if (layer.dirty) {
             // Resize if needed
-            if (layer.canvas.width !== layer.source.width){
+            if (layer.canvas.width !== layer.source.width) {
               layer.w = layer.canvas.width = layer.source.width;
               layer.reMatrix = true;
             }
-            if (layer.canvas.height !== layer.source.height){
+            if (layer.canvas.height !== layer.source.height) {
               layer.h = layer.canvas.height = layer.source.height;
               layer.reMatrix = true;
             }
             // Redraw canvas
-            layer.context.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
+            layer.context.clearRect(
+              0,
+              0,
+              layer.canvas.width,
+              layer.canvas.height
+            );
             layer.context.drawImage(layer.source, 0, 0);
             layer.dirty = false;
           }
         }
       }
-
     },
-    popout: function() {
+    popout: function () {
       if (this.w) {
         // Toggle
         this.popin();
@@ -595,9 +720,13 @@ $(function(){
       }
 
       // Open new window to about:blank
-      this.w = window.open("", "meemooRemoteWindow", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");
+      this.w = window.open(
+        '',
+        'meemooRemoteWindow',
+        'menubar=no,location=no,resizable=yes,scrollbars=no,status=no'
+      );
       var self = this;
-      this.w.addEventListener("unload", function(){
+      this.w.addEventListener('unload', function () {
         self.popin();
       });
 
@@ -606,41 +735,39 @@ $(function(){
         Iframework.popoutModule.popin();
       }
       Iframework.popoutModule = this;
-      this.w.document.body.innerHTML = "";
+      this.w.document.body.innerHTML = '';
 
       // Window styling
-      this.w.document.body.style.backgroundColor="black";
-      this.w.document.body.style.overflow = "hidden";
-      this.w.document.body.style.margin="0px";
-      this.w.document.body.style.padding="0px";
-      this.w.document.title = "meemoo.org";
+      this.w.document.body.style.backgroundColor = 'black';
+      this.w.document.body.style.overflow = 'hidden';
+      this.w.document.body.style.margin = '0px';
+      this.w.document.body.style.padding = '0px';
+      this.w.document.title = 'meemoo.org';
 
       // Move element
-      this.mainElement = this.$(".canvases")[0];
-      this.w.document.body.appendChild( this.mainElement );
+      this.mainElement = this.$('.canvases')[0];
+      this.w.document.body.appendChild(this.mainElement);
 
       return false;
     },
-    popin: function() {
+    popin: function () {
       if (this.w) {
         this.w = null;
       }
       // Replace element
-      this.$(".layers").prepend(this.mainElement);
+      this.$('.layers').prepend(this.mainElement);
       return false;
     },
     inputs: {
       image: {
-        type: "image",
-        description: "all of the images that go into the layers"
-      }
+        type: 'image',
+        description: 'all of the images that go into the layers',
+      },
       // url: {
       //   type: "string",
       //   description: "(experimental) hotlink image url"
       // }
     },
-    outputs:{}
+    outputs: {},
   });
-
-
 });
diff --git a/src/nodes/image-monochrome-worker.js b/src/nodes/image-monochrome-worker.js
index 92cfd2b..592e4fe 100644
--- a/src/nodes/image-monochrome-worker.js
+++ b/src/nodes/image-monochrome-worker.js
@@ -12,75 +12,91 @@
 // ];
 
 var bayerThresholdMap = [
-  [  15, 135,  45, 165 ],
-  [ 195,  75, 225, 105 ],
-  [  60, 180,  30, 150 ],
-  [ 240, 120, 210,  90 ]
+  [15, 135, 45, 165],
+  [195, 75, 225, 105],
+  [60, 180, 30, 150],
+  [240, 120, 210, 90],
 ];
 
 var lumR = [];
 var lumG = [];
 var lumB = [];
-for (var i=0; i<256; i++) {
-  lumR[i] = i*0.299;
-  lumG[i] = i*0.587;
-  lumB[i] = i*0.114;
+for (var i = 0; i < 256; i++) {
+  lumR[i] = i * 0.299;
+  lumG[i] = i * 0.587;
+  lumB[i] = i * 0.114;
 }
 
-function monochrome(imageData, threshold, type){
-
+function monochrome(imageData, threshold, type) {
   var imageDataLength = imageData.data.length;
 
   // Greyscale luminance (sets r pixels to luminance of rgb)
   for (var i = 0; i <= imageDataLength; i += 4) {
-    imageData.data[i] = Math.floor(lumR[imageData.data[i]] + lumG[imageData.data[i+1]] + lumB[imageData.data[i+2]]);
+    imageData.data[i] = Math.floor(
+      lumR[imageData.data[i]] +
+        lumG[imageData.data[i + 1]] +
+        lumB[imageData.data[i + 2]]
+    );
   }
 
   var w = imageData.width;
   var newPixel, err;
 
-  for (var currentPixel = 0; currentPixel <= imageDataLength; currentPixel+=4) {
-
-    if (type === "none") {
+  for (
+    var currentPixel = 0;
+    currentPixel <= imageDataLength;
+    currentPixel += 4
+  ) {
+    if (type === 'none') {
       // No dithering
-      imageData.data[currentPixel] = imageData.data[currentPixel] < threshold ? 0 : 255;
-    } else if (type === "bayer") {
+      imageData.data[currentPixel] =
+        imageData.data[currentPixel] < threshold ? 0 : 255;
+    } else if (type === 'bayer') {
       // 4x4 Bayer ordered dithering algorithm
-      var x = currentPixel/4 % w;
-      var y = Math.floor(currentPixel/4 / w);
-      var map = Math.floor( (imageData.data[currentPixel] + bayerThresholdMap[x%4][y%4]) / 2 );
-      imageData.data[currentPixel] = (map < threshold) ? 0 : 255;
-    } else if (type === "floydsteinberg") {
+      var x = (currentPixel / 4) % w;
+      var y = Math.floor(currentPixel / 4 / w);
+      var map = Math.floor(
+        (imageData.data[currentPixel] + bayerThresholdMap[x % 4][y % 4]) / 2
+      );
+      imageData.data[currentPixel] = map < threshold ? 0 : 255;
+    } else if (type === 'floydsteinberg') {
       // Floyd–Steinberg dithering algorithm
       newPixel = imageData.data[currentPixel] < 129 ? 0 : 255;
       err = Math.floor((imageData.data[currentPixel] - newPixel) / 16);
       imageData.data[currentPixel] = newPixel;
 
-      imageData.data[currentPixel       + 4 ] += err*7;
-      imageData.data[currentPixel + 4*w - 4 ] += err*3;
-      imageData.data[currentPixel + 4*w     ] += err*5;
-      imageData.data[currentPixel + 4*w + 4 ] += err*1;
+      imageData.data[currentPixel + 4] += err * 7;
+      imageData.data[currentPixel + 4 * w - 4] += err * 3;
+      imageData.data[currentPixel + 4 * w] += err * 5;
+      imageData.data[currentPixel + 4 * w + 4] += err * 1;
     } else {
       // Bill Atkinson's dithering algorithm
       newPixel = imageData.data[currentPixel] < 129 ? 0 : 255;
       err = Math.floor((imageData.data[currentPixel] - newPixel) / 8);
       imageData.data[currentPixel] = newPixel;
 
-      imageData.data[currentPixel       + 4 ] += err;
-      imageData.data[currentPixel       + 8 ] += err;
-      imageData.data[currentPixel + 4*w - 4 ] += err;
-      imageData.data[currentPixel + 4*w     ] += err;
-      imageData.data[currentPixel + 4*w + 4 ] += err;
-      imageData.data[currentPixel + 8*w     ] += err;
+      imageData.data[currentPixel + 4] += err;
+      imageData.data[currentPixel + 8] += err;
+      imageData.data[currentPixel + 4 * w - 4] += err;
+      imageData.data[currentPixel + 4 * w] += err;
+      imageData.data[currentPixel + 4 * w + 4] += err;
+      imageData.data[currentPixel + 8 * w] += err;
     }
 
     // Set g and b pixels equal to r
-    imageData.data[currentPixel + 1] = imageData.data[currentPixel + 2] = imageData.data[currentPixel];
+    imageData.data[currentPixel + 1] = imageData.data[currentPixel + 2] =
+      imageData.data[currentPixel];
   }
 
   return imageData;
 }
 
-self.addEventListener('message', function (e) {
-  self.postMessage( monochrome(e.data.imageData, e.data.threshold, e.data.type) );
-}, false);
+self.addEventListener(
+  'message',
+  function (e) {
+    self.postMessage(
+      monochrome(e.data.imageData, e.data.threshold, e.data.type)
+    );
+  },
+  false
+);
diff --git a/src/nodes/image-monochrome.js b/src/nodes/image-monochrome.js
index d125291..4a824e2 100644
--- a/src/nodes/image-monochrome.js
+++ b/src/nodes/image-monochrome.js
@@ -1,41 +1,46 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-monochrome"] = Iframework.NativeNodes["image"].extend({
-
+$(function () {
+  Iframework.NativeNodes['image-monochrome'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "monochrome",
-      author: "ticky+flickr+forresto",
-      description: "monochrome by atkinson, bayer, floydsteinberg, or no dither"
+      title: 'monochrome',
+      author: 'ticky+flickr+forresto',
+      description:
+        'monochrome by atkinson, bayer, floydsteinberg, or no dither',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       var self = this;
       this._worker = new Worker('src/nodes/image-monochrome-worker.js');
-      this._worker.addEventListener('message', function (e) {
-        self.context.putImageData(e.data, 0, 0);
-        self._workerBusy = false;
-      }, false);
+      this._worker.addEventListener(
+        'message',
+        function (e) {
+          self.context.putImageData(e.data, 0, 0);
+          self._workerBusy = false;
+        },
+        false
+      );
       // Don't do max-width:100%, messes up look of dither
       $(this.canvas).attr({
-        "style": ""
+        style: '',
       });
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "image") {
+      if (edge.Target.id === 'image') {
         this._image = null;
         this._triggerRedraw = true;
       }
     },
-    inputthreshold: function(f){
-      this._threshold = Math.floor(f*255);
+    inputthreshold: function (f) {
+      this._threshold = Math.floor(f * 255);
       this._triggerRedraw = true;
     },
     inputsend: function () {
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
       if (this._image && this._worker && !this._workerBusy) {
         if (this.canvas.height !== this._image.height) {
@@ -44,13 +49,15 @@ $(function(){
         if (this.canvas.width !== this._image.width) {
           this.canvas.width = this._image.width;
         }
-        var imageData = this._image.getContext('2d').getImageData(0,0, this._image.width, this._image.height);        
+        var imageData = this._image
+          .getContext('2d')
+          .getImageData(0, 0, this._image.width, this._image.height);
         // var data = monochrome(imageData, this._threshold, this._type);
         // this.context.putImageData(data, 0, 0);
         this._worker.postMessage({
           imageData: imageData,
           threshold: this._threshold,
-          type: this._type
+          type: this._type,
         });
         // Don't process a new frame until this one is done
         this._workerBusy = true;
@@ -59,34 +66,32 @@ $(function(){
     },
     inputs: {
       image: {
-        type: "image",
-        description: "image to dither"
+        type: 'image',
+        description: 'image to dither',
       },
       type: {
-        type: "string",
-        description: '"atkinson" is like Mac, "bayer" is like Gameboy, "floydsteinberg" is normal dithering, "none" is black and white with no dithering',
-        options: "atkinson bayer floydsteinberg none".split(" "),
-        "default": "atkinson"
+        type: 'string',
+        description:
+          '"atkinson" is like Mac, "bayer" is like Gameboy, "floydsteinberg" is normal dithering, "none" is black and white with no dithering',
+        options: 'atkinson bayer floydsteinberg none'.split(' '),
+        default: 'atkinson',
       },
       threshold: {
-        type: "float",
-        description: "percentage grey to go black",
+        type: 'float',
+        description: 'percentage grey to go black',
         min: 0,
         max: 1,
-        "default": 0.5
+        default: 0.5,
       },
       send: {
-        type: "bang",
-        description: "send the combined canvas"
-      }
+        type: 'bang',
+        description: 'send the combined canvas',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-paint.js b/src/nodes/image-paint.js
index 0cc4966..f0535d9 100644
--- a/src/nodes/image-paint.js
+++ b/src/nodes/image-paint.js
@@ -1,45 +1,61 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
+$(function () {
   var makeTools = function () {
-
     var tools = {
       painting: false,
       lastX: 0,
       lastY: 0,
-      startX: 0, 
+      startX: 0,
       startY: 0,
       minThickness: 1,
       maxThickness: 5,
-      ctx: null, 
-      mouseX: null, 
+      ctx: null,
+      mouseX: null,
       mouseY: null,
       canvasPosition: {},
-      stamp: null, 
-      stampW: null, 
+      stamp: null,
+      stampW: null,
       stampH: null,
-      move: function(e){
+      move: function (e) {
         tools.mouseX = e.pageX - tools.canvasPosition.left;
         tools.mouseY = e.pageY - tools.canvasPosition.top;
       },
-      drawStamp: function(e) {
-        if (!tools.painting || !tools.stamp) { return; }
-        if (e) { tools.move(e); }
+      drawStamp: function (e) {
+        if (!tools.painting || !tools.stamp) {
+          return;
+        }
+        if (e) {
+          tools.move(e);
+        }
 
-        tools.ctx.drawImage(tools.stamp, tools.mouseX-tools.stampW, tools.mouseY-tools.stampH);
+        tools.ctx.drawImage(
+          tools.stamp,
+          tools.mouseX - tools.stampW,
+          tools.mouseY - tools.stampH
+        );
         tools.lastX = tools.mouseX;
         tools.lastY = tools.mouseY;
       },
-      drawSmoothPencil: function(e) {
-        if (!tools.painting) { return; }
-        if (e) { tools.move(e); }
+      drawSmoothPencil: function (e) {
+        if (!tools.painting) {
+          return;
+        }
+        if (e) {
+          tools.move(e);
+        }
 
-        if (tools.lastX===tools.mouseX && tools.lastY===tools.mouseY) {
+        if (tools.lastX === tools.mouseX && tools.lastY === tools.mouseY) {
           // Draw circle
           tools.ctx.beginPath();
           tools.ctx.moveTo(tools.lastX, tools.lastY);
-          tools.ctx.arc(tools.mouseX, tools.mouseY, tools.maxThickness/2, 0, Math.PI*2);
+          tools.ctx.arc(
+            tools.mouseX,
+            tools.mouseY,
+            tools.maxThickness / 2,
+            0,
+            Math.PI * 2
+          );
           var oldW = tools.ctx.lineWidth;
           var oldC = tools.ctx.fillStyle;
           tools.ctx.lineWidth = 1;
@@ -56,26 +72,32 @@ $(function(){
         }
         tools.lastX = tools.mouseX;
         tools.lastY = tools.mouseY;
-
       },
-      drawRect: function(e){
-        if (!tools.painting) { return; }
-        if (e) { tools.move(e); }
-
+      drawRect: function (e) {
+        if (!tools.painting) {
+          return;
+        }
+        if (e) {
+          tools.move(e);
+        }
       },
-      drawPixelBrush: function(e) {
+      drawPixelBrush: function (e) {
         // Thanks Loktar! http://stackoverflow.com/a/10130705/592125
-        if (!tools.painting) { return; }
-        if (e) { tools.move(e); }
+        if (!tools.painting) {
+          return;
+        }
+        if (e) {
+          tools.move(e);
+        }
 
-        // find all points between        
+        // find all points between
         var x1 = tools.mouseX;
         var x2 = tools.lastX;
         var y1 = tools.mouseY;
         var y2 = tools.lastY;
         var x, y;
-        var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
-        if (steep){
+        var steep = Math.abs(y2 - y1) > Math.abs(x2 - x1);
+        if (steep) {
           x = x1;
           x1 = y1;
           y1 = x;
@@ -102,15 +124,17 @@ $(function(){
         if (y1 < y2) {
           yStep = 1;
         }
-        lineThickness = tools.maxThickness - Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1))/10;
-        if(lineThickness < tools.minThickness){
+        lineThickness =
+          tools.maxThickness -
+          Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)) / 10;
+        if (lineThickness < tools.minThickness) {
           lineThickness = tools.minThickness;
         }
         for (x = x1; x < x2; x++) {
           if (steep) {
-            tools.ctx.fillRect(y, x, lineThickness , lineThickness );
+            tools.ctx.fillRect(y, x, lineThickness, lineThickness);
           } else {
-            tools.ctx.fillRect(x, y, lineThickness , lineThickness );
+            tools.ctx.fillRect(x, y, lineThickness, lineThickness);
           }
           error += de;
           if (error >= 0.5) {
@@ -120,92 +144,103 @@ $(function(){
         }
         tools.lastX = tools.mouseX;
         tools.lastY = tools.mouseY;
-      }
+      },
     };
 
     return tools;
   };
 
-
-  Iframework.NativeNodes["image-paint"] = Iframework.NativeNodes["image"].extend({
-
+  Iframework.NativeNodes['image-paint'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "paint",
-      description: "paint on, trace, or cut out an image"
+      title: 'paint',
+      description: 'paint on, trace, or cut out an image',
     },
     events: {
       // "mousedown .draw": "startLine",
       // "mouseup .draw": "endLine"
     },
-    initializeModule: function(){
+    initializeModule: function () {
       this.tools = makeTools();
 
-      $(this.canvas).css("max-width", "none");
+      $(this.canvas).css('max-width', 'none');
 
-      this.combine = document.createElement("canvas");
+      this.combine = document.createElement('canvas');
       this.combine.width = this.canvas.width;
       this.combine.height = this.canvas.height;
-      this.combineContext = this.combine.getContext("2d");
+      this.combineContext = this.combine.getContext('2d');
 
-      this.trace = document.createElement("canvas");
+      this.trace = document.createElement('canvas');
       this.trace.width = this.canvas.width;
       this.trace.height = this.canvas.height;
-      this.traceContext = this.trace.getContext("2d");
+      this.traceContext = this.trace.getContext('2d');
       $(this.canvas).before(this.trace);
 
-      this.draw = document.createElement("canvas");
+      this.draw = document.createElement('canvas');
       this.draw.width = this.canvas.width;
       this.draw.height = this.canvas.height;
-      this.drawContext = this.tools.ctx = this.draw.getContext("2d");
-      this.drawContext.lineCap = "round";
+      this.drawContext = this.tools.ctx = this.draw.getContext('2d');
+      this.drawContext.lineCap = 'round';
       $(this.canvas).after(this.draw);
       $(this.draw).css({
-        border: "1px solid #eee",
-        borderWidth: "0 1px 1px 0"
+        border: '1px solid #eee',
+        borderWidth: '0 1px 1px 0',
       });
 
-      this.$("canvas").css({position:"absolute", top:0, left:0});
+      this.$('canvas').css({position: 'absolute', top: 0, left: 0});
 
       var self = this;
 
-      this.draw.onmouseover = function(e){
-        if (self._mode === "trace" || self._mode === "cutout") {
-          self.canvas.style.backgroundColor = "rgba(255,255,255,0.5)";
+      this.draw.onmouseover = function (e) {
+        if (self._mode === 'trace' || self._mode === 'cutout') {
+          self.canvas.style.backgroundColor = 'rgba(255,255,255,0.5)';
         }
       };
-      this.draw.onmouseout = function(e){
-        if (self._mode === "trace" || self._mode === "cutout") {
-          self.canvas.style.backgroundColor = "rgba(255,255,255,1)";
+      this.draw.onmouseout = function (e) {
+        if (self._mode === 'trace' || self._mode === 'cutout') {
+          self.canvas.style.backgroundColor = 'rgba(255,255,255,1)';
         }
       };
 
-      this.draw.onmousedown = function(e){
+      this.draw.onmousedown = function (e) {
         self.tools.painting = true;
-        self.tools.startX = self.tools.lastX = e.pageX - self.tools.canvasPosition.left;
-        self.tools.startY = self.tools.lastY = e.pageY - self.tools.canvasPosition.top;
+        self.tools.startX = self.tools.lastX =
+          e.pageX - self.tools.canvasPosition.left;
+        self.tools.startY = self.tools.lastY =
+          e.pageY - self.tools.canvasPosition.top;
         self.draw.onmousemove(e);
         // $(this.draw).trigger("mousemove", e);
       };
-      $(window).mouseup(function(e){
+      $(window).mouseup(function (e) {
         self.endLine(e);
       });
 
-      _.defer( function(){self.bindOffset();} );
-
+      _.defer(function () {
+        self.bindOffset();
+      });
     },
     bindOffset: function () {
       // Offset is a pain in the ass
       this.tools.canvasPosition = {};
-      var scrollParent = this.model.view.$(".inner")[0];
+      var scrollParent = this.model.view.$('.inner')[0];
       var scrollGraph = this.model.parentGraph.view.el;
       var self = this;
-      var setOffset = function(){
-        self.tools.canvasPosition.left = self.model.get("x") - scrollParent.scrollLeft - scrollGraph.scrollLeft + 3;
-        self.tools.canvasPosition.top = self.model.get("y") - scrollParent.scrollTop - scrollGraph.scrollTop + 3;
+      var setOffset = function () {
+        self.tools.canvasPosition.left =
+          self.model.get('x') -
+          scrollParent.scrollLeft -
+          scrollGraph.scrollLeft +
+          3;
+        self.tools.canvasPosition.top =
+          self.model.get('y') -
+          scrollParent.scrollTop -
+          scrollGraph.scrollTop +
+          3;
       };
       $(scrollParent).scroll(setOffset);
       $(scrollGraph).scroll(setOffset);
-      this.model.on("change:x, change:y", setOffset);
+      this.model.on('change:x, change:y', setOffset);
       setOffset();
     },
     // startLine: function(e) {
@@ -214,7 +249,7 @@ $(function(){
     //   this.tools.startY = this.tools.lastY = e.pageY - this.tools.canvasPosition.top;
     //   $(this.draw).trigger("mousemove", e);
     // },
-    endLine: function(e){
+    endLine: function (e) {
       if (this.tools.painting) {
         this.tools.painting = false;
         // Copy to main canvas on every stroke
@@ -233,32 +268,33 @@ $(function(){
     },
     inputstamp: function (image) {
       this.tools.stamp = image;
-      this.tools.stampW = Math.floor(image.width/2);
-      this.tools.stampH = Math.floor(image.height/2);
-      if (this._tool === "stamp" && this.tools.painting) {
+      this.tools.stampW = Math.floor(image.width / 2);
+      this.tools.stampH = Math.floor(image.height / 2);
+      if (this._tool === 'stamp' && this.tools.painting) {
         this.draw.onmousemove();
       }
     },
     inputtool: function (tool) {
       this._tool = tool;
       switch (tool) {
-        case "stamp" :
+        case 'stamp':
           this.draw.onmousemove = this.tools.drawStamp;
           break;
-        case "smoothPencil" :
+        case 'smoothPencil':
           this.tools.minThickness = this._strokewidth;
           this.tools.maxThickness = this._strokewidth;
           this.draw.onmousemove = this.tools.drawSmoothPencil;
           break;
-        case "pixelBrush" :
+        case 'pixelBrush':
           this.tools.minThickness = 1;
-          this.tools.maxThickness = this._strokewidth > 1 ? this._strokewidth : 2;
+          this.tools.maxThickness =
+            this._strokewidth > 1 ? this._strokewidth : 2;
           this.drawContext.fillStyle = this._stroke;
 
           this.draw.onmousemove = this.tools.drawPixelBrush;
           break;
         default: // pixelPencil
-          this._tool = "pixelPencil";
+          this._tool = 'pixelPencil';
 
           this.tools.minThickness = this._strokewidth;
           this.tools.maxThickness = this._strokewidth;
@@ -271,17 +307,17 @@ $(function(){
     inputmode: function (mode) {
       this._mode = mode;
       switch (mode) {
-        case "trace" :
-          this.canvas.style.backgroundColor = "rgba(255,255,255,1)";
+        case 'trace':
+          this.canvas.style.backgroundColor = 'rgba(255,255,255,1)';
           break;
-        case "cutout" :
-          this.canvas.style.backgroundColor = "rgba(255,255,255,1)";
+        case 'cutout':
+          this.canvas.style.backgroundColor = 'rgba(255,255,255,1)';
           break;
         default: // on
-          this._mode = "on";
-          this.canvas.style.backgroundColor = "transparent";
+          this._mode = 'on';
+          this.canvas.style.backgroundColor = 'transparent';
           break;
-      }    
+      }
     },
     inputfill: function (color) {
       this._triggerRedraw = true;
@@ -300,35 +336,35 @@ $(function(){
       this.drawContext.lineWidth = this._strokewidth;
       this.inputtool(this._tool);
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "matte") {
+      if (edge.Target.id === 'matte') {
         this._matte = null;
         this._triggerRedraw = true;
       }
     },
     canvasSettings: function () {
-      if (this._fill === "") {
-        this.drawContext.fillStyle = "none";
+      if (this._fill === '') {
+        this.drawContext.fillStyle = 'none';
       } else {
         this.drawContext.fillStyle = this._fill;
       }
-      if (this._stroke === "") {
-        this.drawContext.strokeStyle = "none";
+      if (this._stroke === '') {
+        this.drawContext.strokeStyle = 'none';
       } else {
         this.drawContext.strokeStyle = this._stroke;
       }
       this.drawContext.lineWidth = this._strokewidth;
-      this.drawContext.lineCap = "round";
+      this.drawContext.lineCap = 'round';
     },
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
       if (this.canvas.width !== this._width) {
         this.canvas.width = this._width;
         this.trace.width = this._width;
         this.draw.width = this._width;
         this.combine.width = this._width;
-        this.tools.width =  this._width;
+        this.tools.width = this._width;
         this.canvasSettings();
       }
       if (this.canvas.height !== this._height) {
@@ -336,7 +372,7 @@ $(function(){
         this.trace.height = this._height;
         this.draw.height = this._height;
         this.combine.height = this._height;
-        this.tools.height =  this._height;
+        this.tools.height = this._height;
         this.canvasSettings();
       }
       // this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -346,92 +382,90 @@ $(function(){
       this.context.clearRect(0, 0, this._width, this._height);
     },
     inputsend: function () {
-      if (this._mode === "on") {
+      if (this._mode === 'on') {
         this.combineContext.clearRect(0, 0, this._width, this._height);
-        this.combineContext.globalCompositeOperation = "source-over";
+        this.combineContext.globalCompositeOperation = 'source-over';
         this.combineContext.drawImage(this.trace, 0, 0);
         this.combineContext.drawImage(this.canvas, 0, 0);
-        this.send("image", this.combine);
-      } else if (this._mode === "cutout") {
+        this.send('image', this.combine);
+      } else if (this._mode === 'cutout') {
         this.combineContext.clearRect(0, 0, this._width, this._height);
-        this.combineContext.globalCompositeOperation = "source-over";
+        this.combineContext.globalCompositeOperation = 'source-over';
         this.combineContext.drawImage(this.trace, 0, 0);
-        this.combineContext.globalCompositeOperation = "destination-in";
+        this.combineContext.globalCompositeOperation = 'destination-in';
         this.combineContext.drawImage(this.canvas, 0, 0);
-        this.combineContext.globalCompositeOperation = "source-over";
-        this.send("image", this.combine);
+        this.combineContext.globalCompositeOperation = 'source-over';
+        this.send('image', this.combine);
       } else {
         // trace
-        this.send("image", this.canvas);
+        this.send('image', this.canvas);
       }
     },
     inputs: {
       image: {
-        type: "image",
-        description: "image to paint on, trace, or cut out"
+        type: 'image',
+        description: 'image to paint on, trace, or cut out',
       },
       width: {
-        type: "int",
-        description: "canvas width",
-        "default": 500
+        type: 'int',
+        description: 'canvas width',
+        default: 500,
       },
       height: {
-        type: "int",
-        description: "canvas height",
-        "default": 500
+        type: 'int',
+        description: 'canvas height',
+        default: 500,
       },
       stamp: {
-        type: "image",
-        description: "image to use as stamp"
+        type: 'image',
+        description: 'image to use as stamp',
       },
       fill: {
-        type: "color",
-        description: "fill color",
-        "default": "red"
+        type: 'color',
+        description: 'fill color',
+        default: 'red',
       },
       stroke: {
-        type: "color",
-        description: "stroke color",
-        "default": "black"
+        type: 'color',
+        description: 'stroke color',
+        default: 'black',
       },
       strokewidth: {
-        type: "float",
-        description: "stroke width",
-        "default": 2
+        type: 'float',
+        description: 'stroke width',
+        default: 2,
       },
       tool: {
-        type: "string",
-        description: "pixelPencil, pixelBrush, smoothPencil, stamp",
-        options: "pixelPencil pixelBrush smoothPencil stamp".split(" "),
-        "default": "smoothPencil"
+        type: 'string',
+        description: 'pixelPencil, pixelBrush, smoothPencil, stamp',
+        options: 'pixelPencil pixelBrush smoothPencil stamp'.split(' '),
+        default: 'smoothPencil',
       },
       mode: {
-        type: "string",
-        description: "how to combine drawing and image: on (draw on the image), trace (don't use image), or cutout (draw the matte for the image)",
-        options: "on trace cutout".split(" "),
-        "default": "on"
+        type: 'string',
+        description:
+          "how to combine drawing and image: on (draw on the image), trace (don't use image), or cutout (draw the matte for the image)",
+        options: 'on trace cutout'.split(' '),
+        default: 'on',
       },
       clear: {
-        type: "bang",
-        description: "clear the canvas"
+        type: 'bang',
+        description: 'clear the canvas',
       },
       sendEvery: {
-        type: "boolean",
-        description: "send each stroke as you make it",
-        "default": false
+        type: 'boolean',
+        description: 'send each stroke as you make it',
+        default: false,
       },
       send: {
-        type: "bang",
-        description: "send the combined canvas"
-      }
+        type: 'bang',
+        description: 'send the combined canvas',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-palette-worker.js b/src/nodes/image-palette-worker.js
index 4c69247..a780310 100644
--- a/src/nodes/image-palette-worker.js
+++ b/src/nodes/image-palette-worker.js
@@ -10,8 +10,12 @@ importScripts('../../libs/quantize.js');
 var imageDataToPixelArray = function (imageData) {
   var pixels = [];
   var length = imageData.data.length;
-  for (var i = 0; i < length; i+=4){
-    var pixel = [imageData.data[i], imageData.data[i+1], imageData.data[i+2]];
+  for (var i = 0; i < length; i += 4) {
+    var pixel = [
+      imageData.data[i],
+      imageData.data[i + 1],
+      imageData.data[i + 2],
+    ];
     pixels.push(pixel);
   }
   return pixels;
@@ -21,8 +25,9 @@ var imageDataToPixelArray = function (imageData) {
 var paletteToCSSPalette = function (palette) {
   var newPalette = [];
   var length = palette.length;
-  for (var i = 0; i < length; i++){
-    var css = "rgb("+palette[i][0]+","+palette[i][1]+","+palette[i][2]+")";
+  for (var i = 0; i < length; i++) {
+    var css =
+      'rgb(' + palette[i][0] + ',' + palette[i][1] + ',' + palette[i][2] + ')';
     // Only add unique colors
     if (newPalette.indexOf(css) === -1) {
       newPalette.push(css);
@@ -32,12 +37,22 @@ var paletteToCSSPalette = function (palette) {
 };
 
 // Worker
-self.addEventListener('message', function (e) {
-  if (!e.data.imageData || !e.data.imageData.data.length || !e.data.maxColors) { return false; }
+self.addEventListener(
+  'message',
+  function (e) {
+    if (
+      !e.data.imageData ||
+      !e.data.imageData.data.length ||
+      !e.data.maxColors
+    ) {
+      return false;
+    }
 
-  var myPixels = imageDataToPixelArray( e.data.imageData );
-  var maxColors = e.data.maxColors;
-  var cmap = MMCQ.quantize(myPixels, maxColors);
-  var palette = paletteToCSSPalette( cmap.palette() );
-  self.postMessage( palette );
-}, false);
+    var myPixels = imageDataToPixelArray(e.data.imageData);
+    var maxColors = e.data.maxColors;
+    var cmap = MMCQ.quantize(myPixels, maxColors);
+    var palette = paletteToCSSPalette(cmap.palette());
+    self.postMessage(palette);
+  },
+  false
+);
diff --git a/src/nodes/image-palette.js b/src/nodes/image-palette.js
index bf1e18b..0ee02bb 100644
--- a/src/nodes/image-palette.js
+++ b/src/nodes/image-palette.js
@@ -1,42 +1,50 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
+$(function () {
   function componentToHex(c) {
-    var hex = parseInt( c, 10 ).toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
+    var hex = parseInt(c, 10).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
   }
 
-  var rgbToHex = function ( rgb ) {
-    var rgbRegex = /^rgb\((\d+),(\d+),(\d+)\)$/ ;
-    var result, r, g, b, hex = "";
-    if ( (result = rgbRegex.exec(rgb)) ) {
-      hex = "#" + componentToHex(result[1]) + componentToHex(result[2]) + componentToHex(result[3]);
+  var rgbToHex = function (rgb) {
+    var rgbRegex = /^rgb\((\d+),(\d+),(\d+)\)$/;
+    var result,
+      r,
+      g,
+      b,
+      hex = '';
+    if ((result = rgbRegex.exec(rgb))) {
+      hex =
+        '#' +
+        componentToHex(result[1]) +
+        componentToHex(result[2]) +
+        componentToHex(result[3]);
       return hex;
     }
     return false;
   };
 
-  var template = 
-    '<div class="palette" style="padding: 1px 0 0 1px;"></div>'+
-    '<div class="info">input an image to make a palette</div>'+
-    '<button class="export-rgb">export rgb</button>'+
+  var template =
+    '<div class="palette" style="padding: 1px 0 0 1px;"></div>' +
+    '<div class="info">input an image to make a palette</div>' +
+    '<button class="export-rgb">export rgb</button>' +
     '<button class="export-hex">export hex</button>';
 
-  Iframework.NativeNodes["image-palette"] = Iframework.NativeNodes["image"].extend({
-
+  Iframework.NativeNodes['image-palette'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     template: _.template(template),
     info: {
-      title: "palette",
-      author: "nrabinowitz",
-      description: "get color palette from image color quantize"
+      title: 'palette',
+      author: 'nrabinowitz',
+      description: 'get color palette from image color quantize',
     },
     events: {
-      "click .export-rgb" : "exportRGB",
-      "click .export-hex" : "exportHex"
+      'click .export-rgb': 'exportRGB',
+      'click .export-hex': 'exportHex',
     },
     _workerBusy: false,
-    initializeModule: function(){
+    initializeModule: function () {
       // Clear canvas (we're extending image to get the droppable)
       $(this.canvas).remove();
       delete this.context;
@@ -45,49 +53,77 @@ $(function(){
       // Setup worker
       var self = this;
       this._worker = new Worker('src/nodes/image-palette-worker.js');
-      this._worker.addEventListener('message', function (e) {
-        // HACK
-        self.set("palette", e.data);
+      this._worker.addEventListener(
+        'message',
+        function (e) {
+          // HACK
+          self.set('palette', e.data);
 
-        self._palette = e.data;
-        self.renderPalette(self._palette);
-        self.inputsend();
-        self._workerBusy = false;
-      }, false);
-      this._worker.addEventListener('error', function (e) {
-        console.warn(e);
-      }, false);
+          self._palette = e.data;
+          self.renderPalette(self._palette);
+          self.inputsend();
+          self._workerBusy = false;
+        },
+        false
+      );
+      this._worker.addEventListener(
+        'error',
+        function (e) {
+          console.warn(e);
+        },
+        false
+      );
     },
-    inputimage: function(image) {
+    inputimage: function (image) {
       this._image = image;
-      if (!this._worker || this._workerBusy) { return false; }
+      if (!this._worker || this._workerBusy) {
+        return false;
+      }
 
       // Reduce size of big images
-      if (image.width > 2 && image.height > 2 && image.width * image.height > 500*500) {
+      if (
+        image.width > 2 &&
+        image.height > 2 &&
+        image.width * image.height > 500 * 500
+      ) {
         var width = image.width;
         var height = image.height;
-        while (width > 2 && height > 2 && width * height > 500*500) {
-          width = Math.floor(width/2);
-          height = Math.floor(height/2);
+        while (width > 2 && height > 2 && width * height > 500 * 500) {
+          width = Math.floor(width / 2);
+          height = Math.floor(height / 2);
         }
-        var small = document.createElement("canvas");
+        var small = document.createElement('canvas');
         small.width = width;
         small.height = height;
-        small.getContext('2d').drawImage( image, 0, 0, image.width, image.height, 0, 0, width, height );
+        small
+          .getContext('2d')
+          .drawImage(
+            image,
+            0,
+            0,
+            image.width,
+            image.height,
+            0,
+            0,
+            width,
+            height
+          );
         image = small;
       }
 
       try {
-        var imageData = image.getContext('2d').getImageData( 0, 0, image.width, image.height );
+        var imageData = image
+          .getContext('2d')
+          .getImageData(0, 0, image.width, image.height);
         this._worker.postMessage({
           imageData: imageData,
-          maxColors: this._max
+          maxColors: this._max,
         });
         // Don't process a new frame until this one is done
         this._workerBusy = true;
-      } catch(e) {
+      } catch (e) {
         // Can't getImageData
-        this.$(".info").text("Can't getImageData from that image :(");
+        this.$('.info').text("Can't getImageData from that image :(");
         // console.log(e);
       }
     },
@@ -98,111 +134,109 @@ $(function(){
     _max: 16,
     inputmax: function (max) {
       max = parseInt(max, 10);
-      if (max===max){
+      if (max === max) {
         this._max = max;
         if (this._image) {
           this.inputimage(this._image);
         }
       }
     },
-    renderPalette: function(palette){
-      this.$(".info, .palette").empty();
+    renderPalette: function (palette) {
+      this.$('.info, .palette').empty();
 
       var self = this;
-      var clickColor = function(){
-        var color = $(this).css("background-color");
-        self.send("color", color);
-        self.$(".info").text(color);
+      var clickColor = function () {
+        var color = $(this).css('background-color');
+        self.send('color', color);
+        self.$('.info').text(color);
       };
-      for (var i=0; i<palette.length; i++) {
-        var button = $('<button title="'+palette[i]+'"></button>')
+      for (var i = 0; i < palette.length; i++) {
+        var button = $('<button title="' + palette[i] + '"></button>')
           .css({
-            "background-color": palette[i],
-            "width": "48px", 
-            "height": "48px",
-            "margin": "0 1px 1px 0",
-            "padding": 0,
-            "border-width": 0,
-            "border-radius": 0
+            'background-color': palette[i],
+            width: '48px',
+            height: '48px',
+            margin: '0 1px 1px 0',
+            padding: 0,
+            'border-width': 0,
+            'border-radius': 0,
           })
           .click(clickColor);
-        this.$(".palette").append(button);
+        this.$('.palette').append(button);
       }
       // this.$(".info").text( palette.toString() );
     },
     exportRGB: function () {
-      var code = JSON.stringify(this._palette, null, "  ");
+      var code = JSON.stringify(this._palette, null, '  ');
       // window.alert(code);
-      window.open( "data:text/javascript," + window.escape(code) );
+      window.open('data:text/javascript,' + window.escape(code));
     },
     exportHex: function () {
       var hexen = [];
-      for (var i=0; i<this._palette.length; i++) {
+      for (var i = 0; i < this._palette.length; i++) {
         var hex;
-        if ( (hex=rgbToHex(this._palette[i])) ) {
-          hexen.push( hex );
+        if ((hex = rgbToHex(this._palette[i]))) {
+          hexen.push(hex);
         }
       }
-      var code = JSON.stringify(hexen, null, "  ");
+      var code = JSON.stringify(hexen, null, '  ');
       // window.alert(code);
-      window.open( "data:text/javascript," + window.escape(code) );
+      window.open('data:text/javascript,' + window.escape(code));
     },
     inputrandom: function (index) {
       if (this._palette && this._palette.length > 0) {
-        var color = this._palette[ Math.floor(this._palette.length * Math.random()) ];
-        this.send("color", color);
+        var color =
+          this._palette[Math.floor(this._palette.length * Math.random())];
+        this.send('color', color);
       }
     },
     inputsendOne: function (index) {
       if (this._palette && index < this._palette.length) {
-        this.send("color", this._palette[index]);
+        this.send('color', this._palette[index]);
       }
     },
     inputsend: function () {
-      this.send("palette", this._palette);
+      this.send('palette', this._palette);
     },
     inputs: {
       image: {
-        type: "image",
-        description: "extract palette from this image"
+        type: 'image',
+        description: 'extract palette from this image',
       },
       palette: {
-        description: "color palette (array of css colors)",
-        type: "array"
+        description: 'color palette (array of css colors)',
+        type: 'array',
       },
       max: {
-        description: "max number of colors in the palette",
-        type: "int",
+        description: 'max number of colors in the palette',
+        type: 'int',
         min: 2,
         max: 256,
-        "default": 16
+        default: 16,
       },
       random: {
-        type: "bang",
-        description: "send one random color from palette"
+        type: 'bang',
+        description: 'send one random color from palette',
       },
       sendOne: {
-        type: "int",
-        description: "send the color with this index",
-        min: 0
+        type: 'int',
+        description: 'send the color with this index',
+        min: 0,
       },
       send: {
-        type: "bang",
-        description: "send the color palette"
-      }
+        type: 'bang',
+        description: 'send the color palette',
+      },
     },
     outputs: {
       palette: {
-        description: "color palette (array of css colors)",
-        type: "array"
+        description: 'color palette (array of css colors)',
+        type: 'array',
       },
       color: {
-        description: "one color",
-        type: "color"
-      }
-    }
-
+        description: 'one color',
+        type: 'color',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-particles.js b/src/nodes/image-particles.js
index e6a5078..ae8b13d 100644
--- a/src/nodes/image-particles.js
+++ b/src/nodes/image-particles.js
@@ -1,31 +1,31 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var randomPlusOrMinus = function(range){
-    return Math.random()*range*2-range;
+$(function () {
+  var randomPlusOrMinus = function (range) {
+    return Math.random() * range * 2 - range;
   };
 
-  Iframework.NativeNodes["image-particles"] = Iframework.NativeNodes["image"].extend({
-
+  Iframework.NativeNodes['image-particles'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "particles",
-      description: "make a stream of particles from an image or spritesheet"
+      title: 'particles',
+      description: 'make a stream of particles from an image or spritesheet',
     },
     events: {
-      "click .start" : "inputstart",
-      "click .stop"  : "inputstop"
+      'click .start': 'inputstart',
+      'click .stop': 'inputstop',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       // this.showResizer(20,20,0.5);
       this.particles = [];
-      this.context.fillStyle = "black";
+      this.context.fillStyle = 'black';
 
-      this.$(".info").append(
-        '<button class="start">start</button>'+
-        '<button class="stop">stop</button>'
+      this.$('.info').append(
+        '<button class="start">start</button>' +
+          '<button class="stop">stop</button>'
       );
-      this.$("button").button();
+      this.$('button').button();
     },
     _sizeChanged: false,
     inputwidth: function (w) {
@@ -40,45 +40,45 @@ $(function(){
     },
     _xAccel: 0,
     _yAccel: 0,
-    inputaccelAngle: function(angle){
+    inputaccelAngle: function (angle) {
       this._accelAngle = angle;
       this.calcAccel();
     },
-    inputaccelSpeed: function(speed){
+    inputaccelSpeed: function (speed) {
       this._accelSpeed = speed;
       this.calcAccel();
     },
-    calcAccel: function(){
-      var angle = (this._accelAngle-0.25)*2*Math.PI;
+    calcAccel: function () {
+      var angle = (this._accelAngle - 0.25) * 2 * Math.PI;
       this._xAccel = this._accelSpeed * Math.cos(angle);
-      this._yAccel = this._accelSpeed * Math.sin(angle);      
+      this._yAccel = this._accelSpeed * Math.sin(angle);
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "image") {
+      if (edge.Target.id === 'image') {
         this._image = null;
       }
-      if (edge.Target.id === "animation") {
+      if (edge.Target.id === 'animation') {
         this._animation = null;
       }
     },
     _oneWidth: 0,
     _oneHeight: 0,
-    inputimage: function(image){
+    inputimage: function (image) {
       this._image = image;
       this._oneWidth = image.width;
       this._oneHeight = image.height;
     },
-    _ms: 1000/12,
-    inputanimation: function(a){
+    _ms: 1000 / 12,
+    inputanimation: function (a) {
       this._animation = a;
-      this._ms = 1000/a.fps;
+      this._ms = 1000 / a.fps;
       this._oneWidth = a.width;
       this._oneHeight = a.height;
     },
     _lastTime: 0,
     _spawnNext: 0,
-    redraw: function(timestamp){
+    redraw: function (timestamp) {
       // Called from NodeBoxNativeView.renderAnimationFrame()
       if (this._sizeChanged) {
         if (this.canvas.width !== this._width) {
@@ -95,23 +95,32 @@ $(function(){
       if (this._lastTime > 0) {
         // spawnRate is particles per second
         // var timeDiff = timestamp - this._lastTime;
-        this._spawnNext += Math.min( this._spawnRate/10, (this._spawnRate*((timestamp-this._lastTime)/1000)) );
+        this._spawnNext += Math.min(
+          this._spawnRate / 10,
+          this._spawnRate * ((timestamp - this._lastTime) / 1000)
+        );
       }
       this._lastTime = timestamp;
 
       // Spawn new particles
-      while (this.particles.length < this._maxParticles && this._spawnNext > 1) {
-        var angle = (this._angle-0.25 + randomPlusOrMinus(this._angleSpread))*2*Math.PI;
+      while (
+        this.particles.length < this._maxParticles &&
+        this._spawnNext > 1
+      ) {
+        var angle =
+          (this._angle - 0.25 + randomPlusOrMinus(this._angleSpread)) *
+          2 *
+          Math.PI;
         var velocity = this._speed + randomPlusOrMinus(this._speedSpread);
         // Offset initial position to center images
         var offsetX = 0;
         var offsetY = 0;
         if (this._image) {
-          offsetX = Math.floor(this._image.width/2);
-          offsetY = Math.floor(this._image.height/2);
-        } else if (this._animation && this._animation.frames.length>0) {
-          offsetX = Math.floor(this._animation.frames[0].width/2);
-          offsetY = Math.floor(this._animation.frames[0].height/2);
+          offsetX = Math.floor(this._image.width / 2);
+          offsetY = Math.floor(this._image.height / 2);
+        } else if (this._animation && this._animation.frames.length > 0) {
+          offsetX = Math.floor(this._animation.frames[0].width / 2);
+          offsetY = Math.floor(this._animation.frames[0].height / 2);
         }
         this.particles.push({
           born: timestamp,
@@ -121,9 +130,9 @@ $(function(){
           yVel: velocity * Math.sin(angle),
           angle: angle,
           frame: 0,
-          lastFrame: timestamp
+          lastFrame: timestamp,
         });
-        this._spawnNext-=1;
+        this._spawnNext -= 1;
       }
 
       // Delete extra
@@ -131,15 +140,15 @@ $(function(){
         this.particles.pop();
       }
 
-      for(var i=0; i<this.particles.length; i++) {
+      for (var i = 0; i < this.particles.length; i++) {
         var particle = this.particles[i];
         // Draw particles
         var draw = null;
-        if (this._animation && this._animation.length>0) {
-          if (timestamp-particle.lastFrame>=this._ms) {
+        if (this._animation && this._animation.length > 0) {
+          if (timestamp - particle.lastFrame >= this._ms) {
             // Advance animation frame
             particle.frame++;
-            if (particle.frame>=this._animation.length) {
+            if (particle.frame >= this._animation.length) {
               // Loop
               particle.frame = 0;
             }
@@ -151,13 +160,21 @@ $(function(){
         }
 
         this.context.translate(particle.x, particle.y);
-        if (this._matchAngle) { this.context.rotate(particle.angle); }
+        if (this._matchAngle) {
+          this.context.rotate(particle.angle);
+        }
         if (draw) {
-          this.context.drawImage(draw, 0 - (this._oneWidth/2), 0 - (this._oneHeight/2));
+          this.context.drawImage(
+            draw,
+            0 - this._oneWidth / 2,
+            0 - this._oneHeight / 2
+          );
         } else {
-          this.context.fillRect(0-5, 0-5, 10, 10);
+          this.context.fillRect(0 - 5, 0 - 5, 10, 10);
+        }
+        if (this._matchAngle) {
+          this.context.rotate(-particle.angle);
         }
-        if (this._matchAngle) { this.context.rotate(-particle.angle); }
         this.context.translate(-particle.x, -particle.y);
 
         // Advance particles
@@ -170,7 +187,7 @@ $(function(){
           particle.yVel += randomPlusOrMinus(this._wander);
         }
         if (this._matchAngle) {
-          particle.angle = Math.atan2(particle.yVel, particle.xVel); 
+          particle.angle = Math.atan2(particle.yVel, particle.xVel);
         }
 
         var kill = false;
@@ -194,7 +211,7 @@ $(function(){
         }
 
         if (!this._loop) {
-          if (this._life > 0 && timestamp-particle.born >= this._life) {
+          if (this._life > 0 && timestamp - particle.born >= this._life) {
             kill = true;
           }
           if (kill) {
@@ -205,165 +222,163 @@ $(function(){
         }
       }
 
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
-    inputspawn: function(i){
+    inputspawn: function (i) {
       this._spawnNext = i;
     },
-    inputspawnRate: function(r){
+    inputspawnRate: function (r) {
       this._spawnRate = r;
       this._spawnNext = 0;
     },
-    inputlife: function(s){
+    inputlife: function (s) {
       // Seconds to ms
-      this._life = s*1000;
+      this._life = s * 1000;
     },
     _running: false,
-    inputstart: function(){
+    inputstart: function () {
       this._running = true;
       this._spawnNext = 0;
     },
-    inputstop: function(){
+    inputstop: function () {
       this._running = false;
       this.particles = [];
     },
     _sendNext: false,
-    inputsend: function(){
+    inputsend: function () {
       this._sendNext = true;
     },
     renderAnimationFrame: function (timestamp) {
-      if (this._running){
+      if (this._running) {
         this.redraw(timestamp);
         this._lastRedraw = timestamp;
       }
     },
     inputs: {
       image: {
-        type: "image",
-        description: "make particles from image"
+        type: 'image',
+        description: 'make particles from image',
       },
       animation: {
-        type: "animation",
-        description: "make particles from animation"
+        type: 'animation',
+        description: 'make particles from animation',
       },
       width: {
-        type: "int",
-        description: "canvas width",
+        type: 'int',
+        description: 'canvas width',
         min: 1,
-        "default": 500
+        default: 500,
       },
       height: {
-        type: "int",
-        description: "canvas height",
+        type: 'int',
+        description: 'canvas height',
         min: 1,
-        "default": 500
+        default: 500,
       },
       x: {
-        type: "float",
-        description: "start x",
-        "default": 250
+        type: 'float',
+        description: 'start x',
+        default: 250,
       },
       y: {
-        type: "float",
-        description: "start y",
-        "default": 250
+        type: 'float',
+        description: 'start y',
+        default: 250,
       },
       xSpread: {
-        type: "float",
-        description: "start x spread",
-        "default": 0
+        type: 'float',
+        description: 'start x spread',
+        default: 0,
       },
       ySpread: {
-        type: "float",
-        description: "start y spread",
-        "default": 0
+        type: 'float',
+        description: 'start y spread',
+        default: 0,
       },
       angle: {
-        type: "float",
-        description: "start angle",
-        "default": 0
+        type: 'float',
+        description: 'start angle',
+        default: 0,
       },
       angleSpread: {
-        type: "float",
-        description: "start angle variance",
-        "default": 0.1
+        type: 'float',
+        description: 'start angle variance',
+        default: 0.1,
       },
       matchAngle: {
-        type: "boolean",
-        description: "turn sprite to match direction",
-        "default": false
+        type: 'boolean',
+        description: 'turn sprite to match direction',
+        default: false,
       },
       speed: {
-        type: "float",
-        description: "start speed",
-        "default": 10
+        type: 'float',
+        description: 'start speed',
+        default: 10,
       },
       speedSpread: {
-        type: "float",
-        description: "start spread variance",
-        "default": 0
+        type: 'float',
+        description: 'start spread variance',
+        default: 0,
       },
       wander: {
-        type: "float",
-        description: "randomize speed by this much every frame",
-        "default": 0,
-        min: 0
+        type: 'float',
+        description: 'randomize speed by this much every frame',
+        default: 0,
+        min: 0,
       },
       accelAngle: {
-        type: "float",
-        description: "acceleration angle",
-        "default": 0.5
+        type: 'float',
+        description: 'acceleration angle',
+        default: 0.5,
       },
       accelSpeed: {
-        type: "float",
-        description: "acceleration speed",
-        "default": 1
+        type: 'float',
+        description: 'acceleration speed',
+        default: 1,
       },
       spawn: {
-        type: "float",
-        description: "spawn this number of particles now",
-        "default": 0
+        type: 'float',
+        description: 'spawn this number of particles now',
+        default: 0,
       },
       spawnRate: {
-        type: "float",
-        description: "emit speed in particles per second",
-        "default": 10
+        type: 'float',
+        description: 'emit speed in particles per second',
+        default: 10,
       },
       maxParticles: {
-        type: "int",
-        description: "max particles in system",
-        "default": 100
+        type: 'int',
+        description: 'max particles in system',
+        default: 100,
       },
       life: {
-        type: "float",
-        description: "particle lifetime in seconds (0 will live until off edge)",
-        "default": 1
+        type: 'float',
+        description:
+          'particle lifetime in seconds (0 will live until off edge)',
+        default: 1,
       },
       loop: {
-        type: "boolean",
-        description: "loop around to the other side (ignores life)",
-        "default": false
+        type: 'boolean',
+        description: 'loop around to the other side (ignores life)',
+        default: false,
       },
       start: {
-        type: "bang",
-        description: "start the particle animation"
+        type: 'bang',
+        description: 'start the particle animation',
       },
       stop: {
-        type: "bang",
-        description: "stop the particle animation"
+        type: 'bang',
+        description: 'stop the particle animation',
       },
       send: {
-        type: "bang",
-        description: "send the next image"
-      }
+        type: 'bang',
+        description: 'send the next image',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-rectangle.js b/src/nodes/image-rectangle.js
index a613579..6f4f7a8 100644
--- a/src/nodes/image-rectangle.js
+++ b/src/nodes/image-rectangle.js
@@ -1,16 +1,14 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-rectangle"] = Iframework.NativeNodes["image"].extend({
-
+$(function () {
+  Iframework.NativeNodes['image-rectangle'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "rectangle",
-      description: "draw a rectangle"
-    },
-    initializeModule: function(){
-      
+      title: 'rectangle',
+      description: 'draw a rectangle',
     },
+    initializeModule: function () {},
     inputrect: function (rect) {
       this._x = rect[0];
       this._y = rect[1];
@@ -32,9 +30,9 @@ $(function(){
       this._strokewidth = w;
       this.context.lineWidth = this._strokewidth;
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "background") {
+      if (edge.Target.id === 'background') {
         this._background = null;
         this._triggerRedraw = true;
       }
@@ -44,25 +42,28 @@ $(function(){
       this.context.strokeStyle = this._stroke;
       this.context.lineWidth = this._strokewidth;
     },
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
       var setSettings = false;
       if (this._background) {
-        if (this.canvas.width !== this._background.width || this.canvas.height !== this._background.height) {
+        if (
+          this.canvas.width !== this._background.width ||
+          this.canvas.height !== this._background.height
+        ) {
           this.canvas.width = this._background.width;
           this.canvas.height = this._background.height;
           setSettings = true;
         }
       } else {
-        var width = this._w + 2*this._x;
+        var width = this._w + 2 * this._x;
         if (this.canvas.width !== width) {
-          this.canvas.width = this._w + 2*this._x;
+          this.canvas.width = this._w + 2 * this._x;
           setSettings = true;
         }
-        var height = this._h + 2*this._y;
+        var height = this._h + 2 * this._y;
         if (this.canvas.height !== height) {
-          this.canvas.height = this._h + 2*this._y;
+          this.canvas.height = this._h + 2 * this._y;
           setSettings = true;
         }
       }
@@ -79,11 +80,11 @@ $(function(){
       //   this.context.rotate(this._angle);
       //   // Fill
       //   if (this._fill && this._fill!=="") {
-      //     this.context.fillRect(0-(this._w/2), 0-(this._h/2), this._w, this._h);  
+      //     this.context.fillRect(0-(this._w/2), 0-(this._h/2), this._w, this._h);
       //   }
       //   // Stroke
       //   if (this._stroke && this._stroke!=="" && this._strokewidth && this._strokewidth>0) {
-      //     this.context.strokeRect(0-(this._w/2), 0-(this._h/2), this._w, this._h);  
+      //     this.context.strokeRect(0-(this._w/2), 0-(this._h/2), this._w, this._h);
       //   }
       //   this.context.rotate(0-this._angle);
       //   this.context.translate(0-this._x, 0-this._y);
@@ -91,78 +92,80 @@ $(function(){
       //   return;
       // }
       // Fill
-      if (this._fill && this._fill!=="") {
-        this.context.fillRect(this._x, this._y, this._w, this._h);  
+      if (this._fill && this._fill !== '') {
+        this.context.fillRect(this._x, this._y, this._w, this._h);
       }
       // Stroke
-      if (this._stroke && this._stroke!=="" && this._strokewidth && this._strokewidth>0) {
-        this.context.strokeRect(this._x, this._y, this._w, this._h);  
+      if (
+        this._stroke &&
+        this._stroke !== '' &&
+        this._strokewidth &&
+        this._strokewidth > 0
+      ) {
+        this.context.strokeRect(this._x, this._y, this._w, this._h);
       }
       this.inputsend();
     },
     inputsend: function () {
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
     inputs: {
       background: {
-        type: "image",
-        description: "first image layer"
+        type: 'image',
+        description: 'first image layer',
       },
       rect: {
-        type: "array:f4",
-        description: "a rectangle array with x, y, width, height"
+        type: 'array:f4',
+        description: 'a rectangle array with x, y, width, height',
       },
       x: {
-        type: "float",
-        description: "x of top-left corner",
-        "default": 75
+        type: 'float',
+        description: 'x of top-left corner',
+        default: 75,
       },
       y: {
-        type: "float",
-        description: "y of top-left corner",
-        "default": 75
+        type: 'float',
+        description: 'y of top-left corner',
+        default: 75,
       },
       w: {
-        type: "float",
-        description: "rectangle width",
-        "default": 350
+        type: 'float',
+        description: 'rectangle width',
+        default: 350,
       },
       h: {
-        type: "float",
-        description: "rectangle height",
-        "default": 350
+        type: 'float',
+        description: 'rectangle height',
+        default: 350,
       },
       fill: {
-        type: "color",
-        description: "fill color",
-        "default": ""
+        type: 'color',
+        description: 'fill color',
+        default: '',
       },
       stroke: {
-        type: "color",
-        description: "stroke color",
-        "default": "black"
+        type: 'color',
+        description: 'stroke color',
+        default: 'black',
       },
       strokewidth: {
-        type: "float",
-        description: "stroke width",
-        "default": 1
+        type: 'float',
+        description: 'stroke width',
+        default: 1,
       },
       // clear: {
       //   type: "bang",
       //   description: "clear the canvas"
       // },
       send: {
-        type: "bang",
-        description: "send the combined canvas"
-      }
+        type: 'bang',
+        description: 'send the combined canvas',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-slitscan.js b/src/nodes/image-slitscan.js
index e252246..b77ca5e 100644
--- a/src/nodes/image-slitscan.js
+++ b/src/nodes/image-slitscan.js
@@ -1,27 +1,27 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="control">'+
-      '<button class="start">start</button>'+
-      '<button class="stop">stop</button>'+
+$(function () {
+  var template =
+    '<div class="control">' +
+    '<button class="start">start</button>' +
+    '<button class="stop">stop</button>' +
     '</div>';
 
-  Iframework.NativeNodes["image-slitscan"] = Iframework.NativeNodes["image"].extend({
-
+  Iframework.NativeNodes['image-slitscan'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "slitscan",
-      author: "forresto",
-      description: "slitscan in different directions"
+      title: 'slitscan',
+      author: 'forresto',
+      description: 'slitscan in different directions',
     },
     template: _.template(template),
     events: {
-      "click .start": "inputstart",
-      "click .stop":  "inputstop"
+      'click .start': 'inputstart',
+      'click .stop': 'inputstop',
     },
-    initializeModule: function(){
-      this.$("button").button();
+    initializeModule: function () {
+      this.$('button').button();
     },
     inputwidth: function (i) {
       this._width = i;
@@ -48,43 +48,43 @@ $(function(){
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
     },
     inputsend: function () {
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
     _position: 0,
     _speed: 1,
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
       if (this._stream && this._scanning) {
         var sx, sy, sw, sh, dx, dy, dw, dh;
         if (this._fixed) {
-          if (this._direction === "up") {
-            this.context.drawImage(this.canvas, 0, 0-this._speed);
+          if (this._direction === 'up') {
+            this.context.drawImage(this.canvas, 0, 0 - this._speed);
             sx = 0;
-            sy = Math.floor(this._stream.height/2);
+            sy = Math.floor(this._stream.height / 2);
             sw = this._stream.width;
             sh = this._speed;
             dx = 0;
-            dy = this.canvas.height-1 - this._speed;
-          } else if (this._direction === "down") {
+            dy = this.canvas.height - 1 - this._speed;
+          } else if (this._direction === 'down') {
             this.context.drawImage(this.canvas, 0, this._speed);
             sx = 0;
-            sy = Math.floor(this._stream.height/2);
+            sy = Math.floor(this._stream.height / 2);
             sw = this._stream.width;
             sh = this._speed;
             dx = 0;
             dy = 0;
-          } else if (this._direction === "left") {
-            this.context.drawImage(this.canvas, 0-this._speed, 0);
-            sx = Math.floor(this._stream.width/2);
+          } else if (this._direction === 'left') {
+            this.context.drawImage(this.canvas, 0 - this._speed, 0);
+            sx = Math.floor(this._stream.width / 2);
             sy = 0;
             sw = this._speed;
             sh = this._stream.height;
-            dx = this.canvas.width-1 - this._speed;
+            dx = this.canvas.width - 1 - this._speed;
             dy = 0;
           } else {
             // right
             this.context.drawImage(this.canvas, this._speed, 0);
-            sx = Math.floor(this._stream.width/2);
+            sx = Math.floor(this._stream.width / 2);
             sy = 0;
             sw = this._speed;
             sh = this._stream.height;
@@ -97,24 +97,24 @@ $(function(){
           this.inputsend();
         } else {
           // Not fixed
-          if (this._direction === "up") {
+          if (this._direction === 'up') {
             sx = 0;
-            sy = this._stream.height-1 - this._position*this._speed;
+            sy = this._stream.height - 1 - this._position * this._speed;
             sw = this._stream.width;
             sh = this._speed;
-          } else if (this._direction === "down") {
+          } else if (this._direction === 'down') {
             sx = 0;
-            sy = this._position*this._speed;
+            sy = this._position * this._speed;
             sw = this._stream.width;
             sh = this._speed;
-          } else if (this._direction === "left") {
-            sx = this._stream.width-1 - this._position*this._speed;
+          } else if (this._direction === 'left') {
+            sx = this._stream.width - 1 - this._position * this._speed;
             sy = 0;
             sw = this._speed;
             sh = this._stream.height;
           } else {
             // right
-            sx = this._position*this._speed;
+            sx = this._position * this._speed;
             sy = 0;
             sw = this._speed;
             sh = this._stream.height;
@@ -126,12 +126,18 @@ $(function(){
           this.context.drawImage(this._stream, sx, sy, sw, sh, dx, dy, dw, dh);
           this._position++;
           var done = false;
-          if (this._direction === "up" || this._direction === "down") {
-            if (this._position*this._speed >= this._stream.height+this._speed) {
+          if (this._direction === 'up' || this._direction === 'down') {
+            if (
+              this._position * this._speed >=
+              this._stream.height + this._speed
+            ) {
               done = true;
             }
           } else {
-            if (this._position*this._speed >= this._stream.width+this._speed) {
+            if (
+              this._position * this._speed >=
+              this._stream.width + this._speed
+            ) {
               done = true;
             }
           }
@@ -144,63 +150,60 @@ $(function(){
     },
     inputs: {
       stream: {
-        type: "image",
-        description: "video stream to scan"
+        type: 'image',
+        description: 'video stream to scan',
       },
       width: {
-        type: "int",
-        description: "image width",
+        type: 'int',
+        description: 'image width',
         min: 1,
-        "default": 500
+        default: 500,
       },
       height: {
-        type: "int",
-        description: "image height",
+        type: 'int',
+        description: 'image height',
         min: 1,
-        "default": 500
+        default: 500,
       },
       direction: {
-        type: "string",
-        description: "direction to scan",
-        options: "up right down left".split(" "),
-        "default": "right"
+        type: 'string',
+        description: 'direction to scan',
+        options: 'up right down left'.split(' '),
+        default: 'right',
       },
       speed: {
-        type: "int",
-        description: "speed is the thickness of the scan line",
+        type: 'int',
+        description: 'speed is the thickness of the scan line',
         min: 1,
-        "default": 1
+        default: 1,
       },
       fixed: {
-        type: "boolean",
-        description: "fixes the input column of pixels for a continuous scan",
-        "default": false
+        type: 'boolean',
+        description: 'fixes the input column of pixels for a continuous scan',
+        default: false,
       },
       start: {
-        type: "bang",
-        description: "start scanning"
+        type: 'bang',
+        description: 'start scanning',
       },
       stop: {
-        type: "bang",
-        description: "stop scanning"
+        type: 'bang',
+        description: 'stop scanning',
       },
       clear: {
-        type: "bang",
-        description: "clear the image"
+        type: 'bang',
+        description: 'clear the image',
       },
       send: {
-        type: "bang",
-        description: "send the image"
-      }
+        type: 'bang',
+        description: 'send the image',
+      },
     },
     outputs: {
       image: {
-        type: "image",
-        description: "the whole grid image"
-      }
-    }
-
+        type: 'image',
+        description: 'the whole grid image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-text.js b/src/nodes/image-text.js
index 2ca64d3..8f7e7f3 100644
--- a/src/nodes/image-text.js
+++ b/src/nodes/image-text.js
@@ -1,130 +1,131 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-text"] = Iframework.NativeNodes["image"].extend({
-
-    info: {
-      title: "text",
-      description: "draw text to a canvas" 
-    },
-    initializeModule: function(){
-      
-    },
-    inputfont: function (font) {
-      this._triggerRedraw = true;
-      this._font = font;
-      this.context.font = this._font;
-    },
-    inputfill: function (color) {
-      this._triggerRedraw = true;
-      this._fill = color;
-      this.context.fillStyle = this._fill;
-    },
-    inputstroke: function (color) {
-      this._triggerRedraw = true;
-      this._stroke = color;
-      this.context.strokeStyle = this._stroke;
-    },
-    inputstrokewidth: function (w) {
-      this._triggerRedraw = true;
-      this._strokewidth = w;
-      this.context.lineWidth = this._strokewidth;
-    },
-    disconnectEdge: function(edge) {
-      // Called from Edge.disconnect();
-      if (edge.Target.id === "background") {
-        this._background = null;
+$(function () {
+  Iframework.NativeNodes['image-text'] = Iframework.NativeNodes['image'].extend(
+    {
+      info: {
+        title: 'text',
+        description: 'draw text to a canvas',
+      },
+      initializeModule: function () {},
+      inputfont: function (font) {
         this._triggerRedraw = true;
-      }
-    },
-    canvasSettings: function () {
-      this.context.font = this._font;
-      this.context.fillStyle = this._fill;
-      this.context.strokeStyle = this._stroke;
-      this.context.lineWidth = this._strokewidth;
-    },
-    redraw: function(){
-      // Called from NodeBoxNativeView.renderAnimationFrame()
-      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-      var setSettings = false;
-
-      // Canvas size
-      var width = this.context.measureText(this._text);
-      if (typeof width !== "number" && width.width){
-        width = width.width;
-      }
-      width = Math.ceil(width);
-      if (this.canvas.width !== width+20) {
-        this.canvas.width = width+20;
-        setSettings = true;
-      }
-      if (this.canvas.height !== this._height) {
-        this.canvas.height = this._height;
-        setSettings = true;
-      }
-      // Reset canvas font, fill, stroke
-      if (setSettings) {
-        this.canvasSettings();
-      }
-
-      // Fill
-      var y = Math.floor(this._height/2);
-      if (this._fill && this._fill!=="") {
-        this.context.fillText(this._text, 10, y);
-      }
-      // Stroke
-      if (this._stroke && this._stroke!=="" && this._strokewidth && this._strokewidth>0) {
-        this.context.strokeText(this._text, 10, y);
-      }
-      this.inputsend();
-    },
-    inputsend: function () {
-      this.send("image", this.canvas);
-    },
-    inputs: {
-      text: {
-        type: "string",
-        description: "text to render to image",
-        "default": "text"
+        this._font = font;
+        this.context.font = this._font;
       },
-      font: {
-        type: "string",
-        description: "font settings. example: \"18pt Courier New\" or \"bold 36px Tahoma\"",
-        "default": "bold 30px Tahoma"
+      inputfill: function (color) {
+        this._triggerRedraw = true;
+        this._fill = color;
+        this.context.fillStyle = this._fill;
       },
-      height: {
-        type: "int",
-        description: "height of canvas (font height is set in font)",
-        "default": 60        
+      inputstroke: function (color) {
+        this._triggerRedraw = true;
+        this._stroke = color;
+        this.context.strokeStyle = this._stroke;
       },
-      fill: {
-        type: "color",
-        description: "fill color",
-        "default": "white"
+      inputstrokewidth: function (w) {
+        this._triggerRedraw = true;
+        this._strokewidth = w;
+        this.context.lineWidth = this._strokewidth;
       },
-      stroke: {
-        type: "color",
-        description: "stroke color",
-        "default": "black"
+      disconnectEdge: function (edge) {
+        // Called from Edge.disconnect();
+        if (edge.Target.id === 'background') {
+          this._background = null;
+          this._triggerRedraw = true;
+        }
       },
-      strokewidth: {
-        type: "float",
-        description: "stroke width",
-        "default": 1
+      canvasSettings: function () {
+        this.context.font = this._font;
+        this.context.fillStyle = this._fill;
+        this.context.strokeStyle = this._stroke;
+        this.context.lineWidth = this._strokewidth;
       },
-      send: {
-        type: "bang",
-        description: "send the canvas"
-      }
-    },
-    outputs: {
-      image: {
-        type: "image"
-      }
-    }
-
-  });
+      redraw: function () {
+        // Called from NodeBoxNativeView.renderAnimationFrame()
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        var setSettings = false;
 
+        // Canvas size
+        var width = this.context.measureText(this._text);
+        if (typeof width !== 'number' && width.width) {
+          width = width.width;
+        }
+        width = Math.ceil(width);
+        if (this.canvas.width !== width + 20) {
+          this.canvas.width = width + 20;
+          setSettings = true;
+        }
+        if (this.canvas.height !== this._height) {
+          this.canvas.height = this._height;
+          setSettings = true;
+        }
+        // Reset canvas font, fill, stroke
+        if (setSettings) {
+          this.canvasSettings();
+        }
 
+        // Fill
+        var y = Math.floor(this._height / 2);
+        if (this._fill && this._fill !== '') {
+          this.context.fillText(this._text, 10, y);
+        }
+        // Stroke
+        if (
+          this._stroke &&
+          this._stroke !== '' &&
+          this._strokewidth &&
+          this._strokewidth > 0
+        ) {
+          this.context.strokeText(this._text, 10, y);
+        }
+        this.inputsend();
+      },
+      inputsend: function () {
+        this.send('image', this.canvas);
+      },
+      inputs: {
+        text: {
+          type: 'string',
+          description: 'text to render to image',
+          default: 'text',
+        },
+        font: {
+          type: 'string',
+          description:
+            'font settings. example: "18pt Courier New" or "bold 36px Tahoma"',
+          default: 'bold 30px Tahoma',
+        },
+        height: {
+          type: 'int',
+          description: 'height of canvas (font height is set in font)',
+          default: 60,
+        },
+        fill: {
+          type: 'color',
+          description: 'fill color',
+          default: 'white',
+        },
+        stroke: {
+          type: 'color',
+          description: 'stroke color',
+          default: 'black',
+        },
+        strokewidth: {
+          type: 'float',
+          description: 'stroke width',
+          default: 1,
+        },
+        send: {
+          type: 'bang',
+          description: 'send the canvas',
+        },
+      },
+      outputs: {
+        image: {
+          type: 'image',
+        },
+      },
+    }
+  );
 });
diff --git a/src/nodes/image-tile.js b/src/nodes/image-tile.js
index c1f6447..d81ea30 100644
--- a/src/nodes/image-tile.js
+++ b/src/nodes/image-tile.js
@@ -1,149 +1,151 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-tile"] = Iframework.NativeNodes["image"].extend({
-
-    info: {
-      title: "tile",
-      description: "tile to fill canvas, reflect mirror tile for seamless"
-    },
-    initializeModule: function(){
-      // this.showResizer(20,20,0.5);
-    },
-    _sizeChanged: false,
-    inputwidth: function (w) {
-      this._width = w;
-      this._sizeChanged = true;
-      this._triggerRedraw = true;
-    },
-    inputheight: function (h) {
-      this._height = h;
-      this._sizeChanged = true;
-      this._triggerRedraw = true;
-    },
-    disconnectEdge: function(edge) {
-      // Called from Edge.disconnect();
-      if (edge.Target.id === "image") {
-        this._image = null;
+$(function () {
+  Iframework.NativeNodes['image-tile'] = Iframework.NativeNodes['image'].extend(
+    {
+      info: {
+        title: 'tile',
+        description: 'tile to fill canvas, reflect mirror tile for seamless',
+      },
+      initializeModule: function () {
+        // this.showResizer(20,20,0.5);
+      },
+      _sizeChanged: false,
+      inputwidth: function (w) {
+        this._width = w;
+        this._sizeChanged = true;
         this._triggerRedraw = true;
-      }
-    },
-    _tile: null,
-    redraw: function(){
-      // Called from NodeBoxNativeView.renderAnimationFrame()
-      if (this._sizeChanged) {
-        if (this.canvas.width !== this._width) {
-          this.canvas.width = this._width;
+      },
+      inputheight: function (h) {
+        this._height = h;
+        this._sizeChanged = true;
+        this._triggerRedraw = true;
+      },
+      disconnectEdge: function (edge) {
+        // Called from Edge.disconnect();
+        if (edge.Target.id === 'image') {
+          this._image = null;
+          this._triggerRedraw = true;
         }
-        if (this.canvas.height !== this._height) {
-          this.canvas.height = this._height;
+      },
+      _tile: null,
+      redraw: function () {
+        // Called from NodeBoxNativeView.renderAnimationFrame()
+        if (this._sizeChanged) {
+          if (this.canvas.width !== this._width) {
+            this.canvas.width = this._width;
+          }
+          if (this.canvas.height !== this._height) {
+            this.canvas.height = this._height;
+          }
+          this._sizeChanged = false;
         }
-        this._sizeChanged = false;
-      }
-      if (this._image) {
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        var x = this._x;
-        var y = this._y;
-        var w = this._image.width;
-        var h = this._image.height;
+        if (this._image) {
+          this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+          var x = this._x;
+          var y = this._y;
+          var w = this._image.width;
+          var h = this._image.height;
 
-        if (!this._tile) {
-          this._tile = document.createElement("canvas");
-          this._tileContext = this._tile.getContext("2d");
-          this._tile.width = w*2+100;
-          this._tile.height = h*2+100;
-        }
+          if (!this._tile) {
+            this._tile = document.createElement('canvas');
+            this._tileContext = this._tile.getContext('2d');
+            this._tile.width = w * 2 + 100;
+            this._tile.height = h * 2 + 100;
+          }
 
-        this._tileContext.clearRect(0, 0, this._tile.width, this._tile.height);
-        this._tileContext.setTransform(1, 0, 0, 1, 0, 0);
-        this._tileContext.drawImage(this._image, 0, 0);
-        if (this._mirror==="x" || this._mirror==="xy"){
+          this._tileContext.clearRect(
+            0,
+            0,
+            this._tile.width,
+            this._tile.height
+          );
           this._tileContext.setTransform(1, 0, 0, 1, 0, 0);
-          this._tileContext.translate(2*w, 0);
-          this._tileContext.scale(-1, 1);
           this._tileContext.drawImage(this._image, 0, 0);
-          w+=w;
-        }
-        if (this._mirror==="y" || this._mirror==="xy"){
-          this._tileContext.setTransform(1, 0, 0, 1, 0, 0);
-          this._tileContext.translate(0, 2*h);
-          this._tileContext.scale(1, -1);
-          this._tileContext.drawImage(this._tile, 0, 0);
-          h+=h;
-        }
-
-        while (x>0) {
-          x-=w;
-        }
-        while (y>0) {
-          y-=h;
-        }
+          if (this._mirror === 'x' || this._mirror === 'xy') {
+            this._tileContext.setTransform(1, 0, 0, 1, 0, 0);
+            this._tileContext.translate(2 * w, 0);
+            this._tileContext.scale(-1, 1);
+            this._tileContext.drawImage(this._image, 0, 0);
+            w += w;
+          }
+          if (this._mirror === 'y' || this._mirror === 'xy') {
+            this._tileContext.setTransform(1, 0, 0, 1, 0, 0);
+            this._tileContext.translate(0, 2 * h);
+            this._tileContext.scale(1, -1);
+            this._tileContext.drawImage(this._tile, 0, 0);
+            h += h;
+          }
 
-        while(y<this._height) {
-          while(x<this._width) {
-            this.context.drawImage(this._tile, 0, 0, w, h, x, y, w, h);
-            x+=w;
+          while (x > 0) {
+            x -= w;
           }
-          y+=h;
-          // Reset x
-          x = this._x;
-          while (x>0) {
-            x-=w;
+          while (y > 0) {
+            y -= h;
+          }
+
+          while (y < this._height) {
+            while (x < this._width) {
+              this.context.drawImage(this._tile, 0, 0, w, h, x, y, w, h);
+              x += w;
+            }
+            y += h;
+            // Reset x
+            x = this._x;
+            while (x > 0) {
+              x -= w;
+            }
           }
         }
-      }
 
-      this.inputsend();
-    },
-    inputsend: function () {
-      this.send("image", this.canvas);
-    },
-    inputs: {
-      image: {
-        type: "image",
-        description: "image to tile"
-      },
-      width: {
-        type: "int",
-        description: "canvas width",
-        min: 1,
-        "default": 500
-      },
-      height: {
-        type: "int",
-        description: "canvas height",
-        min: 1,
-        "default": 500
+        this.inputsend();
       },
-      x: {
-        type: "float",
-        description: "start x",
-        "default": 0
+      inputsend: function () {
+        this.send('image', this.canvas);
       },
-      y: {
-        type: "float",
-        description: "start y",
-        "default": 0
+      inputs: {
+        image: {
+          type: 'image',
+          description: 'image to tile',
+        },
+        width: {
+          type: 'int',
+          description: 'canvas width',
+          min: 1,
+          default: 500,
+        },
+        height: {
+          type: 'int',
+          description: 'canvas height',
+          min: 1,
+          default: 500,
+        },
+        x: {
+          type: 'float',
+          description: 'start x',
+          default: 0,
+        },
+        y: {
+          type: 'float',
+          description: 'start y',
+          default: 0,
+        },
+        mirror: {
+          type: 'string',
+          description: "'none', 'x', 'y', or 'xy' mirror reflection",
+          options: ['none', 'x', 'y', 'xy'],
+          default: 'xy',
+        },
+        send: {
+          type: 'bang',
+          description: 'send the image',
+        },
       },
-      mirror: {
-        type: "string",
-        description: "'none', 'x', 'y', or 'xy' mirror reflection",
-        options: ['none', 'x', 'y', 'xy'],
-        "default": "xy"
+      outputs: {
+        image: {
+          type: 'image',
+        },
       },
-      send: {
-        type: "bang",
-        description: "send the image"
-      }
-    },
-    outputs: {
-      image: {
-        type: "image"
-      }
     }
-
-  });
-
-
+  );
 });
diff --git a/src/nodes/image-trails.js b/src/nodes/image-trails.js
index eea1184..d6895cf 100644
--- a/src/nodes/image-trails.js
+++ b/src/nodes/image-trails.js
@@ -1,18 +1,17 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-trails"] = Iframework.NativeNodes["image"].extend({
-
+$(function () {
+  Iframework.NativeNodes['image-trails'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "trails",
-      description: "draws image without clearing, leaving motion trails"
-    },
-    initializeModule: function(){
+      title: 'trails',
+      description: 'draws image without clearing, leaving motion trails',
     },
-    disconnectEdge: function(edge) {
+    initializeModule: function () {},
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "image") {
+      if (edge.Target.id === 'image') {
         this._image = null;
       }
     },
@@ -21,17 +20,21 @@ $(function(){
       var oldmode = this.context.globalCompositeOperation;
       this.context.globalCompositeOperation = mode;
       if (this.context.globalCompositeOperation !== mode) {
-        this.$(".info").text("globalCompositeOperation '"+mode+"' not supported in this browser");
+        this.$('.info').text(
+          "globalCompositeOperation '" +
+            mode +
+            "' not supported in this browser"
+        );
       }
     },
     _clear: false,
-    inputclear: function(){
+    inputclear: function () {
       this._clear = true;
     },
     inputsend: function () {
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
       if (this._clear) {
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -52,33 +55,59 @@ $(function(){
     },
     inputs: {
       image: {
-        type: "image",
-        description: "image to stack"
+        type: 'image',
+        description: 'image to stack',
       },
       composite: {
-        type: "string",
-        description: "composite (source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, darker, copy, xor) and/or blend mode (Firefox 20 only as of April 2013: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity) ",
-        options: ['source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'darker', 'copy', 'xor', 
-          'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'],
-        "default": "source-over"
+        type: 'string',
+        description:
+          'composite (source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, darker, copy, xor) and/or blend mode (Firefox 20 only as of April 2013: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity) ',
+        options: [
+          'source-over',
+          'source-in',
+          'source-out',
+          'source-atop',
+          'destination-over',
+          'destination-in',
+          'destination-out',
+          'destination-atop',
+          'lighter',
+          'darker',
+          'copy',
+          'xor',
+          'normal',
+          'multiply',
+          'screen',
+          'overlay',
+          'darken',
+          'lighten',
+          'color-dodge',
+          'color-burn',
+          'hard-light',
+          'soft-light',
+          'difference',
+          'exclusion',
+          'hue',
+          'saturation',
+          'color',
+          'luminosity',
+        ],
+        default: 'source-over',
       },
       clear: {
-        type: "bang",
-        description: "send the image"
+        type: 'bang',
+        description: 'send the image',
       },
       send: {
-        type: "bang",
-        description: "send the image"
-      }
+        type: 'bang',
+        description: 'send the image',
+      },
     },
     outputs: {
       image: {
-        type: "image",
-        description: "image with trails"
-      }
-    }
-
+        type: 'image',
+        description: 'image with trails',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-transform.js b/src/nodes/image-transform.js
index c345375..04d1849 100644
--- a/src/nodes/image-transform.js
+++ b/src/nodes/image-transform.js
@@ -1,19 +1,17 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-transform"] = Iframework.NativeNodes["image"].extend({
-
+$(function () {
+  Iframework.NativeNodes['image-transform'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "transform",
-      description: "scale, translate, and/or rotate image"
+      title: 'transform',
+      description: 'scale, translate, and/or rotate image',
     },
     dragstart: null,
-    initializeModule: function(){
+    initializeModule: function () {
       // this.showResizer(20,20,0.5);
-
       // TODO drag to move x, y
-
       // var self = this;
       // $(this.canvas).draggable({
       //   helper: function(){
@@ -28,7 +26,6 @@ $(function(){
       //     console.log(event, ui);
       //   },
       //   stop: function(event, ui){
-
       //     self.dragstart = null;
       //     event.stopPropagation();
       //   }
@@ -54,18 +51,18 @@ $(function(){
       this._scale = f;
       this._triggerRedraw = true;
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "background") {
+      if (edge.Target.id === 'background') {
         this._background = null;
         this._triggerRedraw = true;
       }
-      if (edge.Target.id === "image") {
+      if (edge.Target.id === 'image') {
         this._image = null;
         this._triggerRedraw = true;
       }
     },
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
       if (this._sizeChanged) {
         if (this.canvas.width !== this._width) {
@@ -85,15 +82,21 @@ $(function(){
       if (this._image && this._image.width && this._image.height) {
         var width = this._image.width * this._scale;
         var height = this._image.height * this._scale;
-        var x = this.canvas.width/2 + this._translateX;
-        var y = this.canvas.height/2 + this._translateY;
-        
+        var x = this.canvas.width / 2 + this._translateX;
+        var y = this.canvas.height / 2 + this._translateY;
+
         this.context.globalCompositeOperation = this._composite;
 
         // context.save();
         this.context.translate(x, y);
         this.context.rotate(this._rotate);
-        this.context.drawImage(this._image, -width/2, -height/2, width, height);
+        this.context.drawImage(
+          this._image,
+          -width / 2,
+          -height / 2,
+          width,
+          height
+        );
         // context.restore();
         this.context.rotate(-this._rotate);
         this.context.translate(-x, -y);
@@ -102,77 +105,104 @@ $(function(){
       this.inputsend();
     },
     inputsend: function () {
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
     inputs: {
       image: {
-        type: "image",
-        description: "image to center and transform"
+        type: 'image',
+        description: 'image to center and transform',
       },
       background: {
-        type: "image",
-        description: "background image"
+        type: 'image',
+        description: 'background image',
       },
       width: {
-        type: "int",
-        description: "canvas width",
+        type: 'int',
+        description: 'canvas width',
         min: 1,
-        "default": 500
+        default: 500,
       },
       height: {
-        type: "int",
-        description: "canvas height",
+        type: 'int',
+        description: 'canvas height',
         min: 1,
-        "default": 500
+        default: 500,
       },
       scale: {
-        type: "float",
-        description: "scale percentage",
-        "default": 1.0
+        type: 'float',
+        description: 'scale percentage',
+        default: 1.0,
       },
       translateX: {
-        type: "float",
-        description: "translate x pixels",
-        "default": 0
+        type: 'float',
+        description: 'translate x pixels',
+        default: 0,
       },
       translateY: {
-        type: "float",
-        description: "translate y pixels",
-        "default": 0
+        type: 'float',
+        description: 'translate y pixels',
+        default: 0,
       },
       rotate: {
-        type: "float",
-        description: "rotate percentage",
-        "default": 0
+        type: 'float',
+        description: 'rotate percentage',
+        default: 0,
       },
       composite: {
-        type: "string",
-        description: "composite (source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, darker, copy, xor) and/or blend mode (Firefox 20 only as of April 2013: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity) ",
-        options: ['source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'darker', 'copy', 'xor', 
-          'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'],
-        "default": "source-over"
+        type: 'string',
+        description:
+          'composite (source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, darker, copy, xor) and/or blend mode (Firefox 20 only as of April 2013: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity) ',
+        options: [
+          'source-over',
+          'source-in',
+          'source-out',
+          'source-atop',
+          'destination-over',
+          'destination-in',
+          'destination-out',
+          'destination-atop',
+          'lighter',
+          'darker',
+          'copy',
+          'xor',
+          'normal',
+          'multiply',
+          'screen',
+          'overlay',
+          'darken',
+          'lighten',
+          'color-dodge',
+          'color-burn',
+          'hard-light',
+          'soft-light',
+          'difference',
+          'exclusion',
+          'hue',
+          'saturation',
+          'color',
+          'luminosity',
+        ],
+        default: 'source-over',
       },
       smoothing: {
-        type: "boolean",
-        description: "true for smooth image transforms, false for pixeley (only in firefox and chrome)",
-        "default": "true"
+        type: 'boolean',
+        description:
+          'true for smooth image transforms, false for pixeley (only in firefox and chrome)',
+        default: 'true',
       },
       // clear: {
       //   type: "bang",
       //   description: "clear the canvas"
       // },
       send: {
-        type: "bang",
-        description: "send the image"
-      }
+        type: 'bang',
+        description: 'send the image',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/image-triangle.js b/src/nodes/image-triangle.js
index 0efa5a8..8463e4d 100644
--- a/src/nodes/image-triangle.js
+++ b/src/nodes/image-triangle.js
@@ -1,16 +1,14 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["image-triangle"] = Iframework.NativeNodes["image"].extend({
-
+$(function () {
+  Iframework.NativeNodes['image-triangle'] = Iframework.NativeNodes[
+    'image'
+  ].extend({
     info: {
-      title: "triangle",
-      description: "draw a triangle"
-    },
-    initializeModule: function(){
-      
+      title: 'triangle',
+      description: 'draw a triangle',
     },
+    initializeModule: function () {},
     inputmatte: function (image) {
       this._matte = image;
       this._triggerRedraw = true;
@@ -30,29 +28,31 @@ $(function(){
       this._strokewidth = w;
       this.context.lineWidth = this._strokewidth;
     },
-    disconnectEdge: function(edge) {
+    disconnectEdge: function (edge) {
       // Called from Edge.disconnect();
-      if (edge.Target.id === "matte") {
+      if (edge.Target.id === 'matte') {
         this._matte = null;
         this._triggerRedraw = true;
       }
     },
     canvasSettings: function () {
-      if (this._fill === "") {
-        this.context.fillStyle = "none";
+      if (this._fill === '') {
+        this.context.fillStyle = 'none';
       } else {
         this.context.fillStyle = this._fill;
       }
-      if (this._stroke === "") {
-        this.context.strokeStyle = "none";
+      if (this._stroke === '') {
+        this.context.strokeStyle = 'none';
       } else {
         this.context.strokeStyle = this._stroke;
       }
       this.context.lineWidth = this._strokewidth;
     },
-    redraw: function(){
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
-      if (!this._point0 || !this._point1 || !this._point2) { return false; }
+      if (!this._point0 || !this._point1 || !this._point2) {
+        return false;
+      }
 
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
@@ -61,9 +61,9 @@ $(function(){
       var minY = Infinity;
       var maxX = 0;
       var maxY = 0;
-      for(var i=0; i<3; i++) {
-        var x = this["_point"+i][0];
-        var y = this["_point"+i][1];
+      for (var i = 0; i < 3; i++) {
+        var x = this['_point' + i][0];
+        var y = this['_point' + i][1];
         minX = Math.min(minX, x);
         minY = Math.min(minX, y);
         maxX = Math.max(maxX, x);
@@ -71,8 +71,8 @@ $(function(){
       }
       minX = Math.max(minX, 0);
       minY = Math.max(minY, 0);
-      maxX = Math.ceil(minX+maxX);
-      maxY = Math.ceil(minY+maxY);
+      maxX = Math.ceil(minX + maxX);
+      maxY = Math.ceil(minY + maxY);
       if (this.canvas.width !== maxX) {
         this.canvas.width = maxX;
         setSettings = true;
@@ -87,76 +87,78 @@ $(function(){
       // Fill
       this.context.beginPath();
       this.context.moveTo(this._point0[0], this._point0[1]);
-      for(i=1; i<3; i++) {
-        this.context.lineTo(this["_point"+i][0], this["_point"+i][1]);
+      for (i = 1; i < 3; i++) {
+        this.context.lineTo(this['_point' + i][0], this['_point' + i][1]);
       }
       this.context.closePath();
       // this.context.lineTo(this._point0[0], this._point0[1]);
-      if (this._fill && this._fill!=="") {
+      if (this._fill && this._fill !== '') {
         this.context.fill();
       }
       // Stroke
-      if (this._stroke && this._stroke!=="" && this._strokewidth && this._strokewidth>0) {
+      if (
+        this._stroke &&
+        this._stroke !== '' &&
+        this._strokewidth &&
+        this._strokewidth > 0
+      ) {
         this.context.stroke();
       }
       if (this._matte) {
-        this.context.globalCompositeOperation = "source-in";
+        this.context.globalCompositeOperation = 'source-in';
         this.context.drawImage(this._matte, 0, 0);
         // Iframework.util.fitAndCopy(this._matte, this.canvas);
-        this.context.globalCompositeOperation = "source-over";
+        this.context.globalCompositeOperation = 'source-over';
       }
       this.inputsend();
     },
     inputsend: function () {
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
     inputs: {
       matte: {
-        type: "image",
-        description: "image to cut out"
+        type: 'image',
+        description: 'image to cut out',
       },
       point0: {
-        type: "array:f2",
-        description: "x, y for point 0",
-        "default": [10, 10]
+        type: 'array:f2',
+        description: 'x, y for point 0',
+        default: [10, 10],
       },
       point1: {
-        type: "array:f2",
-        description: "x, y for point 1",
-        "default": [290,10]
+        type: 'array:f2',
+        description: 'x, y for point 1',
+        default: [290, 10],
       },
       point2: {
-        type: "array:f2",
-        description: "x, y for point 2",
-        "default": [150,290]
+        type: 'array:f2',
+        description: 'x, y for point 2',
+        default: [150, 290],
       },
       fill: {
-        type: "color",
-        description: "fill color",
-        "default": "black"
+        type: 'color',
+        description: 'fill color',
+        default: 'black',
       },
       stroke: {
-        type: "color",
-        description: "stroke color",
-        "default": ""
+        type: 'color',
+        description: 'stroke color',
+        default: '',
       },
       strokewidth: {
-        type: "float",
-        description: "stroke width",
-        "default": 1
+        type: 'float',
+        description: 'stroke width',
+        default: 1,
       },
       send: {
-        type: "bang",
-        description: "send the combined canvas"
-      }
+        type: 'bang',
+        description: 'send the combined canvas',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/seriously-exposure.js b/src/nodes/seriously-exposure.js
index 76ba932..532fe53 100644
--- a/src/nodes/seriously-exposure.js
+++ b/src/nodes/seriously-exposure.js
@@ -2,42 +2,39 @@
 
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["seriously-exposure"] = Iframework.NativeNodes["seriously"].extend({
-
+$(function () {
+  Iframework.NativeNodes['seriously-exposure'] = Iframework.NativeNodes[
+    'seriously'
+  ].extend({
     info: {
-      title: "exposure",
-      description: "Seriously.js (WebGL) image exposure"
+      title: 'exposure',
+      description: 'Seriously.js (WebGL) image exposure',
     },
     inputexposure: function (f) {
-      this.setParam("exposure", f);
+      this.setParam('exposure', f);
     },
     inputs: {
       image: {
-        type: "image",
-        description: "input image",
-        maxEdges: 1
+        type: 'image',
+        description: 'input image',
+        maxEdges: 1,
       },
       exposure: {
-        type: "float",
-        description: "exposure amount",
-        "min": 0,
-        "max": 1,
-        "default": 0
+        type: 'float',
+        description: 'exposure amount',
+        min: 0,
+        max: 1,
+        default: 0,
       },
       send: {
-        type: "bang",
-        description: "send the processed canvas"
-      }
+        type: 'bang',
+        description: 'send the processed canvas',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/seriously-noise.js b/src/nodes/seriously-noise.js
index 0bd6e83..f1c360f 100644
--- a/src/nodes/seriously-noise.js
+++ b/src/nodes/seriously-noise.js
@@ -2,50 +2,47 @@
 
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["seriously-noise"] = Iframework.NativeNodes["seriously"].extend({
-
+$(function () {
+  Iframework.NativeNodes['seriously-noise'] = Iframework.NativeNodes[
+    'seriously'
+  ].extend({
     info: {
-      title: "noise",
-      description: "Seriously.js (WebGL) image noise"
+      title: 'noise',
+      description: 'Seriously.js (WebGL) image noise',
     },
     inputamount: function (f) {
-      this.setParam("amount", f);
+      this.setParam('amount', f);
     },
     inputtimer: function (f) {
-      this.setParam("timer", f);
+      this.setParam('timer', f);
     },
     inputs: {
       image: {
-        type: "image",
-        description: "input image",
-        maxEdges: 1
+        type: 'image',
+        description: 'input image',
+        maxEdges: 1,
       },
       amount: {
-        type: "float",
-        description: "noise amount",
-        "min": 0,
-        "max": 1,
-        "default": 0.2
+        type: 'float',
+        description: 'noise amount',
+        min: 0,
+        max: 1,
+        default: 0.2,
       },
       timer: {
-        type: "int",
-        description: "timer to change noise",
-        "default": 0
+        type: 'int',
+        description: 'timer to change noise',
+        default: 0,
       },
       send: {
-        type: "bang",
-        description: "send the processed canvas"
-      }
+        type: 'bang',
+        description: 'send the processed canvas',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/seriously-vignette.js b/src/nodes/seriously-vignette.js
index e468352..1dcc892 100644
--- a/src/nodes/seriously-vignette.js
+++ b/src/nodes/seriously-vignette.js
@@ -2,41 +2,38 @@
 
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["seriously-vignette"] = Iframework.NativeNodes["seriously"].extend({
-
+$(function () {
+  Iframework.NativeNodes['seriously-vignette'] = Iframework.NativeNodes[
+    'seriously'
+  ].extend({
     info: {
-      title: "vignette",
-      description: "Seriously.js (WebGL) image vignette"
+      title: 'vignette',
+      description: 'Seriously.js (WebGL) image vignette',
     },
     inputamount: function (f) {
-      this.setParam("amount", f);
+      this.setParam('amount', f);
     },
     inputs: {
       image: {
-        type: "image",
-        description: "input image",
-        maxEdges: 1
+        type: 'image',
+        description: 'input image',
+        maxEdges: 1,
       },
       amount: {
-        type: "float",
-        description: "vignette amount",
-        "min": 0,
-        "default": 1
+        type: 'float',
+        description: 'vignette amount',
+        min: 0,
+        default: 1,
       },
       send: {
-        type: "bang",
-        description: "send the combined canvas"
-      }
+        type: 'bang',
+        description: 'send the combined canvas',
+      },
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
-
+        type: 'image',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/seriously.js b/src/nodes/seriously.js
index 3525bc8..c718fcf 100644
--- a/src/nodes/seriously.js
+++ b/src/nodes/seriously.js
@@ -2,16 +2,14 @@
 
 // extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<canvas id="canvas-<%= id %>" class="canvas" width="500" height="500" style="max-width:100%;" />'+
+$(function () {
+  var template =
+    '<canvas id="canvas-<%= id %>" class="canvas" width="500" height="500" style="max-width:100%;" />' +
     '<div class="info" />';
-    // '<input type="checkbox" checked="checked" class="showpreview" id="showpreview-<%= id %>" />'+
-    // '<label for="showpreview-<%= id %>">show preview</label>';
-
-  Iframework.NativeNodes["seriously"] = Iframework.NodeBoxNativeView.extend({
+  // '<input type="checkbox" checked="checked" class="showpreview" id="showpreview-<%= id %>" />'+
+  // '<label for="showpreview-<%= id %>">show preview</label>';
 
+  Iframework.NativeNodes['seriously'] = Iframework.NodeBoxNativeView.extend({
     template: _.template(template),
     canvas: null,
     context: null,
@@ -19,24 +17,24 @@ $(function(){
     // events: {
     //   "click .showpreview": "togglePreview"
     // },
-    initializeCategory: function() {
+    initializeCategory: function () {
       if (window.Seriously) {
-        this.canvas = this.$(".canvas")[0];
+        this.canvas = this.$('.canvas')[0];
 
         this._seriously = new Seriously();
         this.initializeModule();
       } else {
         var self = this;
         yepnope({
-          load: "libs/seriously.min.js",
+          load: 'libs/seriously.min.js',
           complete: function () {
             self.initializeCategory();
-          }
+          },
         });
       }
     },
-    effectName: "",
-    initializeModule: function(){
+    effectName: '',
+    initializeModule: function () {
       if (this._seriously) {
         this._ready = true;
         if (this._deferStart && this._image) {
@@ -51,17 +49,20 @@ $(function(){
     },
     // loadSeriouslyEffect: function(effect) {
     // },
-    scale: function(){
+    scale: function () {
       // canvas is shown at this scaling factor
       // useful for absolute positioning other elements over the canvas
-      return this.$(".canvas").width() / this.canvas.width;
+      return this.$('.canvas').width() / this.canvas.width;
     },
     _deferStart: false,
     inputimage: function (image) {
       if (image !== this._image) {
         this._image = image;
       }
-      if (this.canvas.width !== this._image.width || this.canvas.height !== this._image.height) {
+      if (
+        this.canvas.width !== this._image.width ||
+        this.canvas.height !== this._image.height
+      ) {
         this.canvas.width = this._image.width;
         this.canvas.height = this._image.height;
         // TODO reset Seriously
@@ -80,10 +81,10 @@ $(function(){
           // No Seriously.go() because Meemoo has own loop
 
           for (var name in this._params) {
-            this._effect[name] = this._params[name];            
+            this._effect[name] = this._params[name];
           }
-          if (this._params["amount"]) {
-            this._effect.amount = this._params["amount"];
+          if (this._params['amount']) {
+            this._effect.amount = this._params['amount'];
           }
 
           this._triggerRedraw = true;
@@ -101,9 +102,9 @@ $(function(){
       this._triggerRedraw = true;
     },
     inputsend: function () {
-      this.send("image", this.canvas);
+      this.send('image', this.canvas);
     },
-    redraw: function(timestamp){
+    redraw: function (timestamp) {
       if (this._source && this._target) {
         this._source.update();
         this._target.render();
@@ -112,15 +113,15 @@ $(function(){
     },
     outputs: {
       image: {
-        type: "image"
-      }
-    }
+        type: 'image',
+      },
+    },
     // showCanvas: function(){
     //   $(this.canvas).attr({
     //     "class": "canvas",
     //     "id": "canvas-"+this.model.id,
     //     "style": "max-width:100%"
-    //   });      
+    //   });
     //   this.$el.prepend(this.canvas);
     // }
     //,
@@ -131,8 +132,5 @@ $(function(){
     //     this.$("canvas").remove();
     //   }
     // }
-
   });
-
-
 });
diff --git a/src/nodes/string-markov.js b/src/nodes/string-markov.js
index 5123fc9..057c0bb 100644
--- a/src/nodes/string-markov.js
+++ b/src/nodes/string-markov.js
@@ -1,129 +1,129 @@
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
+$(function () {
+  // Thanks https://raw.github.com/BrianHicks/Markov-Generator/master/markov.js
 
-
-
-// Thanks https://raw.github.com/BrianHicks/Markov-Generator/master/markov.js
-
-/*sample regexes:
+  /*sample regexes:
 
  /./g - every letter
  /../g - every two letter
  /[.,?"();\-!':—^\w]+ /g - every word
- /([.,?"();\-!':—^\w]+ ){2}/g - every two words 
+ /([.,?"();\-!':—^\w]+ ){2}/g - every two words
 
-*/ 
-var markov = function(input, type, reg) {
-  var data, s;
-  if (reg===undefined) {
-    reg = /[.,?"();\-!':—^\w]+ /g;
-  }
-  if (type == "string" || type === undefined) {
-    data = {};
-    s = input.match(reg);
-    for (var i = 0; i < s.length-1; i++) {
-      if(s[i] in data) {
-        if (s[i+1] in data[s[i]]) {
-          data[s[i]][s[i+1]]++;
+*/
+  var markov = function (input, type, reg) {
+    var data, s;
+    if (reg === undefined) {
+      reg = /[.,?"();\-!':—^\w]+ /g;
+    }
+    if (type == 'string' || type === undefined) {
+      data = {};
+      s = input.match(reg);
+      for (var i = 0; i < s.length - 1; i++) {
+        if (s[i] in data) {
+          if (s[i + 1] in data[s[i]]) {
+            data[s[i]][s[i + 1]]++;
+          } else {
+            data[s[i]][s[i + 1]] = 1;
+          }
         } else {
-          data[s[i]][s[i+1]] = 1;
+          data[s[i]] = {};
+          data[s[i]][s[i + 1]] = 1;
         }
-      } else {
-        data[s[i]] = {};
-        data[s[i]][s[i+1]] = 1;
       }
+    } else if (type == 'json') {
+      data = JSON.parse(input);
     }
-  } else if (type == "json") {
-    data = JSON.parse(input);
-  }
-  this.data = data;
-  this.length = s.length;
-  
-  var gen = function(l) {
-    var sanitycheck = false;
-    var out = [];
-    while (sanitycheck === false) {
-      sanitycheck = true;
-      var rProperty = findRandomProperty(data);
-      var rList = expand(rProperty);
-      var l1 = rList.length;
-      out[0] = rList[Math.round(Math.random() * l1)];
-      if (typeof out[0] == "undefined") { sanitycheck = false; }
-      if (sanitycheck) {
-        for (var i = 0; i < l-1; i++) {
-          var usableLength = expand(data[out[i]]).length-1;
-          var randomInt = Math.round(Math.random() * usableLength);
-          var nextLetter = expand(data[out[i]])[randomInt];
-          out.push(nextLetter);
+    this.data = data;
+    this.length = s.length;
+
+    var gen = function (l) {
+      var sanitycheck = false;
+      var out = [];
+      while (sanitycheck === false) {
+        sanitycheck = true;
+        var rProperty = findRandomProperty(data);
+        var rList = expand(rProperty);
+        var l1 = rList.length;
+        out[0] = rList[Math.round(Math.random() * l1)];
+        if (typeof out[0] == 'undefined') {
+          sanitycheck = false;
+        }
+        if (sanitycheck) {
+          for (var i = 0; i < l - 1; i++) {
+            var usableLength = expand(data[out[i]]).length - 1;
+            var randomInt = Math.round(Math.random() * usableLength);
+            var nextLetter = expand(data[out[i]])[randomInt];
+            out.push(nextLetter);
+          }
         }
       }
-    }
-    return out.join("");
-  };
-  this.gen = gen;
-  
-  var findRandomProperty = function(o) {
-    var l1 = 0;
-    var i;
-    for (i in o) {
-      l1++;
-    }
-    var r1 = Math.round(Math.random() * l1);
-    var l2 = 0;
-    for (i in o) {
-      l2++;
-      if (l2 == r1) {
-        return o[i];
+      return out.join('');
+    };
+    this.gen = gen;
+
+    var findRandomProperty = function (o) {
+      var l1 = 0;
+      var i;
+      for (i in o) {
+        l1++;
       }
-    }
-  };
-  
-  var expand = function(obj) {
-    oArray = [];
-    for (var prop in obj) {
-      for (var i = 0; i < obj[prop]; i++) {
-        oArray.push(prop);
+      var r1 = Math.round(Math.random() * l1);
+      var l2 = 0;
+      for (i in o) {
+        l2++;
+        if (l2 == r1) {
+          return o[i];
+        }
       }
-    }
-    return oArray;
-  };
-  
-  var getJson = function() {
-    if (typeof JSON === "object") {
-      return JSON.stringify(data);
-    }
-  };
-  this.getJson = getJson;
-};
-
+    };
 
-  var template = 
-    '<div class="chain" style="font-size:110%;"></div>'+
-    '<button class="gen">generate</button>'+
-    '<span class="info"></span>';
+    var expand = function (obj) {
+      oArray = [];
+      for (var prop in obj) {
+        for (var i = 0; i < obj[prop]; i++) {
+          oArray.push(prop);
+        }
+      }
+      return oArray;
+    };
 
+    var getJson = function () {
+      if (typeof JSON === 'object') {
+        return JSON.stringify(data);
+      }
+    };
+    this.getJson = getJson;
+  };
 
-  Iframework.NativeNodes["string-markov"] = Iframework.NativeNodes["string"].extend({
+  var template =
+    '<div class="chain" style="font-size:110%;"></div>' +
+    '<button class="gen">generate</button>' +
+    '<span class="info"></span>';
 
+  Iframework.NativeNodes['string-markov'] = Iframework.NativeNodes[
+    'string'
+  ].extend({
     template: _.template(template),
     info: {
-      title: "markov",
-      description: "makes a markov chain based on seed text, useful for gibberish, a kind of cutup method.",
-      author: "BrianHicks"
+      title: 'markov',
+      description:
+        'makes a markov chain based on seed text, useful for gibberish, a kind of cutup method.',
+      author: 'BrianHicks',
     },
     events: {
-      "click .gen":  "inputgenerate"
-    },
-    initializeModule: function(){
+      'click .gen': 'inputgenerate',
     },
+    initializeModule: function () {},
     inputgenerate: function () {
-      if (!this._string) { return; }
+      if (!this._string) {
+        return;
+      }
       var s = this._string.toLowerCase();
       s = s.replace(/[`’]/g, "'");
       s = s.replace(/[“”]/g, '"');
       if (!this._punctuation) {
-        s = s.replace(/[\.\/\^\*,#!$%&;:{}=_~()?"]/g,"");
+        s = s.replace(/[\.\/\^\*,#!$%&;:{}=_~()?"]/g, '');
       }
       var m = new markov(s);
       var out = m.gen(this._len);
@@ -132,40 +132,46 @@ var markov = function(input, type, reg) {
         out = out.replace(/[.?!]\s([a-z])/g, function (match) {
           return match.toUpperCase();
         });
-        out = out.substr(0,1).toUpperCase() + out.substr(1);
+        out = out.substr(0, 1).toUpperCase() + out.substr(1);
       }
-      this.$(".chain").text(out);
-      this.$(".info").text("(input " + m.length + " words; output " + this._len + " words, " + out.length + " characters)");
-      this.send("chain", out);
+      this.$('.chain').text(out);
+      this.$('.info').text(
+        '(input ' +
+          m.length +
+          ' words; output ' +
+          this._len +
+          ' words, ' +
+          out.length +
+          ' characters)'
+      );
+      this.send('chain', out);
     },
     inputs: {
       string: {
-        type: "string",
-        description: "the string that seeds the chain"
+        type: 'string',
+        description: 'the string that seeds the chain',
       },
       len: {
-        type: "int",
-        description: "how many words in the chain",
-        "default": 20
+        type: 'int',
+        description: 'how many words in the chain',
+        default: 20,
       },
       punctuation: {
-        type: "boolean",
-        description: "maintain punctuation, which can make interesting sentences",
-        "default": true
+        type: 'boolean',
+        description:
+          'maintain punctuation, which can make interesting sentences',
+        default: true,
       },
       generate: {
-        type: "bang",
-        description: "make a chain"
-      }
+        type: 'bang',
+        description: 'make a chain',
+      },
     },
     outputs: {
       chain: {
-        type: "string",
-        description: "the generated markov chain"
-      }
-    }
-
+        type: 'string',
+        description: 'the generated markov chain',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/string.js b/src/nodes/string.js
index e50fc1c..f1dc979 100644
--- a/src/nodes/string.js
+++ b/src/nodes/string.js
@@ -1,20 +1,14 @@
 // extends src/node-box-native-view.js
 
-$(function(){
-
+$(function () {
   var template = '<div class="info" />';
 
-  Iframework.NativeNodes["string"] = Iframework.NodeBoxNativeView.extend({
-
+  Iframework.NativeNodes['string'] = Iframework.NodeBoxNativeView.extend({
     template: _.template(template),
     info: {
-      title: "string",
-      description: "extend me"
+      title: 'string',
+      description: 'extend me',
     },
-    initializeCategory: function() {
-    }
-
+    initializeCategory: function () {},
   });
-
-
 });
diff --git a/src/nodes/subgraph-input.js b/src/nodes/subgraph-input.js
index d5aefd8..7ef462d 100644
--- a/src/nodes/subgraph-input.js
+++ b/src/nodes/subgraph-input.js
@@ -1,33 +1,30 @@
 // extends src/nodes/graph.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["subgraph-input"] = Iframework.NativeNodes["subgraph"].extend({
-
+$(function () {
+  Iframework.NativeNodes['subgraph-input'] = Iframework.NativeNodes[
+    'subgraph'
+  ].extend({
     info: {
-      title: "input",
-      description: "publish input for when this graph is a subgraph"
+      title: 'input',
+      description: 'publish input for when this graph is a subgraph',
     },
     inputlabel: function (label) {
       this.$el.text(label);
-      this.model.trigger("changelabel", label);
+      this.model.trigger('changelabel', label);
     },
     inputdata: function (data) {
-      this.send("data", data);
+      this.send('data', data);
     },
     inputs: {
       label: {
-        type: "string",
-        "default": "in"
-      }
+        type: 'string',
+        default: 'in',
+      },
     },
     outputs: {
       data: {
-        type: "all"
-      }
-    }
-
+        type: 'all',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/subgraph-output.js b/src/nodes/subgraph-output.js
index 632c4b7..8372067 100644
--- a/src/nodes/subgraph-output.js
+++ b/src/nodes/subgraph-output.js
@@ -1,36 +1,32 @@
 // extends src/nodes/graph.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["subgraph-output"] = Iframework.NativeNodes["subgraph"].extend({
-
+$(function () {
+  Iframework.NativeNodes['subgraph-output'] = Iframework.NativeNodes[
+    'subgraph'
+  ].extend({
     info: {
-      title: "output",
-      description: "publish output for when this graph is a subgraph"
+      title: 'output',
+      description: 'publish output for when this graph is a subgraph',
     },
     inputlabel: function (label) {
       this.$el.text(label);
-      this.model.trigger("changelabel", label);
+      this.model.trigger('changelabel', label);
     },
     inputdata: function (data) {
       if (this.model.parentGraph.isSubgraph) {
         // this.send("data", data);
-        this.model.trigger("subgraphSend", data);
+        this.model.trigger('subgraphSend', data);
       }
     },
     inputs: {
       label: {
-        type: "string",
-        "default": "out"
+        type: 'string',
+        default: 'out',
       },
       data: {
-        type: "all"
-      }
+        type: 'all',
+      },
     },
-    outputs: {
-    }
-
+    outputs: {},
   });
-
-
 });
diff --git a/src/nodes/subgraph-subgraph.js b/src/nodes/subgraph-subgraph.js
index 3bf4584..0146998 100644
--- a/src/nodes/subgraph-subgraph.js
+++ b/src/nodes/subgraph-subgraph.js
@@ -1,68 +1,108 @@
 // extends src/nodes/graph.js which extends src/node-box-native-view.js
 
-$(function(){
-
+$(function () {
   var template = '<button class="open">view subgraph</button>';
 
-  Iframework.NativeNodes["subgraph-subgraph"] = Iframework.NativeNodes["subgraph"].extend({
-
+  Iframework.NativeNodes['subgraph-subgraph'] = Iframework.NativeNodes[
+    'subgraph'
+  ].extend({
     info: {
-      title: "subgraph",
-      description: "encapsulate some nodes into a nested macro subgraph"
+      title: 'subgraph',
+      description: 'encapsulate some nodes into a nested macro subgraph',
     },
     template: _.template(template),
     events: {
-      "click .open": "openSubgraph"
+      'click .open': 'openSubgraph',
     },
-    initializeModule: function(){
-      var graph = this.model.get("state").graph !== undefined ? this.model.get("state").graph : {"info":{"author":"meemoo","title":"subgraph","description":"Meemoo macro subgraph","parents":[],"url":""},"nodes":[{"id":0,"src":"meemoo:subgraph/input","x":103,"y":91,"w":80,"h":60,"state":{"label":"in"}},{"id":1,"src":"meemoo:subgraph/output","x":667,"y":486,"w":80,"h":60,"state":{"label":"out"}}],"edges":[]};
+    initializeModule: function () {
+      var graph =
+        this.model.get('state').graph !== undefined
+          ? this.model.get('state').graph
+          : {
+              info: {
+                author: 'meemoo',
+                title: 'subgraph',
+                description: 'Meemoo macro subgraph',
+                parents: [],
+                url: '',
+              },
+              nodes: [
+                {
+                  id: 0,
+                  src: 'meemoo:subgraph/input',
+                  x: 103,
+                  y: 91,
+                  w: 80,
+                  h: 60,
+                  state: {label: 'in'},
+                },
+                {
+                  id: 1,
+                  src: 'meemoo:subgraph/output',
+                  x: 667,
+                  y: 486,
+                  w: 80,
+                  h: 60,
+                  state: {label: 'out'},
+                },
+              ],
+              edges: [],
+            };
       graph.parentGraph = this.model.parentGraph;
       this.graph = new Iframework.Graph(graph);
-      this.model.get("state").graph = this.graph;
+      this.model.get('state').graph = this.graph;
 
       this.graph.initializeView();
 
       // Sync i/o ports
-      this.graph.get("nodes").each(this.nodeAdded, this);
-      this.graph.get("nodes").on("add", this.nodeAdded, this);
-      this.graph.get("nodes").on("remove", this.nodeRemoved, this);
+      this.graph.get('nodes').each(this.nodeAdded, this);
+      this.graph.get('nodes').on('add', this.nodeAdded, this);
+      this.graph.get('nodes').on('remove', this.nodeRemoved, this);
     },
     inputlabel: function (label) {
-      this.model.view.$(".node-box-title-name").text( label );
+      this.model.view.$('.node-box-title-name').text(label);
     },
     nodeAdded: function (node) {
       // Check if i/o
       var port;
-      if (node.get("src") === "meemoo:subgraph/input") {
+      if (node.get('src') === 'meemoo:subgraph/input') {
         port = this.model.addInput({
-          id: node.id,        
-          name: (node.get("state").label ? node.get("state").label : "in")
+          id: node.id,
+          name: node.get('state').label ? node.get('state').label : 'in',
         });
-      } else if (node.get("src") === "meemoo:subgraph/output") {
+      } else if (node.get('src') === 'meemoo:subgraph/output') {
         port = this.model.addOutput({
           id: node.id,
-          name: (node.get("state").label ? node.get("state").label : "out")
+          name: node.get('state').label ? node.get('state').label : 'out',
         });
         // node.on("send:"+node.id, function(value){
-        node.on("subgraphSend", function(value){
-          this.send(node.id, value);
-        }, this);
+        node.on(
+          'subgraphSend',
+          function (value) {
+            this.send(node.id, value);
+          },
+          this
+        );
       }
       if (port) {
         // Listen for changes to label
-        node.on("changelabel", function(label) {
-          if (port.view) {
-            port.view.$(".label").text(label);
-          }
-        }, this);
+        node.on(
+          'changelabel',
+          function (label) {
+            if (port.view) {
+              port.view.$('.label').text(label);
+            }
+          },
+          this
+        );
       }
     },
     nodeRemoved: function (node) {
       // Check if i/o
       var port;
-      if (node.get("src") === "meemoo:subgraph/input") {
+      if (node.get('src') === 'meemoo:subgraph/input') {
         port = this.model.Inputs.get(node.id);
-      } else if (node.get("src") === "meemoo:subgraph/output") {
+      } else if (node.get('src') === 'meemoo:subgraph/output') {
         port = this.model.Outputs.get(node.id);
       }
       if (port) {
@@ -79,12 +119,12 @@ $(function(){
     },
     receive: function (name, value) {
       // HACK
-      if (name === "label") {
+      if (name === 'label') {
         this.inputlabel(value);
         return;
       }
       // Forward to subgraph
-      var fwd = this.graph.get("nodes").get(name);
+      var fwd = this.graph.get('nodes').get(name);
       if (fwd && fwd.view && fwd.view.Native) {
         fwd.view.Native.inputdata(value);
       }
@@ -94,14 +134,10 @@ $(function(){
     },
     inputs: {
       label: {
-        type: "string",
-        "default": "subgraph"
-      }
+        type: 'string',
+        default: 'subgraph',
+      },
     },
-    outputs: {
-    }
-
+    outputs: {},
   });
-
-
 });
diff --git a/src/nodes/subgraph.js b/src/nodes/subgraph.js
index 4777570..ae4d29b 100644
--- a/src/nodes/subgraph.js
+++ b/src/nodes/subgraph.js
@@ -1,20 +1,14 @@
 // extends src/node-box-native-view.js
 
-$(function(){
-
+$(function () {
   var template = '<div class="info" />';
 
-  Iframework.NativeNodes["subgraph"] = Iframework.NodeBoxNativeView.extend({
-
+  Iframework.NativeNodes['subgraph'] = Iframework.NodeBoxNativeView.extend({
     template: _.template(template),
     info: {
-      title: "subgraph",
-      description: "extend me"
+      title: 'subgraph',
+      description: 'extend me',
     },
-    initializeCategory: function() {
-    }
-
+    initializeCategory: function () {},
   });
-
-
 });
diff --git a/src/nodes/time-countdown.js b/src/nodes/time-countdown.js
index 4317a49..d7dac9e 100644
--- a/src/nodes/time-countdown.js
+++ b/src/nodes/time-countdown.js
@@ -1,42 +1,41 @@
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="progressbar"></div>'+
-    '<button class="start">start</button>'+
-    '<button class="stop">stop</button>'+
+$(function () {
+  var template =
+    '<div class="progressbar"></div>' +
+    '<button class="start">start</button>' +
+    '<button class="stop">stop</button>' +
     '<div class="info"></div>';
 
-  Iframework.NativeNodes["time-countdown"] = Iframework.NativeNodes["time"].extend({
-
+  Iframework.NativeNodes['time-countdown'] = Iframework.NativeNodes[
+    'time'
+  ].extend({
     template: _.template(template),
     info: {
-      title: "countdown",
-      description: "countdown to bang"
+      title: 'countdown',
+      description: 'countdown to bang',
     },
     events: {
-      "click .start": "inputstart",
-      "click .stop":  "inputstop"
+      'click .start': 'inputstart',
+      'click .stop': 'inputstop',
     },
-    initializeModule: function(){
-      this.setupProgressbar(".progressbar", 100);
-      this.$("button").button();
+    initializeModule: function () {
+      this.setupProgressbar('.progressbar', 100);
+      this.$('button').button();
     },
-    inputduration: function(s){
+    inputduration: function (s) {
       this._duration = s * 1000;
     },
     _running: false,
     _startme: false,
-    inputstart: function(){
+    inputstart: function () {
       this._startme = true;
     },
-    inputstop: function(){
+    inputstop: function () {
       this._running = false;
     },
-    redraw: function(){
-    },
-    _lastDisplay: "",
+    redraw: function () {},
+    _lastDisplay: '',
     renderAnimationFrame: function (timestamp) {
       if (this._startme) {
         this._start = timestamp;
@@ -47,42 +46,39 @@ $(function(){
         var delta = timestamp - this._start;
         if (delta <= this._duration) {
           // Only display 1/100 of seconds
-          var display = Math.round((this._duration-delta)/10)/100;
+          var display = Math.round((this._duration - delta) / 10) / 100;
           if (display !== this._lastDisplay) {
-            this.progress( 100-(delta/this._duration*100) );
-            this.$(".info").text(display+"s");
+            this.progress(100 - (delta / this._duration) * 100);
+            this.$('.info').text(display + 's');
             this._lastDisplay = display;
           }
         } else {
           this.progress(0);
-          this.$(".info").text(this._duration/1000+"s");
-          this.send("bang", "!");
+          this.$('.info').text(this._duration / 1000 + 's');
+          this.send('bang', '!');
           this._running = false;
         }
       }
     },
     inputs: {
       duration: {
-        type: "float",
-        description: "seconds to countdown",
-        "default": 3.0
+        type: 'float',
+        description: 'seconds to countdown',
+        default: 3.0,
       },
       start: {
-        type: "bang",
-        description: "start tween"
+        type: 'bang',
+        description: 'start tween',
       },
       stop: {
-        type: "bang",
-        description: "stop tween"
-      }
+        type: 'bang',
+        description: 'stop tween',
+      },
     },
     outputs: {
       bang: {
-        type: "bang"
-      }
-    }
-
+        type: 'bang',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/time-delay.js b/src/nodes/time-delay.js
index 8bb2483..c590465 100644
--- a/src/nodes/time-delay.js
+++ b/src/nodes/time-delay.js
@@ -1,24 +1,21 @@
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["time-delay"] = Iframework.NativeNodes["time"].extend({
-
+$(function () {
+  Iframework.NativeNodes['time-delay'] = Iframework.NativeNodes['time'].extend({
     info: {
-      title: "delay",
-      description: "holds x values until the next one comes"
-    },
-    initializeModule: function(){
+      title: 'delay',
+      description: 'holds x values until the next one comes',
     },
+    initializeModule: function () {},
     _data: [],
     inputdata: function (data) {
       this._data.unshift(data);
       if (this._data.length >= this._hold) {
-        this.send("data", this._data.pop());
+        this.send('data', this._data.pop());
       }
     },
     inputhold: function (hold) {
-      this.$(".info").text(hold);
+      this.$('.info').text(hold);
       this._hold = hold;
       if (this._data.length >= this._hold) {
         this._data = this._data.slice(0, hold);
@@ -26,22 +23,19 @@ $(function(){
     },
     inputs: {
       data: {
-        type: "all",
-        description: "data to hold"
+        type: 'all',
+        description: 'data to hold',
       },
       hold: {
-        type: "int",
-        description: "how long to hold the value",
-        "default": 1
-      }
+        type: 'int',
+        description: 'how long to hold the value',
+        default: 1,
+      },
     },
     outputs: {
       data: {
-        type: "all"
-      }
-    }
-
+        type: 'all',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/time-metronome.js b/src/nodes/time-metronome.js
index f971175..f785469 100644
--- a/src/nodes/time-metronome.js
+++ b/src/nodes/time-metronome.js
@@ -1,86 +1,84 @@
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="blinklights">stopped</div>'+
-    '<div class="info"></div>'+
-    '<button class="start">start</button>'+
+$(function () {
+  var template =
+    '<div class="blinklights">stopped</div>' +
+    '<div class="info"></div>' +
+    '<button class="start">start</button>' +
     '<button class="stop">stop</button>';
 
-  Iframework.NativeNodes["time-metronome"] = Iframework.NativeNodes["time"].extend({
-
+  Iframework.NativeNodes['time-metronome'] = Iframework.NativeNodes[
+    'time'
+  ].extend({
     template: _.template(template),
     info: {
-      title: "metronome",
-      description: "metronome tick tock"
+      title: 'metronome',
+      description: 'metronome tick tock',
     },
     events: {
-      "click .start" : "inputstart",
-      "click .stop"  : "inputstop"
-    },
-    initializeModule: function(){
+      'click .start': 'inputstart',
+      'click .stop': 'inputstop',
     },
+    initializeModule: function () {},
     _ms: 500,
-    inputbpm: function(bpm){
+    inputbpm: function (bpm) {
       var restart = false;
       if (this._interval) {
         window.clearInterval(this._interval);
         restart = true;
       }
-      this._ms = 1000 / bpm * 60;
-      this.$(".info").text(bpm+"bpm, "+Math.round(this._ms*100)/100+"ms");
-      if (restart){
-        this.inputstart();        
+      this._ms = (1000 / bpm) * 60;
+      this.$('.info').text(
+        bpm + 'bpm, ' + Math.round(this._ms * 100) / 100 + 'ms'
+      );
+      if (restart) {
+        this.inputstart();
       }
     },
     _interval: null,
-    inputstart: function(){
+    inputstart: function () {
       if (this._interval) {
         window.clearInterval(this._interval);
       }
       var self = this;
-      this._interval = window.setInterval(function(){
+      this._interval = window.setInterval(function () {
         self.sendbeat();
       }, this._ms);
-      this.$(".blinklights").text("started");
+      this.$('.blinklights').text('started');
     },
-    inputstop: function(){
+    inputstop: function () {
       if (this._interval) {
         window.clearInterval(this._interval);
       }
-      this.$(".blinklights").text("stopped");
+      this.$('.blinklights').text('stopped');
     },
-    sendbeat: function(){
-      this.send("bang", "!");      
+    sendbeat: function () {
+      this.send('bang', '!');
     },
-    remove: function(){
+    remove: function () {
       if (this._interval) {
         window.clearInterval(this._interval);
       }
     },
     inputs: {
       bpm: {
-        type: "float",
-        description: "beats per minute",
-        "default": 120
+        type: 'float',
+        description: 'beats per minute',
+        default: 120,
       },
       start: {
-        type: "bang",
-        description: "start tween"
+        type: 'bang',
+        description: 'start tween',
       },
       stop: {
-        type: "bang",
-        description: "stop tween"
-      }
+        type: 'bang',
+        description: 'stop tween',
+      },
     },
     outputs: {
       bang: {
-        type: "bang"
-      }
-    }
-
+        type: 'bang',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/time-smooth.js b/src/nodes/time-smooth.js
index 8f00f71..f755e13 100644
--- a/src/nodes/time-smooth.js
+++ b/src/nodes/time-smooth.js
@@ -1,56 +1,52 @@
 // extends src/nodes/util.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["time-smooth"] = Iframework.NativeNodes["time"].extend({
-
-    info: {
-      title: "smooth",
-      description: "smooth changes in numbers"
-    },
-    initializeModule: function(){
-    },
-    _active: false,
-    _in: 0,
-    _out: 0,
-    inputnumber: function(number){
-      this._active = true;
-      this._in = number;
-      this._inR = Math.round(number*100000)/100000;
-    },
-    _last: 0,
-    renderAnimationFrame: function (timestamp) {
-      // Get a tick from GraphView.renderAnimationFrame()
-      if (this._active) {
-        this._out += (this._in - this._out) * this._speed;
-        var rounded = Math.round(this._out*100000)/100000;
-        this.send("number", rounded);
-        if (rounded === this._inR) {
-          this._active = false;
+$(function () {
+  Iframework.NativeNodes['time-smooth'] = Iframework.NativeNodes['time'].extend(
+    {
+      info: {
+        title: 'smooth',
+        description: 'smooth changes in numbers',
+      },
+      initializeModule: function () {},
+      _active: false,
+      _in: 0,
+      _out: 0,
+      inputnumber: function (number) {
+        this._active = true;
+        this._in = number;
+        this._inR = Math.round(number * 100000) / 100000;
+      },
+      _last: 0,
+      renderAnimationFrame: function (timestamp) {
+        // Get a tick from GraphView.renderAnimationFrame()
+        if (this._active) {
+          this._out += (this._in - this._out) * this._speed;
+          var rounded = Math.round(this._out * 100000) / 100000;
+          this.send('number', rounded);
+          if (rounded === this._inR) {
+            this._active = false;
+          }
         }
-      }
-    },
-    redraw: function(timestamp){
-      this.$(".info").text(this._count);
-    },
-    inputs: {
-      number: {
-        type: "float",
-        description: "number to smooth"
       },
-      speed: {
-        type: "float",
-        description: "percent per frame",
-        "default": 0.1
-      }
-    },
-    outputs: {
-      number: {
-        type: "float"
-      }
+      redraw: function (timestamp) {
+        this.$('.info').text(this._count);
+      },
+      inputs: {
+        number: {
+          type: 'float',
+          description: 'number to smooth',
+        },
+        speed: {
+          type: 'float',
+          description: 'percent per frame',
+          default: 0.1,
+        },
+      },
+      outputs: {
+        number: {
+          type: 'float',
+        },
+      },
     }
-
-  });
-
-
+  );
 });
diff --git a/src/nodes/time-throttle.js b/src/nodes/time-throttle.js
index 920eb66..c5e3f91 100644
--- a/src/nodes/time-throttle.js
+++ b/src/nodes/time-throttle.js
@@ -1,48 +1,46 @@
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["time-throttle"] = Iframework.NativeNodes["time"].extend({
-
+$(function () {
+  Iframework.NativeNodes['time-throttle'] = Iframework.NativeNodes[
+    'time'
+  ].extend({
     info: {
-      title: "throttle",
-      description: "too many fps? use throttle to limit data rate passing through flow."
-    },
-    initializeModule: function(){
+      title: 'throttle',
+      description:
+        'too many fps? use throttle to limit data rate passing through flow.',
     },
-    _ms: 1000/30,
-    inputfps: function(fps){
-      this._ms = 1000/fps;
-      this.$(".info").text(fps+"fps, "+Math.round(this._ms*100)/100+"ms");
+    initializeModule: function () {},
+    _ms: 1000 / 30,
+    inputfps: function (fps) {
+      this._ms = 1000 / fps;
+      this.$('.info').text(
+        fps + 'fps, ' + Math.round(this._ms * 100) / 100 + 'ms'
+      );
     },
     _lastTime: 0,
-    inputdata: function(data){
+    inputdata: function (data) {
       var timestamp = Date.now();
-      if(timestamp-this._lastTime >= this._ms) {
-        this.send("data", data);
+      if (timestamp - this._lastTime >= this._ms) {
+        this.send('data', data);
         this._lastTime = timestamp;
       }
     },
-    redraw: function(timestamp){
-    },
+    redraw: function (timestamp) {},
     inputs: {
       data: {
-        type: "all",
-        description: "data to throttle"
+        type: 'all',
+        description: 'data to throttle',
       },
       fps: {
-        type: "float",
-        description: "maximum frames per second",
-        "default": 30
-      }
+        type: 'float',
+        description: 'maximum frames per second',
+        default: 30,
+      },
     },
     outputs: {
       data: {
-        type: "all"
-      }
-    }
-
+        type: 'all',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/time-tween.js b/src/nodes/time-tween.js
index b370ffb..92f4efb 100644
--- a/src/nodes/time-tween.js
+++ b/src/nodes/time-tween.js
@@ -2,35 +2,36 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
+$(function () {
   var timeNow = function () {
-    return window.performance !== undefined && window.performance.now !== undefined ? window.performance.now() : Date.now();
+    return window.performance !== undefined &&
+      window.performance.now !== undefined
+      ? window.performance.now()
+      : Date.now();
   };
 
-  var template = 
-    '<img title="drag to move playhead" id="view-<%= id %>" class="tween-view" width="180" height="100" style="width:100%" />'+
-    '<span class="tween-progress" style="position:absolute; left:0px; top:20px; height:60px; border-left:1px solid blue;"></span>'+
-    '<span title="tween to" class="tween-out" style="position:absolute; right:0; top:2px;"></span>'+
-    '<span title="tween from" class="tween-in" style="position:absolute; left:0; top:83px; max-width:45%; overflow:hidden;"></span>'+
-    '<span title="duration" class="tween-duration" style="position:absolute; right:0; top:83px; max-width:45%; overflow:hidden;"></span>'+
-    '<button class="start">start</button>'+
-    '<button class="stop">stop</button>'+
-    '<div><span class="function"></span> <span class="loop"></span></div>'+
+  var template =
+    '<img title="drag to move playhead" id="view-<%= id %>" class="tween-view" width="180" height="100" style="width:100%" />' +
+    '<span class="tween-progress" style="position:absolute; left:0px; top:20px; height:60px; border-left:1px solid blue;"></span>' +
+    '<span title="tween to" class="tween-out" style="position:absolute; right:0; top:2px;"></span>' +
+    '<span title="tween from" class="tween-in" style="position:absolute; left:0; top:83px; max-width:45%; overflow:hidden;"></span>' +
+    '<span title="duration" class="tween-duration" style="position:absolute; right:0; top:83px; max-width:45%; overflow:hidden;"></span>' +
+    '<button class="start">start</button>' +
+    '<button class="stop">stop</button>' +
+    '<div><span class="function"></span> <span class="loop"></span></div>' +
     '<div class="tween-value" style="max-width:100%; overflow:hidden;"></div>';
 
-  Iframework.NativeNodes["time-tween"] = Iframework.NativeNodes["time"].extend({
-
+  Iframework.NativeNodes['time-tween'] = Iframework.NativeNodes['time'].extend({
     template: _.template(template),
     info: {
-      title: "tween",
-      description: "interpolate between two values over time"
+      title: 'tween',
+      description: 'interpolate between two values over time',
     },
     events: {
-      "click .start": "inputstart",
-      "click .stop":  "inputstop"
+      'click .start': 'inputstart',
+      'click .stop': 'inputstop',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       this.tween = {};
 
       var self = this;
@@ -38,10 +39,10 @@ $(function(){
         // this.setupTween();
       } else {
         yepnope({
-          load: "libs/Tween.js",
+          load: 'libs/Tween.js',
           complete: function () {
             self.initializeModule();
-          }
+          },
         });
       }
 
@@ -49,11 +50,11 @@ $(function(){
       var startWidth;
       var startPercent;
       var startPlaying;
-      var tweenView = this.$(".tween-view");
+      var tweenView = this.$('.tween-view');
       tweenView.draggable({
-        cursor: "e-resize",
+        cursor: 'e-resize',
         helper: function () {
-          var helper = $("<div></div>");
+          var helper = $('<div></div>');
           $(document.body).append(helper);
           return helper;
         },
@@ -69,46 +70,47 @@ $(function(){
         drag: function (event, ui) {
           if (self.tween) {
             var diff = ui.position.left - startDragX;
-            var p = startPercent + diff/startWidth;
-            p = Math.min(1,p);
-            p = Math.max(0,p);
-            self.gotoPercent( p );
+            var p = startPercent + diff / startWidth;
+            p = Math.min(1, p);
+            p = Math.max(0, p);
+            self.gotoPercent(p);
           }
         },
         stop: function (event, ui) {
           if (self.tween) {
             self.tween.playing = startPlaying;
           }
-        }
+        },
       });
       // Drag through
-      this.$('.tween-progress').mousedown( function (event) {
+      this.$('.tween-progress').mousedown(function (event) {
         tweenView.trigger(event);
       });
     },
     _resetTween: false,
-    setupTween: function(){
+    setupTween: function () {
       var ease = this._ease;
-      if (this._type === "Linear" && this._ease !== "None") {
-        ease = "None";
+      if (this._type === 'Linear' && this._ease !== 'None') {
+        ease = 'None';
       }
-      if (this._type !== "Linear" && this._ease === "None") {
-        ease = "InOut";
+      if (this._type !== 'Linear' && this._ease === 'None') {
+        ease = 'InOut';
       }
       if (window.TWEEN) {
-
         if (!TWEEN.Easing.hasOwnProperty(this._type)) {
-          this._type = "Sinusoidal";
+          this._type = 'Sinusoidal';
         }
         if (!TWEEN.Easing[this._type].hasOwnProperty(ease)) {
-          ease = (this._type==="Linear") ? "None" : "InOut";
+          ease = this._type === 'Linear' ? 'None' : 'InOut';
         }
 
-        this.$(".function").text(this._type+"."+ease);
-        this.$(".tween-in").text(this._from);
-        this.$(".tween-out").text(this._to);
-        this.$(".tween-duration").text(this._duration/1000+"s");
-        this.$(".tween-view").attr({src:"libs/Tween/"+this._type+"."+ease+".png"});
+        this.$('.function').text(this._type + '.' + ease);
+        this.$('.tween-in').text(this._from);
+        this.$('.tween-out').text(this._to);
+        this.$('.tween-duration').text(this._duration / 1000 + 's');
+        this.$('.tween-view').attr({
+          src: 'libs/Tween/' + this._type + '.' + ease + '.png',
+        });
 
         this.tween.easing = TWEEN.Easing[this._type][ease];
         this.tween.value = this._from;
@@ -133,34 +135,34 @@ $(function(){
       this._resetTween = true;
     },
     inputduration: function (duration) {
-      this._duration = duration*1000;
+      this._duration = duration * 1000;
       this._resetTween = true;
     },
-    inputpingpong: function(boo){
+    inputpingpong: function (boo) {
       this._pingpong = boo;
       if (boo) {
-        this.$(".loop").text("(pingpong)");
+        this.$('.loop').text('(pingpong)');
       } else {
         this._reversing = false;
-        this.$(".loop").text(this._loop ? "(loop)" : "");
+        this.$('.loop').text(this._loop ? '(loop)' : '');
       }
     },
-    inputloop: function(boo){
+    inputloop: function (boo) {
       this._loop = boo;
       if (!this._pingpong) {
         if (boo) {
-          this.$(".loop").text("(loop)");
+          this.$('.loop').text('(loop)');
         } else {
-          this.$(".loop").text("");
+          this.$('.loop').text('');
         }
       }
     },
     _reversing: false,
-    reverse: function(){
+    reverse: function () {
       this._reversing = !this._reversing;
       this.inputstart();
     },
-    loop: function(){
+    loop: function () {
       // Reverse, loop, or stop
       if (this._pingpong) {
         this.reverse();
@@ -168,11 +170,11 @@ $(function(){
         this.inputstart();
       } else {
         this.inputstop();
-        this.send("complete", true);
+        this.send('complete', true);
       }
     },
     _deferStart: false,
-    inputstart: function(){
+    inputstart: function () {
       if (!window.TWEEN) {
         this._deferStart = true;
         return;
@@ -186,7 +188,7 @@ $(function(){
         this.tween.playing = true;
       }
     },
-    inputstop: function(){
+    inputstop: function () {
       if (this.tween) {
         this.tween.playing = false;
       }
@@ -195,32 +197,38 @@ $(function(){
     gotoPercent: function (p) {
       if (this.tween && this.tween.easing) {
         this.tween.percent = p;
-        this.tween.value = this._from + ( this._to - this._from ) * this.tween.easing(p);
-        this.send("value", this.tween.value);
+        this.tween.value =
+          this._from + (this._to - this._from) * this.tween.easing(p);
+        this.send('value', this.tween.value);
         this._triggerRedraw = true;
       }
     },
-    inputpercent: function(p){
-      if (p>1){
+    inputpercent: function (p) {
+      if (p > 1) {
         p %= 1;
       }
       this._percent = p;
       this.gotoPercent(p);
     },
-    inputtime: function(t){
+    inputtime: function (t) {
       t *= 1000;
       if (t !== this._duration) {
         t %= this._duration;
-        if (t<0) {
+        if (t < 0) {
           t += this._duration;
         }
       }
-      this.gotoPercent( t / this._duration );
+      this.gotoPercent(t / this._duration);
     },
-    redraw: function(){
+    redraw: function () {
       if (this.tween) {
-        this.$(".tween-value").text( Math.round(this.tween.value*100000000)/100000000 );
-        this.$(".tween-progress").css("left", (this.tween.percent*96+2)+"%");
+        this.$('.tween-value').text(
+          Math.round(this.tween.value * 100000000) / 100000000
+        );
+        this.$('.tween-progress').css(
+          'left',
+          this.tween.percent * 96 + 2 + '%'
+        );
       }
     },
     renderAnimationFrame: function (timestamp) {
@@ -237,11 +245,11 @@ $(function(){
       }
       if (window.TWEEN && this.tween && this.tween.playing) {
         var p = (timeNow() - this.tween.start) / this._duration;
-        if (p>1) {
+        if (p > 1) {
           p = 1;
         }
-        this.gotoPercent( (this._reversing ? 1-p : p) );
-        if (p>=1) {
+        this.gotoPercent(this._reversing ? 1 - p : p);
+        if (p >= 1) {
           this.loop();
         }
       }
@@ -252,69 +260,71 @@ $(function(){
     },
     inputs: {
       from: {
-        type: "float",
-        description: "start value",
-        "default": 0.0
+        type: 'float',
+        description: 'start value',
+        default: 0.0,
       },
       to: {
-        type: "float",
-        description: "end value",
-        "default": 1.0
+        type: 'float',
+        description: 'end value',
+        default: 1.0,
       },
       duration: {
-        type: "float",
-        description: "number of seconds",
-        "default": 5.0
+        type: 'float',
+        description: 'number of seconds',
+        default: 5.0,
       },
       type: {
-        type: "string",
-        description: "Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce. For a visual explanation see: http://sole.github.com/tween.js/examples/03_graphs.html",
-        options: "Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce".split(" "),
-        "default": "Sinusoidal"
+        type: 'string',
+        description:
+          'Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce. For a visual explanation see: http://sole.github.com/tween.js/examples/03_graphs.html',
+        options:
+          'Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce'.split(
+            ' '
+          ),
+        default: 'Sinusoidal',
       },
       ease: {
-        type: "string",
-        description: "In, Out, or InOut for all except Linear, which is None. For a visual explanation see: http://sole.github.com/tween.js/examples/03_graphs.html",
-        options: "None In Out InOut".split(" "),
-        "default": "InOut"
+        type: 'string',
+        description:
+          'In, Out, or InOut for all except Linear, which is None. For a visual explanation see: http://sole.github.com/tween.js/examples/03_graphs.html',
+        options: 'None In Out InOut'.split(' '),
+        default: 'InOut',
       },
       loop: {
-        type: "boolean",
-        description: "restart the tween on completion"
+        type: 'boolean',
+        description: 'restart the tween on completion',
       },
       pingpong: {
-        type: "boolean",
-        description: "reverse the tween on completion"
+        type: 'boolean',
+        description: 'reverse the tween on completion',
       },
       percent: {
-        type: "float",
-        description: "skip to percent of tween",
+        type: 'float',
+        description: 'skip to percent of tween',
         min: 0,
-        max: 1
+        max: 1,
       },
       time: {
-        type: "float",
-        description: "skip to time of tween"
+        type: 'float',
+        description: 'skip to time of tween',
       },
       start: {
-        type: "bang",
-        description: "start tween"
+        type: 'bang',
+        description: 'start tween',
       },
       stop: {
-        type: "bang",
-        description: "stop tween"
-      }
+        type: 'bang',
+        description: 'stop tween',
+      },
     },
     outputs: {
       complete: {
-        type: "bang"
+        type: 'bang',
       },
       value: {
-        type: "float"
-      }
-    }
-
+        type: 'float',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/time.js b/src/nodes/time.js
index 185e0d1..55df126 100644
--- a/src/nodes/time.js
+++ b/src/nodes/time.js
@@ -1,28 +1,21 @@
 // extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="info" />';
-
-  Iframework.NativeNodes["time"] = Iframework.NodeBoxNativeView.extend({
+$(function () {
+  var template = '<div class="info" />';
 
+  Iframework.NativeNodes['time'] = Iframework.NodeBoxNativeView.extend({
     template: _.template(template),
-    initializeCategory: function() {
-    },
-    setupProgressbar: function(el, value) {
+    initializeCategory: function () {},
+    setupProgressbar: function (el, value) {
       this._progressbar = this.$(el)
-        .progressbar({ value: value })
-        .css({"height": "1em"});
+        .progressbar({value: value})
+        .css({height: '1em'});
       return this._progressbar;
     },
-    progress: function(value) {
+    progress: function (value) {
       if (this._progressbar) {
-        this._progressbar.progressbar("value", value);
+        this._progressbar.progressbar('value', value);
       }
-    }
-
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-button.js b/src/nodes/ui-button.js
index 29360e9..62d382c 100644
--- a/src/nodes/ui-button.js
+++ b/src/nodes/ui-button.js
@@ -2,107 +2,106 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
+$(function () {
+  var template =
     '<button class="button" style="font-size:120%; position:absolute; overflow:hidden; top:0;right:0;bottom:0;left:0; width:100%; padding: 0; margin: 0;"></button>';
 
-  Iframework.NativeNodes["ui-button"] = Iframework.NativeNodes["ui"].extend({
-
+  Iframework.NativeNodes['ui-button'] = Iframework.NativeNodes['ui'].extend({
     template: _.template(template),
     info: {
-      title: "button",
-      description: "a button sends a bang, and you can attach a keyboard key"
+      title: 'button',
+      description: 'a button sends a bang, and you can attach a keyboard key',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       var self = this;
-      this.$(".button")
-        .click(function(e){
-          self.inputbang();
-        });
+      this.$('.button').click(function (e) {
+        self.inputbang();
+      });
     },
-    inputbang: function(){
-      this.send("bang", "!");
-      this.$(".button").addClass("active");
+    inputbang: function () {
+      this.send('bang', '!');
+      this.$('.button').addClass('active');
 
       var self = this;
-      _.delay(function(){
-        self.$(".button").removeClass("active");
+      _.delay(function () {
+        self.$('.button').removeClass('active');
       }, 100);
       return false;
     },
     inputlabel: function (label) {
       this._label = label;
       if (this._label === undefined) {
-        label = "";
+        label = '';
       }
-      if (this._key && this._key !== "") {
-        label += " ("+this._key+")";
+      if (this._key && this._key !== '') {
+        label += ' (' + this._key + ')';
       }
-      this.$(".button").text(label);
+      this.$('.button').text(label);
     },
     inputcolor: function (color) {
-      this.$(".button").css("color", color);
+      this.$('.button').css('color', color);
     },
     inputbackground: function (color) {
-      this.$(".button").css("background-color", color);
+      this.$('.button').css('background-color', color);
     },
-    inputkey: function(key){
-      // Unbind the old 
-      if (this._key && this._key !== "") {
+    inputkey: function (key) {
+      // Unbind the old
+      if (this._key && this._key !== '') {
         Mousetrap.unbind(this._key, 'keydown');
-        this._key = "";
+        this._key = '';
       }
-      if (key !== "") {
+      if (key !== '') {
         var self = this;
-        Mousetrap.bind(key, function(){
-          self.inputbang();          
-        }, 'keydown');
+        Mousetrap.bind(
+          key,
+          function () {
+            self.inputbang();
+          },
+          'keydown'
+        );
         this._key = key;
-      } 
+      }
 
       // Reset label
       this.inputlabel(this._label);
     },
-    remove: function(){
-      if (this._key && this._key !== "") {
+    remove: function () {
+      if (this._key && this._key !== '') {
         Mousetrap.unbind(this._key, 'keydown');
       }
-      this._key = "";
+      this._key = '';
     },
     inputs: {
       bang: {
-        type: "bang",
-        description: "manual input bang"
+        type: 'bang',
+        description: 'manual input bang',
       },
       label: {
-        type: "string",
-        description: "label for button",
-        "default": ""
+        type: 'string',
+        description: 'label for button',
+        default: '',
       },
       color: {
-        type: "color",
-        description: "color of button text",
-        "default": ""
+        type: 'color',
+        description: 'color of button text',
+        default: '',
       },
       background: {
-        type: "color",
-        description: "color of button background",
-        "default": ""
+        type: 'color',
+        description: 'color of button background',
+        default: '',
       },
       key: {
-        type: "string",
-        description: "For modifier keys you can use shift, ctrl, alt, option, meta, and command. Other special keys are backspace, tab, enter, return, capslock, esc, escape, space, pageup, pagedown, end, home, left, up, right, down, ins, and del. Can be a combination like \"shift+r\", or sequence like \"a b c\".",
-        "default": ""
-      }
+        type: 'string',
+        description:
+          'For modifier keys you can use shift, ctrl, alt, option, meta, and command. Other special keys are backspace, tab, enter, return, capslock, esc, escape, space, pageup, pagedown, end, home, left, up, right, down, ins, and del. Can be a combination like "shift+r", or sequence like "a b c".',
+        default: '',
+      },
     },
     outputs: {
       bang: {
-        type: "bang"
-      }
-    }
-
+        type: 'bang',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-checkbox.js b/src/nodes/ui-checkbox.js
index 7cf259e..1a2fb43 100644
--- a/src/nodes/ui-checkbox.js
+++ b/src/nodes/ui-checkbox.js
@@ -2,88 +2,84 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = '<input type="checkbox" class="check" style="width:3em;height:3em;"></input>';
-
-  Iframework.NativeNodes["ui-checkbox"] = Iframework.NativeNodes["ui"].extend({
+$(function () {
+  var template =
+    '<input type="checkbox" class="check" style="width:3em;height:3em;"></input>';
 
+  Iframework.NativeNodes['ui-checkbox'] = Iframework.NativeNodes['ui'].extend({
     template: _.template(template),
     info: {
-      title: "checkbox",
-      description: "a checkbox to send boolean on/off"
+      title: 'checkbox',
+      description: 'a checkbox to send boolean on/off',
     },
     events: {
-      "change .check": "check"
+      'change .check': 'check',
     },
-    initializeModule: function(){
-      this.$(".button").button();
+    initializeModule: function () {
+      this.$('.button').button();
     },
-    check: function(){
-      this._val = this.$(".check").prop("checked");
+    check: function () {
+      this._val = this.$('.check').prop('checked');
       this.inputsend();
     },
-    inputvalue: function(val){
+    inputvalue: function (val) {
       this._val = val;
-      this.$(".check").prop("checked", this._val);
+      this.$('.check').prop('checked', this._val);
       this.inputsend();
     },
-    inputon: function(){
+    inputon: function () {
       this._val = true;
-      this.$(".check").prop("checked", this._val);
+      this.$('.check').prop('checked', this._val);
       this.inputsend();
     },
-    inputoff: function(){
+    inputoff: function () {
       this._val = false;
-      this.$(".check").prop("checked", this._val);
+      this.$('.check').prop('checked', this._val);
       this.inputsend();
     },
-    inputtoggle: function(){
+    inputtoggle: function () {
       this._val = !this._val;
-      this.$(".check").prop("checked", this._val);
+      this.$('.check').prop('checked', this._val);
       this.inputsend();
     },
-    inputsend: function(){
-      this.send("checked", this._val);
+    inputsend: function () {
+      this.send('checked', this._val);
       if (this._val) {
-        this.send("on", "!");
+        this.send('on', '!');
       } else {
-        this.send("off", "!");
+        this.send('off', '!');
       }
     },
     inputs: {
       value: {
-        type: "boolean",
-        description: "initial value"
+        type: 'boolean',
+        description: 'initial value',
       },
       on: {
-        type: "bang"
+        type: 'bang',
       },
       off: {
-        type: "bang"
+        type: 'bang',
       },
       toggle: {
-        type: "bang",
-        description: "toggle on/off"
+        type: 'bang',
+        description: 'toggle on/off',
       },
       send: {
-        type: "bang",
-        description: "send the boolean"
-      }
+        type: 'bang',
+        description: 'send the boolean',
+      },
     },
     outputs: {
       checked: {
-        type: "boolean"
+        type: 'boolean',
       },
       on: {
-        type: "bang"
+        type: 'bang',
       },
       off: {
-        type: "bang"
-      }
-    }
-
+        type: 'bang',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-facetracker.js b/src/nodes/ui-facetracker.js
index 1381952..2923b9e 100644
--- a/src/nodes/ui-facetracker.js
+++ b/src/nodes/ui-facetracker.js
@@ -1,67 +1,65 @@
 /*global headtrackr:true*/
 
-$(function(){
-
-  Iframework.NativeNodes["ui-facetracker"] = Iframework.NativeNodes["ui"].extend({
-
+$(function () {
+  Iframework.NativeNodes['ui-facetracker'] = Iframework.NativeNodes[
+    'ui'
+  ].extend({
     info: {
-      title: "facetracker",
-      description: "checks image for face, sends coordinates"
+      title: 'facetracker',
+      description: 'checks image for face, sends coordinates',
     },
     _loaded: false,
-    initializeModule: function(){
+    initializeModule: function () {
       // Load library
       var self = this;
       if (window.headtrackr) {
         // Make canvas
-        this.canvas = document.createElement("canvas");
-        this.context = this.canvas.getContext("2d");
+        this.canvas = document.createElement('canvas');
+        this.context = this.canvas.getContext('2d');
         // this.$el.prepend(this.canvas);
 
         // Start htracker
         this._htracker = new headtrackr.Tracker({
-          ui: false, 
-          calcAngles: false
+          ui: false,
+          calcAngles: false,
         });
         this._htracker.customStart(this.canvas, this.context);
 
         // Add listener
-        document.addEventListener('headtrackrStatus', 
-          function (event) {
-            self._busy = false;
-            self.$(".info").text(event.status);
-          }
-        );
-        document.addEventListener('facetrackingEvent', 
-          function (event) {
-            self._busy = false;
-            self.sendfaceRect(event);
-          }
-        );
+        document.addEventListener('headtrackrStatus', function (event) {
+          self._busy = false;
+          self.$('.info').text(event.status);
+        });
+        document.addEventListener('facetrackingEvent', function (event) {
+          self._busy = false;
+          self.sendfaceRect(event);
+        });
 
         this._loaded = true;
       } else {
         yepnope({
-          load: "libs/headtrackr.js",
+          load: 'libs/headtrackr.js',
           complete: function () {
             self.initializeModule();
-          }
+          },
         });
       }
     },
     _busy: false,
     _busyReset: null,
     inputimage: function (image) {
-      if (!this._loaded) { return; }
-      if (this._busy) { 
-        if (!this._busyReset){
+      if (!this._loaded) {
+        return;
+      }
+      if (this._busy) {
+        if (!this._busyReset) {
           var self = this;
-          this._busyReset = window.setTimeout(function(){
+          this._busyReset = window.setTimeout(function () {
             self._busy = false;
             self._busyReset = null;
           }, 500);
         }
-        return; 
+        return;
       }
       if (this.canvas.width !== image.width) {
         this.canvas.width = image.width;
@@ -76,51 +74,48 @@ $(function(){
     },
     sendfaceRect: function (event) {
       var a = [
-        event.x - Math.round(event.width/2),
-        event.y - Math.round(event.height/2),
+        event.x - Math.round(event.width / 2),
+        event.y - Math.round(event.height / 2),
         event.width,
-        event.height
+        event.height,
       ];
-      this.send("faceRect", a);
-      this.send("x", event.x);
-      this.send("y", event.y);
-      this.send("width", event.width);
-      this.send("height", event.height);
+      this.send('faceRect', a);
+      this.send('x', event.x);
+      this.send('y', event.y);
+      this.send('width', event.width);
+      this.send('height', event.height);
     },
     inputs: {
       image: {
-        type: "image",
-        description: "image to analyse"
-      }
+        type: 'image',
+        description: 'image to analyse',
+      },
     },
     outputs: {
       faceRect: {
-        type: "array:f4",
-        description: "a rectangle array with x, y, width, height"
+        type: 'array:f4',
+        description: 'a rectangle array with x, y, width, height',
       },
       x: {
-        type: "float",
-        description: "x of center of face"
+        type: 'float',
+        description: 'x of center of face',
       },
       y: {
-        type: "float",
-        description: "y of center of face"
+        type: 'float',
+        description: 'y of center of face',
       },
       width: {
-        type: "float",
-        description: "width of face"
+        type: 'float',
+        description: 'width of face',
       },
       height: {
-        type: "float",
-        description: "height of face"
-      }
+        type: 'float',
+        description: 'height of face',
+      },
       // angle: {
       //   type: "float",
       //   description: "angle of face"
       // }
-    }
-
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-hslider.js b/src/nodes/ui-hslider.js
index 9953b62..176f0a9 100644
--- a/src/nodes/ui-hslider.js
+++ b/src/nodes/ui-hslider.js
@@ -2,92 +2,94 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="slider" style="position:absolute; top:15px;right:15px;left:15px;"></div>'+
+$(function () {
+  var template =
+    '<div class="slider" style="position:absolute; top:15px;right:15px;left:15px;"></div>' +
     '<div class="info" style="position:absolute; top:45px;left:15px" />';
 
-  Iframework.NativeNodes["ui-hslider"] = Iframework.NativeNodes["ui"].extend({
-
+  Iframework.NativeNodes['ui-hslider'] = Iframework.NativeNodes['ui'].extend({
     template: _.template(template),
     info: {
-      title: "hslider",
-      description: "horizontal slider"
+      title: 'hslider',
+      description: 'horizontal slider',
     },
     events: {
-      "slide .slider": "slide"
+      'slide .slider': 'slide',
     },
-    initializeModule: function(){
-      if (this._value === undefined) { this._value = 0; }
-      if (this._min === undefined) { this._min = 0; }
-      if (this._max === undefined) { this._max = 1; }
-      if (this._step === undefined) { this._step = 0; }
-      this.$(".slider")
-        .slider({
-          value: this._value,
-          min: this._min,
-          max: this._max,
-          step: this._step === 0 ? 0.001 : this._step
-        });
+    initializeModule: function () {
+      if (this._value === undefined) {
+        this._value = 0;
+      }
+      if (this._min === undefined) {
+        this._min = 0;
+      }
+      if (this._max === undefined) {
+        this._max = 1;
+      }
+      if (this._step === undefined) {
+        this._step = 0;
+      }
+      this.$('.slider').slider({
+        value: this._value,
+        min: this._min,
+        max: this._max,
+        step: this._step === 0 ? 0.001 : this._step,
+      });
       this.$el.css({
-        overflow: "hidden"
+        overflow: 'hidden',
       });
     },
     slide: function (event, ui) {
       this.setValue(ui.value);
       this.inputsend();
     },
-    inputvalue: function(val){
+    inputvalue: function (val) {
       this.setValue(val);
-      this.$(".slider").slider({
-        value: val
+      this.$('.slider').slider({
+        value: val,
       });
       this.inputsend();
     },
-    setValue: function(val){
+    setValue: function (val) {
       this._value = val;
-      this.$(".info").text(this._value);      
+      this.$('.info').text(this._value);
     },
-    inputsend: function(){
-      this.send("value", this._value);
+    inputsend: function () {
+      this.send('value', this._value);
     },
-    redraw: function(){
+    redraw: function () {
       // Actually just sets up the slider again
       this.initializeModule();
     },
     inputs: {
       value: {
-        type: "float",
-        description: "manual input value; sets default",
-        "default": 0
+        type: 'float',
+        description: 'manual input value; sets default',
+        default: 0,
       },
       min: {
-        type: "float",
-        description: "slider jumps values",
-        "default": 0
+        type: 'float',
+        description: 'slider jumps values',
+        default: 0,
       },
       max: {
-        type: "float",
-        "default": 1
+        type: 'float',
+        default: 1,
       },
       step: {
-        type: "float",
-        description: "slider jumps by this amount",
-        "default": 0
+        type: 'float',
+        description: 'slider jumps by this amount',
+        default: 0,
       },
       send: {
-        type: "bang",
-        description: "send current value"
-      }
+        type: 'bang',
+        description: 'send current value',
+      },
     },
     outputs: {
       value: {
-        type: "float"
-      }
-    }
-
+        type: 'float',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-leap.js b/src/nodes/ui-leap.js
index a12b82f..0ccc281 100644
--- a/src/nodes/ui-leap.js
+++ b/src/nodes/ui-leap.js
@@ -2,101 +2,99 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="info"></div>'+
+$(function () {
+  var template =
+    '<div class="info"></div>' +
     '<label><input type="checkbox" class="active" checked /> active</label>';
 
-  Iframework.NativeNodes["ui-leap"] = Iframework.NativeNodes["ui"].extend({
-
+  Iframework.NativeNodes['ui-leap'] = Iframework.NativeNodes['ui'].extend({
     template: _.template(template),
     info: {
-      title: "leap",
-      description: "leap motion hand tracker"
+      title: 'leap',
+      description: 'leap motion hand tracker',
     },
     events: {
-      "change .active": "changeActive"
+      'change .active': 'changeActive',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       var self = this;
       // Load lib
       if (window.Leap) {
-        Leap.loop(function(frame) {
-          if (self._active){
+        Leap.loop(function (frame) {
+          if (self._active) {
             self.gotLeap(frame);
           }
         });
       } else {
         yepnope({
-          load: "libs/leap.js",
+          load: 'libs/leap.js',
           complete: function () {
             self.initializeModule();
-          }
+          },
         });
       }
     },
     _active: true,
-    changeActive: function(event){
+    changeActive: function (event) {
       if (event.target.checked) {
         this._active = true;
       } else {
         this._active = false;
       }
     },
-    gotLeap: function(frame){
-      for (var i=0; i < frame.hands.length && i<2; i++) {
+    gotLeap: function (frame) {
+      for (var i = 0; i < frame.hands.length && i < 2; i++) {
         var hand = frame.hands[i];
         var position = hand.palmPosition;
-        this.send("hand"+i+"x", position[0]);
-        this.send("hand"+i+"y", position[1]);
-        this.send("hand"+i+"z", position[2]);
+        this.send('hand' + i + 'x', position[0]);
+        this.send('hand' + i + 'y', position[1]);
+        this.send('hand' + i + 'z', position[2]);
       }
-      for (i = 0; i < frame.pointables.length && i<2; i++) {
+      for (i = 0; i < frame.pointables.length && i < 2; i++) {
         var pointable = frame.pointables[i];
         if (pointable.direction) {
-          var angle = Math.atan2(pointable.direction[2], pointable.direction[0]);
-          angle = angle / (Math.PI*2) - 0.25;
-          this.send("pointer"+i+"xz", angle);
+          var angle = Math.atan2(
+            pointable.direction[2],
+            pointable.direction[0]
+          );
+          angle = angle / (Math.PI * 2) - 0.25;
+          this.send('pointer' + i + 'xz', angle);
         }
       }
     },
     outputs: {
       hand0x: {
-        type: "float",
-        description: "x left (-300) to right (300) of hand0 position"
+        type: 'float',
+        description: 'x left (-300) to right (300) of hand0 position',
       },
       hand0y: {
-        type: "float",
-        description: "y down(80) to up(900) of hand0 position"
+        type: 'float',
+        description: 'y down(80) to up(900) of hand0 position',
       },
       hand0z: {
-        type: "float",
-        description: "z in(-300) to out(300) of hand0 position"
+        type: 'float',
+        description: 'z in(-300) to out(300) of hand0 position',
       },
       hand1x: {
-        type: "float",
-        description: "x left (-300) to right (300) of hand1 position"
+        type: 'float',
+        description: 'x left (-300) to right (300) of hand1 position',
       },
       hand1y: {
-        type: "float",
-        description: "y down(80) to up(900) of hand1 position"
+        type: 'float',
+        description: 'y down(80) to up(900) of hand1 position',
       },
       hand1z: {
-        type: "float",
-        description: "z in(-300) to out(300) of hand1 position"
+        type: 'float',
+        description: 'z in(-300) to out(300) of hand1 position',
       },
       pointer0xz: {
-        type: "float",
-        description: "rotation on plane"
+        type: 'float',
+        description: 'rotation on plane',
       },
       pointer1xz: {
-        type: "float",
-        description: "rotation on plane"
-      }
-    }
-
+        type: 'float',
+        description: 'rotation on plane',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-makeymakey.js b/src/nodes/ui-makeymakey.js
index 1977243..9f2b789 100644
--- a/src/nodes/ui-makeymakey.js
+++ b/src/nodes/ui-makeymakey.js
@@ -1,117 +1,117 @@
-$(function(){
-
-  var template = 
-    '<img src="img/makeymakey.jpg" style="max-width:100%;" />'+
-    '<div class="info"></div>'+
+$(function () {
+  var template =
+    '<img src="img/makeymakey.jpg" style="max-width:100%;" />' +
+    '<div class="info"></div>' +
     '<label><input type="checkbox" class="active" checked /> active</label>';
 
-  Iframework.NativeNodes["ui-makeymakey"] = Iframework.NativeNodes["ui"].extend({
+  Iframework.NativeNodes['ui-makeymakey'] = Iframework.NativeNodes['ui'].extend(
+    {
+      template: _.template(template),
+      info: {
+        title: 'makeymakey',
+        description: 'makeymakey board',
+      },
+      events: {
+        'change .active': 'changeActive',
+      },
+      initializeModule: function () {
+        var self = this;
 
-    template: _.template(template),
-    info: {
-      title: "makeymakey",
-      description: "makeymakey board"
-    },
-    events: {
-      "change .active": "changeActive"
-    },
-    initializeModule: function(){
-      var self = this;
+        Mousetrap.bind('space', function () {
+          if (self._active) {
+            self.sendSpace();
+          }
+        });
 
-      Mousetrap.bind('space', function () {
-        if (self._active) {
-          self.sendSpace();
-        }
-      });
+        Mousetrap.bind('up', function () {
+          if (self._active) {
+            self.sendUp();
+          }
+        });
 
-      Mousetrap.bind('up', function () {
-        if (self._active) {
-          self.sendUp();
-        }
-      });
+        Mousetrap.bind('down', function () {
+          if (self._active) {
+            self.sendDown();
+          }
+        });
 
-      Mousetrap.bind('down', function () {
-        if (self._active) {
-          self.sendDown();
-        }
-      });
+        Mousetrap.bind('right', function () {
+          if (self._active) {
+            self.sendRight();
+          }
+        });
 
-      Mousetrap.bind('right', function () {
-        if (self._active) {
-          self.sendRight();
-        }
-      });
+        Mousetrap.bind('left', function () {
+          if (self._active) {
+            self.sendLeft();
+          }
+        });
 
-      Mousetrap.bind('left', function () {
-        if (self._active) {
-          self.sendLeft();
-        }
-      });
-
-      $(window).click(function (event) {
-        if (self._active) {
-          self.sendClick(event);
+        $(window).click(function (event) {
+          if (self._active) {
+            self.sendClick(event);
+          }
+        });
+      },
+      _active: true,
+      changeActive: function (event) {
+        if (event.target.checked) {
+          this._active = true;
+        } else {
+          this._active = false;
         }
-      });
-    },
-    _active: true,
-    changeActive: function(event){
-      if (event.target.checked) {
-        this._active = true;
-      } else {
-        this._active = false;
-      }
-    },
-    sendSpace: function() {
-      this.send("space", "bang");
-      this.$(".info").text('Space!');
-    },
-    sendClick: function(evt) {
-      this.send("click", "bang");
-      this.$(".info").text('Click!');
-    },
-    sendUp: function() {
-      this.send("up", "bang");
-      this.$(".info").text('Up!');
-    },
-    sendDown: function() {
-      this.send("down", "bang");
-      this.$(".info").text('Down!');
-    },
-    sendLeft: function() {
-      this.send("left", "bang");
-      this.$(".info").text('Left!');
-    },
-    sendRight: function() {
-      this.send("right", "bang");
-      this.$(".info").text('Right!');
-    },
-    remove: function() {
-      var keys = ['space', 'up', 'down', 'left', 'right'];
-      for (var key in keys) {
-        Mousetrap.unbind(key, 'keydown');
-      }
-      $(window).unbind('click');
-    },
-    outputs: {
-      space: {
-        type: "bang"
       },
-      click: {
-        type: "bang"
+      sendSpace: function () {
+        this.send('space', 'bang');
+        this.$('.info').text('Space!');
+      },
+      sendClick: function (evt) {
+        this.send('click', 'bang');
+        this.$('.info').text('Click!');
+      },
+      sendUp: function () {
+        this.send('up', 'bang');
+        this.$('.info').text('Up!');
       },
-      up: {
-        type: "bang"
+      sendDown: function () {
+        this.send('down', 'bang');
+        this.$('.info').text('Down!');
       },
-      down: {
-        type: "bang"
+      sendLeft: function () {
+        this.send('left', 'bang');
+        this.$('.info').text('Left!');
+      },
+      sendRight: function () {
+        this.send('right', 'bang');
+        this.$('.info').text('Right!');
+      },
+      remove: function () {
+        var keys = ['space', 'up', 'down', 'left', 'right'];
+        for (var key in keys) {
+          Mousetrap.unbind(key, 'keydown');
+        }
+        $(window).unbind('click');
       },
-      left: {
-        type: "bang"
+      outputs: {
+        space: {
+          type: 'bang',
+        },
+        click: {
+          type: 'bang',
+        },
+        up: {
+          type: 'bang',
+        },
+        down: {
+          type: 'bang',
+        },
+        left: {
+          type: 'bang',
+        },
+        right: {
+          type: 'bang',
+        },
       },
-      right: {
-        type: "bang"
-      }
     }
-  });
+  );
 });
diff --git a/src/nodes/ui-motion.js b/src/nodes/ui-motion.js
index 51b94bf..c1e5908 100644
--- a/src/nodes/ui-motion.js
+++ b/src/nodes/ui-motion.js
@@ -2,55 +2,58 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="info"></div>'+
-    '<div class="pos" style="font-size: 80px; border:1px black dotted; position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; text-align: center;">↑</div>'+
+$(function () {
+  var template =
+    '<div class="info"></div>' +
+    '<div class="pos" style="font-size: 80px; border:1px black dotted; position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; text-align: center;">↑</div>' +
     '<label><input type="checkbox" class="active" checked /> active</label>';
 
-  Iframework.NativeNodes["ui-motion"] = Iframework.NativeNodes["ui"].extend({
-
+  Iframework.NativeNodes['ui-motion'] = Iframework.NativeNodes['ui'].extend({
     template: _.template(template),
     info: {
-      title: "motion",
-      description: "sends device motion (accelerometer) data as percentage (Chrome and iOS only)"
+      title: 'motion',
+      description:
+        'sends device motion (accelerometer) data as percentage (Chrome and iOS only)',
     },
     events: {
-      "change .active": "changeActive"
+      'change .active': 'changeActive',
     },
-    transform: function(el, val) {
+    transform: function (el, val) {
       el.style.webkitTransform = val;
       el.style.mozTransform = val;
       el.style.msTransform = val;
       el.style.oTransform = val;
       el.style.transform = val;
     },
-    initializeModule: function(){
+    initializeModule: function () {
       // Element references
-      this.pos = this.$(".pos")[0];
+      this.pos = this.$('.pos')[0];
 
       // Listener
       if (window.DeviceOrientationEvent) {
         var self = this;
-        window.addEventListener("deviceorientation", function (event) {
-          if (self._active) {
-            self.sendPosition(event.gamma, event.beta);
-          }
-        }, true);
+        window.addEventListener(
+          'deviceorientation',
+          function (event) {
+            if (self._active) {
+              self.sendPosition(event.gamma, event.beta);
+            }
+          },
+          true
+        );
       } else {
-        this.$(".info").text("deviceorientation not supported");
+        this.$('.info').text('deviceorientation not supported');
       }
     },
     _active: true,
-    changeActive: function(event){
+    changeActive: function (event) {
       if (event.target.checked) {
         this._active = true;
       } else {
         this._active = false;
       }
     },
-    sendPosition: function(gamma, beta){
+    sendPosition: function (gamma, beta) {
       // gamma is the left-to-right tilt in degrees, where right is positive
       var tiltLR = gamma / 90 / 2 + 0.5;
       // beta is the front-to-back tilt in degrees, where front is positive
@@ -59,26 +62,26 @@ $(function(){
       // var dir = event.alpha;
 
       // Send values
-      this.send("tiltLR", tiltLR);
-      this.send("tiltFB", tiltFB);
+      this.send('tiltLR', tiltLR);
+      this.send('tiltFB', tiltFB);
 
       // Visual indicators
-      this.transform(this.pos, "rotateZ("+gamma+"deg) rotateX("+beta+"deg)");
+      this.transform(
+        this.pos,
+        'rotateZ(' + gamma + 'deg) rotateX(' + beta + 'deg)'
+      );
       // this.lr.style.webkitTransform = "rotate("+gamma+"deg)";
       // this.fb.style.webkitTransform = "rotate("+beta+"deg)";
     },
     outputs: {
       tiltLR: {
-        type: "float",
-        description: "left-right tilt, normalized to 0.0 - 1.0"
+        type: 'float',
+        description: 'left-right tilt, normalized to 0.0 - 1.0',
       },
       tiltFB: {
-        type: "float",
-        description: "front-back tilt, normalized to 0.0 - 1.0"
-      }
-    }
-
+        type: 'float',
+        description: 'front-back tilt, normalized to 0.0 - 1.0',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-mouse.js b/src/nodes/ui-mouse.js
index 9a3de11..e55a303 100644
--- a/src/nodes/ui-mouse.js
+++ b/src/nodes/ui-mouse.js
@@ -2,67 +2,62 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="info">(0.5, 0.5)</div><br>'+
+$(function () {
+  var template =
+    '<div class="info">(0.5, 0.5)</div><br>' +
     '<label><input type="checkbox" class="active" checked /> active</label>';
 
-  Iframework.NativeNodes["ui-mouse"] = Iframework.NativeNodes["ui"].extend({
-
+  Iframework.NativeNodes['ui-mouse'] = Iframework.NativeNodes['ui'].extend({
     template: _.template(template),
     info: {
-      title: "mouse",
-      description: "sends mouse coordinates as percentage"
+      title: 'mouse',
+      description: 'sends mouse coordinates as percentage',
     },
     events: {
-      "change .active": "changeActive"
+      'change .active': 'changeActive',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       var self = this;
-      $(window).mousemove(function(event){
+      $(window).mousemove(function (event) {
         if (self._active) {
           self.sendPosition(event.clientX, event.clientY);
         }
       });
-      $(window).resize(function(event){
+      $(window).resize(function (event) {
         self.windowResize();
       });
       this.windowResize();
     },
-    windowResize: function(){
+    windowResize: function () {
       this._windowWidth = $(window).width();
       this._windowHeight = $(window).height();
     },
     _active: true,
-    changeActive: function(event){
+    changeActive: function (event) {
       if (event.target.checked) {
         this._active = true;
       } else {
         this._active = false;
       }
     },
-    sendPosition: function(x, y){
-      this._xPercent = x/this._windowWidth;
-      var xPercentRound = Math.round(this._xPercent*1000)/1000;
-      this._yPercent = y/this._windowHeight;
-      var yPercentRound = Math.round(this._yPercent*1000)/1000;
+    sendPosition: function (x, y) {
+      this._xPercent = x / this._windowWidth;
+      var xPercentRound = Math.round(this._xPercent * 1000) / 1000;
+      this._yPercent = y / this._windowHeight;
+      var yPercentRound = Math.round(this._yPercent * 1000) / 1000;
       // Display
-      this.$(".info").text("("+xPercentRound+","+yPercentRound+")");
+      this.$('.info').text('(' + xPercentRound + ',' + yPercentRound + ')');
       // Send
-      this.send("x", this._xPercent);
-      this.send("y", this._yPercent);
+      this.send('x', this._xPercent);
+      this.send('y', this._yPercent);
     },
     outputs: {
       x: {
-        type: "float"
+        type: 'float',
       },
       y: {
-        type: "float"
-      }
-    }
-
+        type: 'float',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-number.js b/src/nodes/ui-number.js
index 77a61bd..cb5f38a 100644
--- a/src/nodes/ui-number.js
+++ b/src/nodes/ui-number.js
@@ -2,9 +2,9 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
+$(function () {
+  // prettier-ignore
+  var template =
     '<form class="textform">'+
       '<label><span class="label"></span> '+
         '<input type="number" class="number" step="any" style="width:90%"></input>'+
@@ -12,58 +12,53 @@ $(function(){
       '<button class="send" type="submit">send</button>'+
     '</form>';
 
-  Iframework.NativeNodes["ui-number"] = Iframework.NativeNodes["ui"].extend({
-
+  Iframework.NativeNodes['ui-number'] = Iframework.NativeNodes['ui'].extend({
     template: _.template(template),
     info: {
-      title: "number",
-      description: "a number box to save and send int/float"
+      title: 'number',
+      description: 'a number box to save and send int/float',
     },
     events: {
-      "submit .textform": "submit"
-    },
-    initializeModule: function(){
+      'submit .textform': 'submit',
     },
-    submit: function(){
-      this._val = parseFloat( this.$(".number").val() );
+    initializeModule: function () {},
+    submit: function () {
+      this._val = parseFloat(this.$('.number').val());
       this.inputsend();
       return false;
     },
-    inputvalue: function(val){
+    inputvalue: function (val) {
       this._val = val;
       this.inputsend();
       this._triggerRedraw = true;
     },
-    inputlabel: function(label){
-      this.$(".label").text(label);
+    inputlabel: function (label) {
+      this.$('.label').text(label);
     },
-    inputsend: function(){
-      this.send("number", this._val);
+    inputsend: function () {
+      this.send('number', this._val);
     },
-    redraw: function(timestamp){
-      this.$(".number").val( this._val );
+    redraw: function (timestamp) {
+      this.$('.number').val(this._val);
     },
     inputs: {
       value: {
-        type: "float",
-        description: "default number"
+        type: 'float',
+        description: 'default number',
       },
       label: {
-        type: "string",
-        description: "label for input"
+        type: 'string',
+        description: 'label for input',
       },
       send: {
-        type: "bang",
-        description: "send the text"
-      }
+        type: 'bang',
+        description: 'send the text',
+      },
     },
     outputs: {
       number: {
-        type: "float"
-      }
-    }
-
+        type: 'float',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-smartphone.js b/src/nodes/ui-smartphone.js
index 49185b6..8417e4e 100644
--- a/src/nodes/ui-smartphone.js
+++ b/src/nodes/ui-smartphone.js
@@ -1,124 +1,124 @@
-$(function(){
-
-  var template = 
-    '<div class="gamepad" style="display:none;"><img src="libs/muzzley-gamepad.jpg" style="max-width:100%;"></div>'+
-    '<div><img class="muzzley-qr" style="max-width:100%;"></div>'+
-    '<div class="muzzley-id"></div>'+
+$(function () {
+  var template =
+    '<div class="gamepad" style="display:none;"><img src="libs/muzzley-gamepad.jpg" style="max-width:100%;"></div>' +
+    '<div><img class="muzzley-qr" style="max-width:100%;"></div>' +
+    '<div class="muzzley-id"></div>' +
     '<div class="info"></div>';
 
-  var muzzleyAppToken = "45aba5e8fe6165a5";
-
-  Iframework.NativeNodes["ui-smartphone"] = Iframework.NativeNodes["ui"].extend({
-
-    template: _.template(template),
-    info: {
-      title: "smartphone",
-      description: "iOS or Android smartphone gamepad controller via muzzley.com"
-    },
-    events: {
-    },
-    initializeModule: function(){
-      if (window.muzzley) {
-        this.setupMuzzley();
-      } else {
-        var self = this;
-        yepnope({
-          load: "libs/muzzley-client-0.2.0.min.js",
-          complete: function () {
-            self.initializeModule();
-          }
-        });
-      }
-    },
-    setupMuzzley: function(){
-      var self = this;
+  var muzzleyAppToken = '45aba5e8fe6165a5';
 
-      muzzley.on('error', function(err) {
-        self.$(".info").text('Muzzley service error :-( ' + err);
-      });
-
-      muzzley.connectApp(muzzleyAppToken, function(err, activity) {
-        if (err) {
-          self.$(".info").text('Muzzley connection error :-( ' + err);
-          return;
+  Iframework.NativeNodes['ui-smartphone'] = Iframework.NativeNodes['ui'].extend(
+    {
+      template: _.template(template),
+      info: {
+        title: 'smartphone',
+        description:
+          'iOS or Android smartphone gamepad controller via muzzley.com',
+      },
+      events: {},
+      initializeModule: function () {
+        if (window.muzzley) {
+          this.setupMuzzley();
+        } else {
+          var self = this;
+          yepnope({
+            load: 'libs/muzzley-client-0.2.0.min.js',
+            complete: function () {
+              self.initializeModule();
+            },
+          });
         }
+      },
+      setupMuzzley: function () {
+        var self = this;
 
-        // Show this Activity's QR code image and id
-        // console.log(activity);
-        self.$(".muzzley-qr")[0].src = activity.qrCodeUrl;
-        self.$(".muzzley-id").text('Muzzley id: ' + activity.activityId);
-
-        activity.on('participantQuit', function(participant) {
-          // A participant quit
+        muzzley.on('error', function (err) {
+          self.$('.info').text('Muzzley service error :-( ' + err);
         });
 
-        activity.on('participantJoin', function(participant) {
+        muzzley.connectApp(muzzleyAppToken, function (err, activity) {
+          if (err) {
+            self.$('.info').text('Muzzley connection error :-( ' + err);
+            return;
+          }
+
+          // Show this Activity's QR code image and id
+          // console.log(activity);
+          self.$('.muzzley-qr')[0].src = activity.qrCodeUrl;
+          self.$('.muzzley-id').text('Muzzley id: ' + activity.activityId);
 
-          // A participant joined. Tell him to transform into a gamepad.
-          participant.changeWidget('gamepad', function (err) {
-            if (err) {
-              self.$(".info").text('Muzzley widget error :-( ' + err);
-              self.$(".gamepad").hide();
-              return;
-            }
-            self.$(".gamepad").show();
+          activity.on('participantQuit', function (participant) {
+            // A participant quit
           });
 
-          participant.on('action', function (action) {
-            // The action object represents the participant's interaction.
-            // In this case it might be "button 'a' was pressed".
-            self.action(action);
-          });
+          activity.on('participantJoin', function (participant) {
+            // A participant joined. Tell him to transform into a gamepad.
+            participant.changeWidget('gamepad', function (err) {
+              if (err) {
+                self.$('.info').text('Muzzley widget error :-( ' + err);
+                self.$('.gamepad').hide();
+                return;
+              }
+              self.$('.gamepad').show();
+            });
 
-          participant.on('quit', function (action) {
-            self.$(".gamepad").hide();
-            // You can also check for participant quit events
-            // directly in each participant object.
-          });
+            participant.on('action', function (action) {
+              // The action object represents the participant's interaction.
+              // In this case it might be "button 'a' was pressed".
+              self.action(action);
+            });
 
+            participant.on('quit', function (action) {
+              self.$('.gamepad').hide();
+              // You can also check for participant quit events
+              // directly in each participant object.
+            });
+          });
         });
-      });
-    },
-    action: function (a) {
-      if (a.e === "release") { return; }
-      switch (a.c) {
-        case "jl":
-          var angle = (90-a.v) / 360 % 1;
-          this.send("joystick", angle);
-          break;
-        case "ba":
-          this.send("button1", "!");
-          break;
-        case "bb":
-          this.send("button2", "!");
-          break;
-        case "bc":
-          this.send("button3", "!");
-          break;
-        case "bd":
-          this.send("button4", "!");
-          break;
-        default:
-          break;
-      }
-    },
-    outputs: {
-      joystick: {
-        description: "joystick angle",
-        type: "float"
-      },
-      button1: {
-        type: "bang"
       },
-      button2: {
-        type: "bang"
+      action: function (a) {
+        if (a.e === 'release') {
+          return;
+        }
+        switch (a.c) {
+          case 'jl':
+            var angle = ((90 - a.v) / 360) % 1;
+            this.send('joystick', angle);
+            break;
+          case 'ba':
+            this.send('button1', '!');
+            break;
+          case 'bb':
+            this.send('button2', '!');
+            break;
+          case 'bc':
+            this.send('button3', '!');
+            break;
+          case 'bd':
+            this.send('button4', '!');
+            break;
+          default:
+            break;
+        }
       },
-      button3: {
-        type: "bang"
+      outputs: {
+        joystick: {
+          description: 'joystick angle',
+          type: 'float',
+        },
+        button1: {
+          type: 'bang',
+        },
+        button2: {
+          type: 'bang',
+        },
+        button3: {
+          type: 'bang',
+        },
+        button4: {
+          type: 'bang',
+        },
       },
-      button4: {
-        type: "bang"
-      }
     }
-  });
+  );
 });
diff --git a/src/nodes/ui-text.js b/src/nodes/ui-text.js
index 17e3866..6f9dd76 100644
--- a/src/nodes/ui-text.js
+++ b/src/nodes/ui-text.js
@@ -2,9 +2,9 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
+$(function () {
+  // prettier-ignore
+  var template =
     '<form class="textform">'+
       '<label><span class="label"></span> '+
         '<input type="text" class="text" style="width:90%"></input>'+
@@ -12,56 +12,52 @@ $(function(){
       '<button class="send" type="submit">send</button>'+
     '</form>';
 
-  Iframework.NativeNodes["ui-text"] = Iframework.NativeNodes["ui"].extend({
-
+  Iframework.NativeNodes['ui-text'] = Iframework.NativeNodes['ui'].extend({
     template: _.template(template),
     info: {
-      title: "text",
-      description: "a text box to save and send text"
+      title: 'text',
+      description: 'a text box to save and send text',
     },
     events: {
-      "submit .textform": "submit"
+      'submit .textform': 'submit',
     },
-    initializeModule: function(){
-      this.$(".button").button();
+    initializeModule: function () {
+      this.$('.button').button();
     },
-    submit: function(){
-      this._val = this.$(".text").val();
+    submit: function () {
+      this._val = this.$('.text').val();
       this.inputsend();
       return false;
     },
-    inputvalue: function(val){
+    inputvalue: function (val) {
       this._val = val;
-      this.$(".text").val(val);
+      this.$('.text').val(val);
       this.inputsend();
     },
-    inputlabel: function(label){
-      this.$(".label").text(label);
+    inputlabel: function (label) {
+      this.$('.label').text(label);
     },
-    inputsend: function(){
-      this.send("string", this._val);
+    inputsend: function () {
+      this.send('string', this._val);
     },
     inputs: {
       value: {
-        type: "string",
-        description: "manual input of text"
+        type: 'string',
+        description: 'manual input of text',
       },
       label: {
-        type: "string",
-        description: "label for input"
+        type: 'string',
+        description: 'label for input',
       },
       send: {
-        type: "bang",
-        description: "send the text"
-      }
+        type: 'bang',
+        description: 'send the text',
+      },
     },
     outputs: {
       string: {
-        type: "string"
-      }
-    }
-
+        type: 'string',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-textarea.js b/src/nodes/ui-textarea.js
index 13748e0..82a80b6 100644
--- a/src/nodes/ui-textarea.js
+++ b/src/nodes/ui-textarea.js
@@ -2,9 +2,9 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
+$(function () {
+  // prettier-ignore
+  var template =
     '<form class="textform">'+
       '<div style="position:absolute; top:2px; right:4px; bottom:30px; left:2px;">'+
         '<textarea class="text" style="width:100%; height:100%;"></textarea>'+
@@ -12,49 +12,45 @@ $(function(){
       '<button class="send" type="submit" style="position:absolute; bottom:0; left:0;">send</button>'+
     '</form>';
 
-  Iframework.NativeNodes["ui-textarea"] = Iframework.NativeNodes["ui"].extend({
-
+  Iframework.NativeNodes['ui-textarea'] = Iframework.NativeNodes['ui'].extend({
     template: _.template(template),
     info: {
-      title: "textarea",
-      description: "a multiline text box to save and send text"
+      title: 'textarea',
+      description: 'a multiline text box to save and send text',
     },
     events: {
-      "submit .textform": "submit"
+      'submit .textform': 'submit',
     },
-    initializeModule: function(){
-      this.$(".button").button();
+    initializeModule: function () {
+      this.$('.button').button();
     },
-    submit: function(){
-      this._val = this.$(".text").val();
+    submit: function () {
+      this._val = this.$('.text').val();
       this.inputsend();
       return false;
     },
-    inputvalue: function(val){
+    inputvalue: function (val) {
       this._val = val;
-      this.$(".text").val(val);
+      this.$('.text').val(val);
       this.inputsend();
     },
-    inputsend: function(){
-      this.send("string", this._val);
+    inputsend: function () {
+      this.send('string', this._val);
     },
     inputs: {
       value: {
-        type: "string",
-        description: "manual input of text"
+        type: 'string',
+        description: 'manual input of text',
       },
       send: {
-        type: "bang",
-        description: "send the text"
-      }
+        type: 'bang',
+        description: 'send the text',
+      },
     },
     outputs: {
       string: {
-        type: "string"
-      }
-    }
-
+        type: 'string',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-vslider.js b/src/nodes/ui-vslider.js
index e23db55..1660cd2 100644
--- a/src/nodes/ui-vslider.js
+++ b/src/nodes/ui-vslider.js
@@ -2,41 +2,46 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="slider" style="position:absolute; top:15px;left:15px;"></div>'+
+$(function () {
+  var template =
+    '<div class="slider" style="position:absolute; top:15px;left:15px;"></div>' +
     '<div class="info" style="position:absolute; top:15px;left:45px;" />';
 
-  Iframework.NativeNodes["ui-vslider"] = Iframework.NativeNodes["ui"].extend({
-
+  Iframework.NativeNodes['ui-vslider'] = Iframework.NativeNodes['ui'].extend({
     template: _.template(template),
     info: {
-      title: "vslider",
-      description: "vertical slider"
+      title: 'vslider',
+      description: 'vertical slider',
     },
     events: {
-      "slide .slider": "slide"
+      'slide .slider': 'slide',
     },
-    initializeModule: function(){
-      if (this._value === undefined) { this._value = 0; }
-      if (this._min === undefined) { this._min = 0; }
-      if (this._max === undefined) { this._max = 1; }
-      if (this._step === undefined) { this._step = 0; }
-      this.$(".slider")
-        .slider({
-          orientation: "vertical",
-          value: this._value,
-          min: this._min,
-          max: this._max,
-          step: this._step === 0 ? 0.001 : this._step
-        });
+    initializeModule: function () {
+      if (this._value === undefined) {
+        this._value = 0;
+      }
+      if (this._min === undefined) {
+        this._min = 0;
+      }
+      if (this._max === undefined) {
+        this._max = 1;
+      }
+      if (this._step === undefined) {
+        this._step = 0;
+      }
+      this.$('.slider').slider({
+        orientation: 'vertical',
+        value: this._value,
+        min: this._min,
+        max: this._max,
+        step: this._step === 0 ? 0.001 : this._step,
+      });
       this.$el.css({
-        overflow: "hidden"
+        overflow: 'hidden',
       });
 
       var self = this;
-      _.delay(function(){
+      _.delay(function () {
         self.resize();
       }, 100);
     },
@@ -44,59 +49,55 @@ $(function(){
       this.setValue(ui.value);
       this.inputsend();
     },
-    inputvalue: function(val){
+    inputvalue: function (val) {
       this.setValue(val);
-      this.$(".slider").slider({
-        value: val
+      this.$('.slider').slider({
+        value: val,
       });
       this.inputsend();
     },
-    setValue: function(val){
+    setValue: function (val) {
       this._value = val;
-      this.$(".info").text(this._value);      
+      this.$('.info').text(this._value);
     },
-    inputsend: function(){
-      this.send("value", this._value);
-      this.$(".info").text(this._value);
+    inputsend: function () {
+      this.send('value', this._value);
+      this.$('.info').text(this._value);
     },
-    redraw: function(){
+    redraw: function () {
       // Actually just sets up the slider again
       this.initializeModule();
     },
-    resize: function(){
-      this.$(".slider")
-        .css({
-          height: this.$el.height()-30
-        });
+    resize: function () {
+      this.$('.slider').css({
+        height: this.$el.height() - 30,
+      });
     },
     inputs: {
       value: {
-        type: "float",
-        description: "manual input value; sets default",
-        "default": 0
+        type: 'float',
+        description: 'manual input value; sets default',
+        default: 0,
       },
       min: {
-        type: "float",
-        description: "slider jumps values",
-        "default": 0
+        type: 'float',
+        description: 'slider jumps values',
+        default: 0,
       },
       max: {
-        type: "float",
-        "default": 1
+        type: 'float',
+        default: 1,
       },
       step: {
-        type: "float",
-        description: "slider jumps by this amount",
-        "default": 0
-      }
+        type: 'float',
+        description: 'slider jumps by this amount',
+        default: 0,
+      },
     },
     outputs: {
       value: {
-        type: "float"
-      }
-    }
-
+        type: 'float',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/ui-xy.js b/src/nodes/ui-xy.js
index f584af4..37b978f 100644
--- a/src/nodes/ui-xy.js
+++ b/src/nodes/ui-xy.js
@@ -2,22 +2,21 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
+$(function () {
+  // prettier-ignore
+  var template =
     '<div class="xypad" style="position:absolute; overflow:hidden; top:0;right:0;bottom:0;left:0;">'+
       '<span class="info" style="font-size:10px;">(0.5,0.5)</span>'+
       '<div class="xy" style="position:absolute; font-size:20px; top:50%;left:50%; cursor:default; height:20px;width:20px;">+</div>'+
     '</div>';
 
-  Iframework.NativeNodes["ui-xy"] = Iframework.NativeNodes["ui"].extend({
-
+  Iframework.NativeNodes['ui-xy'] = Iframework.NativeNodes['ui'].extend({
     template: _.template(template),
     info: {
-      title: "xy pad",
-      description: "sends coordinates as percentage"
+      title: 'xy pad',
+      description: 'sends coordinates as percentage',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       var self = this;
       // this.$(".xypad")
       //   .mousedown(function(e){
@@ -31,51 +30,46 @@ $(function(){
       //       top: y+"px"
       //     });
       //   });
-      this.$(".xy")
-        .draggable({
-          scroll: false,
-          start: function(){
-            self._width = self.$(".xypad").width();
-            self._height = self.$(".xypad").height();
-          },
-          drag: function(e, ui){
-            self.sendPosition(ui.position);
-          },
-          containment: "parent"
-        });
+      this.$('.xy').draggable({
+        scroll: false,
+        start: function () {
+          self._width = self.$('.xypad').width();
+          self._height = self.$('.xypad').height();
+        },
+        drag: function (e, ui) {
+          self.sendPosition(ui.position);
+        },
+        containment: 'parent',
+      });
     },
-    resize: function(){
-      this.$(".xy")
-        .css({
-          left: this._xPercent * 0.9 * 100 + "%",
-          top: this._yPercent * 0.9 * 100 + "%"
-        });
+    resize: function () {
+      this.$('.xy').css({
+        left: this._xPercent * 0.9 * 100 + '%',
+        top: this._yPercent * 0.9 * 100 + '%',
+      });
     },
-    sendPosition: function(pos){
+    sendPosition: function (pos) {
       this._xPercent = (pos.left - 10) / (this._width - 30);
       this._xPercent = Math.max(0, this._xPercent);
       this._xPercent = Math.min(1.0, this._xPercent);
-      var xPercentRound = Math.round(this._xPercent*1000)/1000;
+      var xPercentRound = Math.round(this._xPercent * 1000) / 1000;
       this._yPercent = (pos.top - 10) / (this._height - 30);
       this._yPercent = Math.max(0, this._yPercent);
       this._yPercent = Math.min(1.0, this._yPercent);
-      var yPercentRound = Math.round(this._yPercent*1000)/1000;
+      var yPercentRound = Math.round(this._yPercent * 1000) / 1000;
       // Display
-      this.$(".info").text("("+xPercentRound+","+yPercentRound+")");
+      this.$('.info').text('(' + xPercentRound + ',' + yPercentRound + ')');
       // Send
-      this.send("x", this._xPercent);
-      this.send("y", this._yPercent);
+      this.send('x', this._xPercent);
+      this.send('y', this._yPercent);
     },
     outputs: {
       x: {
-        type: "float"
+        type: 'float',
       },
       y: {
-        type: "float"
-      }
-    }
-
+        type: 'float',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/ui.js b/src/nodes/ui.js
index 5fd64c4..899e21f 100644
--- a/src/nodes/ui.js
+++ b/src/nodes/ui.js
@@ -1,17 +1,10 @@
 // extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="info" />';
-
-  Iframework.NativeNodes["ui"] = Iframework.NodeBoxNativeView.extend({
+$(function () {
+  var template = '<div class="info" />';
 
+  Iframework.NativeNodes['ui'] = Iframework.NodeBoxNativeView.extend({
     template: _.template(template),
-    initializeCategory: function() {
-    }
-
+    initializeCategory: function () {},
   });
-
-
 });
diff --git a/src/nodes/util-color-hsla.js b/src/nodes/util-color-hsla.js
index 2971ad3..f4b20b9 100644
--- a/src/nodes/util-color-hsla.js
+++ b/src/nodes/util-color-hsla.js
@@ -1,26 +1,27 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
+$(function () {
+  // prettier-ignore
+  var template =
     '<div class="samplebg" style="background-image: url(img/alphabg.png); display: inline-block; width: 100px; height: 100px;">'+
       '<div class="sample" style="display: inline-block; width: 100px; height: 100px;"></div>'+
     '</div>'+
     '<div class="info">...</div>';
 
-  Iframework.NativeNodes["util-color-hsla"] = Iframework.NativeNodes["util"].extend({
-
+  Iframework.NativeNodes['util-color-hsla'] = Iframework.NativeNodes[
+    'util'
+  ].extend({
     template: _.template(template),
     info: {
-      title: "color-hsla",
-      description: "make hsla() css color (hue, saturation, lightness, alpha)"
+      title: 'color-hsla',
+      description: 'make hsla() css color (hue, saturation, lightness, alpha)',
     },
-    initializeModule: function(){
-      this.sampleEl = this.$(".sample");
-      this.infoEl = this.$(".info");
+    initializeModule: function () {
+      this.sampleEl = this.$('.sample');
+      this.infoEl = this.$('.info');
     },
     inputhue: function (f) {
-      if (f<0.00000001) {
+      if (f < 0.00000001) {
         // js color doesn't like 1e-9 hue
         f = 0;
       }
@@ -28,49 +29,55 @@ $(function(){
 
       this._triggerRedraw = true;
     },
-    _color: "",
-    redraw: function(timestamp){
+    _color: '',
+    redraw: function (timestamp) {
       // Called from NodeBoxNativeView.renderAnimationFrame()
-      var newColor = "hsla("+(this._hue*360).toFixed(3)+", "+(this._saturation*100)+"%, "+(this._lightness*100)+"%, "+this._alpha+")";
+      var newColor =
+        'hsla(' +
+        (this._hue * 360).toFixed(3) +
+        ', ' +
+        this._saturation * 100 +
+        '%, ' +
+        this._lightness * 100 +
+        '%, ' +
+        this._alpha +
+        ')';
       if (this._color !== newColor) {
         this._color = newColor;
-        this.sampleEl.css({"background-color": this._color});
+        this.sampleEl.css({'background-color': this._color});
         this.infoEl.text(this._color);
       }
       this.inputsend();
     },
     inputsend: function () {
-      this.send("color", this._color);
+      this.send('color', this._color);
     },
     inputs: {
       hue: {
-        type: "float",
-        description: "hue value, 0-1 (translated to 0-360)",
-        "default": 0
+        type: 'float',
+        description: 'hue value, 0-1 (translated to 0-360)',
+        default: 0,
       },
       saturation: {
-        type: "float",
-        description: "saturation value, 0-1",
-        "default": 1
+        type: 'float',
+        description: 'saturation value, 0-1',
+        default: 1,
       },
       lightness: {
-        type: "float",
-        description: "lightness value, 0-1",
-        "default": 0.5
+        type: 'float',
+        description: 'lightness value, 0-1',
+        default: 0.5,
       },
       alpha: {
-        type: "float",
-        description: "alpha value, 0-1",
-        "default": 1
-      }
+        type: 'float',
+        description: 'alpha value, 0-1',
+        default: 1,
+      },
     },
     outputs: {
       color: {
-        type: "color:hsla"
-      }
-    }
-
+        type: 'color:hsla',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/util-count.js b/src/nodes/util-count.js
index 35edf18..9622678 100644
--- a/src/nodes/util-count.js
+++ b/src/nodes/util-count.js
@@ -1,52 +1,46 @@
 // extends src/nodes/util.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["util-count"] = Iframework.NativeNodes["util"].extend({
-
+$(function () {
+  Iframework.NativeNodes['util-count'] = Iframework.NativeNodes['util'].extend({
     info: {
-      title: "count",
-      description: "count the times that the data input is hit"
-    },
-    initializeModule: function(){
+      title: 'count',
+      description: 'count the times that the data input is hit',
     },
+    initializeModule: function () {},
     _count: 0,
-    inputdata: function(){
+    inputdata: function () {
       this._count += this._increment;
-      this.send("count", this._count);
+      this.send('count', this._count);
       this._triggerRedraw = true;
     },
-    inputfrom: function(from){
+    inputfrom: function (from) {
       this._count = from;
       this._triggerRedraw = true;
     },
     _increment: 1,
-    redraw: function(timestamp){
-      this.$(".info").text(this._count);
+    redraw: function (timestamp) {
+      this.$('.info').text(this._count);
     },
     inputs: {
       data: {
-        type: "all",
-        description: "data to count"
+        type: 'all',
+        description: 'data to count',
       },
       from: {
-        type: "float",
-        description: "from where to count, 0 to reset",
-        "default": 0
+        type: 'float',
+        description: 'from where to count, 0 to reset',
+        default: 0,
       },
       increment: {
-        type: "float",
-        description: "1 to count up, -1 to count down",
-        "default": 1
-      }
+        type: 'float',
+        description: '1 to count up, -1 to count down',
+        default: 1,
+      },
     },
     outputs: {
       count: {
-        type: "float"
-      }
-    }
-
+        type: 'float',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/util-gate.js b/src/nodes/util-gate.js
index 4c4c0f6..af43471 100644
--- a/src/nodes/util-gate.js
+++ b/src/nodes/util-gate.js
@@ -1,66 +1,59 @@
 // extends src/nodes/util.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["util-gate"] = Iframework.NativeNodes["util"].extend({
-
+$(function () {
+  Iframework.NativeNodes['util-gate'] = Iframework.NativeNodes['util'].extend({
     info: {
-      title: "gate",
-      description: "stop the data flow and let one through"
-    },
-    initializeModule: function(){
+      title: 'gate',
+      description: 'stop the data flow and let one through',
     },
-    inputdata: function(data){
+    initializeModule: function () {},
+    inputdata: function (data) {
       this._data = data;
       if (this._open) {
-        this.send("data", data);        
+        this.send('data', data);
       } else if (this._one) {
-        this.send("data", data);        
+        this.send('data', data);
         this._one = false;
       }
     },
     _one: false,
-    inputone: function(){
+    inputone: function () {
       this._one = true;
     },
-    inputprev: function(){
+    inputprev: function () {
       if (this._data) {
-        this.send("data", this._data);        
+        this.send('data', this._data);
       }
     },
     _open: false,
-    inputopen: function(b){
+    inputopen: function (b) {
       this._open = b;
-      this.$(".info").text( b ? "open" : "closed" );
-    },
-    redraw: function(timestamp){
+      this.$('.info').text(b ? 'open' : 'closed');
     },
+    redraw: function (timestamp) {},
     inputs: {
       data: {
-        type: "all",
-        description: "data to gate"
+        type: 'all',
+        description: 'data to gate',
       },
       open: {
-        type: "boolean",
-        description: "let all data through",
-        "default": false
+        type: 'boolean',
+        description: 'let all data through',
+        default: false,
       },
       one: {
-        type: "bang",
-        description: "let the next data through"
+        type: 'bang',
+        description: 'let the next data through',
       },
       prev: {
-        type: "bang",
-        description: "send the previous data"
-      }
+        type: 'bang',
+        description: 'send the previous data',
+      },
     },
     outputs: {
       data: {
-        type: "all"
-      }
-    }
-
+        type: 'all',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/util-logic.js b/src/nodes/util-logic.js
index 283b165..3ba9999 100644
--- a/src/nodes/util-logic.js
+++ b/src/nodes/util-logic.js
@@ -1,99 +1,110 @@
 // extends src/nodes/util.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["util-logic"] = Iframework.NativeNodes["util"].extend({
-
+$(function () {
+  Iframework.NativeNodes['util-logic'] = Iframework.NativeNodes['util'].extend({
     info: {
-      title: "logic",
-      description: "greater than (>) less than (<) equal (==) not equal (!=) logic"
-    },
-    initializeModule: function(){
+      title: 'logic',
+      description:
+        'greater than (>) less than (<) equal (==) not equal (!=) logic',
     },
-    inputnumber1: function(n){
+    initializeModule: function () {},
+    inputnumber1: function (n) {
       this._number1 = n;
       this.test();
     },
-    inputnumber2: function(n){
+    inputnumber2: function (n) {
       this._number2 = n;
       this.test();
     },
-    inputlogic: function(l){
-      if (l==="="){
-        l = "==";
-        this.set("logic", "==");
+    inputlogic: function (l) {
+      if (l === '=') {
+        l = '==';
+        this.set('logic', '==');
       }
-      if (l===">" || l===">=" || l==="<" || l==="<=" || l==="==" || l==="!=") {
+      if (
+        l === '>' ||
+        l === '>=' ||
+        l === '<' ||
+        l === '<=' ||
+        l === '==' ||
+        l === '!='
+      ) {
         this._logic = l;
         this.test();
       }
     },
     _result: false,
-    test: function() {
+    test: function () {
       switch (this._logic) {
-        case ">":
-          this._result = (this._number1 > this._number2);
+        case '>':
+          this._result = this._number1 > this._number2;
           break;
-        case ">=":
-          this._result = (this._number1 >= this._number2);
+        case '>=':
+          this._result = this._number1 >= this._number2;
           break;
-        case "<":
-          this._result = (this._number1 < this._number2);
+        case '<':
+          this._result = this._number1 < this._number2;
           break;
-        case "<=":
-          this._result = (this._number1 <= this._number2);
+        case '<=':
+          this._result = this._number1 <= this._number2;
           break;
-        case "==":
-          this._result = (this._number1 == this._number2);
+        case '==':
+          this._result = this._number1 == this._number2;
           break;
-        case "!=":
-          this._result = (this._number1 != this._number2);
+        case '!=':
+          this._result = this._number1 != this._number2;
           break;
         default:
           break;
       }
-      this.send("boolean", this._result);
+      this.send('boolean', this._result);
       if (this._result) {
-        this.send("true", "!");
+        this.send('true', '!');
       } else {
-        this.send("false", "!");
+        this.send('false', '!');
       }
       this._triggerRedraw = true;
     },
-    redraw: function(timestamp){
-      this.$(".info").text( this._number1 + " " + this._logic + " " + this._number2 + " " + this._result );
+    redraw: function (timestamp) {
+      this.$('.info').text(
+        this._number1 +
+          ' ' +
+          this._logic +
+          ' ' +
+          this._number2 +
+          ' ' +
+          this._result
+      );
     },
     inputs: {
       number1: {
-        type: "float",
-        description: "number to compare",
-        "default": 0
+        type: 'float',
+        description: 'number to compare',
+        default: 0,
       },
       number2: {
-        type: "float",
-        description: "number to compare",
-        "default": 0
+        type: 'float',
+        description: 'number to compare',
+        default: 0,
       },
       logic: {
-        type: "string",
-        description: "> (greater than), >=, < (less than), <=, == (equal), != (not equal)",
-        options: "> >= < <= == !=".split(" "),
-        "default": "=="
-      }
+        type: 'string',
+        description:
+          '> (greater than), >=, < (less than), <=, == (equal), != (not equal)',
+        options: '> >= < <= == !='.split(' '),
+        default: '==',
+      },
     },
     outputs: {
-      "boolean": {
-        type: "boolean"
+      boolean: {
+        type: 'boolean',
       },
-      "true": {
-        type: "bang"
+      true: {
+        type: 'bang',
       },
-      "false": {
-        type: "bang"
-      }
-    }
-
+      false: {
+        type: 'bang',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/util-math.js b/src/nodes/util-math.js
index ed93744..945dcfa 100644
--- a/src/nodes/util-math.js
+++ b/src/nodes/util-math.js
@@ -1,18 +1,17 @@
 /*global Parser:true*/
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = '<div class="info"><span class="equation"></span> <span class="solution"></span></div>';
-
-  Iframework.NativeNodes["util-math"] = Iframework.NativeNodes["util"].extend({
+$(function () {
+  var template =
+    '<div class="info"><span class="equation"></span> <span class="solution"></span></div>';
 
+  Iframework.NativeNodes['util-math'] = Iframework.NativeNodes['util'].extend({
     template: _.template(template),
     info: {
-      title: "math",
-      description: "math equation evaluator"
+      title: 'math',
+      description: 'math equation evaluator',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       var self = this;
       // WTF Firefox has an empty Parser object?
       if (window.Parser && Parser.parse) {
@@ -22,10 +21,10 @@ $(function(){
         }
       } else {
         yepnope({
-          load: "libs/js-expression-eval/parser.js",
+          load: 'libs/js-expression-eval/parser.js',
           complete: function () {
             self.initializeModule();
-          }
+          },
         });
       }
     },
@@ -43,78 +42,76 @@ $(function(){
       this._z = z;
     },
     _expression: null,
-    inputequation: function(s) {
+    inputequation: function (s) {
       if (window.Parser && Parser.parse) {
         try {
           this._expression = Parser.parse(s);
-          // For some reason immediate evaluate() without values causes this to throw 
+          // For some reason immediate evaluate() without values causes this to throw
           var self = this;
-          window.setTimeout(function(){
+          window.setTimeout(function () {
             self.inputevaluate();
           }, 500);
 
-          this.$(".equation")
-            .attr("title", this._expression.toString())
-            .text(s + " = ");
+          this.$('.equation')
+            .attr('title', this._expression.toString())
+            .text(s + ' = ');
         } catch (e) {
           this._expression = null;
-          this.$(".equation").text("error parsing equation");
-          this.$(".solution").text("");
+          this.$('.equation').text('error parsing equation');
+          this.$('.solution').text('');
         }
       } else {
         // Wait for library to load
         this._equation = s;
       }
     },
-    inputevaluate: function() {
+    inputevaluate: function () {
       if (this._expression) {
         try {
           var solution = this._expression.evaluate({
             x: this._x,
             y: this._y,
-            z: this._z
+            z: this._z,
           });
-          if (solution===solution) {
+          if (solution === solution) {
             // not NaN
-            this.send("equals", solution);
+            this.send('equals', solution);
           }
-          this.$(".solution").text(solution);
+          this.$('.solution').text(solution);
         } catch (e) {
-          this.$(".solution").text("error evaluating; got variables?");
+          this.$('.solution').text('error evaluating; got variables?');
         }
       }
     },
     inputs: {
       x: {
-        type: "float",
-        description: "hot input, will evaluate when changed",
-        "default": 0
+        type: 'float',
+        description: 'hot input, will evaluate when changed',
+        default: 0,
       },
       y: {
-        description: "cold input, will not evaluate when changed",
-        type: "float"
+        description: 'cold input, will not evaluate when changed',
+        type: 'float',
       },
       z: {
-        description: "cold input, will not evaluate when changed",
-        type: "float"
+        description: 'cold input, will not evaluate when changed',
+        type: 'float',
       },
       equation: {
-        type: "string",
-        description: "f(x,y,z) (function calls), ^ (exponentiation), *, /, and % (multiplication, division, and remainder), and finally +, -, and || (addition, subtraction, and string concatenation) ... sin(x), cos(x), tan(x), asin(x), acos(x), atan(x), sqrt(x), log(x), abs(x), ceil(x), floor(x), round(x), exp(x) ... random(n), fac(n), min(a,b,…), max(a,b,…), pyt(a, b), pow(x, y), atan2(y, x)",
-        "default": "x"
+        type: 'string',
+        description:
+          'f(x,y,z) (function calls), ^ (exponentiation), *, /, and % (multiplication, division, and remainder), and finally +, -, and || (addition, subtraction, and string concatenation) ... sin(x), cos(x), tan(x), asin(x), acos(x), atan(x), sqrt(x), log(x), abs(x), ceil(x), floor(x), round(x), exp(x) ... random(n), fac(n), min(a,b,…), max(a,b,…), pyt(a, b), pow(x, y), atan2(y, x)',
+        default: 'x',
       },
       evaluate: {
-        type: "bang",
-        description: "evaluates the equation"
-      }
+        type: 'bang',
+        description: 'evaluates the equation',
+      },
     },
     outputs: {
       equals: {
-        type: "float"
-      }
-    }
-
+        type: 'float',
+      },
+    },
   });
-
-
 });
diff --git a/src/nodes/util-stats.js b/src/nodes/util-stats.js
index 6b20772..4c47e13 100644
--- a/src/nodes/util-stats.js
+++ b/src/nodes/util-stats.js
@@ -2,36 +2,31 @@
 
 // extends src/nodes/time.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  Iframework.NativeNodes["util-stats"] = Iframework.NativeNodes["util"].extend({
-
+$(function () {
+  Iframework.NativeNodes['util-stats'] = Iframework.NativeNodes['util'].extend({
     info: {
-      title: "stats",
-      description: "fps and memory stats from mr.doob"
+      title: 'stats',
+      description: 'fps and memory stats from mr.doob',
     },
-    initializeModule: function(){
+    initializeModule: function () {
       var self = this;
       if (window.Stats) {
         if (!this._stats) {
           // Only set it up once
           this._stats = new Stats();
           this.$el.append(this._stats.domElement);
-          this._interval = window.setInterval(function(){
+          this._interval = window.setInterval(function () {
             self._stats.update();
-          }, 1000/60);
+          }, 1000 / 60);
         }
       } else {
         yepnope({
-          load: "libs/Stats.js",
+          load: 'libs/Stats.js',
           complete: function () {
             self.initializeModule();
-          }
+          },
         });
       }
-    }
-
+    },
   });
-
-
 });
diff --git a/src/nodes/util.js b/src/nodes/util.js
index 5d5ab43..689bccc 100644
--- a/src/nodes/util.js
+++ b/src/nodes/util.js
@@ -1,17 +1,10 @@
 // extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="info" />';
-
-  Iframework.NativeNodes["util"] = Iframework.NodeBoxNativeView.extend({
+$(function () {
+  var template = '<div class="info" />';
 
+  Iframework.NativeNodes['util'] = Iframework.NodeBoxNativeView.extend({
     template: _.template(template),
-    initializeCategory: function() {
-    }
-
+    initializeCategory: function () {},
   });
-
-
 });
diff --git a/src/nodes/variable-animation.js b/src/nodes/variable-animation.js
index e732704..b376261 100644
--- a/src/nodes/variable-animation.js
+++ b/src/nodes/variable-animation.js
@@ -1,6 +1,6 @@
 // extends src/nodes/image.js which extends src/node-box-native-view.js
 
-$(function() {
+$(function () {
   var template =
     '<canvas id="canvas-<%= id %>" class="preview" style="max-width:100%"></canvas>' +
     '<div class="info">frame <span class="index"></span>/<span class="length"></span></div>' +
@@ -16,39 +16,39 @@ $(function() {
     // '<button class="import">import</button>'+
     // '<form class="importform" style="display:none;">'+
     // '</form>'+
-    "</div>" +
+    '</div>' +
     '<div class="status"></div>' +
     '<div class="exports"></div>';
 
-  Iframework.NativeNodes["variable-animation"] = Iframework.NativeNodes[
-    "variable"
+  Iframework.NativeNodes['variable-animation'] = Iframework.NativeNodes[
+    'variable'
   ].extend({
     template: _.template(template),
     info: {
-      title: "animation",
-      description: "holds a stack of canvases to use as an animation"
+      title: 'animation',
+      description: 'holds a stack of canvases to use as an animation',
     },
     events: {
-      "click .play": "inputplay",
-      "click .pause": "inputpause",
-      "click .prev": "inputprev",
-      "click .next": "inputnext",
-      "click .deleteframe": "deleteFrame",
-      "change .pingpong": "clickPingpong",
-      "click .make-spritesheet": "makeSpritesheet",
-      "click .make-gif": "makeGif",
-      "wheel .preview": "handleWheel"
+      'click .play': 'inputplay',
+      'click .pause': 'inputpause',
+      'click .prev': 'inputprev',
+      'click .next': 'inputnext',
+      'click .deleteframe': 'deleteFrame',
+      'change .pingpong': 'clickPingpong',
+      'click .make-spritesheet': 'makeSpritesheet',
+      'click .make-gif': 'makeGif',
+      'wheel .preview': 'handleWheel',
     },
-    initializeModule: function() {
+    initializeModule: function () {
       this._animation = {
         width: 0,
         height: 0,
         fps: 10,
         frames: [],
-        length: 0
+        length: 0,
       };
-      this.canvas = this.$(".preview")[0];
-      this.context = this.canvas.getContext("2d");
+      this.canvas = this.$('.preview')[0];
+      this.context = this.canvas.getContext('2d');
 
       // Setup droppable
       // Add drop indicator (shown in CSS)
@@ -58,23 +58,23 @@ $(function() {
 
       // Make droppable
       this.$el.droppable({
-        accept: ".canvas, .meemoo-plugin-images-thumbnail",
-        tolerance: "pointer",
-        hoverClass: "drop-hover",
-        activeClass: "drop-active",
+        accept: '.canvas, .meemoo-plugin-images-thumbnail',
+        tolerance: 'pointer',
+        hoverClass: 'drop-hover',
+        activeClass: 'drop-active',
         // Don't also drop on graph
-        greedy: true
+        greedy: true,
       });
       this.$el.on(
-        "drop",
-        { self: this, inputName: "push" },
+        'drop',
+        {self: this, inputName: 'push'},
         Iframework.util.imageDrop
       );
     },
     wheelDelta: 0,
-    handleWheel: function(e) {
+    handleWheel: function (e) {
       e.preventDefault();
-      const { deltaY } = e.originalEvent;
+      const {deltaY} = e.originalEvent;
 
       if (deltaY > 0 && this._previewFrame > 0) {
         this.wheelDelta += deltaY;
@@ -91,22 +91,22 @@ $(function() {
         }
       }
     },
-    inputpush: function(image) {
-      var frame = document.createElement("canvas");
+    inputpush: function (image) {
+      var frame = document.createElement('canvas');
       frame.width = image.width;
       frame.height = image.height;
-      frame.getContext("2d").drawImage(image, 0, 0);
+      frame.getContext('2d').drawImage(image, 0, 0);
       this._animation.frames.push(frame);
       if (this._length && this._animation.frames.length > this._length) {
         var shifted = this._animation.frames.shift();
-        this.send("shift", shifted);
+        this.send('shift', shifted);
       }
       this._animation.length = this._animation.frames.length;
       this._animation.width = image.width;
       this._animation.height = image.height;
 
       // Info
-      this.$(".length").text(this._animation.length);
+      this.$('.length').text(this._animation.length);
 
       // Preview
       if (this.canvas.width !== image.width) {
@@ -121,24 +121,24 @@ $(function() {
 
       this.inputsend();
     },
-    showFrame: function(i) {
+    showFrame: function (i) {
       var frame = this._animation.frames[i];
       if (frame) {
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
         this.context.drawImage(frame, 0, 0);
         this._previewFrame = i;
-        this.$(".index").text(i + 1);
-        this.send("image", this.canvas);
+        this.$('.index').text(i + 1);
+        this.send('image', this.canvas);
       }
     },
     _ms: 1000 / 12,
-    inputfps: function(fps) {
+    inputfps: function (fps) {
       this._animation.fps = fps;
       this._ms = 1000 / fps;
 
       this.inputsend();
     },
-    inputlength: function(i) {
+    inputlength: function (i) {
       if (i >= 0) {
         this._length = i;
         if (this._length > 0 && this._animation.frames.length > this._length) {
@@ -147,7 +147,7 @@ $(function() {
             this._animation.frames.length
           );
           this._animation.length = this._animation.frames.length;
-          this.$(".length").text(this._animation.length);
+          this.$('.length').text(this._animation.length);
           if (this._previewFrame >= this._animation.length) {
             // Show last
             this.showFrame(this._animation.length - 1);
@@ -155,16 +155,16 @@ $(function() {
         }
       }
     },
-    deleteFrame: function() {
+    deleteFrame: function () {
       this.inputpause();
       this._animation.frames.splice(this._previewFrame, 1);
       this._animation.length = this._animation.frames.length;
-      this.$(".length").text(this._animation.length);
+      this.$('.length').text(this._animation.length);
       // Show next preview
       if (this._animation.length <= 0) {
         // No frames, make blank
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.$(".index").text("0");
+        this.$('.index').text('0');
       } else if (this._previewFrame >= this._animation.length) {
         // Show last
         this.showFrame(this._animation.length - 1);
@@ -173,42 +173,42 @@ $(function() {
         this.showFrame(this._previewFrame);
       }
     },
-    inputclear: function() {
+    inputclear: function () {
       this._animation.frames = [];
       this._animation.length = 0;
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-      this.$(".index").text("0");
-      this.$(".length").text("0");
+      this.$('.index').text('0');
+      this.$('.length').text('0');
     },
     _pingpong: false,
     _reverse: false,
-    clickPingpong: function(event) {
+    clickPingpong: function (event) {
       if (event.target.checked) {
         this._pingpong = true;
-        this.set("pingpong", true);
+        this.set('pingpong', true);
       } else {
         this._pingpong = false;
         this._reverse = false;
-        this.set("pingpong", false);
+        this.set('pingpong', false);
       }
     },
-    inputpingpong: function(boo) {
+    inputpingpong: function (boo) {
       this._pingpong = boo;
       if (!boo) {
         // Keeps it from looping backwards
         this._reverse = false;
       }
-      this.$(".pingpong")[0].checked = boo;
+      this.$('.pingpong')[0].checked = boo;
     },
     _play: false,
-    inputplay: function() {
+    inputplay: function () {
       this._play = true;
     },
-    inputpause: function() {
+    inputpause: function () {
       this._play = false;
     },
     _previewFrame: 0,
-    inputprev: function() {
+    inputprev: function () {
       // Pause
       this.inputpause();
       // Show prev or loop back
@@ -218,7 +218,7 @@ $(function() {
         this.showFrame(this._animation.frames.length - 1);
       }
     },
-    inputnext: function() {
+    inputnext: function () {
       this.inputpause();
       // Show next or loop
       if (this._previewFrame < this._animation.frames.length - 1) {
@@ -227,13 +227,13 @@ $(function() {
         this.showFrame(0);
       }
     },
-    makeSpritesheet: function() {
+    makeSpritesheet: function () {
       if (this._animation.length < 1) {
         return;
       }
 
-      var image = document.createElement("canvas");
-      var imageContext = image.getContext("2d");
+      var image = document.createElement('canvas');
+      var imageContext = image.getContext('2d');
       image.width = this._animation.width * this._animation.length;
       image.height = this._animation.height;
       var x = 0;
@@ -245,39 +245,39 @@ $(function() {
         '<img class="image" src="' +
         image.toDataURL() +
         '" style="max-width:100%" />';
-      self.$(".exports").prepend(img);
+      self.$('.exports').prepend(img);
     },
-    copyDragImage: function(helper) {
-      var img = helper.data("meemoo-source-image");
-      var imageCopy = document.createElement("img");
+    copyDragImage: function (helper) {
+      var img = helper.data('meemoo-source-image');
+      var imageCopy = document.createElement('img');
       imageCopy.src = img.src;
       helper.append(imageCopy);
     },
-    makeImageDraggable: function(img) {
+    makeImageDraggable: function (img) {
       var self = this;
       $(img)
-        .attr("title", "drag to images menu to save")
+        .attr('title', 'drag to images menu to save')
         .draggable({
-          cursor: "pointer",
-          cursorAt: { top: -10, left: -10 },
-          helper: function(event) {
+          cursor: 'pointer',
+          cursorAt: {top: -10, left: -10},
+          helper: function (event) {
             var helper = $(
               '<div class="drag-image"><h2>Save this</h2></div>'
             ).data({
-              "meemoo-drag-type": "image",
-              "meemoo-source-image": img[0]
+              'meemoo-drag-type': 'image',
+              'meemoo-source-image': img[0],
             });
             $(document.body).append(helper);
-            _.delay(function() {
+            _.delay(function () {
               self.copyDragImage(helper);
             }, 100);
             return helper;
-          }
+          },
         });
     },
     _matte: [255, 255, 255],
     _transparent: [0, 255, 0],
-    makeGif: function(stackUp) {
+    makeGif: function (stackUp) {
       if (this._animation.length <= 0) {
         return false;
       }
@@ -287,73 +287,65 @@ $(function() {
       }
 
       // Spawn worker
-      this.$(".status").text("Setting up GIF...");
-      this.$(".make-gif")
-        .prop("disabled", true)
-        .text("make gif (busy...)");
-      var gifWorker = new Worker("libs/omggif/omggif-worker.js");
+      this.$('.status').text('Setting up GIF...');
+      this.$('.make-gif').prop('disabled', true).text('make gif (busy...)');
+      var gifWorker = new Worker('libs/omggif/omggif-worker.js');
 
       // Setup listeners
       var self = this;
       gifWorker.addEventListener(
-        "message",
-        function(e) {
-          if (e.data.type === "progress") {
+        'message',
+        function (e) {
+          if (e.data.type === 'progress') {
             self
-              .$(".status")
-              .text("GIF " + Math.round(e.data.data * 100) + "% encoded...");
-          } else if (e.data.type === "gif") {
-            var gifurl = "data:image/gif;base64," + window.btoa(e.data.data);
+              .$('.status')
+              .text('GIF ' + Math.round(e.data.data * 100) + '% encoded...');
+          } else if (e.data.type === 'gif') {
+            var gifurl = 'data:image/gif;base64,' + window.btoa(e.data.data);
             if (stackUp) {
               var img = $('<img class="image" />').attr({
                 src: gifurl,
-                style: "max-width:100%"
+                style: 'max-width:100%',
               });
               // Format file size
               var fileSize = Math.round(e.data.data.length / 1024);
-              var fileSizeUnit = "kb";
+              var fileSizeUnit = 'kb';
               if (fileSize >= 1024) {
                 fileSize = Math.round((fileSize / 1024) * 10) / 10;
-                fileSizeUnit = "mb";
+                fileSizeUnit = 'mb';
               }
               var encodeTime = Math.round(e.data.encodeTime / 100) / 10;
               self
-                .$(".exports")
+                .$('.exports')
                 .prepend(
-                  "<div>" +
+                  '<div>' +
                     e.data.frameCount +
-                    " frames (" +
+                    ' frames (' +
                     fileSize +
                     fileSizeUnit +
-                    ") encoded in " +
+                    ') encoded in ' +
                     encodeTime +
-                    "s</div>"
+                    's</div>'
                 );
-              self.$(".exports").prepend(img);
+              self.$('.exports').prepend(img);
 
               // Make draggable
               self.makeImageDraggable(img);
             }
-            self.$(".status").text("");
-            self
-              .$(".make-gif")
-              .prop("disabled", false)
-              .text("make gif");
+            self.$('.status').text('');
+            self.$('.make-gif').prop('disabled', false).text('make gif');
 
             // Send data url
-            self.send("gif", gifurl);
+            self.send('gif', gifurl);
           }
         },
         false
       );
       gifWorker.addEventListener(
-        "error",
-        function(e) {
-          self.$(".status").text("GIF encoding error :-(");
-          self
-            .$(".make-gif")
-            .prop("disabled", false)
-            .text("make gif");
+        'error',
+        function (e) {
+          self.$('.status').text('GIF encoding error :-(');
+          self.$('.make-gif').prop('disabled', false).text('make gif');
           gifWorker.terminate();
         },
         false
@@ -363,7 +355,7 @@ $(function() {
       var frames = [];
       for (var i = 0; i < this._animation.length; i++) {
         var imageData = this._animation.frames[i]
-          .getContext("2d")
+          .getContext('2d')
           .getImageData(0, 0, this._animation.width, this._animation.height);
         frames[i] = imageData;
         if (this._pingpong && i > 0 && i < this._animation.length - 1) {
@@ -374,21 +366,21 @@ $(function() {
         frames: frames,
         delay: this._ms,
         matte: this._matte,
-        transparent: this._transparent
+        transparent: this._transparent,
       });
     },
-    inputsendGif: function() {
-      if (self.$(".make-gif")[0].disabled) {
+    inputsendGif: function () {
+      if (self.$('.make-gif')[0].disabled) {
         return false;
       }
 
       this.makeGif(false);
     },
-    inputsend: function() {
-      this.send("animation", this._animation);
+    inputsend: function () {
+      this.send('animation', this._animation);
     },
-    redraw: function(timestamp) {},
-    renderAnimationFrame: function(timestamp) {
+    redraw: function (timestamp) {},
+    renderAnimationFrame: function (timestamp) {
       if (this._play && timestamp - this._lastRedraw >= this._ms) {
         if (this._reverse) {
           this._previewFrame--;
@@ -423,70 +415,70 @@ $(function() {
     },
     inputs: {
       push: {
-        type: "image",
-        description: "adds image to end of array"
+        type: 'image',
+        description: 'adds image to end of array',
       },
       length: {
-        type: "int",
-        description: "max length of array"
+        type: 'int',
+        description: 'max length of array',
       },
       fps: {
-        type: "float",
-        description: "frames per second to animate",
-        default: 12
+        type: 'float',
+        description: 'frames per second to animate',
+        default: 12,
       },
       pingpong: {
-        type: "boolean",
-        description: "loop animation back and forth",
-        default: false
+        type: 'boolean',
+        description: 'loop animation back and forth',
+        default: false,
       },
       play: {
-        type: "bang",
-        description: "start the preview animation"
+        type: 'bang',
+        description: 'start the preview animation',
       },
       pause: {
-        type: "bang",
-        description: "stop the preview animation"
+        type: 'bang',
+        description: 'stop the preview animation',
       },
       prev: {
-        type: "bang",
-        description: "when paused, show the prev frame"
+        type: 'bang',
+        description: 'when paused, show the prev frame',
       },
       next: {
-        type: "bang",
-        description: "when paused, show the next frame"
+        type: 'bang',
+        description: 'when paused, show the next frame',
       },
       clear: {
-        type: "bang",
-        description: "delete all frames in the animation"
+        type: 'bang',
+        description: 'delete all frames in the animation',
       },
       sendOne: {
-        type: "int",
-        description: "sends canvas with this index"
+        type: 'int',
+        description: 'sends canvas with this index',
       },
       sendGif: {
-        type: "bang",
-        description: "encodes and sends gif as data url"
+        type: 'bang',
+        description: 'encodes and sends gif as data url',
       },
       send: {
-        type: "bang",
-        description: "sends animation object"
-      }
+        type: 'bang',
+        description: 'sends animation object',
+      },
     },
     outputs: {
       image: {
-        type: "image",
-        description: "the preview canvas"
+        type: 'image',
+        description: 'the preview canvas',
       },
       animation: {
-        type: "animation",
+        type: 'animation',
         description:
-          "animation object has width, height, fps, frames (array of canvases), and length (frames.length)"
+          'animation object has width, height, fps, frames (array of canvases), and length (frames.length)',
       },
       gif: {
-        type: "data:image/gif",
-        description: "completed gif as dataurl"
-      }
-    }
+        type: 'data:image/gif',
+        description: 'completed gif as dataurl',
+      },
+    },
   });
 });
diff --git a/src/nodes/variable.js b/src/nodes/variable.js
index 6f53f4f..0b32904 100644
--- a/src/nodes/variable.js
+++ b/src/nodes/variable.js
@@ -1,17 +1,10 @@
 // extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<div class="info" />';
-
-  Iframework.NativeNodes["variable"] = Iframework.NodeBoxNativeView.extend({
+$(function () {
+  var template = '<div class="info" />';
 
+  Iframework.NativeNodes['variable'] = Iframework.NodeBoxNativeView.extend({
     template: _.template(template),
-    initializeCategory: function() {
-    }
-
+    initializeCategory: function () {},
   });
-
-
 });
diff --git a/src/nodes/video-player.js b/src/nodes/video-player.js
index 1d57dae..d6e83bd 100644
--- a/src/nodes/video-player.js
+++ b/src/nodes/video-player.js
@@ -1,6 +1,6 @@
 // extends src/nodes/video.js which extends src/node-box-native-view.js
 
-$(function() {
+$(function () {
   var template =
     '<video id="video-<%= id %>" class="video" controls="" playsinline="" crossorigin="anonymous" style="max-width:100%;" /><br />' +
     '<button class="play">play</button>' +
@@ -29,7 +29,7 @@ $(function() {
       'click .choosefile': 'chooseFile',
       'change .fileinput': 'choseFile',
     },
-    initializeModule: function() {
+    initializeModule: function () {
       this.$('button').button();
 
       this._video = this.$('video')[0];
@@ -39,14 +39,14 @@ $(function() {
       this._video.autoplay = this._autoplay;
       this._video.loop = this._loop;
       var self = this;
-      $(this._video).on('loadedmetadata', function(e) {
+      $(this._video).on('loadedmetadata', function (e) {
         self.loadedMetadata();
       });
-      $(this._video).on('ended', function(e) {
+      $(this._video).on('ended', function (e) {
         self.send('ended');
       });
     },
-    inputurl: function(url) {
+    inputurl: function (url) {
       if (this._url !== url) {
         // TODO: remake video element, since ff doesn't notice source changes
         // this.$el.remove(this._video);
@@ -62,17 +62,17 @@ $(function() {
           // Multiple sources
           this._video.removeAttribute('src');
           var sources = '';
-          _.each(urls, function(url) {
+          _.each(urls, function (url) {
             sources += '<source src="' + url + '" />';
           });
           $(this._video).html(sources);
         }
       }
     },
-    chooseFile: function() {
+    chooseFile: function () {
       this.$('.fileinput').trigger('click');
     },
-    choseFile: function(event) {
+    choseFile: function (event) {
       // Thanks Robert Nyman https://hacks.mozilla.org/2012/04/taking-pictures-with-the-camera-api-part-of-webapi/
       // Get a reference to the taken picture or chosen file
       var files = event.target.files;
@@ -80,7 +80,7 @@ $(function() {
         this.loadFile(files[0]);
       }
     },
-    loadFile: function(file) {
+    loadFile: function (file) {
       try {
         // Create ObjectURL
         var imgURL = window.URL.createObjectURL(file);
@@ -92,7 +92,7 @@ $(function() {
         try {
           // Fallback if createObjectURL is not supported
           var fileReader = new FileReader();
-          fileReader.onload = function(event) {
+          fileReader.onload = function (event) {
             this._video.src = event.target.result;
           };
           fileReader.readAsDataURL(file);
@@ -101,7 +101,7 @@ $(function() {
         }
       }
     },
-    loadedMetadata: function() {
+    loadedMetadata: function () {
       // Called from this._video loadedmetadata
       if (this._video) {
         // Here we find the video's reported size
@@ -110,7 +110,7 @@ $(function() {
         if (!this._height) {
           // Firefox takes its time; try again in 0.5s
           var self = this;
-          window.setTimeout(function() {
+          window.setTimeout(function () {
             self.loadedMetadata();
           }, 500);
           return false;
@@ -129,7 +129,7 @@ $(function() {
     },
     _corsTested: false,
     _corsOK: false,
-    drawFrame: function() {
+    drawFrame: function () {
       if (!this._videoStarted) {
         return false;
       }
@@ -162,41 +162,41 @@ $(function() {
         }
       }
     },
-    inputplay: function() {
+    inputplay: function () {
       this._video.play();
     },
-    inputpause: function() {
+    inputpause: function () {
       this._video.pause();
     },
-    inputtime: function(time) {
+    inputtime: function (time) {
       this._video.currentTime = time;
     },
-    inputvolume: function(v) {
+    inputvolume: function (v) {
       this._video.volume = v;
     },
-    inputmuted: function(bool) {
+    inputmuted: function (bool) {
       this._muted = bool;
       this._video.muted = bool;
     },
-    inputautoplay: function(bool) {
+    inputautoplay: function (bool) {
       this._autoplay = bool;
       this._video.autoplay = bool;
     },
-    inputloop: function(bool) {
+    inputloop: function (bool) {
       this._loop = bool;
       this._video.loop = bool;
     },
     _frameTime: 1 / 30,
-    inputforward: function() {
+    inputforward: function () {
       this._video.pause();
       this._video.currentTime += this._frameTime;
     },
-    inputback: function() {
+    inputback: function () {
       this._video.pause();
       this._video.currentTime -= this._frameTime;
     },
     _sendNext: false,
-    inputsend: function() {
+    inputsend: function () {
       if (this._video.paused) {
         // Send now
         this.send('image', this.canvas);
@@ -205,7 +205,7 @@ $(function() {
         this._sendNext = true;
       }
     },
-    remove: function() {
+    remove: function () {
       if (this._stream) {
         this._stream.stop();
       }
@@ -213,7 +213,7 @@ $(function() {
         clearInterval(this._interval);
       }
     },
-    redraw: function() {
+    redraw: function () {
       // Called from NodeBoxNativeView.renderAnimationFrame()
       if (this.resetSizes) {
         this.setSizes();
@@ -221,7 +221,7 @@ $(function() {
       }
     },
     _lastTimeSent: null,
-    renderAnimationFrame: function(timestamp) {
+    renderAnimationFrame: function (timestamp) {
       // Get a tick from GraphView.renderAnimationFrame()
       // this._valueChanged is set by NodeBox.receive()
       if (this._triggerRedraw) {
diff --git a/src/nodes/video.js b/src/nodes/video.js
index f39ed71..8979e0a 100644
--- a/src/nodes/video.js
+++ b/src/nodes/video.js
@@ -1,19 +1,13 @@
 // extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
-    '<video id="video-<%= id %>" class="video" style="max-width:100%;" />'+
-    '<button >'+
+$(function () {
+  var template =
+    '<video id="video-<%= id %>" class="video" style="max-width:100%;" />' +
+    '<button >' +
     '<div class="info" />';
 
-  Iframework.NativeNodes["video"] = Iframework.NodeBoxNativeView.extend({
-
+  Iframework.NativeNodes['video'] = Iframework.NodeBoxNativeView.extend({
     template: _.template(template),
-    initializeCategory: function() {
-    }
-
+    initializeCategory: function () {},
   });
-
-
 });
diff --git a/src/nodes/view-layers.js b/src/nodes/view-layers.js
index 52beb05..d8255c4 100644
--- a/src/nodes/view-layers.js
+++ b/src/nodes/view-layers.js
@@ -1,8 +1,8 @@
 // extends src/nodes/view.js which extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
+$(function () {
+  // prettier-ignore
+  var template =
     '<div class="layers" style="z-index:1" />'+
     '<div class="info" style="position:absolute; left:0; bottom:0; z-index:2">'+
       '<div>deprecated, try image/layers instead</div>'+
@@ -10,158 +10,181 @@ $(function(){
       '<button class="refresh">refresh</button>'+
     '</div>';
 
-  Iframework.NativeNodes["view-layers"] = Iframework.NativeNodes["view"].extend({
-
-    info: {
-      title: "layers",
-      description: "can get any of the canvases in the graph and make a stack of them"
-    },
-    template: _.template(template),
-    events: {
-      "change .vis": "setVis",
-      "click .refresh": "refreshList",
-      "sortstop .list": "sortLayers"
-    },
-    initializeModule: function(){
-      this.mainDiv = this.$(".layers")[0];
-      this.visible = {};
-      // Make list
-      var self = this;
-      _.delay(function(){self.refreshList();}, 1000);
-    },
-    refreshList: function(){
-      var list = this.$('.list').empty();
-      // Only visible canvases
-      _.each($("canvas"), function(canvas){
-        // Ignore own canvases
-        if (canvas.className !== "layers-copy") {
-          var li = $('<li class="ui-state-default" style="padding:5px;" />')
-            .text(canvas.id);
-          var id = canvas.id.split("-")[1];
-          var vis = $('<input type="checkbox" id="vis-'+canvas.id+'" class="vis" title="visible" />')
-            .data({
-              "canvas": canvas,
-              "id": id
-            });
+  Iframework.NativeNodes['view-layers'] = Iframework.NativeNodes['view'].extend(
+    {
+      info: {
+        title: 'layers',
+        description:
+          'can get any of the canvases in the graph and make a stack of them',
+      },
+      template: _.template(template),
+      events: {
+        'change .vis': 'setVis',
+        'click .refresh': 'refreshList',
+        'sortstop .list': 'sortLayers',
+      },
+      initializeModule: function () {
+        this.mainDiv = this.$('.layers')[0];
+        this.visible = {};
+        // Make list
+        var self = this;
+        _.delay(function () {
+          self.refreshList();
+        }, 1000);
+      },
+      refreshList: function () {
+        var list = this.$('.list').empty();
+        // Only visible canvases
+        _.each(
+          $('canvas'),
+          function (canvas) {
+            // Ignore own canvases
+            if (canvas.className !== 'layers-copy') {
+              var li = $(
+                '<li class="ui-state-default" style="padding:5px;" />'
+              ).text(canvas.id);
+              var id = canvas.id.split('-')[1];
+              var vis = $(
+                '<input type="checkbox" id="vis-' +
+                  canvas.id +
+                  '" class="vis" title="visible" />'
+              ).data({
+                canvas: canvas,
+                id: id,
+              });
+              if (this.visible[id]) {
+                vis.attr({
+                  checked: 'checked',
+                });
+              }
+              li.append(vis);
+              list.append(li);
+            }
+          },
+          this
+        );
+        list.sortable();
+      },
+      setVis: function (event) {
+        var id = $(event.target).data('id');
+        if (event.target.checked) {
+          // Show canvas to copy
+          if (!this.visible[id]) {
+            var vis = {};
+            this.visible[id] = vis;
+            vis.nativeView = this.model.parentGraph
+              .get('nodes')
+              .get(id).view.Native;
+            vis.original = $(event.target).data('canvas');
+            vis.copy = document.createElement('canvas');
+            vis.copy.width = vis.original.width;
+            vis.copy.height = vis.original.height;
+            vis.copy.className = 'layers-copy';
+            vis.copy.style.position = 'absolute';
+            vis.copy.style.top = 0;
+            vis.copy.style.left = 0;
+            vis.copy.style.width = '100%';
+            vis.context = vis.copy.getContext('2d');
+            vis.context.drawImage(vis.original, 0, 0);
+            vis.last = vis.nativeView._lastRedraw;
+            this.mainDiv.appendChild(vis.copy);
+          }
+        } else {
+          // Kill canvas
           if (this.visible[id]) {
-            vis.attr({
-              "checked": "checked"
-            });
+            this.visible[id].copy.parentNode.removeChild(this.visible[id].copy);
+            this.visible[id] = null;
           }
-          li.append(vis);
-          list.append(li);
-        }
-      }, this);
-      list.sortable();
-    },
-    setVis: function(event){
-      var id = $(event.target).data("id");
-      if (event.target.checked) {
-        // Show canvas to copy
-        if (!this.visible[id]) {
-          var vis = {};
-          this.visible[id] = vis;
-          vis.nativeView = this.model.parentGraph.get("nodes").get(id).view.Native;
-          vis.original = $(event.target).data("canvas");
-          vis.copy = document.createElement("canvas");
-          vis.copy.width = vis.original.width;
-          vis.copy.height = vis.original.height;
-          vis.copy.className = "layers-copy";
-          vis.copy.style.position = "absolute";
-          vis.copy.style.top = 0;
-          vis.copy.style.left = 0;
-          vis.copy.style.width = "100%";
-          vis.context = vis.copy.getContext("2d");
-          vis.context.drawImage(vis.original, 0, 0);
-          vis.last = vis.nativeView._lastRedraw;
-          this.mainDiv.appendChild(vis.copy);
         }
-      } else {
-        // Kill canvas
-        if (this.visible[id]) {
-          this.visible[id].copy.parentNode.removeChild(this.visible[id].copy);
-          this.visible[id] = null;
+        this.sortLayers();
+      },
+      sortLayers: function (event, ui) {
+        var count = 0;
+        _.each(
+          this.$('.list .vis'),
+          function (checkbox) {
+            var id = $(checkbox).data('id');
+            var vis = this.visible[id];
+            if (vis && vis.copy) {
+              vis.copy.style.zIndex = count;
+              count++;
+            }
+          },
+          this
+        );
+      },
+      redraw: function () {
+        // Called from NodeBoxNativeView.renderAnimationFrame()
+      },
+      renderAnimationFrame: function (timestamp) {
+        // Get a tick from GraphView.renderAnimationFrame()
+        // this._valueChanged is set by NodeBox.receive()
+        if (this._triggerRedraw) {
+          this._triggerRedraw = false;
+          this.redraw(timestamp);
+          this._lastRedraw = timestamp;
         }
-      }
-      this.sortLayers();
-    },
-    sortLayers: function(event, ui){
-      var count = 0;
-      _.each(this.$(".list .vis"), function(checkbox){
-        var id = $(checkbox).data("id");
-        var vis = this.visible[id];
-        if (vis && vis.copy) {
-          vis.copy.style.zIndex = count;
-          count++;
-        }
-      }, this);
-    },
-    redraw: function(){
-      // Called from NodeBoxNativeView.renderAnimationFrame()
-    },
-    renderAnimationFrame: function (timestamp) {
-      // Get a tick from GraphView.renderAnimationFrame()
-      // this._valueChanged is set by NodeBox.receive()
-      if (this._triggerRedraw) {
-        this._triggerRedraw = false;
-        this.redraw(timestamp);
-        this._lastRedraw = timestamp;
-      }
-      for (var i in this.visible) {
-        var layer = this.visible[i];
-        if (layer) {
-          if (layer.last !== layer.nativeView._lastRedraw) {
-            layer.context.clearRect(0, 0, layer.copy.width, layer.copy.height);
-            layer.context.drawImage(layer.original, 0, 0);
-            layer.last = layer.nativeView._lastRedraw;
+        for (var i in this.visible) {
+          var layer = this.visible[i];
+          if (layer) {
+            if (layer.last !== layer.nativeView._lastRedraw) {
+              layer.context.clearRect(
+                0,
+                0,
+                layer.copy.width,
+                layer.copy.height
+              );
+              layer.context.drawImage(layer.original, 0, 0);
+              layer.last = layer.nativeView._lastRedraw;
+            }
           }
         }
-      }
-    },
-    inputs: {
-    },
-    outputs: {
-    },
-    popout: function() {
-      if (this.w) {
-        // Toggle
-        this.popin();
-        return false;
-      }
-
-      // Open new window to about:blank
-      this.w = window.open("", "meemooRemoteWindow", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");
-      var self = this;
-      this.w.addEventListener("unload", function(){
-        self.popin();
-      });
+      },
+      inputs: {},
+      outputs: {},
+      popout: function () {
+        if (this.w) {
+          // Toggle
+          this.popin();
+          return false;
+        }
 
-      // Style
-      this.w.document.body.style.backgroundColor = "black";
-      this.w.document.body.style.overflow = "hidden";
-      this.w.document.title = "meemoo.org";
+        // Open new window to about:blank
+        this.w = window.open(
+          '',
+          'meemooRemoteWindow',
+          'menubar=no,location=no,resizable=yes,scrollbars=no,status=no'
+        );
+        var self = this;
+        this.w.addEventListener('unload', function () {
+          self.popin();
+        });
 
-      // Empty it
-      var el = this.w.document.body;
-      while (el.hasChildNodes()){
-        el.removeChild(el.lastChild);
-      }
+        // Style
+        this.w.document.body.style.backgroundColor = 'black';
+        this.w.document.body.style.overflow = 'hidden';
+        this.w.document.title = 'meemoo.org';
 
-      this.mainDiv.parentNode.removeChild(this.mainDiv);
-      this.w.document.body.appendChild(this.mainDiv);
+        // Empty it
+        var el = this.w.document.body;
+        while (el.hasChildNodes()) {
+          el.removeChild(el.lastChild);
+        }
 
-      return false;
-    },
-    popin: function() {
-      if (this.w) {
-        this.w = null;
-      }
+        this.mainDiv.parentNode.removeChild(this.mainDiv);
+        this.w.document.body.appendChild(this.mainDiv);
 
-      this.$el.prepend(this.mainDiv);
-      
-      return false;
-    }
-  });
+        return false;
+      },
+      popin: function () {
+        if (this.w) {
+          this.w = null;
+        }
 
+        this.$el.prepend(this.mainDiv);
 
+        return false;
+      },
+    }
+  );
 });
diff --git a/src/nodes/webgl-sphere.js b/src/nodes/webgl-sphere.js
index 1711c31..826214b 100644
--- a/src/nodes/webgl-sphere.js
+++ b/src/nodes/webgl-sphere.js
@@ -1,3 +1,4 @@
+// prettier-ignore
 $(function(){
 
   // glMatrix v0.9.5
@@ -40,7 +41,7 @@ $(function(){
 
 
 
-  var fragment = 
+  var fragment =
     "precision mediump float; "+
 
     "varying vec2 vTextureCoord; "+
@@ -53,7 +54,7 @@ $(function(){
     "    gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a); "+
     "}";
 
-  var vertex = 
+  var vertex =
     "attribute vec3 aVertexPosition;" +
     "attribute vec3 aVertexNormal;" +
     "attribute vec2 aTextureCoord;" +
diff --git a/src/nodes/webgl.js b/src/nodes/webgl.js
index 2a09f19..d4391ac 100644
--- a/src/nodes/webgl.js
+++ b/src/nodes/webgl.js
@@ -1,49 +1,48 @@
 // extends src/node-box-native-view.js
 
-$(function(){
-
-  var template = 
+$(function () {
+  var template =
     // '<canvas id="canvas-<%= id %>" class="canvas" width="500" height="500" style="max-width:100%;" />'+
     '<div class="info" />';
 
   // Iframework.NativeNodes["webgl"] = Iframework.NativeNodes["image"].extend({
-  Iframework.NativeNodes["webgl"] = Iframework.NodeBoxNativeView.extend({
-
+  Iframework.NativeNodes['webgl'] = Iframework.NodeBoxNativeView.extend({
     template: _.template(template),
     canvas: null,
     context: null,
-    initializeCategory: function() {
+    initializeCategory: function () {
       // "super"
       // Iframework.NativeNodes["image"].prototype.initialize.call(this);
 
       var self = this;
-      this.model.view.$("button.remove")
-        .after(
-          $('<button type="button" class="popout">popout</button>')
-            .button({ icons: { primary: "icon-popup" }, text: false })
-            .click(function(){
-              self.popout();
-            })
-        );
-
-      this.canvas = document.createElement("canvas");
+      this.model.view.$('button.remove').after(
+        $('<button type="button" class="popout">popout</button>')
+          .button({icons: {primary: 'icon-popup'}, text: false})
+          .click(function () {
+            self.popout();
+          })
+      );
+
+      this.canvas = document.createElement('canvas');
       this.canvas.width = 800;
       this.canvas.height = 600;
 
-      this.canvas.style.maxWidth = "100%";
+      this.canvas.style.maxWidth = '100%';
 
       // Init GL
       try {
-        this.gl = this.canvas.getContext("webgl") || this.canvas.getContext("experimental-webgl");
+        this.gl =
+          this.canvas.getContext('webgl') ||
+          this.canvas.getContext('experimental-webgl');
         this.gl.viewportWidth = this.canvas.width;
         this.gl.viewportHeight = this.canvas.height;
       } catch (e) {
-        this.$(".info").text("WebGL fail :-(");
+        this.$('.info').text('WebGL fail :-(');
       }
 
       this.$el.prepend(this.canvas);
     },
-    popout: function() {
+    popout: function () {
       if (this.w) {
         // Toggle
         this.popin();
@@ -51,20 +50,24 @@ $(function(){
       }
 
       // Open new window to about:blank
-      this.w = window.open("", "meemooRemoteWindow", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");
+      this.w = window.open(
+        '',
+        'meemooRemoteWindow',
+        'menubar=no,location=no,resizable=yes,scrollbars=no,status=no'
+      );
       var self = this;
-      this.w.addEventListener("unload", function(){
+      this.w.addEventListener('unload', function () {
         self.popin();
       });
 
       // Style
-      this.w.document.body.style.backgroundColor = "black";
-      this.w.document.body.style.overflow = "hidden";
-      this.w.document.title = "meemoo.org";
+      this.w.document.body.style.backgroundColor = 'black';
+      this.w.document.body.style.overflow = 'hidden';
+      this.w.document.title = 'meemoo.org';
 
       // Empty it
       var el = this.w.document.body;
-      while (el.hasChildNodes()){
+      while (el.hasChildNodes()) {
         el.removeChild(el.lastChild);
       }
 
@@ -72,18 +75,14 @@ $(function(){
 
       return false;
     },
-    popin: function() {
+    popin: function () {
       if (this.w) {
         this.w = null;
       }
 
       this.$el.prepend(this.canvas);
-      
-      return false;
-    }
-
 
+      return false;
+    },
   });
-
-
 });
diff --git a/src/plugins/images.js b/src/plugins/images.js
index fc121e6..a3ef045 100644
--- a/src/plugins/images.js
+++ b/src/plugins/images.js
@@ -1,12 +1,12 @@
-$( function() {
-
-  var IMGUR_ID = "9877b5345adf3fc";
+$(function () {
+  var IMGUR_ID = '9877b5345adf3fc';
 
   // Shim
-  if ( !window.URL ) {
+  if (!window.URL) {
     window.URL = window.webkitURL || window.msURL || window.oURL || false;
   }
 
+  // prettier-ignore
   var template = $(
     '<div class="meemoo-plugin-images">'+
       '<div class="listing">'+
@@ -26,109 +26,115 @@ $( function() {
   );
 
   // Add menu
-  Iframework.addMenu("images", template, "icon-picture");
+  Iframework.addMenu('images', template, 'icon-picture');
 
   // Set info
-  var info = template.find(".info");
+  var info = template.find('.info');
   var setInfo = function (string) {
     info.text(string);
   };
 
   // Open image panel by dragging over show button
-  Iframework.$(".show-images").droppable({
-    accept: ".canvas, .image",
-    tolerance: "pointer",
-    activeClass: "drop-indicator",
+  Iframework.$('.show-images').droppable({
+    accept: '.canvas, .image',
+    tolerance: 'pointer',
+    activeClass: 'drop-indicator',
     over: function (event, ui) {
-      $(this).trigger("click");
-    }
+      $(this).trigger('click');
+    },
   });
 
   // Drop panels
-  template.find(".image-drop").droppable({
-    accept: ".canvas",
-    tolerance: "pointer",
-    hoverClass: "drop-hover",
-    activeClass: "drop-active",
+  template.find('.image-drop').droppable({
+    accept: '.canvas',
+    tolerance: 'pointer',
+    hoverClass: 'drop-hover',
+    activeClass: 'drop-active',
     // Don't also drop on graph
-    greedy: true
+    greedy: true,
   });
-  template.find(".public-drop").droppable({
+  template.find('.public-drop').droppable({
     // also accept img drops
-    accept: ".canvas, .image"
+    accept: '.canvas, .image',
   });
-  template.find(".local-drop").on("drop", function(event, ui) {
-    var image = ui.helper.data("meemoo-drag-canvas");
-    if (!image) { return false; }
+  template.find('.local-drop').on('drop', function (event, ui) {
+    var image = ui.helper.data('meemoo-drag-canvas');
+    if (!image) {
+      return false;
+    }
     var thumbnail = makeThumbnail(image);
-    localListing.append( thumbnail );
+    localListing.append(thumbnail);
   });
 
   // Make thumbnail element
-  var makeThumbnail = function(image){
+  var makeThumbnail = function (image) {
     // image can be Image or Canvas
     var el = $('<div class="meemoo-plugin-images-thumbnail canvas">')
       .append(image)
       .draggable({
-        cursor: "pointer",
-        cursorAt: { top: -10, left: -10 },
-        helper: function( event ) {
-          var helper = $( '<div class="drag-image"><h2>Copy this</h2></div>' )
-            .data({
-              "meemoo-drag-type": "canvas",
-              "meemoo-source-image": image
-            });
+        cursor: 'pointer',
+        cursorAt: {top: -10, left: -10},
+        helper: function (event) {
+          var helper = $(
+            '<div class="drag-image"><h2>Copy this</h2></div>'
+          ).data({
+            'meemoo-drag-type': 'canvas',
+            'meemoo-source-image': image,
+          });
           $(document.body).append(helper);
-          _.delay(function(){
+          _.delay(function () {
             dragCopyCanvas(helper);
           }, 100);
           return helper;
-        }
+        },
       });
     return el;
   };
 
   var dragCopyCanvas = function (helper) {
-    if (!helper) { return; }
-    var image = helper.data("meemoo-source-image");
-    var canvasCopy = document.createElement("canvas");
+    if (!helper) {
+      return;
+    }
+    var image = helper.data('meemoo-source-image');
+    var canvasCopy = document.createElement('canvas');
     canvasCopy.width = image.naturalWidth ? image.naturalWidth : image.width;
-    canvasCopy.height = image.naturalHeight ? image.naturalHeight : image.height;
-    canvasCopy.getContext("2d").drawImage(image, 0, 0);
-    helper.data("meemoo-drag-canvas", canvasCopy);
+    canvasCopy.height = image.naturalHeight
+      ? image.naturalHeight
+      : image.height;
+    canvasCopy.getContext('2d').drawImage(image, 0, 0);
+    helper.data('meemoo-drag-canvas', canvasCopy);
     helper.append(canvasCopy);
   };
 
-
   // Local files
-  var fileInput = template.find(".file-input-local");
-  var localListing = template.find(".local-listing");
-  fileInput.change( function (event) {
+  var fileInput = template.find('.file-input-local');
+  var localListing = template.find('.local-listing');
+  fileInput.change(function (event) {
     // Load local image
     var files = event.target.files;
-    for (var i=0; i<files.length; i++) {
+    for (var i = 0; i < files.length; i++) {
       var img = new Image();
-      img.src = window.URL.createObjectURL( files[i] );
+      img.src = window.URL.createObjectURL(files[i]);
       var thumbnail = makeThumbnail(img);
-      localListing.append( thumbnail );
+      localListing.append(thumbnail);
     }
   });
-  template.find(".localfile").click(function(){
-    // Trigger 
-    fileInput.trigger("click");
+  template.find('.localfile').click(function () {
+    // Trigger
+    fileInput.trigger('click');
   });
 
   // Native select local files to Imgur
-  var fileInputPublic = template.find(".file-input-public");
-  fileInputPublic.change( function (event) {
+  var fileInputPublic = template.find('.file-input-public');
+  fileInputPublic.change(function (event) {
     var files = event.target.files;
     if (files.length < 1) {
       return;
     }
     // Upload them
     setInfo('Uploading...');
-    
-    function makeSuccess (fileName) {
+
+    function makeSuccess(fileName) {
       return function (response) {
         if (response.success) {
           saveImgurLocal(response.data);
@@ -138,34 +144,34 @@ $( function() {
         }
       };
     }
-    
-    function makeError (fileName) {
+
+    function makeError(fileName) {
       return function () {
         setInfo('Upload ' + fileName + 'failed :(');
       };
     }
-    
+
     for (var i = 0, len = files.length; i < len; i++) {
       var file = files[i];
       $.ajax({
         url: 'https://api.imgur.com/3/image',
         type: 'post',
         headers: {
-          Authorization: 'Client-ID ' + IMGUR_ID
+          Authorization: 'Client-ID ' + IMGUR_ID,
         },
         data: file,
         processData: false,
         success: makeSuccess(file.name),
-        error: makeError(file.name)
+        error: makeError(file.name),
       });
     }
   });
-  template.find(".publicfile").click(function(){
-    // Trigger 
-    fileInputPublic.trigger("click");
+  template.find('.publicfile').click(function () {
+    // Trigger
+    fileInputPublic.trigger('click');
   });
-  
-  function enforceHTTPS (url) {
+
+  function enforceHTTPS(url) {
     if (!url) {
       return;
     }
@@ -175,11 +181,11 @@ $( function() {
     }
     return linkSplit.join(':');
   }
-  
-  function saveImgurLocal (data) {
+
+  function saveImgurLocal(data) {
     // Make small thumbnail url
     var thumbSplit = data.link.split('.');
-    thumbSplit[thumbSplit.length-2] += 's';
+    thumbSplit[thumbSplit.length - 2] += 's';
     var linkThumb = thumbSplit.join('.');
     // Make model, add to collection, save to localStorage
     var img = new Iframework.plugins.images.GalleryImage({
@@ -191,31 +197,34 @@ $( function() {
       animated: data.animated,
       gifv: enforceHTTPS(data.gifv),
       mp4: enforceHTTPS(data.mp4),
-      webm: enforceHTTPS(data.webm)
+      webm: enforceHTTPS(data.webm),
     });
     publicImages.add(img);
     img.save();
   }
 
-
   // Meemoo drop to Imgur
-  template.find(".public-drop").on("drop", function(event, ui) {
-    var canvas = ui.helper.data("meemoo-drag-canvas");
-    var image = ui.helper.data("meemoo-source-image");
-    if (!canvas && !image) { return false; }
+  template.find('.public-drop').on('drop', function (event, ui) {
+    var canvas = ui.helper.data('meemoo-drag-canvas');
+    var image = ui.helper.data('meemoo-source-image');
+    if (!canvas && !image) {
+      return false;
+    }
 
     var b64;
 
     if (canvas) {
-      try{
+      try {
         b64 = canvas.toDataURL().split(',', 2)[1];
       } catch (error) {
-        setInfo('Not able to get image data. Right-click "Save as..." or take a screenshot.');
+        setInfo(
+          'Not able to get image data. Right-click "Save as..." or take a screenshot.'
+        );
         return false;
       }
     } else if (image) {
       // Make sure data url
-      if (image.src.split(':')[0] !== "data") {
+      if (image.src.split(':')[0] !== 'data') {
         return false;
       }
 
@@ -225,24 +234,26 @@ $( function() {
       b64 = split[1];
     }
 
-    if (!b64) { return false; }
-    
+    if (!b64) {
+      return false;
+    }
+
     setInfo('Uploading...');
 
     $.ajax({
       url: 'https://api.imgur.com/3/image',
       type: 'post',
       headers: {
-        Authorization: 'Client-ID ' + IMGUR_ID
+        Authorization: 'Client-ID ' + IMGUR_ID,
       },
       data: {
         image: b64,
         type: 'base64',
         title: 'made with meemoo.org',
-        description: 'browser-based media hacking https://app.meemoo.org/'
+        description: 'browser-based media hacking https://app.meemoo.org/',
       },
       dataType: 'json',
-      success: function(response) {
+      success: function (response) {
         if (response.success) {
           saveImgurLocal(response.data);
           setInfo('Upload done :)');
@@ -252,11 +263,10 @@ $( function() {
       },
       error: function () {
         setInfo('Upload failed :( save it to your computer');
-      }
+      },
     });
   });
 
-
   // Globally-accessible functions
   Iframework.plugins.images = {};
 
@@ -266,18 +276,21 @@ $( function() {
     },
     initializeView: function () {
       if (!this.view) {
-        this.view = new Iframework.plugins.images.GalleryImageView({model:this});
+        this.view = new Iframework.plugins.images.GalleryImageView({
+          model: this,
+        });
       }
       return this.view;
-    }
+    },
   });
 
   Iframework.plugins.images.GalleryImages = Backbone.Collection.extend({
     model: Iframework.plugins.images.GalleryImage,
-    localStorage: new Backbone.LocalStorage("GalleryImages")
+    localStorage: new Backbone.LocalStorage('GalleryImages'),
   });
 
-  var imageTemplate = 
+  // prettier-ignore
+  var imageTemplate =
     '<img crossorigin="anonymous" title="drag to graph or image node" />'+
     '<div class="controls">'+
       '<a class="link button icon-link" title="Open image in new window" target="_blank"></a>'+
@@ -286,57 +299,58 @@ $( function() {
     '</div>';
 
   Iframework.plugins.images.GalleryImageView = Backbone.View.extend({
-    tagName: "div",
-    className: "meemoo-plugin-images-thumbnail",
+    tagName: 'div',
+    className: 'meemoo-plugin-images-thumbnail',
     template: _.template(imageTemplate),
     events: {
-      "click .delete": "destroyModel"
+      'click .delete': 'destroyModel',
     },
     initialize: function () {
       this.$el.html(this.template(this.model.toJSON()));
 
       var mainsrc = this.model.get('link');
-      this.$(".link").attr("href", mainsrc);
+      this.$('.link').attr('href', mainsrc);
 
       var animated = this.model.get('animated');
       if (animated) {
         var animatedLink = this.model.get('gifv') || mainsrc;
-        this.$(".link-animated")
-          .attr("href", animatedLink)
-          .css({"display": "inline-block"});
+        this.$('.link-animated')
+          .attr('href', animatedLink)
+          .css({display: 'inline-block'});
       }
 
       // Load thumbnail
-      var img = this.$("img")[0];
+      var img = this.$('img')[0];
       img.src = this.model.get('linkThumb');
 
       this.$el.draggable({
-        cursor: "pointer",
-        cursorAt: { top: -10, left: -10 },
-        helper: function( event ) {
-          var helper = $( '<div class="drag-image"><h2>Copy this</h2></div>' )
-            .data({
-              "meemoo-drag-type": "canvas",
-              "meemoo-source-image": img,
-              "meemoo-image-url": mainsrc
-            });
+        cursor: 'pointer',
+        cursorAt: {top: -10, left: -10},
+        helper: function (event) {
+          var helper = $(
+            '<div class="drag-image"><h2>Copy this</h2></div>'
+          ).data({
+            'meemoo-drag-type': 'canvas',
+            'meemoo-source-image': img,
+            'meemoo-image-url': mainsrc,
+          });
           $(document.body).append(helper);
-          _.delay(function(){
+          _.delay(function () {
             dragCopyCanvas(helper);
           }, 100);
           return helper;
-        }
+        },
       });
 
-      var publicListing = template.find(".public-listing");
-      publicListing.prepend( this.el );
+      var publicListing = template.find('.public-listing');
+      publicListing.prepend(this.el);
 
       this.model.on('destroy', this.remove, this);
 
       return this;
     },
     destroyModel: function () {
-      if (!window.confirm("Are you sure you want to delete this image?")) {
+      if (!window.confirm('Are you sure you want to delete this image?')) {
         return;
       }
       // Delete imgur file
@@ -348,9 +362,9 @@ $( function() {
           url: 'https://api.imgur.com/3/image/' + deletehash,
           type: 'delete',
           headers: {
-            Authorization: 'Client-ID ' + IMGUR_ID
+            Authorization: 'Client-ID ' + IMGUR_ID,
           },
-          success: function(response) {
+          success: function (response) {
             if (response.success) {
               model.destroy();
               setInfo('Deleted');
@@ -360,7 +374,7 @@ $( function() {
           },
           error: function () {
             setInfo('Delete failed');
-          }
+          },
         });
         return;
       }
@@ -369,21 +383,19 @@ $( function() {
     },
     remove: function () {
       this.$el.remove();
-    }
-
+    },
   });
 
   // Load local images from local storage
   var publicImages = new Iframework.plugins.images.GalleryImages();
   publicImages.fetch({
-    success: function(e) {
-      publicImages.each(function(image){
+    success: function (e) {
+      publicImages.each(function (image) {
         image.initializeView();
       });
     },
     error: function (e) {
-      console.warn("error loading public images");
-    }
+      console.warn('error loading public images');
+    },
   });
-
-} );
\ No newline at end of file
+});
diff --git a/src/plugins/library.js b/src/plugins/library.js
index e5aeee0..ed22f69 100644
--- a/src/plugins/library.js
+++ b/src/plugins/library.js
@@ -1,5 +1,5 @@
-$( function () {
-
+$(function () {
+  // prettier-ignore
   var template = $(
     '<div>'+
       '<div class="controls">'+
@@ -14,25 +14,26 @@ $( function () {
   );
 
   // Add menu
-  Iframework.addMenu("library", template, "icon-plus");
+  Iframework.addMenu('library', template, 'icon-plus');
 
   Iframework.loadLibrary = function (library) {
-
     var autocompleteData = [];
 
-    var accordion = $("<div></div>");
+    var accordion = $('<div></div>');
 
     for (var category in library) {
-      if (!library.hasOwnProperty(category)){continue;}
+      if (!library.hasOwnProperty(category)) {
+        continue;
+      }
       var section = $('<div class="library-section"></div>');
 
       // section title
-      section.append( $('<h3><a href="#">'+category+"</a></h3>") );
+      section.append($('<h3><a href="#">' + category + '</a></h3>'));
 
       // section items
-      var sectionDiv = $("<div></div>");
+      var sectionDiv = $('<div></div>');
       var modules = library[category];
-      for (var i = 0; i<modules.length; i++) {
+      for (var i = 0; i < modules.length; i++) {
         var module = new Iframework.Module(modules[i]);
         // this.Library.add(module);
 
@@ -40,75 +41,83 @@ $( function () {
         sectionDiv.append(module.view.$el);
 
         var autocompleteDataItem = {
-          value: module.get("src"),
-          label: module.get("info").title + " - " + module.get("info").description + " - " + module.get("src"),
-          title: module.get("info").title,
-          description: module.get("info").description + " - " + module.get("src")
+          value: module.get('src'),
+          label:
+            module.get('info').title +
+            ' - ' +
+            module.get('info').description +
+            ' - ' +
+            module.get('src'),
+          title: module.get('info').title,
+          description:
+            module.get('info').description + ' - ' + module.get('src'),
         };
         autocompleteData.push(autocompleteDataItem);
       }
-      section.append( sectionDiv );
-      accordion.append( section );
+      section.append(sectionDiv);
+      accordion.append(section);
     }
 
     template.find('.listing').append(accordion);
-    accordion.children(".library-section")
-      .accordion({
-        animate: false,
-        header: "h3",
-        heightStyle: "content",
-        collapsible: true,
-        active: false
-      });
-
-    template.find('.addbyurlinput')
+    accordion.children('.library-section').accordion({
+      animate: false,
+      header: 'h3',
+      heightStyle: 'content',
+      collapsible: true,
+      active: false,
+    });
+
+    template
+      .find('.addbyurlinput')
       .autocomplete({
         minLength: 1,
         source: autocompleteData,
-        select: function( event, ui ) {
-          _.defer(function(){
+        select: function (event, ui) {
+          _.defer(function () {
             Iframework.addByUrl();
           });
-        }
+        },
       })
-      .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
-        // Custom display
-        return $( "<li>" )
-          .append( '<a><span style="font-size:120%;">' + item.title + "</span><br>" + item.description + "</a>" )
-          .appendTo( ul );
-      };
+      .data('ui-autocomplete')._renderItem = function (ul, item) {
+      // Custom display
+      return $('<li>')
+        .append(
+          '<a><span style="font-size:120%;">' +
+            item.title +
+            '</span><br>' +
+            item.description +
+            '</a>'
+        )
+        .appendTo(ul);
+    };
   };
 
-  var addByUrl = Iframework.addByUrl = function() {
-    var addByUrlInput = Iframework.$(".addbyurlinput");
+  var addByUrl = (Iframework.addByUrl = function () {
+    var addByUrlInput = Iframework.$('.addbyurlinput');
     addByUrlInput.blur();
 
     var url = addByUrlInput.val();
-    if (url !== "") {
-      var graphEl = Iframework.$(".graph");
+    if (url !== '') {
+      var graphEl = Iframework.$('.graph');
       Iframework.shownGraph.addNode({
-        "src": url,
-        "x": Math.floor(graphEl.scrollLeft() + graphEl.width()/2) - 100,
-        "y": Math.floor(graphEl.scrollTop() + graphEl.height()/2) - 100
+        src: url,
+        x: Math.floor(graphEl.scrollLeft() + graphEl.width() / 2) - 100,
+        y: Math.floor(graphEl.scrollTop() + graphEl.height() / 2) - 100,
       });
-      addByUrlInput
-        .val("")
-        .attr("placeholder", "loading...");
-      window.setTimeout(function(){
-        addByUrlInput
-          .attr("placeholder", "search or url");
+      addByUrlInput.val('').attr('placeholder', 'loading...');
+      window.setTimeout(function () {
+        addByUrlInput.attr('placeholder', 'search or url');
       }, 1000);
     }
     return false;
-  };
+  });
 
   // Form submit action
-  template.find(".addbyurl").submit(function(){
+  template.find('.addbyurl').submit(function () {
     addByUrl();
     return false;
   });
 
- 
   // var library = $('<ul class="dataflow-plugin-library" style="list-style:none; padding-left:0" />');
 
   // var addNode = function(node, x, y) {
@@ -171,5 +180,4 @@ $( function () {
   // Iframework.addPlugin("library", library);
 
   // Iframework.plugins.library.update = update;
-
-} );
+});
diff --git a/src/plugins/source.js b/src/plugins/source.js
index 1d28136..128c508 100644
--- a/src/plugins/source.js
+++ b/src/plugins/source.js
@@ -1,5 +1,5 @@
-$( function() {
-
+$(function () {
+  // prettier-ignore
   var template = $(
     '<div>'+
       '<div class="sourceedit">'+
@@ -13,36 +13,36 @@ $( function() {
     '</div>'
   );
 
-  var code = template.find("textarea");
+  var code = template.find('textarea');
 
   // Add menu
-  Iframework.addMenu("source", template, "icon-cog");
+  Iframework.addMenu('source', template, 'icon-cog');
 
   // On change update code view
-  Iframework.on("change", function(graph){
-    if (Iframework.graph && Iframework.$(".menu-source").is(":visible")) {
+  Iframework.on('change', function (graph) {
+    if (Iframework.graph && Iframework.$('.menu-source').is(':visible')) {
       // Bookmark to scroll back to
-      var scrollBackTop = code.prop("scrollTop");
-      code.val( JSON.stringify(Iframework.graph.toJSON(), null, "  ") );
-      code.scrollTop( scrollBackTop );
+      var scrollBackTop = code.prop('scrollTop');
+      code.val(JSON.stringify(Iframework.graph.toJSON(), null, '  '));
+      code.scrollTop(scrollBackTop);
     }
   });
 
-  var sourceRefresh = function(){
-    code.val( JSON.stringify(Iframework.graph, null, "  ") );
+  var sourceRefresh = function () {
+    code.val(JSON.stringify(Iframework.graph, null, '  '));
   };
-  template.find(".sourcerefresh").click(sourceRefresh);
+  template.find('.sourcerefresh').click(sourceRefresh);
 
   // On show manu update source
-  Iframework.on("showmenu:source", sourceRefresh);
+  Iframework.on('showmenu:source', sourceRefresh);
 
-  var sourceCompress = function(){
-    code.val( JSON.stringify(Iframework.graph, null, "") );
+  var sourceCompress = function () {
+    code.val(JSON.stringify(Iframework.graph, null, ''));
   };
-  template.find(".sourcecompress").click(sourceCompress);
+  template.find('.sourcecompress').click(sourceCompress);
 
   // Apply source to test graph
-  var sourceApply = function(){
+  var sourceApply = function () {
     //   try {
     //     var newGraph = JSON.parse( this.$(".sourceedit textarea").val() );
     //     this.loadGraph(newGraph);
@@ -54,8 +54,8 @@ $( function() {
     //   }
     var graph;
     try {
-      graph = JSON.parse( code.val() );
-    } catch(error){
+      graph = JSON.parse(code.val());
+    } catch (error) {
       return false;
     }
     if (graph) {
@@ -63,10 +63,9 @@ $( function() {
       // reset localStorage version
       Iframework._loadedLocalApp = null;
       sourceRefresh();
-      g.trigger("change");
+      g.trigger('change');
     }
     return false;
   };
-  template.find(".sourceapply").click(sourceApply);
-
-} );
+  template.find('.sourceapply').click(sourceApply);
+});
diff --git a/src/plugins/towtruck.js b/src/plugins/towtruck.js
index 381430e..e59b61f 100644
--- a/src/plugins/towtruck.js
+++ b/src/plugins/towtruck.js
@@ -1,17 +1,16 @@
-( function(Iframework) {
-
+(function (Iframework) {
   var template = $(
-    '<button onclick="TowTruck(this); return false;">Start TowTruck</button>' 
+    '<button onclick="TowTruck(this); return false;">Start TowTruck</button>'
   );
 
   // Add menu
-  Iframework.addMenuSection("Collaborate", template, "load");
+  Iframework.addMenuSection('Collaborate', template, 'load');
 
   // Sync functions
-  var sendGraphChange = function(graph){
+  var sendGraphChange = function (graph) {
     TowTruck.send({
-      type: "iframework.graph.change", 
-      graph: graph.toJSON()
+      type: 'iframework.graph.change',
+      graph: graph.toJSON(),
     });
   };
 
@@ -19,21 +18,20 @@
   window.TowTruckConfig_on_ready = function () {
     // Start by syncing the graph when somebody joins
 
-    // Listen for changes to graph 
+    // Listen for changes to graph
     // TODO make these much finer-grained for add/remove node/edge, move node, change state, click
-    Iframework.on("change", sendGraphChange);
-    TowTruck.hub.on("iframework.graph.change", function (msg) {
+    Iframework.on('change', sendGraphChange);
+    TowTruck.hub.on('iframework.graph.change', function (msg) {
       var newGraph = msg.graph;
       alert(newGraph);
     });
   };
   window.TowTruckConfig_on_close = function () {
-    Iframework.off("change", graphChanged);
+    Iframework.off('change', graphChanged);
   };
 
   // Load TowTruck
   yepnope({
-    load: "https://towtruck.mozillalabs.com/towtruck.js"
+    load: 'https://towtruck.mozillalabs.com/towtruck.js',
   });
-
-}(Iframework) );
+})(Iframework);
diff --git a/src/port-in-view.js b/src/port-in-view.js
index 6f66152..e0d7c72 100644
--- a/src/port-in-view.js
+++ b/src/port-in-view.js
@@ -1,6 +1,6 @@
-$(function(){
-
-  var portInTemplate = 
+$(function () {
+  // prettier-ignore
+  var portInTemplate =
     '<div class="portshown portshown-in">'+
       '<span class="hole hole-in hole-<%= type_class %> icon-login"></span>'+
       '<span class="label"><%= name %></span>'+
@@ -8,83 +8,90 @@ $(function(){
     '<span class="plugend plugend-in plugend-<%= type_class %>"></span>';
 
   Iframework.PortInView = Iframework.PortView.extend({
-    tagName: "div",
-    className: "port",
+    tagName: 'div',
+    className: 'port',
     portInTemplate: _.template(portInTemplate),
     events: {
-      "mousedown":                   "highlightEdge",
-      "click .hole":                 "clickhole",
-      "dragstart .hole":             "dragstart",
-      "drag .hole, .holehelper":     "drag",
-      "dragstop .hole, .holehelper": "dragstop",
-      "dragstart .plugend":          "unplugstart",
-      "drag .plugend":               "unplugdrag",
-      "dragstop .plugend":           "unplugstop",
-      "drop":                        "drop",
-      "click .disconnect":           "disconnect",
-      "submit .manualinput":         "manualinput"
+      mousedown: 'highlightEdge',
+      'click .hole': 'clickhole',
+      'dragstart .hole': 'dragstart',
+      'drag .hole, .holehelper': 'drag',
+      'dragstop .hole, .holehelper': 'dragstop',
+      'dragstart .plugend': 'unplugstart',
+      'drag .plugend': 'unplugdrag',
+      'dragstop .plugend': 'unplugstop',
+      drop: 'drop',
+      'click .disconnect': 'disconnect',
+      'submit .manualinput': 'manualinput',
       // "click .publish-port":         "publishPort"
     },
     render: function () {
-      this.$el.html( this.portInTemplate(this.model.toJSON()) );
-      this.$el.addClass("port-in");
-      this.$(".hole")
-        .draggable({
-          helper: function (e) {
-            return $('<span class="holehelper holehelper-out" />');
-          }
-        });
-      this.$(".plugend")
-        .draggable({
-          helper: function (e) {
-            return $('<span class="plugendhelper plugendhelper-in" />');
-          }
-        });
+      this.$el.html(this.portInTemplate(this.model.toJSON()));
+      this.$el.addClass('port-in');
+      this.$('.hole').draggable({
+        helper: function (e) {
+          return $('<span class="holehelper holehelper-out" />');
+        },
+      });
+      this.$('.plugend').draggable({
+        helper: function (e) {
+          return $('<span class="plugendhelper plugendhelper-in" />');
+        },
+      });
 
       // Drag from hole
-      this.$(".hole")
-        .data({
-          model: this.model
-        });
-        
+      this.$('.hole').data({
+        model: this.model,
+      });
+
       // The whole port is droppable
-      var accept = "";
-      var type = this.model.get("type_class");
-      if (type === "all" || type === "bang"){
+      var accept = '';
+      var type = this.model.get('type_class');
+      if (type === 'all' || type === 'bang') {
         // Anything can hit an in bang
-        accept = ".hole-out, .plugend-in";
+        accept = '.hole-out, .plugend-in';
       } else {
-        accept = ".hole-out.hole-all, .hole-out.hole-"+type+", .plugend-in.plugend-all, .plugend-in.plugend-"+type;
+        accept =
+          '.hole-out.hole-all, .hole-out.hole-' +
+          type +
+          ', .plugend-in.plugend-all, .plugend-in.plugend-' +
+          type;
       }
-      if (type === "string"){
+      if (type === 'string') {
         // HACK to allow int and float -> string
-        accept += ", .hole-out.hole-int, .hole-out.hole-float, .plugend-in.plugend-int, .plugend-in.plugend-float";
+        accept +=
+          ', .hole-out.hole-int, .hole-out.hole-float, .plugend-in.plugend-int, .plugend-in.plugend-float';
       }
-      if (type === "int" || type === "float" || type === "number") {
+      if (type === 'int' || type === 'float' || type === 'number') {
         // HACK to allow all int float number to connect
-        accept += ", .hole-out.hole-int, .hole-out.hole-float, .hole-out.hole-number, .plugend-in.plugend-int, .plugend-in.plugend-float, .plugend-in.plugend-number";
+        accept +=
+          ', .hole-out.hole-int, .hole-out.hole-float, .hole-out.hole-number, .plugend-in.plugend-int, .plugend-in.plugend-float, .plugend-in.plugend-number';
       }
       this.$el.droppable({
-        "hoverClass": "drophover",
-        "accept": accept
+        hoverClass: 'drophover',
+        accept: accept,
       });
 
-      this.$(".plugend").hide();
+      this.$('.plugend').hide();
 
       // Disable selection for better drag+drop
-      this.$(".portshown").disableSelection();
-      
+      this.$('.portshown').disableSelection();
     },
     dragstart: function (event, ui) {
       // Add a mask so that iframes don't steal mouse
       this.model.node.parentGraph.view.maskFrames();
-      
+
       // Highlight matching ins or outs
-      $("div.ports-"+(this.model.isIn ? "out" : "in")+" span.hole")
-        .addClass('fade');
-      $("div.ports-"+(this.model.isIn ? "out" : "in")+" span.hole-" + this.model.get('type_class'))
-        .addClass('highlight');
-      
+      $(
+        'div.ports-' + (this.model.isIn ? 'out' : 'in') + ' span.hole'
+      ).addClass('fade');
+      $(
+        'div.ports-' +
+          (this.model.isIn ? 'out' : 'in') +
+          ' span.hole-' +
+          this.model.get('type_class')
+      ).addClass('highlight');
+
       // Edge preview
       var edgePreview = new Iframework.EdgeView();
       Iframework.edgePreview = edgePreview;
@@ -100,13 +107,13 @@ $(function(){
         var dragY = ui.offset.top + 8 + Iframework.shownGraph.view.el.scrollTop;
         var thisX = this.portOffsetLeft();
         var thisY = this.portOffsetTop();
-        
+
         // Edge preview
         var positions = {
-          fromX: (this.model.isIn ? dragX-2 : thisX),
-          fromY: (this.model.isIn ? dragY : thisY),
-          toX: (this.model.isIn ? thisX : dragX+20),
-          toY: (this.model.isIn ? thisY : dragY)
+          fromX: this.model.isIn ? dragX - 2 : thisX,
+          fromY: this.model.isIn ? dragY : thisY,
+          toX: this.model.isIn ? thisX : dragX + 20,
+          toY: this.model.isIn ? thisY : dragY,
         };
         Iframework.edgePreview.setPositions(positions);
         Iframework.edgePreview.redraw();
@@ -118,12 +125,12 @@ $(function(){
       // Remove iframe masks
       this.model.node.parentGraph.view.unmaskFrames();
 
-      $(".hole").removeClass("fade highlight");
-      
+      $('.hole').removeClass('fade highlight');
+
       // Edge preview
       Iframework.edgePreview.remove();
       Iframework.edgePreview = undefined;
-      if (this.relatedEdges().length < 1){
+      if (this.relatedEdges().length < 1) {
         this.$('.plugend').hide();
       }
 
@@ -137,19 +144,19 @@ $(function(){
         this.armDelete = false;
       } else {
         // Connect wire
-        var from = $(ui.draggable).data("model");
+        var from = $(ui.draggable).data('model');
         var to = this.model;
-        var source = (this.model.isIn ? from : to);
-        var target = (this.model.isIn ? to : from);
+        var source = this.model.isIn ? from : to;
+        var target = this.model.isIn ? to : from;
         var edge = new Iframework.Edge({
           source: [source.node.id, source.id],
           target: [target.node.id, target.id],
-          parentGraph: this.model.parentNode.parentGraph
+          parentGraph: this.model.parentNode.parentGraph,
         });
         if (Iframework.edgePreview) {
           edge._color = Iframework.edgePreview._color;
         }
-        if (edge.parentGraph.addEdge(edge)){
+        if (edge.parentGraph.addEdge(edge)) {
           edge.connect();
         }
       }
@@ -162,12 +169,16 @@ $(function(){
     topConnectedEdge: function () {
       var topConnected;
       var topZ = 0;
-      _.each(this.relatedEdges(), function(edge){
-        if (edge.view._z >= topZ) {
-          topZ = edge.view._z;
-          topConnected = edge;
-        }
-      }, this);
+      _.each(
+        this.relatedEdges(),
+        function (edge) {
+          if (edge.view._z >= topZ) {
+            topZ = edge.view._z;
+            topConnected = edge;
+          }
+        },
+        this
+      );
       return topConnected;
     },
     unplugstart: function (event, ui) {
@@ -176,21 +187,29 @@ $(function(){
 
       // Find top connected wire
       var lastConnected = this.topConnectedEdge();
-      if (!lastConnected) { return false; }
+      if (!lastConnected) {
+        return false;
+      }
 
       this.unpluggingEdge = lastConnected;
       this.unpluggingEdge.view.dim();
-      if (this.relatedEdges().length===1) {
-        this.$(".plugend").hide();
+      if (this.relatedEdges().length === 1) {
+        this.$('.plugend').hide();
       }
 
-      var thatPort = this.model.isIn ? this.unpluggingEdge.Source : this.unpluggingEdge.Target;
-      this.$(".plugend").data("model", thatPort);
-      
+      var thatPort = this.model.isIn
+        ? this.unpluggingEdge.Source
+        : this.unpluggingEdge.Target;
+      this.$('.plugend').data('model', thatPort);
+
       // Highlight related ins or outs
-      $("div.ports-"+(this.model.isIn ? "in" : "out")+" span.hole-" + this.model.get('type_class'))
-        .addClass('highlight');
-      
+      $(
+        'div.ports-' +
+          (this.model.isIn ? 'in' : 'out') +
+          ' span.hole-' +
+          this.model.get('type_class')
+      ).addClass('highlight');
+
       // Edge preview
       var edgePreview = new Iframework.EdgeView();
       edgePreview.setColor(this.unpluggingEdge.view._color);
@@ -205,16 +224,18 @@ $(function(){
       if (Iframework.edgePreview && this.unpluggingEdge) {
         var dragX = ui.offset.left + Iframework.shownGraph.view.el.scrollLeft;
         var dragY = ui.offset.top + 6 + Iframework.shownGraph.view.el.scrollTop;
-        var thatPortView = this.model.isIn ? this.unpluggingEdge.Source.view : this.unpluggingEdge.Target.view;
+        var thatPortView = this.model.isIn
+          ? this.unpluggingEdge.Source.view
+          : this.unpluggingEdge.Target.view;
         var thatX = thatPortView.portOffsetLeft();
         var thatY = thatPortView.portOffsetTop();
-        
+
         // Edge preview
         var positions = {
-          fromX: (this.model.isIn ? thatX : dragX-2),
-          fromY: (this.model.isIn ? thatY : dragY),
-          toX: (this.model.isIn ? dragX+20 : thatX),
-          toY: (this.model.isIn ? dragY : thatY)
+          fromX: this.model.isIn ? thatX : dragX - 2,
+          fromY: this.model.isIn ? thatY : dragY,
+          toX: this.model.isIn ? dragX + 20 : thatX,
+          toY: this.model.isIn ? dragY : thatY,
         };
         Iframework.edgePreview.setPositions(positions);
         Iframework.edgePreview.redraw();
@@ -226,7 +247,7 @@ $(function(){
       if (this.armDelete && this.unpluggingEdge) {
         this.model.parentGraph.removeEdge(this.unpluggingEdge);
       } else {
-        this.$(".plugend").show();
+        this.$('.plugend').show();
         this.unpluggingEdge.view.undim();
       }
       this.armDelete = false;
@@ -237,57 +258,54 @@ $(function(){
     clickhole: function (event) {
       // Hide previous connected edges editor
       $('div.edge-edit').remove();
-        
-      var hole = this.$(".hole");
-          
+
+      var hole = this.$('.hole');
+
       // Show connected edges editor
       var isIn = this.model.isIn;
-      var portName = this.model.get("name");
-      
+      var portName = this.model.get('name');
+
       var popupEl = this.popupTemplate(this.model.toJSON());
       popupEl = $(popupEl);
       this.$el.append(popupEl);
 
       // Close button
-      popupEl.children("button.close")
-        .click(function(){
-          $('div.edge-edit').remove();
-          Iframework.selectedPort = null;
-        });
+      popupEl.children('button.close').click(function () {
+        $('div.edge-edit').remove();
+        Iframework.selectedPort = null;
+      });
 
-      var typeabbr = this.model.get("type").substring(0,3);
+      var typeabbr = this.model.get('type').substring(0, 3);
 
       var showForm = false;
-      var inputForm = $('<form />')
-        .attr({
-          "id": this.model.node.id + "_" + this.model.get("name"),
-          "class": "manualinput",
-          "novalidate": ""
-        });
-      if (typeabbr === "int" || typeabbr === "num" || typeabbr === "flo" ) {
+      var inputForm = $('<form />').attr({
+        id: this.model.node.id + '_' + this.model.get('name'),
+        class: 'manualinput',
+        novalidate: '',
+      });
+      if (typeabbr === 'int' || typeabbr === 'num' || typeabbr === 'flo') {
         showForm = true;
         inputForm.append(
-          $("<input />").attr({
+          $('<input />').attr({
             // "type": "number",
             // "min": hole.data("min"),
             // "max": hole.data("max"),
             // "step": "any",
-            "value": this.model.node.get("state")[this.model.get("name")],
-            "title": 'use equations like "=x*100" to change all incoming values'
+            value: this.model.node.get('state')[this.model.get('name')],
+            title: 'use equations like "=x*100" to change all incoming values',
           })
         );
-      } else if (typeabbr === "col") {
+      } else if (typeabbr === 'col') {
         // Use the spectrum event instead of standard form submit
         showForm = true;
-        var color = this.model.node.get("state")[this.model.get("name")];
-        var input = $("<input />")
-          .attr({
-            "type": "text",
-            "maxlength": 140,
-            "value": color,
-            "style": "width: 90%"
-          });
-        inputForm.append( input );
+        var color = this.model.node.get('state')[this.model.get('name')];
+        var input = $('<input />').attr({
+          type: 'text',
+          maxlength: 140,
+          value: color,
+          style: 'width: 90%',
+        });
+        inputForm.append(input);
         // Has to be after added to page
         var self = this;
         input
@@ -299,96 +317,99 @@ $(function(){
             showPalette: true,
             palette: [
               Iframework.wireColors,
-              ["red", "green", "blue", "purple", "cyan", "magenta", "yellow"],
-              ["black", "#333", "#666", "#999", "#AAA", "#CCC", "white"]
+              ['red', 'green', 'blue', 'purple', 'cyan', 'magenta', 'yellow'],
+              ['black', '#333', '#666', '#999', '#AAA', '#CCC', 'white'],
             ],
             showSelectionPalette: true,
-            localStorageKey: "iframework.settings.colorPalette",
-            change: function(color) {
+            localStorageKey: 'iframework.settings.colorPalette',
+            change: function (color) {
               // TODO change to toString when https://github.com/bgrins/spectrum/issues/92 fixed
-              var str = color.toRgbString(); 
-              input.val( str );
+              var str = color.toRgbString();
+              input.val(str);
               self.model.node.receive(portName, str);
               self.model.node.setValue(portName, str);
             },
-            hide: function(color) {
+            hide: function (color) {
               input.show();
             },
             beforeShow: function () {
-              input.spectrum("set", input.val());
+              input.spectrum('set', input.val());
               input.hide();
-            }
+            },
           })
           .show(); // Unhide
-      } else if (typeabbr === "str") {
+      } else if (typeabbr === 'str') {
         showForm = true;
         inputForm.append(
-          $("<input />").attr({
-            "type": "text",
-            "maxlength": hole.data("max"),
-            "value": this.model.node.get("state")[this.model.get("name")]
+          $('<input />').attr({
+            type: 'text',
+            maxlength: hole.data('max'),
+            value: this.model.node.get('state')[this.model.get('name')],
           })
         );
-      } else if (typeabbr === "arr") {
+      } else if (typeabbr === 'arr') {
         showForm = true;
-        var a = this.model.node.get("state")[this.model.get("name")];
-        if (Iframework.util.type(a) !== "array") { a = []; }
-        var s = "";
-        for (var i=0; i<a.length; i++) {
-          s += (i>0 ? ", " : "") + a[i];
+        var a = this.model.node.get('state')[this.model.get('name')];
+        if (Iframework.util.type(a) !== 'array') {
+          a = [];
+        }
+        var s = '';
+        for (var i = 0; i < a.length; i++) {
+          s += (i > 0 ? ', ' : '') + a[i];
         }
         inputForm.append(
-          $("<input />").attr({
-            "type": "text",
-            "value": s
+          $('<input />').attr({
+            type: 'text',
+            value: s,
           })
         );
-      } else if (typeabbr === "boo") {
+      } else if (typeabbr === 'boo') {
         showForm = true;
-        var val = this.model.node.get("state")[this.model.get("name")];
-        val = (Boolean(val) && val !== "false");
+        var val = this.model.node.get('state')[this.model.get('name')];
+        val = Boolean(val) && val !== 'false';
         inputForm.append(
-          $("<input />")
-            .attr({
-              "type": "checkbox",
-              "checked": val
-            })
+          $('<input />').attr({
+            type: 'checkbox',
+            checked: val,
+          })
         );
-      } else if (typeabbr === "ban") {
-        inputForm.append("<label>Send bang:</label> ");
+      } else if (typeabbr === 'ban') {
+        inputForm.append('<label>Send bang:</label> ');
         showForm = true;
       }
       if (showForm) {
         inputForm.append(
-          $("<button></button>")
-            .attr({
-              "type": "submit",
-              "class": "send icon-ok",
-              "title": "send value to module"
-            })
+          $('<button></button>').attr({
+            type: 'submit',
+            class: 'send icon-ok',
+            title: 'send value to module',
+          })
         );
         popupEl.append(inputForm);
       }
-        
-      $("#select_"+this.model.id)
-        .button({
-          icons: {
-            primary: "ui-icon-power"
-          }
-        });
+
+      $('#select_' + this.model.id).button({
+        icons: {
+          primary: 'ui-icon-power',
+        },
+      });
       if (this.relatedEdges().length > 0) {
         popupEl.append('<h2>disconnect</h2>');
-        _.each(this.relatedEdges(), function (edge) {
-          var edgeEditEl = this.edgeEditTemplate(edge.view);
-          popupEl.append(edgeEditEl);
-        }, this);
+        _.each(
+          this.relatedEdges(),
+          function (edge) {
+            var edgeEditEl = this.edgeEditTemplate(edge.view);
+            popupEl.append(edgeEditEl);
+          },
+          this
+        );
       }
 
       // This input's options
-      if (this.model.get("options") && this.model.get("options").length > 0) {
+      if (this.model.get('options') && this.model.get('options').length > 0) {
         this.$('input').autocomplete({
           minLength: 0,
-          source: this.model.get("options")
+          source: this.model.get('options'),
         });
       }
 
@@ -396,34 +417,34 @@ $(function(){
       event.stopPropagation();
     },
     manualinput: function (event) {
-      var inputname = this.model.get("name");
-      var type = this.model.get("type");
-      var typeabbr = type.substring(0,3);
+      var inputname = this.model.get('name');
+      var type = this.model.get('type');
+      var typeabbr = type.substring(0, 3);
 
       var val;
       var saveToState = true;
-      if (this.$(".manualinput").children("input")){
-        val = this.$(".manualinput").children("input").val();
+      if (this.$('.manualinput').children('input')) {
+        val = this.$('.manualinput').children('input').val();
       }
-      if (this.$(".manualinput").children("input:checkbox").length > 0) {
-        if (this.$(".manualinput").children("input:checkbox").is(':checked')) {
+      if (this.$('.manualinput').children('input:checkbox').length > 0) {
+        if (this.$('.manualinput').children('input:checkbox').is(':checked')) {
           val = true;
         } else {
           val = false;
         }
       }
-      if (type === "int" || type === "number" || type === "float") {
-        if (typeof val === "string" && val.toString().substr(0,1)==="=") {
+      if (type === 'int' || type === 'number' || type === 'float') {
+        if (typeof val === 'string' && val.toString().substr(0, 1) === '=') {
           // Try to parse equation
-        } else if (type === "int") {
+        } else if (type === 'int') {
           val = parseInt(val, 10);
-        } else if (type === "number" || type === "float") {
+        } else if (type === 'number' || type === 'float') {
           val = parseFloat(val);
         }
       }
-      if (typeabbr === "arr") {
+      if (typeabbr === 'arr') {
         try {
-          val = JSON.parse( "[" + val + "]" );
+          val = JSON.parse('[' + val + ']');
         } catch (error) {
           // boo
           return false;
@@ -431,7 +452,7 @@ $(function(){
       }
       if (val === undefined) {
         // Bang
-        val = "!";
+        val = '!';
         saveToState = false;
       }
       if (saveToState) {
@@ -442,7 +463,9 @@ $(function(){
     },
     disconnect: function (event) {
       //HACK
-      var edge = this.model.parentGraph.get("edges").getByCid( $(event.target).parents(".edge-edit-item").attr("id") );
+      var edge = this.model.parentGraph
+        .get('edges')
+        .getByCid($(event.target).parents('.edge-edit-item').attr('id'));
       if (edge) {
         this.model.parentGraph.removeEdge(edge);
       }
@@ -455,15 +478,17 @@ $(function(){
     _relatedEdges: null,
     relatedEdges: function () {
       // Resets to null on dis/connect
-      if ( this._relatedEdges === null ) {
-        this._relatedEdges = this.model.parentGraph.get("edges").filter( function (edge) {
-          return ( edge.Source === this.model || edge.Target === this.model );
-        }, this);
+      if (this._relatedEdges === null) {
+        this._relatedEdges = this.model.parentGraph
+          .get('edges')
+          .filter(function (edge) {
+            return edge.Source === this.model || edge.Target === this.model;
+          }, this);
         // Toggle plugends
         if (this._relatedEdges.length >= 1) {
-          this.$(".plugend").show();
+          this.$('.plugend').show();
         } else {
-          this.$(".plugend").hide();
+          this.$('.plugend').hide();
         }
         // this.model.node.view.resetRelatedEdges();
       }
@@ -484,34 +509,32 @@ $(function(){
     },
     highlight: function () {
       // Called by edge view
-      var plugend = this.$(".plugend");
-      plugend.addClass("highlight");
-      setTimeout(function(){
-        plugend.removeClass("highlight");
+      var plugend = this.$('.plugend');
+      plugend.addClass('highlight');
+      setTimeout(function () {
+        plugend.removeClass('highlight');
       }, 1000);
     },
     publishPort: function () {
       // Make breakout
       var breakout = this.model.parentNode.parentGraph.addNode({
-        src: "meemoo:subgraph/input",
+        src: 'meemoo:subgraph/input',
         x: 100,
         y: 100,
         w: 80,
         h: 60,
         state: {
-          label: this.model.id
+          label: this.model.id,
         },
-        parentGraph: this.model.parentNode.parentGraph
+        parentGraph: this.model.parentNode.parentGraph,
       });
       // Connect edge
       var edge = new Iframework.Edge({
-        source: [breakout.id, "data"], 
+        source: [breakout.id, 'data'],
         target: [this.model.parentNode.id, this.model.id],
-        parentGraph: this.model.parentNode.parentGraph
+        parentGraph: this.model.parentNode.parentGraph,
       });
-      this.model.parentNode.parentGraph.addEdge( edge );
-    }
-
+      this.model.parentNode.parentGraph.addEdge(edge);
+    },
   });
-
 });
diff --git a/src/port-in.js b/src/port-in.js
index 73561af..651cb62 100644
--- a/src/port-in.js
+++ b/src/port-in.js
@@ -1,20 +1,18 @@
-$(function(){
-
+$(function () {
   Iframework.PortIn = Iframework.Port.extend({
     defaults: {
-      name: "",
-      type: "",
-      description: "",
-      "default": null
+      name: '',
+      type: '',
+      description: '',
+      default: null,
     },
     initializeView: function () {
-      this.view = new Iframework.PortInView({model:this});
+      this.view = new Iframework.PortInView({model: this});
       return this.view;
-    }
+    },
   });
-  
+
   Iframework.PortsIn = Backbone.Collection.extend({
-    model: Iframework.PortIn
+    model: Iframework.PortIn,
   });
-
 });
diff --git a/src/port-out-view.js b/src/port-out-view.js
index 23cc9a0..4cf10b2 100644
--- a/src/port-out-view.js
+++ b/src/port-out-view.js
@@ -1,12 +1,12 @@
-$(function(){
-    
-  var portOutTemplate = 
+$(function () {
+  // prettier-ignore
+  var portOutTemplate =
     '<div class="portshown portshown-out">'+
       '<span class="label"><%= name %></span>'+
       '<span class="hole hole-out hole-<%= type_class %> icon-logout"></span>'+
     '</div>'+
     '<span class="plugend plugend-out plugend-<%= type_class %>"></span>';
-    
+
   // var popupTemplate =
   //   '<div class="edge-edit">'+
   //     '<button class="close">close</button>'+
@@ -21,83 +21,89 @@ $(function(){
   //   '</div>';
 
   Iframework.PortOutView = Iframework.PortView.extend({
-    tagName: "div",
-    className: "port",
+    tagName: 'div',
+    className: 'port',
     portOutTemplate: _.template(portOutTemplate),
     // popupTemplate: _.template(popupTemplate),
     // edgeEditTemplate: _.template(edgeEditTemplate),
     events: {
-      "mousedown":                   "highlightEdge",
-      "click .hole":                 "clickhole",
-      "dragstart .hole":             "dragstart",
-      "drag .hole, .holehelper":     "drag",
-      "dragstop .hole, .holehelper": "dragstop",
-      "dragstart .plugend":          "unplugstart",
-      "drag .plugend":               "unplugdrag",
-      "dragstop .plugend":           "unplugstop",
-      "drop":                        "drop",
-      "click .disconnect":           "disconnect"
+      mousedown: 'highlightEdge',
+      'click .hole': 'clickhole',
+      'dragstart .hole': 'dragstart',
+      'drag .hole, .holehelper': 'drag',
+      'dragstop .hole, .holehelper': 'dragstop',
+      'dragstart .plugend': 'unplugstart',
+      'drag .plugend': 'unplugdrag',
+      'dragstop .plugend': 'unplugstop',
+      drop: 'drop',
+      'click .disconnect': 'disconnect',
       // "click .publish-port":         "publishPort"
     },
     render: function () {
-      this.$el.html( this.portOutTemplate(this.model.toJSON()) );
-      this.$el.addClass("port-out");
-      this.$(".hole")
-        .draggable({
-          helper: function (e) {
-            return $('<span class="holehelper holehelper-in" />');
-          }
-        });
-      this.$(".plugend")
-        .draggable({
-          helper: function (e) {
-            return $('<span class="plugendhelper plugendhelper-out" />');
-          }
-        });
+      this.$el.html(this.portOutTemplate(this.model.toJSON()));
+      this.$el.addClass('port-out');
+      this.$('.hole').draggable({
+        helper: function (e) {
+          return $('<span class="holehelper holehelper-in" />');
+        },
+      });
+      this.$('.plugend').draggable({
+        helper: function (e) {
+          return $('<span class="plugendhelper plugendhelper-out" />');
+        },
+      });
 
       // Drag from hole
-      this.$(".hole")
-        .data({
-          model: this.model
-        });
-        
+      this.$('.hole').data({
+        model: this.model,
+      });
+
       // The whole port is droppable
-      var accept = "";
-      var type = this.model.get("type_class");
-      if (type === "all"){
-        accept = ".hole-in, .plugend-out";
+      var accept = '';
+      var type = this.model.get('type_class');
+      if (type === 'all') {
+        accept = '.hole-in, .plugend-out';
       } else {
-        accept = ".hole-in.hole-all, .hole-in.hole-"+type+", .plugend-out.plugend-all, .plugend-out.plugend-"+type;
+        accept =
+          '.hole-in.hole-all, .hole-in.hole-' +
+          type +
+          ', .plugend-out.plugend-all, .plugend-out.plugend-' +
+          type;
         // Anything can hit an in bang
-        accept += ", .hole-in.hole-bang, .plugend-out.plugend-string";
+        accept += ', .hole-in.hole-bang, .plugend-out.plugend-string';
       }
-      if (type === "int" || type === "float" || type === "number") {
+      if (type === 'int' || type === 'float' || type === 'number') {
         // Allow int and float -> string
-        accept += ", .hole-in.hole-string, .plugend-out.plugend-string";
+        accept += ', .hole-in.hole-string, .plugend-out.plugend-string';
         // Allow all int float number to connect
-        accept += ", .hole-in.hole-int, .hole-in.hole-float, .hole-out.hole-number, .plugend-out.plugend-int, .plugend-out.plugend-float, .plugend-out.plugend-number";
+        accept +=
+          ', .hole-in.hole-int, .hole-in.hole-float, .hole-out.hole-number, .plugend-out.plugend-int, .plugend-out.plugend-float, .plugend-out.plugend-number';
       }
       this.$el.droppable({
-        "hoverClass": "drophover",
-        "accept": accept
+        hoverClass: 'drophover',
+        accept: accept,
       });
 
-      this.$(".plugend").hide();
+      this.$('.plugend').hide();
 
       // Disable selection for better drag+drop
-      this.$(".portshown").disableSelection();
-      
+      this.$('.portshown').disableSelection();
     },
     dragstart: function (event, ui) {
       // Add a mask so that iframes don't steal mouse
       this.model.node.parentGraph.view.maskFrames();
-      
+
       // Highlight matching ins or outs
-      $("div.ports-"+(this.model.isIn ? "out" : "in")+" span.hole")
-        .addClass('fade');
-      $("div.ports-"+(this.model.isIn ? "out" : "in")+" span.hole-" + this.model.get('type_class'))
-        .addClass('highlight');
-      
+      $(
+        'div.ports-' + (this.model.isIn ? 'out' : 'in') + ' span.hole'
+      ).addClass('fade');
+      $(
+        'div.ports-' +
+          (this.model.isIn ? 'out' : 'in') +
+          ' span.hole-' +
+          this.model.get('type_class')
+      ).addClass('highlight');
+
       // Edge preview
       var edgePreview = new Iframework.EdgeView();
       Iframework.edgePreview = edgePreview;
@@ -113,13 +119,13 @@ $(function(){
         var dragY = ui.offset.top + 8 + Iframework.shownGraph.view.el.scrollTop;
         var thisX = this.portOffsetLeft();
         var thisY = this.portOffsetTop();
-        
+
         // Edge preview
         var positions = {
-          fromX: (this.model.isIn ? dragX-2 : thisX),
-          fromY: (this.model.isIn ? dragY : thisY),
-          toX: (this.model.isIn ? thisX : dragX+20),
-          toY: (this.model.isIn ? thisY : dragY)
+          fromX: this.model.isIn ? dragX - 2 : thisX,
+          fromY: this.model.isIn ? dragY : thisY,
+          toX: this.model.isIn ? thisX : dragX + 20,
+          toY: this.model.isIn ? thisY : dragY,
         };
         Iframework.edgePreview.setPositions(positions);
         Iframework.edgePreview.redraw();
@@ -131,12 +137,12 @@ $(function(){
       // Remove iframe masks
       this.model.node.parentGraph.view.unmaskFrames();
 
-      $(".hole").removeClass("fade highlight");
-      
+      $('.hole').removeClass('fade highlight');
+
       // Edge preview
       Iframework.edgePreview.remove();
       Iframework.edgePreview = undefined;
-      if (this.relatedEdges().length < 1){
+      if (this.relatedEdges().length < 1) {
         this.$('.plugend').hide();
       }
 
@@ -150,19 +156,19 @@ $(function(){
         this.armDelete = false;
       } else {
         // Connect wire
-        var from = $(ui.draggable).data("model");
+        var from = $(ui.draggable).data('model');
         var to = this.model;
-        var source = (this.model.isIn ? from : to);
-        var target = (this.model.isIn ? to : from);
+        var source = this.model.isIn ? from : to;
+        var target = this.model.isIn ? to : from;
         var edge = new Iframework.Edge({
           source: [source.node.id, source.id],
           target: [target.node.id, target.id],
-          parentGraph: this.model.parentNode.parentGraph
+          parentGraph: this.model.parentNode.parentGraph,
         });
         if (Iframework.edgePreview) {
           edge._color = Iframework.edgePreview._color;
         }
-        if (edge.parentGraph.addEdge(edge)){
+        if (edge.parentGraph.addEdge(edge)) {
           edge.connect();
         }
       }
@@ -175,12 +181,16 @@ $(function(){
     topConnectedEdge: function () {
       var topConnected;
       var topZ = 0;
-      _.each(this.relatedEdges(), function(edge){
-        if (edge.view && edge.view._z >= topZ) {
-          topZ = edge.view._z;
-          topConnected = edge;
-        }
-      }, this);
+      _.each(
+        this.relatedEdges(),
+        function (edge) {
+          if (edge.view && edge.view._z >= topZ) {
+            topZ = edge.view._z;
+            topConnected = edge;
+          }
+        },
+        this
+      );
       return topConnected;
     },
     unplugstart: function (event, ui) {
@@ -189,21 +199,29 @@ $(function(){
 
       // Find top connected wire
       var lastConnected = this.topConnectedEdge();
-      if (!lastConnected) { return false; }
+      if (!lastConnected) {
+        return false;
+      }
 
       this.unpluggingEdge = lastConnected;
       this.unpluggingEdge.view.dim();
-      if (this.relatedEdges().length===1) {
-        this.$(".plugend").hide();
+      if (this.relatedEdges().length === 1) {
+        this.$('.plugend').hide();
       }
 
-      var thatPort = this.model.isIn ? this.unpluggingEdge.Source : this.unpluggingEdge.Target;
-      this.$(".plugend").data("model", thatPort);
-      
+      var thatPort = this.model.isIn
+        ? this.unpluggingEdge.Source
+        : this.unpluggingEdge.Target;
+      this.$('.plugend').data('model', thatPort);
+
       // Highlight related ins or outs
-      $("div.ports-"+(this.model.isIn ? "in" : "out")+" span.hole-" + this.model.get('type_class'))
-        .addClass('highlight');
-      
+      $(
+        'div.ports-' +
+          (this.model.isIn ? 'in' : 'out') +
+          ' span.hole-' +
+          this.model.get('type_class')
+      ).addClass('highlight');
+
       // Edge preview
       var edgePreview = new Iframework.EdgeView();
       edgePreview.setColor(this.unpluggingEdge.view._color);
@@ -218,16 +236,18 @@ $(function(){
       if (Iframework.edgePreview && this.unpluggingEdge) {
         var dragX = ui.offset.left + Iframework.shownGraph.view.el.scrollLeft;
         var dragY = ui.offset.top + 6 + Iframework.shownGraph.view.el.scrollTop;
-        var thatPortView = this.model.isIn ? this.unpluggingEdge.Source.view : this.unpluggingEdge.Target.view;
+        var thatPortView = this.model.isIn
+          ? this.unpluggingEdge.Source.view
+          : this.unpluggingEdge.Target.view;
         var thatX = thatPortView.portOffsetLeft();
         var thatY = thatPortView.portOffsetTop();
-        
+
         // Edge preview
         var positions = {
-          fromX: (this.model.isIn ? thatX : dragX-2),
-          fromY: (this.model.isIn ? thatY : dragY),
-          toX: (this.model.isIn ? dragX+20 : thatX),
-          toY: (this.model.isIn ? dragY : thatY)
+          fromX: this.model.isIn ? thatX : dragX - 2,
+          fromY: this.model.isIn ? thatY : dragY,
+          toX: this.model.isIn ? dragX + 20 : thatX,
+          toY: this.model.isIn ? dragY : thatY,
         };
         Iframework.edgePreview.setPositions(positions);
         Iframework.edgePreview.redraw();
@@ -239,7 +259,7 @@ $(function(){
       if (this.armDelete && this.unpluggingEdge) {
         this.model.parentGraph.removeEdge(this.unpluggingEdge);
       } else {
-        this.$(".plugend").show();
+        this.$('.plugend').show();
         this.unpluggingEdge.view.undim();
       }
       this.armDelete = false;
@@ -250,45 +270,47 @@ $(function(){
     clickhole: function (event) {
       // Hide previous connected edges editor
       $('div.edge-edit').remove();
-        
-      var hole = this.$(".hole");
-          
+
+      var hole = this.$('.hole');
+
       // Show connected edges editor
       var isIn = this.model.isIn;
-      var portName = this.model.get("name");
-      
+      var portName = this.model.get('name');
+
       var popupEl = this.popupTemplate(this.model.toJSON());
       popupEl = $(popupEl);
       this.$el.append(popupEl);
 
       // Close button
-      popupEl.children("button.close")
-        .click(function(){
-          $('div.edge-edit').remove();
-          Iframework.selectedPort = null;
-        });
+      popupEl.children('button.close').click(function () {
+        $('div.edge-edit').remove();
+        Iframework.selectedPort = null;
+      });
 
-      var typeabbr = this.model.get("type").substring(0,3);
-      
-      $("#select_"+this.model.id)
-        .button({
-          icons: {
-            primary: "ui-icon-power"
-          }
-        });
+      var typeabbr = this.model.get('type').substring(0, 3);
+
+      $('#select_' + this.model.id).button({
+        icons: {
+          primary: 'ui-icon-power',
+        },
+      });
       if (this.relatedEdges().length > 0) {
         popupEl.append('<h2>disconnect</h2>');
-        _.each(this.relatedEdges(), function (edge) {
-          var edgeEditEl = this.edgeEditTemplate(edge.view);
-          popupEl.append(edgeEditEl);
-        }, this);
+        _.each(
+          this.relatedEdges(),
+          function (edge) {
+            var edgeEditEl = this.edgeEditTemplate(edge.view);
+            popupEl.append(edgeEditEl);
+          },
+          this
+        );
       }
 
       // This input's options
-      if (this.model.get("options") && this.model.get("options").length > 0) {
+      if (this.model.get('options') && this.model.get('options').length > 0) {
         this.$('input').autocomplete({
           minLength: 0,
-          source: this.model.get("options")
+          source: this.model.get('options'),
         });
       }
 
@@ -297,7 +319,9 @@ $(function(){
     },
     disconnect: function (event) {
       //HACK
-      var edge = this.model.parentGraph.get("edges").getByCid( $(event.target).parents(".edge-edit-item").attr("id") );
+      var edge = this.model.parentGraph
+        .get('edges')
+        .getByCid($(event.target).parents('.edge-edit-item').attr('id'));
       if (edge) {
         this.model.parentGraph.removeEdge(edge);
       }
@@ -310,15 +334,17 @@ $(function(){
     _relatedEdges: null,
     relatedEdges: function () {
       // Resets to null on dis/connect
-      if ( this._relatedEdges === null ) {
-        this._relatedEdges = this.model.parentGraph.get("edges").filter( function (edge) {
-          return ( edge.Source === this.model || edge.Target === this.model );
-        }, this);
+      if (this._relatedEdges === null) {
+        this._relatedEdges = this.model.parentGraph
+          .get('edges')
+          .filter(function (edge) {
+            return edge.Source === this.model || edge.Target === this.model;
+          }, this);
         // Toggle plugends
         if (this._relatedEdges.length >= 1) {
-          this.$(".plugend").show();
+          this.$('.plugend').show();
         } else {
-          this.$(".plugend").hide();
+          this.$('.plugend').hide();
         }
         // this.model.node.view.resetRelatedEdges();
       }
@@ -339,34 +365,32 @@ $(function(){
     },
     highlight: function () {
       // Called by edge view
-      var plugend = this.$(".plugend");
-      plugend.addClass("highlight");
-      setTimeout(function(){
-        plugend.removeClass("highlight");
+      var plugend = this.$('.plugend');
+      plugend.addClass('highlight');
+      setTimeout(function () {
+        plugend.removeClass('highlight');
       }, 1000);
     },
     publishPort: function () {
       // Make breakout
       var breakout = this.model.parentNode.parentGraph.addNode({
-        src: "meemoo:subgraph/output",
+        src: 'meemoo:subgraph/output',
         x: 500,
         y: 500,
         w: 80,
         h: 60,
         state: {
-          label: this.model.id
+          label: this.model.id,
         },
-        parentGraph: this.model.parentNode.parentGraph
+        parentGraph: this.model.parentNode.parentGraph,
       });
       // Connect edge
       var edge = new Iframework.Edge({
-        source: [this.model.parentNode.id, this.model.id], 
-        target: [breakout.id, "data"],
-        parentGraph: this.model.parentNode.parentGraph
+        source: [this.model.parentNode.id, this.model.id],
+        target: [breakout.id, 'data'],
+        parentGraph: this.model.parentNode.parentGraph,
       });
-      this.model.parentNode.parentGraph.addEdge( edge );
-    }
-
+      this.model.parentNode.parentGraph.addEdge(edge);
+    },
   });
-
 });
diff --git a/src/port-out.js b/src/port-out.js
index fdb5a76..0924f9b 100644
--- a/src/port-out.js
+++ b/src/port-out.js
@@ -1,20 +1,18 @@
-$(function(){
-
+$(function () {
   Iframework.PortOut = Iframework.Port.extend({
     defaults: {
-      name: "",
-      type: "",
-      description: "",
-      "default": null
+      name: '',
+      type: '',
+      description: '',
+      default: null,
     },
     initializeView: function () {
-      this.view = new Iframework.PortOutView({model:this});
+      this.view = new Iframework.PortOutView({model: this});
       return this.view;
-    }
+    },
   });
-  
+
   Iframework.PortsOut = Backbone.Collection.extend({
-    model: Iframework.PortOut
+    model: Iframework.PortOut,
   });
-
 });
diff --git a/src/port-view.js b/src/port-view.js
index 51eaf1f..aaa9d5c 100644
--- a/src/port-view.js
+++ b/src/port-view.js
@@ -1,5 +1,5 @@
-$(function(){
-    
+$(function () {
+  // prettier-ignore
   var popupTemplate =
     '<div class="edge-edit">'+
       '<button title="close" class="close icon-cancel"></button>'+
@@ -8,6 +8,7 @@ $(function(){
       // '<p><button class="publish-port">Publish</button></p>'+
     '</div>';
 
+  // prettier-ignore
   var edgeEditTemplate =
     '<div class="edge-edit-item" id="<%= model.cid %>">'+
       '<span><%= label() %></span>'+
@@ -17,22 +18,22 @@ $(function(){
   var accepts = {};
 
   Iframework.PortView = Backbone.View.extend({
-    tagName: "div",
-    className: "port",
+    tagName: 'div',
+    className: 'port',
     popupTemplate: _.template(popupTemplate),
     edgeEditTemplate: _.template(edgeEditTemplate),
     events: {
-      "mousedown":                   "highlightEdge",
-      "click .hole":                 "clickhole",
-      "dragstart .hole":             "dragstart",
-      "drag .hole, .holehelper":     "drag",
-      "dragstop .hole, .holehelper": "dragstop",
-      "dragstart .plugend":          "unplugstart",
-      "drag .plugend":               "unplugdrag",
-      "dragstop .plugend":           "unplugstop",
-      "drop":                        "drop",
-      "click .disconnect":           "disconnect",
-      "submit .manualinput":         "manualinput"
+      mousedown: 'highlightEdge',
+      'click .hole': 'clickhole',
+      'dragstart .hole': 'dragstart',
+      'drag .hole, .holehelper': 'drag',
+      'dragstop .hole, .holehelper': 'dragstop',
+      'dragstart .plugend': 'unplugstart',
+      'drag .plugend': 'unplugdrag',
+      'dragstop .plugend': 'unplugstop',
+      drop: 'drop',
+      'click .disconnect': 'disconnect',
+      'submit .manualinput': 'manualinput',
       // "click .publish-port":         "publishPort"
     },
     initialize: function () {
@@ -42,13 +43,18 @@ $(function(){
     dragstart: function (event, ui) {
       // Add a mask so that iframes don't steal mouse
       this.model.node.parentGraph.view.maskFrames();
-      
+
       // Highlight matching ins or outs
-      $("div.ports-"+(this.model.isIn ? "out" : "in")+" span.hole")
-        .addClass('fade');
-      $("div.ports-"+(this.model.isIn ? "out" : "in")+" span.hole-" + this.model.get('type_class'))
-        .addClass('highlight');
-      
+      $(
+        'div.ports-' + (this.model.isIn ? 'out' : 'in') + ' span.hole'
+      ).addClass('fade');
+      $(
+        'div.ports-' +
+          (this.model.isIn ? 'out' : 'in') +
+          ' span.hole-' +
+          this.model.get('type_class')
+      ).addClass('highlight');
+
       // Edge preview
       var edgePreview = new Iframework.EdgeView();
       Iframework.edgePreview = edgePreview;
@@ -64,13 +70,13 @@ $(function(){
         var dragY = ui.offset.top + 8 + Iframework.shownGraph.view.el.scrollTop;
         var thisX = this.portOffsetLeft();
         var thisY = this.portOffsetTop();
-        
+
         // Edge preview
         var positions = {
-          fromX: (this.model.isIn ? dragX-2 : thisX),
-          fromY: (this.model.isIn ? dragY : thisY),
-          toX: (this.model.isIn ? thisX : dragX+20),
-          toY: (this.model.isIn ? thisY : dragY)
+          fromX: this.model.isIn ? dragX - 2 : thisX,
+          fromY: this.model.isIn ? dragY : thisY,
+          toX: this.model.isIn ? thisX : dragX + 20,
+          toY: this.model.isIn ? thisY : dragY,
         };
         Iframework.edgePreview.setPositions(positions);
         Iframework.edgePreview.redraw();
@@ -82,12 +88,12 @@ $(function(){
       // Remove iframe masks
       this.model.node.parentGraph.view.unmaskFrames();
 
-      $(".hole").removeClass("fade highlight");
-      
+      $('.hole').removeClass('fade highlight');
+
       // Edge preview
       Iframework.edgePreview.remove();
       Iframework.edgePreview = undefined;
-      if (this.relatedEdges().length < 1){
+      if (this.relatedEdges().length < 1) {
         this.$('.plugend').hide();
       }
 
@@ -101,19 +107,19 @@ $(function(){
         this.armDelete = false;
       } else {
         // Connect wire
-        var from = $(ui.draggable).data("model");
+        var from = $(ui.draggable).data('model');
         var to = this.model;
-        var source = (this.model.isIn ? from : to);
-        var target = (this.model.isIn ? to : from);
+        var source = this.model.isIn ? from : to;
+        var target = this.model.isIn ? to : from;
         var edge = new Iframework.Edge({
-          source: [source.node.get("id"), source.get("name")],
-          target: [target.node.get("id"), target.get("name")],
-          parentGraph: this.model.parentGraph
+          source: [source.node.get('id'), source.get('name')],
+          target: [target.node.get('id'), target.get('name')],
+          parentGraph: this.model.parentGraph,
         });
         if (Iframework.edgePreview) {
           edge._color = Iframework.edgePreview._color;
         }
-        if (edge.parentGraph.addEdge(edge)){
+        if (edge.parentGraph.addEdge(edge)) {
           edge.connect();
         }
       }
@@ -126,12 +132,16 @@ $(function(){
     topConnectedEdge: function () {
       var topConnected;
       var topZ = 0;
-      _.each(this.relatedEdges(), function(edge){
-        if (edge.view._z >= topZ) {
-          topZ = edge.view._z;
-          topConnected = edge;
-        }
-      }, this);
+      _.each(
+        this.relatedEdges(),
+        function (edge) {
+          if (edge.view._z >= topZ) {
+            topZ = edge.view._z;
+            topConnected = edge;
+          }
+        },
+        this
+      );
       return topConnected;
     },
     unplugstart: function (event, ui) {
@@ -140,21 +150,29 @@ $(function(){
 
       // Find top connected wire
       var lastConnected = this.topConnectedEdge();
-      if (!lastConnected) { return false; }
+      if (!lastConnected) {
+        return false;
+      }
 
       this.unpluggingEdge = lastConnected;
       this.unpluggingEdge.view.dim();
-      if (this.relatedEdges().length===1) {
-        this.$(".plugend").hide();
+      if (this.relatedEdges().length === 1) {
+        this.$('.plugend').hide();
       }
 
-      var thatPort = this.model.isIn ? this.unpluggingEdge.Source : this.unpluggingEdge.Target;
-      this.$(".plugend").data("model", thatPort);
-      
+      var thatPort = this.model.isIn
+        ? this.unpluggingEdge.Source
+        : this.unpluggingEdge.Target;
+      this.$('.plugend').data('model', thatPort);
+
       // Highlight related ins or outs
-      $("div.ports-"+(this.model.isIn ? "in" : "out")+" span.hole-" + this.model.get('type_class'))
-        .addClass('highlight');
-      
+      $(
+        'div.ports-' +
+          (this.model.isIn ? 'in' : 'out') +
+          ' span.hole-' +
+          this.model.get('type_class')
+      ).addClass('highlight');
+
       // Edge preview
       var edgePreview = new Iframework.EdgeView();
       edgePreview.setColor(this.unpluggingEdge.view._color);
@@ -169,16 +187,18 @@ $(function(){
       if (Iframework.edgePreview && this.unpluggingEdge) {
         var dragX = ui.offset.left + Iframework.shownGraph.view.el.scrollLeft;
         var dragY = ui.offset.top + 6 + Iframework.shownGraph.view.el.scrollTop;
-        var thatPortView = this.model.isIn ? this.unpluggingEdge.Source.view : this.unpluggingEdge.Target.view;
+        var thatPortView = this.model.isIn
+          ? this.unpluggingEdge.Source.view
+          : this.unpluggingEdge.Target.view;
         var thatX = thatPortView.portOffsetLeft();
         var thatY = thatPortView.portOffsetTop();
-        
+
         // Edge preview
         var positions = {
-          fromX: (this.model.isIn ? thatX : dragX-2),
-          fromY: (this.model.isIn ? thatY : dragY),
-          toX: (this.model.isIn ? dragX+20 : thatX),
-          toY: (this.model.isIn ? dragY : thatY)
+          fromX: this.model.isIn ? thatX : dragX - 2,
+          fromY: this.model.isIn ? thatY : dragY,
+          toX: this.model.isIn ? dragX + 20 : thatX,
+          toY: this.model.isIn ? dragY : thatY,
         };
         Iframework.edgePreview.setPositions(positions);
         Iframework.edgePreview.redraw();
@@ -190,7 +210,7 @@ $(function(){
       if (this.armDelete && this.unpluggingEdge) {
         this.model.parentGraph.removeEdge(this.unpluggingEdge);
       } else {
-        this.$(".plugend").show();
+        this.$('.plugend').show();
         this.unpluggingEdge.view.undim();
       }
       this.armDelete = false;
@@ -201,111 +221,113 @@ $(function(){
     clickhole: function (event) {
       // Hide previous connected edges editor
       $('div.edge-edit').remove();
-        
-      var hole = this.$(".hole");
-          
+
+      var hole = this.$('.hole');
+
       // Show connected edges editor
       var isIn = this.model.isIn;
-      var portName = this.model.get("name");
-  
+      var portName = this.model.get('name');
+
       var popupEl = this.popupTemplate(this.model.toJSON());
       popupEl = $(popupEl);
       this.$el.append(popupEl);
 
       // Close button
-      popupEl.children("button.close")
+      popupEl
+        .children('button.close')
         .button({
           icons: {
-            primary: "icon-cancel"
+            primary: 'icon-cancel',
           },
-          text: false
+          text: false,
         })
-        .click(function(){
+        .click(function () {
           $('div.edge-edit').remove();
           Iframework.selectedPort = null;
         });
 
-      var typeabbr = this.model.get("type").substring(0,3);
+      var typeabbr = this.model.get('type').substring(0, 3);
       if (isIn) {
         var showForm = false;
-        var inputForm = $('<form />')
-          .attr({
-            "id": this.model.node.id + "_" + this.model.get("name"),
-            "class": "manualinput"
-          });
-        if (typeabbr === "int" || typeabbr === "num" || typeabbr === "flo" ) {
+        var inputForm = $('<form />').attr({
+          id: this.model.node.id + '_' + this.model.get('name'),
+          class: 'manualinput',
+        });
+        if (typeabbr === 'int' || typeabbr === 'num' || typeabbr === 'flo') {
           showForm = true;
           inputForm.append(
-            $("<input />").attr({
-              "type": "number",
-              "min": hole.data("min"),
-              "max": hole.data("max"),
-              "step": "any",
-              "value": this.model.node.get("state")[this.model.get("name")]
+            $('<input />').attr({
+              type: 'number',
+              min: hole.data('min'),
+              max: hole.data('max'),
+              step: 'any',
+              value: this.model.node.get('state')[this.model.get('name')],
             })
           );
-        } else if (typeabbr === "col" || typeabbr === "str") {
+        } else if (typeabbr === 'col' || typeabbr === 'str') {
           showForm = true;
           inputForm.append(
-            $("<input />").attr({
-              "type": "text",
-              "maxlength": hole.data("max"),
-              "value": this.model.node.get("state")[this.model.get("name")]
+            $('<input />').attr({
+              type: 'text',
+              maxlength: hole.data('max'),
+              value: this.model.node.get('state')[this.model.get('name')],
             })
           );
-        } else if (typeabbr === "boo") {
+        } else if (typeabbr === 'boo') {
           showForm = true;
-          var val = this.model.node.get("state")[this.model.get("name")];
-          val = (Boolean(val) && val !== "false");
+          var val = this.model.node.get('state')[this.model.get('name')];
+          val = Boolean(val) && val !== 'false';
           inputForm.append(
-            $("<input />")
-              .attr({
-                "type": "checkbox",
-                "checked": val
-              })
+            $('<input />').attr({
+              type: 'checkbox',
+              checked: val,
+            })
           );
-        } else if (typeabbr === "ban") {
-          inputForm.append("<label>Send bang:</label> ");
+        } else if (typeabbr === 'ban') {
+          inputForm.append('<label>Send bang:</label> ');
           showForm = true;
         }
         if (showForm) {
           inputForm.append(
-            $("<button></button>")
-              .html("send")
+            $('<button></button>')
+              .html('send')
               .attr({
-                "type": "submit",
-                "class": "send",
-                "title": "send value to module"
+                type: 'submit',
+                class: 'send',
+                title: 'send value to module',
               })
               .button({
                 icons: {
-                  primary: "icon-ok"
+                  primary: 'icon-ok',
                 },
-                text: false
+                text: false,
               })
           );
           popupEl.append(inputForm);
         }
       }
-      $("#select_"+this.model.id)
-        .button({
-          icons: {
-            primary: "ui-icon-power"
-          }
-        });
+      $('#select_' + this.model.id).button({
+        icons: {
+          primary: 'ui-icon-power',
+        },
+      });
       if (this.relatedEdges().length > 0) {
         popupEl.append('<h2>disconnect</h2>');
-        _.each(this.relatedEdges(), function (edge) {
-          var edgeEditEl = this.edgeEditTemplate(edge.view);
-          popupEl.append(edgeEditEl);
-        }, this);
+        _.each(
+          this.relatedEdges(),
+          function (edge) {
+            var edgeEditEl = this.edgeEditTemplate(edge.view);
+            popupEl.append(edgeEditEl);
+          },
+          this
+        );
       }
 
       // This input's options
-      if (this.model.get("options") && this.model.get("options").length > 0) {
+      if (this.model.get('options') && this.model.get('options').length > 0) {
         this.$('input').autocomplete({
           minLength: 0,
-          source: this.model.get("options")
+          source: this.model.get('options'),
         });
       }
 
@@ -313,38 +335,43 @@ $(function(){
       event.stopPropagation();
     },
     manualinput: function (event) {
-      var inputname = this.model.get("name");
+      var inputname = this.model.get('name');
       var val;
-      if (this.$(".manualinput").children("input")){
-        val = this.$(".manualinput").children("input").val();
+      if (this.$('.manualinput').children('input')) {
+        val = this.$('.manualinput').children('input').val();
       }
-      if (this.$(".manualinput").children("input:checkbox").length > 0) {
-        if (this.$(".manualinput").children("input:checkbox").is(':checked')) {
+      if (this.$('.manualinput').children('input:checkbox').length > 0) {
+        if (this.$('.manualinput').children('input:checkbox').is(':checked')) {
           val = true;
         } else {
           val = false;
         }
       }
-      if (this.model.get("type") === "int") {
+      if (this.model.get('type') === 'int') {
         val = parseInt(val, 10);
       }
-      if (this.model.get("type") === "number" || this.model.get("type") === "float") {
+      if (
+        this.model.get('type') === 'number' ||
+        this.model.get('type') === 'float'
+      ) {
         val = parseFloat(val);
       }
       if (val === undefined) {
-        val = "!";
+        val = '!';
       }
       var message = {};
       message[inputname] = val;
       this.model.node.receive(message);
-      this.model.node.get("state")[inputname] = val;
-      this.model.node.trigger("change");
+      this.model.node.get('state')[inputname] = val;
+      this.model.node.trigger('change');
       // $('div.edge-edit').remove();
       return false;
     },
     disconnect: function (event) {
       //HACK
-      var edge = this.model.parentGraph.get("edges").getByCid( $(event.target).parents(".edge-edit-item").attr("id") );
+      var edge = this.model.parentGraph
+        .get('edges')
+        .getByCid($(event.target).parents('.edge-edit-item').attr('id'));
       if (edge) {
         this.model.parentGraph.removeEdge(edge);
       }
@@ -358,7 +385,11 @@ $(function(){
       var holeoffset = this.$('.hole').offset();
       if (holeoffset) {
         // HACK
-        return holeoffset.left + 7 + this.model.parentNode.parentGraph.view.el.scrollLeft;
+        return (
+          holeoffset.left +
+          7 +
+          this.model.parentNode.parentGraph.view.el.scrollLeft
+        );
       } else {
         return 0;
       }
@@ -367,7 +398,11 @@ $(function(){
       var holeoffset = this.$('.hole').offset();
       if (holeoffset) {
         // HACK
-        return holeoffset.top + 10 + this.model.parentNode.parentGraph.view.el.scrollTop;
+        return (
+          holeoffset.top +
+          10 +
+          this.model.parentNode.parentGraph.view.el.scrollTop
+        );
       } else {
         return 0;
       }
@@ -375,15 +410,17 @@ $(function(){
     _relatedEdges: null,
     relatedEdges: function () {
       // Resets to null on dis/connect
-      if ( this._relatedEdges === null ) {
-        this._relatedEdges = this.model.parentGraph.get("edges").filter( function (edge) {
-          return ( edge.Source === this.model || edge.Target === this.model );
-        }, this);
+      if (this._relatedEdges === null) {
+        this._relatedEdges = this.model.parentGraph
+          .get('edges')
+          .filter(function (edge) {
+            return edge.Source === this.model || edge.Target === this.model;
+          }, this);
         // Toggle plugends
         if (this._relatedEdges.length >= 1) {
-          this.$(".plugend").show();
+          this.$('.plugend').show();
         } else {
-          this.$(".plugend").hide();
+          this.$('.plugend').hide();
         }
         this.model.node.view.resetRelatedEdges();
       }
@@ -404,18 +441,16 @@ $(function(){
     },
     highlight: function () {
       // Called by edge view
-      var plugend = this.$(".plugend");
-      plugend.addClass("highlight");
-      setTimeout(function(){
-        plugend.removeClass("highlight");
+      var plugend = this.$('.plugend');
+      plugend.addClass('highlight');
+      setTimeout(function () {
+        plugend.removeClass('highlight');
       }, 1000);
     },
     publishPort: function () {
       // i/o
-    }//,
+    }, //,
     // remove: function () {
     // }
-
   });
-
 });
diff --git a/src/port.js b/src/port.js
index 39989c7..a283497 100644
--- a/src/port.js
+++ b/src/port.js
@@ -1,23 +1,21 @@
-$(function(){
-
+$(function () {
   Iframework.Port = Backbone.Model.extend({
     defaults: {
-      name: "",
-      type: "",
-      description: "",
-      "default": null
+      name: '',
+      type: '',
+      description: '',
+      default: null,
     },
     initialize: function () {
-      if (this.get("type")==="") {
+      if (this.get('type') === '') {
         // No type set, connect to anything
-        this.set("type", "all");
+        this.set('type', 'all');
       }
-      this.parentNode = this.get("parentNode");
+      this.parentNode = this.get('parentNode');
       // To sanitize data:image/gif types for css class
       // this.set( "type_class", this.get("type").split("/")[0].replace(":", "_") );
-      this.set( "type_class", this.get("type").split(":")[0] );
+      this.set('type_class', this.get('type').split(':')[0]);
       this.Edges = new Iframework.Edges();
-
     },
     // Ports keep track of connected edges
     connect: function (edge) {
@@ -28,7 +26,7 @@ $(function(){
     },
     remove: function () {
       // Disconnect edges
-      while(this.Edges.length > 0) {
+      while (this.Edges.length > 0) {
         var edge = this.Edges.at(0);
         this.parentNode.parentGraph.removeEdge(edge);
       }
@@ -36,11 +34,10 @@ $(function(){
       if (this.view) {
         this.view.remove();
       }
-    }
+    },
   });
-  
+
   Iframework.Ports = Backbone.Collection.extend({
-    model: Iframework.Port
+    model: Iframework.Port,
   });
-
 });
diff --git a/src/router.js b/src/router.js
index 80077e1..43e2c9e 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,36 +1,32 @@
-$(function(){
-  
+$(function () {
   // Router
   var IframeworkRouter = Backbone.Router.extend({
     routes: {
-      "example/:url": "loadExample", // #example/url
-      "new":          "newBlank",
-      "local/:url":   "loadLocal",
-      "gist/https://gist.github.com/:user/:id": "loadGistUgly", // Redirects
-      "gist/:id":     "loadGist", 
-      "*path":        "default"
+      'example/:url': 'loadExample', // #example/url
+      new: 'newBlank',
+      'local/:url': 'loadLocal',
+      'gist/https://gist.github.com/:user/:id': 'loadGistUgly', // Redirects
+      'gist/:id': 'loadGist',
+      '*path': 'default',
     },
-    loadExample: function(url) {
+    loadExample: function (url) {
       Iframework.loadExample(url);
     },
     loadGistUgly: function (id) {
-      this.navigate("gist/"+id, {replace: true});
+      this.navigate('gist/' + id, {replace: true});
       this.loadGist(id);
     },
-    loadLocal: function(url) {
+    loadLocal: function (url) {
       Iframework.loadLocal(url);
     },
-    loadGist: function(id) {
+    loadGist: function (id) {
       Iframework.loadFromGistId(id);
     },
-    newBlank: function() {
+    newBlank: function () {
       Iframework.newBlank();
     },
-    'default': function() {
-
-    }
+    default: function () {},
   });
   Iframework.router = new IframeworkRouter();
   Backbone.history.start();
-    
-});
\ No newline at end of file
+});
