Director

Accelerometer Events

The director object can receive accelerometer events. In fact, it is not a director object's property, but a CAAT environment property. The accelerometer vales, are directly accesible from CAAT's environment and will only work on FF3+ or Chrome.

To start capturing accelerometer info, you must call CAAT.enableDeviceMotion();.

Accelerometer angle values can be accesed via

                        CAAT.rotationRate.alpha
                        CAAT.rotationRate.beta
                        CAAT.rotationRate.gamma

Example

In this example, when moving your laptop, the text will rotate to be readable horizontally. It will only work on FF3+ and Chrome.


                        var CW = 700;
                        var CH = 400;
                        /**
                         * Startup it all up when the document is ready.
                         * Change for your favorite frameworks initialization code.
                         */
                        window.addEventListener(
                                'load',
                                __accelerometer,
                                false);

                        function __accelerometer(director) {

                            CAAT.enableDeviceMotion();

                            var director = new CAAT.Foundation.Director().
                                    initialize(CW, CH, document.getElementById('_c'));
                            var i;
                            var scene = director.createScene();

                            scene.activated = function() {
                                director.setClear(false);
                            };

                            var root = new CAAT.Foundation.ActorContainer().setBounds(0, 0, director.width, director.height);
                            scene.addChild(root);

                            var text = new CAAT.Foundation.UI.TextActor().
                                    setFont("100px sans-serif").
                                    setText("Rotate Device").
                                    setFillStyle('red').
                                    setOutlineColor('#ffff00').
                                    setOutline(true).
                                    setAlign("center").
                                    setBaseline("center").
                                    cacheAsBitmap();
                            scene.addChild(text.centerAt(director.canvas.width/ 2, director.canvas.height/ 2));

                            // Hook on scene life cycle. After rendering, calculate an angle based on accelerometer
                            // information for the text.
                            scene.onRenderEnd = function(director, time) {
                                var rx = CAAT.rotationRate.gamma;

                                var ixy = -rx * Math.PI / 180;
                                text.setRotation(ixy);
                            };

                            CAAT.loop(33);
                        }