Language: DE | EN

Documentation

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

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>

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

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

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

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

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

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"

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}

Show channel title.

JavaScript new TwitchTitleTextOverlayWidget(panelSelector);

panelSelector: string or jQuery or HTMLElement

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}

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.

Show remote webcam from plugin Remote Webcam.

JavaScript new StudioRemoteWebcamOverlayWidget();

HTML <div data-remote-webcam="name"></div>

data-remote-webcam: string - name for position

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

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.

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

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

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.

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

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"

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 }

Stream Overlay Studio

Documentation

Widgets

Overlays

Use Case Examples

Multiple Layer Overlay

Change overlay by scene switch

Basic Information and Helper Functions

Template Configuration

JavaScript

Overlay Animation

CSS Helper Classes

Widgets

Notification Widget

Classes for content

Type "donation"

Type "follow"

Type "host"

Speech Synthesis

Type "cheer"

Type "raid"

Type "subscription"

Type "giftsubscription"

Type "resubscription"

Query Widget

Pause Widget

Pause Timer Widget

Panel Controller Widget

Teammates Text Widget

Game Image Widget

Game Text Widget

Title Widget

Last Supporter Widget

Monstercat Widget

Remote Webcam Widget

Dyn. Text Insertion Widget

Date Time Widget

Twitch Chat List Widget

Twitch Chat Line Widget

Twitch Chat Box Widget

Twitch Supporter Statistics Widget

Marquee Widget

Text Animation Widget