Lovelace: Bar Card

gerard33 · April 1, 2019, 8:32pm

I can’t find the setting to change the color of the bar background. So where the red arrow is on. Is it possible to change that?

Gluwc · April 2, 2019, 3:36pm

Currently there is no option to change this. Why would you like to change it? I could add an option to change the background CSS, however I’d rather see if I can adjust the default.

Gluwc · April 2, 2019, 7:14pm

Release 0.1.8 adds the option to define a card config for each item in the entities list, similar to the entities card. Cards in the entities list will share the main card config except for the items configured per entity.

entities config option now accepts card config options
fixed card element layout

Example

- type: custom:bar-card
  entities: 
    - entity: sensor.living_room_plant_1_moisture
      title: Drancaena
      target: 30
    - entity: sensor.living_room_plant_2_moisture
      title: Meat Eater
    - entity: sensor.living_room_plant_3_moisture
      title: Vet Plant
    - entity: sensor.bedroom_plant_1_moisture
      title: Orchid
  min: 0
  max: 50
  target: 20
  padding: 2px
  severity:
  - value: 10
    color: var(--bar-red)
  - value: 30
    color: var(--bar-yellow)
  - value: 50
    color: var(--bar-green)

gerard33 · April 2, 2019, 8:29pm

I would like to change that color so that it’s more in line with the theme colors.

And as you can change almost all colors of this card, it would be great if this one can be changed as well

Gluwc · April 2, 2019, 9:47pm

I was just curious, since I don’t want to add loads of CSS options. However I agree that since there’s options for most other other parts there’s not really a big reason not to add it, plus it’s pretty easy to add.

Release 0.1.9

removed charge config option from animation config, is now based on charge_entity
added background_style config option

One thing to keep in mind when changing the background CSS is that by default it has some properties to make it transparent and darker. So if you want to set it to a solid color you’ll have to override those as well.

background_style:
  background: red
  opacity: 1
  filter: brightness(1)

anarro · April 5, 2019, 1:06pm

Hi @Gluwc, thks for this Card!!

I have a litel problem with the last update:

Can you help me?

And… its possible to add a General Title?

Thks!
I love this card!

Gluwc · April 5, 2019, 1:24pm

Looking at your config I don’t see a reason why it wouldn’t work. Are you sure it’s using the latest version of the card and not the cached version?

If you’re using custom updater you should use the customcards path instead of local. If you’re not using custom updater make sure you add the version number to the resource to force a cache update.

Using custom updater

 - url: /customcards/custom-lovelace/bar-card/bar-card.js

Non custom updater

 - url: /local/custom-lovelace/bar-card/bar-card.js?v=0.1.9

If you’re sure it’s using the latest version could you check the debug console (F12 in chrome) and see if it throws an error?

Also currently you can not set a main title, however you could try https://github.com/custom-cards/vertical-stack-in-card which lets you set a title.

anarro · April 5, 2019, 4:05pm

Ops!! ooh yes!

url: /customcards/custom-lovelace/bar-card/bar-card.js

Good!!,
Thks!

DavidFW1960 · April 5, 2019, 10:25pm

Could it be possible to make the bar have a tap action? I’d like to be able to tap it and for it to run a shell command…

Gluwc · April 7, 2019, 9:29pm

I’m working on another big update at the moment, I’ll try to include optional service calls into the tap action.

DavidFW1960 · April 7, 2019, 9:30pm

Well that’s getting me excited now lol!

anarro · April 9, 2019, 8:12pm

Hi @Gluwc, I have some problems with this configuration:

…but If I remove this section… then shows a bars in blue color…

severity:
  - color: '#bf4040'
    value: 33
  - color: '#bf9540'
    value: 66
  - color: '#40bf40'
    value: 100

Thanks for your help!

Gluwc · April 9, 2019, 9:17pm

There’s a known issue on github for this, I’ll try to fix it tomorrow.

Gluwc · April 11, 2019, 1:04pm

This should be fixed in the latest version 0.2.0b0.

I will probably remove support for the hue and saturation config in the full 0.2.0 release as well, so this will be a breaking change for anyone still using an old version of the card.

Hopefully I’ll have time this weekend to commit my big update. It will include being able to hide bars if they are below or above a certain value. This allows you to define a big list of bars, but only have the high priority bars visible.

Also you will be able to set config options for a bar in the entity attributes by adding these entries through the HA entity customization. This can be useful if you want to use the bar in multiple locations or views, but not have to set the config for every card individually or if you want to trigger automations based on the set visibility threshold.

anarro · April 11, 2019, 1:55pm

Oook!!, perfect…

I update my configuration when I come back to my home and I will report if I have some problem.

Thank you.

DavidFW1960 · April 17, 2019, 3:39am

any news on this?

Gluwc · April 17, 2019, 7:44am

Updates have been a bit slow since I’ve been working on my HA setup/devices. Most of the update is ready so I’ll see if I can release it today.

Gluwc · April 17, 2019, 9:52am

I’ve updated the versioning so the new release is 1.0.0.

Breaking Change

Removed hue and saturation config options. From now on color has to be used in the card config and severity config.

Updates

Updated versioning.
Added entity_config config option. Enables use of entity attributes as config options.
Added visibility config option. Allows hiding of the bar based on condition.
Added tap_action config option. Selects the the action when tapping the bar.
Added service_config config option. A list of config options when using the service option for tap_action.
Optimized amount of frames for bar animation.

Examples

Service Call

- type: custom:bar-card
  title: Service Call
  entity: sensor.example
  tap_action: service
  service_options:
    domain: mqtt
    service: publish
    data:
      topic: "example"
      payload: "example"

Entity Config

- type: custom:bar-card
  padding: 2px
  entity_config: true
  show_icon: true
  align: split
  indicator: right
  entities:

    # Batteries
    - entity: sensor.lucas_phone_battery
    - entity: sensor.lucas_tablet_battery

    # Plants
    - entity: sensor.living_room_plant_1_moisture
    - entity: sensor.living_room_plant_2_moisture
    - entity: sensor.living_room_plant_3_moisture
    - entity: sensor.bedroom_plant_1_moisture

When entity_config is enabled in the card config will use options defined in the entity attributes. This allows you to re-use the bar config in your UI without having to define the options for each use. In combination with the visibility config option you will be able to define a list of bars that are only visible when they are below a certain threshold.

`customize.yaml`

sensor.bedroom_plant_1_moisture:
  icon: mdi:leaf
  title: Orchid
  target: 30
  max: 50
  visibility: '< 15'
  severity:
  - value: 10
    color: var(--bar-red)
  - value: 20
    color: var(--bar-yellow)
  - value: 50
    color: var(--bar-green)

kpcz · April 17, 2019, 3:29pm

Hi. Are those Netatmo thermostat/Valves? How did you get the signal strenght/battery level? thanks.

DavidFW1960 · April 17, 2019, 10:14pm

OK I can’t figure this out. I have an entity button like this:

              - type: entity-button
                entity: sensor.abb_usage
                icon: mdi:lan-connect
                name: Update ABB
                tap_action:
                  action: call-service
                  service: shell_command.abbusage

I am trying to replace that with being able to tap on the bar instead of having an extra button. I tried this:

          - type: 'custom:bar-card'
            title: Month Used
            entity: sensor.abb_usage
            attribute: daysUsed
            min: 1
            max: sensor.abb_usage.attributes.daysTotal
            height: 20px
            direction: right
            unit_of_measurement: days
            tap_action: service
            service_options:
              domain: shell_command
              service: abbusage

But it doesn’t work. What am I doing wrong?

EDIT: Maybe I got it right. I emptied cache and did a hard reload and it now appears to work. Can you confirm my code is right?