Skip to content

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

Committing to the new branch .

parent 20fd8ccb
Hide whitespace changes
Inline Side-by-side
Showing with 382 additions and 362 deletions
FirstApp/api.py
View file @ 195f9fcd
......@@ -561,7 +561,6 @@ class GetLectureGazeEstimationAvailaibility(APIView):
serializer = LectureVideoSerializer(lecturer_video, many=True)
lecture_video_id = serializer.data[index]['lecture_video_id']
print('lecture video id: ', lecture_video_id)
gaze_estimation = LectureGazeEstimation.objects.filter(lecture_video_id__lecture_video_id=lecture_video_id)
isGazeEstimationFound = (len(gaze_estimation) > 0)
......@@ -665,7 +664,7 @@ class GetStudentBehaviorSummaryForPeriod(APIView):
lecturer = request.query_params.get('lecturer')
int_lecturer = int(lecturer)
int_option = int(option)
int_option = 150
# int_option = 150
isRecordFound = False
activity_percentages = {}
emotion_percentages = {}
......
FirstApp/emotion_detector.py
View file @ 195f9fcd
......@@ -319,11 +319,11 @@ def get_frame_emotion_recognition(video_name):
# calculating the percentages for the frame
happy_perct = float(happy_count / detection_count) * 100
sad_perct = float(sad_count / detection_count) * 100
angry_perct = float(angry_count / detection_count) * 100
neutral_perct = float(neutral_count / detection_count) * 100
surprise_perct = float(surprise_count / detection_count) * 100
happy_perct = float(happy_count / detection_count) * 100 if detection_count > 0 else 0
sad_perct = float(sad_count / detection_count) * 100 if detection_count > 0 else 0
angry_perct = float(angry_count / detection_count) * 100 if detection_count > 0 else 0
neutral_perct = float(neutral_count / detection_count) * 100 if detection_count > 0 else 0
surprise_perct = float(surprise_count / detection_count) * 100 if detection_count > 0 else 0
# this dictionary will be returned
frame_details['happy_perct'] = happy_perct
......
FirstApp/logic/activity_recognition.py
View file @ 195f9fcd
......@@ -129,10 +129,10 @@ def activity_recognition(video_path):
p.write("yes")
# calculating the percentages for each label
phone_perct = float(phone_checking_count / total_detections) * 100
talking_perct = float(talking_count / total_detections) * 100
note_perct = float(note_taking_count / total_detections) * 100
listening_perct = float(listening_count / total_detections) * 100
phone_perct = float(phone_checking_count / total_detections) * 100 if total_detections > 0 else 0
talking_perct = float(talking_count / total_detections) * 100 if total_detections > 0 else 0
note_perct = float(note_taking_count / total_detections) * 100 if total_detections > 0 else 0
listening_perct = float(listening_count / total_detections) * 100 if total_detections > 0 else 0
# assigning the percentages to the dictionary
percentages["phone_perct"] = phone_perct
......
FirstApp/templates/FirstApp/Home.html
View file @ 195f9fcd
......@@ -157,10 +157,10 @@
//displaying the activity percentages in the progress bars
function displayEmotion(emotion) {
//hide the loader
$('#student_behavior_loader').attr('hidden', true);
//hide the emotion loading message
$('#student_behavior_emotion').attr('hidden', true);
//display the gaze message
$('#student_behavior_gaze').attr('hidden', false);
emotion.response.map((act, index) => {
......@@ -179,11 +179,56 @@
$('#neutral_width').width(act.neutral_perct + '%');
});
//retrieve the lecture gaze estimation
retrieveLectureGazeEstimation();
//display the progress bar area
//$('#progress_areas').attr('hidden', false);
}
//this function will retrieve lecture gaze estimations
function retrieveLectureGazeEstimation() {
//using fetch API
fetch('http://127.0.0.1:8000/get-lecture-gaze-estimation/?lecture_video_id=' + global_lecture_video_id + '&lecture_video_name=' + global_video_name)
.then((res) => res.json())
.then((out) => displayGazeEstimation(out))
.catch((err) => alert('error: ' + err));
}
//displaying the activity percentages in the progress bars
function displayGazeEstimation(gaze_estimation) {
//hide the loader
$('#student_behavior_loader').attr('hidden', true);
//hide the emotion loading message
$('#student_behavior_gaze').attr('hidden', true);
gaze_estimation.response.map((act, index) => {
//setting the percentage values
$('#looking_up_right_perct').text(act.looking_up_and_right_perct + '%');
$('#looking_up_left_perct').text(act.looking_up_and_left_perct + '%');
$('#looking_down_right_perct').text(act.looking_down_and_right_perct + '%');
$('#looking_down_left_perct').text(act.looking_down_and_left_perct + '%');
$('#looking_front_perct').text(act.looking_front_perct + '%');
//setting the width in the progress bars
$('#looking_up_right_width').width(act.looking_up_and_right_perct + '%');
$('#looking_up_left_width').width(act.looking_up_and_left_perct + '%');
$('#looking_down_right_width').width(act.looking_down_and_right_perct + '%');
$('#looking_down_left_width').width(act.looking_down_and_left_perct + '%');
$('#looking_front_width').width(act.looking_front_perct + '%');
});
//display the progress bar area
$('#progress_areas').attr('hidden', false);
}
//this function will handle the 'summary' button
$('#summary_btn').click(function () {
//open the modal
......@@ -330,14 +375,14 @@
for (let j = 0; j < activity_length; j++) {
let activity = individual_activities[j];
datapoints.push({label: label, y: activity[label]});
datapoints.push({label: "lecture " + (j+1), y: activity[label]});
}
let obj = {
type: "line",
showInLegend: true,
name: "Activity-{" + i + "}",
name: label,
markerType: "square",
{#xValueFormatString: "DD MMM, YYYY",#}
xValueFormatString: "Lec " + (i+1),
......@@ -376,8 +421,8 @@
legend: {
cursor: "pointer",
verticalAlign: "bottom",
horizontalAlign: "left",
dockInsidePlotArea: true,
horizontalAlign: "center",
{#dockInsidePlotArea: true,#}
itemclick: toogleDataSeries
},
data: data
......@@ -410,13 +455,13 @@
for (let j = 0; j < emotion_length; j++) {
let emotion = individual_emotions[j];
datapoints.push({label: label, y: emotion[label]});
datapoints.push({label: "lecture " + (j+1), y: emotion[label]});
}
let obj = {
type: "line",
showInLegend: true,
name: "Emotion-{" + i + "}",
name: label,
markerType: "square",
{#xValueFormatString: "DD MMM, YYYY",#}
xValueFormatString: "Lec " + (i+1),
......@@ -455,8 +500,8 @@
legend: {
cursor: "pointer",
verticalAlign: "bottom",
horizontalAlign: "left",
dockInsidePlotArea: true,
horizontalAlign: "center",
{#dockInsidePlotArea: true,#}
itemclick: toogleDataSeries
},
data: data
......@@ -725,6 +770,11 @@
<span class="font-italic">Loading Student Emotion...</span>
</div>
<!-- loading lecture gaze estimation message -->
<div class="text-center" id="student_behavior_gaze" hidden>
<span class="font-italic">Loading Student Gaze estimation...</span>
</div>
<!--loader -->
<div class="text-center" id="student_behavior_loader" hidden>
<img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loader">
......@@ -990,17 +1040,75 @@
</li>
<!-- end of the emotion list item -->
<!-- beginning of the gaze list item -->
<li class="list-group-item">
<button type="button" class="btn btn-link" data-target="#gaze"
data-toggle="collapse">
<li class="list-group-item border">
<button type="button" class="btn btn-link"
data-target="#progress_area_gaze" data-toggle="collapse">
<h5 class="font-weight-bold">Gaze</h5>
</button>
<p id="gaze" class="collapse">Gaze</p>
<!--this area will display the activity progress bars -->
<div id="progress_area_gaze" class="collapse">
<!--looking up and right -->
<h4 class="small font-weight-bold">Looking up and right</h4>
<span class="float-right" id="looking_up_right_perct">40%</span>
<div class="progress mb-4">
<div class="progress-bar bg-danger" role="progressbar"
id="looking_up_right_width"
style="width: 20%"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!--looking up and left -->
<h4 class="small font-weight-bold">Looking up and left</h4>
<span class="float-right" id="looking_up_left_perct">45%</span>
<div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar"
id="looking_up_left_width"
style="width: 40%"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!--looking down and right -->
<h4 class="small font-weight-bold">Looking down and right</h4>
<span class="float-right" id="looking_down_right_perct">50%</span>
<div class="progress mb-4">
<div class="progress-bar bg-success" role="progressbar" id="looking_down_right_width"
style="width: 60%"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!--Looking down and left-->
<h4 class="small font-weight-bold">Looking down and left</h4>
<span class="float-right" id="looking_down_left_perct">60%</span>
<div class="progress mb-4">
<div class="progress-bar bg-info" role="progressbar"
id="looking_down_left_width" style="width: 80%"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!--Looking front-->
<h4 class="small font-weight-bold">Looking front</h4>
<span class="float-right" id="looking_front_perct">60%</span>
<div class="progress mb-4">
<div class="progress-bar bg-secondary" 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 (gaze) -->
<hr>
</li>
<!-- end of the gaze list item -->
<!-- button to view a summary -->
<li class="list-group-item">
<button type="button" class="btn btn-primary float-right" id="summary_btn">
......@@ -1290,6 +1398,11 @@
<label class="custom-control-label" for="customRadio2">one month</label>
</div>
<div class="custom-control custom-radio mt-2">
<input type="radio" class="custom-control-input" id="customRadio3" name="option" value="10000">
<label class="custom-control-label" for="customRadio3">All</label>
</div>
<div class="form-group mt-4">
<button type="submit" class="btn btn-outline-success" id="submit_view_summary_option">
Submit
......@@ -1313,7 +1426,7 @@
<!-- activity statistics Modal-->
<div class="modal fade" id="activity_stats_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 1300px">
<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 Statistics</h5>
......@@ -1336,7 +1449,7 @@
<!-- emotion statistics Modal-->
<div class="modal fade" id="emotion_stats_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document" style="max-width: 1300px">
<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 Statistics</h5>
......
FirstApp/templates/FirstApp/activity.html
View file @ 195f9fcd
......@@ -221,12 +221,12 @@
//sending the POST request to process the lecture activities
fetch('http://127.0.0.1:8000/process-lecture-activity/?lecture_video_name=' + global_video_name + '&lecture_video_id=' + global_lecture_video_id)
.then((res) => res.json())
.then((out) => handleResponse(out.response, e))
.then((out) => handleActivityResponse(out.response, e))
.catch((error) => alert('error: ' + error));
});
//this is to change the button from 'process' to 'results'
function handleResponse(response, e) {
//this is to detect the response gained from activity recognition porcess
function handleActivityResponse(response, e) {
//change the button, if the response is positive
if (response) {
e.target.parentNode.parentNode.lastChild.innerHTML = '<button type="button" class="btn btn-primary" id="result_btn">Results</button>';
......
FirstApp/templates/FirstApp/emotion.html
View file @ 195f9fcd
......@@ -1151,10 +1151,10 @@
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!--evaluate button -->
<button type="button" class="btn btn-danger float-right"
id="evaluate_button">Evaluate
</button>
{# <!--evaluate button -->#}
{# <button type="button" class="btn btn-danger float-right"#}
{# id="evaluate_button">Evaluate#}
{# </button>#}
</div>
......@@ -1215,63 +1215,63 @@
<!--2nd column -->
<div class="col-lg-6">
<!--card content -->
<div class="card shadow mb-4">
<!--card header -->
<div class="card-header py-3">
<h5 class="m-0 font-weight-bold text-primary">Frame Detections</h5>
</div>
<!--card body -->
<div class="text-center p-4" id="detection_frames">
<!--no content message-->
<div class="text-center p-2" id="no_detection_message_content">
<span class="font-italic">No frame is selected</span>
</div>
<div class="text-left m-3" id="detection_number_area" hidden>
<p>No of detections: <span id="no_of_detections"></span></p>
</div>
<!--the detection loader -->
<div class="text-center p-2" id="detection_loader" hidden>
<img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
alt="Loader">
</div>
</div>
</div>
<!--detection person card -->
<div class="card shadow mb-4">
<!--card header -->
<div class="card-header py-3">
<h5 class="m-0 font-weight-bold text-primary">Detected Students (by emotion
type)</h5>
</div>
<!--card body -->
<div class="text-center p-4" id="detection_students">
<!--activity type line -->
<div class="text-center p-2" id="activity_type" hidden>
<p>Activity Type: <span class="font-weight-bold" id="activity_type_text"></span>
</p>
</div>
<!--no content message-->
<div class="text-center p-2" id="no_detection_student_content">
<span class="font-italic">No activity type is selected</span>
</div>
<!--the detection student loader -->
<div class="text-center p-2" id="detection_student_loader" hidden>
<img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
alt="Loader">
</div>
</div>
</div>
</div>
{# <div class="col-lg-6">#}
{# <!--card content -->#}
{# <div class="card shadow mb-4">#}
{# <!--card header -->#}
{# <div class="card-header py-3">#}
{# <h5 class="m-0 font-weight-bold text-primary">Frame Detections</h5>#}
{# </div>#}
{##}
{# <!--card body -->#}
{# <div class="text-center p-4" id="detection_frames">#}
{##}
{# <!--no content message-->#}
{# <div class="text-center p-2" id="no_detection_message_content">#}
{# <span class="font-italic">No frame is selected</span>#}
{# </div>#}
{##}
{# <div class="text-left m-3" id="detection_number_area" hidden>#}
{# <p>No of detections: <span id="no_of_detections"></span></p>#}
{# </div>#}
{# <!--the detection loader -->#}
{# <div class="text-center p-2" id="detection_loader" hidden>#}
{# <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"#}
{# alt="Loader">#}
{# </div>#}
{# </div>#}
{# </div>#}
{##}
{# <!--detection person card -->#}
{# <div class="card shadow mb-4">#}
{# <!--card header -->#}
{# <div class="card-header py-3">#}
{# <h5 class="m-0 font-weight-bold text-primary">Detected Students (by emotion#}
{# type)</h5>#}
{# </div>#}
{##}
{# <!--card body -->#}
{# <div class="text-center p-4" id="detection_students">#}
{# <!--activity type line -->#}
{# <div class="text-center p-2" id="activity_type" hidden>#}
{# <p>Activity Type: <span class="font-weight-bold" id="activity_type_text"></span>#}
{# </p>#}
{# </div>#}
{##}
{# <!--no content message-->#}
{# <div class="text-center p-2" id="no_detection_student_content">#}
{# <span class="font-italic">No activity type is selected</span>#}
{# </div>#}
{##}
{# <!--the detection student loader -->#}
{# <div class="text-center p-2" id="detection_student_loader" hidden>#}
{# <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"#}
{# alt="Loader">#}
{# </div>#}
{##}
{# </div>#}
{# </div>#}
{# </div>#}
</div>
......@@ -1281,36 +1281,36 @@
<div class="row p-2">
<!--1st column -->
<div class="col-lg-6">
<!--card -->
<div class="card shadow mb-4">
<!--card header -->
<div class="card-header">
<h5 class="m-0 font-weight-bold text-primary">Evaluated Students</h5>
</div>
<!--card body -->
<div class="card-body" id="evaluation_students">
<!--no content message-->
<div class="text-center p-2" id="no_evaluated_student_content">
<span class="font-italic">Press 'Evaluate' button to evaluate students</span>
</div>
<!--the detection student loader -->
<div class="text-center p-2" id="evaluate_student_loader" hidden>
<img src="{% static 'FirstApp/images/ajax-loader.gif' %}"
alt="Loader">
</div>
<!--end of student detection loader -->
</div>
</div>
</div>
{# <div class="col-lg-6">#}
{# <!--card -->#}
{# <div class="card shadow mb-4">#}
{# <!--card header -->#}
{# <div class="card-header">#}
{# <h5 class="m-0 font-weight-bold text-primary">Evaluated Students</h5>#}
{# </div>#}
{##}
{# <!--card body -->#}
{# <div class="card-body" id="evaluation_students">#}
{##}
{# <!--no content message-->#}
{# <div class="text-center p-2" id="no_evaluated_student_content">#}
{# <span class="font-italic">Press 'Evaluate' button to evaluate students</span>#}
{# </div>#}
{##}
{# <!--the detection student loader -->#}
{# <div class="text-center p-2" id="evaluate_student_loader" hidden>#}
{# <img src="{% static 'FirstApp/images/ajax-loader.gif' %}"#}
{# alt="Loader">#}
{# </div>#}
{# <!--end of student detection loader -->#}
{##}
{##}
{# </div>#}
{##}
{# </div>#}
{##}
{##}
{# </div>#}
<!--end of 1st column -->
......
FirstApp/templates/FirstApp/template.html
View file @ 195f9fcd
......@@ -54,11 +54,11 @@
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<!-- Nav Item - Home -->
<li class="nav-item active">
<a class="nav-link" href="/">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
<span>Home</span></a>
</li>
<!-- Divider -->
......@@ -78,7 +78,7 @@
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Components:</h6>
<a class="collapse-item" href="/pose">Pose</a>
{# <a class="collapse-item" href="/pose">Pose</a>#}
<a class="collapse-item" href="/gaze">Gaze</a>
<a class="collapse-item" href="/emotion">Emotion</a>
<a class="collapse-item" href="/activity">Activity</a>
......@@ -95,10 +95,10 @@
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Utilities:</h6>
<a class="collapse-item" href="/extract">Video Extractor</a>
{# <a class="collapse-item" href="/extract">Video Extractor</a>#}
<a class="collapse-item" href="/video_result">Video Results</a>
<a class="collapse-item" href="utilities-animation.html">Animations</a>
<a class="collapse-item" href="utilities-other.html">Other</a>
{# <a class="collapse-item" href="utilities-animation.html">Animations</a>#}
{# <a class="collapse-item" href="utilities-other.html">Other</a>#}
</div>
</div>
</li>
......@@ -106,44 +106,44 @@
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Addons
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Login Screens:</h6>
<a class="collapse-item" href="/login">Login</a>
<a class="collapse-item" href="/register">Register</a>
<a class="collapse-item" href="/forgot-password">Forgot Password</a>
<div class="collapse-divider"></div>
<h6 class="collapse-header">Other Pages:</h6>
<a class="collapse-item" href="/404">404 Page</a>
<a class="collapse-item" href="/blank">Blank Page</a>
</div>
</div>
</li>
<!-- Nav Item - Charts -->
<li class="nav-item">
<a class="nav-link" href="charts.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Charts</span></a>
</li>
<!-- Nav Item - Tables -->
<li class="nav-item">
<a class="nav-link" href="/tables">
<i class="fas fa-fw fa-table"></i>
<span>Tables</span></a>
</li>
{# <!-- Heading -->#}
{# <div class="sidebar-heading">#}
{# Addons#}
{# </div>#}
{# <!-- Nav Item - Pages Collapse Menu -->#}
{# <li class="nav-item">#}
{# <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">#}
{# <i class="fas fa-fw fa-folder"></i>#}
{# <span>Pages</span>#}
{# </a>#}
{# <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">#}
{# <div class="bg-white py-2 collapse-inner rounded">#}
{# <h6 class="collapse-header">Login Screens:</h6>#}
{# <a class="collapse-item" href="/login">Login</a>#}
{# <a class="collapse-item" href="/register">Register</a>#}
{# <a class="collapse-item" href="/forgot-password">Forgot Password</a>#}
{# <div class="collapse-divider"></div>#}
{# <h6 class="collapse-header">Other Pages:</h6>#}
{# <a class="collapse-item" href="/404">404 Page</a>#}
{# <a class="collapse-item" href="/blank">Blank Page</a>#}
{# </div>#}
{# </div>#}
{# </li>#}
{##}
{# <!-- Nav Item - Charts -->#}
{# <li class="nav-item">#}
{# <a class="nav-link" href="charts.html">#}
{# <i class="fas fa-fw fa-chart-area"></i>#}
{# <span>Charts</span></a>#}
{# </li>#}
{##}
{# <!-- Nav Item - Tables -->#}
{# <li class="nav-item">#}
{# <a class="nav-link" href="/tables">#}
{# <i class="fas fa-fw fa-table"></i>#}
{# <span>Tables</span></a>#}
{# </li>#}
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
......
FirstApp/templates/FirstApp/video_results.html
View file @ 195f9fcd
......@@ -32,6 +32,10 @@
var global_lecturer_subject_index = 0;
var global_lecture_date = '';
var class1 = 'col-4 smpl-step-step complete';
var class2 = 'col-4 smpl-step-step active';
var class3 = 'col-4 smpl-step-step disabled';
//jquery
$(document).ready(function () {
let folder = '';
......@@ -190,9 +194,6 @@
// this function simulate the process workflow
$('#simulate_process').click(function () {
let class1 = 'col-3 smpl-step-step complete';
let class2 = 'col-3 smpl-step-step active';
let class3 = 'col-3 smpl-step-step disabled';
let classname = $('#step_1').attr('class');
......@@ -215,189 +216,92 @@
});
//view the video details
$('.modal-expand').click(function () {
let clicked_id = $(this).attr('id');
folder = clicked_id;
$('input[type=hidden]').each(function () {
let hidden_id = $(this).attr('id');
if (clicked_id === hidden_id) {
let duration = $(this).attr('data-duration');
$('#video_name').text(clicked_id);
$('#video_duration').text(duration);
$('#video_date').text(new Date().toDateString());
}
});
//after data assigning, load the modal
$('#video_modal').modal();
});
//retrieve the lecture details
$('.retrieve').click(function () {
let lecture = $(this).attr('data-id');
//removing the previous frames
$('#main_frames').remove();
//this function will handle the batch process button
$('.batch_process').click(function () {
let video_id = $(this).attr("data-video-id");
let video_name = $(this).attr("data-video-name");
$('#error_message').attr('hidden', true);
$('#nav_bar').attr('hidden', true);
$('#tabContentDetails').attr('hidden', true);
//display the activity loader
$('#activity_loader').attr("hidden", false);
//disabling all the 'retrive' buttons
$('.retrieve').each(function () {
$(this).attr('disabled', 'disabled');
global_lecture_video_id = video_id;
global_video_name = video_name;
});
let url = 'http://127.0.0.1:8000/videoExtract/?folder_name=' + lecture;
//retrieve frames
fetch(url)
//perform activity recognition
fetch('http://127.0.0.1:8000/process-lecture-activity/?lecture_video_name=' + global_video_name + '&lecture_video_id=' + global_lecture_video_id)
.then((res) => res.json())
.then((out) => {
//create the frames
let frameHTML = createFrames(out.response, lecture);
return frameHTML;
})
.then((obj) => {
//after loading the frames, display the rest of the images
$('#loader').attr('hidden', false);
setTimeout(() => {
$('#nav_bar').attr('hidden', false);
$('#tabContentDetails').attr('hidden', false);
$('#loader').attr('hidden', true);
//enabling the 'retrive' buttons
$('.retrieve').each(function () {
$(this).removeAttr('disabled');
});
}, 65000);
{#$('#nav_bar').attr('hidden', false);#}
{#$('#tabContentDetails').attr('hidden', false);#}
//load the frames
$('#emotion_frames').prepend(obj);
})
.catch((error) => {
$('#error_message').attr('hidden', false);
//enabling the 'retrieve' buttons
$('.retrieve').each(function () {
$(this).removeAttr('disabled');
});
});
//setting some values
$('#no_content_message').attr('hidden', true);
.then((out) => handleActivityResponse(out.response))
.catch((error) => alert('error: ' + error));
});
//creating the frame content
function createFrames(response, folder) {
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
response.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/extracted/" + folder + "/" + response[0].image + "' width='500' height='500'>";
} else {
main_frame_content += "<li class='list-group-item other-frames' id='image_" + count + "' hidden>";
img_src = "<img src='{% static '' %}FirstApp/extracted/" + folder + "/" + image.image + "' width='500' height='500'>";
}
//this is to detect the response gained from activity recognition porcess
function handleActivityResponse(response, e) {
//change the button, if the response is positive
if (response) {
//display the activity process as completed
$('#step_1').attr('class', class1);
//hide the activity loader
$('#activity_loader').hide();
main_frame_content += img_src;
main_frame_content += "</li>";
count++;
});
main_frame_content += "</ul>";
main_frame_content += "</div>";
//display the emotion loader
$('#emotion_loader').attr('hidden', false);
//setting the min, max values of the slider
$('#myRange').attr({'min': 0, 'max': count});
return main_frame_content;
//sending the request to process the lecture emotions
fetch('http://127.0.0.1:8000/process-lecture-emotion/?lecture_video_name=' + global_video_name + '&lecture_video_id=' + global_lecture_video_id)
.then((res) => res.json())
.then((out) => handleEmotionResponse(out.response))
.catch((error) => alert('error: ' + error));
}
}
//declaring the variable for setInterval function
let timeVar = null;
//handling the play button
$('#play_pause_icon').click(function () {
//defining the two possible classes
let play_class = "fas fa-play";
let pause_class = "fas fa-pause";
//this is to detect the response gained from emotion recognition process
function handleEmotionResponse(response) {
//change the button, if the response is positive
if (response) {
//display the activity process as completed
$('#step_2').attr('class', class1);
//retrieving the current icon class
let current_class = $(this).attr('class');
//hide the emotion loader
$('#emotion_loader').hide();
//assigning the correct class based on the icon clicked
let new_class = (current_class === play_class) ? pause_class : play_class;
//display the gaze loader
$('#gaze_loader').attr('hidden', false);
//setting the new class
$(this).attr('class', new_class);
//handling the slider
let slider = document.getElementById("myRange");
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();
//sending the get request to process the lecture gaze estimations
fetch('http://127.0.0.1:8000/process-lecture-gaze-estimation/?lecture_video_name=' + global_video_name + '&lecture_video_id=' + global_lecture_video_id)
.then((res) => res.json())
.then((out) => handleGazeResponse(out.response, e))
.catch((error) => alert('error: ' + error));
}
}
let selectedImage = '#image_' + Number(value);
//this is to detect the response gained from emotion recognition process
function handleGazeResponse(response) {
//change the button, if the response is positive
if (response) {
//display the activity process as completed
$('#step_3').attr('class', class1);
//displaying the relevant image
$('#image_0').html($(selectedImage).html());
//hide the activity loader
$('#gaze_loader').hide();
}, 10);
}
//when the button is paused
else if (current_class === pause_class) {
clearInterval(timeVar);
alert('good');
}
}
});
//handling the slider
let slider = document.getElementById("myRange");
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);#}
}
});
</script>
......@@ -429,7 +333,7 @@
<!--second column (timetable column) -->
<div class="col-lg-6" style="overflow-x: scroll">
<div class="col-lg-8" style="overflow-x: scroll">
<div class="card shadow mb-4">
<!--card header -->
<div class="card-header py-3">
......@@ -462,15 +366,21 @@
<th>Subject</th>
<th>start time</th>
<th>end time</th>
<th></th>
</tr>
</thead>
<tbody id="timetable_body">
{% for lecture in due_lectures %}
<tr>
<td>{{ lecture.date }}</td>
<td>{{ lecture.subject }}</td>
<td>{{ lecture.start_time }}</td>
<td>{{ lecture.end_time }}</td>
<td class="font-weight-bolder">{{ lecture.date }}</td>
{# <td>{{ lecture.subject }}</td>#}
<td class="font-weight-bolder">{{ lecture.subject_name }}</td>
<td class="font-weight-bolder">{{ lecture.start_time }}</td>
<td class="font-weight-bolder">{{ lecture.end_time }}</td>
<td>
<button type="button" class="btn btn-success batch_process" data-video-id="{{ lecture.video_id }}" data-video-name="{{ lecture.video_name }}" id="{{ lecture.subject }}">Process</button>
{# <span class="font-italic font-weight-bolder text-success">Processing</span>#}
</td>
</tr>
{% endfor %}
</tbody>
......@@ -499,70 +409,63 @@
<div class="card-body">
<div class="container">
<div class="row smpl-step" style="border-bottom: 0; min-width: 500px;">
<!-- step 1 -->
<div class="col-3 smpl-step-step disabled" id="step_1">
<div class="text-center smpl-step-num">Step 1</div>
<div class="col-4 smpl-step-step disabled" id="step_1">
<div class="text-center smpl-step-num font-weight-bolder">Step 1</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
<a class="smpl-step-icon"><i class="fa fa-user"
style="font-size: 60px; padding-left: 12px; padding-top: 3px; color: white;"></i></a>
<a class="smpl-step-icon text-center"><i class="fa fa-chart-line"
style="font-size: 40px; padding-top: 10px; color: white"></i></a>
<div class="smpl-step-info text-center">
<span class="font-italic">Video Extraction</span>
<span class="font-italic font-weight-bolder">Perform Activity Recognition</span>
<br />
<img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loader" class="mt-2" id="activity_loader" hidden>
</div>
</div>
<!-- end step 1 -->
<!-- end of step 1 -->
<!-- step 2 -->
<div class="col-3 smpl-step-step disabled" id="step_2">
<div class="text-center smpl-step-num">Step 2</div>
<div class="col-4 smpl-step-step disabled" id="step_2">
<div class="text-center smpl-step-num font-weight-bolder">Step 3</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
<a class="smpl-step-icon"><i class="fa fa-dollar"
style="font-size: 60px; padding-left: 18px; padding-top: 5px; color: white;"></i></a>
<a class="smpl-step-icon text-center"><i class="fa fa-user"
style="font-size: 50px; padding-top: 10px; color: white"></i></a>
<div class="smpl-step-info text-center">
<span class="font-italic">Perform Activity Recognition</span>
<span class="font-italic font-weight-bolder">Study Student Emotions</span>
<br />
<img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loader" class="mt-2" id="emotion_loader" hidden>
</div>
</div>
<!-- end of step 2 -->
<!-- step 3 -->
<div class="col-3 smpl-step-step disabled" id="step_3">
<div class="text-center smpl-step-num">Step 3</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
<a class="smpl-step-icon"><i class="fa fa-repeat"
style="font-size: 60px; padding-left: 7px; padding-top: 7px; color: white;"></i></a>
<div class="smpl-step-info text-center">
<span class="font-italic">Study Student Emotions</span>
</div>
</div>
<!-- end of step 3 -->
<!-- step 4 -->
<div class="col-3 smpl-step-step disabled" id="step_4">
<div class="text-center smpl-step-num">Step 4</div>
<div class="col-4 smpl-step-step disabled" id="step_3">
<div class="text-center smpl-step-num font-weight-bolder">Step 3</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
<a class="smpl-step-icon">
<i class="fa fa-share-alt"
style="font-size: 60px; padding-left: 7px; padding-top: 7px; color: white;"></i>
<i class="fa fa-eye"
style="font-size: 60px; padding-left: 7px; padding-top: 5px; color: white;"></i>
</a>
<div class="smpl-step-info text-center">
<span class="font-italic">See students' Gazes</span>
<span class="font-italic font-weight-bolder">See students' Gazes</span>
<br />
<img src="{% static 'FirstApp/images/ajax-loader.gif' %}" alt="Loader" class="mt-2" id="gaze_loader" hidden>
</div>
</div>
<!-- end of step 4 -->
<!-- end of step 3 -->
</div>
<!-- simulation button row -->
<div class="row">
<button type="button" class="btn btn-outline-danger" id="simulate_process">Simulate</button>
</div>
{# <!-- simulation button row -->#}
{# <div class="row">#}
{# <button type="button" class="btn btn-outline-danger" id="simulate_process">Simulate</button>#}
{# </div>#}
</div>
<!-- end of container -->
......
FirstApp/views.py
View file @ 195f9fcd
......@@ -371,6 +371,7 @@ def video_result(request):
data = serializer.data
# iterate through the existing lecture videos for the lecturer
for video in data:
video_id = video['id']
date = video['date']
......@@ -382,7 +383,9 @@ def video_result(request):
to_do_lecture_list.append({
"lecturer": lecturer,
"date": date,
"subject": subject
"subject": subject,
"video_id": video['id'],
"video_name": video['video_name']
})
# once the lectures that needs to be processed are found out, extract the corresponding timetable details
......@@ -405,7 +408,6 @@ def video_result(request):
# loop through the to-do lecture list
for item in to_do_lecture_list:
print('item date: ', item['date'])
isDate = item['date'] == str(day_timetable['date'])
# isLecturer = item['lecturer'] ==
# check for the particular lecture on the day
......@@ -422,8 +424,11 @@ def video_result(request):
obj = {}
obj['date'] = item['date']
obj['subject'] = slot['subject']['subject_code']
obj['subject_name'] = slot['subject']['name']
obj['start_time'] = slot['start_time']
obj['end_time'] = slot['end_time']
obj['video_id'] = item['video_id']
obj['video_name'] = item['video_name']
# append to the list
due_lecture_list.append(obj)
......
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