Button Card Navigation Example Nissan Leaf

This is the result of a lot of play, trial and error with examples here on the forum. It works very well so I hope it can benefit others. I use a TP-Link HS110 and basic 433 temp sensor for this project to work. I can share code if someone needs it, my understanding of how things work is limited.

The advantage I find is that this layout allows me to integrate many sensors relatively neatly, its easy for other family members to understand, and I can (sort of) use it as a template. I have a similar menu to control home heating, ventilation, washer/dryer, etc.

Special thanks to those of you who have posted examples that can be used directly in the Hassio Dashboard Editor and Template editor.

type: 'custom:button-card'
icon: 'mdi:ev-station'
color: auto
size: 55%
show_state: false
name: |
  [[[
   return  states["sensor.leaf_status"].state
  ]]]
show_label: true
show_name: true
tap_action:
  action: navigate
  navigation_path: '#p1'
  haptic: selection
double_tap_action:
  action: call-service
  confirmation:
    text: Start charging?
  service: script.leaf_start_charge
  haptic: selection
label: |
  [[[
   return  'Battery ' + states["sensor.leaf_charge"].state + '%'
  ]]]
styles:
  icon:
    - padding-left: 0px
    - color: |
        [[[
          if (states['sensor.leaf_status'].state == 'Connected') 
          return "rgba(255,193,7)";
          else if (states['sensor.leaf_status'].state == 'Charging') 
          return "rgba(255,193,7)";
          else return "rgb(74,97,133)";
        ]]]
  card:
    - padding-left: 0px
    - background: 'linear-gradient(rgba(50,50,50,0.3) 60%, rgba(50,50,50,0.1) 40%)'
    - border-radius: 5px
    - border: |
        [[[
          if (states['sensor.leaf_status'].state == 'Connected') 
          return "solid 2.5px rgba(218,249,254)";
          else if (states['sensor.leaf_status'].state == 'Charging') 
          return "solid 2.5px rgba(0, 180, 255)";
          else return "solid 1.5px rgba(50,50,50)";
        ]]]
    - box-shadow: |
        [[[
          if (states['sensor.leaf_status'].state == 'Connected') 
          return "2px 4px 9px 4px rgba(60,158,203)";
          else if (states['sensor.leaf_status'].state == 'Charging') 
          return "2px 4px 9px 4px rgba(0, 111, 255)";
          else return "0px 0px 0px 0px rgba(50,50,50)";
        ]]] 
    - color: |
        [[[
          if (states['sensor.leaf_status'].state == 'Connected') 
          return "rgba(163, 214, 229)";
          else if (states['sensor.leaf_status'].state == 'Charging') 
          return "rgba(0, 180, 255)";
          else return "rgba(163, 214, 229)";
        ]]]
    - text-shadow: |
        [[[
          if (states['sensor.leaf_status'].state == 'Connected') 
          return '0px 0px 5px rgba(0, 111, 255)';
          else if (states['sensor.leaf_status'].state == 'Charging') 
          return '0px 0px 5px rgba(0, 111, 255)';
          else return '0px 0px 5px rgba(0, 111, 255)';
        ]]]
  name:
    - justify-self: center
    - font-weight: bold
    - font-size: 12px
  label:
    - font-size: 12px
    - font-family: Helvetica
    - padding: 1px 10px
    - justify-self: center
    - text-transform: capitalize
    - font-weight: bold
  grid:
    - grid-template-areas: '"i" "n" "s" "l"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  img_cell:
    - justify-content: start
    - align-items: start
entities:
  - entity: binary_sensor.leaf_charging_status

6 Likes