Skip to content

Custom Card "Room"

example-image-light example-image-dark

Credits

  • Author: Everything Smart Home - 2022
  • Full credit to user bms on the forum, they created it in full, I just put it into a PR as the basis
  • beasthouse and basbruss on the EverythingSmartHome discord channel for emoji/humidity customization
  • Version: 1.0.0

Changelog

1.0.0 Initial release

Description

This is an alternative room card to the standard one that is more rectangular than square.

Variables

Variable Default Required Notes
entity Yes The light entity to control
Name Yes Name of the room to display
icon Yes The icon to show
tap_action Yes The action to perform when tapping
label Yes The label to display information, this can be a template that returns a temperature or static text

Usage

- type: "custom:button-card"
  template:
    - card_esh_room
    - yellow_on
  name: Bathroom
  entity: light.bathroom_lights
  icon: mdi:bathtub
  tap_action:
    action: navigate
    navigation_path: "bathroom"
  label: '[[[ return states["sensor.room_temperature"].state + "°C" ]]]'

Customizations

To add both temperature and humidity (as shown below) to the card, replace the label section with this code: image

label: >
  [[[
    return "🌡️ " + states['sensor.temperature'].state + " °C" + " 💧 " + states['sensor.humidity'].state + " %"
  ]]]

You can also replace 🌡️ and 💧 with any desired Emoji, and sensor.room_temperature/sensor.room_humidity to match any of your HA entities you would like to be displayed. Ensure that the correct units of measurement are also updated (or removed) to match your custom entities. In this example they are °C and %.

Template code

Template Code
custom_card_esh_room.yaml
---
card_esh_room:
  tap_action:
    action: "more-info"
  color: "var(--google-grey-500)"
  show_icon: true
  show_name: true
  show_label: true
  template:
    - "ulm_translation_engine"
  size: "20px"
  label: >-
    [[[
        if (entity.state == "on"){
          var bri = Math.round(entity.attributes.brightness / 2.55);
          return (bri ? bri + "%" : variables.ulm_translation_state) ;
        } else{
          return variables.ulm_translation_state;
        }
    ]]]
  styles:
    card:
      - border-radius: "20px"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
    grid:
      - grid-template-areas: "'i toggle' 'n n' 'l l'"
      - grid-template-columns: "1fr 1fr"
      - grid-template-rows: "min-content"
    icon:
      - color: "rgba(var(--color-theme),0.2)"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - place-self: "center"
      - width: "42px"
      - height: "42px"
    name:
      - align-self: "end"
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "14px"
      - margin-left: "12px"
      - margin-top: "12px"
    label:
      - justify-self: "start"
      - align-self: "start"
      - font-weight: "bolder"
      - font-size: "12px"
      - filter: "opacity(40%)"
      - margin-left: "12px"
    state:
      - justify-self: "start"
      - align-self: "start"
      - font-weight: "bolder"
      - font-size: "12px"
      - filter: "opacity(40%)"
      - margin-left: "12px"
  custom_fields:
    toggle:
      card:
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return name ]]]"
        state:
          - value: "on"
            icon: "mdi:lightbulb"
            styles:
              icon:
                - color: "rgba(var(--color-yellow),1)"
              img_cell:
                - background-color: "rgba(var(--color-yellow), 0.2)"
          - value: "off"
            icon: "mdi:lightbulb-off"
        tap_action:
          action: "toggle"
        type: "custom:button-card"
        template: "widget_icon"