- Notifications
You must be signed in to change notification settings - Fork21
📱 html5 sensor interaction library for mobile
License
ehzhang/sense-js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
an HTML5 interaction library for mobile browsers
HTML5 offers a lot of awesome access to hardware data. Sense.js is a library thatabstracts away the math and gives developers and designers easy access to somecommon non-touch gesture interactions with simple javascript callbacks.
This was made as a part of GreylockU's Hackfest, and will likely see changes to makethings better/add more gestures :)
Pull requests and feature suggestions are welcome!
You can find a demo athttp://sense-js.jit.su/
A ball rolls around based on your screen position!
Flick your phone to the right or left to slide a color.
Flip your phone face down and face up, and a new color appears!
Open this page on multiple devices. Selecting a color and flicking it'flicks' that color to all other devices.
sense.js enabled scroll based on screen tilt
Download sense.js, and refer to it in an html file, and initialize it!
<scriptsrc="path/to/sense.js"></script><script>varsense=sense.init();sense.flick(function(data){// Your callback code here!});</script>
Orientation fires continuously, and emits alpha, beta, and gamma data from the device.
| Options | Description | Default |
|---|---|---|
| alphaThreshold | (number) Threshold for changes in delta | 0 |
| betaThreshold | (number) Threshold for changes in beta | 0 |
| gammaThreshold | (number) Threshold for changes in gamma | 0 |
| radians | (boolean) True to emit values in radians | false |
| Data | Description |
|---|---|
| alpha | (number) degree/radian value for direction the device is pointed |
| beta | (number) degree/radian value for device's front-back tilt |
| gamma | (number) degree/radian value for device's left-right tilt |
Sample Usage:
sense.orientation(function(data){console.log(data)});
Flick events fire when the device is rotated quickly left-to-right or right-to-left.
| Options | Description | Default |
|---|---|---|
| interval | (number) the duration in milliseconds to watch for a flick event | 150 |
| sensitivity | (number) multiplier to adjust amount of acceleration required. lower = more sensitive | 1 |
| Data | Description |
|---|---|
| direction | (String) 'left' or 'right' depending on the flick direction |
| magnitude | (number) the magnitude of the acceleration on flick |
Sample Usage:
sense.flick(function(data){slidePage(data.direction)});
Fling events fire when the device is rotated quickly in the front-to-back direction, as ifbeing thrown overhand (with the device facing towards you).
| Options | Description | Default |
|---|---|---|
| interval | (number) the duration in milliseconds to watch for a flick event | 150 |
| sensitivity | (number) multiplier to adjust amount of acceleration required. lower = more sensitive | 1 |
| Data | Description |
|---|---|
| magnitude | (number) the magnitude of the acceleration on flick |
Sample Usage:
sense.fling(function(data){sendFile();});
Flip events fire when the phone is quickly flipped from face-up to face-down to face-up position.
| Options | Description | Default |
|---|---|---|
| gestureDuration | (number) timespan in milliseconds that the flip event can occur over | 150 |
| Data | Description |
|---|---|
| gamma | (number) the final gamma value after the flip |
Sample Usage:
sense.flip(function(data){showRandomNumber();});
This one line allows the user to observe the tilt of the user's phone to scroll on a page.
| Options | Description | Default |
|---|---|---|
| maxHorizontalAngle | (number) | 80 |
| maxHorizontalOffset | (number) | 100 |
| maxHorizontalSpeed | (number) | 15 |
| maxVerticalAngle | (number) | 40 |
| maxVerticalOffset | (number) | 100 |
| maxVerticalSpeed | (number) | 15 |
Sample Usage:
sense.addTiltScroll();
We can initialize Sense with a debug flag!
varsense=sense.init({debug:true});
The debugger will include a fixed div in the bottom right corner that displaysdata when events fire. This is particularly useful when debugging on mobile, as you can'tuse debugger or console.log :(
To start the demo site:
$ npm install$ npm start
About
📱 html5 sensor interaction library for mobile