Merge pull request #18 from dcmjs-org/mobile-layout

Mobile layout

Author: pieper

examples/basic/index.html

@@ -57,8 +57,17 @@
       viewer.render({container});
     });
     </script>
-
-    <div><h1>DICOM Microscopy Viewer Example</h1></div>
-    <div id="root"></div>
+    <div class="container">
+      <div class="page-header">
+        <h1>
+          DICOM Microscopy Viewer Example
+        </h1>
+        <p>
+          This is a simple example rendering a Microscopy image
+        </p>
+        <a href="../">Go back to the Examples page</a>
+      </div>
+      <div id="root"></div>
+    </div>
   </body>
 </html>

examples/events/index.html

@@ -48,7 +48,7 @@
           const geometryType = event.target.id;
           disableToolList();
           window.viewer.activateDrawInteraction({ geometryType });
-          document.getElementById(`${geometryType}`).parentNode.setAttribute("class", "active");
+          document.getElementById(`${geometryType}`).setAttribute("class", "list-group-item active");
           disableCoreActions();
           toggleElement("activate_draw", true);
         });
@@ -132,7 +132,7 @@
           break;
           case CORE_ACTIONS.ACTIVATE_DRAW:
             viewer.activateDrawInteraction({ geometryType: "polygon" });
-            document.getElementById("polygon").parentNode.setAttribute("class", "active");
+            document.getElementById("polygon").setAttribute("class", "list-group-item active");
           break;
         }
         toggleElement(targetId, true);
@@ -143,7 +143,7 @@
       }
 
       function disableToolList(){
-        const toolList = document.getElementById("tools-list").querySelector("li.active")
+        const toolList = document.getElementById("tools-list").querySelector("a.active")
         if(toolList !== null){
           toolList.classList.remove("active");
         }
@@ -170,7 +170,7 @@ <h4 class="list-group-item-heading">${eventType}</h4>
 
         if(eventType === 'roi_added'){
           const rois = document.getElementById("rois");
-          const json = JSON.stringify(content.payload.scoord3d, undefined, 2).replace(/"/g, "");
+          const json = JSON.stringify(content.payload.scoord3d.graphicData, undefined, 2).replace(/"/g, "");
           const newROI = `<div class="list-group-item" title="${json}">
             <h4 class="list-group-item-heading">${Object.keys(content.payload.properties)[0]}</h4>
             <p class="list-group-item-text">${new Date(content.time).toLocaleTimeString()}</p>
@@ -248,7 +248,7 @@ <h1>
 
       <div class="bs-example" data-example-id="simple-thumbnails">
         <div class="row">
-          <div class="col-xs-6 col-md-2">
+          <div class="col-xs-6 col-md-4">
             <div class="alert alert-warning text-center" role="alert">Attach/Detach event listeners</div>
             <div class="list-group" id="event-list">
               <a id="roi_added" class="list-group-item active">ROI Added</a>
@@ -259,6 +259,23 @@ <h1>
               <a id="move_started" class="list-group-item active">Move Started</a>
               <a id="move_ended" class="list-group-item active">Move Ended</a>
             </div>
+          </div>
+          <div class="col-xs-6 col-md-4" >
+            <div class="alert alert-warning text-center" role="alert">Select the tool to use for drawing</div>
+            <div class="list-group" id="tools-list">
+              <a id="polygon" class="list-group-item active">Polygon</a>
+              <a id="point" class="list-group-item">Point</a>
+              <a id="circle" class="list-group-item">Circle</a>
+              <a id="box" class="list-group-item">Box</a>
+              <a id="freehandpolygon" class="list-group-item">Freehand Polygon</a>
+              <a id="line" class="list-group-item">Line</a>
+              <a id="freehandline" class="list-group-item">Freehand Line</a>
+            </div>
+            <br/>
+            
+            
+          </div>
+          <div class="col-xs-12 col-md-4" >
             <div class="alert alert-warning text-center" role="alert">Core actions</div>
             <div class="list-group" id="core-actions">
               <a id="activate_draw" class="list-group-item active">Activate Draw</a>
@@ -267,18 +284,7 @@ <h1>
               <a id="activate_modifications" class="list-group-item">Activate ROI Modification</a>
             </div>
           </div>
-          <div class="col-xs-6 col-md-7" >
-            <div class="alert alert-warning text-center" role="alert">Select below the tool you want to use to draw</div>
-            <ul class="nav nav-pills" id="tools-list">
-              <li role="presentation" class="active"><a id="polygon">Polygon</a></li>
-              <li role="presentation"><a id="point">Point</a></li>
-              <li role="presentation"><a id="circle">Circle</a></li>
-              <li role="presentation"><a id="box">Box</a></li>
-              <li role="presentation"><a id="freehandpolygon">Freehand Polygon</a></li>
-              <li role="presentation"><a id="line">Line</a></li>
-              <li role="presentation"><a id="freehandline">Freehand Line</a></li>
-            </ul>
-            <br/>
+          <div class="col-xs-12 col-md-12">
             <div
               style="width:100%;height:550px;position:relative;display:inline-block;"
               oncontextmenu="return false"
@@ -293,11 +299,13 @@ <h1>
               ></div>
 
             </div>
-            <div class="alert alert-warning text-center" role="alert">ROIs added (mouseover to see the coordinates or click to remove)</div>
-            <ul class="list-group" id="rois">
-            </ul>
           </div>
-          <div class="col-xs-6 col-md-3">
+          <div class="col-xs-6 col-md-6">
+              <div class="alert alert-warning text-center" role="alert">ROIs added (mouseover to see the coordinates or click to remove)</div>
+              <ul class="list-group" id="rois">
+              </ul>
+          </div>
+          <div class="col-xs-6 col-md-6">
             <div class="alert alert-warning text-center" role="alert">Event Log</div>
             <div class="list-group scrollable" id="log"></div>
           </div>

src/api.js

@@ -574,6 +574,7 @@ class VLWholeSlideMicroscopyImageViewer {
         logo: false
       });
     } else {
+      
       this[_map] = new Map({
         layers: [imageLayer, this[_drawingLayer]],
         view: view,