{"id":13634608,"url":"https://github.com/fourctv/dicomViewerLib","last_synced_at":"2025-04-18T23:32:23.305Z","repository":{"id":33136034,"uuid":"152894570","full_name":"fourctv/dicomViewerLib","owner":"fourctv","description":"Angular 9+ DICOM Viewer Component and demo app","archived":false,"fork":false,"pushed_at":"2024-10-29T17:29:31.000Z","size":5358,"stargazers_count":44,"open_issues_count":25,"forks_count":41,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-03T05:32:59.065Z","etag":null,"topics":["angular-9","dicom-web-viewer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fourctv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-13T17:02:12.000Z","updated_at":"2025-02-24T17:47:07.000Z","dependencies_parsed_at":"2024-11-14T05:31:55.442Z","dependency_job_id":"cc80ae25-d574-4a07-9063-02aa2ee0b091","html_url":"https://github.com/fourctv/dicomViewerLib","commit_stats":{"total_commits":61,"total_committers":5,"mean_commits":12.2,"dds":"0.47540983606557374","last_synced_commit":"019f90f24b8a1412b0a50c4f5b159450c67d91b5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourctv%2FdicomViewerLib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourctv%2FdicomViewerLib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourctv%2FdicomViewerLib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourctv%2FdicomViewerLib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fourctv","download_url":"https://codeload.github.com/fourctv/dicomViewerLib/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804803,"owners_count":21164134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-9","dicom-web-viewer"],"created_at":"2024-08-02T00:00:27.268Z","updated_at":"2025-04-18T23:32:22.935Z","avatar_url":"https://github.com/fourctv.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Libraries"],"sub_categories":["Uncategorized","JavaScript"],"readme":"# Dicom Viewer Component\n\n[![Angular Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide)\n[![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n[![Dependency Status](https://david-dm.org/fourctv/dicomViewerLib.svg)](https://david-dm.org/fourctv/dicomViewerLib)\n[![devDependency Status](https://david-dm.org/fourctv/dicomViewerLib/dev-status.svg)](https://david-dm.org/fourctv/dicomViewerLib#info=devDependencies)\n[![npm version](https://badge.fury.io/js/dicomViewerLib.svg)](https://badge.fury.io/js/ng-dicomviewer)\n\nThis is an Angular 9+ DICOM Web Viewer Component, based on [CornerstoneJS](https://github.com/cornerstonejs) Project.\n\nIt includes a demo app that can be tried [here](https://fourctv.github.io/dicomViewerDemo/). Demo app source is included in the project.\n\n## Installation\n\nInstall via [NPM](https://www.npmjs.com):\n```\nnpm install ng-dicomviewer --save\n```\n\n### Add `cornerstonejs` dependencies\n\nThis component depends on `cornerstonejs`, so you need to also install `cornerstone` and `cornerstoneTools` modules into your project:\n```\nnpm install cornerstone-core cornerstone-math dicom-parser cornerstone-tools@2.5.0 --save\n```\n\n## Usage\n\n### Import **DICOMViewerModule**.\n\nYou need to import `DICOMViewerModule` into your `app.module.ts`, and include it into your imports:\n```\n...\nimport { DicomViewerModule } from 'ng-dicomviewer';\n...\n@NgModule({\n    imports: [\n...\n       DicomViewerModule\n...\n    ]\n    ...\n```\n\n### Add Cornerstone modules to your build\n\nYou need to manually force `cornerstone` libraries to be included into your build. For that you need to edit you `angular.json` file and add the following to the `architect.build.options.scripts`:\n```\n            \"scripts\": [\n              \"node_modules/cornerstone-core/dist/cornerstone.js\",\n              \"node_modules/cornerstone-math/dist/cornerstoneMath.js\",\n              \"node_modules/cornerstone-tools/dist/cornerstoneTools.js\",\n              \"node_modules/dicom-parser/dist/dicomParser.js\",\n              \"src/assets/cornerstone/lib/cornerstoneWADOImageLoader.js\"\n      \n            ]\n```\n\n(see example [here](https://github.com/fourctv/dicomViewerLib/blob/master/angular.json))\n\n### Add component to your page\n\n```\n  \u003cdiv style=\"height: 100%; width:100%;\"\u003e\n    \u003cdicom-viewer [enableViewerTools]=\"true\" style=\"height:100%; width:100%; margin: 10px;\"\u003e\u003c/dicom-viewer\u003e\n  \u003c/div\u003e\n```\n\n## API\n\nThe component includes some input properties and a method to load/show dicom images.\n\n### Input properties\n\n- enableViewerTools: a boolean `true|false` to indicate if Viewer tools should be enabled or not. Tools include Langth, Angle, Elliptical ROI, etc...\n- enablePlayTools: a boolean `true|false` to indicate if Play Clip tools should be enabled or not.\n- maxImagesToLoad: maximum number of images to load for display (default: 20). If more images are set for display, they will be loaded `maxImagesToLoad` at a time. If value is set to `0` or `-1`, no image loading limit will apply.\n- downloadImagesURL: optional property, if set a **Download Images** button will be enabled. The URI value set will be used to download all images as a `.zip` file.\n\n### DICOM Images to Display\n\nIn order to display a Study/Series one has to call the component's `loadStudyImages` method, passing an array of **Image Ids**. Those **Image Ids** will then be used to load images for display. Image loading uses `cornerstone` [Image Loaders](https://github.com/cornerstonejs/cornerstone/wiki/ImageLoader), so **[Image Ids](https://github.com/cornerstonejs/cornerstone/wiki/ImageIds)** must follow `cornerstone` [requirements](https://github.com/cornerstonejs/cornerstone/wiki/ImageIds).\n\n## Example\n\nThis project includes a demo application that allows one to select DICOM files for display. It can be found [here](https://github.com/fourctv/dicomViewerLib/blob/master/src/app/app.component.ts).\n\nThe example uses [Cornerstone WADO Image Loader](https://github.com/cornerstonejs/cornerstoneWADOImageLoader).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffourctv%2FdicomViewerLib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffourctv%2FdicomViewerLib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffourctv%2FdicomViewerLib/lists"}