Online Document Scanning Apps with Django and Dynamic Web TWAIN

Django, written in Python, is a Web framework that designed for developers to quickly build high-performing Web apps. In this tutorial, I’d like to share how to implement a simple online document scanning application with Dynamic Web TWAIN and Django.

Django dwt

Download and Installation

  1. Dynamic Web TWAIN 10.0.1
  2. Python 2.7.8
  3. Django 1.7.1

The Fusion of Django and Dynamic Web TWAIN

Run cmd.exe and create a django project named DWT:

D:\django>django-admin.py startproject DWT

A folder DWT and some configuration files will be automatically generated. Now you can cd to the folder, and run the server by the command:

python manage.py runserver

DWT_django_run_command

Open your Web browser to take a look. If you can see the following page, congratulations!

DWT_django_runserver

Create a new application named hello in this project:

D:\django\DWT>python manage.py startapp hello

In result, 4 items will be created in the folder hello: __init__.py, models.py, tests.py  and views.py.

Under your project root directory, manually create a folder templates, and create a HTML page scan.html inside. Moreover, copy the folder Resources from Dynamic Web TWAIN installation directory to the project. Now your project would look like this:

DWT_django_structure

Open DWT->urls.py and add:

from django.conf.urls import patterns, include, url
import os.path

# Uncomment the next two lines to enable the admin:
# from django.contrib import admin
# admin.autodiscover()
PROJECT_PATH = os.path.abspath(os.path.dirname(__name__))
RESOURCES_PATH =  PROJECT_PATH + '/Resources'
urlpatterns = patterns('',
    # Examples:
    # url(r'^$', 'DWT.views.home', name='home'),
    # url(r'^DWT/', include('DWT.foo.urls')),

    # Uncomment the admin/doc line below to enable admin documentation:
    # url(r'^admin/doc/', include('django.contrib.admindocs.urls')),

    # Uncomment the next line to enable the admin:
    # url(r'^admin/', include(admin.site.urls)),
    (r'^$', 'hello.views.home'),
    (r'^Resources/(?P<path>.*)$', 'django.views.static.serve', {'document_root':RESOURCES_PATH}),
)

The first line calls the function home in hello->views.py. The second line defines the reference path which will be used to load resource files.

Open DWT->hello->views.py, and type in following code:

# Create your views here.
from django.http import HttpResponse
from django import template
from django.template import RequestContext
from django.shortcuts import render

def home(request):
	fp = open('templates/scan.html');
	t = template.Template(fp.read())
	fp.close()
	html = t.render(template.Context({'current_date'}))
	return HttpResponse(html)
Open scan.html and insert following code:
<html>
    <head>
        <title>Python DWT Hello World</title>
        <script type="text/javascript" src="/Resources/dynamsoft.webtwain.initiate.js"></script>
		<script src="/Resources/dynamsoft.webtwain.config.js"></script>
    </head>
    <body>
        <div id="dwtcontrolContainer"></div>
		<input type="button" value="Acquire" onclick="AcquireImage();" />

		<!--Custom script goes here-->
		 <script type="text/javascript">
			 function AcquireImage(){
				 DWObject.IfShowUI = false;
				 DWObject.SelectSource();
				 DWObject.OpenSource();
				 DWObject.AcquireImage();
			 }
		 </script> 

    </body>
</html>

It’s done. Visit 127.0.0.1:8000 again in your Web browser to see how it goes. You can now press Acquire to scan documents from any detected scanner sources.

DWT_diango_scan

Source Code

 https://github.com/DynamsoftRD/Web-TWAIN-with-Django