From 9433b20670a1eada77e1a4372a8f8ccad6f499c3 Mon Sep 17 00:00:00 2001 From: jules Date: Sat, 25 Jan 2014 23:24:36 -0500 Subject: split out help and whatever else --- js/gallery.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'js/gallery.js') diff --git a/js/gallery.js b/js/gallery.js index 16ecdd8..d114ec6 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -3,7 +3,10 @@ var gallery = {} -gallery.init = function(){ +gallery.init = function(choose){ + if (choose) { + galler.choose = choose; + } gallery.bind() } @@ -52,3 +55,10 @@ gallery.image = function(im){ gallery.click = function(){ gallery.choose() } + +// template for choose function.. bound to an image object +gallery.choose = function(){ + var img = this + var imageURL = this.src +} + -- cgit v1.2.3-70-g09d2 From e7b0213ebf2621b71fcaa04e7ad80614853e9551 Mon Sep 17 00:00:00 2001 From: jules Date: Sun, 26 Jan 2014 00:11:32 -0500 Subject: toggle gallery --- dither-picker.html | 4 +-- js/gallery.js | 2 +- js/render.js | 2 +- shader-combo.html | 80 +++++++++++++++++++++++++++++++++++------------------- shader-gif.html | 4 +-- 5 files changed, 58 insertions(+), 34 deletions(-) (limited to 'js/gallery.js') diff --git a/dither-picker.html b/dither-picker.html index 5e9bff9..fe210ef 100644 --- a/dither-picker.html +++ b/dither-picker.html @@ -16,7 +16,7 @@ - +

@@ -123,7 +123,7 @@ ui.dither = function (frame){ return cc } -function status(s){ $("#status").html(s); console.log(s) } +function status(s){ $(".status").html(s); console.log(s) } $(ui.init) diff --git a/js/gallery.js b/js/gallery.js index d114ec6..a9430fc 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -5,7 +5,7 @@ var gallery = {} gallery.init = function(choose){ if (choose) { - galler.choose = choose; + gallery.choose = choose; } gallery.bind() } diff --git a/js/render.js b/js/render.js index fdb0125..4a9eeef 100644 --- a/js/render.js +++ b/js/render.js @@ -103,4 +103,4 @@ function draw(t) { shade(frame, t) } -function status(s){ $("#status").html(s); console.log(s) } +function status(s){ $(".status").html(s); console.log(s) } diff --git a/shader-combo.html b/shader-combo.html index 3c2eac0..92cb6e1 100644 --- a/shader-combo.html +++ b/shader-combo.html @@ -7,8 +7,8 @@ #shader { width: 400px; height: 247px; font-family: fixed; } div { float: left; padding: 10px;} form { display: inline-block; } -#shader-api,#gallery { clear: right; width:100%; padding: 0; font-size: 12px; } -#shader-gallery,#gallery-images { display: block; min-height: 152px; max-height: 210px; overflow-y: auto; width: 100%; padding: 0; } +#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 } @@ -22,43 +22,49 @@ a { color: #00f; } #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; } - +.hidden { display: none; } +.form { display: none; } +.bold { font-weight: bold; } - -

+

@@ -130,10 +136,28 @@ function init(){ $("#reset").click(reset) $("#pause").click(pause) + $("#toggle-shaders").click(function(){ + $("#header .form").hide() + $("#shader-api-form").show() + $(".bold").removeClass("bold") + $(this).addClass("bold") + }).trigger("click") + $("#toggle-images").click(function(){ + $("#header .form").hide() + $("#gallery-form").show() + $(".bold").removeClass("bold") + $(this).addClass("bold") + }) + $("#toggle-off").click(function(){ + $("#header .form").hide() + $(".bold").removeClass("bold") + }) + user.init() help.init() shader_gallery.init() - + gallery.init(choose) + document.getElementById('shader').addEventListener('input', shader_build); requestAnimationFrame(animate) diff --git a/shader-gif.html b/shader-gif.html index 1369225..1f944c9 100644 --- a/shader-gif.html +++ b/shader-gif.html @@ -67,7 +67,7 @@ div { display: inline-block; padding: 10px;} - +
@@ -337,7 +337,7 @@ function render (){ } function status(s){ - $("#status").html(s) + $(".status").html(s) } var encoder = new GifEncoder() -- cgit v1.2.3-70-g09d2 From 9f1b5a177eee98f64e7581756cd5fdc7635691ca Mon Sep 17 00:00:00 2001 From: jules Date: Sun, 26 Jan 2014 00:58:01 -0500 Subject: css shakeup --- js/gallery.js | 1 + shader-api.html | 1 + shader-combo.html | 57 ++++++++++++++++++++++++++++++++++++++++++------------- 3 files changed, 46 insertions(+), 13 deletions(-) (limited to 'js/gallery.js') 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; }

+

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 @@ @@ -43,8 +65,9 @@ a { color: #00f; } | - - | + + + load image @@ -53,16 +76,14 @@ a { color: #00f; } -

+ - -

@@ -79,11 +100,21 @@ a { color: #00f; } + +
+ + + +
+ + +

+

@@ -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") }) -- cgit v1.2.3-70-g09d2 From b0b1b4cfbe3217b9f35343bdc35cdd058f4cf534 Mon Sep 17 00:00:00 2001 From: jules Date: Sun, 26 Jan 2014 02:26:23 -0500 Subject: allow empty canvas w/ no url --- js/api/gallery.js | 3 ++- js/api/set.js | 2 +- js/gallery.js | 1 - js/image.js | 12 ++++++++++-- js/render.js | 40 ++++++++++++++++++++++++++++++++++------ js/shader.js | 6 ++++-- shader-combo.html | 11 +++++++---- 7 files changed, 58 insertions(+), 17 deletions(-) (limited to 'js/gallery.js') diff --git a/js/api/gallery.js b/js/api/gallery.js index c1a779d..0404009 100644 --- a/js/api/gallery.js +++ b/js/api/gallery.js @@ -68,7 +68,7 @@ function load_shaders(err, shaders){ var $shader = display_shader(shaders[i]) $el.append( $shader ) } - if (firsttime) { + if (false && firsttime) { firsttime = false run_shader(shaders[0]) } @@ -81,5 +81,6 @@ function display_shader(shader_object){ html = html.replace("{" + field + "}", shader_object[field]) } $shader.html(html) + shader_object.id && $shader.data("id", shader_object.id) return $shader; } diff --git a/js/api/set.js b/js/api/set.js index 461f3e3..16e60fe 100644 --- a/js/api/set.js +++ b/js/api/set.js @@ -59,7 +59,7 @@ function save_thumbnail(id, thumb){ status('') var data = JSON.parse(resp) if (data.success) { - $shader.find("img").attr("src", data.url) + $(".shader[data-id="+id+"]").find("img").attr("src", data.url) } }); } diff --git a/js/gallery.js b/js/gallery.js index b9acfc0..839316c 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -14,7 +14,6 @@ gallery.bind = function(){ $("#gallery-random").click(asdf.random) $("#gallery-search").submit(dumpfm.search) $(document).on("click", "#gallery-images canvas", gallery.click) - status("ready") } gallery.load = function(ims){ diff --git a/js/image.js b/js/image.js index 7a5240f..4de7fd9 100644 --- a/js/image.js +++ b/js/image.js @@ -1,15 +1,23 @@ +var gif, img + function loadImage(imageURL, callback) { var imageURL = proxify( imageURL ); window.gif = window.img = null - if (imageURL.substr(-3) === "gif") { + if (! imageURL) { + window.gif = null + window.img = null + callback() + } + else if (imageURL.substr(-3) === "gif") { window.gif = GIF(imageURL); // gif.on("error", tryToLoadNextImage); // gif.on("rendered", trackLoadTime); gif.on("rendered", callback); return gif.render(); - } else { + } + else { window.img = new Image(); // img.addEventListener("error", tryToLoadNextImage); img.addEventListener("load", callback); diff --git a/js/render.js b/js/render.js index a22c9fe..f6684d7 100644 --- a/js/render.js +++ b/js/render.js @@ -9,9 +9,10 @@ function choose (){ $("#url").val(imageURL) loadImage(imageURL, ready) } + function load(){ - loading = true var imageURL = $("#url").val() + loading = true loadImage(imageURL, ready) } @@ -25,7 +26,7 @@ function ready(){ f.cloneData = f.ctx.getImageData(0,0,w,h) } } - else { + else if (window.img) { fc = cq(img.width, img.height) fc.drawImage(img, 0, 0) frame = img_frame = { ctx: fc.context } @@ -33,25 +34,52 @@ function ready(){ h = cc.canvas.height = frame.ctx.canvas.height frame.cloneData = frame.ctx.getImageData(0,0,w,h) } + else { + cc.canvas.width = w + cc.canvas.height = h + shader_build() + } + displayWidthHeight(w, h) } +function displayWidthHeight(width, height){ + $("#width").val(width) + $("#height").val(height) +} +$("#width").change(function(){ + w = abs(parseInt(this.value,10)) || 1 + cc.canvas.width = w + cc.canvas.height = h +}) +$("#height").change(function(){ + h = abs(parseInt(this.value,10)) || 1 + cc.canvas.width = w + cc.canvas.height = h +}) function giveFrame(t){ if (window.gif) { if (gif.currentFrame) { return gif.frames[gif.currentFrame(t)] } - else { + else if (gif.frames) { return gif.frames[0] } } - else if (window.img) { + if (window.img) { return img_frame } else { - return cq(w, h) + return empty_frame() } } +function empty_frame(){ + w = w || 400 + h = h || 266 + var cx = cq(w, h).fillStyle("rgba(255,255,255,255)").fillRect(0,0,w,h) + return { ctx: cx.context, cloneData: cx.getImageData(0,0,w,h) } +} + function reset(){ start_t = old_t pause_t = 0 @@ -76,7 +104,7 @@ function animate(t){ var step_t = t - old_t old_t = t - + if (paused || dragging || rendering || scrolling || deferring) { pause_t += step_t if (scrolling) { diff --git a/js/shader.js b/js/shader.js index 4a6e950..7773b89 100644 --- a/js/shader.js +++ b/js/shader.js @@ -1,3 +1,5 @@ +function shader (x,y,t,d) {} + var shader_build = function(){ var fn_str = document.getElementById('shader').value if (!fn_str.length) fn_str = "" @@ -46,7 +48,7 @@ var firefox_stack_regexp = /:([0-9]+)$/; function shade_error_handling(frame, t){ if (! t || isNaN(t)) throw Error ("No time specified") - if (! frame) throw Error ("No frame specified") + if (! frame || ! frame.ctx || ! frame.cloneData) throw Error ("No frame specified") var imgData = frame.ctx.getImageData(0,0,w,h) var data = imgData.data @@ -77,7 +79,7 @@ function shade_error_handling(frame, t){ } else if (lines.length > 1) { // attempt chrome match var matches = lines[1].match(chrome_stack_regexp) - if (matches.length > 1) + if (matches && matches.length > 1) error_highlight.on(parseInt(matches[1]) - 3) } diff --git a/shader-combo.html b/shader-combo.html index 6d402da..e61beee 100644 --- a/shader-combo.html +++ b/shader-combo.html @@ -3,7 +3,8 @@