Skip to content

Commit d3ed37f

Browse files
biharckbiharck
committed
creating a mobile layout
1 parent 9de2fd1 commit d3ed37f

File tree

2 files changed

+31
-30
lines changed

2 files changed

+31
-30
lines changed

‎examples/events/index.html‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
</noscript>
3232

3333
<script src="https://unpkg.com/dicomweb-client"></script>
34-
<!-- <script src="https://unpkg.com/dicom-microscopy-viewer"></script> -->
35-
<script src="../../build/dicom-microscopy-viewer.js"></script>
34+
<script src="https://unpkg.com/dicom-microscopy-viewer"></script>
35+
<!-- <script src="../../build/dicom-microscopy-viewer.js"></script> -->
3636
<script>
3737

3838
const CORE_ACTIONS = {
@@ -48,7 +48,7 @@
4848
const geometryType = event.target.id;
4949
disableToolList();
5050
window.viewer.activateDrawInteraction({ geometryType });
51-
document.getElementById(`${geometryType}`).parentNode.setAttribute("class", "active");
51+
document.getElementById(`${geometryType}`).setAttribute("class", "list-group-item active");
5252
disableCoreActions();
5353
toggleElement("activate_draw", true);
5454
});
@@ -132,7 +132,7 @@
132132
break;
133133
case CORE_ACTIONS.ACTIVATE_DRAW:
134134
viewer.activateDrawInteraction({ geometryType: "polygon" });
135-
document.getElementById("polygon").parentNode.setAttribute("class", "active");
135+
document.getElementById("polygon").setAttribute("class", "list-group-item active");
136136
break;
137137
}
138138
toggleElement(targetId, true);
@@ -143,7 +143,7 @@
143143
}
144144

145145
function disableToolList(){
146-
const toolList = document.getElementById("tools-list").querySelector("li.active")
146+
const toolList = document.getElementById("tools-list").querySelector("a.active")
147147
if(toolList !== null){
148148
toolList.classList.remove("active");
149149
}
@@ -170,7 +170,7 @@ <h4 class="list-group-item-heading">${eventType}</h4>
170170

171171
if(eventType === 'roi_added'){
172172
const rois = document.getElementById("rois");
173-
const json = JSON.stringify(content.payload.scoord3d, undefined, 2).replace(/"/g, "");
173+
const json = JSON.stringify(content.payload.scoord3d.graphicData, undefined, 2).replace(/"/g, "");
174174
const newROI = `<div class="list-group-item" title="${json}">
175175
<h4 class="list-group-item-heading">${Object.keys(content.payload.properties)[0]}</h4>
176176
<p class="list-group-item-text">${new Date(content.time).toLocaleTimeString()}</p>
@@ -248,7 +248,7 @@ <h1>
248248

249249
<div class="bs-example" data-example-id="simple-thumbnails">
250250
<div class="row">
251-
<div class="col-xs-6 col-md-2">
251+
<div class="col-xs-6 col-md-4">
252252
<div class="alert alert-warning text-center" role="alert">Attach/Detach event listeners</div>
253253
<div class="list-group" id="event-list">
254254
<a id="roi_added" class="list-group-item active">ROI Added</a>
@@ -259,6 +259,23 @@ <h1>
259259
<a id="move_started" class="list-group-item active">Move Started</a>
260260
<a id="move_ended" class="list-group-item active">Move Ended</a>
261261
</div>
262+
</div>
263+
<div class="col-xs-6 col-md-4" >
264+
<div class="alert alert-warning text-center" role="alert">Select the tool to use for drawing</div>
265+
<div class="list-group" id="tools-list">
266+
<a id="polygon" class="list-group-item active">Polygon</a>
267+
<a id="point" class="list-group-item">Point</a>
268+
<a id="circle" class="list-group-item">Circle</a>
269+
<a id="box" class="list-group-item">Box</a>
270+
<a id="freehandpolygon" class="list-group-item">Freehand Polygon</a>
271+
<a id="line" class="list-group-item">Line</a>
272+
<a id="freehandline" class="list-group-item">Freehand Line</a>
273+
</div>
274+
<br/>
275+
276+
277+
</div>
278+
<div class="col-xs-12 col-md-4" >
262279
<div class="alert alert-warning text-center" role="alert">Core actions</div>
263280
<div class="list-group" id="core-actions">
264281
<a id="activate_draw" class="list-group-item active">Activate Draw</a>
@@ -267,18 +284,7 @@ <h1>
267284
<a id="activate_modifications" class="list-group-item">Activate ROI Modification</a>
268285
</div>
269286
</div>
270-
<div class="col-xs-6 col-md-7" >
271-
<div class="alert alert-warning text-center" role="alert">Select below the tool you want to use to draw</div>
272-
<ul class="nav nav-pills" id="tools-list">
273-
<li role="presentation" class="active"><a id="polygon">Polygon</a></li>
274-
<li role="presentation"><a id="point">Point</a></li>
275-
<li role="presentation"><a id="circle">Circle</a></li>
276-
<li role="presentation"><a id="box">Box</a></li>
277-
<li role="presentation"><a id="freehandpolygon">Freehand Polygon</a></li>
278-
<li role="presentation"><a id="line">Line</a></li>
279-
<li role="presentation"><a id="freehandline">Freehand Line</a></li>
280-
</ul>
281-
<br/>
287+
<div class="col-xs-12 col-md-12">
282288
<div
283289
style="width:100%;height:550px;position:relative;display:inline-block;"
284290
oncontextmenu="return false"
@@ -293,11 +299,13 @@ <h1>
293299
></div>
294300

295301
</div>
296-
<div class="alert alert-warning text-center" role="alert">ROIs added (mouseover to see the coordinates or click to remove)</div>
297-
<ul class="list-group" id="rois">
298-
</ul>
299302
</div>
300-
<div class="col-xs-6 col-md-3">
303+
<div class="col-xs-6 col-md-6">
304+
<div class="alert alert-warning text-center" role="alert">ROIs added (mouseover to see the coordinates or click to remove)</div>
305+
<ul class="list-group" id="rois">
306+
</ul>
307+
</div>
308+
<div class="col-xs-6 col-md-6">
301309
<div class="alert alert-warning text-center" role="alert">Event Log</div>
302310
<div class="list-group scrollable" id="log"></div>
303311
</div>

‎src/api.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -560,9 +560,6 @@ class VLWholeSlideMicroscopyImageViewer {
560560
});
561561
}
562562

563-
const interactions = ol.interaction.defaults({altShiftDragRotate:false, pinchRotate:false});
564-
const controls = ol.control.defaults({rotate: false});
565-
566563
/*
567564
* Creates the map with the defined layers and view and renders it via
568565
* WebGL.
@@ -572,8 +569,6 @@ class VLWholeSlideMicroscopyImageViewer {
572569
layers: [imageLayer, this[_drawingLayer]],
573570
view: view,
574571
controls: [],
575-
interactions: interactions,
576-
controls: controls,
577572
loadTilesWhileAnimating: true,
578573
loadTilesWhileInteracting: true,
579574
logo: false
@@ -584,8 +579,6 @@ class VLWholeSlideMicroscopyImageViewer {
584579
layers: [imageLayer, this[_drawingLayer]],
585580
view: view,
586581
controls: [],
587-
interactions: interactions,
588-
controls: controls,
589582
loadTilesWhileAnimating: true,
590583
loadTilesWhileInteracting: true,
591584
logo: false

0 commit comments

Comments
 (0)