| 1 |
|
|---|
| 2 | <html>
|
|---|
| 3 | <body>
|
|---|
| 4 | <!-- [ images list ] -->
|
|---|
| 5 | <div style="float:right; width:50%; border-left: solid 1px black">
|
|---|
| 6 | <div id="listdiv" align="center">
|
|---|
| 7 | <h5>Images to be analyzed:</h5>
|
|---|
| 8 | <select multiple size=10 id=imglist style="width:80%"></select>
|
|---|
| 9 | <br />
|
|---|
| 10 | <input type="button" id="evalbutton" value="Analyze" onclick="analyzeImages()" />
|
|---|
| 11 | </div>
|
|---|
| 12 | </div>
|
|---|
| 13 | <!-- [ images list ] -->
|
|---|
| 14 | <div style="width:50%">
|
|---|
| 15 | <div id="titleblock" align="center">
|
|---|
| 16 | <h2>Image Analyzer</h2>
|
|---|
| 17 | </div>
|
|---|
| 18 | <div id=outputdiv align=center>
|
|---|
| 19 | <h4>Status: <span id=status>Idle</span></h4>
|
|---|
| 20 | <h5>
|
|---|
| 21 | Latest Results:<br />
|
|---|
| 22 | Red: <span id=redval style="color:red">n/a</span><br />
|
|---|
| 23 | Green: <span id=greenval style="color:green">n/a</span><br />
|
|---|
| 24 | Blue: <span id=blueval style="color:blue">n/a</span><br />
|
|---|
| 25 | </h5>
|
|---|
| 26 | <h3>Click on images below to select for analysis</h3>
|
|---|
| 27 | </div>
|
|---|
| 28 | </div>
|
|---|
| 29 | <!-- [ sample images ] -->
|
|---|
| 30 | <div id=imagediv style="clear:both; text-align:center">
|
|---|
| 31 | <hr/>
|
|---|
| 32 | <img src="images/mtRainier.jpg" height=150px onclick='return addImage(this);' />
|
|---|
| 33 | <img src="images/bellaCoola.jpg" height=150px onclick='return addImage(this);'/>
|
|---|
| 34 | <img src="images/seaShell.jpg" height=150px onclick='return addImage(this);'/>
|
|---|
| 35 | <!-- [ sample images ] -->
|
|---|
| 36 | <img src="images/flower.jpg" height=150px onclick='return addImage(this);'/>
|
|---|
| 37 | <img src="images/trees.jpg" height=150px onclick='return addImage(this);'/>
|
|---|
| 38 | </div>
|
|---|
| 39 |
|
|---|
| 40 | </body>
|
|---|
| 41 | </html>
|
|---|
| 42 |
|
|---|
| 43 | <script type="text/javascript">
|
|---|
| 44 | var remaining = 0;
|
|---|
| 45 | var connected = false;
|
|---|
| 46 | //We use this function because connect statements resolve their target once, imediately
|
|---|
| 47 | //not at signal emission so they must be connected once the imageAnalyzer object has been added to the frame
|
|---|
| 48 | //! <!-- [ connect slots ] -->
|
|---|
| 49 | function connectSlots()
|
|---|
| 50 | {
|
|---|
| 51 | if ( !connected ) {
|
|---|
| 52 | connected = true;
|
|---|
| 53 | imageAnalyzer.finishedAnalysis.connect(this, finished);
|
|---|
| 54 | imageAnalyzer.updateProgress.connect(this, updateProg);
|
|---|
| 55 | }
|
|---|
| 56 | }
|
|---|
| 57 | //! <!-- [ connect slots ] -->
|
|---|
| 58 |
|
|---|
| 59 | function finished() {
|
|---|
| 60 | setStatus('Idle');
|
|---|
| 61 | setResults(imageAnalyzer.red.toFixed(2), imageAnalyzer.green.toFixed(2), imageAnalyzer.blue.toFixed(2));
|
|---|
| 62 | }
|
|---|
| 63 | //This will function as the recieving "slot" for the progress signal
|
|---|
| 64 | function updateProg(complete, max)
|
|---|
| 65 | {
|
|---|
| 66 | var oldRemaining = remaining;
|
|---|
| 67 | remaining = max - complete;
|
|---|
| 68 | pullList(oldRemaining - remaining);
|
|---|
| 69 | //Prevent results getting messed up if we don't get signals in order
|
|---|
| 70 | if( imageAnalyzer.busy ) {
|
|---|
| 71 | setStatus('Processing (' + complete + ' of ' + max + ' completed)');
|
|---|
| 72 | setResults('Calculating','Calculating','Calculating');
|
|---|
| 73 | }
|
|---|
| 74 | }
|
|---|
| 75 |
|
|---|
| 76 | //! <!-- [ analyzeImages ] -->
|
|---|
| 77 | function analyzeImages() {
|
|---|
| 78 | connectSlots();
|
|---|
| 79 | var imglist = document.getElementsByTagName('option');
|
|---|
| 80 | if (imglist.length > 0) {
|
|---|
| 81 | stringlist = [];
|
|---|
| 82 | for(var i=0; i<imglist.length; i++) {
|
|---|
| 83 | stringlist[i]=imglist[i].value;
|
|---|
| 84 | }
|
|---|
| 85 | if (!imageAnalyzer.busy) {
|
|---|
| 86 | remaining = stringlist.length;
|
|---|
| 87 | imageAnalyzer.startAnalysis(stringlist);
|
|---|
| 88 | } else {
|
|---|
| 89 | alert("Processing, please wait until finished.");
|
|---|
| 90 | }
|
|---|
| 91 | //! <!-- [ analyzeImages ] -->
|
|---|
| 92 | } else {
|
|---|
| 93 | alert('No images selected. Click on one or more images to select them for analysis.');
|
|---|
| 94 | }
|
|---|
| 95 | }
|
|---|
| 96 | function clearList() {
|
|---|
| 97 | var imglist = document.getElementById('imglist');
|
|---|
| 98 | while(imglist.length > 0) {
|
|---|
| 99 | imglist.removeChild(imglist.childNodes[0]);
|
|---|
| 100 | }
|
|---|
| 101 | }
|
|---|
| 102 | function pullList(count) {
|
|---|
| 103 | var imglist = document.getElementById('imglist');
|
|---|
| 104 | while(imglist.length > 0 && count > 0) {
|
|---|
| 105 | imglist.removeChild(imglist.childNodes[0]);
|
|---|
| 106 | count--;
|
|---|
| 107 | }
|
|---|
| 108 | }
|
|---|
| 109 | function setStatus(statusString) {
|
|---|
| 110 | document.getElementById('status').innerHTML = statusString;
|
|---|
| 111 | }
|
|---|
| 112 |
|
|---|
| 113 | function setResults(red, green, blue) {
|
|---|
| 114 | if (! isNaN(red) ) { red += " %"; }
|
|---|
| 115 | if (! isNaN(green) ) { green += " %"; }
|
|---|
| 116 | if (! isNaN(blue) ) { blue += " %"; }
|
|---|
| 117 | document.getElementById('redval').innerHTML = red;
|
|---|
| 118 | document.getElementById('greenval').innerHTML = green;
|
|---|
| 119 | document.getElementById('blueval').innerHTML = blue;
|
|---|
| 120 | }
|
|---|
| 121 | //! <!-- [ addImage ] -->
|
|---|
| 122 | function addImage(newimg) {
|
|---|
| 123 | var imglist = document.getElementById('imglist');
|
|---|
| 124 | var curChildren = imglist.childNodes;
|
|---|
| 125 | var newline = document.createElement('option');
|
|---|
| 126 | newline.innerHTML = newimg.src.substring(newimg.src.lastIndexOf('/')+1);
|
|---|
| 127 | newline.value = newimg.src;
|
|---|
| 128 | imglist.appendChild(newline);
|
|---|
| 129 | }
|
|---|
| 130 | //! <!-- [ addImage ] -->
|
|---|
| 131 | </script>
|
|---|
| 132 |
|
|---|
| 133 |
|
|---|
