replaceImage method as requested in #32 #35

ccpandhare · 2017-07-01T18:27:34Z

What Changes this PR Contains

Created the method replaceImage
Small bugfix in Run.js
Updated Readme.md
Unit Test for replaceImage

replaceImage Syntax

sequencer.replaceImage('image_name','new_src');

ccpandhare · 2017-07-04T05:00:16Z

Should I merge this Is, @jywarren ?

jywarren · 2017-07-04T20:14:01Z

I think we need to say "imageId" instead and use getElementById, and why do we need newSrc? Shouldn't it just run the sequencer on the given image and replace it with the output?

Thanks!!!

ccpandhare · 2017-07-05T14:12:51Z

I am afraid not...
This method replaces the initial image in the sequencer, resulting in change in all images.
So we do need a new image for this, right?

jywarren · 2017-07-05T18:14:02Z

OK, so what i mean is, if you have an image on a webpage, what's everything you need to do in ImageSequencer to have a modified image replace that image? You need the img element's id so you can find it, and then you need some steps to run on it. The final state of hte image (after all the steps have run) should then be inserted back into the webpage, replacing the original.

I notice, with chaining methods, (#40), you could do:

$('#myImage').replace(sequencer.addStep(...).run($('#myImage')[0]));
// but an example not in jQuery, maybe

ccpandhare · 2017-07-05T18:18:20Z

Okay. I thing the both of us have different understandings of what `replaceImage` should do. According to me: Given an already present sequencer, the method changes the initial image, thus, applying the same stpes to a completely different image and resulting to a sequencer with initial image as taken from the user and steps inherited from the previous image. I believe you think otherwise. Is that so?

…

On बुध, ५, जुलै २०१७, २३:४४ Jeffrey Warren ***@***.***> wrote: OK, so what i mean is, if you have an image on a webpage, what's everything you need to do in ImageSequencer to have a modified image replace that image? You need the img element's id so you can find it, and then you need some steps to run on it. The final state of hte image (after all the steps have run) should then be inserted back into the webpage, replacing the original. I notice, with chaining methods, (#40 <#40>), you could do: $('#myImage').replace(sequencer.addStep(...).run($('#myImage')[0])); // but an example not in jQuery, maybe — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#35 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AT0xnCmsom_G881GX_bFy1atSbVEfKkAks5sK9JrgaJpZM4OLYk5> .

ccpandhare · 2017-07-05T18:19:35Z

Also, what you said will not be there for Node.js right?

ccpandhare · 2017-07-05T18:36:31Z

Now I do get what you were saying.

jywarren · 2017-07-05T18:50:05Z

Right, not for node -- and this is a slightly different use of IS -- the only state would be the steps, not the image. So we use it as if it were a filter for any given image. I guess in that usage, we might not want to actually store the image, or affect any images already loaded into the sequencer -- this is more just a useful way to use a sequencer that's already been set up, to do things on a webpage.

ccpandhare · 2017-07-05T19:02:18Z

So do you mean that a separate mode should be made in which the intermediate images aren't stored? Or maybe they're deleted shortly after?
Actually, I am still not clear on your interpretation of replaceImage.

Is it a shorthand for $('#myImage').replace(sequencer.addStep(...).run($('#myImage')[0])); ?

Is it a shorthand for sequencer.images[image].steps[0].draw(NEW_IMAGE) ?

What exactly does it replace? (an image with an image in the DOM) or (an image with an image in the ImageSequencer) ?

jywarren · 2017-07-05T19:15:10Z

I think we could leave the intermediate images in place and if we never use the sequencer instance again, they'll just get abandoned, which for this use is fine.

It is a shorthand for the first option -- the intention being to take an image from the DOM, run steps on it, and insert it back into the DOM where the original was. Imagine a use case -- you want to use IS to make every image in a web-based gallery monochrome. You could run (roughly):

$('img.galleryImages').each(function(image) {
  var s = new ImageSequencer();
  s.addStep('monochrome').run(image, function onComplete(output) { $(image).replace(output) });
});

or in shortened syntax (and for just one image, in this case) something really minimal, like:

ImageSequencer.replaceImage('img#myImage', steps);

I'm actually agnostic about whether we should use an existing instance of sequencer with steps already in it, or we should require steps to be added, and treat this as a kind of "quick constructor" -- that's up to you. I am mostly thinking about a convenient and compact use case and how to encourage people to easily use ImageSequencer in their web-based projects.

Imagine wanting to make a quick JS utility to crop every image on a page, or generate thumbnails, or whatever -- what's the simplest and most straightforward way for IS to help people do this?

ccpandhare · 2017-07-05T19:17:58Z

Wow! That is a great insight, I must say!
Now this is clear to me. Thanks!

jywarren · 2017-07-05T19:20:21Z

Super, and sorry if I was mixing up the architectural question of state and so forth with the real desire which was just to increase adoption with an easy to use and short function! :-)

ccpandhare · 2017-07-05T19:21:10Z

No, what you said is perfectly fine!
Thanks!

ccpandhare · 2017-07-07T21:42:15Z

Latest Changes

I have created the replaceImage method.
Added this update to README.md
Created a small working demo at "replace-demo.html"

jywarren · 2017-07-07T22:08:31Z

src/ReplaceImage.js

+    if(url.substr(0,11).toLowerCase()!="data:image/") xmlHTTP.send();
+    else make(url);
+
+    function make(url) {


What's the pros/cons of using this workaround here vs. just letting a canvas handle it?

PROS:

May bypass some CORS restrictions.

Will also work on browsers not supporting Canvas. (read: IE < 9)

CONS:

An extra HTTP request each time.

I feel this needs more testing (to find out whether the premise of bypassing CORS restrictions is actually valid). What do you say?

Sure. But I also like the nonrequirement of canvas, though of course some modules will decide to use it.

jywarren · 2017-07-07T22:09:28Z

Cool, love the demo idea! Let's merge this as soon as we can as it's getting a bit complex and we really should be doing separate PRs for separate features.

jywarren

I guess i think we need to start testing LoadImage and ReplaceImage, and in general step up our testing, otherwise we'll get into a state where getting closer to full test coverage starts to seem overwhelming! What do you think? You could test that ReplaceImage changes the src of the images, you could actually resize them and then check their widths, maybe, to confirm that it happened? Like... could we test it with $('image').width() == 100 after or something.

Do we already test LoadImage?

Great work here! Exciting!

jywarren · 2017-07-07T22:11:58Z

README.md

+`selector` is a CSS selector. If it matches multiple images, all images will be
+modified. `steps` may be the name of a module or array of names of modules.
+
+Note: Local images will work only if they are in the same directory or a subdirectory.


local images in the browser? why is this? is it relative path required? i.e. ../../ then we could say that. This is a bit mysterious sounding without an explanation.

Suppose
the HTML file is in /Users/PublicLab/Desktop/image-sequencer, also:
image1 : <img src="image.jpg">
image2 : <img src="images/image.jpg">
image3: <img src="../image.jpg">
image4: <img src="/Users/PublicLab/Desktop/image.jpg">

Then:
image1, image2 are allowed.
image3, image4 will throw a CORS Error on some browsers like those running on Gecko.

I have updated README.md with a better explanation.

jywarren · 2017-07-07T22:12:13Z

README.md

+Note: Local images will work only if they are in the same directory or a subdirectory.
+
+```js
+  sequencer.replaceImage(selector,steps);


can you show what steps should be?

Okay, I shall add that.

jywarren · 2017-07-07T22:18:43Z

replace-demo.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>


Can this go in the examples folder, as just replace.html?

Yes, sorry.

jywarren · 2017-07-07T22:19:53Z

Also -- push a copy of this branch up to your gh-pages branch so we can try your demo! at https://ccpandhare.github.com/image-sequencer/examples/replace

ccpandhare · 2017-07-08T13:21:28Z

Yes. I will add more intensive tests for loadImage and include tests for replaceImage once we merge this in.

ccpandhare · 2017-07-08T13:45:58Z

The demo is now live at https://ccpandhare.github.io/image-sequencer/examples/replace !

jywarren

Looks good! Merge?

Can options be set in steps on replaceImage? We don't have to, just wondering. Can we say in the docs that steps is just passed to addsteps, so usage is the same?

ccpandhare · 2017-07-08T13:49:46Z

Yes, options can be added. I can work on it. It is not exactly the same, as I haven't added support for options yet. It will hardly take a while. I will add that before merging. Is that okay?

Also this is my first demo for Image Sequencer! Do you like it? :-)

jywarren · 2017-07-08T13:52:22Z

Oh exciting! It works perfectly and looks great. Kudos!

…

On Jul 8, 2017 9:46 AM, "Chinmay Pandhare" ***@***.***> wrote: The demo is now live at https://ccpandhare.github.io/ image-sequencer/examples/replace.html ! — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#35 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ-lfnT1fNm8HSVDcjaKatH4o_S6Kks5sL4gWgaJpZM4OLYk5> .

jywarren · 2017-07-08T13:56:05Z

Aha, very interesting! If you repeat clicking too long, the image degrades; we can address this in a follow-up issue but it's really cool to see, actually! Must be decimal/integer issues.

Yes go ahead and tweak the steps parameter as I think it's worth it for it to work the same way as addsteps, and you might even consider just passing it to addsteps to reduce code?

ccpandhare · 2017-07-08T14:00:16Z

Oh exciting! It works perfectly and looks great. Kudos!

Thanks!

Wow! Interesting!
Actually this has to do with save-pixels.
save-pixels doesn't save images with 100% quality by default. That's why the image quality degrades with every use.

and you might even consider just passing it to addsteps to reduce code?

That's exactly whats happening. This is the code behind replaceImages:

      this_.loadImage('default',url).addSteps('default',steps,options).run(function(out){
        the_image.src = out;
      });

jywarren · 2017-07-08T14:01:47Z

Oh perfect. Super!

…

On Jul 8, 2017 10:00 AM, "Chinmay Pandhare" ***@***.***> wrote: Oh exciting! It works perfectly and looks great. Kudos! Thanks! Wow! Interesting! Actually this has to do with save-pixels. save-pixels doesn't save images with 100% quality by default. That's why the image quality degrades with every use. and you might even consider just passing it to addsteps to reduce code? That's exactly whats happening. This is the code behind replaceImages: this_.loadImage('default',url).addSteps('default',steps,options).run(function(out){ the_image.src = out; }); — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#35 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ4_PgyNWJmL2y_mmauim87ATQIoCks5sL4twgaJpZM4OLYk5> .

ccpandhare · 2017-07-08T14:02:41Z

We can simply pass {quality: 100} to addSteps and that should fix this.
I did that before but for some weird reason my build fails when I do so (One unit test fails -- Double Inversion). That was a very weird issue, to be honest. Two seemingly identical stings were not identical! Anyways, that's for another time.

jywarren · 2017-07-08T14:02:57Z

Yes, mentioning that in the docs can be a succinct and clear way to show proper usage. +1!

…

On Jul 8, 2017 10:01 AM, "Jeffrey Warren" ***@***.***> wrote: Oh perfect. Super! On Jul 8, 2017 10:00 AM, "Chinmay Pandhare" ***@***.***> wrote: > Oh exciting! It works perfectly and looks great. Kudos! > > Thanks! > > Wow! Interesting! > Actually this has to do with save-pixels. > save-pixels doesn't save images with 100% quality by default. That's why > the image quality degrades with every use. > > and you might even consider just passing it to addsteps to reduce code? > > That's exactly whats happening. This is the code behind replaceImages: > > this_.loadImage('default',url).addSteps('default',steps,options).run(function(out){ > the_image.src = out; > }); > > — > You are receiving this because your review was requested. > Reply to this email directly, view it on GitHub > <#35 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AABfJ4_PgyNWJmL2y_mmauim87ATQIoCks5sL4twgaJpZM4OLYk5> > . >

ccpandhare · 2017-07-08T14:17:14Z

Build Passed, merging it in!

jywarren · 2017-07-08T14:20:43Z

🎈

ccpandhare added 4 commits June 29, 2017 22:08

Double Inversion Test

fc2247a

Double Inversion Test

e01b3ae

Buildfix

74f1f92

replaceImage

3b16b66

ccpandhare mentioned this pull request Jul 1, 2017

create a replaceImage() method that uses all the current steps to process and replace an image in the DOM #32

Closed

Built For Browser

9a17116

ccpandhare requested a review from jywarren July 4, 2017 18:07

ccpandhare added 5 commits July 7, 2017 02:17

revert

b0a21ff

revert commit

de65422

Merge Commit

460913b

replaceImage

4451e04

Buildfix

10f9a19

jywarren reviewed Jul 7, 2017

View reviewed changes

jywarren requested changes Jul 7, 2017

View reviewed changes

jywarren reviewed Jul 7, 2017

View reviewed changes

Requested Changed Made

ef8cd3a

jywarren approved these changes Jul 8, 2017

View reviewed changes

ccpandhare added 2 commits July 8, 2017 19:35

Allow Options in replaceImage

6c9b937

Update README.md

98ed837

ccpandhare closed this Jul 8, 2017

ccpandhare reopened this Jul 8, 2017

ccpandhare merged commit 4a3b992 into publiclab:master Jul 8, 2017

ccpandhare mentioned this pull request Jul 11, 2017

Planning Issue for the Image Sequencer GSoC Project #23

Closed

32 tasks

replaceImage method as requested in #32 #35

replaceImage method as requested in #32 #35

Conversation

ccpandhare commented Jul 1, 2017

What Changes this PR Contains

replaceImage Syntax

ccpandhare commented Jul 4, 2017

jywarren commented Jul 4, 2017

ccpandhare commented Jul 5, 2017

jywarren commented Jul 5, 2017 • edited Loading

ccpandhare commented Jul 5, 2017 via email

ccpandhare commented Jul 5, 2017 via email • edited Loading

ccpandhare commented Jul 5, 2017

jywarren commented Jul 5, 2017

ccpandhare commented Jul 5, 2017

jywarren commented Jul 5, 2017

ccpandhare commented Jul 5, 2017

jywarren commented Jul 5, 2017

ccpandhare commented Jul 5, 2017

ccpandhare commented Jul 7, 2017

Latest Changes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jywarren commented Jul 7, 2017

jywarren left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ccpandhare Jul 8, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jywarren commented Jul 7, 2017

ccpandhare commented Jul 8, 2017

ccpandhare commented Jul 8, 2017 • edited Loading

jywarren left a comment

Choose a reason for hiding this comment

ccpandhare commented Jul 8, 2017

jywarren commented Jul 8, 2017 via email

jywarren commented Jul 8, 2017

ccpandhare commented Jul 8, 2017

jywarren commented Jul 8, 2017 via email

ccpandhare commented Jul 8, 2017

jywarren commented Jul 8, 2017 via email

ccpandhare commented Jul 8, 2017

jywarren commented Jul 8, 2017

jywarren commented Jul 5, 2017 •

edited

Loading

ccpandhare commented Jul 5, 2017 via email •

edited

Loading

ccpandhare Jul 8, 2017 •

edited

Loading

ccpandhare commented Jul 8, 2017 •

edited

Loading