Pressure.jsMaker
EDIT: I'm not done with it but here is a preview on a Scale I built using pressure.js, the zeroing doesn't work yet but is a proof of concept. Use a spoon and place things on the spoon to weigh. http://yamartino.github.io/press...
Hey guys, so I have been working on this project for a while now on and off. Glad to see people are liking it :)
Brief explanation of how it works:
This library is designed to give the developer a hook into if the current user has Force or 3D Touch support. That way, people could have better fallbacks because support is limited right now.
First it detects if you are on mobile or desktop.
On desktop, the only setup that will support this right now is Safari and the new Apple Force Touch trackpads. Apple has custom force touch events that fire if you do. When something is clicked on the element that is hooked up to pressure it will attempt to fire a force event and will always fire a click event. Then the click event checks to see if the force event was fired to determine if there browser and device has support.
On mobile it is equally complicated because on iOS 9 in Safari, a touch event will always have a force value returned whether or not the device supports 3D Touch. It will always be 0 if the device does not have 3D touch, however sometimes the first few values are 0 even on 3D touch. To avoid making a mistake from the first value being zero, it checks force 10 times rapidly and if any of the touch points had a pressure reading it is supported on that mobile device / browser.
In terms of getting the force values, on desktop there are custom Webkit Force events from Apple so that was easy. However, on mobile I had to get a touch event, check the touch event every 10 milliseconds to get the updated value while being pressed, then make sure the force value is mapped to the correct touch point to support multi touch pressure readouts.
Force Touch on Mac supports, well, a "Force Touch", which is a "deep press" on the trackpad. Since I wanted the API to be identical whether the developer is supporting desktop, mobile, or both, I simulate deep press events being fired on the iPhone 6s. Also, the force values on mobile are between 0 and 1, and on desktop are between 1 and 3. I normalized the desktop ones so both mobile and desktop map to between 0 and 1.
Hope that is helpful, glad to see people enjoying this :)
Report
Valentina Studio@stuyam Is there anything comparable to Windows?
Report
Pressure.jsMaker
@lynnfredricks not that I know of. However the iPhone portion of the code is based on the new touch web standard so in theory when new devices and browsers add support it should just work :o (again... in theory)
Report
Newji@stuyam Gravity spoon guy approves. Great to have a library like this out there.
Report
Pressure.jsMaker
@warpling hahaha thanks so much! Thats awesome :)
Report
Superwall@stuyam incredible. your spoon scale concept is absolutely genius :)
Report
KatHave you tested this on iOS 10? It says that my browser isn't supported..
Report
Pressure.jsMaker
@sjoerdjanssenen I haven't tested yet on iOS 10, I will have to do some testing though thank you for the reminder
Report
Pressure.jsMaker
@sjoerdjanssenen update to iOS 10 coming soon. Safari changed the 3D touch implementation in iOS 10.
Report
Kat@stuyam Awesome! Really curious to test this out :)
Report
@stuyam Possible Fallback: The long you press == more force.
Report
Pressure.jsMaker
@surjithctly very interesting idea
Report
Eddie AIGood stuff!😃 @stuyam
Report
Pressure.jsMaker
@ahmed_fahad_ thanks!
Report
AccuNewsWill like to know how this works
Report
