diff options
Diffstat (limited to 'shader-api.html')
| -rw-r--r-- | shader-api.html | 146 |
1 files changed, 62 insertions, 84 deletions
diff --git a/shader-api.html b/shader-api.html index 9020136..dc96762 100644 --- a/shader-api.html +++ b/shader-api.html @@ -2,39 +2,48 @@ <html> <head> <style type="text/css"> -#url { width: 300px; } +#url { width: 250px; } #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-api,#gallery { clear: right; width:100%; padding: 0; font-size: 12px; } +#shader-gallery,#gallery-images { display: block; min-height: 152px; max-height: 210px; overflow-y: auto; width: 100%; padding: 0; } +#shader-gallery img,#shader-gallery canvas,#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; clear: right; } +.shader { width: 100px; } +.shader span { display: block } +#username { width: 55px; } +#shader-name { width: 75px; } #shader-id { width: 40px; } +a { color: #00f; } +#help { float: right; } +.dragging { cursor: -webkit-grabbing !important; } +#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; } + </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 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"> + <button id="help">help</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> | @@ -45,6 +54,8 @@ a { color: #00f; } <select id="pick-user"> <option>fetching users..</option> </select> + <input type="checkbox" id="persist-image" checked> + <label for="persist-image">load image</label> <div id="shader-gallery"> </div> @@ -52,105 +63,72 @@ a { color: #00f; } <div id="controls"> <input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png"> - <br> - <br> + <input type="text" id="username" placeholder="username"> + <input type="text" id="shader-name" placeholder="shader name"> + <br> + <br> - <textarea id="shader"></textarea> - <br> - <br> + <textarea id="shader"></textarea> + <br> + <button id="save-shader"><b>save shader</b></button> + <button id="pause">pause</button> + <button id="reset">reset</button> + <br> </div> <div id="workspace"></div> +<div id="instructions"><iframe src="instructions.html"></iframe><button class="close">×</button></div> </body> +<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/vendor/FileSaver/FileSaver.js"></script> +<script type="text/javascript" src="js/vendor/dataUriToBlob.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/user.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/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/html" id="shader-gallery-template"> -<img src="{thumbnail_url}"> -{username} +<span><img src="{thumbnail_url}"></span> +{name} - {username} </script> <script type="text/javascript"> var cc = cq(0,0).appendTo("#workspace") var w, h +var firsttime = true +var shader_gallery_template = $("#shader-gallery-template").html() + $(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") + $("#url").change(load) + $("#reset").click(reset) + $("#pause").click(pause) - 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 ) - } - }) + user.init() + help.init() + shader_gallery.init() - $(document).on("change", "#pick-user", function(){ - var name = $(this).val() - ShaderAPI.username(name, load_shaders) - }) - $(document).on("click", ".shader", function(){ - run( $(this).data("shader") ) - }) + document.getElementById('shader').addEventListener('input', shader_build); - load() + requestAnimationFrame(animate) +} - 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) - $("#shader-id").val(shader_object.id) - load() - shader_build() -} </script> </html> |