knut/album
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more edit changes with face detection

Browse source
This commit is contained in:
Knut Forkalsrud 2011-03-13 23:40:29 -07:00
parent 956f2d3b45
commit e6bad87622
1 changed files with 79 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/main/webapp/WEB-INF/velocity/edit.vm
View file

@ -6,12 +6,19 @@
<meta name="viewport" content="width = 600" /> <meta name="viewport" content="width = 600" />
<title>$entry.name</title> <title>$entry.name</title>
<style type="text/css" src="${assets}/jquery.ui.selectable.css"></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="${assets}/jeditable/jquery.autogrow.js"></script> <script type="text/javascript" src="${assets}/jeditable/jquery.autogrow.js"></script>
<script type="text/javascript" src="${assets}/jeditable/jquery.jeditable.js"></script> <script type="text/javascript" src="${assets}/jeditable/jquery.jeditable.js"></script>
<script type="text/javascript" src="${assets}/jeditable/jquery.jeditable.autogrow.js"></script> <script type="text/javascript" src="${assets}/jeditable/jquery.jeditable.autogrow.js"></script>
<script type="text/javascript" src="${assets}/jquery.ui.core.js"></script>
<script type="text/javascript" src="${assets}/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${assets}/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="${assets}/jquery.ui.selectable.js"></script>
<style type="text/css"> <style type="text/css">
body { body {
font-size: 11px; font-size: 11px;
@ -44,6 +51,16 @@
margin: 10px; margin: 10px;
} }
</style> </style>
<style type="text/css">
#mylist .ui-selecting {
background: silver;
}
#mylist .ui-selected {
background: gray;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
@ -67,8 +84,52 @@ $(document).ready(function() {
}, },
onblur : "ignore" onblur : "ignore"
}); });
$("#mylist").selectable();
}) })
</script> </script>
<script type="text/javascript" src="${assets}/ccv/ccv.js"></script>
<script type="text/javascript" src="${assets}/ccv/face.js"></script>
<script type="text/javascript">
function resizeCanvas(image, canvas) {
document.body.appendChild(image);
canvas.width = image.offsetWidth;
canvas.style.width = image.offsetWidth.toString() + "px";
canvas.height = image.offsetHeight;
canvas.style.height = image.offsetHeight.toString() + "px";
document.body.removeChild(image);
}
function detect(url) {
var image = new Image();
var canvas = document.getElementById("output");
var ctx = canvas.getContext("2d");
image.onload = function () {
/* call main detect_objects function */
var elapsed_time = (new Date()).getTime();
var comp = ccv.detect_objects({ "canvas" : ccv.grayscale(ccv.pre(image)),
"cascade" : cascade,
"interval" : 5,
"min_neighbors" : 1 });
document.getElementById("elapsed_time").innerHTML = ((new Date()).getTime() - elapsed_time).toString() + "ms";
resizeCanvas(image, canvas);
ctx.drawImage(image, 0, 0);
ctx.lineWidth = 3;
ctx.strokeStyle = "#f00";
/* draw detected area */
for (var i = 0; i < comp.length; i++)
ctx.strokeRect(comp[i].x, comp[i].y, comp[i].width, comp[i].height);
}
image.src = url; // "http://forkalsrud.org:8080/photo/album/photo/2010-07-Misc/P1000462.JPG?size=800";
}
</script>
</head> </head>
<body> <body>
<h1>$entry.name</h1> <h1>$entry.name</h1>
@ -77,5 +138,23 @@ $(document).ready(function() {
#set($thpath = $mapper.map(${entry.thumbnail.getPath()})) #set($thpath = $mapper.map(${entry.thumbnail.getPath()}))
<div class="imgborder"><img class="picture" src="${base}${thpath}?size=${thmb}" border="0" width="${dim.width}" height="${dim.height}"/></a></div> <div class="imgborder"><img class="picture" src="${base}${thpath}?size=${thmb}" border="0" width="${dim.width}" height="${dim.height}"/></a></div>
<p class="caption">$!entry.caption</p> <p class="caption">$!entry.caption</p>
<hr/>
<ul id="mylist">
<li>hey</li>
<li>he3</li>
<li>he4</li>
<li>he5</li>
</ul>
<input type="button" value="append" onclick="$('#mylist').append('<li>he5</li>');"/>
<hr/>
<input style="margin-left:16px" type="button" value="Detect" onclick="detect('${base}${thpath}?size=${thmb}')" />
<br/>
<div id="elapsed_time" style="margin-top:20px"></div>
<div style="margin-top:20px"><canvas id="output"></canvas></div>
</body> </body>
</html> </html>