Статьи

31 день Windows 8 для HTML5 | День № 24: Датчик света

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

advertisementsample

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

Я позволил Джеффу собрать еще одно ужасно созданное видео, чтобы показать вам, как работает датчик освещенности и какие значения мы можем ожидать. Чтобы заставить это приложение работать, мы будем следовать схеме, очень похожей на ту, которую мы использовали вчера для датчика компаса .

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

Вот мой полный код, и он выглядит страшно похожим на компас.

var _light;

function onReadingChanged(e) {
    _light.innerText = e.reading.illuminanceInLux.toFixed(2);
}

function startLightSensor() {
    var lightSensor = Windows.Devices.Sensors.LightSensor.getDefault();

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

        lightSensor.addEventListener("readingchanged", onReadingChanged);
    }
}

function getDomElements() {
    _light = document.querySelector("#light");
}

app.onready = function () {
    getDomElements();
    startLightSensor();
}

Нет ничего удивительного в получении этих данных, но я был удивлен, увидев, насколько разными могут быть значения на разных машинах (которые сидели рядом). Например, мое устройство Qualcomm ARM (устройство, показанное на видео выше) в общем оценивало комнату, в которой я сейчас нахожусь, около 59 люкс. Однако мой планшет Samsung, который является устройством Windows 8 Pro, оценивает этот номер примерно в 42 люкс. Наконец, мое устройство Surface RT говорит, что это место составляет около 115 люкс.

Вероятно, это связано с точностью и качеством датчика освещенности в каждом устройстве, но в целом они действительно не так уж далеки друг от друга по шкале значений люкс. Вот пример из статьи Википедии о Lux .

24-XAML-LuxChart

Как видите, даже 100 люкс — это довольно тусклая стоимость. Просто включив выключатель освещения в моем офисе, вы подняли значения моего датчика ближе к 175. Однако, используя приведенную выше таблицу, вы сможете создавать «диапазоны» значений, которые ведут себя по-разному в зависимости от доступной яркости света.

Например, если вы узнаете, что пользователь находится в условиях низкой освещенности, вы можете переключить его отображение, чтобы оно показывало темный фон и белый текст, потому что его легче читать при таком освещении. В светлой комнате вы можете переключиться на черный текст на белом фоне.

В любом случае вы теперь знаете, как распознать данные от датчика освещенности и эффективно использовать их в своем приложении.

Резюме

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

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

downloadHTML

Завтра мы собираемся подключиться к более надежному датчику, Акселерометру. Мы можем использовать эти данные для определения ротации устройства пользователя. Увидимся позже!

downloadTheTools