Language: DE | EN

Dokumentation

Overlays

An overlay contains an overlay.studio file and an overlay.html file.

Stream Overlay Studio supports Less (version 2.7.1) and Scss (version 3.4.4).

Look at the example overlay in the folder "www/overlay/example".

Use Case Examples

Multiple Layer Overlay

Your template need multiple layers?

Use this url for the browser source:
http://localhost:8008/StreamOverlayStudio/overlay?layer=layer-1
http://localhost:8008/StreamOverlayStudio/overlay?layer=layer-2
layer and layer-x are examples, but the second part must begin with a letter and must not contain any space!

Add this to your overlay:

JavaScript new QueryOverlayWidget(".layer", "layer", "layer-default");
HTML <div class="layer layer-1 layer-default"><!-- HTML-Elements for layer 1 --></div>
HTML <div class="layer layer-2"><!-- HTML-Elements for layer 2 --></div>

And use window.OverlayQuery['layer'] in your JavaScript to load only needed Scripts and Widgets:

JavaScript if(window.OverlayQuery['layer'] == "layer-1" 
|| window.OverlayQuery['layer'] == "layer-default") { 
/* JavaScript for layer 1 and default layer */ }

Change overlay by scene switch

You have one scene for game play with a small webcam and one scene with only a big webcam?

Add to your first scene another browser source (not global!) with the url:
http://localhost:8008/StreamOverlayStudio/plugin/template/set/template/gameplay/_last
and in your second scene a browser source (not global!) with the url:
http://localhost:8008/StreamOverlayStudio/plugin/template/set/template/webcam/_last

gameplay and webcam are the template folder name, which is als known as the template ident.
_last is the marker for the current selected theme if you have more than one for your template.


Basic Information and Helper Functions

Template Configuration

HTML <div class="config" data-fade-in="0" data-fade-out="0"></div>
data-fade-in
template fade in duration in milliseconds
data-fade-out
template fade out duration in milliseconds

Attention: class="config" is necessary

JavaScript

Insert your JavaScript in the window.overlay-ready event handler:

JavaScript $(window).one("overlay-ready", function (evt, socket) { 
/* insert your code here */ 
});

Attention: use .one instead of .on

You can use window.overlay-cleanup to call clean up functions after hiding the current template.

Overlay Animation

Some widgets supports overlay animations, configure it with the HTML data-* attributes.

data-animation optional
string - "bottom-top", "top-bottom", "left-right", "right-left" and "none", default: none
data-animation-out optional
same as data-animation, use for hide element, default: data-animation
data-animation-duration optional
number - animation duration in milliseconds, default: 0
data-animation-duration-out optional
same as data-animation-duration, use for hide element, default: data-animation-duration
data-animation-fade optional
number - fade duration in milliseconds, default: 0
data-animation-fade-out optional
same as data-animation-fade, use for hide element, default: data-animation-fade
data-animation-distance optional
number - start/end distance for the element in px, default: 0
data-animation-distance-out optional
same as data-animation-distance, use for hide element, default: data-animation-distance

CSS Helper Classes

JavaScript new StudioPanelControllerCssHelperOverlayWidget();

This class add panel-has-{panel-ident} css classes to the <body> for every panel that is active, should be used before StudioPanelControllerOverlayWidget.

JavaScript new TwitchSupporterCssHelperOverlayWidget();

This class add twitch-supporter-has-{follow|donation|subscription|cheer} css classes to the <body> if the activity available, should be used before TwitchSupporterLastSupporterTextOverlayWidget.


Widgets

Notification Widget

Show notification panels from plugin Supports/Donation.

JavaScript new StudioNotificationOverlayWidget(panelSelector);
panelSelector
string or jQuery or HTMLElement
HTML <div class="notification" 
data-type="donation"
data-animation="bottom-top" 
data-animation-duration="1500" 
data-visible-duration="5000" 
data-animation-fade="1500" 
data-volume="10" 
data-audio="music/5sec.mp3"
data-volume-6="10"
data-audio-6="music/5sec.mp3"
data-voice-volume="100"
data-voice-rate="50"
data-voice-pitch="50"
data-min-months="5"
data-min-amount="12.10"
data-min-bits="50"
>
data-type
string - "donation", "follow", "subscription", "resubscription", "host", "cheer"
data-visible-duration
number - visible duration in milliseconds
data-volume-x optional
number - audio volume, -x = optional for donation (amount) and resubscription (months)
data-audio-x optional
string - audio file, -x = optional for donation (amount) and resubscription (months)
data-voice-volume optional
number - volume of speech synthesis, number between 0 - 100, 0: no speech synthesis
data-voice-rate optional
number - speed of speech synthesis, number between 0 - 100, default: 50
data-voice-pitch optional
number - pitch of speech synthesis, number between 0 - 100, default: 50
data-waiting-for-audio optional
0 or 1 - waiting for finish audio before run speech and start visible timer, default: 1
data-animation-* optional
Support for Overlay Animation
random-strength optional
number - if multiple panels selected choose random, strength increases the probability, default: 1
If all entries has -1, the next entry is selected and so on.
data-min-months optional
number - (for resubscription) use panel with at least x months resubscription, default: 0
data-min-amount optional
number - (for donation) use panel with at least x amonth donation, default: 0
data-min-bits optional
number - (for cheers) use panel with at least x bits cheer, default: 0
data-months optional
number - (for resubscription) use panel with x months resubscription, default: 0
data-amount optional
number - (for donation) use panel with x amonth donation, default: 0
data-bits optional
number - (for cheers) use panel with x bits cheer, default: 0
css class .prime optional
(for subscription and resubscription) use panel for prime, default: 0
data-emotes optional
0 or 1 - (for cheers, donation and resubscription) show emotes as images in .message, default: 0
data-emotes-size optional
number - (for cheers, donation and resubscription) emote size (1, 2 or 3), default: 1

Classes for content

Type "donation"
.name
Name of donator
.amount
Amount of donation
.currency-symbol
Currency symbol of donation (€)
.currency
Currency text of donation (EUR)
.message
Message of donation
Type "follow"
.name
Name of follower
Type "host"
.name
Name of host
.viewers
Viewers of host
Speech Synthesis
.speech
Text for speech synthesis
HTML <span class="name"></span> has 
<span class="amount"></span>
<span class="currency-symbol"></span> donated.<br>
<div class="message speech"></div>
Type "cheer"
.name
Name of subscriber
.message
Message of cheer
.bits
Bits of cheer
Options for .message
data-cheer-theme: light or dark
data-cheer-type: animated or static
data-cheer-size: 1, 2, 3 or 4
Type "raid"
.name
Name of raid
.viewers
Viewers of raid
Type "subscription"
.name
Name of subscriber
.tier-value
Tier of subscribtion
Note
add CSS class "prime prime-temp" to panel if prime
Type "giftsubscription"
.name
Name of subscriber
.recipient
recipient of subscribtion gift
.tier-value
Tier of subscribtion gift
Type "resubscription"
.name
Name of resubscriber
.months
Months of resubscription
.tier-value
Tier of subscribtion
.count
Number of resubscriptions (month+1)
.message
Message of resubscription
.months-text.single
Text show for one month
.months-text.multiple
Text show for more than one months
Note
add CSS class "prime" to panel if prime
Month example:
HTML <span class="name"></span> tanks for 
<span class="months-text single"> your additional </span>
<span class="months-text multiple"> your <span class="months"></span> months</span>
support.
Prime example:
HTML 
<div class="notification" data-type="subscription" >
	Thanks for your subscription<br>
</div>
<div class="notification prime" data-type="subscription" >
	Thanks for your prime subscription<br>
</div>

Query Widget

Show HTML elements by url.

JavaScript new QueryOverlayWidget(panelSelector, queryPart, defaultLayerClassName);
panelSelector
string or jQuery or HTMLElement - elements selected with .{queryPart.value}
queryPart
string - the query part ?&queryPart=css-class-name
defaultLayerClassName optional
string - css class name, if no query defined show layer with this class name

Pause Widget

Show pause panels from plugin Pause.

JavaScript new StudioPauseOverlayWidget(panelSelector, textSelector);
panelSelector
group element, string or jQuery or HTMLElement - elements selected with .pause-IDENT
textSelector
string or jQuery or HTMLElement - must be child from panelSelector
HTML
data-animation-* optional
Support for Overlay Animation

Pause Timer Widget

Show pause panels from plugin Pause with timer, duration text must contains only numbers (in minutes)!

JavaScript new StudioPauseTimerOverlayWidget(panelSelector, textSelector, options);
panelSelector
string or jQuery or HTMLElement - elements selected with .pause-IDENT
textSelector
string or jQuery or HTMLElement - must be child from panelSelector
options
object: {release_text: string - text if the time released, single_text: string - text if only one minute left, pattern: string - text with {minutes} placeholder e.g. "In {minutes} minutes it goes on."}
HTML: or as data-pausetimer-* attribute, with hyphen instead of dash

Panel Controller Widget

Show panels from plugin PanelController.

JavaScript new StudioPanelControllerOverlayWidget(panelSelector);
panelSelector
group element, string or jQuery or HTMLElement, elements selected with .panel-IDENT
HTML
data-animation-* optional
Support for Overlay Animation
Note
Add CSS class "panel-controller-is-active" to controlled elements
Add CSS class "panel-is-visible" to element if the element should be visible
Add CSS class "panel-has-{ident}" to body if the element should be visible

Teammates Text Widget

Show teammates from plugin Teammates

JavaScript new StudioTeammatesTextOverlayWidget(panelSelector, options);
panelSelector
string or jQuery or HTMLElement
options
object: {empty: string - text if no element active, pre_text: string - show text only if more than 0 elements active, join_last: string - string to join last element, join: string - string to join elements}
HTML: or as data-teammates-* attribute, with hyphen instead of dash

Game Image Widget

Show image for current game, game must be saved and image must be in the correct folder.

JavaScript new TwitchGameImageOverlayWidget(panelSelector, imagePath);
panelSelector
string or jQuery or HTMLElement
imagePath
string - with {game.ident} e.g. "./images/logo-{game.ident}.png"

Game Text Widget

Show name from current game.

JavaScript new TwitchGameTextOverlayWidget(panelSelector, options);
panelSelector
string or jQuery or HTMLElement
options
object: {hide_parent: boolean - hide if game empty, parent: string or jQuery or HTMLElement or null}

Title Widget

Show channel title.

JavaScript new TwitchTitleTextOverlayWidget(panelSelector);
panelSelector
string or jQuery or HTMLElement

Last Supporter Widget

Show last supporter from plugin Supporter.

JavaScript new TwitchSupporterLastSupporterTextOverlayWidget(panelSelector, options);
panelSelector
string or jQuery or HTMLElement (group only identical elements)
options
object: {empty: string - string if no entries available, join: string - string to join elements, scroll: boolean, scroll_speed: number - duration in milliseconds, type: string - "donation", "follow", "subscription", "host", "cheer",
limit: number}

Monstercat Widget

Show song data from plugin Monstercat.

JavaScript new TwitchMonstercatCurrentSongOverlayWidget(panelSelector);
HTML 
<div class="panel-selector">
  <div class="data"><span class="song"></span></div>
  <div class="data unknown">unknown</div>
</div>
CSS 
.data.unknown { display: none; }
.empty .data { display: none; }
.empty .data.unknown { display: block; }
panelSelector

string or jQuery or HTMLElement - contains child elements with the following css classes:
.song: song, .artist: artist, .spotifyUrl: spotify url, .bpm: beats per minute,
.duration: duration, .genre: genre, .cover: cover will set as background-image

Has class .empty if no song available.

Remote Webcam Widget

Show remote webcam from plugin Remote Webcam.

JavaScript new StudioRemoteWebcamOverlayWidget();
HTML <div data-remote-webcam="name"></div>
data-remote-webcam
string - name for position

Dyn. Text Insertion Widget

Show dynamic text insertion (lower third) from plugin Dyn. Text Insertion.

JavaScript new StudioDynTextInsertionOverlayWidget(panelSelector);
panelSelector

string or jQuery or HTMLElement - contains child elements with the following css classes:
.title: title of the insertion, .text: text of the insertion

HTML <div class="panel-selector" data-template="template"></div>
data-template
string - template name
data-template-group optional
string - grouping different template names for wait previous option, default: template name
data-volume optional
number - audio volume, default: 0
data-audio optional
string - audio file, default: empty
data-animation-* optional
Support for Overlay Animation

Date Time Widget

Show current time.

JavaScript new DateTimeOverlayWidget(panelSelector);
panelSelector
string or jQuery or HTMLElement
HTML
data-datetime-lang optional
string - language for text formates, default: studio language
data-datetime-format optional
string - format string, default: HH:mm
Note
You find all prossible locals and formates here.

Twitch Chat List Widget

Show twitch chat as list.

JavaScript new TwitchChatListOverlayWidget(panelSelector);
panelSelector
string or jQuery or HTMLElement
HTML
data-scroll-duration optional
number - list scroll speed in milliseconds, default: 0
data-animation-fade optional
number - duration for fading in milliseconds, default: 0
data-insert-animation optional
string - animations: "left-right" and "right-left", default: null
data-insert-animation-duration optional
number - duration for insert animation in milliseconds, default: 0
data-lifetime optional
number - how long text should visible in milliseconds, default: 0
data-emotes optional
0 or 1 - show emotes as images in text, default: 0
data-emotes-size optional
number - emote size (1, 2 or 3), default: 1
data-cheer-theme optional
string - light or dark, default: light
data-cheer-type optional
string - animated or static, default: static
data-cheer-size optional
number - 1, 2, 3 or 4, default: 1

Twitch Chat Line Widget

Show twitch chat as line.

JavaScript new TwitchChatLineOverlayWidget(panelSelector);
panelSelector
string or jQuery or HTMLElement
HTML
data-animation-fade optional
number - duration for fading in milliseconds, default: 0
data-insert-animation optional
string - animations: "left-right" and "right-left", default: null
data-insert-animation-duration optional
number - duration for insert animation in milliseconds, default: 0
data-lifetime optional
number - how long text should visible in milliseconds, default: 0
data-emotes optional
0 or 1 - show emotes as images in text, default: 0
data-emotes-size optional
number - emote size (1, 2 or 3), default: 1
data-cheer-theme optional
string - light or dark, default: light
data-cheer-type optional
string - animated or static, default: static
data-cheer-size optional
number - 1, 2, 3 or 4, default: 1

Twitch Chat Box Widget

Show twitch chat as box, like notification.

JavaScript new TwitchChatBoxOverlayWidget(panelSelector);
panelSelector

string or jQuery or HTMLElement - contains child elements with the following css classes:
.username: username, .time: time, .message: message

HTML
data-animation-* optional
Support for Overlay Animation
data-visible-duration optional
number - visible duration in milliseconds, default: 2000
data-max-concurrent-entries optional
number - how many entries should display at the same time, default: 1
move-direction optional
string - move direction for concurrent entries (possible values: "left", "right", "top", "bottom"), default: animation direction
data-horizontal-factor optional
number - move distance for horizontal concurrent entries (possible values: 1 or 2), default: 1
data-time-locale optional
string - language for text formates, default: studio language
data-time-format optional
string - format string, default: HH:mm
data-only-username optional
0 or 1 - don't add ":" after username, default: 0
data-emotes optional
0 or 1 - show emotes as images in text, default: 0
data-emotes-size optional
number - emote size (1, 2 or 3), default: 1
data-cheer-theme optional
string - light or dark, default: light
data-cheer-type optional
string - animated or static, default: static
data-cheer-size optional
number - 1, 2, 3 or 4, default: 1
Note
You find all prossible locals and formates here.

Twitch Supporter Statistics Widget

Show current time.

JavaScript new TwitchSupporterStatisticsOverlayWidget(panelSelector);
panelSelector

string or jQuery or HTMLElement - contains child elements with the following css classes:
.total-follower: all follower, .current-follower: new follower in this session .total-subscribers: all subscribers, .current-subscribers: new subscribers in this session, .current-resubscribers: new resubscribers in this session, .current-all-subscribers: new subscribers and resubscribers in this session, .current-hosters: current hosters, .current-donators: new donations in this session, .current-donations: sum donation amounts in this session, .current-cheers: new cheers in this session, .current-cheer-bits: new bits in this session,

HTML 
<div class="panel-selector">
  <div>Followers: <span class="total-follower" data-stats-text="1"></span></div>
  <div>Target Today: 
    <span class="bar-container">
      <span class="current-follower" data-stats-text="1">25</span>
      <span class="current-follower" data-stats-text="0" data-stats-percent="25" data-stats-maxpercent="100" /* style for nice bar */></span>
    </span>
  </div>
</div>
data-stats-text optional
0 or 1 - show value as text, default: 1
data-stats-percent optional
number - use value as style width in percent, value is the nominator, number is the denominator, default: 0
data-stats-maxpercent optional
number - cover percent width to this number, default: null

Marquee Widget

Scrolls child element if it not fit in the container.

JavaScript new MarqueeOverlayWidget(panelSelector);
panelSelector

string or jQuery or HTMLElement - contains one child element which will scrollable

HTML
data-marquee-speed optional
number - scroll duration in milliseconds, default: 15000
data-marquee-gap optional
number - gap between duplicated entries, default: 0
data-marquee-direction optional
string - direction "left", "right", "up", "down", default: "left"

Text Animation Widget

Create text animation on element.

JavaScript new TextAnimationOverlayWidget(panelSelector, animation, options);
panelSelector
string - jQuery selector string
animation
string - "pulse", "resize-shake" or "shake"
options
object: {duration: string - css animation duration (1s, 1000ms) default:empty, iterations: number - css animation iterations (infinite,2,...) default:empty }