mirror of
https://gitlab.com/openlp/documentation.git
synced 2024-09-28 19:07:38 +00:00
updated to use wiki as custom stage zip location
This commit is contained in:
parent
2ea1b7352d
commit
bb5f60de57
@ -1,327 +0,0 @@
|
|||||||
.. _custom_stage_code:
|
|
||||||
|
|
||||||
*****************
|
|
||||||
Custom Stage Code
|
|
||||||
*****************
|
|
||||||
|
|
||||||
Below you will find the files used to create a custom stage view that
|
|
||||||
changed the color of the next verse lines on the stage view. Copy the
|
|
||||||
text from the file into a text editor and save them into your custom
|
|
||||||
stage directory using the filenames provided.
|
|
||||||
|
|
||||||
Stage.HTML
|
|
||||||
==========
|
|
||||||
|
|
||||||
.. code-block:: text
|
|
||||||
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<!--
|
|
||||||
###############################################################################
|
|
||||||
# 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 #
|
|
||||||
###############################################################################
|
|
||||||
-->
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Phil's Stage</title>
|
|
||||||
<link rel="stylesheet" href="stage.css" />
|
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico">
|
|
||||||
<script type="text/javascript" src="jquery.min.js"></script>
|
|
||||||
<script type="text/javascript" src="stage5.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<input type="hidden" id="next-text" value="next" />
|
|
||||||
<div id="right">
|
|
||||||
<div id="clock"></div>
|
|
||||||
<div id="notes"></div>
|
|
||||||
</div>
|
|
||||||
<div id="verseorder"></div>
|
|
||||||
<div id="currentslide"></div>
|
|
||||||
<div id="nextslide"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
Stage.css
|
|
||||||
=========
|
|
||||||
|
|
||||||
.. code-block:: text
|
|
||||||
|
|
||||||
/******************************************************************************
|
|
||||||
* 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 *
|
|
||||||
******************************************************************************/
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: black;
|
|
||||||
font-family: sans-serif;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#currentslide {
|
|
||||||
font-size: 40pt;
|
|
||||||
color: white;
|
|
||||||
padding-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nextslide {
|
|
||||||
font-size: 40pt;
|
|
||||||
color: yellow;
|
|
||||||
padding-top: 0px;
|
|
||||||
padding-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#clock {
|
|
||||||
font-size: 30pt;
|
|
||||||
color: yellow;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#notes {
|
|
||||||
font-size: 36pt;
|
|
||||||
color: salmon;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#verseorder {
|
|
||||||
font-size: 30pt;
|
|
||||||
color: green;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.currenttag {
|
|
||||||
color: lightgreen;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
Stage.js
|
|
||||||
========
|
|
||||||
|
|
||||||
.. code-block:: text
|
|
||||||
|
|
||||||
/******************************************************************************
|
|
||||||
* 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 *
|
|
||||||
******************************************************************************/
|
|
||||||
|
|
||||||
window.OpenLP = { // Connect to the OpenLP Remote WebSocket to get pushed updates
|
|
||||||
myWebSocket: function (data, status) {
|
|
||||||
const host = window.location.hostname;
|
|
||||||
const websocket_port = 4317;
|
|
||||||
var myTwelve;
|
|
||||||
|
|
||||||
ws = new WebSocket(`ws://${host}:${websocket_port}`);
|
|
||||||
ws.onmessage = (event) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = () => {
|
|
||||||
data = JSON.parse(reader.result.toString()).results;
|
|
||||||
// set some global var
|
|
||||||
OpenLP.myTwelve = data.twelve;
|
|
||||||
if (OpenLP.currentItem != data.item ||
|
|
||||||
OpenLP.currentService != data.service) {
|
|
||||||
OpenLP.currentItem = data.item;
|
|
||||||
OpenLP.currentService = data.service;
|
|
||||||
OpenLP.loadSlides();
|
|
||||||
}
|
|
||||||
else if (OpenLP.currentSlide != data.slide) {
|
|
||||||
OpenLP.currentSlide = parseInt(data.slide, 10);
|
|
||||||
OpenLP.updateSlide();
|
|
||||||
}
|
|
||||||
OpenLP.loadService();
|
|
||||||
};
|
|
||||||
reader.readAsText(event.data);
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
loadService: function (event) {
|
|
||||||
$.getJSON(
|
|
||||||
"/api/v2/service/items",
|
|
||||||
function (data, status) {
|
|
||||||
OpenLP.nextSong = "";
|
|
||||||
$("#notes").html("");
|
|
||||||
data.forEach(function(item, index, array) {
|
|
||||||
if (item.selected) {
|
|
||||||
$("#notes").html(item.notes);
|
|
||||||
if (data.length > index + 1) {
|
|
||||||
OpenLP.nextSong = data[index + 1].title;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
OpenLP.nextSong = "End of Service";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
OpenLP.updateSlide();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
loadSlides: function (event) {
|
|
||||||
$.getJSON(
|
|
||||||
"/api/v2/controller/live-items",
|
|
||||||
function (data, status) {
|
|
||||||
OpenLP.currentSlides = data.slides;
|
|
||||||
OpenLP.currentSlide = 0;
|
|
||||||
OpenLP.currentTags = Array();
|
|
||||||
var div = $("#verseorder");
|
|
||||||
div.html("");
|
|
||||||
var tag = "";
|
|
||||||
var tags = 0;
|
|
||||||
var lastChange = 0;
|
|
||||||
$.each(data.slides, function(idx, slide) {
|
|
||||||
var prevtag = tag;
|
|
||||||
tag = slide["tag"];
|
|
||||||
if (tag != prevtag) {
|
|
||||||
// If the tag has changed, add new one to the list
|
|
||||||
lastChange = idx;
|
|
||||||
tags = tags + 1;
|
|
||||||
div.append(" <span>");
|
|
||||||
$("#verseorder span").last().attr("id", "tag" + tags).text(tag);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if ((slide["text"] == data.slides[lastChange]["text"]) &&
|
|
||||||
(data.slides.length >= idx + (idx - lastChange))) {
|
|
||||||
// If the tag hasn't changed, check to see if the same verse
|
|
||||||
// has been repeated consecutively. Note the verse may have been
|
|
||||||
// split over several slides, so search through. If so, repeat the tag.
|
|
||||||
var match = true;
|
|
||||||
for (var idx2 = 0; idx2 < idx - lastChange; idx2++) {
|
|
||||||
if(data.slides[lastChange + idx2]["text"] != data.slides[idx + idx2]["text"]) {
|
|
||||||
match = false;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (match) {
|
|
||||||
lastChange = idx;
|
|
||||||
tags = tags + 1;
|
|
||||||
div.append(" <span>");
|
|
||||||
$("#verseorder span").last().attr("id", "tag" + tags).text(tag);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
OpenLP.currentTags[idx] = tags;
|
|
||||||
if (slide["selected"])
|
|
||||||
OpenLP.currentSlide = idx;
|
|
||||||
})
|
|
||||||
OpenLP.loadService();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
updateSlide: function() {
|
|
||||||
// Show the current slide on top. Any trailing slides for the same verse
|
|
||||||
// are shown too underneath in grey.
|
|
||||||
// Then leave a blank line between following verses
|
|
||||||
$("#verseorder span").removeClass("currenttag");
|
|
||||||
$("#tag" + OpenLP.currentTags[OpenLP.currentSlide]).addClass("currenttag");
|
|
||||||
var slide = OpenLP.currentSlides[OpenLP.currentSlide];
|
|
||||||
var text = "";
|
|
||||||
// use title if available
|
|
||||||
if (slide["text"]) {
|
|
||||||
text = slide["text"];
|
|
||||||
} else {
|
|
||||||
text = slide["Title"];
|
|
||||||
}
|
|
||||||
// use thumbnail if available
|
|
||||||
if (slide["img"]) {
|
|
||||||
text += "<br /><img src='" + slide["img"].replace("//thumbnails//", "//thumbnails//") + "'><br />";
|
|
||||||
}
|
|
||||||
// use notes if available
|
|
||||||
if (slide["slide_notes"]) {
|
|
||||||
text += '<br />' + slide["footer"];
|
|
||||||
}
|
|
||||||
// "slide_notes"
|
|
||||||
text = text.replace(/\n/g, "<br />");
|
|
||||||
$("#currentslide").html(text);
|
|
||||||
text = "";
|
|
||||||
if (OpenLP.currentSlide < OpenLP.currentSlides.length - 1) {
|
|
||||||
for (var idx = OpenLP.currentSlide + 1; idx < OpenLP.currentSlides.length; idx++) {
|
|
||||||
if (OpenLP.currentTags[idx] != OpenLP.currentTags[idx - 1])
|
|
||||||
text = text + "<p class=\"nextslide\">";
|
|
||||||
if (OpenLP.currentSlides[idx]["text"]) {
|
|
||||||
text = text + OpenLP.currentSlides[idx]["text"];
|
|
||||||
} else {
|
|
||||||
text = text + OpenLP.currentSlides[idx]["title"];
|
|
||||||
}
|
|
||||||
if (OpenLP.currentTags[idx] != OpenLP.currentTags[idx - 1])
|
|
||||||
text = text + "</p>";
|
|
||||||
else
|
|
||||||
text = text + "<br />";
|
|
||||||
}
|
|
||||||
text = text.replace(/\n/g, "<br />");
|
|
||||||
$("#nextslide").html(text);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
text = "<p class=\"nextslide\">" + $("#next-text").val() + ": " + OpenLP.nextSong + "</p>";
|
|
||||||
$("#nextslide").html(text);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateClock: function(data) { // get time from results
|
|
||||||
var div = $("#clock");
|
|
||||||
var t = new Date();
|
|
||||||
var h = t.getHours();
|
|
||||||
if (OpenLP.myTwelve && h > 12)
|
|
||||||
h = h - 12;
|
|
||||||
var m = t.getMinutes();
|
|
||||||
if (m < 10)
|
|
||||||
m = '0' + m + '';
|
|
||||||
div.html(h + ":" + m);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
$.ajaxSetup({ cache: false });
|
|
||||||
setInterval("OpenLP.updateClock();", 500);
|
|
||||||
OpenLP.myWebSocket();
|
|
||||||
|
|
||||||
jQuery.min.js
|
|
||||||
=============
|
|
||||||
|
|
||||||
|
|
||||||
The jQuery.min.js is a standard file you can download from `jQuery.js <https://jquery.com/download/>`_
|
|
||||||
It is recommended to download the compressed file for improved performance. The files
|
|
||||||
provided were tested with version v1.12.4 of the JQuery compressed file.
|
|
@ -68,7 +68,6 @@ Questions and Troubleshooting
|
|||||||
|
|
||||||
faq
|
faq
|
||||||
troubleshooting
|
troubleshooting
|
||||||
custom_stage_coding
|
|
||||||
|
|
||||||
.. _help us add it: https://openlp.org/contribute
|
.. _help us add it: https://openlp.org/contribute
|
||||||
.. _SumatraPDF: https://www.sumatrapdfreader.org/
|
.. _SumatraPDF: https://www.sumatrapdfreader.org/
|
||||||
|
@ -46,7 +46,8 @@ html. To create a custom stage view, go to the OpenLP Data Folder by going to
|
|||||||
folder names :file:`stages`. Inside the :file:`stages` folder you can now create
|
folder names :file:`stages`. Inside the :file:`stages` folder you can now create
|
||||||
a folder which will be the name of your custom view, an example could be
|
a folder which will be the name of your custom view, an example could be
|
||||||
:file:`myview`. Now copy :file:`stage.html`, :file:`stage.css` and
|
:file:`myview`. Now copy :file:`stage.html`, :file:`stage.css` and
|
||||||
:file:`stages.js` from :ref:`custom_stage_code`, and customize them to your needs.
|
:file:`stages.js` from `Custom Stage View Zip <https://gitlab.com/openlp/wiki/-/wikis/Development/custom_stage.zip>`_
|
||||||
|
and customize them to your needs.
|
||||||
|
|
||||||
To access the custom stage view in a browser go to http://myopenlpip:4316/stage/myview.
|
To access the custom stage view in a browser go to http://myopenlpip:4316/stage/myview.
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user