diff options
Diffstat (limited to 'shader-api.html')
| -rw-r--r-- | shader-api.html | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/shader-api.html b/shader-api.html new file mode 100644 index 0000000..284d1a4 --- /dev/null +++ b/shader-api.html @@ -0,0 +1,155 @@ +<!doctype html> +<html> +<head> +<style type="text/css"> +#url { width: 300px; } +#width,#height,#frames,#delay {width: 30px; } +#shader { width: 400px; height: 247px; font-family: fixed; } +div { float: left; padding: 10px;} +form { display: inline-block; } +#shader-api,#gallery { clear: right; width:100%; padding: 0; } +#shader-gallery,#gallery-images { display: block; max-height: 210px; overflow-y: auto; width: 100%; } +#shader-gallery img,#shader-gallery canvas,#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; } +.shader { + width: 100px; +} +#username { width: 40px; } +a { color: #00f; } +#shader-id { width: 40px; } +</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="shader-api"> + <input type="text" id="shader-id"><button id="fetch-info">info</button> + <button id="fetch-all">all</button> + <button id="fetch-originals">originals</button> + <button id="fetch-latest">latest</button> + <button id="fetch-next-page">next page</button> + <button id="fetch-history">history</button> + <select id="pick-user"> + <option>fetching users..</option> + </select> + + <div id="shader-gallery"> + </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> + +</div> + +<div id="workspace"></div> + +</body> +<script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script> +<script type="text/javascript" src="js/vendor/canvasquery.js"></script> +<script type="text/javascript" src="js/vendor/gif.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/image.js"></script> +<script type="text/javascript" src="js/gallery.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/api/get.js"></script> +<script type="text/javascript" src="js/api/set.js"></script> +<script type="text/html" id="shader-gallery-template"> +<img src="{thumbnail_url}"> +{username} +</script> +<script type="text/javascript"> + +var cc = cq(0,0).appendTo("#workspace") +var w, h + +$(init) + +function init(){ + $("#url").change(load) +// run('#first') + +// $("#shader-id") +// $("#fetch-info") + $("#fetch-all").click(function(){ + ShaderAPI.all(load_shaders) + }) + $("#fetch-latest").click(function(){ + ShaderAPI.latest(load_shaders) + }).trigger("click") +// $("#fetch-next-page") +// $("#fetch-history") + + function load_shaders(err, shaders){ + var $el = $("#shader-gallery").empty() + var template = $("#shader-gallery-template").html() + + for (var i in shaders) { + var $shader = $("<div>").addClass("shader") + $shader.data("shader", shaders[i]) + var html = template + for (var field in shaders[i]) { + html = html.replace("{" + field + "}", shaders[i][field]) + } + $shader.html(html) + + $el.append( $shader ) + } + } + + ShaderAPI.list_users(function(err, users){ + var $el = $("#pick-user").empty() + for (var i in users) { + var $option = $("<option>") + var username = users[i].username + $option.val(username).html(username) + $el.append( $option ) + } + }) + + $(document).on("change", "#pick-user", function(){ + var name = $(this).val() + ShaderAPI.username(name, load_shaders) + }) + $(document).on("click", ".shader", function(){ + run( $(this).data("shader") ) + }) + + load() + + document.getElementById('shader').addEventListener('input', shader_build); + shader_build() + + requestAnimationFrame(animate) +} +function run(shader_object){ + console.log(shader_object) + $("#url").val( shader_object.image_url ) + $("#shader").html(shader_object.script) + + load() + shader_build() +} + +</script> +</html> |