Custom Stage Views

Custom stage views are html pages that can contain anything the creator decides.

Adding a Stage

Go to the OpenLP data folder. You can get to it by opening OpenLP, then in the toolbar: Tools > Open Data Folder.
Enter the folder called stages. You might have to create this folder if it does not exist.
Place your stage folder inside the stages folder. Your stage folder's name will be the name of the stage. Inside your stage folder, there should be (as a bare minimum), a html file called stage.html which OpenLP will serve to the user.

The stage.html file's path should look something like this: <openlp-data-folder>/stages/my-stage/stage.html.

Accessing a Stage

To view a stage, make sure OpenLP is running, and go to the url: http://<host>:<port>/stage/<stage>/.

For example, if I want to go to the stage called my-stage on the same computer that OpenLP is running on, I would navigate to http://localhost:4316/stage/my-stage/.

Note

The url used to view a stage is NOT the same as the file path. The web url uses stage (singular) whereas the file path uses stages (plural).

Creating a stage

Creating a stage is like any other html page. The only restriction is you need to have your html page called stage.html.

When making a stage, it is best to test it by placing it in the OpenLP stages folder and opening it via the OpenLP server. The OpenLP server may handle links differently to how opening the file stand-alone would handle them.

Example

Here's a simple "Hello World" stage with a css and javascript file.

The stage.html file might look something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Stage - Hello World</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

The project file layout should look something like this:

hello-world
├── stage.html
├── style.css
└── script.js

To use it, you would place the hello-world folder into the stages folder in the OpenLP data folder. Then after starting OpenLP, open a web browser and navigate to http://localhost:4316/stage/hello-world/.

Interaction with OpenLP

To get the state and when it updates, you should use WebSockets (link to the WebSockets Documentation)

To get other information and to send requests to OpenLP, use the HTTP API (link to documentation)