Hi all,
I would like to draw pump stations in perspective like the image attached. The only problem is that the pipe draw tool only available in coordinate containers, and I need the view (template) to be flexible with different devices (HMI, PC, Smart phone). I have tried to put my embedded view (pump station) in flex container or Carousel but the output didn't become right. Hope you can help.
There is no free lunch here. You need a coordinate container (with a fixed aspect ratio) to have consistently located pipes. If you want to change the bounding box of that container, it's the responsibility of the outer container it's placed in. It's not "easy" to make a PID style screen work on mobile.
3 Likes
Please inform me if this changes.
3 Likes
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.
- Mobile
- Tablet (iPad)
- 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):
Mobile portrait (320x658):
Mobile landscape (658x320):
1 Like
Also helpful when developing with Perspective:
3 Likes
Thanks marks that is very helpful. I have done something similar to your suggestion and worked very well for me. And also the hint about chrome built-in emulator is very useful. Thanks again for the help.