Lovelace: Bar Card

Gluwc · April 18, 2019, 7:36am

It’s very possible you’re not doing anything wrong. I’ve only tested it with the example I made, I’ll have a look today to see what’s up.

EDIT: Your code does look correct.

DavidFW1960 · April 18, 2019, 7:37am

See the edit… it is actually working. Just needed to clear cache and hard reload and it roared into life. Thanks!

jimpower · April 21, 2019, 9:41pm

Is there a way to hide the value from being displayed in the bar?

Gluwc · April 23, 2019, 2:20pm

You can now in 1.1.0.

Updates

Added show_value config option, hides value and unit of measurement when set to false.
Throws error when entity doesn’t exist.

jimpower · April 23, 2019, 7:12pm

thanks , another handy thing would to be able to set different “max: levels” for each entity whenever you have more then one in the same card.

@Gluwc I am unable to make this work have I implemented this wrong? Sensor values still showing.

              - type: custom:bar-card
                title_position: inside
                show_value: false
                align: center
                padding: 4px
                card_style: 
                  border-radius: 5px
                columns: 4
                entities:
                  - entity: sensor.core_router_state
                    title: Router
                  - entity: sensor.core_switch_state
                    title: Switch
                  - entity: sensor.upstairs_switch_state
                    title: Switch 2
                  - entity: sensor.downstairs_ap_state
                    title: Altai AP1
                  - entity: sensor.upstairs_ap_state
                    title: Altai AP2
                  - entity: sensor.5g_ac_main_state
                  - entity: sensor.5g_ac_upstairs_state
                    title: 5G Bed TV
                  - entity: sensor.5g_ac_media_tv_state
                    title: 5G Media TV
                severity:
                - value: 50
                  color: '#bf4040'
                - value: 100
                  color: '#1db954'

Gluwc · April 24, 2019, 7:23am

My guess is your cache is outdated? Also you should already be able to set most config options per entity in an entity list, including min/max.

Three · April 24, 2019, 7:57am

Lol saw the title of this post and clicked on it as curious to what someone had done with Lovelace in their bar. Must be that time of the afternoon

jimpower · April 24, 2019, 8:19am

I see, in the docs its written like it was a global setting as opposed to an entity setting. Works if I move to entity setting.

Sildenafil · April 27, 2019, 5:38am

Hi,
Is It possibile to have two target lines forse the sale bar? What Is the syntax?
I am using it for miflora sensors and I would like to insert two markers, One for the minimum value and another for the maximum value.
Thx

firstof9 · April 27, 2019, 3:39pm

@Gluwc
With this config:

entities:
  - entity: sensor.bedroom_3_temperature_battery
    title: Girls Room Senso
  - entity: sensor.loft_temperature_battery
    title: Loft Sensor
  - entity: sensor.master_bedroom_temperature_battery
    title: Master Sensor
  - entity: sensor.front_door_lock_battery
    title: Front Door Lock
  - entity: sensor.house_siren_battery
    title: Siren Battery
  - entity: sensor.mychevy_2014_chevrolet_spark_ev_battery_level
    title: Spark Battery
max: 100
type: 'custom:bar-card'
height: 25px
min: 0
severity:
  - value: 70
    color: var(--label-badge-green)
  - value: 50
    color: var(--label-badge-yellow)
  - value: 40
    color: var(--label-badge-red)

I’m getting this result:

Any ideas on what’s wrong?
Version 1.1.0 of card

HTML shows up as the following:

<div id="bar_sensor_house_siren_battery_4" style="--bar-percent:100%; --bar-charge-percent:100%; --bar-color:undefined;"><div id="targetMarker_sensor_house_siren_battery_4" style="--target-display:none;"></div></div>

Thanks.

Gluwc · April 27, 2019, 5:10pm

Try reversing the severity order from low to high, otherwise I don’t see anything wrong with your config.

firstof9 · April 27, 2019, 6:09pm

@Gluwc low to high makes the bars that are green yellow, but the other bars show --bar-color:undefined still.

firstof9 · April 27, 2019, 7:41pm

Fixed it, had to set the value for green to 100.

Gluwc · April 27, 2019, 8:19pm

Currently you can only set min and max values for the bar, but not for the target. I’ll consider adding a min and max for the target.

Three · May 5, 2019, 8:08am

First time I am trying use a custom card since before lovelace and I can’t seem to get the card to work I am getting ‘No Card Type Found’ error.

I have followed instructions on github readme and rebooted home-assistant on my PI but keep getting same error message.

These are installation notes on github.

Step 1

Copy bar-card.js to <config directory>/www/custom-lovelace/bar-card/bar-card.js .

Step 2

Add bar-card resource to ui-lovelace.yaml .

resources: - url: /local/custom-lovelace/bar-card/bar-card.js?v=1.0.0 type: js

Step 3

Add a custom card to your ui-lovelace.yaml .

type: custom:bar-card entity: sensor.example

configurator
Placement of bar-card.js in my home-assistant

Code added to top of Lovelace

Attempting to create card

Slight alteration to card code, still no joy.

I am gathering it has something to do with the base of the url but I don’t know what to change it too is local meaning the www folder which is where you can see above in the screen grab the folder/file is.

woody4165 · May 5, 2019, 8:49am

Please format correctly the code, otherwise will be difficult to help you.

https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371

First of all replace local with customcards. It will link to www as local

You have to do a correct indentation, use a text editor that supports yaml so that it will be easy to format.

FXS · May 5, 2019, 9:13am

I cannot seem to find a way to disable the animation of the bar-card. I have the following config:

      - type: custom:bar-card
        entity: sensor.battery_voltage
        title: Battery Voltage
        animation: off
        height: 50px
        icon: mdi:gauge
        show_icon: true
        align: split
        min: 49
        max: 57
        severity:
        - value: 50.5
          color: '#FF4500'
        - value: 52
          color: '#FFA500'
        - value: 56.6
          color: '#40bf40'

Any suggestions on how to disable the animation?

Gluwc · May 5, 2019, 3:14pm

Yes this is most likely an issue with the resource. It’s possible you don’t have the raw version of the .js file. Double check the contents of this file it should start with class BarCard extends HTMLElement.

Gluwc · May 5, 2019, 3:15pm

When using off in HA yaml files it needs to be quoted like so 'off', same goes for 'on'. I’ve updated the documentation to include this.

FXS · May 5, 2019, 3:21pm

Thanks - that works perfectly!