Stream Overlay

This module add overlays to display rolls in a customizable way.

It generates links to use as a browser source in the streaming software.

Usage

Custom overlay generator

Provide an overlay to display rolls in a customizable maner

1. To start, open the link generator

2. Then Select the options that you want on the overlay

3. Click the Generatebutton to generate the link of the overlay

4. Click the Copybutton

5. You have now a link to use. Put it as a browser source on OBS (or any streaming software that support browser sources)

6. Enjoy!

There are multiple settings :

Other infos :

• Custom CSS/HTML will create long links but add another level of customization.

• A link that work now will work tomorrow, you don't have to regenerate the links every time there is an update.

Global styling and templating

Provide a way to dynamically edit the style and template used for the overlays

HTML Templating and CSS Styling

• Template :

You can define the layout to use to display a roll, you may use the provided variables. Any occurence of the variable will be replaced. The variable name should be put between { and } without spaces. The available variables are username, actorname, roll_result, roll_formula

• Style :

You can define the style to use on the template.

Here are some examples

• Example 1 - basic overlay :

Template

<div class="box">
    <div class="header">{username}</div>
    <div class="content">{roll_result}</div>
</div>

Style

.box{
    color: black; 
    margin: 3px; 
    padding: 5px; 
    background-color: #E0DFD5; 
    border: 2px solid #6F6C66; 
    border-radius: 5px; 
}
.content{ 
    text-align: center; 
    background: rgba(0,0,0,0.1); 
    border: 1px solid #999; border-radius: 3px; 
}

• Example 2 - specific color for an user :

Template

<div class="box">
    <div class="header {username}">{username}</div>
    <div class="content">{roll_result}</div>
</div>

Style, replace user1 with the name of the user

.user1{ 
    color: red; 
}
.box{
    color: black; 
    margin: 3px; 
    padding: 5px; 
    background-color: #E0DFD5; 
    border: 2px solid #6F6C66; 
    border-radius: 5px; 
}
.content{ 
    text-align: center; 
    background: rgba(0,0,0,0.1); 
    border: 1px solid #999; border-radius: 3px; 
}

Feature Requests

If there is anything related to this module that you want or that might be usefull, feel free to message me on Discord!

Feedbacks

If there is anything that you think could be better feel free to tell me. I read all constructive criticism.