diff options
| -rw-r--r-- | js/gallery.js | 1 | ||||
| -rw-r--r-- | shader-api.html | 1 | ||||
| -rw-r--r-- | shader-combo.html | 57 |
3 files changed, 46 insertions, 13 deletions
diff --git a/js/gallery.js b/js/gallery.js index a9430fc..b9acfc0 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -46,6 +46,7 @@ gallery.image = function(im){ $(thumb.canvas).show() }) $(img).click(gallery.choose); + $("#persist-image").attr("checked", false) } try { img.src = im.url; } catch(e){ return; } diff --git a/shader-api.html b/shader-api.html index b860093..dc96762 100644 --- a/shader-api.html +++ b/shader-api.html @@ -79,6 +79,7 @@ a { color: #00f; } <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> diff --git a/shader-combo.html b/shader-combo.html index aa6edd2..6d402da 100644 --- a/shader-combo.html +++ b/shader-combo.html @@ -3,28 +3,50 @@ <head> <style type="text/css"> #url { width: 250px; } -#width,#height,#frames,#delay {width: 30px; } +#width,#height,#framecount,#framedelay,#frameinterval,#background { width: 30px; } +#username { width: 55px; } +#shader-name { width: 75px; } +#shader-id { width: 40px; } #shader { width: 400px; height: 247px; font-family: fixed; } +#uploaded-url { display: none; width: 300px; } +a { color: #00f; } + div { float: left; padding: 10px;} form { display: inline-block; } + #header { clear: right; width:100%; padding: 0; font-size: 12px; } #shader-gallery,#gallery-images { display: block; height: 152px; 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; } +.ui-sortable-helper { 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; } + +#frames { width: 435px; 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 } +#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: 1px 3px 2px 4px; outline: 0 !important; } +.active { background: black; color: white; border-width: 1px; padding: 1px 4px 2px 4px; outline: 0 !important; } + .hidden { display: none; } -.form { display: none; } +.form { display: none; border-left: 1px solid #ddd; padding-left: 5px; margin-left: 2px; } .bold { font-weight: bold; } +.close,.remove { cursor: pointer; } + +#rendered { display: none; } + +.status { font-size: 12px; } +#header .status { float: right; margin-top: 5px; margin-right: 5px;} +.toggle-off { float: right; } </style> </head> <body> @@ -43,8 +65,9 @@ a { color: #00f; } | <button id="toggle-shaders">browse shaders</button> <button id="toggle-images">browse images</button> - <button id="toggle-off">hide</button> - | + <button class="toggle-off">hide</button> + <span class="status"></span> + <span id="shader-api-form" class="form"> <input type="checkbox" id="persist-image" checked> <label for="persist-image">load image</label> @@ -53,16 +76,14 @@ a { color: #00f; } <select id="pick-user"> <option>fetching users..</option> </select> - <span class="status"></span> <div id="shader-gallery"></div> </span> <span id="gallery-form" class="form"> + <button id="gallery-random">IM RANDOM</button> <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 id="gallery-images"></div> </span> </div> @@ -79,11 +100,21 @@ a { color: #00f; } <button id="save-shader"><b>save shader</b></button> <button id="pause">pause</button> <button id="reset">reset</button> + <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> + </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/gif.js"></script> @@ -148,14 +179,14 @@ function init(){ $("#shader-api-form").show() $(".bold").removeClass("bold") $(this).addClass("bold") - }).trigger("click") + }) // .trigger("click") $("#toggle-images").click(function(){ $("#header .form").hide() $("#gallery-form").show() $(".bold").removeClass("bold") $(this).addClass("bold") }) - $("#toggle-off").click(function(){ + $(".toggle-off").click(function(){ $("#header .form").hide() $(".bold").removeClass("bold") }) |