md`# Loading local image files examples`
md`## Load all files in folder`
ids = ['swv', 'sws', 'sbo', 'sto', 'swe'];
gallery = html`
<button type="button" onClick=${compare}>Compare</button>
<div class="container">
${Object.keys(multiFileDict).sort().slice(1).map((fileName, index) => {
const groundTruth = loadImage("segmentations_without_variations", caseNo, sliceNo);
sample(loadImage("images", caseNo, sliceNo), loadImage(fileName, caseNo, sliceNo), groundTruth, fileName);
return setCanvas(fileName, caseNo, sliceNo, true)
})}
</div>
`
comparision = html `<div id="comparision" class="container"></div>`
function setCanvas(id, caseNo, sliceNo, addCheckbox) {
return html`<div style="display: flex; align-items: center">
${addCheckbox ?
html`<input type="checkbox" name="selectScan" data-id=${ id+'/'+caseNo+'/'+sliceNo }/>`
: null}
<canvas id=${id} class="scan"></canvas>
<div>`
}
function compare(){
const checkboxes = Array.from(document.getElementsByName('selectScan'))
const selected = checkboxes.filter(c => c.checked)
if(selected.length === 2) {
const selectedIds = selected.map(ch => ch.dataset.id);
getSelectedCanvas(selectedIds);
} else {
console.log("You can select only 2 scans to compare")
}
}
function getSelectedCanvas(selectedCanvas) {
const canvasContainer = document.getElementById('comparision');
canvasContainer.innerHTML='';
selectedCanvas.map(canvas => {
const canvasData = canvas.split("/"); // To separate id, caseNo and SliceNo
const groundTruth = loadImage("segmentations_without_variations", canvasData[1], canvasData[2]);
sample(loadImage("images", canvasData[1], canvasData[2]), loadImage(canvasData[0], canvasData[1], canvasData[2]), groundTruth, 'selected'+canvasData[0]);
const canvasToCompare = setCanvas('selected'+canvasData[0], canvasData[1], canvasData[2], false)
canvasContainer.appendChild(canvasToCompare)
})
}
sample = (background, input, groundTruth, targetId) => {
const bg_image = new Image();
bg_image.src = URL.createObjectURL(background);
const image = new Image();
image.src = URL.createObjectURL(input);
const imgGroundTruth = new Image();
imgGroundTruth.src = URL.createObjectURL(groundTruth);
image.onload = function() {
const { cv } = window;
// Source and destination images
const contour_src = new cv.imread(image);
const ct_scan = new cv.imread(bg_image);
const cols = ct_scan.cols;
const rows = ct_scan.rows;
cv.imshow(targetId, ct_scan);
// Convert to binary
cv.cvtColor(contour_src, contour_src, cv.COLOR_RGBA2GRAY, 0);
cv.threshold(contour_src, contour_src, 120, 200, cv.THRESH_BINARY);
// Find contours
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
cv.findContours(contour_src, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE);
// Draw contours on destination image
const matContour = cv.Mat.zeros(contour_src.cols, contour_src.rows, cv.CV_8UC1);
let color = new cv.Scalar(255);
cv.drawContours(matContour, contours, -1, color, 1, cv.LINE_8, hierarchy, 32);
// Ring overlap
let matMask = getGroundTruthMask(imgGroundTruth);
let green = new cv.Mat(matMask.cols, matMask.rows, cv.CV_8UC4, new cv.Scalar(0,255,0,255));
let greenMask = cv.Mat.zeros(cols, rows, cv.CV_8UC1);
cv.bitwise_and(matMask, matContour, greenMask)
green.copyTo(ct_scan, greenMask);
// Not ring overlap
let matInvMask = new cv.Mat();
cv.bitwise_not(matMask, matInvMask);
let red = new cv.Mat(matMask.cols, matMask.rows, cv.CV_8UC4, new cv.Scalar(255,0,0,255));
let redMask = cv.Mat.zeros(cols, rows, cv.CV_8UC1);
cv.bitwise_and(matInvMask, matContour, redMask);
red.copyTo(ct_scan, redMask);
// Show result and clean up
cv.imshow(targetId, ct_scan); //getGroundTruthMask(imgGroundTruth));
contour_src.delete(); ct_scan.delete(); contours.delete(); hierarchy.delete();
};
}
getGroundTruthMask = (imgGroundTruth) => {
const { cv } = window;
const matGroundTruth = new cv.imread(imgGroundTruth);
// Convert to binary
cv.cvtColor(matGroundTruth, matGroundTruth, cv.COLOR_RGBA2GRAY, 0);
cv.threshold(matGroundTruth, matGroundTruth, 120, 200, cv.THRESH_BINARY);
// Find contours
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
cv.findContours(matGroundTruth, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE);
// Draw contours on destination image
let matContours = cv.Mat.ones(matGroundTruth.cols, matGroundTruth.rows, cv.CV_8U);
let color2 = new cv.Scalar(0);
cv.drawContours(matContours, contours, -1, color2, 1, cv.LINE_8, hierarchy, 160);
// Calculate distance transform
let matDist = new cv.Mat();
cv.distanceTransform(matContours, matDist, cv.DIST_L2, 3);
// Threshold (range 0 .. 1)
let matThreshold = new cv.Mat();
cv.threshold(matDist, matThreshold, distance_threshold, 1, cv.THRESH_BINARY_INV);
// Convert to 8U, range 0 .. 255
let matConvert = new cv.Mat();
matThreshold.convertTo(matConvert, cv.CV_8U, 255, 0);
return matConvert;
}
html` <canvas id='surfaceDice' width=160 height=160 style="border: solid 1px #e8e8e8; border-radius: 4px; box-sizing: border-box; width: 160px;" ></canvas>`
distance_threshold = 1
surfaceDiceHighlight(loadImage("images", caseNo, sliceNo), loadImage("segmentations_without_variations", caseNo, sliceNo), 'surfaceDice')
html`<style>
.container {
display: grid;
grid-gap: .875rem;
grid-template-columns: repeat(auto-fill,minmax(160px, 5fr));
}
.scan {
border: solid 1px #e8e8e8;
border-radius: 4px;
box-sizing: border-box;
width: 160px;
height: 160px;
}
p {
word-break: break-all;
font-size: 12px;
}
</style>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
