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

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted Oct 17 - Read on Facebook

Normalize Click & Touch Event Coordinates

I put together this Pointer Class module to help myself in my own project as well as address some questions I've seen regarding this in the community lately.

http://jrdn.io/cEnw

My brother Josh was having trouble getting one of Jay Stakelon's exercises working in both Framer Studio and on the device.

It's working now. :) http://share.framerjs.com/q3a04hzyaqb8/

I was dealing with a similar problem and recently noticed Brandon Souba was too. So, I decided to wrap the code up into a module for all to share. :)

Once you add the module to your project, you can use the Pointer class to get either the Screen or Offset x & y coordinates.

Here's two quick usage examples:

1. btn.on Events.Click, (event, layer) -> print Pointer.screen(event, layer)

2. btn.on Events.Click, (event, layer) -> print Pointer.offset(event, layer)

Instructions for adding it to your project are in the comments at the top of the module file. You can also check out this link to read the comments and download the file: http://jrdn.io/cEnw

This should take away a lot of the frustration and WTF moments when dealing with cross platform scenarios involving pointer location.

I hope this helps...

<3 Jordan #framerCode

15 Comments

Jordan Robert Dobson

Please let me how it works out for you and if you find any issues. :)

Josh Rule

thanks for doing this! I was curious what the issue was.

JL Flores Mena

Awesome! Thanks for sharing Jordan

Jordan Robert Dobson

Josh Rule - Essentially the issue was that the click event gives you offsetX and offsetY but a touch event doesnt do that for you. So you have to basically make the offset values for touch... and make the screen values for yourself for mouse.

With what I created you can easily have both. :D

Aaron James

Jordan, This module help me out a ton. Thanks for putting it together. Android Material Ripples have never worked better lol.

Jordan Robert Dobson

That's so great!

Rohan K

Aaron James are you using a module for material ripples?

Aaron James

Rohan, I am using a function that was created by Balraj Chana to create the ripple effect. I was having trouble on mobile because the midX and midY values were not being recognized. The Pointer Module fixed this issue for me. I will attach my code screenshot.

Aaron James

Ee Venn Soh

With Framer V68, Gesture event points to be screen based. Is this built into Framer now?

Jordan Robert Dobson

No for native events like touch(start|move|end) you still need this.

But all the others should be fine like onTap, onPan etc you shouldn't need this.

Ee Venn Soh

Jordan Robert Dobson Aaron James Not sure if this is a Pointer module or Android ripple module question. However when I try to create my ripple effect with the module that Aaron has created. It doesn't work with Events.Tap but only Events.Click. Events.Tap and Click sounds the same and behave the same to me? But I prefer to use Tap since it is more mobile terminology.

Jordan Robert Dobson

Tap doesn't require the pointer module most likely.

Ee Venn Soh

Jordan Robert Dobson Can you tell me what's the different between Tap and Click?

Jordan Robert Dobson

Tap is typically a touch and Click is typically a mouse but it's somewhat normalized in Framer. The main difference is that click is a native event and Tap is modified by Framer to be more helpful.

Read the entire post on Facebook