HeroHours - New Attendance Tracker for FRC

Hi Fellow First Members!

I’ve recently developed (with the help of other team members, alumni, and mentors) a new attendance solution for First teams. HeroHours is a web app designed to be run on localhost (though it wouldn’t complain about being served publicly) that uses Google Sheets with some Google Apps Script sprinkled on top as a back end. A redacted screenshot is available below.

HeroHours is available with limited documentation at https://github.com/FRC5892/HeroHours. I am more than happy to answer questions about it and entertain feature requests however I am extraordinarily busy this FRC season so it may take a while for me to respond and I can’t promise that I’ll be able to implement any new features soon, regardless of how useful they may be.

4 Likes

Hi Fellow First Members!
I’ve recently developed (with the help of other team members, alumni, and mentors) a new attendance solution for First teams. HeroHours is a web app designed to be run on localhost (though it wouldn’t complain about being served publicly) that uses Google Sheets with some Google Apps Script sprinkled on top as a back end. A video of HeroHours in action is available in the ReadMe of the github repositroy.

HeroHours is available with limited documentation at https://github.com/FRC5892/HeroHours. I am more than happy to answer questions about it and entertain feature requests however I am extraordinarily busy this FRC season so it may take a while for me to respond and I can’t promise that I’ll be able to implement any new features soon, regardless of how useful they may be.

HeroHours is responsive however the users listing was designed for a 1280x1024 (“square”) screen and we (webdev mentor and I) haven’t had the time to make media queries or do other responsive magic for other screen sizes so keep that in mind if the users listing looks like it isn’t using its space efficiently (only fits 36 users on wide 19 inch screens, fits 48 on wide 23 inch screens, fits 52 on square 19 inch screens)

Technical Information:

HeroHours is HTML, CSS, and JS. Some Vue3 is used (included with <script>, not a fancy vue app), however the entire app is not a progressive web app. I wouldn’t mind it being a PWA but am not currently in a position to put time into that. HeroHours needs to be served by some sort of server as it uses a .json config file and js fetch refuses to get files with file:/// (probably a security thing). I use python3 -m http.server --directory path/to/HeroHours/dir/ localhost:8000.

HeroHours automatically focuses input on the User ID textbox on page load. When a user enters their ID, HeroHours disables the user id input box until the server has responded with a message. When HeroHours detects that the device is offline, it disables the user id field and displays offline where the mode is usually displayed. When HeroHours detects that the device is back online, it enables the user id field and changes the mode back to the set mode.

HeroHours has a success and error sound so plug a speaker into whatever you run it on.

Kiosk

Our team has set up a kiosk with a raspberry pi, barcode scanner, numberpad, speaker, and monitor. We have edited the autostart file on the pi to run the python3 http server and launch chrome in kiosk mode on boot. More info will be posted when I get to the kiosk. Below is a recent picture of our kiosk (mentor built box, student made extra holes and zipties).

Feel free to contact me either here or with a direct message for implementation support or with documentation or code contributions