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">
${ids.map(id => { return setCanvas(id, 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>`
}
loadImage = function(subDir, caseNo, sliceNo) {
if (multiFileDict[subDir][caseNo] != undefined &&
multiFileDict[subDir][caseNo][sliceNo] != undefined) {
var file = multiFileDict[subDir][caseNo][sliceNo].file;
if (file != undefined) {
return file;
}
}
}
{
sample(loadImage("images", caseNo, sliceNo), loadImage("segmentations_without_variations", caseNo, sliceNo), 'swv');
sample(loadImage("images", caseNo, sliceNo), loadImage("segmentations_with_shifts_5", caseNo, sliceNo), 'sws');
sample(loadImage("images", caseNo, sliceNo), loadImage("segmentations_bottom_over_under_segment_10", caseNo, sliceNo), 'sbo')
sample(loadImage("images", caseNo, sliceNo), loadImage("segmentations_top_over_under_segment_10", caseNo, sliceNo), 'sto')
sample(loadImage("images", caseNo, sliceNo), loadImage("segmentations_with_erosion_dilation_5", caseNo, sliceNo), 'swe')
}
function compare(){
const checkboxes = Array.from(document.getElementsByName('selectScan'))
const selected = checkboxes.filter(c => c.checked).map(ch => ch.dataset.id)
console.log('selected', selected)
getSelectedCanvas(selected)
}
function getSelectedCanvas(selectedCanvas) {
selectedCanvas.map(canvas => {
const canvasData = canvas.split("/"); // To separate id, caseNo and SliceNo
sample(loadImage("images", canvasData[1], canvasData[2]), loadImage("segmentations_without_variations", canvasData[1], canvasData[2]), 'selected'+canvasData[0]);
const canvasToCompare = setCanvas('selected'+canvasData[0], canvasData[1], canvasData[2], false)
const canvasContainer = document.getElementById('comparision');
canvasContainer.appendChild(canvasToCompare)
})
}
html = (await require("htl@0.2")).html
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.
