diff options
Diffstat (limited to 'shader-combo.html')
| -rw-r--r-- | shader-combo.html | 55 |
1 files changed, 37 insertions, 18 deletions
diff --git a/shader-combo.html b/shader-combo.html index 65b81e9..6b721a1 100644 --- a/shader-combo.html +++ b/shader-combo.html @@ -31,6 +31,7 @@ a { color: #00f; } #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; } +#frame-controls { display: none; } #frames { display: block; width: 404px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; } #frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; } #frames canvas { display: block } @@ -114,26 +115,30 @@ a { color: #00f; } <!--<button id="step-forward">>></button>--> <br> <br> - - frames <input type="text" id="framecount" value="10"> - <button id="add-frame">+add frames</button> - <select id="reorder-frames"> - <option value="">reorder</option> - <option value="weave-frames">weave</button> - <option value="shuffle-frames">shuffle</button> - <option value="reverse-frames">reverse</button> - <option value="sort-frames">sort</button> - </select> - <!--<button id="remove-all-frames">clear</button>--> - <br> - - <span id="frames"></span> + <span id="frame-hidden-controls"> + <button id="show-frame-controls">show frame editor</button> + </span> + <span id="frame-controls"> + <button id="hide-frame-controls">x</button> + frames <input type="text" id="framecount" value="10"> + rate <input type="text" id="framedelay" value="0.06s"> + bg <input type="text" id="background" value="#fff"> + <button id="add-frame">+add</button> + <select id="reorder-frames"> + <option value="">reorder</option> + <option value="weave-frames">weave</button> + <option value="shuffle-frames">shuffle</button> + <option value="reverse-frames">reverse</button> + <option value="sort-frames">sort</button> + </select> + <!--<button id="remove-all-frames">clear</button>--> + <br> + <span id="frames"></span> + </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"> </div> <div id="workspace"></div> @@ -224,11 +229,25 @@ function init(){ cc.canvas.width = w cc.canvas.height = h }) + $("#show-frame-controls").click(function(){ + $("#frame-controls").show() + $("#frame-hidden-controls").hide() + }) + $("#hide-frame-controls").click(function(){ + $("#frame-controls").hide() + $("#frame-hidden-controls").show() + }) $("#reorder-frames").change(function(){ var order = $(this).val() - if (order) { - + console.log(order) + switch (order) { + case "weave-frames": weave_frames(); break; + case "shuffle-frames": shuffle_frames(); break; + case "reverse-frames": reverse_frames(); break; + case "sort-frames": sort_frames(); break; + default: return; } + render() }) load() |