A way to use as a simple .js 'library'

[andresilveirah]

Hey guys, I'm sorry to bother with this question, but is there a way to use depthy as a single js library? I mean just by passing one picture, the depth of field picture and that's it, without the angular stuff behind? If there is, just lemme know the basics and I'll study further. Appreciate your help :)

[andresilveirah]

So I'm reading the code and I see depthy was built as an Angular mode, so it'd be rather difficult to get it without the framework. So I'd ask, how can one use it with the minimum footprint of Angular? As simple as using the

<div class="depthy-viewer" depthy-viewer="depthy.viewer">
  <canvas></canvas>
</div>

and that's it.

[panrafal]

Sure, just use this class: https://github.com/panrafal/depthy/blob/master/app/scripts/classes/DepthyViewer.js Lookup the angular code for usage example. It's actually pretty simple!

[panrafal]

And of course it doesn't require angular at all, just pixijs should be enough

[andresilveirah]

Hey @panrafal thanks for your help.

I managed to get a slimmer version, here https://github.com/andresilveira/depthy

Even though I still have no clue how to use it without Angular :/

[panrafal]

Include pixijs, Q (optional), Modernizr (optional) and DepthyViewer class. Have a div with a canvas and configure DepthyViewer instance. Angular is only used as an interface for loading, drawing and such.

<div class="depthy"><canvas></canvas></div>

Options and public methods are documented in DepthyViewer

options = {} 
viewer = new DepthyViewer(depthyElement, options);
viewer.setImage('someurl.jpg')
viewer.setDepthmap('someurl.jpg')
// to change options later use
viewer.setOptions({})

I think that instead of forking and stripping down this repo, it would be a lot more helpful if you could document how to use it as a standalone viewer. An example html would be pretty rad :)

[andresilveirah]

Hey @panrafal I'll try it out. Thanks a lot for the help :)

Once I have it working, it'll be a pleasure to document it and submit a PR.

[panrafal]

No problem. It was designed to be used this way, never had time to make a scaffold and documentation though...

[dafeso]

Funnily enough, I discovered Depthy through a website which used the Depthy viewer on its front page (for a movie I believe). I suppose they figured it out by themselves, too.

I had a go at it, and can provide the following pointers:

In addition to pixijs and the DepthyViewer class I needed to include the following:

• Lodash (for extend)
• ColorMatrixFilter2.js

However I got stuck on:

Uncaught (in promise) TypeError: current.texture.addEventListener is not a function

Unfortunately the development time outweighs the results for me at the moment, so I'm abandoning things here.

Here's the fiddle I was working on: https://jsfiddle.net/r28ge5zp/ Remember to add in your own image url's as mentioned by @panrafal.