Filament Autograph

https://github.com/saade/filament-autograph
Admin
Filament Autograph is a Filament component that provides a customizable signature pad for capturing...
Tokens:4,849
Snippets:29
Trust Score:9.9
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Filament Autograph Package

Source: https://github.com/saade/filament-autograph/blob/4.x/README.md

Installs the Filament Autograph package using Composer. This is the first step in integrating the signature pad into your Laravel project.

```bash
composer require saade/filament-autograph
```

--------------------------------

### Controlling Signature Pad Action Button Visibility

Source: https://context7.com/saade/filament-autograph/llms.txt

This example demonstrates how to control the visibility of built-in actions for the SignaturePad component, such as clear, undo, download, and done buttons. This allows fine-tuning of the user interaction with the signature pad.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->clearable(true)      // Show clear button (default: true)
    ->undoable(true)       // Show undo button (default: true)
    ->downloadable(false)  // Show download button (default: false)
    ->confirmable(false)   // Require "Done" button confirmation (default: false)
```

--------------------------------

### Configuring Signature Pad Drawing Options

Source: https://context7.com/saade/filament-autograph/llms.txt

This code example shows how to customize the drawing behavior of the SignaturePad component using various options. These include dot size, line width, throttling, and velocity filtering, affecting the quality and responsiveness of the signature capture.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->label('Sign here')
    ->dotSize(2.0)              // Radius of a single dot and width of the start of a mark
    ->lineMinWidth(0.5)         // Minimum width of a line
    ->lineMaxWidth(2.5)         // Maximum width of a line
    ->throttle(16)              // Draw next point at most once per X milliseconds (0 = no throttle)
    ->minDistance(5)            // Add next point only if previous is farther than X pixels
    ->velocityFilterWeight(0.7) // Weight to modify new velocity based on previous velocity
    ->required()
```

--------------------------------

### Comprehensive Filament Form with Signature Collection (PHP)

Source: https://context7.com/saade/filament-autograph/llms.txt

A complete example demonstrating a Filament form that includes a SignaturePad component for collecting signatures, alongside other standard form fields like text inputs, date pickers, and textareas. It shows how to configure signature pad properties such as filename, downloadability, colors, and line thickness.

```php
use Filament\Forms\Form;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\Textarea;
use Saade\FilamentAutograph\Forms\Components\SignaturePad;
use Saade\FilamentAutograph\Forms\Components\Enums\DownloadableFormat;

public function form(Form $form): Form
{
    return $form
        ->schema([
            Section::make('Contract Agreement')
                ->schema([
                    TextInput::make('name')
                        ->required()
                        ->label('Full Name'),

                    DatePicker::make('date')
                        ->default(now())
                        ->required()
                        ->label('Date'),

                    Textarea::make('terms')
                        ->default('I agree to the terms and conditions...')
                        ->disabled()
                        ->rows(5),

                    SignaturePad::make('signature')
                        ->label('Your Signature')
                        ->required()
                        ->confirmable()
                        ->filename('contract_signature')
                        ->downloadable()
                        ->downloadableFormats([
                            DownloadableFormat::PNG,
                            DownloadableFormat::SVG,
                        ])
                        ->backgroundColor('rgba(255,255,255,1)')
                        ->penColor('#1e40af')
                        ->penColorOnDark('#60a5fa')
                        ->lineMinWidth(1.0)
                        ->lineMaxWidth(3.0)
                        ->helperText('Please sign above and click "Done" to confirm'),
                ]),
        ]);
}
```

--------------------------------

### Configure Signature Pad Initialization Load Strategy (PHP)

Source: https://context7.com/saade/filament-autograph/llms.txt

Configure when the signature pad component initializes. This is particularly useful for scenarios involving modals or dynamically generated forms where the component might not be immediately visible. Supported strategies include 'visible', 'idle', and 'load'.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->loadStrategy('idle')  // Options: 'visible', 'idle', 'load'
    // Use 'idle' if signature pad doesn't load correctly in modals
```

--------------------------------

### Add Plugin Styles to Theme

Source: https://github.com/saade/filament-autograph/blob/4.x/README.md

Adds the plugin's views to your Filament theme's CSS file. This is necessary for the signature pad component to render correctly. Ensure you have a custom theme set up or follow Filament's documentation for standalone packages.

```css
@source '../../../../vendor/saade/filament-autograph/resources/views/**/*.blade.php';
```

--------------------------------

### Enable Signature Download

Source: https://github.com/saade/filament-autograph/blob/4.x/README.md

Enables the download functionality for the signature, allowing users to save their signature in various formats like PNG, JPG, and SVG. You can also customize the filename and the placement of the download action.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;
use Saade\FilamentAutograph\Forms\Components\Enums\DownloadableFormat;

SignaturePad::make('signature')
    ->filename('autograph')             // Filename of the downloaded file (defaults to 'signature')
    ->downloadable()                    // Allow download of the signature (defaults to false)
    ->downloadableFormats([
        DownloadableFormat::PNG,
        DownloadableFormat::JPG,
        DownloadableFormat::SVG,
    ])
    ->downloadActionDropdownPlacement('center-end')     // Dropdown placement of the download action (defaults to 'bottom-end')
```

--------------------------------

### Basic Configuration with Signature Pad Options

Source: https://context7.com/saade/filament-autograph/llms.txt

Configure the signature pad's drawing behavior including dot size, line width, throttling, and velocity filtering.

```APIDOC
## Basic Configuration with Signature Pad Options

### Description
Customize the drawing characteristics of the signature pad such as dot size, line width, and filtering.

### Method
N/A (This is a form component configuration)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->label('Sign here')
    ->dotSize(2.0)              // Radius of a single dot and width of the start of a mark
    ->lineMinWidth(0.5)         // Minimum width of a line
    ->lineMaxWidth(2.5)         // Maximum width of a line
    ->throttle(16)              // Draw next point at most once per X milliseconds (0 = no throttle)
    ->minDistance(5)            // Add next point only if previous is farther than X pixels
    ->velocityFilterWeight(0.7) // Weight to modify new velocity based on previous velocity
    ->required();
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Configure Signature Pad Options

Source: https://github.com/saade/filament-autograph/blob/4.x/README.md

Configures various options for the SignaturePad component, such as dot size, line width, and velocity filter weight. These settings control the drawing behavior of the signature pad.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->label(__('Sign here'))
    ->dotSize(2.0)
    ->lineMinWidth(0.5)
    ->lineMaxWidth(2.5)
    ->throttle(16)
    ->minDistance(5)
    ->velocityFilterWeight(0.7)
```

--------------------------------

### Enabling Downloadable Signatures in Various Formats

Source: https://context7.com/saade/filament-autograph/llms.txt

This code configures the SignaturePad component to allow users to download their signatures. It enables the download button, specifies the allowed export formats (PNG, JPG, SVG), and allows customization of the filename and dropdown placement.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;
use Saade\FilamentAutograph\Forms\Components\Enums\DownloadableFormat;

SignaturePad::make('signature')
    ->filename('customer_signature')    // Filename without extension
    ->downloadable()                    // Enable download button
    ->downloadableFormats([
        DownloadableFormat::PNG,
        DownloadableFormat::JPG,
        DownloadableFormat::SVG,
    ])
    ->downloadActionDropdownPlacement('center-end')  // Dropdown menu placement
```

--------------------------------

### Basic SignaturePad Component Integration in Filament Form

Source: https://context7.com/saade/filament-autograph/llms.txt

This snippet demonstrates how to integrate the basic SignaturePad component into a Filament form schema. It shows the necessary use statements and how to instantiate the component with a name, label, and requirement.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;
use Filament\Forms\Form;

public function form(Form $form): Form
{
    return $form
        ->schema([
            SignaturePad::make('signature')
                ->label('Customer Signature')
                ->required()
                ->helperText('Please sign in the box above'),
        ]);
}
```

--------------------------------

### Basic Filament Autograph Signature Pad Usage

Source: https://github.com/saade/filament-autograph/blob/4.x/README.md

Demonstrates the basic usage of the SignaturePad component in Filament. This creates a signature field named 'signature'.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
```

--------------------------------

### Downloadable Signatures

Source: https://context7.com/saade/filament-autograph/llms.txt

Enable signature download functionality with customizable formats and dropdown placement.

```APIDOC
## Downloadable Signatures

### Description
Configure the signature pad to allow users to download their signature in various formats (PNG, JPG, SVG) and customize the download button's appearance and placement.

### Method
N/A (This is a form component configuration)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;
use Saade\FilamentAutograph\Forms\Components\Enums\DownloadableFormat;

SignaturePad::make('signature')
    ->filename('customer_signature')    // Filename without extension
    ->downloadable()
    ->downloadableFormats([
        DownloadableFormat::PNG,
        DownloadableFormat::JPG,
        DownloadableFormat::SVG,
    ])
    ->downloadActionDropdownPlacement('center-end'); // Dropdown menu placement
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### SignaturePad Component

Source: https://context7.com/saade/filament-autograph/llms.txt

The main form field component that renders an interactive signature pad where users can draw their signature using mouse, touch, or stylus input.

```APIDOC
## SignaturePad Component

### Description
This component renders an interactive signature pad for capturing user signatures within Filament forms.

### Method
N/A (This is a form component configuration)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;
use Filament\Forms\Form;

public function form(Form $form): Form
{
    return $form
        ->schema([
            SignaturePad::make('signature')
                ->label('Customer Signature')
                ->required()
                ->helperText('Please sign in the box above'),
        ]);
}
```

### Response
#### Success Response (200)
N/A (This is a form component configuration)

#### Response Example
N/A
```

--------------------------------

### Customize Signature Pad Action Buttons

Source: https://github.com/saade/filament-autograph/blob/4.x/README.md

Customizes the appearance and behavior of the action buttons within the signature pad, including clear, download, undo, and done actions. This allows for further integration into your application's UI.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;
use Filament\Forms\Actions\Action;

SignaturePad::make('signature')
    ->clearAction(fn (Action $action) => $action->button())
    ->downloadAction(fn (Action $action) => $action->color('primary'))
    ->undoAction(fn (Action $action) => $action->icon('heroicon-o-ctrl-z'))
    ->doneAction(fn (Action $action) => $action->iconButton()->icon('heroicon-o-thumbs-up'))
```

--------------------------------

### Customize Signature Pad Colors

Source: https://github.com/saade/filament-autograph/blob/4.x/README.md

Customizes the background and pen colors for the signature pad in both light and dark modes, as well as for export. This allows for theming the signature pad to match your application's design.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->backgroundColor('rgba(0,0,0,0)')  // Background color on light mode
    ->backgroundColorOnDark('#f0a')     // Background color on dark mode (defaults to backgroundColor)
    ->exportBackgroundColor('#f00')     // Background color on export (defaults to backgroundColor)
    ->penColor('#000')                  // Pen color on light mode
    ->penColorOnDark('#fff')            // Pen color on dark mode (defaults to penColor)
    ->exportPenColor('#0f0')            // Pen color on export (defaults to penColor)
```

--------------------------------

### Customize Signature Pad Action Buttons (PHP)

Source: https://context7.com/saade/filament-autograph/llms.txt

Customize the appearance and behavior of individual action buttons like clear, download, undo, and done for the SignaturePad component. This allows for tailored user interactions and visual feedback.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;
use Filament\Forms\Components\Actions\Action;

SignaturePad::make('signature')
    ->clearAction(fn (Action $action) => $action
        ->button()
        ->label('Reset')
        ->color('danger')
    )
    ->downloadAction(fn (Action $action) => $action
        ->color('primary')
        ->icon('heroicon-o-arrow-down-circle')
    )
    ->undoAction(fn (Action $action) => $action
        ->icon('heroicon-o-arrow-uturn-left')
        ->tooltip('Undo last stroke')
    )
    ->doneAction(fn (Action $action) => $action
        ->iconButton()
        ->icon('heroicon-o-check-circle')
        ->color('success')
    )
```

--------------------------------

### Color Customization

Source: https://context7.com/saade/filament-autograph/llms.txt

Customize pen and background colors for light mode, dark mode, and export scenarios.

```APIDOC
## Color Customization

### Description
Set custom colors for the pen and background in different themes (light/dark) and for exported images.

### Method
N/A (This is a form component configuration)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->backgroundColor('rgba(0,0,0,0)')  // Background color in light mode (transparent)
    ->backgroundColorOnDark('#1e293b')  // Background color in dark mode
    ->exportBackgroundColor('#ffffff')  // Background color for exported images
    ->penColor('#000000')               // Pen color in light mode
    ->penColorOnDark('#ffffff')         // Pen color in dark mode
    ->exportPenColor('#000000');        // Pen color for exported images
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Implementing a Signature Confirmation Workflow

Source: https://context7.com/saade/filament-autograph/llms.txt

This code snippet shows how to implement a confirmation workflow for the signature pad, requiring users to explicitly confirm their signature before the form can be submitted. This adds a 'Done' button and makes the field required upon activation.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->confirmable()  // Adds "Done" button and makes field required
    ->label('Please review and confirm your signature')
    ->helperText('Click "Done" after signing to confirm')
```

--------------------------------

### Action Control

Source: https://context7.com/saade/filament-autograph/llms.txt

Control the visibility and availability of built-in actions (clear, undo, download, done).

```APIDOC
## Action Control

### Description
Manage the display of built-in action buttons like clear, undo, download, and done.

### Method
N/A (This is a form component configuration)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->clearable(true)      // Show clear button (default: true)
    ->undoable(true)       // Show undo button (default: true)
    ->downloadable(false)  // Show download button (default: false)
    ->confirmable(false);  // Require "Done" button confirmation (default: false)
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Signature Pad Downloadable Formats Enum (PHP)

Source: https://context7.com/saade/filament-autograph/llms.txt

Defines the available formats for exporting signatures from the SignaturePad component. This enum provides methods to retrieve the display label, MIME type, and file extension for each supported format, enabling flexible signature downloads.

```php
use Saade\FilamentAutograph\Forms\Components\Enums\DownloadableFormat;

// Available formats
DownloadableFormat::PNG  // PNG image format (image/png)
DownloadableFormat::JPG  // JPEG image format (image/jpg)
DownloadableFormat::SVG  // SVG vector format (image/svg+xml)

// Usage in configuration
SignaturePad::make('signature')
    ->downloadable()
    ->downloadableFormats([
        DownloadableFormat::PNG,  // Users can download as PNG
        DownloadableFormat::SVG,  // Users can download as SVG
    ]);

// Enum methods
$format = DownloadableFormat::PNG;
$format->getLabel();      // Returns translated label
$format->getMime();       // Returns MIME type
$format->getExtension();  // Returns file extension
```

--------------------------------

### Confirmation Workflow

Source: https://context7.com/saade/filament-autograph/llms.txt

Require users to explicitly confirm their signature before the form can be submitted.

```APIDOC
## Confirmation Workflow

### Description
Implement a confirmation step where users must explicitly confirm their signature, typically by clicking a "Done" button, before the form submission proceeds.

### Method
N/A (This is a form component configuration)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->confirmable()
    ->label('Please review and confirm your signature')
    ->helperText('Click "Done" after signing to confirm');
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Customizing Signature Pad Colors for Light/Dark Modes and Exports

Source: https://context7.com/saade/filament-autograph/llms.txt

This snippet illustrates how to customize the colors of the signature pad for different scenarios, including light mode, dark mode, and the background color for exported images. It allows for tailored visual appearance across themes and output formats.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->backgroundColor('rgba(0,0,0,0)')  // Background color in light mode (transparent)
    ->backgroundColorOnDark('#1e293b')  // Background color in dark mode
    ->exportBackgroundColor('#ffffff')  // Background color for exported images
    ->penColor('#000000')               // Pen color in light mode
    ->penColorOnDark('#ffffff')         // Pen color in dark mode
    ->exportPenColor('#000000')         // Pen color for exported images
```

--------------------------------

### Require Confirmation for Signature

Source: https://github.com/saade/filament-autograph/blob/4.x/README.md

Enables the confirmation step for the signature pad, requiring the user to click a 'Done' button to finalize their signature. This can be useful for workflows that require explicit user acknowledgment.

```php
SignaturePad::make('signature')
    ->confirmable()                 // Requires user to click on 'Done' (defaults to false)
```

--------------------------------

### Disable Signature Pad Actions

Source: https://github.com/saade/filament-autograph/blob/4.x/README.md

Disables specific actions on the signature pad, such as clear, download, undo, and confirm (done). This provides fine-grained control over the user interaction with the component.

```php
use Saade\FilamentAutograph\Forms\Components\SignaturePad;

SignaturePad::make('signature')
    ->clearable(false)
    ->downloadable(false)
    ->undoable(false)
    ->confirmable(false)
```
Tokens:
Raw