手机移动网络 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。

相关文章

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的最小费用流就行了
阅读更多...
poj 2112 网络流+二分

poj 2112 网络流+二分

题意： k台挤奶机，c头牛，每台挤奶机可以挤m头牛。 现在给出每只牛到挤奶机的距离矩阵，求最小化牛的最大路程。 解析： 最大值最小化，最小值最大化，用二分来做。 先求出两点之间的最短距离。 然后二分匹配牛到挤奶机的最大路程，匹配中的判断是在这个最大路程下，是否牛的数量达到c只。 如何求牛的数量呢，用网络流来做。 从源点到牛引一条容量为1的边，然后挤奶机到汇点引一条容量为m的边
阅读更多...
我在移动打工的日志

我在移动打工的日志

客户：给我搞一下录音 我：不会。不在服务范围。 客户：是不想吧 我：笑嘻嘻（气笑） 客户：小姑娘明明会，却欺负老人 我：笑嘻嘻 客户：那我交话费 我：手机号 客户：给我搞录音 我：不会。不懂。没搞过。 客户：那我交话费 我：手机号。这是电信的啊！！我这是中国移动！！ 客户：我不管，我要充话费，充话费是你们的 我：可是这是移动！！中国移动！！ 客户：我这是手机号 我：那又如何，这是移动！你是电信！！
阅读更多...
用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

上回我们学到创建一个地形和一个人物，今天我们实现一下人物实现移动和跳起，依次点击，我们准备创建一个C#文件 创建好我们点击进去，就会跳转到我们的Vision Studio，然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类，继承自MonoBehaviour{private Rigidbo
阅读更多...
配置InfiniBand (IB) 和 RDMA over Converged Ethernet (RoCE) 网络

配置InfiniBand (IB) 和 RDMA over Converged Ethernet (RoCE) 网络

配置InfiniBand (IB) 和 RDMA over Converged Ethernet (RoCE) 网络 服务器端配置 在服务器端，你需要确保安装了必要的驱动程序和软件包，并且正确配置了网络接口。 安装 OFED 首先，安装 Open Fabrics Enterprise Distribution (OFED)，它包含了 InfiniBand 所需的驱动程序和库。 sudo
阅读更多...
cell phone teardown 手机拆卸

cell phone teardown 手机拆卸

tweezer 镊子 screwdriver 螺丝刀 opening tool 开口工具 repair 修理 battery 电池 rear panel 后盖 front and rear cameras 前后摄像头 volume button board 音量键线路板 headphone jack 耳机孔 a cracked screen 破裂屏 otherwise non-functiona
阅读更多...
【机器学习】高斯网络的基本概念和应用领域

【机器学习】高斯网络的基本概念和应用领域

引言 高斯网络（Gaussian Network）通常指的是一个概率图模型，其中所有的随机变量（或节点）都遵循高斯分布 文章目录 引言一、高斯网络（Gaussian Network）1.1 高斯过程（Gaussian Process）1.2 高斯混合模型（Gaussian Mixture Model）1.3 应用1.4 总结 二、高斯网络的应用2.1 机器学习2.2 统计学2.3
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2