Commit 7dfe74ee authored by Elijah Justin Medina's avatar Elijah Justin Medina
Browse files

minor edit: collapsed the two sliders of radii two one

parent 36895677
web/data/morph/morph_init.png

7.96 KB | W: | H:

web/data/morph/morph_init.png

9.29 KB | W: | H:

web/data/morph/morph_init.png
web/data/morph/morph_init.png
web/data/morph/morph_init.png
web/data/morph/morph_init.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -128,11 +128,11 @@ ...@@ -128,11 +128,11 @@
<br> <br>
Please take these steps: Please take these steps:
<ol> <ol>
<li>Select Image</li> <li>Select the image to process</li>
<li>Tweak the threshold range of each channel</li> <li>Tweak the threshold range of each channel for filtering of the background</li>
<li>Get the mask</li> <li>Get the mask that will be used for filtering</li>
<li>Apply the mask on the chosen image</li> <li>Apply the mask on the chosen image</li>
<li>Apply erosion OR dilation of chosen radius on the mask and apply the mask</li> <li>Apply erosion OR dilation of chosen radius on the mask and apply the morphed mask</li>
</ol> </ol>
</p> </p>
...@@ -207,13 +207,17 @@ ...@@ -207,13 +207,17 @@
</p> </p>
<div class="morph"> <div class="morph">
<div id="dilateerode"> <div id="dilateerode">
<input type="range" min="1" max="20" value="1" step="1" class="slider morph" id="erosion"> <select id='dilateorerode'>
<label for="erosion-slider" style="float: right;">Radius (erosion): 1px</label> <option value='dilation' selected>Dilate</option>
<option value='erosion'>Erode</option>
</select>
<input type="range" min="1" max="20" value="1" step="1" class="slider morph" id="morph">
<label for="morph-slider" style="float: right;">Radius (dilation): 1px</label>
</div> </div>
<div id="dilateerode"> <!-- <div id="dilateerode">
<input type="range" min="1" max="20" value="1" step="1" class="slider morph" id="dilation"> <input type="range" min="1" max="20" value="1" step="1" class="slider morph" id="dilation">
<label for="dilation-slider" style="float: right;">Radius (dilation): 1px</label> <label for="dilation-slider" style="float: right;">Radius (dilation): 1px</label>
</div> </div> -->
<div class="threshold"> <div class="threshold">
<div id="mask"> <div id="mask">
...@@ -221,8 +225,6 @@ ...@@ -221,8 +225,6 @@
<img src="" id="morphed"> <img src="" id="morphed">
</div> </div>
</div> </div>
<br>
<br>
<div id="mask"> <div id="mask">
<div id="img-container"> <div id="img-container">
<img src="" id="morphed-masked"> <img src="" id="morphed-masked">
...@@ -277,73 +279,67 @@ ...@@ -277,73 +279,67 @@
) )
} }
function erodeImage() { function morphImage() {
let rad = document.querySelector("input#erosion").value let rad = document.querySelector("input#morph").value
// console.log(rad) let op = document.querySelector("select#dilateorerode").value
let selImg = document.querySelector("select#img").value let selImg = document.querySelector("select#img").value
fetch('/morph/erosion/'+selImg+'/'+rad).then( fetch('/morph/'+ op + '/'+selImg+'/'+rad).then(
function (r){ function (r){
document.querySelector("img#morphed").src = "data/morph/morph_new_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "erosion.png" document.querySelector("img#morphed").src = "data/morph/morph_new_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + op + ".png"
} }
) )
} }
function dilateImage() { // function dilateImage() {
let rad = document.querySelector("input#dilation").value // let rad = document.querySelector("input#dilation").value
// console.log(rad) // // console.log(rad)
let selImg = document.querySelector("select#img").value // let selImg = document.querySelector("select#img").value
fetch('/morph/dilation/'+selImg+'/'+rad).then( // fetch('/morph/dilation/'+selImg+'/'+rad).then(
function (r){ // function (r){
document.querySelector("img#morphed").src = "data/morph/morph_new_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "dilation.png" // document.querySelector("img#morphed").src = "data/morph/morph_new_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "dilation.png"
} // }
) // )
} // }
function erodeImageMask() { function morphImageMask() {
let rad = document.querySelector("input#erosion").value let rad = document.querySelector("input#morph").value
// console.log(rad) let op = document.querySelector("select#dilateorerode").value
let selImg = document.querySelector("select#img").value let selImg = document.querySelector("select#img").value
// fetch('/apply_mask/erosion/'+selImg+'/'+rad).then(
// function (r){
setTimeout(function(){ setTimeout(function(){
document.querySelector("img#morphed-masked").src = "data/masked_morphimg/morph_masked_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "erosion.png" document.querySelector("img#morphed-masked").src = "data/masked_morphimg/morph_masked_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + op + ".png"
}, 500); }, 500);
// }
// )
} }
function dilateImageMask() { // function dilateImageMask() {
let rad = document.querySelector("input#dilation").value // let rad = document.querySelector("input#dilation").value
// console.log(rad) // // console.log(rad)
let selImg = document.querySelector("select#img").value // let selImg = document.querySelector("select#img").value
// fetch('/apply_mask/dilation/'+selImg+'/'+rad).then( // setTimeout(function(){
// function (r){ // document.querySelector("img#morphed-masked").src = "data/masked_morphimg/morph_masked_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "dilation.png"
setTimeout(function(){ // }, 500);
document.querySelector("img#morphed-masked").src = "data/masked_morphimg/morph_masked_"+selImg.slice(0, -4)+ '-' + selImg.slice(selImg.length - 3)+"-" + rad + "-" + "dilation.png" // }
}, 500);
// }
// )
}
function changeRadiusErosion() { function changeSliderDisplay() {
let rad = document.querySelector("input#erosion").value let rad = document.querySelector("input#morph").value
document.querySelector("input#erosion+label").innerText = "Radius (erosion): " + rad + "px" let op = document.querySelector("select#dilateorerode").value
document.querySelector("input#morph+label").innerText = "Radius (" + op + "): " + rad + "px"
} }
function changeRadiusDilation() { // function changeRadiusDilation() {
let rad = document.querySelector("input#dilation").value // let rad = document.querySelector("input#dilation").value
document.querySelector("input#dilation+label").innerText = "Radius (dilation): " + rad + "px" // document.querySelector("input#dilation+label").innerText = "Radius (dilation): " + rad + "px"
} // }
document.querySelector("button#get-mask").addEventListener("click", getMask) document.querySelector("button#get-mask").addEventListener("click", getMask)
document.querySelector("button#apply-mask").addEventListener("click", applyMask) document.querySelector("button#apply-mask").addEventListener("click", applyMask)
document.querySelector("input#erosion").addEventListener("change", erodeImage) document.querySelector("input#morph").addEventListener("change", morphImage)
document.querySelector("input#dilation").addEventListener("change", dilateImage) // document.querySelector("input#dilation").addEventListener("change", dilateImage)
document.querySelector("input#erosion").addEventListener("change", erodeImageMask) document.querySelector("input#morph").addEventListener("change", morphImageMask)
document.querySelector("input#dilation").addEventListener("change", dilateImageMask) // document.querySelector("input#dilation").addEventListener("change", dilateImageMask)
document.querySelector("input#erosion").addEventListener("change", changeRadiusErosion) // document.querySelector("input#erosion").addEventListener("change", changeSliderDisplay)
document.querySelector("input#dilation").addEventListener("change", changeRadiusDilation) document.querySelector("select#dilateorerode").addEventListener("change", changeSliderDisplay)
document.querySelector("input#morph").addEventListener("change", changeSliderDisplay)
</script> </script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment