St.

Rita’s College of Balingasag

Bachelor of Science in Information Technology

Image Processing – “Faculty Classroom Monitoring Using Facial Recognition”

User Interface with Explanations,

Data Dictionary for Database Tables

And

Diagrams with Explanations

By Merl Laurence Dagoc

Joel Agsie

Odemil Uyan

October 11, 2024

 Figure 1: Login Page

This is the Login Page, where users can securely enter their credentials to access the

system. The page includes fields for entering the username or email address and password,

with an option to toggle password visibility. It also features a "Remember Me" checkbox for

users who wish to stay logged in across sessions, reducing the need to enter credentials

repeatedly.

If a user forgets their password, a "Forgot Password?" link is provided, allowing them to

initiate a password recovery process through email verification. The login form is designed with

a clean and intuitive user interface to ensure ease of use across different devices, whether

desktop, tablet, or mobile.

Upon submission, the entered login credentials are validated by the system, ensuring the

security and integrity of user accounts. Depending on the user role (e.g., Administrator, Read-

Only User), different functionalities and dashboards will be presented upon successful login. If
the login attempt fails, an appropriate error message will notify the user, with guidance to retry

or reset the password if necessary.

Figure 2: Dashboard – Overview

 This is the Dashboard Page that greets the user upon successful login. It provides an

overview of key system metrics. The dashboard is designed to offer users a quick glance at the

system's performance, focusing on critical data relevant to classroom monitoring and teacher

attendance.

The dashboard overview displays weekly metrics, including:

 Recognition Records: A summary of facial recognition events, indicating how many

teachers have been successfully identified throughout the week.

 Classroom Occupancy Records: Data showing the occupancy levels of classrooms,

helping to track compliance with scheduled classes.

Additionally, the dashboard provides comprehensive insights through the following key metrics:

 Overall Attendance: A breakdown of teacher attendance, showing present rates over a

specified period.

 Overall Classroom Occupancy: Metrics showing how well classrooms are utilized,

highlighting any inconsistencies such as nonobservant occupancy and absent.

 Latest Attendance: Displays the most recent attendance records, allowing administrators

to stay up to date with the latest teacher check-ins.

 Latest Recognition Events: A log of the most recent successful facial recognition

matches, showcasing which teachers were detected and when.

 Today's Schedule: A list of scheduled classes and their corresponding teachers for the

day, providing an easy reference for ongoing and upcoming classroom activities.
 The dashboard may also include visualizations like graphs, charts, and tables to present data

in a clear and digestible format, helping users identify trends and anomalies at a glance.

Depending on the user's role, access to these features may vary, with administrators having full

control over system management, while read-only users are limited to viewing reports and

summaries.
Figure 3: Dashboard – Attendance and Classroom
The Dashboard – Attendance and Classroom page provides users with comprehensive insights

into teacher attendance and classroom occupancy, with the ability to filter data by a specified

date range. Key metrics are displayed, including an attendance line chart that visualizes daily

attendance trends and present rates over time. The dashboard also highlights a list of teachers,

showcasing those with the highest absenteeism rates and the most noncompliance in terms of

classroom occupancy.

A doughnut chart provides a visual summary of overall classroom occupancy,

categorizing it into compliant, noncompliant, and absent sessions. Additionally, a bar graph

presents the number of class sessions held, detailing compliance versus noncompliance

occurrences for each day.

At the bottom of the page, there is a table displaying detailed classroom monitoring

records. This table includes information such as the teacher’s name, subject, assigned classroom,

actual room occupied, detection start and end times, occupancy remarks, and the date of the

record. This layout allows users to review and analyze attendance and classroom utilization at a

granular level, making it easy to track compliance and detect patterns in classroom usage.
 Figure 4.0: Teacher Performance Page – Teacher Selection

The Teacher Performance page begins by prompting the user to select a teacher from

the list. Once a teacher is selected, the page dynamically updates to display the teacher's profile

along with detailed performance metrics.

These performance metrics include a table of attendance records, where users can filter

the displayed records by date range or search for specific entries. Additionally, an attendance

line chart visually presents the teacher’s attendance trends, showing the percentage of days the

teacher was present. This chart can also be customized by adjusting the date range for deeper

insights into the teacher's performance over time.

 A doughnut chart provides a breakdown of the teacher's classroom occupancy,

categorizing it into compliant, noncompliant (nonobservant), and absent rates, again adjustable

by date range. This layout allows for an in-depth analysis of a teacher's attendance patterns and

classroom behavior, making it easy for users to assess performance comprehensively.

Figure 4.1: Teacher Performance Page – Teacher Performance Details

 Figure 5.0: Manage Teachers – Add Teacher

This page allows administrators to add new teachers by entering the required teacher

information into the system. Administrators are prompted to provide key details such as the

teacher's personal information (e.g., name, birthday, address), departmental assignment, and

other relevant data.

Once the information is submitted, it is stored in the system's database and can be used

for attendance tracking, schedule management, and classroom monitoring. This streamlined

process ensures that all necessary teacher details are accurately captured and integrated into the

system for effective management and performance tracking.

 Figure 5.1: Manage Teachers – Manage Schedule (Teacher Selection)

This page allows users to manage teacher schedules efficiently. Users must first select a

teacher, after which they will be redirected to the next tab displaying a weekly calendar view.

The calendar presents schedules in a clear, visually appealing format, with bar time slots

representing scheduled activities throughout each day.

 Figure 5.2: Manage Teachers – Manage Schedule (Calendar View)

The interface enables users to interact intuitively with the calendar—by clicking and

dragging to create new schedule entries, or clicking existing entries to modify or archive them.

Below the calendar is a section that lists archived schedules, providing administrators with the

option to either restore archived entries or permanently delete them from the system. This setup
streamlines schedule management and enhances the user experience by making it simple to

visualize and edit teacher schedules.

Figure 6: Manage Teacher – Manage Lists

This page enables administrators to manage teacher information effectively. Similar to

the Manage Schedule page, administrators first select a teacher from the Select Teacher tab.

Once a teacher is selected, the interface dynamically updates to display the teacher's details.

Administrators are provided with options to update the teacher’s information or, if necessary,

delete the teacher entirely from the system. The layout is designed to ensure smooth navigation

and quick actions, allowing administrators to easily modify personal data or remove records,

keeping the system's information accurate and up to date.

 Figure 7: System – Face Enrollment

This page enables administrators to enroll teachers' facial data into the system for use

with the facial recognition module. On the left side of the page, a teacher list is displayed,

allowing administrators to select a teacher. Once selected, the page dynamically displays the

enrolled images associated with the teacher, if available.

Administrators can add new images, which will be processed for face descriptor updates.

Additionally, the images can be viewed in a modal view, providing a larger display for easier

inspection. From this modal, administrators can also delete images if needed. The page ensures

that the face descriptors for the selected teacher can be updated to improve the accuracy and
performance of the facial recognition system. This functionality ensures the system is kept up to

date with the latest teacher facial data for optimal recognition accuracy.

Figure 8.0: System – Classroom Monitoring

This page allows administrators to view available classrooms for monitoring. To

display the classrooms, administrators must first add transcode servers associated with each
classroom. Once the transcode servers are set up, the page provides an overview of the

classrooms ready for monitoring.

Additionally, the page includes facial recognition settings, allowing administrators to

adjust and customize the settings to suit the overall classroom environment. Before starting the

monitoring process, administrators can preview the classroom stream to verify its quality and

connectivity. Once the stream is confirmed to be working properly, the monitoring process can

be initiated to track classroom activity and facial recognition.

This functionality ensures that classrooms are properly configured for monitoring,

providing administrators with control over both the technical setup and the environmental tuning

of the facial recognition system for accurate and effective monitoring.

Figure 8.1: Classroom Monitoring – Monitoring Pop – up Page

This pop-up page appears when the Start Monitoring button is clicked on the classroom

monitoring page. It displays the live video stream from the classroom camera, allowing

administrators to initiate the monitoring process seamlessly.

On this page, administrators can view several important features:

 1. Video Stream Output: The primary focus of the pop-up is the live feed from the

classroom, providing real-time visuals of the environment.

2. Bounding Boxes: The system highlights detected individuals with bounding boxes,

making it easy to identify and track the presence of teachers and students within the

classroom.

3. Face Recognition Activity: This section displays crucial data related to the detected

teachers, including:

o Teacher ID: The unique identifier for the detected teacher.

o Teacher Name: The full name of the teacher recognized by the system.

o Calculated Presence Percentage: A key metric that indicates the teacher's

presence in the classroom. This percentage is derived from the Frame-Based

Detection Threshold Tracking subroutine, ensuring accurate tracking of

attendance and classroom engagement.

This pop-up page serves as a comprehensive monitoring interface, empowering

administrators with the tools they need to oversee classroom activity effectively and ensure the

system operates smoothly.

 Figure 9: System – Manage Transcode Servers

This page allows administrators to manage the transcode servers associated with the

classroom cameras effectively. It serves as a centralized hub for all transcode server activities,

providing a user-friendly interface for the following functionalities:

1. Add Transcode Servers: Administrators can easily input details for new transcode

servers, including essential configurations such as RTSP addresses, transcoding settings,

and other relevant parameters.

2. Test Server Connectivity: A built-in testing feature enables administrators to verify the

connectivity and performance of newly added transcode server before deployment,

ensuring reliable streaming.

 3. Run Transcode Servers: Administrators can initiate the transcoding process directly

from this page, enabling the conversion of RTSP streams to a compatible format for HLS

(HTTP Live Streaming).

4. Delete Transcode Servers: For effective management, administrators have the option to

remove any unnecessary, problematic or outdated transcode servers from the system.

Overall, this page streamlines the administration of transcode servers, ensuring that

classroom monitoring is both efficient and reliable.

Figure 10: System – Manage Users

This page allows administrators to manage read-only users within the system. Read-only

users typically include program heads and other authorized individuals who require limited
access to the system for monitoring and reporting purposes. Key functionalities of this page

include:

1. Add Read-Only Users: Administrators can easily create new read-only user accounts by

entering essential information such as name, email, and role. This streamlined process

ensures that authorized personnel can be added efficiently.

2. Modify User Information: Administrators have the ability to update existing user

details, ensuring that the information is current and accurate. This feature supports

changes in roles, contact information, or other relevant data.

3. Activate/Deactivate Users: The administrator can set read-only users to either active or

inactive status. This functionality is crucial for managing access to the system, allowing

administrators to control who can view sensitive data and reports.

4. User Permissions: The page provides clarity on the permissions granted to read-only

users, ensuring they can only access the necessary information without the ability to

make changes to the system.

Overall, this page serves as a vital tool for administrators to efficiently manage read-only

users, facilitating effective oversight and data access while maintaining security within the

system.
 Figure 11.0: System Logs – All Activities

This page shows all activity logs. The system logs and user logs are displayed here.
 Figure 11.1: System Logs – System Activities

This page shows system activity logs like nonobservant teacher detected, face recognition

settings changed, transcode server error and other system related activities.
 Figure 11.2: System Logs – User Activities

This page shows user activity logs like schedule modification activities, teacher

modification activities, and other user related activities.

 Figure 12.0: Profile – My Activities

This page presents the User Profile Information, offering users a comprehensive

overview of their account details and activities within the system. The profile overview displays

essential user information, including the user's full name, registered email address, department,

address, and profile picture, which users can update to personalize their accounts.
 The My Activities tab provides a detailed log of the user’s interactions with the system,

showcasing activity names, dates, and descriptions. This allows users to easily track their

engagement and contributions.

Figure 12.1: Profile – Settings

In the Settings tab, users can manage and update their account information effectively.

They can edit personal details such as their name, address, and department, as well as change

their profile picture. Additionally, users can securely update their password to maintain account

security.

The layout is designed for intuitive navigation, allowing users to switch effortlessly

between the My Activities and Settings tabs. Clearly labeled sections and a logical arrangement
of information make it easy for users to find and modify their details. This User Profile

Information page empowers users to take control of their accounts by providing a centralized

location to monitor their activities and update their personal information, ensuring their profiles

are accurate and reflect their current status within the system.

Figure 13: Notification Widget

The Notification Widget serves as a streamlined interface that showcases the latest

activities within the system. By providing real-time updates, this widget allows users to stay
informed about recent developments and actions without needing to navigate to the system logs

page.

Designed for efficiency, the notification widget acts as a convenient shortcut, enabling

users to quickly access and review new activities at a glance. Its user-friendly layout ensures that

important alerts and notifications are prominently displayed, allowing users to remain engaged

and aware of ongoing events and changes within the system. This functionality enhances user

experience by minimizing the need for unnecessary navigation, ensuring that relevant

information is readily available for immediate review.