# Sketch ## Specs | Label | Value | | ------------------------- | ----------------------------- | | **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
Edit view of Sketch widget showing drawing tools and canvas

The Sketch widget provides comprehensive drawing tools including pencil, shapes, text, and color controls for creating custom diagrams and annotations

## Configuration ### Initial Setup The Sketch widget requires no configuration and is ready to use immediately upon adding to a record section. {% stepper %} {% step %} Navigate to the section where you want to add drawing capability and click **Add Widget** {% endstep %} {% step %} Select **Sketch** from the Office → Image Editor category in the widget library {% endstep %} {% step %} Start drawing immediately or upload a background image to annotate {% endstep %} {% endstepper %} ### Settings The Sketch widget works without any settings required. All functionality is available by default through the drawing interface toolbar. {% hint style="info" %} The widget's minimal configuration approach allows for immediate productivity. Simply add the widget and start creating visual documentation. {% endhint %} ## 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 {% stepper %} {% step %} Complete your sketch using the available drawing and annotation tools {% endstep %} {% step %} Click the **Download** button in the toolbar menu {% endstep %} {% step %} The sketch is saved as a PNG file to your device's download location {% endstep %} {% endstepper %} ### 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 {% hint style="success" %} Following these best practices ensures your visual documentation is clear, professional, and useful for both current work and future reference. {% endhint %} ### 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**](/widgets/section-widgets/office/image-editor/filerobot-image-editor.md): 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 --- # 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/sketch.md?ask= ``` 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.