Skip to content

Commit

Permalink
Bug fixes, parameter section reorganization, image rotation with canvas
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronge-2020
aaronge-2020 committed Feb 8, 2024
1 parent c99937c commit 46dc6a3
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 132 deletions.
61 changes: 12 additions & 49 deletions drawCanvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,17 +277,7 @@ function addSegmentationCanvasEventListeners(canvas) {
}

function drawCoresOnCanvasForTravelingAlgorithm() {
let currentMode = "edit"; // Possible values: 'edit', 'add'

let tempCore = null; // Temporary core for add mode
let isSettingSize = false; // Track whether setting position or size

// let isDraggingTempCore = false;

// img.onload = () => {
// // canvas.height = img.height;

// imageNeedsUpdate = false;
document
.getElementById("osdViewerAddCoreBtn")
.removeEventListener("click", addCoreHandler);
Expand All @@ -296,30 +286,10 @@ function drawCoresOnCanvasForTravelingAlgorithm() {
.getElementById("osdViewerAddCoreBtn")
.addEventListener("click", addCoreHandler);
drawCores();
// };

// function updateImageSource() {
// if (window.loadedImg.src !== img.src) {
// img.src = window.loadedImg.src;
// imageNeedsUpdate = true;
// }
// }
}
function connectAdjacentCores(core, updateSurroundings = false) {
// Helper function to calculate the edge point
// function calculateEdgePoint(center1, center2, r1, r2) {
// const angle = Math.atan2(center2.y - center1.y, center2.x - center1.x);
// return {
// start: {
// x: center1.x + Math.cos(angle) * r1,
// y: center1.y + Math.sin(angle) * r1,
// },
// end: {
// x: center2.x - Math.cos(angle) * r2,
// y: center2.y - Math.sin(angle) * r2,
// },
// };
// }


if (!document.getElementById("connectCoresCheckbox").checked) {
// If the checkbox is checked, draw lines between adjacent cores
Expand Down Expand Up @@ -631,15 +601,6 @@ const drawResizeHandles = (overlay, show = true) => {
};

function drawCores() {
// if (imageNeedsUpdate) {
// updateImageSource();
// return; // Exit the function and wait for the image to load
// }
// ctx.clearRect(0, 0, canvas.width, canvas.height);

// if (img.src !== window.loadedImg.src) {
// img.src = window.loadedImg.src;
// }

window.viewer.clearOverlays();
window.viewer.svgOverlay().node().replaceChildren();
Expand All @@ -664,6 +625,7 @@ function drawCores() {
window.sortedCoresData.forEach((core) => {
connectAdjacentCores(core, false);
});

}

function drawCore(core, index = -1) {
Expand Down Expand Up @@ -698,8 +660,11 @@ function drawCore(core, index = -1) {
if (core.isSelected) {
overlayElement.classList.add("selected");
}
if (core.isMisaligned) {
overlayElement.classList.add("misaligned");

if (document.getElementById("flagMisalignmentCheckbox").checked) {
if (core.isMisaligned) {
overlayElement.classList.add("misaligned");
}
}

const overlayRect = window.viewer.viewport.imageToViewportRectangle(
Expand Down Expand Up @@ -1406,7 +1371,7 @@ function determineMedianRowColumnValues(coresData, imageRotation) {

// Calculate rotated values and separate X and Y for each row and column
coresData.forEach((core) => {
if (!core.isTemporary && !core.isImaginary ) {
if (!core.isTemporary) {
const [rotatedX, rotatedY] = rotatePoint(
[core.x, core.y],
-imageRotation
Expand All @@ -1430,12 +1395,12 @@ function determineMedianRowColumnValues(coresData, imageRotation) {

// Function to calculate median of a sorted array
const calculateMedian = (arr) => {
// const mid = Math.floor(arr.length / 2);
// arr.sort((a, b) => a - b);
// return arr.length % 2 !== 0 ? arr[mid] : (arr[mid - 1] + arr[mid]) / 2;
const mid = Math.floor(arr.length / 2);
arr.sort((a, b) => a - b);
return arr.length % 2 !== 0 ? arr[mid] : (arr[mid - 1] + arr[mid]) / 2;

// Calculate average
return arr.reduce((a, b) => a + b, 0) / arr.length;
// return arr.reduce((a, b) => a + b, 0) / arr.length;
};

// Calculate medians for each column and row
Expand Down Expand Up @@ -1604,8 +1569,6 @@ function filterAndReassignCores(coresData, imageRotation) {

filteredCores = removeImaginaryCoresFilledRowsAndColumns(filteredCores);

filteredCores = alignMisalignedCores(filteredCores, imageRotation);

filteredCores = reassignCoreIndices(filteredCores);

filteredCores = flagMisalignedCores(filteredCores, imageRotation);
Expand Down
124 changes: 41 additions & 83 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,32 +158,57 @@ <h2>Configure Parameter</h2>
<!-- Image Parameters Section -->
<fieldset>
<legend>Image Parameters</legend>
<label for="userRadius">Core Radius:</label>
<label for="userRadius">Core Radius: <output id="radiusValue" for="userRadius">20</output></label>
<input type="range" id="userRadius" name="userRadius" min="1" max="100" value="20">
<output id="radiusValue" for="userRadius">20</output>
</fieldset>


<!-- Traveling Algorithm Section -->
<fieldset>
<legend>Traveling Algorithm Parameters</legend>


<label for="originAngle" title="Rotation of the image in degrees">Image Rotation: <output id="originAngleValue" for="originAngle">0</output></label>
<input type="range" id="originAngle" name="originAngle" min="-90" max="90" value="0">






</fieldset>

<fieldset>
<legend>Display Parameters</legend>
<!-- Check box for whether adjacent cores should be connected by lines -->
<div class="checkbox-group">
<input type="checkbox" id="connectCoresCheckbox" name="connectCores" checked>
<label for="connectCoresCheckbox">Connect Cores</label>
</div>


<div class="checkbox-group">
<input type="checkbox" id="flagMisalignmentCheckbox" name="flagMisalignmentCheckbox" checked>
<label for="flagMisalignmentCheckbox">Flag Misaligned Cores</label>
</div>

</fieldset>

<label for="originAngle" title="Rotation of the image in degrees">Image Rotation</label>
<input type="number" id="originAngle" name="originAngle" step="1" value="0">
<!-- Add a button/link for the collapsible dropdown -->
<button id="toggle-advanced-settings" type="button">Show Advanced Settings</button>
<!-- Wrap hidden fieldsets in a div -->
<div id="advanced-settings" style="display: none;">
<!-- More Traveling Algorithm Parameters -->
<fieldset>

<label for="radiusMultiplier"
title="Multiplier for the radius used in the traveling algorithm">Radius Multiplier</label>
<input type="number" id="radiusMultiplier" name="radiusMultiplier" step="0.1" value="0.6">
<legend>Traveling Algorithm Parameters</legend>
<label for="radiusMultiplier"
title="Multiplier for the radius used in the traveling algorithm" >Radius Multiplier</label>
<input type="number" id="radiusMultiplier" name="radiusMultiplier" step="0.1" value="0.6" >

<label for="gridWidth" title="Width of one square in the grid used in the traveling algorithm"
style="display: none">Grid Width</label>
<input type="number" id="gridWidth" name="gridWidth" step="1" value="70" style="display: none">
>Grid Width</label>
<input type="number" id="gridWidth" name="gridWidth" step="1" value="70">

<label for="gamma"
title="Distance after the the core with the greatest X value to stop the traveling algorithm">Stopping
Expand All @@ -192,28 +217,24 @@ <h2>Configure Parameter</h2>

<label for="multiplier"
title="Multiplier for the grid width calculation in the traveling algorithm"
style="display: none">Multiplier for
>Multiplier for
Grid Width</label>
<input type="number" id="multiplier" name="multiplier" step="0.1" value="1.5"
style="display: none">
>

<label for="imageWidth" title="Width of the entire gird used in the traveling algorithm"
style="display: none;">Image
>Image
Width</label>
<input type="number" id="imageWidth" name="imageWidth" step="1" value="1024"
style="display: none;">
>

<label for="searchAngle" title="Angle to search in the traveling algorithm"
style="display: none">Search Angle</label>
>Search Angle</label>
<input type="number" id="searchAngle" name="searchAngle" step="1" value="5"
style="display: none">
>

</fieldset>
</fieldset>

<!-- Add a button/link for the collapsible dropdown -->
<button id="toggle-advanced-settings" type="button">Show Advanced Settings</button>
<!-- Wrap hidden fieldsets in a div -->
<div id="advanced-settings" style="display: none;">
<!-- Edge Detection Section -->
<fieldset>
<legend>Edge Detection Parameters</legend>
Expand Down Expand Up @@ -386,69 +407,6 @@ <h2>Adding Cores</h2>
<div class="core-edit-container" id="main-container"> <!-- This is the new flex container -->

<div id="osdViewer" style="margin: auto;"></div>
<!-- <canvas id="coreCanvas" width="1024" height="1024" style="border:none;"></canvas> -->

<!-- Sidebar for adding cores -->
<!-- <div class="edit-sidebar" id="addSidebar" style="visibility:hidden;">
<div class="sidebar-header draggable-area">
<h2 class="title">Add Core</h2>
<div class="window-controls">
</div>
</div>
<form id="addCoreForm" class="main-content">
<span>
<label for="addRowInput">Row:</label>
<input type="number" id="addRowInput" name="addRowInput">
</span>
<span>
<label for="addColumnInput">Column:</label>
<input type="number" id="addColumnInput" name="addColumnInput" disabled>
</span>
<div class="checkbox-group">
<input type="checkbox" id="addAutoUpdateColumnsCheckbox"
name="addAutoUpdateColumnsCheckbox" checked>
<label for="addAutoUpdateColumnsCheckbox">Auto Update Columns</label>
</div>
<div>
<label for="addXInput">X Position:</label>
<input type="number" id="addXInput" name="addXInput">
</div>
<div>
<label for="addYInput">Y Position:</label>
<input type="number" id="addYInput" name="addYInput">
</div>
<div>
<label for="addRadiusInput">Radius:</label>
<input type="number" id="addRadiusInput" name="addRadiusInput" step="0.1">
</div>
<div>
<label for="addAnnotationsInput">Annotations:</label>
<textarea id="addAnnotationsInput" name="addAnnotationsInput"></textarea>
</div>
<div class="radio-group">
<input type="radio" id="addRealInput" name="addCoreType" value="real" checked>
<label for="addRealInput" class="radio-button">Normal</label>
<input type="radio" id="addImaginaryInput" name="addCoreType" value="imaginary">
<label for="addImaginaryInput" class="radio-button">Missing</label>
</div>
<div class="button-group">
<button type="button" id="addCoreButton">Add Core</button>
<button type="button" id="cancelCoreDrawing" class="cancel-button">Cancel</button>
</div>
</form>
</div> -->


<div class="edit-sidebar" id="editSidebar">
<div class="sidebar-header draggable-area">
Expand Down
10 changes: 10 additions & 0 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -704,6 +704,16 @@ function bindEventListeners() {
}
});

document.getElementById("originAngle").addEventListener("input", function () {

const angleValue = document.getElementById("originAngle");

document.getElementById("originAngleValue").textContent = angleValue.value;
window.viewer.viewport.setRotation(parseFloat(angleValue.value));
});



// makeElementDraggable(document.getElementById("addSidebar"));
makeElementDraggable(document.getElementById("editSidebar"));

Expand Down

0 comments on commit 46dc6a3

Please sign in to comment.