Any trick that will allow a dashboard to be used (and fit) in landscape mode without creating and supporting a separate one?

🛎️ Get Help
1

Hi folks,

I created a sweet house map in portrait mode and I'm curious if any dashboard experts out there might have one of those "secret cures they don't want you to know about" type of way to make it rotate and still fit in landscape mode.

I know I can lock screen rotation, but then the text is sideways.

Is there any method to avoid having to recreate the same map in landscape mode and maintain two dashboards?

2

You'll need to add some custom CSS that targets your screens view port dimensions. You can get those at this site.(on the device not your computer). Use those number in place of max-width and height shown to edit the CSS entry below (one sperate entry for each landscape and portrait if you want). Then change the zoom percentage until it fits.

Or use smartly where we have done most the work for you. Backup for JSON before making major changes, so you can revert if needed.

For the ipad I use...

@media screen and (max-width: 1024px) and (min-width:1020px){.dashboard{zoom:0.95;}}

Here ares some from my cell phone dash that is set for 3x across portait but has other entries as well.

@media screen and (orientation: portrait) and (max-width:361px) and (min-width:359px){.dashboard{zoom:0.7741935483871; -moz-transform:scale(0.7741935483871);}}

@media screen and (orientation: landscape) and (max-width:641px) and (min-width:639px){.dashboard{zoom:1.041; -moz-transform:scale(1.041);}}

@media screen and (orientation: portrait) and (max-width:769px) and (min-width:767px){.dashboard{zoom:1.004; -moz-transform:scale(1.004);}}

@media screen and (orientation: landscape) and (max-width:1025px) and (min-width:1023px){.dashboard{zoom:0.962; -moz-transform:scale(0.962);}}

@media screen and (orientation: portrait) and (max-width:385px) and (min-width:383px){.dashboard{zoom:0.8258064516129; -moz-transform:scale(0.8258064516129);}}

@media screen and (orientation: landscape) and (max-width:781px) and (min-width:779px){.dashboard{zoom:1.02; -moz-transform:scale(1.02);}}
2 Likes
3

using media queries like @techmedx posted will at least make it so that your portrait house map takes up the entire screen (or however much you'd like) when viewed horizontally, but I'm a little fuzzy on what the goal is. post those screenshots and would be happy to help!

2 Likes
4

These are @spelcheck specialty. Be carefully with that guy, he'll do all the hard work for you and make you wonder how you ever made such fantastic dashboards!

2 Likes
5

Thanks.

Here's the portrait and original one I designed.

I would like to have it so no matter which way I physically rotate the iPad it will be displayed on, the text rotates, but not the actual map.

I can lock the display from rotating, but the text will appear sideways or upside down if I rotate the iPad physically.

Tall order I know.

Thanks.

Original portrait orientation map I created.

house map portrait
house map portrait573×739 144 KB

Examples of what it looks like today when I lock the screen rotation and physically rotate to landscape orientation.

house map landscape
house map landscape739×573 161 KB

1 Like
6

I'm sorry man, that's just a technical nightmare even if possible to rotate the contents of each tile when landscape.. a good example would be like how would you imagine the date and time tile would react? If this were a common occurrence there is definitely a way to process the JSON offline to essentially take the tiles as-is, swap tile height x tile width and re-position them as if the entire dashboard rotated 90 degress, but it would take a bit of work. Also it would output an entire separate dashboard, so you'd be using 2 separate dashes anyways.

Your best bet is to recreate the 'map' in another dash. I do like your idea of having the tiles as 'rooms' though, unique and functional :v:

7

Thanks for your candidness on it. Glad you appreciate the map view. It's for me.

I keep the dashboards much more simple for other in the house and focus on a single task:

CLIMATE CONTROL (thermostat monitoring and control)

SECURITY (locks)

BATTERY LEVELS (check in any device is low on batteries)

1 Like