Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -243,58 +243,82 @@
    
     </div>
     
-    <div class="dropdown-content">
+       <div class="dropdown-content">
             <div id="userguidetext">
               <div id="textfirstpage">
-              <label style="font-style: oblique;"> <br>
-                Please read the following before you use this tool.  </label>
+              <label style="font-style: oblique;"> 
+                <br> Before using this tool, kindly read the following.   </label>
               <br><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.
-              To avoid this, please tidy up the plan before choosing to measure it, by using an outside tool to either erase them or to put a white rectangle over them.</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. To avoid this, please tidy up the plan before choosing to measure it, by using an external tool to either erase them or to put a white rectangle over them.
+                </label>
+                <br>
 
               <br> 
               The tool is divided into two main parts: 
               <br>
               <li id="userguideheadings">   First Part  </li>
-              <br>  There are three dropdowns available. Select the name of the project you wish to measure, along with the project part, and the project section. 
+              <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, along with the project part, and the project section.
+ 
               <br > <br>
-              <label style="font-style: italic;"> Please double check the project section chosen as this determines the code that will be applied to the plan. </label>
+              <label style="font-style: italic;"> Please make sure the “Project Section” you select is correct because it will affect the code that will be applied to the plan.   </label>
               <br>
               <br>
-              Mark the project you want to meaure from the section labeled 'To measure'. Additionally, you have the ability to view any relevant documents you might want.(optional).
-              <br> <label style="font-style: italic;">Pixel to Metric conversion important notes : </label> Once you have selected a specific plan to measure, you will be provided with a pdf with
-              a colored rectangle drawn in it. Please open this pdf in Bluebeam, measure its area and perimeter, and then enter those values in the textboxes that will shown below the relevant documents.
-              You may think of this rectangle's measurement as a scale check for Bluebeam.
-              <br> <br> <label  style="font-style: italic;">Notes when measuring secion 1.0: </label>
-              <label id=info >You can measure several levels independently using the textbox below the Scale document heading, which is titled "Number of levels."  </label>
-              <br>   Before selecting this plan from the 'To Measure' option, please draw shapes around the relevant regions on Bluebeam or using any other external tool if the project you want to measure contains more than 1 level. 
-              <br> Additionally, you must include the levels' colors in RGB (Red - Green - Blue) format.
+              Mark the project from the "To measure" section that you want to measure. Additionally, you have the ability to view any relevant documents you might need in Dropbox.(optional).
+
+              <br> <label style="font-style: italic;"> * Pixel to Metric conversion important notes : </label> Once you have selected a specific plan to measure, you will be provided with a pdf with a colored rectangle drawn in it. 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, 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 allow the code to understand the ratio between the pixels to the metric unit you chose.
               
+             <br>
+              You may think of this rectangle's measurement as a scale check for Bluebeam.
+              <br> <br>
+             <label  style="font-style: italic;"> * Notes for section 1.0 measurement (Section 3.2 does not yet support this feature):   </label>
+              <label id=info >You can measure several levels independently using checkbox labeled 'Leveled plan' under Scale document heading.  </label>
+              Leave the checkbox unchecked if you want to measure the entirety of the plan. <br>Please tick the box if you want to measure certain areas of the plan or have the plan divided into levels. Once the checkbox is ticked, a window will appear that will allow you to draw on the PDF. Click the save button at the bottom of the page when you are done.
               <br>
     
               <i id="secondpage" class="fa fa-arrow-right" aria-hidden="true"></i>
-              <br>
+              <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> <br>
+                ONLY IN DROPBOX VIEW. DO NOT DOWNLOAD THE PDF FOR THIS FEATURE. 
+                Any markup that you deem unnecessary in the pdf can be removed, and the legend will also be updated accordingly.
+
                 <li  id="userguideheadings" >  Second part </li>
               <br>
-              First, please open the google sheets link labeled 'Legend' and fill in the names of each shape. 
-              <br>Ex. The first row shows the measurement of GB-1 , in the first column type in GB-1.
-              <br> After you are done with filling in the legend, go back to the ADR Console.
-              You will find three dropdowns and three textboxes.
+              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;"> The first dropdown will allow you to choose whether the shape is a ground beam or a pile cap.  </li>
-              <li style="list-style-type:square;">  The second dropdown is the choice of (Area-perimeter-Length-Count).</li>
-              <li style="list-style-type:square;"> The third dropdown gives you the first part of the MC-T Name.</li>
-              <br> Then fill in the rows below the dropdowns with the corresponding detail and depth.
-              The plus button allows you to add more rows within this block.
+              <li style="list-style-type:square;"> You can select the type of the shape from the first dropdown by selecting either: 
+                  <br>  &emsp;&emsp;   a. (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 the first part of the MC-T Name. Ex: Ground Beams: m2.</li>
+              <li style="list-style-type:square;"> The third dropdown menu has the options (Area-perimeter-Length-Count).</li>
+              <br> Ex: If you selected Ground Beams: m2 , You are currently obtaining the total area value from the legend. If you selected Ground Beams: m, you may choose whether 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>
-              There is another button above the dropdowns (to the right) that allows you to add another block and repeat the process for another item (Ground Beam or Pile Cap) or (Area-perimeter-Length-Count).
+             
+              You can add another block and repeat the process for another item by clicking the button next to "Measure using ADR". 
+
+
               <br><br>
               <i id="firstpage" class="fa fa-arrow-left" aria-hidden="true"></i>
-              <br>
+              <br> <br>
               
             </div>
       
@@ -814,7 +838,7 @@ measids.forEach(function(elem) {
         $.get( '/pixelimg/'+JSON.stringify(pixelArr)) .then( function(data) {
           // alert('Measure the white square drawn in the pdf on Bluebeam, then enter its area and perimeter in ur desired scale. \n' );
           if(window.confirm("Measure the white square drawn in the pdf on Bluebeam, then enter its area and perimeter in ur desired scale. \n")){
-            pdfname=data[2];
+            // pdfname=data[2];
             window.open(data[2]);
 
          }