mightyscape-1.2/extensions/fablabchemnitz/imagetracerjs/imagetracerjs-master/imagetracer_test_automation.html

334 lines
12 KiB
HTML

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>imagetracer.js test automation</title>
<style>
.imgcontainer{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQImWPQ1tb+r62t/d/f3/+/v7//fwYMARgDJoEhAACRARthAfQS8AAAAABJRU5ErkJggg==) repeat;
border: solid 1px cyan;
}
table{ border: solid 1px gray; border-collapse:collapse; }
td{ border: solid 1px gray; vertical-align:top; }
th{ border: solid 1px gray; }
</style>
<script src="imagetracer_v1.2.6.js"></script>
<script>
var queue;
var stats = [], tt, rt;
var timeoutid = 0, timeoutwait = 500, drawmode = false, rowid = 1, repeatnum = 1, totaltime;
function log(msg){ console.log(msg); }
function startprocess(){
if(!timeoutid){
log('starting');
var filenames = [];
// Drawmode
if(document.getElementById('cbox0').checked){ drawmode = true; }else{ drawmode = false; }
// Selected images
for(var i=1; i<17; i++){ if(document.getElementById('icb'+i).checked){ filenames.push("testimages/"+i+".png"); } }
// Repeats
repeatnum = 1;
try{ repeatnum = parseInt(email = document.getElementById('repeatinput').value); }catch(e){log(e);}
// Options
var optionses = [], ks = Object.keys(ImageTracer.optionpresets);
for(var i=0; i<ks.length; i++){
if(document.getElementById('ocb'+i).checked){ optionses.push(ImageTracer.optionpresets[ks[i]]); }
}
/*if(document.getElementById('ocb1').checked){ optionses.push({}); }
if(document.getElementById('ocb2').checked){ optionses.push({ blurradius:2, ltres:0.1, numberofcolors:64 }); }
if(document.getElementById('ocb3').checked){ optionses.push({ strokewidth:4, blurradius:5, roundcoords:0, desc:false, scale:4, }); }
*/
if(document.getElementById('ocbx').checked){
try{
optionses.push( JSON.parse( document.getElementById('custom1input').value ) );
}catch(e){ log(e); }
}
if(document.getElementById('ocby').checked){
try{
optionses.push( JSON.parse( document.getElementById('custom2input').value ) );
}catch(e){ log(e); }
}
// Queue
queue = [];
for(var k=0; k<repeatnum; k++){
for(var i=0; i<filenames.length; i++){
for(var j=0; j<optionses.length; j++){
queue.push([filenames[i],optionses[j]]);
}
}
}
// Processing
totaltime = Date.now();
processqueue();
}
}// End of startprocess()
function processqueue(){
var item = queue.shift();
if(item){
log('file '+item[0]);
ImageTracer.loadImage(item[0],
function(canvas){
// Start tracing timer
tt = Date.now();
var tracedata = ImageTracer.imagedataToTracedata( ImageTracer.getImgdata(canvas), item[1] );
// Stop tracing timer
tt = Date.now() - tt;
// Start rendering timer
rt = Date.now();
// Render
var svgstr = ImageTracer.getsvgstring(tracedata, item[1]);
// Stop rendering timer
rt = Date.now() - rt;
// Counting paths
var pcont = 0;
for(k in tracedata.layers) {
if(!tracedata.layers.hasOwnProperty(k)){ continue; }
pcont += tracedata.layers[k].length;
}
////////////////
// Draw SVG
if(drawmode){
document.getElementById('svgcontainer').innerHTML = '';
ImageTracer.appendSVGString(svgstr,'svgcontainer');
// Draw diff
// draw original
var oc = document.getElementById('originalcanvas'); oc.innerHTML = '';
oc.width = canvas.width;
oc.height = canvas.height;
var ctx = oc.getContext('2d');
var oimgd = ImageTracer.getImgdata(canvas);
ctx.putImageData(oimgd,0,0);
// draw new
backtopng(svgstr,
function(imgd){
// draw diff
var dc = document.getElementById('diffcanvas'); dc.innerHTML = '';
dc.width = imgd.width;
dc.height = imgd.height;
var dctx = dc.getContext('2d');
var idx = 0, d = 0;
var rgbadiff=0, pixeldiff=0, thisdiff=0;
// Calculating RGBA diff
var dimgd = dctx.createImageData(imgd.width,imgd.height);
for(var j=0; j<imgd.height; j++){
for(var i=0; i<imgd.width; i++){
idx = (j*imgd.width + i) * 4;
dimgd.data[idx ] = Math.abs( oimgd.data[idx ] - imgd.data[idx ] );
dimgd.data[idx+1] = Math.abs( oimgd.data[idx+1] - imgd.data[idx+1] );
dimgd.data[idx+2] = Math.abs( oimgd.data[idx+2] - imgd.data[idx+2] );
dimgd.data[idx+3] = Math.abs( oimgd.data[idx+3] - imgd.data[idx+3] );
thisdiff = dimgd.data[idx ] + dimgd.data[idx+1] + dimgd.data[idx+2] + dimgd.data[idx+3];
if(thisdiff === 0 ){ dimgd.data[idx+3] = 0; }else{ dimgd.data[idx+3] = 255; pixeldiff++; }
rgbadiff += thisdiff;
}
}
dctx.putImageData( dimgd, 0, 0 );
// Registerstats
registerstats(
item[0],
tracedata.width,
tracedata.height,
(tracedata.width*tracedata.height),
svgstr.length,
tt,
rt,
pcont,
rgbadiff / ( tracedata.width * tracedata.height * 4 ),
Math.floor(pixeldiff*100 / ( tracedata.width * tracedata.height )),
JSON.stringify(item[1])
);
// Next item
timeoutid = setTimeout( processqueue, timeoutwait );
}
);
}else{// No drawmode
// Registerstats
registerstats(
item[0],
tracedata.width,
tracedata.height,
(tracedata.width*tracedata.height),
svgstr.length,
tt,
rt,
pcont,
'n/a',
'n/a',
JSON.stringify(item[1])
);
// Next item
timeoutid = setTimeout( processqueue, timeoutwait );
}// End of drawmode check
}// End of loadImage() callback
);// End of loadImage()
}else{// No more images to process
stopprocessing();
//document.getElementById('logdiv').innerHTML += JSON.stringify(stats);
}// End of item check
}// End of processqueue()
function stopprocessing(){
clearTimeout(timeoutid); timeoutid = 0;
totaltime = Date.now() - totaltime;
alert('Time elapsed: '+totaltime+' ms.');
}
function registerstats(filename,w,h,area,svglength,tracetime,rendertime,pathcnt,rgbadiff,pixeldiff,options){
var tableref = document.getElementById('logtable');
var newrow = tableref.insertRow(-1);
newrow.innerHTML =
'<td>'+rowid+'</td>'+
'<td>'+filename+'</td>'+
'<td>'+w+'</td>'+
'<td>'+h+'</td>'+
'<td>'+area+'</td>'+
'<td>'+svglength+'</td>'+
'<td>'+tracetime+'</td>'+
'<td>'+rendertime+'</td>'+
'<td>'+pathcnt+'</td>'+
'<td>'+rgbadiff+'</td>'+
'<td>'+pixeldiff+'</td>'+
'<td>'+options+'</td>';
rowid++;
}
function backtopng(svgstr,callback){
var nc = document.getElementById('newcanvas'); nc.innerHTML = '';
var img = document.createElement('img');
img.onload = function(){
nc.width=img.width;
nc.height=img.height;
var ctx = nc.getContext('2d');
ctx.drawImage( img, 0, 0 );
callback(ImageTracer.getImgdata(nc));
};
img.setAttribute('src','data:image/svg+xml;base64,'+btoa(svgstr));
}
function onload_init(){
var k = Object.keys(ImageTracer.optionpresets), s='';
for(var i=0; i<k.length; i++){
s += '<label><input type="checkbox" id="ocb'+i+'" value="1" '+(i<6?'checked="true"':'')+' ><b>'+k[i]+'</b> : '+JSON.stringify(ImageTracer.optionpresets[k[i]])+'</label><br/>';
}
document.getElementById('ocbcontainer').innerHTML = s;
}
</script>
</head>
<body style="background-color:rgb(32,32,32);color:rgb(255,255,255);font-family:monospace;" onload="onload_init()" >
<noscript style="background-color:rgb(255,0,0);color:rgb(255,255,255);font-size: 250%;">Please enable JavaScript!</noscript>
<form id="testcontroller">
<h1>Test images</h1>
<table id="itable">
<tbody>
<tr>
<td><label><input type="checkbox" id="icb1" value="1" checked="true">1.png</label><br><img src="testimages/1.png"></td>
<td><label><input type="checkbox" id="icb2" value="1" checked="true" >2.png</label><br><img src="testimages/2.png"></td>
<td><label><input type="checkbox" id="icb3" value="1" checked="true" >3.png</label><br><img src="testimages/3.png"></td>
<td><label><input type="checkbox" id="icb4" value="1" checked="true" >4.png</label><br><img src="testimages/4.png"></td>
</tr>
<tr>
<td><label><input type="checkbox" id="icb5" value="1" checked="true" >5.png</label><br><img src="testimages/5.png"></td>
<td><label><input type="checkbox" id="icb6" value="1" checked="true" >6.png</label><br><img src="testimages/6.png"></td>
<td><label><input type="checkbox" id="icb7" value="1" checked="true" >7.png</label><br><img src="testimages/7.png"></td>
<td><label><input type="checkbox" id="icb8" value="1" checked="true" >8.png</label><br><img src="testimages/8.png"></td>
</tr>
<tr>
<td><label><input type="checkbox" id="icb9" value="1" checked="true" >9.png</label><br><img src="testimages/9.png"></td>
<td><label><input type="checkbox" id="icb10" value="1" checked="true" >10.png</label><br><img src="testimages/10.png"></td>
<td><label><input type="checkbox" id="icb11" value="1" checked="true" >11.png</label><br><img src="testimages/11.png"></td>
<td><label><input type="checkbox" id="icb12" value="1" checked="true" >12.png</label><br><img src="testimages/12.png"></td>
</tr>
<tr>
<td><label><input type="checkbox" id="icb13" value="1" checked="true" >13.png</label><br><img src="testimages/13.png"></td>
<td><label><input type="checkbox" id="icb14" value="1" checked="true" >14.png</label><br><img src="testimages/14.png"></td>
<td><label><input type="checkbox" id="icb15" value="1" checked="true" >15.png</label><br><img src="testimages/15.png"></td>
<td><label><input type="checkbox" id="icb16" value="1" checked="true" >16.png</label><br><img src="testimages/16.png"></td>
</tr>
</tbody>
</table>
<h1>Settings</h1>
<label><input type="checkbox" id="cbox0" value="1" checked="true">Draw SVG</label><br>
<div id="ocbcontainer"></div>
<label><input type="checkbox" id="ocbx" value="1" >Custom Options 1:</label><input type="text" id="custom1input" value="" style="width:40em" ><br>
<label><input type="checkbox" id="ocby" value="1" >Custom Options 2:</label><input type="text" id="custom2input" value="" style="width:40em" ><br>
Example Custom Options:<br>{"ltres":1,"qtres":1,"pathomit":8,"colorsampling":true,"numberofcolors":16,"mincolorratio":0.02,"colorquantcycles":3,"scale":1,"simplifytolerance":0,"roundcoords":1,"lcpr":0,"qcpr":0,"desc":true,"viewbox":false,"blurradius":0,"blurdelta":20}<br>
<label><input type="text" id="repeatinput" value="1">Repeats</label><br>
<button id="startbutton" type="button" onclick="startprocess()" >START</button>
<button id="stopbutton" type="button" onclick="stopprocessing()" >STOP</button>
</form>
<h1>Result (if Draw SVG is active)</h1>
<table id="itable">
<thead>
<tr><th>Traced SVG</th><th>Original raster</th><th>SVG rendered as raster</th><th>Difference</th></tr>
</thead>
<tbody>
<tr>
<td><div id="svgcontainer" class="imgcontainer"></div></td>
<td><canvas id="originalcanvas" class="imgcontainer"></canvas></td>
<td><canvas id="newcanvas" class="imgcontainer"></canvas></td>
<td><canvas id="diffcanvas" class="imgcontainer"></canvas></td>
</tr>
</tbody>
</table>
<h1>Measurements</h1>
<div id="logdiv">
<table id="logtable">
<thead>
<tr>
<th>RowID</th>
<th>Filename</th>
<th>width (pixels)</th>
<th>height (pixels)</th>
<th>area (pixels)</th>
<th>SVG string length (bytes)</th>
<th>Tracing time (ms)</th>
<th>Rendering time (ms)</th>
<th>Nr. of paths</th>
<th>RGBA difference (cummulative RGBA difference / (area*4))</th>
<th>Different pixels (%)</th>
<th>Options</th>
</tr>
</thead>
<tbody id="logtbody">
</tbody>
</table>
</div>
</body></html>