Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
    • Switch to GitLab Next
  • Sign in / Register
wiki
wiki
  • Project overview
    • Project overview
    • Details
    • Activity
  • Issues 11
    • Issues 11
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
    • Iterations
  • Requirements
    • Requirements
    • List
  • Operations
    • Operations
    • Incidents
  • Analytics
    • Analytics
    • Insights
    • Issue
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • Members
    • Members
  • Activity
  • Create a new issue
  • Issue Boards
Collapse sidebar
  • openlp
  • wikiwiki
  • Wiki
  • Custom Stage Views

Last edited by Daniel Martin Jan 16, 2021
Page history

Custom Stage Views

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.

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)

Clone repository
  • Addendum
  • Brand_Guidelines
  • Classes_Plugin
  • Code Structure
  • Configuring_SSH_Keys_on_Linux_and_Mac_OS_X
  • Configuring_SSH_Keys_on_Windows
  • Creating a Study Bible for OpenLP
  • Custom Stage Views
  • Development of Icons
  • Development
    • Branching_And_Merging_Standards
    • Coding_Standards
    • Convert from Bazaar to Git
    • Core_API_Framework
    • EasySlides_ _Song_Data_Format
    • EasyWorship_ _Song_Data_Format
View All Pages