#A electrical car in the dashboard

1 messages · Page 1 of 1 (latest)

dull citrus
#

To display the status of an electrical car with a badge in a dashboard in a minimalistic way i have to do a lot of configuration in the dashboard.

  1. car is pluged in and is charging
  2. car is plugged in without charging
  3. car is not plugged in but at home
  4. car is not at home

to do this as badge i have to configure 4 badges with different icons, colors and different visibility.

Is there an easier way to do this?

image.png image.png
nova pivot
#

You could use a template badge
https://github.com/piitaya/lovelace-mushroom/blob/main/docs/badges/template.md

It's the same amount of icons and colors but having it all in 1 configuration might make it easier.

Personally, I don't mind having 4 conditional badges.
I make 1 badge, duplicate it a few times and adjust each variant in YAML.

GitHub
lovelace-mushroom/docs/badges/template.md at main · piitaya/lovela...

Build a beautiful Home Assistant dashboard easily. Contribute to piitaya/lovelace-mushroom development by creating an account on GitHub.

#

Ther is no right or wrong way of doing this

dull citrus
#

this is my home-dashboard at the moment. Most of the badges are not visible at a time. I think this is the key for a good dashboard in general. But its a lot of work

image.png image.png
nova pivot
#

I also like to only show the stuff that matters now.

dull citrus
#

The color of the car icon is changing automatically with the state of charge from red to green without additional configuration. I hope homeassistant will add more of this. Thank you for your help!

gilded onyx
#

When it comes to "personalizing" a badge or card, templating is the easiest go-to option. I made this example as a proof-of-concept just to see if I could do it and I still use it today. (It is probably more complicated than it needs to be as I'm sure the badge probably does most of this by default nowadays.) This is for my phone but should be easily adapted to your car.

type: custom:mushroom-chips-card
alignment: center
chips:
  - type: template
    entity: sensor.s25_ultra_battery_level
    content: |
      {% if states(entity) != 'unknown' %}
      {{ states(entity) }} {{ state_attr(entity, "unit_of_measurement") }}
      {% else %}
      ???
      {% endif %}
    icon_color: |
      {% set battery_level = (states(entity) | int) %}
      {% if battery_level >= 90 %} green
      {% elif battery_level >= 80 %} light-green
      {% elif battery_level >= 68 %} orange
      {% elif battery_level >= 56 %} yellow
      {% elif battery_level >= 44 %} amber
      {% elif battery_level >= 32 %} orange
      {% elif battery_level >= 20 %} deep-orange
      {% else %} red
      {% endif %}
    icon: |
      {% set battery_level = states('sensor.s25_ultra_battery_level') | int // 10 * 10 %}  
      {% set charging_state = states('sensor.s25_ultra_charger_type') %}  
      {% set is_charging = is_state('binary_sensor.s25_ultra_is_charging', 'on') | iif(True, False) %} 
      {% set map = {"none":"", "ac":"charging-", "wireless":"charging-wireless-"} %} 
      {% set charging = map[states('sensor.s25_ultra_charger_type')] %}
      {% if battery_level == 100 and is_charging == True %} mdi:battery-charging  
      {% elif battery_level == 100 %} mdi:battery    
      {% elif battery_level >= 10 %} mdi:battery-{{charging}}{{battery_level}}    
      {% elif battery_level >= 0 %}mdi:battery-{{charging}}outline    
      {% else %} mdi:battery-unknown    
      {% endif %}
    tap_action: none
    hold_action: none
    double_tap_action: none
image.png