My Health Bar

• 

• GIF

• GIF

• 

  Extension running on a website before screen time limit is reached

• 

  Extension running on a website when screen time limit is almost/already reached

• 

  Complete reminder/warning to increase screen time (Top icon: Park + Take a walk) (Bottom icon: Drink water)

• 

  Clicking the Park Icon will bring you to a map to suggest parks to go to

• 

  Health bar increasing when screen closed or an event (going to the park/drinking water) is being completed

• 

  Health Bar can also be moved to avoid blocking programs running in the background

• GIF

  Choosing icon to increase screen time

Inspiration

The inspiration for My Health Bar arose from two looming problems; the exploding increase in screen time during the pandemic, as well as the imminent mental and physical stress caused by the continuous use of electronics.

What it does

My Health Bar is a chrome extension that places a health bar at the bottom of your screen and displays the amount of screen time the user has left. As the user continues to use their device, the health bar slowly depletes and changes colour (green to yellow to red) to indicate the amount of time they have left. Once the user reaches their screen time limit (an empty health bar), My Health Bar will display a flashing warning, reminding the user to take a break. The extension also provides a variety of reminders, including taking a walk and drinking water. Users can increase their screen time limit by completing reminders.

How we built it

1. Brainstormed ideas: started with a problem people face and then thought of possible solutions to revolve our application around
2. Brainstormed essential features and a design for the extension
3. Used p5.js, and the chrome.extension API to code

Challenges we ran into

• Health bar running past 0% after the screen time limit was reached
• The health bar moving incorrectly; continues to move after the mouse is released
• Have the icons and images show up properly
• The timer would stop working when the user moved to another tab
• Getting Github set up

Accomplishments that we're proud of

• Having the health bar decrease in relation to elapsed time
• The health bar can be properly relocated; moves along with the mouse cursor when pressed on and stops moving when released
• The timer continues even when the user moves to different tabs or screens.

What we learned

We learned how to use GitHub, p5.js, javascript, and background scripts.

What's next for My Health Bar

GCX is planning to implement customizability for screen time limit (utilize the options menu in the chrome extension), add features to track time spent on individual tabs, allow users to create custom messages/reminders and upgrade the visuals of My Health Bar with different fonts and icons. In future versions, My Health Bar will have an option for users to indicate that they are away from their computer screen to pause the screen time timer.

Built With

• google-chrome-api
• javascript
• p5.js