AdaminOsos Here are files from two subfolders in our stages folder. You also need to have jscript.js in the js folder. This custom stage, obslyrics, puts the text from the current slide into a two-column box with a partly opaque white background. This is for the OBS browser view we include in a scene with hymns or a prayer. The javascript file is based on the remote controller view, but I've edited it down to just what is need for an obs browser source.
stages/obslyrics/stage.html
<!DOCTYPE html>
<html>
<!--
A simple interface for OBS to OpenLP to overlay lyrics
With class=html in the current slide div, text formatting will be retained
Use class=text for plain text
Jamie Hockin, 2024
-->
<head>
<meta charset="utf-8" />
<title>OpenLP lyrics</title>
<link rel="stylesheet" href="stage.css" />
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/stage.js"></script>
</head>
<body>
<div class=container>
<div class=transbox>
<div id="currentslide" class="html"></div>
</div>
</div>
</body>
</html>
stages/obslyrics/stage.css
`
/*
A simple OBS browser source to overlay OpenLP lyrics in two columns
Jamie Hockin, 2024
*/
.container {
width: 1280;
overflow: visible;
}
.transbox {
position: absolute;
width: 95%;
bottom: 0px;
margin-left: 32px;
margin-right: 32px;
background: rgba(255,255,255, 0.4) ;
border: none;
display: block;
}
.text, .html {
margin: 10px;
text-shadow: 0px 0px #00f;
font-size:24px;
color: rgba(0,0,0,1);
font-family: Arial;
text-align: left;
column-count: 2;
column-fill: auto;
column-rule: 2px solid blue;
}
`
stages/js/stage.js
`
/*
OpenLP - Open Source Lyrics Projection
Copyright (c) 2008-2021 OpenLP Developers
This program is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by the Free
Software Foundation; version 2 of the License.
This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
more details.
You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc., 59
Temple Place, Suite 330, Boston, MA 02111-1307 USA
Simplified for stage views
Jamie Hockin
Removed controller code and retains only code required to show text, html and thumbnails
*/
window.OpenLP = { // Connect to the OpenLP Remote WebSocket to get pushed updates
myWebSocket: function (data, status) {
const host = location.hostname
const websocket_port = 4317;
ws = new WebSocket(ws://${host}:${websocket_port});
ws.onmessage = (event) => {
const reader = new FileReader();
reader.onload = () => {
data = JSON.parse(reader.result.toString()).results;
if (data.blank data.theme data.display){
// screen blanked - hide content
$("#currentslide").hide();
if ($("body").hasClass("shutter"))
$(".shutter").css("background-color","black");
}
else{
// show screen - get new slide and show content
OpenLP.loadSlide();
$("#currentslide").show();
if ($("body").hasClass("shutter"))
$(".shutter").css("background-color","white")
}
};
reader.readAsText(event.data);
};
},
// get the current slide
loadSlide: function (event) {
$.getJSON(
"/api/v2/controller/live-item",
function (data, status) {
slide = data.slides[0]
text = "";
// do we want text or html?
content = $("#currentslide").hasClass("html") ? "html" : "text";
if (slide[content]) {
text = slide[content];
} else {
text = slide["Title"];
}
if (slide["img"]) {
text += "<br /><img src='" + slide["img"] + "'<br />";
}
text = text.replace(/\n/g, "<br />");
$("#currentslide").html(text);
}
);
},
}
$.ajaxSetup({ cache: false });
OpenLP.myWebSocket();
`
