MeasurementTesting

Sleeping

App Files Files Community

Marthee commited on Jan 22, 2025

Commit

d41b73b

verified ·

1 Parent(s): 6eaaa1c

Update templates/proposed-GUI.html

Browse files

Files changed (1) hide show

templates/proposed-GUI.html +81 -2

templates/proposed-GUI.html CHANGED Viewed

@@ -26,6 +26,8 @@
   </head>
   <body >
     <div id="all">
       <!-- {% include 'loading.html' %} -->
       {% include 'loading.html' %}
@@ -295,10 +297,12 @@
                 <select id="section-select"
                   onchange="
                     document.getElementById('description-section-1-0').style.display = this.value === 'section-1-0' ? 'block' : 'none';
-                    document.getElementById('description-section-3-2').style.display = this.value === 'section-3-2' ? 'block' : 'none';">
                   <option value="">--Select Section--</option>
                   <option value="section-1-0">Section 1.0</option>
                   <option value="section-3-2">Section 3.2</option>
                 </select>
                 <div id="description-section-1-0" class="description">
                   <label style="font-style: italic;">* Notes for section 1.0 measurement:</label>
@@ -341,6 +345,37 @@
                     </ol>
                   </div>
                 </div>
               </body>
               <br>
               <i id="secondpage" class="fa fa-arrow-right" aria-hidden="true"></i>
@@ -473,17 +508,61 @@
   </body>
 </html>
 <script >
 ///////////////////////////////////////////////BEGIN JS CODE//////////////////////////////////////////////////
 PopupElement=document.getElementById('modal-bodyText');
 // add project names to first dropdown from google sheet
 firstdropdown=document.getElementsByClassName('selectionsProj')[0];
 seconddropdown=document.getElementsByClassName('selectionsProjp')[0];
 thirddropdown=document.getElementsByClassName('selectionsProjs')[0];
 $(firstdropdown).select2({
   placeholder:'Projects',
   closeOnSelect: true,

   </head>
   <body >
+    <div id="pdf-container"></div>
     <div id="all">
       <!-- {% include 'loading.html' %} -->
       {% include 'loading.html' %}
                 <select id="section-select"
                   onchange="
                     document.getElementById('description-section-1-0').style.display = this.value === 'section-1-0' ? 'block' : 'none';
+                    document.getElementById('description-section-3-2').style.display = this.value === 'section-3-2' ? 'block' : 'none';
+                    document.getElementById('description-section-2-8').style.display = this.value === 'section-2-8' ? 'block' : 'none';">
                   <option value="">--Select Section--</option>
                   <option value="section-1-0">Section 1.0</option>
                   <option value="section-3-2">Section 3.2</option>
+                  <option value="section-2-8">Section 2.8</option>
                 </select>
                 <div id="description-section-1-0" class="description">
                   <label style="font-style: italic;">* Notes for section 1.0 measurement:</label>
                     </ol>
                   </div>
                 </div>
+                <div id="description-section-2-8" class="description">
+                  <label style="font-style: italic;">* Notes for section 2.8 measurement:</label>
+                  <p style="font-weight: bold;">Door Detection Algorithm - v.1</p>
+                  <p>The algorithm is designed to detect different symbols of the door and measure its width.</p>
+                  <div>
+                      <p style="font-weight: bold;">Single Door:</p>
+                      <div style="margin-left: 20px;">
+                          <p>• Can correctly detect more than 85% of the single doors.</p>
+                          <p>• Identify the opening of the door properly and draw a line between the two end points.</p>
+                          <p>• Calculate the width of the opening.</p>
+                      </div>
+                  </div>
+                  <div>
+                      <p style="font-weight: bold;">Double Door:</p>
+                      <div style="margin-left: 20px;">
+                          <p>• Can correctly detect some double doors.</p>
+                          <p>• Calculate the width of the opening.</p>
+                          <p>• Draw a rectangle around the detected door.</p>
+                      </div>
+                  </div>
+                  <p style="font-weight: bold;">What to Expect in the Next Version?</p>
+                  <div style="margin-left: 20px;">
+                      <p>• Identify the opening of the double door properly and draw a line between the two end points.</p>
+                      <p>• Get the labels beside doors to generate their name.</p>
+                      <p>• Detect more symbols, e.g., "Leaf door".</p>
+                  </div>
+              </div>
               </body>
               <br>
               <i id="secondpage" class="fa fa-arrow-right" aria-hidden="true"></i>
   </body>
 </html>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.14.305/pdf.min.js"></script>
 <script >
 ///////////////////////////////////////////////BEGIN JS CODE//////////////////////////////////////////////////
+// Function to send the Dropbox link and keyword to the server
+function processPdf() {
+    const pdfLink = 'https://www.dropbox.com/scl/fi/fjykwhhn9gu9t3kqrflxd/LA002-NOR-ZZ-ZZ-T-A-2403_Architectural-Specification-F10-Brick-and-Block-Walling_A4-_C01.pdf?rlkey=ek9i66i79m0hwp8z5yjs6rp5p&e=1&st=mh7rurkc&dl=1'; // Dropbox link
+    const keyword = 'Page 1 of 5' ;  // Example keyword
+    // Create a new FormData object to send the data as form data
+    const formData = new FormData();
+    formData.append('pdf_link', pdfLink);
+    formData.append('keyword', keyword);
+    // Send the data to the Flask server
+    fetch('/api/process-data', {
+        method: 'POST',
+        body: formData,
+    })
+    .then(response => response.json())
+    .then(data => {
+        // Handle the server's response
+        if (data.download_link) {
+            // Redirect the user to the page where the annotation is located
+            // The download_link includes both the page number and the rect (coordinates)
+            window.location.href = data.download_link; // This will use the rect info from Flask
+        } else {
+            alert('Error: ' + data.error);
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+}
+// Call the function to process the PDF
+// processPdf();
+////////////////////////////////////////////////////////////////////
 PopupElement=document.getElementById('modal-bodyText');
+sectionSelect=document.getElementById('section-select');
+$(sectionSelect).select2({
+  closeOnSelect: true,
+  width:'20ch'
+  });
 // add project names to first dropdown from google sheet
 firstdropdown=document.getElementsByClassName('selectionsProj')[0];
 seconddropdown=document.getElementsByClassName('selectionsProjp')[0];
 thirddropdown=document.getElementsByClassName('selectionsProjs')[0];
 $(firstdropdown).select2({
   placeholder:'Projects',
   closeOnSelect: true,