Skip to content

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

Merge branch 'monitoring_student_behavior_IT17138000' into 'QA_RELEASE' 

Monitoring student behavior it17138000

See merge request !16
parents 80462c9f 32a6e9d0
Show whitespace changes
Inline Side-by-side
Showing with 639 additions and 84 deletions
FirstApp/templates/FirstApp/Home.html
View file @ 6a494dd8
...@@ -965,6 +965,24 @@ ...@@ -965,6 +965,24 @@
} }
//this function will handle the advanced analysis for activity
$('#activity_advanced_btn').click(function () {
$('#activity_advanced_modal').modal();
});
//this function will handle the advanced analysis for emotion
$('#emotion_advanced_btn').click(function () {
$('#emotion_advanced_modal').modal();
});
//this function will handle the advanced analysis for gaze
$('#gaze_advanced_btn').click(function () {
$('#gaze_advanced_modal').modal();
});
}); });
</script> </script>
...@@ -1404,6 +1422,14 @@ ...@@ -1404,6 +1422,14 @@
Summary Summary
</button> </button>
<!-- end of button to view activity summary --> <!-- end of button to view activity summary -->
<!-- button to view advanced analysis -->
<button type="button" class="btn btn-danger float-right mr-2" id="activity_advanced_btn">
Advanced Analysis
</button>
<!-- end of button to view advanced analysis -->
</li> </li>
<!-- end of the activity list item --> <!-- end of the activity list item -->
...@@ -1473,6 +1499,15 @@ ...@@ -1473,6 +1499,15 @@
Summary Summary
</button> </button>
<!-- end of button to view emotion summary --> <!-- end of button to view emotion summary -->
<!-- button to view advanced analysis -->
<button type="button" class="btn btn-danger float-right mr-2" id="emotion_advanced_btn">
Advanced Analysis
</button>
<!-- end of button to view advanced analysis -->
</li> </li>
<!-- end of the emotion list item --> <!-- end of the emotion list item -->
...@@ -1550,6 +1585,13 @@ ...@@ -1550,6 +1585,13 @@
<!-- end of button to view gaze summary --> <!-- end of button to view gaze summary -->
<!-- button to view advanced analysis -->
<button type="button" class="btn btn-danger float-right mr-2" id="gaze_advanced_btn">
Advanced Analysis
</button>
<!-- end of button to view advanced analysis -->
</li> </li>
<!-- end of the gaze list item --> <!-- end of the gaze list item -->
...@@ -1977,6 +2019,73 @@ ...@@ -1977,6 +2019,73 @@
<!-- end of activity statistics modal --> <!-- end of activity statistics modal -->
<!-- activity advanced analysis modal -->
<div class="modal fade" id="activity_advanced_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 1400px">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Activity Advanced Analysis</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<p>Hello</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- end of activity advanced analysis modal -->
<!-- emotion advanced analysis modal -->
<div class="modal fade" id="emotion_advanced_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 1400px">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Emotion Advanced Analysis</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<p>Hello</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- end of emotion advanced analysis modal -->
<!-- gaze advanced analysis modal -->
<div class="modal fade" id="gaze_advanced_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 1400px">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Gaze Advanced Analysis</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<p>Hello</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- end of gaze advanced analysis modal -->
{% endblock %} {% endblock %}
<!--scripts--> <!--scripts-->
{% block 'scripts' %} {% block 'scripts' %}
......
FirstApp/templates/FirstApp/activity.html
View file @ 6a494dd8
...@@ -30,7 +30,11 @@ ...@@ -30,7 +30,11 @@
var global_video_name = ''; var global_video_name = '';
var global_lecturer_subject_index = 0; var global_lecturer_subject_index = 0;
var global_lecture_date = ''; var global_lecture_date = '';
var global_lecturer_video_name = '';
var lecturer_fps = 0;
;
//jquery //jquery
$(document).ready(function () { $(document).ready(function () {
...@@ -239,9 +243,20 @@ ...@@ -239,9 +243,20 @@
//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;
{#global_lecturer_video_name = "Test_1.mp4";#}
{#global_lecturer_video_name = "Test_2.mp4";#}
global_lecturer_video_name = "Test_3.mp4";
//define the lecturer video src
let lecturer_video_src = "{% static '' %}FirstApp/lecturer_videos/" + global_lecturer_video_name;
//assign the video src //assign the video src
$('#student_video').attr('src', video_src); $('#student_video').attr('src', video_src);
//assign the video src
$('#lecturer_video').attr('src', lecturer_video_src);
$('#integrate_modal').modal(); $('#integrate_modal').modal();
...@@ -302,25 +317,91 @@ ...@@ -302,25 +317,91 @@
//append the html //append the html
$('#student_video_column').append(htmlString); $('#student_video_column').append(htmlString);
//start retrieving lecturer activity frame recognition
fetch('http://127.0.0.1:8000/lecturer/get-lecturer-video-frame-recognitions/?video_name=' + global_lecturer_video_name)
.then((res) => res.json())
.then((out) => displayLecturerActivityRecognitionForFrame(out))
.catch((err) => alert('error: ' + err))
}
//this function will load the activity recognition for frames
function displayLecturerActivityRecognitionForFrame(response) {
//hide the loader
$('#lecturer_video_progress_loader').attr('hidden', true);
//show the progress bars
$('#lecturer_video_progress').attr('hidden', false);
//creating the html string
let htmlString = "";
let duration = 1000 / response.fps;
lecturer_fps = Math.round(duration, 0);
console.log('lecturer fps: ', lecturer_fps);
//creating the html string, iteratively
response.frame_recognitions.map((frame) => {
let frame_name = frame.frame_name;
let sitting_perct = Math.round(frame.sitting_perct, 0);
let standing_perct = Math.round(frame.standing_perct, 0);
{#let listen_perct = Math.round(frame.listening_perct, 0);#}
let walking_perct = Math.round(frame.walking_perct, 0);
//append to the html string
//sitting
htmlString += "<div class='progress_area' id='progress_lecturer_" + frame_name + "' hidden>";
htmlString += "<h4 class='small font-weight-bold'>Sitting</h4>";
htmlString += "<span class='float-right' id='sitting_instant_" + frame_name + "'>" + sitting_perct + "%</span>";
htmlString += "<div class='progress mb-4'>";
htmlString += "<div class='progress-bar bg-warning' role='progressbar' id='sitting_instant_value_" + frame_name + "' style='width: " + sitting_perct + "%' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100'></div>";
htmlString += "</div>";
//standing
htmlString += "<h4 class='small font-weight-bold'>Standing</h4>";
htmlString += "<span class='float-right' id='standing_instant_" + frame_name + "'>" + standing_perct + "%</span>";
htmlString += "<div class='progress mb-4'>";
htmlString += "<div class='progress-bar' role='progressbar' id='standing_instant_value_" + frame_name + "' style='width: " + standing_perct + "%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>";
htmlString += "</div>";
//walking
htmlString += "<h4 class='small font-weight-bold'>Walking</h4>";
htmlString += "<span class='float-right' id='walking_instant_" + frame_name + "'>" + walking_perct + "%</span>";
htmlString += "<div class='progress mb-4'>";
htmlString += "<div class='progress-bar bg-info' role='progressbar' id='walking_instant_value_" + frame_name + "' style='width: " + walking_perct + "%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>";
htmlString += "</div>";
//ending the progress area
htmlString += "</div>";
});
//append the html
$('#lecturer_video_column').append(htmlString);
} }
//to handle the 'integrate' play button //to handle the 'integrate' play button
$('#play_integrate_button').click(function () { $('#play_integrate_button').click(function () {
let video = $('video')[0]; let video = $('video')[0];
let video1 = $('video')[1];
let test_video = document.getElementsByTagName('video')[0]; let test_video = document.getElementsByTagName('video')[0];
let play_class = 'btn btn-outline-danger play'; let play_class = 'btn btn-outline-danger play';
let pause_class = 'btn btn-outline-danger pause'; let pause_class = 'btn btn-outline-danger pause';
let count = 0; let count = 0;
let count_lecturer = 0;
let classes = $(this).attr('class'); let classes = $(this).attr('class');
let video_interval = setInterval(() => { let video_interval = setInterval(() => {
let talking_number = Math.round(Math.random() * 100, 0);
let phone_number = Math.round(Math.random() * 100, 0); //=====STUDENTS COLUMN=====
let note_number = Math.round(Math.random() * 100, 0);
let listening_number = Math.round(Math.random() * 100, 0);
//get the relevant progress area //get the relevant progress area
let progress_area = "progress_frame-" + count; let progress_area = "progress_frame-" + count;
...@@ -335,35 +416,53 @@ ...@@ -335,35 +416,53 @@
//replace the current progress area with the selected one //replace the current progress area with the selected one
$('#student_video_progress').html(progress_area_html); $('#student_video_progress').html(progress_area_html);
//increment the count //increment the count
count++; count++;
//setting the values console.log('current frame (student): ', count);
/*
$('#talking_instant').text(talking_number + '%');
$('#phone_checking_instant').text(phone_number + '%');
$('#note_taking_instant').text(note_number + '%');
$('#listening_instant').text(listening_number + '%');
//setting the width
$('#talking_instant_value').width(talking_number + '%');
$('#phone_checking_instant_value').width(phone_number + '%');
$('#note_taking_instant_value').width(note_number + '%');
$('#listening_instant_value').width(listening_number + '%');
*/
}, 33); }, 33);
let video_interval_lecturer = setInterval(() => {
//=====LECTURER COLUMN=====
//get the relevant progress area
let progress_area_lecturer = "progress_lecturer_frame-" + count_lecturer;
let progress_area_id_lecturer = "#" + progress_area_lecturer;
//find the corresponding progress area
let progress_area_html_lecturer = document.getElementById(progress_area_lecturer);
//display the retrieved progress area
$(progress_area_id_lecturer).attr('hidden', false);
//replace the current progress area with the selected one
$('#lecturer_video_progress').html(progress_area_html_lecturer);
//increment the count
count_lecturer++;
console.log('current frame (lecturer): ', count_lecturer);
}, lecturer_fps);
//check for the current class //check for the current class
if (classes === play_class) { if (classes === play_class) {
$(this).text('Pause'); $(this).text('Pause');
$(this).attr('class', pause_class); $(this).attr('class', pause_class);
video.play(); video.play();
video1.play();
} else if (classes === pause_class) { } else if (classes === pause_class) {
$(this).text('Play'); $(this).text('Play');
$(this).attr('class', play_class); $(this).attr('class', play_class);
video.pause(); video.pause();
video1.pause();
} }
//function to do when the video is paused //function to do when the video is paused
...@@ -373,7 +472,13 @@ ...@@ -373,7 +472,13 @@
video.onended = function (e) { video.onended = function (e) {
//stop changing the activity values //stop changing the activity values
clearInterval(video_interval); clearInterval(video_interval);
} };
//function to do when the lecturer video is ended
video1.onended = function (e) {
//stop changing the activity values
clearInterval(video_interval_lecturer);
};
}); });
...@@ -633,7 +738,6 @@ ...@@ -633,7 +738,6 @@
</div> </div>
</div> </div>
...@@ -1020,24 +1124,74 @@ ...@@ -1020,24 +1124,74 @@
<!--end of 1st column --> <!--end of 1st column -->
<!--2nd column --> <!--2nd column -->
<div class="col-md-6"> <div class="col-md-6" id="lecturer_video_column">
<div class="text-center"> <div class="text-center">
<span class="h3 font-italic font-weight-bold">Lecturer Performance</span> <span class="h3 font-italic font-weight-bold">Lecturer Performance</span>
</div> </div>
<!--display lecture video --> <!--display lecture video -->
<div class="text-center m-3" id="lecturer_video_section"> <div class="text-center m-3" id="lecturer_video_section">
<!--temporary text --> {# <!--temporary text -->#}
<div class="text-center" id="temp_lecturer_text"> {# <div class="text-center" id="temp_lecturer_text">#}
<span class="font-italic">No video was found</span> {# <span class="font-italic">No video was found</span>#}
{# </div>#}
<!--display lecturer video -->
<div class="text-center m-3" id="lecturer_video_section">
<video width="500" height="300" id="lecturer_video" controls>
<source src="#"
type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!--end of lecturer video section -->
<!-- ajax loader section -->
<div class="text-center mt-3" id="lecturer_video_progress_loader">
<img src="{% static 'FirstApp/images/ajax-loader-1.gif' %}" alt="loader">
</div> </div>
<!-- video -->
{# <video width="500" height="300" id="lecturer_video" controls>#} <!--progress bar section -->
{# <source src="#"#} <div class="progress_area" id="lecturer_video_progress" hidden>
{# type="video/mp4">#} <!--sitting -->
{# Your browser does not support the video tag.#}
{# </video>#} <h4 class="small font-weight-bold">Sitting</h4>
<span class="float-right" id="sitting_instant">0%</span>
<div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar"
id="sitting_instant_value"
{# style="width: 0%"#}
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!--standing -->
<h4 class="small font-weight-bold">Standing</h4>
<span class="float-right" id="standing_instant">0%</span>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar"
id="standing_instant_value"
{# style="width: 0%"#}
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!--walking-->
<h4 class="small font-weight-bold">Walking</h4>
<span class="float-right" id="walking_instant">0%</span>
<div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar"
id="walking_instant_value"
{# style="width: 80%"#}
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<!--end of progress bar section -->
</div> </div>
<!--end of lecture video section --> <!--end of lecture video section -->
......
FirstApp/templates/FirstApp/emotion.html
View file @ 6a494dd8
...@@ -29,6 +29,8 @@ ...@@ -29,6 +29,8 @@
var global_lecture_video_id = ''; var global_lecture_video_id = '';
var global_video_name = ''; var global_video_name = '';
var global_lecturer_subject_index = 0; var global_lecturer_subject_index = 0;
var global_lecturer_video_name = '';
var lecturer_fps = 0;
//jquery //jquery
$(document).ready(function () { $(document).ready(function () {
...@@ -239,9 +241,20 @@ ...@@ -239,9 +241,20 @@
//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;
{#global_lecturer_video_name = "Test_1.mp4";#}
{#global_lecturer_video_name = "Test_2.mp4";#}
global_lecturer_video_name = "Test_3.mp4";
//define the lecturer video src
let lecturer_video_src = "{% static '' %}FirstApp/lecturer_videos/" + global_lecturer_video_name;
//assign the video src //assign the video src
$('#student_video').attr('src', video_src); $('#student_video').attr('src', video_src);
//assign the video src
$('#lecturer_video').attr('src', lecturer_video_src);
$('#integrate_modal').modal(); $('#integrate_modal').modal();
...@@ -320,25 +333,92 @@ ...@@ -320,25 +333,92 @@
//append the html //append the html
$('#student_video_column').append(htmlString); $('#student_video_column').append(htmlString);
//start retrieving lecturer activity frame recognition
fetch('http://127.0.0.1:8000/lecturer/get-lecturer-video-frame-recognitions/?video_name=' + global_lecturer_video_name)
.then((res) => res.json())
.then((out) => displayLecturerEmotionRecognitionForFrame(out))
.catch((err) => alert('error: ' + err))
}
//this function will load the activity recognition for frames
function displayLecturerEmotionRecognitionForFrame(response) {
//hide the loader
$('#lecturer_video_progress_loader').attr('hidden', true);
//show the progress bars
$('#lecturer_video_progress').attr('hidden', false);
//creating the html string
let htmlString = "";
let duration = 1000 / response.fps;
lecturer_fps = Math.round(duration, 0);
console.log('lecturer fps: ', lecturer_fps);
//creating the html string, iteratively
response.frame_recognitions.map((frame) => {
let frame_name = frame.frame_name;
let sitting_perct = Math.round(frame.sitting_perct, 0);
let standing_perct = Math.round(frame.standing_perct, 0);
{#let listen_perct = Math.round(frame.listening_perct, 0);#}
let walking_perct = Math.round(frame.walking_perct, 0);
//append to the html string
//sitting
htmlString += "<div class='progress_area' id='progress_lecturer_" + frame_name + "' hidden>";
htmlString += "<h4 class='small font-weight-bold'>Sitting</h4>";
htmlString += "<span class='float-right' id='sitting_instant_" + frame_name + "'>" + sitting_perct + "%</span>";
htmlString += "<div class='progress mb-4'>";
htmlString += "<div class='progress-bar bg-warning' role='progressbar' id='sitting_instant_value_" + frame_name + "' style='width: " + sitting_perct + "%' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100'></div>";
htmlString += "</div>";
//standing
htmlString += "<h4 class='small font-weight-bold'>Standing</h4>";
htmlString += "<span class='float-right' id='standing_instant_" + frame_name + "'>" + standing_perct + "%</span>";
htmlString += "<div class='progress mb-4'>";
htmlString += "<div class='progress-bar' role='progressbar' id='standing_instant_value_" + frame_name + "' style='width: " + standing_perct + "%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>";
htmlString += "</div>";
//walking
htmlString += "<h4 class='small font-weight-bold'>Walking</h4>";
htmlString += "<span class='float-right' id='walking_instant_" + frame_name + "'>" + walking_perct + "%</span>";
htmlString += "<div class='progress mb-4'>";
htmlString += "<div class='progress-bar bg-info' role='progressbar' id='walking_instant_value_" + frame_name + "' style='width: " + walking_perct + "%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>";
htmlString += "</div>";
//ending the progress area
htmlString += "</div>";
});
//append the html
$('#lecturer_video_column').append(htmlString);
} }
//to handle the 'integrate' play button //to handle the 'integrate' play button
$('#play_integrate_button').click(function () { $('#play_integrate_button').click(function () {
let video = $('video')[0]; let video = $('video')[0];
let video1 = $('video')[1];
let test_video = document.getElementsByTagName('video')[0]; let test_video = document.getElementsByTagName('video')[0];
let play_class = 'btn btn-outline-danger play'; let play_class = 'btn btn-outline-danger play';
let pause_class = 'btn btn-outline-danger pause'; let pause_class = 'btn btn-outline-danger pause';
let count = 0; let count = 0;
let count_lecturer = 0;
let classes = $(this).attr('class'); let classes = $(this).attr('class');
let video_interval = setInterval(() => { let video_interval = setInterval(() => {
let talking_number = Math.round(Math.random() * 100, 0);
let phone_number = Math.round(Math.random() * 100, 0); //=====STUDENTS COLUMN=====
let note_number = Math.round(Math.random() * 100, 0);
let listening_number = Math.round(Math.random() * 100, 0);
//get the relevant progress area //get the relevant progress area
let progress_area = "progress_frame-" + count; let progress_area = "progress_frame-" + count;
...@@ -356,32 +436,49 @@ ...@@ -356,32 +436,49 @@
//increment the count //increment the count
count++; count++;
//setting the values
/*
$('#talking_instant').text(talking_number + '%');
$('#phone_checking_instant').text(phone_number + '%');
$('#note_taking_instant').text(note_number + '%');
$('#listening_instant').text(listening_number + '%');
//setting the width }, 33);
$('#talking_instant_value').width(talking_number + '%');
$('#phone_checking_instant_value').width(phone_number + '%');
$('#note_taking_instant_value').width(note_number + '%'); let video_interval_lecturer = setInterval(() => {
$('#listening_instant_value').width(listening_number + '%');
//=====LECTURER COLUMN=====
//get the relevant progress area
let progress_area_lecturer = "progress_lecturer_frame-" + count_lecturer;
let progress_area_id_lecturer = "#" + progress_area_lecturer;
//find the corresponding progress area
let progress_area_html_lecturer = document.getElementById(progress_area_lecturer);
//display the retrieved progress area
$(progress_area_id_lecturer).attr('hidden', false);
//replace the current progress area with the selected one
$('#lecturer_video_progress').html(progress_area_html_lecturer);
//increment the count
count_lecturer++;
console.log('current frame (lecturer): ', count_lecturer);
}, lecturer_fps);
*/
}, 1000);
//check for the current class //check for the current class
if (classes === play_class) { if (classes === play_class) {
$(this).text('Pause'); $(this).text('Pause');
$(this).attr('class', pause_class); $(this).attr('class', pause_class);
video.play(); video.play();
video1.play();
} else if (classes === pause_class) { } else if (classes === pause_class) {
$(this).text('Play'); $(this).text('Play');
$(this).attr('class', play_class); $(this).attr('class', play_class);
video.pause(); video.pause();
video1.pause();
} }
//function to do when the video is paused //function to do when the video is paused
...@@ -391,6 +488,12 @@ ...@@ -391,6 +488,12 @@
video.onended = function (e) { video.onended = function (e) {
//stop changing the activity values //stop changing the activity values
clearInterval(video_interval); clearInterval(video_interval);
};
//function to do when the video is ended
video1.onended = function (e) {
//stop changing the activity values
clearInterval(video_interval_lecturer);
} }
}); });
...@@ -642,7 +745,6 @@ ...@@ -642,7 +745,6 @@
</div> </div>
</div> </div>
...@@ -1072,25 +1174,71 @@ ...@@ -1072,25 +1174,71 @@
</div> </div>
<!--end of 1st column --> <!--end of 1st column -->
<!--2nd column -->
<div class="col-md-6"> <!-- 2nd column -->
<div class="col-md-6" id="lecturer_video_column">
<div class="text-center"> <div class="text-center">
<span class="h3 font-italic font-weight-bold">Lecturer Performance</span> <span class="h3 font-italic font-weight-bold">Lecturer Performance</span>
</div> </div>
<!--display lecture video --> <!--display lecture video -->
<div class="text-center m-3" id="lecturer_video_section"> <div class="text-center m-3" id="lecturer_video_section">
<!--temporary text -->
<div class="text-center" id="temp_lecturer_text">
<span class="font-italic">No video was found</span>
</div>
<!--display lecturer video -->
<div class="text-center m-3" id="lecturer_video_section">
<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>
<!--end of lecturer video section -->
<!-- ajax loader section -->
<div class="text-center mt-3" id="lecturer_video_progress_loader">
<img src="{% static 'FirstApp/images/ajax-loader-1.gif' %}" alt="loader">
</div>
<!--progress bar section -->
<div class="progress_area" id="lecturer_video_progress" hidden>
<!--sitting -->
<h4 class="small font-weight-bold">Sitting</h4>
<span class="float-right" id="sitting_instant">0%</span>
<div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar"
id="sitting_instant_value"
{# style="width: 0%"#}
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!--standing -->
<h4 class="small font-weight-bold">Standing</h4>
<span class="float-right" id="standing_instant">0%</span>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar"
id="standing_instant_value"
{# style="width: 0%"#}
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!--walking-->
<h4 class="small font-weight-bold">Walking</h4>
<span class="float-right" id="walking_instant">0%</span>
<div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar"
id="walking_instant_value"
{# style="width: 80%"#}
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<!--end of progress bar section -->
</div> </div>
<!--end of lecture video section --> <!--end of lecture video section -->
......
FirstApp/templates/FirstApp/gaze.html
View file @ 6a494dd8
...@@ -29,6 +29,8 @@ ...@@ -29,6 +29,8 @@
var global_lecture_video_id = ''; var global_lecture_video_id = '';
var global_video_name = ''; var global_video_name = '';
var global_lecturer_subject_index = 0; var global_lecturer_subject_index = 0;
var global_lecturer_video_name = '';
var lecturer_fps = 0;
//jquery //jquery
$(document).ready(function () { $(document).ready(function () {
...@@ -237,11 +239,21 @@ ...@@ -237,11 +239,21 @@
//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;
{#global_lecturer_video_name = "Test_1.mp4";#}
{#global_lecturer_video_name = "Test_2.mp4";#}
global_lecturer_video_name = "Test_3.mp4";
//define the lecturer video src
let lecturer_video_src = "{% static '' %}FirstApp/lecturer_videos/" + global_lecturer_video_name;
//assign the video src //assign the video src
$('#student_video').attr('src', video_src); $('#student_video').attr('src', video_src);
$('#integrate_modal').modal(); //assign the video src
$('#lecturer_video').attr('src', lecturer_video_src);
$('#integrate_modal').modal();
//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)
...@@ -318,25 +330,89 @@ ...@@ -318,25 +330,89 @@
//append the html //append the html
$('#student_video_column').append(htmlString); $('#student_video_column').append(htmlString);
//start retrieving lecturer activity frame recognition
fetch('http://127.0.0.1:8000/lecturer/get-lecturer-video-frame-recognitions/?video_name=' + global_lecturer_video_name)
.then((res) => res.json())
.then((out) => displayLecturerEmotionRecognitionForFrame(out))
.catch((err) => alert('error: ' + err))
}
//this function will load the activity recognition for frames
function displayLecturerEmotionRecognitionForFrame(response) {
//hide the loader
$('#lecturer_video_progress_loader').attr('hidden', true);
//show the progress bars
$('#lecturer_video_progress').attr('hidden', false);
//creating the html string
let htmlString = "";
let duration = 1000 / response.fps;
lecturer_fps = Math.round(duration, 0);
console.log('lecturer fps: ', lecturer_fps);
//creating the html string, iteratively
response.frame_recognitions.map((frame) => {
let frame_name = frame.frame_name;
let sitting_perct = Math.round(frame.sitting_perct, 0);
let standing_perct = Math.round(frame.standing_perct, 0);
{#let listen_perct = Math.round(frame.listening_perct, 0);#}
let walking_perct = Math.round(frame.walking_perct, 0);
//append to the html string
//sitting
htmlString += "<div class='progress_area' id='progress_lecturer_" + frame_name + "' hidden>";
htmlString += "<h4 class='small font-weight-bold'>Sitting</h4>";
htmlString += "<span class='float-right' id='sitting_instant_" + frame_name + "'>" + sitting_perct + "%</span>";
htmlString += "<div class='progress mb-4'>";
htmlString += "<div class='progress-bar bg-warning' role='progressbar' id='sitting_instant_value_" + frame_name + "' style='width: " + sitting_perct + "%' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100'></div>";
htmlString += "</div>";
//standing
htmlString += "<h4 class='small font-weight-bold'>Standing</h4>";
htmlString += "<span class='float-right' id='standing_instant_" + frame_name + "'>" + standing_perct + "%</span>";
htmlString += "<div class='progress mb-4'>";
htmlString += "<div class='progress-bar' role='progressbar' id='standing_instant_value_" + frame_name + "' style='width: " + standing_perct + "%' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100'></div>";
htmlString += "</div>";
//walking
htmlString += "<h4 class='small font-weight-bold'>Walking</h4>";
htmlString += "<span class='float-right' id='walking_instant_" + frame_name + "'>" + walking_perct + "%</span>";
htmlString += "<div class='progress mb-4'>";
htmlString += "<div class='progress-bar bg-info' role='progressbar' id='walking_instant_value_" + frame_name + "' style='width: " + walking_perct + "%' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100'></div>";
htmlString += "</div>";
//ending the progress area
htmlString += "</div>";
});
//append the html
$('#lecturer_video_column').append(htmlString);
} }
//to handle the 'integrate' play button //to handle the 'integrate' play button
$('#play_integrate_button').click(function () { $('#play_integrate_button').click(function () {
let video = $('video')[0]; let video = $('video')[0];
let video1 = $('video')[1];
let test_video = document.getElementsByTagName('video')[0]; let test_video = document.getElementsByTagName('video')[0];
let play_class = 'btn btn-outline-danger play'; let play_class = 'btn btn-outline-danger play';
let pause_class = 'btn btn-outline-danger pause'; let pause_class = 'btn btn-outline-danger pause';
let count = 0; let count = 0;
let count_lecturer = 0;
let classes = $(this).attr('class'); let classes = $(this).attr('class');
let video_interval = setInterval(() => { let video_interval = setInterval(() => {
{#let talking_number = Math.round(Math.random() * 100, 0);#}
{#let phone_number = Math.round(Math.random() * 100, 0);#} //=====STUDENTS COLUMN=====
{#let note_number = Math.round(Math.random() * 100, 0);#}
{#let listening_number = Math.round(Math.random() * 100, 0);#}
//get the relevant progress area //get the relevant progress area
let progress_area = "progress_frame-" + count; let progress_area = "progress_frame-" + count;
...@@ -354,33 +430,49 @@ ...@@ -354,33 +430,49 @@
//increment the count //increment the count
count++; count++;
//setting the values
{#$('#looking_up_right_instant_perct').text(talking_number + '%');#} }, 33);
{#$('#looking_up_left_instant_perct').text(phone_number + '%');#}
{#$('#looking_down_right_instant_perct').text(note_number + '%');#}
{#$('#looking_down_left_instant_perct').text(listening_number + '%');#}
{#$('#looking_front_instant_perct').text(listening_number + '%');#}
{##}
{#//setting the width#}
{#$('#talking_instant_value').width(talking_number + '%');#}
{#$('#phone_checking_instant_value').width(phone_number + '%');#}
{#$('#note_taking_instant_value').width(note_number + '%');#}
{#$('#listening_instant_value').width(listening_number + '%');#}
}, 33); let video_interval_lecturer = setInterval(() => {
//=====LECTURER COLUMN=====
//get the relevant progress area
let progress_area_lecturer = "progress_lecturer_frame-" + count_lecturer;
let progress_area_id_lecturer = "#" + progress_area_lecturer;
//find the corresponding progress area
let progress_area_html_lecturer = document.getElementById(progress_area_lecturer);
//display the retrieved progress area
$(progress_area_id_lecturer).attr('hidden', false);
//replace the current progress area with the selected one
$('#lecturer_video_progress').html(progress_area_html_lecturer);
//increment the count
count_lecturer++;
console.log('current frame (lecturer): ', count_lecturer);
}, lecturer_fps);
//check for the current class //check for the current class
if (classes === play_class) { if (classes === play_class) {
$(this).text('Pause'); $(this).text('Pause');
$(this).attr('class', pause_class); $(this).attr('class', pause_class);
video.play(); video.play();
video1.play();
} else if (classes === pause_class) { } else if (classes === pause_class) {
$(this).text('Play'); $(this).text('Play');
$(this).attr('class', play_class); $(this).attr('class', play_class);
video.pause(); video.pause();
video1.pause();
} }
//function to do when the video is paused //function to do when the video is paused
...@@ -390,6 +482,12 @@ ...@@ -390,6 +482,12 @@
video.onended = function (e) { video.onended = function (e) {
//stop changing the activity values //stop changing the activity values
clearInterval(video_interval); clearInterval(video_interval);
};
//function to do when the video is ended
video1.onended = function (e) {
//stop changing the activity values
clearInterval(video_interval_lecturer);
} }
}); });
...@@ -903,30 +1001,76 @@ ...@@ -903,30 +1001,76 @@
</div> </div>
<!--end of 1st column --> <!--end of 1st column -->
<!--2nd column --> <!-- 2nd column -->
<div class="col-md-6"> <div class="col-md-6" id="lecturer_video_column">
<div class="text-center"> <div class="text-center">
<span class="h3 font-italic font-weight-bold">Lecturer Performance</span> <span class="h3 font-italic font-weight-bold">Lecturer Performance</span>
</div> </div>
<!--display lecture video --> <!--display lecture video -->
<div class="text-center m-3" id="lecturer_video_section"> <div class="text-center m-3" id="lecturer_video_section">
<!--temporary text -->
<div class="text-center" id="temp_lecturer_text"> <!--display lecturer video -->
<span class="font-italic">No video was found</span> <div class="text-center m-3" id="lecturer_video_section">
<video width="500" height="300" id="lecturer_video" controls>
<source src="#"
type="video/mp4">
Your browser does not support the video tag.
</video>
</div> </div>
<!--end of lecturer video section -->
<!-- ajax loader section -->
<div class="text-center mt-3" id="lecturer_video_progress_loader">
<img src="{% static 'FirstApp/images/ajax-loader-1.gif' %}" alt="loader">
</div>
<!--progress bar section -->
<div class="progress_area" id="lecturer_video_progress" hidden>
<!--sitting -->
<h4 class="small font-weight-bold">Sitting</h4>
<span class="float-right" id="sitting_instant">0%</span>
<div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar"
id="sitting_instant_value"
{# style="width: 0%"#}
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!--standing -->
<h4 class="small font-weight-bold">Standing</h4>
<span class="float-right" id="standing_instant">0%</span>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar"
id="standing_instant_value"
{# style="width: 0%"#}
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!--walking-->
<h4 class="small font-weight-bold">Walking</h4>
<span class="float-right" id="walking_instant">0%</span>
<div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar"
id="walking_instant_value"
{# style="width: 80%"#}
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<!--end of progress bar section -->
{# <video width="500" height="300" id="lecturer_video" controls>#}
{# <source src="#"#}
{# type="video/mp4">#}
{# Your browser does not support the video tag.#}
{# </video>#}
</div> </div>
<!--end of lecture video section --> <!--end of lecture video section -->
</div> </div>
<!--end of 2nd column --> <!--end of 2nd column -->
</div> </div>
<!--end of 1st row --> <!--end of 1st row -->
......
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