commit hr gde changes

Web-GDE/config.js

@@ -11,7 +11,7 @@
 // const SCHEMA_FILE = "./src/sample_schema/missing_fields.json"
 
 // schema with 20 fields
-// const SCHEMA_FILE = "./src/sample_schema/20_field_schema.json"
+const SCHEMA_FILE = "./src/sample_schema/20_field_schema.json"
 
 // schema with 15 fields
 // const SCHEMA_FILE = "./src/sample_schema/15_field_schema.json"
@@ -20,12 +20,12 @@
 // const SCHEMA_FILE = "./src/sample_schema/10_field_schema.json"
 
 // schema with 5 fields and all possible collections
-
+// const SCHEMA_FILE = "./src/sample_schema/5_field_schema.json"
 
 // const SCHEMA_FILE = "./src/sample_schema/Sample_Schema.json"
 
 //const INPUT_FILES = ["./input/Ong, Mae Janica - Application Form.TIFF","./input/Magalona, Rowell James - Application Form.TIFF","./input/Felizardo, Brylle Theodure - Application Form.TIFF","./input/Laxamana, Conrad John - Application Form.TIFF"]  // list of URLs
-const SCHEMA_FILE = "./src/sample_schema/5_field_schema.json"
+
 
 const INPUT_FOLDER = "./input/"
 

Web-GDE/index.html

@@ -80,7 +80,7 @@
         <!-- Modal content -->
         <div class="TiffModalContent">
           <div class="bar">
-            <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
+            <progress id="progressBar" value="0" max="100" style="width:150px;"></progress>
             <div id="status">&nbsp;</div>
             <h3 id="progress">&nbsp;</h3>
           </div>
@@ -107,6 +107,8 @@
   </div>
 
 </body>
+<!--body onload-->
+
 <script src="./config.js"></script>
 <script src='dir.php'></script>
 <script src="./src/captureMetrics/captureMetrics.js"></script>
@@ -131,4 +133,5 @@
 <script src="./src/endSession/endSession.js"></script>
 <script src="./src/tiffViewer/tiffViewer.js"></script>
 <script src="./src/highlight/highlight.js"></script>
+
 </html>
\ No newline at end of file

Web-GDE/metrics/demo_Metrics_20220922.csv

+record_no,filename,speed,eoe_timestamp,avg_speed
+1,"Felizardo, Brylle Theodure - Application Form.TIFF",69.17903277463435,9/22/2022 2:48:09 PM,69.17903277463435
+2,"Felizardo, Theodure Brylle - Application Form.TIFF",6445.837063563115,9/22/2022 2:48:15 PM,3257.5080481688747
+3,"Laxamana, Conrad John - Application Form.TIFF",8766.88067301306,9/22/2022 2:48:20 PM,5093.965589783603
+4,"Laxamana, John Conrad - Application Form.TIFF",9209.123854188872,9/22/2022 2:48:27 PM,6122.755155884921
+5,"Magalona, James Rowell - Application Form.TIFF",8878.923766816144,9/22/2022 2:48:33 PM,6673.988878071165
+6,"Magalona, Rowell James - Application Form.TIFF",3806.6465256797587,9/22/2022 2:48:42 PM,6196.098486005932
+7,"Ong, Janica Mae - Application Form.TIFF",11316.010058675607,9/22/2022 2:48:49 PM,6927.514424958742
+8,"Ong, Mae Janica - Application Form.TIFF",7704.280155642024,9/22/2022 2:48:57 PM,7024.6101412941525
\ No newline at end of file

Web-GDE/metrics/demo_Metrics_20220923.csv

+record_no,filename,speed,eoe_timestamp,avg_speed
+1,"Felizardo, Brylle Theodure - Application Form.TIFF",4122.362178962865,9/23/2022 10:26:52 AM,4122.362178962865
\ No newline at end of file

Web-GDE/output/demo_Felizardo, Brylle Theodure - Application Form.xml

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <Image_Source_Path>./input/Felizardo, Brylle Theodure - Application Form.TIFF</Image_Source_Path>
-<No_of_Keystrokes>3</No_of_Keystrokes>
-<Processing_Time_Seconds>5.348</Processing_Time_Seconds>
-<Surname>MAGALONA</Surname>
-<Religion>BIBLE BAPTIST</Religion>
-<Birthdate>2022-09-07</Birthdate>
-<Age>22</Age>
+<No_of_Keystrokes>7</No_of_Keystrokes>
+<Processing_Time_Seconds>6.113</Processing_Time_Seconds>
+<Surname>da</Surname>
+<Religion>dwa</Religion>
+<Birthdate>2022-09-21</Birthdate>
+<Age>12</Age>
 <Civil_Status>Single</Civil_Status>
\ No newline at end of file

Web-GDE/output/demo_Felizardo, Theodure Brylle - Application Form.xml

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <Image_Source_Path>./input/Felizardo, Theodure Brylle - Application Form.TIFF</Image_Source_Path>
-<No_of_Keystrokes>3</No_of_Keystrokes>
-<Processing_Time_Seconds>6.476</Processing_Time_Seconds>
-<Surname>ONG</Surname>
-<Religion>CHRISTIAN</Religion>
-<Birthdate>2022-09-21</Birthdate>
-<Age>21</Age>
+<No_of_Keystrokes>7</No_of_Keystrokes>
+<Processing_Time_Seconds>6.533</Processing_Time_Seconds>
+<Surname>daw</Surname>
+<Religion>daw</Religion>
+<Birthdate>2022-09-08</Birthdate>
+<Age>1</Age>
 <Civil_Status>Single</Civil_Status>
\ No newline at end of file

Web-GDE/output/demo_Laxamana, Conrad John - Application Form.xml

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <Image_Source_Path>./input/Laxamana, Conrad John - Application Form.TIFF</Image_Source_Path>
-<No_of_Keystrokes>17</No_of_Keystrokes>
-<Processing_Time_Seconds>5.141</Processing_Time_Seconds>
-<Surname>asdfasd</Surname>
-<Religion>asdfasdf</Religion>
-<Birthdate>2022-09-15</Birthdate>
+<No_of_Keystrokes>11</No_of_Keystrokes>
+<Processing_Time_Seconds>4.517</Processing_Time_Seconds>
+<Surname>dawd</Surname>
+<Religion>awdwa</Religion>
+<Birthdate>2022-09-22</Birthdate>
 <Age>12</Age>
-<Civil_Status>Married</Civil_Status>
+<Civil_Status>Single</Civil_Status>
\ No newline at end of file

Web-GDE/output/demo_Laxamana, John Conrad - Application Form.xml

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <Image_Source_Path>./input/Laxamana, John Conrad - Application Form.TIFF</Image_Source_Path>
-<No_of_Keystrokes>18</No_of_Keystrokes>
-<Processing_Time_Seconds>5.06</Processing_Time_Seconds>
-<Surname>asdfasd</Surname>
-<Religion>fasdfasdf</Religion>
-<Birthdate>2022-09-17</Birthdate>
+<No_of_Keystrokes>12</No_of_Keystrokes>
+<Processing_Time_Seconds>4.691</Processing_Time_Seconds>
+<Surname>daw</Surname>
+<Religion>dawd</Religion>
+<Birthdate>2022-09-15</Birthdate>
 <Age>12</Age>
 <Civil_Status>Single</Civil_Status>
\ No newline at end of file

Web-GDE/output/demo_Magalona, James Rowell - Application Form.xml

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <Image_Source_Path>./input/Magalona, James Rowell - Application Form.TIFF</Image_Source_Path>
-<No_of_Keystrokes>16</No_of_Keystrokes>
-<Processing_Time_Seconds>6.338</Processing_Time_Seconds>
-<Surname>asdfasd</Surname>
-<Religion>asdfasd</Religion>
-<Birthdate>2022-09-16</Birthdate>
+<No_of_Keystrokes>11</No_of_Keystrokes>
+<Processing_Time_Seconds>4.46</Processing_Time_Seconds>
+<Surname>dawd</Surname>
+<Religion>awdwa</Religion>
+<Birthdate>2022-09-15</Birthdate>
 <Age>12</Age>
 <Civil_Status>Single</Civil_Status>
\ No newline at end of file

Web-GDE/output/demo_Magalona, Rowell James - Application Form.xml

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <Image_Source_Path>./input/Magalona, Rowell James - Application Form.TIFF</Image_Source_Path>
-<No_of_Keystrokes>17</No_of_Keystrokes>
-<Processing_Time_Seconds>4.784</Processing_Time_Seconds>
-<Surname>asdfasd</Surname>
-<Religion>asdfasdf</Religion>
-<Birthdate>2022-09-16</Birthdate>
+<No_of_Keystrokes>7</No_of_Keystrokes>
+<Processing_Time_Seconds>6.62</Processing_Time_Seconds>
+<Surname>da</Surname>
+<Religion>dwa</Religion>
+<Birthdate>2022-09-17</Birthdate>
 <Age>12</Age>
 <Civil_Status>Single</Civil_Status>
\ No newline at end of file

Web-GDE/output/demo_Ong, Janica Mae - Application Form.xml

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <Image_Source_Path>./input/Ong, Janica Mae - Application Form.TIFF</Image_Source_Path>
-<No_of_Keystrokes>16</No_of_Keystrokes>
-<Processing_Time_Seconds>6.3</Processing_Time_Seconds>
-<Surname>asdfasd</Surname>
-<Religion>fasdfas</Religion>
-<Birthdate>2022-09-21</Birthdate>
+<No_of_Keystrokes>15</No_of_Keystrokes>
+<Processing_Time_Seconds>4.772</Processing_Time_Seconds>
+<Surname>dawdaw</Surname>
+<Religion>dwadaw</Religion>
+<Birthdate>2022-09-23</Birthdate>
 <Age>12</Age>
 <Civil_Status>Single</Civil_Status>
\ No newline at end of file

Web-GDE/output/demo_Ong, Mae Janica - Application Form.xml

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <Image_Source_Path>./input/Ong, Mae Janica - Application Form.TIFF</Image_Source_Path>
-<No_of_Keystrokes>18</No_of_Keystrokes>
-<Processing_Time_Seconds>5.891</Processing_Time_Seconds>
-<Surname>asdfasdf</Surname>
-<Religion>asdfasdf</Religion>
+<No_of_Keystrokes>11</No_of_Keystrokes>
+<Processing_Time_Seconds>5.14</Processing_Time_Seconds>
+<Surname>dawdaw</Surname>
+<Religion>daw</Religion>
 <Birthdate>2022-09-16</Birthdate>
 <Age>12</Age>
 <Civil_Status>Single</Civil_Status>
\ No newline at end of file

Web-GDE/project_config.js

 const ALLOWED_KPH = 8000;
 const ALLOWED_DIMENSION_WIDTH = 1366;
-const ALLOWED_DIMENSION_HEIGHT = 768;
+const ALLOWED_DIMENSION_HEIGHT = 728;
 const ALLOWED_BROWSERS = "Chrome";
\ No newline at end of file

Web-GDE/src/captureMetrics/captureMetrics.js

@@ -203,6 +203,9 @@ function promptPaused(){
 
 
 function disableForm(){
+    var pbutton = document.getElementById("pause");
+    pbutton.disabled = true;
+
     var form = document.getElementById("fields");
     var elements = form.elements;
     for (var i = 0, len = elements.length; i < len; ++i) {
@@ -212,6 +215,9 @@ function disableForm(){
 }
 
 function enableForm(){
+    var pbutton = document.getElementById("pause");
+    pbutton.disabled = false;
+
     var form = document.getElementById("fields");
     var elements = form.elements;
     for (var i = 0, len = elements.length; i < len; ++i) {

Web-GDE/src/endSession/endSession.js

@@ -10,7 +10,15 @@ form.addEventListener('submit', (e)=>{
 endButton = document.createElement("button");
 endButton.id = "endBtn";
 endButton.innerHTML = "End Session";
-sidebar.append(endButton);
+
+var endDiv = document.createElement("div");
+endDiv.id = "endDiv";
+endDiv.append(endButton);
+
+
+
+
+sidebar.append(endDiv);
 
 
 //checks if form is empty

Web-GDE/src/getFields/getFields.js

@@ -84,6 +84,10 @@ const displayFields = async (parentID) => {
             inputContainer.appendChild(input)
         }
 
+        window.onload = function() {
+            document.getElementById("Surname").focus();
+        }
+
         const submit = document.createElement('input')
         submit.type = 'submit'
         div.appendChild(submit)
@@ -92,6 +96,9 @@ const displayFields = async (parentID) => {
         // separate handler is used to fit with the library used 'select2'
         $(document).ready(function() {
             const dropdowns = $('.dropdown-input').select2();
+            dropdowns.on('select2:open', () => {
+                document.querySelector('.select2-search__field').focus();
+              });
             dropdowns.on('select2:close', handleDropdown)
         })
     } catch(err) {
@@ -225,6 +232,14 @@ const inputDropdown = (key, validation) => {
         input.classList.add('dropdown-input')
         input.addEventListener('focusout', handleInput)
 
+        input.addEventListener('keydown', function(event) {
+            if (event.keyCode == 9) {
+              event.preventDefault();
+              var elem = document.getElementsByClassName('select2-search__field');
+              elem.focus();
+            }
+          });
+
         if(options && options.length>0) {
             newOption = document.createElement("option")
             newOption.text = 'Choose an option'
@@ -275,6 +290,17 @@ const handleInput = (event) => {
     }
 }
 
+const handleOpen = (event) => {
+    const [id, value, style] = [
+        event.currentTarget.id,
+        $(event.currentTarget).val(),
+        event.currentTarget.style
+    ]
+    console.log(id);
+    event.find("input").focus();
+    // const dropdowns = $('.dropdown-input').search();
+    // dropdowns.focus();
+}
 
 const handleDropdown = (event) => {
     const [id, value, style] = [
@@ -284,6 +310,8 @@ const handleDropdown = (event) => {
     ]
 
     try {
+        // console.log(id);
+
         const validation = validateInput(id, value)
 
         if(!validation.valid) {

Web-GDE/src/highlight/highlight.js

@@ -24,9 +24,12 @@ function createHighlight(width, height){
     //set style for highlight canvas
     //z-index is increased to put it above the TIFF image
     highlightCanvas.style.position = "absolute";
-    highlightCanvas.style.width = width;
-    highlightCanvas.style.height = height;
+    // highlightCanvas.style.width = width;
+    // highlightCanvas.style.height = height;
+    highlightCanvas.setAttribute("width", width);
+    highlightCanvas.setAttribute("height", height);
     highlightCanvas.style.zIndex = "20";
+    
 }
 
 
@@ -44,23 +47,28 @@ function highlight(nameVal){
             //split by '~', and create an array of the splitted chars
             //format: rotation~zoom~scrollx~scrolly~left~top~width~height~pageno~imagename~annotationtype~highlightcolor
             const fieldHighlightData = coordinatesData[i].Default_Annotation.split(/~+/);
-
+            
             //indicates color and opacity of shape
             //fieldHighlightData[10] is the string already in RGB format (e.g. 255,255,0)
-            ctx.fillStyle = `rgba(${fieldHighlightData[10]}, 0.5)`;
+            
             //uses coordinates given in coordinates text file
-            ctx.fillRect(fieldHighlightData[4]*resizeWidthVal,fieldHighlightData[5]*resizeHeightVal,fieldHighlightData[6]*resizeWidthVal,fieldHighlightData[7]*resizeHeightVal);
+            ctx.beginPath();
+            ctx.lineWidth = 3;        
+            ctx.strokeStyle = `rgba(${fieldHighlightData[10]})`;           
+            ctx.rect(Math.round(fieldHighlightData[4]*resizeWidthVal),Math.round(fieldHighlightData[5]*resizeHeightVal),Math.round(fieldHighlightData[6]*resizeWidthVal),Math.round(fieldHighlightData[7]*resizeHeightVal));
+            ctx.stroke();
             break;
         }
     }
 }
 
+
 function resizeHighlightCanvas(width, height, left){
     resizeWidthVal = highlightCanvas.width*(width/highlightCanvas.width);
     resizeHeightVal = highlightCanvas.height*(height/highlightCanvas.height);
     highlightCanvas.style.width = resizeWidthVal;
     highlightCanvas.style.height = resizeHeightVal;
-    highlightCanvas.style.left = `${left}px`;
+    // highlightCanvas.style.left = `${left}px`;
 }
 
 
@@ -178,6 +186,7 @@ function initHighlight() {
 
             if(isCanvasNotCreated){
                 rect = document.getElementById("IMG1").getBoundingClientRect();
+               // createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
                 createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
                 isCanvasNotCreated = false;
                 ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);

Web-GDE/src/init/init.js

@@ -3,7 +3,6 @@ const init = () => {
 
     displayFields("fields");
     accessFile();
-    
     window.onkeydown = (key) => {
       if(!started_flag) {
         started_flag = true;

Web-GDE/src/tiffViewer/tiffViewer.js

@@ -227,7 +227,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
 
       if (setheight > 800 && setwidth > 1000) {
         if (setheight > setwidth) {
-          img.style = "width: 600; height: 800";
+          img.style = "width: 870px; height: 1160px";
         } else {
           img.style = "width: 800; height: 600";
         }
@@ -251,7 +251,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
       hzoom.push(parseInt(setheight, 10));
       wzoom.push(parseInt(setwidth, 10));
       TiffViewer_scrn.style = `width: ${setwidth}; height: ${setheight};`;
-      document.getElementById("TiffViewer_FileContainer").style = `width: ${setwidth}; height: ${setheight}; border: 1px solid black;`;
+      document.getElementById("TiffViewer_FileContainer").style = `width: ${setwidth}; height: ${setheight};`;
       TiffViewer_ImageContainer.style = `width: ${setwidth}; height: ${setheight};`;
     });
     checker.push(0);

Web-GDE/src/validateInput/validateInput.js

@@ -38,8 +38,7 @@ const validateInput = (fieldID, value) => {
             case 'alphabet':
                 return validateAlphabet(validation, value)
             case 'specific':
-            case 'dropdown':
-                
+            case 'dropdown':                
                 return validateSpecific(validation, value)
             case 'numeric':
                 return validateNumeric(validation, value)

Web-GDE/style.css

@@ -2,6 +2,11 @@ html {
     min-height: 100vh;
 }
 
+*{
+    font-size: 13px;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
 #with-config {
     margin: 0;
     grid-template-columns: auto auto 375px;
@@ -111,15 +116,20 @@ main#viewer {
     display: flex;
     align-items: center;
 }
+
+#endDiv{
+    width: 100%;
+    text-align: right;
+    padding: 5px;
+}
+
 #endBtn{
     width: 160px;
-    text-align: center;
-    height: 35px;
-    position: absolute;
-    bottom: 0px;
-    right: 0px;
+    height: 28px;
+    margin-right: 10px;
 }
 
+
 #counter {
     font-size: 22px;
     padding: 10px;
@@ -177,6 +187,7 @@ main#viewer {
     margin-right: 5px;
 }
 
+
 #TiffViewer_Screen {
     clear: both;
     position: relative;
@@ -265,8 +276,10 @@ body>div>button {
     background-color: #fefefe;
     margin: auto;
     padding: 5;
-    border: 1px solid #888;
+    /* border: 1px solid #888; 
     width: 90%;
+    */
+    width: 100%;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     -webkit-animation-name: animatetop;
     -webkit-animation-duration: 0.4s;
@@ -373,9 +386,8 @@ body>div>button {
 .labelContainer {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
-    width: 50%;
-
+    /* justify-content: flex-end; */
+    width: 42%;
     padding-right: 3px;
 }
 
@@ -383,8 +395,7 @@ body>div>button {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    width: 50%;
-
+    width: 56%;
     padding-left: 3px;
 }