Skip to content

Custom-card "Bar Card"

This is a custom-card to display a percentage value as a bar.

Screenshot

Credits

Author: rphlwnk - 2021 Version: 1.0.0

Changelog

1.0.0 Initial release.
0.1.1 Fix for UI Minimalist v1.0.1.
0.1.2 Fix border radius

Requirements

This card needs the following to function correctly:

Custom Card 'Bar-Card'

Usage

- type: "custom:button-card"
  template: custom_card_bar_card
  variables:
    ulm_custom_card_bar_card_entity: sensor.memory_use_percent
    ulm_custom_card_bar_card_name: Memory Usage
    ulm_custom_card_bar_card_value: true
    ulm_custom_card_bar_card_indicator: true
    ulm_custom_card_bar_card_color: "var(--google-green)"
    ulm_custom_card_bar_card_min: 10
    ulm_custom_card_bar_card_max: 20

Variables

Variable Example Required Default Explanation
ulm_custom_card_bar_card_entity sensor.memory_use_percent yes The entity with the desired value
ulm_custom_card_bar_card_name "Memory Consumption" no Sensor Name Overwrites the sensor name
ulm_custom_card_bar_card_icon "mdi:icon" no Sensor Icon Overwrites the sensor icon
ulm_custom_card_bar_card_value true / false no false If true, shows the value in the bar
ulm_custom_card_bar_card_indicator true / false no false If true, shows if the value has changed up or down
ulm_custom_card_bar_card_color "var(--google-green)" no "var(--google-blue)" Change the color of the bar
ulm_custom_card_bar_card_min 10 no 0 Change the minimum value of the bar
ulm_custom_card_bar_card_max 20 no 100 Change the maximum value of the bar

Example

- type: "custom:button-card"
  template: custom_card_bar_card
  variables:
    ulm_custom_card_bar_card_entity: sensor.memory_use_percent
    ulm_custom_card_bar_card_name: Memory Usage
Template Code
custom_card_bar_card.yaml
---
custom_card_bar_card:
  variables:
    ulm_custom_card_bar_card_color: "var(--google-blue)"
    ulm_custom_card_bar_card_min: "0"
    ulm_custom_card_bar_card_max: "100"
  triggers_update: "all"
  styles:
    grid:
      - grid-template-areas: "'item1' 'item2'"
      - grid-template-rows: "1fr"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "0px"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template:
          - "icon_info"
          - "card_generic"
        variables:
          ulm_card_generic_name: "[[[ return variables.ulm_custom_card_bar_card_name != '' ? variables.ulm_custom_card_bar_card_name : '' ]]]"
          ulm_card_generic_icon: "[[[ return variables.ulm_custom_card_bar_card_icon != '' ? variables.ulm_custom_card_bar_card_icon : '' ]]]"
        styles:
          card:
            - box-shadow: "none"
            - border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
            - padding: "12px"
        entity: "[[[ return variables.ulm_custom_card_bar_card_entity ]]]"
    item2:
      card:
        type: "custom:bar-card"
        entities:
          - entity: "[[[ return variables.ulm_custom_card_bar_card_entity ]]]"
        color: "[[[ return variables.ulm_custom_card_bar_card_color ]]]"
        positions:
          icon: "off"
          indicator: "[[[ return variables.ulm_custom_card_bar_card_indicator == true ? 'inside' : 'off' ]]]"
          minmax: "off"
          title: "off"
          value: "[[[ return variables.ulm_custom_card_bar_card_value == true ? 'inside' : 'off' ]]]"
          name: "off"
        min: "[[[ return variables.ulm_custom_card_bar_card_min ]]]"
        max: "[[[ return variables.ulm_custom_card_bar_card_max ]]]"
        style: |-
          bar-card-currentbar {
            border-radius: 0px !important;
            right: 0;
          }
          bar-card-backgroundbar {
            border-radius: 0px !important;
            right: 0;
          }
          #states {
            padding: 0;
            height: 35px;
          }
          bar-card-background {
            height: 35px !important;
          }
          bar-card-indicator {
            left: 10px;
          }
          bar-card-value {
            font-weight: bold;
            font-size: 12px;
          }