From: Michael Wiebusch Date: Fri, 7 Aug 2015 13:17:04 +0000 (+0200) Subject: decent progress on the analysis gui X-Git-Url: https://jspc29.x-matter.uni-frankfurt.de/git/?a=commitdiff_plain;h=e1b520273a99d7bf0ee9b14b9913e372e29b390a;p=coral.git decent progress on the analysis gui --- diff --git a/user_interface/selection.css b/user_interface/selection.css index dbd5f38..8fe6c29 100644 --- 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 04a09be..8b0c1c3 100644 --- a/user_interface/selector.html +++ b/user_interface/selector.html @@ -21,42 +21,54 @@

Coral Analysis

-
- - Your browser does not support the HTML5 canvas tag. - - -
-
-
+
+ + Your browser does not support the HTML5 canvas tag. + + +
+
+
+ +
+
+
+ +
-
+
+ + + + + + @@ -64,25 +76,34 @@ counts + + + + + + + + + + + + + + + + + +
contrast
- density + density (g/cm^2)
selection average - + + +
selection stdev - + + +
label @@ -91,20 +112,41 @@
+ thickness (mm) + + +
+ k0 (cm^2/g) + + +
+ +
-
- +
diff --git a/user_interface/selector.js b/user_interface/selector.js index 7321c26..6367e26 100644 --- 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