top of page

SCRIBBLE

DOCUMENTATION

Introduction
The Scribble plugin provides two powerful widgets for adding interactive drawing capabilities to your website:

  • Paint Widget: A versatile canvas for freeform drawing and painting.

  • Image Paint Widget: A specialized canvas for revealing or masking images through drawing interactions.


Quick Start

  1. Add the widget to your canvas and position it where you want the drawing effect to appear. You can use the layers panel to place other elements above the widget if needed.

  2. Click the widget and open the settings panel to configure your preferred color, brush size, and blur settings.

  3. Preview or publish your site to see the effect in action.


Widget Settings

Brush Size Units

  • Pixels: A fixed brush size regardless of screen size.

  • VW (Viewport Width): A responsive brush size that scales with the viewport width.
    For example, a brush size of 5vw will be 5% of the viewport width. This helps maintain proportional brush sizes across different screen sizes.


Erase Mode

  • In the Paint Widget: Creates a canvas in the selected color, allowing you to erase and reveal content beneath.

  • In the Image Paint Widget: Shows the full image and lets you erase parts of it.
     

Peek Mode
Peek Mode reveals the paint or image in the selected brush size without actually drawing. It functions like peeking through a hole, providing a preview without altering the canvas.
 

Draw On Mouse Press
When enabled, drawing occurs only when clicking and dragging. When disabled, drawing happens whenever the mouse moves over the canvas. This option provides flexibility for different types of drawing interactions and user experiences.
 

Custom Brush Shape Toggle
Enables the use of custom SVG paths as brush shapes. When disabled, a standard circular brush is used.


Custom Brush Path
Accepts an SVG path element as a string to define custom brush shapes. Must be a valid SVG path string. Copy the path element from your SVG.
Example:

<path d="M 0,85 L 75,75 L 100,10 L 125,75 L 200,85 L 150,125 L 160,190 L 100,150 L 40,190 L 50,125 L 0,85" />

This creates a star-shaped brush.
 

Custom Brush Scale Factor
Controls the size of custom brush shapes. Values less than 1 make the brush smaller, while values greater than 1 enlarge it.
Example: A value of 0.5 makes the brush half its original size.

Note: When using a custom brush, the "Brush Size" settings will not affect it. Use the scale factor for resizing instead.
 

Allow Custom Controls Toggle
Enables the use of custom UI elements for controlling the drawing canvas. When enabled, you can use predefined CSS classes to create custom controls for clearing the canvas, changing colors, and adjusting brush size.
 

Custom Control Classes
Add these classes to any element to create custom controls:

  • "scribbleClearButton": Creates a button to clear the canvas.

  • "scribbleColorButton scribbleColor[HEX]": Creates a color selection button.
    Replace [HEX] with your color code (without the #).
    Example: "scribbleColorButton scribbleColorFF0000" creates a red color button.

  • "scribbleSizeButton scribbleSizePlus": Creates a button to increase brush size.

  • "scribbleSizeButton scribbleSizeMinus": Creates a button to decrease brush size.
     

Image Paint Widget Settings
Images are managed via the app collection “Image Paint Widget.”

  1. Open the CMS by clicking the button in the settings panel.

  2. Choose your image.

  3. After selecting an image, close and reopen the settings panel to refresh the dropdown.

  4. Select your image from the dropdown to use it in the widget.

bottom of page