Using pipes with flexible screens (Flex containers)

There are multiple ways to go about making P&IDs work on mobile, none of them are particularly easy.

My favorite is the one that I came up with because you don't have to maintain multiple screens between the breakpoint for desktop and mobile. (implicit bias recognized as it is my own solution and the only one I've used).

Here's the gist of it:

I think in most situations you have 3 basic devices to design for.

  1. Mobile
  2. Tablet (iPad)
  3. Desktop (HMI)

Coming from a traditional SCADA system (i.e. Vision), we're used to only having to consider widescreen desktop formats where 1920x1080 is the smallest resolution these days and Ignition can easily scale up from there. Having entirely different views for desktop and mobile access provides somewhat of a disjointed experience, IMO. (Not to mention you now have multiple screens to maintain that display the same information.)

That said, I typically design all of my views to take full advantage of the tablet landscape area. In the case without a tablet, you can design for the desktop area. Design the screen in percent mode and fix the aspect ratio. You can then embed that "root" view in a couple of breakpoint containers that the mobile and desktop will use. At the end of the day (if you're designing for tablet space), this approach may take some extra screens for larger processes, because you're not taking advantage of the full area of your widescreen/desktop displays, but it saves a lot of development and maintenance time.

Here are the results:
Desktop:

iPad (native):
image

Mobile portrait (320x658):

Mobile landscape (658x320):

1 Like