An example for how to use device orientation, socket.io and express using grunt-express. The example will:
- reload the browser (when opened) using grunt-contrib-livereload and grunt-regarde
- restart the server using the built-in feature of
grunt-express
, and it will do so when any of the server script is changed, or when you 'touch' the.server
file in project root (using agrunt-regarde
watcher setup, seeGruntfile.js
)
The purpose of this examples is animate an image on your desktop using the orientation of your mobile phone.
Use Cases: Video Games, Driving Simulations, Compass
git clone https://github.com/azmartone/webgl-socket-example.git
npm install
grunt
Replace the ip found in index.html and server.html with the server ip. If running locally, this will be your machine's network ip.
index.html
var socket = io.connect('http://192.168.222.101:9000');
server.html
var socket = io.connect('http://192.168.222.101:9000');
On your mobile device, browser to http://[server]:9000
On your desktop, browse to http://[server]:9000/server.html
- Orientation metrics and animation needs to be refined.
- Consider using acceleration rather than orientation.
Copyright (c) 2014 Danny Duong
Licensed under the MIT license.