dicom_visualization

The DICOM Visualization module transforms your Drupal 10/11 site into a professional medical imaging platform by rendering standard file fields as high-performance, interactive DICOM viewers. By leveraging the industry-standard Cornerstone.js engine, it provides clinical-grade visualization tools directly within your content types, allowing researchers, educators, and healthcare professionals to view medical imaging data without the need for external software or heavy custom entities.

Key Features

Precision Metadata Overlays: Support for over 45 DICOM tags including Patient ID, Modality, and Study Date. Effortlessly map metadata to any of the four viewport quadrants (Top-Left, Top-Right, Bottom-Left, Bottom-Right).
Interactive Diagnostics: Equipped with advanced viewport controls including mouse-scroll zoom, window leveling (brightness/contrast adjustment), and fluid panning for detailed image inspection.
Pre-designed Medical Themes: Choose from 15+ professionally curated visual themes such as Midnight Blue, Neon Cyberpunk, and Medical Bone to match your application's aesthetic.
Flexible Display Modes: Render multiple DICOM files as a vertical stack, a scrollable gallery, or individual standalone viewers based on your specific use case.
Performance Optimized: Utilizes drupal_static caching and conditional library loading to ensure that high-resolution imaging data doesn't compromise your site's PageSpeed scores.
Zero-Custom Fields: Works seamlessly with Drupal's core File field. Simply allow the .dcm extension and the module handles the rest via a custom field formatter.

Installation

Install the module via Composer to ensure that the internal class structures and namespace mappings are correctly initialized.

composer require drupal/dicom_visualization

Enable the module using Drush:

drush en dicom_visualization

Configuration & Usage

The DICOM Visualization system is split between global configuration and per-field display settings:

Configure Field Settings: Navigate to Structure » Content types » [Your Type] » Manage fields. Edit your File field and add dcm to the Allowed file extensions list. This ensures the system recognizes medical imaging files.
Set the Formatter: Go to the Manage display tab. Locate your File field and change the formatter to DICOM File Formatter (for standard viewing) or DICOM Advanced File Formatter (for enhanced controls).
Adjust UI Settings: Click the Gear icon (⚙) on the right. Here you can select your preferred UI theme and determine how multiple DICOM files should stack in the viewer.
Global Configuration: To manage global tag mappings, quadrant placement, and overlay text colors, visit the /admin/dicom-configuration page.

Technical Standards

This module utilizes a modern JavaScript stack to ensure medical accuracy and cross-browser compatibility:

Cornerstone.js: The core engine for high-performance medical image rendering.
DICOM Parser: For secure, client-side metadata extraction directly from binary files.
Hammer.js: Provides native touch and gesture support, making the viewer fully responsive on tablets and mobile devices.

Requirements

This module requires Drupal 10.3+ or 11 and PHP 8.1+. It requires the core File module and is compatible with all modern evergreen browsers supporting WebGL.

Similar Projects

Supporting this Module

The DICOM Visualization module is an open-source project maintained to bridge the gap between web technology and medical imaging. Your contributions help keep the viewer accurate and secure:

Report Bugs: If you find issues with specific DICOM modalities or tag rendering, please report them in the Issue Queue.
Feature Requests: We are always looking to add new viewport tools, such as measurement rulers, angle calculations, or 3D volume rendering.
Translations: Help medical professionals worldwide by contributing translations for the admin interface via localize.drupal.org.

If this module helps your medical research or clinical project, please consider starring it on Drupal.org!