Skip to content

Battery Card

Description

example-image

The battery-card is a slightly enhanced generic-card, that can indicate whether and how a device is being charged and colors the icon based on the battery level.

Variables

Variable Default Required Notes
entity This is your battery entity
ulm_card_battery_name friendly_name Customize name
ulm_card_battery_attribute If your entity provides the battery percent in an attribute (= not as an own sensor), fill in the attribute's name here. E.g. if you have sensor.livingroom_thermometer and the attribute for your battery power is sensor.livingroom_thermometer.attributes.battery_percent, you fill in battery_percent here.
ulm_card_battery_battery_state_entity_id Entity that holds the battery state (charging/discharging). If provided, the Icon will display the current status.
ulm_card_battery_charger_type_entity_id Entity that holds the charger type (ac/wireless/none). This Entity replaces the need for the ulm_card_battery_battery_state_entity_id entity. If provided, the Icon will display the current charger type. This is only useful if you charge your devices Wireless and with cable.
ulm_card_battery_battery_level_danger Changes the color of the Icon, if the battery level falls below the provided value. Must be higher than ulm_card_battery_battery_level_waring
ulm_card_battery_battery_level_waring Changes the color of the Icon, if the battery level falls below the provided value.
ulm_card_battery_color_battery_level_danger var(--google-red) Color of icon if battery level is within the 'danger' zone.
ulm_card_battery_color_battery_level_warning var(--google-yellow) Color of icon if battery level is within the 'warning' zone.
ulm_card_battery_color_battery_level_ok var(--google-green) Color of icon if battery level is not within the 'danger' or 'warning' zone.

Usage

- type: 'custom:button-card'
  template: card_battery
  entity: sensor.battery_level
  variables:
       ulm_card_battery_charger_type_entity_id: sensor.battery_level
       ulm_card_battery_battery_level_danger: 30
       ulm_card_battery_battery_level_warning: 80
       ulm_card_batteryname: Smartphone
Template Code
card_battery.yaml
---
### Card Battery ###
card_battery:
  template:
    - "icon_more_info_new"
    - "ulm_actions_card"
    - "ulm_translation_engine"
  variables:
    ulm_card_battery_name: "[[[ return entity.attributes.friendly_name ]]]"
    ulm_card_battery_attribute:
    ulm_card_battery_battery_state_entity_id:
    ulm_card_battery_charger_type_entity_id:
    ulm_card_battery_battery_level_danger:
    ulm_card_battery_battery_level_warning:
    ulm_card_battery_color_battery_level_danger: "var(--google-red)"
    ulm_card_battery_color_battery_level_warning: "var(--google-yellow)"
    ulm_card_battery_color_battery_level_ok: "var(--google-green)"
  triggers_update: "all"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_more_info"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
              entity: "[[[ return entity.entity_id ]]]"
              icon: |
                [[[
                  // Get battery level
                  const battery_level = variables.ulm_card_battery_attribute !== null ?
                    states[entity.entity_id].attributes[variables.ulm_card_battery_attribute] :
                    states[entity.entity_id].state;
                  // Generate icon infix
                  let infix = "";
                  if (variables.ulm_card_battery_charger_type_entity_id == null) {
                    // Check wether the battery state is charging
                    infix = variables.ulm_card_battery_battery_state_entity_id !== null &&
                      states[variables.ulm_card_battery_battery_state_entity_id].state.toLowerCase() === "charging" ?
                      "-charging" : ""
                  } else {
                    // Select the infix based on the entity charging state
                    switch (states[variables.ulm_card_battery_charger_type_entity_id].state.toLowerCase()) {
                      case "wireless":
                        infix = "-charging-wireless";
                        break;
                      case "charging":
                        infix = "-charging";
                        break;
                      case "ac":
                        infix = "-charging";
                        break;
                      case "usb":
                        infix = "-charging";
                        break;
                      default:
                        infix = "";
                    }
                  }
                  // Generate the icon based on the battery_level
                  let icon = "mdi:help-circle-outline";
                  if (battery_level == 100) {
                    icon = "mdi:battery";
                  } else if (battery_level < 10) {
                    icon = "mdi:battery" + infix + "-outline";
                  } else if (battery_level == "unknown" || battery_level == "unavailable") {
                    icon = "mdi:battery-off";
                  } else {
                    icon = "mdi:battery" + infix + "-" + Math.floor(battery_level / 10) * 10;
                  }
                  return icon;
                ]]]
              styles:
                icon:
                  - color: |
                      [[[
                        const battery_level = variables.ulm_card_battery_attribute !== null ?
                          states[entity.entity_id].attributes[variables.ulm_card_battery_attribute] :
                          states[entity.entity_id].state;
                        // Get the color based on battery_level
                        let color = "rgba(var(--color-theme), 0.9)";
                        if (battery_level !== "unavailable" && (variables.ulm_card_battery_battery_level_danger !== null || variables.ulm_card_battery_battery_level_warning !== null)) {
                          if (battery_level <= variables.ulm_card_battery_battery_level_danger) {
                            color = variables.ulm_card_battery_color_battery_level_danger;
                          } else if (battery_level <= variables.ulm_card_battery_battery_level_warning) {
                            color = variables.ulm_card_battery_color_battery_level_warning;
                          } else if (battery_level == "unknown" || battery_level == "unavailable") {
                            color = variables.ulm_card_battery_color_battery_level_danger;
                          } else {
                            color = variables.ulm_card_battery_color_battery_level_ok;
                          }
                        }
                        return color;
                      ]]]
          item2:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              variables:
                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
              name: "[[[ return variables.ulm_card_battery_name ]]]"
              label: |
                [[[
                  const battery_level = variables.ulm_card_battery_attribute !== null
                    ? states[entity.entity_id].attributes[variables.ulm_card_battery_attribute]
                    : states[entity.entity_id].state;
                  return battery_level + "%";
                  if(battery_level == "unknown")
                  { return variables.ulm_translation_state; }
                  else
                  { return battery_level + "%"; }
                ]]]