134 lines
4.8 KiB
HTML
134 lines
4.8 KiB
HTML
|
|
<html>
|
|
<body>
|
|
<!-- [ images list ] -->
|
|
<div style="float:right; width:50%; border-left: solid 1px black">
|
|
<div id="listdiv" align="center">
|
|
<h5>Images to be analyzed:</h5>
|
|
<select multiple size=10 id=imglist style="width:80%"></select>
|
|
<br />
|
|
<input type="button" id="evalbutton" value="Analyze" onclick="analyzeImages()" />
|
|
</div>
|
|
</div>
|
|
<!-- [ images list ] -->
|
|
<div style="width:50%">
|
|
<div id="titleblock" align="center">
|
|
<h2>Image Analyzer</h2>
|
|
</div>
|
|
<div id=outputdiv align=center>
|
|
<h4>Status: <span id=status>Idle</span></h4>
|
|
<h5>
|
|
Latest Results:<br />
|
|
Red: <span id=redval style="color:red">n/a</span><br />
|
|
Green: <span id=greenval style="color:green">n/a</span><br />
|
|
Blue: <span id=blueval style="color:blue">n/a</span><br />
|
|
</h5>
|
|
<h3>Click on images below to select for analysis</h3>
|
|
</div>
|
|
</div>
|
|
<!-- [ sample images ] -->
|
|
<div id=imagediv style="clear:both; text-align:center">
|
|
<hr/>
|
|
<img src="images/mtRainier.jpg" height=150px onclick='return addImage(this);' />
|
|
<img src="images/bellaCoola.jpg" height=150px onclick='return addImage(this);'/>
|
|
<img src="images/seaShell.jpg" height=150px onclick='return addImage(this);'/>
|
|
<!-- [ sample images ] -->
|
|
<img src="images/flower.jpg" height=150px onclick='return addImage(this);'/>
|
|
<img src="images/trees.jpg" height=150px onclick='return addImage(this);'/>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
<script type="text/javascript">
|
|
var remaining = 0;
|
|
var connected = false;
|
|
//We use this function because connect statements resolve their target once, imediately
|
|
//not at signal emission so they must be connected once the imageAnalyzer object has been added to the frame
|
|
//! <!-- [ connect slots ] -->
|
|
function connectSlots()
|
|
{
|
|
if ( !connected ) {
|
|
connected = true;
|
|
imageAnalyzer.finishedAnalysis.connect(this, finished);
|
|
imageAnalyzer.updateProgress.connect(this, updateProg);
|
|
}
|
|
}
|
|
//! <!-- [ connect slots ] -->
|
|
|
|
function finished() {
|
|
setStatus('Idle');
|
|
setResults(imageAnalyzer.red.toFixed(2), imageAnalyzer.green.toFixed(2), imageAnalyzer.blue.toFixed(2));
|
|
}
|
|
//This will function as the recieving "slot" for the progress signal
|
|
function updateProg(complete, max)
|
|
{
|
|
var oldRemaining = remaining;
|
|
remaining = max - complete;
|
|
pullList(oldRemaining - remaining);
|
|
//Prevent results getting messed up if we don't get signals in order
|
|
if( imageAnalyzer.busy ) {
|
|
setStatus('Processing (' + complete + ' of ' + max + ' completed)');
|
|
setResults('Calculating','Calculating','Calculating');
|
|
}
|
|
}
|
|
|
|
//! <!-- [ analyzeImages ] -->
|
|
function analyzeImages() {
|
|
connectSlots();
|
|
var imglist = document.getElementsByTagName('option');
|
|
if (imglist.length > 0) {
|
|
stringlist = [];
|
|
for(var i=0; i<imglist.length; i++) {
|
|
stringlist[i]=imglist[i].value;
|
|
}
|
|
if (!imageAnalyzer.busy) {
|
|
remaining = stringlist.length;
|
|
imageAnalyzer.startAnalysis(stringlist);
|
|
} else {
|
|
alert("Processing, please wait until finished.");
|
|
}
|
|
//! <!-- [ analyzeImages ] -->
|
|
} else {
|
|
alert('No images selected. Click on one or more images to select them for analysis.');
|
|
}
|
|
}
|
|
function clearList() {
|
|
var imglist = document.getElementById('imglist');
|
|
while(imglist.length > 0) {
|
|
imglist.removeChild(imglist.childNodes[0]);
|
|
}
|
|
}
|
|
function pullList(count) {
|
|
var imglist = document.getElementById('imglist');
|
|
while(imglist.length > 0 && count > 0) {
|
|
imglist.removeChild(imglist.childNodes[0]);
|
|
count--;
|
|
}
|
|
}
|
|
function setStatus(statusString) {
|
|
document.getElementById('status').innerHTML = statusString;
|
|
}
|
|
|
|
function setResults(red, green, blue) {
|
|
if (! isNaN(red) ) { red += " %"; }
|
|
if (! isNaN(green) ) { green += " %"; }
|
|
if (! isNaN(blue) ) { blue += " %"; }
|
|
document.getElementById('redval').innerHTML = red;
|
|
document.getElementById('greenval').innerHTML = green;
|
|
document.getElementById('blueval').innerHTML = blue;
|
|
}
|
|
//! <!-- [ addImage ] -->
|
|
function addImage(newimg) {
|
|
var imglist = document.getElementById('imglist');
|
|
var curChildren = imglist.childNodes;
|
|
var newline = document.createElement('option');
|
|
newline.innerHTML = newimg.src.substring(newimg.src.lastIndexOf('/')+1);
|
|
newline.value = newimg.src;
|
|
imglist.appendChild(newline);
|
|
}
|
|
//! <!-- [ addImage ] -->
|
|
</script>
|
|
|
|
|