ha-card-waze-travel-time's Introduction

HA (Lovelace) Card Waze Travel Time

Features

Display multiple Waze routes sensor
Show distance and duration
Show best route to take
Opening the Waze App on route click
Supports Metric and Imperial systems via HA global settings

Card Configuration

Import the card using:

resources:
  - url: /hacsfiles/ha-card-waze-travel-time/ha-card-waze-travel-time.js
    type: module

Optionally, you can use the following plugin to change the card colors:

resources:
  - url: /hacsfiles/lovelace-card-mod/card-mod.js
    type: module

Card variables

Name	Type	Requirement	Default	Description
type	string	Required		Card type must be `custom:ha-card-waze-travel-time`
header	boolean	Optional	`true`	Hide/show route columns header
name	string	Optional		Card name shown on top the routes
unit	string	Required		It can assume the values: `km`/`mi`
columns	string list	Optional	`to, distance, duration, icon`	Ordered list of columns to display. Valid values: `from, to, distance, duration, icon, route`
destinations	object list	Required		List of destination objects to display

Destination object

Name	Type	Requirement	Description
entity	string	Required	The waze sensor entitiy
from	string	Optional	Route from
to	string	Required	Route destination name

Examples

type: custom:mod-card
card:
  type: custom:ha-card-waze-travel-time
  header: false
  name: "Route to..."
  unit: km
  columns:
    - from
    - to
    - duration
    - distance
    - icon
  destinations:
    - entity: sensor.waze_home_1_workplace
      from: "Place 1"
      to: "Place 2"
    - entity: sensor.waze_home_2_workplace
      to: "Place 3"
style: |
  ha-card {
    --primary-text-color: #FFFFFF;
    --secondary-text-color: #727272;
    --text-primary-color: #ffffff;
    --disabled-text-color: #bdbdbd;
    background-image: url("/local/imgs/card_back.png") ;
    background-repeat: no-repeat ;
    background-color: rgba(50,50,50,0.3) ;
    background-size: 100% 300px ;
    border-radius: 20px ;
    border: solid 1px rgba(100,100,100,0.3) ;
    box-shadow: 3px 3px rgba(0,0,0,0.4) ;
  }

Recommend Projects