This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index

17 Comments

Tisho Georgiev

Well, you would do it exactly as it is in the article, but with a coffeescript syntax (no semi-colons, -> instead of function, etc.). Here's a js2coffee converter if you're having trouble translating certain parts to coffeescript: http://js2coffee.org/.

Testing the accelerometer data is best done on an actual device, but if you don't feel like doing that, I've found Chrome's inspector to be pretty good in simulating orientation data and it even gives you a nice 3D representation of your device which you can drag around.

Marc Krenn

Sorry Tisho to bug you, once again, but the proposed straight conversion from js2cofee doesn't work for me. Fucking coffeescript.

accXsmooth = 0
accYsmooth = 0
factor = 0.4

window.addEventListener "devicemotion", (event) ->
accX = event.accelerationIncludingGravity.x
accY = event.accelerationIncludingGravity.y * -1
accXsmooth = factor * accXsmooth + (1 - factor) * accX
accYsmooth = factor * accYsmooth + (1 - factor) * accY
Content.x = accX * 3
Content.y = accY * 3
Background.x = accXsmooth * -3 - 40
Background.y = accYsmooth * -3 - 40
return

Any hints/solution for this one? :)

And I think it's finally time to chip in some bucks for a beer or a coffee(!) - please PM me your paypal.

Tisho Georgiev

It would help to know exactly what isn't working :) Is there an error message you're seeing, or are things just not behaving as you'd expect them to? The code looks fine to me (except Facebook got rid of the indentation after window.addEventListener..., which is important in CS). Are you sure that you have a layer named Content and another one named Background?

No need to worry about chipping in :) You can buy me coffee if you're ever in San Francisco.

Marc Krenn

Hey thanks, that's really kind of you :) I'll definitely do that when I'm around. Someday. *fingerscrossed*

B2T: So, I've cleaned to code up a little bit (removed everything related to content and background, as those parts arent't needed) but it still gives me the "Can't find variable: accX" / "accX is not defined"-error. To me it seems like "window.addEventListener "devicemotion", (event)"-function doesn't fire

But as I've said before, I've ZERO coding experience, so I'm most certainly wrong.

Download:
https://dl.dropboxusercontent.com/u/7997357/framer/marc/zips/acceltest.zip

index.html:
https://dl.dropboxusercontent.com/u/7997357/framer/marc/acceltest.framer/index.html

Thanks a lot, Tisho!

Tisho Georgiev

I see now. The problem you're dealing with is caused by the JS beginner's worst nightmare - variable and function scope. Instead of trying to summarize it in a couple of sentences, I'll point you to an article you need to read first: http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/.

And now to your actual problem. You're trying to use the accX variable in the global scope, but it actually gets defined in the scope of the event handler (the function you pass to window.addEventListener). This means that the accX variable only exists when the event handler fires and gets destroyed afterwards. The first time you use accX is in the rectangle.html call. So the JS interpreter gets to that line, sees there's no accX variable defined in the global scope and gives you an error. To get around this, you can put this at the top of your script:

accX = 0
accY = 0

This would get rid of the error by making sure that those two variables are defined in the global scope (so they're accessible by any other function in your code). So when the devicemotion event handler fires, it will assign new values to these two variables, instead of creating brand new ones.

Hope this helps. How are you testing that devicemotion fires? You'll need either an actual device for this, or Chrome with accelerometer emulation on.

Marc Krenn

First of all, thanks for taking the time.

I haven't thought about the global/private-dilemma, even though I'm pretty sure I get the concept of global/private variables due to the rudimentary coding class I took almost a decade ago. Thanks for the reminder! I've now passed the private var "accX" to a global var "accX" - unfortunately this didn't turn out to be the main problem here.

So I did some further debugging with my iPad that is hooked-up to my Mac. I put ...

console.log "fired"

... within the "devicemotion" EventListener and it turned out it only fires once (onLoad), when it actually should fire permanently. Right?

Also, it doesn't seem to care about the orientation of my iPad at all - it always returns "0".

Tisho Georgiev

It should fire continuously, yes. I played around with your example just now and discovered that your line height setting makes it pretty much impossible to see the value accX inside the rectangle, because it wraps it to a second line, which gets clipped by the container. Try this on your iPad: http://cl.ly/16330X3b2z3g . You should see a pretty long number that keeps changing.

Marc Krenn

Thanks a lot, Tisho!

Looking at your file, at first glance, you haven't changed that many things to my latest version and tbh it took me while to spot the differences.

Sure, the line-height-thingy was an embarrassing mistake, but I've also used console.log at some point with the same result (returning 0 once).

Now, here's the kicker: I suspect most, if not all of my problems were due to the weirdest bug I've ever seen! It completely fucked up my debugging process and gave me some random errors without any error-messages (neither in framer studio nor in Safari's console).

...

The following is primarily for Koen, of course:

Bear with me, this one is really weird, probably hard to grasp, but It's 100% reproducible - at least on my setup:

As I've written above, I converted Cemre's code using js2coffee.org. Then, I pasted the auto-generated code into an empty framer file. Tisho then modified it and returned it back to me (http://cl.ly/16330X3b2z3g). At this point, it worked just fine:

accXsmooth = 0
accYsmooth = 0
factor = 0.4
accX = 0
accY = 0

rectangle = new Layer
width: 200
height: 200

window.addEventListener 'devicemotion', (event) ->
accX = event.accelerationIncludingGravity.x
accY = event.accelerationIncludingGravity.y * -1
accXsmooth = factor * accXsmooth + (1 - factor) * accX
accYsmooth = factor * accYsmooth + (1 - factor) * accY
rectangle.html = "accel.X: #{accX}"

The last line of your code returned accX like a champ - something, it wouldn't do in my modified version, even though it was the same code and it looked exactly the same (concerning the indentation) ... and that made me a little bit suspicious. Then I somehow made this discovery:

I deleted the whitespace in front of this line in your code:

rectangle.html = "accel.X: #{accX}"

Now, one could think, in order to return to the previous, working state, all you'd have to do is to move the cursor to the "r" of "rectangle" and hit TAB once. Well, wrong!

Once I did that, I received no error message but rectangle.html won't update anymore, seemingly because it has a wrong indentation. But again, I've received no error messages - neither in Framer Studio nor in Safari's console.

So I've deleted the whitespace again and used SPACEBAR twice(!) instead to generate an indent. It looked exactly the same as before, like I had used TAB. And guess what, it worked again.

tl;dr
Download
https://dl.dropboxusercontent.com/u/7997357/framer/marc/zips/acceltest.framer.zip
there's a short instruction in there as well

Marc Krenn

Update: Deleting all the whitespace and then using TAB for ALL the lines within "devicemotion" also fixes the problem. Still seems weird to me.

Tisho Georgiev

Yup, whitespace issues can be frustrating. I edited your file using Atom, which uses soft tabs (so everything is spaces, not tabs). I guess the mixture of soft tabs and real tabs confused the coffeescript parser, and messed up the execution of the script, because coffeescript relies on indentation to figure out the structure of your script. Sorry for contributing to the confusion. Maybe a soft tabs option would be good in Framer Studio, though (/cc Koen).

Marc Krenn

No no no, I'm really grateful for your help and this really wasn't your fault :)

As I said, I think the main problem here was not getting any error-message by the parser(?). Soft-tabs or a color-indication of indentation would also be cool and helpful, though.

Tisho Georgiev

Well to the parser it wasn't really an error. It just though you wanted a certain line to be executed outside of the context of the function. It didn't *look* that way, which was the confusing bit :)

Marc Krenn

True, my bad :)

Koen Bok

I hear you guys on the whitespace issues. We will soon have a way to display invisibles, making it easy to spot these. From there we can add smart sniffing and settings.

Koen Bok

Tisho how hard do you think it would be to analyze white space issues in cs code? I mean, just seeing if you have both lines that start with 1+ spaces and tabs would work pretty well right? Maybe I can then just throw a warning.

Tisho Georgiev

Not hard. You just want to point out when people are 2+ indent levels more than they should be?

Instead of analyzing, maybe you could just turn on automatic conversion to soft tabs, so things that are at the same indent level always *look* like they're at that indent level. This way if you have a line that starts with one tab and below it a line that starts with 2 spaces, they will look like they're at the same level, but if you don't convert them behind the scenes, CS will think they're at different indent levels.

Koen Bok

I like this.

Read the entire post on Facebook