Web GIU for Canon imageFORMULA DR-9080C
Post ReplyWeb GIU for Canon imageFORMULA DR-9080CPosted: Sunday, April 23, 2023 [17:01:35] - 1
Web interface for scanning with Canon imageFORMULA DR-9080C scanner. Open-source SANE drivers setup for Canon DR-9080C: www.codemacs.com/other/an.. Supporting files for the interface follow below. |
RE: Web GIU for Canon imageFORMULA DR-9080CPosted: Sunday, April 23, 2023 [17:31:30] - 2
Perl index.cgi program: use strict; print "Content-type: text/html\n\n"; my $homefolder='/home/account_home'; unless(-d "$homefolder/js.scan") {`mkdir -p $homefolder/js.scan`; } if( not -w '$homefolder/js.scan') {print "Folder $homefolder/js.scan is not writable<br /\n";} my $thisday=time; if(-f "$homefolder/device.cgi") { my $vozr = (stat ("$homefolder/device.cgi"))[10]; my $fvozr = $thisday - $vozr; if($fvozr > 7200) {unlink '$homefolder/device.cgi';} } if(-f "$homefolder/device.cgi") {$device=`cat $homefolder/device.cgi`;} else { my $dev = `scanimage -L`; unless($dev =~ m/No scanners/i) { $dev =~ s#(.*?)\`(.*?)\'(.*)#$2#; open(TXT,">$homefolder/device.cgi"); } else { $device = 'No Scanner found'; if(-f "$homefolder/device.cgi") {unlink "$homefolder/device.cgi";} } } if($device =~ m/No scanners/) { if(-f "$homefolder/device.cgi") {unlink "$homefolder/device.cgi";} } print <<EOH; <!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Scanning</title> <link href="/css/fonts.exo.css" rel="stylesheet"> <link href="/css/fonts.exo2.css" rel="stylesheet"> <link rel="profile" href="https://gmpg.org/xfn/11"> <meta name="theme-color" content="#ffffff"> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="/m/all.css" media="screen" /> <script> function formsubmit(frm) { var col = document.getElementById(frm).elements["color"].value; var resolution = document.getElementById(frm).elements["resolution"].value; var duplex = document.getElementById(frm).elements["duplex"].value; var size = document.getElementById(frm).elements["size"].value; var width = document.getElementById(frm).elements["width"].value; var height = document.getElementById(frm).elements["height"].value; var orient = document.getElementById(frm).elements["orient"].value; var fields = 'col=' + col + '&resolution=' + resolution + '&duplex=' + duplex + '&size=' + size + '&w=' + width + '&h=' + height + '&or=' + orient; var scanimgs = 'Scanning..<br /><img src="/scanning.gif">'; console.log(fields); document.getElementById('image').style.display="inline-block"; document.getElementById('image').innerHTML = scanimgs; var url = '/m/scan.cgi?' + fields; request = new XMLHttpRequest(); try { request.onreadystatechange = function() { if (request.readyState == 4) { var val = request.responseText; document.getElementById('image').innerHTML = val; document.getElementById('image').style.display="inline-block"; } } request.open("GET", url, true); request.send(); } catch (e) { alert("Unable to connect to server - Scanner" + frm); } } </script> <script> function chknumber(cnt) { var urlc = '/m/count.cgi?do=' + cnt; xcnt = new XMLHttpRequest(); try { xcnt.onreadystatechange = function() { if (xcnt.readyState == 4) { var cntval = xcnt.responseText; if(cntval === "") { document.getElementById("toimgs").innerHTML = 'no data'; } else { document.getElementById("toimgs").innerHTML = cntval; } } } xcnt.open("GET", urlc, true); xcnt.send(); } catch (e) { alert("Unable to connect to server to count scanned images"); } } </script> <style> #imrm {position:absolute;top:20px;left:20px;height:1250px;visibility:visible;z-index:999;} </style> </head> <body> <div id="content"> <h1>Scanning on Canon DR-9080C</h1> <div id="headimages"> <div id="image">Device: $device</div> </div> <div id="forms"> <form id="scan"> <div id="topsubm"> <a href="#" class="myButton" onclick="formsubmit('scan');return false;">Scan</a> </div> <p><h4>Select scan color:</h4> <input type="radio" name="color" id="color1" value="gray" checked> <label for="color1">Gray</label> <input type="radio" name="color" id="color2" value="color"> <label for="color2">Color</label> <input type="radio" name="color" id="color3" value="lineart"> <label for="color3">Lineart</label> <input type="radio" name="color" id="color4" value="halftone"> <label for="color4">Halftone</label> <p><h4>Resolution:</h4><div class="left"><input type="text" name="resolution" value="300" size="8"> dpi</div></p> <p><h4>Single/Double side:</h4> <input type="radio" name="duplex" id="dupl1" value="single" checked> <label for="dupl1">Single</label> <input type="radio" name="duplex" id="dupl2" value="duplex"> <label for="dupl2">Duplex</label></p> <p><h4>Page Size:</h4> <input type="radio" name="size" id="size1" value="letter" checked> <label for="size1">Letter 8.5x11</label> <input type="radio" name="size" id="size2" value="legal"> <label for="size2">Legal 11x17</label> <div class="left">Custom size (max width 304.761mm max height 432.506mm):<br /> W: <input type="text" name="width" size="10"> x H: <input type="text" name="height" size="10"></div></p> <p><h4>Orientation (disabled if Custom or Legal size entered):</h4> <input type="radio" name="orient" id="orient1" value="portret" checked> <label for="orient1">Portret</label> <input type="radio" name="orient" id="orient2" value="landscape"> <label for="orient2">Landscape</label></p> </form> <div id="fsubm"> <a href="#" class="myButton" onclick="formsubmit('scan');return false;">Scan</a> </div> <div id="toimgs"><a href="#" onclick="chknumber('count');return false">See Count</a></div> </div><!-- forms--> </div><!-- content--> </body> </html> EOH exit(0); Scan program next. |
RE: Web GIU for Canon imageFORMULA DR-9080CPosted: Sunday, April 23, 2023 [17:34:49] - 3
Scan program: use strict; our %in=(); my $homefolder='/home/account_home'; eval {require '$homefolder/cgi-bin/cgi-lib.pl'}; unless($@) {&ReadParse;} my %colorsby = ( 'gray','Gray', 'color','Color', 'lineart','Lineart', 'halftone','Halftone' ); my %dups = ( 'single'," --source='ADF Front'", 'duplex'," --source='ADF Duplex'" ); my %psize = ( 'letter' => { 'portret',' --page-width 215.872 --page-height 279.364', 'landscape',' --page-width 279.364 --page-height 215.872' }, 'legal' => { 'portret',' --page-width 279.364 --page-height 431.8', 'landscape',' --page-width 279.364 --page-height 431.8' } ); my @rzl = qw(100 150 200 240 300 400 600); foreach my $rs (@rzl) {$resol{$rs}=1;} my %pgnmb=(); my $error=''; print "Content-type: text/html\n\n"; my $colstring=''; if(-f "$homefolder/device.cgi") {$device=`cat $homefolder/device.cgi`;} else { my $dev = `scanimage -L`; unless($dev =~ m/No scanners/) { $dev =~ s#(.*?)\`(.*?)\'(.*)#$2#; open(TXT,">$homefolder/device.cgi"); } else {$error="Scanner Disconnected\n";} } if($device =~ m/No scanners/) { $error="Scanner Disconnected\n"; if(-f "$homefolder/device.cgi") {unlink "$homefolder/device.cgi";} } $device = " --device-name=$device"; unless($colorsby{$in{col}}) {$error = "Color is missing in your request\n";} else {$colstring = " --mode $colorsby{$in{col}}";} my $scnsrc=''; unless($dups{$in{duplex}}) {$error .= "Scanning type is wrong: \"$in{duplex}\"\n";} else {$scnsrc = $dups{$in{duplex}};} $in{w} = sprintf("%0.3f",$in{w}); if($in{w} > 0 && $in{h} > 0) { if($in{w} > 304.761) {$in{w} = 304.761;} if($in{h} > 432.506) {$in{h} = 432.506;} $size = " --page-width $in{w} --page-height $in{h}"; } else { ## END CUSTOM SIZE if($psize{$in{size}}{$in{or}}) { $size = $psize{$in{size}}{$in{or}}; } else { $error .= "Proper size has to be selected for scanning\n"; } } ## END PRE-SELECTED SIZE unless($resol{$in{resolution}}) { $error .= "Resolution has to be: 100 150 200 240 300 400 600 DPI\n"; } else { $scresolution=" --resolution $in{resolution}"; } if($error) {chomp $error; $error =~ s#\n#<br />\n - #g; print "Processing Error(s) found:<br />\n - $error"; } ## END ERROR my $scannumber=0; unless(-f '$homefolder/js.scan/count.txt') { $scannumber=1; } else { $scannumber = `cat $homefolder/js.scan/count.txt`; $scannumber++; } open(SCN,">$homefolder/js.scan/count.txt"); my $strreq = "scanimage$colstring$device$scnsrc$size$scresolution --format=tiff --batch=$homefolder/js.scan/scan$scannumber.%d.tif"; print "$strreq<br />\n"; `touch $homefolder/http/m/images/new.txt`; `$strreq`; exit(0); next - counter program. |
RE: Web GIU for Canon imageFORMULA DR-9080CPosted: Sunday, April 23, 2023 [17:36:21] - 4
Counter and display scanned images program: use strict; my $homefolder='/home/account_home'; our %in=(); eval {require '$homefolder/cgi-bin/cgi-lib.pl'}; unless($@) {&ReadParse;} print "Content-type: text/html\n\n"; unless($in{do}) {print "No imput"; my @files = glob("$homefolder/js.scan/*"); my $number=@files; if($in{do} eq 'count') { print "<a href=\"#\" onclick=\"chknumber('count');return false\">$number</a> <a href=\"/m/count.cgi?do=see\">see images</a>"; if(-f '$homefolder/http/m/images/new.txt') {unlink '$homefolder/http/m/images/new.txt'; foreach my $im (@files) { if($im =~ m/\.txt$/) {next;} my $nimg=$im; `convert -density 72 $im -resize x300 $nimg`; `convert -density 72 $im -resize x1400 $nimg`; } ## FOREACH END } ## END NEW FILES exit(0); } ## END COUNT my($top,$bottom) = gethtml($number); my $images=''; if($in{do} eq 'see') { foreach my $im (@files) {my $ims = $im; my $imsb = $ims; if(-f "$homefolder/http/m/images/$ims") { $ims =~ s#scan(\d+)\.(\d+)\.(.*)#$ $readshow{$1}{$2}="<img src=\"/m/images/$ims\" onclick=\"showimage('/m/images/$imsb');return false;\">\n"; } } ## FOREACH FILE END } ## END SEE foreach my $n (sort num keys (%readshow)) { foreach my $nm (sort num keys %{$readshow{$n}}) { print "$readshow{$n}{$nm}\n"; } } print $bottom; exit(0); sub num {$a <=> $b;} sub gethtml { my $number = shift; my $src = '<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Scanned images</title> <link href="/css/fonts.exo.css" rel="stylesheet"> <link href="/css/fonts.exo2.css" rel="stylesheet"> <link rel="profile" href="https://gmpg.org/xfn/11"> <meta name="theme-color" content="#ffffff"> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="/m/all.css" media="screen" /> <script> function showimage(im) { var div = document.createElement(\'div\'); var img = document.createElement(\'img\'); img.src = im; img.id = \'inlimg\'; div.className = \'hdimg\'; div.id = \'imrm\'; var scrollPos = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop; scrollPos = scrollPos + 20; div.onclick = function () { this.parentElement.removeChild(this); }; window.onkeyup = function (event) { if (event.keyCode == \'27\') { document.getElementById("imrm").remove(); } } div.appendChild(img); document.body.appendChild(div); document.body.style.height = \'auto\'; document.getElementById(\'imrm\').style.top = scrollPos + \'px\'; } </script> <style> #imrm {position:absolute;top:20px;left:20px;height:1250px;visibility:visible;z-index:999;} </style> </head> <body> <div id="content"> <h1>Scanned images '.$number.'</h1> <p><a href="/m/">Back to scanning</a></p> <div id="headimages">'; my $bottm = '</div> </div><!-- content--> </body> </html> '; return($src,$bottm); } ## END GET HTML Next - CSS file. |
RE: Web GIU for Canon imageFORMULA DR-9080CPosted: Sunday, April 23, 2023 [17:37:58] - 5
CSS file: margin: 0; padding: 0; background-color: #fff; color: #090909; font: 1em Exo, sans-serif, Corbel, Calibri, Helvetica, Arial } #content { margin: 0; padding: 0 2rem 2rem 2rem; text-align: center; } a { color: #ef5a00; text-decoration: none } a:hover { color: #ff6900; background-color: #d0d0d0 } a:visited { color: #d34c00 } h1 { font-size: 2em; color: #6792c5; } #headimages img { float: left; display: inline-block; margin-right: 2em; margin-top: 1em; } #forms { width: 80%; margin: 1rem 2rem; clear: both; display: block; overflow: auto; } #forms input[type=radio]{ opacity: 0; position: fixed; width: 0; text-align: center; } #forms label { display: block; background-color: #f1f0f2; padding: 10px 20px; font-family: sans-serif, Arial; font-size: 16px; border: 2px solid #f1f0f2; border-radius: 4px; width: 80px; text-align: center; margin-bottom: 5px; } #forms input[type="radio"]:checked +label { background: rgba(226,226,226,1); background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(226,226,226,1)), color-stop(50%, rgba(219,219,219,1)), color-stop(51%, rgba(209,209,209,1)), color-stop(100%, rgba(254,254,254,1))); background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); background: -o-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); background: linear-gradient(to bottom, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0 ); border-color: #828784; } input#color11:checked +label, input#color12:checked +label { background-color: #fbf9ff!important; border-color: #444!important; } input#color21:checked +label, input#color22:checked +label { background: rgba(239,197,202,1)!important; background: -moz-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%, rgba(186,39,55,1) 51%, rgba(241,142,153,1) 100%)!important; background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(239,197,202,1)), color-stop(50%, rgba(210,75,90,1)), color-stop(51%, rgba(186,39,55,1)), color-stop(100%, rgba(241,142,153,1)))!important; background: -webkit-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%, rgba(186,39,55,1) 51%, rgba(241,142,153,1) 100%)!important; background: -o-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%, rgba(186,39,55,1) 51%, rgba(241,142,153,1) 100%)!important; background: -ms-linear-gradient(top, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%, rgba(186,39,55,1) 51%, rgba(241,142,153,1) 100%)!important; background: linear-gradient(to bottom, rgba(239,197,202,1) 0%, rgba(210,75,90,1) 50%, rgba(186,39,55,1) 51%, rgba(241,142,153,1) 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99', GradientType=0 )!important; border-color: #444!important; color: #fff!important; } input#color31:checked +label, input#color32:checked +label { background: rgba(255,255,255,1)!important; background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%)!important; background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)))!important; background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%)!important; background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%)!important; background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%)!important; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%)!important; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 )!important; border-color: #444!important; color: #c1c1c2!important; } #forms input[type="radio"]:focus + label { border: 2px solid #444; } #forms h4 { font-weight: normal; font-style: normal; font-size: 1.3em; margin-top: 0; margin-bottom: 15px; text-align: left; } #forms #fsubm { margin-top: 2em; text-align: center; display: block; margin-bottom: 4em; } #forms #topsubm { float: right; display: inline-block; } .cl { min-height: 1em; clear: both; } @media only screen and (max-width:480px) { #head { height: 64px } #siteslogan { width: auto; display: inline; background: url(/images/hd.logo.sm.webp) no-repeat; z-index: 1; height: auto; min-height: 64px; min-width: 320px; position: absolute; top: 0; right: 0 } #tlnks { z-index: 5; display: inline; left: 10px!important } } .left { text-align: left; } #forms input[type=text]{ background-color: #f1f0f2; padding: 5px 10px; font-family: sans-serif, Arial; font-size: 1.5rem; border: 2px solid #5b585e; border-radius: 4px; min-width: 80px; text-align: center; margin-bottom: 5px; } .myButton { box-shadow: 0px 0px 0px 2px #9fb4f2; background: linear-gradient(to bottom, #7892c2 5%, #476e9e 100%); background-color: #7892c2; border-radius: 10px; border: 1px solid #4e6096; display: inline-block; cursor: pointer; color: #fff; font-family: Arial; font-size: 28px; font-weight: bold; padding: 12px 37px; text-decoration: none; text-shadow: 0px 1px 0px #283966; } .myButton:hover { background: linear-gradient(to bottom, #476e9e 5%, #7892c2 100%); background-color: #476e9e; color: #faf9fb; } .myButton:active { position: relative; top: 1px; } Pretty simple. |