# Vision Docked Windows Relative Size **URL:** \ **Category:** Ignition\ **Tags:** ignition81\ **Created:** [December 14, 2021, 10:55pm UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126 "2021-12-14T22:55:57Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [December 14, 2021, 10:55pm UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126/1 "2021-12-14T22:55:57Z")
I’m trying to set up 2 docked windows that will stay in place permanently. I’ve created the docked windows and marked them to open on startup. However, I’m having trouble with the sizing of the docked window. Layout is set to the default (relative, scale center, scale font). I’ve set up the project at 4k so it can easily scale down to 1080p. The components within the docked windows shrink as I expected, but the docked window’s root container is still the size that I set for 4k. (ex. width of the West docked window is 320px in 4k. I would expect it to be 160px in 1080p, but it is still 320px) Is there a setting to allow the root container to shrink as well? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [December 14, 2021, 10:58pm UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126/2 "2021-12-14T22:58:59Z")
You _never_ want to design Vision at a large scale and expect it to scale down smoothly. Do the opposite; design at the minimum screen resolution you expect and let Swing scale _up_ for you, which it’s (relatively speaking) much better at. ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [December 14, 2021, 11:01pm UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126/3 "2021-12-14T23:01:44Z")
I tried this initially and found that I had many issues getting the pipe components (segments and joints) to match up correctly on the designer and the client. ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [December 14, 2021, 11:03pm UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126/4 "2021-12-14T23:03:43Z")
Yeah, that’ll happen. I would also avoid the pipe components. If you need things to line up and maintain scaling, design them as an SVG in e.g. Inkscape and put it into an Image component to act as the ‘background’. You’re going to have an _infinitely_ better time than trying to manipulate pixel accurate locations in the Vision runtime. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [December 14, 2021, 11:10pm UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126/5 "2021-12-14T23:10:14Z")
As Paul said, the pipe component in Vision is uh… not great (unless you use anchored layout - but they’re still not great imo visually)… and one of the main reasons is due to its bounding box being much larger than the pipe graphic it contains. When the object is scaled it scales proportionately to its bounding box, not to the screen, and so it moves around and will never end up where you placed it at the resolution you designed it at. For things to scale nicely in terms of behaving well with surrounding components, the object must touch all four edges of their bounding box. Which leads me to… For pipes, I personally use the basic line tool as these scale nicely; their graphic touches every edge of their bounding box. You do see _some_ slight movement at some resolutions, but it’s only ever by 1px due to rounding errors which unfortunately is unavoidable. ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [December 15, 2021, 2:07pm UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126/6 "2021-12-15T14:07:00Z")
So would you recommend making specific pipe pieces as separate SVGs, or the entire background/pipe layout as one SVG? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [December 15, 2021, 3:14pm UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126/7 "2021-12-15T15:14:58Z")
A single SVG for the entire background image. That way Ignition/Java Swing has only one thing to deal with resizing, and can be trusted to maintain the relative location of everything (since it’s all defined in the one SVG file). ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [December 16, 2021, 3:14am UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126/8 "2021-12-16T03:14:18Z")
The issues with a single svg however are that, 1. You cannot export the SVG from ignition if you need to make changes to it in the future, and 2. You can’t make changes to it anymore in ignition ---
**Author:** ![SKA](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ska/32/29528_2.png) [@SKA](https://forum.inductiveautomation.com/u/SKA)\ **Post date:** [December 16, 2021, 7:11am UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126/9 "2021-12-16T07:11:22Z")
Keep a backup of the original svg and its not a problem, imo… ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [December 16, 2021, 2:09pm UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126/10 "2021-12-16T14:09:57Z")
@SKA Yes, this is the plan. 1. Take a screenshot of the window (within the designer) with the components laid out as I need them to get the aspect ratio and the relative location of the components. 2. Paste screenshot into Inkscape (at 0,0) and lock it so it behaves as the background. 3. Add gradient rectangles as pipes between them (I’ve also made my own L and T joints). 4. Save as SVG. 5. Save a copy, create a border-only rectangle to outline the background, and remove the background from the copy. 6. Drag and drop the copy (from File Explorer) into the Vision window. 7. Scale the SVG up to the full window size. 8. Deep-select the SVG and delete the bounding border-only rectangle. 9. Everything lines up and scales perfectly. 10. Send SVG to back of Z order and lock. Should I ever need to make changes, simply move components as desired, take a new screenshot to replace the existing one, adjust the SVG as needed, and replace the SVG in the window. It is a bit more indirect, but not really more work than trying to deal with individual components. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [December 16, 2021, 7:36pm UTC](https://forum.inductiveautomation.com/t/vision-docked-windows-relative-size/54126/11 "2021-12-16T19:36:26Z")
> [@amarks](#): > > adjust the SVG as needed You can keep the existing SVG there, drag on the new SVG, copy the elements prop and paste over the top of your existing SVG component's elements prop, then delete the new dragged in SVG. Then you won't have to mess around with the size