uid: humidity_room_card
tags:
- humidity
- card
props:
  parameters:
  - context: item
    description: Humidity item from your climate sensor. Accepts 0–100 % or 0–1 ratio — drives the large value, zone bar, and status badge.
    label: Humidity Item
    name: item
    required: true
    type: TEXT
    groupName: sensor
  - context: item
    description: Temperature item — shown as the large number at the bottom of the card.
    label: Temperature Item
    name: tempItem
    required: false
    type: TEXT
    groupName: sensor
  - context: item
    description: 'Thermostat setpoint item — shown as "Set: X °C" next to the temperature.'
    label: Setpoint Item
    name: setpointItem
    required: false
    type: TEXT
    groupName: sensor
  - description: Defaults to item label
    label: Room Name
    name: title
    required: false
    type: TEXT
    groupName: appearance
  - description: Icon (e.g. iconify:mdi:sofa)
    label: Icon
    name: icon
    required: false
    type: TEXT
    groupName: appearance
  - default: '40'
    label: Safe Min (%)
    name: min
    required: false
    type: INTEGER
    min: 0
    max: 100
    groupName: thresholds
  - default: '60'
    label: Elevated max (%)
    name: orange
    required: false
    type: INTEGER
    min: 0
    max: 100
    groupName: thresholds
  - default: '70'
    label: Critical from (%)
    name: red
    required: false
    type: INTEGER
    min: 0
    max: 100
    groupName: thresholds
  - context: item
    description: Comma-separated list of one or more HomeMatic actuator _STATE Switch items for this room's heating valve(s). Shows a small icon in the header — blue when any valve is open, dim when all
      closed — with a count badge when more than one item is given.
    label: Valve Item(s)
    name: valveItems
    required: false
    type: TEXT
    groupName: extras
  parameterGroups:
  - name: sensor
    label: Sensor Items
  - name: appearance
    label: Appearance
  - name: thresholds
    label: Thresholds
  - name: extras
    label: Valve
timestamp: Sep 15, 2026, 8:05:06 AM
component: oh-link
config:
  action: analyzer
  actionAnalyzerItems: '=props.item + (props.tempItem ? '','' + props.tempItem : '''') + (props.setpointItem ? '','' + props.setpointItem : '''') + (props.valveItems ? '','' + props.valveItems : '''')'
  style:
    color: inherit
    display: block
    text-decoration: none
slots:
  default:
  - component: f7-card
    config:
      style:
        min-width: '0'
    slots:
      default:
      - component: f7-card-content
        config:
          style:
            padding: 12px 16px 12px
        slots:
          default:
          - component: f7-row
            config:
              style:
                display: flex
                width: 100%
                align-items: center
                margin: 0 0 8px
                min-height: 24px
            slots:
              default:
              - component: oh-icon
                config:
                  icon: =props.icon || 'f7:house'
                  style:
                    flex: 0 0 auto
                    font-size: 18px
                    margin-right: 8px
                    opacity: '0.7'
              - component: f7-col
                config:
                  style:
                    flex: '1'
                    min-width: '0'
                    font-size: 14px
                    font-weight: '500'
                    padding: '0'
                    overflow: hidden
                    text-overflow: ellipsis
                    white-space: nowrap
                slots:
                  default:
                  - component: Label
                    config:
                      text: =props.title || items[props.item].label
              - component: Label
                config:
                  style:
                    background: '=((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item] ? items[props.item].state : ''50'')) > props.red) ? ''rgba(208,59,59,0.15)'' : ((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item]
                      ? items[props.item].state : ''50'')) > props.orange) ? ''rgba(250,178,25,0.15)'' : ''rgba(12,163,12,0.15)'''
                    border-radius: 12px
                    color: '=((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item] ? items[props.item].state : ''50'')) > props.red) ? ''#d03b3b'' : ((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item]
                      ? items[props.item].state : ''50'')) > props.orange) ? ''#fab219'' : ''#0ca30c'''
                    display: inline-block
                    font-size: 12px
                    font-weight: '500'
                    padding: 3px 12px
                    flex: 0 0 auto
                    margin-left: auto
                    white-space: nowrap
                  text: '=((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item] ? items[props.item].state : ''50'')) > props.red) ? ''Critical'' : ((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item]
                    ? items[props.item].state : ''50'')) > props.orange) ? ''Elevated'' : ''OK'''
              - component: oh-icon
                config:
                  visible: =!!(props.valveItems && props.valveItems.trim())
                  icon: '=((props.valveItems||'''').split('','').map(s=>s.trim()).filter(s=>!!s).some(n=>items[n]&&items[n].state===''ON'')) ? ''iconify:mdi:valve-open'' : ''iconify:mdi:valve-closed'''
                  style:
                    flex: 0 0 auto
                    font-size: 14px
                    color: '=((props.valveItems||'''').split('','').map(s=>s.trim()).filter(s=>!!s).some(n=>items[n]&&items[n].state===''ON'')) ? ''#2f8fe0'' : ''inherit'''
                    opacity: '=((props.valveItems||'''').split('','').map(s=>s.trim()).filter(s=>!!s).some(n=>items[n]&&items[n].state===''ON'')) ? ''1'' : ''0.4'''
                    margin-left: 6px
              - component: Label
                config:
                  visible: =(((props.valveItems||'').split(',').map(s=>s.trim()).filter(s=>!!s).length)>1)
                  style:
                    font-size: 10px
                    opacity: '0.7'
                    margin-left: 6px
                  text: =((props.valveItems||'').split(',').map(s=>s.trim()).filter(s=>!!s).length)
          - component: Label
            config:
              style:
                color: '=((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item] ? items[props.item].state : ''50'')) > props.red) ? ''#d03b3b'' : ((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item] ?
                  items[props.item].state : ''50'')) > props.orange) ? ''#fab219'' : ''#0ca30c'''
                display: block
                font-size: 28px
                font-weight: '600'
                line-height: '1.1'
                margin: 0 0 8px
              text: '=items[props.item] ? ((v=>v<=1?v*100:v)(Number.parseFloat(items[props.item].state))).toFixed(0) + '' %'' : ''–'''
          - component: Label
            config:
              style:
                background-image: '=''linear-gradient(rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 100%), linear-gradient(to right, #0ca30c '' + (props.orange||60) + ''%, #fab219 '' + (props.orange||60)
                  + ''%, #fab219 '' + (props.red||70) + ''%, #d03b3b '' + (props.red||70) + ''%)'''
                background-position: '=''calc('' + (items[props.item] ? (v=>v<=1?v*100:v)(Number.parseFloat(items[props.item].state)) : 50) + ''% - 1.5px) 0, 0 0'''
                background-repeat: no-repeat, no-repeat
                background-size: 3px 100%, 100% 100%
                border-radius: 4px
                display: block
                height: 12px
                margin: 0 0 8px
                padding: '0'
              text: ' '
          - component: f7-row
            config:
              style:
                align-items: center
                margin: 2px 0
            slots:
              default:
              - component: Label
                config:
                  style:
                    color: '#0ca30c'
                    flex: 0 0 auto
                    font-size: 10px
                    line-height: '1'
                    margin-right: 5px
                  text: ●
              - component: f7-col
                config:
                  style:
                    color: '#0ca30c'
                    font-size: 12px
                    padding: '0'
                slots:
                  default:
                  - component: Label
                    config:
                      text: Safe
              - component: f7-col
                config:
                  style:
                    color: '#0ca30c'
                    flex: 0 0 auto
                    font-size: 12px
                    padding: '0'
                    text-align: right
                slots:
                  default:
                  - component: Label
                    config:
                      text: =props.min + '–' + props.orange + ' %'
          - component: f7-row
            config:
              style:
                align-items: center
                margin: 2px 0
            slots:
              default:
              - component: Label
                config:
                  style:
                    color: '#fab219'
                    flex: 0 0 auto
                    font-size: 10px
                    line-height: '1'
                    margin-right: 5px
                  text: ●
              - component: f7-col
                config:
                  style:
                    color: '#fab219'
                    font-size: 12px
                    padding: '0'
                slots:
                  default:
                  - component: Label
                    config:
                      text: Elevated
              - component: f7-col
                config:
                  style:
                    color: '#fab219'
                    flex: 0 0 auto
                    font-size: 12px
                    padding: '0'
                    text-align: right
                slots:
                  default:
                  - component: Label
                    config:
                      text: =props.orange + '–' + props.red + ' %'
          - component: f7-row
            config:
              style:
                align-items: center
                margin: 2px 0
            slots:
              default:
              - component: Label
                config:
                  style:
                    color: '#d03b3b'
                    flex: 0 0 auto
                    font-size: 10px
                    line-height: '1'
                    margin-right: 5px
                  text: ●
              - component: f7-col
                config:
                  style:
                    color: '#d03b3b'
                    font-size: 12px
                    padding: '0'
                slots:
                  default:
                  - component: Label
                    config:
                      text: Critical
              - component: f7-col
                config:
                  style:
                    color: '#d03b3b'
                    flex: 0 0 auto
                    font-size: 12px
                    padding: '0'
                    text-align: right
                slots:
                  default:
                  - component: Label
                    config:
                      text: ='> ' + props.red + ' %'
          - component: Label
            config:
              style:
                border-top: 1px solid var(--f7-list-border-color, rgba(0,0,0,0.12))
                display: block
                margin: 8px 0
              text: ''
          - component: f7-row
            config:
              style:
                align-items: center
                margin: '0'
            slots:
              default:
              - component: f7-col
                config:
                  style:
                    flex: '1'
                    padding: '0'
                slots:
                  default:
                  - component: Label
                    config:
                      style:
                        display: block
                        font-size: 22px
                        font-weight: '600'
                      text: '=items[props.tempItem] ? (Number.parseFloat(items[props.tempItem].state).toFixed(1) + '' °C'') : ''–'''
              - component: f7-col
                config:
                  style:
                    flex: 0 0 auto
                    font-size: 12px
                    opacity: '0.55'
                    padding: '0'
                    text-align: right
                slots:
                  default:
                  - component: Label
                    config:
                      text: '=''Set: '' + (items[props.setpointItem] ? Number.parseFloat(items[props.setpointItem].state).toFixed(0) + '' °C'' : ''–'')'