Vision with 2 size screens

Ignition
,
1

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

2

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.

You can get the screen data for each screen in this way:

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

This is what you will use to control the screen the window opens in and what size it opens to:
system.gui.openDesktop

3

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

Theses are good informations !! Thanks

4

I would call these EAST and WEST docked windows).

2 Likes
5

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?

6

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 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.

1 Like
7

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.

Yeah, I will go like that for now. I hope it will works as expected!

Thanks you very much for your help!