Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

implementation of communication btw UI and gridTool + fix gridpixelArray #391

Merged
merged 23 commits into from
Sep 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
4d51c9a
implementation of communication btw UI and gridTool + fix gridpixelArray
laura-borghesi-lum00n Sep 16, 2024
c52feab
changed import example
laura-borghesi-lum00n Sep 16, 2024
42a3b82
Update docs
github-actions[bot] Sep 16, 2024
0a5dd2e
Merge branch 'testGridUI' of github.com:dvisionlab/Larvitar into test…
laura-borghesi-lum00n Sep 16, 2024
9890b31
Update docs
github-actions[bot] Sep 16, 2024
0d5ca86
fixed button divs
laura-borghesi-lum00n Sep 17, 2024
4630699
Merge branch 'testGridUI' of github.com:dvisionlab/Larvitar into test…
laura-borghesi-lum00n Sep 17, 2024
8d5ba31
Update docs
github-actions[bot] Sep 17, 2024
dc6b215
fix grid value pixel array (TODO-build)
laura-borghesi-lum00n Sep 17, 2024
ac2fdae
Merge branch 'testGridUI' of github.com:dvisionlab/Larvitar into test…
laura-borghesi-lum00n Sep 17, 2024
9c58491
Update docs
github-actions[bot] Sep 17, 2024
a09be21
build
laura-borghesi-lum00n Sep 17, 2024
f5bf6bf
Merge branch 'testGridUI' of github.com:dvisionlab/Larvitar into test…
laura-borghesi-lum00n Sep 17, 2024
af24ae1
Update docs
github-actions[bot] Sep 17, 2024
8f97153
setToolPassive added to grid tool
laura-borghesi-lum00n Sep 17, 2024
cc4007a
Merge branch 'testGridUI' of github.com:dvisionlab/Larvitar into test…
laura-borghesi-lum00n Sep 17, 2024
39edf0e
Update docs
github-actions[bot] Sep 17, 2024
402a993
removed log
laura-borghesi-lum00n Sep 17, 2024
0fc5416
Merge branch 'testGridUI' of github.com:dvisionlab/Larvitar into test…
laura-borghesi-lum00n Sep 17, 2024
36e816e
Update docs
github-actions[bot] Sep 17, 2024
42a6194
correct grayscale values for grid pixel data
laura-borghesi-lum00n Sep 17, 2024
7e6ca5c
Merge branch 'testGridUI' of github.com:dvisionlab/Larvitar into test…
laura-borghesi-lum00n Sep 17, 2024
0c49ff5
Update docs
github-actions[bot] Sep 17, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion dist/imaging/tools/custom/gridTool.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export declare class GridTool extends BaseTool {
* @returns {Promise<void>}
*/
activeCallback(element: HTMLElement): Promise<void>;
triggerInputPatternDimensionChange(event: any): void;
/**
* function triggered when tool is set to disabled
*
Expand All @@ -40,6 +41,15 @@ export declare class GridTool extends BaseTool {
* @returns {void}
*/
disabledCallback(element: HTMLElement): void;
/**
* function triggered when tool is set to passive
*
* @private
* @param {HTMLElement} element - The viewport element to add remove listeners to.
* @modifies {element}
* @returns {void}
*/
passiveCallback(element: HTMLElement): void;
/**
* function to change center of the grid position on user click
*
Expand Down Expand Up @@ -77,7 +87,7 @@ export declare class GridTool extends BaseTool {
* @param {string} darkGray
* @returns {void}
*/
drawDashedGrid(context: CanvasRenderingContext2D, xCenter: number, yCenter: number, start: Coords, end: Coords, patternWidth: number, patternHeight: number, dashWidth: number, dashHeight: number, lightGray: string, darkGray: string, image: Image, element: HTMLElement): void;
drawDashedGrid(context: CanvasRenderingContext2D, xCenter: number, yCenter: number, start: Coords, end: Coords, patternWidth: number, patternHeight: number, dashWidth: number, dashHeight: number, imageDashHeight: number, imageDashWidth: number, lightGray: string, darkGray: string, image: Image, element: HTMLElement): void;
/**
* returns grid's pixelArray
* @private
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,5 @@ export declare function getColors(bitDepth: number): {
darkGray: string;
};
export declare function drawDashedLine(context: CanvasRenderingContext2D, from: Coords, to: Coords, color: string): void;
export declare function drawVerticalLines(context: CanvasRenderingContext2D, xCenter: number, start: Coords, end: Coords, patternWidth: number, dashWidth: number, dashHeight: number, lightGray: string, darkGray: string, gridPixelArray: number[], image: Image, element: HTMLElement): void;
export declare function drawHorizontalLines(context: CanvasRenderingContext2D, yCenter: number, start: Coords, end: Coords, patternHeight: number, dashWidth: number, dashHeight: number, lightGray: string, darkGray: string, gridPixelArray: number[], image: Image, element: HTMLElement): void;
export declare function drawVerticalLines(context: CanvasRenderingContext2D, xCenter: number, start: Coords, end: Coords, patternWidth: number, dashWidth: number, dashHeight: number, imageDashHeight: number, imageDashWidth: number, lightGray: string, darkGray: string, gridPixelArray: number[], image: Image, element: HTMLElement): void;
export declare function drawHorizontalLines(context: CanvasRenderingContext2D, yCenter: number, start: Coords, end: Coords, patternHeight: number, dashWidth: number, dashHeight: number, imageDashHeight: number, imageDashWidth: number, lightGray: string, darkGray: string, gridPixelArray: number[], image: Image, element: HTMLElement): void;
2 changes: 1 addition & 1 deletion dist/larvitar.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/larvitar.js.map

Large diffs are not rendered by default.

276 changes: 276 additions & 0 deletions docs/examples/gridUI.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,276 @@
<!DOCTYPE html>
<html class="h-100 overflow-hidden">
<head>
<meta charset="UTF-8" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/vs2015.min.css"
/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
<title>Larvitar - Basic rendering example</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
label {
color: #28b47f;
font-weight: bold;
text-align: center;
border: 2px;
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
background-color: #28b47f;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: absolute;
top: 30px;
}

/* The popup form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 30px;
border: 3px solid #555;
z-index: 9;
}

/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: rgb(0, 0, 0);
}

/* Full-width input fields */
.form-container input[type="text"],
.form-container input[type="password"] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type="text"]:focus,
.form-container input[type="password"]:focus {
background-color: #ddd;
outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
background-color: #04aa6d;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
opacity: 1;
}
</style>
</head>

<body class="h-100" style="background-color: #000000">
<label for="patternDimension">Select a number (50 and above):</label
><br />
<input
type="number"
id="patternDimension"
min="50"
step="10"
value="50"
/>
<button id="okButton" class="btn btn-success">OK</button>
</div>
<div
id="viewer"
class="col-8 h-100"
style="background-color: black"
></div>
<div class="row h-100">


<div class="col-4 h-100">
<pre class="h-100">
<code class="javascript" style="background-color: #000000">
<p style="font-size:0.6vw;">
let demoFiles = [];
let counter = 0;

const getDemoFileNames = function () {
let demoFileList = [];
for (let i = 1; i < 25; i++) {
let filename = "anon" + i;
demoFileList.push(filename);
}
return demoFileList;
};

// init all
larvitar.initializeImageLoader();
larvitar.initializeCSTools();
larvitar.store.initialize();
larvitar.store.addViewport("viewer");

async function createFile(fileName, cb) {
let response = await fetch("./demo/" + fileName);
let data = await response.blob();
let file = new File([data], fileName);
demoFiles.push(file);
counter++;
if (counter == 24) {
cb();
}
}

function renderSerie() {
larvitar.resetLarvitarManager();
larvitar
.readFiles(demoFiles)
.then(seriesStack => {
// render the first series of the study
let seriesId = _.keys(seriesStack)[0];
let serie = seriesStack[seriesId];
larvitar.renderImage(serie, "viewer").then(() => {
console.log("Image has been rendered");
});
// optionally cache the series
larvitar.populateLarvitarManager(seriesId, serie);
larvitar.cacheImages(serie, function (resp) {
if (resp.loading == 100) {
let cache = larvitar.cornerstone.imageCache;
console.log(
"Cache size: ",
cache.getCacheInfo().cacheSizeInBytes / 1e6,
"Mb"
);
}
});
larvitar.addDefaultTools();
larvitar.setToolActive("Wwwc");
})
.catch(err => console.log(err));
}

let demoFileList = getDemoFileNames();
_.each(demoFileList, function (demoFile) {
createFile(demoFile, renderSerie);
});
</p>
</code>
</pre>
</div>

<script src="./larvitar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

<script>
let demoFiles = [];
let counter = 0;
let newMetaData = {};
let series;
let keys = [];

document
.getElementById("okButton")
.addEventListener("click", function (event) {
event.stopPropagation();
console.log(
"GRID'S PIXEL ARRAY:",
larvitar.DEFAULT_TOOLS["Grid"].configuration.gridPixelArray
);
});

const getDemoFileNames = function () {
let demoFileList = [];
for (let i = 1; i < 25; i++) {
let filename = "anon" + i;
demoFileList.push(filename);
}
return demoFileList;
};

// init all
larvitar.initializeImageLoader();
larvitar.initializeCSTools();
larvitar.store.initialize();
larvitar.store.addViewport("viewer");

async function createFile(fileName, cb) {
let response = await fetch("./demo/" + fileName);
let data = await response.blob();
let file = new File([data], fileName);
demoFiles.push(file);
counter++;
if (counter == 24) {
cb();
}
}

function renderSerie() {
larvitar.resetLarvitarManager();
larvitar
.readFiles(demoFiles)
.then(seriesStack => {
// render the first series of the study

let seriesId = _.keys(seriesStack)[0];
let serie = seriesStack[seriesId];
larvitar.renderImage(serie, "viewer").then(() => {
console.log("Image has been rendered");
});
// optionally cache the series
larvitar.populateLarvitarManager(seriesId, serie);
larvitar.cacheImages(serie, function (resp) {
if (resp.loading == 100) {
let cache = larvitar.cornerstone.imageCache;
console.log(
"Cache size: ",
cache.getCacheInfo().cacheSizeInBytes / 1e6,
"Mb"
);
}
});
larvitar.addDefaultTools();
larvitar.setToolActive("Grid");
})
.catch(err => console.error(err));
}

let demoFileList = getDemoFileNames();
_.each(demoFileList, function (demoFile) {
createFile(demoFile, renderSerie);
});
</script>
</body>
</html>
6 changes: 6 additions & 0 deletions docs/examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,12 @@
role="button"
>DSA
</a>
<a
class="btn btn-outline-success btn-lg mb-2"
href="./gridUI.html"
role="button"
>Grid
</a>
</div>
<div class="col-2"></div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/larvitar.js

Large diffs are not rendered by default.

Loading