Venomox DICOM Viewer

Okay, let's address those points. 1. **Upload Progress Indicator:** We'll add a visual cue in the viewport area while the image is loading. 2. **WW/WC Sliders:** We'll add range sliders (cursors) to control Window Width (Contrast) and Window Center (Luminosity) for DICOM images. These sliders will be disabled for non-DICOM images (JPEG, PNG). Here are the updated files: { "name": "venomox-viewer", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "cornerstone-core": "^2.6.1", "cornerstone-tools": "^6.0.6", "cornerstone-wado-image-loader": "^4.10.1", "cornerstone-web-image-loader": "^2.1.1", // Added for JPG/PNG "dicom-parser": "^1.8.21", "hammerjs": "^2.0.8" }, "devDependencies": { "vite": "^5.2.0" } } Venomox DICOM Viewer

:root { --bg-color: #121212; --primary-color: #2c2c2c; --secondary-color: #1e1e1e; --tertiary-color: #3a3a3a; --text-color: #e0e0e0; --text-color-secondary: #a0a0a0; --accent-color: #0dbfbf; /* Teal accent like OHIF */ --toolbar-height: 50px; --sidebar-width: 280px; /* Slightly wider for controls */ } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; width: 100%; overflow: hidden; /* Prevent body scrollbars */ font-family: 'Roboto', sans-serif; /* Common sans-serif font */ background-color: var(--bg-color); color: var(--text-color); font-size: 14px; /* Base font size */ } #app-container { display: flex; flex-direction: column; height: 100vh; /* Full viewport height */ } /* Toolbar */ #toolbar { height: var(--toolbar-height); background-color: var(--primary-color); display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--tertiary-color); flex-shrink: 0; /* Prevent toolbar from shrinking */ } .logo { font-weight: bold; font-size: 1.3em; /* Slightly larger logo */ color: var(--accent-color); margin-right: 25px; } .tool-group { display: flex; gap: 8px; /* Spacing between buttons */ } .tool-button, .file-upload-label { background-color: var(--secondary-color); color: var(--text-color); border: 1px solid var(--tertiary-color); padding: 6px 12px; /* Slightly larger buttons */ border-radius: 4px; cursor: pointer; font-size: 0.9em; transition: background-color 0.2s ease, color 0.2s ease; white-space: nowrap; /* Prevent wrapping */ } .tool-button:hover, .file-upload-label:hover { background-color: var(--tertiary-color); border-color: #555; } .tool-button.active { /* Style for the active tool button */ background-color: var(--accent-color); color: var(--primary-color); border-color: var(--accent-color); font-weight: bold; } .file-upload-label { display: inline-block; /* Allow padding and styling like a button */ } .spacer { flex-grow: 1; /* Pushes user-info to the right */ } /* Main Content Area */ #main-content { display: flex; flex-grow: 1; /* Takes remaining vertical space */ overflow: hidden; /* Prevent scrollbars here, manage within children */ } /* Sidebar */ #sidebar { width: var(--sidebar-width); background-color: var(--primary-color); border-right: 1px solid var(--tertiary-color); display: flex; flex-direction: column; flex-shrink: 0; /* Prevent sidebar from shrinking */ } .sidebar-header { padding: 12px; /* More padding */ font-weight: bold; border-bottom: 1px solid var(--tertiary-color); background-color: var(--secondary-color); text-align: center; font-size: 1.1em; flex-shrink: 0; } .sidebar-content { padding: 15px; overflow-y: auto; /* Allow scrolling if content exceeds height */ flex-grow: 1; color: var(--text-color-secondary); line-height: 1.5; } .sidebar-content p { margin-bottom: 8px; } .sidebar-content strong { color: var(--text-color); margin-right: 5px; } /* Sidebar Controls (Sliders) */ #dicom-controls { padding: 15px; border-top: 1px solid var(--tertiary-color); background-color: var(--secondary-color); flex-shrink: 0; } .control-group { margin-bottom: 15px; } .control-group label { display: block; margin-bottom: 5px; font-size: 0.9em; color: var(--text-color-secondary); } .control-group label span { /* Value display */ color: var(--text-color); font-weight: bold; min-width: 40px; display: inline-block; } .control-group input[type="range"] { width: 100%; cursor: pointer; } .control-group input[type="range"]:disabled { cursor: not-allowed; opacity: 0.5; } /* Viewport Area */ #viewport-area { flex-grow: 1; /* Takes remaining horizontal space */ background-color: var(--bg-color); /* Match body background */ display: flex; justify-content: center; align-items: center; padding: 10px; /* Some padding around the viewport */ overflow: hidden; /* Important for Cornerstone */ position: relative; /* Needed for loading overlay */ } #dicomImageContainer { width: 100%; /* Take available space */ height: 100%; /* Take available space */ /* Removed max-width/max-height to allow full fill */ background-color: #000; border: 1px solid var(--tertiary-color); position: relative; /* Needed for cornerstone + overlay */ color: var(--text-color-secondary); /* Text color for placeholder */ display: flex; align-items: center; justify-content: center; } #dicomImage { width: 100%; height: 100%; /* Cornerstone will take over this div */ } /* Style for cornerstone canvas */ #dicomImage canvas { display: block; /* Remove extra space below canvas */ } /* Loading Indicator Styles */ .loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; z-index: 10; /* Ensure it's above the canvas */ } .spinner { border: 4px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 4px solid var(--accent-color); width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom: 15px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } import dicomParser from 'dicom-parser'; import cornerstone from 'cornerstone-core'; import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'; import cornerstoneWebImageLoader from 'cornerstone-web-image-loader'; // Import web image loader import cornerstoneTools from 'cornerstone-tools'; import Hammer from 'hammerjs'; export function configureCornerstone() { // Setup Cornerstone Tools cornerstoneTools.external.cornerstone = cornerstone; cornerstoneTools.external.Hammer = Hammer; // Setup WADO Image Loader (for DICOM) cornerstoneWADOImageLoader.external.cornerstone = cornerstone; cornerstoneWADOImageLoader.external.dicomParser = dicomParser; // Setup Web Image Loader (for JPG, PNG) cornerstoneWebImageLoader.external.cornerstone = cornerstone; // Configure WADO Loader Web Workers const config = { maxWebWorkers: navigator.hardwareConcurrency || 1, startWebWorkersOnDemand: true, webWorkerPath: '/node_modules/cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoaderWebWorker.min.js', webWorkerTaskPaths: [], taskConfiguration: { decodeTask: { initializeCodecsOnStartup: false, // codecPath: '/node_modules/cornerstone-wado-image-loader/dist/cornerstoneWADOImageLoaderCodecs.min.js', }, }, }; try { // Initialize WADO Loader first if it's the primary type cornerstoneWADOImageLoader.webWorkerManager.initialize(config); console.log('Cornerstone WADO Image Loader Web Worker Manager Initialized'); } catch (error) { console.error('Failed to initialize Cornerstone WADO Image Loader Web Worker Manager:', error); console.warn('DICOM decoding might be slower or fail for certain transfer syntaxes.'); } // Initialize Cornerstone Tools cornerstoneTools.init({ showSVGCursors: true, }); // Register the image loaders with Cornerstone Core // Cornerstone will try loaders sequentially based on the imageId scheme cornerstone.registerImageLoader('wadouri', cornerstoneWADOImageLoader.wadouri.loadImage); cornerstone.registerImageLoader('web', cornerstoneWebImageLoader.loadImage); // 'web' scheme for JPG/PNG console.log('Cornerstone configured with WADO and Web Image Loaders'); } import cornerstone from 'cornerstone-core'; import cornerstoneTools from 'cornerstone-tools'; import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'; import cornerstoneWebImageLoader from 'cornerstone-web-image-loader'; // Import web loader import { configureCornerstone } from './cornerstone-config.js'; // Configure Cornerstone libraries (registers loaders) configureCornerstone(); // --- DOM Elements --- const fileInput = document.getElementById('imageFile'); const dicomImageElement = document.getElementById('dicomImage'); const container = document.getElementById('dicomImageContainer'); const sidebarContent = document.querySelector('#sidebar .sidebar-content'); const loadingIndicator = document.getElementById('loadingIndicator'); const wcSlider = document.getElementById('wcSlider'); const wwSlider = document.getElementById('wwSlider'); const wcValueSpan = document.getElementById('wcValue'); const wwValueSpan = document.getElementById('wwValue'); const dicomControlsDiv = document.getElementById('dicom-controls'); const toolButtons = document.querySelectorAll('#toolbar .tool-button'); // --- State --- let currentImage = null; let currentImageId = null; let isDicom = false; // --- Initialization --- try { cornerstone.enable(dicomImageElement); console.log('Cornerstone enabled on element'); resetUI(); // Set initial UI state } catch (error) { console.error('Failed to enable Cornerstone element:', error); container.textContent = 'Error initializing viewer. Check console.'; throw new Error("Cornerstone initialization failed."); } // --- Tool Setup --- const WwwcTool = cornerstoneTools.WwwcTool; const PanTool = cornerstoneTools.PanTool; const ZoomTool = cornerstoneTools.ZoomTool; const StackScrollMouseWheelTool = cornerstoneTools.StackScrollMouseWheelTool; cornerstoneTools.addTool(WwwcTool); cornerstoneTools.addTool(PanTool); cornerstoneTools.addTool(ZoomTool); cornerstoneTools.addTool(StackScrollMouseWheelTool); // --- Tool Activation Logic --- function setActiveTool(toolName) { const activeTool = toolName || 'Wwwc'; // Default to Wwwc if none specified console.log(`Attempting to activate tool: ${activeTool}`); // Define tool configurations const toolConfig = { Wwwc: { tool: WwwcTool, mouseButtonMask: 1 }, // Left Pan: { tool: PanTool, mouseButtonMask: 1 }, // Left (changed for button activation) Zoom: { tool: ZoomTool, mouseButtonMask: 1 }, // Left (changed for button activation) // Passive tools (don't conflict with mouse button 1) StackScroll: { tool: StackScrollMouseWheelTool, mouseButtonMask: 0 }, // No mouse button, uses wheel // Add other tools like Length, Angle etc. here if needed }; // Deactivate all primary (left button) tools first cornerstoneTools.setToolDisabled('Wwwc'); cornerstoneTools.setToolDisabled('Pan'); cornerstoneTools.setToolDisabled('Zoom'); // cornerstoneTools.setToolDisabled('Length'); // Example if other tools were added // Activate the selected tool with its primary mask if (toolConfig[activeTool] && toolConfig[activeTool].mouseButtonMask === 1) { if (activeTool === 'Wwwc' && !isDicom) { console.warn("WW/WC tool only available for DICOM images."); setActiveTool('Pan'); // Fallback to Pan if WWWC is selected for non-DICOM return; } cornerstoneTools.setToolActive(activeTool, { mouseButtonMask: 1 }); console.log(`${activeTool} tool activated with mask 1`); } else if (activeTool === 'StackScroll') { // StackScroll is passive, always active if applicable if (isDicom && currentImage?.data?.intString('x00280008') > 1) { cornerstoneTools.setToolActive('StackScrollMouseWheel', {}); } else { cornerstoneTools.setToolDisabled('StackScrollMouseWheel'); } } // Always keep secondary bindings active (Pan on Middle, Zoom on Right) cornerstoneTools.setToolActive('Pan', { mouseButtonMask: 4 }); // Middle mouse button Pan cornerstoneTools.setToolActive('Zoom', { mouseButtonMask: 2 }); // Right mouse button Zoom // Update button styles toolButtons.forEach(btn => { btn.classList.remove('active'); if (btn.dataset.tool === activeTool) { btn.classList.add('active'); } }); } // Add event listeners to tool buttons toolButtons.forEach(button => { const tool = button.dataset.tool; if (tool && tool !== 'StackScroll') { // Don't activate stack scroll via button click button.addEventListener('click', () => setActiveTool(tool)); } else if (tool === 'StackScroll') { // Maybe provide visual feedback but don't change active tool button.addEventListener('click', () => console.log("Stack Scroll is controlled by mouse wheel.")); } }); // --- File Loading --- fileInput.addEventListener('change', (event) => { const files = event.target.files; if (files && files.length > 0) { const file = files[0]; console.log('File selected:', file.name, file.type); resetUIBeforeLoad(file.name); // Show loading indicator, reset sidebar // Determine image loader based on file type/extension const fileType = file.type.toLowerCase(); const fileName = file.name.toLowerCase(); if (fileName.endsWith('.dcm') || fileType === 'application/dicom') { isDicom = true; currentImageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file); console.log('Using WADO Loader, generated imageId:', currentImageId); } else if (fileType.startsWith('image/jpeg') || fileType.startsWith('image/png') || fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.png')) { isDicom = false; currentImageId = cornerstoneWebImageLoader.wadouri.fileManager.add(file); console.log('Using Web Image Loader, generated imageId:', currentImageId); } else { console.error('Unsupported file type:', file.type, file.name); sidebarContent.innerHTML = `

Unsupported file type: ${file.name}

`; loadingIndicator.style.display = 'none'; resetSliders(); // Ensure sliders are reset/disabled isDicom = false; // Reset flag return; // Stop processing } displayImage(currentImageId, file.name); } else { console.log('No file selected'); } }); // --- Image Display Function --- async function displayImage(imageId, fileName) { if (!imageId) return; try { console.log(`Loading image: ${imageId}`); currentImage = await cornerstone.loadImage(imageId); // Store globally console.log('Image loaded:', currentImage); const viewport = cornerstone.getDefaultViewportForImage(dicomImageElement, currentImage); console.log('Default viewport:', viewport); // Crucial: Reset tool states for the element before displaying new image cornerstoneTools.clearToolState(dicomImageElement, 'stack'); // Add resets for other tools if they store persistent state cornerstone.displayImage(dicomImageElement, currentImage, viewport); console.log('Image displayed'); // Fit image to container on initial load cornerstone.fitToWindow(dicomImageElement); // Update UI based on image type updateSidebarInfo(fileName); updateSlidersForImage(); setActiveTool(document.querySelector('#toolbar .tool-button.active')?.dataset.tool || 'Wwwc'); // Re-apply active tool, considering DICOM status // Add event listeners for viewport changes AFTER image is loaded attachViewportListeners(dicomImageElement); // Handle stack tool state for DICOM if (isDicom) { const numberOfFrames = currentImage.data?.intString('x00280008'); if (numberOfFrames && parseInt(numberOfFrames, 10) > 1) { console.log(`Multi-frame DICOM detected (${numberOfFrames} frames). Enabling stack scroll.`); const imageIds = Array(parseInt(numberOfFrames, 10)).fill(imageId); // Simplistic stack for now const stack = { currentImageIdIndex: 0, imageIds: imageIds }; cornerstoneTools.addToolState(dicomImageElement, 'stack', stack); cornerstoneTools.setToolActive('StackScrollMouseWheel', {}); // Ensure active updateSidebarInfo(fileName); // Update sidebar again with frame info } else { cornerstoneTools.setToolDisabled('StackScrollMouseWheel'); // Disable if single frame } } else { cornerstoneTools.setToolDisabled('StackScrollMouseWheel'); // Disable for non-DICOM } } catch (error) { console.error('Error loading or displaying image:', error); dicomImageElement.textContent = ''; // Clear placeholder sidebarContent.innerHTML = `

Error loading ${fileName}: ${error.message}. Check console.

`; resetUI(); // Reset UI elements on error } finally { loadingIndicator.style.display = 'none'; // Hide loading indicator } } // --- UI Update Functions --- function resetUI() { sidebarContent.innerHTML = '

Upload an image (DICOM, JPG, PNG) to begin.

'; dicomImageElement.textContent = 'Upload an image to view'; // Placeholder text resetSliders(); currentImage = null; currentImageId = null; isDicom = false; setActiveTool('Pan'); // Default to a safe tool like Pan } function resetUIBeforeLoad(fileName) { loadingIndicator.style.display = 'flex'; // Show loading indicator dicomImageElement.innerHTML = ''; // Clear previous image/text sidebarContent.innerHTML = `

Loading ${fileName}...

`; resetSliders(); // Disable sliders during load // Remove old listeners to prevent updates on stale data dicomImageElement.removeEventListener('cornerstonenewimage', handleViewportChange); dicomImageElement.removeEventListener('cornerstoneviewportupdated', handleViewportChange); } function updateSidebarInfo(fileName) { if (!currentImage) { resetUI(); return; } let infoHtml = `

File: ${fileName || 'N/A'}

`; const viewport = cornerstone.getViewport(dicomImageElement); if (isDicom && currentImage.data) { const patientName = currentImage.data.string('x00100010') || 'N/A'; const studyDesc = currentImage.data.string('x00081030') || 'N/A'; const seriesDesc = currentImage.data.string('x0008103e') || 'N/A'; const imageType = currentImage.data.string('x00080008')?.split('\\') || ['N/A']; infoHtml += `

Patient: ${patientName}

Study: ${studyDesc}

Series: ${seriesDesc}

Type: ${imageType[0]}

`; if (viewport) { infoHtml += `

WW/WC: ${Math.round(viewport.voi.windowWidth)} / ${Math.round(viewport.voi.windowCenter)}

`; } const numberOfFrames = currentImage.data.intString('x00280008'); if (numberOfFrames && parseInt(numberOfFrames, 10) > 1) { const stackState = cornerstoneTools.getToolState(dicomImageElement, 'stack'); const currentFrame = stackState ? stackState.data[0].currentImageIdIndex + 1 : 1; infoHtml += `

Frame: ${currentFrame} / ${numberOfFrames}

`; } } else { // Basic info for non-DICOM infoHtml += `

Width: ${currentImage.width}px

Height: ${currentImage.height}px

`; } if (viewport) { infoHtml += `

Zoom: ${viewport.scale.toFixed(2)}x

`; } sidebarContent.innerHTML = infoHtml; } // --- Slider Handling --- function resetSliders() { wwSlider.disabled = true; wcSlider.disabled = true; wwSlider.value = wwSlider.min || 0; // Reset position wcSlider.value = wcSlider.min || 0; wwValueSpan.textContent = 'N/A'; wcValueSpan.textContent = 'N/A'; dicomControlsDiv.style.display = 'none'; // Hide controls area } function updateSlidersForImage() { if (isDicom && currentImage && currentImage.data) { dicomControlsDiv.style.display = 'block'; // Show controls area const voi = cornerstone.getViewport(dicomImageElement)?.voi; const imageMin = currentImage.minPixelValue ?? 0; const imageMax = currentImage.maxPixelValue ?? 1000; // Default max if undefined const range = imageMax - imageMin; // Configure WW slider wwSlider.min = 1; wwSlider.max = range > 1 ? range : 1000; // Avoid max < min wwSlider.value = voi?.windowWidth ?? (range / 2); // Default WW if needed wwSlider.step = 1; wwSlider.disabled = false; wwValueSpan.textContent = Math.round(wwSlider.value); // Configure WC slider wcSlider.min = imageMin; wcSlider.max = imageMax; wcSlider.value = voi?.windowCenter ?? (imageMin + range / 2); // Default WC if needed wcSlider.step = 1; wcSlider.disabled = false; wcValueSpan.textContent = Math.round(wcSlider.value); console.log(`Sliders updated: WW range [${wwSlider.min}-${wwSlider.max}], WC range [${wcSlider.min}-${wcSlider.max}]`); } else { resetSliders(); // Hide and disable for non-DICOM } } function updateViewportFromSliders() { if (!isDicom || !currentImage) return; const viewport = cornerstone.getViewport(dicomImageElement); if (!viewport) return; const newWW = parseFloat(wwSlider.value); const newWC = parseFloat(wcSlider.value); viewport.voi.windowWidth = newWW; viewport.voi.windowCenter = newWC; cornerstone.setViewport(dicomImageElement, viewport); // Update displayed values wwValueSpan.textContent = Math.round(newWW); wcValueSpan.textContent = Math.round(newWC); // No need to call updateSidebarInfo here, cornerstoneviewportupdated will handle it } // Attach listeners to sliders wwSlider.addEventListener('input', updateViewportFromSliders); wcSlider.addEventListener('input', updateViewportFromSliders); // --- Event Listeners --- function attachViewportListeners(element) { element.removeEventListener('cornerstonenewimage', handleViewportChange); // Remove old listener first element.removeEventListener('cornerstoneviewportupdated', handleViewportChange); // Remove old listener first element.addEventListener('cornerstonenewimage', handleViewportChange); element.addEventListener('cornerstoneviewportupdated', handleViewportChange); console.log("Viewport listeners attached"); } // Single handler for viewport updates function handleViewportChange(event) { // console.log(`Viewport event: ${event.type}`); // Log event type if (!currentImage) return; // Don't update if no image loaded const viewport = event.detail?.viewport; // Get viewport from event detail if (!viewport) return; // Update sidebar info (which includes WW/WC, Zoom, Frame) updateSidebarInfo(fileInput.files[0]?.name); // Update sliders only if DICOM and sliders are enabled if (isDicom && !wwSlider.disabled && !wcSlider.disabled) { // Check if the slider values already match the viewport to prevent infinite loops const currentSliderWW = parseFloat(wwSlider.value); const currentSliderWC = parseFloat(wcSlider.value); const viewportWW = Math.round(viewport.voi.windowWidth); const viewportWC = Math.round(viewport.voi.windowCenter); if (currentSliderWW !== viewportWW) { wwSlider.value = viewportWW; wwValueSpan.textContent = viewportWW; } if (currentSliderWC !== viewportWC) { wcSlider.value = viewportWC; wcValueSpan.textContent = viewportWC; } } } // Handle window resize window.addEventListener('resize', () => { try { const enabledElement = cornerstone.getEnabledElement(dicomImageElement); if (enabledElement && enabledElement.image) { cornerstone.resize(dicomImageElement, true); } } catch(e) { // console.warn("Resize error:", e); } }); import { defineConfig } from 'vite'; export default defineConfig({ server: { fs: { // Allow serving files from node_modules allow: ['..'] } }, build: { target: 'esnext' }, optimizeDeps: { // Ensure loaders are processed correctly by Vite's pre-bundling include: [ 'cornerstone-core', 'cornerstone-tools', 'cornerstone-wado-image-loader', 'cornerstone-web-image-loader', // Add web loader here 'dicom-parser', 'hammerjs' ] } }); **Key Changes:** 1. **`package.json`**: Added `cornerstone-web-image-loader` dependency for JPG/PNG support. 2. **`index.html`**: * Changed file input `id` to `imageFile` and `accept` attribute to include `.jpg`, `.jpeg`, `.png`. * Added a `#loadingIndicator` div inside `#dicomImageContainer` for the progress spinner. * Added a `#dicom-controls` div in the sidebar containing two `input type="range"` sliders (`wwSlider`, `wcSlider`) and spans to display their values (`wwValue`, `wcValue`). * Added `data-tool` attributes to tool buttons for easier selection in JS. 3. **`src/style.css`**: * Added styles for `#loadingIndicator`, `.spinner`, and the animation. * Added styles for `#dicom-controls`, `.control-group`, labels, sliders, and value spans. Made the sidebar slightly wider. * Added an `.active` class style for the selected tool button. 4. **`src/cornerstone-config.js`**: * Imported `cornerstone-web-image-loader`. * Initialized it and registered its loader function with Cornerstone Core using the `web` scheme (`cornerstone.registerImageLoader('web', ...)`). 5. **`src/main.js`**: * Imported `cornerstone-web-image-loader`. * Got references to the new HTML elements (loading indicator, sliders, value spans, controls div). * **File Input Logic**: Detects file type (DICOM vs. common web images) and selects the appropriate Cornerstone loader (`wadouri:` for DICOM, `web:` for others). Shows an error for unsupported types. * **Loading Indicator**: Shows `#loadingIndicator` before `cornerstone.loadImage()` and hides it in the `finally` block or on error. * **Slider Logic**: * `resetSliders()`: Disables sliders, resets values, hides the control area. * `updateSlidersForImage()`: Called after an image loads. If it's DICOM, it enables the sliders, calculates appropriate `min`/`max` values based on the image's pixel range, sets the initial slider values from the viewport, and shows the controls. If not DICOM, it calls `resetSliders()`. * `updateViewportFromSliders()`: Event handler for slider `input`. Gets current viewport, updates `voi.windowWidth`/`voi.windowCenter` from sliders, and calls `cornerstone.setViewport()`. * **Viewport Update Handling (`handleViewportChange`)**: Now updates both the sidebar text *and* the slider positions when the viewport changes (e.g., from mouse interaction), keeping everything synchronized. * **Tool Activation**: Modified `setActiveTool` to handle button clicks based on `data-tool` attribute and to disable the WW/WC tool if a non-DICOM image is active. It also ensures secondary bindings (middle/right mouse) remain active. The active tool button gets the `.active` class. * **UI Reset**: Added `resetUI` and `resetUIBeforeLoad` functions for better state management between loads and on errors. * **Sidebar Update**: `updateSidebarInfo` now shows different information based on whether `isDicom` is true. 6. **`vite.config.js`**: Added `cornerstone-web-image-loader` to `optimizeDeps.include` to help Vite's dependency pre-bundling. Now, when you upload a file: * You'll see a "Loading..." spinner overlay. * If it's DICOM, the WW/WC sliders will appear below the image info in the sidebar, initialized to the image's default values. You can use the sliders or the mouse (if WW/WC tool is active) to adjust contrast/luminosity, and both will stay in sync. Basic DICOM tags are shown. * If it's JPG/PNG, the sliders will remain hidden/disabled. Basic image dimensions are shown. Pan and Zoom tools will still work. * The currently active tool button in the toolbar will be highlighted.