/filament-signature-pad

Signature Pad Field for Filamentphp Forms

Primary LanguagePHPMIT LicenseMIT

Signature Pad for FilamentPHP

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

A Signature pad field for FilamentPHP based on szimek/signature_pad.

NOTE: This documentation is for ^v2.0 which only supports FilamentPHP ^3.0. If you are using Filament 2.x, you should use SignaturePad v1.x. See the docs here

Installation

You can install the package via composer:

composer require coolsam/signature-pad

Next, Publish filament's assets to ensure the plugin's assets are published to the public directory.

php artisan filament:assets

You may also publish the package's translations using:

php artisan vendor:publish --tag="signature-pad-translations"

You can publish the config file with:

php artisan vendor:publish --tag="signature-pad-config"

Usage

Use it in your Filament Forms as follows:

use Coolsam\SignaturePad\Forms\Components\Fields\SignaturePad;

SignaturePad::make('my_signature'),

// Other methods
SignaturePad::make('signature')
    ->backgroundColor('white') // Set the background color in case you want to download to jpeg
    ->penColor('blue') // Set the pen color
    ->strokeMinDistance(2.0) // set the minimum stroke distance (the default works fine)
    ->strokeMaxWidth(2.5) // set the max width of the pen stroke
    ->strokeMinWidth(1.0) // set the minimum width of the pen stroke
    ->strokeDotSize(2.0) // set the stroke dot size.
    ->hideDownloadButtons() // In case you don't want to show the download buttons on the pad, you can hide them by setting this option.

That's it! Enjoy composing beautiful signatures.

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.