Skip to content

Battery Card

Description

example-image

Charging animation if ulm_card_battery_charging_animation is true:

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_charging_animation false Weather to show charging animation or not. If set to true, ulm_card_battery_battery_state_entity_id needs to be defined and ulm_card_battery_charger_type_entity_id will be ignored.
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_battery_name: Smartphone
Template Code
card_battery.yaml
---
### Card Battery ###
card_battery:
  template:
    - "icon_more_info_new"
    - "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_charging_animation: false
    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)"
    ulm_outlet_power_enable_popup: false
  triggers_update:
    - "[[[ return variables?.ulm_card_battery_battery_state_entity_id ]]]"
    - "[[[ return variables?.ulm_card_battery_charger_type_entity_id ]]]"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              variables: >
                [[[
                  let vars = variables;

                  if(variables.ulm_outlet_power_enable_popup) {
                    vars.ulm_custom_popup = {
                      'template': 'popup_power_outlet_stats',
                      'popup_variables': {
                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
                      }
                    };
                  }
                  return vars;
                ]]]
              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 &&
                      variables.ulm_card_battery_charging_animation === false &&
                      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;
                ]]]
              extra_styles: |
                @keyframes charge {
                  0%, 80% { clip-path: inset(0 0 0 0); }
                  10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 66%, 34% 66%, 34% 100%, 100% 100%, 100% 0%); }
                  20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 62%, 34% 62%, 34% 100%, 100% 100%, 100% 0%); }
                  30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 58%, 34% 58%, 34% 100%, 100% 100%, 100% 0%); }
                  40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
                  50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 50%, 34% 50%, 34% 100%, 100% 100%, 100% 0%); }
                  60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 46%, 34% 46%, 34% 100%, 100% 100%, 100% 0%); }
                  70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 40%, 34% 40%, 34% 100%, 100% 100%, 100% 0%); }
                }
              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;
                      ]]]
                  - animation: |
                      [[[
                        if (variables.ulm_card_battery_battery_state_entity_id !== null &&
                          variables.ulm_card_battery_charging_animation === true &&
                          states[variables.ulm_card_battery_battery_state_entity_id].state.toLowerCase() === "charging"){
                            return "charge 3s linear infinite"
                          }
                        return "none"
                      ]]]
          item2:
            card:
              type: "custom:button-card"
              entity: "[[[ return entity.entity_id ]]]"
              name: "[[[ return variables.ulm_card_battery_name ]]]"
              variables: >
                [[[
                  let vars = variables;

                  if(variables.ulm_outlet_power_enable_popup) {
                    vars.ulm_custom_popup = {
                      'template': 'popup_power_outlet_stats',
                      'popup_variables': {
                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
                      }
                    };
                  }
                  return vars;
                ]]]
              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 + "%"; }
                ]]]