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

2023-10-10 21:30
文章标签 手机 网络 api 环境光 移动 超级大国

本文主要是介绍手机移动网络 api_移动网络超级大国–环境光API，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

手机移动网络 api

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

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

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

他们是否可能在上述野餐中苦苦挣扎-在正午的阳光下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调用 标签取决于其接收的亮度值： 

<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>

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

如果光线真的很暗，则我们的设备似乎处于几乎漆黑的黑暗中（可能是在晚上，或者它们处于黑暗的小巷中，即将阻止夜店抢劫珠宝）。 对于这些设备，我们将背景色设置为深紫色，使文本和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类相同的样式，但是我们将字体大小增加一些： 

.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 = "";
}
});

这是什么样子

我们的之前（点亮）和之后（熄灭），两个示例均显示：
之前和之后

您可以直接在此处查看该演示的实际运行： http : //codepen.io/patrickcatanzariti/pen/uxEkc 。

紫页？ 电影院？ 认真吗 你为什么还要这个？

现实世界中的用法不必像我的文字示例一样丰富多彩。 您应该以精妙为目标：

  • 与其在弱光下切换为深紫色，不如将背景切换为浅灰色而不是白色。
  • 您可以调低所有明亮的按钮，字体图标或SVG图标也可以更改。
  • 在非常明亮的情况下，您可以尝试增加颜色之间的对比度。 与其使用彩色的号召性用语按钮，不如将其更改为黑色或白色，或者为文本提供更深的颜色，并为按钮提供更浅的背景。

物联网可能只是喜欢这个

在物联网领域的设备上可能会使用这样的想法。 我想到的几种可能性：

  • 由网络驱动的整个家庭墙壁上的触摸屏控件，根据房间的光线水平而显示不同。
  • 用于电视或空调的远程控制移动网络应用程序，当房间变黑时提供黑色的界面，而当房间点亮时提供较亮的界面。
  • 诸如家庭安全系统或电话会议系统之类的视频流应用程序会根据房间的光线水平自动增加视频播放的对比度和/或亮度。

结论

Ambient Light API是一个小而有效的功能，可针对您的设备在当今我们所使用的环境不断扩大的情况下添加到您的武器库中。 它为我们提供了极少的额外信息，这些信息可能会产生巨大的变化。 希望随着我们设备功能的发展为您提供帮助，减轻在中午sun着眼睛笨拙地斜看手机的烦恼。

这只是其中的许多新设备API之一，请留意我的下一篇文章，在该文章中我将探讨另一种API，它将为开发人员带来更多新的潜力。

有您想了解更多有关特定API的信息吗？ 将您的想法留在下面的评论中。

其他资源

对于那些有兴趣有关Ambient Light API的人，这里有一些有用的链接：

  • http://www.w3.org/TR/ambient-light/ –关于环境光的W3C候选建议
  • https://developer.mozilla.org/zh-CN/Apps/Build/gather_and_modify_data/Responding_to_light_conditions –关于“响应光照条件”的MDN文章
  • https://developer.mozilla.org/zh-CN/docs/Web/API/DeviceLightEvent/Using_light_sensors –有关“使用光传感器”的MSN文章。
  • https://developer.mozilla.org/zh-CN/docs/WebAPI/Using_Light_Events –关于“使用灯光事件”的MDN文章

翻译自: https://www.sitepoint.com/mobile-web-superpowers-ambient-light-api/

手机移动网络 api

这篇关于手机移动网络 api_移动网络超级大国–环境光API的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/183202。

相关文章

5分钟获取deepseek api并搭建简易问答应用

5分钟获取deepseek api并搭建简易问答应用

《5分钟获取deepseekapi并搭建简易问答应用》本文主要介绍了5分钟获取deepseekapi并搭建简易问答应用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需... 目录1、获取api2、获取base_url和chat_model3、配置模型参数方法一：终端中临时将加
阅读更多...
使用DeepSeek API 结合VSCode提升开发效率

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》：本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.
阅读更多...
使用SpringBoot创建一个RESTful API的详细步骤

使用SpringBoot创建一个RESTful API的详细步骤

《使用SpringBoot创建一个RESTfulAPI的详细步骤》使用Java的SpringBoot创建RESTfulAPI可以满足多种开发场景,它提供了快速开发、易于配置、可扩展、可维护的优点,尤... 目录一、创建 Spring Boot 项目二、创建控制器类（Controller Class）三、运行
阅读更多...
SSID究竟是什么? WiFi网络名称及工作方式解析

SSID究竟是什么? WiFi网络名称及工作方式解析

《SSID究竟是什么?WiFi网络名称及工作方式解析》SID可以看作是无线网络的名称，类似于有线网络中的网络名称或者路由器的名称,在无线网络中，设备通过SSID来识别和连接到特定的无线网络... 当提到 Wi-Fi 网络时，就避不开「SSID」这个术语。简单来说，SSID 就是 Wi-Fi 网络的名称。比如
阅读更多...
Java实现任务管理器性能网络监控数据的方法详解

Java实现任务管理器性能网络监控数据的方法详解

《Java实现任务管理器性能网络监控数据的方法详解》在现代操作系统中,任务管理器是一个非常重要的工具,用于监控和管理计算机的运行状态,包括CPU使用率、内存占用等,对于开发者和系统管理员来说,了解这些... 目录引言一、背景知识二、准备工作1. Maven依赖2. Gradle依赖三、代码实现四、代码详解五
阅读更多...
你的华为手机升级了吗? 鸿蒙NEXT多连推5.0.123版本变化颇多

你的华为手机升级了吗? 鸿蒙NEXT多连推5.0.123版本变化颇多

《你的华为手机升级了吗?鸿蒙NEXT多连推5.0.123版本变化颇多》现在的手机系统更新可不仅仅是修修补补那么简单了，华为手机的鸿蒙系统最近可是动作频频，给用户们带来了不少惊喜... 为了让用户的使用体验变得很好，华为手机不仅发布了一系列给力的新机，还在操作系统方面进行了疯狂的发力。尤其是近期，不仅鸿蒙O
阅读更多...
Linux 网络编程 --- 应用层

Linux 网络编程 --- 应用层

一、自定义协议和序列化反序列化 代码： 序列化反序列化实现网络版本计算器 二、HTTP协议 1、谈两个简单的预备知识 https://www.baidu.com/ --- 域名 --- 域名解析 --- IP地址 http的端口号为80端口，https的端口号为443 url为统一资源定位符。CSDNhttps://mp.csdn.net/mp_blog/creation/editor
阅读更多...
ASIO网络调试助手之一：简介

ASIO网络调试助手之一：简介

多年前，写过几篇《Boost.Asio C++网络编程》的学习文章，一直没机会实践。最近项目中用到了Asio，于是抽空写了个网络调试助手。 开发环境： Win10 Qt5.12.6 + Asio(standalone) + spdlog 支持协议： UDP + TCP Client + TCP Server 独立的Asio（http://www.think-async.com）只包含了头文件，不依
阅读更多...
poj 3181 网络流，建图。

poj 3181 网络流，建图。

题意： 农夫约翰为他的牛准备了F种食物和D种饮料。 每头牛都有各自喜欢的食物和饮料，而每种食物和饮料都只能分配给一头牛。 问最多能有多少头牛可以同时得到喜欢的食物和饮料。 解析： 由于要同时得到喜欢的食物和饮料，所以网络流建图的时候要把牛拆点了。 如下建图： s -> 食物 -> 牛1 -> 牛2 -> 饮料 -> t 所以分配一下点： s  =  0， 牛1= 1~
阅读更多...
poj 3068 有流量限制的最小费用网络流

poj 3068 有流量限制的最小费用网络流

题意： m条有向边连接了n个仓库，每条边都有一定费用。 将两种危险品从0运到n-1，除了起点和终点外，危险品不能放在一起，也不能走相同的路径。 求最小的费用是多少。 解析： 抽象出一个源点s一个汇点t，源点与0相连，费用为0，容量为2。 汇点与n - 1相连，费用为0，容量为2。 每条边之间也相连，费用为每条边的费用，容量为1。 建图完毕之后，求一条流量为2的最小费用流就行了
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2