Writing Pad in Django

Author: Asif Shahzad | Full Stack Web Developer

Writing using pen is a good experience when the requirment is to save signature or drawing. In this tutorial, jSignature is used to save the signature in database for further use.

1. Installation

pip install django-jsignature

2. Add in Setting.py

# Add globally
JSIGNATURE_WIDTH = 200
JSIGNATURE_HEIGHT = 100
JSIGNATURE_JQUERY = 'admin'
# JSIGNATURE_JQUERY = 'https://code.jquery.com/jquery-3.6.0.min.js'



INSTALLED_APPS = (
    ...
    'jsignature',
)

3. Make Model

# models.py
from django.db import models
from jsignature.fields import JSignatureField

class SignatureModel(models.Model):
    signature = JSignatureField()

4. Add in forms.py

class TestForm(forms.ModelForm):
    signature = JSignatureField(widget=JSignatureWidget(jsignature_attrs={'color': '#e0b642', 'height': '200px'}))
    class Meta:
        model = Test
        fields = ['signature']

5.  Add in views.py

def test(request):
    form = TestForm(request.POST or None)
    if form.is_valid():
        signature = form.cleaned_data['signature']

        mydata=Test( signature=signature)
        mydata.save()  
           
    else:
        form=TestForm()  
        my_sig = Test.objects.first()     
    return render(request,'main/test.html',{'form': form,'my_sig':my_sig})

6. Use in your template for entering signature

{{ form.media }}
<form action="" method="post">
    {{ form }}
    <input type="submit" value="Save" />
    {% csrf_token %}
</form>

7. Use in template to display signature

{% load jsignature_filters %}

<img src="{{ x.signature|signature_base64 }}" alt="{{ x}}" />

8. Include updated the jQuery library in Head tag

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

I hope this will help!

Please share this page to friends.