Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -2630,24 +2630,55 @@ document.getElementById('pdftodxfFile').addEventListener('input',function(){
   console.log(dxffile)
 });
 
-function ImgSide(imgdata, spreadsheetLink, pdfLink,pdfname,baxlink,xmllink) {
+
+function ImgSide(imgdata, spreadsheetLink, pdfLink, pdfname, baxlink, xmllink) {
     var backimg = document.getElementById('backgroundimg');
-    backimg.innerHTML=''
-    
-    // Create a container for the image and buttons
+    backimg.innerHTML = '';
+
+    // OUTER container: holds images div + buttons div
     var imgContainer = document.createElement('div');
     imgContainer.className = 'imgContainer';
-    
-    var imgcanvas = document.createElement("img");
-    imgcanvas.src = 'data:image/gif;base64,' + imgdata;
-    imgcanvas.height = 600;
-    imgcanvas.id = 'imgcanvas';
-    imgcanvas.alt = "Larry";
-    imgcanvas.style.zIndex = 999;
-
-    imgcanvas.addEventListener('click', function () {
-        ImgLarger(imgcanvas.id, imgcanvas.src);
-    });
+
+    // INNER container: only images (scrollable row)
+    var imgsWrapperContainer = document.createElement('div');
+    imgsWrapperContainer.className = 'imgsWrapperContainer';
+
+    // Handle multiple or single images
+    if (Array.isArray(imgdata)) {
+        imgdata.forEach((imgdata1, index) => {
+            var imgcanvas = document.createElement("img");
+            imgcanvas.src = 'data:image/gif;base64,' + imgdata1;
+            imgcanvas.height = 600;
+            imgcanvas.id = 'imgcanvas_' + index;
+            imgcanvas.alt = "Larry " + index;
+            imgcanvas.style.zIndex = 999;
+
+            imgcanvas.addEventListener('click', function () {
+                ImgLarger(imgcanvas.id, imgcanvas.src);
+            });
+
+            imgsWrapperContainer.appendChild(imgcanvas);
+        });
+    } else {
+        var imgcanvas = document.createElement("img");
+        imgcanvas.src = 'data:image/gif;base64,' + imgdata;
+        imgcanvas.height = 600;
+        imgcanvas.id = 'imgcanvas';
+        imgcanvas.alt = "Larry";
+        imgcanvas.style.zIndex = 999;
+
+        imgcanvas.addEventListener('click', function () {
+            ImgLarger(imgcanvas.id, imgcanvas.src);
+        });
+
+        imgsWrapperContainer.appendChild(imgcanvas);
+    }
+
+    // ----------------------------
+    // Buttons container
+    // ----------------------------
+
+////////////////////
 
     var buttonContainer = document.createElement('div');
     buttonContainer.style.display = 'flex';
@@ -2795,11 +2826,21 @@ function ImgSide(imgdata, spreadsheetLink, pdfLink,pdfname,baxlink,xmllink) {
     buttonContainer.appendChild(refreshpdfmarkups);
 
 
-    imgContainer.appendChild(imgcanvas);
+    // imgContainer.appendChild(imgcanvas);
+    // imgContainer.appendChild(buttonContainer);
+
+    // backimg.appendChild(imgContainer);
+
+    // Append images + buttons into outer container
+    imgContainer.appendChild(imgsWrapperContainer);
     imgContainer.appendChild(buttonContainer);
 
+    // Append to background div
     backimg.appendChild(imgContainer);
-} 
+}
+
+
+
 function updatepreview(pdfname){
  console.log('pdfpath',pdfname)
    
@@ -3127,10 +3168,10 @@ function getData(form) {
 
               if (formvalues['selectprojs'].startsWith('2.8') || formvalues['selectprojs'].startsWith('2.6')) {
 
-                for(var p=0;p<listofimages.length;p++)
-                {
-                  ImgSide(listofimages[p],spreadsheetURL,dropboxLink,tomeasureproj,baxlink,xmllink)
-                }
+                // for(var p=0;p<listofimages.length;p++)
+                // {
+                  ImgSide(listofimages,spreadsheetURL,dropboxLink,tomeasureproj,baxlink,xmllink)
+                // }
 
                 let messages = [];
                 if (Repeated_Labels2_8)