移动网络超级大国–环境光API

最新推荐文章于 2024-09-13 08:33:26 发布

dingshi7798

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量122

点赞数

文章标签： javascript 操作系统嵌入式 ViewUI

网络已经成为一个虚拟环境，带来了各种各样的体验。如果有人想在野餐会上讨论新的蝙蝠侠电影时，在他们的智能手机上查找有关本·阿弗莱克饰演蝙蝠侠的最新令人沮丧的言论。他们可以按照自己的意愿阅读尽可能多的评论。我们生活在一个这样的时代：作为开发人员，我们可以为公众提供补充其日常生活和随意兴趣的资源，知识和经验。借助新的设备API和传感器，我们开始看到可能使我们能够响应其环境，位置和设备状态的可能性。

设备API的世界发生了很多事情。对于像我这样热心的开发人员，有一个激动人心的机会开始探索我们如何使用这些即将到来的API来改善访问我们网站/网络应用程序的访问者的体验。

他们是否在黑暗的房间里，当他们访问我们的新“哥谭”电视节目迷时，不想在明亮的白色背景下燃烧视网膜吗？

他们是否可能在上述野餐中苦苦挣扎-在正午的阳光下at着我们的文字？

他们的手机电池是否即将用完，是否有可能在阅读最新的蝙蝠侠粉丝小说时不想播放哥谭城市天际线的流媒体视频背景？

在本系列文章中，我将介绍各种此类API，以及每个示例的演示和潜在用途。希望它将为即将到来的项目带来一些想法！

我们将从W3C Ambient Light API开始，它将使我们能够响应设备周围的光照水平。

Ambient Light API的基础

环境光API为开发人员提供了一种感知设备周围光强度的方法。它以勒克斯（光强度的国际度量单位）测量设备周围的光。 MDN关于使用光传感器的文章很好地概述了这些勒克斯值范围所代表的含义：

10〜50 lux：昏暗的环境

100〜1000 lux：正常

10000 lux：明亮

我建议您为每个实现对这些值进行一些反复试验。我在下面的演示中的亮度触发点略有不同。

浏览器兼容性

Ambient Light API仍处于早期阶段。在撰写本文时，仅Mac OS X上的Firefox 22和Android版的Firefox支持它。希望很快会得到进一步的支持，但是这种支持可能会逐渐降低–如果设备或浏览器不支持API，则会被忽略，而我们将继续存在，仿佛从未有过！对于使用受支持的浏览器的用户，我们将为他们提供更好的体验。

在JavaScript中使用这些值

要读取设备周围的光强度，请将事件侦听器添加到侦听称为devicelight的事件的window对象。此示例将以勒克斯为单位的值返回到console.log ：

window.addEventListener("devicelight", function (event) {
  var luminosity = event.value;
  console.log(luminosity);
});

在Mac OSX的Firefox上返回以下代码：
Firefox控制台

我们可以将此环境光API用于什么？

考虑一下这里的可能性，您可以进入响应式设计的全新领域。您不仅可以响应用户的视口大小和设备，还可以响应他们的环境是非常亮还是非常暗，然后进行相应的调整。

现在是演示时间！

为了展示此API的潜力，我们将从构建一个简单的一页网站开始，其中包含一些文本和一个svg图像。通过更改body标签上的类名，我们将能够操纵它们的外观。

我们将从一个非常基本的响应页面开始，没有任何Ambient Light API实现。该页面的一小段显示如下。有关完整的开始标记，请参见此Codepen 。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Ambient Light demo - Text changes</title>
  <style type="text/css">
    body {
      font-family: "Trebuchet MS", sans-serif;
      font-size: 16px;
      padding: 0 50px;
    }
    h1 {
      text-align: center;
    }

    @media all and (max-width: 960px) {
      body {
        padding: 0 25px;
      }
      svg {
        clear: both;
        display: block;
        float: none;
        margin: 0 auto;
        width: 80%;
      }
    }
  </style>
</head>
<body>
  <h1>The Gentlemen's Book of Etiquette and Manual of Politeness</h1>
  <svg><!-- our svg element here --></svg>
  <p>Man was not intended to live like a bear or a hermit, apart from others of his own nature, and, philosophy and reason will each agree with me, that man was born for sociability and finds his true delight in society. Society is a word capable...</p>
  ...
</body>
</html>

我们将通过添加在devicelight事件中读取的JavaScript并引入Ambient Light API调用，并tag depending on the luminosity value it receives:更改tag depending on the luminosity value it receives:的类名tag depending on the luminosity value it receives:

<script>
window.addEventListener("devicelight", function (event) {
    var luminosity = event.value;

    if (luminosity <= 5) {
      document.body.className = "darkness";
    } else if (luminosity <= 50) {
      document.body.className = "dim";
    } else if (luminosity <= 1000) {
      document.body.className = "bright";
    } else if (luminosity > 1000) {
      document.body.className = "ahhhmyeyes";
    }
  });
</script>

如果光线真的很暗，那么我们的设备似乎几乎处在漆黑的黑暗中（可能是在晚上，或者他们正处于黑暗的小巷里，即将阻止夜间的珠宝店抢劫）。对于这些设备，我们将背景色设置为深紫色，使文本和SVG图像的颜色变亮：

.darkness {
  background-color: #2d004f;
  color: #b5aaff;
}
.darkness svg path {
  stroke: #b5aaff;
  fill: #b5aaff;
}

在周围有一点光线的黑暗情况下，我们将背景变淡了一点紫色，同时也将文本变亮了：

.dim {
  background-color: #6600b4;
  color: #b5aaff;
}
.dim svg path {
  stroke: #c8c3ff;
  fill: #c8c3ff;
}

我们平均光线范围的颜色将是相对平静的紫色和深色文本。对于不支持该API的任何设备或该API尚未启动的时间，我还在我的body CSS定义中添加了相同的颜色。因此，这将是我们的默认样式集：

.average {
  background-color: #ab49f6;
  color: #333;
}
.average svg path {
  stroke: #333;
  fill: #333;
}

您可以通过同时定义body和.average样式，在一处定义所有这些样式。否则，您无法为.average设置任何样式，以使其恢复为body默认样式。这是个人喜好。在生产站点上，为了保持内容整洁和易于理解，我很想使用最后一个选项，而根本不定义.average 。对于示例，我已经对其进行了定义，以使所有浏览这些示例的人都可以清楚地看到它。

当它开始变亮时，我们将背景设为白色，并将文本和图像设置为黑色。我们还增加了字体大小，以使其更易于阅读：

.bright {
  background-color: #fff;
  color: #000;
  font-size: 20px;
}
.bright svg path {
  stroke: #000;
  fill: #000;
}

如果我们击中的亮度确实.bright ，我们将使用与.bright类相同的样式，但会增加字体大小：

.ahhhmyeyes {
  background-color: #fff;
  color: #000;
  font-size: 22px;
}
.ahhhmyeyes svg path {
  stroke: #000;
  fill: #000;
}

在行动

实际上，在进行测试时，确实有3个照明级别突出显示，因此我在下面提供了这些示例。

在相对平均的光线下（下图是坐在火车上拍摄的）：

平均照明

在户外非常明亮的条件下，我们的页面变得更易于阅读：

明亮的灯光

在非常黑暗的条件下，页面会变暗，因此我们不会使用户眼前一亮：

黑暗的灯光

平稳过渡

为确保颜色平滑变化并避免样式突然更改，我们在body标签的样式中添加了CSS过渡。通过列出要更改的特定属性，可以以更有效的方式完成此操作。为了简单起见，在此示例中，我坚持使用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过渡可以稍微缓解这种混乱。

在此Codepen中可以看到我们启用了 Ambient Light API的页面

精美的YouTube电影院

您知道电影院灯火通明时宣布电影开始的那欢乐时刻吗？我认为，用精美的红色窗帘打造自己的YouTube电影院将是一个有趣的演示想法。当您关闭自己的房间的灯光来观看视频时，电影院也将自己的灯光调暗。

在第二个演示中，我们上面的许多概念仍然非常相似。我们没有使用body元素，而是使用了一个名为.lights-off的新元素.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元素的不透明度增加到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 = "";
  }
});