diff options
| -rw-r--r-- | shader-gif.html | 29 |
1 files changed, 16 insertions, 13 deletions
diff --git a/shader-gif.html b/shader-gif.html index c705770..1e5fc3d 100644 --- a/shader-gif.html +++ b/shader-gif.html @@ -13,11 +13,11 @@ .ui-sortable-helper { cursor: -webkit-grabbing !important; } #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: 2px 7px; } +.paused { background: black; color: white; border-width: 1px; padding: 1px 3px 2px 4px; } .paused { outline: 0 !important; } div { display: inline-block; padding: 10px;} #controls,#workspace,#rendered{ float: left; } -#rendered { display: none; } +#rendered { min-width: 500px; } #render,#save { font-weight: bold; } #render { float: right; } #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; } @@ -31,12 +31,6 @@ div { display: inline-block; padding: 10px;} <div id="controls"> - frame delay <input type="text" id="framedelay" value="0.1s"> - background <input type="text" id="background" value="#fff"> - <button id="reset">reset</button> - <button id="pause">pause</button> - <button id="step-forward">>></button> - <br> <input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png"> <br> <br> @@ -56,18 +50,25 @@ div { display: inline-block; padding: 10px;} <br> <br> + gif delay <input type="text" id="framedelay" value="0.1s"> + background <input type="text" id="background" value="#fff"> + <br> + <br> <button id="help">help</button> <button id="demo">demo</button> <button id="dither-demo">dither</button> <br> - <span id="status"></span> - <button id="save" disabled>save</button> - <br> </div> <div id="workspace"></div> <div id="rendered"> + <button id="reset">reset</button> + <button id="pause">pause</button> + <button id="step-forward">>></button> + <span id="status"></span> + <button id="save" disabled>save</button> + <br> </div> <div id="instructions"><iframe src="instructions.html"></iframe><button class="close">x</button></div> @@ -153,11 +154,11 @@ function load(){ function reset(){ start_t = old_t pause_t = 0 - $("#rendered").hide() + $("#rendered img").remove() draw(0) } function pause(state){ - $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused) + $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause") } function step_forward(){ var step = $("#framedelay").float() * 1000 || 100 @@ -326,6 +327,7 @@ function render (){ status(e) throw e } + $("#render").html("rendering") } function status(s){ @@ -353,6 +355,7 @@ encoder.on("rendered-url", function(url){ $("#rendered").append(image) $("#save,#rendered").show() $("#pause,#render,#add-frame,#save").enable() + $("#render").html("render") rendering = false pause(true) }) |