VisualNEO Web

Plugin to Pan and Zoom elements, including SVG

Version 1.2

Based on:

https://timmywil.com/panzoom/

Sample App:
https://visualneo.com/tutorials/neopanzoom

Description

The neoPanZoom plugin for VisualNEO Web adds pan and zoom capabilities to HTML elements, including SVG graphics, allowing for interactive image and graphic navigation. This plugin is highly useful for applications involving maps, detailed images, or diagrams, providing users with an intuitive way to explore content. Here’s an overview of its functionalities and use cases:

Basic Pan and Zoom Initialization

The neoPanZoomInit command initializes pan and zoom on an element, setting the start position and zoom level.

• Command: neoPanZoomInit
• Syntax: neoPanZoomInit "elementName" startX startY theScale
• elementName: ID of the element or SVG container.
• startX and startY: Initial x and y positions.
• theScale: Starting zoom level (e.g., 1 for default scale).

Example:

neoPanZoomInit "imageContainer" 0 0 1

This command initializes panning and zooming at the center of the element without scaling.

Setting Pan and Zoom Options

The neoPanZoomSetOptions command customizes pan and zoom behavior, such as setting minimum and maximum zoom levels, enabling zoom with the mouse wheel, and defining animation properties.

• Command: neoPanZoomSetOptions
• Syntax: neoPanZoomSetOptions "elementName" theMinScale theMaxScale theZoomWithWheel animationDuration theEasing theContain thePanOnlyWhenZoomed
• theMinScale and theMaxScale: Define the zoom range.
• theZoomWithWheel: Enable/disable zoom with the mouse wheel.
• animationDuration and theEasing: Control zoom animation timing and easing.
• theContain: Contain panning within element boundaries.
• thePanOnlyWhenZoomed: Restrict panning to when zoomed in.

Example:

neoPanZoomSetOptions "imageContainer" 1 5 true 300 "ease" true true

This setup enables zooming up to 5x with wheel control, animated easing, and contained panning.

Pan and Zoom Controls

Additional commands manage specific pan and zoom interactions:

• neoPanZoomSetPan: Sets pan coordinates directly.
• neoPanZoomSetZoom: Sets zoom to a specified level.
• neoPanZoomSetPanAndZoom: Combines pan and zoom adjustments in one command.
  
  

Example for Pan:

neoPanZoomSetPan "imageContainer" 100 150

This command pans to the coordinates (100, 150) within the container.

Locking Pan and Zoom Axes

For more control, the plugin offers axis locking:

• neoPanZoomLockX and neoPanZoomLockY: Lock panning on the x or y axis.
• neoPanZoomLockMouse: Disable mouse interactions for custom pan/zoom restrictions.

Practical Applications

The neoPanZoom plugin is suitable for:

• Interactive Maps: Allowing users to navigate map content with smooth pan and zoom.
• Image Exploration: Enhancing the user experience for detailed images or schematics.
• Data Visualization: Enabling zooming in on specific data points within graphics or SVGs.
  
  

With flexible options for scaling, panning, and zooming, the neoPanZoom plugin is a valuable tool for creating interactive, user-friendly VisualNEO Web applications​​.

neoPanZoomInit

neoPanZoomSetOptions

neoPanZoomSetPan

neoPanZoomSetPanRelative

neoPanZoomSetZoom

neoPanZoomSetPanAndZoom

neoPanZoomGetPanX

neoPanZoomGetPanY

neoPanZoomGetZoom

neoPanZoomLockMouse

neoPanZoomLockX

neoPanZoomLockY

Created with the Personal Edition of HelpNDoc: Make your documentation accessible on any device with HelpNDoc