dicom-viewer

2D/3D DICOM viewer with backend and frontend

Prerequisites:

• node & npm
• docker
• python

Prepare database

1. Navigate to the ./database directory.
2. Start the database container by running the following command:

 cd ./database
 docker-compose up -d

3. To populate the database, the backend has to be started at least once. Go to the ../backend directory and execute the following commands:

 cd ../backend
 npm i
 npm start

4. To migrate, go to /backend/src and run :

 cd src
 npx sequelize-cli db:migrate

Your database should be up and ready for the backend.

Run Backend

prerequisits v2.1

Since we’ve already installed the backend dependencies during the database setup, there’s no need to repeat that step. However, depending on your Python installation, you might need to make a small adjustment. Check if the command python --version works in your terminal. If it does, you're all set. Otherwise modify the line 48 in the file:

\backend\src\dicoms\dicom_slice.js

as follows:

var process = spawn("[AnyPythonExecutable]", [

Replace [AnyPythonExecutable] with the appropriate Python interpreter (e.g., python3, py, etc.) that works on your system.

actually running

Go to /dicom-viewer/backend and run:

 npm start

Run Frontend

prerequisits v2.2

To install all dependencies go to /dicom-viewer/frontend and run:

 npm i

actually running

Depending on your operating system:

MacOS & Linux

 npm start

Windows

 npm run start-pc

Component Diagram

The component diagram below offers a broad overview of the frontend architecture.

User Instructions: How to Interact with the Viewer

The DICOM viewer provides several interactions to help you examine the images. The following table shows how these interactions can be carried out.

Action	Instruction	Description
Read Coordinates/Grayscale Value	Hover	Displays coordinates and greyscale value in the top left corner.
Panning	Shift + Left Click + Drag	Shift + Move the camera (i. e. image is being moved).
Zooming	Two Fingers (Mac) or Right Click (Linux/Windows) + Drag Up/Down	Zoom in and out.
Rotating (Plane)	Ctrl + Left Click + Drag	Ctrl + Rotate the image within its plane.
Measuring	Measure Button + Left Click(s)	Measure Measure distances between points (one button click for each new line).
Rotating (3D Space)	3D Rotation Button + Left Click + Drag	Rotate the image in 3D space (not intended for 2D data but helpful for debugging and 3D data).
Reset to Standard 2D	Pan Button	Switch back to standard 2D interactions.
Scrolling	Scroll Button (Disabled)	Functionality not implemented.
Painting	Paint Button (Disabled)	Functionality not implemented.