Gl puppeteer

[tech4GT]

@jywarren Now running gl using puppeteer!! 🎉 🎉 🎉
Okay so I am doing it using the localhost demo right now but porting this to image-sequencer.min.js should be easy enough!
Also, some code cleanup is required but this works. :D
cc @Divy123

[tech4GT]

Well, figuring out how to run our sequencer.run(callback) method inside of puppeteer's evaluate method was the tricky part, since that function needs to return the value . Currently I have wrapped the whole thing up in a promise, but if someone at @publiclab/is-reviewers has a better solution, I would love to hear it! 😄

[jywarren]

Oh wow. Can you show an image output by it in node? Cool!!!

…

On Thu, Apr 11, 2019, 12:56 PM Varun Gupta ***@***.***> wrote: @tech4GT <https://github.com/tech4GT> requested your review on: #1007 <#1007> Gl puppeteer. — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#1007 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ6thetA79Bfh88-D06IOEROpYn6Gks5vf3cigaJpZM4cqaMw> .

[tech4GT]

Well I ran it on the Mario image coz that's all I had but this absolutely looks like the desired result.

[tech4GT]

Oh, got the grid image!

[jywarren]

Wow! How generalizable is this to the webgl module?

…

On Thu, Apr 11, 2019, 1:08 PM Varun Gupta ***@***.***> wrote: Oh, got the grid image! [image: image_0] <https://user-images.githubusercontent.com/25617855/55980777-d50f6200-5cb2-11e9-861a-531bd1e9ff99.png> [image: image_1] <https://user-images.githubusercontent.com/25617855/55980781-d6d92580-5cb2-11e9-80e6-b5bdb1839baf.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1007 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ8Rd6uuWunQBpNHzE3xDMwmvvxT9ks5vf3oEgaJpZM4cqaMw> .

[tech4GT]

I think we can generalise this. Maybe have this as a part of pixelmanipulation api itself. So any module can run in headless context with a flag in options.

[vibhorgupta-gh]

@tech4GT This is awesome! The promise approach is neat, I had precisely that in mind when I was thinking of solutions to this.
Perhaps this could be generalised in a separate module? Pixel manipulation works very specifically on the pixel level, maybe the headless code could go in a separate js module inside the _nomodule folder which can be called from all the other modules if not running in a browser environment OR if a flag is passed.
@jywarren the webgl-distort module looks like a nice follow-up to this, thoughts?

[jywarren]

This sounds great. Yes, it'll be awesome to see webgl-distort running and a good proof of it's generalizability. Awesome work!

…

On Thu, Apr 11, 2019, 9:45 PM Vibhor Gupta ***@***.***> wrote: @tech4GT <https://github.com/tech4GT> This is awesome! The promise approach is neat, I had precisely that in mind when I was thinking of solutions to this. Perhaps this could be generalised in a separate module? Pixel manipulation works very specifically on the pixel level, maybe the headless code could go in a separate module inside the _nomodule folder which can be called from all the other modules if not running in a browser environment OR if a flag is passed. @jywarren <https://github.com/jywarren> the webgl-distort module looks like a nice follow-up to this, thoughts? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1007 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ-zj-Rsfyp-raDV97fkJc0I1JMiNks5vf_MXgaJpZM4cqaMw> .

[tech4GT]

Okay so this makes sense. I'll make this code into an api which the module can call if it is not supported on node.

if(!options.inBrowser){
this.output = require('path-to-api').runInBrowserContext(input);
callback();
}
else{
/* Actual module code here */
}

[jywarren]

Awesome!!!!

…

On Fri, Apr 12, 2019, 9:15 AM Varun Gupta ***@***.***> wrote: Okay so this makes sense. I'll make this code into an api which the module can call if it is not supported on node. if(!options.inBrowser){ this.output = require('path-to-api').runInBrowserContext(input); callback(); } else{ /* Actual module code here */ } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1007 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ8SznAf1gLdBtI4FntFgiIaV7jSkks5vgJS9gaJpZM4cqaMw> .

[tech4GT]

@jywarren I also need the dist Image sequencer script since I do not want to rely on sequencer.publiclab.org
Is it hosted somewhere?

[jywarren]

Oh, can you work from the npm version? We're very careful about releases and you can peg to a semver (semver.org) version number?

…

On Fri, Apr 12, 2019 at 9:27 AM Varun Gupta ***@***.***> wrote: @jywarren <https://github.com/jywarren> I also need the dist Image sequencer script since I do not want to rely on sequencer.publiclab.org Is it hosted somewhere? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1007 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ1YZd6DR4mGgJwCqlXFEhIlk77f-ks5vgJexgaJpZM4cqaMw> .

[tech4GT]

Uh, I am not sure. I want to get the latest dist files. How do we get them in the demo anyway?

[tech4GT]

I mean the demo must be consuming them from somewhere?

[tech4GT]

Also I think this might be a good time to move over to webpack, as the modules get more complex this is going to get difficult to manage with browserify. Like right now the tests are failing since grunt-browserify is trying to browserify puppeteer. I was looking at the documentation but there is no way we can ignore a require in the latest version. I'll try to figure out a workaround here.

[jywarren]

Oh, so we still distribute the dist files in both the stable branch AND in npm. And since these are strictly npm version numbered, they're the stable place to source. More here: #773 - thanks! Did you need us to publish a new version?

…

On Fri, Apr 12, 2019 at 9:53 AM Varun Gupta ***@***.***> wrote: Also I think this might be a good time to move over to webpack, as the modules get more complex this is going to get difficult to manage with browserify. Like right now the tests are failing since grunt-browserify is trying to browserify puppeteer. I was looking at the documentation but there is no way we can ignore a require in the latest version. I'll try to figure out a workaround here. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1007 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ7K9x8cEy1O1r1JqrLB--1HKNXdBks5vgJ3lgaJpZM4cqaMw> .

[tech4GT]

@jywarren Got this! So a couple of things here
I figured rather than consuming the file over the network, we can just use the stable branch as a dependency in the is-app and consume the dist file locally. Which is what I have done.
Also I have mode the new api available from nomodule so please take a look at that.
One Issue I ran into was that puppeteer modules cannot be tested with tape so currently ignoring it in benchmarks until we can find a better way to benchmark these modules.

[tech4GT]

So we are basically done here, all that is left now is to serialize the options object and use it while running in browser context. 😄

[tech4GT]

Okay, this is ready to merge from my side @jywarren 🎉

[tech4GT]

Final api looks like:

var step = this;

    if (!options.inBrowser) {
      require('../_nomodule/gl-context')(input, callback, step, options);
    }
    else {
     /* browser specific code */
    }

[jywarren]

This is AWESOME @tech4GT !!! A few small comments below. 🎉

[harshkhandeparkar]

@tech4GT how heavy is this on the RAM?

[tech4GT]

Hmm, we are running a full chrome tab in headless mode, so I would say about 250mb.

[harshkhandeparkar]

That's not too much. But does running a headless browser hinder performance?

[tech4GT]

I mean it's going to be less effective than running natively in node obviously.

[tech4GT]

@jywarren Ready to merge?

[jywarren]

Fantastic!!!

Let's do webgl-distort next! Fantastic work and thanks everyone for input!

[vibhorgupta-gh]

@jywarren I would love to work on webgl-distort!