Leap Input into Reel.js

[kierangabriel]

Hi there!

I was wondering if someone can help me, I'm very much a javascript (and code in general) noob so bare with me!

I'm wanting to use Leap Motion as a controller (swipe left and right to change direction, and possibly pinch to zoom in and out) for Reel.js http://reel360.org/reel, a javascript plugin for creating interactive 360 sprites

I have a demo of the content we want to use it for here: http://www.itstheflashpack.com/360scratcher/ so you can get an idea of how it works & look at the code, it's very simple

But obviously the complicated bit (at least for me) is editing the js so that Leap can be used instead of the mouse

Any help is massively appreciated!

Thank you!

[Apidcloud]

Hey there! It shouldn't be too hard to do so.

Are you planning on using Leap Motion V2 or Orion? Either way, you can just follow the docs on how to setup a project (basically just install the SDK you want and include the javascript library in the HTML).

After that, you just have to create a simple script that uses the direction of one hand, and use the offset position between a previous frame and the most recent to rotate the sprite (reel.js things).

[kierangabriel]

Hey!

Thanks for your reply!

So because I'm very much a complete novice with scripting, I'm not sure how I'd go about doing the second part of your answer, haha. I know how to include the JS in the html etc, but not sure how I'd create a script. Do you think you could help?

Sorry, thanks!

[Apidcloud]

I can try to create a simple example later today

[kierangabriel]

Ahhh that would be so amazing, thank you!

[Apidcloud]

I ended up just updating something I developed in 2014 and uploading it to github - live demo.

It's not perfect but swiping to left or right should move to the next or previous slide respectively. The hand shouldn't be totally flat, but you can adjust the palmNormal[0] value in leaprezi.js.

Let me know if there's anything you don't understand. Be sure to check the javascript archive, namely the video tutorial.

[kierangabriel]

Hi!

Oh wow thanks so much! I'm away for a few days so I can't test this but this is very kind of you!

Just one question, I had a look a thing the demo, and I see you used it for a presentation plugin, is it going to be straight forward for me to take that code and input the reel.js demo that I have?

Sorry for being so cheeky here

[Apidcloud]

Hey,

I would say that you only have to change the loop logic, because you're not looking for 'swipe-like' gestures. Apart from that, just need to remove the prezi stuff and use reel js instead.
But let me know if you have trouble when you have some time to test it.

[kierangabriel]

Hey!

Finally got round to testing this and I'm of course stuck again haha - your demo page for me doesn't seem to be working with the Leap. It recognises it as plugged in but swiping doesn't seem to do anything?

Sorry if I'm being dumb

[Apidcloud]

The hand can't be totally flat when swiping

On 22 Mar 2017, at 09:46, kierangabriel community-messages@leapmotion.com> wrote:

[https://d2beseu6pw5d2t.cloudfront.net/user_avatar/leapmotion-community.herokuapp.com/kierangabriel/45/16222_1.png] kierangabrielhttp://mandrillapp.com/track/click/13390195/community.leapmotion.com?p=eyJzIjoiNU02c3RoUG56bU4zMVM5d19RX1VxVUhRdWdrIiwidiI6MSwicCI6IntcInVcIjoxMzM5MDE5NSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL2NvbW11bml0eS5sZWFwbW90aW9uLmNvbVxcXC91c2Vyc1xcXC9raWVyYW5nYWJyaWVsXCIsXCJpZFwiOlwiYTk5ZjY3OWY0OGIzNGJmMTkyZGEyNzc0ZGYxZjgzNGRcIixcInVybF9pZHNcIjpbXCJjMDY5Njc2Nzk5M2VmOTBhMTNhMzU5NTA4ZDk1NTdkMTdiYWZmNDA3XCJdfSJ9 March 22

Hey!

Finally got round to testing this and I'm of course stuck again haha - your demo page for me doesn't seem to be working with the Leap. It recognises it as plugged in but swiping doesn't seem to do anything?

Sorry if I'm being dumb

To respond, reply to this email or visit https://community.leapmotion.com/t/leap-input-into-reel-js/6081/9http://mandrillapp.com/track/click/13390195/community.leapmotion.com?p=eyJzIjoiNEp0TTBfRzJ1YU1xc3c0LVlvTVIyZjhBbzhFIiwidiI6MSwicCI6IntcInVcIjoxMzM5MDE5NSxcInZcIjoxLFwidXJsXCI6XCJodHRwczpcXFwvXFxcL2NvbW11bml0eS5sZWFwbW90aW9uLmNvbVxcXC90XFxcL2xlYXAtaW5wdXQtaW50by1yZWVsLWpzXFxcLzYwODFcXFwvOVwiLFwiaWRcIjpcImE5OWY2NzlmNDhiMzRiZjE5MmRhMjc3NGRmMWY4MzRkXCIsXCJ1cmxfaWRzXCI6W1wiNTJjYTM0MWYxMzNjZTQ1YjE0ZDQ0Nzk0YmNlZWEwYTk2MGY0ZjFlZVwiXX0ifQ in your browser.

[kierangabriel]

Hmm, I am trying that and it doesn't seem to be doing anything

[Apidcloud]

For some weird reason, the prezi API is not doing anything. I'll take a look later today, but either way, open the browser console (Ctrl+Shit+I on chrome). It will still display a message when the swipes are detected ('right to left' and 'left to right').

Yeah, the prezi API is broken: http://prezi.github.io/prezi-player/

[kierangabriel]

Ahh I see! That'll probably be it then!

Although, I'm not seeing the swipes in my console so perhaps it's something more than that?

[Apidcloud]

I tested here and it works fine, apart from not doing anything to the Prezi presentation.

Note that you need to keep the focus on the page itself, else Leap won't be running.
Also, you can go to 'Sources' on the chrome dev tools, and open js/leaprezi.js and add a breakpoint to lines 107 and 113. You can also place it in the previous line to check the values of the conditions, as shown below:

Hope it works for you now!

[kierangabriel]

Ahh okay it's working now! Not sure what I did differently haha, but it recognises the swipes and prezi is working too! Thanks so much for putting up with me!

I'm going to try inputting reel.js into the script now so I may have more issues (probably)

[Apidcloud]

The presentation itself is loading, but the swipes aren't making prezi presentation going backward/forward.

Glad the swipe is working for you though!

[kierangabriel]

Ahh gotcha! Yeah that's the most important part haha

So now predictably I'm struggling with switching out prezi for reel, maybe you could take a look at the code for me? (sorry)

https://github.com/kieran440/leapreel

I've no idea how to just switch them over

[Apidcloud]

Just try to mess around with onFrame function. Console debug some hand values in order to find the properties you really want to use with reel.js.
After that, you have to remove the prezi stuff and call reel functions accordingly. Or maybe it's better if you work on top of a reel example

[kierangabriel]

Haha all of that is complete jargon to me, I really do appreciate the help though! I'm going to have to come back to this when I can dedicate some time to working it out

[Apidcloud]

Let me know when you have some free time. I might be able to give you some hints