diff options
Diffstat (limited to 'shader-localstorage.html')
| -rw-r--r-- | shader-localstorage.html | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/shader-localstorage.html b/shader-localstorage.html new file mode 100644 index 0000000..cc4bd18 --- /dev/null +++ b/shader-localstorage.html @@ -0,0 +1,211 @@ +<!doctype html> +<html> +<head> +<title>Shader</title> +<style type="text/css"> +html,body { margin: 0; padding: 0; } +#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; } +#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; } +.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; } +</style> +</head> +<body> +<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> + <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 → <input type="text" id="username" value=""> + <br> + <br> + <button id="help">help</button> + + <button id="add-shader">+</button> + <button id="remove-shader">×</button> + + <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"> + <button id="reset">reset</button> + <button id="pause">pause</button> + <button id="step-forward">>></button> + <span class="status"></span> + <button id="save" disabled>save</button> + <button id="upload" disabled>upload</button> + <br> + <input type="text" id="uploaded-url"> +</div> + +<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">×</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/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/asdf.js"></script> +<script type="text/javascript" src="js/image.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/util.js"></script> +<script type="text/javascript" src="shaders.json"></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 + }) + + $("#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") + }) + $("#background").change(function(){ + document.body.style.backgroundColor = $("#background").string() + }) + + $("#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) + $("#help,#instructions .close").click(function(){ $("#instructions").toggle() }) + $("#instructions").draggable({ + start: drag_start, + stop: drag_stop + }) + $("#instructions").disableSelection(); + + load() + $(window).on("scroll DOMMouseScroll mousewheel", function(){ scrolling = true }) + + gallery.choose = choose + gallery.init() + + user.init() + if (user.username.length) { + console.log("signed in as", user.username) + } + + user.shaders.init() + user.shaders.loadLastAccessed() + + document.getElementById('shader').addEventListener('input', shader_build); + shader_build() + + 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"> +<button class="remove">x</button> +<span class="frame"></span> +</script> +</html> + |