Image Editor

A UI for adjusting the skew angle and color properties of an image.

Remarks

Overview

The Image Editor control provides an interactive interface for adjusting image properties such as skew angle, color polarity, brightness, contrast, and saturation. It is designed for real-time image review and enhancement within the Grooper web client.

Purpose

• Correct image skew and orientation for scanned or imported pages.
• Adjust color polarity (invert), brightness, contrast, and saturation to improve image clarity.
• Preview changes instantly before saving edits.
• Reset, fit, and zoom the image for optimal viewing.

Main Features

• Real-Time Preview:
  The {ImageViewer} displays the image with all current adjustments applied, updating instantly as sliders or controls are changed.
• Adjustment Sliders:
  Sliders for skew angle, brightness, contrast, saturation, and color inversion.
• Fit and Zoom Controls:
  Buttons to fit the image to the window, fit vertically/horizontally, or display at full resolution.
• Reset Button:
  Instantly revert all adjustments to their default values.

Interactive Components

• Inputs:
  • Sliders for skew angle, brightness, contrast, saturation, and invert.
• Buttons:
  • {reset}: Reset all adjustments to defaults.
  • {fit}: Fit the image to the window.
  • {fit_height}: Fit the image vertically.
  • {fit_width}: Fit the image horizontally.
  • {full}: Display the image at full resolution.
• Child Controls:
  • {ImageViewer}: Shows a live preview of the image with all adjustments applied.

Usage Guidance

1. Use the sliders to adjust image properties as needed.
2. Preview changes in real time in the {ImageViewer}.
3. Use fit/zoom controls to optimize the image display.
4. Click {reset} to revert all changes to their default state.
5. Save edits when satisfied with the adjustments.

Example

┌───────────── Adjustments ─────────────────────┐┌────── Image Preview ───────┐
│ Skew Angle:   {Slider}                        ││                            │
│ Brightness:   {Slider}                        ││                            │
│ Contrast:     {Slider}                        ││                            │
│ Saturation:   {Slider}                        ││                            │
│ Invert:       {Slider}                        ││                            │
└───────────────────────────────────────────────┘└────────────────────────────┘

Notes

• All adjustments are non-destructive until saved; you can experiment freely.
• The control is ideal for preparing images for OCR, export, or review workflows.
• Keyboard shortcuts may be available for fit and zoom operations (see {ImageViewer} documentation).

Command Buttons

Button	Shortcut Key		Summary
restart_alt reset		►	Reset adjustments back to defaults. The {reset} button instantly reverts all image adjustments (skew, color, brightness, contrast, saturation) to their default values. Usage Click {reset} to undo all changes and restore the original image settings. This is useful for quickly discarding unwanted edits and starting over.
fit_screen fit		►	Fit the image to the window. The {fit} button resizes the image preview so the entire image fits within the available window space. Usage Click {fit} to view the whole image at once, making it easier to review overall adjustments. Keyboard shortcut: F
expand fit_height		►	Fit the image to the window vertically. The {fit_height} button resizes the image preview so the image height matches the window height. Usage Click {fit_height} to maximize vertical viewing space. Keyboard shortcut: H
expand fit_width		►	Fit the image to the horizontally. The {fit_width} button resizes the image preview so the image width matches the window width. Usage Click {fit_width} to maximize horizontal viewing space. Keyboard shortcut: W
zoom_out_map full		►	Display the image at its full resolution. The {full} button displays the image at its native resolution, allowing you to inspect fine details. Usage Click {full} to view the image at 100% zoom. Keyboard shortcut: L

Child Controls

Name	Type		Summary
Image Viewer	Image Viewer	►	Displays a preview of the image with the selected settings applied. The {ImageViewer} control shows a live preview of the image, instantly updating as you adjust skew, color, and other properties. Features Real-time display of all image adjustments. Supports mouse and keyboard navigation: Mouse wheel: Scroll vertically. Shift + Mouse wheel: Scroll horizontally. Ctrl + Mouse wheel: Zoom in/out. Arrow keys / Page Up / Page Down: Scroll. I: Zoom in. O: Zoom out. F: Fit to window. W: Fit to width. H: Fit to height. L: Full resolution. Usage Preview your adjustments before saving. Use fit and zoom controls for optimal viewing.