Skip to content
JF's Logo Julian Frank

Screen Timer that keeps the screen unlocked

This weekend I built myself a tiny timer that keeps the screen unlocked

Background

Section titled “Background”

The “Screen On Timer” project was inspired by the need to keep a device’s screen awake for a specified duration without manual intervention. This is particularly useful for presentations, reading sessions, or any scenario where the screen timeout feature of a device becomes inconvenient. I definitely need this when large builds are going on and I want the system from locking out. I’ve had many variants of this over the years as local html file but this time I decided to publish as a public lab in my website. You can check it out here

Structure

Section titled “Structure”

The project is built on Astro running in SSG mode and consists of the following key components:

  1. HTML Structure: A simple and intuitive user interface with an input field for duration, start and pause buttons, and a display for the countdown timer.
  2. JavaScript Logic: Handles the timer functionality, wake lock management, and speech synthesis for audio feedback. This actually is something new that I tried this time.
  3. CSS Styling: Some basic fine tuning to make it look good

The core functionality revolves around the WakeLock API to prevent the screen from turning off and the SpeechSynthesis API to provide voice notifications.

About Screen On Timer

Section titled “About Screen On Timer”

The “Screen On Timer” allows users to:

  • Set a timer in minutes using an input field.
  • Start the timer, which keeps the screen awake for the specified duration.
  • Pause and resume the timer as needed.
  • Receive voice notifications at regular intervals and when the timer ends.

The project ensures accessibility and usability by providing both visual and auditory feedback. It also includes safeguards, such as releasing the wake lock when the timer is paused or ends.

What I Learnt

Section titled “What I Learnt”

Working on this project provided valuable insights into:

  1. Web APIs: Gained hands-on experience with the WakeLock and SpeechSynthesis APIs, understanding their capabilities and limitations.
  2. Timer Management: Learned how to implement and manage timers effectively, including handling edge cases like pausing and resuming.
  3. User Experience: Focused on creating an intuitive and accessible interface that caters to diverse user needs.
  4. Code Organization: Improved skills in structuring code for readability and maintainability, especially when combining HTML, CSS, and JavaScript.
  5. Native HTML5 Speech Synthesis: This is now supported in most modern browsers and so I wanted to try it out. I was shocked at how simple this was ultimately.

Bottomline, good useful coding this weekend.