Commit 7bcf0851 authored by I.K Seneviratne's avatar I.K Seneviratne

Committing the implementation of the Gaze estimation period statistics in Lecturer Home Page

parent 0e91389b
...@@ -11,4 +11,5 @@ admin.site.register(LecturerSubject) ...@@ -11,4 +11,5 @@ admin.site.register(LecturerSubject)
admin.site.register(LecturerCredentials) admin.site.register(LecturerCredentials)
admin.site.register(FacultyTimetable) admin.site.register(FacultyTimetable)
admin.site.register(LectureVideo) admin.site.register(LectureVideo)
admin.site.register(LectureActivity) admin.site.register(LectureActivity)
\ No newline at end of file admin.site.register(LectureGazeEstimation)
\ No newline at end of file
...@@ -668,10 +668,15 @@ class GetStudentBehaviorSummaryForPeriod(APIView): ...@@ -668,10 +668,15 @@ class GetStudentBehaviorSummaryForPeriod(APIView):
isRecordFound = False isRecordFound = False
activity_percentages = {} activity_percentages = {}
emotion_percentages = {} emotion_percentages = {}
gaze_estimation_percentages = {}
individual_lec_activties = [] individual_lec_activties = []
individual_lec_emotions = [] individual_lec_emotions = []
individual_lec_gaze_estimations = []
activity_labels = [] activity_labels = []
emotion_labels = [] emotion_labels = []
gaze_estimation_labels = []
current_date = datetime.datetime.now().date() current_date = datetime.datetime.now().date()
...@@ -705,13 +710,29 @@ class GetStudentBehaviorSummaryForPeriod(APIView): ...@@ -705,13 +710,29 @@ class GetStudentBehaviorSummaryForPeriod(APIView):
emotion_percentages, individual_lec_emotions, emotion_labels = ed.get_student_emotion_summary_for_period(emotion_data) emotion_percentages, individual_lec_emotions, emotion_labels = ed.get_student_emotion_summary_for_period(emotion_data)
# retrieving lecture gaze estimations
lec_gaze_estimation = LectureGazeEstimation.objects.filter(
lecture_video_id__date__gte=previous_date,
lecture_video_id__date__lte=current_date,
lecture_video_id__lecturer=lecturer
)
# if there are gaze estimation data
if len(lec_gaze_estimation) > 0:
gaze_estimation_serializer = LectureGazeEstimationSerializer(lec_gaze_estimation, many=True)
gaze_estimation_data = gaze_estimation_serializer.data
gaze_estimation_percentages, individual_lec_gaze_estimations, gaze_estimation_labels = hge.get_student_gaze_estimation_summary_for_period(gaze_estimation_data)
return Response({ return Response({
"activity_response": activity_percentages, "activity_response": activity_percentages,
"emotion_response": emotion_percentages, "emotion_response": emotion_percentages,
"gaze_estimation_response": gaze_estimation_percentages,
"individual_activities": individual_lec_activties, "individual_activities": individual_lec_activties,
"individual_emotions": individual_lec_emotions, "individual_emotions": individual_lec_emotions,
"individual_gaze_estimations": individual_lec_gaze_estimations,
"activity_labels": activity_labels, "activity_labels": activity_labels,
"emotion_labels": emotion_labels, "emotion_labels": emotion_labels,
"gaze_estimation_labels": gaze_estimation_labels,
"isRecordFound": isRecordFound "isRecordFound": isRecordFound
}) })
...@@ -554,4 +554,58 @@ def get_lecture_gaze_esrimation_for_frames(video_name): ...@@ -554,4 +554,58 @@ def get_lecture_gaze_esrimation_for_frames(video_name):
return frame_detections, frame_rate return frame_detections, frame_rate
\ No newline at end of file
def get_student_gaze_estimation_summary_for_period(gaze_estimation_data):
# declare variables to add percentage values
phone_checking_perct_combined = 0.0
listening_perct_combined = 0.0
note_taking_perct_combined = 0.0
looking_up_right_perct_combined = 0.0
looking_up_left_perct_combined = 0.0
looking_down_right_perct_combined = 0.0
looking_down_left_perct_combined = 0.0
looking_front_perct_combined = 0.0
# get the number of activties to calculate average
no_of_gaze_estimations = len(gaze_estimation_data)
individual_lec_gaze_estimations = []
gaze_estimation_labels = ["looking_up_and_right_perct", "looking_up_and_left_perct", "looking_down_and_right_perct", "looking_down_and_left_perct", "looking_front_perct"]
# iterate through the activities
for gaze_estimation in gaze_estimation_data:
individual_gaze_estimation = {}
individual_gaze_estimation["looking_up_and_right_perct"] = float(gaze_estimation['looking_up_and_right_perct'])
individual_gaze_estimation["looking_up_and_left_perct"] = float(gaze_estimation['looking_up_and_left_perct'])
individual_gaze_estimation["looking_down_and_right_perct"] = float(gaze_estimation['looking_down_and_right_perct'])
individual_gaze_estimation["looking_down_and_left_perct"] = float(gaze_estimation['looking_down_and_left_perct'])
individual_gaze_estimation["looking_front_perct"] = float(gaze_estimation['looking_front_perct'])
looking_up_right_perct_combined += float(gaze_estimation['looking_up_and_right_perct'])
looking_up_left_perct_combined += float(gaze_estimation['looking_up_and_left_perct'])
looking_down_right_perct_combined += float(gaze_estimation['looking_down_and_right_perct'])
looking_down_left_perct_combined += float(gaze_estimation['looking_down_and_left_perct'])
looking_front_perct_combined += float(gaze_estimation['looking_front_perct'])
# append to the list
individual_lec_gaze_estimations.append(individual_gaze_estimation)
# calculate the average percentages
looking_up_right_average_perct = round((looking_up_right_perct_combined / no_of_gaze_estimations), 1)
looking_up_left_perct = round((looking_up_left_perct_combined / no_of_gaze_estimations), 1)
looking_down_right_average_perct = round((looking_down_right_perct_combined / no_of_gaze_estimations), 1)
looking_down_left_average_perct = round((looking_down_left_perct_combined / no_of_gaze_estimations), 1)
looking_front_average_perct = round((looking_front_perct_combined / no_of_gaze_estimations), 1)
percentages = {}
percentages["looking_up_and_right_perct"] = looking_up_right_average_perct
percentages["looking_up_and_left_perct"] = looking_up_left_perct_combined
percentages["looking_down_and_right_perct"] = looking_down_right_perct_combined
percentages["looking_down_and_left_perct"] = looking_down_left_perct_combined
percentages["looking_front_perct"] = looking_front_average_perct
return percentages, individual_lec_gaze_estimations, gaze_estimation_labels
\ No newline at end of file
...@@ -509,6 +509,84 @@ ...@@ -509,6 +509,84 @@
chart.render(); chart.render();
} }
//this function render the chart for Emotion statistics
function renderGazeEstimationStatistics() {
let individual_gaze_estimations = student_behavior_summary.individual_gaze_estimations;
let gaze_estimation_labels = student_behavior_summary.gaze_estimation_labels;
let gaze_estimation_length = individual_gaze_estimations.length;
let label_length = gaze_estimation_labels.length;
let data = [];
let colors = [
"#000000",
"#00FF00",
"#0000FF"
];
for (let i = 0; i < label_length; i++) {
let label = gaze_estimation_labels[i];
let datapoints = [];
for (let j = 0; j < gaze_estimation_length; j++) {
let gaze_estimation = individual_gaze_estimations[j];
datapoints.push({label: "lecture " + (j+1), y: gaze_estimation[label]});
}
let obj = {
type: "line",
showInLegend: true,
name: label,
markerType: "square",
{#xValueFormatString: "DD MMM, YYYY",#}
xValueFormatString: "Lec " + (i+1),
color: colors[i - 1],
dataPoints: datapoints
};
data.push(obj);
}
var chart = new CanvasJS.Chart("gaze_estimation_stats_chart", {
animationEnabled: true,
theme: "light2",
title: {
text: "Gaze Estimation Statistics"
},
axisX: {
title: "Lecture",
{#valueFormatString: "DD MMM",#}
valueFormatString: "lec" ,
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
axisY: {
title: "Percentage",
includeZero: true,
crosshair: {
enabled: true
}
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
verticalAlign: "bottom",
horizontalAlign: "center",
{#dockInsidePlotArea: true,#}
itemclick: toogleDataSeries
},
data: data
});
chart.render();
}
//this function will toggle the content //this function will toggle the content
function toogleDataSeries(e) { function toogleDataSeries(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
...@@ -568,6 +646,13 @@ ...@@ -568,6 +646,13 @@
$('#surprise_perct_for_period').text(out.emotion_response.surprise_perct); $('#surprise_perct_for_period').text(out.emotion_response.surprise_perct);
$('#neutral_perct_for_period').text(out.emotion_response.neutral_perct); $('#neutral_perct_for_period').text(out.emotion_response.neutral_perct);
//assign the gaze estimation values
$('#looking_up_right_perct_for_period').text(out.gaze_estimation_response.looking_up_and_right_perct);
$('#looking_up_left_perct_for_period').text(out.gaze_estimation_response.looking_up_and_left_perct);
$('#looking_down_right_perct_for_period').text(out.gaze_estimation_response.looking_down_and_right_perct);
$('#looking_down_left_perct_for_period').text(out.gaze_estimation_response.looking_down_and_left_perct);
$('#looking_front_perct_for_period').text(out.gaze_estimation_response.looking_front_perct);
} else { } else {
$('#student_summary_not_found_message').attr('hidden', false); $('#student_summary_not_found_message').attr('hidden', false);
} }
...@@ -600,6 +685,16 @@ ...@@ -600,6 +685,16 @@
}); });
//this function will view emotion statistics
$('#view_gaze_estimation_stats').click(function () {
//render the chart
renderGazeEstimationStatistics();
//open the modal
$('#gaze_estimation_stats_modal').modal();
});
//this function will generate random colors //this function will generate random colors
function getRandomColor() { function getRandomColor() {
var letters = '0123456789ABCDEF'; var letters = '0123456789ABCDEF';
...@@ -916,9 +1011,79 @@ ...@@ -916,9 +1011,79 @@
<!-- end of Emotion card --> <!-- end of Emotion card -->
<!-- Gaze estimation card -->
<div class="card shadow-lg mb-2">
<div class="card-body">
<!-- put the heading -->
<div class="text-center mt-2">
<h4 class="font-weight-bold">Gaze estimation</h4>
</div>
<!-- percentages -->
<div class="text-center">
<!-- gaze estimation table -->
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td>
Looking up and right
<hr style="height: 5px">
</td>
<td id="looking_up_right_perct_for_period"></td>
</tr>
<tr>
<td>
Looking up and left
<hr style="height: 5px">
</td>
<td id="looking_up_left_perct_for_period"></td>
</tr>
<tr>
<td>
Looking down and right
<hr style="height: 5px">
</td>
<td id="looking_down_right_perct_for_period"></td>
</tr>
<tr>
<td>
Looking down and left
<hr style="height: 5px">
</td>
<td id="looking_down_left_perct_for_period"></td>
</tr>
<tr>
<td>
Looking front
<hr style="height: 5px">
</td>
<td id="looking_front_perct_for_period"></td>
</tr>
</tbody>
</table>
<!-- end of gaze estimation table -->
</div>
<!-- end of percentages -->
<!-- stats button -->
<div class="float-right">
<button type="button" class="btn btn-primary"
id="view_gaze_estimation_stats">
<i class="fa fa-line-chart"></i>
View stats
</button>
</div>
<!-- end of stats button -->
</div>
</div>
<!-- end of Gaze estimation card -->
</div> </div>
<!-- end of student behavior summary --> <!-- end of student behavior summary -->
<!-- a vertical list displaying the student engagement categories --> <!-- a vertical list displaying the student engagement categories -->
<ul class="list-group" id="progress_areas" hidden> <ul class="list-group" id="progress_areas" hidden>
<li class="list-group-item border"> <li class="list-group-item border">
...@@ -1469,6 +1634,29 @@ ...@@ -1469,6 +1634,29 @@
<!-- end of activity statistics modal --> <!-- end of activity statistics modal -->
<!-- gaze estimation Modal-->
<div class="modal fade" id="gaze_estimation_stats_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 estimation Statistics</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">
<div id="gaze_estimation_stats_chart" style="height: 370px; width: 100%"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- end of activity statistics modal -->
{% endblock %} {% endblock %}
<!--scripts--> <!--scripts-->
{% block 'scripts' %} {% block 'scripts' %}
......
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