diff options
Diffstat (limited to 'shader-combo.html')
| -rw-r--r-- | shader-combo.html | 294 |
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"> shaderblaster </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">→</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">>></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">×</button></div> +<div class="iframe" id="commands"><iframe src="commands.html"></iframe><button class="close">×</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> |