decent progress on the analysis gui

diff --git a/user_interface/selection.css b/user_interface/selection.css
index dbd5f38a16a713010a6140daa58bde61179b7835..8fe6c2991cc7950d4a55db8a1859bfb455b9c448 100644 (file)
--- a/user_interface/selection.css
+++ b/user_interface/selection.css
@@ -20,24 +20,51 @@
   
   
 #myCanvas,#YDR-Frame {
-
-/*    float:right; */
-/*    position:relative; */
    position:absolute;
-   top: 100px;
-   left: 100px;
-   width: 3000px;
-   height: 300px;
-   border:1px solid #d3d3d3;
+   border:1px solid #FFFFFF;
+}
+
+
+#myCanvas,#YDR-Frame,#compound_canvas {
+   width: 1000px;
+   height: 200px;
+}
+#compound_canvas {
+  position:static;
+  height: 240px;
+}
+
+#canvas_controls {
+  position:relative;
+  
+  top: 210px;
+  width:980px;
+  left:10px;
 
 }
 
+
+.isBox {
+  
+   border:1px solid #d3d3d3;
+   margin:15px;
+   box-shadow: 6px 6px 5px #888888;
+  
+}
+
+/*#compound_canvas_container {
+  position:static;
+  height:320px;
+  width:800px;
+  overflow-x:scroll;
+}*/
+
 #controls {
 
-   position:absolute;
+   position:relative;
    padding:20px;
-   top: 500px;
-   left: 100px;
+/*    top: 400px; */
+/*    left: 60px; */
    width: 800px;
 /*    height: 300px; */
    border:1px solid #d3d3d3;
@@ -46,10 +73,10 @@
 
 #notepad {
 
-   position:fixed;
+   position:relative;
    padding:20px;
-   top: 500px;
-   left: 100px;
+/*    top: 500px; */
+/*    left: 100px; */
    width: 800px;
 /*    height: 300px; */
    border:1px solid #d3d3d3;

diff --git a/user_interface/selector.html b/user_interface/selector.html
index 04a09be75a982c102b51026b9d0af737d2d50591..8b0c1c3012d9c1311e7f46c44acf41b25813976c 100644 (file)
--- a/user_interface/selector.html
+++ b/user_interface/selector.html
@@ -21,42 +21,54 @@
   <h1>Coral Analysis</h1>
 <!--  <p id='pout' >text, text text, text</p>
   <p>Canvas:</p> -->
-  <div id='compound_canvas'>
-  <canvas id="myCanvas" width="3000" height="300">
-  Your browser does not support the HTML5 canvas tag.
-  </canvas>
-  
-  <div onmousedown="return false" id="YDR-Frame" class="frame">
-    <div id="selection" class="selectiondiv"></div></div>
-  </div>
+  <div id='compound_canvas' class='isBox' >
+    <canvas id="myCanvas" width="1000" height="200">
+    Your browser does not support the HTML5 canvas tag.
+    </canvas>
+    
+    <div onmousedown="return false" id="YDR-Frame" class="frame">
+      <div id="selection" class="selectiondiv"></div>
+    </div>
+    
+    <div id='canvas_controls'>
+      <div id="canvas_slider"></div>
+    </div> 
+    
+  </div> 
   
-  <div id='controls'>
+  <div id='controls' class='isBox' >
     <table width=400>
+
       <tr>
         <td>
           <input type='button' id='btn_clear_selection' value='clear selection'>
         </td>
       </tr>
+
       <tr>
         <td colspan=3>
           <hr>
         </td>
       </tr>
+
       <tr>
         <td colspan=3>
           contrast
         </td>
       </tr>
+
       <tr>
         <td colspan=3>
           <div id="slider-range"></div>
         </td>
       </tr>
+      
       <tr>
         <td colspan=3>
           <hr>
         </td>
       </tr>
+      
       <tr>
         <td>
         </td>
@@ -64,25 +76,34 @@
           counts
         </td>
         <td>
-          density
+          density (g/cm^2)
         </td>
       </tr>
+      
       <tr>
         <td>
           selection average
         </td>
         <td>
-          <input type='text' id='text_avg'>
+          <input type='text' id='text_avg' readonly>
+        </td>
+        <td>
+          <input type='text' id='text_avg_dnsty' readonly>
         </td>
       </tr>
+      
       <tr>
         <td>
           selection stdev
         </td>
         <td>
-          <input type='text' id='text_stdev'>
+          <input type='text' id='text_stdev' readonly>
+        </td>
+        <td>
+          <input type='text' id='text_stdev_dnsty' readonly>
         </td>
       </tr>
+      
       <tr>
         <td>
           label
@@ -91,20 +112,41 @@
           <input type='text' id='text_label'>
         </td>
       </tr>
+      
+      <tr>
+        <td>
+          thickness (mm)
+        </td>
+        <td>
+          <input type='text' id='text_thickness'>
+        </td>
+      </tr>
+      
+      <tr>
+        <td>
+          k0 (cm^2/g)
+        </td>
+        <td>
+          <input type='text' id='text_k0' value="0.396">
+        </td>
+      </tr>
+      
       <tr>
         <td>
           <input type='button' id='btn_append_data' value='append data'>
         </td>
+        <td>
+          <input type='button' id='btn_clear_data' value='clear data'>
+        </td>
       </tr>
+      
     </table>
-  
   </div>
   
-<!--  <div id='notepad'>
-  <TEXTAREA NAME="Address" id="textarea_notepad" ROWS=42 COLS=100 >
-  </TEXTAREA>
+  <div id='notepad' class='isBox' >
+  <TEXTAREA NAME="Address" id="textarea_notepad" ROWS=42 COLS=100 ></TEXTAREA>
   
-  </div>-->
+  </div>
   
   
   </body>

diff --git a/user_interface/selector.js b/user_interface/selector.js
index 7321c26acf7dfdb06826d315c3c654a244640874..6367e26ffb5061e88c37dab24f482daf0865899d 100644 (file)
--- a/user_interface/selector.js
+++ b/user_interface/selector.js
@@ -4,6 +4,8 @@ var scan;
 var contrast_min;
 var contrast_max;
 
+var canvas_offset = 0;
+
 var selection_color = [180,180,255];
 
 
@@ -19,7 +21,7 @@ $(document).ready(function(){
   contrast_min = 0;
   contrast_max = scan.meta.unshadowed_counts/scan.meta.unshadowed_count_time*scan.meta.time_per_pixel;
   
-  draw_scan();
+//   draw_scan();
 //   alert(false_color(30000,255,100,0));
   
   
@@ -43,24 +45,56 @@ $(document).ready(function(){
 //     " - " + $( "#slider-range" ).slider( "values", 1 ) );
 
   $("#btn_clear_selection").click(function(){
-    my_subset = {};
-    draw_scan();
-    calculate();
+    clear_selection();
   });
   
   
   $("#btn_append_data").click(function(){
-    $("#text_field").val(
-      $("#text_field").val()+"\n"+
+    $("#textarea_notepad").val(
+      $("#textarea_notepad").val()+
       $("#text_label").val()+"\t"+
-      $("#text_avg").val()+"\t"+
-      $("#text_stdev").val()+"\t"
+      $("#text_thickness").val()+"\t"+
+      $("#text_avg_dnsty").val()+"\t"+
+      $("#text_stdev_dnsty").val()+"\t"+
+      "\n"
     );
-    
   });
+  $("#btn_clear_data").click(function(){
+    clear_notepad();
+  });
+  
+  
+  $( "#canvas_slider" ).slider({
+    min: 0,
+    max: scan.meta.rows*pixel_size-document.getElementById("myCanvas").width,
+//     values: [ contrast_min, contrast_max ],
+    change: function( event, ui ) {
+      canvas_offset = Math.round(ui.value);
+      draw_scan();
+    }
+  });
+  
+  $('#text_thickness').change(function(){
+    calculate();
+  });
+  $('#text_k0').change(function(){
+    calculate();
+  });
+  
+  clear_selection();
+  clear_notepad();
   
 });
 
+function clear_selection(){
+  my_subset = {};
+  draw_scan();
+  calculate();
+}
+
+function clear_notepad(){
+  $("#textarea_notepad").val("#label\t#thickness\t#density\t#density_stdev\n");
+}
 
 function calculate(){
   var sel_data = [];
@@ -71,17 +105,41 @@ function calculate(){
     var j = pos[1];
     sel_data.push(scan.data[i][j]);
   }
-  $('#text_avg').val(mean(sel_data).toFixed(2));
-  $('#text_stdev').val(stdev(sel_data).toFixed(2));
   
+  var avg_counts = mean(sel_data);
+  var stdev_counts = stdev(sel_data);
+  
+  var thickness = $('#text_thickness').val()/10;
+  var k0 = $('#text_k0').val();
+  
+  var I = avg_counts/scan.meta.time_per_pixel;
+  var I0 = scan.meta.unshadowed_counts/scan.meta.unshadowed_count_time;
+  var dI = stdev_counts/scan.meta.time_per_pixel;
+  
+  var avg_density = density(k0,thickness,I,I0);
+  var stdev_density = density_err(k0,thickness,I,I0,dI);
   
+  $('#text_avg').val(avg_counts.toFixed(2));
+  $('#text_stdev').val(stdev_counts.toFixed(2));
+  $('#text_avg_dnsty').val(avg_density.toFixed(2));
+  $('#text_stdev_dnsty').val(stdev_density.toFixed(2));
+  
+  
+  
+}
+
+function density(k0,d,I,I0) {
+  return -1/(k0*d)*Math.log(I/I0);
+}
+function density_err(k0,d,I,I0,dI) {
+  return Math.abs(-1/(k0*d)*1/I*dI);
 }
 
 
 function selection_finished(x1,x2,y1,y2) {
 //   alert(x1.toString()+" "+x2.toString()+" "+y1.toString()+" "+y2.toString()+" ");
-  px1 = Math.floor(x1/pixel_size);
-  px2 = Math.floor(x2/pixel_size);
+  px1 = Math.floor((x1+canvas_offset)/pixel_size);
+  px2 = Math.floor((x2+canvas_offset)/pixel_size);
   py1 = Math.floor(y1/pixel_size);
   py2 = Math.floor(y2/pixel_size);
 //   alert(px1.toString()+" "+px2.toString()+" "+py1.toString()+" "+py2.toString()+" ");
@@ -100,8 +158,12 @@ function selection_finished(x1,x2,y1,y2) {
   
   
   for (var j = py1; j <= py2; j++){
-    for (var i = px1; i <= px2; i++){
-      my_subset[i.toString()+"-"+j.toString()] = 1;
+    if (j < scan.meta.cols){
+      for (var i = px1; i <= px2; i++){
+        if (i < scan.meta.rows ) {
+          my_subset[i.toString()+"-"+j.toString()] = 1;
+        }
+      }
     }
   }
   draw_scan();
@@ -114,6 +176,7 @@ function draw_scan() {
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   
+  ctx.clearRect(0, 0, c.width, c.height);
   
   for (var i = 0; i < scan.meta.rows; i++) {
     for (var j = 0; j < scan.meta.cols; j++) {
@@ -123,7 +186,7 @@ function draw_scan() {
       } else {
         ctx.fillStyle = false_color(value,255,255,255);
       }
-      ctx.fillRect(i*pixel_size, j*pixel_size, pixel_size, pixel_size);
+      ctx.fillRect(i*pixel_size - canvas_offset, j*pixel_size, pixel_size, pixel_size);
       
     }
       //Do something