Conditional cards for dummies?

So I want to add a card that displays travel time, and I’d like it to be conditional so that if I’m at home (before 10am) it displays a card with information on travel to work (travel time, weather at work, etc). If I’m at work (say, between 11am and 6pm, and my car is located in work_zone), then show me weather at home, travel time, etc.

Looking at docs https://www.home-assistant.io/lovelace/conditional/, i’m not sure how to use this

Basically I tried the following:

travel_time_card:
- type: conditional
conditions:
  - entity: blah (haven't written this yet)
    state: blah (haven't written this yet)
card:
type: entities
entities:
  - sensor.time_to_home

but this fails to validate using configuration validation. I have a group/view that displays a tab at the top like this:

  driving:
    name: Driving related
    view: yes
    icon: mdi:car-connected
    entities:
      - group.travel_time_card

and then I want the travel time card to either display home->work or work->home, but can’t really figure out how to implement the conditional card. what am i missing?

Edit: just to clarify, I replaced the example condition with blah since I haven’t set up the sensor for time as it seems while time works as a condition in other places, it doesn’t work for this.

what you need to do is to create 2 cards, and have them display (= group.set_visibility to true/false) depending on your device_tracker location (= automation that triggers based on your device_tracker)
I hope I’ve given you enough to get started.
I personally prefer receiving pointers and do it myself for that sense of achievement, but if you need more help let me know…

@lolouk44, that’s how you do it in the normal UI.

@evanrich, here’s a post that I use to show/hide volume sliders based on which zone is on/off for my reciever (in lovelace):

Thanks went too quick and didn’t see the lovelace bit
@evanrich if you want some more good example of what can be done in lovelace, check/bookmark this link:
https://home-assistant-lovelace-gallery.netlify.com/

1 Like

Thanks, I also prefer to figure it out myself, but when googling doesn’t help, sometimes you gotta get pointed in the right direction, which you’ve done :slight_smile:
@petro Thanks, I found out that these are for lovelace UI, which I thought WAS the original UI, but found out via another question last night that it’s the new UI. Basically I was trying to implement a lovelace feature in classic UI, that’s why it wasn’t working out. I think the documentation could use some help, I might try updating it and submitting a PR.

Thanks.