The purpose of this post is to describe how I implemented count-up and countdown timers integrated with OpenLP.<br><br>I hope the discussions can be on:<br>
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.<br><br>Overview<br>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<br><br>Display<br>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.<br><br>Implementation<br>The code to support the timers has been added to a custom stage.js. <br>stage.html has been modified to add HTML DIV tags for the timers. <br>stage.css has been modified to include formatting tags for the timers.<br><br>Installation<br>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.<br><br>Then set up custom stage views, as per the manual. https://manual.openlp.org/stage_view.html#custom-stage-views<br>In the folder name of your choice, say "timer", you can place the attached files.<br>Now, assuming you haven't changed the default port for your remote web plug-in, on your OpenLP PC you could visit:<br>http://127.0.0.1:4316/stage/timer/stage.html for timers overlaid on the stage view<br>http://127.0.0.1:4316/stage/timer/live.html for timers overlaid on the live view<br>http://127.0.0.1:4316/stage/timer/timer.html for just timers<br><br>You could have different devices looking at different timer views at the same time.<br><br>Customisation<br>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.<br><br>Design<br>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:<br> var redLimit = Math.max(1,OpenLP.countdownLength/20);<br> var orangeLimit = Math.max(2,OpenLP.countdownLength/4);<br>The countdown is simply minutes; it is not intended to be used for the numbers of days and hours until Christmas.<br><br>Usage<br>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. <br><br>We look for "#countup" (without the quotes) to start a countup timer and "#countup stop" to remove it. Case is ignored.<br><br>"#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.<br><br>t is a time format. 24 hour time is safe e.g. 2325, but the code will accept a range of formats such as:<br>23:25, 11:25pm, 11.25pm, 11.25p, 10.30a, 7am, 8p<br>The code is designed to correctly process any valid time format, but not to ensure that any given time format is valid.<br><br>Example usage<br>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:<br><br>Pre-Service Prayer #Countdown 9.45am<br>Service Start #Countdown 10a<br>Opening Song #Countup #Countdown stop<br>Lion and the Lamb (He's Coming)<br>#CountUp stop<br>Peace <br> -- this slide actually displays a response for sharing the peace. It has an attached note: #countdown 2<br>#Countdown stop<br>Worship Song Bracket #CountUp<br>Mighty To Save<br>How Great is Our God<br>Build My Life<br>#Countup stop<br>Intercession #Countdown 3<br>Lord's Prayer (Intercession)<br> -- this slide displays the Lord's Prayer. It has an attached note: #countdown stop<br>Reading - Old Testament<br>Reading - New Testament<br>Reading - Gospel<br>Sermon #Countdown 20<br>Sermon Finish #Countdown stop<br>Champion (oh victory)<br>... etc<br>