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 calledstage.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 usesstages
(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)