# Pan Zoom Container **URL:** \ **Category:** 3rd Party Modules\ **Tags:** perspective\ **Created:** [June 15, 2023, 4:31pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093 "2023-06-15T16:31:28Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![Chris\_Taylor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/chris_taylor/32/3315_2.png) [@Chris\_Taylor](https://forum.inductiveautomation.com/u/Chris_Taylor)\ **Post date:** [June 15, 2023, 4:31pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/1 "2023-06-15T16:31:28Z")
BIJC is pleased to announce its latest module, a Pan Zoom container for Perspective. There have been a number of outstanding examples of Pan Zoom using an XY container but these are very specific and generally require advanced scripting and CSS skills. BIJC container simplifies this process and allows the XY container to be responsive. In its simplest deployment, a developed XY container can be placed inside BIJCs Pan Zoom container and it will automatically fit to any screen size. If the developer requires, panning and zooming can be enabled/disabled independently. Multiple views or components can be placed inside the container and the scale property can be used to change the views path or any other bindable property. Any view or component that is outside of the current viewport is not rendered and therefore the bindings are not evaluated, this is especially important for larger deployments to reduce the load on the server. You can download the module from [here](https://modules.bijc.co.uk/) where you can also find the documentation We have created a video showing a simplistic set of views and how easy it is to use the new container. [YouTube Link](https://youtu.be/TK_6ehhQHJc) ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [June 16, 2023, 2:27pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/2 "2023-06-16T14:27:11Z")
The fit to component feature is _very_ cool. Great work! ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [May 17, 2024, 12:36am UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/3 "2024-05-17T00:36:20Z")
Hi @Chris_Taylor, I downloaded a trial version of this module and installed it in a VM, but when I launch the session, I get the dreaded Component Error - I'm using v8.1.34 or so and I don't see any issues in the logs. Any thoughts? EDIT: Some snips of console log: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/8/b8d6dbe0f4b8173b2949f98af252b83c00acbadf.png) ---
**Author:** ![Chris\_Taylor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/chris_taylor/32/3315_2.png) [@Chris\_Taylor](https://forum.inductiveautomation.com/u/Chris_Taylor)\ **Post date:** [May 17, 2024, 10:55am UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/4 "2024-05-17T10:55:58Z")
That's strange, looks like one of our debug defaults is not being read, standby for a fix. There is a new version due any day now, with improvements for the licencing function and making it more Maker friendly. ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [May 17, 2024, 3:43pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/5 "2024-05-17T15:43:04Z")
Sweet, I'll watch for that! I would like to use this module for Pan/Zoom functionality for a customer - if we can get this resolved, that would be awesome! ---
**Author:** ![Chris\_Taylor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/chris_taylor/32/3315_2.png) [@Chris\_Taylor](https://forum.inductiveautomation.com/u/Chris_Taylor)\ **Post date:** [May 21, 2024, 1:13pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/6 "2024-05-21T13:13:48Z")
FYI, Latest module is released, V1.1.3 Improvements include: Module defaults to licensed and only displays unlicenced if the licence checks fail, removing the annoying unlicenced display on slower connections There also a few minor improvements to our debug system. File it can be downloaded via [https://modules.bijc.co.uk/](https://modules.bijc.co.uk/) ---
**Author:** ![Remco\_Geervliet](https://avatars.discourse-cdn.com/v4/letter/r/13edae/32.png) [@Remco\_Geervliet](https://forum.inductiveautomation.com/u/Remco_Geervliet)\ **Post date:** [September 24, 2024, 6:09am UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/7 "2024-09-24T06:09:24Z")
Hi Chris, Not sure if this is the right place to comment on this, but I've been using the zoomPanContainer in what you described as the most simplistic way. I have a view that I put in there (using an Embedded View as the only component, the zoomPanContainer is the root container) and this works like a charm. There's an issue I'm running into I can't seem to figure out though. My buttons inside the Embedded view are clickable. Components that have an OnDoubleClick-script running to navigate to a different page are also working as intended. But the one textbox I have just doesn't seem to be focussable. I've checked if there are other layers in the way and I've checked if the textbox is set-up correctly, that's when noticed that opening the (embedded) view directly at the source in designer and use the live-view functionality, everything works. Opening that same view in the zoomPanContainer, that's when it starts breaking. To me this appears to be a bug in the module, but I'm happy to be proven wrong! Kind Regards, ---
**Author:** ![Chris\_Taylor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/chris_taylor/32/3315_2.png) [@Chris\_Taylor](https://forum.inductiveautomation.com/u/Chris_Taylor)\ **Post date:** [September 24, 2024, 7:17am UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/8 "2024-09-24T07:17:18Z")
Morning We can take a look It would help if you could email an export of your view to [module.support@bijc.co.uk](mailto:module.support@bijc.co.uk) ---
**Author:** ![Chris\_Taylor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/chris_taylor/32/3315_2.png) [@Chris\_Taylor](https://forum.inductiveautomation.com/u/Chris_Taylor)\ **Post date:** [September 30, 2024, 2:52pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/9 "2024-09-30T14:52:58Z")
Latest version released. V1.1.4 Documents and download [Zoom Pan Container - BIJC Module Support](https://modules.bijc.co.uk/?page_id=421) new feature **alwaysDrawAllChildren** Whether to draw children component even when they are not visible bug fix, click to focus on text boxes corrected. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 5, 2025, 5:38am UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/10 "2025-03-05T05:38:49Z")
Hey @Chris_Taylor, is there any way to limit panning to a specific axis? We're looking at using your module to give operators access to P&IDs on mobile devices and this module seems perfect. However I'd like to (possibly) disable zoom and only allow panning horizontally to keep the interface simpler to navigate around in. Also, is it possible to provide panning bounds, as I noticed that I can pan well beyond the bounds of the display and can get lost in the abyss. ~~I've tried to write to the `props.currentState.posX` prop but it seems this is read-only.~~ I just saw the doco has methods available, my bad! `setPosition` with the `onPositionChanged` event provides a kinda solution, but you can still keep trying to pan the page beyond the bounds and every few hundred-ish ms you can bring it back to the bounded value. It'd be nice if you could hard-limit the bounds ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f12e5ea5812d834f1a3890fb627350c9d3236877.png) A few bugs found: - when using `setPosition` the `currentState` props aren't updated - `props.minScale` isn't honoured when `config.fitOnMount` is `true` - it initially loads much smaller than the min (in my testing). Once you use the mouse to zoom in it jumps to the minScale setting - I've found a bug where panning sometimes clips the right side of the embedded content, and sometimes clips the entire content and you don't seem to be able to get it back, see video. It could be the settings I've applied? I've attached the view json defintion below as well in case. I can only seem to get it to do this if it's set to `fitToMount: true` > **View Definition** > > ```python > { > "custom": {}, > "params": {}, > "props": {}, > "root": { > "children": [ > { > "meta": { > "name": "Label" > }, > "propConfig": { > "props.text": { > "binding": { > "config": { > "expression": "{../root.props.currentState}" > }, > "type": "expr" > } > } > }, > "props": { > "style": { > "fontSize": "16pt" > } > }, > "type": "ia.display.label" > }, > { > "children": [ > { > "meta": { > "name": "Operational Digram" > }, > "position": { > "height": 960, > "width": 1920 > }, > "props": { > "path": "Pages/Station A/Operational Digram" > }, > "type": "ia.display.view" > } > ], > "events": { > "component": { > "onDoubleTap": { > "config": { > "script": "\tself.setPosition(0,0)" > }, > "scope": "G", > "type": "script" > }, > "onPositionChanged": { > "config": { > "script": "#\txLimit \u003d -500\n#\tx \u003d None\n#\t\n#\tif event.newX \u003c xLimit:\n#\t\tx \u003d xLimit\n#\t\n#\tif event.newY !\u003d 0:\n#\t\ty \u003d 0\n#\t\tx \u003d x or event.newX\n#\t\n#\tif x:\n#\t\tself.setPosition(x,y)" > }, > "scope": "G", > "type": "script" > } > } > }, > "meta": { > "name": "root", > "tooltip": { > "enabled": true, > "text": null > } > }, > "position": { > "grow": 1 > }, > "props": { > "config": { > "fitOnMount": true, > "fitOnMountInstantly": true > }, > "currentState": { > "posX": 375, > "posY": -111.2734375, > "scale": 0.777453125 > }, > "dimensions": { > "innerHeight": 960, > "innerWidth": 1920 > }, > "minScale": 0.5 > }, > "type": "bijc.container.zoompan" > } > ], > "meta": { > "name": "root" > }, > "props": { > "direction": "column" > }, > "type": "ia.container.flex" > } > } > > ``` I don't really understand what the `props.dimensions` is for. It seems to be able to clip the components within the pan/zoom container, but I don't quite understand why this wouldn't always be set to the size of the components ---
**Author:** ![Chris\_Taylor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/chris_taylor/32/3315_2.png) [@Chris\_Taylor](https://forum.inductiveautomation.com/u/Chris_Taylor)\ **Post date:** [March 5, 2025, 4:04pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/11 "2025-03-05T16:04:28Z")
Hi Nick I like the idea of pan only in one axis. let us take a look and see what we find. ---
**Author:** ![lewis.storey](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lewis.storey/32/15026_2.png) [@lewis.storey](https://forum.inductiveautomation.com/u/lewis.storey)\ **Post date:** [March 5, 2025, 5:10pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/12 "2025-03-05T17:10:09Z")
Hello, developer of the module here. 1. Locking panning to an axis is something that can be added. 2. Adding bounds to the panning is something I can look into. 3. The bugs have been added to my task list and I'll work on those when making the above changes. Thank you for pointing them out 4. The dimensions are the size in pixels of the inner container that holds all of the components that is scaled and moved inside the outer container. Functionally it is basically an XY container without overflow so any components falling outside of it will be clipped. I cannot be sure on any timelines for this but I should be able to roll out something within the next few weeks. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 6, 2025, 1:21am UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/13 "2025-03-06T01:21:08Z")
Testing this on an actual mobile device now and have some other questions: - is it possible to add intertia to panning? It feels a bit clunky at the moment as panning just stops immediately after swiping - panning also feels a bit jittery on the phone like the FPS is lower than on desktop ---
**Author:** ![Chris\_Taylor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/chris_taylor/32/3315_2.png) [@Chris\_Taylor](https://forum.inductiveautomation.com/u/Chris_Taylor)\ **Post date:** [November 6, 2025, 5:04pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/14 "2025-11-06T17:04:38Z")
We are pleased to announce that the 8.3 version is released today. _Transform your Ignition Perspective applications with the **Zoom Pan Container** – an advanced XY container that brings intuitive zoom and pan capabilities to your HMI interfaces. Perfect for complex process visualizations, facility layouts, and detailed schematics, this module allows operators to seamlessly navigate large-scale views with mouse, scroll wheel, or touch gestures. Configure automatic fitting to key areas, define custom zoom zones for rapid navigation, and provide your users with the smooth, responsive interaction they expect from modern applications. Whether you're displaying sprawling manufacturing lines, multi-floor building systems, or intricate P&IDs, the Zoom Pan Container delivers the flexibility and polish that makes complex data accessible and actionable._ There are some new features like fitZone and zoneToFit Details here [https://modules.bijc.co.uk/?page\_id=421](https://modules.bijc.co.uk/?page_id=421) If you already have a licence for our 8.1 version and want to upgrade, email us with the licence details and we will add 8.3 to it FOC. ---
**Author:** ![Justin\_Szatkowski](https://avatars.discourse-cdn.com/v4/letter/j/c6cbf5/32.png) [@Justin\_Szatkowski](https://forum.inductiveautomation.com/u/Justin_Szatkowski)\ **Post date:** [November 11, 2025, 2:39am UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/15 "2025-11-11T02:39:16Z")
I am experiencing a bug with the 8.3 version, it appears that no matter what I do, I cannot get the toolbox to show, even with the “alwaysShow” property checked. ---
**Author:** ![lewis.storey](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lewis.storey/32/15026_2.png) [@lewis.storey](https://forum.inductiveautomation.com/u/lewis.storey)\ **Post date:** [November 11, 2025, 3:35pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/16 "2025-11-11T15:35:01Z")
During the development of the 8.3 module we began work on a new toolbox feature intended to provide some controls built in to the component itself for step zooming, resetting to initial position and toggling pan/zoom. While this is still in progress and not yet available the associated properties were inadvertently left exposed in the designer interface in this release. The properties are currently non-functional as the underlying component does not yet act on them. We acknowledge this oversight and are working to get this feature implemented in full in a future update. In the meantime, we recommend disregarding these properties as they are subject to change as the feature is worked on. They can be hidden from the tree in the designer by adding a property named `showToolbox` to the props and setting it to false. ---
**Author:** ![Justin\_Szatkowski](https://avatars.discourse-cdn.com/v4/letter/j/c6cbf5/32.png) [@Justin\_Szatkowski](https://forum.inductiveautomation.com/u/Justin_Szatkowski)\ **Post date:** [November 11, 2025, 4:01pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/17 "2025-11-11T16:01:42Z")
Understood, thank you for the clarification. Wasn’t sure if i was doing something wrong. ---
**Author:** ![Justin\_Szatkowski](https://avatars.discourse-cdn.com/v4/letter/j/c6cbf5/32.png) [@Justin\_Szatkowski](https://forum.inductiveautomation.com/u/Justin_Szatkowski)\ **Post date:** [November 18, 2025, 7:01pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/18 "2025-11-18T19:01:17Z")
I noticed something interesting while using this with the safari browser. Through my brief research it appears Safari renders differently than a browser like Chrome (blink) and under medium-high zoom conditions, the Safari renderings of Labels, svgs, etc look extremely blurry, whereas Chrome stays sharp. I’ve provided screenshots for reference. I was wondering if this is something I, as a user can fix (CSS?) or is this something else entirely? ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/4/7474d13c474113f7130c27fb668e8ff28b7055a6.jpeg) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/77c2b4e52368b9a803491f00d46ef297ad3c7233.png) ---
**Author:** ![Chris\_Taylor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/chris_taylor/32/3315_2.png) [@Chris\_Taylor](https://forum.inductiveautomation.com/u/Chris_Taylor)\ **Post date:** [November 19, 2025, 3:06pm UTC](https://forum.inductiveautomation.com/t/pan-zoom-container/75093/19 "2025-11-19T15:06:42Z")
Justin We are looking into this but it does seem to be a known Safari challenge. We are looking to change the module to using Tramsform:Matrix() which should improve things but unsure of a roll out date for this.