Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -65,10 +65,19 @@
             <input type="button" value="Save" id="savecanvas" />
         </div>
         
-    <div id="rightside">
-        <div id="backgroundimg" > </div>
-        <div id="underimgbuttons"></div>
+    <div id="rightside" hidden="until-found"> 
+        <div id="backgroundimg" > 
+           <div id="imgs">
+                <!-- image here -->
+           </div>
+          <div id="underimgbuttons">
+              <!-- buttons here -->
+          </div>
+        </div> 
     </div>
+            
+
+     
         
     <div id="myModal" class="modal" >
       <span class="close">&times;</span>
@@ -758,19 +767,20 @@ document.getElementById('measureADRbutton').addEventListener('click',function(){
 
 /*Clear output everytime the user clicks on measureADR button*/
   var rightside=document.getElementById('rightside');
-  document.getElementById("backgroundimg").innerHTML='';
+  
+  document.getElementById("imgs").innerHTML='';
   document.getElementById("underimgbuttons").innerHTML='';
   var rightchidren= rightside.children;
-  for (let ch=0;ch<rightchidren.length; ch++)
-  {
-    if (rightchidren[ch].id == 'imgcanvas')
-    {
-      rightside.removeChild(rightchidren[ch])
-      // document.getElementById('imgcanvas').innerHTML=''
-      clearInterval()
-      clearTimeout()
-    }
-  }
+  // for (let ch=0;ch<rightchidren.length; ch++)
+  // { 
+  //   if (rightchidren[ch].id == 'imgcanvas')
+  //   {
+  //     rightside.removeChild(rightchidren[ch])
+  //     // document.getElementById('imgcanvas').innerHTML=''
+  //     clearInterval()
+  //     clearTimeout()
+  //   }
+  // }
 });
 
 //___________________________________________________________________________________________________________
@@ -1348,6 +1358,68 @@ document.getElementById('pdftodxfFile').addEventListener('input',function(){
    dxffile=files.files[0];
   console.log(dxffile)
 });
+function ImgSide(imgdata, spreadsheetLink, pdfLink) {
+    var backimg = document.getElementById('backgroundimg');
+    
+    // Create a container for the image and buttons
+    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);
+    });
+
+    var buttonContainer = document.createElement('div');
+    buttonContainer.style.display = 'flex';
+    buttonContainer.style.marginTop = '10px';
+
+    var legendbutton = document.createElement("button");
+    legendbutton.id = 'measureADRbutton2';
+    legendbutton.innerText = 'Legend and Data created';
+    legendbutton.style.backgroundColor = 'rgb(5, 43, 235)';
+
+    legendbutton.addEventListener('mouseover', function () {
+        legendbutton.style.boxShadow = '0 0 8px 2px rgb(5, 43, 235)';
+    });
+    legendbutton.addEventListener('mouseout', function () {
+        legendbutton.style.boxShadow = 'none';
+    });
+
+    legendbutton.addEventListener('click', function () {
+        window.open(spreadsheetLink);
+    });
+
+    var imgbutton = document.createElement("button");
+    imgbutton.id = 'measureADRbutton2';
+    imgbutton.innerText = 'Click to view as PDF';
+    imgbutton.style.backgroundColor = 'rgb(255,0,255)';
+
+    imgbutton.addEventListener('mouseover', function () {
+        imgbutton.style.boxShadow = '0 0 8px 2px rgb(255,0,255)';
+    });
+    imgbutton.addEventListener('mouseout', function () {
+        imgbutton.style.boxShadow = 'none';
+    });
+
+    imgbutton.addEventListener('click', function () {
+        window.open(pdfLink);
+    });
+
+    buttonContainer.appendChild(legendbutton);
+    buttonContainer.appendChild(imgbutton);
+
+    imgContainer.appendChild(imgcanvas);
+    imgContainer.appendChild(buttonContainer);
+
+    backimg.appendChild(imgContainer);
+}
 
 function getData(form) {
     
@@ -1358,9 +1430,7 @@ function getData(form) {
   document.getElementById('measureADRbutton').style.boxShadow = 'none';
   document.getElementById('measureADRbutton').style.color = 'white';
   document.getElementById('measureADRbutton').style.backgroundColor="rgb(154,152,152)";
- 
-  var underimg=document.getElementById('underimgbuttons');
-  var rightside=document.getElementById('rightside');
+
   var formData = new FormData(form);
   
   clearInterval(interval)
@@ -1454,10 +1524,10 @@ function getData(form) {
         // var mp3_url = 'https://media.geeksforgeeks.org/wp-content/uploads/20190531135120/beep.mp3';
         // (new Audio(mp3_url)).play()
         // retrieveLinks()
-            var backimg=document.getElementById('backgroundimg');
+           
 
             document.getElementById("loading").hidden = true;
-            
+            document.getElementById("rightside").hidden = false;
             document.getElementById('duplicater').removeAttribute('hidden');
             document.getElementById('addicon').style.display='inline-block';
             document.getElementById('doneebackground').removeAttribute('hidden');
@@ -1483,6 +1553,7 @@ function getData(form) {
             if (formvalues['selectprojs'].startsWith('3.2'))
             { //
             // /* data[0]--> img , SimilarAreaDictionary.to_dict(), spreadsheet_url,spreadsheetId,[],list1.to_dict(),pdflink,hatched_areas,namepathArr]# , spreadsheetId, spreadsheet_url , list1.to_dict()]
+
                 SimilarAreaDictionary=data[1];
                 spreadsheetURL=data[2];
                 spreadsheetId=data[3];
@@ -1496,8 +1567,9 @@ function getData(form) {
             { //
             // /* data[0]--> img , data[1]-->dataframe (goes to legend lsa ) , data [2] -->pdf dropbox shareable link ,data[3]-> spreadsheetId, data[4],spreadsheeturl */   
                 // SimilarAreaDictionary=data[1];
-                console.log('link here')
-                dropboxLink=data[1];
+                listofimages=data[0];
+                dropboxLinks=data[1];
+
                 // spreadsheetId=data[3];
                 // spreadsheetURL=data[4];
                 // list1= data[5]
@@ -1536,59 +1608,19 @@ function getData(form) {
               namepathArr=data[8];
             }
             
-            var imgcanvas= document.createElement("img"); 
-            imgcanvas.src= 'data:image/gif;base64,' +data[0];
-            //  imgcanvas.width=700;
-            imgcanvas.height=600;
-            console.log(imgcanvas.width)
-            imgcanvas.id='imgcanvas';
-            imgcanvas.alt="Larry";
-            imgcanvas.style.zIndex=999;
-            imgcanvas.addEventListener('click',function(){
-              ImgLarger(imgcanvas.id,imgcanvas.src)
-            })
-            backimg.style.backgroundColor="transparent";
-            backimg.style.opacity="1";
-            getlegendstoDirectory()
-            //  backimg.append(imgcanvas);
-            var legendbutton= document.createElement("button");
-            legendbutton.id='measureADRbutton2';
-            legendbutton.innerText='Legend and Data created';
-            legendbutton.style.backgroundColor='rgb(5, 43, 235)';
-            legendbutton.addEventListener('mouseover',function(){
-              legendbutton.style.boxShadow='0 0 8px 2px rgb(5, 43, 235)';
-            })
-            legendbutton.addEventListener('mouseout',function(){
-              legendbutton.style.boxShadow='none';
-            })
-
-            legendbutton.addEventListener('click',function(){
-              window.open( spreadsheetURL);
-          
-            })
-            var imgbutton= document.createElement("button");
-            imgbutton.id='measureADRbutton2';
-            imgbutton.innerText='Click to view as PDF';
-            imgbutton.style.backgroundColor='rgb(255,0,255)';
-    
-            imgbutton.addEventListener('mouseover',function(){
-              imgbutton.style.boxShadow='0 0 8px 2px rgb(255,0,255)';
-            })
-            imgbutton.addEventListener('mouseout',function(){
-              imgbutton.style.boxShadow='none';
-            })
-            
-            imgbutton.addEventListener('click',function(){
-              window.open( dropboxLink);
-            })
-
-            underimg.append(legendbutton);
-            underimg.append(imgbutton);
-            underimg.style.display='flex';
-            rightside.append(imgcanvas);
-            rightside.insertBefore(imgcanvas,underimg); 
-
+            if (!(formvalues['selectprojs'].startsWith('2.8')))
+            {
+              ImgSide(data[0],spreadsheetURL,dropboxLink)
+            }
               
+            else{
+              console.log(listofimages.length)
+              for(var p=0;p<listofimages.length;p++)
+              {
+                ImgSide(listofimages[p],'#',dropboxLinks[p])
+              }
+            }
+            getlegendstoDirectory()
 //////////////////////////////////////////////////////////////////////////////////////////
             let delrows2 = {
               content : {},