SugarWave widget for StreamElements Simple wipe transition that fills the screen with a grid of images. Triggered manually by command and/or automatically on twitch events. Features:
Grid size.
Shuffle images.
Diagonal, horizontal and vertical style.
Start delay and animation duration.
Up to 5 manual commands to configure as:
Show custom list of images.
Show avatar/emotes from chosen @username (specify name after the command in chat -> !emotes sugarlars).
Show avatar/emotes from sender (user that sent the command).
Show avatar/emotes from broadcaster (the streamer).
Set permissions (which users can use the command).
6 twitch events to configure as:
Follower, new subscriber, resubscriber, host, raid and cheer.
Show custom list of images.
Show avatar/emotes from event user (user that triggered the event).
Show avatar/emotes from broadcaster (the streamer).
Oh, and no watermarks with my name ;P
Install widgethttps://streamelements.com/dashboard/overlays/share/61c4cf6887875607d7339bcf*If you are going to use the widget to display only custom images, skip the authentication section.Twitch authenticationIn order to be able to access certain data about users' accounts (avatars and emotes in this case), Twitch requires each request to be authenticated. This authentication involves:
Generating a token, using the clientId and the clientSecret.
Sending the clientId and token in each API request.
*If you already have a clientId and token, you can use them! No need to register a new app.Use the button "Generate Twitch Token" inside the widget settings to obtain it.
Fill clientId and clientSecret fields.
Press button.
Token will appear in the browser console (F12 key) for you to copy-paste.
Use the button "Test Twitch Token" inside the widget settings to run a test.
Fill clientId and token fields.
Press button.
A sugarwave with you avatar will appear in the overlay.
Paste that CSS in the overlay OBS properties ("Custom CSS" field).
Download v1.8aNote: App doesn't add/modify/remove any code from overlay website. App only takes advantage of CSS styles to alter the way avatars are displayed.Features:
Settings automatically saved in internal save file.
Show only selected users, and/or hide specific ones.
Change layout position and orientation.
Change avatars size and margin.
Set an animation/effect when users start talking.
Change opacity when users start talking.
Change names position and effect.
And for specific users:
Set custom images for silence and speaking.
Set avatar position and size.
Set custom border color.
Show/hide name.
Notes v1.8a[6 November 2022]
Fields "Layout X/Y" now include negative values. The idea is that the OBS layer takes the whole screen and you configure everything via this app 😉 (tip: hide partially all avatars and add a "Move" animation in the opposite direction so icons pop out like in a whack-a-mole game).
Form is always saved in the internal file when closing the app. Now there will be a "Do you want to save changes?" confirmation message in case the form is dirty (this can be useful if you only wanted to test animations without having to import a backup file afterwards).
Fixed a stupid CSS thing that made avatars float some pixels above their text or screen edge.
Notes v1.8[31 October 2022]
New animation types.
New fields animation "Duration" and animation "Quantity".
New url image preview (just mouse over grid cells with image filenames).
Removed effect type "Brightness" as it conflicted brightness animation types.
Version added to final css paragraph to keep track of the last time you generated it.
Added units labels everywhere.
Some tooltips amended.
Big generate button.
Notes v1.7e[19 June 2021]
Fixed newline character when displaying generated CSS result in the textarea (it was shown like one humongous single line).
Popups (About and Result) now will appear centered in the app (it was annoying Windows placing them in random start positions).
Press escape key to close About and Result dialogs (God, why didn't I add this functionality before??).
New "Reload" menu option to restore last internal save file (handy when opening a new version of the app, and it asks you if you want to load the previous version file, and you accidentally say no).
Added Ctrl+S shortcut to save the form.
Notes v1.7d[17 June 2021]
When generating CSS, results will be presented in a popup (instead of directly copied to clipboard). This will avoid the random exception of clipboard being "locked" by another process.
Load config file confirmation popup now will appear after the app has been rendered (for some reason popup was always displayed before the app).
Notes v1.7c[17 June 2021]
"Check updates" menu option now will actually check the GitHub website and compare version numbers.
New "Copy" button added (duplicates rows).
New column "Name" to choose whether to show/hide the name for each user.
App performance improved (removed grid "X" clear buttons, enabled grid DoubleBuffering, always use grid AddRange() when populating).
Grid max rows increased to 50.
Et cetera~
ScoreboardBySugarlars Custom app to easily update a wins/lost scoreboard. How does it work?
App generates/updates .txt file.
OBS reads file and prints text in screen.
Configuration:
In OBS create a new text element and mark it as "Read from file".
Select the file generated by the app -> scoreboard.txt
In the app set the desired template message. Write whatever you want, in multiple lines even, the fragments {W} and {L} will be replaced with the corresponding amounts.
Leave the app open while streaming and update amounts with just one click!