diff options
Diffstat (limited to 'shader-api.html')
| -rw-r--r-- | shader-api.html | 59 |
1 files changed, 33 insertions, 26 deletions
diff --git a/shader-api.html b/shader-api.html index 8a4bc86..ffe234b 100644 --- a/shader-api.html +++ b/shader-api.html @@ -2,7 +2,7 @@ <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;} @@ -11,8 +11,8 @@ form { display: inline-block; } #shader-gallery,#gallery-images { display: block; min-height: 152px; 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; } -#shader-name { width: 40px; } +#username { width: 55px; } +#shader-name { width: 75px; } a { color: #00f; } #shader-id { width: 40px; } </style> @@ -58,6 +58,9 @@ a { color: #00f; } <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> @@ -71,6 +74,7 @@ a { color: #00f; } <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> @@ -90,6 +94,8 @@ $(init) function init(){ $("#url").change(load) + $("#reset").click(reset) + $("#pause").click(pause) // run('#first') // $("#shader-id") @@ -103,26 +109,7 @@ function init(){ // $("#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 ) - } - if (firsttime) { - firsttime = false - run(shaders[0]) - } - } + $("#shader-save").click(save_shader) ShaderAPI.list_users(function(err, users){ var $el = $("#pick-user").empty() @@ -142,18 +129,38 @@ function init(){ run( $(this).data("shader") ) }) - // load() - + user.init() + document.getElementById('shader').addEventListener('input', shader_build); - // shader_build() requestAnimationFrame(animate) } +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 ) + } + if (firsttime) { + firsttime = false + run(shaders[0]) + } +} 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) + $("#shader-name").val( shader_object.name || "") load() shader_build() } |