Skip to content

Commit

Permalink
Update examples with new template (#414)
Browse files Browse the repository at this point in the history 
* feat: added template example

* fix: css ordering

* feat: added dragover

* fix add default tool in example base

* template used in examples pt 1

* fix mask example overflow

* template in examples pt. 2

* spinner updates

* fix pdf example

* Fix touch examples (#415)

* fix touch issue

* code snippets updated

* deleted template/docdash

* removed lodash and JQuery

* css fixes

* fix design button

* fix close modal button

* removed ws timeout

* solved M triggering border magnify tool

* fix: fix styles

---------

Co-authored-by: daron1337 <[email protected]>
  • Loading branch information
@laura-borghesi-lum00n @daron1337
laura-borghesi-lum00n and daron1337 authored Jan 9, 2025
1 parent 0346a1d commit d315b25
Show file tree
Hide file tree
Showing 20 changed files with 2,632 additions and 1,824 deletions.
42 changes: 26 additions & 16 deletions docs/examples/4d.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />

<!-- Include the Larvitar script -->
<script>
// Check the host and set the script source dynamically
const script = document.createElement("script");
Expand All @@ -17,9 +18,6 @@
document.head.appendChild(script);
</script>

<!-- Include the CSS file -->
<link rel="stylesheet" href="resources/styles.css" />

<!-- Add the Bootstrap CSS and Prism CSS for code modal -->
<link
rel="stylesheet"
Expand All @@ -30,6 +28,12 @@
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"
/>

<!-- Include the CSS file -->
<link rel="stylesheet" href="resources/styles.css" />

<!-- custom styles for the example -->
<style></style>

<!-- Add the Bootstrap JS and Prism JS for code modal -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
Expand Down Expand Up @@ -94,26 +98,32 @@
<button
id="toggleButton"
class="open-button"
style="position: absolute; left: 125px; top: 10px"
style="position: absolute; left: 130px; width: 179px; top: 10px"
>
Scroll Mode: Slices
Toggle Scroll Mode
</button>
<div id="spinner"></div>
</div>

<p
id="animation"
style="
position: absolute;
top: 55px;
color: rgb(255, 255, 255);
font-weight: bold;
"
>
Scroll Mode Active: Slices
</p>
<p
id="image-time"
style="position: absolute; top: 95px; color: white"
style="position: absolute; top: 100px; color: white"
></p>
<p
id="timestamp"
style="position: absolute; top: 115px; color: white"
></p>
<p id="slicenum" style="position: absolute; top: 135px; color: white"></p>
<p
id="animation"
style="position: absolute; top: 155px; color: white"
style="position: absolute; top: 125px; color: white"
></p>
<p id="slicenum" style="position: absolute; top: 145px; color: white"></p>

<!-- Modal -->
<div
Expand Down Expand Up @@ -213,10 +223,10 @@ <h5 class="modal-title" id="codeModalLabel">JavaScript Code</h5>
"CustomMouseWheelScroll"
].configuration.currentMode = newMode;
currentMode = newMode;
document.getElementById("toggleButton").innerHTML =
"Scroll Mode: " + newModeTxt;
let animationText =
newMode === "stack" ? "" : "Press 'p' to start/stop animation";
newMode === "stack"
? "Scroll Mode Active: Slices"
: "Scroll Mode Active: Frames.<br> Press 'p' to start/stop animation";
document.getElementById("animation").innerHTML = animationText;
}
// Attach click event to the button
Expand Down
218 changes: 113 additions & 105 deletions docs/examples/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />

<!-- Include the Larvitar script -->
<script>
// Check the host and set the script source dynamically
const script = document.createElement("script");
Expand All @@ -17,9 +18,6 @@
document.head.appendChild(script);
</script>

<!-- Include the CSS file -->
<link rel="stylesheet" href="resources/styles.css" />

<!-- Add the Bootstrap CSS and Prism CSS for code modal -->
<link
rel="stylesheet"
Expand All @@ -30,6 +28,10 @@
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"
/>

<!-- Include the CSS file -->
<link rel="stylesheet" href="resources/styles.css" />

<!-- custom styles for the example -->
<style>
label {
color: #28b47f;
Expand Down Expand Up @@ -94,9 +96,9 @@
opacity: 1;
}

#viewer.dragover {
background-color: #d8eaff;
color: #0056b3;
/* Mask overlay */
.dragover {
opacity: 0.3;
}
</style>

Expand Down Expand Up @@ -152,140 +154,145 @@

<body class="h-100" style="background-color: #000000">
<div class="row h-100">
<div id="viewer" class="col-12 h-100" style="background-color: black">
<p style="position: absolute; color: white">
<b>Open form:</b> Allows to modify DICOM tags and download the
modified image/images
</p>
<p style="position: absolute; top: 20px; color: white">
<b
>Drag and drop a folder or a list of dicom files to visualize in the
current viewer</b
>
</p>
<button
id="showCodeBtn"
class="open-button"
style="position: absolute; top: 50px"
<div
id="viewer"
class="col-12 h-100"
style="background-color: black"
></div>
<p style="position: absolute; color: white">
<b>Open form:</b> Allows to modify DICOM tags and download the modified
image/images
</p>
<p style="position: absolute; top: 20px; color: white">
<b
>Drag and drop a folder or a list of dicom files to visualize in the
current viewer</b
>
</p>
<div
style="
display: flex;
align-items: center;
gap: 10px;
position: absolute;
top: 50px;
"
>
<button id="showCodeBtn" class="open-button" style="width: auto">
Show Code
</button>

<button
class="open-button"
style="position: absolute; left: 125px; top: 50px"
onclick="openForm()"
>
<button class="open-button" style="width: auto" onclick="openForm()">
Open Form
</button>

<button
class="open-button"
style="width: auto"
id="previous"
style="position: absolute; left: 249px; top: 50px"
onclick="getMetadata()"
>
Display Metadata
</button>

<button
class="open-button"
id="next"
style="position: absolute; left: 416px; top: 50px"
style="width: auto"
id="previous"
onclick="previousImage()"
>
Previous Series <-
</button>

<button
class="open-button"
style="width: auto"
id="next"
style="position: absolute; left: 590px; top: 50px"
onclick="nextImage()"
>
Next Series ->
</button>
</div>

<div class="form-popup" id="myForm">
<form id="myFormSub" class="form-container">
<h1 style="text-align: center; color: #28b47f; font-weight: bold">
Metadata
</h1>
<div id="metadata" style="overflow-y: scroll; height: 300px"></div>
<div>
<input type="checkbox" id="downloadCheck" />
<label> Download modified image/images</label><br />
<label style="display: none" id="downloadLabel"
>Download image N:</label
>
<input
type="number"
id="downloadInput"
style="display: none"
placeholder="Download all images"
/>
</div>
<button id="submit" class="btn">submit</button>
<button type="button" class="btn cancel" onclick="closeForm()">
Close
</button>
</form>
</div>
<div class="form-popup" id="myForm">
<form id="myFormSub" class="form-container">
<h1 style="text-align: center; color: #28b47f; font-weight: bold">
Metadata
</h1>
<div id="metadata" style="overflow-y: scroll; height: 300px"></div>
<div>
<input type="checkbox" id="downloadCheck" />
<label> Download modified image/images</label><br />
<label style="display: none" id="downloadLabel"
>Download image N:</label
>
<input
type="number"
id="downloadInput"
style="display: none"
placeholder="Download all images"
/>
</div>
<button id="submit" class="btn">submit</button>
<button type="button" class="btn cancel" onclick="closeForm()">
Close
</button>
</form>
</div>

<!-- Modal -->
<div
class="modal fade"
id="codeModal"
tabindex="-1"
aria-labelledby="codeModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="codeModalLabel">JavaScript Code</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<pre><code id="codeSnippet" class="language-javascript"></code></pre>
</div>
<div class="modal-footer">
<button id="copyCodeBtn" class="btn btn-success">
Copy Code
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
<!-- Modal -->
<div
class="modal fade"
id="codeModal"
tabindex="-1"
aria-labelledby="codeModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="codeModalLabel">JavaScript Code</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<pre><code id="codeSnippet" class="language-javascript"></code></pre>
</div>
<div class="modal-footer">
<button id="copyCodeBtn" class="btn btn-success">
Copy Code
</button>
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>

<div id="metadataModal" class="modal">
<table id="metadataTable">
<thead>
<tr>
<th>Tag</th>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<!-- Rows will be added here dynamically -->
</tbody>
</table>
</div>
<div id="spinner"></div>
<div id="metadataModal" class="modal">
<table id="metadataTable">
<thead>
<tr>
<th>Tag</th>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<!-- Rows will be added here dynamically -->
</tbody>
</table>
</div>
<div id="spinner"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
Expand Down Expand Up @@ -534,6 +541,8 @@ <h5 class="modal-title" id="codeModalLabel">JavaScript Code</h5>
console.log("Image has been rendered");
hideSpinner(); // Hide the spinner when all files are processed
larvitar.resetViewports(["viewer"]);
larvitar.addDefaultTools();
larvitar.setToolActive("Wwwc");
});
// optionally cache the series

Expand Down Expand Up @@ -571,7 +580,6 @@ <h5 class="modal-title" id="codeModalLabel">JavaScript Code</h5>
newElement.appendChild(newChild);
}
}
larvitar.addDefaultTools();
})
.catch(err => console.error(err));
}
Expand Down
Loading

0 comments on commit d315b25

Please sign in to comment.