MeasurementOrg

Sleeping

App Files Files Community

Marthee commited on Apr 2, 2025

Commit

9b1aa9d

verified ·

1 Parent(s): 6a09ed7

Update templates/proposed-GUI.html

Browse files

Files changed (1) hide show

templates/proposed-GUI.html +357 -243

templates/proposed-GUI.html CHANGED Viewed

@@ -281,222 +281,189 @@
     </div>
     <div id="consoleContent"></div>
-    <div class="dropdown-content">
-            <div id="userguidetext">
-              <div id="textfirstpage">
-              <label style="font-style: oblique;">
-                <br> Before using this tool, kindly read the following.   </label>
-                <br><br>
-              The tool is divided into two main parts:
-              <br><br>
-              <li id="userguideheadings">   First Part  </li>
-              <label id="underlinedLables"> - Inputs: </label>
-              <br>There are three dropdowns available that will allow you to select the name of the project you wish to measure, the project part, and the project section.
-              <br > <br>
-              <label style="font-style: italic;"> Please ensure that the 'Project Section' you select is correct, as it will affect the code applied to the plan.  </label>
-              <br>
-              <br>
-              Select the project you want to measure from the 'To measure' section. Additionally, you have the option to view any relevant documents you might need in Dropbox. (optional).
-              <br> Important Note: The console updates projects retrieved from Dropbox automatically at 9:00 am and 9:00 p.m. If you need to access any projects in between, click on the dropbox icon located next to the 'Document to measure' section.
-              <br>
-              <br> <label style="font-style: italic;"> * Pixel to Metric conversion important notes:</label>
-              <br>Once you have selected a specific plan to measure, you will be provided with a PDF containing a colored rectangle. Please open this PDF in Foxit Reader, Adobe, or any software that will allow you to measure shapes on a plan, and measure the given shape’s area and perimeter in the desired metric unit(for 3.2 measure its perimeter only), then input those values in the textboxes that will be shown below the relevant documents.
-              For the ease of conversion of metric units, you will find a dropdown with ‘m’ or ‘mm’ next to each textbox.
-              This will enable the code to understand the ratio between pixels and the metric unit you chose.
-             <br>
-              You may think of this rectangle's measurement as a scale check for Bluebeam.
-              <br> <br>
-             <head>
-                <meta charset="UTF-8">
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <title>Dynamic Description</title>
-                <style>
-                  .description {
-                    display: none;
-                  }
-                </style>
-             </head>
-             <body>
-                <label for="section-select" style="font-style: italic;">Select Section:</label>
-                <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>
-                  <p>You can measure multiple levels independently using the checkbox labeled 'Leveled plan' under the Scale document heading.</p>
-                  <p>Leave the checkbox unchecked if you want to measure the entire plan. Please check the box if you want to measure specific areas of the plan or if the plan is divided into levels. Click the save button at the bottom of the page when you have finished.</p>
-                </div>
-                <div id="description-section-3-2" class="description">
-                  <label style="font-style: italic;">* Notes for section 3.2 measurement:</label>
-                  <p>The algorithm is designed to measure the floor finishes for floor plans by detecting each shape individually and measuring its area and perimeter.</p>
-                  <label style="font-weight: 200;">Steps to use:</label>
-                  <div style="margin-left: 20px;">
-                    <ol>
-                      <li>Select Section 3.2 from the drop-down list.</li>
-                      <li>Choose the PDF you wish to measure. A pdf will be downloaded for the next step.</li>
-                      <li>A pop window will appear in which it contains the pdf drawn on it a big blue shape. Measure its perimeter and input the value in the corresponding cell in the console. Be sure to adjust the unit (e.g., m, cm).</li>
-                      <li>Open AutoCAD and import the PDF.</li>
-                      <li>When a pop-up window appears in AutoCAD, ensure the following options are selected:
-                         <ol class="sub-item">
-                          <li>PDF Data to Import:
-                            <ol class="nested-item">
-                              <li>Vector geometry (Solid Fills)</li>
-                              <li>TrueType text</li>
-                            </ol>
-                          </li>
-                          <li>Layers:
-                            <ol class="nested-item">
-                              <li>Use PDF Layers</li>
-                            </ol>
-                          </li>
-                          <li>Import Options:
-                            <ol class="nested-item">
-                              <li>Convert solid fills to hatches</li>
-                              <li>Apply line weight properties</li>
-                            </ol>
-                          </li>
-                        </ol>
-                      </li>
-                      <li>Upload the generated DXF file to the console, input the measured perimeter, and click the green button.</li>
-                    </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>
-              <br> <br>
-              </div>
-              <div id="textsecondpage" hidden=until-found>
-                <br>
-                <label id="underlinedLables"> - Outputs: </label> <br>
-                On the right side of the console, the output will be displayed. There are three primary components to it.
-                You may have a sneak peek of the measured plan in the first section. There are two buttons underneath this picture. You may access the Google sheet that was created by clicking the "Legend and Data created" button. The "Click to view as PDF" second button directs you to the marked-up PDF that was created in Dropbox.
-                <br>
-                ONLY IN DROPBOX VIEW. DO NOT DOWNLOAD THE PDF FOR THIS FEATURE.
-                <br>
-                <label style="font-style: oblique;" >
-                  Note : The algorithm is based on detecting shapes and colors from the plan. Some shapes such as tables and textboxes carrying plan-related information, may also be viewed as shapes and so added to the algorithm.
-               </label>
-                Any markup that you deem unnecessary in the pdf can be removed. After deleting any markup, the console will notify you with a message asking whether you would like to delete it from legend or not and the legend will be updated accordingly.
-                <br> <br>
-                <li  id="userguideheadings" >  Second part </li>
-              To open the Google sheet with the created legend, first click the button labeled "Legend and Data created." Names of each shape should go in the first column of the sheet labeled ‘Guess’.
-              <br>Ex. GB-1.
-              <br> You may find some guessed names already filled in. If so, please double check these names before continuing to add any other names.
-              <br> Then, return to this page, the ADR Console, to finish entering the remaining data after you have finished entering the guessed names in the legend.
-              <br> Three dropdown menus and three text boxes are present.
-              <li style="list-style-type:square;"> You can select the type of the shape from the first dropdown: <!--by selecting either: -->
-                  <br>  &emsp;&emsp;   e.g. (1.0 Substructure) Ground Beam or Pile Cap
-                  <!-- <br> &emsp;&emsp; b. (3.2 Floor Finishes) Floor or Wall -->
-              </li>
-              <li style="list-style-type:square;">  In the second dropdown, you will find a list of MC-T Names. Choose Accordingly.</li>
-              <li style="list-style-type:square;"> The third dropdown menu has the unit of the MC-T Name you have chosen.</li>
-              <br> Note: If the unit was (m), choose whether you wish to extract perimeter or length data from the third selection.
-              <br><br><label  style="font-style: italic;"> Regarding the MC-T naming process: </label>
-              Then add the relevant detail and depth to the rows underneath the dropdowns.
-              You can add/ subtract rows by using the + and - button.
-              <br>
-              You can add another block and repeat the process for another item by clicking the button next to "Measure using ADR".
-              <br><br>
-              <head>
-                <meta charset="UTF-8">
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <title>Dynamic Description</title>
-                <style>
-                  .description {
-                    display: none;
-                  }
-                </style>
-             </head>
-             <body>
-                <label for="section-select" style="font-style: italic;">Further Output Notes:</label>
-                <select id="section-select"
-                  onchange="
-                    document.getElementById('Output-section-3-2').style.display = this.value === 'section-3-2' ? 'block' : 'none';">
-                  <option value="">--Select Section--</option>
-                  <option value="section-3-2">Section 3.2</option>
-                </select>
-                <div id="Output-section-3-2" class="description">
-                  <label style="font-style: italic;">* Output Notes for section 3.2 measurement:</label>
-                  <p>Image will appear contains the pdf and its annotations.Below this image, will be the same output buttons as all other sections.If the user wants to download the PDF file and open it in Bluebeam, </p>
-                  <label style="font-weight: 200;">They need to follow these steps:</label>
-                  <div style="margin-left: 20px;">
-                    <ol>
-                      <li>Download the output PDF file.</li>
-                      <li>Open the file in Bluebeam.</li>
-                      <li>Set the scale of the PDF in Bluebeam by navigating to Tools → Measure → Set Scale.</li>
-                      <li>After setting the scale, all annotations will appear and dynamically update in the measurement column, along with their corresponding labels.</li>
-                      <li>This section works correctly only if the PDF was originally created in AutoCAD.</li>
-                      <li>Double check the required items in the pop up window in AutoCAD while importing the pdf, if something is missing in it, the markups might appear as X shapes.</li>
-                    </ol>
-                  </div>
                 </div>
-             </body>
-              <i id="firstpage" class="fa fa-arrow-left" aria-hidden="true"></i>
-              <br> <br>
             </div>
-              </div>
     </div>
 <!-- POP-UP code -- to handle errors -->
 <!-- Link to trigger modal -->
 <!-- Modal popup box -->
-<div id="mpopupBox" class="mpopup">
     <!-- Modal content -->
     <div class="modal-content">
         <div class="modal-header">
@@ -515,7 +482,7 @@
-<div id="dialog-container" class="overlay">
   <!-- Modal content -->
   <div class="modal-content">
       <div class="modal-header">
@@ -614,6 +581,22 @@
 ///////////////////////////////////////////////BEGIN JS CODE//////////////////////////////////////////////////
 function updateProgressBar(value) {
     const progressBar = document.getElementById('progress');
@@ -832,31 +815,38 @@ function displayprojsections(projectid,Partid){
             relvSelect.removeChild(relvSelect.firstChild);
           }
       }
-  $.get('/getprojectsections/'+JSON.stringify([projectid,Partid]))
-  .success(function(data){
     document.getElementById("all").style.display = "none";
-    for (let i=0;i<data.length;i++)
-    {
-      valueDoesNotExist=isValueNotInDropdown(thirddropdown, data[i])
-      if (valueDoesNotExist)
-      {
-        opt=document.createElement("option");
-        opt.value=data[i];
-        opt.text=data[i];
-        thirddropdown.append(opt);
-        if(!(data[i].startsWith('1.0')  ) && !(data[i].startsWith('3.2')) && !(data[i].startsWith('2.8')) && !(data[i].startsWith('3.3')) && !(data[i].startsWith('2.1')) && !(data[i].startsWith('2.7')) ) // ||data[i].startsWith('2.2')))
-          {
-            opt.style.color='#bdbcbc';
-            opt.style.cursor='not-allowed';
-            opt.setAttribute('disabled',true)
           }
         PrjSectionsArray.push(data[i]);
-      }
-   }
   })
-  .error(function(jqXHR, textStatus, errorThrown) {
           PopupElement.textContent='Error occured while retrieving the Project Sections. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
           ShowPopUp();
      });
@@ -1070,16 +1060,16 @@ document.getElementById('duplicater').childNodes[1].value=[0,0]
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
 /*Tab View of User Guide*/
-document.getElementById('secondpage').addEventListener('click',function(){
-  document.getElementById('textsecondpage').removeAttribute('hidden');
-  document.getElementById('textfirstpage').setAttribute('hidden',true)
-});
-document.getElementById('firstpage').addEventListener('click',function(){
-  document.getElementById('textfirstpage').removeAttribute('hidden');
-  document.getElementById('textsecondpage').setAttribute('hidden',true)
-});
 function w3_open() {
   document.getElementById("home").style.marginLeft = "25%";
   document.getElementById("legends").style.marginLeft = "25%";
@@ -1446,12 +1436,112 @@ console.log('ayhaga', clone.children[5])
   }
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
 /*User Guide button toggle*/
 function userguideclick(){
   var acc = document.getElementsByClassName("dropdown-content")[0];
   var i;
   acc.classList.toggle("active");
@@ -1463,8 +1553,19 @@ function userguideclick(){
     acc.style.display = "block";
     acc.style.backgroundColor=(0, 153, 255);
   }
 }
-  //to be retrieved from python code
 var areainpixels=0;
 var prminpixels=0;
@@ -1485,6 +1586,7 @@ projsec.addEventListener('input',function(){
 var ratioAunit=1;
 var ratioPunit=1;
 var pdfnames='';
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
 function getSelectValues(select) {
@@ -3660,7 +3762,16 @@ function summary_to_XML(){
         ShowPopUp();
         });
 }
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
 /* POP-UP code JS*/
@@ -3668,34 +3779,37 @@ function summary_to_XML(){
 var mpopup = document.getElementById('mpopupBox');
 // Select close action element
-var close = document.getElementsByClassName("closeModal")[0];
 function ShowPopUp(){
 // Open modal
     mpopup.style.display = "block";
 }
 // Close modal once close element is clicked
-  close.onclick = function() {
-    mpopup.style.display = "none";
-};
 // Close modal when user clicks outside of the modal box
   window.onclick = function(event) {
     if (event.target == mpopup) {
         mpopup.style.display = "none";
     }
 };
 var dialog_container = document.getElementById('dialog-container');
 // Select close action element
-var closeDialog = document.getElementsByClassName("closeModal")[1];
 function ShowPopUpWarning(){
 // Open modal
 dialog_container.style.display = "block";
 }
 // Close modal once close element is clicked
-closeDialog.onclick = function() {
-    dialog_container.style.display = "none";
-};
 // Close modal when user clicks outside of the modal box
   window.onclick = function(event) {
     if (event.target == dialog_container) {

     </div>
     <div id="consoleContent"></div>
+    <div class="dropdown-content"   id="dropdown-contentUserguideId" name="tobeclosed">
+            <div id="userguidetext" >
+                <div id="UserguideRibbon">
+                  <label id="UserGuideHeader"> User Guide Text: Before using this tool, kindly read the following carefully.   </label>
+                      <button id="homeguidebutton" style="background-color: transparent; border: none;" onclick="ShowSectionUserguide(this)">
+                        <i class="fa fa-home fa-lg" id="userguideHome"></i>
+                      </button>
+                      <div class="Userguidecontainer" id="UserGuidetoggle" onclick="userguidetoggleFunction()">
+                            <div class="UserGuidebar1"></div>
+                            <div class="UserGuidebar2"></div>
+                            <div class="UserGuidebar3"></div>
                       </div>
+                      <button type="button" class="closeModal" id="userguideClose" data-dismiss="modal">&times;</button>
+                      <button style="background-color: transparent; border: none;"  id="userguideTableMaya" onclick="userguideMayaTableClick()">
+                        <i class="fa fa-th fa-lg" aria-hidden="true"></i>
+                      </button>
+                      <div id="UserGuideSideBar">
+                            <div id="UserGuidemenuOptions">
+                              <li onclick="ShowSectionUserguide(this)">1.0 Substructure</li>
+                              <li onclick="ShowSectionUserguide(this)">2.1 Frames</li>
+                              <li onclick="ShowSectionUserguide(this)">2.2 Upper Floor</li>
+                              <li onclick="ShowSectionUserguide(this)">2.3 Roof</li>
+                              <li onclick="ShowSectionUserguide(this)">2.4 Stairs</li>
+                              <li onclick="ShowSectionUserguide(this)">2.5 External Walls</li>
+                              <li onclick="ShowSectionUserguide(this)">2.6 External Openings</li>
+                              <li onclick="ShowSectionUserguide(this)">2.7 Internal Walls</li>
+                              <li onclick="ShowSectionUserguide(this)">2.8 Internal Openings</li>
+                              <li onclick="ShowSectionUserguide(this)">3.1 Wall Finishes</li>
+                              <li onclick="ShowSectionUserguide(this)">3.2 Floor Finishes</li>
+                              <li onclick="ShowSectionUserguide(this)">3.3 Ceiling Finishes</li>
+                              <li onclick="ShowSectionUserguide(this)">4.0 Fittings, Furnishings and Equipments</li>
+                              <li onclick="ShowSectionUserguide(this)">5.0 Services</li>
+                              <li onclick="ShowSectionUserguide(this)">5.1 Sanitary</li>
+                              <li onclick="ShowSectionUserguide(this)">7.0 Works to existing buildings</li>
+                              <li onclick="ShowSectionUserguide(this)">8.1 Site Preparation Works</li>
+                              <li onclick="ShowSectionUserguide(this)">8.2 Roads, Paths, Pavings</li>
+                              <li onclick="ShowSectionUserguide(this)">8.3 Soft Landscaping</li>
+                              <li onclick="ShowSectionUserguide(this)">8.4 Fencing, Railing, Walls</li>
+                              <li onclick="ShowSectionUserguide(this)">8.5 External Fixtures</li>
+                              <li onclick="ShowSectionUserguide(this)">8.6 External Drainage</li>
+                              <li onclick="ShowSectionUserguide(this)">8.7 External Services</li>
+                              <li onclick="ShowSectionUserguide(this)">8.8 Minor Buildings</li>
+                            </div>
                       </div>
+                </div>
+                <div id="textfirstpage">
+                      <label style="font-weight: bold;">
+                        After reading this user guide, if you still encounter any issues or have suggestions for improving the system, please don't hesitate to contact the ADR team.
+                    </label>
+                    <br>
+                      <label style="font-style: italic;">
+                        This page provides general guidance on using the console. For details on a specific section, refer to the menu and select the desired section by clicking the '<i class="fa fa-bars" aria-hidden="true"></i>' icon.
+                        <br>
+                        In the top right corner, you will find this icon '<i class="fa fa-th fa-lg" aria-hidden="true"></i>', which, when clicked, takes you to a Google Spreadsheet containing a summarized table of the main AI features implemented and
+                        planned for the ADR console, along with the sections where they are applied.
+                    </label>
+                      <br>
+                      The tool is divided into two main parts:
+                        <br><br>
+                        <i class="fa fa-circle" aria-hidden="true">  </i>  <label id="userguideheadings"> First Part </label>
+                          <br>
+                          <div style="margin-left: 40px;">
+                              The system automatically refreshes all data retrieved every 5 minutes from the MC including project names, parts, sections, and MC-T names every. However, if you notice missing information, click this button
+                              <span style="background-color: blue; color: white; padding: 2px 8px; border-radius: 4px; font-style: italic; margin-top: 5px;">Refresh data received from MC</span> to retrieve the latest MC updates.
+                              <br>
+                              <label id="underlinedLables">Inputs: </label>
+                              <br>
+                                <li>
+                                      Use the three dropdown menus to select the project name, part, and section to measure.
+                                      <br>
+                                      <img src="static/images/Dropdowns_3.png" alt="Dropdown menus example" style="margin-top: 10px; width:240px;">
+                                      <label style="font-style: italic; margin-left: -10px; margin-top: 50px;color: #2e83c7;"> Ensure the correct 'Project Section' is selected, as it affects the applied code. </label>
+                                      <br>
+                                </li>
+                                <li>
+                                      <label style="font-size: 15px;"> Document To Measure: </label>
+                                      <br>
+                                      Clicking a document's name opens a PDF preview in a separate tab attached to the black ribbon inside the console. Checking the box next to the document selects it as the document to measure.
+                                      <br>
+                                      <li>
+                                        When retrieving documents for measurement, if multiple files share the same name on Dropbox, a popup may appear. In such cases, please rename the files in Dropbox, then return to the console and click the following icon:
+                                        <i hidden class="fa fa-dropbox" style="color:white; background-color: #2e83c7; border-radius: 4px;"></i> to retrieve the updated documents. You can then select the desired document for measurement. Please note that this process will refresh all documents in the selected project folder.
+                                      </li>
+                                      <br>
+                                      <label style="font-style: italic;"> Pixel-to-Metric conversion important notes:</label>
+                                      <br>
+                                      Upon selecting a plan, the console automatically downloads the PDF with a colored rectangle. Open it in Foxit Reader, Adobe, or Bluebeam to measure its area and perimeter in the desired metric unit.
+                                      Enter these values in the provided textboxes. A dropdown next to each textbox lets you choose between meters (m) or millimeters (mm) for accurate scaling.
+                                      <br>
+                                      This rectangle serves as a scale check for Bluebeam. Refer to the relevant section for further details.
+                                      <br>
+                                      <li>
+                                        Click <span style="background-color: #b216c7; color: white; padding: 2px 8px; border-radius: 4px; font-style: italic;">Add Key Information</span> button to open a popup where you can input additional details to assist in the detection process.
+                                      </li>
+                                      </li>
+                              <label id="underlinedLables">Outputs: </label> <br>
+                                    The right panel displays results in three sections:
+                                    <li>A preview of the measured plan, which you can click to expand.</li>
+                                    <li>Three buttons:
+                                      <li> <label style="font-weight: bold;" >"Legend and Data Created" </label> – Access the Google Sheet legend.</li>
+                                      <li> <label style="font-weight: bold;" >"Click to View as PDF" </label>– Opens the marked-up PDF in Dropbox. <label>(Do not download for this feature.)  </label></li>
+                                      <li> This icon <i class='fa fa-refresh' style="color:white; padding: 3px 3px;background-color: rgb(255,0,255); border-radius: 4px;"></i> button allows you to get the deleted markups (in case you deleted any from the pdf on dropbox).</li>
+                                    </li>
+                                    <br>
+                                    <label style="font-weight: bold;" > ONLY IN DROPBOX VIEW. DO NOT DOWNLOAD THE PDF FOR THIS FEATURE. </label>
+                                    <br>
+                                    <label style="font-style: oblique;" >
+                                      Note : The algorithm is based on detecting shapes and colors from the plan. Some shapes such as tables and textboxes carrying plan-related information, may also be viewed as shapes and so added to the algorithm.
+                                  </label>
+                                    Any markup that you deem unnecessary in the pdf can be removed. After deleting any markup, the console will notify you with a message asking whether you would like to delete it from legend or not and the legend will be updated accordingly.
+                                  </div>
+                                    <br>
+                                <i class="fa fa-circle" aria-hidden="true"> </i>  <label id="userguideheadings"> Second Part </label>
+                                <br><br>
+                                <div style="margin-left: 40px;">
+                                      To open the Google sheet with the created legend, first click the button labeled "Legend and Data created." Names of each shape should go in the first column of the sheet labeled ‘Guess’.
+                                      <br>Ex. GB-1.
+                                      <br> Then, return to this page, the ADR Console, to finish entering the remaining data after you have finished entering the guessed names in the legend.
+                                      <br> Three dropdown menus and three text boxes are present.
+                                      <li style="list-style-type:square;"> You can select the type of the shape from the first dropdown: <!--by selecting either: -->
+                                          <br>  &emsp;&emsp;   e.g. (1.0 Substructure) Ground Beam or Pile Cap. Refer to the relevant section for more details.
+                                          <!-- <br> &emsp;&emsp; b. (3.2 Floor Finishes) Floor or Wall -->
+                                      </li>
+                                      <li style="list-style-type:square;">  In the second dropdown, you will find a list of MC-T Names. Choose Accordingly.</li>
+                                      <li style="list-style-type:square;"> The third dropdown menu has the unit of the MC-T Name you have chosen.</li>
+                                    <br> Note: If the unit was (m), choose whether you wish to extract perimeter or length data from the third selection.
+                                    <br><br><label  style="font-style: italic;"> Regarding the MC-T naming process: </label>
+                                    Then add the relevant detail and depth to the rows underneath the dropdowns.
+                                    You can add/ subtract rows by using the + and - button.
+                                    <br>
+                                    You can add another block and repeat the process for another item by clicking the button next to "Measure using ADR".
+                            </div>
+                </div>
+                <div id="1_0textUserGuide" hidden class="othesectionsuserguide">
+                  User guide in progress...
+                </div>
+                <div id="2_1textUserGuide" hidden class="othesectionsuserguide">
+                  User guide in progress...
+                </div>
+                <div id="2_7textUserGuide" hidden class="othesectionsuserguide">
+                  User guide in progress...
+                </div>
+                <div id="2_8textUserGuide" hidden class="othesectionsuserguide">
+                  User guide in progress...
+                </div>
+                <div id="3_2textUserGuide" hidden class="othesectionsuserguide">
+                  User guide in progress...
+                </div>
+                <div id="3_3textUserGuide" hidden class="othesectionsuserguide">
+                  User guide in progress...
                 </div>
             </div>
     </div>
 <!-- POP-UP code -- to handle errors -->
 <!-- Link to trigger modal -->
 <!-- Modal popup box -->
+<div id="mpopupBox" class="mpopup" name="tobeclosed">
     <!-- Modal content -->
     <div class="modal-content">
         <div class="modal-header">
+<div id="dialog-container" class="overlay" name="tobeclosed">
   <!-- Modal content -->
   <div class="modal-content">
       <div class="modal-header">
 ///////////////////////////////////////////////BEGIN JS CODE//////////////////////////////////////////////////
+var ActiveSections=['1.0','2.1','2.7','2.8','3.2','3.3']
+var menuItems = document.querySelectorAll("#UserGuidemenuOptions li");
+menuItems.forEach(function (item) {
+    // Extract the section number (first part of the text)
+    var sectionNumber = item.textContent.trim().split(" ")[0];
+    // If the section is not in ActiveSections, disable it
+    if (!ActiveSections.includes(sectionNumber)) {
+        item.id = "disabledSection";  // Assign ID
+        item.style.color = "#bdbcbc"; // Greyed-out text
+        item.style.cursor = "not-allowed"; // Change cursor
+        item.onclick = null; // Disable clicking
+    }
+});
 function updateProgressBar(value) {
     const progressBar = document.getElementById('progress');
             relvSelect.removeChild(relvSelect.firstChild);
           }
       }
+      $.get('/getprojectsections/' + JSON.stringify([projectid, Partid]))
+  .done(function(data) {
     document.getElementById("all").style.display = "none";
+    for (let i = 0; i < data.length; i++) {
+      let valueDoesNotExist = isValueNotInDropdown(thirddropdown, data[i]);
+      if (valueDoesNotExist) {
+        let opt = document.createElement("option");
+        opt.value = data[i];
+        opt.text = data[i];
+        let isActive = false;
+        for (let d = 0; d < ActiveSections.length; d++) {
+          if (data[i].startsWith(ActiveSections[d])) {
+            isActive = true;
+            break; // Exit loop early if active
           }
+        }
+        if (!isActive) {
+          opt.style.color = '#bdbcbc';
+          opt.style.cursor = 'not-allowed';
+          opt.setAttribute('disabled', true);
+        }
+        thirddropdown.append(opt);
         PrjSectionsArray.push(data[i]);
+      }
+    }
   })
+  .fail(function(jqXHR, textStatus, errorThrown) {
           PopupElement.textContent='Error occured while retrieving the Project Sections. Refresh and try again. If the error continues, please contact the ADR team to fix it. ';
           ShowPopUp();
      });
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
 /*Tab View of User Guide*/
+// document.getElementById('secondpage').addEventListener('click',function(){
+//   document.getElementById('textsecondpage').removeAttribute('hidden');
+//   document.getElementById('textfirstpage').setAttribute('hidden',true)
+// });
+// document.getElementById('firstpage').addEventListener('click',function(){
+//   document.getElementById('textfirstpage').removeAttribute('hidden');
+//   document.getElementById('textsecondpage').setAttribute('hidden',true)
+// });
 function w3_open() {
   document.getElementById("home").style.marginLeft = "25%";
   document.getElementById("legends").style.marginLeft = "25%";
   }
+  function userguidetoggleFunction() {
+    var dropdownContentUserguideId = document.getElementById("dropdown-contentUserguideId");
+    var UserGuideSideBar = document.getElementById('UserGuideSideBar');
+    var UserGuidetoggle = document.getElementById('UserGuidetoggle');
+    var isOpen = UserGuideSideBar.style.display === "block";
+    // **Close the dropdown when opening User Guide**
+    dropdownContentUserguideId.classList.remove("active");
+    // **Toggle the sidebar visibility properly**
+    if (isOpen) {
+        UserGuideSideBar.style.display = "none";
+        UserGuideSideBar.classList.remove('UserGuideslide-in');
+        UserGuideSideBar.classList.add('UserGuideslide-out');
+        UserGuidetoggle.classList.remove("change");
+    } else {
+        UserGuideSideBar.style.display = "block";
+        UserGuideSideBar.style.width = "25%";
+        UserGuideSideBar.classList.add('UserGuideslide-in');
+        UserGuideSideBar.classList.remove('UserGuideslide-out');
+        UserGuidetoggle.classList.add("change");
+    }
+}
+function ShowSectionUserguide(element) {
+    var textFirstPage = document.getElementById('textfirstpage');
+    var UserGuideSideBar = document.getElementById('UserGuideSideBar');
+    var UserGuidetoggle = document.getElementById('UserGuidetoggle');
+    var isOpen = UserGuideSideBar.style.display === "block";
+    // **If clicking home and already on home, only toggle icon**
+    if (element.id === 'homeguidebutton' || element.parentElement?.id === 'homeguidebutton') {
+        if (textFirstPage.style.display === 'block') {
+            return; // Exit function to prevent further toggling
+        }
+        hideAllSections();
+        textFirstPage.style.display = 'block';
+        return;
+    }
+    // **If clicking a section, hide sidebar and update content**
+    if (element.tagName === 'LI') {
+        hideAllSections();
+                // **Toggle the sidebar visibility properly**
+      if (isOpen) {
+            UserGuideSideBar.style.display = "none";
+            UserGuideSideBar.classList.remove('UserGuideslide-in');
+            UserGuideSideBar.classList.add('UserGuideslide-out');
+            UserGuidetoggle.classList.remove("change");
+        } else {
+            UserGuideSideBar.style.display = "block";
+            UserGuideSideBar.style.width = "25%";
+            UserGuideSideBar.classList.add('UserGuideslide-in');
+            UserGuideSideBar.classList.remove('UserGuideslide-out');
+            UserGuidetoggle.classList.add("change");
+        }
+        if (element.textContent.startsWith('1.0')) {
+            document.getElementById('1_0textUserGuide').style.display = 'block';
+            document.getElementById('1_0textUserGuide').removeAttribute('hidden');
+        }
+        else if (element.textContent.startsWith('2.1')) {
+            document.getElementById('2_1textUserGuide').style.display = 'block';
+            document.getElementById('2_1textUserGuide').removeAttribute('hidden');
+        }
+        else if (element.textContent.startsWith('2.7')) {
+            document.getElementById('2_7textUserGuide').style.display = 'block';
+            document.getElementById('2_7textUserGuide').removeAttribute('hidden');
+        }
+        else if (element.textContent.startsWith('2.8')) {
+            document.getElementById('2_8textUserGuide').style.display = 'block';
+            document.getElementById('2_8textUserGuide').removeAttribute('hidden');
+        }
+        else if (element.textContent.startsWith('3.2')) {
+            document.getElementById('3_2textUserGuide').style.display = 'block';
+            document.getElementById('3_2textUserGuide').removeAttribute('hidden');
+        }
+        else if (element.textContent.startsWith('3.3')) {
+            document.getElementById('3_3textUserGuide').style.display = 'block';
+            document.getElementById('3_3textUserGuide').removeAttribute('hidden');
+        }
+    }
+}
+// Function to hide all sections before showing the selected one
+function hideAllSections() {
+    document.getElementById('textfirstpage').style.display = 'none';
+    document.getElementById('1_0textUserGuide').style.display = 'none';
+    document.getElementById('2_1textUserGuide').style.display = 'none';
+    document.getElementById('2_7textUserGuide').style.display = 'none';
+    document.getElementById('2_8textUserGuide').style.display = 'none';
+    document.getElementById('3_2textUserGuide').style.display = 'none';
+    document.getElementById('3_3textUserGuide').style.display = 'none';
+}
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
 /*User Guide button toggle*/
 function userguideclick(){
+  document.getElementById('textfirstpage').style.display='block'
   var acc = document.getElementsByClassName("dropdown-content")[0];
+  var userguideClose=document.getElementById("userguideClose")
   var i;
   acc.classList.toggle("active");
     acc.style.display = "block";
     acc.style.backgroundColor=(0, 153, 255);
   }
+  close.onclick = function() {
+    acc.style.display = "none";
+};
+}
+function userguideMayaTableClick(){
+    var userguideTableMaya=document.getElementById('userguideTableMaya')
+    window.open('https://docs.google.com/spreadsheets/d/10TjB8EbSiDHybo9YsDDzekxi8iQECpprXdqptHCZzec/edit?gid=875423041#gid=875423041');
 }
+//to be retrieved from python code
 var areainpixels=0;
 var prminpixels=0;
 var ratioAunit=1;
 var ratioPunit=1;
 var pdfnames='';
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
 function getSelectValues(select) {
         ShowPopUp();
         });
 }
+var closeButtons = document.querySelectorAll(".closeModal");
+var allCloseDivs = document.getElementsByName("tobeclosed");
+closeButtons.forEach(function(button) {
+    button.addEventListener("click", function() {
+        allCloseDivs.forEach(function(div) {
+            div.style.display = "none";
+        });
+    });
+});
 //___________________________________________________________________________________________________________
 //___________________________________________________________________________________________________________
 /* POP-UP code JS*/
 var mpopup = document.getElementById('mpopupBox');
 // Select close action element
+// var close = document.getElementsByClassName("closeModal")[0];
 function ShowPopUp(){
 // Open modal
     mpopup.style.display = "block";
 }
 // Close modal once close element is clicked
+//   close.onclick = function() {
+//     mpopup.style.display = "none";
+// };
 // Close modal when user clicks outside of the modal box
   window.onclick = function(event) {
     if (event.target == mpopup) {
         mpopup.style.display = "none";
     }
 };
+// closeDialog.onclick = function() {
+//     dialog_container.style.display = "none";
+// };
 var dialog_container = document.getElementById('dialog-container');
 // Select close action element
+// var closeDialog = document.getElementsByClassName("closeModal")[0];
 function ShowPopUpWarning(){
 // Open modal
 dialog_container.style.display = "block";
 }
 // Close modal once close element is clicked
+// closeDialog.onclick = function() {
+//     console.log()
+//     dialog_container.style.display = "none";
+// };
 // Close modal when user clicks outside of the modal box
   window.onclick = function(event) {
     if (event.target == dialog_container) {