Update interface.js

interface.js

@@ -76,6 +76,41 @@ const currentScriptTag = document.currentScript;
     ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle">⦿</button>`
     : '';
 
+  // ----------------- COLOR BUTTONS (will be inserted after the main viewer controls) ----------------------
+  const colorBtnContainerId = `color-btn-container-${instanceId}`;
+  // Only red and white for now. Extend array to add more colors later.
+  const colorButtonsConfig = [
+    {
+      id: `color-btn-white-${instanceId}`,
+      label: '',
+      title: 'Blanc',
+      color: [1, 1, 1],
+      style: 'background: #fff; border: 1.5px solid #bbb;'
+    },
+    {
+      id: `color-btn-red-${instanceId}`,
+      label: '',
+      title: 'Rouge',
+      color: [0.7, 0.05, 0.05],
+      style: 'background: #d00; border: 1.5px solid #b33;'
+    }
+  ];
+  // The colorBtnContainer is inserted into the widget HTML
+  const colorButtonsHTML = `
+    <div id="${colorBtnContainerId}" class="color-btn-container">
+      ${colorButtonsConfig.map(btn => `
+        <button
+          id="${btn.id}"
+          class="widget-button color-btn"
+          title="${btn.title}"
+          style="${btn.style}; right: 172px; width: 32px; height: 32px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center;"
+          tabindex="0"
+        ></button>
+      `).join('\n')}
+    </div>
+  `;
+  // ---------------------------------
+
   widgetContainer.innerHTML = `
     <div id="viewer-container-${instanceId}" class="viewer-container">
       <div id="progress-dialog-${instanceId}" class="progress-dialog">
@@ -87,6 +122,7 @@ const currentScriptTag = document.currentScript;
         <span class="reset-icon">⟲</span>
       </button>
       ${tooltipsButtonHTML}
+      ${colorButtonsHTML}
       <div id="menu-content-${instanceId}" class="menu-content">
         <span id="help-close-${instanceId}" class="help-close">×</span>
         <div class="help-text"></div>
@@ -116,6 +152,10 @@ const currentScriptTag = document.currentScript;
   const tooltipImage        = document.getElementById('tooltip-image');
   const tooltipCloseBtn     = document.getElementById('tooltip-close');
 
+  // Get color button DOM elements (by ID)
+  const colorBtnContainer = document.getElementById(colorBtnContainerId);
+  const colorBtnElements = colorButtonsConfig.map(btn => document.getElementById(btn.id));
+
   const isIOS    = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
   const isMobile = isIOS || /Android/i.test(navigator.userAgent);
 
@@ -124,7 +164,7 @@ const currentScriptTag = document.currentScript;
     : '';
 
   if (isMobile) {
-    helpTextDiv.innerHTML = 
+    helpTextDiv.innerHTML =
       '- Déplacez vous en glissant deux doigts sur l\'écran.<br>' +
       '- Orbitez en glissant un doigt.<br>' +
       '- Zoomez en pinçant avec deux doigts.<br>' +
@@ -132,7 +172,7 @@ const currentScriptTag = document.currentScript;
       '- Cliquez sur ⟲ pour réinitialiser la caméra.<br>' +
       '- Cliquez sur ⇱ pour passer en plein écran.<br>';
   } else {
-    helpTextDiv.innerHTML = 
+    helpTextDiv.innerHTML =
       '- Orbitez avec le clic droit<br>' +
       '- Zoomez avec la molette<br>' +
       '- Déplacez vous avec le clic gauche<br>' +
@@ -383,6 +423,20 @@ const currentScriptTag = document.currentScript;
 
   tooltipCloseBtn.addEventListener('click', hideTooltipPanel);
 
+  // ----------------- COLOR BUTTON LOGIC (click handler) -----------------
+  colorBtnElements.forEach((btnEl, idx) => {
+    if (!btnEl) return;
+    btnEl.addEventListener('click', (e) => {
+      e.preventDefault();
+      // Defensive: Wait until changeColor function is available and model loaded
+      if (viewerModule && typeof viewerModule.changeColor === 'function') {
+        const [r, g, b] = colorButtonsConfig[idx].color;
+        viewerModule.changeColor(r, g, b);
+      }
+    });
+  });
+  // ----------------------------------------------------------------------
+
   document.addEventListener('tooltip-selected', (evt) => {
     // Always show panel, cancel hide first
     if (dragHide) {