bar-card icon indicating copy to clipboard operation
bar-card copied to clipboard

feature request: temperature bar

Open xuefer opened this issue 4 years ago • 2 comments

The needle mode of updated gauge component is almost like what i want, except:

  • show as horizontal or vertical straight bar instead of arc(half of a cicle)
  • multiple indicators support in the single bar, customizable in style and take the value of, e.g.:
    • current room temperature (reported by sensor)
    • out door temperature (reported by sensor or weather component)
    • target temperature (set in climate device)

apply to humidity sensors too

using bar-card image

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:bar-card
        entities:
          - entity: sensor.workroom_temperature
            target: 26
            min: 0
            max: 40
            severity:
              - from: -25
                to: 14
                color: white
              - from: 14
                to: 25
                color: rgb(3,169,244)
              - from: 18
                to: 26
                color: green
              - from: 26
                to: 100
                color: red
          - entity: sensor.workroom_humidity
            min: 0
            max: 100
            target: 55
            severity:
              - from: 0
                to: 40
                color: rgb(3,169,244)
              - from: 40
                to: 70
                color: green
              - from: 70
                to: 100
                color: orange
          - entity: sensor.workroom_aqi
            min: 0
            max: 120
            target: 10
            severity:
              - from: 0
                to: 50
                color: green
              - from: 50
                to: 100
                color: yellow
              - from: 100
                to: 1000
                color: red
        stack: horizontal
        direction: up
        height: 200px
        positions:
          name: 'off'
          indicator: 'off'
          value: outside
        width: 25px
        entity_row: true
      - type: weather-forecast
        entity: weather.tian_qi_zhu_shou
        secondary_info_attribute: wind_speed
        show_forecast: true

using needle mode of gauge image

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: gauge
            entity: sensor.workroom_temperature
            needle: true
            max: 35
            min: 18
            severity:
              green: 25
              yellow: 0
              red: 28.5
            name: ' '
          - type: gauge
            entity: sensor.workroom_humidity
            needle: true
            max: 100
            min: 0
            severity:
              green: 40
              yellow: 0
              red: 70
            name: ' '
          - type: gauge
            entity: sensor.zm1_pm25
            needle: true
            max: 120
            min: 0
            severity:
              green: 0
              yellow: 50
              red: 100
            name: ' '
      - type: weather-forecast
        entity: weather.tian_qi_zhu_shou
        secondary_info_attribute: wind_speed
        show_forecast: true

xuefer avatar Aug 08 '21 15:08 xuefer

https://www.home-assistant.io/lovelace/gauge/ the needle mode is close to what i want, except i'd like a compact bar not gauge, with multiple needle supported

xuefer avatar Aug 13 '21 06:08 xuefer