From 3a51572e8a6628f90e73e2ab0bca52a98d9540e7 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 23 Jan 2014 10:10:19 -0500
Subject: more shuffling

---
 js/frames.js | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

(limited to 'js/frames.js')

diff --git a/js/frames.js b/js/frames.js
index 0ae256c..c9c844d 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -1,4 +1,36 @@
 
+var frame_editor = {}
+
+frame_editor.init = function(){
+	frame_editor.bind()
+}
+
+frame_editor.bind = function(){
+  $("#add-frame").click(add_frame)
+  $("#frames").sortable({
+    start: drag_start,
+    stop: drag_stop
+  });
+  $(document).on("click","#frames .remove",remove_frame)
+  $("#framecount").change(function(){
+    var val = $(this).int()
+    if (val < 1 || isNaN(val)) $(this).val(val = 1)
+    if (val == 1) $("#add-frame").html("+add frame")
+    else $("#add-frame").html("+add frames")
+  })
+
+  $("#frames").disableSelection();
+  $("#remove-all-frames").click(remove_all_frames)
+  $("#weave-frames").click(weave_frames)
+  $("#shuffle-frames").click(shuffle_frames)
+  $("#reverse-frames").click(reverse_frames)
+  $("#sort-frames").click(sort_frames)
+
+  $("#render").click(render)
+  $("#save").click(save)
+  $("#upload").click(upload)
+}
+
 function add_frame(){
   var frame_count = $("#framecount").int()
   if (frame_count < 2) {
-- 
cgit v1.2.3-70-g09d2


From 009007363dfca587c2cbbdbba6566179a05d8fb6 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 00:17:45 -0500
Subject: merge js into combo

---
 js/frames.js      |  6 ++++--
 js/help.js        |  2 ++
 js/render.js      |  2 --
 shader-combo.html | 20 +++++++++++++++-----
 4 files changed, 21 insertions(+), 9 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/frames.js b/js/frames.js
index c9c844d..2dddae2 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -29,6 +29,10 @@ frame_editor.bind = function(){
   $("#render").click(render)
   $("#save").click(save)
   $("#upload").click(upload)
+
+	$("#background").change(function(){
+		document.body.style.backgroundColor = $("#background").string()
+	})
 }
 
 function add_frame(){
@@ -121,8 +125,6 @@ function render (){
   $("#render").html("rendering")
 }
 
-function status(s){ $(".status").html(s) }
-
 var encoder = new GifEncoder()
 
 encoder.on("quantized", function(url){
diff --git a/js/help.js b/js/help.js
index 5610794..1794f3b 100644
--- a/js/help.js
+++ b/js/help.js
@@ -17,3 +17,5 @@ help.bind = function(){
 
 function drag_start(){ dragging = true; $(this).addClass("dragging") }
 function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
+
+function status(s){ $(".status").html(s); console.log(s) }
diff --git a/js/render.js b/js/render.js
index 4a9eeef..a22c9fe 100644
--- a/js/render.js
+++ b/js/render.js
@@ -102,5 +102,3 @@ function draw(t) {
   frame = giveFrame(t)
   shade(frame, t)
 }
-
-function status(s){ $(".status").html(s); console.log(s) }
diff --git a/shader-combo.html b/shader-combo.html
index 92cb6e1..aa6edd2 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -46,13 +46,13 @@ a { color: #00f; }
 	<button id="toggle-off">hide</button>
 	|
 	<span id="shader-api-form" class="form">
+		<input type="checkbox" id="persist-image" checked>
+		<label for="persist-image">load image</label>
 		<button id="fetch-latest">latest</button>
 		<button id="fetch-next-page" class="hidden">&rarr;</button>
 		<select id="pick-user">
 			<option>fetching users..</option>
 		</select>
-		<input type="checkbox" id="persist-image" checked>
-		<label for="persist-image">load image</label>
 		<span class="status"></span>
 		<div id="shader-gallery"></div>
 	</span>
@@ -80,7 +80,6 @@ a { color: #00f; }
 	<button id="pause">pause</button>
 	<button id="reset">reset</button>
 	<br>
-
 </div>
 
 <div id="workspace"></div>
@@ -125,16 +124,24 @@ a { color: #00f; }
 
 var cc = cq(0,0).appendTo("#workspace")
 var w, h
+var lastGif
+var mousex, mousey
+
 var firsttime = true
 var shader_gallery_template = $("#shader-gallery-template").html()
 
-
 $(init)
 
 function init(){
 	$("#url").change(load)
 	$("#reset").click(reset)
 	$("#pause").click(pause)
+	$("#step-forward").click(step_forward)
+
+	$(document).on("mousemove", function(e) {
+		mousex = e.pageX
+		mousey = e.pageY
+	})
 
 	$("#toggle-shaders").click(function(){
 		$("#header .form").hide()
@@ -152,6 +159,10 @@ function init(){
 		$("#header .form").hide()
 		$(".bold").removeClass("bold")
 	})
+
+	frame_editor.init()
+	help.init()
+	load()
 	
 	user.init()
 	help.init()
@@ -164,6 +175,5 @@ function init(){
 }
 
 
-
 </script>
 </html>
-- 
cgit v1.2.3-70-g09d2


From 654ff510a723f545fe64ae629972f1fdc2a2705a Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 03:08:26 -0500
Subject: frame editor html

---
 js/frames.js      |  5 +++--
 shader-combo.html | 22 +++++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/frames.js b/js/frames.js
index 2dddae2..62306fa 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -1,3 +1,4 @@
+var frame_thumb_size = 93
 
 var frame_editor = {}
 
@@ -51,14 +52,14 @@ function add_single_frame(){
   var frame = cc.clone().appendTo($el.find(".frame")[0])
   frame.canvas.className = "fullsize"
   frame.canvas.style.display = "none"
-  var thumb = cc.clone().resize(100,100).appendTo($el.find(".frame")[0])
+  var thumb = cc.clone().resize(frame_thumb_size,frame_thumb_size).appendTo($el.find(".frame")[0])
   $("#frames").append($el)
   $("#render").enable()
 }
 function add_frames(frame_count){
   rendering = true
   var t = old_t - start_t - pause_t
-  var frame_delay = $("#frameinterval").float() * 1000
+  var frame_delay = ($("#frameinterval").float() || $("#framedelay").float()) * 1000
   var frame
   for (var i = 0; i < frame_count; i++) {
     frame = giveFrame(t)
diff --git a/shader-combo.html b/shader-combo.html
index 0a5fcab..282e5e2 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -30,7 +30,7 @@ form { display: inline-block; }
 #instructions.dragging iframe { pointer-events: none; }
 #instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
 
-#frames { width: 435px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
+#frames { display: block; width: 404px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
 #frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; }
 #frames canvas { display: block }
 #frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
@@ -112,7 +112,27 @@ form { display: inline-block; }
 		<br>
 		<input type="text" id="uploaded-url">
 	</span>
+	<br>
+	
+	frames <input type="text" id="framecount" value="1">
+	<button id="add-frame">+add frame</button>
+	<select id="reorder-frames">
+		<option value="">reorder</option>
+		<option value="weave-frames">weave</button>
+		<option value="shuffle-frames">shuffle</button>
+		<option value="reverse-frames">reverse</button>
+		<option value="sort-frames">sort</button>
+	</select>
+	<button id="remove-all-frames">clear</button>
+	<button id="render" disabled>render</button>
+	<br>
+	
+	<span id="frames"></span>
+	<br>
+	<br>
 
+	gif delay <input type="text" id="framedelay" value="0.06s">
+	background <input type="text" id="background" value="#fff">
 </div>
 
 <div id="workspace"></div>
-- 
cgit v1.2.3-70-g09d2


From d93bffc6438e6c89081b9b345c85a131a3de1138 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 03:13:42 -0500
Subject: display rendered gif in workspace

---
 js/frames.js | 5 +++--
 js/render.js | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/frames.js b/js/frames.js
index 62306fa..1d08807 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -109,7 +109,7 @@ function render (){
     encoder.addFrame(frame.canvas, delay)
   })
   $("#pause,#render,#add-frame").disable()
-  $("#rendered").find("img").remove()
+  $("#workspace").find("img").remove()
   $("#rendered").show()
   // really bad results with neuquant?
   // status("quantizing")
@@ -144,7 +144,8 @@ encoder.on("rendered", function(bytes){
 encoder.on("rendered-url", function(url){
   var image = new Image ()
   lastGif = image.src = url
-  $("#rendered").append(image)
+	$("#workspace canvas").hide()
+  $("#workspace").append(image)
   $("#uploaded-url").hide().val("")
   $("#save,#upload,#rendered").show()
   $("#pause,#render,#add-frame,#save,#upload").enable()
diff --git a/js/render.js b/js/render.js
index e379ab8..6ad7560 100644
--- a/js/render.js
+++ b/js/render.js
@@ -80,7 +80,8 @@ function reset(){
   start_t = old_t
   pause_t = 0
   pause(false)
-  $("#rendered img").remove()
+  $("#workspace img").remove()
+  $("#workspace canvas").show()
   draw(0)
 }
 
-- 
cgit v1.2.3-70-g09d2


From beb6a880100835aa44b8508a03b3b0b63562055a Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 04:22:07 -0500
Subject: nicer loading logic

---
 js/frames.js      | 11 ++++++-----
 js/image.js       |  1 +
 js/render.js      |  8 ++++++--
 shader-combo.html | 32 ++++++++++++++++++--------------
 4 files changed, 31 insertions(+), 21 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/frames.js b/js/frames.js
index 1d08807..887b497 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -54,7 +54,6 @@ function add_single_frame(){
   frame.canvas.style.display = "none"
   var thumb = cc.clone().resize(frame_thumb_size,frame_thumb_size).appendTo($el.find(".frame")[0])
   $("#frames").append($el)
-  $("#render").enable()
 }
 function add_frames(frame_count){
   rendering = true
@@ -71,9 +70,6 @@ function add_frames(frame_count){
 }
 function remove_frame(){
   $(this).closest("div").remove()
-  if ($("#frames div").length == 0) {
-    $("#render").disable()
-  }
 }
 function remove_all_frames(){
   $("#frames").empty()
@@ -102,6 +98,11 @@ function sort_frames(){
 function render (){
   if (rendering) return
   rendering = true
+  
+  if ($("#frames canvas.fullsize").length == 0) {
+  	add_frame()
+  }
+  
   encoder.reset()
   var delay = $("#framedelay").float() * 1000 || 100
   $("#frames canvas.fullsize").each(function(){
@@ -149,7 +150,7 @@ encoder.on("rendered-url", function(url){
   $("#uploaded-url").hide().val("")
   $("#save,#upload,#rendered").show()
   $("#pause,#render,#add-frame,#save,#upload").enable()
-  $("#render").html("render")
+  $("#render").html("render gif")
   rendering = false
   pause(true)
 })
diff --git a/js/image.js b/js/image.js
index 4de7fd9..aabab89 100644
--- a/js/image.js
+++ b/js/image.js
@@ -2,6 +2,7 @@ var gif, img
 
 function loadImage(imageURL, callback) {
   var imageURL = proxify( imageURL );
+  window.imageURL = imageURL
 
   window.gif = window.img = null
 
diff --git a/js/render.js b/js/render.js
index 6ad7560..cfc2d81 100644
--- a/js/render.js
+++ b/js/render.js
@@ -12,13 +12,17 @@ function choose (){
 }
 
 function load(){
-  var imageURL = $("#url").val()
+  var newImageURL = $("#url").val()
   loading = true
-  loadImage(imageURL, ready)
+  if (newImageURL != imageURL) {
+		loadImage(newImageURL, ready)
+		status("loading")
+	}
 }
 
 function ready(){
   loading = false
+  status("")
   if (window.gif) {
     frame = gif.frames[0]
     actual_w = w = cc.canvas.width = frame.ctx.canvas.width
diff --git a/shader-combo.html b/shader-combo.html
index 3c28b54..f51037b 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <style type="text/css">
-body { background: #f8f8f8; }
+body { background: #f8f8f8; font-size: 14px }
 #url { width: 250px; }
 #width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; text-align: right; }
 #background { text-align: left; }
@@ -47,8 +47,10 @@ form { display: inline-block; }
 #rendered { display: none; }
 
 .status { font-size: 12px; }
-#header .status { float: right; margin-top: 5px; margin-right: 5px;}
 .toggle-off { float: right; }
+
+#render,#save,#upload,#save-shader { font-weight: bold; }
+#save[disabled],#upload[disabled] { font-weight: normal; }
 </style>
 </head>
 <body>
@@ -99,23 +101,20 @@ form { display: inline-block; }
 
 	<textarea id="shader"></textarea>
 	<br>
-	<button id="save-shader"><b>save shader</b></button>
-	<button id="pause">pause</button>
+	<button id="render">render gif</button>
+	<button id="save" disabled>save gif</button>
+	<button id="upload" disabled>upload gif</button>
 	<button id="reset">reset</button>
+	<br>
+	<button id="save-shader">save shader</button>
 	<input type="text" id="width" placeholder="width" value="0">
 	<input type="text" id="height" placeholder="height" value="0">
 	<span class="status"></span>
 	<!--<button id="step-forward">&gt;&gt;</button>-->
 	<br>
-	<span id="rendered">
-		<button id="save" disabled>save image</button>
-		<button id="upload" disabled>upload</button>
-		<br>
-		<input type="text" id="uploaded-url">
-	</span>
-	<br>
-	
-	frames <input type="text" id="framecount" value="1">
+	<br>	
+
+	frames <input type="text" id="framecount" value="10">
 	<button id="add-frame">+add frame</button>
 	<select id="reorder-frames">
 		<option value="">reorder</option>
@@ -125,15 +124,20 @@ form { display: inline-block; }
 		<option value="sort-frames">sort</button>
 	</select>
 	<button id="remove-all-frames">clear</button>
-	<button id="render" disabled>render</button>
 	<br>
 	
 	<span id="frames"></span>
 	<br>
 	<br>
 
+	<button id="pause">pause</button>
 	gif delay <input type="text" id="framedelay" value="0.06s">
 	background <input type="text" id="background" value="#fff">
+	&nbsp;
+	<input type="text" id="uploaded-url">
+	<span id="rendered">
+	</span>
+	<br>
 </div>
 
 <div id="workspace"></div>
-- 
cgit v1.2.3-70-g09d2


From e3297c52583f38ed71f7734f1ff04a267834e40c Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 21:45:12 -0500
Subject: fix rendering bug

---
 js/api/gallery.js |  1 +
 js/frames.js      |  3 +--
 js/render.js      |  2 ++
 shader-combo.html | 11 +++++------
 4 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/api/gallery.js b/js/api/gallery.js
index 830ff93..e8af7f1 100644
--- a/js/api/gallery.js
+++ b/js/api/gallery.js
@@ -76,6 +76,7 @@ function load_shaders(err, shaders){
 function display_shader(shader_object){
 	var $shader = $("<div>").addClass("shader")
 	$shader.data("shader", shader_object)
+	$shader.data("id", shader_object.id)
 	var html = shader_gallery_template
 	for (var field in shader_object) {
 		html = html.replace("{" + field + "}", shader_object[field])
diff --git a/js/frames.js b/js/frames.js
index 887b497..571e862 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -97,12 +97,11 @@ function sort_frames(){
 
 function render (){
   if (rendering) return
-  rendering = true
-  
   if ($("#frames canvas.fullsize").length == 0) {
   	add_frame()
   }
   
+  rendering = true
   encoder.reset()
   var delay = $("#framedelay").float() * 1000 || 100
   $("#frames canvas.fullsize").each(function(){
diff --git a/js/render.js b/js/render.js
index 205da88..bd6deb1 100644
--- a/js/render.js
+++ b/js/render.js
@@ -7,6 +7,7 @@ function choose (){
 	loading = true
 	$("#url").val(this.src)
 	loadImage(this.src, ready)
+	reset()
 }
 
 function load(){
@@ -84,6 +85,7 @@ function reset(){
 	pause(false)
 	$("#workspace img").remove()
 	$("#workspace canvas").show()
+  $("#uploaded-url").hide().val("")
 	remove_all_frames()
 	draw(0)
 }
diff --git a/shader-combo.html b/shader-combo.html
index 97ffd33..65b81e9 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -3,6 +3,10 @@
 <head>
 <style type="text/css">
 body { background: #f8f8f8; font-size: 14px }
+div { float: left; padding: 10px;}
+form { display: inline-block; }
+a { color: #00f; }
+
 #url { width: 250px; }
 #width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; text-align: right; }
 #background { text-align: left; }
@@ -11,10 +15,6 @@ body { background: #f8f8f8; font-size: 14px }
 #shader-id { width: 40px; }
 #shader { width: 400px; height: 247px; font-family: fixed; }
 #uploaded-url { display: none; width: 300px; clear: both; }
-a { color: #00f; }
-
-div { float: left; padding: 10px;}
-form { display: inline-block; }
 
 #header { clear: right; width:100%; padding: 0; font-size: 12px; }
 #shader-gallery,#gallery-images { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; }
@@ -45,7 +45,6 @@ form { display: inline-block; }
 .close,.remove { cursor: pointer; }
 
 .status { font-size: 12px; }
-.toggle-off { float: right; }
 
 #render,#save,#upload,#save-shader { font-weight: bold; }
 #save[disabled],#upload[disabled] { font-weight: normal; }
@@ -56,6 +55,7 @@ form { display: inline-block; }
 
 <div id="header">
 	<button id="help">help</button>
+	<button class="toggle-off">x</button>
 	<button id="new-shader"><b>new shader</b></button>
 	<select id="examples">
 		<option>examples</option>
@@ -70,7 +70,6 @@ form { display: inline-block; }
 	|
 	<button id="toggle-shaders">browse shaders</button>
 	<button id="toggle-images">browse images</button>
-	<button class="toggle-off">hide</button>
 	<span class="status"></span>
 
 	<span id="shader-api-form" class="form">
-- 
cgit v1.2.3-70-g09d2


From a373ad5bf748abba348bd5e1a3865b61b470c5d1 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 26 Jan 2014 22:56:38 -0500
Subject: using a plus selector weirdly

---
 js/frames.js      |  2 ++
 js/render.js      |  3 ++-
 shader-combo.html | 11 +++++------
 3 files changed, 9 insertions(+), 7 deletions(-)

(limited to 'js/frames.js')

diff --git a/js/frames.js b/js/frames.js
index 571e862..fc6ee24 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -147,6 +147,7 @@ encoder.on("rendered-url", function(url){
 	$("#workspace canvas").hide()
   $("#workspace").append(image)
   $("#uploaded-url").hide().val("")
+	$("#uploaded-url + br").hide()
   $("#save,#upload,#rendered").show()
   $("#pause,#render,#add-frame,#save,#upload").enable()
   $("#render").html("render gif")
@@ -197,6 +198,7 @@ function upload(){
       console.log(data);
       status("uploaded");
       $("#uploaded-url").show().focus().val(data.url)
+      $("#uploaded-url + br").show()
     },
     error: function(data){
       console.log(data)
diff --git a/js/render.js b/js/render.js
index bd6deb1..ac26eec 100644
--- a/js/render.js
+++ b/js/render.js
@@ -85,7 +85,8 @@ function reset(){
 	pause(false)
 	$("#workspace img").remove()
 	$("#workspace canvas").show()
-  $("#uploaded-url").hide().val("")
+  $("#uploaded-url").hide()
+	$("#uploaded-url + br").show()
 	remove_all_frames()
 	draw(0)
 }
diff --git a/shader-combo.html b/shader-combo.html
index 6b721a1..784f246 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -14,7 +14,8 @@ a { color: #00f; }
 #shader-name { width: 75px; }
 #shader-id { width: 40px; }
 #shader { width: 400px; height: 247px; font-family: fixed; }
-#uploaded-url { display: none; width: 300px; clear: both; }
+#uploaded-url { display: none; width: 400px; }
+#uploaded-url + br { display: none; }
 
 #header { clear: right; width:100%; padding: 0; font-size: 12px; }
 #shader-gallery,#gallery-images { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; }
@@ -103,22 +104,24 @@ a { color: #00f; }
 	<textarea id="shader"></textarea>
 	<br>
 	<input type="text" id="uploaded-url">
+	<br>
 	<button id="render">render gif</button>
 	<button id="save" disabled>save gif</button>
 	<button id="upload" disabled>upload gif</button>
 	<button id="reset">reset</button>
+	<button id="pause">pause</button>
 	<br>
 	<button id="save-shader">save shader</button>
 	<input type="text" id="width" placeholder="width" value="0">
 	<input type="text" id="height" placeholder="height" value="0">
 	<span class="status"></span>
 	<!--<button id="step-forward">&gt;&gt;</button>-->
-	<br>
 	<br>	
 	<span id="frame-hidden-controls">
 		<button id="show-frame-controls">show frame editor</button>
 	</span>
 	<span id="frame-controls">
+		<br>
 		<button id="hide-frame-controls">x</button>
 		frames <input type="text" id="framecount" value="10">
 		rate <input type="text" id="framedelay" value="0.06s">
@@ -135,10 +138,6 @@ a { color: #00f; }
 		<br>
 		<span id="frames"></span>
 	</span>
-	<br>
-	<br>
-
-	<button id="pause">pause</button>
 </div>
 
 <div id="workspace"></div>
-- 
cgit v1.2.3-70-g09d2