Options to show lovelace on foldable devices

Configuration Frontend
1

Hey hey
I got a foldable phone (Samsung Z fold5).
So i want to create a new mobile dashboard - and find a way to automatically switch between one dashboard for the phone closed and one dashboard for the phone opened.
But under settings → mobile App I dont find any sensor to determin wether the phone is folded or not.
So I tried the conditional card with new screen feature:

type: conditional
conditions:
  - condition: screen
    media_query: '(min-width: 0px) and (max-width: 640px)'
card:

and

type: conditional
conditions:
  - condition: screen
    media_query: '(min-width: 650px) and (max-width: 3000px)'
card:

With this I could create 2 dashboards inside one (one for the smaller view and one bigger).
If I fold and unfold my phone it works perfectly, but it also switches to the wide condition if I turn my (unfolded) phone in landscape mode.
Which I think isnt what I want.

Are there any suggestions to this “problem”?
Or might it be better to manually swap between the dashboards?

2

First thing that comes to mind is also include the height of the viewport, if the new card supports it in the media query. That should discriminate between landscape and portrait.

3

It might also be a question about accessibility to the phone.
It is hard to develop specific things for devices you can not test upon.

4

Also you should post the code of your dashboard, not only your card,
it’s your dashboard you have to address not the card, as the card “follows” the conditions stated, by the dashboard
Meaning:
a dashboard have “columns” which adapt to the screen-width, your card adapts to the column-width of the dashboard
So post your dashboard, and pics of how it currently looks (folded/unfolded) , and explain which result you are trying to get (folded/unfolded)

PS: a phone usually only shows 1 column in vertical-mode, but can show 2 columns in (holding phone horizontal)landscape-mode

5

I thought the same as @WallyR
Because foldable phones are really rare, I didnt expect anything working out of the box.
So I wanted to design (because Im sure I habe to) the dashboard on my own.
So there is nothing to show @boheme61 .
Because I did nothing than creating a blank dashboard and put those teo shown condition cards on it, to play with the values.
What I then wanted to do is, create the folded view (which basically is a usual phone dashboard where all cards are put into 1 vertical stack, to have all in 1 card to add it to the shown condition card).
And do the same for unfolded mode, just with 2 columns

Ofcourse it works if I just put some cards on a dashboard (without sorting them in columns).
In folded mode all is shown with 1 column.
If I unfold my phone its shown in 2 columns.
But its rly hard to sort the cards - fitting for both views.
And sometimes its hard to krder the cards ans take care about their height (which doesnt matter in 1 column view, but might look bad in 2 columns mode).

So i thought of creating basically 2 dashboards - for folded and unfolded.

6

and what do you want , unfolded- landscape-mode to show ?

7

Make a feature request.
Describe your problems, your attempts to solve and what you need to succeed and/or what feature you would like for the best solution.
Folded phone might die out again, like in the past, but for now they seem to be a possible trend coming up in the near future, so more might benefit from an early feature.
If you can help with some testing then write that too, since it may enable a developer to succeed without an actual phone.

8

You can accomplice what you want , i think ,with card_modedit: layout-card !!! :slight_smile: installed, you can create a “grid-layout”, where you can have multiple, media-queries, and decide/place the cards(even span 2 columns) in which ever order/area you want

    type: custom:grid-layout
    height: auto
    padding: 0
    layout:
      grid-template-columns: 33% 33% 33%
      grid-template-rows: auto
      grid-template-areas: |
        "header1 header2 header3"
        "main1 main1 main3"
        "diag1 diag1 diag3"
        "footer1 footer2 footer3"
      mediaquery:
        '(max-width: 800px)':
          grid-template-columns: 100%
          grid-template-areas: |
            "header1" "header3"
            "main1" "main1"
            "footer1" "footer2"
            "diag1 diag3"
        '(max-width: 600px)':
          grid-template-columns: 100%
          grid-template-areas: |
            "header1"
            "main1"
            "footer1"
            "header3"
            "main3"
            "footer3"
            "diag1"
9

It’s a Card, it will always follow/be limited by the View, whether it’s default_masonry, panel-view etc.
The current “solution” seems to be “caused” by the Dashboard View … and a max-width: of 3000px seems beside irrelevant, as 2 columns: as stated, would then be 6000px, for 2 cards,
I doubt the phone have 6000px unfolded, there are 2 columns because of the View-conditions ( what ever view is used, OP just created a “blank” dashboard ( meaning most likely masonry-default )

10

True, but a feature request to be able to react to new values in HA companion app, like if it is folded or not, height of view, if it not provided already or maybe even a way to show a specific dashboard based on some values could help here.

11

it’s most likely controlled by screen-width px;(in the phone), similar to reduce “browser-windows-width” or flip phone) and HA will adapt, cording to the view-settings., what we see is a website/webview so the View(Dashboard) has to be addressed.
Our phone, laptop, smart-tv just present a website/webapp(a browser)
If your View-Dashboard settings has a max-width of i.e 400px ( or as wide as the default cards ! )
If you just create new dashboard, take-control, start with “blank”( Masonry-default ) as OP then create a button-card … How wide is this card ? Fullscreen ? No, but 1/3 ( on normal/average screen, and 1/1 on phone ) Doo to the View-Settings for Masonry-Default( initially 4 columns, throwing the cards around, as OP also “experienced” ), and if you choose panel-view(1 card) with 1 card(no grid, or horizontal-stack) a button-card become way BIG, doo to the View settings, most cards have a max-width in .js to fit-nicely in most 3 columns-setup, because it’s the default in HA

12

I agree.
We might have to fight the initial way HA works here, but we actually do that often with layout and card mods
The issue here is maybe we need some extra sensors to know when we want to fight it and when not to.
The fight/solution will be up to the users, but a sensor to somehow tell if a fold/flip phone is open or closed might be the missing link.

And HA does not try to aim for 3 columns in a standard dashboard view, but it have. Amax size for cards and most screen resolutions seems to be hitting the limit for 3 columns.
A higher resolution and/or collapsing the left link section might increase the column count.
I can reach 5 on one of my screens that way.

1 Like
13

True, i just notice i had set that column-limit myself, in 1 view(with 3 vertical-stacks) , And had to use grid-layout in another, to have the most essential cards in top of in i.e the phones-vertical-view VS landscape(flipped) 1 VS 2 , and for Laptop 3 :slight_smile:
PS: with grid-layout you can also chose to show only 1 or 2 card/area from the view, with the media-query

14

I have to look into that mefia-query for grid view then.
I have set a few grid views for some of my dashboards and have just realized it does not do any good for the wievs I the companion apps. :confused:
Thanks for the hint. :pray::slightly_smiling_face:

15

You can use both width and height etc , with the media queries