I’m creating a single line power diagram in Ignition and using various template symbols e.g. a circuit breaker.
When I view my page in the designer, I’m not seeing any issues, however on the client side which may be run on different resolutions, I’m finding that sometimes some of the symbols don’t line up with the bus lines…
Image attached:
Is there any way that I can avoid this??
How is the layout set of those components? Relative, or anchored to a certain side?
And are you using containers, groups or templates? If so, please tell us what structure you’re using and how the layout of every component is.
None of these components are grouped together, apart from the objects part of the templates themselves (e.g. the objects within the blue rectangle. The lines behind the template circuit breakers are line objects placed on the Window)
On the screenshot above there are 3 objects in the left and right halves:
If I select the objects, this is what I see:
Also, the line widths are all size 2px
Cheers
So you’re using templates. Can you check that the layout of the template instances is the same as the layout of the lines (preferably top-left I guess).
Then inside the template, make sure that the “Enable layout” flag is checked, and that every component inside the template is also aligned the same way.
Yes to using templates. I’ve turned on Enable layout just now and tried setting the layout mode of all objects within the template to both top-left and relative (default settings), neither of which have any effect. I need the layout of objects on the main window to be relative so that it scales the graphics with the screen size. Using position-based anchoring doesn’t work so well with P&ID type graphics.
The issue appears more to be a rounding issue than anything else, as at 100% it looks fine, but at different zooms, different CB template objects appear offset by 1-2 pixels, and generally it only affects 2-3 out of 20 CBs on the page.
I doubt you’ll ever find a solution, as rounding affects both the origin point and size of zoomed components. Since the lines and the rectangles have different origins, you can expect rounding “boundaries” (round down for one, round up for the other) to fall between them sometimes.
Consider using a paintable canvas anchored to all four edges of the window to draw all the connected graphics you need. Use a transform such that 10x or 100x design coordinates fits the runtime window size.
Continue using your templates to supply text and disconnected objects. Within the repaint() method, iterate through the container to obtain the template locations and any animation data to guide the scripted graphics.
To me, it looks like your line endpoints could be just a tiny bit offset from each other. Have you tried opening the template and zooming in extremely close, like 800% or more? You might see the bend in the line at that zoom level.
Another thing that works well for me is to enable guides, drag a vertical guide line onto the screen and enable snap to guides. Then you can select your line segment and drag each endpoint until they snap to the guide line. that will ensure that the endpoints line up exactly.
I’ve zoomed in to 2000% and the lines perfectly match up, I haven’t checked if they’re perfectly straight yet. It’s frustrating that you can’t use the snap shortcut (Ctrl?) with line segments to snap to vertical/horizontal/15° rotations…
nminchin
I also use Ignition for electrical systems, when using templates, I find it best not to have lines extending to the edge, as you have found, they don’t always line up on different screen sizes. All I do is extend the power lines on to the template, they will still be slightly off but it’s much less noticeable.
Where possible I make the connection points on the centreline of the template and then use a gridline to place both the template and the power line. Looking at your template, I would have extended the width to the left to balance the text on the right, the templates will just overlap, just make sure any clickable areas are accessible
Zooming in the designer won't show the problem -- it only zooms in integral increments. Relative layout zooms to fit your screen size and there will be fractional pixel placements that have to be rounded. Lines that are in a template that is fractionally zoomed (say, x1.15) from an origin point that was itself rounded due to the same zoom. The lines inside the template therefore have rounding applied twice (their location in the template, and the template's location in the window) while the connector lines outside the template have their points rounded just once. That's the unsolvable problem. It happens to containers and grouped components, too, not just templates.
Consider leaving the little stub lines out of the templates, and draw the outer connector lines longer to replace them. (As Chris suggested.)