Projects >
Explore Acct4
Acct4 is a website based attendance system that uses QR code technology. This website is extremely customizable yet easy to use.
Skills Used
- HTML
- CSS
- JavaScript
- Python
- Flask (login, forms, db, etc.)
- SQLAlchemy
- Bootstrap
- OpenCV
Features
- QR Code webcam scanner
- Attendance Tracking by date
- Customizable members and tags
- QR Code generation
- Email reminders
Code Side-by-side
Feature
Create Account
Acct4 allows users to create an account on the website so that they can save their attendance data and custom setup. This is done using Flask's login system and forms. By saving their data, users can easily save their added members, tags, and more.
Code snippet
<div class='row justify-content-center'>
<form method="POST" class="text-center pt-4" style="width: 100%;">
<h3>Login</h3>
{{ form.hidden_tag() }}
{% if not current_user.is_authenticated %}
<div class="form-group" style="width: 100%;">
{{ form.username(class_="acct-input mt-2") }}
</div>
{% endif %}
<div class="form-group" style="width: 100%;">
<p style="margin-top:2%;"></p>
{{ form.password(class_="acct-input mt-2") }}
</div>
<div class="form-group mr-auto">
<p style="margin-top:11%;"></p>
{% if not current_user.is_authenticated %}
{{ form.lgf_submit(class_="btn btn-success ds", style="border-radius: 10px; height:70%; width:80%; ") }}
{% else %}
{{ form.verify(class_="btn btn-warning ds", style="border-radius: 10px; height:70%; width:80%; ") }}
{% endif %}
<p style="margin-top:11%;"></p>
</div>
</form>
</div>
Feature
QR Processing
This feature is the heart of the Acct4 website. With one simple scan, the server will quickly process your personal QR code to figure out who you are! This is done using OpenCV's image processing and python. Javascript is also utilized to send the image data to the server and respond accordingly.
Code snippet
@app.route('/upload_frame', methods=['POST'])
def upload_frame():
data = request.json
frame_data = data['frame'].split(',')[1]
frame_bytes = base64.b64decode(frame_data)
np_arr = np.frombuffer(frame_bytes, np.uint8)
frame = cv2.imdecode(np_arr, cv2.IMREAD_COLOR)
check_in_time = data['time']
check_in_date = data['date']
scan_mode = data['scan_mode']
response = decode_frame(frame, check_in_time, check_in_date, scan_mode)
if response != None:
member_id = response[0]
action = response[1]
return jsonify({"member_id": member_id, "action": action})
else:
return "None"
Feature
Database
Acct4 uses SQLAlchemy to manage its database. This allows for easy access to the database and quick setup. The members table in this example has multiple attributes that are customizable by the user and stores 8 digit ids to identify each member.
Code snippet
class Members(db.Model):
__tablename__ = "Members"
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String)
member_id = db.Column(db.Integer)
name = db.Column(db.String)
email = db.Column(db.String)
planning_period = db.Column(db.String)
tags = db.Column(db.String)
Feature
Customization
With a goal to make this website accessible and useful for all groups, Acct4 allows users to customize their experience. The Tags feature allows for short descriptions to be added to members. This image shows an example of how a school may customize their tags to include subjects and planning periods.
Code snippet
if addtagform.atf_submit.data and addtagform.validate():
my_tags = Tags.query.filter_by(username=flask_login.current_user.username).all()
tag_names = [tag.name for tag in my_tags]
temp_name = addtagform.tag.data
if temp_name in tag_names:
suffix_num = 1
temp_name = temp_name + str(suffix_num)
while temp_name in tag_names:
suffix_num += 1
temp_name = temp_name[0:-1]
temp_name = temp_name + str(suffix_num)
new_tag = Tags(username=flask_login.current_user.username, name=temp_name, color = addtagform.color.da
db.session.add(new_tag)
db.session.commit()
return refresh('tags')
You made it to the end! Check out the full project here:
Visit Acct4 >OR Take me to another project:
Back to Projects <