From 1c3c342fe305b9e75f1f5f9232ce84bedfcdf672 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Wed, 18 Dec 2013 22:14:47 -0500
Subject: ui template

---
 js/record.concat.js | 357 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 js/record.min.js    |   2 +-
 js/ui-template.js   |  13 ++
 3 files changed, 365 insertions(+), 7 deletions(-)
 create mode 100644 js/ui-template.js

(limited to 'js')

diff --git a/js/record.concat.js b/js/record.concat.js
index 4a03964..b16fbcd 100644
--- a/js/record.concat.js
+++ b/js/record.concat.js
@@ -277,13 +277,345 @@ function mime(uri) {
 return dataUriToBlob;
 
 })()
-;// Total frames to record
-var FRAMES_PER_GIF = 36;
+;function shuffle(a){
+	var aa = new Array(a.length);
+	aa[0] = a[0];
 
-// Frames per second to read from the video
-var FPS = 12;
+	for (var i = 1; i < a.length; i++) {
+		var j = Math.floor( Math.random() * i );
+		aa[i] = aa[j];
+		aa[j] = a[i];
+	}
+	return aa;
+}
+function sample(a, n) {
+	var aa = shuffle(a);
+	return aa.slice(0,n);
+}
+;var nextTick = (function(){
+  // postMessage behaves badly on IE8
+  if (window.ActiveXObject || !window.postMessage) {
+    var nextTick = function(fn) {
+      setTimeout(fn, 0);
+    }
+  } else {
+    // based on setZeroTimeout by David Baron
+    // - http://dbaron.org/log/20100309-faster-timeouts
+    var timeouts = []
+      , name = 'next-tick-zero-timeout'
+
+    window.addEventListener('message', function(e){
+      if (e.source == window && e.data == name) {
+        if (e.stopPropagation) e.stopPropagation();
+        if (timeouts.length) timeouts.shift()();
+      }
+    }, true);
+
+    var nextTick = function(fn){
+      timeouts.push(fn);
+      window.postMessage(name, '*');
+    }
+  }
+
+  return nextTick;
+})()
+
+var Uid = (function(){
+  var id = 0
+  return function(){ return id++ + "" }
+})()
+
+
+var tokenize = (function(){
+  var tokenize = function(str, splitOn){
+    return str
+             .trim()
+             .split(splitOn || tokenize.default);
+  };
+
+  tokenize.default = /\s+/g;
+
+  return tokenize;
+})()
+
+// globber("*".split(":"), "a:b:c".split(":")) => true
+// globber("*:c".split(":"), "a:b:c".split(":")) => true
+// globber("a:*".split(":"), "a:b:c".split(":")) => true
+// globber("a:*:c".split(":"), "a:b:c".split(":")) => true
+
+// based on codegolf.stackexchange.com/questions/467/implement-glob-matcher
+var globber = function(patterns, strings) {
+  // console.log("globber called with: " + patterns.join(":"), strings.join(":"))
+  var first = patterns[0],
+      rest = patterns.slice(1),
+      len = strings.length,
+      matchFound;
+
+  if(first === '*') { 
+    for(var i = 0; i <= len; ++i) {
+      // console.log("* " + i + " trying " + rest.join(":") + " with " + strings.slice(i).join(":"))
+      if(globber(rest, strings.slice(i))) return true;
+    }
+    return false;
+  } else { 
+    matchFound = (first === strings[0]);
+    // console.log ("literal matching " + first + " " + strings[0] + " " + !!matched)
+  }
+
+  return matchFound && ((!rest.length && !len) || globber(rest, strings.slice(1)));
+};
+
+var setproto = function(obj, proto){
+  if (obj.__proto__)
+    obj.__proto__ = proto;
+  else
+    for (var key in proto)
+      obj[key] = proto[key];
+};
+
+
+var Tube = (function(){
+  var globcache = {};
+  var Tube = function(opts){
+    opts = opts || {};
+    if (opts.queue){
+      var c = function(){
+        var args = arguments;
+        // queueOrNextTick (function(){ c.send.apply(c, args) });
+        nextTick (function(){ c.send.apply(c, args) });
+        return c;
+      };
+    } else {
+      var c = function(){
+        c.send.apply(c, arguments);
+        return c;
+      };
+    }
+
+    setproto(c, Tube.proto);
+    c.listeners = {};
+    c.globListeners = {};
+
+    return c;
+  };
+
+  Tube.total = {};
+  Tube.proto = {};
+
+  /*
+  adds fns as listeners to a channel
+
+  on("msg", fn, {opts})
+  on("msg", [fn, fn2], {opts})
+  on("msg msg2 msg3", fn, {opts})
+  on({"msg": fn, "msg2": fn2}, {opts})
+  */
+
+  Tube.proto.on = function(){
+    var chan = this;
+    if (typeof arguments[0] === "string") { 
+    //if (arguments.length > 1) {           // on("msg", f)
+      var msgMap = {};
+      msgMap[arguments[0]] = arguments[1];
+      var opts = arguments[2] || {};
+    } else {                              // on({"msg": f, ...})
+      var msgMap = arguments[0];
+      var opts = arguments[1] || {};
+    }
+
+    for (var string in msgMap){
+      var msgs = string.split(" ");
+      var fs = msgMap[string];
+      if (!Array.isArray(fs)) fs = [fs];
+
+      for(var i=0, f; f=fs[i]; i++){
+        if (!f.uid) f.uid = Uid();
+      }
+
+      for(var i=0, msg; msg=msgs[i]; i++){
+        var listeners = (msg.indexOf("*") === -1) ?
+                          chan.listeners :
+                          chan.globListeners;
+
+        // todo: this probably wastes a lot of memory?
+        // make a copy of the listener, add to it, and replace the listener
+        // why not just push directly?
+        // send might be iterating over it... and that will fuck up the iteration
+
+        listeners[msg] = (msg in listeners) ?
+                           listeners[msg].concat(fs) :
+                           fs.concat();
+      }
+    }
+
+    return chan;
+  };
+
+  /*
+  off()
+  off("a:b:c")
+  off(f)
+  off("a:b:c", f)
+  off("a:b:c d:e:f")
+  off([f, f2])
+  off({"a": f, "b": f2})
+  */
 
-// Per-frame delay in milliseconds
+  Tube.proto.off = function(){ var chan = this;
+
+    var listeners, i, msgs, msg;
+
+    // off() : delete all listeners. but replace, instead of delete
+    if (arguments.length === 0) { 
+      chan.listeners = {};
+      chan.globListeners = {};
+      return chan;
+    }
+
+    // off("a:b:c d:e:f")
+    // remove all matching listeners
+    if (arguments.length === 1 && typeof arguments[0] === "string"){
+      // question... will this fuck up send if we delete in the middle of it dispatching?
+      msgs = arguments[0].split(" ");
+
+      for (i=0; msg=msgs[i]; i++){
+        delete chan.listeners[msg];
+        delete chan.globListeners[msg];
+      }
+      return chan;
+    }
+
+    // off(f) or off([f, f2])
+    // remove all matching functions
+    if (typeof arguments[0] === "function" || Array.isArray(arguments[0])) {
+      var fs = (typeof arguments[0] === "function") ? 
+                 [arguments[0]] :
+                 arguments[0];
+      // TODO
+      return chan;
+    }
+
+    // off("a:b:c", f) or off({"a": f, "b": f2})
+    if (arguments.length > 1) {           // off("msg", f)
+      var msgMap = {};
+      msgMap[arguments[0]] = arguments[1];
+    } else {                              // off({"msg": f, ...})
+      var msgMap = arguments[0];
+    }
+
+    for (var string in msgMap){
+      msgs = string.split(" ");
+
+      var fs = msgMap[string];
+      if (typeof fs === "function") fs = [fs];
+
+      for(var i=0; msg=msgs[i]; i++){
+        if (msg in chan.listeners)
+          listeners = chan.listeners;
+        else if (msg in chan.globListeners)
+          listeners = chan.globListeners;
+        else
+          continue;
+
+        // gotta do this carefully in case we are still iterating through the listener in send
+        // build a new array and assign it to the property, instead of mutating it.
+
+        // console.log(" length of listeners[" + msg + "]: " + listeners[msg].length)
+        // console.log(listeners[msg].join(","));
+        // console.log(fs.join(","));
+
+        listeners[msg] = listeners[msg].filter(
+                           function(f){ return fs.indexOf(f) === -1 }
+                         );
+
+        // console.log(" length of listeners[" + msg + "]: " + listeners[msg].length)
+
+      }
+    }
+
+    return chan;
+
+  };
+
+  /*
+  c = Tube()
+  c.on("foo", fn)
+  c("foo", "bar", [])
+
+  will call fn("bar", [], "foo")
+  */
+
+  Tube.proto.send = function(msgString /*, data... */){
+    // todo: don't do this?
+    if (!Tube.total[msgString]) Tube.total[msgString] = 0
+    Tube.total[msgString]+=1;
+
+    var listener,
+        listeners = this.listeners,
+        globListeners = this.globListeners,
+        //args = Array.prototype.splice.call(arguments, 1),
+        msgs = tokenize(msgString),
+        msg, f;
+
+    if (arguments.length) {
+      var args = Array.prototype.splice.call(arguments, 1);
+      args.push(msgString);
+
+    } else {
+      var args = [];
+    }
+
+    for (var m=0; msg=msgs[m]; m++){
+
+      var fsToRun = [];
+      var uidKeyFnValue = {};
+      var uidKeyMsgStringValue = {};
+
+      // note this will die on errors
+      // todo: implement http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/
+      // exact matches
+      if (listener = listeners[msg]) {
+        for (var i=0; f=listener[i]; i++){
+            // fsToRun.push([f, msg]);
+          uidKeyFnValue[f.uid] = f;
+          uidKeyMsgStringValue[f.uid] = msg;
+        }
+      }
+
+      // glob matches
+      var msgSplit = msg.split(":");
+
+      for (var pattern in globListeners){
+
+        if (pattern !== "*") { // * always matches
+          var patternSplit = globcache[pattern] || (globcache[pattern] = pattern.split(":"));
+          if (!globber(patternSplit, msgSplit)) continue;
+        }
+
+        listener = globListeners[pattern];
+
+        for (var i=0; f=listener[i]; i++){
+          //f.apply(window, args); // hm possibly pass the actual message to the func
+          // fsToRun.push([f, msg]);
+          uidKeyFnValue[f.uid] = f;
+          uidKeyMsgStringValue[f.uid] = msg;
+        }
+      }
+
+      var fns = [];
+      for (var f in uidKeyFnValue) fns.push(uidKeyFnValue[f]);
+
+      for (var i=0, f; f=fns[i]; i++)
+        f.apply(f, args);
+
+    }
+    return this;
+  };
+
+  return Tube;
+})()
+
+;// Per-frame delay in milliseconds
 var DELAY = Math.floor( 1000 / FPS );
 
 // Number of WebWorkers to create
@@ -392,7 +724,7 @@ function GifEncoder(){
     var ww = [];
 		base.init = function(){
 			for (var i = 0; i < WORKERS; i++) {
-				var worker = new Worker('js/vendor/gif-encode/worker.js');
+				var worker = new Worker('http://asdf.us/gif-recorder/js/gif-encode/worker.concat.js');
 				worker.onmessage = base.receiveWork;
 				ww.push(worker);
 			}
@@ -556,6 +888,19 @@ function GifEncoder(){
 	}
  
 }
+;var TEMPLATE = [
+  '<div id="curtain" style="opacity:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0;background:rgba(255,255,255,0.1);"></div>',
+  '<div id="outline" style="border:1px solid white;background:rgba(0,255,255,0.5);opacity:0.5; position: absolute;pointer-events:none"></div>',
+  '<div id="controls" style="position: absolute;top:50px;right:50px;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;min-width:300px; padding: 4px;cursor:default;">',
+  'frames <input type="text" id="framecount" value="30" style="width:30px;">',
+  'delay <input type="text" id="framedelay" value="0.06s" style="width:30px;">',
+  '<button id="record" disabled>record</button>',
+  '<button id="save" disabled>save</button>',
+  '<span id="status"></span>',
+  '<div id="preview"></div>',
+  '</div>'
+].join("")
+
 ;(function(){
   var canvases = document.getElementsByTagName("canvas")
   if (canvases.length == 0) { alert("no canvas found"); return; }
diff --git a/js/record.min.js b/js/record.min.js
index 6644460..b3cc4f6 100644
--- a/js/record.min.js
+++ b/js/record.min.js
@@ -1,2 +1,2 @@
 /* asdf.us/dither */
-function GifEncoder(){function a(){var a=this,b=0,c=[];a.init=function(){for(var b=0;WORKERS>b;b++){var d=new Worker("js/vendor/gif-encode/worker.js");d.onmessage=a.receiveWork,c.push(d)}};var d={};a.hire=function(a,b){d[a]=b},a.work=function(a){c[++b%c.length].postMessage(a)},a.receiveWork=function(a){a.data.task in d&&d[a.data.task](a)},a.init()}function b(a){console.log("[WORKER]",a.data.message)}function c(a){console.log(Date.now()-q,"quantization done"),i=a.data.neuquant,j=a.data.colortab,f.quantized=!0,f.tube("quantized")}function d(a){var b=a.data.frame_index,c=a.data.frame_data;m[b]=c,f.tube("encoded-frame",m.length,k.length);for(var d=0;d<k.length;d++)if(null==m[d])return;console.log("FINISHED "+k.length);var e=m.join(""),g=window.btoa(e),h="data:image/gif;base64,"+g;f.working=!1,f.tube("rendered",e),f.tube("rendered-url",h),console.log(Date.now()-q,"processed frames"),console.log(Date.now()-p,"done")}function e(a){var b=Date.now();a=Math.min(l.length,a);var c=document.createElement("canvas"),d=c.getContext("2d");c.width=g,c.height=h*a;for(var e=d.getImageData(0,0,c.width,c.height),f=e.data,i=0,j=sample(l,4);a--;)for(var k=j[a],m=k.getImageData(0,0,g,h).data,n=0;n<m.length;i++,n++)f[i]=m[n];return console.log(Date.now()-b,"built spritesheet"),e}var f=this;this.working=!1;var g,h,i,j,k=[],l=[],m=[],n=[],g=0,h=0,o=0,p=Date.now(),q=Date.now(),r=(f.tube=new Tube,new a);r.hire("message",b),r.hire("quantize",c),r.hire("encode",d);var s=(this.reset=function(){s(),i=null,j=null,f.quantized=!1},this.resetFrames=function(){k=[],l=[],m=[],n=[],g=0,h=0,o=0});this.on=function(){f.tube.on.apply(f.tube,arguments)},this.off=function(){f.tube.off.apply(f.tube,arguments)};{var i,j;this.addFrame=function(a,b){var c=a.getContext("2d");k.push(a),l.push(c),n.push(b),1==k.length&&(g=a.width,h=a.height)},this.addFrames=function(a,b){for(var c=0;c<a.length;c++){var d=a[c],e=d.getContext("2d");k.push(d),l.push(e),n.push(b)}k.length==a.length&&(g=a[0].width,h=a[0].height)},this.copyFrame=function(a,b){var c=document.createElement("canvas"),d=c.getContext("2d");d.drawImage(a,0,0,a.width,a.height),k.push(c),l.push(d),n.push(b),1==k.length&&(g=a.width,h=a.height)},this.quantize=function(){p=Date.now(),q=Date.now();var a=e(FRAMES_TO_QUANTIZE);r.work({task:"quantize",imageData:a})},this.encode=function(a,b){function c(){if(e==k.length)return d();var a=l[e],b=a.getImageData(0,0,g,h).data,f=n[e];r.work({task:"encode",frame_index:e,frame_length:l.length-1,height:h,width:g,delay:f,imageData:b,neuquant:i,colortab:j}),e++,setTimeout(c,16)}function d(){f.tube("done_sending")}if(!k.length)throw Error("No frames to encode");a=a||i,b=b||j,q=Date.now(),o=0,console.log("working .... ");var e=0;c()}}}var saveAs=saveAs||"undefined"!=typeof navigator&&navigator.msSaveOrOpenBlob&&navigator.msSaveOrOpenBlob.bind(navigator)||function(a){"use strict";var b=a.document,c=function(){return a.URL||a.webkitURL||a},d=a.URL||a.webkitURL||a,e=b.createElementNS("http://www.w3.org/1999/xhtml","a"),f=!a.externalHost&&"download"in e,g=a.webkitRequestFileSystem,h=a.requestFileSystem||g||a.mozRequestFileSystem,i=function(b){(a.setImmediate||a.setTimeout)(function(){throw b},0)},j="application/octet-stream",k=0,l=[],m=function(){for(var a=l.length;a--;){var b=l[a];"string"==typeof b?d.revokeObjectURL(b):b.remove()}l.length=0},n=function(a,b,c){b=[].concat(b);for(var d=b.length;d--;){var e=a["on"+b[d]];if("function"==typeof e)try{e.call(a,c||a)}catch(f){i(f)}}},o=function(d,i){var m,o,p,q=this,r=d.type,s=!1,t=function(){var a=c().createObjectURL(d);return l.push(a),a},u=function(){n(q,"writestart progress write writeend".split(" "))},v=function(){(s||!m)&&(m=t(d)),o?o.location.href=m:window.open(m,"_blank"),q.readyState=q.DONE,u()},w=function(a){return function(){return q.readyState!==q.DONE?a.apply(this,arguments):void 0}},x={create:!0,exclusive:!1};if(q.readyState=q.INIT,i||(i="download"),f){m=t(d),b=a.document,e=b.createElementNS("http://www.w3.org/1999/xhtml","a"),e.href=m,e.download=i;var y=b.createEvent("MouseEvents");return y.initMouseEvent("click",!0,!1,a,0,0,0,0,0,!1,!1,!1,!1,0,null),e.dispatchEvent(y),q.readyState=q.DONE,u(),void 0}return a.chrome&&r&&r!==j&&(p=d.slice||d.webkitSlice,d=p.call(d,0,d.size,j),s=!0),g&&"download"!==i&&(i+=".download"),(r===j||g)&&(o=a),h?(k+=d.size,h(a.TEMPORARY,k,w(function(a){a.root.getDirectory("saved",x,w(function(a){var b=function(){a.getFile(i,x,w(function(a){a.createWriter(w(function(b){b.onwriteend=function(b){o.location.href=a.toURL(),l.push(a),q.readyState=q.DONE,n(q,"writeend",b)},b.onerror=function(){var a=b.error;a.code!==a.ABORT_ERR&&v()},"writestart progress write abort".split(" ").forEach(function(a){b["on"+a]=q["on"+a]}),b.write(d),q.abort=function(){b.abort(),q.readyState=q.DONE},q.readyState=q.WRITING}),v)}),v)};a.getFile(i,{create:!1},w(function(a){a.remove(),b()}),w(function(a){a.code===a.NOT_FOUND_ERR?b():v()}))}),v)}),v),void 0):(v(),void 0)},p=o.prototype,q=function(a,b){return new o(a,b)};return p.abort=function(){var a=this;a.readyState=a.DONE,n(a,"abort")},p.readyState=p.INIT=0,p.WRITING=1,p.DONE=2,p.error=p.onwritestart=p.onprogress=p.onwrite=p.onabort=p.onerror=p.onwriteend=null,a.addEventListener("unload",m,!1),q}(this.self||this.window||this.content);"undefined"!=typeof module&&(module.exports=saveAs),window.dataUriToBlob=function(){function a(a){return a.split(";")[0].slice(5)}var b=window.Blob,c=100==new b([new Uint8Array(100)]).size,d=function(d){for(var e=d.split(",")[1],f=atob(e),g=new ArrayBuffer(f.length),h=new Uint8Array(g),i=0;i<f.length;i++)h[i]=f.charCodeAt(i);c||(h=g);var j=new b([h],{type:a(d)});return j.slice=j.slice||j.webkitSlice,j};return d}();var FRAMES_PER_GIF=36,FPS=12,DELAY=Math.floor(1e3/FPS),WORKERS=4,FRAMES_TO_QUANTIZE=4,DO_UPLOAD=!0;!function(){function a(){document.body.style.width="100%",document.body.style.height="100%",document.body.parentNode.style.width="100%",document.body.parentNode.style.height="100%";var a=document.getElementById("template").innerHTML,c=document.createElement("div");c.innerHTML=a,document.body.appendChild(c),b()}function b(){G=document.getElementById("curtain"),H=document.getElementById("outline"),controls=document.getElementById("outline"),document.getElementById("record").addEventListener("click",i,!1),document.getElementById("save").addEventListener("click",r,!1),G.addEventListener("mousedown",c,!1),G.addEventListener("mousemove",d,!1),G.addEventListener("mouseup",e,!1),H.style.display="none",controls.style.display="none"}function c(a){z=a.pageX,A=a.pageY,x=1,y=1,K=!0,H.style.left=h(z-1),H.style.top=h(A-1),H.style.width=h(x),H.style.height=h(y),H.style.display="block"}function d(a){K&&(x=a.pageX-z,y=a.pageY-A,H.style.width=h(x),H.style.height=h(y))}function e(){K=!1,controls.style.display="block",f("record"),document.getElementById("record").focus()}function f(a){document.getElementById(a).removeAttribute("disabled")}function g(a){document.getElementById(a).setAttribute("disabled","disabled")}function h(a){return a+"px"}function i(){D=parseInt(document.getElementById("framecount").value),E=1e3*parseFloat(document.getElementById("framedelay").value),F=0,C=0,k(),l(),B=+new Date,requestAnimationFrame(j),n("recording"),g("record")}function j(){var a=(document.createElement("canvas"),+new Date);C+=a-B,B=a,C>E&&(C-=E,l()),F==D?m():requestAnimationFrame(j)}function k(){J=new Array(D);for(var a=0;D>a;a++)J[a]=document.createElement("canvas"),J[a].height=y,J[a].width=x}function l(){var a=J[F++],b=a.getContext("2d");b.fillStyle=document.body.backgroundColor,b.fillRect(0,0,x,y),b.drawImage(v,z,A,x,y,0,0,x,y)}function m(){w.reset(),w.addFrames(J,E),n("encoding");try{w.encode()}catch(a){throw rendering=!1,n(a),a}}function n(a){document.getElementById("status").innerHTML=a}function o(a,b){n("encoded "+a+" / "+b)}function p(a){n(s(a.length))}function q(a){var b=new Image;I=b.src=a,document.getElementById("preview").innerHTML="",document.getElementById("preview").appendChild(b),rendering=!1,f("record"),f("save")}function r(){if(I){var a=(window.location.host+window.location.pathname).replace(/[^a-zA-Z0-9]/g,"-").replace(/-+/,"-"),b=dataUriToBlob(I);saveAs(b,a+"-"+ +new Date+".gif")}}function s(a){return 1e3>a?a+" bytes":1e6>a?t(a/1e3)+" kb":1e9>a?t(a/1e6)+" mb":"WAY TOO BIG DUDE"}function t(a){var b=Math.floor(a);return b+"."+Math.round(10*(a-b))}var u=document.getElementsByTagName("canvas");if(0==u.length)return alert("no canvas found"),void 0;var v=u[0],w=new GifEncoder;w.on("encoded-frame",o),w.on("rendered",p),w.on("rendered-url",q);var x,y,z,A,B,C,D,E,F,G,H,I,J=[],K=!1;a()}();
\ No newline at end of file
+function shuffle(a){var b=new Array(a.length);b[0]=a[0];for(var c=1;c<a.length;c++){var d=Math.floor(Math.random()*c);b[c]=b[d],b[d]=a[c]}return b}function sample(a,b){var c=shuffle(a);return c.slice(0,b)}function GifEncoder(){function a(){var a=this,b=0,c=[];a.init=function(){for(var b=0;WORKERS>b;b++){var d=new Worker("http://asdf.us/gif-recorder/js/gif-encode/worker.concat.js");d.onmessage=a.receiveWork,c.push(d)}};var d={};a.hire=function(a,b){d[a]=b},a.work=function(a){c[++b%c.length].postMessage(a)},a.receiveWork=function(a){a.data.task in d&&d[a.data.task](a)},a.init()}function b(a){console.log("[WORKER]",a.data.message)}function c(a){console.log(Date.now()-q,"quantization done"),i=a.data.neuquant,j=a.data.colortab,f.quantized=!0,f.tube("quantized")}function d(a){var b=a.data.frame_index,c=a.data.frame_data;m[b]=c,f.tube("encoded-frame",m.length,k.length);for(var d=0;d<k.length;d++)if(null==m[d])return;console.log("FINISHED "+k.length);var e=m.join(""),g=window.btoa(e),h="data:image/gif;base64,"+g;f.working=!1,f.tube("rendered",e),f.tube("rendered-url",h),console.log(Date.now()-q,"processed frames"),console.log(Date.now()-p,"done")}function e(a){var b=Date.now();a=Math.min(l.length,a);var c=document.createElement("canvas"),d=c.getContext("2d");c.width=g,c.height=h*a;for(var e=d.getImageData(0,0,c.width,c.height),f=e.data,i=0,j=sample(l,4);a--;)for(var k=j[a],m=k.getImageData(0,0,g,h).data,n=0;n<m.length;i++,n++)f[i]=m[n];return console.log(Date.now()-b,"built spritesheet"),e}var f=this;this.working=!1;var g,h,i,j,k=[],l=[],m=[],n=[],g=0,h=0,o=0,p=Date.now(),q=Date.now(),r=(f.tube=new Tube,new a);r.hire("message",b),r.hire("quantize",c),r.hire("encode",d);var s=(this.reset=function(){s(),i=null,j=null,f.quantized=!1},this.resetFrames=function(){k=[],l=[],m=[],n=[],g=0,h=0,o=0});this.on=function(){f.tube.on.apply(f.tube,arguments)},this.off=function(){f.tube.off.apply(f.tube,arguments)};{var i,j;this.addFrame=function(a,b){var c=a.getContext("2d");k.push(a),l.push(c),n.push(b),1==k.length&&(g=a.width,h=a.height)},this.addFrames=function(a,b){for(var c=0;c<a.length;c++){var d=a[c],e=d.getContext("2d");k.push(d),l.push(e),n.push(b)}k.length==a.length&&(g=a[0].width,h=a[0].height)},this.copyFrame=function(a,b){var c=document.createElement("canvas"),d=c.getContext("2d");d.drawImage(a,0,0,a.width,a.height),k.push(c),l.push(d),n.push(b),1==k.length&&(g=a.width,h=a.height)},this.quantize=function(){p=Date.now(),q=Date.now();var a=e(FRAMES_TO_QUANTIZE);r.work({task:"quantize",imageData:a})},this.encode=function(a,b){function c(){if(e==k.length)return d();var a=l[e],b=a.getImageData(0,0,g,h).data,f=n[e];r.work({task:"encode",frame_index:e,frame_length:l.length-1,height:h,width:g,delay:f,imageData:b,neuquant:i,colortab:j}),e++,setTimeout(c,16)}function d(){f.tube("done_sending")}if(!k.length)throw Error("No frames to encode");a=a||i,b=b||j,q=Date.now(),o=0,console.log("working .... ");var e=0;c()}}}var saveAs=saveAs||"undefined"!=typeof navigator&&navigator.msSaveOrOpenBlob&&navigator.msSaveOrOpenBlob.bind(navigator)||function(a){"use strict";var b=a.document,c=function(){return a.URL||a.webkitURL||a},d=a.URL||a.webkitURL||a,e=b.createElementNS("http://www.w3.org/1999/xhtml","a"),f=!a.externalHost&&"download"in e,g=a.webkitRequestFileSystem,h=a.requestFileSystem||g||a.mozRequestFileSystem,i=function(b){(a.setImmediate||a.setTimeout)(function(){throw b},0)},j="application/octet-stream",k=0,l=[],m=function(){for(var a=l.length;a--;){var b=l[a];"string"==typeof b?d.revokeObjectURL(b):b.remove()}l.length=0},n=function(a,b,c){b=[].concat(b);for(var d=b.length;d--;){var e=a["on"+b[d]];if("function"==typeof e)try{e.call(a,c||a)}catch(f){i(f)}}},o=function(d,i){var m,o,p,q=this,r=d.type,s=!1,t=function(){var a=c().createObjectURL(d);return l.push(a),a},u=function(){n(q,"writestart progress write writeend".split(" "))},v=function(){(s||!m)&&(m=t(d)),o?o.location.href=m:window.open(m,"_blank"),q.readyState=q.DONE,u()},w=function(a){return function(){return q.readyState!==q.DONE?a.apply(this,arguments):void 0}},x={create:!0,exclusive:!1};if(q.readyState=q.INIT,i||(i="download"),f){m=t(d),b=a.document,e=b.createElementNS("http://www.w3.org/1999/xhtml","a"),e.href=m,e.download=i;var y=b.createEvent("MouseEvents");return y.initMouseEvent("click",!0,!1,a,0,0,0,0,0,!1,!1,!1,!1,0,null),e.dispatchEvent(y),q.readyState=q.DONE,u(),void 0}return a.chrome&&r&&r!==j&&(p=d.slice||d.webkitSlice,d=p.call(d,0,d.size,j),s=!0),g&&"download"!==i&&(i+=".download"),(r===j||g)&&(o=a),h?(k+=d.size,h(a.TEMPORARY,k,w(function(a){a.root.getDirectory("saved",x,w(function(a){var b=function(){a.getFile(i,x,w(function(a){a.createWriter(w(function(b){b.onwriteend=function(b){o.location.href=a.toURL(),l.push(a),q.readyState=q.DONE,n(q,"writeend",b)},b.onerror=function(){var a=b.error;a.code!==a.ABORT_ERR&&v()},"writestart progress write abort".split(" ").forEach(function(a){b["on"+a]=q["on"+a]}),b.write(d),q.abort=function(){b.abort(),q.readyState=q.DONE},q.readyState=q.WRITING}),v)}),v)};a.getFile(i,{create:!1},w(function(a){a.remove(),b()}),w(function(a){a.code===a.NOT_FOUND_ERR?b():v()}))}),v)}),v),void 0):(v(),void 0)},p=o.prototype,q=function(a,b){return new o(a,b)};return p.abort=function(){var a=this;a.readyState=a.DONE,n(a,"abort")},p.readyState=p.INIT=0,p.WRITING=1,p.DONE=2,p.error=p.onwritestart=p.onprogress=p.onwrite=p.onabort=p.onerror=p.onwriteend=null,a.addEventListener("unload",m,!1),q}(this.self||this.window||this.content);"undefined"!=typeof module&&(module.exports=saveAs),window.dataUriToBlob=function(){function a(a){return a.split(";")[0].slice(5)}var b=window.Blob,c=100==new b([new Uint8Array(100)]).size,d=function(d){for(var e=d.split(",")[1],f=atob(e),g=new ArrayBuffer(f.length),h=new Uint8Array(g),i=0;i<f.length;i++)h[i]=f.charCodeAt(i);c||(h=g);var j=new b([h],{type:a(d)});return j.slice=j.slice||j.webkitSlice,j};return d}();var nextTick=function(){if(window.ActiveXObject||!window.postMessage)var a=function(a){setTimeout(a,0)};else{var b=[],c="next-tick-zero-timeout";window.addEventListener("message",function(a){a.source==window&&a.data==c&&(a.stopPropagation&&a.stopPropagation(),b.length&&b.shift()())},!0);var a=function(a){b.push(a),window.postMessage(c,"*")}}return a}(),Uid=function(){var a=0;return function(){return a++ +""}}(),tokenize=function(){var a=function(b,c){return b.trim().split(c||a.default)};return a.default=/\s+/g,a}(),globber=function(a,b){var c,d=a[0],e=a.slice(1),f=b.length;if("*"===d){for(var g=0;f>=g;++g)if(globber(e,b.slice(g)))return!0;return!1}return c=d===b[0],c&&(!e.length&&!f||globber(e,b.slice(1)))},setproto=function(a,b){if(a.__proto__)a.__proto__=b;else for(var c in b)a[c]=b[c]},Tube=function(){var a={},b=function(a){if(a=a||{},a.queue)var c=function(){var a=arguments;return nextTick(function(){c.send.apply(c,a)}),c};else var c=function(){return c.send.apply(c,arguments),c};return setproto(c,b.proto),c.listeners={},c.globListeners={},c};return b.total={},b.proto={},b.proto.on=function(){var a=this;if("string"==typeof arguments[0]){var b={};b[arguments[0]]=arguments[1];{arguments[2]||{}}}else{var b=arguments[0];arguments[1]||{}}for(var c in b){var d=c.split(" "),e=b[c];Array.isArray(e)||(e=[e]);for(var f,g=0;f=e[g];g++)f.uid||(f.uid=Uid());for(var h,g=0;h=d[g];g++){var i=-1===h.indexOf("*")?a.listeners:a.globListeners;i[h]=h in i?i[h].concat(e):e.concat()}}return a},b.proto.off=function(){var a,b,c,d,e=this;if(0===arguments.length)return e.listeners={},e.globListeners={},e;if(1===arguments.length&&"string"==typeof arguments[0]){for(c=arguments[0].split(" "),b=0;d=c[b];b++)delete e.listeners[d],delete e.globListeners[d];return e}if("function"==typeof arguments[0]||Array.isArray(arguments[0])){var f="function"==typeof arguments[0]?[arguments[0]]:arguments[0];return e}if(arguments.length>1){var g={};g[arguments[0]]=arguments[1]}else var g=arguments[0];for(var h in g){c=h.split(" ");var f=g[h];"function"==typeof f&&(f=[f]);for(var b=0;d=c[b];b++){if(d in e.listeners)a=e.listeners;else{if(!(d in e.globListeners))continue;a=e.globListeners}a[d]=a[d].filter(function(a){return-1===f.indexOf(a)})}}return e},b.proto.send=function(c){b.total[c]||(b.total[c]=0),b.total[c]+=1;var d,e,f,g=this.listeners,h=this.globListeners,i=tokenize(c);if(arguments.length){var j=Array.prototype.splice.call(arguments,1);j.push(c)}else var j=[];for(var k=0;e=i[k];k++){var l={},m={};if(d=g[e])for(var n=0;f=d[n];n++)l[f.uid]=f,m[f.uid]=e;var o=e.split(":");for(var p in h){if("*"!==p){var q=a[p]||(a[p]=p.split(":"));if(!globber(q,o))continue}d=h[p];for(var n=0;f=d[n];n++)l[f.uid]=f,m[f.uid]=e}var r=[];for(var f in l)r.push(l[f]);for(var f,n=0;f=r[n];n++)f.apply(f,j)}return this},b}(),DELAY=Math.floor(1e3/FPS),WORKERS=4,FRAMES_TO_QUANTIZE=4,DO_UPLOAD=!0,TEMPLATE=['<div id="curtain" style="opacity:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0;background:rgba(255,255,255,0.1);"></div>','<div id="outline" style="border:1px solid white;background:rgba(0,255,255,0.5);opacity:0.5; position: absolute;pointer-events:none"></div>','<div id="controls" style="position: absolute;top:50px;right:50px;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;min-width:300px; padding: 4px;cursor:default;">','frames <input type="text" id="framecount" value="30" style="width:30px;">','delay <input type="text" id="framedelay" value="0.06s" style="width:30px;">','<button id="record" disabled>record</button>','<button id="save" disabled>save</button>','<span id="status"></span>','<div id="preview"></div>',"</div>"].join("");!function(){function a(){document.body.style.width="100%",document.body.style.height="100%",document.body.parentNode.style.width="100%",document.body.parentNode.style.height="100%";var a=document.getElementById("template").innerHTML,c=document.createElement("div");c.innerHTML=a,document.body.appendChild(c),b()}function b(){G=document.getElementById("curtain"),H=document.getElementById("outline"),controls=document.getElementById("outline"),document.getElementById("record").addEventListener("click",i,!1),document.getElementById("save").addEventListener("click",r,!1),G.addEventListener("mousedown",c,!1),G.addEventListener("mousemove",d,!1),G.addEventListener("mouseup",e,!1),H.style.display="none",controls.style.display="none"}function c(a){z=a.pageX,A=a.pageY,x=1,y=1,K=!0,H.style.left=h(z-1),H.style.top=h(A-1),H.style.width=h(x),H.style.height=h(y),H.style.display="block"}function d(a){K&&(x=a.pageX-z,y=a.pageY-A,H.style.width=h(x),H.style.height=h(y))}function e(){K=!1,controls.style.display="block",f("record"),document.getElementById("record").focus()}function f(a){document.getElementById(a).removeAttribute("disabled")}function g(a){document.getElementById(a).setAttribute("disabled","disabled")}function h(a){return a+"px"}function i(){D=parseInt(document.getElementById("framecount").value),E=1e3*parseFloat(document.getElementById("framedelay").value),F=0,C=0,k(),l(),B=+new Date,requestAnimationFrame(j),n("recording"),g("record")}function j(){var a=(document.createElement("canvas"),+new Date);C+=a-B,B=a,C>E&&(C-=E,l()),F==D?m():requestAnimationFrame(j)}function k(){J=new Array(D);for(var a=0;D>a;a++)J[a]=document.createElement("canvas"),J[a].height=y,J[a].width=x}function l(){var a=J[F++],b=a.getContext("2d");b.fillStyle=document.body.backgroundColor,b.fillRect(0,0,x,y),b.drawImage(v,z,A,x,y,0,0,x,y)}function m(){w.reset(),w.addFrames(J,E),n("encoding");try{w.encode()}catch(a){throw rendering=!1,n(a),a}}function n(a){document.getElementById("status").innerHTML=a}function o(a,b){n("encoded "+a+" / "+b)}function p(a){n(s(a.length))}function q(a){var b=new Image;I=b.src=a,document.getElementById("preview").innerHTML="",document.getElementById("preview").appendChild(b),rendering=!1,f("record"),f("save")}function r(){if(I){var a=(window.location.host+window.location.pathname).replace(/[^a-zA-Z0-9]/g,"-").replace(/-+/,"-"),b=dataUriToBlob(I);saveAs(b,a+"-"+ +new Date+".gif")}}function s(a){return 1e3>a?a+" bytes":1e6>a?t(a/1e3)+" kb":1e9>a?t(a/1e6)+" mb":"WAY TOO BIG DUDE"}function t(a){var b=Math.floor(a);return b+"."+Math.round(10*(a-b))}var u=document.getElementsByTagName("canvas");if(0==u.length)return alert("no canvas found"),void 0;var v=u[0],w=new GifEncoder;w.on("encoded-frame",o),w.on("rendered",p),w.on("rendered-url",q);var x,y,z,A,B,C,D,E,F,G,H,I,J=[],K=!1;a()}();
\ No newline at end of file
diff --git a/js/ui-template.js b/js/ui-template.js
new file mode 100644
index 0000000..9c3a6a7
--- /dev/null
+++ b/js/ui-template.js
@@ -0,0 +1,13 @@
+var TEMPLATE = [
+  '<div id="curtain" style="opacity:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0;background:rgba(255,255,255,0.1);"></div>',
+  '<div id="outline" style="border:1px solid white;background:rgba(0,255,255,0.5);opacity:0.5; position: absolute;pointer-events:none"></div>',
+  '<div id="controls" style="position: absolute;top:50px;right:50px;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;min-width:300px; padding: 4px;cursor:default;">',
+  'frames <input type="text" id="framecount" value="30" style="width:30px;">',
+  'delay <input type="text" id="framedelay" value="0.06s" style="width:30px;">',
+  '<button id="record" disabled>record</button>',
+  '<button id="save" disabled>save</button>',
+  '<span id="status"></span>',
+  '<div id="preview"></div>',
+  '</div>'
+].join("")
+
-- 
cgit v1.2.3-70-g09d2