Merge pull request #180 from oss-slu/178-captions

Bone Image captions showing in correct view of bone display feature implemented and approved.

Author: UcheWendy

.DS_Store

@@ -247,6 +247,7 @@ <h2 style="color: #003366; text-align: center; margin-bottom: 25px; border-botto
     <script type="module" src="js/main.js"></script>
     <script type="module" src="js/imageDisplay.js"></script>
     <script type="module" src="js/annotationOverlay.js"></script>
+    <script type="module" src="js/imageCaptions.js"></script>
 
     <!-- Simple Escape Key Handler -->
     <script>
@@ -268,4 +269,4 @@ <h2 style="color: #003366; text-align: center; margin-bottom: 25px; border-botto
     </script>
 </body>
 
-</html>
+</html>

templates/boneset.html

@@ -0,0 +1,76 @@
+// js/imageCaptions.js
+// Image captions for bone images, extracted from PowerPoint slides
+
+export const imageCaptions = {
+  // Bony Pelvis (main boneset)
+  "bony_pelvis": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+
+  // Ilium and its subbones
+  "ilium": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "iliac_crest": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "anterior_iliac_spines": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "posterior_iliac_spines": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "auricular_surface": {
+    image1: "Right Pelvis(medial aspect)",
+    image2: null
+  },
+
+  // Ischium and its subbones
+  "ischium": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "ramus": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "ischial_tuberosity": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "ischial_spine": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "sciatic_notches": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+
+  // Pubis and its subbones
+  "pubis": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "pubic_rami": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: "Right Pelvis(medial aspect)"
+  },
+  "pectineal_line": {
+    image1: "Right Pelvis(medial aspect)",
+    image2: null
+  },
+  "symphyseal_surface": {
+    image1: "Right Pelvis(medial aspect)",
+    image2: null
+  },
+  "pubic_tubercle": {
+    image1: "Right Pelvis (lateral aspect)",
+    image2: null
+  }
+};

templates/js/coloredRegionsOverlay.js

@@ -2,7 +2,8 @@
 // Rendering helpers for the image area (no dropdown wiring).
 
 import { clearAnnotations, loadAndDrawAnnotations } from "./annotationOverlay.js";
-import { displayColoredRegions, clearAllColoredRegions } from './coloredRegionsOverlay.js';
+import { displayColoredRegions, clearAllColoredRegions } from "./coloredRegionsOverlay.js";
+import { imageCaptions } from "./imageCaptions.js";
 
 // Track the current boneId for colored regions
 let currentBoneId = null;
@@ -14,6 +15,14 @@ function getImageContainer() {
   );
 }
 
+/** Helper function to get captions for a boneId */
+function getCaptionsForBone(boneId) {
+  if (!boneId || !imageCaptions[boneId]) {
+    return { image1: null, image2: null };
+  }
+  return imageCaptions[boneId];
+}
+
 /** ---- Empty-state / clearing ------------------------------------------- */
 export function showPlaceholder() {
   const c = getImageContainer();
@@ -28,6 +37,12 @@ export function showPlaceholder() {
   clearAllColoredRegions();
   currentBoneId = null;
 
+  // Remove caption container if it exists
+  const captionContainer = document.getElementById("caption-container");
+  if (captionContainer) {
+    captionContainer.remove();
+  }
+
   // Remove black background class when showing placeholder
   const imagesContent = document.querySelector(".images-content");
   if (imagesContent) imagesContent.classList.remove("has-images");
@@ -40,6 +55,13 @@ export function clearImages() {
     clearAnnotations(c);
     clearAllColoredRegions();
   }
+  
+  // Remove caption container if it exists
+  const captionContainer = document.getElementById("caption-container");
+  if (captionContainer) {
+    captionContainer.remove();
+  }
+  
   currentBoneId = null;
   currentIsBonesetSelection = false; // Reset the flag
 
@@ -92,24 +114,40 @@ export function displayBoneImages(images, options = {}) {
 
 //** ---- Single image ------------------------------------------------------ */
 function displaySingleImage(image, container, options = {}) {
-  // 1. CRITICAL FIX: Add the 'single-image' class to the main container.
-  // This CSS class is required for the styles to correctly size the single image layout.
+  // Get captions for this bone
+  const captions = getCaptionsForBone(currentBoneId);
+  
   container.className = "single-image"; 
 
-  // 2. Simplification: Use innerHTML to directly create the necessary structure 
-  // (.single-image-wrapper > img), which better aligns with your CSS.
   container.innerHTML = `
     <div class="single-image-wrapper">
-      <img
-        class="bone-image"
-        src="${image.url || image.src || ""}"
-        alt="${image.alt || image.filename || "Bone image"}"
-      >
+      <div class="image-wrapper">
+        <img
+          class="bone-image"
+          src="${image.url || image.src || ""}"
+          alt="${image.alt || image.filename || "Bone image"}"
+        >
+      </div>
     </div>
   `;
 
-  // 3. Get reference to the image element for colored regions and event handlers
-  const img = container.querySelector('img');
+  // Create caption container OUTSIDE the image container if caption exists
+  if (captions.image1) {
+    const captionContainer = document.createElement("div");
+    captionContainer.id = "caption-container";
+    captionContainer.className = "single-image";
+    
+    const caption = document.createElement("div");
+    caption.className = "caption-box image-caption";
+    caption.textContent = captions.image1;
+    captionContainer.appendChild(caption);
+    
+    // Insert caption container after the image container
+    container.parentElement.insertBefore(captionContainer, container.nextSibling);
+  }
+  
+  // Get reference to the image element for colored regions and event handlers
+  const img = container.querySelector("img");
   if (img) {
     const loadColoredRegions = () => {
       img.classList.add("loaded");
@@ -137,7 +175,7 @@ function displaySingleImage(image, container, options = {}) {
     // Check if already loaded (cached) - use setTimeout to let browser process
     setTimeout(() => {
       if (img.complete && img.naturalHeight !== 0) {
-        console.log(`[ImageDisplay] Single image was cached, calling loadColoredRegions immediately`);
+        console.log("[ImageDisplay] Single image was cached, calling loadColoredRegions immediately");
         loadColoredRegions();
       }
     }, 0);
@@ -160,13 +198,20 @@ function applyRotation(imgEl, { rot_deg = 0, flipH = false } = {}) {
 }
 
 function displayTwoImages(images, container, options = {}) {
+  // Get captions for this bone
+  const captions = getCaptionsForBone(currentBoneId);
+  
   // Add the two-images class to the container for CSS styling
   container.className = "two-images";
 
+  // Create images first
   images.slice(0, 2).forEach((image, index) => {
     const imgItem = document.createElement("div");
     imgItem.className = "image-item";
 
+    const imgWrapper = document.createElement("div");
+    imgWrapper.className = "image-wrapper";
+
     const img = document.createElement("img");
     img.alt = image.alt || image.filename || "Bone image";
 
@@ -191,21 +236,44 @@ function displayTwoImages(images, container, options = {}) {
       imgItem.textContent = "Failed to load image.";
     });
 
-    imgItem.appendChild(img);
+    imgWrapper.appendChild(img);
+    imgItem.appendChild(imgWrapper);
     container.appendChild(imgItem);
 
     // Set src LAST - this triggers the load
     img.src = image.url || image.src || "";
 
     // Check if image is already loaded from cache after setting src
-    // Use setTimeout to allow the browser to process the src assignment first
     setTimeout(() => {
       if (img.complete && img.naturalWidth > 0) {
         console.log(`[ImageDisplay] Image ${index} was already cached, manually triggering load handler`);
         loadColoredRegions();
       }
     }, 10);
   });
+
+  // Create caption container AFTER images, OUTSIDE the grid
+  if (captions.image1 || captions.image2) {
+    const captionContainer = document.createElement("div");
+    captionContainer.id = "caption-container";
+    
+    if (captions.image1) {
+      const caption1 = document.createElement("div");
+      caption1.className = "caption-box image-caption";
+      caption1.textContent = captions.image1;
+      captionContainer.appendChild(caption1);
+    }
+    
+    if (captions.image2) {
+      const caption2 = document.createElement("div");
+      caption2.className = "caption-box image-caption";
+      caption2.textContent = captions.image2;
+      captionContainer.appendChild(caption2);
+    }
+    
+    // Insert caption container after the image container
+    container.parentElement.insertBefore(captionContainer, container.nextSibling);
+  }
 }
 
 /** ---- 3+ images grid ---------------------------------------------------- */
@@ -230,4 +298,4 @@ function displayMultipleImages(images, container) {
   });
 
   container.appendChild(wrapper);
-}
+}

templates/js/imageCaptions.js

@@ -161,7 +161,7 @@ class QuizManager {
     }
 
     /**
-     * Get image URL for an item
+     * Get image URL for an item....
      */
     getImageUrl(itemId) {
         // Use the API endpoint that serves bone images