Default Lovelace view based on binary sensor

Configuration Frontend
1

Hello,

I have a pretty reliable method of knowing when I am in my bedroom. I would like to make it so that when I open the Home Assistant app on my phone, it immediately opens the “Bedroom” view of my main dashboard (instead of the default view for the main floor).

I use yaml to configure all of my dashboards/views and I know how I can switch it up there if I hardcode it, but I’d like to be able to do it dynamically based on my “binary_sensor.in_bedroom” sensor, or via an automation triggered by that sensor.

Does anybody know if that is possible?

2

This is possible using the Custom Header card by maykar. It has a feature called default_tab: which does exactly this. Here’s a copy and paste from my config for an example:

custom_header:
  default_tab: >-
    {%- if is_state('binary_sensor.car_presence', 'on') -%}
    cars
    {%- elif is_state('input_boolean.radio_playing', 'on') -%}
    media
    {%- elif is_state('binary_sensor.sleeping', 'on') -%}
    sleep
    {%- elif is_state('alarm_control_panel.home_alarm', 'triggered') -%}
    security
    {%- else -%}
    0
    {%- endif -%}
3

Oh wow, that’s awesome. Thanks for pointing that out! It looks like Custom Header also has per user/device options too. Time to dig in. I appreciate it!

4

No problem, it’s one of my favorite and most useful custom cards :slight_smile:

If you need any help with it be sure to check out the Custom Header thread on these forums.

5

Well, I got things working pretty well how I wanted… my only question is have you figured out a way to prevent the “flash” of the old header prior to replacing it with the Custom Header version?

I doubt it, as someone asked the same question on that thread just 2 days ago, and the author said it’s unavoidable.

I understand why Custom Header can’t control this, due to the shadow DOM and separation between the core and each component… but not sure if you’ve figured out anything a little “outside of the box”.

The flash of the old header isn’t so bad on a computer but on a phone it makes the whole UI “jerk” for a second every time you change tabs. Maybe I’ll get used to it but at the moment it’s making me wonder if the tradeoff is worth it.

I messed around with changing these variables in my theme:

layout-fixed-top_-_position: absolute
layout-fixed-top_-_top: -9999px

At first it seemed better but I quickly realized it caused the header not to show on non-lovelace cards.

I am a full-time web developer and while I appreciate the component based setup… sometimes I am just longing for a classic “overrides.css” file that would let me do whatever I want!

6

Well, CH is deprecated now, is there any other way how to achieve the above mentioned? i.e. Default Lovelace view based on binary sensor?

7

Finally I have a solution which works well for me on my WallPanel,
Custom Header is not needed

automation:

  #--------------------------------------
  # Switch to the default view on screensaver start
  #---------------------------------------
- alias: 'go_to_default_view'
  trigger:
  - platform: numeric_state
    entity_id: sensor.panelbrightness
    below: 30
    value_template: "{{ float(state.state) }}"
  condition:
    condition: not
    conditions:
    - condition: state
      entity_id: sensor.currenturl
      state: 'http://192.168.1.100:8123/lovelace/home'
  action:
  - service: browser_mod.navigate
    data:
      navigation_path: /lovelace/0
      deviceID:
      - c7aaf1da-bfexZa7f

automation can be fired by any sensor, in my case sensor.currenturl is MQTT based from WallPanel