Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
2
2020-101
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
Sachith Fernando
2020-101
Commits
9ab5c758
Commit
9ab5c758
authored
Oct 22, 2020
by
I.K Seneviratne
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Committing the removal of unnecessary components in activity, emotion and gaze frontend pages.
parent
e0f4843e
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
486 additions
and
1817 deletions
+486
-1817
FirstApp/api.py
FirstApp/api.py
+0
-6
FirstApp/templates/FirstApp/activity.html
FirstApp/templates/FirstApp/activity.html
+141
-662
FirstApp/templates/FirstApp/emotion.html
FirstApp/templates/FirstApp/emotion.html
+216
-728
FirstApp/templates/FirstApp/gaze.html
FirstApp/templates/FirstApp/gaze.html
+128
-421
FirstApp/urls.py
FirstApp/urls.py
+1
-0
No files found.
FirstApp/api.py
View file @
9ab5c758
...
...
@@ -512,8 +512,6 @@ class GetLectureEmotionReportViewSet(APIView):
def
get
(
self
,
request
):
lecture_video_id
=
request
.
query_params
.
get
(
'lecture_video_id'
)
lecture_video_name
=
request
.
query_params
.
get
(
'lecture_video_name'
)
# retrieve the extracted frames
extracted
=
ar
.
getExtractedFrames
(
lecture_video_name
)
lecture_emotions
=
LectureEmotionReport
.
objects
.
filter
(
lecture_video_id__lecture_video_id
=
lecture_video_id
)
serializer
=
LectureEmotionSerializer
(
lecture_emotions
,
many
=
True
)
...
...
@@ -522,7 +520,6 @@ class GetLectureEmotionReportViewSet(APIView):
return
Response
({
"response"
:
serializer
.
data
,
"extracted"
:
extracted
})
...
...
@@ -729,8 +726,6 @@ class GetLectureGazeEstimationViewSet(APIView):
def
get
(
self
,
request
):
lecture_video_id
=
request
.
query_params
.
get
(
'lecture_video_id'
)
lecture_video_name
=
request
.
query_params
.
get
(
'lecture_video_name'
)
# retrieve the extracted frames
# extracted = hge.getExtractedFrames(lecture_video_name)
lecture_gaze_estimations
=
LectureGazeEstimation
.
objects
.
filter
(
lecture_video_id__lecture_video_id
=
lecture_video_id
)
...
...
@@ -738,7 +733,6 @@ class GetLectureGazeEstimationViewSet(APIView):
return
Response
({
"response"
:
serializer
.
data
,
# "extracted": extracted
})
...
...
FirstApp/templates/FirstApp/activity.html
View file @
9ab5c758
...
...
@@ -147,7 +147,6 @@
global_video_name
=
video
.
video_name
;
if
(
lectureVideo
.
isActivityFound
)
{
e
.
target
.
parentNode
.
parentNode
.
lastChild
.
innerHTML
=
'
<button type="button" class="btn btn-primary" id="result_btn">Results</button>
'
;
}
else
{
...
...
@@ -174,13 +173,14 @@
fetch
(
'
http://127.0.0.1:8000/get-lecture-activity/?lecture_video_id=
'
+
global_lecture_video_id
+
'
&lecture_video_name=
'
+
global_video_name
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
{
let
frames
=
createFrames
(
out
);
return
frames
{
#
let
frames
=
createFrames
(
out
);
#
}
{
#
return
frames
#
}
displayActivity
(
out
);
})
.
then
((
obj
)
=>
{
$
(
'
#video_frames
'
).
prepend
(
obj
);
{
#
$
(
'
#video_frames
'
).
prepend
(
obj
);
#
}
$
(
'
#frame_loader
'
).
attr
(
'
hidden
'
,
true
);
$
(
'
#slidecontainer
'
).
attr
(
'
hidden
'
,
false
);
{
#
$
(
'
#slidecontainer
'
).
attr
(
'
hidden
'
,
false
);
#
}
})
.
catch
((
error
)
=>
alert
(
'
this is the error:
'
+
error
));
});
...
...
@@ -234,513 +234,6 @@
}
//this section is responsible for displaying the frames as video
//creating the frame content
function
createFrames
(
res
)
{
let
main_frame_content
=
"
<div class='row' id='main_frames'>
"
;
main_frame_content
+=
"
<ul class='list-group list-group-horizontal'>
"
;
let
count
=
0
;
//loop through the frames
res
.
extracted
.
map
((
image
)
=>
{
let
img_src
=
""
;
let
len
=
image
.
detections
.
length
;
if
(
count
===
0
)
{
main_frame_content
+=
"
<li class='list-group-item text-center' id='image_0'>
"
;
img_src
=
"
<img src='{% static '' %}FirstApp/activity/
"
+
global_video_name
+
"
/
"
+
res
.
extracted
[
0
].
frame
+
"
/
"
+
res
.
extracted
[
0
].
detections
[
0
]
+
"
' width='400' height='400'>
"
;
}
else
{
main_frame_content
+=
"
<li class='list-group-item other-frames' id='image_
"
+
count
+
"
' hidden>
"
;
img_src
=
"
<img src='{% static '' %}FirstApp/activity/
"
+
global_video_name
+
"
/
"
+
image
.
frame
+
"
/
"
+
image
.
detections
[
len
-
1
]
+
"
' class='img-link' width='400' height='400'>
"
;
}
main_frame_content
+=
img_src
;
main_frame_content
+=
"
</li>
"
;
count
++
;
});
main_frame_content
+=
"
</ul>
"
;
main_frame_content
+=
"
</div>
"
;
//setting the min, max values of the slider
$
(
'
#myActivityRange
'
).
attr
({
'
min
'
:
0
,
'
max
'
:
count
});
//display the progress bars
displayActivity
(
res
);
return
main_frame_content
;
}
//declaring the variable for setInterval function
let
timeVar
=
null
;
//handling the play button
$
(
'
#play_pause_icon_activity
'
).
click
(
function
()
{
//defining the two possible classes
let
play_class
=
"
fas fa-play
"
;
let
pause_class
=
"
fas fa-pause
"
;
//retrieving the current icon class
let
current_class
=
$
(
this
).
attr
(
'
class
'
);
//assigning the correct class based on the icon clicked
let
new_class
=
(
current_class
===
play_class
)
?
pause_class
:
play_class
;
//setting the new class
$
(
this
).
attr
(
'
class
'
,
new_class
);
//handling the slider
let
slider
=
document
.
getElementById
(
"
myActivityRange
"
);
let
output
=
document
.
getElementById
(
"
demo
"
);
//when the button is playing
if
(
current_class
===
play_class
)
{
timeVar
=
setInterval
(()
=>
{
let
value
=
slider
.
value
;
let
new_slider_value
=
Number
(
value
)
+
1
;
slider
.
value
=
new_slider_value
;
output
.
innerHTML
=
new_slider_value
.
toString
();
let
selectedImage
=
'
#image_
'
+
Number
(
value
);
//displaying the relevant image
$
(
'
#image_0
'
).
html
(
$
(
selectedImage
).
html
());
},
50
);
}
//when the button is paused
else
if
(
current_class
===
pause_class
)
{
clearInterval
(
timeVar
);
}
});
//handling the slider
let
slider
=
document
.
getElementById
(
"
myActivityRange
"
);
let
output
=
document
.
getElementById
(
"
demo
"
);
output
.
innerHTML
=
slider
.
value
;
slider
.
oninput
=
function
()
{
output
.
innerHTML
=
this
.
value
;
let
selectedImage
=
'
#image_
'
+
Number
(
this
.
value
);
//hide
{
#
$
(
'
#image_0
'
).
attr
(
'
hidden
'
,
true
);
#
}
$
(
'
#image_0
'
).
html
(
$
(
selectedImage
).
html
());
//setting the selected image
{
#
$
(
selectedImage
).
attr
(
'
hidden
'
,
false
);
#
}
};
$
(
document
).
on
(
'
click
'
,
'
.img-link
'
,
function
(
e
)
{
//removing previously displayed detections
$
(
'
.detections
'
).
remove
();
//removing the no-content message
$
(
'
#no_detection_message_content
'
).
hide
();
//appearing the loader
$
(
'
#detection_loader
'
).
attr
(
'
hidden
'
,
false
);
let
img_src_arr
=
e
.
target
.
src
.
split
(
'
/
'
);
let
len
=
img_src_arr
.
length
;
let
src
=
img_src_arr
[
len
-
1
];
let
frame_name_arr
=
src
.
split
(
'
.
'
);
let
frame_name
=
frame_name_arr
[
0
];
//fetching the detection for the selected frame
fetch
(
'
http://127.0.0.1:8000/get-lecture-activity-frame-detection/?video_name=
'
+
global_video_name
+
"
&frame_name=
"
+
frame_name
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
displayDetections
(
out
.
detections
,
frame_name
))
.
catch
((
error
)
=>
alert
(
'
this is an error
'
));
});
//the function to display detections
function
displayDetections
(
detections
,
frame_name
)
{
let
img_string
=
''
;
let
no_of_detections
=
detections
.
length
;
//disabling the loader
$
(
'
#detection_loader
'
).
attr
(
'
hidden
'
,
true
);
//appearing the no of detections number area
$
(
'
#detection_number_area
'
).
attr
(
'
hidden
'
,
false
);
$
(
'
#no_of_detections
'
).
text
(
no_of_detections
);
detections
.
map
((
detection
)
=>
{
img_string
+=
"
<img src='{% static '' %}FirstApp/activity/
"
+
global_video_name
+
"
/
"
+
frame_name
+
"
/
"
+
detection
+
"
' class='detections m-2' width='100' height='100' >
"
});
$
(
'
#detection_frames
'
).
prepend
(
img_string
);
}
//listening for click events in labels
$
(
'
.labels
'
).
click
(
function
()
{
let
label
=
Number
(
$
(
this
).
attr
(
'
data-number
'
));
let
label_name
=
$
(
this
).
attr
(
'
data-label
'
);
//removing the previous student detection lists
$
(
'
.student_detection_lists
'
).
remove
();
//appearing the loader
$
(
'
#detection_student_loader
'
).
attr
(
'
hidden
'
,
false
);
//appearing the loader
$
(
'
#activity_type
'
).
attr
(
'
hidden
'
,
false
);
$
(
'
#activity_type_text
'
).
text
(
label_name
);
//disappearing the no content message
$
(
'
#no_detection_student_content
'
).
attr
(
'
hidden
'
,
true
);
//fetching from the api
fetch
(
'
http://127.0.0.1:8000/get-lecture-activity-detection-for-label/?video_name=
'
+
global_video_name
+
'
&label=
'
+
label
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
createDetectedStudentFrames
(
out
))
.
catch
((
error
)
=>
alert
(
'
this is the error:
'
+
error
))
});
//creating the detected students frames
function
createDetectedStudentFrames
(
detections
)
{
let
htmlString
=
""
;
//iterating through the student
detections
.
people
.
map
((
student
)
=>
{
let
title
=
student
.
split
(
'
.
'
)[
0
];
let
images
=
""
;
htmlString
+=
"
<div class='row p-3 student-detection-rows'>
"
;
let
student_count
=
0
;
//iterating through the frames
detections
.
response
.
map
((
frame
)
=>
{
let
frame_detections
=
frame
.
detections
;
if
(
frame_detections
.
includes
(
student
))
{
if
(
student_count
===
0
)
{
images
+=
"
<li class='list-group-item frame-0' id='image_0_
"
+
title
+
"
'>
"
;
}
else
{
images
+=
"
<li class='list-group-item other-student-frames' id='image_
"
+
student_count
+
"
_
"
+
title
+
"
' hidden>
"
;
}
images
+=
"
<img src='{% static '' %}FirstApp/Activity/
"
+
global_video_name
+
"
/
"
+
frame
.
frame
+
"
/
"
+
student
+
"
' width='200' height='200'>
"
;
images
+=
"
</li>
"
;
//increment the student count
student_count
++
;
}
});
htmlString
+=
"
<ul class='list-group'>
"
;
htmlString
+=
"
<li class='list-group-item'>
"
;
htmlString
+=
"
<div class='row m-3'>
"
;
htmlString
+=
"
<h4 class='font-weight-bold'>Student ID: <span>
"
+
title
+
"
</span></h4>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</li>
"
;
{
#
htmlString
+=
"
<div class='row m-3'></div>
"
;
#
}
htmlString
+=
"
<li class='list-group-item'>
"
;
htmlString
+=
"
<div class='row'>
"
;
htmlString
+=
"
<ul class='list-group list-group-horizontal student_detection_lists' style='overflow-x: scroll'>
"
;
htmlString
+=
images
;
htmlString
+=
"
</ul>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</li>
"
;
htmlString
+=
"
<li class='list-group-item'>
"
;
htmlString
+=
"
<div class='slidecontainer'>
"
;
htmlString
+=
"
<div class='row m-3'></div>
"
;
htmlString
+=
"
<div class='row'>
"
;
htmlString
+=
"
<span><i class='fas fa-play play-pause-icon-student-frames' id='icon_
"
+
title
+
"
'></i></span>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
<input type='range' min='1' max='100' value='0' class='slider' id='slider_
"
+
title
+
"
'>
"
;
htmlString
+=
"
<p>No of frames: <span id='demo_
"
+
title
+
"
'></span></p>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</li>
"
;
htmlString
+=
"
</ul>
"
;
});
//disappearing the loader
$
(
'
#detection_student_loader
'
).
attr
(
'
hidden
'
,
true
);
//append to the relevant html card content
$
(
'
#detection_students
'
).
append
(
htmlString
);
}
let
studentTimeVar
=
null
;
//playing the frames for each student detection
$
(
document
).
on
(
'
click
'
,
'
.play-pause-icon-student-frames
'
,
function
(
e
)
{
//defining the two possible classes
let
play_class
=
"
fas fa-play play-pause-icon-student-frames
"
;
let
pause_class
=
"
fas fa-pause play-pause-icon-student-frames
"
;
//retrieving the current icon class
let
current_class
=
$
(
this
).
attr
(
'
class
'
);
//assigning the correct class based on the icon clicked
let
new_class
=
(
current_class
===
play_class
)
?
pause_class
:
play_class
;
//setting the new class
$
(
this
).
attr
(
'
class
'
,
new_class
);
//extracting the title pf the clicked icon
let
title_part
=
$
(
this
).
attr
(
'
id
'
);
let
title
=
title_part
.
split
(
"
_
"
)[
1
];
//handling the slider
let
slider
=
document
.
getElementById
(
"
slider_
"
+
title
);
let
output
=
document
.
getElementById
(
"
demo_
"
+
title
);
//when the button is playing
if
(
current_class
===
play_class
)
{
studentTimeVar
=
setInterval
(()
=>
{
let
value
=
slider
.
value
;
let
new_slider_value
=
Number
(
value
)
+
1
;
slider
.
value
=
new_slider_value
;
output
.
innerHTML
=
new_slider_value
.
toString
();
let
selectedImage
=
'
#image_
'
+
Number
(
value
)
+
'
_
'
+
title
;
//displaying the relevant image
$
(
'
#image_0_
'
+
title
).
html
(
$
(
selectedImage
).
html
());
},
100
);
}
//when the button is paused
else
if
(
current_class
===
pause_class
)
{
clearInterval
(
studentTimeVar
);
}
});
//this is to handle the 'evaluate' button
$
(
'
#evaluate_button
'
).
click
(
function
()
{
//hide the message
$
(
'
#no_evaluated_student_content
'
).
attr
(
'
hidden
'
,
true
);
//show the loader
$
(
'
#evaluate_student_loader
'
).
attr
(
'
hidden
'
,
false
);
//using the fetch api
fetch
(
'
http://127.0.0.1:8000/get-lecture-activity-student-evaluation/?video_name=
'
+
global_video_name
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
evaluate_student
(
out
))
.
catch
((
error
)
=>
alert
(
'
this is the error:
'
+
error
))
});
//to create html for evaluate function
function
evaluate_student
(
response
)
{
let
htmlString
=
""
;
//iterating through the student
response
.
people
.
map
((
student
)
=>
{
let
title
=
student
.
split
(
'
.
'
)[
0
];
let
images
=
""
;
htmlString
+=
"
<div class='row p-3 student-evaluation-rows'>
"
;
let
student_count
=
0
;
//iterating through the frames
response
.
response
.
map
((
frame
)
=>
{
let
frame_detections
=
frame
.
detections
;
let
frame_detection_length
=
frame_detections
.
length
;
if
(
frame_detections
.
includes
(
student
))
{
if
(
student_count
===
0
)
{
images
+=
"
<li class='list-group-item frame-0' id='image_0_evaluation
"
+
title
+
"
'>
"
;
}
else
{
images
+=
"
<li class='list-group-item other-student-frames' id='image_evaluation
"
+
student_count
+
"
_
"
+
title
+
"
' hidden>
"
;
}
images
+=
"
<img src='{% static '' %}FirstApp/Activity/
"
+
global_video_name
+
"
/
"
+
frame
.
frame
+
"
/
"
+
student
+
"
' width='200' height='200'>
"
;
images
+=
"
</li>
"
;
if
(
student_count
===
(
frame_detection_length
))
{
images
+=
"
<li class='list-group-item'>
"
;
images
+=
"
<button type='button' class='btn btn-dark individual-evaluation' id='evaluate_student_
"
+
title
+
"
'>evaluate</button>
"
;
images
+=
"
</li>
"
;
}
//increment the student count
student_count
++
;
}
});
htmlString
+=
"
<ul class='list-group'>
"
;
htmlString
+=
"
<li class='list-group-item'>
"
;
htmlString
+=
"
<div class='row m-3'>
"
;
htmlString
+=
"
<h4 class='font-weight-bold'>Student ID: <span>
"
+
title
+
"
</span></h4>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</li>
"
;
{
#
htmlString
+=
"
<div class='row m-3'></div>
"
;
#
}
htmlString
+=
"
<li class='list-group-item'>
"
;
htmlString
+=
"
<div class='row'>
"
;
htmlString
+=
"
<ul class='list-group list-group-horizontal student_detection_lists' style='overflow-x: scroll'>
"
;
htmlString
+=
images
;
htmlString
+=
"
</ul>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</li>
"
;
htmlString
+=
"
<li class='list-group-item'>
"
;
htmlString
+=
"
<div class='slidecontainer'>
"
;
htmlString
+=
"
<div class='row m-3'></div>
"
;
htmlString
+=
"
<div class='row'>
"
;
htmlString
+=
"
<span><i class='fas fa-play play-pause-icon-student-evaluations' id='icon_
"
+
title
+
"
'></i></span>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
<input type='range' min='1' max='100' value='0' class='slider' id='slider_evaluation
"
+
title
+
"
'>
"
;
htmlString
+=
"
<p>No of frames: <span id='demo_evaluation
"
+
title
+
"
'></span></p>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</li>
"
;
htmlString
+=
"
</ul>
"
;
});
//disappearing the loader
$
(
'
#evaluate_student_loader
'
).
attr
(
'
hidden
'
,
true
);
//append to the relevant html card content
$
(
'
#evaluation_students
'
).
append
(
htmlString
);
}
//interval variable for individual students
let
studentEvaluationVar
=
null
;
//playing the frames for each student evaluation
$
(
document
).
on
(
'
click
'
,
'
.play-pause-icon-student-evaluations
'
,
function
(
e
)
{
//defining the two possible classes
let
play_class
=
"
fas fa-play play-pause-icon-student-evaluations
"
;
let
pause_class
=
"
fas fa-pause play-pause-icon-student-evaluations
"
;
//retrieving the current icon class
let
current_class
=
$
(
this
).
attr
(
'
class
'
);
//assigning the correct class based on the icon clicked
let
new_class
=
(
current_class
===
play_class
)
?
pause_class
:
play_class
;
//setting the new class
$
(
this
).
attr
(
'
class
'
,
new_class
);
//extracting the title pf the clicked icon
let
title_part
=
$
(
this
).
attr
(
'
id
'
);
let
title
=
title_part
.
split
(
"
_
"
)[
1
];
//handling the slider
let
slider
=
document
.
getElementById
(
"
slider_evaluation
"
+
title
);
let
output
=
document
.
getElementById
(
"
demo_evaluation
"
+
title
);
//when the button is playing
if
(
current_class
===
play_class
)
{
studentEvaluationVar
=
setInterval
(()
=>
{
let
value
=
slider
.
value
;
let
new_slider_value
=
Number
(
value
)
+
1
;
slider
.
value
=
new_slider_value
;
output
.
innerHTML
=
new_slider_value
.
toString
();
let
selectedImage
=
'
#image_evaluation
'
+
Number
(
value
)
+
'
_
'
+
title
;
//displaying the relevant image
$
(
'
#image_0_evaluation
'
+
title
).
html
(
$
(
selectedImage
).
html
());
},
100
);
}
//when the button is paused
else
if
(
current_class
===
pause_class
)
{
clearInterval
(
studentEvaluationVar
);
}
});
//end of student evaluation video frame
//to evaluate the individual student
$
(
document
).
on
(
'
click
'
,
'
.individual-evaluation
'
,
function
(
e
)
{
let
individual_id
=
$
(
this
).
attr
(
'
id
'
);
let
student_name
=
individual_id
.
split
(
'
_
'
)[
2
];
student_name
+=
"
.png
"
;
let
html
=
$
(
this
).
html
();
//after clicking, change the html
$
(
this
).
html
(
"
<span class='font-italic'>loading...</span>
"
);
//fetching from the API
fetch
(
'
http://127.0.0.1:8000/get-lecture-activity-individual-student-evaluation/?video_name=
'
+
global_video_name
+
'
&student_name=
'
+
student_name
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
displayIndividualStudentActivity
(
out
.
response
,
e
,
student_name
))
.
catch
((
error
)
=>
alert
(
'
something went wrong
'
));
});
//this function will display the individual student emotions
function
displayIndividualStudentActivity
(
res
,
e
,
title
)
{
let
phone_perct
=
Math
.
round
(
res
.
phone_perct
,
1
);
let
writing_perct
=
Math
.
round
(
res
.
writing_perct
,
1
);
let
listening_perct
=
Math
.
round
(
res
.
listening_perct
,
1
);
//set the percentage values
//$('#talking_individual_perct').text(res.talking_perct + '%');
$
(
'
#phone_individual_perct
'
).
text
(
phone_perct
+
'
%
'
);
$
(
'
#writing_individual_perct
'
).
text
(
writing_perct
+
'
%
'
);
$
(
'
#listening_individual_perct
'
).
text
(
listening_perct
+
'
%
'
);
//set the width
//$('#talking_individual_width').width(res.talking_perct + '%');
$
(
'
#phone_individual_width
'
).
width
(
phone_perct
+
'
%
'
);
$
(
'
#writing_individual_width
'
).
width
(
writing_perct
+
'
%
'
);
$
(
'
#listening_individual_width
'
).
width
(
listening_perct
+
'
%
'
);
//open the student individual modal
$
(
'
#student_individual_modal
'
).
modal
();
//set the button to default
e
.
target
.
innerHTML
=
"
<span>evaluate</span>
"
;
}
//to handle the 'integrate' modal
$
(
'
#integrate_activity
'
).
click
(
function
()
{
//define the student video src
...
...
@@ -780,25 +273,25 @@
//append to the html string
//phone checking
htmlString
+=
"
<div class='progress_area' id='progress_
"
+
frame_name
+
"
' hidden>
"
;
htmlString
+=
"
<div class='progress_area' id='progress_
"
+
frame_name
+
"
' hidden>
"
;
htmlString
+=
"
<h4 class='small font-weight-bold'>Phone checking</h4>
"
;
htmlString
+=
"
<span class='float-right' id='phone_checking_instant_
"
+
frame_name
+
"
'>
"
+
phone_perct
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='phone_checking_instant_
"
+
frame_name
+
"
'>
"
+
phone_perct
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar bg-warning' role='progressbar' id='phone_checking_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
phone_perct
+
"
%' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar bg-warning' role='progressbar' id='phone_checking_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
phone_perct
+
"
%' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//note taking
htmlString
+=
"
<h4 class='small font-weight-bold'>Writing</h4>
"
;
htmlString
+=
"
<span class='float-right' id='note_taking_instant_
"
+
frame_name
+
"
'>
"
+
note_perct
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='note_taking_instant_
"
+
frame_name
+
"
'>
"
+
note_perct
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar' role='progressbar' id='note_taking_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
note_perct
+
"
%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar' role='progressbar' id='note_taking_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
note_perct
+
"
%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//listening
htmlString
+=
"
<h4 class='small font-weight-bold'>Listening</h4>
"
;
htmlString
+=
"
<span class='float-right' id='listening_instant_
"
+
frame_name
+
"
'>
"
+
listen_perct
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='listening_instant_
"
+
frame_name
+
"
'>
"
+
listen_perct
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='listening_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
listen_perct
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='listening_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
listen_perct
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//ending the progress area
...
...
@@ -893,7 +386,6 @@
$
(
'
#generate_report_message
'
).
hide
();
fetch
(
'
http://127.0.0.1:8000/lecture-activity-report-generation/?lecturer=
'
+
global_lecturer
+
'
&subject=
'
+
global_subject
+
'
&date=
'
+
global_lecture_date
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
{
...
...
@@ -908,7 +400,6 @@
});
});
</script>
...
...
@@ -931,11 +422,11 @@
{% load static %}
<!-- Page Heading -->
{#
<div
class=
"d-sm-flex align-items-center justify-content-between mb-4"
>
#}
{#
<h1
class=
"h3 mb-0 text-gray-800"
>
Student Activity Recognition
</h1>
#}
{#
<button
type=
"button"
data-target=
"#generateReportModal"
data-toggle=
"modal"
class=
"d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"
id=
"generate_report_before"
disabled
><i
#
}
{
#
class=
"fas fa-download fa-sm text-white-50"
></i>
Generate Report
</button>
#}
{#
</div>
#}
{#
<div
class=
"d-sm-flex align-items-center justify-content-between mb-4"
>
#}
{#
<h1
class=
"h3 mb-0 text-gray-800"
>
Student Activity Recognition
</h1>
#}
{#
<button
type=
"button"
data-target=
"#generateReportModal"
data-toggle=
"modal"
class=
"d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"
id=
"generate_report_before"
disabled
><i
#
}
{
#
class=
"fas fa-download fa-sm text-white-50"
></i>
Generate Report
</button>
#}
{#
</div>
#}
<!--first row -->
...
...
@@ -1084,25 +575,8 @@
alt=
"Loader"
>
</div>
<!--frames -->
.
<div
class=
"text-center p-4"
id=
"video_frames"
>
<!-- slide container -->
<div
id=
"slidecontainer"
hidden
>
<div
class=
"row m-3"
></div>
<!-- play/pause icon -->
<div
class=
"row"
>
<span><i
class=
"fas fa-play"
id=
"play_pause_icon_activity"
></i></span>
</div>
<input
type=
"range"
min=
"1"
max=
"100"
value=
"0"
class=
"slider"
id=
"myActivityRange"
>
<p>
No of frames:
<span
id=
"demo"
></span></p>
</div>
</div>
</div>
<!--this area will display the progress bars -->
<div
class=
"progress_area
"
hidden
>
<div
class=
"progress_area mt-4
"
hidden
>
<!--talking with friends -->
<a
href=
"#"
class=
"btn btn-link labels"
data-number=
"1"
data-label=
"talking-with-friends"
>
...
...
@@ -1113,7 +587,8 @@
<div
class=
"progress-bar bg-danger"
role=
"progressbar"
id=
"talking_width"
style=
"width: 20%"
aria-valuenow=
"20"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"20"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
<!--phone checking -->
...
...
@@ -1126,7 +601,8 @@
<div
class=
"progress-bar bg-warning"
role=
"progressbar"
id=
"phone_width"
style=
"width: 40%"
aria-valuenow=
"40"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"40"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
<!--note taking -->
...
...
@@ -1138,7 +614,8 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar"
role=
"progressbar"
id=
"writing_width"
style=
"width: 60%"
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
<!--listening-->
...
...
@@ -1149,16 +626,17 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-info"
role=
"progressbar"
id=
"listening_width"
style=
"width: 80%"
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
</div>
<!--evaluate button -->
<button
type=
"button"
class=
"btn btn-danger float-right"
id=
"evaluate_button"
>
Evaluate
</button>
</div>
</div>
<!--graph tab -->
...
...
@@ -1250,32 +728,32 @@
<!--1st column -->
<div
class=
"col-lg-6"
>
{#
<!--card -->
#}
{#
<div
class=
"card shadow mb-4"
>
#}
{#
<!--card header -->
#}
{#
<div
class=
"card-header"
>
#}
{#
<h5
class=
"m-0 font-weight-bold text-primary"
>
Evaluated Students
</h5>
#}
{#
</div>
#}
{##}
{#
<!--card body -->
#}
{#
<div
class=
"card-body"
id=
"evaluation_students"
>
#}
{##}
{#
<!--no content message-->
#}
{#
<div
class=
"text-center p-2"
id=
"no_evaluated_student_content"
>
#}
{#
<span
class=
"font-italic"
>
Press 'Evaluate' button to evaluate students
</span>
#}
{#
</div>
#}
{##}
{#
<!--the detection student loader -->
#}
{#
<div
class=
"text-center p-2"
id=
"evaluate_student_loader"
hidden
>
#}
{#
<img
src=
"{% static 'FirstApp/images/ajax-loader.gif' %}"
#
}
{
#
alt=
"Loader"
>
#}
{#
</div>
#}
{#
<!--end of student detection loader -->
#}
{##}
{##}
{#
</div>
#}
{##}
{#
</div>
#}
{#
<!--card -->
#}
{#
<div
class=
"card shadow mb-4"
>
#}
{#
<!--card header -->
#}
{#
<div
class=
"card-header"
>
#}
{#
<h5
class=
"m-0 font-weight-bold text-primary"
>
Evaluated Students
</h5>
#}
{#
</div>
#}
{##}
{#
<!--card body -->
#}
{#
<div
class=
"card-body"
id=
"evaluation_students"
>
#}
{##}
{#
<!--no content message-->
#}
{#
<div
class=
"text-center p-2"
id=
"no_evaluated_student_content"
>
#}
{#
<span
class=
"font-italic"
>
Press 'Evaluate' button to evaluate students
</span>
#}
{#
</div>
#}
{##}
{#
<!--the detection student loader -->
#}
{#
<div
class=
"text-center p-2"
id=
"evaluate_student_loader"
hidden
>
#}
{#
<img
src=
"{% static 'FirstApp/images/ajax-loader.gif' %}"
#
}
{
#
alt=
"Loader"
>
#}
{#
</div>
#}
{#
<!--end of student detection loader -->
#}
{##}
{##}
{#
</div>
#}
{##}
{#
</div>
#}
</div>
...
...
@@ -1448,7 +926,8 @@
</div>
</div>
<div
class=
"modal-footer"
>
<button
type=
"button"
class=
"btn btn-primary"
data-dismiss=
"modal"
id=
"generate_report_btn"
>
Yes
</button>
<button
type=
"button"
class=
"btn btn-primary"
data-dismiss=
"modal"
id=
"generate_report_btn"
>
Yes
</button>
<button
type=
"button"
class=
"btn btn-danger"
data-dismiss=
"modal"
>
No
</button>
</div>
</div>
...
...
@@ -1498,7 +977,7 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-danger"
role=
"progressbar"
id=
"talking_instant_value"
{
#
style=
"width: 0%"
#
}
{
#
style=
"width: 0%"
#
}
aria-valuenow=
"20"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
...
...
@@ -1509,7 +988,7 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-warning"
role=
"progressbar"
id=
"phone_checking_instant_value"
{
#
style=
"width: 0%"
#
}
{
#
style=
"width: 0%"
#
}
aria-valuenow=
"40"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
...
...
@@ -1520,7 +999,7 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar"
role=
"progressbar"
id=
"note_taking_instant_value"
{
#
style=
"width: 0%"
#
}
{
#
style=
"width: 0%"
#
}
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
...
...
@@ -1531,7 +1010,7 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-info"
role=
"progressbar"
id=
"listening_instant_value"
{
#
style=
"width: 80%"
#
}
{
#
style=
"width: 80%"
#
}
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
...
...
@@ -1554,11 +1033,11 @@
</div>
<!-- video -->
{#
<video
width=
"500"
height=
"300"
id=
"lecturer_video"
controls
>
#}
{#
<source
src=
"#"
#
}
{
#
type=
"video/mp4"
>
#}
{# Your browser does not support the video tag.#}
{#
</video>
#}
{#
<video
width=
"500"
height=
"300"
id=
"lecturer_video"
controls
>
#}
{#
<source
src=
"#"
#
}
{
#
type=
"video/mp4"
>
#}
{# Your browser does not support the video tag.#}
{#
</video>
#}
</div>
<!--end of lecture video section -->
...
...
FirstApp/templates/FirstApp/emotion.html
View file @
9ab5c758
...
...
@@ -170,13 +170,14 @@
fetch
(
'
http://127.0.0.1:8000/get-lecture-emotion/?lecture_video_id=
'
+
global_lecture_video_id
+
'
&lecture_video_name=
'
+
global_video_name
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
{
let
frames
=
createFrames
(
out
);
return
frames
{
#
let
frames
=
createFrames
(
out
);
#
}
{
#
return
frames
#
}
displayActivity
(
out
)
})
.
then
((
obj
)
=>
{
$
(
'
#video_frames
'
).
prepend
(
obj
);
{
#
$
(
'
#video_frames
'
).
prepend
(
obj
);
#
}
$
(
'
#frame_loader
'
).
attr
(
'
hidden
'
,
true
);
$
(
'
#slidecontainer
'
).
attr
(
'
hidden
'
,
false
);
{
#
$
(
'
#slidecontainer
'
).
attr
(
'
hidden
'
,
false
);
#
}
})
.
catch
((
error
)
=>
alert
(
'
this is the error:
'
+
error
));
});
...
...
@@ -233,510 +234,8 @@
}
//this section is responsible for displaying the frames as video
//creating the frame content
function
createFrames
(
res
)
{
let
main_frame_content
=
"
<div class='row' id='main_frames'>
"
;
main_frame_content
+=
"
<ul class='list-group list-group-horizontal'>
"
;
let
count
=
0
;
//loop through the frames
res
.
extracted
.
map
((
image
)
=>
{
let
img_src
=
""
;
let
len
=
image
.
detections
.
length
;
if
(
count
===
0
)
{
main_frame_content
+=
"
<li class='list-group-item text-center' id='image_0'>
"
;
img_src
=
"
<img src='{% static '' %}FirstApp/activity/
"
+
global_video_name
+
"
/
"
+
res
.
extracted
[
0
].
frame
+
"
/
"
+
res
.
extracted
[
0
].
detections
[
0
]
+
"
' width='400' height='400'>
"
;
}
else
{
main_frame_content
+=
"
<li class='list-group-item other-frames' id='image_
"
+
count
+
"
' hidden>
"
;
img_src
=
"
<img src='{% static '' %}FirstApp/activity/
"
+
global_video_name
+
"
/
"
+
image
.
frame
+
"
/
"
+
image
.
detections
[
len
-
1
]
+
"
' class='img-link' width='400' height='400'>
"
;
}
main_frame_content
+=
img_src
;
main_frame_content
+=
"
</li>
"
;
count
++
;
});
main_frame_content
+=
"
</ul>
"
;
main_frame_content
+=
"
</div>
"
;
//setting the min, max values of the slider
$
(
'
#myActivityRange
'
).
attr
({
'
min
'
:
0
,
'
max
'
:
count
});
//display the progress bars
displayActivity
(
res
);
return
main_frame_content
;
}
//declaring the variable for setInterval function
let
timeVar
=
null
;
//handling the play button
$
(
'
#play_pause_icon_activity
'
).
click
(
function
()
{
//defining the two possible classes
let
play_class
=
"
fas fa-play
"
;
let
pause_class
=
"
fas fa-pause
"
;
//retrieving the current icon class
let
current_class
=
$
(
this
).
attr
(
'
class
'
);
//assigning the correct class based on the icon clicked
let
new_class
=
(
current_class
===
play_class
)
?
pause_class
:
play_class
;
//setting the new class
$
(
this
).
attr
(
'
class
'
,
new_class
);
//handling the slider
let
slider
=
document
.
getElementById
(
"
myActivityRange
"
);
let
output
=
document
.
getElementById
(
"
demo
"
);
//when the button is playing
if
(
current_class
===
play_class
)
{
timeVar
=
setInterval
(()
=>
{
let
value
=
slider
.
value
;
let
new_slider_value
=
Number
(
value
)
+
1
;
slider
.
value
=
new_slider_value
;
output
.
innerHTML
=
new_slider_value
.
toString
();
let
selectedImage
=
'
#image_
'
+
Number
(
value
);
//displaying the relevant image
$
(
'
#image_0
'
).
html
(
$
(
selectedImage
).
html
());
},
50
);
}
//when the button is paused
else
if
(
current_class
===
pause_class
)
{
clearInterval
(
timeVar
);
}
});
//handling the slider
let
slider
=
document
.
getElementById
(
"
myActivityRange
"
);
let
output
=
document
.
getElementById
(
"
demo
"
);
output
.
innerHTML
=
slider
.
value
;
slider
.
oninput
=
function
()
{
output
.
innerHTML
=
this
.
value
;
let
selectedImage
=
'
#image_
'
+
Number
(
this
.
value
);
//hide
{
#
$
(
'
#image_0
'
).
attr
(
'
hidden
'
,
true
);
#
}
$
(
'
#image_0
'
).
html
(
$
(
selectedImage
).
html
());
//setting the selected image
{
#
$
(
selectedImage
).
attr
(
'
hidden
'
,
false
);
#
}
};
$
(
document
).
on
(
'
click
'
,
'
.img-link
'
,
function
(
e
)
{
//removing previously displayed detections
$
(
'
.detections
'
).
remove
();
//removing the no-content message
$
(
'
#no_detection_message_content
'
).
hide
();
//appearing the loader
$
(
'
#detection_loader
'
).
attr
(
'
hidden
'
,
false
);
let
img_src_arr
=
e
.
target
.
src
.
split
(
'
/
'
);
let
len
=
img_src_arr
.
length
;
let
src
=
img_src_arr
[
len
-
1
];
let
frame_name_arr
=
src
.
split
(
'
.
'
);
let
frame_name
=
frame_name_arr
[
0
];
//fetching the detection for the selected frame
fetch
(
'
http://127.0.0.1:8000/get-lecture-activity-frame-detection/?video_name=
'
+
global_video_name
+
"
&frame_name=
"
+
frame_name
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
displayDetections
(
out
.
detections
,
frame_name
))
.
catch
((
error
)
=>
alert
(
'
this is an error
'
));
});
//the function to display detections
function
displayDetections
(
detections
,
frame_name
)
{
let
img_string
=
''
;
let
no_of_detections
=
detections
.
length
;
//disabling the loader
$
(
'
#detection_loader
'
).
attr
(
'
hidden
'
,
true
);
//appearing the no of detections number area
$
(
'
#detection_number_area
'
).
attr
(
'
hidden
'
,
false
);
$
(
'
#no_of_detections
'
).
text
(
no_of_detections
);
detections
.
map
((
detection
)
=>
{
img_string
+=
"
<img src='{% static '' %}FirstApp/activity/
"
+
global_video_name
+
"
/
"
+
frame_name
+
"
/
"
+
detection
+
"
' class='detections m-2' width='100' height='100' >
"
});
$
(
'
#detection_frames
'
).
prepend
(
img_string
);
}
//listening for click events in labels
$
(
'
.labels
'
).
click
(
function
()
{
let
label
=
Number
(
$
(
this
).
attr
(
'
data-number
'
));
let
label_name
=
$
(
this
).
attr
(
'
data-label
'
);
//removing the previous student detection lists
$
(
'
.student_detection_lists
'
).
remove
();
//appearing the loader
$
(
'
#detection_student_loader
'
).
attr
(
'
hidden
'
,
false
);
//appearing the loader
$
(
'
#activity_type
'
).
attr
(
'
hidden
'
,
false
);
$
(
'
#activity_type_text
'
).
text
(
label_name
);
//disappearing the no content message
$
(
'
#no_detection_student_content
'
).
attr
(
'
hidden
'
,
true
);
//fetching from the api
fetch
(
'
http://127.0.0.1:8000/get-lecture-activity-detection-for-label/?video_name=
'
+
global_video_name
+
'
&label=
'
+
label
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
createDetectedStudentFrames
(
out
))
.
catch
((
error
)
=>
alert
(
'
this is the error:
'
+
error
))
});
//creating the detected students frames
function
createDetectedStudentFrames
(
detections
)
{
let
htmlString
=
""
;
//iterating through the student
detections
.
people
.
map
((
student
)
=>
{
let
title
=
student
.
split
(
'
.
'
)[
0
];
let
images
=
""
;
htmlString
+=
"
<div class='row p-3 student-detection-rows'>
"
;
let
student_count
=
0
;
//iterating through the frames
detections
.
response
.
map
((
frame
)
=>
{
let
frame_detections
=
frame
.
detections
;
if
(
frame_detections
.
includes
(
student
))
{
if
(
student_count
===
0
)
{
images
+=
"
<li class='list-group-item frame-0' id='image_0_
"
+
title
+
"
'>
"
;
}
else
{
images
+=
"
<li class='list-group-item other-student-frames' id='image_
"
+
student_count
+
"
_
"
+
title
+
"
' hidden>
"
;
}
images
+=
"
<img src='{% static '' %}FirstApp/Activity/
"
+
global_video_name
+
"
/
"
+
frame
.
frame
+
"
/
"
+
student
+
"
' width='200' height='200'>
"
;
images
+=
"
</li>
"
;
//increment the student count
student_count
++
;
}
});
htmlString
+=
"
<h6 class='font-italic'>
"
+
title
+
"
</h6>
"
;
htmlString
+=
"
<ul class='list-group list-group-horizontal student_detection_lists' style='overflow-x: scroll'>
"
;
htmlString
+=
images
;
htmlString
+=
"
</ul>
"
;
htmlString
+=
"
<div class='slidecontainer'>
"
;
htmlString
+=
"
<div class='row m-3'></div>
"
;
htmlString
+=
"
<div class='row'>
"
;
htmlString
+=
"
<span><i class='fas fa-play play-pause-icon-student-frames' id='icon_
"
+
title
+
"
'></i></span>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
<input type='range' min='1' max='100' value='0' class='slider' id='slider_
"
+
title
+
"
'>
"
;
htmlString
+=
"
<p>No of frames: <span id='demo_
"
+
title
+
"
'></span></p>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</div>
"
;
});
//disappearing the loader
$
(
'
#detection_student_loader
'
).
attr
(
'
hidden
'
,
true
);
//append to the relevant html card content
$
(
'
#detection_students
'
).
append
(
htmlString
);
}
let
studentTimeVar
=
null
;
//playing the frames for each student detection (by label)
$
(
document
).
on
(
'
click
'
,
'
.play-pause-icon-student-frames
'
,
function
(
e
)
{
//defining the two possible classes
let
play_class
=
"
fas fa-play play-pause-icon-student-frames
"
;
let
pause_class
=
"
fas fa-pause play-pause-icon-student-frames
"
;
//retrieving the current icon class
let
current_class
=
$
(
this
).
attr
(
'
class
'
);
//assigning the correct class based on the icon clicked
let
new_class
=
(
current_class
===
play_class
)
?
pause_class
:
play_class
;
//setting the new class
$
(
this
).
attr
(
'
class
'
,
new_class
);
//extracting the title pf the clicked icon
let
title_part
=
$
(
this
).
attr
(
'
id
'
);
let
title
=
title_part
.
split
(
"
_
"
)[
1
];
//handling the slider
let
slider
=
document
.
getElementById
(
"
slider_
"
+
title
);
let
output
=
document
.
getElementById
(
"
demo_
"
+
title
);
//when the button is playing
if
(
current_class
===
play_class
)
{
studentTimeVar
=
setInterval
(()
=>
{
let
value
=
slider
.
value
;
let
new_slider_value
=
Number
(
value
)
+
1
;
slider
.
value
=
new_slider_value
;
output
.
innerHTML
=
new_slider_value
.
toString
();
let
selectedImage
=
'
#image_
'
+
Number
(
value
)
+
'
_
'
+
title
;
//displaying the relevant image
$
(
'
#image_0_
'
+
title
).
html
(
$
(
selectedImage
).
html
());
},
100
);
}
//when the button is paused
else
if
(
current_class
===
pause_class
)
{
clearInterval
(
studentTimeVar
);
}
});
//this is to handle the 'evaluate' button
$
(
'
#evaluate_button
'
).
click
(
function
()
{
//hide the message
$
(
'
#no_evaluated_student_content
'
).
attr
(
'
hidden
'
,
true
);
//show the loader
$
(
'
#evaluate_student_loader
'
).
attr
(
'
hidden
'
,
false
);
//using the fetch api
fetch
(
'
http://127.0.0.1:8000/get-lecture-emotion-student-evaluation/?video_name=
'
+
global_video_name
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
evaluate_student
(
out
))
.
catch
((
error
)
=>
alert
(
'
this is the error:
'
+
error
))
});
//to create html for evaluate function
function
evaluate_student
(
response
)
{
let
htmlString
=
""
;
//iterating through the student
response
.
people
.
map
((
student
)
=>
{
let
title
=
student
.
split
(
'
.
'
)[
0
];
let
images
=
""
;
htmlString
+=
"
<div class='row p-3 student-evaluation-rows'>
"
;
let
student_count
=
0
;
//iterating through the frames
response
.
response
.
map
((
frame
)
=>
{
let
frame_detections
=
frame
.
detections
;
let
frame_detection_length
=
frame_detections
.
length
;
if
(
frame_detections
.
includes
(
student
))
{
if
(
student_count
===
0
)
{
images
+=
"
<li class='list-group-item frame-0' id='image_0_evaluation
"
+
title
+
"
'>
"
;
}
else
{
images
+=
"
<li class='list-group-item other-student-frames' id='image_evaluation
"
+
student_count
+
"
_
"
+
title
+
"
' hidden>
"
;
}
images
+=
"
<img src='{% static '' %}FirstApp/Activity/
"
+
global_video_name
+
"
/
"
+
frame
.
frame
+
"
/
"
+
student
+
"
' width='200' height='200'>
"
;
images
+=
"
</li>
"
;
if
(
student_count
===
(
frame_detection_length
))
{
images
+=
"
<li class='list-group-item'>
"
;
images
+=
"
<button type='button' class='btn btn-dark individual-evaluation' id='evaluate_student_
"
+
title
+
"
'>evaluate</button>
"
;
images
+=
"
</li>
"
;
}
//increment the student count
student_count
++
;
}
});
htmlString
+=
"
<ul class='list-group'>
"
;
htmlString
+=
"
<li class='list-group-item'>
"
;
htmlString
+=
"
<div class='row m-3'>
"
;
htmlString
+=
"
<h4 class='font-weight-bold'>Student ID: <span>
"
+
title
+
"
</span></h4>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</li>
"
;
{
#
htmlString
+=
"
<div class='row m-3'></div>
"
;
#
}
htmlString
+=
"
<li class='list-group-item'>
"
;
htmlString
+=
"
<div class='row'>
"
;
htmlString
+=
"
<ul class='list-group list-group-horizontal student_detection_lists' style='overflow-x: scroll'>
"
;
htmlString
+=
images
;
htmlString
+=
"
</ul>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</li>
"
;
htmlString
+=
"
<li class='list-group-item'>
"
;
htmlString
+=
"
<div class='slidecontainer'>
"
;
htmlString
+=
"
<div class='row m-3'></div>
"
;
htmlString
+=
"
<div class='row'>
"
;
htmlString
+=
"
<span><i class='fas fa-play play-pause-icon-student-evaluations' id='icon_
"
+
title
+
"
'></i></span>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
<input type='range' min='1' max='100' value='0' class='slider' id='slider_evaluation
"
+
title
+
"
'>
"
;
htmlString
+=
"
<p>No of frames: <span id='demo_evaluation
"
+
title
+
"
'></span></p>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</li>
"
;
htmlString
+=
"
</ul>
"
;
});
//disappearing the loader
$
(
'
#evaluate_student_loader
'
).
attr
(
'
hidden
'
,
true
);
//append to the relevant html card content
$
(
'
#evaluation_students
'
).
append
(
htmlString
);
}
let
studentEvaluationVar
=
null
;
//playing the frames for each student evaluation
$
(
document
).
on
(
'
click
'
,
'
.play-pause-icon-student-evaluations
'
,
function
(
e
)
{
//defining the two possible classes
let
play_class
=
"
fas fa-play play-pause-icon-student-evaluations
"
;
let
pause_class
=
"
fas fa-pause play-pause-icon-student-evaluations
"
;
//retrieving the current icon class
let
current_class
=
$
(
this
).
attr
(
'
class
'
);
//assigning the correct class based on the icon clicked
let
new_class
=
(
current_class
===
play_class
)
?
pause_class
:
play_class
;
//setting the new class
$
(
this
).
attr
(
'
class
'
,
new_class
);
//extracting the title pf the clicked icon
let
title_part
=
$
(
this
).
attr
(
'
id
'
);
let
title
=
title_part
.
split
(
"
_
"
)[
1
];
//handling the slider
let
slider
=
document
.
getElementById
(
"
slider_evaluation
"
+
title
);
let
output
=
document
.
getElementById
(
"
demo_evaluation
"
+
title
);
//when the button is playing
if
(
current_class
===
play_class
)
{
studentEvaluationVar
=
setInterval
(()
=>
{
let
value
=
slider
.
value
;
let
new_slider_value
=
Number
(
value
)
+
1
;
slider
.
value
=
new_slider_value
;
output
.
innerHTML
=
new_slider_value
.
toString
();
let
selectedImage
=
'
#image_evaluation
'
+
Number
(
value
)
+
'
_
'
+
title
;
//displaying the relevant image
$
(
'
#image_0_evaluation
'
+
title
).
html
(
$
(
selectedImage
).
html
());
},
100
);
}
//when the button is paused
else
if
(
current_class
===
pause_class
)
{
clearInterval
(
studentEvaluationVar
);
}
});
//to evaluate the individual student
$
(
document
).
on
(
'
click
'
,
'
.individual-evaluation
'
,
function
(
e
)
{
let
individual_id
=
$
(
this
).
attr
(
'
id
'
);
let
student_name
=
individual_id
.
split
(
'
_
'
)[
2
];
student_name
+=
"
.png
"
;
let
html
=
$
(
this
).
html
();
//after clicking, change the html
$
(
this
).
html
(
"
<span class='font-italic'>loading...</span>
"
);
//fetching from the API
fetch
(
'
http://127.0.0.1:8000/get-lecture-emotion-individual-student-evaluation/?video_name=
'
+
global_video_name
+
'
&student_name=
'
+
student_name
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
displayIndividualStudentEmotion
(
out
.
response
,
e
,
student_name
))
.
catch
((
error
)
=>
alert
(
'
something went wrong
'
));
//after 5 seconds, replace with the original html
/*
setTimeout(() => {
$(this).html(html);
//open the student individual modal
$('#student_individual_modal').modal();
}, 5000);
*/
});
//this function will display the individual student emotions
function
displayIndividualStudentEmotion
(
res
,
e
,
title
)
{
//set the percentage values
$
(
'
#happy_individual_perct
'
).
text
(
res
.
happy_perct
+
'
%
'
);
$
(
'
#sad_individual_perct
'
).
text
(
res
.
sad_perct
+
'
%
'
);
$
(
'
#anger_individual_perct
'
).
text
(
res
.
angry_perct
+
'
%
'
);
$
(
'
#surprise_individual_perct
'
).
text
(
res
.
surprise_perct
+
'
%
'
);
$
(
'
#neutral_individual_perct
'
).
text
(
res
.
neutral_perct
+
'
%
'
);
//set the width
$
(
'
#happy_individual_width
'
).
width
(
res
.
happy_perct
+
'
%
'
);
$
(
'
#sad_individual_width
'
).
width
(
res
.
sad_perct
+
'
%
'
);
$
(
'
#anger_individual_width
'
).
width
(
res
.
angry_perct
+
'
%
'
);
$
(
'
#surprise_individual_width
'
).
width
(
res
.
surprise_perct
+
'
%
'
);
$
(
'
#neutral_individual_width
'
).
width
(
res
.
neutral_perct
+
'
%
'
);
//open the student individual modal
$
(
'
#student_individual_modal
'
).
modal
();
//set the button to default
e
.
target
.
innerHTML
=
"
<span>evaluate</span>
"
;
}
//to handle the 'integrate' modal
$
(
'
#integrate_
activity
'
).
click
(
function
()
{
$
(
'
#integrate_
emotion
'
).
click
(
function
()
{
//define the student video src
let
video_src
=
"
{% static '' %}FirstApp/videos/
"
+
global_video_name
;
...
...
@@ -754,7 +253,6 @@
.
catch
((
err
)
=>
alert
(
'
error:
'
+
err
));
});
...
...
@@ -780,39 +278,39 @@
//append to the html string
//Happy
htmlString
+=
"
<div class='progress_area' id='progress_
"
+
frame_name
+
"
' hidden>
"
;
htmlString
+=
"
<div class='progress_area' id='progress_
"
+
frame_name
+
"
' hidden>
"
;
htmlString
+=
"
<h4 class='small font-weight-bold'>Happy</h4>
"
;
htmlString
+=
"
<span class='float-right' id='happy_instant_
"
+
frame_name
+
"
'>
"
+
happy_perct
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='happy_instant_
"
+
frame_name
+
"
'>
"
+
happy_perct
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar bg-warning' role='progressbar' id='phone_checking_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
happy_perct
+
"
%' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar bg-warning' role='progressbar' id='phone_checking_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
happy_perct
+
"
%' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//Sad
htmlString
+=
"
<h4 class='small font-weight-bold'>Sad</h4>
"
;
htmlString
+=
"
<span class='float-right' id='note_taking_instant_
"
+
frame_name
+
"
'>
"
+
sad_perct
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='note_taking_instant_
"
+
frame_name
+
"
'>
"
+
sad_perct
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar' role='progressbar' id='note_taking_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
sad_perct
+
"
%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar' role='progressbar' id='note_taking_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
sad_perct
+
"
%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//Angry
htmlString
+=
"
<h4 class='small font-weight-bold'>Angry</h4>
"
;
htmlString
+=
"
<span class='float-right' id='listening_instant_
"
+
frame_name
+
"
'>
"
+
angry_perct
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='listening_instant_
"
+
frame_name
+
"
'>
"
+
angry_perct
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='listening_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
angry_perct
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='listening_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
angry_perct
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//Neutral
htmlString
+=
"
<h4 class='small font-weight-bold'>Neutral</h4>
"
;
htmlString
+=
"
<span class='float-right' id='note_taking_instant_
"
+
frame_name
+
"
'>
"
+
neutral_perct
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='note_taking_instant_
"
+
frame_name
+
"
'>
"
+
neutral_perct
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar' role='progressbar' id='note_taking_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
neutral_perct
+
"
%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar' role='progressbar' id='note_taking_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
neutral_perct
+
"
%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//Surprise
htmlString
+=
"
<h4 class='small font-weight-bold'>Surprise</h4>
"
;
htmlString
+=
"
<span class='float-right' id='listening_instant_
"
+
frame_name
+
"
'>
"
+
surprise_perct
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='listening_instant_
"
+
frame_name
+
"
'>
"
+
surprise_perct
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='listening_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
surprise_perct
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='listening_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
surprise_perct
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//ending the progress area
...
...
@@ -1064,31 +562,15 @@
<!--temporary text -->
<span
class=
"font-italic"
id=
"temporary_text"
>
Frame will be displayed here
</span>
<!--loading buffer area-->
<div
class=
"text-center"
id=
"frame_loader"
hidden
>
<img
src=
"{% static 'FirstApp/images/ajax-loader.gif' %}"
alt=
"Loader"
>
</div>
<!--frames -->
.
<div
class=
"text-center p-4"
id=
"video_frames"
>
<!-- slide container -->
<div
id=
"slidecontainer"
hidden
>
<div
class=
"row m-3"
></div>
<!-- play/pause icon -->
<div
class=
"row"
>
<span><i
class=
"fas fa-play"
id=
"play_pause_icon_activity"
></i></span>
</div>
<input
type=
"range"
min=
"1"
max=
"100"
value=
"0"
class=
"slider"
id=
"myActivityRange"
>
<p>
No of frames:
<span
id=
"demo"
></span></p>
</div>
</div>
</div>
<!--this area will display the progress bars -->
<div
class=
"progress_area
"
hidden
>
<div
class=
"progress_area mt-4
"
hidden
>
<!--Happy -->
<a
href=
"#"
class=
"btn btn-link labels"
data-number=
"1"
data-label=
"Happy"
>
...
...
@@ -1099,7 +581,8 @@
<div
class=
"progress-bar bg-danger"
role=
"progressbar"
id=
"happy_width"
style=
"width: 20%"
aria-valuenow=
"20"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"20"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
<!--sad -->
...
...
@@ -1112,7 +595,8 @@
<div
class=
"progress-bar bg-warning"
role=
"progressbar"
id=
"sad_width"
style=
"width: 40%"
aria-valuenow=
"40"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"40"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
<!--anger -->
...
...
@@ -1124,7 +608,8 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar"
role=
"progressbar"
id=
"anger_width"
style=
"width: 60%"
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
<!--surprise-->
...
...
@@ -1136,7 +621,8 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-info"
role=
"progressbar"
id=
"surprise_width"
style=
"width: 80%"
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
<!--neutral-->
...
...
@@ -1148,16 +634,18 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-info"
role=
"progressbar"
id=
"neutral_width"
style=
"width: 80%"
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
</div>
{#
<!--evaluate button -->
#}
{#
<button
type=
"button"
class=
"btn btn-danger float-right"
#
}
{
#
id=
"evaluate_button"
>
Evaluate#}
{#
</button>
#}
</div>
</div>
<!--graph tab -->
...
...
@@ -1215,63 +703,63 @@
<!--2nd column -->
{#
<div
class=
"col-lg-6"
>
#}
{#
<!--card content -->
#}
{#
<div
class=
"card shadow mb-4"
>
#}
{#
<!--card header -->
#}
{#
<div
class=
"card-header py-3"
>
#}
{#
<h5
class=
"m-0 font-weight-bold text-primary"
>
Frame Detections
</h5>
#}
{#
</div>
#}
{##}
{#
<!--card body -->
#}
{#
<div
class=
"text-center p-4"
id=
"detection_frames"
>
#}
{##}
{#
<!--no content message-->
#}
{#
<div
class=
"text-center p-2"
id=
"no_detection_message_content"
>
#}
{#
<span
class=
"font-italic"
>
No frame is selected
</span>
#}
{#
</div>
#}
{##}
{#
<div
class=
"text-left m-3"
id=
"detection_number_area"
hidden
>
#}
{#
<p>
No of detections:
<span
id=
"no_of_detections"
></span></p>
#}
{#
</div>
#}
{#
<!--the detection loader -->
#}
{#
<div
class=
"text-center p-2"
id=
"detection_loader"
hidden
>
#}
{#
<img
src=
"{% static 'FirstApp/images/ajax-loader.gif' %}"
#
}
{
#
alt=
"Loader"
>
#}
{#
</div>
#}
{#
</div>
#}
{#
</div>
#}
{##}
{#
<!--detection person card -->
#}
{#
<div
class=
"card shadow mb-4"
>
#}
{#
<!--card header -->
#}
{#
<div
class=
"card-header py-3"
>
#}
{#
<h5
class=
"m-0 font-weight-bold text-primary"
>
Detected Students (by emotion#}
{# type)
</h5>
#}
{#
</div>
#}
{##}
{#
<!--card body -->
#}
{#
<div
class=
"text-center p-4"
id=
"detection_students"
>
#}
{#
<!--activity type line -->
#}
{#
<div
class=
"text-center p-2"
id=
"activity_type"
hidden
>
#}
{#
<p>
Activity Type:
<span
class=
"font-weight-bold"
id=
"activity_type_text"
></span>
#}
{#
</p>
#}
{#
</div>
#}
{##}
{#
<!--no content message-->
#}
{#
<div
class=
"text-center p-2"
id=
"no_detection_student_content"
>
#}
{#
<span
class=
"font-italic"
>
No activity type is selected
</span>
#}
{#
</div>
#}
{##}
{#
<!--the detection student loader -->
#}
{#
<div
class=
"text-center p-2"
id=
"detection_student_loader"
hidden
>
#}
{#
<img
src=
"{% static 'FirstApp/images/ajax-loader.gif' %}"
#
}
{
#
alt=
"Loader"
>
#}
{#
</div>
#}
{##}
{#
</div>
#}
{#
</div>
#}
{#
</div>
#}
{#
<div
class=
"col-lg-6"
>
#}
{#
<!--card content -->
#}
{#
<div
class=
"card shadow mb-4"
>
#}
{#
<!--card header -->
#}
{#
<div
class=
"card-header py-3"
>
#}
{#
<h5
class=
"m-0 font-weight-bold text-primary"
>
Frame Detections
</h5>
#}
{#
</div>
#}
{##}
{#
<!--card body -->
#}
{#
<div
class=
"text-center p-4"
id=
"detection_frames"
>
#}
{##}
{#
<!--no content message-->
#}
{#
<div
class=
"text-center p-2"
id=
"no_detection_message_content"
>
#}
{#
<span
class=
"font-italic"
>
No frame is selected
</span>
#}
{#
</div>
#}
{##}
{#
<div
class=
"text-left m-3"
id=
"detection_number_area"
hidden
>
#}
{#
<p>
No of detections:
<span
id=
"no_of_detections"
></span></p>
#}
{#
</div>
#}
{#
<!--the detection loader -->
#}
{#
<div
class=
"text-center p-2"
id=
"detection_loader"
hidden
>
#}
{#
<img
src=
"{% static 'FirstApp/images/ajax-loader.gif' %}"
#
}
{
#
alt=
"Loader"
>
#}
{#
</div>
#}
{#
</div>
#}
{#
</div>
#}
{##}
{#
<!--detection person card -->
#}
{#
<div
class=
"card shadow mb-4"
>
#}
{#
<!--card header -->
#}
{#
<div
class=
"card-header py-3"
>
#}
{#
<h5
class=
"m-0 font-weight-bold text-primary"
>
Detected Students (by emotion#}
{# type)
</h5>
#}
{#
</div>
#}
{##}
{#
<!--card body -->
#}
{#
<div
class=
"text-center p-4"
id=
"detection_students"
>
#}
{#
<!--activity type line -->
#}
{#
<div
class=
"text-center p-2"
id=
"activity_type"
hidden
>
#}
{#
<p>
Activity Type:
<span
class=
"font-weight-bold"
id=
"activity_type_text"
></span>
#}
{#
</p>
#}
{#
</div>
#}
{##}
{#
<!--no content message-->
#}
{#
<div
class=
"text-center p-2"
id=
"no_detection_student_content"
>
#}
{#
<span
class=
"font-italic"
>
No activity type is selected
</span>
#}
{#
</div>
#}
{##}
{#
<!--the detection student loader -->
#}
{#
<div
class=
"text-center p-2"
id=
"detection_student_loader"
hidden
>
#}
{#
<img
src=
"{% static 'FirstApp/images/ajax-loader.gif' %}"
#
}
{
#
alt=
"Loader"
>
#}
{#
</div>
#}
{##}
{#
</div>
#}
{#
</div>
#}
{#
</div>
#}
</div>
...
...
@@ -1281,36 +769,36 @@
<div
class=
"row p-2"
>
<!--1st column -->
{#
<div
class=
"col-lg-6"
>
#}
{#
<!--card -->
#}
{#
<div
class=
"card shadow mb-4"
>
#}
{#
<!--card header -->
#}
{#
<div
class=
"card-header"
>
#}
{#
<h5
class=
"m-0 font-weight-bold text-primary"
>
Evaluated Students
</h5>
#}
{#
</div>
#}
{##}
{#
<!--card body -->
#}
{#
<div
class=
"card-body"
id=
"evaluation_students"
>
#}
{##}
{#
<!--no content message-->
#}
{#
<div
class=
"text-center p-2"
id=
"no_evaluated_student_content"
>
#}
{#
<span
class=
"font-italic"
>
Press 'Evaluate' button to evaluate students
</span>
#}
{#
</div>
#}
{##}
{#
<!--the detection student loader -->
#}
{#
<div
class=
"text-center p-2"
id=
"evaluate_student_loader"
hidden
>
#}
{#
<img
src=
"{% static 'FirstApp/images/ajax-loader.gif' %}"
#
}
{
#
alt=
"Loader"
>
#}
{#
</div>
#}
{#
<!--end of student detection loader -->
#}
{##}
{##}
{#
</div>
#}
{##}
{#
</div>
#}
{##}
{##}
{#
</div>
#}
{#
<div
class=
"col-lg-6"
>
#}
{#
<!--card -->
#}
{#
<div
class=
"card shadow mb-4"
>
#}
{#
<!--card header -->
#}
{#
<div
class=
"card-header"
>
#}
{#
<h5
class=
"m-0 font-weight-bold text-primary"
>
Evaluated Students
</h5>
#}
{#
</div>
#}
{##}
{#
<!--card body -->
#}
{#
<div
class=
"card-body"
id=
"evaluation_students"
>
#}
{##}
{#
<!--no content message-->
#}
{#
<div
class=
"text-center p-2"
id=
"no_evaluated_student_content"
>
#}
{#
<span
class=
"font-italic"
>
Press 'Evaluate' button to evaluate students
</span>
#}
{#
</div>
#}
{##}
{#
<!--the detection student loader -->
#}
{#
<div
class=
"text-center p-2"
id=
"evaluate_student_loader"
hidden
>
#}
{#
<img
src=
"{% static 'FirstApp/images/ajax-loader.gif' %}"
#
}
{
#
alt=
"Loader"
>
#}
{#
</div>
#}
{#
<!--end of student detection loader -->
#}
{##}
{##}
{#
</div>
#}
{##}
{#
</div>
#}
{##}
{##}
{#
</div>
#}
<!--end of 1st column -->
...
...
@@ -1331,7 +819,7 @@
<!--button -->
<div
class=
"text-right m-4"
>
<button
type=
"button"
class=
"btn btn-outline-success"
id=
"integrate_
activity
"
>
<button
type=
"button"
class=
"btn btn-outline-success"
id=
"integrate_
emotion
"
>
Process
</button>
</div>
...
...
@@ -1530,7 +1018,7 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-danger"
role=
"progressbar"
id=
"happy_instant_value"
{
#
style=
"width: 0%"
#
}
{
#
style=
"width: 0%"
#
}
aria-valuenow=
"20"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
...
...
@@ -1541,7 +1029,7 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-warning"
role=
"progressbar"
id=
"sad_instant_value"
{
#
style=
"width: 0%"
#
}
{
#
style=
"width: 0%"
#
}
aria-valuenow=
"40"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
...
...
@@ -1552,7 +1040,7 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar"
role=
"progressbar"
id=
"angry_instant_value"
{
#
style=
"width: 0%"
#
}
{
#
style=
"width: 0%"
#
}
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
...
...
@@ -1563,7 +1051,7 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-info"
role=
"progressbar"
id=
"neutral_instant_value"
{
#
style=
"width: 80%"
#
}
{
#
style=
"width: 80%"
#
}
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
...
...
@@ -1575,7 +1063,7 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-info"
role=
"progressbar"
id=
"surprise_instant_value"
{
#
style=
"width: 80%"
#
}
{
#
style=
"width: 80%"
#
}
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
...
...
FirstApp/templates/FirstApp/gaze.html
View file @
9ab5c758
...
...
@@ -169,13 +169,14 @@
fetch
(
'
http://127.0.0.1:8000/get-lecture-gaze-estimation/?lecture_video_id=
'
+
global_lecture_video_id
+
'
&lecture_video_name=
'
+
global_video_name
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
{
let
frames
=
createFrames
(
out
);
return
frames
{
#
let
frames
=
createFrames
(
out
);
#
}
{
#
return
frames
#
}
displayGazeEstimation
(
out
)
})
.
then
((
obj
)
=>
{
$
(
'
#video_frames
'
).
prepend
(
obj
);
{
#
$
(
'
#video_frames
'
).
prepend
(
obj
);
#
}
$
(
'
#frame_loader
'
).
attr
(
'
hidden
'
,
true
);
$
(
'
#slidecontainer
'
).
attr
(
'
hidden
'
,
false
);
{
#
$
(
'
#slidecontainer
'
).
attr
(
'
hidden
'
,
false
);
#
}
})
.
catch
((
error
)
=>
alert
(
'
this is the error:
'
+
error
));
});
...
...
@@ -231,47 +232,8 @@
}
//this section is responsible for displaying the frames as video
//creating the frame content
function
createFrames
(
res
)
{
let
main_frame_content
=
"
<div class='row' id='main_frames'>
"
;
main_frame_content
+=
"
<ul class='list-group list-group-horizontal'>
"
;
let
count
=
0
;
//loop through the frames
res
.
extracted
.
map
((
image
)
=>
{
let
img_src
=
""
;
if
(
count
===
0
)
{
main_frame_content
+=
"
<li class='list-group-item text-center' id='image_0'>
"
;
img_src
=
"
<img src='{% static '' %}FirstApp/gaze/
"
+
global_video_name
+
"
/
"
+
res
.
extracted
[
0
]
+
"
' width='400' height='400'>
"
;
}
else
{
main_frame_content
+=
"
<li class='list-group-item other-frames' id='image_
"
+
count
+
"
' hidden>
"
;
img_src
=
"
<img src='{% static '' %}FirstApp/gaze/
"
+
global_video_name
+
"
/
"
+
image
+
"
' class='img-link' width='400' height='400'>
"
;
}
main_frame_content
+=
img_src
;
main_frame_content
+=
"
</li>
"
;
count
++
;
});
main_frame_content
+=
"
</ul>
"
;
main_frame_content
+=
"
</div>
"
;
//setting the min, max values of the slider
$
(
'
#myActivityRange
'
).
attr
({
'
min
'
:
0
,
'
max
'
:
count
});
//display the progress bars
displayGazeEstimation
(
res
);
return
main_frame_content
;
}
//to handle the 'integrate' modal
$
(
'
#integrate_
activity
'
).
click
(
function
()
{
$
(
'
#integrate_
gaze
'
).
click
(
function
()
{
//define the student video src
let
video_src
=
"
{% static '' %}FirstApp/videos/
"
+
global_video_name
;
...
...
@@ -312,43 +274,42 @@
//append to the html string
//looking up and right
htmlString
+=
"
<div class='progress_area' id='progress_
"
+
frame_name
+
"
' hidden>
"
;
htmlString
+=
"
<div class='progress_area' id='progress_
"
+
frame_name
+
"
' hidden>
"
;
htmlString
+=
"
<h4 class='small font-weight-bold'>Looking up and right</h4>
"
;
htmlString
+=
"
<span class='float-right' id='look_up_right_instant_
"
+
frame_name
+
"
'>
"
+
look_up_right
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='look_up_right_instant_
"
+
frame_name
+
"
'>
"
+
look_up_right
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar bg-warning' role='progressbar' id='look_up_right_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
look_up_right
+
"
%' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar bg-warning' role='progressbar' id='look_up_right_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
look_up_right
+
"
%' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//looking up and left
htmlString
+=
"
<h4 class='small font-weight-bold'>Looking up and left</h4>
"
;
htmlString
+=
"
<span class='float-right' id='look_up_left_instant_
"
+
frame_name
+
"
'>
"
+
look_up_left
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='look_up_left_instant_
"
+
frame_name
+
"
'>
"
+
look_up_left
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar' role='progressbar' id='look_up_left_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
look_up_left
+
"
%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar' role='progressbar' id='look_up_left_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
look_up_left
+
"
%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//looking down and right
htmlString
+=
"
<h4 class='small font-weight-bold'>Looking down and right</h4>
"
;
htmlString
+=
"
<span class='float-right' id='look_down_right_instant_
"
+
frame_name
+
"
'>
"
+
look_down_right
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='look_down_right_instant_
"
+
frame_name
+
"
'>
"
+
look_down_right
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='look_down_right_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
look_down_right
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='look_down_right_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
look_down_right
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//looking down and left
htmlString
+=
"
<h4 class='small font-weight-bold'>Looking down and left</h4>
"
;
htmlString
+=
"
<span class='float-right' id='look_down_left_instant_
"
+
frame_name
+
"
'>
"
+
look_down_left
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='look_down_left_instant_
"
+
frame_name
+
"
'>
"
+
look_down_left
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='look_down_left_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
look_down_left
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='look_down_left_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
look_down_left
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//looking front
htmlString
+=
"
<h4 class='small font-weight-bold'>Looking front</h4>
"
;
htmlString
+=
"
<span class='float-right' id='look_front_instant_
"
+
frame_name
+
"
'>
"
+
look_front
+
"
%</span>
"
;
htmlString
+=
"
<span class='float-right' id='look_front_instant_
"
+
frame_name
+
"
'>
"
+
look_front
+
"
%</span>
"
;
htmlString
+=
"
<div class='progress mb-4'>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='look_front_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
look_front
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
<div class='progress-bar bg-info' role='progressbar' id='look_front_instant_value_
"
+
frame_name
+
"
' style='width:
"
+
look_front
+
"
%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>
"
;
htmlString
+=
"
</div>
"
;
//ending the progress area
htmlString
+=
"
</div>
"
;
...
...
@@ -434,254 +395,6 @@
});
//declaring the variable for setInterval function
let
timeVar
=
null
;
//handling the play button
$
(
'
#play_pause_icon_activity
'
).
click
(
function
()
{
//defining the two possible classes
let
play_class
=
"
fas fa-play
"
;
let
pause_class
=
"
fas fa-pause
"
;
//retrieving the current icon class
let
current_class
=
$
(
this
).
attr
(
'
class
'
);
//assigning the correct class based on the icon clicked
let
new_class
=
(
current_class
===
play_class
)
?
pause_class
:
play_class
;
//setting the new class
$
(
this
).
attr
(
'
class
'
,
new_class
);
//handling the slider
let
slider
=
document
.
getElementById
(
"
myActivityRange
"
);
let
output
=
document
.
getElementById
(
"
demo
"
);
//when the button is playing
if
(
current_class
===
play_class
)
{
timeVar
=
setInterval
(()
=>
{
let
value
=
slider
.
value
;
let
new_slider_value
=
Number
(
value
)
+
1
;
slider
.
value
=
new_slider_value
;
output
.
innerHTML
=
new_slider_value
.
toString
();
let
selectedImage
=
'
#image_
'
+
Number
(
value
);
//displaying the relevant image
$
(
'
#image_0
'
).
html
(
$
(
selectedImage
).
html
());
},
100
);
}
//when the button is paused
else
if
(
current_class
===
pause_class
)
{
clearInterval
(
timeVar
);
}
});
//handling the slider
let
slider
=
document
.
getElementById
(
"
myActivityRange
"
);
let
output
=
document
.
getElementById
(
"
demo
"
);
output
.
innerHTML
=
slider
.
value
;
slider
.
oninput
=
function
()
{
output
.
innerHTML
=
this
.
value
;
let
selectedImage
=
'
#image_
'
+
Number
(
this
.
value
);
//hide
{
#
$
(
'
#image_0
'
).
attr
(
'
hidden
'
,
true
);
#
}
$
(
'
#image_0
'
).
html
(
$
(
selectedImage
).
html
());
//setting the selected image
{
#
$
(
selectedImage
).
attr
(
'
hidden
'
,
false
);
#
}
};
$
(
document
).
on
(
'
click
'
,
'
.img-link
'
,
function
(
e
)
{
//removing previously displayed detections
$
(
'
.detections
'
).
remove
();
//removing the no-content message
$
(
'
#no_detection_message_content
'
).
hide
();
//appearing the loader
$
(
'
#detection_loader
'
).
attr
(
'
hidden
'
,
false
);
let
img_src_arr
=
e
.
target
.
src
.
split
(
'
/
'
);
let
len
=
img_src_arr
.
length
;
let
src
=
img_src_arr
[
len
-
1
];
let
frame_name_arr
=
src
.
split
(
'
.
'
);
let
frame_name
=
frame_name_arr
[
0
];
//fetching the detection for the selected frame
fetch
(
'
http://127.0.0.1:8000/get-lecture-activity-frame-detection/?video_name=
'
+
global_video_name
+
"
&frame_name=
"
+
frame_name
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
displayDetections
(
out
.
detections
,
frame_name
))
.
catch
((
error
)
=>
alert
(
'
this is an error
'
));
});
//the function to display detections
function
displayDetections
(
detections
,
frame_name
)
{
let
img_string
=
''
;
let
no_of_detections
=
detections
.
length
;
//disabling the loader
$
(
'
#detection_loader
'
).
attr
(
'
hidden
'
,
true
);
//appearing the no of detections number area
$
(
'
#detection_number_area
'
).
attr
(
'
hidden
'
,
false
);
$
(
'
#no_of_detections
'
).
text
(
no_of_detections
);
detections
.
map
((
detection
)
=>
{
img_string
+=
"
<img src='{% static '' %}FirstApp/activity/
"
+
global_video_name
+
"
/
"
+
frame_name
+
"
/
"
+
detection
+
"
' class='detections m-2' width='100' height='100' >
"
});
$
(
'
#detection_frames
'
).
prepend
(
img_string
);
}
//listening for click events in labels
$
(
'
.labels
'
).
click
(
function
()
{
let
label
=
Number
(
$
(
this
).
attr
(
'
data-number
'
));
//removing the previous student detection lists
$
(
'
.student_detection_lists
'
).
remove
();
//appearing the loader
$
(
'
#detection_student_loader
'
).
attr
(
'
hidden
'
,
false
);
//disappearing the no content message
$
(
'
#no_detection_student_content
'
).
attr
(
'
hidden
'
,
true
);
//fetching from the api
fetch
(
'
http://127.0.0.1:8000/get-lecture-activity-detection-for-label/?video_name=
'
+
global_video_name
+
'
&label=
'
+
label
)
.
then
((
res
)
=>
res
.
json
())
.
then
((
out
)
=>
createDetectedStudentFrames
(
out
))
.
catch
((
error
)
=>
alert
(
'
this is the error:
'
+
error
))
});
//creating the detected students frames
function
createDetectedStudentFrames
(
detections
)
{
let
htmlString
=
""
;
//iterating through the student
detections
.
people
.
map
((
student
)
=>
{
let
title
=
student
.
split
(
'
.
'
)[
0
];
let
images
=
""
;
htmlString
+=
"
<div class='row p-3 student-detection-rows'>
"
;
let
student_count
=
0
;
//iterating through the frames
detections
.
response
.
map
((
frame
)
=>
{
let
frame_detections
=
frame
.
detections
;
if
(
frame_detections
.
includes
(
student
))
{
if
(
student_count
===
0
)
{
images
+=
"
<li class='list-group-item frame-0' id='image_0_
"
+
title
+
"
'>
"
;
}
else
{
images
+=
"
<li class='list-group-item other-student-frames' id='image_
"
+
student_count
+
"
_
"
+
title
+
"
' hidden>
"
;
}
images
+=
"
<img src='{% static '' %}FirstApp/Activity/
"
+
global_video_name
+
"
/
"
+
frame
.
frame
+
"
/
"
+
student
+
"
' width='200' height='200'>
"
;
images
+=
"
</li>
"
;
//increment the student count
student_count
++
;
}
});
htmlString
+=
"
<h6 class='font-italic'>
"
+
title
+
"
</h6>
"
;
htmlString
+=
"
<ul class='list-group list-group-horizontal student_detection_lists' style='overflow-x: scroll'>
"
;
htmlString
+=
images
;
htmlString
+=
"
</ul>
"
;
htmlString
+=
"
<div class='slidecontainer'>
"
;
htmlString
+=
"
<div class='row m-3'></div>
"
;
htmlString
+=
"
<div class='row'>
"
;
htmlString
+=
"
<span><i class='fas fa-play play-pause-icon-student-frames' id='icon_
"
+
title
+
"
'></i></span>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
<input type='range' min='1' max='100' value='0' class='slider' id='slider_
"
+
title
+
"
'>
"
;
htmlString
+=
"
<p>No of frames: <span id='demo_
"
+
title
+
"
'></span></p>
"
;
htmlString
+=
"
</div>
"
;
htmlString
+=
"
</div>
"
;
});
//disappearing the loader
$
(
'
#detection_student_loader
'
).
attr
(
'
hidden
'
,
true
);
//append to the relevant html card content
$
(
'
#detection_students
'
).
append
(
htmlString
);
}
let
studentTimeVar
=
null
;
//playing the frames for each student detection
$
(
document
).
on
(
'
click
'
,
'
.play-pause-icon-student-frames
'
,
function
(
e
)
{
//defining the two possible classes
let
play_class
=
"
fas fa-play play-pause-icon-student-frames
"
;
let
pause_class
=
"
fas fa-pause play-pause-icon-student-frames
"
;
//retrieving the current icon class
let
current_class
=
$
(
this
).
attr
(
'
class
'
);
//assigning the correct class based on the icon clicked
let
new_class
=
(
current_class
===
play_class
)
?
pause_class
:
play_class
;
//setting the new class
$
(
this
).
attr
(
'
class
'
,
new_class
);
//extracting the title pf the clicked icon
let
title_part
=
$
(
this
).
attr
(
'
id
'
);
let
title
=
title_part
.
split
(
"
_
"
)[
1
];
//handling the slider
let
slider
=
document
.
getElementById
(
"
slider_
"
+
title
);
let
output
=
document
.
getElementById
(
"
demo_
"
+
title
);
//when the button is playing
if
(
current_class
===
play_class
)
{
studentTimeVar
=
setInterval
(()
=>
{
let
value
=
slider
.
value
;
let
new_slider_value
=
Number
(
value
)
+
1
;
slider
.
value
=
new_slider_value
;
output
.
innerHTML
=
new_slider_value
.
toString
();
let
selectedImage
=
'
#image_
'
+
Number
(
value
)
+
'
_
'
+
title
;
//displaying the relevant image
$
(
'
#image_0_
'
+
title
).
html
(
$
(
selectedImage
).
html
());
},
100
);
}
//when the button is paused
else
if
(
current_class
===
pause_class
)
{
clearInterval
(
studentTimeVar
);
}
})
});
</script>
...
...
@@ -854,22 +567,6 @@
alt=
"Loader"
>
</div>
<!--frames -->
.
<div
class=
"text-center p-4"
id=
"video_frames"
>
<!-- slide container -->
<div
id=
"slidecontainer"
hidden
>
<div
class=
"row m-3"
></div>
<!-- play/pause icon -->
<div
class=
"row"
>
<span><i
class=
"fas fa-play"
id=
"play_pause_icon_activity"
></i></span>
</div>
<input
type=
"range"
min=
"1"
max=
"100"
value=
"0"
class=
"slider"
id=
"myActivityRange"
>
<p>
No of frames:
<span
id=
"demo"
></span></p>
</div>
</div>
</div>
<!--this area will display the progress bars -->
<div
class=
"progress_area"
hidden
>
...
...
@@ -882,7 +579,8 @@
<div
class=
"progress-bar bg-danger"
role=
"progressbar"
id=
"looking_up_right_width"
style=
"width: 20%"
aria-valuenow=
"20"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"20"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
<!--looking up and left -->
...
...
@@ -894,7 +592,8 @@
<div
class=
"progress-bar bg-warning"
role=
"progressbar"
id=
"looking_up_left_width"
style=
"width: 40%"
aria-valuenow=
"40"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"40"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
<!--looking down and right -->
...
...
@@ -906,7 +605,8 @@
<div
class=
"progress-bar"
role=
"progressbar"
id=
"looking_down_right_width"
style=
"width: 60%"
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
<!--Looking down and left-->
...
...
@@ -917,7 +617,8 @@
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-info"
role=
"progressbar"
id=
"looking_down_left_width"
style=
"width: 80%"
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
<!--Looking front-->
...
...
@@ -926,9 +627,10 @@
</a>
<span
class=
"float-right"
id=
"looking_front_perct"
>
60%
</span>
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar bg-info
"
role=
"progressbar"
<div
class=
"progress-bar bg-gradient-dark
"
role=
"progressbar"
id=
"looking_front_width"
style=
"width: 80%"
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
aria-valuenow=
"80"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
</div>
...
...
@@ -936,6 +638,9 @@
</div>
</div>
<!--graph tab -->
<div
class=
"tab-pane fade"
id=
"graph"
role=
"tabpanel"
aria-labelledby=
"profile-tab"
>
...
...
@@ -1007,10 +712,11 @@
<!--button -->
<div
class=
"text-right m-4"
>
<button
type=
"button"
class=
"btn btn-outline-success"
id=
"integrate_
activity
"
>
<button
type=
"button"
class=
"btn btn-outline-success"
id=
"integrate_
gaze
"
>
Process
</button>
</div>
</div>
</div>
</div>
...
...
@@ -1164,7 +870,8 @@
</a>
<span
class=
"float-right"
id=
"looking_down_right_instant_perct"
>
50%
</span>
<div
class=
"progress mb-4"
>
<div
class=
"progress-bar"
role=
"progressbar"
id=
"looking_down_right_instant_width"
<div
class=
"progress-bar"
role=
"progressbar"
id=
"looking_down_right_instant_width"
style=
"width: 60%"
aria-valuenow=
"60"
aria-valuemin=
"0"
aria-valuemax=
"100"
></div>
</div>
...
...
@@ -1210,11 +917,11 @@
</div>
{#
<video
width=
"500"
height=
"300"
id=
"lecturer_video"
controls
>
#}
{#
<source
src=
"#"
#
}
{
#
type=
"video/mp4"
>
#}
{# Your browser does not support the video tag.#}
{#
</video>
#}
{#
<video
width=
"500"
height=
"300"
id=
"lecturer_video"
controls
>
#}
{#
<source
src=
"#"
#
}
{
#
type=
"video/mp4"
>
#}
{# Your browser does not support the video tag.#}
{#
</video>
#}
</div>
<!--end of lecture video section -->
...
...
FirstApp/urls.py
View file @
9ab5c758
...
...
@@ -155,6 +155,7 @@ urlpatterns = [
# lecture emotion detection for frames API (to retrieve detections for each frame in lecture video)
url
(
r'^get-lecture-emotion-for-frame/$'
,
api
.
GetLectureEmotionRecognitionsForFrames
.
as_view
()),
###### POSE Section #####
# lecture video API (for Pose estimation)
url
(
r'^get-lecture-video-for-pose/$'
,
api
.
GetLectureVideoForPose
.
as_view
()),
...
...
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