# Vision with 2 size screens **URL:** \ **Category:** Ignition\ **Tags:** ignition81, vision\ **Created:** [September 26, 2023, 9:03am UTC](https://forum.inductiveautomation.com/t/vision-with-2-size-screens/79629 "2023-09-26T09:03:39Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\ **Post date:** [September 26, 2023, 9:03am UTC](https://forum.inductiveautomation.com/t/vision-with-2-size-screens/79629/1 "2023-09-26T09:03:39Z")
Hello, I was wondering how I should do the following: I am developing a supervision for 2 different screens resolutions: one is 2560x1080 and the other 1920x1200 (this one is not yet clearly define but it should be very soon). Some of the PCs could have more than one screen (maybe be different resolutions, eg. one wide one standard) but I want to use only one the wide one by default. The idea is to split the screen in 5 areas: 1. Main area: center of screen, display the status of the machines with drawings and animation 2. Top area: alarm ribbon area 3. Bottom area: navigation menu 4. Left panel: information about current production, like product code, parts code, etc 5. Right panel: information about current parameters and recipe On the "wide" resolution, the panels 4&5 are displayed fully on each sides of the main area, not overriding it. On the "standard" resultion, the panels 4&5 are, by default, reduced to a button each. Once the button is clicked, the respective planel is "expanded" over the main area because there is no space on the right/left side. The button can be clicked again to reduce the panel. How should I implement it? - I think I can use a client side script to read the client screen resolution and then set the panel accordingly. I don't know how this work if there is more than one screen though? - How should I set up the size and layout of each my page/component so I have the best result possible? - Any other advise/tips I should have in mind for that? - If I have the choice for the second resolution, should I go for 1920x1200 (my preference) or 1920x1080 (fixed "height")? Best regards ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [September 26, 2023, 9:58am UTC](https://forum.inductiveautomation.com/t/vision-with-2-size-screens/79629/2 "2023-09-26T09:58:39Z")
> [@Jeremy](#): > > How should I implement it? The most common approach is to design for the smallest screen and use a relative layout. This way, the window will automatically handle the resizing. That said, if one screen is significantly wider than the others, there could be some advantages to having a separate window for the wider screens. > [@Jeremy](#): > > I don't know how this work if there is more than one screen You can get the screen data for each screen in this way: ```auto screens = system.gui.getScreens() for screenData in screens: screenIndex, screenWidth, screenHeight = screenData print 'Screen {}: Height = {} Width = {}'.format(screenIndex, screenWidth, screenHeight) #Use this information to determine which window to open ``` > [@Jeremy](#): > > Any other advise/tips This is what you will use to control the screen the window opens in and what size it opens to: [system.gui.openDesktop](https://docs.inductiveautomation.com/display/DOC81/system.gui.openDesktop) ---
**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\ **Post date:** [September 26, 2023, 10:27am UTC](https://forum.inductiveautomation.com/t/vision-with-2-size-screens/79629/3 "2023-09-26T10:27:08Z")
> [@justinedwards.jle](#): > > > [@Jeremy](#): > > > > How should I implement it? > > The most common approach is to design for the smallest screen and use a relative layout. This way, the window will automatically handle the resizing. That said, if one screen is significantly wider than the others, there could be some advantages to having a separate window for the wider screens. Yeah, in my case 2560 is quite wide and I don't intend to go for different windows hence the suggestion of "removable" side panels > [@justinedwards.jle](#): > > > [@Jeremy](#): > > > > I don't know how this work if there is more than one screen > > You can get the screen data for each screen in this way: > > ```auto > screens = system.gui.getScreens() > for screenData in screens: > screenIndex, screenWidth, screenHeight = screenData > print 'Screen {}: Height = {} Width = {}'.format(screenIndex, screenWidth, screenHeight) > #Use this information to determine which window to open > > ``` > > > [@Jeremy](#): > > > > Any other advise/tips > > This is what you will use to control the screen the window opens in and what size it opens to: > [system.gui.openDesktop](https://docs.inductiveautomation.com/display/DOC81/system.gui.openDesktop) Theses are good informations !! Thanks ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [September 26, 2023, 10:29am UTC](https://forum.inductiveautomation.com/t/vision-with-2-size-screens/79629/4 "2023-09-26T10:29:03Z")
> [@Jeremy](#): > > "removable" side panels I would call these EAST and WEST [docked windows](https://docs.inductiveautomation.com/display/DOC81/Window+Types#:~:text=A%20Docked%20window%20is%20one,left%20side%20of%20the%20Client)). ---
**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\ **Post date:** [September 27, 2023, 6:28am UTC](https://forum.inductiveautomation.com/t/vision-with-2-size-screens/79629/5 "2023-09-27T06:28:12Z")
I still have a question: What "windows layout" should be used? I mean top and bottom should be docked but what about left and right? I have an idea right now while I am writing this : In small screen, the main window got the buttons to displays the popup version of the left/right panels.When in wide screen, theses buttons are not visible and the left and right panels are displayed docked. Does that looks ok, to you guys? ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [September 27, 2023, 5:37pm UTC](https://forum.inductiveautomation.com/t/vision-with-2-size-screens/79629/6 "2023-09-27T17:37:53Z")
> [@Jeremy](#): > > What "windows layout" should be used? I'm not sure I understand the question. I always start out using the relative layout, and I only change it if I need to. For example, I've had to take advantage of the MiG layout option in the template canvas before to get things to stay lined up properly with the root container. > [@Jeremy](#): > > In small screen, the main window got the buttons to displays the popup version of the left/right panels. I can't think of any reason why this shouldn't be tried. If it turns out to be clunky; simply scrap it and do something else. ---
**Author:** ![Jeremy](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@Jeremy](https://forum.inductiveautomation.com/u/Jeremy)\ **Post date:** [September 28, 2023, 6:21am UTC](https://forum.inductiveautomation.com/t/vision-with-2-size-screens/79629/7 "2023-09-28T06:21:06Z")
> [@justinedwards.jle](#): > > > [@Jeremy](#): > > > > What "windows layout" should be used? > > I'm not sure I understand the question. I always start out using the relative layout, and I only change it if I need to. For example, I've had to take advantage of the MiG layout option in the template canvas before to get things to stay lined up properly with the root container. I am bit worried about the layouts because I know mixing layouts may sometimes be a pain in the ass to make it work as expected. I will try to remain in relative as much as I can for now and see. > [@justinedwards.jle](#): > > > [@Jeremy](#): > > > > In small screen, the main window got the buttons to displays the popup version of the left/right panels. > > I can't think of any reason why this shouldn't be tried. If it turns out to be clunky; simply scrap it and do something else. Yeah, I will go like that for now. I hope it will works as expected! Thanks you very much for your help!