Possibility to blank custom stage view

Brendan

Like many others I'm starting to use a custom stage view as an OBS feed for displaying bible/lyrics to video streams. The downside I've found however is that stage views do not blank in the way the main view does and therefore creates additional work in that someone needs to baby sit the OBS feed and duplicate the show/blank commands that the person controlling OpenLP is already doing.

Probably what would be really ideal is the ability to use custom views for the main view also, eg. like this http://xxx.xxx.x.xx:4316/main/Bible-CL instead of http://xxx.xxx.x.xx:4316/stage/Bible-CL

Thoughts?

jednou

Hi, blanking sceeen can be done via javascript. There is a thread with sample code somewhere around.

fiveofsix

If you want to blank the display completely whenever the main view is emptied, you need to change the function “pollServer” inside of the file “stage.js”

pollServer: function () {
  $.getJSON(
    "/api/poll",
    function (data, status) {
      OpenLP.updateClock(data);
      if (OpenLP.currentItem != data.results.item ||
        OpenLP.currentService != data.results.service) {
        OpenLP.currentItem = data.results.item;
        OpenLP.currentService = data.results.service;
        OpenLP.loadSlides();
      }
      else if (OpenLP.currentSlide != data.results.slide) {
        OpenLP.currentSlide = parseInt(data.results.slide, 10);
        OpenLP.updateSlide();
      }
      // NEW CODE STARTS HERE
      if(data.results.display || data.results.blank || data.results.theme) {
        $("body").hide();
      }
      else {
        $("body").show();
      }
      // NEW CODE ENDS HERE
    }
  );
}

In the OpenLP API there are three options for the three types of blanking the screen (display, blank, theme). If any of these are active, it hides the complete page. Otherwise it is displayed.

hlywine

Does this apply only to the new version of openLP or will this work on version 2.4 as well?

I have added the code to “stage.js” file but it doesn't seem to do anything.

KorskyrkanOstervala

Hello! I would like this as well, the posted solution above seems to be for the old API (v1?), and i cant get it to work using the new 2.9.4 version with API.v2.

I have searched all of the wiki's for API's and such and cant find the same solution modified for api v2.

(Dont know the programming language well enough to understand the replacement for the "pollServer-function")

I guess it could be somewhere in this function?

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 />";
   }

KCG

Could anyone help with the solution for this in version 2.9.5 please? I need the stage view to go blank in OBS as soon as the main view does. The code above only seems to work for earlier versions.

Thanks

ninjakiwi

You can catch changes of the display mode via the websockets api: https://gitlab.com/openlp/wiki/-/wikis/Documentation/websockets

Below I have expanded on the example provided on the wiki.

const host = window.location.hostname;
const websocket_port = 4317;

ws = new WebSocket(`ws://${host}:${websocket_port}`);
ws.onmessage = (event) => {
    const reader = new FileReader();
    reader.onload = () => {
        const state = JSON.parse(reader.result.toString()).results;

        if (state.blank) {
            // Run code to blank your stage view here
        else {
            // Run code to unblank your stage view here
        }

    };
    reader.readAsText(event.data);
};

KCG

Hello ninjakiwi, 

Thanks for the prompt response! You're a star! I am guessing the file to edit is the stage.js. But as I am not very well versed in programming, I need a bit more help. Could you kindly give me the code that runs to blank the stage?

Kristin

Hi KCG,

I'm working on the same thing you are apparently. I took ninjakiwi's code and got this to work but only for the Blank button, theme and desktop do not blank out. I'm just a beginner and know just enough to try things without knowing exactly what's going on, so I give you even fewer guarantees than usual when copying code off the internet :)

This is a snippet of my stage.js that is working for me:

OpenLP.myTwelve = data.twelve;
const state = JSON.parse(reader.result.toString()).results;
        //added ninja code here
        if (state.blank || state.theme || state.display) {
          // Run code to blank your stage view here
          $("body").hide();
        } else {
          $("body").show();
        }
        //end ninja code
        if (
          OpenLP.currentItem != data.item ||
          OpenLP.currentService != data.service
        ) {

If I get any further I'll update.

EDIT: Found the other states. Added to the original code above.

KCG

Hey Kristin!!!

Thanks a million for this, I finally got it working!

KorskyrkanOstervala

Wow! I also got it working now, exactly as i want it to! Thank you so much for your help!!

@ninjakiwi, @KCG, @Kristin

Blessing and have a happy new year!

newidea

Thanks a lot and be blessed!

How is it possible to show only the song text in the stage view?

Luke

Kristin

You need to change your stage.html to hide divs you don't want and stage.css to style the html you do want.

Here's mine currently if you want a starting point. https://github.com/North-Country-Chapel/openlp/tree/main/lowerthird

Under stage.html the <!-- --> comments out a div so they don't show up. So this example will not show the clock but will show the notes:

 <!-- <div id="clock"></div> -->
      <div id="notes"></div>

The CSS under #currentslide is the most relevant and you'll want to change that to whatever position/fonts/colors/sizes are appropriate for you. Check out Chrome or Firefox inspector to experiment with theCSS.

My stage.js is altered to not show video and image thumbnails and titles but the titles still flashing up there because I'm not good at rendering and DOM. You might need to add file types to this line if you use other file types you want hidden:

if (
      ["mp4", "png", "gif", "jpg", "jpeg", "wmv", "pptx", "pdf"].some((char) =>
        text.endsWith(char)
      )

Hope this helps.

newidea

Thank you for the files.

Is it possible to hide also the bible verses?

Kristin

That's beyond me. My hack only works because the images/videos use their filenames as the text. Bible verses don't have anything distinctive like that to work with.

Edit for future searchers: I have updated stage.js to use the plugin type so it should work in most situations. It's still a little quirky about certain refreshes.

KCG

Hi @Kristin ,

I have been using this for a while now and it's been great! I was just wondering if it is possible to include the Song title or the Bible verse in the Custom Stage. I thought it could be done by the inclusion of the following div in the stage html

 <div id="notes"></div>

However it seems to be blank when I inspect it in the browser. Any ideas?