Feature Request: Chroma Key Stage View

FermanFerman
in Development
Hey everyone!
I have been working with OBS a lot for live streaming and though of something that could be an amazing featured that is apart of the Browser Stage view. Right now you have Main stage view http://localhost:4316/main which is super cool. My idea would be to have http://localhost:4316/chroma where it takes the text within OpenLP and removes the default theme background and makes it green. That way I can run a chroma key filter to remove the background and have the Song words and speaking notes displayed over my videos.
Share on FacebookShare on Twitter Share on Google+

Comments

  • tgctgc
    If you know your way around JavaScript and CSS you could try creating a custom stage view: http://manual.openlp.org/stage_view.html#custom-stage-views
    Feel free to share the result :-)
    Share on FacebookShare on Twitter Share on Google+
  • FermanFerman
    Oh wow! I didn't see that. I will definitely give it a shot and report back!
    Share on FacebookShare on Twitter Share on Google+
  • FermanFerman
    Wow that was the easiest thing in the world. Attached is a quick and dirty version. Here is a screenshot as well.



    Share on FacebookShare on Twitter Share on Google+
  • FermanFerman
    The next thing I want to do is see if I can create stage view that will show images and videos playing in the web browser so I can switch OBS to just show a full screen of the slide itself playing.
    Share on FacebookShare on Twitter Share on Google+
  • tgctgc
    Unfortunately it is not currently possible to access the video from the stage view. I also don't think images are available...
    This might change in the next version where the remote API has been rewritten...
    Share on FacebookShare on Twitter Share on Google+
  • FermanFerman
    The main view shows all slides as images which means everything except videos will show up. In OBS I can easily add the main view as a browser source in a different OBS scene that will just show the active slides. And then if I want to show a video I just do a screen capture of the projector itself as another scene.

    This will allow me to have a scene that a camera showing the live services with an overlay of text from Custom Slides, Bible verses, and songs. I then have a scene that is just the main view showing the full themed slide which lets images work as well. I guess I could remove that scene of the main view since I would plan on capturing the screen of the projector anyways and use that as my second scene to show any images/videos in my recording.

    OpenLP fits all of my needs now. :)
    Share on FacebookShare on Twitter Share on Google+
  • mhalbrookmhalbrook
    edited February 2019
    Never realized it was that easy to make  a new stage view.  I presume if I create one,it doesn't overwrite in updates like if I modify the CSS?  That's the one thing that I have to do when I upgrade in the past.  Also thanks for sharing your Chroma setup, nice to see people give back in Open Source projects :) 
    Share on FacebookShare on Twitter Share on Google+
  • FermanFerman
    @mhalbrook since it is a custom stage view, updates should not effect it. I am more than happy to share it! This solution is a HUGE benefit to OpenLP and churches trying to record sermons. :smile:

    I am trying to convince them to create something like this by default for the 3.0 release. :wink:
    Share on FacebookShare on Twitter Share on Google+
  • newideanewidea
    Hey guys,
    I'm glad to found this topic. If I blank a song, the chroma view doesn't blank. How to solve this?

    Luke
    Share on FacebookShare on Twitter Share on Google+
  • davehillegassdavehillegass
    You can try something like this in yourt stage.js file.  The bold sections are what is important.  I cleaned mine up a bit in the view I display into OBS.

    window.OpenLP = {
      loadService: function (event) {
        $.getJSON(
          "/api/service/list",
          function (data, status) {
            OpenLP.itemFooter = "";
            for (idx in data.results.items) {
              idx = parseInt(idx, 10);
              if (data.results.items[idx]["selected"]) {
                  OpenLP.itemFooter = data.results.items[idx]["title"];
      if("" != data.results.items[idx]["notes"])
    OpenLP.itemFooter += " - " + data.results.items[idx]["notes"];
                break;
              }
            }
            OpenLP.updateSlide();
          }
        );
      },
      loadSlides: function (event) {
        $.getJSON(
          "/api/controller/live/text",
          function (data, status) {
            OpenLP.currentSlides = data.results.slides;
            OpenLP.currentSlide = 0;
            $.each(data.results.slides, function(idx, slide) {
              if (slide["selected"])
                OpenLP.currentSlide = idx;
            })
            OpenLP.loadService();
          }
        );
      },
      updateSlide: function() {
      if (OpenLP.currentTheme || OpenLP.currentBlank)
      $("#currentslide").html("");
      else {
    // Show the current slide if displayed
    var slide = OpenLP.currentSlides[OpenLP.currentSlide];
    var text = "";
    text += slide["text"];
    // Show the Song or Scripture Title
    //text += "<br /><div id='itemFooter'>" + OpenLP.itemFooter + "</div>";
    text = text.replace(/\n/g, "<br />");
    $("#currentslide").html(text);
    text = "";
      }
      },
      pollServer: function () {
        $.getJSON(
          "/api/poll",
          function (data, status) {
            if (OpenLP.currentItem != data.results.item ||
                OpenLP.currentService != data.results.service) {
              OpenLP.currentItem = data.results.item;
              OpenLP.currentService = data.results.service;
      OpenLP.currentTheme = data.results.theme;
      OpenLP.currentBlank = data.results.blank;
              OpenLP.loadSlides();
            }
            else if (OpenLP.currentSlide != data.results.slide) {
              OpenLP.currentSlide = parseInt(data.results.slide, 10);
              OpenLP.updateSlide();
            }
    else if (OpenLP.currentTheme != data.results.theme  ||
    OpenLP.currentBlank != data.results.blank) {
      OpenLP.currentTheme = data.results.theme;
      OpenLP.currentBlank = data.results.blank;
      OpenLP.updateSlide();
    }
          }
        );
      }
    }
    $.ajaxSetup({ cache: false });
    setInterval("OpenLP.pollServer();", 500);
    OpenLP.pollServer();

    Share on FacebookShare on Twitter Share on Google+
  • newideanewidea
    Yeah, thanks a lot!
    Now, it's perfect for OBS.

    Luke
    Share on FacebookShare on Twitter Share on Google+
  • FermanFerman
    @davehillegass that's super awesome!!! We definitely need to get this pushed into production.
    Share on FacebookShare on Twitter Share on Google+
  • newideanewidea
    How can I remove the text, when I show pdfs, jpgs, pptx, video files?
    I want to use this view only for song texts.

    Share on FacebookShare on Twitter Share on Google+
  • KavodeKavode
    Thought someone could use our solution to this problem.  We use openlp and a custom stage view to import lyrics into Vmix.  We took Ferman's orginal files and changed the CSS file to this
    #currentslide {
    width: 900px;
    height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    border: 4px solid white;
    background: rgba(0, 0, 0, 0.35);
    font-size: 35pt;
    color: white;
    padding: 25px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
    }

    This give us a nice outlined text box with a semi transparent background and white text all centered on the bottom of the screen.
      
    Share on FacebookShare on Twitter Share on Google+
  • FermanFerman
    @Kavode this looks soooo good!
    Share on FacebookShare on Twitter Share on Google+
  • SturmeySturmey
    edited June 2020
    It took a bit of figuring out, but I think I have it. Does anyone know what it would take to set the text CSS to do outline?

    ok, I found it here: hxxps://wpshout.com/quick-guides/create-text-outline-css/

    Share on FacebookShare on Twitter Share on Google+
  • jednoujednou
    edited August 2021

    if you want to show only songs on stage you can use this:

    //store current slide type aka "plugin"

     loadService: function(event) {

      $.getJSON("/api/service/list", function(data, status) {

       OpenLP.currentPlugin = "";

       OpenLP.nextSong = "";

       $("#notes").html("");

       for (idx in data.results.items) {

        idx = parseInt(idx, 10);

        if (data.results.items[idx]["selected"]) {

         OpenLP.currentPlugin = data.results.items[idx]["plugin"];



    and then filter out e.g. this way:

     updateSlide: function() {

      if (

       OpenLP.currentTheme ||

       OpenLP.currentBlank ||

       OpenLP.currentPlugin != "songs"

      )

       $("#currentslide").html("");

    Share on FacebookShare on Twitter Share on Google+
  • newideanewidea

    Thanks a lot @jednou,

    this functions makes the workflow much better.

    Is it also possible for the bibletext?

    Luke

    Share on FacebookShare on Twitter Share on Google+
  • jednoujednou
    edited August 2021

    sure, bible items have own plugin value: "bibles"

    Share on FacebookShare on Twitter Share on Google+
  • newideanewidea

    Hello,

    can somebody help me with the code, please? I want only show the song text.

    Luke

    window.OpenLP = {

 loadService: function (event) {

   $.getJSON(

     "/api/service/list",

     function (data, status) {

       OpenLP.itemFooter = "";

       for (idx in data.results.items) {

         idx = parseInt(idx, 10);

         if (data.results.items[idx]["selected"]) {

          OpenLP.itemFooter = data.results.items[idx]["title"];

 if("" != data.results.items[idx]["notes"])

OpenLP.itemFooter += " - " + data.results.items[idx]["notes"];

           break;

         }

       }

       OpenLP.updateSlide();

     }

   );

 },

 loadSlides: function (event) {

   $.getJSON(

     "/api/controller/live/text",

     function (data, status) {

       OpenLP.currentSlides = data.results.slides;

       OpenLP.currentSlide = 0;

       $.each(data.results.slides, function(idx, slide) {

         if (slide["selected"])

           OpenLP.currentSlide = idx;

       })

       OpenLP.loadService();

     }

   );

 },

 updateSlide: function() {

 if (OpenLP.currentTheme || OpenLP.currentBlank)

 $("#currentslide").html("");

 else {

// Show the current slide if displayed

var slide = OpenLP.currentSlides[OpenLP.currentSlide];

var text = "";

text += slide["text"];

// Show the Song or Scripture Title

//text += "<br /><div id='itemFooter'>" + OpenLP.itemFooter + "</div>";

text = text.replace(/\n/g, "<br />");

$("#currentslide").html(text);

text = "";

 }

 },

 pollServer: function () {

   $.getJSON(

     "/api/poll",

     function (data, status) {

       if (OpenLP.currentItem != data.results.item ||

           OpenLP.currentService != data.results.service) {

         OpenLP.currentItem = data.results.item;

         OpenLP.currentService = data.results.service;

 OpenLP.currentTheme = data.results.theme;

 OpenLP.currentBlank = data.results.blank;

         OpenLP.loadSlides();

       }

       else if (OpenLP.currentSlide != data.results.slide) {

         OpenLP.currentSlide = parseInt(data.results.slide, 10);

         OpenLP.updateSlide();

       }

else if (OpenLP.currentTheme != data.results.theme ||

OpenLP.currentBlank != data.results.blank) {

 OpenLP.currentTheme = data.results.theme;

 OpenLP.currentBlank = data.results.blank;

 OpenLP.updateSlide();

}

     }

   );

 }

}

$.ajaxSetup({ cache: false });

setInterval("OpenLP.pollServer();", 500);

OpenLP.pollServer();


    Share on FacebookShare on Twitter Share on Google+
Sign In or Register to comment.