-
Notifications
You must be signed in to change notification settings - Fork 68
/
demo-11-options-custom-notify-dialogs.htm
142 lines (124 loc) · 5.75 KB
/
demo-11-options-custom-notify-dialogs.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<title>scanner.js demo: Get started with options</title>
<meta charset='utf-8'>
<style>
#dialog-enable-scan {
display: none; position: fixed; z-index: 1000; right: 0; left: 0; margin-right: auto; margin-left: auto;
min-height: 10em; width: 60%; top: 5em;
background-color: #f8efc0; padding: 32px; border-radius: 8px; font-family: Arial, Helvetica, sans-serif;
}
#dialog-ready-to-scan {
display: none; position: fixed; z-index: 2000; right: 0; left: 0; margin-right: auto; margin-left: auto;
min-height: 8em; width: 40%; top: 5em;
background-color: #27AE60; padding: 32px; border-radius: 8px; font-family: Arial, Helvetica, sans-serif;
color: white; text-align: center;
}
</style>
<script>
window.scannerjs_config = {
// specify a func(Boolean show) to be called to show/hide scan app prompt dialog
display_install_func: function(show) {
console.log("Display enabling scan app dialog? " + show);
if(show) {
$('#dialog-enable-scan').show(500);
} else {
$('#dialog-enable-scan').hide();
}
// return true; // 'return true' to continue the default behavior of showing/hiding the standard dialog
},
// specify a func() to be called upon scanning is enabled
display_scan_ready_func: function() {
console.log("Ready to scan.");
$('#dialog-ready-to-scan').show().delay(1500).fadeOut();
}
};
</script>
<!--<script src="https://cdn.asprise.com/scannerjs/scanner.js" type="text/javascript"></script>-->
<script src="https://cdn.asprise.com/scannerjs/scanner.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
//
// Please read scanner.js developer's guide at: http://asprise.com/document-scan-upload-image-browser/ie-chrome-firefox-scanner-docs.html
//
/** Initiates a scan */
function scanToJpg() {
scanner.scan(displayImagesOnPage,
{
"output_settings": [
{
"type": "return-base64",
"format": "jpg"
}
]
}
);
}
/** Processes the scan result */
function displayImagesOnPage(successful, mesg, response) {
if(!successful) { // On error
console.error('Failed: ' + mesg);
return;
}
if(successful && mesg != null && mesg.toLowerCase().indexOf('user cancel') >= 0) { // User cancelled.
console.info('User cancelled');
return;
}
var scannedImages = scanner.getScannedImages(response, true, false); // returns an array of ScannedImage
for(var i = 0; (scannedImages instanceof Array) && i < scannedImages.length; i++) {
var scannedImage = scannedImages[i];
processScannedImage(scannedImage);
}
}
/** Images scanned so far. */
var imagesScanned = [];
/** Processes a ScannedImage */
function processScannedImage(scannedImage) {
imagesScanned.push(scannedImage);
var elementImg = scanner.createDomElementFromModel( {
'name': 'img',
'attributes': {
'class': 'scanned',
'src': scannedImage.src
}
});
document.getElementById('images').appendChild(elementImg);
}
</script>
<style>
img.scanned {
height: 200px; /** Sets the display size */
margin-right: 12px;
}
div#images {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="dialog-enable-scan">
<h1>Please enable scan app</h1>
<p>1) <a class="underline" href="http://cdn.asprise.com/scanapp/scan-setup.exe" target="_blank" text="Click here to download the setup file.">Click here to download the setup file</a>; 2) Double click to run; 3) Complete the setup.</p>
<p><span text="Already have the scan app set up? ">Already have the scan app set up? </span><a class="underline" href="AspriseWebScan://browser" target="_top" text="Click here to enable it.">Click here to enable it.</a></p>
</div>
<div id="dialog-ready-to-scan">
<h1>Ready to scan!</h1>
</div>
<h2>Scanner.js: custom notification user interface</h2>
<button type="button" onclick="scanToJpg();">Scan</button>
<div id="images"></div>
<!-- HELP_LINKS_START help links at the bottom -->
<style>
.asprise-footer, .asprise-footer a:visited { font-family: Arial, Helvetica, sans-serif; color: #999; font-size: 13px; }
.asprise-footer a { text-decoration: none; color: #999; }
.asprise-footer a:hover { padding-bottom: 2px; border-bottom: solid 1px #9cd; color: #06c; }
</style>
<div class="asprise-footer" style="margin-top: 48px;">
<a href="http://asprise.com/document-scan-upload-image-browser/direct-to-server-php-asp.net-overview.html" target="_blank" title="Opens in new tab">Scanner.js Homepage</a> |
<a href="http://asprise.com/scan/scannerjs/docs/html/scannerjs-javascript-guide.html" target="_blank" title="Opens in new tab">Developer's Guide to ScannerJs</a> |
<a href="https://github.com/Asprise/scannerjs.javascript-scanner-access-in-browsers-chrome-ie.scanner.js" target="_blank" title="Opens in new tab">Sample code on Github</a>
</div>
<!-- HELP_LINKS_END -->
</body>
</html>