diff --git a/manual/source/custom_stage_coding.rst b/manual/source/custom_stage_coding.rst deleted file mode 100644 index 3600dbd..0000000 --- a/manual/source/custom_stage_coding.rst +++ /dev/null @@ -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 - - - - - - - Phil's Stage - - - - - - - - -
-
-
- - - -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(" "); - $("#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(" "); - $("#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 += "

"; - } - // use notes if available - if (slide["slide_notes"]) { - text += '
' + slide["footer"]; - } - // "slide_notes" - text = text.replace(/\n/g, "
"); - $("#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 + "

"; - 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 + "

"; - else - text = text + "
"; - } - text = text.replace(/\n/g, "
"); - $("#nextslide").html(text); - } - else { - text = "

" + $("#next-text").val() + ": " + OpenLP.nextSong + "

"; - $("#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 `_ -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. \ No newline at end of file diff --git a/manual/source/index.rst b/manual/source/index.rst index 6cb5e37..f7ce0ea 100644 --- a/manual/source/index.rst +++ b/manual/source/index.rst @@ -68,7 +68,6 @@ Questions and Troubleshooting faq troubleshooting - custom_stage_coding .. _help us add it: https://openlp.org/contribute .. _SumatraPDF: https://www.sumatrapdfreader.org/ diff --git a/manual/source/stage_view.rst b/manual/source/stage_view.rst index 37f55a6..ad0a723 100644 --- a/manual/source/stage_view.rst +++ b/manual/source/stage_view.rst @@ -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 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:`stages.js` from :ref:`custom_stage_code`, and customize them to your needs. +:file:`stages.js` from `Custom Stage View Zip `_ +and customize them to your needs. To access the custom stage view in a browser go to http://myopenlpip:4316/stage/myview.