leaders-of-digital-9-task/dicom-viewer
1
0
Fork 0
mirror of https://github.com/leaders-of-digital-9-task/dicom-viewer.git synced 2024-11-24 11:13:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

add ruler and so

Browse Source
This commit is contained in:
ilia 2022-11-01 11:33:54 +03:00
parent 11a5de61be
commit e26c615910
2 changed files with 155 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -11,7 +11,8 @@
<script type="text/javascript" src="https://cdn.rawgit.com/konvajs/konva/8.3.0/konva.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/konvajs/konva/8.3.0/konva.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/i18next/21.6.0/i18next.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/i18next/21.6.0/i18next.min.js"></script>
<script type="text/javascript" src="https://github.com/ivmartel/dwv/releases/download/v0.30.4/dwv-0.30.4.min.js"></script> <script type="text/javascript" src="https://ivmartel.github.io/dwv-jqmobile/demo/stable/node_modules/magic-wand-tool/dist/magic-wand.min.js"></script>
<script type="text/javascript" src="https://ivmartel.github.io/dwv-jqmobile/demo/stable/node_modules/dwv/dist/dwv.min.js"></script>
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>

230
index.js
View File

@ -4,18 +4,27 @@ var app = new dwv.App();
var circleFactory = new dwv.tool.draw.CircleFactory(); var circleFactory = new dwv.tool.draw.CircleFactory();
var roiFactory = new dwv.tool.draw.RoiFactory(); var roiFactory = new dwv.tool.draw.RoiFactory();
var freeHandFactory = new dwv.tool.draw.FreeHandFactory();
var rulerFactory = new dwv.tool.draw.RulerFactory();
schema = [] schema = []
var tools = { var tools = {
Scroll: {}, Scroll: {},
Draw: { Draw: {
options: ['Circle', 'Roi'], options: ['Circle', 'Roi', 'FreeHand', 'Ruler'],
type: 'factory' type: 'factory',
events: ['drawcreate', 'drawchange', 'drawmove', 'drawdelete']
}, },
ZoomAndPan: {}, ZoomAndPan: {},
WindowLevel: {}, WindowLevel: {},
Filter: {} Filter: {},
Livewire: {
events: ['drawcreate', 'drawchange', 'drawmove', 'drawdelete']
},
Floodfill: {
events: ['drawcreate', 'drawchange', 'drawmove', 'drawdelete']
}
}; };
app.init({ app.init({
@ -27,7 +36,18 @@ parent.postMessage({'type': 'getDicom', data: ""}, "*")
app.addEventListener('load', function () { app.addEventListener('load', function () {
app.setTool('Draw'); app.setTool('Draw');
app.setDrawShape('Circle') app.setDrawShape('Ruler')
setTimeout(() => {
console.log(postRuler())
}, 3000)
app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().addEventListener('mouseup', () => {
setTimeout(() => {
parent.postMessage({'type': 'returnDraws', data: postDraws()}, "*")
//console.log({'type': 'returnDraws', data: postDraws()})
}, 100)
})
}); });
function loadSchema(schema) { function loadSchema(schema) {
@ -74,6 +94,60 @@ function createCircle(circleData) {
} }
function createRuler(rulerData) {
app.setTool('Draw');
var styles = app.getToolboxController().getSelectedTool().style
points = rulerData.points.map((e) => {
return new dwv.math.Point2D(e.x, e.y)
})
var draw = rulerFactory.create(
points,
styles,
app.getActiveLayerGroup().getActiveViewLayer().getViewController()
)
draw.id(dwv.math.guid());
draw.draggable(true)
draw.addEventListener('mouseover', () => {
document.body.style.cursor = 'pointer'
})
draw.addEventListener('mouseout', () => {
document.body.style.cursor = 'default'
})
//drawCommand = new dwv.tool.DrawGroupCommand(draw, 'circle-group', app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer()['.position-group'][0], false)
posGroup = app.getActiveLayerGroup().getActiveDrawLayer().getDrawController().getCurrentPosGroup()
posGroup.add(draw)
app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().listening(true)
}
function createFreeHand(freeHandData) {
app.setTool('Draw');
var styles = app.getToolboxController().getSelectedTool().style
points = freeHandData.points.map((e) => {
return new dwv.math.Point2D(e.x, e.y)
})
var draw = freeHandFactory.create(
points,
styles,
app.getActiveLayerGroup().getActiveViewLayer().getViewController()
)
draw.id(dwv.math.guid());
draw.draggable(true)
draw.addEventListener('mouseover', () => {
document.body.style.cursor = 'pointer'
})
draw.addEventListener('mouseout', () => {
document.body.style.cursor = 'default'
})
//drawCommand = new dwv.tool.DrawGroupCommand(draw, 'circle-group', app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer()['.position-group'][0], false)
posGroup = app.getActiveLayerGroup().getActiveDrawLayer().getDrawController().getCurrentPosGroup()
posGroup.add(draw)
app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().listening(true)
}
function createRoi(circleData) { function createRoi(circleData) {
app.setTool('Draw'); app.setTool('Draw');
var styles = app.getToolboxController().getSelectedTool().style var styles = app.getToolboxController().getSelectedTool().style
@ -101,6 +175,8 @@ function createRoi(circleData) {
} }
function createDraws(drawsData) { function createDraws(drawsData) {
drawsData.data.map((e) => { drawsData.data.map((e) => {
if (e.type == 'Circle') { if (e.type == 'Circle') {
@ -109,6 +185,12 @@ function createDraws(drawsData) {
if (e.type == 'Roi') { if (e.type == 'Roi') {
createRoi(e) createRoi(e)
} }
if (e.type == 'FreeHand') {
createFreeHand(e)
}
if (e.type == 'Ruler') {
createRuler(e.data)
}
}) })
} }
@ -166,7 +248,43 @@ function postRois() {
function postDraws() { function postDraws() {
console.log(postRois()) console.log(postRois())
return JSON.parse(JSON.stringify(postCircles().concat(postRois()))) return JSON.parse(JSON.stringify(postCircles().concat(postRois()).concat(postFreeHand())))
}
function postFreeHand() {
roisAttrs = []
roisAttrs = roisAttrs.concat(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children[0].children.filter(e => e.attrs.name == 'freeHand-group').map((e) => {
return e.children.filter((e) => e.attrs.name == 'shape').map(e => {return {attrs: e.attrs, parent: e.parent.attrs}})
}))
return roisAttrs.flat().map((e) => {
var points = [];
for (var i = 0; i < e.attrs.points.length; i+=2) {
points.push({x: e.attrs.points[i], y: e.attrs.points[i+1]})
}
return {
type: 'FreeHand',
points: points,
id: e.parent.id
}
})
}
function postRuler() {
roisAttrs = []
roisAttrs = roisAttrs.concat(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children[0].children.filter(e => e.attrs.name == 'ruler-group').map((e) => {
return e.children.filter((e) => e.attrs.name == 'shape').map(e => {return {attrs: e.attrs, parent: e.parent.attrs}})
}))
return roisAttrs.flat().map((e) => {
var points = [];
for (var i = 0; i < e.attrs.points.length; i+=2) {
points.push({x: e.attrs.points[i], y: e.attrs.points[i+1]})
}
return {
type: 'FreeHand',
points: points,
id: e.parent.id
}
})
} }
@ -184,7 +302,7 @@ function receiveMessage(event)
} else if(data.type == "setTool"){ } else if(data.type == "setTool"){
if (data.data == "null"){ if (data.data == "null"){
app.setTool('Scroll'); app.setTool('Scroll');
} else if (data.data == 'Roi' || data.data == 'Circle'){ } else if (data.data == 'Roi' || data.data == 'Circle' || data.data == 'FreeHand'){
app.setTool('Draw'); app.setTool('Draw');
app.setDrawShape(data.data); app.setDrawShape(data.data);
} }
@ -213,6 +331,9 @@ function receiveMessage(event)
else if (data.type == 'loadSchema') { else if (data.type == 'loadSchema') {
schema = loadSchema(data.data) schema = loadSchema(data.data)
} }
else if (data.type == 'setIndex') {
setFrame(data.data)
}
} }
window.addEventListener("message", receiveMessage, false); window.addEventListener("message", receiveMessage, false);
@ -239,23 +360,27 @@ app.addEventListener('loadend', function () {
//range.max = app.getImage(0).getGeometry().getSize().get(2) - 1; //range.max = app.getImage(0).getGeometry().getSize().get(2) - 1;
}); });
app.addEventListener('drawchange', (e) => {
console.log(e)
})
// schema = [
// { schema = [
// 'url': 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm', {
// 'figures': [ 'url': 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm',
// {type: 'Circle', center: {x: 10, y: 100}, radius: 10}, 'figures': [
// {type: 'Roi', points: [{x: 10, y: 20}, {x: 100, y: 50}]} {type: 'Circle', center: {x: 10, y: 100}, radius: 10},
// ] {type: 'Roi', points: [{x: 10, y: 20}, {x: 100, y: 50}]}
// }, ]
// { },
// 'url': 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323707.dcm', {
// 'figures': [ 'url': 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323707.dcm',
// {type: 'Circle', center: {x: 10, y: 200}, radius: 10}, 'figures': [
// {type: 'Roi', points: [{x: 10, y: 30}, {x: 100, y: 50}]} {type: 'Circle', center: {x: 10, y: 200}, radius: 10},
// ] {type: 'Roi', points: [{x: 10, y: 30}, {x: 100, y: 50}]}
// } ]
// ] }
]
// schema = loadSchema(schema) // schema = loadSchema(schema)
@ -265,11 +390,11 @@ app.addEventListener('loadend', function () {
// app.loadURLs(schema[0]) // app.loadURLs(schema[0])
// app.loadURLs([ app.loadURLs([
// 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm', 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm',
// 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323707.dcm', 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323707.dcm',
// 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323563.dcm' 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323563.dcm'
// ]) ])
function setFrame(frameNumber) { function setFrame(frameNumber) {
var lg = app.getLayerGroupById(0); var lg = app.getLayerGroupById(0);
@ -286,7 +411,6 @@ function setFrame(frameNumber) {
function loadPictures(pictures) { function loadPictures(pictures) {
// app.deleteDraws() // app.deleteDraws()
deleteDraws() deleteDraws()
app.setTool('Draw')
pictures.map((e) => { pictures.map((e) => {
if (e.type == 'Circle') { if (e.type == 'Circle') {
createCircle(e) createCircle(e)
@ -300,57 +424,9 @@ function loadPictures(pictures) {
function deleteDraws() { function deleteDraws() {
app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().find('.circle-group').map((e) => e.destroy()) app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().find('.circle-group').map((e) => e.destroy())
app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().find('.roi-group').map((e) => e.destroy()) app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().find('.roi-group').map((e) => e.destroy())
app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().find('.freeHand-group').map((e) => e.destroy())
} }
app.addEventListener('load', () => {
// app.setDrawShape('Roi')
app.setTool("Scroll")
setFrame(0)
// loadPictures([
// {type: 'Circle', center: {x: 10, y: 100}, radius: 10},
// {type: 'Roi', points: [{x: 10, y: 20}, {x: 100, y: 50}]}
// ])
setTimeout(() => {
setFrame(1)
}, 1000)
var lg = app.getLayerGroupById(0);
var vc = lg.getActiveViewLayer().getViewController();
console.log(vc.getCurrentScrollIndexValue())
//app.getActiveLayerGroup().getActiveViewLayer().getViewController().setCurrentIndex(new dwv.math.Index(1))
app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().addEventListener('mouseup', () => {
setTimeout(() => {
parent.postMessage({'type': 'returnDraws', data: postDraws()}, "*")
//console.log({'type': 'returnDraws', data: postDraws()})
}, 100)
})
// createCircle({
// type: 'Circle',
// center: {
// x: 10, y: 100
// },
// radius: 100
// })
// setTimeout(() => {
// console.log(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children)
// }, 3000)
// createRoi({
// type: 'Roi',
// points: [
// {
// x: 100, y: 100
// },
// {
// x: 10, y: 100
// }
// ]
// })
// app.setDrawShape('Roi')
// setTimeout(() => {
// }, 3000)
// setTimeout(() => {
// }, 5000)
})
app.addEventListener('slicechange', function () { app.addEventListener('slicechange', function () {
// update slider on slice change (for ex via mouse wheel) // update slider on slice change (for ex via mouse wheel)
var lg = app.getLayerGroupById(0); var lg = app.getLayerGroupById(0);