Pressure.js

3D and Force Touch JavaScript library for the web

get it
#2 Product of the DayJanuary 23, 2016

Reviews

Discussion

You need to become a Contributor to join the discussion - Find out how.
Stuart YamartinoMaker@stuyam · Web Developer
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 :)
Lynn Fredricks@lynnfredricks · President, Paradigma Software
@stuyam Is there anything comparable to Windows?
Stuart YamartinoMaker@stuyam · Web Developer
@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)
Ryan McLeod@warpling · ⬛️📲 WhatIsBlackbox.com
@stuyam Gravity spoon guy approves. Great to have a library like this out there.
Stuart YamartinoMaker@stuyam · Web Developer
@warpling hahaha thanks so much! Thats awesome :)
Jake Mor@jakemor · ios and web // jakemor.com
@stuyam incredible. your spoon scale concept is absolutely genius :)
Ben Tossell@bentossell · Partner, The Upstarters
@stuyam tell us about this project :)
Sjoerd Janssen@sjoerdjanssenen · Backend developer
Have you tested this on iOS 10? It says that my browser isn't supported..
Stuart YamartinoMaker@stuyam · Web Developer
@sjoerdjanssenen I haven't tested yet on iOS 10, I will have to do some testing though thank you for the reminder
Stuart YamartinoMaker@stuyam · Web Developer
@sjoerdjanssenen update to iOS 10 coming soon. Safari changed the 3D touch implementation in iOS 10.
Sjoerd Janssen@sjoerdjanssenen · Backend developer
@stuyam Awesome! Really curious to test this out :)
Fizzle @dopesavant · Founder, StudentPay
Will like to know how this works
Ahmed Fahad@ahmed_fahad_ · Founder&CTO, Dhaka Rides
Good stuff!😃 @stuyam
Stuart YamartinoMaker@stuyam · Web Developer