diff options
| author | jules <jules@okfoc.us> | 2014-01-26 04:22:07 -0500 |
|---|---|---|
| committer | jules <jules@okfoc.us> | 2014-01-26 04:22:07 -0500 |
| commit | beb6a880100835aa44b8508a03b3b0b63562055a (patch) | |
| tree | ea89266c596eabf540b12aaba59014cd3f0d0ca8 | |
| parent | 05369197994fd75752ea6d0bb52c2b40ae72c6d9 (diff) | |
nicer loading logic
| -rw-r--r-- | js/frames.js | 11 | ||||
| -rw-r--r-- | js/image.js | 1 | ||||
| -rw-r--r-- | js/render.js | 8 | ||||
| -rw-r--r-- | shader-combo.html | 32 |
4 files changed, 31 insertions, 21 deletions
diff --git a/js/frames.js b/js/frames.js index 1d08807..887b497 100644 --- a/js/frames.js +++ b/js/frames.js @@ -54,7 +54,6 @@ function add_single_frame(){ frame.canvas.style.display = "none" var thumb = cc.clone().resize(frame_thumb_size,frame_thumb_size).appendTo($el.find(".frame")[0]) $("#frames").append($el) - $("#render").enable() } function add_frames(frame_count){ rendering = true @@ -71,9 +70,6 @@ function add_frames(frame_count){ } function remove_frame(){ $(this).closest("div").remove() - if ($("#frames div").length == 0) { - $("#render").disable() - } } function remove_all_frames(){ $("#frames").empty() @@ -102,6 +98,11 @@ function sort_frames(){ function render (){ if (rendering) return rendering = true + + if ($("#frames canvas.fullsize").length == 0) { + add_frame() + } + encoder.reset() var delay = $("#framedelay").float() * 1000 || 100 $("#frames canvas.fullsize").each(function(){ @@ -149,7 +150,7 @@ encoder.on("rendered-url", function(url){ $("#uploaded-url").hide().val("") $("#save,#upload,#rendered").show() $("#pause,#render,#add-frame,#save,#upload").enable() - $("#render").html("render") + $("#render").html("render gif") rendering = false pause(true) }) diff --git a/js/image.js b/js/image.js index 4de7fd9..aabab89 100644 --- a/js/image.js +++ b/js/image.js @@ -2,6 +2,7 @@ var gif, img function loadImage(imageURL, callback) { var imageURL = proxify( imageURL ); + window.imageURL = imageURL window.gif = window.img = null diff --git a/js/render.js b/js/render.js index 6ad7560..cfc2d81 100644 --- a/js/render.js +++ b/js/render.js @@ -12,13 +12,17 @@ function choose (){ } function load(){ - var imageURL = $("#url").val() + var newImageURL = $("#url").val() loading = true - loadImage(imageURL, ready) + if (newImageURL != imageURL) { + loadImage(newImageURL, ready) + status("loading") + } } function ready(){ loading = false + status("") if (window.gif) { frame = gif.frames[0] actual_w = w = cc.canvas.width = frame.ctx.canvas.width diff --git a/shader-combo.html b/shader-combo.html index 3c28b54..f51037b 100644 --- a/shader-combo.html +++ b/shader-combo.html @@ -2,7 +2,7 @@ <html> <head> <style type="text/css"> -body { background: #f8f8f8; } +body { background: #f8f8f8; font-size: 14px } #url { width: 250px; } #width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; text-align: right; } #background { text-align: left; } @@ -47,8 +47,10 @@ form { display: inline-block; } #rendered { display: none; } .status { font-size: 12px; } -#header .status { float: right; margin-top: 5px; margin-right: 5px;} .toggle-off { float: right; } + +#render,#save,#upload,#save-shader { font-weight: bold; } +#save[disabled],#upload[disabled] { font-weight: normal; } </style> </head> <body> @@ -99,23 +101,20 @@ form { display: inline-block; } <textarea id="shader"></textarea> <br> - <button id="save-shader"><b>save shader</b></button> - <button id="pause">pause</button> + <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> + <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> - <span id="rendered"> - <button id="save" disabled>save image</button> - <button id="upload" disabled>upload</button> - <br> - <input type="text" id="uploaded-url"> - </span> - <br> - - frames <input type="text" id="framecount" value="1"> + <br> + + frames <input type="text" id="framecount" value="10"> <button id="add-frame">+add frame</button> <select id="reorder-frames"> <option value="">reorder</option> @@ -125,15 +124,20 @@ form { display: inline-block; } <option value="sort-frames">sort</button> </select> <button id="remove-all-frames">clear</button> - <button id="render" disabled>render</button> <br> <span id="frames"></span> <br> <br> + <button id="pause">pause</button> gif delay <input type="text" id="framedelay" value="0.06s"> background <input type="text" id="background" value="#fff"> + + <input type="text" id="uploaded-url"> + <span id="rendered"> + </span> + <br> </div> <div id="workspace"></div> |