timlewismt / panoramasensorsviewer Goto Github PK

#PanoramaSensorsViewer

Maybe you're a developer, so, no more #RTFM, you'll read this later ;-) so go straight to the API doc ! (:wink) ...

This library will let you make webapps that can browse Google Street View just by moving your mobile device and looking at the panorama like you were inside it.

• Try Topheman Street View, a website I made based on PanoramaSensorsViewer
• The examples included in this repository can also be tested online

##Intro

PanoramaSensorsViewer takes advantage of Google Maps API v3 to display panoramas and takes care of all the tricky things such as :

• Init a Google Street View panorama
  • At any position
  • Taking care of making the connection to the Google Maps API
  • Lets you have your custom panoramas (or anything else since you have full access to the Google Maps API)
• Connecting your device's gyroscope+accelerometer to this panorama
• Taking care of your device screen orientation (keeping the movements consistent whatever orientation you're on)

##Requirements

For dependency management purposes (and also safe and simple script lazy load), PanoramaSensorsViewer was built using RequireJS, a module loader.

For those of you who don't know RequireJS, I invite you to check it out. Anyone who already use RequireJS shouldn't have any problem, however, this repo contains examples of how to use PanoramaSensorsViewer, if you want to make your own app, you can simply clone the repo ...

PS : I also use RequireJS because it allows me to make builds with r.js via grunt (something you should also check out). For a next version, I'll try to ditch RequireJS via a build step (like the jQuery builder).

###RequireJS Setup

You'll find the RequireJS config file here : require.config.js. Nothing extraordinary here, only the declaration of the async plugin which is used to call google.

If you moved the topheman-panorama folder, you can make an alias in this file so that RequireJS will find it.

###Grunt Setup (optional)

Maybe like me you don't start a project without grunt anymore, so there is a Gruntfile.js and a package.json.

The default task will launch you a server on localhost:9002 ...

##Known bugs

• Chrome for Android : on some devices, the noise filter for the deviceorientation event can be pretty bad, so the image can be jumpy.
• Firefox for Android : the noise filter is ok, however, the connection to the sensors (accelerometer+gyroscope) seems to be erratic - here is the use case to reproduce the bug.

iOs works very well.