Auto-detect mobile vs laptop to select a dashboard

Configuration Frontend
1

Hi, I’m trying to have HA detect whether its being viewed from a phone/tablet or a laptop to determine which dashboard to use: hints?

2

Maybe browser-mod can do this.

3

I don’t see that reading the docs. I remember seeing something defining a dashboard from the devices screen resolution, does that ring a bell?

4

Don’t you just set it in user settings? Default dashboard? It is per device.

5

You may choose a way of using solutions (like a standard conditional card, custom state-switch & layout-card) which analyse a “mediaquery” and then show a particular card(s).
Or you may just create views separately for “desktop user” & “phone user” - and then use these accounts on these devices.

6

Ildar, yes I will be going down the path of the mediaquery to determine the cards. While building both dashboards, using a switch as the state-switch until I figure out the media query, I come across this error:

…
- type: custom:state-switch
entity: switch.esphome_web_3a3db8_pin_4_switch
states:
‘on’:
type: custom:vertical-layout
‘off’:
type: custom:horizontal-layout
cards:
- type: entities
entities:
- sensor.sun_next_dawn
- sensor.sun_next_dusk
- sensor.sun_next_midnight
- type: entities
entities:
- sensor.sun_next_noon
- sensor.sun_next_rising
- sensor.sun_next_setting

This does not display anything in the dashboard: what am I doing wrong? The variable content first few state-switch cards work fine

This is part of this complete dashboard:

views:

  • title: testt
    layout: custom:grid-layout
    type: custom:grid-layout
    badges:
    cards:
    • type: picture
      image: >-
      https://xxxxx.png
    • type: button
      show_name: true
      show_icon: true
      tap_action:
      action: toggle
      entity: switch.esphome_web_3a3db8_pin_4_switch
    • type: custom:state-switch
      default: ‘on’
      entity: switch.esphome_web_3a3db8_pin_4_switch
      states:
      ‘on’:
      type: markdown
      content: |
      light is on
      ‘off’:
      type: markdown
      content: |
      light is off
    • type: custom:state-switch
      default: ‘on’
      entity: switch.esphome_web_3a3db8_pin_4_switch
      states:
      ‘on’:
      type: markdown
      content: |
      light is on
      ‘off’:
      type: markdown
      content: |
      light is off
    • type: custom:state-switch
      entity: switch.esphome_web_3a3db8_pin_4_switch
      states:
      ‘on’:
      type: custom:vertical-layout
      ‘off’:
      type: custom:horizontal-layout
      cards:
      • type: entities
        entities:
        • sensor.sun_next_dawn
        • sensor.sun_next_dusk
        • sensor.sun_next_midnight
      • type: entities
        entities:
        • sensor.sun_next_noon
        • sensor.sun_next_rising
        • sensor.sun_next_setting
7
  1. The posted code is unformatted - hence cannot be analysed.
  2. Suggest to ask any state-switch related questions in the dedicated thread.
1 Like
8

Oh that’s awful, I did try pressing : Format Code and it did not do anything it seems. I’ll go and post this on the thread, thank you!

9

You quoted the config. The format button looks like </>

Alternatively you can put three backticks above and below your code manually: ```

10

You haven’t defined any Layout, nor Grid-area’s