Lovelace: Bar Card

Modified bar-card.js file is attached in previous post but it was for first version 0.0.1, in new version 0.0.2 it should be possible without editing source file but I haven’t tried it yet

Good point. It could be possible to achieve that result with the new CSS styles, however it might be somewhat tricky.
I was actually working on adding an “inside” option to the “title_position”, but was having a bit of trouble. So I decided to release CSS styles first, however considering that more people would like to have this option I will try to add it this weekend.

It would great, TOPs3c’s Bar shape looks really good. I would really like to be able to replicate it.

Thanks.

Added ‘inside’ option for title_position in release 0.0.3.
By default the text will be centered but you can use the bar CSS style to align it to the left side like T0ps3c’s example.

  bar_style:
    text-align: left
    padding-left: 4px
1 Like

Thank you for your answer.

I can’t figured out how to replicate it, could you please help me. Here is my code so far:

          - type: custom:bar-card
            title: mem
            entity: sensor.memory_use_percent
            bar_style:
              text-align: left
              padding-left: 4px
            rounding: 5px
            height: 30px
            style: {top: 37.5%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
            from: left
            min: 0
            max: 100
            saturation: 50%
            severity:
            - value: 50
              hue: '120'
            - value: 75
              hue: '40'
            - value: 100
              hue: '0'

You need to define the title_position.

title_position: inside

1 Like

Sorry to be dumb but it doesn’t work. My code is probably wrong:

          - type: custom:bar-card
            title: mem
            entity: sensor.memory_use_percent
            bar_style:
              text-align: left
              padding-left: 4px
              title_position: inside                  
            rounding: 5px
            height: 30px
            style: {top: 37.5%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
            from: left
            min: 0
            max: 100
            saturation: 50%
            severity:
            - value: 50
              hue: '120'
            - value: 75
              hue: '40'
            - value: 100
              hue: '0'

Thanks

No worries, I probably didn’t explain it properly. The title position isn’t part of the bar style. It’s a card config.

- type: custom:bar-card
            title: mem
            entity: sensor.memory_use_percent
            title_position: inside
            bar_style:
              text-align: left
              padding-left: 4px
              border-radius: 5px
            height: 30px
            style: {top: 37.5%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
            min: 0
            max: 100
            severity:
            - value: 50
              hue: '120'
            - value: 75
              hue: '40'
            - value: 100
              hue: '0'

Modified your code a bit as well.

1 Like

Thank you very much Gluwc you are the man.

Sorry but i still have a strange result:

19

You will either have to reduce the font size or increase the bar height to make the text fit the bar.

Ok thanks Gluwc.

Sorry to bother you with this but i can’t find the option to reduce the font size.:sweat:

Font size is defined by the bar_style CSS when the title is inside the bar. If you want a smaller font just add font-size.

- type: custom:bar-card
            title: mem
            entity: sensor.memory_use_percent
            title_position: inside
            bar_style:
              text-align: left
              padding-left: 4px
              border-radius: 5px
              font-size: 10px
            height: 30px
            style: {top: 37.5%, left: 1%, transform: none, overflow: hidden, border-radius: 8px, width: 48%, --paper-card-background-color: 'rgba(84, 95, 108, 0.7)'}
            min: 0
            max: 100
            severity:
            - value: 50
              hue: '120'
            - value: 75
              hue: '40'
            - value: 100
              hue: '0'
1 Like

Thank you :bowing_man:

Thanks for that share @jimpower

The sensor works but I get this warning after a ha restart.

Do you know how to avoid this?

Template sensor sensor_count has no entity ids configured to track nor were we able to extract the entities to track from the value template(s). This entity will only be able to be updated manually.

@h4nc

you could add an entity_id to your template, I personally don’t and it doesn’t effect the operation of the sensor.

ok thanks, so I will keep it like it is.

What @jimpower said but I add

        entity_id: sensor.date

It just satisfies my OCD better :wink:

2 Likes

I have for of those sensors (automations, sensors, binary_sen, scripts).

I also don’t have a sensor.date entitiy but a sensor.time entity

So do I jsut have to add

entity_id: sensor.time

to each of those sensors to get rid of this … and satiesfie my OCD?

You could but I wouldn’t! It will then update your template sensors every second.

Better (IMHO) to also include the date sensor like you have with time:

  - platform: time_date
    display_options:
      - 'time'
      - 'date'