3

es posible con Javascript, en una superficie plana moviendo un movil, saber en qué dirección se está moviendo?

quiero hacer una secuencia de imágenes que cambia cuando voy a mover el móvil a la derecha o a la izquierda (sobre una tabla plana).

Muchas gracias!

Codigo Script:

(function($) {
    jQuery.shake = function(options) {

        var opts = jQuery.extend({},
        jQuery.shake.defaults, options);

        if (opts.debug !== "") {
            var debug = $(opts.debug);
            debug.append('x: <span id="x">0</span><br>');
            debug.append('y: <span id="y">0</span><br>');
            debug.append('z: <span id="z">0</span><br><br>');

            debug.append('shake: <span id="shake">0</span><br>');
            debug.append('shakeaccum: <span id="shakeaccum"></span><br>');
            debug.append('debug: <span id="console"></span><br>');
        }

        // initialize acceleration variables
        var ax = 0;
        var ay = 0;
        var az = 0;
        var axa = 0;
        var aya = 0;
        var aza = 0;

        // initialize misc internal variables
        var shakecount = 0;
        var shakeaccum = 0;
        var curtime = new Date();
        var prevtime = new Date();
        var timeout = false;


        // detect whether acceleration is supported
        if (window.DeviceMotionEvent === undefined) {
            if (opts.supported !== "") {
                $(opts.supported).html("Your browser does not support Device Orientation and Motion API. Try it on an iPhone, iPod or iPad with iOS 4.2+.");
            }
        } else {
            window.ondevicemotion = function(event) {
                // get acceleration values
                var acc = event.accelerationIncludingGravity;
                ax = acc.x;
                ay = acc.y;
                az = acc.y;

                // high pass-filter to remove gravity

                axa = ax - ((ax * opts.hf) + (axa * (1.0 - opts.hf)));
                aya = ay - ((ay * opts.hf) + (aya * (1.0 - opts.hf)));
                aza = az - ((az * opts.hf) + (aza * (1.0 - opts.hf)));

            **texto en negrita**
                var beenhere = false;
                var shake = false;
                if (beenhere) {
                    return;
                }
                beenhere = true;
                if (Math.abs(ax - 2 * axa) > opts.violence * 1.5 || Math.abs(ay - 2 * aya) > opts.violence * 2 || Math.abs(az - 2 * aza) > opts.violence * 3 && timeout === false) {
                    shakeaccum += 1;
                }

                // detect shake event (several shakes)
                curtime = new Date();
                var timedelta = curtime.getTime() - prevtime.getTime();
                $('#console').html(timedelta);

                if (timeout) {
                    if (timedelta >= opts.debounce) {
                        timeout = false;
                    } else {
                        timeout = true;
                    }
                    shakeaccum = 0;
                }

                if (shakeaccum >= opts.shakethreshold && timeout === false) {
                    shakecount += 1;
                    $("#shake").html(shakecount);
                    prevtime = curtime;
                    timeout = true;
                    opts.callback.call();
                }
                beenhere = true;
            };
        }
        if (opts.debug !== "") {
            setInterval(function() {
                // output debug data
                $('#x').html(Math.abs(ax - 2 * axa).toFixed(1));
                $('#y').html(Math.abs(ay - 2 * aya).toFixed(1));
                $('#z').html(Math.abs(az - 2 * aza).toFixed(1));
                $('#shakeaccum').html(shakeaccum);
            },
            10);
        }
    };
})(jQuery);

// plugin default options
jQuery.shake.defaults = {
    // debug div id
    debug: "debug",

    // not supported message div
    supported: "",

    // single shake sensitivity
    violence: 1.0,

    // high-pass filter constant
    hf: 0.2,

    // number of single shakes required to fire a shake event
    shakethreshold: 1,

    // delay between shake events (in ms)
    debounce: 1000,

    // anonymous callback function
    callback: function() {}
};
7
  • La pregunta me parece muy buena. Te paso un link: juegos.canvas.ninja/2013/09/acelerometro.html . No es exacto lo que buscas pero puede servir como punto de inicio. Una cosa importante: no creo que vayas a poder determinar cantidades y direcciones exactas del movimiento. el 18 oct. 2016 a las 12:46
  • Estas usando cordova o es un sitio web visto en el móvil? Haz intentado algo ya?
    – devconcept
    el 18 oct. 2016 a las 13:25
  • 1
    Necesito detectar se lo shake es a la derecha (proxima imagen) o a la izquierda (imagen anterior),en esto script tengo un 'shakethreshold' posto a 1 (1 singolo movimiento por cambiar imagen). el 18 oct. 2016 a las 13:44
  • he utilizado esto plugin jquery.ios-shake.js el 18 oct. 2016 a las 13:57
  • Aqui puedes ver un ejemplo de como se puede hacer: albertosarullo.com/demos/accelerometer
    – Marcos
    el 18 oct. 2016 a las 14:37

1 respuesta 1

0

Te recomiendo que veas este post: Javascript Accelerometer Demo and Source.

En el mismo se muestra un ejemplo que hace uso de DeviceMotionEvent:

window.ondevicemotion = function(event) {
    var accelerationX = event.accelerationIncludingGravity.x;
    var accelerationY = event.accelerationIncludingGravity.y;
    var accelerationZ = event.accelerationIncludingGravity.z;
}
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.