From: Michael Wiebusch Date: Thu, 6 Aug 2015 15:56:33 +0000 (+0200) Subject: added analylis help selector.html X-Git-Url: https://jspc29.x-matter.uni-frankfurt.de/git/?a=commitdiff_plain;h=ed6d78ea11353f046975d9a637bd48efc91c01a2;p=coral.git added analylis help selector.html --- diff --git a/user_interface/coral_scanner.pm b/user_interface/coral_scanner.pm index feaa478..b3ef245 100644 --- a/user_interface/coral_scanner.pm +++ b/user_interface/coral_scanner.pm @@ -302,6 +302,11 @@ sub scan_sample { $self->{current_scan}->{meta}->{scan_name} = $options{scan_name} if defined($options{scan_name}); $self->{current_scan}->{meta}->{scan_desc} = $options{scan_desc} if defined($options{scan_desc}); $self->{current_scan}->{data} = []; + $self->clear_log(); + print ">>> initializing new scan\n\n"; + print " scan name: ".$options{scan_name}."\n"; + print " scan description: ".$options{scan_desc}."\n"; + print ">>> homing table\n\n"; $tc->home(); @@ -496,7 +501,12 @@ sub scan_status { sub last_scan { my $self = shift; - return $self->{scan_shm}->readShm(); + my %options = @_; + if ($options{json}) { + return encode_json $self->{scan_shm}->readShm(); + } else { + return $self->{scan_shm}->readShm(); + } } sub clear_log { diff --git a/user_interface/selection.css b/user_interface/selection.css new file mode 100644 index 0000000..a60933f --- /dev/null +++ b/user_interface/selection.css @@ -0,0 +1,45 @@ + .frame{ +/* background:#cacaca; */ + width:400px; + height:400px; + margin:0px; + padding:0px; + border: 1px solid black; +/* background-image: url(http://www.abload.de/img/gypsygardenbypixelsice4gah.png); */ + } + + .selectiondiv{ + border:2px solid white; + background:#1B94E0; + opacity:0.4; + filter:alpha(opacity=40); + margin:0px; + padding:0px; + display:none; + } + + +#myCanvas,#YDR-Frame { + +/* float:right; */ +/* position:relative; */ + position:fixed; + top: 100px; + left: 100px; + width: 3000px; + height: 300px; + border:1px solid #d3d3d3; + +} + +#controls { + + position:fixed; + top: 500px; + left: 100px; + width: 800px; + height: 300px; + border:1px solid #d3d3d3; + +} + diff --git a/user_interface/selection.js b/user_interface/selection.js new file mode 100644 index 0000000..68fb751 --- /dev/null +++ b/user_interface/selection.js @@ -0,0 +1,94 @@ + + +// Click coordinates +var x1, x2, y1, y2; + +//Variable indicates wether a mousedown event within your selection happend or not +var selection = false; + +// Global mouse button variables +var gMOUSEUP = false; +var gMOUSEDOWN = false; + + +function init_selection(){ + +// Global Events if left mousebutton is pressed or nor (usability fix) +$(document).mouseup(function() { + gMOUSEUP = true; + gMOUSEDOWN = false; +}); +$(document).mousedown(function() { + gMOUSEUP = false; + gMOUSEDOWN = true; +}); + +// Selection frame (playground :D) +$("#YDR-Frame").mousedown(function(e) { + selection = true; + // store mouseX and mouseY + x1 = e.pageX - this.offsetLeft; + y1 = e.pageY - this.offsetTop; +}); + +// If selection is true (mousedown on selection frame) the mousemove +// event will draw the selection div +$('#YDR-Frame').mousemove(function(e) { + if (selection) { + // Store current mouseposition + x2 = e.pageX - this.offsetLeft; + y2 = e.pageY - this.offsetTop; + + // Prevent the selection div to get outside of your frame + (x2 < 0) ? selection = false : ($(this).width() < x2) ? selection = false : (y2 < 0) ? selection = false : ($(this).height() < y2) ? selection = false : selection = true;; + + // If the mouse is inside your frame resize the selection div + if (selection) { + // Calculate the div selection rectancle for positive and negative values + var TOP = (y1 < y2) ? y1 : y2; + var LEFT = (x1 < x2) ? x1 : x2; + var WIDTH = (x1 < x2) ? x2 - x1 : x1 - x2; + var HEIGHT = (y1 < y2) ? y2 - y1 : y1 - y2; + + // Use CSS to place your selection div + $("#selection").css({ + position: 'relative', + zIndex: 5000, + left: LEFT, + top: TOP, + width: WIDTH, + height: HEIGHT + }); + $("#selection").show(); + + // Info output + $('#status2').html('( x1 : ' + x1 + ' ) ( x2 : ' + x2 + ' ) ( y1 : ' + y1 + ' ) ( y2 : ' + y2 + ' ) '); + } + } else { + $("#selection").hide(); + } +}); +// Selection complete, hide the selection div (or fade it out) +$('#YDR-Frame').mouseup(function() { + selection = false; + $("#selection").hide(); + selection_finished(x1,x2,y1,y2); +}); +// Usability fix. If mouse leaves the selection and enters the selection frame again with mousedown +$("#YDR-Frame").mouseenter(function() { + (gMOUSEDOWN) ? selection = true : selection = false; +}); +// Usability fix. If mouse leaves the selection and enters the selection div again with mousedown +$("#selection").mouseenter(function() { + (gMOUSEDOWN) ? selection = true : selection = false; +}); +// Set selection to false, to prevent further selection outside of your selection frame +$('#YDR-Frame').mouseleave(function() { + selection = false; +}); + + + +} + + diff --git a/user_interface/selector.html b/user_interface/selector.html new file mode 100644 index 0000000..2463a82 --- /dev/null +++ b/user_interface/selector.html @@ -0,0 +1,84 @@ + + + + My website + + + + + + + + + + + + + + +

A Heading

+

text, text text, text

+

Canvas:

+ + + Your browser does not support the HTML5 canvas tag. + + +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + +
+
+
+ + counts + + density +
+ +
+ selection average + + +
+ selection stdev + + +
+ +
+ + + + + + + + + + + diff --git a/user_interface/selector.js b/user_interface/selector.js new file mode 100644 index 0000000..2edd569 --- /dev/null +++ b/user_interface/selector.js @@ -0,0 +1,169 @@ + + +var scan; +var contrast_min; +var contrast_max; + +var selection_color = [180,180,255]; + + +var my_subset = {}; + +var pixel_size = 10; + +$(document).ready(function(){ + scan = get_scan_json(); + $('#pout').html(scan.meta.scan_name); + + + contrast_min = 0; + contrast_max = scan.meta.unshadowed_counts/scan.meta.unshadowed_count_time*scan.meta.time_per_pixel; + + draw_scan(); +// alert(false_color(30000,255,100,0)); + + + $( "#slider-range" ).slider({ + range: true, + min: contrast_min, + max: contrast_max, + values: [ contrast_min, contrast_max ], + change: function( event, ui ) { +// $( "#amount" ).html( ui.values[ 0 ] + " - " + ui.values[ 1 ] ); + contrast_min = ui.values[ 0 ]; + contrast_max = ui.values[ 1 ]; + draw_scan(); + } + }); + + init_selection(); + + +// $( "#amount" ).html( $( "#slider-range" ).slider( "values", 0 ) + +// " - " + $( "#slider-range" ).slider( "values", 1 ) ); + + $("#btn_clear_selection").click(function(){ + my_subset = {}; + draw_scan(); + calculate(); + }); + +}); + + +function calculate(){ + var sel_data = []; + + for (x in my_subset) { + var pos = x.split("-"); + var i = pos[0]; + 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)); + + +} + + +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); + py1 = Math.floor(y1/pixel_size); + py2 = Math.floor(y2/pixel_size); +// alert(px1.toString()+" "+px2.toString()+" "+py1.toString()+" "+py2.toString()+" "); + + var temp; + if (px1 > px2) { + temp = px1; + px1 = px2; + px2 = temp; + } + if (py1 > py2) { + temp = py1; + py1 = py2; + py2 = temp; + } + + + for (var j = py1; j <= py2; j++){ + for (var i = px1; i <= px2; i++){ + my_subset[i.toString()+"-"+j.toString()] = 1; + } + } + draw_scan(); + calculate(); +} + + + +function draw_scan() { + var c = document.getElementById("myCanvas"); + var ctx = c.getContext("2d"); + + + for (var i = 0; i < scan.meta.rows; i++) { + for (var j = 0; j < scan.meta.cols; j++) { + var value = scan.data[i][j]; + if (my_subset[i.toString()+"-"+j.toString()] == 1) { + ctx.fillStyle = false_color(value,selection_color[0],selection_color[1],selection_color[2]); + } else { + ctx.fillStyle = false_color(value,255,255,255); + } + ctx.fillRect(i*pixel_size, j*pixel_size, pixel_size, pixel_size); + + } + //Do something + } + + + +} + +function false_color(value,r,g,b) { + var ratio = (value - contrast_min)/(contrast_max-contrast_min); + ratio = Math.max(ratio,0); + ratio = Math.min(ratio,1); + var ro = Math.round(ratio*r).toString(); + var go = Math.round(ratio*g).toString(); + var bo = Math.round(ratio*b).toString(); + return "rgb("+ro+","+go+","+bo+")"; +} + + +function get_scan_json(){ + var return_obj; + $.ajax({ + url: "coral_scanner.pl", + cache: false, + async: false, + dataType: "json", + data: { + sub : "last_scan", + json : true + }, + success: function(answer) { + return_obj = answer; + } + }); + return return_obj; +} + + + + + + + + + + + + + + + + + diff --git a/user_interface/statistics.js b/user_interface/statistics.js new file mode 100644 index 0000000..1ab200b --- /dev/null +++ b/user_interface/statistics.js @@ -0,0 +1,160 @@ +//Check whether is a number or not +function isNum(args) +{ + args = args.toString(); + + if (args.length == 0) return false; + + for (var i = 0; i "9") && args.substring(i, i+1) != "."&& args.substring(i, i+1) != "-") + { + return false; + } + } + + return true; +} + +//calculate the mean of a number array +function mean(arr) +{ + var len = 0; + var sum = 0; + + for(var i=0;i 1) + { + var mean = sum / len; + for(var i=0;i arr[i]) {min = arr[i];} + } + } + + return min; +} + +// //Standard deviation +// var sd = Math.sqrt(variance(arr)); +// +// //Standard error +// var se = Math.sqrt(variance(arr)/(arr.length-1)); + +function stdev(arr) { + return Math.sqrt(variance(arr)); +} + +function median(arr) +{ + arr.sort(function(a,b){return a-b}); + + var median = 0; + + if (arr.length % 2 == 1) + { + median = arr[(arr.length+1)/2 - 1]; + } + else + { + median = (1 * arr[arr.length/2 - 1] + 1 * arr[arr.length/2] )/2; + } + + return median +} +