|
|
Custom stage views are html pages that can contain anything the creator decides.
|
|
|
|
|
|
## Adding a Stage
|
|
|
|
|
|
1. Go to the OpenLP data folder. You can get to it by opening OpenLP, then in the toolbar: `Tools > Open Data Folder`.
|
|
|
2. Enter the folder called `stages`. You might have to create this folder if it does not exist.
|
|
|
3. 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`.
|
|
|
|
|
|
### Example
|
|
|
|
|
|
Here's a simple "Hello World" stage with a css and javascript file.
|
|
|
|
|
|
The `stage.html` file might look something like this:
|
|
|
```html
|
|
|
<!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:
|
|
|
|
|
|
<pre>
|
|
|
hello-world
|
|
|
├── stage.html
|
|
|
├── style.css
|
|
|
└── script.js</pre>
|
|
|
|
|
|
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)](Documentation/websockets)
|
|
|
|
|
|
To get other information and to send requests to OpenLP, use the [HTTP API (link to documentation)](Documentation/http-api) |
|
|
\ No newline at end of file |