Last week, I shared how to load a global JavaScript library dynamsoft.webtwain.min.js in React. Now it is time to use the library to build a simple app. I hope this tutorial will be handy for Dynamic Web TWAIN developers.
Tag: TWAIN
Document Scanning on Linux with SANE and JavaScript
Dynamic Web TWAIN SDK is a scanning SDK designed for web application development. It helps developers to easily build document scanning apps with a few lines of JavaScript code. The preview of Dynamic Web TWAIN for Linux is available now. In this post, I will demonstrate how to configure a USB scanner, as well as how to run the online demo of Dynamic Web TWAIN on Ubuntu.
How to Run Web TWAIN App on Nginx within Docker Container
Dynamic Web TWAIN (DWT) is a Web-based TWAIN scanning solution, which could be deployed to Windows, Mac OS X, and Linux. Users could visit DWT apps via any HTML5-comptible Web browsers on Windows or Mac. To facilitate the process of Web project deployment, we can use Docker. In this post, I’m going to demo how to build a Web TWAIN docker image, and how to run the Web TWAIN “hello world” with commands in one line.
Scan and Upload Documents in Web TWAIN and Go
Last week, I introduced how to create a Web application for document imaging and uploading with Dynamic Web TWAIN SDK and Node.js. In this tutorial, I’d like to share a more convenient way to implement such a solution in Go. You can just copy the client-relevant resources and page files to the new project since there’s no change at all.
Free Online OCR Service with Dynamsoft TWAIN SDKs
Dynamsoft provides a free online OCR tool for end-users. In this tutorial, I’d like to anatomize how to use Dynamic Web TWAIN SDK and Dynamic .NET TWAIN SDK to implement the online OCR solution. You can have fun with the tool before reading the next paragraph.
How to Push Notifications to Android Applications from Windows
When you are scanning tons of documents with your scanner applications, probably you don’t have enough time to take a break sometimes. Because you need to stare at the screen for checking all scanning information in case of some errors. Fortunately, mobile applications can help us reduce the burden. No matter where we are, using a smartphone as the monitor is a convenient way to deal with some emergencies. In this tutorial, I’d like to share how to create an Android application for receiving notifications from a .NET scanner application which is implemented based on Dynamic .NET TWAIN.
Wireless TWAIN Document Scanning on Android
If you have a TWAIN-compliant scanner, you can easily control it with Dynamic Web TWAIN or Dynamic .NET TWAIN. Both SDKs can help you create some excellent applications for document scanning and management on PCs. However, have you ever complained that it’s so inconvenient to stay with your scanners and PCs all the time? Since mobile technology is so hot today, why don’t you make TWAIN scan wireless, getting rid of clumsy machines? In this tutorial, I’d like to show you how to create a simple Android application and a .Net TWAIN server to conveniently capture document images from remote TWAIN scanners to your smartphone.
Java TWAIN with Dynamic .NET TWAIN and jni4net
Dynamic .NET TWAIN is one of the excellent TWAIN-compliant SDKs for document scanning and image capture. In this tutorial, I would like to share how to create a bridge to convert .NET TWAIN C# methods to Java methods in order to help Java developers easily implement Java TWAIN scanner software.
Barcode Generator with HTML5 WebSocket
Last week, I shared how to transmit an image between a WebSocket server and a Web client. Based on that, we can make a little bit of improvement. Today, I would like to share how to generate barcode on .Net server side and display it on web browser.
Prerequisites
- Read Image Transmission between a HTML5 WebSocket Server and a Web Client
- Download Dynamsoft Barcode SDK for .NET
Remote Barcode Generator
- In your WinForms project, add DynamicBarcode.dll and set its property Copy to Output Directory as Copy always. As so, the Dynamic .NET TWAIN component is able to automatically load the barcode library.
- Encode the received message, and draw generated barcode onto a background image:
float scale = 3; short sImageIndex = 0; dynamicDotNetTwain.MaxImagesInBuffer = 1; bool isLoaded = dynamicDotNetTwain.LoadImage("test.png"); dynamicDotNetTwain.AddBarcode(sImageIndex, Dynamsoft.DotNet.TWAIN.Enums.Barcode.BarcodeFormat.QR_CODE, message, "", 0, 0, scale);
- Send image width, height and data to web client:
Image img = dynamicDotNetTwain.GetImage(sImageIndex); ImageData imageData = load_image(img); session.Send(imageData.Width + "," + imageData.Height); session.Send(imageData.Data, 0, imageData.Data.Length); imageData = null;
- Display the barcode image on JavaScript web client:
ws.onmessage = function (evt) { var data = evt.data; if (!data) return; if (data instanceof ArrayBuffer) { drawImage(evt.data); } else { var len = data.length; var index = data.indexOf(","); var w = data.substring(0, index); var h = data.substring(index + 1, len); imageWidth = parseInt(w); imageHeight = parseInt(h); } };
Now, you can have fun with the remote barcode generator via all browsers (Chrome, Firefox, IE etc.) which support HTML5 WebSocket.
Source Code
How to Use Dynamic Web TWAIN with Internet Explorer 11 on Windows 8.1
It’s been a while now since Microsoft released a Windows 8.1 Preview with a Preview of IE 11 too. No doubt many users have already tested it. It is apparent that Microsoft has entirely rebuilt the developer tools and made them much more beautiful and powerful. There are eight distinct tools: DOM Explorer, Console, Debugger, Network, UI Responsiveness, Profiler, Memory, and Emulation. In this article, I will share some of my experiences with the debugger and console tools of IE 11. And I’ll provide a review of a hands-on test on how Dynamic Web TWAIN works with IE 11.
Debugger
Compared to the debuggers of Chrome and Firefox, the debugger for IE 11 seems much more user-friendly and convenient. The best feature is that I can search everything globally across different files. Here are some new features of Debugger listed on Microsoft’s website:
- No-refresh debugging – set your breakpoints and go without reloading and losing your state
- Tabbed document interface for easier management of multiple scripts
- Scrollbar that highlights breakpoints and search matches
Console
It is now much easier to see errors and warnings with the improved interface. Here are the highlights of the Console tool for IE 11, according to Microsoft:
- Open the Console at the bottom of any other tool with the Console button or CTRL + `
- New Console Debugging API methods for timing, counting, grouping, and more
- IntelliSense autocompletion suggestions on the command line speed up input, reduce typos, and help you discover aspects of JavaScript APIs
Using Dynamic Web TWAIN with IE 11
After a quick look at the Debugger and Console of IE 11 we will now try Dynamic Web TWAIN with it. For those who are not familiar with Dynamic Web TWAIN, it is a scanner programming SDK for interacting with TWAIN scanners in your web application.
I will test IE 11 with the local demo application coming with the 30-day free trial installer of Dynamic Web TWAIN. On running the demo scanning page, we will see a prompt to install the Dynamic Web TWAIN SDK, as shown in the screenshot below:
We can then acquire some images from attached scanners or load some existing images from a local disk.
Dynamic Web TWAIN is a client-side scanning SDK and you can use JavaScript to call all its methods/properties. When using the TWAIN control in IE 11, here are some points worth noting to make sure your JavaScript code is compatible with IE 11.
When running JS code, you will find that the user-agent string for IE 11 has been changed compared to previous versions. The use-agent string for IE 11 is “mozilla/5.0 (windows nt 6.3; trident/7.0; touch; .net4.0e; .net4.0c; tablet pc 2.0; rv:11.0) like gecko”, in which you cannot find “msie”. Change this code if you want to make relevant conditional statements work in IE 11.
AttachEvent method is also abandoned in IE 11. After running this code block, you will find error information displayed in the Console tool.
Change the event code like below.
if (DWObject.attachEvent) { DWObject.attachEvent("OnOperateStatus", dynamsoftOnOperateStatus); } else { DWObject.RegisterEvent("OnOperateStatus", dynamsoftOnOperateStatus); }
With these basic changes, you should be able to have Dynamic Web TWAIN functioning within IE 11.
Run or deploy the document scanning application on a web server
You can get the source code of the demo app I use here.
There is a “Scripts\ProductKey.js” file with a temporary trial product key. If you get a license error when running the sample code, you can download Dynamic Web TWAIN from Dynamsoft’s website to get a valid trial license: Dynamic Web TWAIN 30-Day Free Trial Download
I’d love to hear your experience with IE 11. Were you able to test its use for your image capture application? Please feel free to send feedback to me in the comments section below or reach me via email at kgao@dynamsoft.com.