BooM helps to detect the people who are not paying attention for your speech.
- node - v14.15.4
- npm - v6.14.10
- express - v4.16.1
- ejs - v2.6.1
- firebase
- firebaseui
- dotenv
- Auth
- Firestore
- Hosting
- flask - v1.1.2
- pyautogui - v0.9.52
- fast.ai - v1.0.61
In BooM App page you can use these functions :
- Analyze video conference meetings' attention figure
To run our app page code you should type a command like below :
python flask-screenshot.py
- This file is script for overall features of app team.
- We take some screen shots of clients' display, and analayze the attention figures of video conference meetings by loading our learnde model for detecting attention status.
- After calculate the figures, it sends them to our firebase database so our clients can see them through the graphs.
- There are customized predict function for our model, so you can import this file for module on the flask-screenshot.py file and use it for prediction.
- It will return the result of detecting attention status, for labels.
- Users can click the start button on this page to start analyze their video conference meeting.
- After click the start button, users have to wait on this page if they want to analyze their meeting.
- If you want to stop analyzing it, you can just click the stop button and go back to the previous page.
In BooM webpage you could experience the following functions :
- Make class
- Real-time attention statistics
- Total attention statistics
- History of attention statistics for your class
To run our code you should type a command like below :
node bin/wwwOR
npm start
# Code
## .env
Before using firebase to your nodeJS you need to make .env file with your firebase keys in.
```jsx
FIREBASE_API_KEY = xxxxx
FIREBASE_AUTH_DOMAIN = xxxxx
FIREBASE_PROJECT_ID = xxxxx
FIREBASE_STORAGE_BUCKET = xxxxx
FIREBASE_MESSD_ID = xxxxx
FIREBASE_APP_ID = xxxxx
FIREBASE_MEASUREMENT_ID = xxxxx
- This act as router, redirecting each page. Also it could send and receive datas for page or firebase-database.
- This is a first page when you come to our website. You must login to use our website. When you succeed the login process then router will render you to index.ejs, which is our main page.
- But if you don't have an account you should click then button for making account. Then router will redirect you to newUser.ejs for making account.
- This sends email and passwords to firebase and check if it is existing user.
- This is our main page after login process.
- If you click the start button, the router will send you to element.ejs page for allow you to make new class.
- If you click the buttons of sidebar, the router will send you to page that you clicked for.
- Get data from DB through index.js.
- Only the current user's current class data fetches.
- This data pushed into array called rows.
- Used google charts to represent the data.
- If the calss has not started yet, not the chart but the message comes up.
- Enter the information of a class here. (information : subject, number of students, when the class starts, when the clas end)
- This information goes go "/makeclass".
- At "/makeclass"(which is in index.js ) , add input data to DB.
- Then, redirect to Real-Time page.
- This page is for making new account.
- There is format for account ID has to be email format and Password has to be over 6 character.
- After clicking submit button. The router sends this information to firebase and check the format of ID and Password. And also check if the ID(email) is already in use. After it is successfully submitted it rendirect to fb.ejs which is the login page.
- This page gets the information of class (subject, number of student, class time, etc..) from user, generates class by opening the app and redirects to realtime.ejs page which shows real-time attention gauge of class.
- This page gets userID as input and send this information to app with randomly generated classID and some inputs form user. Then apps stores information to database based on this informations.
sidebar - click 'after class'
when the application terminates, the user will be automatically redirected to this page.
- You can see the total attention gauge of the session you just finished in the form of line graph.
- if you put your mouse on the chart, you can click the point and see the screenshot taken by the application.
- Previous classes are sorted by date. If you take the link connected to each class, you can see the statistics of class concentration in a chart.
- Retrieve the document from the'people-space' collection from firestore. Users can only view their currently logged-in class, not other users' classes.
- It has a function that can be seen in the to do list app. Classes were grouped and categorized by subject. Classrooms are created for each subject.
- You can add/delete documents from the subject collection in firestore. Each document has a subject name, name.
- When you enter the classroom created by subject, you can see classes sorted by group and date. Like the history page, you can check the total gauge chart for each class.
- firestore에는 사용자 당 하나의 컬랙션을 가지는 것이 아니다.
- This is a page that moves when you press the total gauge button located in each class column on the'/history' and'/byClass' pages.
- Use the Google Chart API for concentration statistics. You can toggle between line, table, bar, pie, and area charts.
<!--GOOGLE CHART API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>Class information
- class id
- class start,end time
Chart
- realtime (time that screenshot was taken)
- attention gague
- fileID (url to screenshot)
- class now working - table_name : on-air
- subject (string)
- teacherID : user’s id (string)
- start (timestamp)
- end : when to end (timestamp)
- stuNum : total number of student (number)
- every class info - table_name : people-space
- subject (string)
- teacherID (string)
- start (timestamp)
- end (timestamp)
- stuNum (number)
- attendance (number)
- fileID : picture of that time (string)
- time : time when picture is taken (timestamp)