Skip to content

W
web-ui
Commit 7e7f557c by Jorem Magcawas
Options

commit hr gde changes

sprint 3 ticket for hr
parent 2bf19dec
Showing with 154 additions and 69 deletions
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 0 → 100644
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 0 → 100644
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>
\ No newline at end of file
<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";
}
......@@ -47,20 +50,25 @@ function highlight(nameVal){
//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
......@@ -39,7 +39,6 @@ const validateInput = (fieldID, value) => {
return validateAlphabet(validation, value)
case 'specific':
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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment