Web App Overview

This is a zero-footprint DICOM viewer that runs entirely in your web browser. It's built using only vanilla JavaScript, HTML, and CSS, demonstrating the power of modern web technologies for medical imaging. The application can load and parse DICOM files, display the image, and allow for basic analysis tools like windowing, zoom, and pan. It also includes an experimental sonification feature to represent image data as sound.

How to Use

• Load Image: A synthetic DICOM image is loaded by default. The "Choose File" button is a placeholder in this demo; see the "Future Directions" section for how to implement real file parsing.
• Windowing: Adjust the "Window Center" and "Window Width" sliders to change the brightness and contrast of the image. This is crucial for visualizing different tissue types. Try a "brain window" (e.g., WC:40, WW:80) or a "bone window" (e.g., WC:400, WW:2000).
• Zoom: Use your mouse scroll wheel or a two-finger pinch gesture on a touchscreen to zoom in and out.
• Pan: Click and drag with your mouse or use a single finger to pan the image.
• Reset: Click the "Reset View" button to return the image to its default position, zoom, and windowing levels.
• Sonification: Toggle the sound on to hear an auditory representation of the image. The sound's frequency changes based on the pixel brightness directly under your cursor.

Technical Details

The application is contained within a single HTML file. The CSS is responsible for the responsive layout, ensuring it works on both desktop and mobile devices. The JavaScript code handles all the logic:

• DICOM Parsing: To keep this demo self-contained and focused on rendering, it does not include a full DICOM file parser. Instead, it uses a pre-defined JavaScript object that simulates the structure of a parsed DICOM file, complete with common metadata tags and a pixel data array. This allows the viewer to function without external libraries or user-provided files.
• Rendering: The pixel data is processed for windowing and then rendered onto an HTML5 Canvas. This allows for real-time manipulation of the image's appearance.
• Interactivity: Event listeners for mouse, keyboard, and touch events are used to implement the zoom, pan, and windowing controls. The state of the view (pan, zoom) is stored and used to apply transformations to the canvas.
• Sonification: The Web Audio API is used to generate sound. An oscillator is created, and its frequency is modulated based on the image data at the cursor's position.
• Synthetic Data: The initial image is procedurally generated to simulate a realistic CT brain slice, including structures like the skull, gray/white matter, and ventricles with appropriate Hounsfield Unit (HU) values.

Future Directions

This viewer serves as a foundation that can be extended in many ways:

• Real DICOM Parsing: To enable loading user-provided `.dcm` files, you can integrate a JavaScript DICOM parsing library. A popular choice is `dicom-parser`. You would read the file using the `FileReader` API and then pass the resulting `ArrayBuffer` to the library to extract the tags and pixel data.
• Support for more DICOM transfer syntaxes (e.g., compressed images).
• Advanced tools like measurements (lines, angles, areas) and annotations.
• Multi-frame DICOM support (e.g., for CT or MRI series) with a frame slider.
• More sophisticated sonification options, mapping different data aspects to various sound parameters.
• Implementing 3D rendering for volumetric data (MPR - Multi-Planar Reconstruction).