Lovelace: Bar Card

Plexat · March 17, 2019, 9:41am

Since update my bar-card changed. It seems I am not able to change it back to the original bars.

Anyone knows what is wrong?

sendorm · March 17, 2019, 10:27am

There is nothing wrong. Change your width to 100% and it will be as before.

Gluwc · March 17, 2019, 12:18pm

Some of this might be screwed up since I’ve reworked the CSS to flexbox. I’m currently working another big update that will allow for multiple entities instead of a single entity per card. I’ll add a fix to that release.

Gluwc · March 17, 2019, 9:19pm

Release 0.1.2 adds the option to define a list of entities to display. This also works with auto-entities if you want to populate the list dynamically.

added entities config option, displays multiple bars based on entities list
added columns config option
title style can now still be defined when using inside title_position

@Plexat You should also be able to fix your alignment problems with these config options.

    title_style:
      text-align: left
    bar_style:
      align-items: flex-start

Examples using Auto Entities

- type: custom:auto-entities
  card:
    type: custom:bar-card
    severity:
      - value: 50
        hue: '0'
      - value: 75
        hue: '40'
      - value: 100
        hue: '120'
    title_position: inside
    columns: 3
    padding: 2px
    title_style:
      text-align: left
      font-size: 16px
    bar_style:
      align-items: flex-start
      font-size: 8px
  filter:
    include:
      - entity_id: "*_battery"

- type: custom:auto-entities
  card:
    type: custom:bar-card
    attribute: battery
    unit_of_measurement: "%"
    severity:
      - value: 50
        hue: '0'
      - value: 75
        hue: '40'
      - value: 100
        hue: '120'
    title_position: inside
    padding: 2px
    columns: 2
  filter:
    include:
      - attributes:
          battery: "<=100"
    exclude:
      - entity_id: "*_humidity"
      - entity_id: "*_pressure"
      - entity_id: "*_battery"

- type: custom:bar-card
  attribute: temperature
  unit_of_measurement: "°C"
  title_position: inside
  columns: 5
  height: 200px
  min: 15
  max: 32
  target: 22.5
  width: 100%
  padding: 2px
  direction: up
  entities:
    - binary_sensor.motion_hallway
    - binary_sensor.motion_living_room
    - binary_sensor.motion_kitchen
    - binary_sensor.motion_bathroom
    - binary_sensor.motion_toilet

jwelter · March 18, 2019, 6:21pm

Hi,

I am trying to get this going and have the bar graphs displaying correctly; but they are not named; just show the % free. Any trick to get the friendly name displayed? I checked and the devices being displayed all have friendly_names assigned.

Code below:

  - type: custom:auto-entities
    show_empty: false
    card:

        type: custom:bar-card
        attribute: battery_level
        unit_of_measurement: "%"
        severity:
          - value: 60
            hue: '0'
          - value: 80
            hue: '40'
          - value: 100
            hue: '120'
        title_position: inside
        padding: 2px
    
    filter:
        include:
          - domain: zwave
            attributes:
              battery_level: "<= 100"

jwelter · March 18, 2019, 6:56pm

Ahhh! It seems that if the bar graph itself is in the foreground on top of the title; so it gets obscured.

This seems to be new in the latest release; and on all the bar components.

Update: Seems to be a Mac Safari issue. On iOS Safari it is rendered fine; and also on Chrome on Mac it’s fine.

wellsy · March 19, 2019, 1:51pm

Wow…you have been busy with quite a few updates I see…thanks so much for making this all possible.
I’ll post a screenshot once I have the bar card up and running.

Cheers Steve Wells

klogg · March 23, 2019, 9:38am

Can I make a feature request?
Would it be possible to show an icon instead of the title?

EDIT: Also, I am not a CSS expert, in fact I’m not even a CSS anything, but I can’t get card-style to change the background.

I’d like it to be transparent so that when I include a bar-card in an entity card it doesn’t ‘stand out’.

I’ve tried allsorts of combinations (and colours) like this:
Any chance you could give an example?
Unless of course I have completely misundersttod the use of card-style

                    card-style:
#                      paper-card-background-color: 'rgba(0,255,255,0.2)'
                      background-color: 'rgba(201, 76, 76,0.5)'
#                      ha-card-background-color: 'rgba(67, 73, 84, 0.6)'                                          # Card background colour

Gluwc · March 24, 2019, 5:43pm

Icon support is coming shortly. Could you show me the problem you are having with the transparency?

jwelter · March 24, 2019, 7:22pm

@Gluwc Please see below. The top is from Safari on a Mac and you can see the titles are not shown; they are there but behind the bar. (see the 48% bar in the Mac top screenshot)

The second is from IOS Safari and all is ok.

Thanks

klogg · March 25, 2019, 3:29pm

Ok, I may be asking for something not possible but when I embed a bar into an entities card I would like the bar to appear as an entity, i.e. ‘flat’ in the entity card (and preferably - although I am sure this isn’t possible - the same size as it is when placed outside an entity card.

I hope this makes sense…

Gluwc · March 25, 2019, 4:44pm

Release 0.1.3 adds icon support and the ability to align items inside the bar.

added show_icon config option
added icon config option
added align config option
added off option to title_position config
removed bar_style config option
removed indicator_style config option
added icon_style config option
added value_style config option
fix for min/max value indicator update
title will now default to entity friendly name
removed tracker.json, should now be tracked by default

Examples on Github

@jwelter I’m not entirely sure what’s causing the title issue and I don’t have access to a mac to test safari. I did make some changes to the element layout so it’s possible this issue is fixed in 0.1.3. Please let me know and I’ll see what I can do if it’s still not working correctly.

@klogg It could be possible using it in an entity card the CSS won’t work for the background. Can you try setting the card_style outside of the entity card and see if it still doesn’t work? This example shows a custom card background.

jwelter · March 25, 2019, 5:10pm

@Gluwc I quickly tried in Safari Mac again and same issues. Both IOS and Chrome are still ok…

I also tried iOS safari on an iPad and it is also wrong, perhaps it’s a screen size thing?

What is interesting is the % shows fine; it’s just the title that gets obscured.

Is the style or logic for displaying the % versus title different?

Sorry I’m not a JS guy; Assembler, C, C++, and Python only

klogg · March 25, 2019, 6:00pm

@Gluwc 0.1.3 is a great update. It looks perfect with the icon and split title and I no longer want to do any further CSS styling!

Thanks!

Gluwc · March 25, 2019, 6:32pm

For anyone else having sorting issues 0.1.4 should fix this.

jwelter · March 25, 2019, 6:38pm

Thanks for the fix! Appreciate it!

DavidFW1960 · March 26, 2019, 9:14am

Will this card work with @iantrich template card variables?

Gluwc · March 26, 2019, 9:28am

I’m not sure, afaik a card doesn’t need to support template-card? If it does I can have a look at what’s required to implement.

DavidFW1960 · March 26, 2019, 9:31am

It’s more the template card lets you use attributes… so instead of having to create template sensors, you can instead use the attribute in the same way. It’s pretty cool…

Thanks for considering this.

Gluwc · March 26, 2019, 9:40am

Ah yes of course this is what was sort of bothering me about using the template-card, I couldn’t use it as the entity value since most cards expect an entity_id there. I could add a value config option so you can set a straight up value (template) instead of an entity.