Lovelace: Bar Card

Release 0.0.7 adds the option to add a target marker on the bar.

  • added target option, adds a marker at selected value

target

1 Like

hi, I wanted to ask how did you configure your onplus to view the battery status?

Hi @gojonny
I use Life360 component (at least for now) that allows me to track my phone, have battery level and also if the phone is charging or not.

If you want I can share the sensor configurations.

I have also tested GPS Logger and that provide GPS tracking and battery level, not yet the charging status even tho there is an open FR with them for have that piece of information aswell.

If and once they add that, I will probably stop using Life360 because I am not big fan of the idea that a 3rd party company is always tracking my phone (I know by default other software in my phone are doing that, but heck at least one less :smiley:)

Let me know

Andrea

Thanks for adding this!

One more request - any way the target could be another sensor value or a fixed value as it is now?

I ask as this would allow a much broader use case.

Thanks a lot

1 Like

I was thinking the exact same thing after Iā€™d committed the change, but it was getting pretty late :sweat_smile:. Should be a fairly easy thing to add.

This is a fantastic card and over the time it has existed so much has been added to itā€™s customisation potentialā€¦thanks so much for making it possible.
If I could ask for you to consider one more possibility?
What if the bar could be used vertically? My wish would be to show the contents of a tank of water in a more ā€˜realisticā€™ way?
Would that be possible do you think?
Cheers!

This instantly allows the display of a current value and the current setpointā€¦which is very desirable.

Ha ha, know the feeling. Again thanks a lot.

Definitely possible, but this will take me a bit longer to do. Iā€™d probably have to rework some of my code to make it easier to switch between vertical and horizontal.

I am in no rush at all so if it is possible for you and you agree that is of use then anytime you have the time would be great.

Cheers!

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?

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

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 ^^ )

2 Likes

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 :wink:

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 :slight_smile:

Andrea

Still fiddling a bit but pretty happy alreadyā€¦My mobile view.

3 Likes

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
vertical

      - 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
1 Like

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.

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'

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

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
3 Likes