Help & Guide

Quick start

1. Open a page in a modern browser such as Chrome or Edge. Double-click index.html (the home page, with a card for every screen), or open one directly: program.html, banner.html, lyrics.html, lowerthird.html or lyrics-lowerthird.html. No internet is needed.
2. Move the window to the projector screen, then press F for fullscreen. Press F again or Esc to leave it.
3. Click once on the page so the browser listens to your keys. After that, use the keyboard only.
4. Move forward with → or Space, back with ←.
5. Need a different slide? On the slideshow type its program item number and press Enter. For example 12Enter jumps to item 12. On the lyrics pages, digits jump to verses instead: 2 jumps to verse 2, and C to the chorus.
6. Forgot a key? Press ? for a quick list on the slideshow and lyrics pages, or H on any page to open this guide in a new tab.

The pages

All screens are designed for a 16:9 projector (1920 × 1080). On other shapes they keep their proportions and add black bars at the sides or top. Text is never stretched.

Switching between pages: keep each page in its own browser tab and use Ctrl + Tab (next tab) or Ctrl + 1, 2, 3… to jump to a tab. Each tab remembers where it was.

Keys that work on every page

Program slideshow program.html

Slide order

Slide 1 is the title, slide 2 the details, slides 3 to 23 are program items 1 to 21, and slide 24 is the closing slide. The small number at the bottom right of each item slide is the item number. A web address such as program.html#5 opens the page at slide 5.

Main banner banner.html

The banner has no controls bar and no on-screen hints. Its outline cross drifts very slowly. If the computer is set to reduce motion, the animation is switched off.

Song lyrics lyrics.html

What is on the lyrics screen

• Top: the song title in gold, always visible, with a short teal bar and the author.
• Middle: the current line, large and bright.
• Bottom left: the section name, for example “Verse 2”, and a row of dots showing which line of the section you are on.
• Bottom right: the song number in a gold block, with the book and edition beside it.
• Left edge: a thin gold bar that grows as the song moves on.

A web address such as lyrics.html#2.5 opens song 2 at line 5.

Lower third lowerthird.html

Using the lower third

The lower third (and the lyrics lower third, which works the same way) is a graphic made to be placed on top of a picture, usually the camera or a live stream. A web page cannot draw on top of another page, so to put it over the slideshow or a camera you need a video program such as OBS Studio, vMix or a video mixer. The page itself has a see-through background so the picture shows around it.

What it shows

• Label (small gold capitals): the role, such as Speaker, Singer or Choir.
• Name (large): the person or group. Very long names shrink so they always fit.
• Detail (smaller, optional): the title, group or church.

Two ways to use it with OBS Studio

1. Window capture with green screen. Open lowerthird.html?bg=green in its own browser window. In OBS add a Window Capture of that window, then add the Chroma Key filter to it. Use this window to press the keys.
2. Browser source. In OBS add a Browser source, choose Local file and pick lowerthird.html, size 1920 × 1080. The background is already transparent. To press keys, right-click the source and choose Interact. Add ?clean=1 if you serve the page from a web address, so no feedback messages appear in the picture.

Options in the web address

Add these after lowerthird.html, starting with ? and joining several with &. Example: lowerthird.html?bg=dark&hide=6&plate=light.

Changing the names

Open lowerthird-data.js in a text editor. Each line is one name:

{ item: 13, role: 'Speaker', name: 'Rev. Sa E Hmô', detail: 'Associate Gen. Secy' },

• item is the program item number, used by “type a number then Enter”.
• role is the small label. Where the program gave only a Mara wording, that wording is used. Change it as you like, for example to Prayer.
• detail may be left empty ('').
• settings.autoHide at the top sets the default seconds before it hides itself.

Save the file and press F5 in the browser.

Lyrics lower third lyrics-lowerthird.html

Use this while a singer or a group sings on a live video. The audience at home sees the words one line at a time at the bottom of the picture. You press a key at the end of each line, in time with the singing. Like the lower third, it is made to be placed over a camera or live stream (see “Using the lower third” for OBS).

What it shows

• Gold block at the left: a cross. If you turn on hymn-book details (key D) and the song has a number, the block shows the song number instead.
• Top row: the song title in gold, then the singer’s name if one is set. With hymn-book details on (D) the book and edition are added. Press I to hide this row and show only the lyrics.
• Middle: the current line, large. When you move on, the old line lifts away and fades out first, then the new line rises in, so two lines are never on screen together. Long lines shrink so they always fit on two lines.
• Thin teal line along the bottom: how far you are through the song.

Showing the singer

Add a singer field to a song in songs.json, for example "singer": "Lialaipi Vaihpi KTP". It appears after the title (and after the book and edition if hymn-book details are on). For a single occasion you can instead add ?singer=Name to the web address.

Options in the web address

Using a presenter remote (clicker)

Most clickers act like a tiny keyboard. They usually send PgDn for next, PgUp for back, and . or B for the black screen. All of these already work on the slideshow and lyrics pages, so a clicker needs no setup.

• Plug the receiver in before opening the page, then click once on the page so it has focus.
• If the clicker does nothing, check that no other program (for example a PowerPoint window) is capturing it.
• A phone or tablet can also work as a keyboard remote through a Bluetooth keyboard app.

Projector setup

1. Connect the projector with HDMI or a video adapter, and turn it on.
2. Choose how to show the screen. On Windows press Win + P and choose Extend (you see your own screen, the wall sees the page) or Duplicate. On a Mac use System Settings, then Displays.
3. Set the resolution of the projector to 1920 × 1080 if it offers it. It then fills the wall exactly.
4. Move the browser window onto the projector screen, then press F.
5. Check from the back of the hall. Text is large, but room light and projector brightness differ. The slides use dark navy by default, which suits a dim hall. In a bright room press T for the light theme.

Good to know

• Works offline. No internet is used. Fonts come from the computer, so letter shapes can differ a little between computers. Always test on the computer you will use.
• Stays awake. The pages ask the computer not to dim or sleep while they are open. Also turn off the screen saver and notifications (Do Not Disturb) for the service.
• Browsers. Recent Chrome or Edge are best. Firefox and Safari work too.

Service-day checklist

• Open banner.html, program.html and lyrics.html in three tabs, each with the right slide or song.
• Press F on each tab once so you know fullscreen works on the projector.
• Run through the lyrics for every song you will use: first line, a verse jump, last line.
• Test your clicker on the slideshow and on the lyrics page.
• Turn off the screen saver, sleep and notifications. Plug the laptop into power.
• If you use the lower third, open lowerthird.html in its own window, check the names, and press V to match your video program (transparent or green).
• If you show lyrics on live video, open lyrics-lowerthird.html in its own window and check each song’s first and last line.
• Start with the banner on screen. Press Ctrl + Tab to move on to the slideshow.
• For a song, switch to the lyrics tab, press G, or press S, type the song number and press Enter.
• Between items, B gives a black screen. Press it again, or move to the next slide, to return.

Changing the content

The pages are plain files. Open them in any text editor such as Notepad, change the text, save, then press F5 (or Ctrl + R) in the browser to see the change.

Program slideshow: script.js

The words are at the top of the file. Change the names and details there.

• CHURCH, PLACE, DATE, TITLE are the church name, place, date and program name.
• HONOR and AND are the first and middle parts of the title: “Rev. Haidau Chori Palyupalihna” and “Nata”.
• DETAILS holds the date, venue, time, directors and chairman.
• PROGRAM holds the 21 items. Each item is a list of blocks.

// a role and a person
{ label: 'Hla solo', value: 'Ls. Centenary', sub: 'Aphapaaw Local KTP' }

// a hymn title (shown in a lighter weight)
{ label: 'Zawpi Hla sana', value: 'Hy, Beipa Chônôchai eima cha reihthai', hymn: true }

// a plain line, with an optional note under it
{ text: 'Chairman tawhta Program phuahna' }

An item with more than one block (like item 5) is shown a little smaller so everything fits.

Main banner: banner.html

All the words are in the page itself. Look for the title lines, the “4th October 2026” plate in the middle of the cross, and the list of five facts (Date, A su, Daihti, Directors, Chairman). Change the text between the tags and keep the tags themselves.

Song lyrics: songs.json

Each song needs a title and sections. A section is a label and a list of lines. The page shows one line at a time. Everything else is optional, so a song that is not from a hymn book needs no number, book or edition.

{
  "songs": [
    {
      "title": "Song title",
      "composer": "Name of the composer",
      "sections": [
        { "id": "v1", "label": "Verse 1", "lines": ["First line", "Second line"] },
        { "id": "c",  "label": "Chorus",  "lines": ["First line", "Second line"] },
        { "id": "v2", "label": "Verse 2", "lines": ["First line", "Second line"] }
      ]
    }
  ]
}

Opening from a folder. Browsers do not let a page read songs.json when it is opened straight from a folder. The lyrics page then asks you to choose the file (press O any time), and it remembers that file. After you edit songs.json, press O and choose it again. To avoid this, open a terminal in the folder and run:

python3 -m http.server 8000
# then open  http://localhost:8000/lyrics.html

Then the page always reads the newest songs.json by itself.

Print or save as PDF

Press P on the slideshow or the banner. In the print window choose:

• Destination: Save as PDF (or a printer).
• Layout: Landscape. Margins: None. Scale: Default or Fit to page.
• Options: turn on Background graphics, otherwise the background colours are left out.

The slideshow prints one slide per page. A PDF makes a good backup: if the computer fails, any other computer can show the PDF.

What the pages remember

These choices are saved in the browser on that computer, and come back next time:

• Dark or light theme, and full or reduced animation (separately for the slideshow and lyrics).
• Whether the controls bar is shown.
• For the lower third and the lyrics lower third: the background, navy or light plate and animation. The lower third also remembers auto-hide, and the lyrics lower third whether the title row and the hymn-book details are shown.
• The lyrics view (focus or one line) and the last songs.json you chose when opening from a folder.
• Where you were. The web address changes as you move, for example program.html#12 or lyrics.html#2.5. Reloading the page returns to the same place.

To reset everything, clear the site data for the page in the browser’s settings.

Troubleshooting

The keys do nothing.

Click once on the page so the browser window has focus, then try again. Make sure you are not typing in another window or in the search box.

I am on the wrong slide, verse or song.

On the slideshow type the item number and Enter. On a lyrics page press the verse number, C for the chorus, J for the list of parts, or G for the list of songs. Home returns to the start.

The screen went black.

You pressed B or .. Press it again or press Esc.

There are no animations.

The computer may be set to reduce motion, so the pages use plain fades. Press M to switch to full animation.

The buttons bar is missing.

That is on purpose. Press C to show it. Press C again to hide it.

The lyrics page or the lyrics lower third asks me to load songs.

The browser blocked reading songs.json from a folder. Choose the file in the box, or open the page through a local web server (see “Changing the content”).

It says the songs file could not be read.

There is a mistake in songs.json, usually a missing comma, quote mark or bracket. The message says what is wrong. Fix the file and press O to load it again.

Fullscreen does not start.

Browsers only allow fullscreen after you press a key or click on the page itself. Click the page and press F again. Inside a small preview window, fullscreen can be blocked; open the file in its own browser tab.

There are black bars at the sides.

The projector is not 16:9. The page keeps its proportions rather than stretching. Set the projector to 1920 × 1080 if possible.

The text looks a little different on another computer.

The pages use the fonts installed on the computer. Test on the computer you will use for the service.

H does not open the Help page.

The browser may have blocked the new tab. Allow pop-ups for the page, or open help.html yourself.

The lyrics lower third is not showing.

It is hidden until you press Space or →. If you pressed B or Esc it is hidden on purpose; press B to bring it back at the same line.

A lyric line is very long.

The lyrics lower third shrinks the text so a line fits on two rows. For very long lines, split them into two lines in songs.json, so each press shows one comfortable line.

The lower third page looks empty.

That is normal at first. Nothing is shown until you press Space. A message at the top right says which name is selected. Use → to choose another one.

The lower third page is white, or I cannot see the plate.

The background is transparent, which a browser shows as white. Press V to switch to the dark, checker or green background while testing.

Messages from the lower third appear in my video.

Open the page with ?clean=1 at the end of the address so no feedback messages are drawn.

The lower third disappears by itself.

Auto-hide is on. Press A to turn it off, or add ?hide=0 to the address.

The printed PDF is missing colours.

Turn on Background graphics in the print window.

Questions

How do I show program item 12 right now?

On the slideshow press 1 2 Enter.

How do I show a hymn by its number?

On a lyrics page press S, type the number, then press Enter. It must match the number in songs.json.

The group goes back to verse 1 while I am on verse 3. What do I press?

Press 1. It jumps straight to the first line of verse 1. Then use Space as usual. To go to the chorus press C, and for a bridge or any other part press J and choose it.

Can I run it from a USB stick?

Yes. Keep all the files together in one folder: the .html, .css and .js files and songs.json.

How do I show a guest who is not in the lower-third list?

Press E, type the label, name and detail, and press Enter.

Can I show the lyrics on the live video while a group sings?

Yes. Open lyrics-lowerthird.html, choose the song with G or by typing its number and Enter, then press Space at the end of each line as they sing.

Does it need internet?

No. Nothing is loaded from the internet.

Can I use two screens, one for the banner and one for lyrics?

Yes. Open each page in its own browser window, move each window to a screen, and press F in each.

How do I get back to the first slide quickly?

Home.

Can the lyrics move on by themselves?

No. Lines change only when you press a key or use the clicker, so the singing never gets ahead of you.