Window scale differently in runtime

Hey everyone, I need some help.
I am a complete Nubie on Ignition trying to get up and running quickly.
I have already run across some issues that stumped me:

  1. I have started Ignition University and I am about 3/4 through, but I am having an issue with Vision windows not displaying as I want them to when they are displayed In vision project runtime. I have a window docked to the top and another one docked to the left of the project. my issue is with the main screen. It always leaves a 1.5" column of dead space on the left edge of the screen, no matter which of several main screens I open. how can I use this Screen space?

  2. On one screen I created 3 groups of objects that I built by inserting an image object into the Screen and then building on top of it. Each group is layered on top of one another. When I later deleted the image object, 2 of the grouped objects resized them selves so that the 3 are not overlapping well. I tried this several times and it happened each time.

I am sure both issues are covered in the videos, but I am having trouble finding anything on either, any help is appreciated.

  1. This is normal for relative layout when maintaining aspect ratio. The vision designer is always in pixel-for-pixel mode, but each component can be set to occupy more screen real estate when a runtime window is resized or maximized. Scaling up until either width or height maxes out is the default. That naturally leaves empty space on either the sides or top+bottom. Choosing a width/height ratio close to the expected runtime ratio will minimize this.

  2. Convert groups to containers if you wish to manipulate the contents without distortion. Or ungroup, edit, then re-group.

If your window has a different color background, consider setting it to anchored layout so the background stretches to edges of the window regardless of screen size/shape.
Doing this with the background while keeping everything else relative with maintained aspect ratio avoids those different color stripes, though the dead space will remain. If you have things that don’t need to maintain aspect ratio, you can use anchored layout for some other components to make use of additional screen real estate in various window size/shapes. For example, if you have a window with a chart going from side to side, anchored layout allows making the chart make full use of the width of the window.

pturmel and witman:
thank you for responding.
But remember, complete noob at Ignition (years of experience using Factorytalk View SE).
I just want to set-up to develop a screen with a size that looks the same when it is running.

pturmel 1) - Not sure I followed your response, but I think I got the last sentence “Choosing a width/height ratio close to the expected runtime ratio will minimize this.”, this seems to work with quite a bit of squirreling around to get it. Then if I add or remove something later I may have squirrel around again.Is there no way I can set-up the designer to avoid this squirreling?

pturmel 2) - So are you saying that I need to convert all of my groups to containers on a window before I can delete a background image file? That seems kind of hokey. But I will try it and see …

witman - I don’t seem to have Layout Constraints available for a window (or perhaps I just cant find it)
Are you saying that I need to set the layout Constraints for each object on my screen?
are you suggesting that I make a rectangle object to hold my background color and set just the constraints on that object???

Take just about everything you’ve learned for FTVSE for grouping, layering, and sizing and forget it. :slight_smile: You’ll be better off in the end anyway.

If you need to dictate the position of those items relative to each other, and don’t want their size to change when one is deleted, yes the proper grouping mechanism is a container.

If you are only grouping items for organizational purposes then groups are your friends.

When you resize a group all of the items scale to maintain the same aspect ratio relative to each other, if you resize a container then only the position of the items change.

Yes, layout constraints are on objects/groups/containers, not the window. As an example, here’s a simple Vision window layout:
Overview is the window, and everything directly under Root Container is in anchored layout as shown. This causes the background and the 0, 2, & 10 containers (poor man’s layers) to stretch to fill any screen size/shape. Within those containers, nearly everything is in default relative layout (there are occasional exceptions, like anchored layout to make a chart stretch to page width). This setup avoids any bars on sides/top/bottom of page on different aspect ratio screens as background is anchored to edges. The actual content that maintains aspect ratio won’t necessarily fill the screen, but expands as far as it can within its aspect ratio.

I understand what you’re doing here with the containers, but why have a Background object unless you’re doing more than changing the color? You can accomplish that on the root container and that should stretch the entire width of the window.

Good question–only reason, for better or for worse, is the background is a slight gradient.

1 Like

OK. now I am really lost…
witman, I followed your explanation and tried it myself.
I am trying to accomplish what I did before using another SCADA dev system
(FTView SE). I will call this OLD SYSTEM.
Most of my screens are animated versions of existing machine drawings. (.DWG)

In the OLD SYSTEM, I would convert the DWG files into GIF or JPG and paste it
onto a blank screen, resize it where I wanted and then lock it down . (make it background),
then draw objects over it to trace out what I needed from the original drawing, group them together (pseudo-layering) such as “walls” and “equipment”, and then delete the original graphics file from the background. Easy Peasy.

I tried this in ignition. My first layer was building walls and I tried them 2 different ways on 2 different windows. For 1 I used rectangles for the walls with one dimension set to 8 pixels .
For the second window I used line segments with a line width of 2 to represent the walls.

In both windows I selected all wall objects and grouped them. I then went to convert to a container, but the selection was grayed out. In window 2 when I grouped the lines the group was created but it disappeared from the screen. I found that the new group had its X pos , y POS, width, & height all set to 0, and I cant reset it.
here are pics of this one:
window with 2 images on it (black background) and red lines for wall objects)

red lines selected and ready to be grouped

After grouping the group has disappeared and the position and size are all 0s

BTW this works if I try to group pre-existing components like cylindrical tank and label. I select them and right click to select the menu item to make them a group then right click again and the “convert to containers” selection is available. It seems to only NOT work on simple objects.

on the first window I tried some more. I made a second group of some machinery. then I deleted the background image files. when I did that the 2 remaining groups shifted or resized and not relative to each other. the machinery moved in relation to the Wall group.

please help me to understand. What am I doing wrong???

Sorry, I’m not sure exactly what is causing the issues with grouping, but my workflow is a little different. I start by creating a container I want to use as a layer, set it to anchored layout and anchor it to all window edges, and then draw inside it. I don’t draw things and then convert them to a container. You can, however, copy things, and paste them into a container if you realize after you’ve drawn something that you want to stick it in another container. I suspect your objects moving around relate to layout settings and grouping/containers. To be clear, I leave 99% of everything in relative layout mode and draw it inside the anchored layout containers I use for layers. If I were trying to do what you are, it’d go like this:
1 - Paste drawing as background to work over. Set screen size to work with drawing size.
2 - Draw a container to extents of screen and set the container to anchored layout. Make sure it is on top of drawing.
3 - Inside container, draw your objects over the drawing that is under the container. Group them as desired for organization. Don’t try to convert them to containers (there are rare exceptions to this, depending on your layout needs).
4 - Delete or uncheck visible on the drawing (if you want it there for future reference).

I do routinely group objects (and edit names) to make the component navigation tree useful. I think I’ve occasionally run into unexpected results when grouping, but it hasn’t been common.

Ok. Thanks for responding.
I followed that.
I will try your process and see what kind of results I get.
I will try to post my results.

Thanks, guys, your posts were very helpful to me in figuring this out.

I, too, am a scrambling noob, with multiple decades of other HMI experience.
Here is how you can get rid of that 1.5 inch gap. Make your main windows shorter.
Decrease the height until the gap goes away.

Here is an illustration of what is going on.
Two of my home monitors are 1920x1200. The third is 1600x1200.

This example has a docked window at the top, and a main window. Both windows are 1920 wide.
I drew white boxes at the edge of the main window to show its outline clearly.
Then I experimented with decreasing the height of the main window until it scaled to fill the remaining area of the screen. It turned out to be 1920x1000. So all I have to do is make all my main windows be 1920x1000. Makes sense. If I made the main windows 1920x1200, they would be too tall, and would scale down, creating the 1.5 gap.

Monitor 1 has the Windows Task Bar at the bottom.

Monitor 2 does not have the Task bar. The Main window scales to fit the (slightly) larger area, adding space to the top and bottom.

Monitor 3 is a completely different ratio, 1600x1200. Both the docked window and the main window stretch by adding space at the top and bottom.

So my suggestion is to pick what resolution you want things to look best at, create your menu bars, etc. Then dink with the main window size until it scales to best fill the remaining area. Start with width, since it is not affected by Windows items. You can count pixels. Then set your height.

All other resolutions will then scale as best they can, adding space where needed.