Lovelace: Bar Card

Gluwc · March 9, 2019, 1:12am

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

gojonny · March 9, 2019, 7:06am

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

SeLLeRoNe · March 9, 2019, 11:01am

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 )

Let me know

Andrea

jwelter · March 9, 2019, 11:14am

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

Gluwc · March 9, 2019, 11:21am

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

wellsy · March 9, 2019, 12:02pm

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!

wellsy · March 9, 2019, 12:07pm

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

jwelter · March 9, 2019, 12:09pm

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

Gluwc · March 9, 2019, 3:09pm

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.

wellsy · March 9, 2019, 9:30pm

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!

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