Software Solutions Company

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

Welcome to our Software Solutions Company, where we excel in transforming ideas into tangible realities. We have expertise in developing online management systems, website designing & development, software solutions, mobile app development, e-commerce solutions and graphic designing. We provide 24/7 services.

Popular Posts






Call To Action

Do you Need a website?

Order Now