shader booth

author: jules <jules@okfoc.us> 2015-05-24 18:17:56 +0200
committer: jules <jules@okfoc.us> 2015-05-24 18:18:14 +0200
commit: 65d6d1fca34d7bd76b2bd52af33ace3c82fc1028 (patch)
tree: 581ff72d0d982c027481989bb942886557fce0bf /shader-booth.html
parent: 91ef84313ab4e1288411c247bb23e09af64e13f0 (diff)
1 files changed, 233 insertions, 0 deletions
diff --git a/shader-booth.html b/shader-booth.html
new file mode 100644
index 0000000..b16f37d
--- /dev/null
+++ b/shader-booth.html
@@ -0,0 +1,233 @@
+<!doctype html>
+<html>
+<head>
+<title>Shader</title>
+<style type="text/css">
+html,body { margin: 0; padding: 0; width: 100%; height: 100%; }
+#url { width: 450px; }
+#width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; }
+#shader { width: 100%; height: 247px; font-family: fixed; }
+#controls { width: 450px; }
+#frames { width: 435px; 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; }
+.dragging { cursor: -webkit-grabbing !important; }
+.ui-sortable-helper { cursor: -webkit-grabbing !important; }
+#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; }
+div { display: inline-block; padding: 10px;}
+#gallery,#controls,#workspace,#rendered{ float: left; }
+#rendered img { display: block; }
+#render,#save { font-weight: bold; }
+#render { float: right; }
+#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; }
+#gallery { clear: right; width:100%; padding: 0; }
+#gallery-images { display: block; max-height: 210px; overflow-y: auto; }
+#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; }
+#username { width: 40px; }
+a { color: #00f; }
+
+.booth #workspace canvas {
+  position: fixed; top: 0; left: 0;
+  width: 100%; height: 100%;
+  pointer-events: none;
+}
+.booth #controls,
+.booth #gallery,
+.booth #render_buttons {
+  display: none;
+}
+.booth #bottom {
+  display: block;
+  position: fixed;
+  bottom: 0; left: 0; width: 100%;
+}
+.booth #render {
+  float: none;
+}
+</style>
+</head>
+<body class="booth">
+<div id="gallery">
+	<div id="gallery-form">
+		<form id="gallery-search">
+			<input type="text" id="dumpfm-search-query" value="duck bill">
+			<button id="gallery-search">DUMP SEARCH</button>
+		</form>
+		<button id="gallery-random">IM RANDOM</button>
+		<button id="camera">CAMERA</button>
+		<span class="status"></span>
+	</div>
+	<div id="gallery-images"></div>
+</div>
+
+<div id="controls">
+
+	<input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png">
+	<br>
+	<br>
+
+	<textarea id="shader"></textarea>
+	<br>
+	<br>
+
+	frames <input type="text" id="framecount" value="1">
+	interval <input type="text" id="frameinterval" value="0.1s">
+<!-- 
+	<button id="add-frame">+add frame</button>
+	<button id="remove-all-frames">clear</button>
+	<button id="render" disabled>render</button>
+ -->
+	<br>
+	reorder:
+	<button id="weave-frames">weave</button>
+	<button id="shuffle-frames">shuffle</button>
+	<button id="reverse-frames">reverse</button>
+	<button id="sort-frames">sort</button>
+	
+	<div id="frames"></div>
+	<br>
+	<br>
+
+	gif delay <input type="text" id="framedelay" value="0.06s">
+	background <input type="text" id="background" value="#fff">
+	your name here &rarr; <input type="text" id="username" value="">
+	<br>
+	<br>
+	<button id="show-commands">help</button>
+	&nbsp;
+	<button id="add-shader">+</button>
+	<button id="remove-shader">&times;</button>
+	&nbsp;
+<!-- 
+	<span id="shaders"></span>
+ -->
+	<br>
+	<br>
+	<a href="http://asdf.us/im/gallery/?tag=shader" target="_blank">Photoblaster Gallery</a>
+</div>
+
+<div id="workspace"></div>
+
+<div id="rendered">
+  <div id="render_buttons">
+<!-- 
+    <button id="reset">reset</button>
+ -->
+    <button id="pause">pause</button>
+    <button id="step-forward">&gt;&gt;</button>
+    <span class="status"></span>
+    <button id="save" disabled>save</button>
+  </div>
+<!-- 
+	<button id="upload" disabled>upload</button>
+	<br>
+	<input type="text" id="uploaded-url">
+ -->
+</div>
+
+<div id="bottom">
+  <span id="shaders"></span>
+  ...
+	<button id="add-frame">+add frame</button>
+	<button id="remove-all-frames">clear frames</button>
+  <button id="reset">reset</button>
+  ...
+	<button id="render" disabled>render</button>
+	<button id="upload" disabled>upload</button>
+  ...
+	<input type="text" id="uploaded-url">
+  <a href="http://asdf.us/im/gallery/?tag=shader"><button>gallery :)</button></a>
+</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>
+<script type="text/javascript" src="js/vendor/gif-encode/client.js"></script>
+<script type="text/javascript" src="js/vendor/gif.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/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/canvasquery.dither.js"></script>
+<script type="text/javascript" src="js/api/localstorage.js"></script>
+<script type="text/javascript" src="js/error.highlight.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/camera.js"></script>
+<script type="text/javascript" src="js/gallery.js"></script>
+<script type="text/javascript" src="js/color.js"></script>
+<script type="text/javascript" src="js/frames.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/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>
+
+<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, h
+var lastGif
+
+$(init)
+
+var mousex, mousey
+
+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
+	})
+
+	$("#background").change(function(){
+		document.body.style.backgroundColor = $("#background").string()
+	})
+	
+	frame_editor.init()
+	help.init()
+	load()
+
+	gallery.init(choose)
+
+	user.init()
+	if (user.username.length) {
+		console.log("signed in as", user.username)
+	}
+
+	local_shaders.init()
+	local_shaders.loadLastAccessed()
+
+	document.getElementById('shader').addEventListener('input', shader_build);
+	shader_build()
+
+	requestAnimationFrame(animate)
+	
+	$("#camera").trigger("click")
+}
+
+</script>
+</html>
+
author	jules <jules@okfoc.us>	2015-05-24 18:17:56 +0200
committer	jules <jules@okfoc.us>	2015-05-24 18:18:14 +0200
commit	65d6d1fca34d7bd76b2bd52af33ace3c82fc1028 (patch)
tree	581ff72d0d982c027481989bb942886557fce0bf /shader-booth.html
parent	91ef84313ab4e1288411c247bb23e09af64e13f0 (diff)