ivmartel/dwv-angular

Medical image viewer using DWV (DICOM Web Viewer) and Angular.

dwv-angular

Medical viewer using DWV (DICOM Web Viewer) and Angular.

All coding/implementation contributions and comments are welcome. Releases should be ready for deployment otherwise download the code and install dependencies with a yarn or npm install.

dwv-angular is not certified for diagnostic use. Released under GNU GPL-3.0 license (see license.txt).

Available Scripts

• install: install dependencies
• start: serve with hot reload at localhost:4200
• lint: run linting
• test: run unit tests with hot reload
• e2e: run e2e tests
• build: build (add --prod for production)

Unit tests use Karma and e2e tests use Protractor.

This project was generated with Angular CLI version 1.7.3.

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Steps to run the viewer from scratch

# get the code
git clone https://github.com/ivmartel/dwv-angular.git

# move to its folder
cd dwv-angular

# install dependencies
yarn install

# call the start script to launch the viewer on a local server
yarn run start

You can now open a browser at http://localhost:4200 and enjoy!

dwv-angular's Issues

Update to Angular 7

Following steps of https://update.angular.io/

An in-range update of @angular-devkit/build-angular is breaking the build 🚨

The devDependency @angular-devkit/build-angular was updated from 0.13.8 to 0.13.9.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular-devkit/build-angular is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Activate dwv decoders

dwv decoders are needed to decode JPEG encoded DICOM data. They come as web workers and their script must be accessible.

Adding JQUI

Can you add JQUI like this image ?

Update to Angular v11

Angular 11 is out!! See version-11-of-angular-now-available.

Update dwv to v0.25.2

A new version of dwv is out. It does not have the fitToWindow option so the code must be updated to compensate for it.

An in-range update of @angular/cli is breaking the build 🚨

The devDependency @angular/cli was updated from 7.2.4 to 7.3.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular/cli is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Is it possible to X appear as soon as i select an annotation.

When I select and move an annotation the X appears to delete it, So is it possible to X appear as soon as i select an annotation. Can you please suggest me if this thing is possible and how.

Disable window/level for images and non monochrome dicom data

The window and level tool must be disabled for image data and non monochrome dicom data. It is not a recommended operation.

Ruler not picking the length in case of my Image

Hello Team ,

I am facing an issue where while adding a new annotation on my image using Ruler ,it is not depicting the correct length of the line drawn. It is just displaying me "{length} " keyword . This happens in case of the images used by us only . It works fine with other images .

I have also checked the QuantifyLine method and found that spacing calculated is returned as null when I am using this image .

Please let me know how I could solve this issue . I have attached the image in the zip file .

Image.zip

How to add an unit for Ruler?

i see the DWV demo 's ruler has an unit 'mm', but in dwv-angular version, ruler only has a number value.

i failed to find the method in DWV document ,so i tried to find method in the source code https://github.com/ivmartel/dwv/blob/2aeff617def324d078597c0e9bdadfe6674ebae9/src/math/line.js#L227 . although i maybe find it, but i still have no idea about how to resolve my question.

Update dwv to v0.27

dwv 0.27 will soon come out (🤞), prepare for it!

How to call or override dwv onSate, onRedo, onUndo, onToggle

Kindly provide details onSate, onRedo, onUndo, onToggle can be used in angular so a more use full control can be made.

How to Add Folder based upload functionality?

How to Add Folder based upload functionality like (+) toolkit functionality which exists in JavaScript code but not in Angular Version of dvw. @ivmartel

Undo, Redo (Ctrl+z, Ctrl+y) not working

I have integrated dwv module in my running project, all draw tools working correctly but i unable to undo and redo my drawings. Please help me out.

Thanks in advance.

An in-range update of @angular-devkit/build-angular is breaking the build 🚨

---

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

---

The devDependency @angular-devkit/build-angular was updated from 0.900.6 to 0.900.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular-devkit/build-angular is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

How to save json of all lines draw on image and load it with saved json file?

How to save json of all lines draw on image and load it with saved json file? @ivmartel

Kindly reply from where can i get all methods for other functionalities.

How to change the default Measurement Unit

We are using DWV module in our project for viewing the diacom images . The measurements which are made on an image could have measurement units like "mm","ms","cm","g" etc . But in DWV module it constraints us to use only one unit as "mm".

The code contained in DWV js file doesn't enables us to change this unit for use. So I am unable to change the unit dynamically for any new measurement taken on the image file.

Please help me to resolve this issue as it is stopping the current functionality of our project.

Add DICOM tags view

The user must be able to view the DICOM tags associated to the loaded data.

Depends on dwv/issues/498.

Can I play it automatically?

Can I automatically play multiple slices?
thx~!

How to delete an Draw with button click ?

Hi,
I am using dwv-angular library in my project.
Here I am not able to delete a draw with a button click. Can someone help me how to achieve this?

Thanks in Advance :)

https://github.com/ivmartel/dwv/tree/v0.27.0

Is https://github.com/ivmartel/dwv/tree/v0.27.0 available in the latest release of Angular?

An in-range update of @angular/cli is breaking the build 🚨

The devDependency @angular/cli was updated from 7.3.8 to 7.3.9.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular/cli is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

Release Notes for v7.3.9

Commits

@angular-devkit/build-angular (0.13.9)
Commit	Description	Notes
	update node-sass to 4.12.0 (#14358)	[Closes #14339]

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Not run in IE

I have run this project on chrome and its working perfectly. but same when in start in IE nothing is showing even error also not showing. Please help me out.

Thanks

UI components library

Hi!

I wonder if the intention of this repository is the development a directive to be included inside other components or maybe you want to build a complete Angular App. In this case, have you chosen or considered any library of components for this development?

There are a few good options:

• https://material.angular.io
• https://mdbootstrap.com/angular/
• https://valor-software.com/ngx-bootstrap
• https://ng-bootstrap.github.io
• https://www.primefaces.org/primeng
• https://vmware.github.io/clarity
• https://ui.lumapps.com

Not able to create 2 instances of the component

My issue happens when I try to create two instances of the dwv-angular component.
The rendering works fine: you can see side by side the two components in the screen with no problem at all. The thing is that the moment you try to drag & drop anything in the second component, it gets received by the first one. No matter in which viewer you drop the DICOMs, they always end up in the first viewer.

I have been looking through the source code and I am pretty sure that the problem comes with the dropBox class that the viewer template have. In the div that has that class is where the logic puts the information of the DICOMs. Having 1 dwv-angular component is the same as having 20: the logic always operates only in the first element of the DOM that has that class. In several parts of the source code the class dropBox is hardcoded.

I have tried to fix it and make it dynamic:

• I have put a parameter in the App() method, so now it is App(container), being container the div class where I want to put the viewer in.
• I have replaced all the hardcoded dropBox strings by a reference to the container.
• Then, in my component I have copied the dwv-angular component that you provide, but updated the call to App() to now pass the container class (i have two, drop1 and drop2). This name is received by the component as an input so that it is dynamic.
• Finally, i have added the class name dynamically too in the html template.
• It is generated correctly: I have two divs that have their corresponding classes (the first is drop1 and the second is drop2). I log the container name sent to App(container) and it also is correct.

However, the problem persists: it only applies the logic to the drop1 div, the first viewer.
If the logic was intended to work like this, it is not an Angular component, then: it is not reusable at all.
I would like to know if you know something about this that might help me.
Keep the good work going, the dwv software is very useful despite of this problem.
Thank you very much.

An in-range update of @angular/cli is breaking the build 🚨

---

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

---

The devDependency @angular/cli was updated from 9.0.6 to 9.0.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular/cli is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v9.0.7

Commits

@angular-devkit/build-angular (0.900.7)
Commit	Description	Notes
	add missing styles extensions in anyComponentStyle budget
	add defaults to reduce methods in bundle calculator	[Closes #17215]
@angular/cli (9.0.7)
Commit	Description	Notes
	allow for private use language subtags

---

---

Special Thanks

Minko Gechev, Charles Lyding, Wojciech Okoński, Alan Agius

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

How to set a specific tool by default in dwvApp.init()

I have this available tools and Dwi setup in my Angular component:

tools = ['Scroll', 'ZoomAndPan', 'WindowLevel', 'Draw'];

  setupDwvApp() {
    this.dwvApp = new dwv.App();
    this.dwvApp.init({
      containerDivId: this.name,
      tools: this.tools,
      shapes: ['Ruler'],
      isMobile: true
    });
  }

The thing is that each time I initialize the DwvApp, it is setting by default the first tool of the tools array (Scroll) as the selected tool.

Is it possible to manage which tool will be the selected tool at the time that I run the dwvApp.init() function?

An in-range update of @types/node is breaking the build 🚨

The devDependency @types/node was updated from 10.11.0 to 10.11.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Can i reduce or increase annotation lines thickness.

I have three images, and run test with them but with some images the annotation lines are way too thick, so can i reduce or increase annotation lines thickness?

Thanks in advance

Add file/folder open

The viewer must provide a file/folder open in addition to the drag and drop.

An in-range update of @types/jasmine is breaking the build 🚨

The devDependency @types/jasmine was updated from 2.8.9 to 2.8.10.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/jasmine is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Add a reset view button

The user must be able to reset the zoom, pan and contrast.

Double click on label not working

Update to Angular 10

Announcement: version-10-of-angular-now-available
Steps: https://update.angular.io/#9.0:10.0l2

Add option to undo/redo

The viewer must provide a draw undo/redo.

project example's Window/Level tool is ineffective

i npm start the project ,when i toggle tools to Window/level ，i find it no work in angular DWV version

Add a progress bar

For the file download and possible decoding.

How is canvas getting where the file is ?

Update to Angular 6

Version 6 of Angular is out, see the blog post and the update steps.

Add window/level preset chooser

The viewer must provide a drop-down menu with different window/level pre-sets: the ones of the DICOM file, modality specific ones and some user specific.

An in-range update of angular2 is breaking the build 🚨

There have been updates to the angular2 monorepo:

• • The dependency @angular/material was updated from 8.1.4 to 8.2.0.

• The dependency @angular/cdk was updated from 8.1.4 to 8.2.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the angular2 group definition.

angular2 is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for silicon-neuron

Highlights

New @angular/youtube-player package!

Earlier this year, we changed the name of this repo to "angular/components" to emphasisze our goal
to provide more than only Material Design components. The 8.2.0 release includes one of the next new
features in that regard- a new package that wraps the
YouTube Player API for iframe Embeds
in an easy-to-use Angular component.

You can see the
documentation on GitHub
for the time being.

Big thanks to @YourDeveloperFriend for contributing this!

Bug Fixes

• autocomplete: unable to open panel via click inside shadow DOM (#15616) (6e1fe2c), closes #15606
• button: fix typo in comment (#17001) (5fb0d57)
• card: stroked buttons missing margin (#16576) (399ed29), closes #16546
• chips: allow null to be set as chip value (#16950) (57998a2), closes #16844
• chips: preselected chip not highlighted on init inside OnPush component (#16868) (aad7ff7), closes #16841
• drag-drop: connected drop zones not working inside shadow root (#16899) (6009211), closes #16898
• drag-drop: drop list ref sorting disabled by default (#16963) (306e07c), closes #16961
• drag-drop: error if custom preview or placeholder node is not an element (#16409) (8a4bed5)
• drag-drop: handle list and viewport auto scroll regions overlapping (#16675) (792e886), closes #16647
• drag-drop: handle the element going out of the boundary after a viewport resize (#16874) (44b8a47), closes #16536
• drag-drop: incorrectly constraining element position if size changes between drag sequences (#16876) (cad0102), closes #15749
• drag-drop: preview position relative to cursor thrown off if item has margin (#16180) (46cf45f), closes #16171
• drag-drop: unable to drop into connected sibling that was scrolled into view (#16681) (dd59044)
• expansion: show header focus state when expanded (#16486) (7bf5e4e)
• icon: not copying attributes from symbol nodes (#16896) (425eb7e), closes #16892
• icon: use ErrorHandler to log MatIcon errors (#16967) (dccddd9)
• icon: use ErrorLogger to log http errors (#16855) (75686e8)
• menu: keyboard controls not working if all items are disabled (#16572) (d3f63a3), closes #16565
• menu: restore focus immediately when menu is closed (#16960) (bfa1853), closes #16954
• paginator: MatPaginatorIntl will now cause MatPaginator to display an 'EN DASH' (U+2013) rather than a 'HYPHEN-MINUS' (U+002D) by default
• progress-spinner: animation node inserted into wrong style root when using ngIf with ShadowDom encapsulation (#16982) (dadb3e1)
• radio: clear aria attributes from host node (#16938) (237e030), closes #16913
• slider: displayWith function never called with "null" (#16707) (17c8983)
• snack-bar: don't stretch to fullscreen in landscape orientation (#16940) (8d12902), closes #16911
• snack-bar: too tall under some circumstances in Safari (#16679) (e9baa09), closes #16605
• tabs: tab nav bar not highlighting active tab if rendered after init (#16624) (93e9415), closes #16607
• tooltip: avoid adding same aria description as trigger's aria-label (#16870) (1006cc2), closes #16719

Features

• dialog: allow for custom ComponentFactoryResolver to be passed in (#16437) (565bd7d), closes #16431
• dialog: expose current dialog state (#16691) (3f0268f), closes #16636
• dialog: don't override type attribute if set on mat-dialog-close (#16927) (3ee3ecb), closes #16909 #16909
• form-field: allow hideRequiredMarker default value to be configured through the MAT_FORM_FIELD_DEFAULT_OPTIONS (#16244) (94c3fed), closes #16243
• icon: allow viewBox to be configured when registering icons (#16320) (3638886), closes #2981 #16293
• moment-date-adapter: implement strict mode (#16462) (dd42956)
• overlay: allow width/height when using point as flexible origin (#16739) (b98a3bd), closes #16160
• select: allow for typeahead debounce interval to be customized (#16579) (f23a56a), closes #16472
• sort: remove hammer dependency (#16951) (7594ca1)

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

In draw length is NOT Showing

Hi,
I download this project locally and I load my own dicom image using loadURLs method and in the draw, it's not show ing length.

One more issue is after image loaded if I try to use default selected tool scroll it's not working, I change the tool to draw and draw something, After changing the tool to scroll only it's working.

Add meta data information overlay

The viewer must provided a meta data information overlay.

Select Freehand annotation tool, try to move the dots, they do not stick with the line

If i select the Freehand annotation tool, then try to move the dots, they do not stick with the line. Can you please update DWV node module with fixing this issue.

Thanks in Advance

Fix dwv drawing integration

Drawings, when integrated as other tools, complains about not being able to access the DrawStage. This must be checked...

Threshold Undo is not happening after 2 iteration with other tools

Created project in angular. when using threshold with range slider and going to another tool, and again coming to threshold tool and applying some range then undo is not working.

checked in dwv demo jquery link also here:
https://ivmartel.github.io/dwv-jqmobile/demo/stable/index.html?input=https%3A%2F%2Fraw.githubusercontent.com%2Fivmartel%2Fdwv%2Fmaster%2Ftests%2Fdata%2F%3Ffile%3Dbbmri-53323851.dcm%26file%3Dbbmri-53323707.dcm%26file%3Dbbmri-53323563.dcm%26file%3Dbbmri-53323419.dcm%26file%3Dbbmri-53323275.dcm%26file%3Dbbmri-53323131.dcm&dwvReplaceMode=void

but getting same problem here also.

Error in translation, i18nextXHRBackend

i18nextXHRBackend deprecated and giving error in initializing dwv.i18nInitialise()

If i want to update in dwv.tool.ShapeEditor

Hello,

If i want to update in dwv.tool.ShapeEditor, so how can i do that in my dwv.component.ts.
Please suggest me.

Thanks in Advance.

Update to Angular 9

Follow steps described in update.angular.io/#8.2:9.0.