Skip to content

2
2020-101
Commit 65f5c691 authored by I.K Seneviratne's avatar I.K Seneviratne
Browse files
Options

Merge branch 'monitoring_student_behavior_IT17138000' into 'QA_RELEASE' 

Monitoring student behavior it17138000

See merge request !11
parents 6cff7d6f ca1b4798
Show whitespace changes
Inline Side-by-side
Showing with 486 additions and 1817 deletions
FirstApp/api.py
View file @ 65f5c691
...@@ -512,8 +512,6 @@ class GetLectureEmotionReportViewSet(APIView): ...@@ -512,8 +512,6 @@ class GetLectureEmotionReportViewSet(APIView):
def get(self, request): def get(self, request):
lecture_video_id = request.query_params.get('lecture_video_id') lecture_video_id = request.query_params.get('lecture_video_id')
lecture_video_name = request.query_params.get('lecture_video_name') 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) lecture_emotions = LectureEmotionReport.objects.filter(lecture_video_id__lecture_video_id=lecture_video_id)
serializer = LectureEmotionSerializer(lecture_emotions, many=True) serializer = LectureEmotionSerializer(lecture_emotions, many=True)
...@@ -522,7 +520,6 @@ class GetLectureEmotionReportViewSet(APIView): ...@@ -522,7 +520,6 @@ class GetLectureEmotionReportViewSet(APIView):
return Response({ return Response({
"response": serializer.data, "response": serializer.data,
"extracted": extracted
}) })
...@@ -729,8 +726,6 @@ class GetLectureGazeEstimationViewSet(APIView): ...@@ -729,8 +726,6 @@ class GetLectureGazeEstimationViewSet(APIView):
def get(self, request): def get(self, request):
lecture_video_id = request.query_params.get('lecture_video_id') lecture_video_id = request.query_params.get('lecture_video_id')
lecture_video_name = request.query_params.get('lecture_video_name') 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_gaze_estimations = LectureGazeEstimation.objects.filter(
lecture_video_id__lecture_video_id=lecture_video_id) lecture_video_id__lecture_video_id=lecture_video_id)
...@@ -738,7 +733,6 @@ class GetLectureGazeEstimationViewSet(APIView): ...@@ -738,7 +733,6 @@ class GetLectureGazeEstimationViewSet(APIView):
return Response({ return Response({
"response": serializer.data, "response": serializer.data,
# "extracted": extracted
}) })
......
FirstApp/templates/FirstApp/activity.html
View file @ 65f5c691
...@@ -147,7 +147,6 @@ ...@@ -147,7 +147,6 @@
global_video_name = video.video_name; global_video_name = video.video_name;
if (lectureVideo.isActivityFound) { if (lectureVideo.isActivityFound) {
e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-primary" id="result_btn">Results</button>'; e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-primary" id="result_btn">Results</button>';
} else { } else {
...@@ -174,13 +173,14 @@ ...@@ -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) 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((res) => res.json())
.then((out) => { .then((out) => {
let frames = createFrames(out); {#let frames = createFrames(out);#}
return frames {#return frames#}
displayActivity(out);
}) })
.then((obj) => { .then((obj) => {
$('#video_frames').prepend(obj); {#$('#video_frames').prepend(obj);#}
$('#frame_loader').attr('hidden', true); $('#frame_loader').attr('hidden', true);
$('#slidecontainer').attr('hidden', false); {#$('#slidecontainer').attr('hidden', false);#}
}) })
.catch((error) => alert('this is the error: ' + error)); .catch((error) => alert('this is the error: ' + error));
}); });
...@@ -234,513 +234,6 @@ ...@@ -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 //to handle the 'integrate' modal
$('#integrate_activity').click(function () { $('#integrate_activity').click(function () {
//define the student video src //define the student video src
...@@ -780,25 +273,25 @@ ...@@ -780,25 +273,25 @@
//append to the html string //append to the html string
//phone checking //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 += "<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 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>"; htmlString += "</div>";
//note taking //note taking
htmlString += "<h4 class='small font-weight-bold'>Writing</h4>"; 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 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>"; htmlString += "</div>";
//listening //listening
htmlString += "<h4 class='small font-weight-bold'>Listening</h4>"; 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 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>"; htmlString += "</div>";
//ending the progress area //ending the progress area
...@@ -893,7 +386,6 @@ ...@@ -893,7 +386,6 @@
$('#generate_report_message').hide(); $('#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) 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((res) => res.json())
.then((out) => { .then((out) => {
...@@ -908,7 +400,6 @@ ...@@ -908,7 +400,6 @@
}); });
}); });
</script> </script>
...@@ -931,11 +422,11 @@ ...@@ -931,11 +422,11 @@
{% load static %} {% load static %}
<!-- Page Heading --> <!-- Page Heading -->
{# <div class="d-sm-flex align-items-center justify-content-between mb-4">#} {# <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>#} {# <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#} {# <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>#} {# class="fas fa-download fa-sm text-white-50"></i> Generate Report</button>#}
{# </div>#} {# </div>#}
<!--first row --> <!--first row -->
...@@ -1084,25 +575,8 @@ ...@@ -1084,25 +575,8 @@
alt="Loader"> alt="Loader">
</div> </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 --> <!--this area will display the progress bars -->
<div class="progress_area" hidden> <div class="progress_area mt-4" hidden>
<!--talking with friends --> <!--talking with friends -->
<a href="#" class="btn btn-link labels" data-number="1" <a href="#" class="btn btn-link labels" data-number="1"
data-label="talking-with-friends"> data-label="talking-with-friends">
...@@ -1113,7 +587,8 @@ ...@@ -1113,7 +587,8 @@
<div class="progress-bar bg-danger" role="progressbar" <div class="progress-bar bg-danger" role="progressbar"
id="talking_width" id="talking_width"
style="width: 20%" style="width: 20%"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
<!--phone checking --> <!--phone checking -->
...@@ -1126,7 +601,8 @@ ...@@ -1126,7 +601,8 @@
<div class="progress-bar bg-warning" role="progressbar" <div class="progress-bar bg-warning" role="progressbar"
id="phone_width" id="phone_width"
style="width: 40%" style="width: 40%"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
<!--note taking --> <!--note taking -->
...@@ -1138,7 +614,8 @@ ...@@ -1138,7 +614,8 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar" role="progressbar" id="writing_width" <div class="progress-bar" role="progressbar" id="writing_width"
style="width: 60%" style="width: 60%"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
<!--listening--> <!--listening-->
...@@ -1149,16 +626,17 @@ ...@@ -1149,16 +626,17 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar" <div class="progress-bar bg-info" role="progressbar"
id="listening_width" style="width: 80%" 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> </div>
<!--evaluate button -->
<button type="button" class="btn btn-danger float-right"
id="evaluate_button">Evaluate
</button>
</div> </div>
</div> </div>
<!--graph tab --> <!--graph tab -->
...@@ -1250,32 +728,32 @@ ...@@ -1250,32 +728,32 @@
<!--1st column --> <!--1st column -->
<div class="col-lg-6"> <div class="col-lg-6">
{# <!--card -->#} {# <!--card -->#}
{# <div class="card shadow mb-4">#} {# <div class="card shadow mb-4">#}
{# <!--card header -->#} {# <!--card header -->#}
{# <div class="card-header">#} {# <div class="card-header">#}
{# <h5 class="m-0 font-weight-bold text-primary">Evaluated Students</h5>#} {# <h5 class="m-0 font-weight-bold text-primary">Evaluated Students</h5>#}
{# </div>#} {# </div>#}
{##} {##}
{# <!--card body -->#} {# <!--card body -->#}
{# <div class="card-body" id="evaluation_students">#} {# <div class="card-body" id="evaluation_students">#}
{##} {##}
{# <!--no content message-->#} {# <!--no content message-->#}
{# <div class="text-center p-2" id="no_evaluated_student_content">#} {# <div class="text-center p-2" id="no_evaluated_student_content">#}
{# <span class="font-italic">Press 'Evaluate' button to evaluate students</span>#} {# <span class="font-italic">Press 'Evaluate' button to evaluate students</span>#}
{# </div>#} {# </div>#}
{##} {##}
{# <!--the detection student loader -->#} {# <!--the detection student loader -->#}
{# <div class="text-center p-2" id="evaluate_student_loader" hidden>#} {# <div class="text-center p-2" id="evaluate_student_loader" hidden>#}
{# <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"#} {# <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"#}
{# alt="Loader">#} {# alt="Loader">#}
{# </div>#} {# </div>#}
{# <!--end of student detection loader -->#} {# <!--end of student detection loader -->#}
{##} {##}
{##} {##}
{# </div>#} {# </div>#}
{##} {##}
{# </div>#} {# </div>#}
</div> </div>
...@@ -1448,7 +926,8 @@ ...@@ -1448,7 +926,8 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <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> <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
</div> </div>
</div> </div>
...@@ -1498,7 +977,7 @@ ...@@ -1498,7 +977,7 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-danger" role="progressbar" <div class="progress-bar bg-danger" role="progressbar"
id="talking_instant_value" id="talking_instant_value"
{# style="width: 0%"#} {# style="width: 0%"#}
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
...@@ -1509,7 +988,7 @@ ...@@ -1509,7 +988,7 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar" <div class="progress-bar bg-warning" role="progressbar"
id="phone_checking_instant_value" id="phone_checking_instant_value"
{# style="width: 0%"#} {# style="width: 0%"#}
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
...@@ -1520,7 +999,7 @@ ...@@ -1520,7 +999,7 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar" role="progressbar" <div class="progress-bar" role="progressbar"
id="note_taking_instant_value" id="note_taking_instant_value"
{# style="width: 0%"#} {# style="width: 0%"#}
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
...@@ -1531,7 +1010,7 @@ ...@@ -1531,7 +1010,7 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar" <div class="progress-bar bg-info" role="progressbar"
id="listening_instant_value" id="listening_instant_value"
{# style="width: 80%"#} {# 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>
...@@ -1554,11 +1033,11 @@ ...@@ -1554,11 +1033,11 @@
</div> </div>
<!-- video --> <!-- video -->
{# <video width="500" height="300" id="lecturer_video" controls>#} {# <video width="500" height="300" id="lecturer_video" controls>#}
{# <source src="#"#} {# <source src="#"#}
{# type="video/mp4">#} {# type="video/mp4">#}
{# Your browser does not support the video tag.#} {# Your browser does not support the video tag.#}
{# </video>#} {# </video>#}
</div> </div>
<!--end of lecture video section --> <!--end of lecture video section -->
......
FirstApp/templates/FirstApp/emotion.html
View file @ 65f5c691
...@@ -170,13 +170,14 @@ ...@@ -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) 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((res) => res.json())
.then((out) => { .then((out) => {
let frames = createFrames(out); {#let frames = createFrames(out);#}
return frames {#return frames#}
displayActivity(out)
}) })
.then((obj) => { .then((obj) => {
$('#video_frames').prepend(obj); {#$('#video_frames').prepend(obj);#}
$('#frame_loader').attr('hidden', true); $('#frame_loader').attr('hidden', true);
$('#slidecontainer').attr('hidden', false); {#$('#slidecontainer').attr('hidden', false);#}
}) })
.catch((error) => alert('this is the error: ' + error)); .catch((error) => alert('this is the error: ' + error));
}); });
...@@ -233,510 +234,8 @@ ...@@ -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 //to handle the 'integrate' modal
$('#integrate_activity').click(function () { $('#integrate_emotion').click(function () {
//define the student video src //define the student video src
let video_src = "{% static '' %}FirstApp/videos/" + global_video_name; let video_src = "{% static '' %}FirstApp/videos/" + global_video_name;
...@@ -754,7 +253,6 @@ ...@@ -754,7 +253,6 @@
.catch((err) => alert('error: ' + err)); .catch((err) => alert('error: ' + err));
}); });
...@@ -780,39 +278,39 @@ ...@@ -780,39 +278,39 @@
//append to the html string //append to the html string
//Happy //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 += "<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 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>"; htmlString += "</div>";
//Sad //Sad
htmlString += "<h4 class='small font-weight-bold'>Sad</h4>"; 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 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>"; htmlString += "</div>";
//Angry //Angry
htmlString += "<h4 class='small font-weight-bold'>Angry</h4>"; 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 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>"; htmlString += "</div>";
//Neutral //Neutral
htmlString += "<h4 class='small font-weight-bold'>Neutral</h4>"; 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 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>"; htmlString += "</div>";
//Surprise //Surprise
htmlString += "<h4 class='small font-weight-bold'>Surprise</h4>"; 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 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>"; htmlString += "</div>";
//ending the progress area //ending the progress area
...@@ -1064,31 +562,15 @@ ...@@ -1064,31 +562,15 @@
<!--temporary text --> <!--temporary text -->
<span class="font-italic" id="temporary_text">Frame will be displayed here</span> <span class="font-italic" id="temporary_text">Frame will be displayed here</span>
<!--loading buffer area--> <!--loading buffer area-->
<div class="text-center" id="frame_loader" hidden> <div class="text-center" id="frame_loader" hidden>
<img src="{% static 'FirstApp/images/ajax-loader.gif' %}" <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
alt="Loader"> alt="Loader">
</div> </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 --> <!--this area will display the progress bars -->
<div class="progress_area" hidden> <div class="progress_area mt-4" hidden>
<!--Happy --> <!--Happy -->
<a href="#" class="btn btn-link labels" data-number="1" <a href="#" class="btn btn-link labels" data-number="1"
data-label="Happy"> data-label="Happy">
...@@ -1099,7 +581,8 @@ ...@@ -1099,7 +581,8 @@
<div class="progress-bar bg-danger" role="progressbar" <div class="progress-bar bg-danger" role="progressbar"
id="happy_width" id="happy_width"
style="width: 20%" style="width: 20%"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
<!--sad --> <!--sad -->
...@@ -1112,7 +595,8 @@ ...@@ -1112,7 +595,8 @@
<div class="progress-bar bg-warning" role="progressbar" <div class="progress-bar bg-warning" role="progressbar"
id="sad_width" id="sad_width"
style="width: 40%" style="width: 40%"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
<!--anger --> <!--anger -->
...@@ -1124,7 +608,8 @@ ...@@ -1124,7 +608,8 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar" role="progressbar" id="anger_width" <div class="progress-bar" role="progressbar" id="anger_width"
style="width: 60%" style="width: 60%"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
<!--surprise--> <!--surprise-->
...@@ -1136,7 +621,8 @@ ...@@ -1136,7 +621,8 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar" <div class="progress-bar bg-info" role="progressbar"
id="surprise_width" style="width: 80%" 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> </div>
<!--neutral--> <!--neutral-->
...@@ -1148,16 +634,18 @@ ...@@ -1148,16 +634,18 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar" <div class="progress-bar bg-info" role="progressbar"
id="neutral_width" style="width: 80%" 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> </div>
{# <!--evaluate button -->#}
{# <button type="button" class="btn btn-danger float-right"#}
{# id="evaluate_button">Evaluate#}
{# </button>#}
</div> </div>
</div> </div>
<!--graph tab --> <!--graph tab -->
...@@ -1215,63 +703,63 @@ ...@@ -1215,63 +703,63 @@
<!--2nd column --> <!--2nd column -->
{# <div class="col-lg-6">#} {# <div class="col-lg-6">#}
{# <!--card content -->#} {# <!--card content -->#}
{# <div class="card shadow mb-4">#} {# <div class="card shadow mb-4">#}
{# <!--card header -->#} {# <!--card header -->#}
{# <div class="card-header py-3">#} {# <div class="card-header py-3">#}
{# <h5 class="m-0 font-weight-bold text-primary">Frame Detections</h5>#} {# <h5 class="m-0 font-weight-bold text-primary">Frame Detections</h5>#}
{# </div>#} {# </div>#}
{##} {##}
{# <!--card body -->#} {# <!--card body -->#}
{# <div class="text-center p-4" id="detection_frames">#} {# <div class="text-center p-4" id="detection_frames">#}
{##} {##}
{# <!--no content message-->#} {# <!--no content message-->#}
{# <div class="text-center p-2" id="no_detection_message_content">#} {# <div class="text-center p-2" id="no_detection_message_content">#}
{# <span class="font-italic">No frame is selected</span>#} {# <span class="font-italic">No frame is selected</span>#}
{# </div>#} {# </div>#}
{##} {##}
{# <div class="text-left m-3" id="detection_number_area" hidden>#} {# <div class="text-left m-3" id="detection_number_area" hidden>#}
{# <p>No of detections: <span id="no_of_detections"></span></p>#} {# <p>No of detections: <span id="no_of_detections"></span></p>#}
{# </div>#} {# </div>#}
{# <!--the detection loader -->#} {# <!--the detection loader -->#}
{# <div class="text-center p-2" id="detection_loader" hidden>#} {# <div class="text-center p-2" id="detection_loader" hidden>#}
{# <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"#} {# <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"#}
{# alt="Loader">#} {# alt="Loader">#}
{# </div>#} {# </div>#}
{# </div>#} {# </div>#}
{# </div>#} {# </div>#}
{##} {##}
{# <!--detection person card -->#} {# <!--detection person card -->#}
{# <div class="card shadow mb-4">#} {# <div class="card shadow mb-4">#}
{# <!--card header -->#} {# <!--card header -->#}
{# <div class="card-header py-3">#} {# <div class="card-header py-3">#}
{# <h5 class="m-0 font-weight-bold text-primary">Detected Students (by emotion#} {# <h5 class="m-0 font-weight-bold text-primary">Detected Students (by emotion#}
{# type)</h5>#} {# type)</h5>#}
{# </div>#} {# </div>#}
{##} {##}
{# <!--card body -->#} {# <!--card body -->#}
{# <div class="text-center p-4" id="detection_students">#} {# <div class="text-center p-4" id="detection_students">#}
{# <!--activity type line -->#} {# <!--activity type line -->#}
{# <div class="text-center p-2" id="activity_type" hidden>#} {# <div class="text-center p-2" id="activity_type" hidden>#}
{# <p>Activity Type: <span class="font-weight-bold" id="activity_type_text"></span>#} {# <p>Activity Type: <span class="font-weight-bold" id="activity_type_text"></span>#}
{# </p>#} {# </p>#}
{# </div>#} {# </div>#}
{##} {##}
{# <!--no content message-->#} {# <!--no content message-->#}
{# <div class="text-center p-2" id="no_detection_student_content">#} {# <div class="text-center p-2" id="no_detection_student_content">#}
{# <span class="font-italic">No activity type is selected</span>#} {# <span class="font-italic">No activity type is selected</span>#}
{# </div>#} {# </div>#}
{##} {##}
{# <!--the detection student loader -->#} {# <!--the detection student loader -->#}
{# <div class="text-center p-2" id="detection_student_loader" hidden>#} {# <div class="text-center p-2" id="detection_student_loader" hidden>#}
{# <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"#} {# <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"#}
{# alt="Loader">#} {# alt="Loader">#}
{# </div>#} {# </div>#}
{##} {##}
{# </div>#} {# </div>#}
{# </div>#} {# </div>#}
{# </div>#} {# </div>#}
</div> </div>
...@@ -1281,36 +769,36 @@ ...@@ -1281,36 +769,36 @@
<div class="row p-2"> <div class="row p-2">
<!--1st column --> <!--1st column -->
{# <div class="col-lg-6">#} {# <div class="col-lg-6">#}
{# <!--card -->#} {# <!--card -->#}
{# <div class="card shadow mb-4">#} {# <div class="card shadow mb-4">#}
{# <!--card header -->#} {# <!--card header -->#}
{# <div class="card-header">#} {# <div class="card-header">#}
{# <h5 class="m-0 font-weight-bold text-primary">Evaluated Students</h5>#} {# <h5 class="m-0 font-weight-bold text-primary">Evaluated Students</h5>#}
{# </div>#} {# </div>#}
{##} {##}
{# <!--card body -->#} {# <!--card body -->#}
{# <div class="card-body" id="evaluation_students">#} {# <div class="card-body" id="evaluation_students">#}
{##} {##}
{# <!--no content message-->#} {# <!--no content message-->#}
{# <div class="text-center p-2" id="no_evaluated_student_content">#} {# <div class="text-center p-2" id="no_evaluated_student_content">#}
{# <span class="font-italic">Press 'Evaluate' button to evaluate students</span>#} {# <span class="font-italic">Press 'Evaluate' button to evaluate students</span>#}
{# </div>#} {# </div>#}
{##} {##}
{# <!--the detection student loader -->#} {# <!--the detection student loader -->#}
{# <div class="text-center p-2" id="evaluate_student_loader" hidden>#} {# <div class="text-center p-2" id="evaluate_student_loader" hidden>#}
{# <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"#} {# <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"#}
{# alt="Loader">#} {# alt="Loader">#}
{# </div>#} {# </div>#}
{# <!--end of student detection loader -->#} {# <!--end of student detection loader -->#}
{##} {##}
{##} {##}
{# </div>#} {# </div>#}
{##} {##}
{# </div>#} {# </div>#}
{##} {##}
{##} {##}
{# </div>#} {# </div>#}
<!--end of 1st column --> <!--end of 1st column -->
...@@ -1331,7 +819,7 @@ ...@@ -1331,7 +819,7 @@
<!--button --> <!--button -->
<div class="text-right m-4"> <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 Process
</button> </button>
</div> </div>
...@@ -1530,7 +1018,7 @@ ...@@ -1530,7 +1018,7 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-danger" role="progressbar" <div class="progress-bar bg-danger" role="progressbar"
id="happy_instant_value" id="happy_instant_value"
{# style="width: 0%"#} {# style="width: 0%"#}
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
...@@ -1541,7 +1029,7 @@ ...@@ -1541,7 +1029,7 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar" <div class="progress-bar bg-warning" role="progressbar"
id="sad_instant_value" id="sad_instant_value"
{# style="width: 0%"#} {# style="width: 0%"#}
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
...@@ -1552,7 +1040,7 @@ ...@@ -1552,7 +1040,7 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar" role="progressbar" <div class="progress-bar" role="progressbar"
id="angry_instant_value" id="angry_instant_value"
{# style="width: 0%"#} {# style="width: 0%"#}
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
...@@ -1563,7 +1051,7 @@ ...@@ -1563,7 +1051,7 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar" <div class="progress-bar bg-info" role="progressbar"
id="neutral_instant_value" id="neutral_instant_value"
{# style="width: 80%"#} {# 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>
...@@ -1575,7 +1063,7 @@ ...@@ -1575,7 +1063,7 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar" <div class="progress-bar bg-info" role="progressbar"
id="surprise_instant_value" id="surprise_instant_value"
{# style="width: 80%"#} {# 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>
......
FirstApp/templates/FirstApp/gaze.html
View file @ 65f5c691
...@@ -169,13 +169,14 @@ ...@@ -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) 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((res) => res.json())
.then((out) => { .then((out) => {
let frames = createFrames(out); {#let frames = createFrames(out);#}
return frames {#return frames#}
displayGazeEstimation(out)
}) })
.then((obj) => { .then((obj) => {
$('#video_frames').prepend(obj); {#$('#video_frames').prepend(obj);#}
$('#frame_loader').attr('hidden', true); $('#frame_loader').attr('hidden', true);
$('#slidecontainer').attr('hidden', false); {#$('#slidecontainer').attr('hidden', false);#}
}) })
.catch((error) => alert('this is the error: ' + error)); .catch((error) => alert('this is the error: ' + error));
}); });
...@@ -231,47 +232,8 @@ ...@@ -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 //to handle the 'integrate' modal
$('#integrate_activity').click(function () { $('#integrate_gaze').click(function () {
//define the student video src //define the student video src
let video_src = "{% static '' %}FirstApp/videos/" + global_video_name; let video_src = "{% static '' %}FirstApp/videos/" + global_video_name;
...@@ -312,43 +274,42 @@ ...@@ -312,43 +274,42 @@
//append to the html string //append to the html string
//looking up and right //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 += "<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 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>"; htmlString += "</div>";
//looking up and left //looking up and left
htmlString += "<h4 class='small font-weight-bold'>Looking up and left</h4>"; 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 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>"; htmlString += "</div>";
//looking down and right //looking down and right
htmlString += "<h4 class='small font-weight-bold'>Looking down and right</h4>"; 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 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>"; htmlString += "</div>";
//looking down and left //looking down and left
htmlString += "<h4 class='small font-weight-bold'>Looking down and left</h4>"; 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 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>"; htmlString += "</div>";
//looking front //looking front
htmlString += "<h4 class='small font-weight-bold'>Looking front</h4>"; 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 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>"; htmlString += "</div>";
//ending the progress area //ending the progress area
htmlString += "</div>"; htmlString += "</div>";
...@@ -434,254 +395,6 @@ ...@@ -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> </script>
...@@ -854,22 +567,6 @@ ...@@ -854,22 +567,6 @@
alt="Loader"> alt="Loader">
</div> </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 --> <!--this area will display the progress bars -->
<div class="progress_area" hidden> <div class="progress_area" hidden>
...@@ -882,7 +579,8 @@ ...@@ -882,7 +579,8 @@
<div class="progress-bar bg-danger" role="progressbar" <div class="progress-bar bg-danger" role="progressbar"
id="looking_up_right_width" id="looking_up_right_width"
style="width: 20%" style="width: 20%"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
<!--looking up and left --> <!--looking up and left -->
...@@ -894,7 +592,8 @@ ...@@ -894,7 +592,8 @@
<div class="progress-bar bg-warning" role="progressbar" <div class="progress-bar bg-warning" role="progressbar"
id="looking_up_left_width" id="looking_up_left_width"
style="width: 40%" style="width: 40%"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
<!--looking down and right --> <!--looking down and right -->
...@@ -906,7 +605,8 @@ ...@@ -906,7 +605,8 @@
<div class="progress-bar" role="progressbar" <div class="progress-bar" role="progressbar"
id="looking_down_right_width" id="looking_down_right_width"
style="width: 60%" style="width: 60%"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
<!--Looking down and left--> <!--Looking down and left-->
...@@ -917,7 +617,8 @@ ...@@ -917,7 +617,8 @@
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar" <div class="progress-bar bg-info" role="progressbar"
id="looking_down_left_width" style="width: 80%" 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> </div>
<!--Looking front--> <!--Looking front-->
...@@ -926,9 +627,10 @@ ...@@ -926,9 +627,10 @@
</a> </a>
<span class="float-right" id="looking_front_perct">60%</span> <span class="float-right" id="looking_front_perct">60%</span>
<div class="progress mb-4"> <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%" 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>
</div> </div>
...@@ -936,6 +638,9 @@ ...@@ -936,6 +638,9 @@
</div> </div>
</div>
<!--graph tab --> <!--graph tab -->
<div class="tab-pane fade" id="graph" role="tabpanel" <div class="tab-pane fade" id="graph" role="tabpanel"
aria-labelledby="profile-tab"> aria-labelledby="profile-tab">
...@@ -1007,10 +712,11 @@ ...@@ -1007,10 +712,11 @@
<!--button --> <!--button -->
<div class="text-right m-4"> <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 Process
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -1164,7 +870,8 @@ ...@@ -1164,7 +870,8 @@
</a> </a>
<span class="float-right" id="looking_down_right_instant_perct">50%</span> <span class="float-right" id="looking_down_right_instant_perct">50%</span>
<div class="progress mb-4"> <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%" style="width: 60%"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
...@@ -1210,11 +917,11 @@ ...@@ -1210,11 +917,11 @@
</div> </div>
{# <video width="500" height="300" id="lecturer_video" controls>#} {# <video width="500" height="300" id="lecturer_video" controls>#}
{# <source src="#"#} {# <source src="#"#}
{# type="video/mp4">#} {# type="video/mp4">#}
{# Your browser does not support the video tag.#} {# Your browser does not support the video tag.#}
{# </video>#} {# </video>#}
</div> </div>
<!--end of lecture video section --> <!--end of lecture video section -->
......
FirstApp/urls.py
View file @ 65f5c691
...@@ -155,6 +155,7 @@ urlpatterns = [ ...@@ -155,6 +155,7 @@ urlpatterns = [
# lecture emotion detection for frames API (to retrieve detections for each frame in lecture video) # 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()), url(r'^get-lecture-emotion-for-frame/$', api.GetLectureEmotionRecognitionsForFrames.as_view()),
###### POSE Section ##### ###### POSE Section #####
# lecture video API (for Pose estimation) # lecture video API (for Pose estimation)
url(r'^get-lecture-video-for-pose/$', api.GetLectureVideoForPose.as_view()), url(r'^get-lecture-video-for-pose/$', api.GetLectureVideoForPose.as_view()),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment