We have a rather large project with a client which involves recreating an existing Vision project in Perspective.
Main motivation for this is responsive design and getting the screens to resize nicely on different screens.
My major roadblock so far is how to handle the detailed Pipe diagrams that exist in the Vision project, and I was hoping I could get some suggestions.
I’ve already realized that while most of my screens use Flex or Breakpoint containers, the Pipe Diagrams need to use Coordinate views (mostly because the new Pipe tool only supports Coordinate, but the other reasons apply). I’ve recreated the Pipe diagrams in Coordinate views this way with little problem.
My question is - what’s the best way to display these types of containers among the rest of the responsive containers? I’m aware you can embed a coordinate container within other types (including flex/breakpoint), but the end users have expressed that they aren’t thrilled about needing to use scroll bars to see the entire diagram.
I think my ideal solution would be a zoomable container (I did some research and it seems like this is on the roadmap?) so the user could scroll in and out and pan with the mouse (and have some details show/hide depending on zoom level). This would be functionally identical to how the map component works, just my coordinate view in the background instead of a literal map.
I found some forum posts about embedding views into a map component and was able to replicate it somewhat, but it’s ultimately not exactly the functionality I’m looking for.
Has anyone else dealt with something similar? I’d be interested to hear if there’s a solution I haven’t considered. At the very least I know I’m able to just include the coordinate view among my other flex containers and just deal with the scroll bars, but I’m hoping there’s something more robust I can do.
They do need to be animated, as various things in the diagram change (Pump statuses, speed, etc.)
The coordinate containers are fixed mode currently.
Here is an example of a Vision screen (I’ve censored a lot of labels, also the red overlays are because this is from a test environment with a lot of non-existent PLC tags)
I’ve looked at the Perspective demo that seems relevant ( Perspective Demo (inductiveautomation.com) and I like it, but the issue is the user wants to see the diagram even at a mobile size (like pressing a button for a popup which includes the full diagram)
You are right, that does work to a certain extent.
However, that only covers about half the problem. The other half is that the user needs to be able to control the scale (through pinch-and-zoom or scroll wheel) and choose to have overflow if they want to see all the details.
Also the visibility of some items should be controlled by the size of the container (so some items hide themselves when there isn’t enough space). Is there a way to query the size of the view’s root container in order to bind the result to display properties of items within the view?
It sounds like you want to do a bit of what @nader.chinichian has done. He has other posts about how he accomplished some of these things, but I didn't find them quick. This one shows the end result:
