Lovelace: Bar Card

Share your Projects! Dashboards & Frontend
102

I’m using it with the auto-entities card filtering on an attribute and it works well. I assume it would work with the template card instead.

 - type: custom:auto-entities
    show_empty: false
    card:
      type: custom:bar-card
      attribute: battery_level
      unit_of_measurement: "%"
      padding: 2px
      severity:
        - value: 60
          hue: "0"
        - value: 80
          hue: "40"
        - value: 100
          hue: "120"
      title_position: inside

    filter:
      include:
        - domain: zwave
          attributes:
            battery_level: "<= 100"
103

This works for auto-entities because it’s an attribute of the entity, however when using the template-card you wouldn’t define an entity but a value that comes from jinja template so this won’t work out of the box.

104

Ahhh, yes.

This is going to be a big challenge. It’s too bad that Lovelace itself or Card-Tools doesn’t provide a way to handle entities, values, attributes in a consistent way that can be used in any card…

105

I don’t see anywhere where it says if this is a module or js?

106

Even dumber question…
image
Can I invert the colors on the bar? I have the bar counting down the days and filling from the right side instead of the left…

107

Currently setting the bar direction is the only option. Also I did look into adding a value config option so you can use the template card, but this seems to be a bit more tricky than I had first thought. But i’ll see if I can add this to a future release.

108

Release 0.1.5 adds optimizations for the card CSS styles. For some reason I had over-complicated the way the colors are being used, so this should make the card perform better on low-end devices.

109

So I still don’t see if/how I can change the bar colours?

110

Hue:

However, all bars on the same card use the same config & therefore colour

111

But hue isn’t a colour?? Is there a list of hue’s?

112

@DavidFW1960 I was lost on hue thing too…LOL

1 Like
113

Seems there is no way to set the colour of the ‘blank’ part of the bar, only to set the hue of the’used’ portion… So I can’t reverse the colours on the bar it seems.

My value of days left is decreasing every day… I could create a template sensor that goes the other direction but it honestly seems silly to have to do that. I’m using the template card just so I can avoid having to create 20 different sensors.

114

Yea I know hue isn’t the most common way of defining the color, however this is part of some of the logic I started out with. I’m looking into making it possible to define a color instead of a color hue.

115

Any chance we could use an attribute to set the maximum or minimum? In my case, I’m showing number of days and that could be anywhere between 28 and 31 days in a month but I have an attribute that says how many days in the current cycle… would be great to be able to use that instead of a static value.

116

I would say this is a perfect use case for the config-template-card if you’re using a single entity per card config (as in not using the entities list). For the next release I will make it so if no min or max is configured it will look for a min and max value in the attributes for the entity.

117

But then will the entity attributes need to include min and max keys? I’m already using the attribute for the card’s value… why not just allow attributes for min/max as well?
This is my card:

        - type: 'custom:bar-card'
            title: Month Use
            entity: sensor.abb_usage
            attribute: daysUsed
            min: 0
            max: 31
            height: 20px
            direction: right
            unit_of_measurement: days

These are the attributes for the entity
image
So yeah… The daysTotal changes each month of course so setting max to that attribute works

118

Well this is basically what the template card is for. However I’ve added an option to defined the attribute in the card config in version 0.1.6.
Plus some more new features like setting the color instead of hue and the option to let the bar drain instead of fill.

I will most likely remove the hue option in a future release, but for now you can use either.

  • added color config option, hue will be deprecated in future release
  • severity will now accept color attribute instead of hue attribute, hue attribute will be deprecated in future release
  • added left-reverse, right-reverse, up-reverse, down-reverse options to direction config option
  • min,max and target will now also accept an attribute object
  • fixed animation updates
  • bar color will now default to theme primary color
- type: custom:bar-card
  title: Example
  entity: sensor.example
  color: purple
  direction: right-reverse
  max: sensor.example.attributes.example_attribute
119

Am I misunderstanding something? I thought this card doesn’t work with the template card… are you saying it does???

120

I couldn’t get it to work with the template card either.

121

I never said it doesn’t, but the template card only works for anything that is not the entity since that expects it to be an actual entity_id. Min or max for example expect a number which the template card generates, so in this case it will work.