Tutorial: How to control OBS via OpenLP custom stage view

JohnM

@BillC Your stage.html is the same as the one I use. The use of stage in the path is correct.

Open the obs-websocket.js file in notepad. On the right of the second line, mine says it is v4.0.2 . If yours is the same we can assume it is the correct version.

Lets verify you are seeing the obs stage view. Go into settings on OpenLP and open the Remote page. Double click on the link for the stage view. It should look something like this...assuming you are displaying something to the live screen.

If you saw something like the above we can assume the custom stages are working.

Now click on the URL and add /obs to the URL and press enter. Do you see something like this?

If not here is a copy of my OBS stage view directory.

You should be able to extract this to your stages directory....you may need to rename your current obs directory before extracting this one.

BillC

JohnM, you are certainly a patient man.

This time I can report progress.

The obs stage view now "looks" correct, have song lyrics at lower 1/3.

I used an item with a note for "scenechange" that is now working.

Still I am not seeing the lyrics on OBS,

I'm going back to reread instructions from fiveofsix.

BillC

JohM, At last I can see the lyrics at lower 1/3 in OBS.

Just one issue now. when I look at the lyric, openlp stage view obs in a browser, Firefox or Edge, the lyrics are white text on a grey background, while in OBS they are white on black.

How to correct as I prefer the grey backgound?

JohnM

@BillC I am afraid you have gone beyond my knowledge. I know you can modify the colors in the .css file in the obs directory, but I think the issue is with OBS because the browsers show the right colors. OBS does have it's own default colors, right click on the web page capture for the scene you are on and there is an item on the menu that might help.

Myself I would spend some time making wild color changes in the .css file to see if you get any changes in OBS. If nothing changes, then you may need to talk to the OBS community to see if this is something they know about.

BillC

JohnM, I just figured it out. To change the background color of the lyrics edit line 37 of stage.css.

The function rgba sets the color and transparency of the text.

Examples: rgba(0,0,0,.5) makes a slightly dark background that is transparent to show any image below.

rgba(100,100,100,1) makes a medium grey opaque background

rgba(255,0,0,1) makes a bright red opaque background.

I was initially stumped because to see the changes in OBS you must close and restart it.

I was making changes but did not see OBS reflect those changes.

You have been a great help. Since it is Saturday, I'll wait a week before implementing the custom stage view.

JohnM

@BillC Good luck! Glad I could help.

Emanuele94

joshdreber

Hi all, I've been reading through this thread and trying to figure out how to make this work for our church. I've got all this stuff installed, and trying to figure out the architecture theory.

I want to be able to make OBS change the active scene automatically when an OpenLP slide is changed.

I have the advanced scene switcher plugin running, with various scenes and cameras running through a sequence based on time. For instance: scene 1 is a ptz camera input for our pastor. Scene 2 is a split input with that camera and a openlp browser input for slides. The scene switcher runs automatically, 3 mins on pastor only and 1 min on pastor/slides. I want to have the switcher be interrupted and switch to a slide scene when a slide is changed, if its on a scene with just the pastor.

Any thoughts on this or if its even been done? I've got the openlp dock switching slides from obs-openlp, but i want it the other direction. The browser input scene works fine for showing slides.

Help!!

joshdreber

The advanced scene switcher dev commented and showed me how to fix the above question with macros in the plug in itself:

https://obsproject.com/forum/threads/advanced-scene-switcher.48264/post-547683

remekdc

Huge thanks to @fiveofsix for creating this!

Additionally: huge thanks to @JohnM for providing the OBS.zip

I don't know what I did wrong. I don't know what you did right. All I know is that after spending quite some time fiddling with settings: using that zip fixed it for me. Thanks!!!

echan101

Hi I've got it almost totally working, including switching to a mirror scene when viewing slides and switching to lyrics when viewing songs.

But I can't get OBS to switch scenes when I click "blank screen" in OpenLP, it doesn't change scenes until I change a slide:

// If OpenLP is showing custom text slides, then switch to "Lyrics"

if(OpenLP.currentPlugin == 'custom slides') {

OpenLP.obsHandler.send('SetCurrentScene', {'scene-name': 'Lyrics'});

}

// If OpenLP is blank, then switch to "Camera Only"

if(OpenLP.currentlyShowing == 'blank') {

OpenLP.obsHandler.send('SetCurrentScene', {'scene-name': 'Camera'});

}

Clicking "blank" doesn't take affect until I change a slide. Is there any way to fix this?

Attached is my stage.js file (zipped up).

echan101

OK I figured it out, blank wasn't firing the update method because it didn't check whether it was changing like the other methods. I've fixed it. See attached obs.zip. Works with OpenLP v2.

//inserted for being able to control OBS by display style

if(OpenLP.currentlyShowing != "blank" && data.results.blank) {

OpenLP.currentlyShowing = "blank";

OpenLP.updateSlide();

}

else if(OpenLP.currentlyShowing != "theme" && data.results.theme) {

OpenLP.currentlyShowing = "theme";

OpenLP.updateSlide();

}

else if(OpenLP.currentlyShowing != "display" && data.results.display) {

OpenLP.currentlyShowing = "display";

OpenLP.updateSlide();

}

else if(OpenLP.currentlyShowing != "slides" &&

!data.results.blank &&

!data.results.theme &&

!data.results.display) {

OpenLP.currentlyShowing = "slides";

OpenLP.updateSlide();

}

echan101

Hi I'm so close! I'd appreciate help from those who know more about programming than me.

I would like to be able to query which Scene is active in OBS.

For example, I'm trying to see whether the OBS scene "Pre-roll" is active.

I've tried the following code in the stage.js file, but it doesn't seem to work.

if(OpenLP.obsHandler.send('GetCurrentScene.name') == 'Pre-roll') {

// do something here

}

Many thanks if you can help!

echan101

OK I think I have the syntax but is there a shorter way than this:

OpenLP.obsHandler.send('GetCurrentScene').then(data => {

if (data['name'] == 'Mirror') {

OpenLP.obsHandler.send('SetCurrentScene', {'scene-name': 'Camera'});

}

tobsowo

Please how do I get this to work on 2.9.4?

Thank you.

JamesJ

I was looking at the same thing. Unfortunately, 2.9.4 uses the API V2, which does

use the poll.py class,

able

recognize the program states of blank, theme, display and slides. The comment on poll.py states "This class is DEPRECATED, if you need the state of the program, use the registry to access variables." I have not yet figured out where the program state is in the registry.

The original stage.js script included on this thread has everything set up to use the V1 api, so even some of the other classes are changed a bit. I had liked how the OP didn't display anything for images and presentations, which does help a lot for not needed to change scenes in our case. I would manually change scenes when an image was up, since I didn't want OBS to display the file name. I was able to take what the OP did with his CSS and in JS added the. I use the notes

I am working to see if I can find the display state and have it just adjust that in the CSS as well, rather than bother with the OBS scenes. For our purposes, I am fine just displaying text or not.

I also set up the notes to just put my bible references in there to be displayed in the lower corner of OBS.

This is the set of scripts I am using for now. I will be making a few more tweaks to the JS, but hopefully this will get you some basic functionality on OBS for now. The nice thing about this version is that it doesn't require any OBS plugins. everything is just managed through the custom stage as to what is displayed.

cotgk

JamesJ
I was looking at the same thing. Unfortunately, 2.9.4 uses the API V2, which does not use the poll.py class, and is not able to recognize the program states of blank, theme, display and slides. The comment on poll.py states "This class is DEPRECATED, if you need the state of the program, use the registry to access variables." I have not yet figured out where the program state is in the registry.
The original stage.js script included on this thread has everything set up to use the V1 api, so even some of the other classes are changed a bit. I had liked how the OP didn't display anything for images and presentations, which does help a lot for not needed to change scenes in our case. I would manually change scenes when an image was up, since I didn't want OBS to display the file name. I was able to take what the OP did with his CSS and in JS added the. I use the notes
I am working to see if I can find the display state and have it just adjust that in the CSS as well, rather than bother with the OBS scenes. For our purposes, I am fine just displaying text or not.
I also set up the notes to just put my bible references in there to be displayed in the lower corner of OBS.
This is the set of scripts I am using for now. I will be making a few more tweaks to the JS, but hopefully this will get you some basic functionality on OBS for now. The nice thing about this version is that it doesn't require any OBS plugins. everything is just managed through the custom stage as to what is displayed.
https://forums.openlp.org/uploads/047/Z7U9DD8T8P4T.zip

had a go and your script works with the new OpenLP and most recent OBS. Thanks.

michaelbishop

JamesJ
I was looking at the same thing. Unfortunately, 2.9.4 uses the API V2, which does not use the poll.py class, and is not able to recognize the program states of blank, theme, display and slides. The comment on poll.py states "This class is DEPRECATED, if you need the state of the program, use the registry to access variables." I have not yet figured out where the program state is in the registry.
The original stage.js script included on this thread has everything set up to use the V1 api, so even some of the other classes are changed a bit. I had liked how the OP didn't display anything for images and presentations, which does help a lot for not needed to change scenes in our case. I would manually change scenes when an image was up, since I didn't want OBS to display the file name. I was able to take what the OP did with his CSS and in JS added the. I use the notes
I am working to see if I can find the display state and have it just adjust that in the CSS as well, rather than bother with the OBS scenes. For our purposes, I am fine just displaying text or not.
I also set up the notes to just put my bible references in there to be displayed in the lower corner of OBS.
This is the set of scripts I am using for now. I will be making a few more tweaks to the JS, but hopefully this will get you some basic functionality on OBS for now. The nice thing about this version is that it doesn't require any OBS plugins. everything is just managed through the custom stage as to what is displayed.
https://forums.openlp.org/uploads/047/Z7U9DD8T8P4T.zip

Thanks for your script - that was really helpful for me.

For what it's worth, I've been able to pick up the program state from the 'blank' value returned by the API (I only want to know if the screen is blacked out or not so I haven't bothered with listening for theme or desktop):

ws = new WebSocket("ws://127.0.0.1:4317");ws.onmessage = (event) => { const reader = new FileReader(); reader.onload = () => { data = JSON.parse(reader.result.toString()).results; if (data.item.plugin) { OpenLP.currentPlugin = data.item.plugin; } 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(); if (data.blank) { OpenLP.currentlyShowing = "blank"; } else { OpenLP.currentlyShowing = "display"; } }; reader.readAsText(event.data); OpenLP.obsRemote();};

tobsowo

Thank you. I will try it out.

cotgk

Just a heads up.

This "plugin" does not work with OBS 28.0 > (websocket already pre-instaled) and OpenLP 2.9.x

Would be great if someone could work on an embedded tool (with workable custom dock) that can help with implementing a forced split within a slide to allow for easy manipulation within OBS. At the moment if I have to display a long bible verse the preview in OBS spills over the browser boundary

« Previous Page Next Page »