教程：Floorplan之动态的样式

我们实现以下动态效果：

当摄像头状态为idle时，显示为蓝灰色。

当灯为打开状态的时候，蒙板完全透明（不透明度为0）；当灯为关闭状态的时候，蒙板半透明（不透明度为0.7）。

点击房间的时候，打开或关闭灯。

温度值和湿度值显示时添加单位（°和%）。

当温度值低于10时，使用低温色（蓝）显示温度；当温度值低于30时，使用中温色（灰绿）显示温度；其余的用高温色（火红）显示温度。

当pm2.5小于15时，使用绿色显示；当pm2.5小于60时，使用灰绿色显示；当pm2.5大于60时，使用红色显示。

在floorplan.yaml文件中，我们定义在不同的情况下，要显示的样式（见文件中注释部分）：

      name: Demo Floorplan
      image: /local/custom_ui/floorplan/floorplan.svg
      stylesheet: /local/custom_ui/floorplan/floorplan.css
      
      warnings:
      pan_zoom:
      hide_app_toolbar:
      date_format: DD-MMM-YYYY
      
      last_motion_entity: sensor.template_last_motion
      last_motion_class: last-motion
 
      groups:
        - name: Cameras
          entities:
            - camera.camera1
          # 当摄像头的状态为idle的时候，我们选择使用样式“my-camera-idle”
          states:
            - state: 'idle'
              class: 'my-camera-idle'
 
        - name: Lights
          entities:
             - light.bed_room
             - light.living_room1
             - light.living_room2
             - light.bathroom
             - light.kitchen
          # 根据灯的状态，选择使用“my-light-on”或“my-light-off”样式
          states:
            - state: 'on'
              class: 'my-light-on'
            - state: 'off'
              class: 'my-light-off'
          # 当被点击时，调用homeassistant.toggle这个服务
          action:
            domain: homeassistant
            service: toggle
 
        - name: Humidity
          entities:
             - sensor.hachina_humidity
             - sensor.humidity1
          # 如果有湿度值，为湿度值加上%；如果没有湿度值，显示“未知”
          text_template: '${entity.state ? entity.state+"%" : "未知"}'
 
        - name: Temperature
          entities:
             - sensor.hachina_temperature
             - sensor.temperature1
          # 为温度值加上单位°，或显示为未知
          text_template: '${entity.state ? entity.state+"°" : "未知"}'
          # 温度值小于10度，使用低温（my-temp-low）样式显示；
          # 温度值小于30度，使用中温（my-temp-medium）样式显示；
          # 其它，使用高温（my-temp-high）样式显示；
          class_template: '
            var temp = parseFloat(entity.state);
            if (temp < 10)
              return "my-temp-low";
            else if (temp < 30)
              return "my-temp-medium";
            else
              return "my-temp-high";
            '
 
        - name: PM25
          entities:
             - sensor.hachina_pm25
          class_template: '
            var pm = parseFloat(entity.state);
          # pm2.5值小于15，使用空气好（my-air-good）样式显示；
          # pm2.5值小于60，使用空气一般（my-air-soso）样式显示；
          # 其它，使用空气差（my-air-bad）样式显示；
            if (pm < 15)
              return "my-air-good";
            else if (pm < 60)
              return "my-air-soso";
            else
              return "my-air-bad";

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

.my-camera-idle {
  fill: #6FAECE !important;
}
 
.my-light-off {
  fill-opacity: 0.7 !important;
}
 
.my-light-on {
  fill-opacity: 0 !important;
}
 
.my-temp-low {
  fill: #99ccff !important;
}
 
.my-temp-medium {
  fill: #66cc66 !important;
}
 
.my-temp-high {
  fill: #ff6600 !important;
}
 
.my-air-good {
  fill: #00ff00 !important;
}
 
.my-air-soso {
  fill: #66cc66 !important;
}
 
.my-air-bad {
  fill: #ff0000 !important;
}

最终的效果：