Merge branch 'master' of lmno:dither

author: Jules Laplace <jules@okfoc.us> 2014-11-22 23:19:36 -0500
committer: Jules Laplace <jules@okfoc.us> 2014-11-22 23:19:36 -0500
commit: 070b5e6d9d3c7e23c06f0ae0b75026923529c24d (patch)
tree: 89c430dd17ca54ff60f885ecd99cf6cfa0f0b7ff /shader-combo.html
parent: 04537ed34d443d0610b77420d1dbef64bc05fbfa (diff)
parent: 1631cdf643283fc71bc9d70b5dcbce03ab9c2386 (diff)
1 files changed, 294 insertions, 0 deletions
diff --git a/shader-combo.html b/shader-combo.html
new file mode 100644
index 0000000..54f4329
--- /dev/null
+++ b/shader-combo.html
@@ -0,0 +1,294 @@
+<!doctype html>
+<html>
+<head>
+<title>Shaderblaster</title>
+<style type="text/css">
+body { background: #fbfbfb; 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; }
+#username { width: 55px; }
+#shader-name { width: 75px; }
+#shader-id { width: 40px; }
+#shader { width: 400px; height: 247px; font-family: fixed; }
+#uploaded-url { display: none; width: 400px; }
+#uploaded-url + br { display: none; }
+
+#header { width:calc(100% - 10px); padding: 0; font-size: 12px; position: fixed; bottom:0; left: 0; padding: 5px; background: rgba(255,255,255,0.9); box-shadow: 0 0 10px #888; z-index: 2;}
+.gallery { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; border-bottom: 1px solid #ccc; margin-top: 10px; }
+.gallery::-webkit-scrollbar { -webkit-appearance: none; width: 7px; }
+.gallery::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); }
+#shader-gallery img,#shader-gallery canvas,#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 0 5px; cursor: pointer; clear: right; }
+.shader { width: 100px; padding-top: 0; padding-bottom: 20px;}
+.shader span { display: block }
+
+.dragging { cursor: -webkit-grabbing !important; }
+.ui-sortable-helper { cursor: -webkit-grabbing !important; }
+
+#commands { top:40px;right:20px; width:190px;height:calc(95% - 230px); }
+#tutorial { top:40px;right:30px; width:290px;height:360px; 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;}
+.iframe.dragging iframe { pointer-events: none; }
+.iframe .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
+
+#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; }
+
+.paused { background: black; color: white; border-width: 1px; padding: 1px 3px 2px 4px; outline: 0 !important; }
+.active { background: black; color: white; border-width: 1px; padding: 1px 4px 2px 4px; outline: 0 !important; }
+
+.hidden { display: none; }
+.form { display: none; border-left: 1px solid #ddd; padding-left: 5px; margin-left: 2px; }
+.bold { font-weight: bold; }
+.close,.remove { cursor: pointer; }
+
+.status { font-size: 12px; }
+
+#render,#save,#upload,#save-shader { font-weight: bold; }
+#save[disabled],#upload[disabled] { font-weight: normal; }
+
+#logo { display: inline; position: relative; top: 2px; font-size: 18px; font-family: georgia; font-weight: bold; font-style: italic; margin: 0px; color: #243; }
+#corner { position: fixed; top: -5px; right: 0px; }
+.right { position: absolute; right: 0; }
+#links { margin-right: 20px; }
+
+</style>
+</head>
+<body>
+
+<div id="corner">
+	<button id="show-tutorial">help</button>
+	<button id="show-commands">commands</button>
+	<select id="examples">
+		<option>examples</option>
+	</select>
+</div>
+
+<div id="header">
+	<span class="right">
+	<h1 id="logo">&nbsp;shaderblaster&nbsp;&nbsp;</h1>
+	<button id="toggle-shaders">shaders</button>
+	<button id="toggle-images">images</button>
+  <select id="links">
+		<option value="http://asdf.us/im/">Photoblaster</option>
+		<option value="http://asdf.us/im/gallery/">Photoblaster Gallery</option>
+		<option value="http://asdf.us/im/gallery/?tag=shader">Shader Gallery</option>
+		<option value="http://asdf.us/imgradient/">Gradient Generator</option>
+		<option value="http://asdf.us/imgrid/">Grid Generator</option>
+		<option value="http://asdf.us/imbreak/">Fotofucker</option>
+		<option value="http://asdf.us/dither/">Dither</option>
+    <option value="">--------------</option>
+    <option selected value="default">links</option>
+  </select>
+	</span>
+	<button class="toggle-off">x</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>
+	|
+	<button id="fetch-originals" disabled>originals</button>
+	<button id="fetch-all">all</button>
+-->
+	<span class="status"></span>
+
+	<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>
+		<div id="shader-gallery" class="gallery"></div>
+	</span>
+	<span id="gallery-form" class="form">
+		<button id="gallery-random">asdf random</button>
+		<form id="gallery-search">
+			<input type="text" id="dumpfm-search-query" value="webcam">
+			<button id="gallery-search">search dump</button>
+		</form>
+		<div id="gallery-images" class="gallery"></div>
+	</span>
+</div>
+
+<div id="controls">
+	<input type="text" id="url" placeholder="paste a url here">
+	<input type="text" id="username" placeholder="username">
+	<input type="text" id="shader-name" placeholder="shader name">
+	<br>
+	<br>
+
+	<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-controls">
+		frames <input type="text" id="framecount" value="20">
+		rate <input type="text" id="framedelay" value="0.06s">
+		bg <input type="text" id="background" value="#fff">
+		<button id="add-frame">+add</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>-->
+		<br>
+		<span id="frames"></span>
+	</span>
+</div>
+
+<div id="workspace"></div>
+
+<div class="iframe" id="tutorial"><iframe src="tutorial.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>
+<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>
+<script type="text/javascript" src="js/util.js"></script>
+<script type="text/javascript" src="js/color.js"></script>
+<script type="text/javascript" src="js/asdf.js"></script>
+<script type="text/javascript" src="js/image.js"></script>
+<script type="text/javascript" src="js/user.js"></script>
+<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>
+<script type="text/javascript" src="js/api/gallery.js"></script>
+<script type="text/javascript" src="js/api/get.js"></script>
+<script type="text/javascript" src="js/api/set.js"></script>
+<script type="text/javascript" src="shaders.json"></script>
+
+<script type="text/html" id="shader-gallery-template">
+<span><img src="{thumbnail_url}"></span>
+{name} - {username}
+</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")
+var w = 400, h = 400
+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()
+		$("#shader-api-form").show()
+		$(".bold").removeClass("bold")
+		$(this).addClass("bold")
+	}).trigger("click")
+	$("#toggle-images").click(function(){
+		$("#header .form").hide()
+		$("#gallery-form").show()
+		$(".bold").removeClass("bold")
+		$(this).addClass("bold")
+		if (! asdf.fetched) {
+			$("#gallery-random").trigger("click")
+		}
+	})
+	$(".toggle-off").click(function(){
+		$("#header .form").hide()
+		$(".bold").removeClass("bold")
+	})
+	$("#width").change(function(){
+		w = abs(parseInt(this.value,10)) || 1
+		cc.canvas.width = w
+		cc.canvas.height = h
+	})
+	$("#height").change(function(){
+		h = abs(parseInt(this.value,10)) || 1
+		cc.canvas.width = w
+		cc.canvas.height = h
+	})
+	$("#reorder-frames").change(function(){
+		var order = $(this).val()
+		console.log(order)
+		switch (order) {
+			case "weave-frames": weave_frames(); break;
+			case "shuffle-frames": shuffle_frames(); break;
+			case "reverse-frames": reverse_frames(); break;
+			case "sort-frames": sort_frames(); break;
+			default: return;
+		}
+		render()
+	})
+
+  $("#links").change(function(e){
+    var url = $(this).val()
+    if (url.match("http://")) {
+      var win = window.open(url, '_blank');
+      if (win == null || typeof(win) == "undefined" || (win == null && win.outerWidth == 0) || (win != null && win.outerHeight == 0) || win.test == "undefined"){
+        window.location.href = url;
+        $(this).val("default")
+      }
+    }
+  })
+
+	load()
+	help.init()
+	user.init()
+	frame_editor.init()
+	shader_gallery.init()
+	gallery.init(choose)
+
+	document.getElementById('shader').addEventListener('input', shader_build);
+
+	requestAnimationFrame(animate)
+}
+</script>
+</body>
+</html>
author	Jules Laplace <jules@okfoc.us>	2014-11-22 23:19:36 -0500
committer	Jules Laplace <jules@okfoc.us>	2014-11-22 23:19:36 -0500
commit	070b5e6d9d3c7e23c06f0ae0b75026923529c24d (patch)
tree	89c430dd17ca54ff60f885ecd99cf6cfa0f0b7ff /shader-combo.html
parent	04537ed34d443d0610b77420d1dbef64bc05fbfa (diff)
parent	1631cdf643283fc71bc9d70b5dcbce03ab9c2386 (diff)