#

Writing Pad in Django

Jan. 3, 2023
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.

Asif Shahzad | Full Stack Web Developer

We have expertise in website designing & development, software solutions, mobile app development, e-commerce solutions and graphic designing. We transform your visions into reality by providing 24/7 services.

Latest Comments

#

John

Jan 08, 2023

Very helpful and to the point topic. Now I can integrate writing pad.

Popular Posts

Call To Action

Do you Need a website?

Order Now