merge 'clear' behavior into reset and pause

3 files changed, 95 insertions, 87 deletions

diff --git a/js/help.js b/js/help.js
index 9ac2660..6f39aa7 100644
--- a/js/help.js
+++ b/js/help.js
@@ -20,3 +20,4 @@ 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) }
+function quiet_status(s){ $(".status").html(s) }
diff --git a/js/render.js b/js/render.js
index 2790d5f..205da88 100644
--- a/js/render.js
+++ b/js/render.js
@@ -4,44 +4,44 @@ var paused = false, dragging = false, rendering = false, scrolling = false, defe
 var fps = 30
 
 function choose (){
-  loading = true
-  $("#url").val(this.src)
-  loadImage(this.src, ready)
+	loading = true
+	$("#url").val(this.src)
+	loadImage(this.src, ready)
 }
 
 function load(){
-  var newImageURL = $("#url").val()
-  loading = true
-  if (newImageURL != imageURL) {
+	var newImageURL = $("#url").val()
+	loading = true
+	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
-    actual_h = h = cc.canvas.height = frame.ctx.canvas.height
-    for (var i=0, f; f=gif.frames[i]; i++){
-      f.cloneData = f.ctx.getImageData(0,0,w,h)
-    }
-  }
-  else if (window.img) {
-    fc = cq(img.width, img.height)
-    fc.drawImage(img, 0, 0)
-    frame = img_frame = { ctx: fc.context }
-    actual_w = w = cc.canvas.width = frame.ctx.canvas.width
-    actual_h = h = cc.canvas.height = frame.ctx.canvas.height
-    frame.cloneData = frame.ctx.getImageData(0,0,w,h)
-  }
-  else {
-    cc.canvas.width = w
-    cc.canvas.height = h
-    shader_build()
-  }
+	loading = false
+	status("")
+	if (window.gif) {
+		frame = gif.frames[0]
+		actual_w = w = cc.canvas.width = frame.ctx.canvas.width
+		actual_h = h = cc.canvas.height = frame.ctx.canvas.height
+		for (var i=0, f; f=gif.frames[i]; i++){
+			f.cloneData = f.ctx.getImageData(0,0,w,h)
+		}
+	}
+	else if (window.img) {
+		fc = cq(img.width, img.height)
+		fc.drawImage(img, 0, 0)
+		frame = img_frame = { ctx: fc.context }
+		actual_w = w = cc.canvas.width = frame.ctx.canvas.width
+		actual_h = h = cc.canvas.height = frame.ctx.canvas.height
+		frame.cloneData = frame.ctx.getImageData(0,0,w,h)
+	}
+	else {
+		cc.canvas.width = w
+		cc.canvas.height = h
+		shader_build()
+	}
 	displayWidthHeight(w, h)
 }
 
@@ -51,20 +51,20 @@ function displayWidthHeight(width, height){
 }
 
 function giveFrame(t){
-  if (window.gif) {
-    if (gif.currentFrame) {
-      return gif.frames[gif.currentFrame(t)]
-    }
-    else if (gif.frames) {
-      return gif.frames[0]
-    }
-  }
-  if (window.img) {
-    return img_frame
-  }
-  else {
-    return empty_frame()
-  }
+	if (window.gif) {
+		if (gif.currentFrame) {
+			return gif.frames[gif.currentFrame(t)]
+		}
+		else if (gif.frames) {
+			return gif.frames[0]
+		}
+	}
+	if (window.img) {
+		return img_frame
+	}
+	else {
+		return empty_frame()
+	}
 }
 
 function empty_frame(){
@@ -79,53 +79,60 @@ function feedback_frame(){
 }
 
 function reset(){
-  start_t = old_t
-  pause_t = 0
-  pause(false)
-  $("#workspace img").remove()
-  $("#workspace canvas").show()
-  draw(0)
+	start_t = old_t
+	pause_t = 0
+	pause(false)
+	$("#workspace img").remove()
+	$("#workspace canvas").show()
+	remove_all_frames()
+	draw(0)
 }
 
 function pause(state){
-  $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause")
+	paused = typeof state == "boolean" ? state : ! paused
+	$("#pause").toggleClass("paused", paused).html(paused ? "paused" : "pause")
+	if (!paused) {
+		$("#workspace canvas").show()
+		$("#workspace img").hide()
+		$("#save,#upload").disable()
+	}
 }
 
 function step_forward(){
-  var step = $("#framedelay").float() * 1000 || 100
-  old_t += step
-  draw(old_t)
-  pause(true)
+	var step = $("#framedelay").float() * 1000 || 100
+	old_t += step
+	draw(old_t)
+	pause(true)
 }
 
 function animate(t){
-  raf_id = requestAnimationFrame(animate);
+	raf_id = requestAnimationFrame(animate);
 
-  var step_t = t - old_t
-  old_t = t
+	var step_t = t - old_t
+	old_t = t
 
-  if (paused || dragging || rendering || scrolling || deferring) {
-    pause_t += step_t
-    if (scrolling) {
-      scrolling = false
-      deferring = true
-    }
-    else {
-      deferring = false
-    }
-    return
-  }
+	if (paused || dragging || rendering || scrolling || deferring) {
+		pause_t += step_t
+		if (scrolling) {
+			scrolling = false
+			deferring = true
+		}
+		else {
+			deferring = false
+		}
+		return
+	}
 
-  // var timing = +(new Date())
-  draw(t)
-  // timing = +(new Date()) - timing
-  fps = avg(fps, 1000/step_t, 4)
-  status(~~(fps) + " fps")
+	// var timing = +(new Date())
+	draw(t)
+	// timing = +(new Date()) - timing
+	fps = avg(fps, 1000/step_t, 4)
+	quiet_status(~~(fps) + " fps")
 }
 
 function draw(t) {
-  t -= start_t
-  t -= pause_t
-  frame = giveFrame(t)
-  shade(frame, t)
+	t -= start_t
+	t -= pause_t
+	frame = giveFrame(t)
+	shade(frame, t)
 }
diff --git a/shader-combo.html b/shader-combo.html
index ba62657..97ffd33 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -10,7 +10,7 @@ body { background: #f8f8f8; font-size: 14px }
 #shader-name { width: 75px; }
 #shader-id { width: 40px; }
 #shader { width: 400px; height: 247px; font-family: fixed; }
-#uploaded-url { display: none; width: 300px; }
+#uploaded-url { display: none; width: 300px; clear: both; }
 a { color: #00f; }
 
 div { float: left; padding: 10px;}
@@ -44,8 +44,6 @@ form { display: inline-block; }
 .bold { font-weight: bold; }
 .close,.remove { cursor: pointer; }
 
-#rendered { display: none; }
-
 .status { font-size: 12px; }
 .toggle-off { float: right; }
 
@@ -104,6 +102,7 @@ form { display: inline-block; }
 
 	<textarea id="shader"></textarea>
 	<br>
+	<input type="text" id="uploaded-url">
 	<button id="render">render gif</button>
 	<button id="save" disabled>save gif</button>
 	<button id="upload" disabled>upload gif</button>
@@ -118,7 +117,7 @@ form { display: inline-block; }
 	<br>	
 
 	frames <input type="text" id="framecount" value="10">
-	<button id="add-frame">+add frame</button>
+	<button id="add-frame">+add frames</button>
 	<select id="reorder-frames">
 		<option value="">reorder</option>
 		<option value="weave-frames">weave</button>
@@ -126,7 +125,7 @@ form { display: inline-block; }
 		<option value="reverse-frames">reverse</button>
 		<option value="sort-frames">sort</button>
 	</select>
-	<button id="remove-all-frames">clear</button>
+	<!--<button id="remove-all-frames">clear</button>-->
 	<br>
 	
 	<span id="frames"></span>
@@ -136,11 +135,6 @@ form { display: inline-block; }
 	<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>
@@ -231,6 +225,12 @@ function init(){
 		cc.canvas.width = w
 		cc.canvas.height = h
 	})
+	$("#reorder-frames").change(function(){
+		var order = $(this).val()
+		if (order) {
+			
+		}
+	})
 
 	load()
 	help.init()