.

dicomViewer.css

@@ -44,7 +44,7 @@
   color: lightblue;
 }
 
-.single-dicom-viewer {
+.cornerstone-element {
     position: relative;
     height: 100%;
 }

index.html

@@ -11,9 +11,9 @@
     <script src="lib/cornerstone/cornerstone.min.js"></script>
     <script src="lib/cornerstone/dicomParser.min.js"></script>
     <script src="lib/cornerstone/cornerstoneMath.min.js"></script>
-    <script src="lib/cornerstone/cornerstoneTools.min.js"></script>
+    <script src="lib/cornerstone/cornerstoneTools.js"></script>
     <script src="lib/cornerstone/cornerstoneWebImageLoader.min.js"></script>
-    <script src="lib/cornerstone/cornerstoneWADOImageLoader.js"></script>
+    <script src="lib/cornerstone/cornerstoneWADOImageLoader.min.js"></script>
     <script src="lib/cornerstone/cornerstone-base64-image-loader.umd.js"></script>
 
     <script src="loader.js" defer="defer" type="module"></script>
@@ -25,8 +25,9 @@
       <h1>A dicom viewer</h1>
 
     <!-- <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm","test_images/IMG1.dcm"]' data-annotations='[&quot;{\&quot;ArrowAnnotate\&quot;:{\&quot;data\&quot;:[{\&quot;visible\&quot;:true,\&quot;active\&quot;:false,\&quot;handles\&quot;:{\&quot;start\&quot;:{\&quot;x\&quot;:450.01249999999993,\&quot;y\&quot;:592.8031510416666,\&quot;highlight\&quot;:true,\&quot;active\&quot;:false},\&quot;end\&quot;:{\&quot;x\&quot;:283.38750000000005,\&quot;y\&quot;:343.976484375,\&quot;highlight\&quot;:true,\&quot;active\&quot;:false,\&quot;moving\&quot;:false},\&quot;textBox\&quot;:{\&quot;active\&quot;:false,\&quot;hasMoved\&quot;:false,\&quot;movesIndependently\&quot;:false,\&quot;drawnIndependently\&quot;:true,\&quot;allowedOutsideImage\&quot;:true,\&quot;hasBoundingBox\&quot;:true}},\&quot;uuid\&quot;:\&quot;51ca68b0-734c-4046-b3da-dd2886496fd5\&quot;,\&quot;invalidated\&quot;:true}]}}&quot;, null]'></div></div> -->
-    <!-- <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm", "test_images/IMG2.dcm"]' data-annotations=''></div></div> -->
+    <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm", "test_images/IMG2.dcm", "test_images/IMG3.dcm", "test_images/IMG4.dcm", "test_images/IMG5.dcm", "test_images/IMG6.dcm"]' data-annotations=''></div>
-    <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/CXR.dcm"]' data-annotations=''></div></div>
+    <!-- <div id="dicom-viewer2" class="dicom-viewer" style="height: 600px;" data-images='["test_images/IMG1.dcm", "test_images/IMG2.dcm", "test_images/IMG3.dcm", "test_images/IMG4.dcm", "test_images/IMG5.dcm", "test_images/IMG6.dcm"]' data-annotations=''></div> -->
+    <!-- <div id="dicom-viewer" class="dicom-viewer" style="height: 600px;" data-images='["test_images/CXR.dcm"]' data-annotations=''></div></div> -->
 
     </main>
     <footer></footer>

loader.js

@@ -43,4 +43,40 @@ function loadDicomViewer(images_to_load, annotations_to_load) {
       dicomViewer.loadCornerstone($(single_dicom), null, images, annotations, load_as_stack);
     }
   }
+  let single_dicom2 = document.getElementById("dicom-viewer2");
+  if (single_dicom2) {
+
+    let images = single_dicom2.dataset.images;
+
+    if (images_to_load != undefined) {
+      images = images_to_load;
+    } else {
+      images = JSON.parse(images);
+    }
+
+    console.log(images);
+
+    let annotations = single_dicom2.dataset.annotations;
+    if (annotations_to_load != undefined) {
+      annotations = annotations_to_load;
+    } else if (annotations && annotations.indexOf(",") > 0) {
+    console.log("annon2", annotations)
+      annotations = JSON.parse(annotations);
+    } else {
+      annotations = undefined;
+    }
+
+    console.log("annon1", annotations)
+
+    let load_as_stack;
+    if (images.length > 5) {
+      load_as_stack = true;
+    } else {
+      load_as_stack = false;
+    }
+
+    if (images) {
+      dicomViewer.loadCornerstone($(single_dicom2), null, images, annotations, load_as_stack);
+    }
+  }
 }