Lovelace: Bar Card

Mariusthvdb · April 6, 2020, 12:44pm

I had tried this:

         style: |-
          bar-card-value {
            color: white;
            text-shadow: 1px 1px #0005;
          }

and

    entities:
       - color: black
         entity: sensor.epson_ink_level_black
         name: Black
         style: >
           bar-card-value {text-shadow: 1px 1px white;}

but nothing is showing…isn’t the color styled? would probably be easiest?

secondly, while I am at the feature request department:
could the name be auto word-breaked? check Magenta and Yellow. In my post above the full friendly name is displayed nicely, so it should be possible?

Schermafbeelding 2020-04-06 om 14.42.52

Gluwc · April 6, 2020, 12:56pm

#0005 is black so you probably want #FFF5. Also I’d like to keep the default text-overflow the way it is because it doesn’t look very nice otherwise in my opinion, but you can set the title CSS like this if you want to just break the title name:

bar-card-title {
  word-break: break-all;
}

Mariusthvdb · April 6, 2020, 12:58pm

ok thanks ~~will try that~~ funny result ;-),

btw I tried the color on the individual sensor, but that isn’t supported I think? Now I try it on the card this is the result:

using:

  - type: custom:bar-card
    style: >
      bar-card-value {color:darkgrey;}
    stack: horizontal
    entity_row: true
    direction: up
    entities:
       - color: black
         entity: sensor.epson_ink_level_black
         name: Black
       - color: 'cyan'
         entity: sensor.epson_ink_level_cyan
         name: Cyan
       - color: 'magenta'
         entity: sensor.epson_ink_level_magenta
         name: Magenta
       - color: 'yellow'
         entity: sensor.epson_ink_level_yellow
         name: Yellow
       - color: 'grey'
         entity: sensor.epson_ink_level_waste
         name: Waste

its a bit of a hit and miss to find the right color to be contrasting to all cartridge colors…
so, if ever an indivual sensor style would be possible, Id certainly applaud that.
thanks for your quick support, much appreciated!

Gluwc · April 6, 2020, 1:30pm

You can actually style each individual bar if you inspect the element in the DevTools and find the ID.

          #value_sensor_example_0 {
            color: #F00;
          }

Mariusthvdb · April 6, 2020, 2:01pm

yes! I found it:

<bar-card-value id="value_sensor_epson_ink_level_black_0">60 %</bar-card-value>

but I cant get it to customize the color:

    style: |-
      bar-card-value {color:darkgrey;}
      bar-card-title {word-break: break-all;}
      #value_sensor_epson_ink_level_black_0: {color: white;}

(not are if the # is a typo or purposely there in your suggestion, but without it it doesn’t change either)

Gluwc · April 6, 2020, 2:08pm

You’ve got a small typo there, need to remove the : . Also I’ll try to add some of these things to the documentation soon.

Mariusthvdb · April 6, 2020, 2:20pm

cool, and it works:

  - type: custom:bar-card
    style: |-
      bar-card-value {color:darkgrey;}
      bar-card-title {word-break:break-all;}
      #value_sensor_epson_ink_level_black_0 {color:var(--primary-background-color);}

thanks again.

MarH · April 6, 2020, 7:17pm

Does anyone know how to use an attribute with version 3?

I’ve used the BarCard in the past to display the battery level

attribute: battery_level
entities:
  - entity: binary_sensor.hue_kitchen_motion

Also, how to make the bar 100% width?

entities:
  - entity: sensor.netatmo_outside_battery_percent
    name: Draußen
    width: 100%
    positions:
      minmax: 'off'
    entity_row: true
    type: 'custom:bar-card'
...
title: Netatmo
type: entities

Gluwc · April 6, 2020, 7:40pm

It’s no longer directly possible to display an attribute. If you want to display a specific attribute I’d recommend creating a template sensor and displaying that.

Also if you want to remove the white space you have to set the icon position to off.

MarH · April 6, 2020, 7:57pm

I don’t think I want to create >20 template sensors just to see the battery condition, maybe I have to think of something else.

Gluwc · April 6, 2020, 8:40pm

I kind of understand you don’t really want to add that many template sensors. However after cleaning up the config for the card I’d prefer not to have any options that can be handled by other other components or cards.

Also as far as I know in general most integrations expose the battery level as a separate entity (I might be wrong though).

I’m not saying I definitely don’t want to add this option back in, but I’m kind of curious how you would handle this in anything other than bar-card.

DavidFW1960 · April 6, 2020, 11:38pm

Ok it’s not looking quite right… the bars are offset to the right and outside the card on the right side… How do I center it?

          - type: entities
            title: Brother MFC-9335CDW
            show_header_toggle: false
            entities:
              - type: 'custom:hui-horizontal-stack-card'
                cards:
                  - type: 'custom:bar-card'
                    entities:
                      - entity: sensor.mfc_9335cdw_black_toner_remaining
                        color: black  
                      - entity: sensor.mfc_9335cdw_cyan_toner_remaining
                        color: cyan
                      - entity: sensor.mfc_9335cdw_magenta_toner_remaining
                        color: magenta
                      - entity: sensor.mfc_9335cdw_yellow_toner_remaining
                        color: yellow
                    direction: up
                    indicator: auto-vertical
                    width: 3em
                    height: 14em
                    positions:
                      icon: 'off'
                      indicator: 'off'
                      title: 'off'
                    stack: horizontal
                    style: |
                      bar-card-value {
                        margin-top: auto;
                      }
                  - type: picture-elements
                    image: /local/printer/blank.png
                    elements:
                      - type: image
                        image: /local/printer/brothermfc9335cdw.png
                        style:
                          top: 50%
                          left: 50%
                          width: 100%
                          filter: 'drop-shadow(2px 2px 5px rgb(100, 100, 100, 1)'
                    style: |
                      ha-card {
                        border-radius: 0;
                        box-shadow: none;
                        background: transparent;
                        height: 100%;
                      }

Also can I get the percentage in the middle of the card instead of the bottom?

Gluwc · April 6, 2020, 11:49pm

You probably need entity_row enabled.

DavidFW1960 · April 6, 2020, 11:50pm

??
Also centering vertically in the bar of the %?

Tried entity_row: ‘true’ and also ‘false’ - both cause the bars to disappear.

MarH · April 7, 2020, 6:16am

For my components it’s about 50/50 …

I honestly don’t know yet … I never planned on having this on the UI. For me a notification would be better, but doing this right is more work …

maurizio53 · April 7, 2020, 7:17am

I am in the same condition and asked to the developer the same thing, but as I see it is impossible… I am forced to think something else… Did you realized something about it?

elserge82 · April 7, 2020, 8:31am

Thank you.
My problem was, I didn’t put the state under animation.

Gluwc · April 7, 2020, 9:51am

true should never be quoted in a card config since it turns it into a string instead of a boolean.

DavidFW1960 · April 7, 2020, 9:59am

Ok Thanks.

But how can I get it to write the number in the middle of the bar (vertically)?

Gluwc · April 7, 2020, 10:06am

Ah right forgot about that part. This should do it, generally if you want to align an element in the middle you’ll have to set auto margins on both sides.

bar-card-value {
  margin-top: auto;
  margin-bottom: auto;
}