Hướng dẫn làm pin thay đổi theo thời gian và thời tiết cơ bản

Xin chào các bạn, trong các bài viết trước mình hướng dẫn tạo viên pin bằng Card hiển thị Pin chuyển động (fluid-level-background-card). Nay buồn quá thích nó màu mè thêm mình làm cho nó hiển thị thay đổi theo thời gian và thời tiết bên ngoài, và đây là bài viết hướng dẫn cách làm cho bạn nào thích tọc mạch.

Table of Contents

Yêu cầu cần thiết

Bạn phải hoàn thành viên pin ở bài viết hướng dẫn này trước khi làm tiếp nhé.

Card hiển thị Pin chuyển động (fluid-level-background-card)

Để hiển thị được bạn phải có biến trợ giúp điều khiển hiển thị
Tự động hóa điều khiển biến trợ giúp trên

Tạo biến trợ giúp phục vụ hiển thị

Mình sử dụng 6 biến trợ giúp dưới đây giúp nhận diện tình hình thời gian thời tiết để hiển thị ra ngoài

Cách tạo các biến trợ giúp này các bạn hãy vào Cài đặt -> Thiết bị và dịch vụ -> Biến trợ giúp. Sau đó bấm vào nút Tạo biến trợ giúp loại biến trợ giúp là công tắc. Sau đó đặt tên giống như hình bên trên của mình để sau này dùng code khỏi cần chỉnh sửa.

Tạo biến trợ giúp điều khiển chỉ 1 công tắc được bật

Vì khi hiển thị mình chỉ được hiện một ảnh nên mình sẽ làm một tự động hóa chỉ cho phép bật 1 công tắc duy nhất trong số 6 công tắc vừa tạo ở trên.
Các bạn vào Cài đặt -> Tự động hóa và Cảnh tạo tự động hóa mới sau đó dán đoạn code Yaml này vào

YAML

alias: Chỉ hiện 1 pin
description: ""
triggers:
  - entity_id:
      - input_boolean.hien_pin_dem
      - input_boolean.hien_pin_mua
      - input_boolean.hien_pin_sunrise_sunset
      - input_boolean.hien_pin_ngay
      - input_boolean.hien_pin_mua_giong
      - input_boolean.hien_pin_may
    to: "on"
    trigger: state
actions:
  - data:
      entity_id: |
        {% set id = trigger.entity_id %} {% set all = [
          'input_boolean.hien_pin_dem',
          'input_boolean.hien_pin_mua',
          'input_boolean.hien_pin_sunrise_sunset',
          'input_boolean.hien_pin_ngay',
          'input_boolean.hien_pin_mua_giong',
          'input_boolean.hien_pin_may'
        ] %} {{ all | reject('equalto', id) | list }}
    action: input_boolean.turn_off
mode: single

Xong phần cho phép 1 công tắt duy nhất trong nhóm được bật.

Tạo tự động hóa điều khiển công tắc theo thời gian và thời tiết

Phần này là phần phức tạp nè. Phiên bản đơn giản hơn ở cuối bài viết. Bạn cần xác nhận cho mình cái biến điều khiển thời tiết của nhà bạn là gì nhé. Ví dụ của mình là weather.forecast_nha các bạn ghi chú nó lại để cần dùng.
Dưới đây là tự động hóa điều khiển công tắc theo thời gian và thời tiết.

YAML

alias: Điều khiển hiển thị Card thông tin theo thời tiết và thời gian
description: >-
  Tự động bật/tắt các input_boolean để hiển thị card phù hợp dựa trên thời tiết,
  thời gian và mức độ ưu tiên.
triggers:
  – entity_id: weather.forecast_nha
    trigger: state
  – minutes: /1
    trigger: time_pattern
  – event: start
    trigger: homeassistant
actions:
  – target:
      entity_id:
        – input_boolean.hien_pin_mua_giong
        – input_boolean.hien_pin_mua
        – input_boolean.hien_pin_may
        – input_boolean.hien_pin_ngay
        – input_boolean.hien_pin_sunrise_sunset
        – input_boolean.hien_pin_dem
    action: input_boolean.turn_off
    data: {}
  – choose:
      – conditions:
          – condition: state
            entity_id: weather.forecast_nha
            state: lightning-rainy
        sequence:
          – target:
              entity_id: input_boolean.hien_pin_mua_giong
            action: input_boolean.turn_on
            data: {}
      – conditions:
          – condition: state
            entity_id: weather.forecast_nha
            state: rainy
        sequence:
          – target:
              entity_id: input_boolean.hien_pin_mua
            action: input_boolean.turn_on
            data: {}
      – conditions:
          – condition: time
            after: “08:00:00”
            before: “16:00:00”
          – condition: state
            entity_id: weather.forecast_nha
            state: cloudy
        sequence:
          – target:
              entity_id: input_boolean.hien_pin_may
            action: input_boolean.turn_on
            data: {}
      – conditions:
          – condition: time
            after: “08:00:00”
            before: “16:00:00”
        sequence:
          – target:
              entity_id: input_boolean.hien_pin_ngay
            action: input_boolean.turn_on
            data: {}
      – conditions:
          – condition: or
            conditions:
              – condition: time
                after: “05:00:00”
                before: “08:00:00”
              – condition: time
                after: “16:00:00”
                before: “18:00:00”
        sequence:
          – target:
              entity_id: input_boolean.hien_pin_sunrise_sunset
            action: input_boolean.turn_on
            data: {}
      – conditions:
          – condition: or
            conditions:
              – condition: time
                after: “18:00:00”
              – condition: time
                before: “05:00:00”
        sequence:
          – target:
              entity_id: input_boolean.hien_pin_dem
            action: input_boolean.turn_on
            data: {}
mode: single

alias: Điều khiển hiển thị Card thông tin theo thời tiết và thời gian
description: >-
  Tự động bật/tắt các input_boolean để hiển thị card phù hợp dựa trên thời tiết,
  thời gian và mức độ ưu tiên.
triggers:
  - entity_id: weather.forecast_nha
    trigger: state
  - minutes: /1
    trigger: time_pattern
  - event: start
    trigger: homeassistant
actions:
  - target:
      entity_id:
        - input_boolean.hien_pin_mua_giong
        - input_boolean.hien_pin_mua
        - input_boolean.hien_pin_may
        - input_boolean.hien_pin_ngay
        - input_boolean.hien_pin_sunrise_sunset
        - input_boolean.hien_pin_dem
    action: input_boolean.turn_off
    data: {}
  - choose:
      - conditions:
          - condition: state
            entity_id: weather.forecast_nha
            state: lightning-rainy
        sequence:
          - target:
              entity_id: input_boolean.hien_pin_mua_giong
            action: input_boolean.turn_on
            data: {}
      - conditions:
          - condition: state
            entity_id: weather.forecast_nha
            state: rainy
        sequence:
          - target:
              entity_id: input_boolean.hien_pin_mua
            action: input_boolean.turn_on
            data: {}
      - conditions:
          - condition: time
            after: "08:00:00"
            before: "16:00:00"
          - condition: state
            entity_id: weather.forecast_nha
            state: cloudy
        sequence:
          - target:
              entity_id: input_boolean.hien_pin_may
            action: input_boolean.turn_on
            data: {}
      - conditions:
          - condition: time
            after: "08:00:00"
            before: "16:00:00"
        sequence:
          - target:
              entity_id: input_boolean.hien_pin_ngay
            action: input_boolean.turn_on
            data: {}
      - conditions:
          - condition: or
            conditions:
              - condition: time
                after: "05:00:00"
                before: "08:00:00"
              - condition: time
                after: "16:00:00"
                before: "18:00:00"
        sequence:
          - target:
              entity_id: input_boolean.hien_pin_sunrise_sunset
            action: input_boolean.turn_on
            data: {}
      - conditions:
          - condition: or
            conditions:
              - condition: time
                after: "18:00:00"
              - condition: time
                before: "05:00:00"
        sequence:
          - target:
              entity_id: input_boolean.hien_pin_dem
            action: input_boolean.turn_on
            data: {}
mode: single

Các bạn thay thế weather.forecast_nha bằng thực thể dự báo thời tiết của bạn đang dùng. và chuyển sang bước cuối cùng

Card hiển thị pin theo thời gian và thời tiết

Đây là phần hiển thị card được dán ở trang hiển thị các bạn chỉ việc tạo card và dán mã bên dưới

type: horizontal-stack
cards:
  – type: picture-elements
    elements:
      – type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 58%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              –ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.3% !important;
              height: 49% !important;
              position: relative !important;
              border-radius: 15px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.7;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          – color: rgb(242, 17, 17)
            value: 0
          – color: rgb(245, 210, 37)
            value: 25
          – color: rgb(28, 198, 255)
            value: 40
          – color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: “110”
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: “”
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states[‘sensor.soc_giao_tiep’].state); ]]]
          styles:
            state:
              – font-family: DigitFont
              – font-size: 30px
              – color: “#fff”
          card:
            – border: none
            – box-shadow: none
            – height: 180px
            – padding: 16px
    image: https://bachtran.net/media/bat-light.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      – condition: state
        entity: input_boolean.hien_pin_ngay
        state: “on”
  – type: picture-elements
    elements:
      – type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 58%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              –ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.3% !important;
              height: 49% !important;
              position: relative !important;
              border-radius: 15px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.3;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          – color: rgb(242, 17, 17)
            value: 0
          – color: rgb(245, 210, 37)
            value: 25
          – color: rgb(28, 198, 255)
            value: 40
          – color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: “110”
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: “”
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states[‘sensor.soc_giao_tiep’].state); ]]]
          styles:
            state:
              – font-family: DigitFont
              – font-size: 30px
              – color: “#fff”
          card:
            – border: none
            – box-shadow: none
            – height: 180px
            – padding: 16px
    image: https://bachtran.net/media/bat-dark.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      – condition: state
        entity: input_boolean.hien_pin_dem
        state: “on”
  – type: picture-elements
    elements:
      – type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 60%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              –ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.1% !important;
              height: 48% !important;
              position: relative !important;
              border-radius: 20px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.5;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          – color: rgb(242, 17, 17)
            value: 0
          – color: rgb(245, 210, 37)
            value: 25
          – color: rgb(28, 198, 255)
            value: 40
          – color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: “110”
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: “”
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states[‘sensor.soc_giao_tiep’].state); ]]]
          styles:
            state:
              – font-family: DigitFont
              – font-size: 30px
              – color: “#fff”
          card:
            – border: none
            – box-shadow: none
            – height: 180px
            – padding: 16px
    image: https://bachtran.net/media/bat-rain.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      – condition: state
        entity: input_boolean.hien_pin_mua
        state: “on”
  – type: picture-elements
    elements:
      – type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 61%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              –ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.3% !important;
              height: 47% !important;
              position: relative !important;
              border-radius: 20px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.6;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          – color: rgb(242, 17, 17)
            value: 0
          – color: rgb(245, 210, 37)
            value: 25
          – color: rgb(28, 198, 255)
            value: 40
          – color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: “110”
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: “”
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states[‘sensor.soc_giao_tiep’].state); ]]]
          styles:
            state:
              – font-family: DigitFont
              – font-size: 30px
              – color: “#fff”
          card:
            – border: none
            – box-shadow: none
            – height: 180px
            – padding: 16px
    image: https://bachtran.net/media/bat-sunrise.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      – condition: state
        entity: input_boolean.hien_pin_sunrise_sunset
        state: “on”
  – type: picture-elements
    elements:
      – type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 61%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              –ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.3% !important;
              height: 47% !important;
              position: relative !important;
              border-radius: 20px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.4;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          – color: rgb(242, 17, 17)
            value: 0
          – color: rgb(245, 210, 37)
            value: 25
          – color: rgb(28, 198, 255)
            value: 40
          – color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: “110”
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: “”
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states[‘sensor.soc_giao_tiep’].state); ]]]
          styles:
            state:
              – font-family: DigitFont
              – font-size: 30px
              – color: “#fff”
          card:
            – border: none
            – box-shadow: none
            – height: 180px
            – padding: 16px
    image: https://bachtran.net/media/bat-rain-light.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      – condition: state
        entity: input_boolean.hien_pin_mua_giong
        state: “on”
  – type: picture-elements
    elements:
      – type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 61%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              –ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.3% !important;
              height: 47% !important;
              position: relative !important;
              border-radius: 18px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.6;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          – color: rgb(242, 17, 17)
            value: 0
          – color: rgb(245, 210, 37)
            value: 25
          – color: rgb(28, 198, 255)
            value: 40
          – color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: “110”
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: “”
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states[‘sensor.soc_giao_tiep’].state); ]]]
          styles:
            state:
              – font-family: DigitFont
              – font-size: 30px
              – color: “#fff”
          card:
            – border: none
            – box-shadow: none
            – height: 180px
            – padding: 16px
    image: https://bachtran.net/media/bat-cloudy.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      – condition: state
        entity: input_boolean.hien_pin_may
        state: “on”
  – type: picture-elements
    elements:
      – type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 62%
          left: 41.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              –ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 28.5% !important;
              height: 44% !important;
              position: relative !important;
              border-radius: 18px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.8;
              overflow: hidden;
            }
        level_color:
          – 82
          – 171
          – 255
        background_color: rgba(255, 255, 255, 0)
        severity:
          – color:
              – 255
              – 71
              – 71
            value: 0
          – color:
              – 112
              – 255
              – 25
            value: 40
          – color:
              – 26
              – 179
              – 255
            value: 40
          – color:
              – 0
              – 145
              – 255
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: “110”
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: “”
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states[‘sensor.soc_giao_tiep’].state); ]]]
          styles:
            state:
              – font-family: DigitFont
              – font-size: 30px
          card:
            – border: none
            – box-shadow: none
            – height: 180px
            – padding: 16px
    image: https://bachtran.net/media/bat-rain-day.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      – condition: state
        entity: input_boolean.hien_pin_mua_ngay
        state: “on”

type: horizontal-stack
cards:
  - type: picture-elements
    elements:
      - type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 58%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              --ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.3% !important;
              height: 49% !important;
              position: relative !important;
              border-radius: 15px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.7;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          - color: rgb(242, 17, 17)
            value: 0
          - color: rgb(245, 210, 37)
            value: 25
          - color: rgb(28, 198, 255)
            value: 40
          - color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: "110"
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: ""
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states['sensor.soc_giao_tiep'].state); ]]]
          styles:
            state:
              - font-family: DigitFont
              - font-size: 30px
              - color: "#fff"
          card:
            - border: none
            - box-shadow: none
            - height: 180px
            - padding: 16px
    image: https://bachtran.net/media/bat-light.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      - condition: state
        entity: input_boolean.hien_pin_ngay
        state: "on"
  - type: picture-elements
    elements:
      - type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 58%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              --ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.3% !important;
              height: 49% !important;
              position: relative !important;
              border-radius: 15px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.3;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          - color: rgb(242, 17, 17)
            value: 0
          - color: rgb(245, 210, 37)
            value: 25
          - color: rgb(28, 198, 255)
            value: 40
          - color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: "110"
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: ""
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states['sensor.soc_giao_tiep'].state); ]]]
          styles:
            state:
              - font-family: DigitFont
              - font-size: 30px
              - color: "#fff"
          card:
            - border: none
            - box-shadow: none
            - height: 180px
            - padding: 16px
    image: https://bachtran.net/media/bat-dark.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      - condition: state
        entity: input_boolean.hien_pin_dem
        state: "on"
  - type: picture-elements
    elements:
      - type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 60%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              --ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.1% !important;
              height: 48% !important;
              position: relative !important;
              border-radius: 20px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.5;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          - color: rgb(242, 17, 17)
            value: 0
          - color: rgb(245, 210, 37)
            value: 25
          - color: rgb(28, 198, 255)
            value: 40
          - color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: "110"
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: ""
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states['sensor.soc_giao_tiep'].state); ]]]
          styles:
            state:
              - font-family: DigitFont
              - font-size: 30px
              - color: "#fff"
          card:
            - border: none
            - box-shadow: none
            - height: 180px
            - padding: 16px
    image: https://bachtran.net/media/bat-rain.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      - condition: state
        entity: input_boolean.hien_pin_mua
        state: "on"
  - type: picture-elements
    elements:
      - type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 61%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              --ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.3% !important;
              height: 47% !important;
              position: relative !important;
              border-radius: 20px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.6;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          - color: rgb(242, 17, 17)
            value: 0
          - color: rgb(245, 210, 37)
            value: 25
          - color: rgb(28, 198, 255)
            value: 40
          - color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: "110"
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: ""
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states['sensor.soc_giao_tiep'].state); ]]]
          styles:
            state:
              - font-family: DigitFont
              - font-size: 30px
              - color: "#fff"
          card:
            - border: none
            - box-shadow: none
            - height: 180px
            - padding: 16px
    image: https://bachtran.net/media/bat-sunrise.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      - condition: state
        entity: input_boolean.hien_pin_sunrise_sunset
        state: "on"
  - type: picture-elements
    elements:
      - type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 61%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              --ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.3% !important;
              height: 47% !important;
              position: relative !important;
              border-radius: 20px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.4;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          - color: rgb(242, 17, 17)
            value: 0
          - color: rgb(245, 210, 37)
            value: 25
          - color: rgb(28, 198, 255)
            value: 40
          - color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: "110"
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: ""
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states['sensor.soc_giao_tiep'].state); ]]]
          styles:
            state:
              - font-family: DigitFont
              - font-size: 30px
              - color: "#fff"
          card:
            - border: none
            - box-shadow: none
            - height: 180px
            - padding: 16px
    image: https://bachtran.net/media/bat-rain-light.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      - condition: state
        entity: input_boolean.hien_pin_mua_giong
        state: "on"
  - type: picture-elements
    elements:
      - type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 61%
          left: 40.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              --ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 31.3% !important;
              height: 47% !important;
              position: relative !important;
              border-radius: 18px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.6;
              overflow: hidden;
            }
        level_color: rgb(82, 171, 255)
        background_color: rgba(255, 255, 255, 0)
        severity:
          - color: rgb(242, 17, 17)
            value: 0
          - color: rgb(245, 210, 37)
            value: 25
          - color: rgb(28, 198, 255)
            value: 40
          - color: rgb(17, 242, 81)
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: "110"
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: ""
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states['sensor.soc_giao_tiep'].state); ]]]
          styles:
            state:
              - font-family: DigitFont
              - font-size: 30px
              - color: "#fff"
          card:
            - border: none
            - box-shadow: none
            - height: 180px
            - padding: 16px
    image: https://bachtran.net/media/bat-cloudy.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      - condition: state
        entity: input_boolean.hien_pin_may
        state: "on"
  - type: picture-elements
    elements:
      - type: custom:fluid-level-background-card
        entity: sensor.soc_giao_tiep
        style:
          z-index: 1
          top: 62%
          left: 41.8%
          transform: translate(-44.7%, -29%)
          width: 100%
          height: 100%
        card_mod:
          style: |
            ha-card {
              text-align: center;
              --ha-card-border-color: transparent !important;
              box-shadow: none !important;
              background: none !important;
              border-radius: 50px;
              overflow: hidden;
            }  
            #container, .container {
              width: 28.5% !important;
              height: 44% !important;
              position: relative !important;
              border-radius: 18px !important;
              margin-left: 38.2%;
              margin-top: 6%;
              # transform: translate(200%, -50%);
              opacity: 0.8;
              overflow: hidden;
            }
        level_color:
          - 82
          - 171
          - 255
        background_color: rgba(255, 255, 255, 0)
        severity:
          - color:
              - 255
              - 71
              - 71
            value: 0
          - color:
              - 112
              - 255
              - 25
            value: 40
          - color:
              - 26
              - 179
              - 255
            value: 40
          - color:
              - 0
              - 145
              - 255
            value: 80
        fill_entity: input_boolean.dang_sac
        full_value: "110"
        card:
          type: custom:button-card
          entity: sensor.soc_giao_tiep
          name: ""
          show_icon: false
          show_name: false
          show_state: true
          state_display: |
            [[[ return Math.round(states['sensor.soc_giao_tiep'].state); ]]]
          styles:
            state:
              - font-family: DigitFont
              - font-size: 30px
          card:
            - border: none
            - box-shadow: none
            - height: 180px
            - padding: 16px
    image: https://bachtran.net/media/bat-rain-day.png
    card_mod:
      style:
        hui-image $: |
          img {
            z-index: 1 !important;
            position: relative !important;
            right: 0px;
            top: 0px;
            width: 100% !important;
            opacity: 1
          }
    visibility:
      - condition: state
        entity: input_boolean.hien_pin_mua_ngay
        state: "on"

Lười quá ko cần tạo automation nữa thì bấm nút bên dưới cho nó tự thêm vào HASS bản thiết kế này.
Sau đó vào tự động hóa tạo mới bản tự động hóa chọn bản thiết kế này để chạy là xong

Post Views: 441