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.Overview
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 slidesDisplay
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.Implementation
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.Installation
Make sure your remote plug-in is set up and working first. On your OpenLP machine you should be able to see http://127.0.0.1:4316
allows you to control OpenLP. Obviously change 127.0.0.1 to the IP address of your machine if viewing from any other device.
Then set up custom stage views, as per the manual. https://manual.openlp.org/stage_view.html#custom-stage-views
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:http://127.0.0.1:4316/stage/timer/stage.html
for timers overlaid on the stage viewhttp://127.0.0.1:4316/stage/timer/live.html
for timers overlaid on the live viewhttp://127.0.0.1:4316/stage/timer/timer.html
for just timers
You could have different devices looking at different timer views at the same time.Customisation
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.Design
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.Usage
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)
-- this slide actually displays a response for sharing the peace. It has an attached note: #countdown 2
Worship Song Bracket #CountUp
Mighty To Save
How Great is Our God
Build My Life
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)