HA文档 目录

  1. 主页
  2. HA文档
  3. HA文档
  4. 图形化控制界面(Floorplan)
  5. 动态的样式

动态的样式

这篇文章是系列文章的第5/6篇:

我们实现以下动态效果:

  • 当摄像头状态为idle时,显示为蓝灰色。
  • 当灯为打开状态的时候,蒙板完全透明(不透明度为0);当灯为关闭状态的时候,蒙板半透明(不透明度为0.7)。
  • 点击房间的时候,打开或关闭灯。
  • 温度值和湿度值显示时添加单位(°和%)。
  • 当温度值低于10时,使用低温色(蓝)显示温度;当温度值低于30时,使用中温色(灰绿)显示温度;其余的用高温色(火红)显示温度。
  • 当pm2.5小于15时,使用绿色显示;当pm2.5小于60时,使用灰绿色显示;当pm2.5大于60时,使用红色显示。

在floorplan.yaml文件中,我们定义在不同的情况下,要显示的样式(见文件中注释部分):

然后,我们在floorplan.css文件中添加这些样式的具体定义:

最终的效果:

遇到问题了?快来学习免费在线课程吧,博学老司机在线答疑,找到更多志同道合的HA玩家一起进步

此文不允许转载,如需转载请与BD@hachina.io联系。

这篇文章对您有用吗? 0 0