Smart Attendance System

The Smart Attendance System is an innovative solution developed using PictoBlox that automates the process of recording attendance in schools, offices, or any organization. Traditional attendance methods are time-consuming and prone to errors. This system addresses those issues by integrating AI-based face detection and CSV data management for accurate and efficient attendance tracking.

By using a webcam and simple block-based coding, the system identifies individuals, records their details like Employee ID and Name, and logs their login/logout times into a structured CSV file. The interface also supports dynamic paragraph blocks for improved user interaction.

This project demonstrates how AI and automation can be effectively used in educational settings or real-world scenarios to streamline routine tasks and ensure reliable data handling.

1. Computer with PictoBlox Installed
2. Web Camera
3. Internet connectivity

Open PictoBlox Software & select Block coding Environment.

Now add all the extensions that are mentioned below

1. Face Detection
2. Content creation
3. Sheets & Data logger
4. Text to Speech

Click on the "content creation" Block palette & click on "make a Paragraph."

1. Add all the necessary details, such as name, header, body, and image.
2. Create two buttons for Employee & Admin.
3. Select size & theme, along with the alignment of text

Please follow all the steps mentioned to create another paragraph.

1. Add all the necessary details like Name, header, body, and image.
2. Create three buttons for Login, Logout & Back
3. Select size & theme, along with the alignment of text

1) From the Events palette, drag:

1. when green flag clicked

This begins the script when the project starts.

2) From the Looks palette, add:

1. hide

This makes the sprite invisible at the start.

3) From the face detection extension blocks, add:

1. turn off video on stage with 0% transparency

This disables the camera/video feed on the stage.

4) From the Data logger blocks, add:

1. create file [Staff Attendance 2026]

This creates a file with the name Staff Attendance 2026

5) Now add the data-setting blocks one by one.

First data field:

1. set data 1 to [EMP ID]

This stores the label for employee ID.

Second data field:

1. set data 2 to [EMP Name]

This stores the label for employee name.

Third data field:

1. set data 3 to [Login]

This stores the login field.

Fourth data field:

1. set data 4 to [log out]

This stores the logout field.

6) Add the block:

1. save data

This saves all the entries into the file you created.

7) Add the block:

1. show [Intro] on stage

This displays the Intro screen or paragraph.

8) Add the block:

1. hide [Employee] on stage

This hides the Employee screen or Paragraph.

1) From the Content Creation, drag:

1. when [Intro] [Employee] is clicked

This is the trigger that starts the script when that item is clicked.

2) From the Content Creation, drag:

1. hide [Intro] on stage

This makes the Intro section disappear.

3) Add the next block:

1. show [Employee] on stage

This makes the Employee section appear.

1) From the Content Creation, drag:

1. when [Employee] [Back] is clicked

This starts the script when the Back button on the Employee screen is clicked.

2) Add the block:

1. show [Intro] on stage

This makes the Intro page visible again.

3) Add the block:

1. hide [Employee] on stage

This removes the Employee page from the stage.

1) From the Content Creation, drag:

1. when [Intro] [Admin] is clicked

This starts the script when the Admin option on the Intro page is clicked.

2) Add the block:

1. hide [Intro] on stage

This removes the Intro screen from the stage.

3) Add the asking block from the sensing palette:

1. ask [What is the employee ID?] and wait

This prompts the user to enter the employee ID.

4) Add the data block:

1. set [Emp ID] to [answer]

This saves the typed employee ID into the variable Emp ID.

5) Add another ask block:

1. ask [What is the Name of employee ?] and wait

This asks for the employee’s name.

6) Add the next data block:

1. set [EMP Name] to [answer]

This stores the entered name in the variable EMP Name.

7) Add the video block from face detection block palette:

1. turn on video on stage with [0] % transparency

This activates the camera feed on the stage.

8) Add:

1. wait [1] seconds

This gives the camera a moment to start properly.

9) Add:

1. show [bounding box]

This displays the detection box on the camera image.

10) Add:

1. wait [0.5] seconds

This adds a short pause before the next step.

11) Add from the face detection block palette:

1. analyse image from [camera]

This tells PictoBlox to process the live camera image.

12) Add another pause:

1. wait [0.5] seconds

This gives the system time before classification.

13) Add the classification block:

1. add class [Emp ID] as [EMP Name] from [camera]

This links the camera capture with the entered employee details.

14) Add:

1. wait [1] seconds

This allows the recognition/classification action to complete.

15) Add:

1. turn off video on stage with [0] % transparency

This stops the camera feed.

16) Add from content creation block palette:

1. show [Intro] on stage

This returns the display back to the Intro page.

1) From the Content Creation, drag:

1. when [Employee] [Login] is clicked

This starts the script when the Employee Login button is clicked.

2) Add:

1. hide [Employee] on stage

This removes the Employee page from the screen.

3) Add from face detection block palette:

1. turn on video on stage with [0] % transparency

This starts the camera feed with no transparency.

4) Add:

1. wait [0.3] seconds

This gives the camera time to start properly.

5) Add:

1. show [bounding box]

This displays the face-detection box on the camera.

6) Add:

1. wait [0.2] seconds

This gives the system a short pause before analysis.

7) Add from face detection block palette:

1. analyse image from [camera]

This processes the live camera image.

8) Add:

1. wait [0.2] seconds

This gives the analysis a moment to complete.

9) Add from face detection block palette:

1. do face matching on [camera]

This checks the face against the saved classes.

10) Add:

1. wait [0.2] seconds

This gives the face matching operation time to finish.

First condition: Face Class 1 detected

11) Add:

1. if [ ] then block

This checks whether Class 1 is recognized.

12) Inside the IF block, add:

1. show

This makes the result visible.

13) Add:

1. speak join [Hello] [get class of face 1 detected]

This speaks a greeting such as:

1. Hello [name]

14) Add from face detection block palette:

1. say [get class of face 1 detected] for [2] seconds

This displays the recognized name for 2 seconds.

15) Add from Content Creation & face detection:

1. set [data 2] to [get class of face 1 detected]

This stores the employee name.

16) Add:

1. set [data 1] to [01]

This stores the employee ID as 01.

17) Add:

1. set [data 3] to [get timestamp]

This stores the login time.

18) Add:

1. save data

This saves the attendance record.

Else branch for Class 2 and others

If Class 1 is not detected, the script moves to the next checks.

19) Wait before the next check, Add:

1. wait [0.5] seconds

This pause appears before checking the next class.

Second condition: Face Class 2 detected

20) Add the next IF then block

1. if [ ] is [2] class detected then

This checks whether Class 2 is recognized.

21) Inside this block, add:

1. show

22) Add:

1. speak join [Hello] [get class of face 1 detected]

23) Add:

1. say [get class of face 1 detected] for [2] seconds

24) Add:

1. set [data 2] to [get class of face 1 detected]

25) Add:

1. set [data 1] to [02]

26) To save the timestamp, add:

1. set [data 3] to [get timestamp]

27) To save the data, add:

1. save data

Else branch for Class 3

Similarly, implement the script as per the classes' implementation over the images.

1) From the Content Creation, drag:

1. when [Employee] [Log out] is clicked

This starts the logout process when the Log out button is clicked.

2) Hide the Employee screen

Add:

1. hide [Employee] on stage

This removes the Employee page from the stage.

3) Turn on the video feed

Add:

1. turn on video on stage with [0] % transparency

This activates the camera feed.

4) Wait a short time

Add:

1. wait [0.3] seconds

This gives the camera time to start properly.

5) Show the bounding box

Add:

1. show [bounding box]

This displays the face-detection box on the camera view.

6) Wait again

Add:

1. wait [0.2] seconds

This adds a short pause before analysis.

7) Analyse the image from the camera

Add:

1. analyse image from [camera]

This processes the live camera image.

8) Wait again

Add:

1. wait [0.2] seconds

This gives the analysis time to complete.

9) Do face matching

Add:

1. do face matching on [camera]

This checks the captured face against the stored classes.

10) Wait again

Add:

1. wait [0.2] seconds

This allows the face matching to finish.

First condition: Class 1 detected

11) Add the IF block

Add:

1. if [ ] is [1] class detected then

This checks whether Class 1 is recognized.

12) Show the result

Inside the IF block, add:

1. show

This makes the result visible.

13) Speak the logout message

Add:

1. speak join [Thanks, See you tomorrow] [get class of face 1 detected]

This speaks a message like:

1. Thanks, See you tomorrow [name]

14) Say the detected name

Add:

1. say [get class of face 1 detected] for [2] seconds

This shows the detected name on screen for 2 seconds.

15) Save the detected name in data 2

Add:

1. set [data 2] to [get class of face 1 detected]

This stores the employee name.

16) Save the employee ID in data 1

Add:

1. set [data 1] to [01]

This stores the employee ID as 01.

17) Save the logout timestamp in data 4

Add:

1. set [data 4] to [get timestamp]

This records the logout time.

18) Save the data

Add:

1. save data

This saves the logout attendance record.

Else branch for Class 2 and Class 3

If Class 1 is not detected, the script moves to the next checks.

19) Wait before the next check

Add:

1. wait [0.5] seconds

This pause appears before checking the next class.

Second condition: Class 2 detected

20) Add the next IF block

Add:

1. if [ ] is [2] class detected then

This checks whether Class 2 is recognized.

21) Show the result

Inside this block, add:

1. show

22) Speak the logout message

Add:

1. speak join [Thanks, See you tomorrow] [get class of face 1 detected]

23) Say the detected name

Add:

1. say [get class of face 1 detected] for [2] seconds

24) Save the detected name

Add:

1. set [data 2] to [get class of face 1 detected]

25) Save the employee ID

Add:

1. set [data 1] to [02]

26) Save the logout timestamp

Add:

1. set [data 4] to [get timestamp]

27) Save the data

Add:

1. save data

Else branch for Class 3

Similarly, implement the script as per the classes' implementation over the images.

Link: https://drive.google.com/drive/folders/1bmarB5eEn2WfvKRnICjlIc8zFvRtfcU_

1. Understand face detection and recognition using AI.
2. Create an interactive UI with buttons and paragraphs.
3. Use block-based coding for automation.
4. Control the webcam and analyze real-time video.
5. Record data in CSV format (login/logout).
6. Capture and log timestamps.
7. Develop real-world problem-solving skills.

The Smart Attendance System, developed in PictoBlox, successfully demonstrates how AI and automation can simplify everyday tasks like attendance tracking. By integrating face recognition, real-time timestamping, and data logging, the system ensures accuracy, efficiency, and ease of use. This project not only enhances technical skills in AI and programming but also provides a practical solution for modern institutions and workplaces.