[00:00] In this lesson we'll discuss the concept of component layout for Vision clients, and demonstrate the two types of layout along with possible variations upon them. Layout is the idea that a component's size and position, which are relative to their parent container size, can be dynamic on a client display. This allows for HMI displays which resize gracefully and responsibly, for any screen resolution. Your Designer display might be for a specific resolution, such as 1024 by 768, but you can open a client with pretty much any resolution. As that client gets smaller or larger, tts components will automatically resize based upon the layout chosen for them. Here we see a Vision window in the Designer with an assortment of components displayed. Its starting size is 800 by 600 pixels. Next here is its Vision client having the same starting size. As we grow or shrink this client window, the components on it resize accordingly. This layout behavior is specified on a by component basis back in the Designer, and if we select multiple components, we can specify the layout for all of them together.

[01:12] Let's see how this layout is specified. We access the layout settings by right clicking on any component and selecting Layout. There are two layout modes: Relative and Anchored, and each one also has its own set of suboptions. The default layout settings for new components can be specified in the Project Properties, in the Vision > Design options. R elative is the default layout mode. It's based on the ratio of the component size to the window size, and it's going to maintain that ratio at all times. So when the client window gets larger or smaller, the components will resize at the same rate. There's also a setting here to maintain the aspect ratio of the component. So for example, if a component is 200 by 150 pixels or a 4:3 ratio, it will maintain that 4:3 ratio so it never looks skewed. For starters, let's look at proportional resizing.

[02:10] All these screen components are set to Relative layout and Maintain Aspect Ratio. So when we enlarge this client window, all the components resize accordingly. The same thing happens when we shrink the client, the components shrink accordingly, but only to a certain point. When we cross a certain client size threshold, like so, the resizing ends and scroll bars appear instead. This client threshold, the minimum size, is specified by settings in the Project Properties Vision > User Interface. Next, if we change the client width only and not the height, the aspect ratio of the components isn't changing, so the sizes are maintained and the components remain centered on the client window. Back in the Designer component layout settings, there are settings to center or constrain to the left or right edges if maintaining the aspect ratio. Next, let's consider padding or dead space in a layout.

[03:15] Since relative layout is based upon a ratio of component size to the size of the entire window, if a window is large, there may be a fair amount of padding around components, and this gets taken into account in the overall layout. Typically, we'd want to make sure that such padding is removed, so let's resize the window borders and the Designer so that they're right up against the components. We've now changed the ratio of component space to window space. When we save this new layout, we see that the client components have suddenly gotten bigger to fill their space. However, the aspect ratio of each component is still maintained. Finally, let's see what happens when we relax the Maintain Aspect Ratio constraint. We'll first select all of the components in the Designer, then right click and select Layout. We'll still keep the Relative layout, but this time unselect the Maintain Aspect Ratio, which now allows the components to skew a little bit. Once we save those settings, now, if we resize our client window, the components still resize to fill the available space, but now the aspect ratio is not maintained and the components will appear to skew or distort at times.

[04:35] The other primary layout style for any component is Anchored. Since we still have all components selected, we can right click, select Layout, and this time we'll select Anchored. This type of layout allows us to anchor or fix a component to various sides of a window: the top and bottom left or right or centered vertically or horizontally. So for starters, let's say we want to anchor all components to the top left of the client window. We want to keep the same fixed distance from those edges at all times.

[05:05] So we will click the left and the top anchors, actually the west and the north ones, and click OK. When we save our window changes, then resize our client window, now we see all components stay in their upper left fixed positions on the window with no resizing. Let's change the anchoring to be upper right instead. So we've still got all the components selected. We'll right click choose Layout > Anchored. Then this time we'll click the top and the right anchors, OK, then save to commit the changes. And now when we resize our client, we'll see the components anchored at fixed positions from the top and the right sides. again, with no change in size. Now suppose we anchor a component to two opposite sides, which will cause it to to resize in that dimension. So for example, let's select this tank component alone and change its layout to anchor it on both the left and right sides, as well as retaining the top anchor. As we resize the client window again, since the tank is now anchored to both left and right sides, it still remains in the top left corner of the components, but its width changes to fill the available space as the window size changes.

[06:29] It just changes in width, the height remains constant. Finally, let's anchor the tank component to all four sides of the client window. Now it will change in both width and height when the window is changed. So we will right click and select Layout once more, then add the bottom anchor, click OK, and save. Now, when we resize the client window, it's trying to maintain those fixed distances to all four sides, and therefore the tank height and width changes in response. So in summary, there are two different layout managers you can use for components: Relative and Anchored Layout.

[07:06] Layout allows a component size and placement to be dynamic when a client window is resized. Relative layout is good for situations when you want to scale uniformly without distortion: For example, for a P&ID, or Piping and Instrumentation Diagram, while Anchored layout is good when you want components to fill all available space, for example, forms or tables on screens,