Signature Pad

Canvas-based signature capture pad.

python 12 params

Usage

views.py

from djust import LiveView
from djust.decorators import event_handler
from djust.components import SignaturePad


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.component = SignaturePad()

    @event_handler()
    def save_signature(self, value=None, **kwargs):
        pass  # your app acts on 'save_signature'; no component state moves

my_template.html

{{ component }}

Events this component sends to the view: save_signature.

Needs its script on the page: <script src="{% static 'djust_components/signature-pad.js' %}"></script>. djust ships it; without it the markup renders but does not update in the browser.

Parameters

Name	Type	Default	Description
name	str	'signature'	form field name for the hidden input
save_event	str — renames the event	'save_signature'	djust event fired on save with base64 data
width	int	400	canvas width (default 400)
height	int	200	canvas height (default 200)
pen_color	str	'#000000'	stroke color (default "#000000")
pen_width	int	2	stroke width in px (default 2)
disabled	bool	False	disable drawing (default False)
custom_class	str	''	additional CSS classes
max_bytes	int	204800	largest data URL the hook sends (default 204800)
label	str	'Signature drawing area'	accessible name of the canvas (default "Signature drawing area")
typed	bool	True	offer the typed-name alternative (default True)
**kwargs	— passed to `Component.__init__`: `id=` sets `component.id`, and any other keyword is kept as state	—	—

Source & styles

File	Path	Notes
module	djust.components.components.signature_pad	Subclass it, or pass custom_class, to change how it renders.
css	djust_components/components.css	Defines 12 of this component's classes at line 2009, 2010, 2012, 2013, 2015, 2016, 2017, 2018, 2020, 2552. Override those rules, or the custom properties they read, in a stylesheet loaded after it.

Signature Pad

Preview

Usage

Parameters