Lovelace: Bar Card

Mahko_Mahko · March 9, 2019, 10:59pm

Maybe I’m a bit slow or a sloppy reader, but is there a step by step set-up for this card? I have other custom cards set up. For hassio is it just that I need to drop the bar-card.js here \HASSIO\config\www\dist and then configure a relevant custom card ? Did I need to add some kind of ‘resources’ reference? Apologies if this is rooky Q or I’ve missed something (please point me to the info), but I couldn’t seem to understand the basic setup process from the run-down or scrolling through this thread. This looks super cool by the way. Thank you.

Edited: Figured it out. Added the .js to the directory above, added a resource like below, and then copied others examples for the configuration.

Again, not sure if I’m just blind/slow…

resources:
  - type: js
    url: /local/dist/bar-card.js?

gojonny · March 10, 2019, 10:53am

Ho provato a non disturbarti cercando di configurare da solo Life360… se puoi indicarmi come hai fatto?
allo stato attuale sono registrato su Life360

I tried not to bother trying to configure alone Life360 … if you can tell me how did you do?
at present they are registered on Life360

SeLLeRoNe · March 10, 2019, 11:41am

How about having the ability to set the “max” and “min” to specific sensors too?

No idea on application for that right now, but maybe the max one can become useful somehow (not really sure about the min, but having the possibility allow more opportunity in the future ^^ )

SeLLeRoNe · March 10, 2019, 11:46am

Nessun problema, ma dato che si tratta di un componente diverso da questo topic direi di passare la conversazione nel giusto topic: Life360 Device Tracker Platform

Sicuramente una cosa da cui devi partire per poter passare al passo successivo della visualizzazione è l’installazione del componente, una volta che hai quel pezzetto configurato si può fare il resto

No problem, but because we’re talking about a custom component and not directly the bar card this topic is about, it might be better if we move to the right topic: Life360 Device Tracker Platform

First thing you need to do anyway, is to install the component so that you can access those informations, once that is done we can move forward to the card configuration

Andrea

Mahko_Mahko · March 11, 2019, 1:14am

Still fiddling a bit but pretty happy already…My mobile view.

Gluwc · March 12, 2019, 9:16pm

Release 0.1.0 adds a bunch of requested features.

complete re-write of bars and indicators using flexbox
from config option removed
direction config option added
target, min and max now accept an entity id as value
added auto-vertical, top and bottom option to indicator config
added top and bottom option to title_position config

Vertical Example

      - type: custom:bar-card
        entity: sensor.test_increase
        height: 160px
        width: 50px
        direction: up
        title: Bottom
        title_position: bottom
        indicator: auto-vertical
      - type: custom:bar-card
        entity: sensor.test_increase
        height: 200px
        width: 100px
        direction: up
        title: Inside
        title_position: inside  
        target: sensor.test_decrease

carltonb · March 12, 2019, 10:47pm

I need some help.
I love the card in following my NAS drive statistics.
I have played with it for a few days but can not seem to get what I want.
I would love the card to show the following.
Color Green from 0-50%
Color Yellow from 51% to 75%
Color Red from 76% on up.

How do I do this with using the hues.
Thank you.

Gluwc · March 12, 2019, 11:58pm

The severity can be a bit confusing, but this should work. The first value defines the color from the min value to the first value and so on. So the second value defines the color from the first value to the 2nd value etc. Hue is defined as degrees on a color wheel like this https://goo.gl/images/S2xYDi.

severity:
    - value: 50
      hue: '120'
    - value: 75
      hue: '40'
    - value: 100
      hue: '0'

carltonb · March 13, 2019, 1:05am

Thanks so much, worked great.
I could probably have worked it through if I had the color wheel.

Gluwc · March 16, 2019, 6:39pm

Some more updates in 0.1.1. You can now define an attribute to display instead of just the state.

added attribute config option
added unit_of_measurement config option
indicator config is now independant of animation type
code optimizations

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