Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
2
2022-073
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
2022-073
2022-073
Commits
7ba3c8a6
Commit
7ba3c8a6
authored
Oct 11, 2022
by
Nilan Meegoda
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
few minor bug fixes in attention span
parent
664126b5
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
113 additions
and
45 deletions
+113
-45
web-app/frontend/src/components/activities/ethicalClearence.css
...p/frontend/src/components/activities/ethicalClearence.css
+17
-2
web-app/frontend/src/components/activities/ethicalClearence.jsx
...p/frontend/src/components/activities/ethicalClearence.jsx
+60
-1
web-app/frontend/src/pages/attention_demo/attentionspan.jsx
web-app/frontend/src/pages/attention_demo/attentionspan.jsx
+29
-38
web-app/frontend/src/pages/student/Student.css
web-app/frontend/src/pages/student/Student.css
+6
-3
web-app/frontend/src/pages/student/Student.jsx
web-app/frontend/src/pages/student/Student.jsx
+1
-1
No files found.
web-app/frontend/src/components/activities/ethicalClearence.css
View file @
7ba3c8a6
...
@@ -31,19 +31,34 @@
...
@@ -31,19 +31,34 @@
.containerb
.btn
{
.containerb
.btn
{
position
:
absolute
;
position
:
absolute
;
top
:
50
%
;
top
:
92
%
;
left
:
50%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
-ms-transform
:
translate
(
-50%
,
-50%
);
-ms-transform
:
translate
(
-50%
,
-50%
);
background-color
:
#555
;
background-color
:
#555
;
color
:
white
;
color
:
white
;
font-size
:
16px
;
font-size
:
16px
;
padding
:
1
2px
24
px
;
padding
:
1
5px
35
px
;
border
:
none
;
border
:
none
;
cursor
:
pointer
;
cursor
:
pointer
;
border-radius
:
5px
;
border-radius
:
5px
;
text-align
:
center
;
text-align
:
center
;
}
}
.containerb
.vid
{
position
:
absolute
;
top
:
58%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
-ms-transform
:
translate
(
-50%
,
-50%
);
padding
:
36px
159px
;
border
:
none
;
cursor
:
pointer
;
border-radius
:
5px
;
text-align
:
center
;
}
.containerb
.btn
:hover
{
.containerb
.btn
:hover
{
background-color
:
black
;
background-color
:
black
;
...
...
web-app/frontend/src/components/activities/ethicalClearence.jsx
View file @
7ba3c8a6
...
@@ -7,6 +7,18 @@ import { useNavigate } from "react-router-dom";
...
@@ -7,6 +7,18 @@ import { useNavigate } from "react-router-dom";
import
API
from
"
../../config/api
"
;
import
API
from
"
../../config/api
"
;
import
bgImage1
from
"
../../assets/bg.jpg
"
;
import
bgImage1
from
"
../../assets/bg.jpg
"
;
import
wait
from
"
../../utility/delay
"
;
import
wait
from
"
../../utility/delay
"
;
import
{
useRecordWebcam
,
CAMERA_STATUS
}
from
"
react-record-webcam
"
;
import
type
{
RecordWebcamOptions
,
RecordWebcamHook
,
}
from
"
react-record-webcam
"
;
const
OPTIONS
:
RecordWebcamOptions
=
{
filename
:
"
test-filename
"
,
fileType
:
"
mp4
"
,
width
:
1920
,
height
:
1080
,
};
const
EthicalClearenceScreen
=
()
=>
{
const
EthicalClearenceScreen
=
()
=>
{
const
navigate
=
useNavigate
();
const
navigate
=
useNavigate
();
...
@@ -16,6 +28,8 @@ const EthicalClearenceScreen = () => {
...
@@ -16,6 +28,8 @@ const EthicalClearenceScreen = () => {
const
[
parentSignature
,
setParentSignature
]
=
useState
(
"
WIP
"
);
const
[
parentSignature
,
setParentSignature
]
=
useState
(
"
WIP
"
);
const
[
childData
,
setChildData
]
=
useState
([{}]);
const
[
childData
,
setChildData
]
=
useState
([{}]);
const
[
isFormFilled
,
setIsFormFilled
]
=
useState
(
false
);
const
[
isFormFilled
,
setIsFormFilled
]
=
useState
(
false
);
const
recordWebcam
:
RecordWebcamHook
=
useRecordWebcam
(
OPTIONS
);
const
headerConfig
=
{
const
headerConfig
=
{
headers
:
{
headers
:
{
"
Access-Control-Allow-Origin
"
:
"
*
"
,
"
Access-Control-Allow-Origin
"
:
"
*
"
,
...
@@ -34,6 +48,25 @@ const EthicalClearenceScreen = () => {
...
@@ -34,6 +48,25 @@ const EthicalClearenceScreen = () => {
fetchData
();
fetchData
();
},
[]);
},
[]);
useEffect
(()
=>
{
if
(
isFormFilled
)
{
recordWebcam
.
open
();
}
},
[
isFormFilled
]);
useEffect
(()
=>
{
if
(
recordWebcam
.
status
===
CAMERA_STATUS
.
OPEN
)
{
toast
.
success
(
"
Camera has been connected!
"
,
{
duration
:
5000
,
});
toast
.
success
(
"
Microphone has been connected!
"
,
{
duration
:
5000
,
});
}
else
if
(
recordWebcam
.
status
===
CAMERA_STATUS
.
OPEN
)
{
toast
.
error
(
"
Error: please check your device!
"
);
}
},
[
recordWebcam
.
status
]);
let
handleSubmit
=
async
(
e
)
=>
{
let
handleSubmit
=
async
(
e
)
=>
{
e
.
preventDefault
();
e
.
preventDefault
();
const
selectedChild
=
childData
.
find
((
item
)
=>
item
.
id
===
childCandidate
);
const
selectedChild
=
childData
.
find
((
item
)
=>
item
.
id
===
childCandidate
);
...
@@ -68,6 +101,11 @@ const EthicalClearenceScreen = () => {
...
@@ -68,6 +101,11 @@ const EthicalClearenceScreen = () => {
}
}
};
};
const
onStart
=
()
=>
{
recordWebcam
.
close
();
navigate
(
"
/activities
"
);
};
return
(
return
(
<>
<>
<
div
>
<
div
>
...
@@ -212,7 +250,28 @@ const EthicalClearenceScreen = () => {
...
@@ -212,7 +250,28 @@ const EthicalClearenceScreen = () => {
</
div
>
</
div
>
<
div
className=
"containerb mt-10 mb-8 py-1 sm:mt-0"
>
<
div
className=
"containerb mt-10 mb-8 py-1 sm:mt-0"
>
<
img
className=
"object-fill h-full w-full"
src=
{
bgImage1
}
/>
<
img
className=
"object-fill h-full w-full"
src=
{
bgImage1
}
/>
<
button
type=
"button"
className=
"btn mt-10 text-black bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
onClick=
{
()
=>
navigate
(
"
/activities
"
)
}
>
Let's Start
</
button
>
<
div
className=
"flex items-center"
>
<
video
className=
"vid rounded-md"
ref=
{
recordWebcam
.
webcamRef
}
style=
{
{
display
:
`${
recordWebcam.status === CAMERA_STATUS.OPEN ||
recordWebcam.status === CAMERA_STATUS.RECORDING
? "block"
: "none"
}`
,
}
}
autoPlay
/>
<
button
type=
"button"
className=
"btn mt-7 text-black bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
onClick=
{
()
=>
onStart
()
}
>
Let's Start
</
button
>
</
div
>
</
div
>
</
div
>
</>
</>
)
}
)
}
...
...
web-app/frontend/src/pages/attention_demo/attentionspan.jsx
View file @
7ba3c8a6
import
React
,
{
useState
,
useEffect
}
from
"
react
"
;
import
React
,
{
useState
,
useEffect
}
from
"
react
"
;
import
axios
from
"
axios
"
;
import
axios
from
"
axios
"
;
import
"
./attentionspan.css
"
;
import
"
./attentionspan.css
"
;
import
API
from
"
../../config/api
"
;
import
{
useRecordWebcam
,
CAMERA_STATUS
}
from
"
react-record-webcam
"
;
import
{
useRecordWebcam
,
CAMERA_STATUS
}
from
"
react-record-webcam
"
;
import
type
{
import
type
{
RecordWebcamOptions
,
RecordWebcamOptions
,
...
@@ -34,54 +35,45 @@ const AttentionSpan_screen = () => {
...
@@ -34,54 +35,45 @@ const AttentionSpan_screen = () => {
console
.
log
(
"
testing
"
,
blob
);
console
.
log
(
"
testing
"
,
blob
);
const
data
=
new
FormData
();
const
data
=
new
FormData
();
data
.
append
(
"
file
"
,
blob
);
data
.
append
(
"
file
"
,
blob
);
// fetch("/upload", {
await
API
.
post
(
"
upload
"
,
data
,
{
// method: "POST",
headers
:
{
// body: data,
"
Access-Control-Allow-Origin
"
:
"
*
"
,
// }).then((res) => {
},
// res.json().then((data) => {
// console.log("Test", data);
// setattention(data);
// });
// });
await
axios
.
post
(
"
http://127.0.0.1:5000/upload
"
,
data
)
.
then
((
res
)
=>
{
setattention
(
res
.
data
)
})
})
.
catch
((
err
)
=>
{
.
then
((
res
)
=>
{
console
.
log
(
err
);
setattention
(
res
.
data
);
});
})
.
catch
((
err
)
=>
{
console
.
log
(
err
);
});
};
};
return
(
return
(
<>
<>
<
div
>
<
div
>
<
div
>
<
div
>
<
div
class=
"p-8 pb-2"
>
<
div
class
Name
=
"p-8 pb-2"
>
{
"
"
}
{
"
"
}
<
h1
class=
"text-4xl font-medium text-white text-center mt-2"
>
<
h1
class
Name
=
"text-4xl font-medium text-white text-center mt-2"
>
{
"
"
}
{
"
"
}
Attention level evaluation
{
"
"
}
Attention level evaluation
{
"
"
}
</
h1
>
{
"
"
}
</
h1
>
{
"
"
}
</
div
>
</
div
>
<
div
className=
"demo-section px-4"
>
<
div
className=
"demo-section px-4"
>
<
p
class=
"m-2"
>
<
p
class
Name
=
"m-2"
>
Camera status:
{
"
"
}
Camera status:
{
"
"
}
{
{
<
span
class=
"inline-flex items-center bg-green-600 rounded-full px-2 text-sm text-white py-1 font-medium"
>
<
span
class
Name
=
"inline-flex items-center bg-green-600 rounded-full px-2 text-sm text-white py-1 font-medium"
>
<
svg
<
svg
xmlns=
"http://www.w3.org/2000/svg"
xmlns=
"http://www.w3.org/2000/svg"
class=
"fill-current mr-1.5 text-white"
class
Name
=
"fill-current mr-1.5 text-white"
viewBox=
"0 0 16 16"
viewBox=
"0 0 16 16"
width=
"10"
width=
"10"
height=
"10"
height=
"10"
>
>
<
path
d=
"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
></
path
>
<
path
d=
"M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
></
path
>
<
path
<
path
fill
-
r
ule=
"evenodd"
fill
R
ule=
"evenodd"
d=
"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
d=
"M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
></
path
>
></
path
>
</
svg
>
</
svg
>
...
@@ -89,11 +81,11 @@ const AttentionSpan_screen = () => {
...
@@ -89,11 +81,11 @@ const AttentionSpan_screen = () => {
</
span
>
</
span
>
}
}
</
p
>
</
p
>
<
div
class=
"m-3"
>
<
div
class
Name
=
"m-3"
>
<
div
class=
"bg-gray-50 inline-flex border border-gray-200 rounded-lg text-gray-900 select-none divide-x"
>
<
div
class
Name
=
"bg-gray-50 inline-flex border border-gray-200 rounded-lg text-gray-900 select-none divide-x"
>
{
"
"
}
{
"
"
}
<
button
<
button
class=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
class
Name
=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled=
{
disabled=
{
recordWebcam
.
status
===
CAMERA_STATUS
.
OPEN
||
recordWebcam
.
status
===
CAMERA_STATUS
.
OPEN
||
recordWebcam
.
status
===
CAMERA_STATUS
.
RECORDING
||
recordWebcam
.
status
===
CAMERA_STATUS
.
RECORDING
||
...
@@ -104,7 +96,7 @@ const AttentionSpan_screen = () => {
...
@@ -104,7 +96,7 @@ const AttentionSpan_screen = () => {
Open camera
Open camera
</
button
>
{
"
"
}
</
button
>
{
"
"
}
<
button
<
button
class=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
class
Name
=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled=
{
disabled=
{
recordWebcam
.
status
===
CAMERA_STATUS
.
CLOSED
||
recordWebcam
.
status
===
CAMERA_STATUS
.
CLOSED
||
recordWebcam
.
status
===
CAMERA_STATUS
.
PREVIEW
recordWebcam
.
status
===
CAMERA_STATUS
.
PREVIEW
...
@@ -114,7 +106,7 @@ const AttentionSpan_screen = () => {
...
@@ -114,7 +106,7 @@ const AttentionSpan_screen = () => {
Close camera
Close camera
</
button
>
{
"
"
}
</
button
>
{
"
"
}
<
button
<
button
class=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
class
Name
=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled=
{
disabled=
{
recordWebcam
.
status
===
CAMERA_STATUS
.
CLOSED
||
recordWebcam
.
status
===
CAMERA_STATUS
.
CLOSED
||
recordWebcam
.
status
===
CAMERA_STATUS
.
RECORDING
||
recordWebcam
.
status
===
CAMERA_STATUS
.
RECORDING
||
...
@@ -125,28 +117,28 @@ const AttentionSpan_screen = () => {
...
@@ -125,28 +117,28 @@ const AttentionSpan_screen = () => {
Start recording
Start recording
</
button
>
{
"
"
}
</
button
>
{
"
"
}
<
button
<
button
class=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
class
Name
=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled=
{
recordWebcam
.
status
!==
CAMERA_STATUS
.
RECORDING
}
disabled=
{
recordWebcam
.
status
!==
CAMERA_STATUS
.
RECORDING
}
onClick=
{
recordWebcam
.
stop
}
onClick=
{
recordWebcam
.
stop
}
>
>
Stop recording
Stop recording
</
button
>
{
"
"
}
</
button
>
{
"
"
}
<
button
<
button
class=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
class
Name
=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled=
{
recordWebcam
.
status
!==
CAMERA_STATUS
.
PREVIEW
}
disabled=
{
recordWebcam
.
status
!==
CAMERA_STATUS
.
PREVIEW
}
onClick=
{
recordWebcam
.
retake
}
onClick=
{
recordWebcam
.
retake
}
>
>
Retake
Retake
</
button
>
{
"
"
}
</
button
>
{
"
"
}
<
button
<
button
class=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
class
Name
=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled=
{
recordWebcam
.
status
!==
CAMERA_STATUS
.
PREVIEW
}
disabled=
{
recordWebcam
.
status
!==
CAMERA_STATUS
.
PREVIEW
}
onClick=
{
recordWebcam
.
download
}
onClick=
{
recordWebcam
.
download
}
>
>
Download
Download
</
button
>
{
"
"
}
</
button
>
{
"
"
}
<
button
<
button
class=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
class
Name
=
"py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
disabled=
{
recordWebcam
.
status
!==
CAMERA_STATUS
.
PREVIEW
}
disabled=
{
recordWebcam
.
status
!==
CAMERA_STATUS
.
PREVIEW
}
onClick=
{
saveFile
}
onClick=
{
saveFile
}
>
>
...
@@ -154,7 +146,7 @@ const AttentionSpan_screen = () => {
...
@@ -154,7 +146,7 @@ const AttentionSpan_screen = () => {
</
button
>
{
"
"
}
</
button
>
{
"
"
}
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class=
"mx-4"
>
<
div
class
Name
=
"mx-4"
>
<
video
<
video
ref=
{
recordWebcam
.
webcamRef
}
ref=
{
recordWebcam
.
webcamRef
}
style=
{
{
style=
{
{
...
@@ -166,10 +158,10 @@ const AttentionSpan_screen = () => {
...
@@ -166,10 +158,10 @@ const AttentionSpan_screen = () => {
}`
,
}`
,
}
}
}
}
autoPlay
autoPlay
muted
/>
/>
</
div
>
</
div
>
<
div
class=
"mx-4"
>
<
div
class
Name
=
"mx-4"
>
<
video
<
video
ref=
{
recordWebcam
.
previewRef
}
ref=
{
recordWebcam
.
previewRef
}
style=
{
{
style=
{
{
...
@@ -180,7 +172,6 @@ const AttentionSpan_screen = () => {
...
@@ -180,7 +172,6 @@ const AttentionSpan_screen = () => {
}`
,
}`
,
}
}
}
}
autoPlay
autoPlay
muted
loop
loop
/>
/>
</
div
>
</
div
>
...
...
web-app/frontend/src/pages/student/Student.css
View file @
7ba3c8a6
.student-page-angry-grid
{
.student-page-angry-grid
{
display
:
grid
;
display
:
grid
;
grid-template-rows
:
1
fr
;
grid-template-rows
:
1
fr
;
grid-template-columns
:
1
fr
1
fr
1
fr
1
fr
1
fr
;
grid-template-columns
:
1
fr
1
fr
1
fr
1
fr
1
fr
;
gap
:
0px
;
gap
:
0px
;
...
@@ -13,6 +13,11 @@
...
@@ -13,6 +13,11 @@
color
:
teal
;
color
:
teal
;
}
}
.info_badge
{
position
:
absolute
;
right
:
-307px
;
}
#student-page-item-0
{
#student-page-item-0
{
grid-row-start
:
1
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-column-start
:
1
;
...
@@ -91,9 +96,7 @@
...
@@ -91,9 +96,7 @@
grid-row-end
:
4
;
grid-row-end
:
4
;
grid-column-end
:
4
;
grid-column-end
:
4
;
height
:
80vh
;
height
:
80vh
;
width
:
120ch
;
width
:
120ch
;
}
}
web-app/frontend/src/pages/student/Student.jsx
View file @
7ba3c8a6
...
@@ -57,7 +57,7 @@ const Student = () => {
...
@@ -57,7 +57,7 @@ const Student = () => {
<
button
<
button
onClick=
{
()
=>
navigate
(
"
/features
"
)
}
onClick=
{
()
=>
navigate
(
"
/features
"
)
}
type=
"button"
type=
"button"
className=
"
text-white bg-purple-700 hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple
-900"
className=
"
info_badge text-white bg-yellow-700 hover:bg-yellow-800 focus:outline-none focus:ring-4 focus:ring-yellow-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mb-2 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow
-900"
>
>
<
svg
<
svg
xmlns=
"http://www.w3.org/2000/svg"
xmlns=
"http://www.w3.org/2000/svg"
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment