# Filerobot Image Editor

## Specs

| Label                     | Value                         |
| ------------------------- | ----------------------------- |
| **Version**               | 0.1.0 (updated on 2024-04-21) |
| **Developer**             | Labii Inc.                    |
| **Type**                  | Section                       |
| **Support Configuration** | No                            |

## Overview

The Filerobot Image Editor widget provides a powerful, touch-friendly image editing platform designed specifically for scientific image documentation and annotation. It enables laboratory professionals to edit, annotate, and enhance experimental images such as gel electrophoresis results, microscopy images, and equipment readouts while maintaining data integrity. This widget is essential for documenting experimental results, adding annotations to scientific images, applying precise measurements, and creating publication-ready figures that integrate seamlessly with your electronic lab notebook.

{% hint style="info" %}
**Pintura Image Editor** has been replaced with **Filerobot Image Editor**.
{% endhint %}

## Use Cases

* **Gel Electrophoresis Analysis**: Annotate bands, add lane labels, mark molecular weight indicators, and highlight proteins or DNA fragments on gel images
* **Microscopy Image Enhancement**: Adjust brightness, contrast, and color balance of microscopy images while adding scale bars and annotations
* **Experimental Documentation**: Add arrows, text labels, and shapes to equipment readouts, experimental setups, and procedural photographs
* **Result Comparison**: Use live comparison features to show before/after treatment effects or compare different experimental conditions side-by-side
* **Publication Preparation**: Resize, crop, and add watermarks to images for presentations, publications, and research documentation
* **Quality Control**: Document product defects, equipment issues, or quality control checkpoints with annotated images
* **Collaborative Review**: Share annotated images with team members for collaborative analysis and peer review
* **Data Integrity**: Maintain audit trails of image edits with history management and version control for regulatory compliance

## Interface

### Read-only View

The read-only view displays the edited image in its final state, preserving all annotations, adjustments, and modifications made during editing. This view is optimized for reviewing, sharing, and exporting scientific images without accidental modifications.

* **Data Display**: Images are rendered at their actual resolution with all applied edits, filters, annotations, and watermarks visible
* **Navigation**: Zoom in/out controls allow detailed inspection of image regions, with pan functionality for large images
* **Export Options**: One-click download of the edited image in multiple formats (PNG, JPEG, WebP) with customizable quality settings
* **Comparison Mode**: Toggle between the original and edited versions to review all modifications applied
* **Metadata Display**: View image dimensions, file size, format, and edit history summary

<figure><img src="/files/4JdGWYUKtVddCuB3Ck0Q" alt="Read-only view of Filerobot Image Editor showing an annotated gel electrophoresis image"><figcaption><p>The read-only view displays the final edited image with all annotations and adjustments preserved for documentation</p></figcaption></figure>

### Edit View

The edit view provides a comprehensive image editing interface with multiple tools for annotation, adjustment, and transformation. The interface is designed for both desktop and touch devices, making it suitable for laboratory tablets and workstations.

* **Input Methods**: Upload images from local files, paste from clipboard, or load from previous sessions using the state export/import feature
* **Editing Tools**:
  * **Annotate**: Add text labels, arrows, shapes (rectangles, circles, polygons), and freehand drawings
  * **Adjust**: Modify brightness, contrast, saturation, exposure, and color temperature with real-time preview
  * **Filters**: Apply predefined filters for image enhancement (sharpen, blur, grayscale, sepia, and more)
  * **Crop & Resize**: Precise cropping with aspect ratio lock and dimension-based resizing
  * **Watermark**: Add text or image watermarks with customizable positioning and opacity
  * **Transform**: Rotate, flip, and perspective adjustments for image alignment
* **Formatting Options**:
  * Customizable colors, line thickness, and opacity for all annotations
  * Font selection, size adjustment, and text styling (bold, italic) for text annotations
  * Layer management for complex annotations with stacking control
* **Validation**: Real-time preview of all edits before saving, with automatic validation of image dimensions and file size
* **Collaboration**: Multiple annotations can be selected and transformed together, facilitating complex image documentation
* **History Management**: Unlimited undo/redo operations and one-click reset to original image

<figure><img src="/files/K7ChUkFGfmi4hTXefUaM" alt="Edit view of Filerobot Image Editor with annotation tools and adjustment panel"><figcaption><p>The edit view provides comprehensive tools for annotating and adjusting laboratory images with an intuitive interface</p></figcaption></figure>

## Configuration

### Initial Setup

The Filerobot Image Editor requires minimal configuration to start using, but offers extensive customization options for laboratory-specific workflows.

{% stepper %}
{% step %}
Navigate to the section where you want to add image editing capability and click **Add Widget**
{% endstep %}

{% step %}
Select **Filerobot Image Editor** from the Office category in the widget library
{% endstep %}

{% step %}
Upload your initial image or start with a blank canvas to begin editing
{% endstep %}
{% endstepper %}

### Required Settings

The Filerobot Image Editor works with default settings out of the box. No required configuration is needed for basic image editing functionality.

### Optional Settings

* **Default Export Format**: Set the preferred image format (PNG, JPEG, or WebP) for exported images. PNG is recommended for scientific images requiring lossless quality
* **Quality Settings**: Configure default JPEG quality (1-100) and WebP quality settings for exported files
* **Watermark Template**: Pre-configure organization watermarks (logo, text, or both) that can be quickly applied to images
* **Color Palette**: Define custom color presets for annotations to match your laboratory's documentation standards
* **Maximum Image Size**: Set limits on image dimensions or file size for performance optimization
* **Enable Features**: Toggle specific editing features on/off based on user permissions or workflow requirements

{% hint style="info" %}
The widget uses default values optimized for scientific image editing. Most laboratories can start using the editor immediately without custom configuration.
{% endhint %}

### Advanced Configuration

For specialized laboratory workflows or compliance requirements:

{% stepper %}
{% step %}
Access **Advanced Settings** from the widget configuration panel
{% endstep %}

{% step %}
Configure **State Management** settings:

* Enable automatic state saving to preserve editing sessions
* Set auto-save intervals for long editing sessions
* Configure state export format for sharing editing templates
  {% endstep %}

{% step %}
Set up **Compliance Features**:

* Enable edit history logging for FDA 21 CFR Part 11 compliance
* Configure audit trail settings for regulated environments
* Set up digital signature requirements for finalized images
  {% endstep %}

{% step %}
Define **User Interface Preferences**:

* Customize toolbar layout and available tools
* Set default zoom levels and canvas size
* Configure touch sensitivity for tablet users
  {% endstep %}

{% step %}
Click **Save Configuration** to apply all advanced settings
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Advanced configuration options affect how users interact with images and may impact compliance workflows. Test thoroughly in a development environment before deploying to production.
{% endhint %}

## Additional Functions

### Data Import/Export

* **Import**:
  * Supports all common image formats: PNG, JPEG, JPG, GIF, WebP, BMP, TIFF
  * Drag-and-drop upload or browse file selection
  * Paste images directly from clipboard
  * Load images from URLs for remote resources
  * Import previous editing sessions via state files (JSON format)
* **Export**:
  * Multiple format options: PNG (lossless), JPEG (compressed), WebP (modern compression)
  * Customizable quality settings per format
  * Original dimensions or custom size export
  * Metadata preservation option for research data

{% stepper %}
{% step %}
Complete your image edits using the available annotation and adjustment tools
{% endstep %}

{% step %}
Click the **Save** or **Export** button in the toolbar
{% endstep %}

{% step %}
Select the desired format:

* **PNG**: Best for scientific images requiring no quality loss
* **JPEG**: Suitable for photographs and images where smaller file size is needed
* **WebP**: Modern format with excellent compression for web sharing
  {% endstep %}

{% step %}
Adjust quality settings if needed (JPEG: 1-100, WebP: 1-100)
{% endstep %}

{% step %}
Click **Download** to save the edited image to your device or **Save to Labii** to attach directly to your record
{% endstep %}
{% endstepper %}

### State Export/Import (Experimental)

A powerful feature for collaborative editing and workflow templates:

{% stepper %}
{% step %}
After editing an image, click the **Export State** button in the toolbar
{% endstep %}

{% step %}
Save the exported JSON file containing all editing information (annotations, adjustments, filters)
{% endstep %}

{% step %}
To resume editing later or share with colleagues, click **Import State** and select the saved JSON file
{% endstep %}

{% step %}
The editor will restore the exact editing session, allowing you to continue where you left off or replicate edits on similar images
{% endstep %}
{% endstepper %}

{% hint style="info" %}
State export is particularly useful for creating standardized annotation templates for repetitive experiments (e.g., gel lanes, microscopy grids) or training team members on proper image documentation.
{% endhint %}

### Live Comparison Feature

Compare original and edited versions in real-time:

* **Split View**: Drag a slider across the image to reveal original vs. edited versions side-by-side
* **Toggle Mode**: Quickly switch between original and edited with a button click
* **Before/After Preview**: Essential for documenting image adjustments and maintaining data integrity
* **Audit Documentation**: Provides visual proof of all modifications for regulatory compliance

### History Management

Comprehensive version control for all edits:

* **Unlimited Undo/Redo**: Step backward or forward through your entire editing history
* **History Timeline**: Visual timeline showing all editing operations in sequence
* **Selective Revert**: Jump to any point in the editing history
* **Reset to Original**: One-click restoration of the unedited image
* **History Export**: Save complete editing history for audit trail documentation

### Mobile and Touch Support

Optimized for laboratory tablet and mobile use:

* **Touch Gestures**: Pinch to zoom, two-finger pan, touch-and-hold for precision
* **Responsive Interface**: Automatically adapts to different screen sizes
* **Stylus Support**: Enhanced precision for digital pen users on tablets
* **Mobile Upload**: Direct camera integration for capturing and editing images on the spot

### Performance Optimization

Built for handling large scientific images efficiently:

* **Tree-shaking**: ES6 library design eliminates unused code for faster loading
* **Lazy Loading**: Tools and features load on-demand to reduce initial load time
* **Image Optimization**: Automatic optimization of large files without quality loss
* **Canvas Rendering**: Hardware-accelerated rendering for smooth editing experience

## Best Practices

### Data Organization

* Structure your image documentation with **consistent naming conventions** for easy retrieval (e.g., "Gel\_Experiment123\_Lane1-8\_2024-03-15")
* Use **descriptive annotations** that clearly identify important features (molecular weights, sample IDs, regions of interest)
* Organize related images within the same record section for **contextual documentation** of experimental workflows
* Add **metadata in the caption** to describe experimental conditions, equipment settings, and acquisition parameters

### Image Quality and Integrity

* Always work with **high-resolution originals** and save edited versions separately to maintain source data
* Use **PNG format** for scientific images that require lossless quality (gels, Western blots, microscopy)
* Enable **live comparison** before finalizing edits to verify that adjustments don't obscure important data
* Document all significant edits in the **record notes** to maintain transparency for peer review and audits
* Export and save the **editing state** for complex annotations that may need revision or replication

### Annotation Best Practices

* Use **consistent color coding** across your experiments (e.g., red for positive results, blue for controls)
* Apply **text annotations** with sufficient contrast for readability in both digital and printed formats
* Add **scale bars** to microscopy images to provide dimensional context
* Use **arrows and shapes** sparingly to avoid cluttering the image while highlighting key features
* Create **annotation templates** using state export for standardized documentation across similar experiments

### Performance Optimization

* **Resize large images** to appropriate dimensions before extensive editing to improve responsiveness
* Use **selective editing** rather than applying global filters when only specific regions need adjustment
* **Clear editing history** periodically for very long editing sessions to free up memory
* For batch operations, use **exported state templates** to quickly apply consistent edits to multiple images

### Common Pitfalls to Avoid

* **Avoid over-editing**: Excessive filters or adjustments can obscure original data and raise questions about data integrity
* **Avoid destructive edits**: Always preserve original images; use the editor's non-destructive workflow with history management
* **Avoid low-quality exports**: Using high JPEG compression for publication figures can introduce artifacts in scientific images
* **Instead**: Use PNG for scientific images, maintain originals separately, and document all adjustments transparently
* **Avoid ambiguous annotations**: Unclear labels or unmarked regions can confuse collaborators and reviewers
* **Instead**: Use clear, descriptive text with appropriate colors and positioning for all annotations

### Maintenance and Troubleshooting

* Regularly **review image file sizes** to ensure storage efficiency without compromising quality
* **Monitor export settings** to maintain consistency across your documentation
* If the editor performs slowly, **reduce image dimensions** or close other browser tabs to free up memory
* If annotations appear pixelated, **increase the canvas resolution** in configuration settings
* For touch device issues, **calibrate touch sensitivity** in advanced settings or use a stylus for precision work


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.labii.com/widgets/section-widgets/office/image-editor/filerobot-image-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.