Page Layout in different devices

Hi everyone,

I wasn’t sure where I should post this. Could this general question belongs to the configuration so feel free to move me there (I’m heavy though :slight_smile:)

In other platforms, there was always a necessity to pre-define what size Canvas am I using:
Size of the screen, aspect ratio etc. Presets are provided to help reshape the canvas (the work area) to the right size: Tablet, Phone, etc

(the questions is coming. wait for it…)

One of the things i like about OSC is that it seems unnecessary to do so. Am I wrong?
I figured that if this program behaves like an HTML page, there’s no need for such adjustment because it will be as if an HTML page is opened on different devices. In other words, it will fully and automatically adapt to the size of the screen.

  1. Am I right about my observation?

  2. My needs are actually using the interface in Portrait orientation. Would that be a problem?

  3. The reason why I need these questions answered rather quickly is that I’ve concluded that I need a touch screen monitor if I want to continue my design and testing. Black Friday is here and I want to take advantage of that.
    Will I have any issues running my program on a 15" touchscreen that is oriented vertically in portrait mode?

  4. Does it matter what resolution the screen is? HD, 4K? What about the screen ratio?

  5. If someone is working on his interface in Portrait/Landscape mode, what happens when modes are changed? How the layout behaves?

  6. This will be good to know because one crazy idea that I have (in the far far future) is to have 1 layout when the screen is in portrait mode and upon changing to landscape a completely different layout will fade in (preprogrammed of course) - Is this even possible? or I’m stretching it?

  7. Still related to page and layout: Is it possible to create multiple pages? That I can simply move to a new page that has a different layout and buttons? and maybe have multiple pages, each has different interfaces that I can toggle between?

Would highly appreciate your response on all these questions

  • 1: Yes and no. Many html pages appear to adapt to the size of the screen because they were designed that way Layouts in O-S-C can be designed that way too. It’s called responsive design and it’s not specific to O-S-C, there are some hints in the docs.

  • 2 (3, 4,. 5): The size of the screen is not an issue, it will behave exactly as if you resize the client window on the desktop app.

  • 6: Fading 2 different layouts is not possible, but you could build 2 layouts in 2 panels and use css media queries to display only one depending on the screen’s width.

  • 7: Tabs: when a panel (including the root widget) is empty, you can add tabs in it instead of widgets.

1 Like