CSS `Generic Sensor API` 数据在 CSS 变量中的实时应用：温度、湿度等

各位靓仔靓女，前端老司机们，晚上好！我是今天的主讲人，一个平平无奇的代码搬运工。今晚咱们聊点儿新鲜的，把CSS和硬件传感器勾搭起来，玩点儿真的！主题就是：CSS Generic Sensor API 数据在 CSS 变量中的实时应用，以温度、湿度为例。

开场白：别再说CSS只能写样式了！

一直以来，CSS在大家眼里就是个美颜相机，负责把HTML这张素颜照P得漂漂亮亮。但今天我要告诉你，CSS可不甘心只当个美工，它也想插手数据，想成为一个能感知世界的智慧美人！

Generic Sensor API 就是那个牵线搭桥的红娘，它允许咱们的网页直接读取设备上的各种传感器数据，比如温度、湿度、光线强度、加速度等等。然后呢，咱们再把这些数据塞进CSS变量里，让CSS根据这些真实的数据来改变样式！是不是听起来很刺激？

第一章：Generic Sensor API 初体验

首先，咱们得先认识一下这位红娘——Generic Sensor API。 它其实是一组接口，每种传感器都有自己对应的接口。

1.1 传感器类型：

传感器类型	描述
Accelerometer	加速度传感器，测量设备在三个轴向上的加速度。
Gyroscope	陀螺仪，测量设备在三个轴向上的角速度。
Magnetometer	磁力计，测量设备周围的磁场强度。
AmbientLightSensor	环境光传感器，测量周围环境的光照强度。
ProximitySensor	接近传感器，检测设备与物体之间的距离。
AbsoluteOrientationSensor	绝对方向传感器，提供设备在三维空间中的绝对方向。
RelativeOrientationSensor	相对方向传感器，提供设备相对于某个参考点的方向变化。
HumiditySensor	湿度传感器，测量环境湿度。
TemperatureSensor	温度传感器，测量环境温度。

1.2 传感器使用三部曲：

使用Generic Sensor API，一般来说分为以下三步：

1. 创建传感器对象： 告诉浏览器你想用哪个传感器。
2. 监听传感器数据： 传感器会不停地给你发数据，你得竖起耳朵听着。
3. 启动传感器： 告诉传感器：“哥们儿，开始干活吧！”

1.3 咱们来个简单的例子：获取温度

// 先检查浏览器是否支持 TemperatureSensor
if ('TemperatureSensor' in window) {
  // 创建温度传感器对象
  const sensor = new TemperatureSensor({ frequency: 1 }); // 每秒读取一次数据

  // 监听传感器错误
  sensor.onerror = (event) => {
    console.error("TemperatureSensor Error:", event.error.name, event.error.message);
  };

  // 监听传感器数据
  sensor.onreading = () => {
    const temperature = sensor.temperature;
    console.log(`Current temperature: ${temperature}°C`);

    // 在这里，我们可以把 temperature 值更新到 CSS 变量中
    document.documentElement.style.setProperty('--temperature', temperature);
  };

  // 启动传感器
  sensor.start();
} else {
  console.log("TemperatureSensor API not supported in this browser.");
}

代码解释：

• if ('TemperatureSensor' in window)：先检查浏览器是否支持 TemperatureSensor，防止代码在不支持的浏览器上报错。
• const sensor = new TemperatureSensor({ frequency: 1 });：创建一个 TemperatureSensor 对象，frequency: 1 表示每秒读取一次数据。frequency 控制数据更新的频率，单位是赫兹 (Hz)。
• sensor.onerror = (event) => { ... };：监听传感器错误，如果传感器出现问题，会触发这个事件。
• sensor.onreading = () => { ... };：监听传感器数据，每次传感器读取到新的温度数据，都会触发这个事件。sensor.temperature 属性就是当前的温度值。
• document.documentElement.style.setProperty('--temperature', temperature);：这一行是关键！它把读取到的温度值设置到了一个 CSS 变量 --temperature 中。

第二章：CSS 变量的妙用

现在，温度数据已经躺在 CSS 变量 --temperature 里了，接下来就要看CSS的表演了！

2.1 CSS 变量：让样式动起来

CSS 变量，又叫自定义属性，允许你在CSS中定义一些变量，然后在其他地方引用这些变量。这样，你就可以通过修改变量的值，来动态地改变样式，而不用修改大量的CSS代码。

2.2 举个栗子：用温度控制背景颜色

body {
  --temperature: 20; /* 默认温度，防止一开始没数据时样式出错 */
  background-color: hsl(calc(var(--temperature) * 3), 100%, 50%); /* HSL颜色模型 */
  transition: background-color 0.5s ease; /* 加个过渡效果，让颜色变化更平滑 */
}

代码解释：

• --temperature: 20;：定义了一个 CSS 变量 --temperature，并设置了初始值为 20。
• background-color: hsl(calc(var(--temperature) * 3), 100%, 50%);：使用 hsl() 函数来设置背景颜色。hsl() 函数接受三个参数：色相 (Hue)、饱和度 (Saturation) 和亮度 (Lightness)。
  • var(--temperature)：引用 CSS 变量 --temperature 的值。
  • calc(var(--temperature) * 3)：使用 calc() 函数来计算色相值。这里把温度值乘以 3，是为了让颜色变化更明显。
  • 100%, 50%：饱和度和亮度分别设置为 100% 和 50%。
• transition: background-color 0.5s ease;：添加一个过渡效果，让背景颜色在变化时有一个平滑的动画。

效果：

当温度升高时，背景颜色会从绿色逐渐变为红色；当温度降低时，背景颜色会从红色逐渐变为绿色。

2.3 进阶玩法：用温度控制字体大小、阴影、滤镜…

只要你能想到的CSS属性，都可以用温度来控制！比如：

• 字体大小： font-size: calc(16px + var(--temperature) * 0.2px);
• 阴影： box-shadow: 0 0 calc(var(--temperature) * 2px) rgba(0, 0, 0, 0.5);
• 模糊滤镜： filter: blur(calc(var(--temperature) * 0.1px));

第三章：湿度传感器的骚操作

有了温度传感器的经验，湿度传感器就简单多了！

3.1 获取湿度数据

if ('RelativeHumiditySensor' in window) {
  const sensor = new RelativeHumiditySensor({ frequency: 1 });

  sensor.onerror = (event) => {
    console.error("RelativeHumiditySensor Error:", event.error.name, event.error.message);
  };

  sensor.onreading = () => {
    const humidity = sensor.relativeHumidity;
    console.log(`Current humidity: ${humidity}%`);

    // 更新 CSS 变量
    document.documentElement.style.setProperty('--humidity', humidity);
  };

  sensor.start();
} else {
  console.log("RelativeHumiditySensor API not supported in this browser.");
}

3.2 用湿度控制水滴效果

.water-drop {
  --humidity: 50; /* 默认湿度 */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #4682B4; /* 蓝色 */
  opacity: calc(var(--humidity) / 100); /* 湿度越高，水滴越明显 */
  transition: opacity 0.5s ease;
}

效果：

当湿度升高时，水滴的透明度会降低，看起来更明显；当湿度降低时，水滴的透明度会升高，看起来更模糊。

第四章：更高级的玩法：数据映射和转换

有时候，传感器返回的数据范围可能不符合你的需求，比如温度范围是 -20°C 到 40°C，但你希望把这个范围映射到 0 到 1 之间，用来控制某个CSS属性。 这时候，就需要用到数据映射和转换。

4.1 数据映射函数

function map(value, fromLow, fromHigh, toLow, toHigh) {
  // 将一个范围内的值映射到另一个范围内
  return (value - fromLow) * (toHigh - toLow) / (fromHigh - fromLow) + toLow;
}

代码解释：

• map(value, fromLow, fromHigh, toLow, toHigh)：接受五个参数：
  • value：要映射的值。
  • fromLow：原始范围的最小值。
  • fromHigh：原始范围的最大值。
  • toLow：目标范围的最小值。
  • toHigh：目标范围的最大值。
• 这个函数会将 value 从 [fromLow, fromHigh] 范围映射到 [toLow, toHigh] 范围。

4.2 例子：把温度映射到 0 到 1 之间，控制模糊滤镜

if ('TemperatureSensor' in window) {
  const sensor = new TemperatureSensor({ frequency: 1 });

  sensor.onerror = (event) => {
    console.error("TemperatureSensor Error:", event.error.name, event.error.message);
  };

  sensor.onreading = () => {
    const temperature = sensor.temperature;

    // 将温度从 -20°C 到 40°C 映射到 0 到 1 之间
    const mappedValue = map(temperature, -20, 40, 0, 1);

    // 更新 CSS 变量
    document.documentElement.style.setProperty('--blur-amount', mappedValue);
  };

  sensor.start();
} else {
  console.log("TemperatureSensor API not supported in this browser.");
}

.blurred-image {
  --blur-amount: 0; /* 默认模糊值 */
  filter: blur(calc(var(--blur-amount) * 10px)); /* 模糊程度 */
  transition: filter 0.5s ease;
}

效果：

当温度为 -20°C 时，图片完全清晰；当温度为 40°C 时，图片模糊程度最大。

第五章：注意事项和兼容性

虽然Generic Sensor API很酷，但也有一些需要注意的地方：

• 权限问题： 浏览器会询问用户是否允许访问传感器数据。如果用户拒绝，你就拿不到数据。
• 兼容性： Generic Sensor API 的兼容性还不是很好，有些浏览器不支持。所以，在使用之前一定要做兼容性判断。
• 安全问题： 传感器数据可能会泄露用户的隐私，所以要谨慎使用，不要滥用。

5.1 兼容性检测

除了在 if ('TemperatureSensor' in window) 中进行简单的检测外，还可以使用更全面的方法：

if (typeof Sensor === 'undefined') {
  console.log('Generic Sensor API is not supported.');
} else if (typeof TemperatureSensor === 'undefined') {
  console.log('TemperatureSensor API is not supported.');
} else {
  // 传感器API可用
}

5.2 安全性提示

始终向用户明确说明你正在使用传感器数据，以及如何使用这些数据。 尽量减少收集的数据量，只收集必要的数据。 遵守相关的隐私法规。

第六章：总结和展望

今天，咱们一起探索了Generic Sensor API和CSS变量的结合，看到了CSS不仅仅能美化页面，还能感知世界，根据真实数据来改变样式。

虽然目前Generic Sensor API的兼容性还不是完美，但它代表了Web开发的未来趋势：让Web应用更加智能化、更加个性化、更加贴近用户的生活。

想象一下，未来的网页可以根据你的体温自动调整字体颜色，根据你的心情自动播放音乐，根据你周围的光线自动调整亮度… Web开发的想象空间是无限的！

结尾：

希望今天的分享能给你带来一些启发。 别忘了，技术是死的，人是活的。 大胆尝试，勇于创新，你也能用Generic Sensor API和CSS创造出更多令人惊艳的作品！

下课！ 祝大家编码愉快，永不加班！ 拜拜！