31 день Windows 8 для HTML5 | День № 25: Акселерометр

Эта статья является Днем № 25 из серии под названием « 31 день Windows 8» . Каждая из статей этой серии будет опубликована как для HTML5 / JS, так и для XAML / C # . Вы можете найти дополнительные ресурсы, загрузки и исходный код на нашем сайте .

Сегодня мы рассмотрим другой датчик, который мы можем найти в устройстве с Windows 8: акселерометр. С помощью акселерометра мы можем измерить движение машины пользователя. Если вы ищете дополнительную информацию о том, что именно акселерометр, проверьте это . С помощью акселерометра мы можем делать такие вещи, как определение ориентации устройства и даже определять, падает ли устройство.

Ось X проходит горизонтально через устройство. Ось Y проходит вертикально через устройство. Ось Z проходит непосредственно через устройство, спереди назад. Вот изображение, которое поможет проиллюстрировать это на примере Windows Phone (любезно предоставлено http://www.andybeaulieu.com/ ):

Проще говоря, мы измеряем g-силы, приложенные к этим трем осям. Из-за этого, когда мы кладем планшет Windows 8 на стол, мы получаем значение оси Z, равное –1, потому что одна «г» (одна единица силы тяжести) воздействует на отрицательный размер оси Z. Точно так же, если бы мы подперли наше устройство вверх (аналогично телефону на фотографии), чтобы нижняя часть устройства находилась на столе, мы получили бы значение оси Y –1.

Работа с акселерометром очень похожа на работу с другими датчиками. Всего несколько простых шагов, и мы получаем данные.

• Инициализируйте датчик.
• Если это доступно,
  
  • создайте обработчик события, измененный для чтения .
  • создать потрясенный обработчик событий
• В обработчиках событий возьмите данные с датчика и запишите их на экран.

Вот мой полный код, и он выглядит пугающе, как и другие датчики.

var _x, _y, _z, _wasShaken;

    function onReadingChanged(e) {
        _x.innerText = e.reading.accelerationX;
        _y.innerText = e.reading.accelerationY;
        _z.innerText = e.reading.accelerationZ;
    }

    function onShaken(e) {
        _wasShaken.innerText = e.timestamp;
    }

    function getDomElements() {
        _x = document.querySelector("#x");
        _y = document.querySelector("#y");
        _z = document.querySelector("#z");
        _wasShaken = document.querySelector("#shaken");
    }

    function startAccelerometer() {
        var acc = Windows.Devices.Sensors.Accelerometer.getDefault()

        if (acc) {
            var minimumReportInterval = acc.minimumReportInterval;
            var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 25;
            acc.reportInterval = reportInterval;

            acc.addEventListener("readingchanged", onReadingChanged);
            acc.addEventListener("shaken", onShaken)
        }
    }

    app.onloaded = function () {
        getDomElements();
        startAccelerometer();
    }

Опять же, никаких реальных сюрпризов здесь. Мы получаем наши данные в той же базовой форме, что и другие датчики. Теперь датчик акселерометра действительно представил новое событие под названием встряхивание . Это событие возникает, когда пользователь встряхивает свой компьютер. При написании этой статьи я использовал для тестирования оригинальную сборку планшета. Я встряхнул машину, но, к сожалению, не смог заставить событие сработать. В тот момент, когда я начал думать, что у меня нет датчика, который бы поддерживал это событие, я бросил машину на диван, и внезапно он сработал. Оказывается, я просто не держал это правильно.

Резюме

Сегодня мы кратко рассмотрели получение данных от нашего акселерометра. Работа с каждым из разных датчиков очень похожа. В конечном счете, как вы используете эти данные, именно здесь проявляется ваша креативность, и я с нетерпением жду возможности услышать, как вы будете использовать их в своем приложении.

Если вы хотите загрузить мой рабочий образец, использующий код из этой статьи, нажмите значок ниже:

Завтра мы посмотрим на гирометр. Увидимся позже!