Sketch
Freehand drawing canvas for creating diagrams, annotating images, and visual brainstorming directly in your electronic lab notebook
Specs
Version
1.0.0 (updated on 2024-04-21)
Developer
Labii Inc.
Type
Section
Support Configuration
No
Overview
The Sketch widget provides a versatile drawing canvas within Labii's Electronic Lab Notebook for capturing ideas, visualizing concepts, and creating custom diagrams directly in your records. Powered by react-sketch, it enables laboratory professionals to freely draw, create shapes, highlight areas, and annotate existing images without leaving the platform. This widget is essential for brainstorming experimental designs, sketching equipment setups, creating workflow diagrams, and adding quick visual notes that enhance scientific documentation and team communication.
Use Cases
Experimental Design: Quickly sketch experimental workflows, equipment setups, and laboratory layouts before implementation
Image Annotation: Draw directly over existing microscopy images, gel photos, or equipment readouts to highlight regions of interest
Workflow Visualization: Create flowcharts and process diagrams to document protocols and standard operating procedures
Concept Illustration: Build simple visual representations of molecular structures, cell processes, or experimental concepts
Meeting Notes: Capture visual brainstorming sessions, equipment diagrams, and whiteboard discussions during team meetings
Equipment Setup Documentation: Draw custom diagrams of instrument configurations and experimental apparatus arrangements
Result Marking: Highlight important features, anomalies, or regions of interest on images for collaborative discussion
Quick Visual Communication: Create simple sketches to convey ideas to team members without formal diagramming tools
Interface
Read-only View
The read-only view displays the completed sketch or annotated image as a static visual, preserving all drawings, shapes, text, and colors exactly as created. This view is optimized for reviewing and sharing visual documentation without accidental modifications.
Data Display: Sketches are rendered as high-quality images showing all drawing elements, shapes, text annotations, and color choices
Navigation: Zoom controls allow detailed inspection of specific sketch regions
Export Options: One-click download of the sketch as a PNG image file for use in presentations or publications
Full Canvas View: The complete canvas is displayed at its saved dimensions with all visual elements intact
Edit View
The edit view provides a comprehensive drawing interface with multiple tools for creating freehand drawings, geometric shapes, text annotations, and image modifications. The interface is designed for intuitive use with both mouse and touch input.
Input Methods:
Upload background images via drag-and-drop or file browser
Draw directly using mouse, trackpad, or touch screen
Paste images from clipboard
Add text annotations with customizable fonts
Drawing Tools:
Pencil: Freehand drawing with pressure-sensitive lines
Line: Create straight lines between two points
Rectangle: Draw rectangular shapes with customizable fill and border
Circle: Create circular shapes with customizable styling
Text: Add text labels and annotations anywhere on the canvas
Formatting Options:
Line width adjustment (1px to 24px) for all drawing tools
Line color selection from full color palette
Fill color customization for shapes
Background color modification for canvas
Editing Controls:
Select: Modify, move, and transform existing elements
Pan: Navigate the canvas when zoomed in
Copy/Paste: Duplicate shapes and elements
Delete: Remove selected elements
Clear: Reset the entire canvas
Canvas Management:
Zoom in/out for detailed work or overview
Resize canvas dimensions (default: 100% width × 610px height)
Undo/Redo for unlimited step-by-step corrections
Download completed sketch as PNG image
Configuration
Initial Setup
The Sketch widget requires no configuration and is ready to use immediately upon adding to a record section.
Navigate to the section where you want to add drawing capability and click Add Widget
Select Sketch from the Office → Image Editor category in the widget library
Start drawing immediately or upload a background image to annotate
Settings
The Sketch widget works without any settings required. All functionality is available by default through the drawing interface toolbar.
The widget's minimal configuration approach allows for immediate productivity. Simply add the widget and start creating visual documentation.
Additional Functions
Data Import/Export
Import:
Drag and drop image files directly onto the canvas
Use the Open button to browse and select background images
Paste images from clipboard for quick annotation
Supported formats: PNG, JPEG, JPG, GIF, WebP
Export:
Click the Download button to save sketches as PNG images
Automatically includes all drawings, shapes, text, and background images
Maintains original canvas dimensions and quality
Complete your sketch using the available drawing and annotation tools
Click the Download button in the toolbar menu
The sketch is saved as a PNG file to your device's download location
Drawing Tools Reference
Basic Drawing Tools:
Pencil: Freehand drawing for custom shapes and annotations
Line: Straight lines for arrows, connectors, and measurements
Rectangle: Rectangular shapes for highlighting regions or creating boxes
Circle: Circular shapes for marking areas or creating diagrams
Text: Add labels, identifiers, and descriptive notes
Editing and Navigation:
Select: Click to select and manipulate existing elements (move, resize, delete)
Pan: Move the entire canvas when zoomed in for better navigation
Zoom In/Out: Adjust view for detailed work or canvas overview
Undo/Redo: Step backward or forward through your drawing history
Copy/Paste: Duplicate shapes for creating repeated elements quickly
Styling Options:
Line Width: Adjust thickness from 1px (fine detail) to 24px (bold emphasis)
Line Color: Full color palette for drawing and shape outlines
Fill Color: Set interior color for rectangles and circles
Background Color: Change canvas background color for contrast
Canvas Management:
Resize: Adjust canvas dimensions
Default: 100% width (responsive) × 610px height
Set absolute width values to prevent responsive resizing
Clear: Remove all drawings and start fresh
Delete: Remove selected shapes individually
Touch and Stylus Support
The Sketch widget supports touch input for tablet and mobile devices:
Touch Drawing: Draw using finger or stylus on touchscreen devices
Multi-touch Gestures: Pinch to zoom, two-finger pan
Stylus Precision: Enhanced accuracy with digital pen devices like Apple Pencil or Surface Pen
Collaboration Features
Shared Canvas: Multiple team members can view the completed sketch in read-only mode
Version Control: Labii's built-in versioning captures each save as a new version
Comments: Add contextual comments to sketches using Labii's comment system
Export and Share: Download sketches for inclusion in presentations, emails, or external documentation
Best Practices
Visual Documentation
Use consistent color coding across sketches in related experiments for visual continuity (e.g., blue for inlet, red for outlet)
Add descriptive text labels to all important elements in your sketches to ensure clarity for future reference
Create legend sketches separately to define symbols and color meanings used across multiple experiments
Keep sketches focused and simple—avoid overcrowding the canvas with too many elements
Canvas Management
Set absolute width dimensions using the Resize function when you need to maintain exact proportions across different screen sizes
Start with a background image when annotating existing photos or equipment readouts for better spatial context
Use zoom controls for detailed work on small annotations or precise measurements
Save frequently by clicking outside the edit area to preserve your work as you progress
Drawing Efficiency
Use Copy/Paste for repeated elements like sample labels, measurement markers, or standard symbols
Utilize the Line tool instead of freehand for straight connections between elements
Select appropriate line widths: thin (1-3px) for details, medium (4-8px) for general drawing, thick (12-24px) for emphasis
Employ the Select tool to reposition and refine elements rather than redrawing them
Data Integrity
Always download and archive important sketches separately in case of platform updates or migrations
Use descriptive widget titles in your record to identify sketch contents (e.g., "Equipment Setup Diagram - Experiment XYZ")
Create separate sketch widgets for different aspects of an experiment rather than combining everything in one overcrowded canvas
Document in accompanying text what the sketch represents, including date created and creator name
Following these best practices ensures your visual documentation is clear, professional, and useful for both current work and future reference.
Common Pitfalls to Avoid
Avoid responsive width for detailed sketches: If canvas is set to 100% width, resizing the browser window will distort your drawings
Instead: Use the Resize function to set an absolute width value (e.g., 800px) to lock proportions
Avoid overcrowding: Too many elements on one canvas reduces clarity and makes editing difficult
Instead: Create multiple focused sketches or use larger canvas dimensions
Avoid missing labels: Unlabeled diagrams can be difficult to interpret later
Instead: Add text annotations to all important features using the Text tool
Maintenance and Troubleshooting
If the canvas becomes unresponsive, refresh the page (your work is auto-saved)
If drawings appear distorted, check the canvas width setting and set an absolute value
For complex diagrams, periodically save by clicking outside the widget to preserve progress
If elements overlap unexpectedly, use the Select tool to rearrange their positions
When zoom causes navigation issues, use the Pan tool to move the canvas rather than scrolling
Workflow Integration Tips
Combine with Rich Text widget to provide written explanations alongside visual sketches
Use with File Attachment widget to include reference photos that inform your sketches
Pair with Image Editor widgets (Pintura or Filerobot) when you need more advanced annotation features
Create sketch templates by saving common layouts and copying them to new records
Use after Sample or Experiment widgets to visually document physical setups and configurations
Related Widgets
Filerobot Image Editor: Better option when you need advanced annotation features like filters, watermarks, and precise adjustments. Choose this widget if you're working primarily with photographs or scientific images that need enhancement
Last updated