Committing the partial implementations of the graphical representations of...

Committing the partial implementations of the graphical representations of Emotion and Gaze components in the lecturer Home page.

FirstApp/MongoModels.py

@@ -202,6 +202,40 @@ class LectureEmotionReport(models.Model):
         return self.lecture_emotion_id
 
 
+# this abstract class will define the lecture emotion frame group percentages
+class LectureEmotionFrameGroupPercentages(models.Model):
+    happy_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    sad_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    angry_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    disgust_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    surprise_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    neutral_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+
+    class Meta:
+        abstract = True
+
+
+# this abstract class will define the details for an emotion frame group
+class LectureEmotionFrameGroupDetails(models.Model):
+    frame_group = models.CharField(max_length=10)
+    frame_group_percentages = models.EmbeddedField(
+       model_container=LectureEmotionFrameGroupPercentages
+    )
+
+    class Meta:
+        abstract = True
+
+
+# this class will contain the emotion frame groupings
+class LectureEmotionFrameGroupings(models.Model):
+    lecture_emotion_frame_groupings_id = models.CharField(max_length=15, default="")
+    lecture_emotion_id = models.ForeignKey(LectureEmotionReport, on_delete=models.CASCADE)
+    frame_group_details = models.ArrayField(model_container=LectureEmotionFrameGroupDetails)
+
+    def __str__(self):
+        return self.lecture_emotion_frame_groupings_id
+
+
 # POSE section
 # lecture pose estimation
 class LectureGazeEstimation(models.Model):
@@ -215,3 +249,36 @@ class LectureGazeEstimation(models.Model):
 
     def __str__(self):
         return self.lecture_gaze_id
+
+
+# this abstract class will define the lecture gaze frame group percentages
+class LectureGazeFrameGroupPercentages(models.Model):
+    looking_up_and_right_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    looking_up_and_left_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    looking_down_and_right_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    looking_down_and_left_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+    looking_front_perct = models.DecimalField(default=0.0, max_digits=3, decimal_places=1)
+
+    class Meta:
+        abstract = True
+
+
+# this abstract class will define the details for a gaze frame group
+class LectureGazeFrameGroupDetails(models.Model):
+    frame_group = models.CharField(max_length=10)
+    frame_group_percentages = models.EmbeddedField(
+       model_container=LectureGazeFrameGroupPercentages
+    )
+
+    class Meta:
+        abstract = True
+
+
+# this class will contain the gaze frame groupings
+class LectureGazeFrameGroupings(models.Model):
+    lecture_gaze_frame_groupings_id = models.CharField(max_length=15, default="")
+    lecture_gaze_id = models.ForeignKey(LectureGazeEstimation, on_delete=models.CASCADE)
+    frame_group_details = models.ArrayField(model_container=LectureGazeFrameGroupDetails)
+
+    def __str__(self):
+        return self.lecture_gaze_frame_groupings_id

FirstApp/api.py

@@ -953,3 +953,246 @@ class GetLectureActivitySummary(APIView):
         #         "activity_labels": activity_labels
         #     })
 
+
+# this API will retrieve lecture emotion summary
+class GetLectureEmotionSummary(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+
+        # checking the existence of lecture activity frame grouping records in the db
+        isExist = LectureEmotionFrameGroupings.objects.filter(lecture_emotion_id__lecture_video_id__video_name=video_name).exists()
+
+        if (isExist):
+            frame_group_percentages = {}
+            frame_landmarks = []
+
+            # retrieve frame landmarks from db
+            lec_video_frame_landmarks = LectureVideoFrameLandmarks.objects.filter(lecture_video_id__video_name=video_name)
+            lec_video_frame_landmarks_ser = LectureVideoFrameLandmarksSerializer(lec_video_frame_landmarks, many=True)
+            lec_video_frame_landmarks_data = lec_video_frame_landmarks_ser.data[0]
+
+            retrieved_frame_landmarks = lec_video_frame_landmarks_data["frame_landmarks"]
+
+            for landmark in retrieved_frame_landmarks:
+                frame_landmarks.append(landmark['landmark'])
+
+
+            lec_emotion_frame_groupings = LectureEmotionFrameGroupings.objects.filter(lecture_emotion_id__lecture_video_id__video_name=video_name)
+            lec_emotion_frame_groupings_ser = LectureEmotionFrameGroupingsSerializer(lec_emotion_frame_groupings, many=True)
+            lec_emotion_frame_groupings_data = lec_emotion_frame_groupings_ser.data[0]
+
+            frame_group_details = lec_emotion_frame_groupings_data["frame_group_details"]
+
+
+            # create the new dictionary
+            for group in frame_group_details:
+                frame_group_percentages[group['frame_group']] = group['frame_group_percentages']
+
+
+            class_labels = ['happy_perct', 'sad_perct', 'angry_perct', 'disgust_perct', 'surprise_perct', 'neutral_perct']
+
+            return Response({
+                "frame_landmarks": frame_landmarks,
+                "frame_group_percentages": frame_group_percentages,
+                "emotion_labels": class_labels
+            })
+
+        else:
+
+            # retrieve the previous lecture video frame landmarks details
+            last_lec_video_frame_landmarks = LectureVideoFrameLandmarks.objects.order_by(
+                'lecture_video_frame_landmarks_id').last()
+            new_lecture_video_frame_landmarks_id = "LVFL00001" if (last_lec_video_frame_landmarks is None) else \
+                ig.generate_new_id(last_lec_video_frame_landmarks.lecture_video_frame_landmarks_id)
+
+
+            frame_landmarks, frame_group_dict = ve.getFrameLandmarks(video_name)
+            frame_group_percentages, activity_labels = ar.activity_frame_groupings(video_name, frame_landmarks, frame_group_dict)
+
+
+            # retrieve lecture video details
+            lec_video = LectureVideo.objects.filter(video_name=video_name)
+            lec_video_ser = LectureVideoSerializer(lec_video, many=True)
+            lec_video_id = lec_video_ser.data[0]['id']
+
+
+            # save the frame landmarks details into db (temp method)
+            db_frame_landmarks = []
+
+            for landmark in frame_landmarks:
+                landmark_obj = Landmarks()
+                landmark_obj.landmark = landmark
+
+                db_frame_landmarks.append(landmark_obj)
+
+
+            new_lec_video_frame_landmarks = LectureVideoFrameLandmarks()
+            new_lec_video_frame_landmarks.lecture_video_frame_landmarks_id = new_lecture_video_frame_landmarks_id
+            new_lec_video_frame_landmarks.lecture_video_id_id = lec_video_id
+            new_lec_video_frame_landmarks.frame_landmarks = db_frame_landmarks
+
+            new_lec_video_frame_landmarks.save()
+
+
+
+            # save the frame group details into db (temp method)
+
+            last_lec_activity_frame_grouping = LectureActivityFrameGroupings.objects.order_by('lecture_activity_frame_groupings_id').last()
+            new_lecture_activity_frame_grouping_id = "LAFG00001" if (last_lec_activity_frame_grouping is None) else \
+                ig.generate_new_id(last_lec_activity_frame_grouping.lecture_activity_frame_groupings_id)
+
+            # retrieve the lecture activity id
+            lec_activity = LectureActivity.objects.filter(lecture_video_id__video_name=video_name)
+            lec_activity_ser = LectureActivitySerializer(lec_activity, many=True)
+            lec_activity_id = lec_activity_ser.data[0]['id']
+
+            # create the frame group details
+            frame_group_details = []
+
+            for key in frame_group_percentages.keys():
+                # create an object of type 'LectureActivityFrameGroupDetails'
+                lec_activity_frame_group_details = LectureActivityFrameGroupDetails()
+                lec_activity_frame_group_details.frame_group = key
+                lec_activity_frame_group_details.frame_group_percentages = frame_group_percentages[key]
+
+                frame_group_details.append(lec_activity_frame_group_details)
+
+
+            new_lec_activity_frame_groupings = LectureActivityFrameGroupings()
+            new_lec_activity_frame_groupings.lecture_activity_frame_groupings_id = new_lecture_activity_frame_grouping_id
+            new_lec_activity_frame_groupings.lecture_activity_id_id = lec_activity_id
+            new_lec_activity_frame_groupings.frame_group_details = frame_group_details
+
+            # save
+            new_lec_activity_frame_groupings.save()
+
+
+            return Response({
+                "frame_landmarks": frame_landmarks,
+                "frame_group_percentages": frame_group_percentages,
+                "activity_labels": activity_labels
+            })
+
+
+# this API will retrieve lecture gaze summary
+class GetLectureGazeSummary(APIView):
+
+    def get(self, request):
+        video_name = request.query_params.get('video_name')
+
+        # checking the existence of lecture activity frame grouping records in the db
+        isExist = LectureActivityFrameGroupings.objects.filter(lecture_activity_id__lecture_video_id__video_name=video_name).exists()
+
+        if (isExist):
+            # frame_landmarks, frame_group_dict = ve.getFrameLandmarks(video_name)
+            frame_group_percentages = {}
+            frame_landmarks = []
+
+            # retrieve frame landmarks from db
+            lec_video_frame_landmarks = LectureVideoFrameLandmarks.objects.filter(lecture_video_id__video_name=video_name)
+            lec_video_frame_landmarks_ser = LectureVideoFrameLandmarksSerializer(lec_video_frame_landmarks, many=True)
+            lec_video_frame_landmarks_data = lec_video_frame_landmarks_ser.data[0]
+
+            retrieved_frame_landmarks = lec_video_frame_landmarks_data["frame_landmarks"]
+
+            for landmark in retrieved_frame_landmarks:
+                frame_landmarks.append(landmark['landmark'])
+
+
+            lec_activity_frame_groupings = LectureActivityFrameGroupings.objects.filter(lecture_activity_id__lecture_video_id__video_name=video_name)
+            lec_activity_frame_groupings_ser = LectureActivityFrameGroupingsSerializer(lec_activity_frame_groupings, many=True)
+            lec_activity_frame_groupings_data = lec_activity_frame_groupings_ser.data[0]
+
+            frame_group_details = lec_activity_frame_groupings_data["frame_group_details"]
+
+
+            # create the new dictionary
+            for group in frame_group_details:
+                frame_group_percentages[group['frame_group']] = group['frame_group_percentages']
+
+
+
+            class_labels = ['phone_perct', 'listen_perct', 'note_perct']
+
+            return Response({
+                "frame_landmarks": frame_landmarks,
+                "frame_group_percentages": frame_group_percentages,
+                "activity_labels": class_labels
+            })
+
+        # else:
+        #
+        #     # retrieve the previous lecture video frame landmarks details
+        #     last_lec_video_frame_landmarks = LectureVideoFrameLandmarks.objects.order_by(
+        #         'lecture_video_frame_landmarks_id').last()
+        #     new_lecture_video_frame_landmarks_id = "LVFL00001" if (last_lec_video_frame_landmarks is None) else \
+        #         ig.generate_new_id(last_lec_video_frame_landmarks.lecture_video_frame_landmarks_id)
+        #
+        #
+        #     frame_landmarks, frame_group_dict = ve.getFrameLandmarks(video_name)
+        #     frame_group_percentages, activity_labels = ar.activity_frame_groupings(video_name, frame_landmarks, frame_group_dict)
+        #
+        #
+        #     # retrieve lecture video details
+        #     lec_video = LectureVideo.objects.filter(video_name=video_name)
+        #     lec_video_ser = LectureVideoSerializer(lec_video, many=True)
+        #     lec_video_id = lec_video_ser.data[0]['id']
+        #
+        #
+        #     # save the frame landmarks details into db (temp method)
+        #     db_frame_landmarks = []
+        #
+        #     for landmark in frame_landmarks:
+        #         landmark_obj = Landmarks()
+        #         landmark_obj.landmark = landmark
+        #
+        #         db_frame_landmarks.append(landmark_obj)
+        #
+        #
+        #     new_lec_video_frame_landmarks = LectureVideoFrameLandmarks()
+        #     new_lec_video_frame_landmarks.lecture_video_frame_landmarks_id = new_lecture_video_frame_landmarks_id
+        #     new_lec_video_frame_landmarks.lecture_video_id_id = lec_video_id
+        #     new_lec_video_frame_landmarks.frame_landmarks = db_frame_landmarks
+        #
+        #     new_lec_video_frame_landmarks.save()
+        #
+        #
+        #
+        #     # save the frame group details into db (temp method)
+        #
+        #     last_lec_activity_frame_grouping = LectureActivityFrameGroupings.objects.order_by('lecture_activity_frame_groupings_id').last()
+        #     new_lecture_activity_frame_grouping_id = "LAFG00001" if (last_lec_activity_frame_grouping is None) else \
+        #         ig.generate_new_id(last_lec_activity_frame_grouping.lecture_activity_frame_groupings_id)
+        #
+        #     # retrieve the lecture activity id
+        #     lec_activity = LectureActivity.objects.filter(lecture_video_id__video_name=video_name)
+        #     lec_activity_ser = LectureActivitySerializer(lec_activity, many=True)
+        #     lec_activity_id = lec_activity_ser.data[0]['id']
+        #
+        #     # create the frame group details
+        #     frame_group_details = []
+        #
+        #     for key in frame_group_percentages.keys():
+        #         # create an object of type 'LectureActivityFrameGroupDetails'
+        #         lec_activity_frame_group_details = LectureActivityFrameGroupDetails()
+        #         lec_activity_frame_group_details.frame_group = key
+        #         lec_activity_frame_group_details.frame_group_percentages = frame_group_percentages[key]
+        #
+        #         frame_group_details.append(lec_activity_frame_group_details)
+        #
+        #
+        #     new_lec_activity_frame_groupings = LectureActivityFrameGroupings()
+        #     new_lec_activity_frame_groupings.lecture_activity_frame_groupings_id = new_lecture_activity_frame_grouping_id
+        #     new_lec_activity_frame_groupings.lecture_activity_id_id = lec_activity_id
+        #     new_lec_activity_frame_groupings.frame_group_details = frame_group_details
+        #
+        #     # save
+        #     new_lec_activity_frame_groupings.save()
+        #
+        #
+        #     return Response({
+        #         "frame_landmarks": frame_landmarks,
+        #         "frame_group_percentages": frame_group_percentages,
+        #         "activity_labels": activity_labels
+        #     })
\ No newline at end of file

FirstApp/migrations/0011_lectureemotionframegroupings_lecturegazeframegroupings.py

+# Generated by Django 2.2.11 on 2020-10-09 16:58
+
+import FirstApp.MongoModels
+from django.db import migrations, models
+import django.db.models.deletion
+import djongo.models.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('FirstApp', '0010_lecturevideoframelandmarks_lecturevideotimelandmarks'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='LectureGazeFrameGroupings',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('lecture_gaze_frame_groupings_id', models.CharField(default='', max_length=15)),
+                ('frame_group_details', djongo.models.fields.ArrayField(model_container=FirstApp.MongoModels.LectureGazeFrameGroupDetails)),
+                ('lecture_gaze_id', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='FirstApp.LectureGazeEstimation')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='LectureEmotionFrameGroupings',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('lecture_emotion_frame_groupings_id', models.CharField(default='', max_length=15)),
+                ('frame_group_details', djongo.models.fields.ArrayField(model_container=FirstApp.MongoModels.LectureEmotionFrameGroupDetails)),
+                ('lecture_emotion_id', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='FirstApp.LectureEmotionReport')),
+            ],
+        ),
+    ]

FirstApp/serializers.py

@@ -246,7 +246,7 @@ class LectureVideoFrameLandmarksSerializer(serializers.ModelSerializer):
         fields = '__all__'
 
 
-
+# Lecture activity serializer
 class LectureActivitySerializer(serializers.ModelSerializer):
 
     lecture_video_id = LectureVideoSerializer()
@@ -256,6 +256,7 @@ class LectureActivitySerializer(serializers.ModelSerializer):
         fields = '__all__'
 
 
+# Lecture Activity Frame Group Serializer
 class LectureActivityFrameGroupingsSerializer(serializers.ModelSerializer):
 
     lecture_activity_id = LectureActivitySerializer()
@@ -292,6 +293,38 @@ class LectureEmotionSerializer(serializers.ModelSerializer):
         fields = '__all__'
 
 
+# Lecture emotion Frame Group Serializer
+class LectureEmotionFrameGroupingsSerializer(serializers.ModelSerializer):
+
+    lecture_emotion_id = LectureEmotionSerializer()
+    frame_group_details = serializers.SerializerMethodField()
+
+    def get_frame_group_details(self, obj):
+        return_data = []
+
+        for frame_group in obj.frame_group_details:
+            group_details = {}
+            group_details["frame_group_percentages"] = {}
+
+            group_details["frame_group"] = frame_group.frame_group
+            group_details["frame_group_percentages"]["happy_perct"] = frame_group.frame_group_percentages.happy_perct
+            group_details["frame_group_percentages"]["sad_perct"] = frame_group.frame_group_percentages.sad_perct
+            group_details["frame_group_percentages"]["angry_perct"] = frame_group.frame_group_percentages.angry_perct
+            group_details["frame_group_percentages"]["disgust_perct"] = frame_group.frame_group_percentages.disgust_perct
+            group_details["frame_group_percentages"]["surprise_perct"] = frame_group.frame_group_percentages.surprise_perct
+            group_details["frame_group_percentages"]["neutral_perct"] = frame_group.frame_group_percentages.neutral_perct
+
+            return_data.append(group_details)
+
+        return return_data
+
+
+    class Meta:
+        model = LectureEmotionFrameGroupings
+        fields = '__all__'
+
+
+
 # lecture video meta serializer
 class VideoMetaSerializer(serializers.ModelSerializer):
 
@@ -307,3 +340,33 @@ class LectureGazeEstimationSerializer(serializers.ModelSerializer):
     class Meta:
         model = LectureGazeEstimation
         fields = '__all__'
+
+
+# Lecture emotion Frame Group Serializer
+class LectureGazeFrameGroupingsSerializer(serializers.ModelSerializer):
+
+    lecture_gaze_id = LectureGazeEstimationSerializer()
+    frame_group_details = serializers.SerializerMethodField()
+
+    def get_frame_group_details(self, obj):
+        return_data = []
+
+        for frame_group in obj.frame_group_details:
+            group_details = {}
+            group_details["frame_group_percentages"] = {}
+
+            group_details["frame_group"] = frame_group.frame_group
+            group_details["frame_group_percentages"]["looking_up_and_right_perct"] = frame_group.frame_group_percentages.looking_up_and_right_perct
+            group_details["frame_group_percentages"]["looking_up_and_left_perct"] = frame_group.frame_group_percentages.looking_up_and_left_perct
+            group_details["frame_group_percentages"]["looking_down_and_right_perct"] = frame_group.frame_group_percentages.looking_down_and_right_perct
+            group_details["frame_group_percentages"]["looking_down_and_left_perct"] = frame_group.frame_group_percentages.looking_down_and_left_perct
+            group_details["frame_group_percentages"]["looking_front_perct"] = frame_group.frame_group_percentages.looking_front_perct
+
+            return_data.append(group_details)
+
+        return return_data
+
+
+    class Meta:
+        model = LectureGazeFrameGroupings
+        fields = '__all__'

FirstApp/templates/FirstApp/Home.html

@@ -37,6 +37,8 @@
         var student_behavior_summary = {};
         var lecture_video_time_landmarks = [];
         var lecture_activity_frame_group_percentages = {};
+        var lecture_emotion_frame_group_percentages = {};
+        var lecture_gaze_frame_group_percentages = {};
 
 
         $(document).ready(function () {
@@ -266,26 +268,33 @@
             });
 
             //this function will handle the emotion 'summary' button
-            $('#emotion_summary_btn').click(function () {
-                //open the modal
-                $('#summaryModal').modal();
+            $('#emotion_summary_btn').click(function (e) {
 
+                //change the innerHTML of the clicked button
+                e.target.innerHTML = "<span class='font-italic'>Processing</span>";
+
+                //fetch the activity summary details
+                fetch('http://127.0.0.1:8000/get-lecture-emotion-summary/?video_name=' + global_video_name)
+                .then((res) => res.json())
+                .then((out) => emotionFrameGroupPercentages(out, e))
+                .catch((err) => alert('error: ' + err));
 
-                //render the chart onto the modal body
-                renderChart();
             });
 
             //this function will handle the gaze 'summary' button
             $('#gaze_summary_btn').click(function () {
-                //open the modal
-                $('#summaryModal').modal();
-
+                //change the innerHTML of the clicked button
+                e.target.innerHTML = "<span class='font-italic'>Processing</span>";
 
-                //render the chart onto the modal body
-                renderChart();
+                //fetch the activity summary details
+                fetch('http://127.0.0.1:8000/get-lecture-gaze-summary/?video_name=' + global_video_name)
+                .then((res) => res.json())
+                .then((out) => gazeFrameGroupPercentages(out, e))
+                .catch((err) => alert('error: ' + err));
             });
 
 
+
             //this function will handle the retrieved activity frame group percentages
             function activityFrameGroupPercentages(response, e) {
 
@@ -299,16 +308,58 @@
                 e.target.innerHTML = "Summary";
 
                 //open the modal
-                $('#summaryModal').modal();
+                $('#ActivitySummaryModal').modal();
 
 
                 //render the chart onto the modal body
-                renderChart(activity_labels);
+                renderActivityChart(activity_labels);
             }
 
 
-            //this function will call the chart function
-            function renderChart(activity_labels) {
+            //this function will handle the retrieved emotion frame group percentages
+            function emotionFrameGroupPercentages(response, e) {
+
+                lecture_emotion_frame_group_percentages = response.frame_group_percentages;
+                let frame_landmarks = response.frame_landmarks;
+                let emotion_labels = response.emotion_labels;
+
+
+                //change the button back to original
+                e.target.innerHTML = "Summary";
+
+                //open the modal
+                $('#EmotionSummaryModal').modal();
+
+
+                //render the chart onto the modal body
+                renderEmotionChart(emotion_labels);
+
+            }
+
+            //this function will handle the retrieved gaze frame group percentages
+            function gazeFrameGroupPercentages(response, e) {
+
+                lecture_gaze_frame_group_percentages = response.frame_group_percentages;
+                let frame_landmarks = response.frame_landmarks;
+                let gaze_labels = response.gaze_labels;
+
+
+                //change the button back to original
+                e.target.innerHTML = "Summary";
+
+                //open the modal
+                $('#GazeSummaryModal').modal();
+
+
+                //render the chart onto the modal body
+                renderGazeChart(gaze_labels);
+
+            }
+
+
+
+            //this function will call the activity chart function
+            function renderActivityChart(activity_labels) {
 
                 //get the activity label length
                 let activity_label_length = activity_labels.length;
@@ -351,17 +402,176 @@
 
                 }
 
-                //iterate through the time landmarks
+
+                var chart = new CanvasJS.Chart("ActivityChartContainer", {
+                    animationEnabled: true,
+                    theme: "light2",
+                    title: {
+                        text: "Student Behavior"
+                    },
+                    axisX: {
+                        title: "Duration",
+                        {#valueFormatString: "DD MMM",#}
+                        valueFormatString: "hh:mm:ss",
+                        crosshair: {
+                            enabled: true,
+                            snapToDataPoint: true
+                        }
+                    },
+                    axisY: {
+                        title: "Percentage",
+                        includeZero: true,
+                        crosshair: {
+                            enabled: true
+                        }
+                    },
+                    toolTip: {
+                        shared: true
+                    },
+                    legend: {
+                        cursor: "pointer",
+                        verticalAlign: "top",
+                        horizontalAlign: "right",
+                        dockInsidePlotArea: true,
+                        itemclick: toogleDataSeries
+                    },
+                    data: data
+                });
+                chart.render();
+            }
+
+
+            //this function will call the emotion chart function
+            function renderEmotionChart(emotion_labels) {
+
+                //get the activity label length
+                {#let activity_label_length = activity_labels.length;#}
+
+                let data = [];
+
+                /*
+                //loop through the activity labels
+                for (let k = 0; k < activity_label_length; k++) {
+                    let label = activity_labels[k];
+                    let datapoints = [];
+
+                    let count = 0;
+
+                    //loop through the activity frame groups
+                    for (let key in lecture_activity_frame_group_percentages) {
+                        let frame_group_details = lecture_activity_frame_group_percentages[key];
+
+                        let activity_perct = frame_group_details[label];
+
+                        let point = {label: lecture_video_time_landmarks[count], y: activity_perct};
+
+                        datapoints.push(point);
+
+                        count++;
+                    }
+
+                    let obj = {
+                        type: "line",
+                        showInLegend: true,
+                        name: label,
+                        markerType: "square",
+                        {#xValueFormatString: "DD MMM, YYYY",#}
+                        xValueFormatString: "hh:mm:ss",
+                        color: getRandomColor(),
+                        dataPoints: datapoints
+                    };
+
+                    data.push(obj);
+
+                }
+                */
+
+
+                var chart = new CanvasJS.Chart("EmotionChartContainer", {
+                    animationEnabled: true,
+                    theme: "light2",
+                    title: {
+                        text: "Student Behavior"
+                    },
+                    axisX: {
+                        title: "Duration",
+                        {#valueFormatString: "DD MMM",#}
+                        valueFormatString: "hh:mm:ss",
+                        crosshair: {
+                            enabled: true,
+                            snapToDataPoint: true
+                        }
+                    },
+                    axisY: {
+                        title: "Percentage",
+                        includeZero: true,
+                        crosshair: {
+                            enabled: true
+                        }
+                    },
+                    toolTip: {
+                        shared: true
+                    },
+                    legend: {
+                        cursor: "pointer",
+                        verticalAlign: "top",
+                        horizontalAlign: "right",
+                        dockInsidePlotArea: true,
+                        itemclick: toogleDataSeries
+                    },
+                    data: data
+                });
+                chart.render();
+            }
+
+
+            //this function will call the chart function
+            function renderGazeChart(gaze_labels) {
+
+                //get the activity label length
+                {#let activity_label_length = activity_labels.length;#}
+
+                let data = [];
+
                 /*
-                for (let i = 0; i < lecture_video_time_landmarks.length; i++) {
-                    let point = {label: lecture_video_time_landmarks[i], y: Number(Math.round(Math.random() * 1000), 0)};
+                //loop through the activity labels
+                for (let k = 0; k < activity_label_length; k++) {
+                    let label = activity_labels[k];
+                    let datapoints = [];
+
+                    let count = 0;
+
+                    //loop through the activity frame groups
+                    for (let key in lecture_activity_frame_group_percentages) {
+                        let frame_group_details = lecture_activity_frame_group_percentages[key];
+
+                        let activity_perct = frame_group_details[label];
+
+                        let point = {label: lecture_video_time_landmarks[count], y: activity_perct};
 
                         datapoints.push(point);
+
+                        count++;
                     }
 
+                    let obj = {
+                        type: "line",
+                        showInLegend: true,
+                        name: label,
+                        markerType: "square",
+                        {#xValueFormatString: "DD MMM, YYYY",#}
+                        xValueFormatString: "hh:mm:ss",
+                        color: getRandomColor(),
+                        dataPoints: datapoints
+                    };
+
+                    data.push(obj);
+
+                }
                 */
 
-                var chart = new CanvasJS.Chart("chartContainer", {
+
+                var chart = new CanvasJS.Chart("GazeChartContainer", {
                     animationEnabled: true,
                     theme: "light2",
                     title: {
@@ -399,6 +609,7 @@
             }
 
 
+
             //this function will render the chart for Activity statistics
             function renderActivityStatistics() {
 
@@ -1571,8 +1782,52 @@
     </div>
     <!-- end of logout modal -->
 
-    <!-- summary Modal-->
-    <div class="modal fade" id="summaryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+    <!-- activity summary Modal-->
+    <div class="modal fade" id="ActivitySummaryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document" style="max-width: 1300px">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Summary</h5>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div id="ActivityChartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></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 summary modal -->
+
+    <!-- emotion summary Modal-->
+    <div class="modal fade" id="EmotionSummaryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document" style="max-width: 1300px">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Summary</h5>
+                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">×</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div id="EmotionChartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- end of emotion summary modal -->
+
+    <!-- gaze summary Modal-->
+    <div class="modal fade" id="GazeSummaryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
          aria-hidden="true">
         <div class="modal-dialog" role="document" style="max-width: 1300px">
             <div class="modal-content">
@@ -1583,7 +1838,7 @@
                     </button>
                 </div>
                 <div class="modal-body">
-                    <div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
+                    <div id="GazeChartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
                 </div>
                 <div class="modal-footer">
                     <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
@@ -1591,7 +1846,7 @@
             </div>
         </div>
     </div>
-    <!-- end of summary modal -->
+    <!-- end of gaze summary modal -->
 
 
     <!-- student behavior view summary modal -->

FirstApp/urls.py

@@ -181,6 +181,12 @@ urlpatterns = [
     # retrieves lecture activity summary
     url(r'^get-lecture-activity-summary/$', api.GetLectureActivitySummary.as_view()),
 
+    # retrieves lecture activity summary
+    url(r'^get-lecture-emotion-summary/$', api.GetLectureEmotionSummary.as_view()),
+
+    # retrieves lecture activity summary
+    url(r'^get-lecture-gaze-summary/$', api.GetLectureGazeSummary.as_view()),
+
 
     # routers
     # path('', include(router.urls)),