grid of thumbnails showing step options in addStep ui

[jywarren]

We could generate a tiny thumbnail of the final image and run 5 or so of the most popular or useful modules, showing very low res previews of what they'd look like. Sort of like in Instagram!

(Low priority but fun, also dependent on a scale module)

[jywarren]

[jonxuxu]

This would be a cool task to work on for GCI! I'm happy to work on it if it will be made into one :)

[jywarren]

This could be done as an alternative tab to the current "icons" ui approach. Or maybe you could think of another way it could be implemented! Perhaps so as not to have to auto-generate all the thumbnails unless you really want to?

Creating a GCI task now!

[jywarren]

https://codein.withgoogle.com/dashboard/tasks/6720201132343296/

[jonxuxu]

Thanks for the speedy response! I'm thinking of replacing the icons with this, with a crop overlay above the image for a crop preview. So which adjustments would you like previews for?

[jywarren]

Oh, interesting! I do think we should preserve the ability to not generate the thumbnails depending on how intensive it is. we should use the default settings for each step, and this may mean we need to tweak them to be more as expected .... i.e. how blurry is default blur? how bright is default brightness? Would you like to start with the initial set of quick steps? Saturation seems like a fun one. In general, perhaps we should start with a method which can generate a preview version of an image, given any arbitrary step? I this this could involve just creating a new sequencer object and passing it an image...

…

On Mon, Nov 26, 2018 at 6:06 PM Jonathan Xu ***@***.***> wrote: Thanks for the speedy response! I'm thinking of replacing the icons with this, with a crop overlay above the image for a crop preview. So which adjustments would you like previews for? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#247 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ6_iUThNyxnynvcH0pH3z3dTlk0Yks5uzHOygaJpZM4Tzd0u> .

[jonxuxu]

I've never really worked with the image-sequencer ui before, though it is well documented. I made a new previewSequencer object in demo.js and set a custom ui for it, like so:

  var previewSequencer = ImageSequencer();

  // UI for the preview sequencer:
  previewSequencer.setUI({
    onSetup: function(step){
      // Create new property "step.image"
      step.image = document.createElement('img');
      if($("#" + step).length() > 0){
        $("#" + step).append(step.image);
        console.log(step + " element exists");
      } else {
        console.log(step + " element does not exist");
      }
    },
    onComplete: function(step){
      // Access predefined "step.output" and user-defined "step.image"
      step.image.src = step.output;
    },
    onRemove: function(step){
      // Access user-defined "step.image"
      step.image.remove();
    }
  });

Am I going in the right direction? Not really sure how to call the ui for a saturation layer for example and load the image in a div. I don't know if I should do that at all 😅

[jywarren]

Hm, so I think rather than building a UI, you could make new images outside -- so something like this:

function generatePreview(element, steps) {
  function insertImage(src) {
    var img = document.createElement('img');
    img.src = src;
    $(element).append(img); // maybe append img to the element passed in as a parameter?
  }
  var previewSequencer = ImageSequencer();
  previewSequencer.loadImage(step_image_src)
                               .addSteps('resize:{x: 100, y: 100},' + steps)
                               .run(insertImage);
}

What do you think? This is probably not exactly right, but a decent start...

[jonxuxu]

Hey, thanks so much for the clarification. I've created the function as outlined, but I'm not sure how to get images from the sequencer and pass it to the insertImage function.

image-sequencer/examples/demo.js

Lines 28 to 45 in 6377dbe

	// find any `src` parameters in URL hash and attempt to source image from them and run the sequencer
	imageSource = "images/tulips.png";
	if (getUrlHashParameter('src')) {
	imageSource = getUrlHashParameter('src');
	}
	sequencer.loadImage(imageSource, ui.onLoad);
	//Inserting previews
	function generatePreview(element, source, filter, steps) {
	function insertImage(src) {
	var img = document.createElement('img');
	img.src = src;
	$(element).append(img); // maybe append img to the element passed in as a parameter?
	}
	var previewSequencer = new ImageSequencer();
	previewSequencer.loadImage(source).addSteps(filter + "," + steps).run(insertImage);
	}
	generatePreview("#saturation", imageSource, "resize:{x: 100, y: 100}", 1);

It might be related, but I'm also getting errors on that line of code:

[jywarren]

In this case, you can probably just get the last image on the page using CSS selectors in jQuery. But there are multiple ways to get the image - that's probably just the fastest -- $('.step:last img')[0].src -- or maybe a more specific selector? We should actually have a faster way to access the output image. Perhaps we should create a set of faster access methods to simplify things. The way to get it within sequencer is: sequencer.images.image1.steps[0].output.src That's pretty long. What if it were "sequencer.output()" or "sequencer.getOutput()" and it would return an array of outputs if there is more than one image in the sequencer? Jonathan, if you'd like to make a new issue for this idea, we could work on it later. For now, the jQuery approach should be a short-term solution perfectly adequate for this use.

…

On Fri, Nov 30, 2018 at 3:07 PM Jonathan Xu ***@***.***> wrote: Hey, thanks so much for the clarification. I've created the function as outlined, but I'm not sure how to get images from the sequencer and pass it to the insertImage function. https://github.com/publiclab/image-sequencer/blob/6377dbe8d5de37a1722d0fedca00a6b65ec087a7/examples/demo.js#L28-L45 It might be related, but I'm also getting errors on that line of code: [image: image] <https://user-images.githubusercontent.com/22998430/49312048-e0ef4a00-f4b0-11e8-81db-154d606b65a4.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#247 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ4pO6K0govSrPeDNgaRRYW84jQ3oks5u0Y--gaJpZM4Tzd0u> .

[jonxuxu]

Yeah I think getting a much more formalized way to get sequencer output would be much appreciated.

Here's my error when I use $('.step:last img')[0].src

Here's the error when I use previewSequencer.images.image1.steps[0].output.src

Logically, I think it should work. I've pushed my revisions to this branch.

[jonxuxu]

@jywarren @publiclab/reviewers Sorry I have 6 hours left on this task.. I've had to abandon it temporarily while waiting so it wouldn't expire.

[jonxuxu]

What's interesting to note is that the images object does exist:

However, it is printed after the error on line 47, which is technically above it. So I'm thinking this may be due to the fact that the function to load the object starts running before it has completely loaded? I'm not sure if that's the case, but I'll look into ways of waiting to run the function until after the object has completely loaded.

[jywarren]

I'm very sorry, I didn't have a moment to check in on this today and will do my best to help out in the morning! Thanks for your patience!

…

On Mon, Dec 3, 2018, 10:06 PM Jonathan Xu ***@***.*** wrote: What's interesting to note is that the images object does exist: [image: image] <https://user-images.githubusercontent.com/22998430/49416245-55dbb180-f747-11e8-8052-9d4bc001b40c.png> However, it is printed after the error on line 47, which is technically above it. So I'm thinking this may be due to the fact that the function to load the object starts running before it has completely loaded? I'm not sure if that's the case, but I'll look into ways of waiting to run the function until after the object has completely loaded. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#247 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ2_jPl6GoMHDK5G5nmfOc61c0e8yks5u1eaZgaJpZM4Tzd0u> .

[jonxuxu]

No worries, you've got a lot on your plate! Good night.

[kevinzluo]

Hi @JonathanXu1
Since you've claimed this task for GCI, would you mind letting me take a shot at this one? I can't guarantee I can even get half as far as you did, but this seems really interesting and I'd like to try.

Thanks,
Kevin Luo

[jywarren]

Hmm, maybe @kevinzluo could help move this along... in any case whoever takes it on please work collaboratively! #504

[jywarren]

I think this has to do with asynchronous events, and we may have to execute the steps that are throwing an error in a callback, which Image Sequencer allows for on some of it's methods (see docs). So, the callback is a passed function which would run once the sequencer is done...

Are you working off the latest code in #504 ?

[kevinzluo]

Hi!

I haven't had a chance to really look at the code until this morning, and my initial idea is a bit different from what @JonathanXu1 is suggesting. Should I open up a new PR?

Also, could you please approve my task here (https://codein.withgoogle.com/dashboard/task-instances/5423277104168960/) so that I may go ahead and start working on this one?

Thanks!

[jonxuxu]

Yeah I'm working off the latest code. I was thinking of doing a callback as well, but wasn't sure where the documentation for that was. Moreover, this issue also happens if I try to retrieve the values from the original sequencer.

[jywarren]

Jonathan, is the PR you referenced where i might see the same error if I try it?

…

On Tue, Dec 4, 2018 at 2:26 PM Jonathan Xu ***@***.***> wrote: Yeah I'm working off the latest code. I was thinking of doing a callback as well, but wasn't sure where the documentation for that was. Moreover, this issue also happens if I try to retrieve the values from the original sequencer. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#247 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ-glAexg7UCesqpmYI4ErZ7MT6o-ks5u1sw9gaJpZM4Tzd0u> .

[jonxuxu]

Yep, I'll push again to make sure.

[okonek]

@jywarren Hi I've added that feature in this PR: #535 If I misunderstood your explanation or there is something to change in my solution, please let me know.
Thanks.

[jonxuxu]

I've made pull request #539 that applies my changes on top of @okonek 's. @jywarren can merge both our forks, or @okonek can apply my changes to his fork.