Spaces:

Marthee
/

NewDuplicate

Sleeping

App Files Files Community

Marthee commited on Dec 19, 2025

Commit

450cff3

verified ·

1 Parent(s): 7839d18

Upload proposed-GUI.html

Browse files

Files changed (1) hide show

templates/proposed-GUI.html +132 -130

templates/proposed-GUI.html CHANGED Viewed

@@ -3314,7 +3314,7 @@ function getData(form) {
       {
         var Thickness= document.getElementById("text002extra").value
         answers.push(tomeasureproj, 0,[], ratio1, ratio2,pdfpath,groupedValues,checkedItems,Thickness,shapeData,ratio3);  //location of shape
-        formData.append('file',dxffile)
       }
     formData.append('answers',JSON.stringify(answers))
  }
@@ -4603,146 +4603,147 @@ function drawCircle(x, y) {
 /*Set canvas code to be visible on the new window with the pdftoimg as the background*/
 var levelsin = document.getElementById('levelcheckbox');
-var canvaswindow= document.getElementById('canvaswindow');
-var undoButtonId=document.getElementById('undoButtonId');
-NewShapeButtonId=document.getElementById('NewShapeButtonId');
-var savecanvas=document.getElementById('savecanvas');
-var scaleX=1;
-var scaleY=1;
-var shapeData = [];
-levelsin.addEventListener('click',function(){
-  if (sectionNumber.startsWith('1.0') || sectionNumber.startsWith('2.7') ||sectionNumber.startsWith('3.2') || sectionNumber.startsWith('3.3'))
-  {
-  document.getElementById("all").style.display = "block";
-if (document.getElementById('levelcheckbox').checked) {
-  $.get('/canvaspdftoimgBackground/' + pdfname)
-    .success(function (data) {
-      document.getElementById("all").style.display = "none";
-      var popup = window.open('');
-      popup.document.write('<html><head><title>ADR Console:Draw on PDF tool</title><link rel="stylesheet" href="static/style.css"></head><body>');
-      if (sectionNumber.startsWith('2.7') || sectionNumber.startsWith('3.2') || sectionNumber.startsWith('3.3')) {
-        document.getElementById('colorpickers').setAttribute('hidden', true);
-        document.getElementById('NewShapeButtonId').style.display='none';
-      }
-      var element = popup.document.createElement('div');
-      element.setAttribute('id', 'mydiv');
-      // Original PDF image size
-      const pdfWidth = data[2];
-      const pdfHeight = data[1];
-      // Set actual canvas pixel dimensions (internal resolution)
-      canvaswindow.childNodes[1].width = pdfWidth;
-      canvaswindow.childNodes[1].height = pdfHeight;
-      // Set displayed (on-screen) size
-      const displayWidthCSS = 0.5 * screen.width; // visual scale down
-      const displayHeightCSS = pdfHeight * (displayWidthCSS / pdfWidth);
-      canvaswindow.childNodes[1].style.width = displayWidthCSS + 'px';
-      canvaswindow.childNodes[1].style.height = displayHeightCSS + 'px';
-      // Now get actual rendered size
-      const displayWidth = canvaswindow.childNodes[1].offsetWidth;
-      const displayHeight = canvaswindow.childNodes[1].offsetHeight;
-      // Correct scale ratios (display → PDF)
-      const scaleX = pdfWidth / displayWidth;
-      const scaleY = pdfHeight / displayHeight;
-      console.log("Display:", displayWidth, displayHeight);
-      console.log("PDF:", pdfWidth, pdfHeight);
-      console.log("ScaleX:", scaleX, "ScaleY:", scaleY);
-      element.append(canvaswindow);
-      canvaswindow.removeAttribute('hidden');
-      var imgDrawon = document.createElement("img");
-      imgDrawon.src = 'data:image/gif;base64,' + data[0];
-      imgDrawon.id = 'imgcanvas';
-      imgDrawon.alt = "Larry";
-      imgDrawon.onload = function () {
-        // ctx.setTransform(scaleX, 0, 0, scaleY, 0, 0);
-        var scale = data[2] / canvaswindow.childNodes[1].style.width.slice(0,-2) ; // get the scale that matches display size
-        ctx.setTransform(scale,0,0,scale,0,0);
-        ctx.drawImage(imgDrawon, 0, 0, displayWidth, displayHeight);
-      };
-      var win = popup.document.body;
-      win.appendChild(element);
-      undoButtonId.addEventListener("click", e => {
-        if (ry[ry.length - 1].length > 0) {
-          ry[ry.length - 1].pop();
         } else {
-          ry.pop();
-          ry[ry.length - 1].pop();
-        }
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(imgDrawon, 0, 0, displayWidth, displayHeight);
-        drawChart();
-      });
-      savecanvas.addEventListener('click', function () {
-        var image = new Image();
-        image.src = canvas.toDataURL("image/png");
-        canvasimg = image.src;
-        console.log('saved');
-        if (sectionNumber.startsWith('2.7') || sectionNumber.startsWith('3.2') || sectionNumber.startsWith('3.3')) {
-          for (let i = 0; i < ry.length; i++) {
-            let shape = ry[i];
-            if (!Array.isArray(shape) || shape.length === 0) continue;
-            let coords = shape
-              .filter(p => p && typeof p.x === "number" && typeof p.y === "number")
-              .map(p => ({
-                x: p.x * scaleX, // now accurate
-                y: p.y * scaleY
-              }));
-            shapeData.push({
-              shapeIndex: i + 1,
-              coordinates: coords
-            });
-              ry.forEach(shape => {
-                if (shape.length > 1) {
-                  const first = shape[0];
-                  const last = shape[shape.length - 1];
-                  // Draw line between last and first point
-                  ctx.beginPath();
-                  ctx.moveTo(last.x, last.y);
-                  ctx.lineTo(first.x, first.y);
-                  ctx.strokeStyle = "red"; // you can change color
-                  ctx.lineWidth = 2;       // and thickness
-                  ctx.stroke();
-                  ctx.closePath();
-                }
-              });
-          }
-          console.log("Final ScaleX:", scaleX, "ScaleY:", scaleY);
-          console.log("Scaled coordinates:", shapeData);
         }
-      });
-    })
-    .error(function () {
-      PopupElement.textContent = 'Levels are not supported in this Section.';
-      ShowPopUp();
-      document.getElementById('levelcheckbox').checked = false;
-    });
-}
- }
-  else{
-    PopupElement.textContent='Levels are not supported in this Section. ';
-    ShowPopUp();
-    document.getElementById('levelcheckbox').checked=false;
-  }
-})
 //___________________________________________________________________________________________________________
 function getSecondData(){
   document.getElementById('all').style.display='block';
@@ -5609,7 +5610,7 @@ function callrefreshAPI(){
         //before all of this , u need to crrate a popup in html , give the div an id
         let pdfname2_7 = document.querySelector('input[name="measureCheckbox"]').value;
         let LegendForm = new FormData();
         LegendForm.append("nameofPDF", pdfname2_7);
         LegendForm.append("groupedValues", JSON.stringify(groupedValues));
@@ -5624,6 +5625,7 @@ function callrefreshAPI(){
             processData: false,
             contentType: false,
             success: function(response) {
                 console.log("Response:", response);
                 ColorsCheckPopup = document.getElementById("LegendPopUp");
                 LegendContent=document.getElementById("modalLegend");

       {
         var Thickness= document.getElementById("text002extra").value
         answers.push(tomeasureproj, 0,[], ratio1, ratio2,pdfpath,groupedValues,checkedItems,Thickness,shapeData,ratio3);  //location of shape
+        formData.append('file',dxffile)
       }
     formData.append('answers',JSON.stringify(answers))
  }
 /*Set canvas code to be visible on the new window with the pdftoimg as the background*/
 var levelsin = document.getElementById('levelcheckbox');
+var canvaswindow = document.getElementById('canvaswindow');
+var undoButtonId = document.getElementById('undoButtonId');
+var NewShapeButtonId = document.getElementById('NewShapeButtonId');
+var savecanvas = document.getElementById('savecanvas');
+var scaleX = 1;
+var scaleY = 1;
+var shapeData = []; // Clear this on start
+var popup = null;
+levelsin.addEventListener('click', function() {
+    if (sectionNumber.startsWith('1.0') || sectionNumber.startsWith('2.7') || sectionNumber.startsWith('3.2') || sectionNumber.startsWith('3.3')) {
+        if (this.checked) {
+            // ISSUE 2 FIX: Reset drawing data arrays so you start fresh
+            shapeData = [];
+            if (typeof ry !== 'undefined') ry = [[]]; // Reset your coordinate history array
+            document.getElementById("all").style.display = "block";
+            $.get('/canvaspdftoimgBackground/' + pdfname)
+                .done(function(data) {
+                    document.getElementById("all").style.display = "none";
+                    // 1. Setup Popup
+                    // popup = window.open('', '_blank', 'width=1100,height=900');
+                    var popup = window.open('');
+                    popup.document.write('<html><head><title>ADR Console</title><link rel="stylesheet" href="static/style.css"></head><body><div id="container"></div></body></html>');
+                    popup.document.close();
+                    if (sectionNumber.startsWith('2.7') || sectionNumber.startsWith('3.2') || sectionNumber.startsWith('3.3')) {
+                        document.getElementById('colorpickers').setAttribute('hidden', true);
+                        document.getElementById('NewShapeButtonId').style.display = 'none';
+                    }
+                    // 2. Move Canvas
+                    var container = popup.document.getElementById('container');
+                    canvaswindow.removeAttribute('hidden');
+                    container.appendChild(canvaswindow);
+                    // 3. Scaling Logic
+                    const pdfWidth = data[2];
+                    const pdfHeight = data[1];
+                    var canvas = canvaswindow.querySelector('canvas') || canvaswindow.childNodes[1];
+                    var ctx = canvas.getContext('2d');
+                    canvas.width = pdfWidth;
+                    canvas.height = pdfHeight;
+                    const displayWidthCSS = 0.5 * screen.width;
+                    const displayHeightCSS = pdfHeight * (displayWidthCSS / pdfWidth);
+                    canvas.style.width = displayWidthCSS + 'px';
+                    canvas.style.height = displayHeightCSS + 'px';
+                    scaleX = pdfWidth / displayWidthCSS;
+                    scaleY = pdfHeight / displayHeightCSS;
+                    // Apply coordinate scaling
+                    ctx.setTransform(scaleX, 0, 0, scaleY, 0, 0);
+                    var imgDrawon = new Image();
+                    imgDrawon.onload = function() {
+                        ctx.drawImage(imgDrawon, 0, 0, displayWidthCSS, displayHeightCSS);
+                    };
+                    imgDrawon.src = 'data:image/gif;base64,' + data[0];
+                    // ISSUE 1 FIX: Re-incorporate Undo and Save Logic inside the context
+                    undoButtonId.onclick = function() {
+                        if (ry.length > 0) {
+                            if (ry[ry.length - 1].length > 0) {
+                                ry[ry.length - 1].pop();
+                            } else {
+                                ry.pop();
+                                if(ry.length > 0) ry[ry.length - 1].pop();
+                            }
+                            // Redraw background and shapes
+                            ctx.clearRect(0, 0, canvas.width, canvas.height);
+                            ctx.drawImage(imgDrawon, 0, 0, displayWidthCSS, displayHeightCSS);
+                            if (typeof drawChart === "function") drawChart();
+                        }
+                    };
+                    savecanvas.onclick = function() {
+                        var image = canvas.toDataURL("image/png");
+                        canvasimg = image;
+                        // Process coordinates with the current scale
+                        if (sectionNumber.startsWith('2.7') || sectionNumber.startsWith('3.2') || sectionNumber.startsWith('3.3')) {
+                            shapeData = []; // Clear before re-calculating
+                            for (let i = 0; i < ry.length; i++) {
+                                let shape = ry[i];
+                                if (!Array.isArray(shape) || shape.length === 0) continue;
+                                let coords = shape
+                                    .filter(p => p && typeof p.x === "number" && typeof p.y === "number")
+                                    .map(p => ({
+                                        x: p.x * scaleX,
+                                        y: p.y * scaleY
+                                    }));
+                                shapeData.push({
+                                    shapeIndex: i + 1,
+                                    coordinates: coords
+                                });
+                                // Draw the closing red lines
+                                if (shape.length > 1) {
+                                    const first = shape[0];
+                                    const last = shape[shape.length - 1];
+                                    ctx.beginPath();
+                                    ctx.moveTo(last.x, last.y);
+                                    ctx.lineTo(first.x, first.y);
+                                    ctx.strokeStyle = "red";
+                                    ctx.lineWidth = 2;
+                                    ctx.stroke();
+                                    ctx.closePath();
+                                }
+                            }
+                            console.log("Scaled coordinates saved:", shapeData);
+                        }
+                    };
+                    // 4. Cleanup on close
+                    popup.onbeforeunload = function() {
+                        canvaswindow.setAttribute('hidden', true);
+                        document.body.appendChild(canvaswindow);
+                        // levelsin.checked = false;
+                    };
+                })
+                .fail(function() {
+                    document.getElementById("all").style.display = "none";
+                    levelsin.checked = false;
+                });
         } else {
+            if (popup && !popup.closed) popup.close();
         }
+    } else {
+        alert('Levels are not supported in this Section.');
+        this.checked = false;
+    }
+});
 //___________________________________________________________________________________________________________
 function getSecondData(){
   document.getElementById('all').style.display='block';
         //before all of this , u need to crrate a popup in html , give the div an id
         let pdfname2_7 = document.querySelector('input[name="measureCheckbox"]').value;
+        document.getElementById("loading").hidden = false;
         let LegendForm = new FormData();
         LegendForm.append("nameofPDF", pdfname2_7);
         LegendForm.append("groupedValues", JSON.stringify(groupedValues));
             processData: false,
             contentType: false,
             success: function(response) {
+                document.getElementById("loading").hidden = true;
                 console.log("Response:", response);
                 ColorsCheckPopup = document.getElementById("LegendPopUp");
                 LegendContent=document.getElementById("modalLegend");