What is the 'correct' way to build P&ID/Overviews with coordinate containers?

Ignition
1

Firstly, I am working with Version: 8.1.39

This has been driving me mad for some time now and I feel like I am missing something simple. I want to create, for example, a P&ID screen that will scale on screen sizes across all 16:9 desktops.

I am working with the follwing structure:

Flex Column (root)

  • Tab Container
    • Flex Column
      • Coordinate (percent)
        • Embedded View (Coordinate (percent))
        • Embedded View (Coordinate (percent))
        • …

I wrapped my Tab and Coordinate containers in Flex containers to try and give me more control over the display, to no avail. Each embedded view is made up of symbols and further embedded views as templates, which are created using Flex Containers.

I have tried the following styling and variations thereof across multiple containers and still end up with component misalignment within embedded views, overflow; and when hidden, clips content off the side of the screen on smaller resolution displays:

{
  "classes": "",
  "boxSizing": "border-box",
  "overflow": "hidden",
  "height": "100vh",
  "margin": 0,
  "padding": 0,
  "width": "100vw",
  "minHeight": 0,
  "minWidth": 0
}

I really do struggle with the graphical aspect of Ignition Perspective - coming into this with no prior experience with containers, web development, etc. Are there any resources out there that anyone can recommend for working with different container types and how they interact with CSS? I want my views to be dynamic and useable across all devices. I know that Breakpoint containers can help with this, but it doesn’t feel like the right approach when styling can surely give you completely responsive views?

2

Start with drawing out what you want the view to look like. Then we can help you figure out a container arrangement.

3

That sounds like a good approach, I'll get back to you tomorrow with a wireframe.

4

Misalignment when using percent mode is almost always is a result of your aspect ratio settings being wrong.

As a rule of thumb:

  • set the main coord View to percent mode and aspectRatio: view.props.defaultSize.width} + ':' + {view.props.defaultSize.height}
  • set all other embedding views to percent mode and blank aspectRatio