│ Grooper Help - Version 25.0
25.0.0017 2,127
  • Overview
  • Help Status

Image Viewer

Control GrooperReview.DocView

Displays an image.

Remarks

The Image Viewer control provides a high-performance, interactive interface for viewing images in the Grooper web client. It supports advanced navigation, zoom, selection, and annotation features, making it ideal for reviewing scanned documents, photos, and other image-based content. The control is designed for usability and accessibility, with both mouse and keyboard shortcuts, touch support, and visual cues for navigation and selection.

Purpose

  • Display images at full, fitted, or custom zoom levels.
  • Enable users to pan, scroll, and zoom images for detailed review.
  • Select regions of interest using rubberband selection.
  • View and interact with image annotations and tooltips.
  • Integrate with document review, editing, and print preview workflows.

Main Features

  • Image Display:
    Renders the selected image at its native or scaled resolution, maintaining clarity and aspect ratio.
  • Navigation and Zoom:
    • Mouse wheel and keyboard shortcuts for scrolling and zooming.
    • Fit-to-window, fit-to-width, fit-to-height, and full-resolution display modes.
    • Pinch-to-zoom and pan support for touch devices.
  • Selection and Rubberband:
    • Drag to select a rectangular or quadrilateral region using the mouse or touch.
    • Rubberband selection for zooming to a specific area.
    • Visual handles for resizing and editing selections.
  • Annotations:
    • Display rectangles and lines as overlays on the image.
    • Tooltips for annotations and selections, shown on hover.
    • Center the view on focused annotations.
  • Responsive UI:
    • Instantly updates the view as the user interacts with the image.
    • Scrollbars appear as needed for navigation.
    • Visual cues for focus, selection, and active state.
  • Accessibility:
    • Fully navigable by keyboard, mouse, and touch.
    • Screen reader support for image and annotation tooltips.

Interactive Components

  • Inputs:
    • Mouse wheel for vertical scroll and zoom.
    • Shift + Mouse wheel for horizontal scroll.
    • Ctrl + Mouse wheel for zoom in/out.
    • Touch gestures for pan and pinch-to-zoom.
    • Keyboard shortcuts for navigation, zoom, and fit modes.
    • Mouse drag for selection and rubberband operations.
  • Buttons:
    • May be provided by parent controls for fit, zoom, print, and annotation actions.
  • Child Controls:
    • {Image}: The main image display area.
    • {Canvas}: Used for drawing overlays, selections, and annotations.

Usage Guidance

  1. Use the mouse wheel to scroll vertically through the image.
  2. Hold Shift and use the mouse wheel to scroll horizontally.
  3. Hold Ctrl and use the mouse wheel to zoom in and out.
  4. Use the arrow keys or Page Up/Page Down to scroll.
  5. Press I or + to zoom in, O or - to zoom out.
  6. Press F to fit the image to the window.
  7. Press W to fit the image to the window width.
  8. Press H to fit the image to the window height.
  9. Press L or 1 to display the image at its full resolution.
  10. Drag with the mouse or touch to select a region; use rubberband selection for zooming.
  11. Hover over annotations or selections to view tooltips.
  12. Double-click the image or selection to reset or zoom.

Mouse Operations

  • Mouse Wheel: Scroll up and down.
  • Shift + Mouse Wheel: Scroll left and right.
  • Ctrl + Mouse Wheel: Zoom in and out.
  • Drag: Select region or pan image.
  • Double-click: Reset selection or zoom.

Touch Operations

  • Pinch: Zoom in/out.
  • Drag: Pan image or select region.

Keyboard Shortcuts

  • Arrow keys or Page Up/Page Down: Scroll.
  • I or +: Zoom in.
  • O or -: Zoom out.
  • F: Fit to window.
  • W: Fit to width.
  • H: Fit to height.
  • L or 1: Full resolution.

Selection and Annotation Features

  • Drag to create or edit a selection rectangle or quadrilateral.
  • Visual handles for resizing selection edges and corners.
  • Rubberband selection for zooming to a specific area.
  • Annotations (rectangles, lines) are drawn as overlays.
  • Tooltips appear when hovering over annotations or selections.
  • Center the view on focused annotations.

Notes

  • The control is optimized for high-performance image rendering and navigation.
  • Suitable for document review, editing, and print preview scenarios.
  • Selection and annotation features are available for review and navigation, not for direct image modification.

Used By

Image EditorPage ViewerOCR Viewer

Notification