Мобильные веб-суперспособности — Ambient Light API

Среднее освещение

В очень ярких условиях на улице нашу страницу легче читать:

Яркое освещение

В очень темных условиях страница становится темнее, поэтому мы не ослепляем наших пользователей ярким светом:

Темное освещение

Получение плавного перехода

Чтобы обеспечить плавное изменение цветов и избежать резких изменений стиля, мы добавляем CSS-переходы к стилям тега body . Это можно сделать более эффективным способом, перечислив конкретные свойства, которые вы будете изменять. Для простоты в этом примере я придерживался all :

 -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; 

Переходы также помогают понять, что пользователь не был перемещен на другой веб-сайт. Внезапное изменение черно-белого дизайна на цветной может легко запутать пользователей. Я считаю, что CSS-переходы немного облегчают эту путаницу.

Нашу страницу с возможностями Ambient Light API можно увидеть в действии в этом Codepen

Тонкое кино YouTube

Вы знаете тот радостный момент, когда огни кино тускнеют, объявляя о начале вашего фильма? Я подумал, что будет забавной демонстрационной идеей создать свой собственный кинотеатр на YouTube, дополненный модными красными шторами. Когда вы выключаете освещение своей комнаты, чтобы посмотреть видео, кинотеатр тоже тускнеет.

Многие из наших вышеупомянутых концепций остаются довольно схожими для этой второй демонстрации. Вместо того, чтобы воздействовать на элемент body , мы используем новый элемент с именем .lights-off который используется в качестве фиксированной черной обложки позади видео.

 <div class="lights-off"></div> <h1>YouTube Cinema</h1> <div class="youtube-video"> <iframe width="640" height="360" src="//www.youtube.com/embed/3wyXaAXajhc" frameborder="0" allowfullscreen></iframe> </div> 

Все начинается совершенно прозрачно, поэтому наши красивые шторы просвечивают:

 .lights-off { background-color: #000; height: 100%; left: 0; opacity: 0; position: fixed; top: 0; width: 100%; z-index: -1; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } 

Затем я применяю класс .darkness который увеличивает .lights-off нашего .lights-off до 70%. Это имеет эффект затемнения света:

 .darkness .lights-off { opacity: 0.7; } 

Наш JS тоже становится намного короче:

 window.addEventListener("devicelight", function (event) { var luminosity = event.value; if (luminosity <= 5) { document.body.className = "darkness"; } else { document.body.className = ""; } }); 

Как это выглядит?

Наши до (горит) и после (гаснет) оба примера показывают:

Вы можете проверить это демо в действии прямо здесь: http://codepen.io/patrickcatanzariti/pen/uxEkc .

Фиолетовые страницы? Кино? Шутки в сторону? Зачем вам это нужно?

Использование в реальном мире не должно быть таким ярким, как мой текстовый пример. Вы должны стремиться к тонкости:

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

Интернет вещей может просто полюбить это

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

• Сенсорный экран на стенах вашего дома работает от сети и отображается по-разному в зависимости от уровня освещенности комнаты.
• Мобильное веб-приложение с дистанционным управлением для вашего телевизора или кондиционера, которое обеспечивает темный интерфейс, когда комната абсолютно черная, и более яркий интерфейс, когда комната освещена.
• Приложения для потокового видео, такие как системы домашней безопасности или системы телеконференций, которые автоматически увеличивают контраст и / или яркость воспроизведения видео в зависимости от уровня освещенности в комнате.

Вывод

Ambient Light API - это небольшая, но эффективная функциональность, которую можно добавить в свой арсенал в условиях растущего диапазона сред, в которых наши устройства используются сегодня. Он предоставляет нам крошечную дополнительную информацию, которая может иметь огромное значение. Будем надеяться, что скоро очень неловкие взгляды на ваш телефон под полуденным солнцем уменьшатся по мере того, как будут расширяться возможности нашего устройства.

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

У вас есть конкретный API, о котором вы хотите узнать больше? Оставьте свои мысли в комментариях ниже.

Другие источники

Для тех, кто хочет больше узнать об API Ambient Light, вот несколько полезных ссылок:

• http://www.w3.org/TR/ambient-light/ - Рекомендация кандидата W3C для рассеянного света
• https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/Responding_to_light_conditions - статья MDN «Ответ на условия освещения»
• https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent/Using_light_sensors - статья MSN «Использование датчиков света».
• https://developer.mozilla.org/en-US/docs/WebAPI/Using_Light_Events - статья MDN «Использование легких событий»