Overlay application to accompany Smash Soda
Latest Release
·
Report Bug
·
Request Feature
Here is the source code for the overlay application included with Smash Soda. It has been developed with Wails version 3. It is not intended to be run standalone, and won't work with Parsec Soda V's Web Sockets widget. The overlay uses WebView2. Instructions for using the overlay with Smash Soda can be found here.
The source code is made public in case anybody wants to modify and compile for their own purposes (or contribute to the project!).
Issues and feature requests should be made in the Smash Soda repository.
Download
Download latest
version |
Issues
Report issues and
request features |
Discord
Join the Discord
community! |
Wiki
Read the full wiki
guide here! |
Download the latest version of the overlay here: Latest Version
Extract the contents to the overlay folder inside Smash Soda (if a overlay folder does not exist, create one).
You do not start the overlay application yourself. Smash Soda will automatically launch it when you begin hosting your room (when enabled). Inside Smash Soda, you can find the widget for enabling it and customizing the settings here:
The overlay has some built in hotkeys:
| Hotkey | Action |
| CTRL + SHIFT + C | Toggle the chat window. |
| CTRL + SHIFT + M | Toggle the move mode for moving widgets around manually. |
| CTRL + SHIFT + Left Arrow | Decrease the overlay opacity. |
| CTRL + SHIFT + Right Arrow | Increase the overlay opacity. |
| CTRL + SHIFT + Up Arrow | Increase the overlay scale. |
| CTRL + SHIFT + Down Arrow | Decrease the overlay opacity. |
| CTRL + SHIFT + F1 | Show the overlay settings window. |
You can customize various settings of the overlay with the built in settings window. You can display it by pressing the default hotkey (CTRL + SHIFT + F1) or by clicking the "Settings" button inside the Smash Soda overlay widget.
The overlay has a simple theme system that lets you load custom CSS files. You can place these CSS files in the themes folder. The file name is used as the name for that theme.
You can find a template for making your own themes here: Template File
Refrain from using any positioning or size rules, as the overlay allows for resizing widgets dynamically.
The overlay has a simple plugin system for creating custom widgets on the overlay. A plugin is a subfolder inside the plugins folder, and consists of a HTML, CSS and JavaScript file with the same name as the subfolder. CSS and JavaScript files are optional.
- plugins
- customplugin
- customplugin.html
- customplugin.css
- customplugin.js
The plugin system is only really intended for making your own personal plugins, or offical ones created by Trybuchet. The plugin JavaScript is evaluated in an unsafe way, so downloading plugins from other users can be dangerous if you do not 100% trust that user.
The Smash Soda overlay application is primarily intended for users who want to see details about their room at all times and only have one monitor. For those wishing to build their own OBS overlays, it's as simple as connecting to the websocket server that Smash Soda creates when hosting, and then displaying the info how you want.
Check out the obs_example.html for a very basic example of how to make a static HTML with vanilla JavaScript, to render data from Smash Soda.
Here is a static web page template for displaying your Parsec room chat in OBS...it'll also broadcast display Twitch chat in your Parsec room!
https://github.com/trybuchet/twitch-overlay-widget
This is for those wishing to edit the overlay's code and/or contribute to the project. The overlay is built in the Wails v3 framemwork. Follow their guide for setting up a development environment here. (Note this overlay is compatible with Smash Soda version 7.x.x onwards).
git clone https://github.com/Smash-Soda-Team/smash-soda-overlay
Make a copy of .env.example and rename the copy to .env. Here you can customize the various environment variables for the app.
To run the overlay in dev mode:
wails3 dev
To build the application:
wails3 task windows:build
Socket messages from Smash Soda come in this JSON format:
{
"event": "event name",
"data": {}
}This is than transmitted across the app with the eventBus, which is hooked on to the window object to keep things simple. You can then listen to events like:
window.eventBus.on('event name', (data: any) => {
// Do thing
});The overlay has a built in websocket server, allowing you to test it without Smash Soda. The websocket server can be enabled and customized in the .env file.
You will also find Web_Socket_Tester.html inside the tools folder that is set up for easy testing, allowing you to send data to the overlay.
See the open issues for a list of proposed features (and known issues).
Would you like to contribute to the project? That's great! Here's what you do:
- Open a new issue reporting what you're going to do.
- Fork this repository.
- Create a branch for your feature.
- Make your local changes.
- Submit a pull request.
If this is helpful to you and you'd like to say thanks, then please visit our Patreon or our Ko-Fi. Smash Soda and Soda Arcade depends on supporters to keep the service alive and free!
See LICENSE.txt for more information.
Project Link: https://github.com/trybuchet/SmashGlass
- [MickeyUK] - GitHub - Smash Soda Project Lead