Skip to content

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

Committing the removal of unnecessary components in activity, emotion and gaze frontend pages.

parent e0f4843e
Hide whitespace changes
Inline Side-by-side
Showing with 486 additions and 1817 deletions
FirstApp/api.py
View file @ 9ab5c758
...@@ -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 @ 9ab5c758
...@@ -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
...@@ -754,9 +247,9 @@ ...@@ -754,9 +247,9 @@
//fetch data from the API //fetch data from the API
fetch('http://127.0.0.1:8000/get-lecture-activity-for-frame?video_name=' + global_video_name) fetch('http://127.0.0.1:8000/get-lecture-activity-for-frame?video_name=' + global_video_name)
.then((res) => res.json()) .then((res) => res.json())
.then((out) => displayActivityRecognitionForFrame(out.response)) .then((out) => displayActivityRecognitionForFrame(out.response))
.catch((err) => alert('error: ' + err)); .catch((err) => alert('error: ' + err));
}); });
...@@ -772,37 +265,37 @@ ...@@ -772,37 +265,37 @@
//creating the html string, iteratively //creating the html string, iteratively
response.map((frame) => { response.map((frame) => {
let frame_name = frame.frame_name; let frame_name = frame.frame_name;
let phone_perct = Math.round(frame.phone_perct, 0); let phone_perct = Math.round(frame.phone_perct, 0);
let listen_perct = Math.round(frame.listen_perct, 0); let listen_perct = Math.round(frame.listen_perct, 0);
{#let listen_perct = Math.round(frame.listening_perct, 0);#} {#let listen_perct = Math.round(frame.listening_perct, 0);#}
let note_perct = Math.round(frame.note_perct, 0); let note_perct = Math.round(frame.note_perct, 0);
//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
htmlString += "</div>"; htmlString += "</div>";
}); });
...@@ -893,22 +386,20 @@ ...@@ -893,22 +386,20 @@
$('#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) => {
//show the loader and loading message //show the loader and loading message
$('#generate_report_loader').attr('hidden', true); $('#generate_report_loader').attr('hidden', true);
$('#generate_report_loading_message').attr('hidden', true); $('#generate_report_loading_message').attr('hidden', true);
$('#generateReportModal').modal('hide'); $('#generateReportModal').modal('hide');
}) })
.catch((err) => alert('error: ' + err)) .catch((err) => alert('error: ' + err))
}); });
}); });
</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,81 +575,68 @@ ...@@ -1084,81 +575,68 @@
alt="Loader"> alt="Loader">
</div> </div>
<!--frames -->. <!--this area will display the progress bars -->
<div class="text-center p-4" id="video_frames"> <div class="progress_area mt-4" hidden>
<!-- slide container --> <!--talking with friends -->
<div id="slidecontainer" hidden> <a href="#" class="btn btn-link labels" data-number="1"
<div class="row m-3"></div> data-label="talking-with-friends">
<!-- play/pause icon --> <h4 class="small font-weight-bold">Talking with friends</h4>
<div class="row"> </a>
<span><i class="fas fa-play" <span class="float-right" id="talking_perct">40%</span>
id="play_pause_icon_activity"></i></span> <div class="progress mb-4">
</div> <div class="progress-bar bg-danger" role="progressbar"
<input type="range" min="1" max="100" value="0" class="slider" id="talking_width"
id="myActivityRange"> style="width: 20%"
<p>No of frames: <span id="demo"></span></p> aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
</div>
</div>
<!--this area will display the progress bars --> <!--phone checking -->
<div class="progress_area" hidden> <a href="#" class="btn btn-link labels" data-number="0"
<!--talking with friends --> data-label="phone-checking">
<a href="#" class="btn btn-link labels" data-number="1" <h4 class="small font-weight-bold">Phone checking</h4>
data-label="talking-with-friends"> </a>
<h4 class="small font-weight-bold">Talking with friends</h4> <span class="float-right" id="phone_perct">45%</span>
</a> <div class="progress mb-4">
<span class="float-right" id="talking_perct">40%</span> <div class="progress-bar bg-warning" role="progressbar"
<div class="progress mb-4"> id="phone_width"
<div class="progress-bar bg-danger" role="progressbar" style="width: 40%"
id="talking_width" aria-valuenow="40" aria-valuemin="0"
style="width: 20%" aria-valuemax="100"></div>
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div>
</div>
<!--phone checking --> <!--note taking -->
<a href="#" class="btn btn-link labels" data-number="0" <a href="#" class="btn btn-link labels" data-number="2"
data-label="phone-checking"> data-label="note-taking">
<h4 class="small font-weight-bold">Phone checking</h4> <h4 class="small font-weight-bold">Writing</h4>
</a> </a>
<span class="float-right" id="phone_perct">45%</span> <span class="float-right" id="writing_perct">50%</span>
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar" <div class="progress-bar" role="progressbar" id="writing_width"
id="phone_width" style="width: 60%"
style="width: 40%" aria-valuenow="60" aria-valuemin="0"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> aria-valuemax="100"></div>
</div> </div>
<!--note taking --> <!--listening-->
<a href="#" class="btn btn-link labels" data-number="2" <a href="#" class="btn btn-link labels">
data-label="note-taking"> <h4 class="small font-weight-bold">Listening</h4>
<h4 class="small font-weight-bold">Writing</h4> </a>
</a> <span class="float-right" id="listening_perct">60%</span>
<span class="float-right" id="writing_perct">50%</span> <div class="progress mb-4">
<div class="progress mb-4"> <div class="progress-bar bg-info" role="progressbar"
<div class="progress-bar" role="progressbar" id="writing_width" id="listening_width" style="width: 80%"
style="width: 60%" aria-valuenow="80" aria-valuemin="0"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> aria-valuemax="100"></div>
</div> </div>
<!--listening-->
<a href="#" class="btn btn-link labels">
<h4 class="small font-weight-bold">Listening</h4>
</a>
<span class="float-right" id="listening_perct">60%</span>
<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>
</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 @ 9ab5c758
...@@ -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;
...@@ -749,10 +248,9 @@ ...@@ -749,10 +248,9 @@
//fetch data from the API //fetch data from the API
fetch('http://127.0.0.1:8000/get-lecture-emotion-for-frame?video_name=' + global_video_name) fetch('http://127.0.0.1:8000/get-lecture-emotion-for-frame?video_name=' + global_video_name)
.then((res) => res.json()) .then((res) => res.json())
.then((out) => displayEmotionRecognitionForFrame(out.response)) .then((out) => displayEmotionRecognitionForFrame(out.response))
.catch((err) => alert('error: ' + err)); .catch((err) => alert('error: ' + err));
}); });
...@@ -771,52 +269,52 @@ ...@@ -771,52 +269,52 @@
//creating the html string, iteratively //creating the html string, iteratively
response.map((frame) => { response.map((frame) => {
let frame_name = frame.frame_name; let frame_name = frame.frame_name;
let happy_perct = Math.round(frame.happy_perct, 0); let happy_perct = Math.round(frame.happy_perct, 0);
let sad_perct = Math.round(frame.sad_perct, 0); let sad_perct = Math.round(frame.sad_perct, 0);
let angry_perct = Math.round(frame.angry_perct, 0); let angry_perct = Math.round(frame.angry_perct, 0);
let neutral_perct = Math.round(frame.neutral_perct, 0); let neutral_perct = Math.round(frame.neutral_perct, 0);
let surprise_perct = Math.round(frame.surprise_perct, 0); let surprise_perct = Math.round(frame.surprise_perct, 0);
//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
htmlString += "</div>"; htmlString += "</div>";
}); });
...@@ -1064,100 +562,90 @@ ...@@ -1064,100 +562,90 @@
<!--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 -->. <!--this area will display the progress bars -->
<div class="text-center p-4" id="video_frames"> <div class="progress_area mt-4" hidden>
<!-- slide container --> <!--Happy -->
<div id="slidecontainer" hidden> <a href="#" class="btn btn-link labels" data-number="1"
<div class="row m-3"></div> data-label="Happy">
<!-- play/pause icon --> <h4 class="small font-weight-bold">Happy</h4>
<div class="row"> </a>
<span><i class="fas fa-play" <span class="float-right" id="happy_perct">40%</span>
id="play_pause_icon_activity"></i></span> <div class="progress mb-4">
</div> <div class="progress-bar bg-danger" role="progressbar"
<input type="range" min="1" max="100" value="0" class="slider" id="happy_width"
id="myActivityRange"> style="width: 20%"
<p>No of frames: <span id="demo"></span></p> aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
</div>
</div>
<!--this area will display the progress bars --> <!--sad -->
<div class="progress_area" hidden> <a href="#" class="btn btn-link labels" data-number="0"
<!--Happy --> data-label="sad">
<a href="#" class="btn btn-link labels" data-number="1" <h4 class="small font-weight-bold">Sad</h4>
data-label="Happy"> </a>
<h4 class="small font-weight-bold">Happy</h4> <span class="float-right" id="sad_perct">45%</span>
</a> <div class="progress mb-4">
<span class="float-right" id="happy_perct">40%</span> <div class="progress-bar bg-warning" role="progressbar"
<div class="progress mb-4"> id="sad_width"
<div class="progress-bar bg-danger" role="progressbar" style="width: 40%"
id="happy_width" aria-valuenow="40" aria-valuemin="0"
style="width: 20%" aria-valuemax="100"></div>
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div>
</div>
<!--sad --> <!--anger -->
<a href="#" class="btn btn-link labels" data-number="0" <a href="#" class="btn btn-link labels" data-number="2"
data-label="sad"> data-label="anger">
<h4 class="small font-weight-bold">Sad</h4> <h4 class="small font-weight-bold">Anger</h4>
</a> </a>
<span class="float-right" id="sad_perct">45%</span> <span class="float-right" id="anger_perct">50%</span>
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar" <div class="progress-bar" role="progressbar" id="anger_width"
id="sad_width" style="width: 60%"
style="width: 40%" aria-valuenow="60" aria-valuemin="0"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> aria-valuemax="100"></div>
</div> </div>
<!--anger --> <!--surprise-->
<a href="#" class="btn btn-link labels" data-number="2" <a href="#" class="btn btn-link labels" data-number="2"
data-label="anger"> data-label="surprise">
<h4 class="small font-weight-bold">Anger</h4> <h4 class="small font-weight-bold">Surprise</h4>
</a> </a>
<span class="float-right" id="anger_perct">50%</span> <span class="float-right" id="surprise_perct">60%</span>
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar" role="progressbar" id="anger_width" <div class="progress-bar bg-info" role="progressbar"
style="width: 60%" id="surprise_width" style="width: 80%"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="80" aria-valuemin="0"
</div> aria-valuemax="100"></div>
</div>
<!--neutral-->
<a href="#" class="btn btn-link labels" data-number="2"
data-label="neutral">
<h4 class="small font-weight-bold">Neutral</h4>
</a>
<span class="float-right" id="neutral_perct">60%</span>
<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>
</div>
<!--surprise-->
<a href="#" class="btn btn-link labels" data-number="2"
data-label="surprise">
<h4 class="small font-weight-bold">Surprise</h4>
</a>
<span class="float-right" id="surprise_perct">60%</span>
<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>
</div>
<!--neutral-->
<a href="#" class="btn btn-link labels" data-number="2"
data-label="neutral">
<h4 class="small font-weight-bold">Neutral</h4>
</a>
<span class="float-right" id="neutral_perct">60%</span>
<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>
</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,19 +1051,19 @@ ...@@ -1563,19 +1051,19 @@
<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>
<!-- Surprise--> <!-- Surprise-->
<h4 class="small font-weight-bold">Surprise</h4> <h4 class="small font-weight-bold">Surprise</h4>
<span class="float-right" id="surprise_instant">0%</span> <span class="float-right" id="surprise_instant">0%</span>
<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 @ 9ab5c758
...@@ -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;
...@@ -283,9 +245,9 @@ ...@@ -283,9 +245,9 @@
//fetch data from the API //fetch data from the API
fetch('http://127.0.0.1:8000/get-lecture-gaze-estimation-for-frame/?video_name=' + global_video_name) fetch('http://127.0.0.1:8000/get-lecture-gaze-estimation-for-frame/?video_name=' + global_video_name)
.then((res) => res.json()) .then((res) => res.json())
.then((out) => displayGazeEstimationForFrame(out.response)) .then((out) => displayGazeEstimationForFrame(out.response))
.catch((err) => alert('error: ' + err)); .catch((err) => alert('error: ' + err));
}); });
...@@ -303,54 +265,53 @@ ...@@ -303,54 +265,53 @@
//creating the html string, iteratively //creating the html string, iteratively
response.map((frame) => { response.map((frame) => {
let frame_name = frame.frame_name; let frame_name = frame.frame_name;
let look_up_right = Math.round(frame.upright_perct, 0); let look_up_right = Math.round(frame.upright_perct, 0);
let look_up_left = Math.round(frame.upleft_perct, 0); let look_up_left = Math.round(frame.upleft_perct, 0);
let look_down_right = Math.round(frame.downright_perct, 0); let look_down_right = Math.round(frame.downright_perct, 0);
let look_down_left = Math.round(frame.downleft_perct, 0); let look_down_left = Math.round(frame.downleft_perct, 0);
let look_front = Math.round(frame.front_perct, 0); let look_front = Math.round(frame.front_perct, 0);
//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>";
}); });
...@@ -393,7 +354,7 @@ ...@@ -393,7 +354,7 @@
//increment the count //increment the count
count++; count++;
//setting the values //setting the values
{#$('#looking_up_right_instant_perct').text(talking_number + '%');#} {#$('#looking_up_right_instant_perct').text(talking_number + '%');#}
{#$('#looking_up_left_instant_perct').text(phone_number + '%');#} {#$('#looking_up_left_instant_perct').text(phone_number + '%');#}
...@@ -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,85 +567,77 @@ ...@@ -854,85 +567,77 @@
alt="Loader"> alt="Loader">
</div> </div>
<!--frames -->.
<div class="text-center p-4" id="video_frames"> <!--this area will display the progress bars -->
<!-- slide container --> <div class="progress_area" hidden>
<div id="slidecontainer" hidden> <!--Looking up and right -->
<div class="row m-3"></div> <a href="#" class="btn btn-link labels" data-number="1">
<!-- play/pause icon --> <h4 class="small font-weight-bold">Looking up and right</h4>
<div class="row"> </a>
<span><i class="fas fa-play" <span class="float-right" id="looking_up_right_perct">40%</span>
id="play_pause_icon_activity"></i></span> <div class="progress mb-4">
</div> <div class="progress-bar bg-danger" role="progressbar"
<input type="range" min="1" max="100" value="0" class="slider" id="looking_up_right_width"
id="myActivityRange"> style="width: 20%"
<p>No of frames: <span id="demo"></span></p> aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100"></div>
</div> </div>
</div>
</div>
<!--this area will display the progress bars --> <!--looking up and left -->
<div class="progress_area" hidden> <a href="#" class="btn btn-link labels" data-number="0">
<!--Looking up and right --> <h4 class="small font-weight-bold">Looking up and left</h4>
<a href="#" class="btn btn-link labels" data-number="1"> </a>
<h4 class="small font-weight-bold">Looking up and right</h4> <span class="float-right" id="looking_up_left_perct">45%</span>
</a> <div class="progress mb-4">
<span class="float-right" id="looking_up_right_perct">40%</span> <div class="progress-bar bg-warning" role="progressbar"
<div class="progress mb-4"> id="looking_up_left_width"
<div class="progress-bar bg-danger" role="progressbar" style="width: 40%"
id="looking_up_right_width" aria-valuenow="40" aria-valuemin="0"
style="width: 20%" aria-valuemax="100"></div>
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> </div>
</div>
<!--looking up and left --> <!--looking down and right -->
<a href="#" class="btn btn-link labels" data-number="0"> <a href="#" class="btn btn-link labels" data-number="2">
<h4 class="small font-weight-bold">Looking up and left</h4> <h4 class="small font-weight-bold">Looking down and right</h4>
</a> </a>
<span class="float-right" id="looking_up_left_perct">45%</span> <span class="float-right" id="looking_down_right_perct">50%</span>
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar" <div class="progress-bar" role="progressbar"
id="looking_up_left_width" id="looking_down_right_width"
style="width: 40%" style="width: 60%"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> aria-valuenow="60" aria-valuemin="0"
</div> aria-valuemax="100"></div>
</div>
<!--looking down and right --> <!--Looking down and left-->
<a href="#" class="btn btn-link labels" data-number="2"> <a href="#" class="btn btn-link labels">
<h4 class="small font-weight-bold">Looking down and right</h4> <h4 class="small font-weight-bold">Looking down and left</h4>
</a> </a>
<span class="float-right" id="looking_down_right_perct">50%</span> <span class="float-right" id="looking_down_left_perct">60%</span>
<div class="progress mb-4"> <div class="progress mb-4">
<div class="progress-bar" role="progressbar" <div class="progress-bar bg-info" role="progressbar"
id="looking_down_right_width" id="looking_down_left_width" style="width: 80%"
style="width: 60%" aria-valuenow="80" aria-valuemin="0"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div> aria-valuemax="100"></div>
</div> </div>
<!--Looking down and left--> <!--Looking front-->
<a href="#" class="btn btn-link labels"> <a href="#" class="btn btn-link labels">
<h4 class="small font-weight-bold">Looking down and left</h4> <h4 class="small font-weight-bold">Looking Front</h4>
</a> </a>
<span class="float-right" id="looking_down_left_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_down_left_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"
</div> aria-valuemax="100"></div>
</div>
<!--Looking front-->
<a href="#" class="btn btn-link labels">
<h4 class="small font-weight-bold">Looking Front</h4>
</a>
<span class="float-right" id="looking_front_perct">60%</span>
<div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar"
id="looking_front_width" style="width: 80%"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
<!-- end of progress area -->
</div> </div>
<!-- end of progress area -->
</div> </div>
...@@ -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 @ 9ab5c758
...@@ -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