From 9433b20670a1eada77e1a4372a8f8ccad6f499c3 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sat, 25 Jan 2014 23:24:36 -0500
Subject: split out help and whatever else

---
 shader-picker.html | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

(limited to 'shader-picker.html')

diff --git a/shader-picker.html b/shader-picker.html
index d0d2625..0896609 100644
--- a/shader-picker.html
+++ b/shader-picker.html
@@ -128,6 +128,7 @@ a { color: #00f; }
 <script type="text/javascript" src="js/render.js"></script>
 <script type="text/javascript" src="js/shader.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
+<script type="text/javascript" src="js/help.js"></script>
 <script type="text/javascript" src="shaders.json"></script>
 <script type="text/javascript">
 
@@ -154,19 +155,10 @@ function init(){
 	})
 	
 	frame_editor.init()
-
-	$(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true })
-	$("#help,#instructions .close").click(function(){ $("#instructions").toggle() })
-	$("#instructions").draggable({
-		start: drag_start,
-		stop: drag_stop
-	})
-	$("#instructions").disableSelection();
-
+	help.init()
 	load()
 
-	gallery.choose = choose
-	gallery.init()
+	gallery.init(choose)
 
 	user.init()
 	if (user.username.length) {
@@ -181,8 +173,6 @@ function init(){
 
 	requestAnimationFrame(animate)
 }
-function drag_start(){ dragging = true; $(this).addClass("dragging") }
-function drag_stop(){ dragging = false; $(".dragging").removeClass("dragging") }
 
 </script>
 <script type="text/html" id="frame-template">
-- 
cgit v1.2.3-70-g09d2


From e873e6c1b0d2f4e06b94138a22d0d4292c52a037 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sat, 25 Jan 2014 23:42:19 -0500
Subject: logging, error fix, css

---
 js/api/set.js         |  4 ++++
 js/error.highlight.js |  2 +-
 shader-api.html       | 10 +++++++++-
 shader-picker.html    | 10 ++++++----
 4 files changed, 20 insertions(+), 6 deletions(-)

(limited to 'shader-picker.html')

diff --git a/js/api/set.js b/js/api/set.js
index 92cc071..8732c87 100644
--- a/js/api/set.js
+++ b/js/api/set.js
@@ -10,14 +10,17 @@ function save_shader(){
 	}
 	var blob = dataUriToBlob(cc.clone().resize(200,200).canvas.toDataURL("image/png"))
 
+	status('saving..')
 	console.log(params)
 	$.post("http://asdf.us/cgi-bin/im/shader/save", params, function(resp){
 		console.log(resp);
 		data = JSON.parse(resp)
 		if (data.ERROR){
+			status('error saving shader')
 			alert(data.ERROR)
 			return false
 		}
+		status('uploading thumbnail')
 		if (! shader_id_root) {
 			shader_id_root = data.id;
 		}
@@ -40,6 +43,7 @@ function save_shader(){
 			contentType: false,
 		}).done(function(resp){
 			console.log(resp);
+			status('')
 			var data = JSON.parse(resp)
 			if (data.success) {
 				$shader.find("img").attr("src", data.url)
diff --git a/js/error.highlight.js b/js/error.highlight.js
index 0b478e2..f46d0ec 100644
--- a/js/error.highlight.js
+++ b/js/error.highlight.js
@@ -136,7 +136,7 @@ var init = function(){
   create_el_highlight()
   create_el_textmeasure()
   scrollbar_width = calc_scrollbar_width()
-  textarea.addEventListener('scroll', reposition_highlight)
+  dom.textarea.addEventListener('scroll', reposition_highlight)
 }
 
 // exports
diff --git a/shader-api.html b/shader-api.html
index 416f21a..b860093 100644
--- a/shader-api.html
+++ b/shader-api.html
@@ -16,6 +16,13 @@ form { display: inline-block; }
 #shader-name { width: 75px; }
 #shader-id { width: 40px; }
 a { color: #00f; }
+#help { float: right; }
+.dragging { cursor: -webkit-grabbing !important; }
+#instructions { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+#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; }
+
 </style>
 </head>
 <body>
@@ -35,6 +42,7 @@ a { color: #00f; }
 -->
 
 <div id="shader-api">
+	<button id="help">help</button>
 	<button id="new-shader"><b>new shader</b></button>
 	<input type="text" id="shader-id" disabled><button id="fetch-info" disabled>info</button>
 	<button id="fetch-history" disabled>history</button>
@@ -74,6 +82,7 @@ a { color: #00f; }
 </body>
 <script type="text/javascript" src="js/vendor/acorn.js"></script>
 <script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
 <script type="text/javascript" src="js/vendor/canvasquery.js"></script>
 <script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script>
 <script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script>
@@ -122,4 +131,3 @@ function init(){
 
 </script>
 </html>
--
\ No newline at end of file
diff --git a/shader-picker.html b/shader-picker.html
index 0896609..7efe39f 100644
--- a/shader-picker.html
+++ b/shader-picker.html
@@ -130,6 +130,12 @@ a { color: #00f; }
 <script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript" src="js/help.js"></script>
 <script type="text/javascript" src="shaders.json"></script>
+
+<script type="text/html" id="frame-template">
+<button class="remove">x</button>
+<span class="frame"></span>
+</script>
+
 <script type="text/javascript">
 
 var cc = cq(0,0).appendTo("#workspace")
@@ -174,10 +180,6 @@ function init(){
 	requestAnimationFrame(animate)
 }
 
-</script>
-<script type="text/html" id="frame-template">
-<button class="remove">x</button>
-<span class="frame"></span>
 </script>
 </html>
 
-- 
cgit v1.2.3-70-g09d2


From dd7d18e344da5aa5b326621857d17993d01d7151 Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Sun, 2 Feb 2014 01:08:41 -0500
Subject: toggle iframes, write short copy

---
 commands.html      | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 instructions.html  | 69 ------------------------------------------------------
 js/help.js         | 10 ++++----
 shader-combo.html  |  6 ++---
 shader-picker.html | 12 +++++-----
 tutorial.html      |  2 +-
 6 files changed, 85 insertions(+), 83 deletions(-)
 create mode 100644 commands.html
 delete mode 100644 instructions.html

(limited to 'shader-picker.html')

diff --git a/commands.html b/commands.html
new file mode 100644
index 0000000..df9b072
--- /dev/null
+++ b/commands.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+<head>
+<title>instructions</title>
+<style type="text/css">
+html,body{margin:0;padding:5px; }
+pre { font-family: serif; font-size: 14px; margin:0;padding:0;}
+u{ color: #866; }
+i{ color: #666; }
+</style>
+</head>
+<body>
+<pre id="pre"><u>function parameters</u>
+w, h, x, y
+t = current time (ms)
+d[] = imageData array
+r, g, b, a = color values
+mousex, mousey
+
+<u>Math aliases</u>
+floor, ceil, round
+abs, sign, mod(n,m)
+pow, exp, sqrt
+cos, sin, tan
+acos, asin, atan, atan2
+random()
+E, PI, PHI
+
+<u>convenience functions</u>
+clamp(n,min,max)
+mix(n,a,b) (lerp)
+step(a,b)
+smoothstep(min,max,n)
+avg(m,n,a)
+cosp, sinp (mapped to [0,1])
+pixel(x,y) == 4*(y*w+h)
+dist(x,y,a,b)
+angle(x,y,a,b)
+rand(n), randint(n)
+randrange(a,b)
+choice(array)
+deg(radians), rad(degrees)
+
+<u>set pixel color</u>
+rgb(r,g,b)
+rgbref([rgb])
+black() white() red()
+gray(n)
+
+<u>color spaces</u>
+rgb2xyz(rgb)
+xyz2rgb(xyz)
+xyz2hunterlab(xyz)
+hunterlab2xyz(Lab)
+xyz2cielab(xyz)
+cielab2xyz(Lab)
+rgb2hsl(rgb)
+hsl2rgb(hsl)
+rgb2cmy(r,g,b)
+cmy2rgb(cmy)
+cmy2cmyk(cmy)
+cmyk2cmy(cmyk)
+(not all have been tested)
+</pre>
+</body>
+<script>
+pre.innerHTML = pre.innerHTML.replace(/\(/g,"(<i>").replace(/\)/g,"</i>)")
+</script>
+</html>
diff --git a/instructions.html b/instructions.html
deleted file mode 100644
index df9b072..0000000
--- a/instructions.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<title>instructions</title>
-<style type="text/css">
-html,body{margin:0;padding:5px; }
-pre { font-family: serif; font-size: 14px; margin:0;padding:0;}
-u{ color: #866; }
-i{ color: #666; }
-</style>
-</head>
-<body>
-<pre id="pre"><u>function parameters</u>
-w, h, x, y
-t = current time (ms)
-d[] = imageData array
-r, g, b, a = color values
-mousex, mousey
-
-<u>Math aliases</u>
-floor, ceil, round
-abs, sign, mod(n,m)
-pow, exp, sqrt
-cos, sin, tan
-acos, asin, atan, atan2
-random()
-E, PI, PHI
-
-<u>convenience functions</u>
-clamp(n,min,max)
-mix(n,a,b) (lerp)
-step(a,b)
-smoothstep(min,max,n)
-avg(m,n,a)
-cosp, sinp (mapped to [0,1])
-pixel(x,y) == 4*(y*w+h)
-dist(x,y,a,b)
-angle(x,y,a,b)
-rand(n), randint(n)
-randrange(a,b)
-choice(array)
-deg(radians), rad(degrees)
-
-<u>set pixel color</u>
-rgb(r,g,b)
-rgbref([rgb])
-black() white() red()
-gray(n)
-
-<u>color spaces</u>
-rgb2xyz(rgb)
-xyz2rgb(xyz)
-xyz2hunterlab(xyz)
-hunterlab2xyz(Lab)
-xyz2cielab(xyz)
-cielab2xyz(Lab)
-rgb2hsl(rgb)
-hsl2rgb(hsl)
-rgb2cmy(r,g,b)
-cmy2rgb(cmy)
-cmy2cmyk(cmy)
-cmyk2cmy(cmyk)
-(not all have been tested)
-</pre>
-</body>
-<script>
-pre.innerHTML = pre.innerHTML.replace(/\(/g,"(<i>").replace(/\)/g,"</i>)")
-</script>
-</html>
diff --git a/js/help.js b/js/help.js
index 6f39aa7..7bc3a6b 100644
--- a/js/help.js
+++ b/js/help.js
@@ -7,13 +7,15 @@ help.init = function(){
 
 help.bind = function(){
 	$(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true })
-	$("#help").click(function(){ $("#instructions").toggle() ;console.log("zZ") })
-	$("#instructions .close").click(function(){ $("#instructions").toggle() ;console.log("zZ") })
-	$("#instructions").draggable({
+	$("#show-commands").click(function(){ $("#tutorial").hide(); $("#commands").toggle() })
+	$("#show-tutorial").click(function(){ $("#commands").hide(); $("#tutorial").toggle() })
+	$("#commands .close").click(function(){ $("#commands").toggle() })
+	$("#tutorial .close").click(function(){ $("#tutorial").toggle() })
+	$("#commands,#tutorial").draggable({
 		start: drag_start,
 		stop: drag_stop
 	})
-	$("#instructions").disableSelection();
+	$("#commands,#tutorial").disableSelection();
 }
 
 function drag_start(){ dragging = true; $(this).addClass("dragging") }
diff --git a/shader-combo.html b/shader-combo.html
index 99c5a6c..5d9c869 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -29,7 +29,7 @@ a { color: #00f; }
 .dragging { cursor: -webkit-grabbing !important; }
 .ui-sortable-helper { cursor: -webkit-grabbing !important; }
 
-#instructions { top:20px;right:20px; width:190px;height:465px; }
+#commands { top:40px;right:20px; width:190px;height:calc(95% - 230px); }
 #tutorial { top:40px;right:30px; width:290px;height:325px; display: block;}
 .iframe { position: absolute; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
 .iframe iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
@@ -64,7 +64,7 @@ a { color: #00f; }
 
 <div id="corner">
 	<h1 id="logo">shaderblaster</h1>
-	<button id="show-help">help</button>
+	<button id="show-tutorial">help</button>
 	<button id="show-commands">commands</button>
 	<select id="examples">
 		<option>examples</option>
@@ -156,7 +156,7 @@ a { color: #00f; }
 <div id="workspace"></div>
 
 <div class="iframe" id="tutorial"><iframe src="tutorial.html"></iframe><button class="close">&times;</button></div>
-<div class="iframe" id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</button></div>
+<div class="iframe" id="commands"><iframe src="commands.html"></iframe><button class="close">&times;</button></div>
 <script type="text/javascript" src="js/vendor/acorn.js"></script>
 <script type="text/javascript" src="js/vendor/gif.js"></script>
 <script type="text/javascript" src="js/vendor/gif-encode.min.js"></script>
diff --git a/shader-picker.html b/shader-picker.html
index 7efe39f..8bafc60 100644
--- a/shader-picker.html
+++ b/shader-picker.html
@@ -21,10 +21,10 @@ div { display: inline-block; padding: 10px;}
 #rendered img { display: block; }
 #render,#save { font-weight: bold; }
 #render { float: right; }
-#instructions { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
-#instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
-#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; }
+#commands { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
+#commands iframe {width: 100%;height:100%;margin:0;padding:0;border:0;}
+#commands.dragging iframe { pointer-events: none; }
+#commands .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
 .close,.remove { cursor: pointer; }
 #uploaded-url { display: none; width: 300px; }
 form { display: inline-block; }
@@ -79,7 +79,7 @@ a { color: #00f; }
 	your name here &rarr; <input type="text" id="username" value="">
 	<br>
 	<br>
-	<button id="help">help</button>
+	<button id="show-commands">help</button>
 	&nbsp;
 	<button id="add-shader">+</button>
 	<button id="remove-shader">&times;</button>
@@ -103,7 +103,7 @@ a { color: #00f; }
 	<input type="text" id="uploaded-url">
 </div>
 
-<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">&times;</button></div>
+<div id="commands"><iframe src="commands.html"></iframe><button class="close">&times;</button></div>
 </body>
 <script type="text/javascript" src="js/vendor/gif-encode/util.js"></script>
 <script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script>
diff --git a/tutorial.html b/tutorial.html
index 84d4ca0..be42f74 100644
--- a/tutorial.html
+++ b/tutorial.html
@@ -18,7 +18,7 @@ Your basic variables are position (x, y), time (t), and color (r, g, b, a).
 
 Many math functions such as <i>cos</i> and <i>sqrt</i> are available, along with functions from GLSL like <i>step</i> and <i>mix</i>.  Click <b>commands</b> to see a complete list.
 
-Use the bar below to search <a href="http://dump.fm/">Dumpfm</a> and <a href="http://asdf.us/im/">Photoblaster</a> for images.
+Use the bar below to search <a href="http://dump.fm/">Dumpfm</a> and <a href="http://asdf.us/im/">Photoblaster</a> for images, or use your own.
 
 If you make a cool effect, you can render it out to a gif, or save the shader for others to use.
 </article>
-- 
cgit v1.2.3-70-g09d2


From 43fc160d11bc041302367984901ebf7ecd8118ef Mon Sep 17 00:00:00 2001
From: jules <jules@okfoc.us>
Date: Fri, 7 Feb 2014 23:54:25 -0500
Subject: split out file save api

---
 Gruntfile.js             |  1 +
 js/frames.js             | 51 ------------------------------------------------
 js/save.js               | 51 ++++++++++++++++++++++++++++++++++++++++++++++++
 shader-combo.html        |  1 +
 shader-localstorage.html |  1 +
 shader-picker.html       |  1 +
 6 files changed, 55 insertions(+), 51 deletions(-)
 create mode 100644 js/save.js

(limited to 'shader-picker.html')

diff --git a/Gruntfile.js b/Gruntfile.js
index 42d25c3..333b2a4 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -37,6 +37,7 @@ module.exports = function(grunt) {
 					"js/gallery.js",
 					"js/frames.js",
 					"js/render.js",
+					"js/save.js",
 					"js/shader.js",
 					"js/error.highlight.js",
 					"js/help.js",
diff --git a/js/frames.js b/js/frames.js
index 93d4ac3..163e899 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -156,54 +156,3 @@ encoder.on("rendered-url", function(url){
   pause(true)
 })
 
-function get_filename(){
-  var basename = $("#url").val().replace(/^.*\//,"").replace(/\..*$/,"").replace(/[^-_ a-zA-Z0-9]/g,"")
-  var username = user.username
-  var filename = basename + "-" + username + "-" + (+new Date()) + ".gif"
-  return filename.replace(/ /g,"_").replace(/-+/g,"-")
-}
-function save (){
-  if (! lastGif) return;
-  var filename = get_filename()
-  var blob = dataUriToBlob(lastGif)
-  saveAs(blob, filename);
-}
-function saveJSON (data, filename) {
-  var bytes = JSON.stringify(data)
-  var buf = new ArrayBuffer(bytes.length);
-  var arr = new Uint8Array(buf);
-  for (var i = 0; i < bytes.length; i++) {
-    arr[i] = bytes.charCodeAt(i);
-  }
-
-  var blob = new Blob([arr], { type: "text/json" });
-  blob.slice = blob.slice || blob.webkitSlice;
-  
-  saveAs(blob, filename);
-}
-
-function upload(){
-  var filename = get_filename()
-  var username = user.username
-  var blob = dataUriToBlob(lastGif)
-  uploadImage({
-    blob: blob,
-    filename: filename,
-    username: username,
-    success: function(data){
-    
-      // data.url
-      // data.filesize
-      // data.success
-
-      console.log(data);
-      status("uploaded");
-      $("#uploaded-url").show().focus().val(data.url)
-      $("#uploaded-url + br").show()
-    },
-    error: function(data){
-      console.log(data)
-      status("error uploading: " + data.error)
-    }
-  });
-}
diff --git a/js/save.js b/js/save.js
new file mode 100644
index 0000000..f54f7d1
--- /dev/null
+++ b/js/save.js
@@ -0,0 +1,51 @@
+function get_filename(){
+  var basename = $("#url").val().replace(/^.*\//,"").replace(/\..*$/,"").replace(/[^-_ a-zA-Z0-9]/g,"")
+  var username = user.username
+  var filename = basename + "-" + username + "-" + (+new Date()) + ".gif"
+  return filename.replace(/ /g,"_").replace(/-+/g,"-")
+}
+function save (){
+  if (! lastGif) return;
+  var filename = get_filename()
+  var blob = dataUriToBlob(lastGif)
+  saveAs(blob, filename);
+}
+function saveJSON (data, filename) {
+  var bytes = JSON.stringify(data)
+  var buf = new ArrayBuffer(bytes.length);
+  var arr = new Uint8Array(buf);
+  for (var i = 0; i < bytes.length; i++) {
+    arr[i] = bytes.charCodeAt(i);
+  }
+
+  var blob = new Blob([arr], { type: "text/json" });
+  blob.slice = blob.slice || blob.webkitSlice;
+  
+  saveAs(blob, filename);
+}
+
+function upload(){
+  var filename = get_filename()
+  var username = user.username
+  var blob = dataUriToBlob(lastGif)
+  uploadImage({
+    blob: blob,
+    filename: filename,
+    username: username,
+    success: function(data){
+    
+      // data.url
+      // data.filesize
+      // data.success
+
+      console.log(data);
+      status("uploaded");
+      $("#uploaded-url").show().focus().val(data.url)
+      $("#uploaded-url + br").show()
+    },
+    error: function(data){
+      console.log(data)
+      status("error uploading: " + data.error)
+    }
+  });
+}
diff --git a/shader-combo.html b/shader-combo.html
index a7ede26..54f4329 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -183,6 +183,7 @@ a { color: #00f; }
 <script type="text/javascript" src="js/gallery.js"></script>
 <script type="text/javascript" src="js/frames.js"></script>
 <script type="text/javascript" src="js/render.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
 <script type="text/javascript" src="js/shader.js"></script>
 <script type="text/javascript" src="js/error.highlight.js"></script>
 <script type="text/javascript" src="js/help.js"></script>
diff --git a/shader-localstorage.html b/shader-localstorage.html
index 923f1b6..48c5184 100644
--- a/shader-localstorage.html
+++ b/shader-localstorage.html
@@ -125,6 +125,7 @@ a { color: #00f; }
 <script type="text/javascript" src="js/user.js"></script>
 <script type="text/javascript" src="js/render.js"></script>
 <script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript" src="shaders.json"></script>
 <script type="text/javascript">
diff --git a/shader-picker.html b/shader-picker.html
index 8bafc60..87aea23 100644
--- a/shader-picker.html
+++ b/shader-picker.html
@@ -127,6 +127,7 @@ a { color: #00f; }
 <script type="text/javascript" src="js/user.js"></script>
 <script type="text/javascript" src="js/render.js"></script>
 <script type="text/javascript" src="js/shader.js"></script>
+<script type="text/javascript" src="js/save.js"></script>
 <script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript" src="js/help.js"></script>
 <script type="text/javascript" src="shaders.json"></script>
-- 
cgit v1.2.3-70-g09d2