Olay

[arT2]

arT2 submitted a new resource:

Olay - Livestream overlay stuff for use as Browser-Source in OBS Studio.

Olay
Livestream overlay stuff for use as Browser-Source in OBS Studio.


Get started:
Go to https://etrusci.org/tool/olay/3 to read the get started-guide and setup/preview the overlays with the provided configurator.

Feel free to start a new discussion if you need more help with, or have specific questions about, Olay.

If you need help with CSS, please see...

Read more about this resource...

 

[Want To Learn]

Hi, I am a bit confused as to how to set it up. it sounds to me like we need to copy and paste your on-line browser into our OBS then visit your page to set up the parameters. However, I don't know where to find that link. Can you let us know where to find it or give us some instructions? Thanks......update: I did get it into OBS in a preview window via custom docks, but the source it's in is black. Thanks again.....2nd update: got it to work. The examples I used went by quickly, so I must not have seen them until now. Thanks.

 

[arT2]

Hi, I am a bit confused as to how to set it up. it sounds to me like we need to copy and paste your on-line browser into our OBS then visit your page to set up the parameters. However, I don't know where to find that link. Can you let us know where to find it or give us some instructions? Thanks......update: I did get it into OBS in a preview window via custom docks, but the source it's in is black. Thanks again.....2nd update: got it to work. The examples I used went by quickly, so I must not have seen them until now. Thanks.

Hi :) Thanks for taking time to try it out!

Sorry for the confusion. I surely must rewrite some of the guide parts. English isn't my native language.
Just added a screenshot to the latest dev branch. I'll post it here too, but it will be pushed to the main branch soon (and then it will also be visible on the hosted version).

Basically... ;-) (see attached screenshot)
1. open configurator page in webbrowser: https://etrusci.org/tool/olay/3
2. overlay preview opens in new webbrowser tab.
3. copy overlay url from webbrowser tab into OBS's Browser-Source.
4. optionally adjust "Custom CSS" in OBS' Browser-Source.

Let me know if that helped and have a good one

 

[Want To Learn]

Hi :) Thanks for taking time to try it out!

Sorry for the confusion. I surely must rewrite some of the guide parts. English isn't my native language.
Just added a screenshot to the latest dev branch. I'll post it here too, but it will be pushed to the main branch soon (and then it will also be visible on the hosted version).

Basically... ;-) (see attached screenshot)
1. open configurator page in webbrowser: https://etrusci.org/tool/olay/3
2. overlay preview opens in new webbrowser tab.
3. copy overlay url from webbrowser tab into OBS's Browser-Source.
4. optionally adjust "Custom CSS" in OBS' Browser-Source.

Let me know if that helped and have a good one

Thank You for your quick response. My suggestion would be to include an overlay that might be large or have many words for testing. I may have done it correctly the first time, but the example went by quick and was behind other filters. You did explain it extensively, but it's always good to have quick instructions to get started like you included above. Thanks.

 

[arT2]

Thank You for your quick response. My suggestion would be to include an overlay that might be large or have many words for testing. I may have done it correctly the first time, but the example went by quick and was behind other filters. You did explain it extensively, but it's always good to have quick instructions to get started like you included above. Thanks.

Okay cool. So just that I understand you correctly. I still don't know for sure what you mean with "the example went by quick and was behind other filters".
- is the getting started guide too hidden on the configurator page - should i let it expanded by default instead of collapsed?
- or do you mean the overlay was hidden in your OBS scene behind other elements?

I will add your idea for a "test module with large text and colored background" to my roadmap.

Vibes!

 

[arT2]

I just realized, maybe your default background in OBS was black. So that's why nothing was visible because the default text color of the overlays is also black (or white for dark mode but i think browser-source always loads light mode).

Didn't add color default color styles, only layout styles, to not make it harder to customize it. I now think about adding a default color all modules that is visible on both black and white background. We had this in Olay 2.... ;-)

 

[Want To Learn]

Okay cool. So just that I understand you correctly. I still don't know for sure what you mean with "the example went by quick and was behind other filters".
- is the getting started guide too hidden on the configurator page - should i let it expanded by default instead of collapsed?
- or do you mean the overlay was hidden in your OBS scene behind other elements?

I will add your idea for a "test module with large text and colored background" to my roadmap.

Vibes!

Hi arT2, I mean I set up all the parameters and didn't see anything until I setup, "Hello Cruel World" in the preview. Probably because it floats I saw it. I first had seen it in partial view then it moved to full view. You might be right a colored background and larger text might be the key? At least for the user to see that it has been setup and is working properly. Maybe I should have started a new scene with nothing else going on to test it, but didn't. Thanks,

 

[arT2]

arT2 updated Olay with a new update entry:

v3.1.0

• All modules have now a default text color that works on both black and white background. This was added because the default background in OBS is black, and therefore the overlay output was not visible because the text color was also black.
  /* new in default styles: */
  .mod { color: #D9269D; }
• Updated documentation and configurator page contents and added a how-to image.
• Various internal refactoring.

Full Changelog...

Read the rest of this update entry...