Skip to content

Commit

Permalink
basic recounting on results page
Browse files Browse the repository at this point in the history
  • Loading branch information
@hopzebordah
hopzebordah committed Nov 13, 2019
1 parent aff848d commit 5cd8089
Show file tree
Hide file tree
Showing 4 changed files with 160 additions and 13 deletions.
67 changes: 64 additions & 3 deletions Server/resources/js/results.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,75 @@ SOFTWARE.

$(window).ready(function(){

let csvFormatSelect = document.getElementById("csvFormat");
let csvDownloadButton = document.getElementById("csvDownload");
let minDistSlider = document.getElementById('min-dist-slider');
let minDistValue = document.getElementById('min-dist-value');

let sensSlider = document.getElementById('sens-slider');
let sensValue = document.getElementById('sens-value');

let minSizeSlider = document.getElementById('min-size-slider');
let minSizeValue = document.getElementById('min-bead-value');

let maxSizeSlider = document.getElementById('max-size-slider');
let maxSizeValue = document.getElementById('max-bead-value');

let csvFormatSelect = document.getElementById('csvFormat');
let csvDownloadButton = document.getElementById('csvDownload');

let recountButton = document.getElementById('recount-button');

let home = $('#home');

minDistSlider.oninput = function() {
minDistValue.textContent = minDistSlider.value;
};

sensSlider.oninput = function() {
sensValue.textContent = sensSlider.value;
};

minSizeSlider.oninput = function() {
minSizeValue.textContent = minSizeSlider.value;
};

maxSizeSlider.oninput = function() {
maxSizeValue.textContent = maxSizeSlider.value;
};

recountButton.onclick = function() {

const url = '/setParameters';

const method = 'POST';

const data = {
minDist: Number(minDistSlider.value),
sensitivity: Number(sensSlider.value),
minRadius: Number(minSizeSlider.value),
maxRadius: Number(maxSizeSlider.value)
}

fetch(url, {
method: method,
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
}).then(function(response) {
return response.json();
}).then(function(data) {
if (data.status != 0)
throw 'an error occurred';
document.location.reload();
}).catch(function(error) {
console.log(error);
});

};

home.click(function(e) {
window.location.href = '/';
})
});

csvDownloadButton.addEventListener('click', (e) => {
let a = document.createElement('a')
Expand Down
27 changes: 19 additions & 8 deletions Server/routes.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,13 @@ class Parameters():
def __init__(self):
self.wantsCrushedBeads = False
self.wantsWaterBubbles = False
self.beadUpperBound = 0
self.beadLowerBound = 0
self.detectionAlgorithm = ''
self.magnificationLevel = ''

self.minDist = 10
self.sensitivity = 50
self.minRadius = 50
self.maxRadius = 120

detectionParams = Parameters()

Expand All @@ -69,8 +72,8 @@ def uploadImagesAndConfigure():

detectionParams.wantsCrushedBeads = True if request.args['wantsCrushed'] == 'true' else False # convert js 'bool' to python Bool
detectionParams.detectionAlgorithm = request.args['colorAlgorithm']
detectionParams.beadLowerBound = int(request.args['minBead'])
detectionParams.beadUpperBound = int(request.args['maxBead'])
detectionParams.minRadius = int(request.args['minBead'])
detectionParams.maxRadius = int(request.args['maxBead'])

if 'maglevel' in request.args:
detectionParams.magnificationLevel = request.args['maglevel']
Expand Down Expand Up @@ -111,8 +114,6 @@ def getResults(directory):
else:
magLevel = HoughConfig.OBJX10



resultsDirectory = directory.split("/")[0]
serverDirectory = 'Server/resources/uploads/' + directory

Expand All @@ -122,6 +123,18 @@ def getResults(directory):
return render_template('results.html', colorBeads = colorBeads, waterBeads = countingDict[resultsDirectory].waterBeads,
crushedBeads = countingDict[resultsDirectory].crushedBeads, mapLocation = directory, resultsDirectory = resultsDirectory)

@app.route('/setParameters', methods=['POST'])
def setParameters():
try:
jsonData = request.get_json()
detectionParams.minDist = int(jsonData['minDist'])
detectionParams.sensitivity = int(jsonData['sensitivity'])
detectionParams.minRadius = int(jsonData['minRadius'])
detectionParams.maxRadius = int(jsonData['maxRadius'])
return jsonify({'status': 0, 'statusString': 'Parameters successfully set'})
except Exception as e:
return jsonify({'status': 1, 'statusString': 'An Error occurred setting parameters'})

@app.route('/getResultReport/<path:directory>')
def getResultReport(directory):
colorOutputType = request.args.get('colorOutputType') # this is the type of output we want
Expand All @@ -130,6 +143,4 @@ def getResultReport(directory):

csvTimestamp = countingDict[directory].makeBeadsCSV(colorOutputType) # access the stored counting variable and regen csv data



return send_file(uploadDir + '/results/' + colorOutputType + '_' + csvTimestamp + '.csv', as_attachment=True)
75 changes: 75 additions & 0 deletions Server/templates/results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -529,6 +529,81 @@ <h1>MBv2</h1>
<canvas id="mapCanvas" class="image"></canvas>
</div>
</div>
<div class="row mt-4">
<div class='card col-12'>
<div class='card-header'><h2 class='mb-0'>Settings</h2></div>

<div class='card-body'>

<!-- Slider for mindist -->
<div class='row setting-row'>
<div class='col-3'>
<span>Min Dist</span>
</div>
<div class='col-6'>
<div class="slidecontainer">
<input type="range" min="1" max="125" value="0" class="slidebar" id="min-dist-slider">
</div>
</div>
<div class='col-3'>
<span id='min-dist-value'>10</span>
</div>
</div>

<!-- Slider for sensitivity -->
<div class='row setting-row'>
<div class='col-3'>
<span>Sensitivity</span>
</div>
<div class='col-6'>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slidebar" id="sens-slider">
</div>
</div>
<div class='col-3'>
<span id='sens-value'>10</span>
</div>
</div>

<!-- Sliders for minimum and maximum bead sizes -->
<div class='row setting-row'>
<div class='col-3'>
<span>Min Radius</span>
</div>
<div class='col-6'>
<div class="slidecontainer">
<input type="range" min="1" max="125" value="0" class="slidebar" id="min-size-slider">
</div>
</div>
<div class='col-3'>
<span id='min-bead-value'>0</span>
</div>
</div>

<div class='row'>
<div class='col-3'>
<span>Max Radius</span>
</div>
<div class='col-6'>
<div class="slidecontainer">
<input type="range" min="1" max="125" value="75" class="slidebar" id="max-size-slider">
</div>
</div>
<div class='col-3'>
<span id='max-bead-value'>75</span>
</div>
</div>

<div class='row'>
<div class='col-12 text-center mt-4'>
<button id='recount-button' class='btn btn-primary'>Recount</button>
</div>
</div>

<hr>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-4">
<form class="form-inline">
Expand Down
4 changes: 2 additions & 2 deletions lib/counting.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ def getColorBeads(self, houghConfig, detectionParams):
minDist=houghConfig["minDist"],
param1=houghConfig["param1"],
param2=houghConfig["param2"],
minRadius=detectionParams.beadLowerBound,
maxRadius=detectionParams.beadUpperBound)
minRadius=detectionParams.minRadius,
maxRadius=detectionParams.maxRadius)

if circles is not None:
circles = np.uint16(np.around(circles))
Expand Down

0 comments on commit 5cd8089

Please sign in to comment.