How I implemented a count-up and countdown timer integrated with OpenLP

The purpose of this post is to describe how I implemented count-up and countdown timers integrated with OpenLP.

I hope the discussions can be on:
  • any improvements people want
  • assisting anyone wanting to implement something for themselves
  • if and how this could be made more elegant and possibly a mainline part of OpenLP
  • any criticism (constructive or otherwise) on my code
Anyone is welcome to take this, run with it, and make it better, personal or different.

The timers are implemented using the custom Stage view web pages. Instructions to start and stop timers are included as part of the Notes in a service schedule, or the title of the slides

As a custom stage view web page, the timers can be displayed by any device connected on the same network as OpenLP. So phones, tablets, smart TVs, PCs can all be used. Our church is using a 3rd monitor at the back of the church with a Firefox profile set to open on that monitor with the custom stage view as the home page. We have two monitors at the front that mirror the projection screen; my plan is to have those monitors display the projection screen as a live view with timers overlaid.

The code to support the timers has been added to a custom stage.js.
stage.html has been modified to add HTML DIV tags for the timers.
stage.css has been modified to include formatting tags for the timers.

Make sure your remote plug-in is set up and working first. On your OpenLP machine you should be able to see allows you to control OpenLP. Obviously change to the IP address of your machine if viewing from any other device.

Then set up custom stage views, as per the manual.
In the folder name of your choice, say "timer", you can place the attached files.
Now, assuming you haven't changed the default port for your remote web plug-in, on your OpenLP PC you could visit: for timers overlaid on the stage view for timers overlaid on the live view for just timers

You could have different devices looking at different timer views at the same time.

Changes to settings such as timer position, fonts, size and colour must be done by editing the stage.css and stage.js files. I am happy to assist with any questions, but basic changes should be simple for anyone willing to have a go.

My firm belief is that timers should not be a distraction. So there are no seconds. The only changes in the display are per minute, and a colour change as the countdown is close to elapsing. The countdown goes orange in the last 25% (1/4) of time (or last 2 minutes) and red in the last 5% (1/20th) of time (or last minute). The code to change this is:
      var redLimit = Math.max(1,OpenLP.countdownLength/20);
      var orangeLimit = Math.max(2,OpenLP.countdownLength/4);
The countdown is simply minutes; it is not intended to be used for the numbers of days and hours until Christmas.

If a service item has a note, that is checked for timer instructions. If there is no note, then the title is checked. A note will always override the title. The current display slide is checked every 0.5 seconds. Once a timer is started it continues until stopped or replaced.

We look for "#countup" (without the quotes) to start a countup timer and "#countup stop" to remove it. Case is ignored.

"#countdown n" will start the countdown timer for n minutes and "#countdown stop" will remove it. "#countdown t" will count down to a specific local time t; if more than 6 hours in the past, it assumes it is a time for the next day.

t is a time format. 24 hour time is safe e.g. 2325, but the code will accept a range of formats such as:
23:25, 11:25pm, 11.25pm, 11.25p, 10.30a, 7am, 8p
The code is designed to correctly process any valid time format, but not to ensure that any given time format is valid.

Example usage
We use blank slides for transitions between parts of the service and also as an instructional template for where the different slides for the service should be inserted each week. An example of our service schedule slide titles look like this:

Pre-Service Prayer #Countdown 9.45am
Service Start #Countdown 10a
Opening Song #Countup #Countdown stop
Lion and the Lamb (He's Coming)
#CountUp stop
 -- this slide actually displays a response for sharing the peace. It has an attached note: #countdown 2
#Countdown stop
Worship Song Bracket #CountUp
Mighty To Save
How Great is Our God
Build My Life
#Countup stop
Intercession #Countdown 3
Lord's Prayer (Intercession)
 -- this slide displays the Lord's Prayer. It has an attached note: #countdown stop
Reading - Old Testament
Reading - New Testament
Reading - Gospel
Sermon #Countdown 20
Sermon Finish #Countdown stop
Champion (oh victory)
... etc


  • Ok, I'm *really* intrigued.  Help me understand, what's the end result?  This is showing a countdown that only appears on the stage monitor?  Or by using the custom stage view, are your primary projectors / screens showing the countdown as well?

    And here's my real question -- I'm trying to see if it can trigger other events.  Basically, I have a "song" that we play before worship.  It's 36 minutes of soaking prayer music, along with looping (one per minute) suggested prayers for people to offer to God to prepare our hearts for worship.  It works and it's cool.

    Only thing is, the starting time is manual.  The computer operator needs to be sitting at the computer exactly 36 minutes before the worship service starts so he/she can start the music on time.  I'd *love* for it to be automatic -- OpenLP automatically starts the first song at 9:54 so that it's ending at 10:30 when the actual worship service is scheduled to begin.  Based on what you said above:

    t is a time format. 24 hour time is safe e.g. 2325, but the code will accept a range of formats such as:
    23:25, 11:25pm, 11.25pm, 11.25p, 10.30a, 7am, 8p

    My 't' would be 0954, but can I use that time to trigger OpenLP to start my song?

  • Thanks for this cool tool. I have two questions... is there a way to change it to 24 hour display... i could simply remove your tod and check but i preffer a better way (more professional and non desctruive so that user user can reuse it and choss what kind of format they want :) ). By the way.. our speakers and so need seconds.. eg. if you only have 4 Minutes and dont know if the 3 Minute has just started or is nearly over... its a huge difference... but i will try to implement this on my own and remove the min behind because it take up to much of the screen space. (y)
  • I really appreciate this, but is there anyway this could be implemented into the main display? Now that we live stream it would be real convenient to have this on the main as opposed to a web page.
  • Thanks for this. Can I add to to my custom stage view pack? I'll be doing a video on this too. I'll mention this link. 
    Also I may need to modify the code to suit.
Sign In or Register to comment.