A streaming overlay for competitive Mario Kart streamers
What this is:
As you might have noticed already, this whole project started as a way to display the current scores of our matches on stream, but I maybe went a bit overboard and added some other features, to make the lives of everyone in a team a bit easier.
This bot is not meant to work by itself, but relies heavily on the Toad Bot and is basically just an extension. (Except you don't care about a streaming overlay and just want to use the other functions =P )
Latest Updates:
Type
_status
in any channel, the bot has access to, to get more information on what is and is not working right now.Features:
- A streaming overlay, which is fully customizable through some html and css and receives its data directly from Toad Bot
- Supports multiple instances (multiple overlays) for a single user in different channels/servers
- An easy to use and nice to look at match scheduling function
- A super basic friendcode management feature
- Tracktable functionality (as the old bot can't be invited to servers anymore, I copied the images)
- Great stability: Runs on a root server inside a data center based in Frankfurt
- Help through the bot itself is super scuffed. (I'm working on it, to make the experience in discord better...)
Planned Features:
- Overlay profiles to use different looking overlays for different channels/servers
- Automatic lineup creation through the scheduling feature
- Deletion of all data for a specific server or user (The routines for this stuff are much harder, than I had originally thought...)
Invite the bot to your discord server >> <<
Setup
Prerequisites:Not much, really. You only need to be able to receive private messages, so the bot can send you your URL for the overlay.
Creating an overlay:
Setting up the home and guest team
Set the home team (your team and for each channel separately)
- After inviting the bot to your server, make sure it has at least the same permissions as Toad for it to be able to read and write to the corresponding channels.
- In the channel, where you usually use your Toad for score tracking, execute the command `_setup`. The bot will then send you some instructions and the URL to your overlay to your DMs.
- With your new overlay as an URL, go to the streaming application of your choice (Streamlabs or OBS Studio) and create a new browser source.
- Insert the URL to the URL-field and use the following settings:
- Width: 1000
- Height: 120
- Remove any custom css
- Check the two boxes at the bottom of the page ("Shutdown source when not visible" and "Refresh browser when scene becomes active") to save me some traffic and for better troubleshooting ("Have you tried, turning it off and on again?")
- Just use the Toad bot as you're used to.
Setting up the home and guest team
Set the home team (your team and for each channel separately)
- Go to the team registry from this site and search for your own team
- Copy the URL to your team or note the id (the number at the end of the URL).
- Go to the discord channel you have executed the `_setup` command in and use one of the following commands:
- `_home mkc-url` (replace "mkc-url" with the copied URL)
- Example: `_home https://www.mariokartcentral.com/mkc/registry/teams/1064`
- `_home mkc-id` (replace "mkc-id" with the noted id of your team)
- Example: `_home 1064`
- `_home mkc-url` (replace "mkc-url" with the copied URL)
- Wait a few seconds, until the bot fetches all necessary data from the profile.
- The bot should have sent a message to the current channel and your profile should now contain the team logo and tag.
- If this is not the case, just try it again after a few more seconds...
- Execute the same steps as you would for the home team, but replace `_home` with `_guest`.
Using custom team data
If you want to use this overlay for a subclan that isn't registered on MKC, you can do so by just overriding the data with the following commands:
If you want to use this overlay for a subclan that isn't registered on MKC, you can do so by just overriding the data with the following commands:
Command | Short version | Parameter Type | Description |
_setlogo-home | _hlogo | IMAGE/URL/EMPTY | Upload an image with the command as text, or use an URL to your logo. Leaving any sort of parameter empty just removes the image URL |
_setlogo-guest | _glogo | IMAGE/URL/EMPTY | Upload an image with the command as text, or use an URL to your logo. Leaving any sort of parameter empty just removes the image URL |
_setname-home | _hname | TEXT | Just pass the name of the team as text Example: _hname Project HIVE |
_setname-guest | _gname | TEXT | Just pass the name of the team as text Example: _gname Project HIVE |
_settag-home | _htag | TEXT | Just pass the tag used as text Example: _htag HVE |
_settag-guest | _gtag | TEXT | Just pass the tag used as text Example: _gtag HVE |
Customizing the overlay
Prerequisites:In order to customize your overlay, you need some basic knowledge or understanding of HTML and/or CSS.
The background image can be changed without any knowledge of the aforementioned scripting languages, but it might look a lot better, if you optimize the positions of the elements used
I've really tried to keep things as simple as possible, but programmer brains don't work like that sometimes...
Also, commands in the DMs with ToadOverlay don't use any sort of prefix (the underscore before the command "_").
Some more words on overlays:
Limits:
The only real limit to the whole HTML and CSS thing is, that you can't use square brackets ("[ ]") and because I need to build some statements for this whole thing to be pushed into a database, you can only use double quotation marks (" ") in scripts, etc.
As long as these two are not used, you can do literally anything until you reach the character limit of a discord message.
Changing the background image:
Changing the HTML of the overlay:
Changing the CSS of the overlay:
The command to paste some new CSS into the database is just `style [#some-css { with: some-styles }]` (including the square brackets)
(So basically the same as with the HTML, just with the `style` command and in another language.)
Resetting the overlay back to default:
To reset your overlay, just execute all three commands (img, html, css) in the DMs with ToadOverlay and type `[empty]` (square brackets with the word "empty" in between) as the parameter.
Examples:
The `help` command:
In your DMs with ToadOverlay, you can just send the word "help" to get some help on various commands and how to customize your overlay, but the bot tells you this, when you create your first overlay.
Deleting messages from ToadOverlay in the DMs
As you can't delete messages from others in DMs, I've implemented a way to delete messages from the bot in your DMs, if you'd like to keep everything nice and tidy.
To do so, just react to any message of ToadOverlay with (x) and the bot will delete its own message.
If you accidentaly delete the URL of an overlay, you wanted to still look up from time to time, just go to the corresponding channel and redo the `_setup` command. The bot will then resend you the URL.
As you might have read in the "Planned Features" section, I do plan to include profiles for multiple overlays, because as of right now, every user can have only one overlay, that is specific to himself and all you can do is edit the "default" profile, which only you can use for all channels you have created an overlay in.
This means that, if you want to use different overlays for multiple servers/channels, there is currently no way, but it is planned to be possible.
Limits:
The only real limit to the whole HTML and CSS thing is, that you can't use square brackets ("[ ]") and because I need to build some statements for this whole thing to be pushed into a database, you can only use double quotation marks (" ") in scripts, etc.
As long as these two are not used, you can do literally anything until you reach the character limit of a discord message.
Changing the background image:
Changing the background image is as easy as executing a command.
All you need, is a publicly available URL to your background image and execute the following command in your DMs with ToadOverlay:
- img [URL to your image]
- Example and default: img [https://toad.darkstormgames.de/images/default.png]
- Please note, that the square brackets are needed for parsing here.
Changing the HTML of the overlay:
So here is, where things get juicy.
The command to paste some new HTML-code into the database is just `html [<some html></excluding the body-tags>]` (including the square brackets)
If you want to test around with some ideas, you can just copy this default testpage from github, play around a bit and open it in your browser to preview the changes. (Although the page might not work, because I know nothing of this whole stuff and sometimes everything breaks for some reason... But it contains all the default HTML and CSS you might need )
HTML:
<div id="container">
<img id="bg" class="opacity-75" src="" >
<div id="difference" class="central-position opacity-75"></div>
<div id="home-current" class="central-position opacity-90"></div>
<img id="home-logo" class="central-position opacity-85" src="">
<div id="home-tag" class="central-position opacity-90"></div>
<!--<div id="home-name" class="central-position opacity-90"></div>-->
<div id="guest-current" class="central-position opacity-90"></div>
<img id="guest-logo" class="central-position opacity-85" src="">
<div id="guest-tag" class="central-position opacity-90"></div>
<!--<div id="guest-name" class="central-position opacity-90"></div>-->
</div>
Changing the CSS of the overlay:
The command to paste some new CSS into the database is just `style [#some-css { with: some-styles }]` (including the square brackets)
(So basically the same as with the HTML, just with the `style` command and in another language.)
CSS:
#container {
position:absolute;
top:0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align:center;
color:white;
font-size:28px;
width: 962px;
}
#difference {
top:70%;
left:50.8%;
}
#home-current {
top:60px;
left:20%;
}
#home-tag {
top:20px;
left:20%;
}
#home-name {
top:20px;
left:20%;
}
#home-logo {
top:40px;
left:35%;
height:70px;
}
#guest-current {
top:60px;
left:80%;
}
#guest-tag {
top:20px;
left:80%;
}
#guest-name {
top:20px;
left:80%;
}
#guest-logo {
top:40px;
left:67.5%;
height:70px;
}
.central-position {
position:absolute;
transform:translate(-50%,-50%);
}
.opacity-90 {
opacity:0.9;
}
.opacity-85 {
opacity:0.85;
}
.opacity-75 {
opacity:0.75;
}
Resetting the overlay back to default:
To reset your overlay, just execute all three commands (img, html, css) in the DMs with ToadOverlay and type `[empty]` (square brackets with the word "empty" in between) as the parameter.
Examples:
- img [empty]
- html [empty]
- css [empty]
The `help` command:
In your DMs with ToadOverlay, you can just send the word "help" to get some help on various commands and how to customize your overlay, but the bot tells you this, when you create your first overlay.
Deleting messages from ToadOverlay in the DMs
As you can't delete messages from others in DMs, I've implemented a way to delete messages from the bot in your DMs, if you'd like to keep everything nice and tidy.
To do so, just react to any message of ToadOverlay with (x) and the bot will delete its own message.
If you accidentaly delete the URL of an overlay, you wanted to still look up from time to time, just go to the corresponding channel and redo the `_setup` command. The bot will then resend you the URL.
Match scheduling
The match scheduling function is a simple, reaction based player gathering tool to make it clear at a first glance, who can or cannot play at the requested times.Prerequisites:
The bot needs permissions to send embeds (The "EMBED LINKS" permissions), react to its own messages (The "ADD REACTIONS" permission) and delete reactions (The "MANAGE MESSAGES" permission) in order to function properly.
If it doesn't have the "MANAGE MESSAGES" permission, users need to remove their reaction, before they can redo a reaction, they have already made.
Code:
General channel permissions:
VIEW CHANNEL
Text channel permissions:
SEND MESSAGES
EMBED LINKS
ADD REACTIONS
MANAGE MESSAGES (To be able to remove reactions)
READ MESSAGE HISTORY (So that the bot can see its own messages after a server restart)
Basic command:
Changing default times:
Set a timeout for schedules (for future functionality)
The command for the match scheduling is just `_war`.
The bot then prints out the default times (19, 20, 21, 22, 23) for other players to react accordingly.
If you want to schedule a specific time, just add all times you want to schedule matches for as parameters to the `_war` command.
- Examples:
- _war 19 20 22:30 0
- _war 7pm 8pm 10:30pm 12am
- _war 14
- _war 8am
- ... etc.
You can use any time you want as a parameter, e.g.: 12:24pm, 23:59, etc...
- -> Can (Use this, if you can and want to play at the given time)
- -> Can Sub (Use this, if you can play, but want to let others go first)
- -> Not Sure (Use this, if you don't know yet, if you can or want to play)
- -> Can't (Use this, if you know for sure, that you cannot or don't want to play)
Changing default times:
To change the default times, you have to use the `_war` command followed by `setdefault` and the preferred default times for the corresponding channel.
- Examples:
- _war setdefault 22 23 0
- _war setdefault 7pm 8pm 9pm 10pm 11pm
- or any other time(s)
Set a timeout for schedules (for future functionality)
By default, matches are active for 24 hours. And are invalidated either after these 24 have passed (and someone reacted to anything) or a new schedule for the same time has been created.
The timeout feature is planned to be used for the lineup feature later on, so it's basically useless for now (but it works)
To set a new timeout, just use the `_war` command followed by `settimeout` and the number of hours, each schedule in the corresponding channel should be valid.
- Examples:
- For 1 day: _war settimeout 24
- For 3 days: _war settimeout 72
- For 1 week (maximum): _war settimeout 168
If you want a more sleek tool for your match scheduling, check out Cadoizzob, which also has a cool tool for teamwide timetrial management
And if you prefer a classic approach to gather players, just use the `_start` command from Toad Bot.
Discontinued
Set your own fc:
Set another's fc:
To set your own friendcode, just type `_fc SW-FR1E-NDC0-D312` in any channel ToadOverlay has read-access to.
- Examples: (I apologize to the poor souls, whose friendcodes I'm randomly leaking)
- _fc 5363-1238-2345
- _fc SW-1236-7354-2346
Set another's fc:
To set the friendcode of another user on your server, just use the same command and ping the user as another parameter.
Get your own fc:
Just type `_fc` without any arguments and the bot will send the saved friendcode.
Get another's fc:You can search for friendcodes by pinging the wanted players, or by likeness search through their discord and server-nickname.
- Examples: (These would all print at least my fc, if I'm on your discord server)
- _fc @Rollo
- _fc Rollo
- _fc lo
All commands listed
These commands are only used in the DMs with the ToadOverlay bot. They don't use a prefix.Command | Short/Alternative version | Parameters | Description / Examples |
gethelp | help | NONE | Get some help regarding commands and overlay editing |
setimage | img | URL | Sets the background image for your overlay img [https://toad.darkstormgames.de/images/default.png] |
sethtml | html | HTML code excluding the body tags | Sets the HTML for your overlay html [empty] |
setstyle | style | CSS styles excluding the style tags | Sets the CSS styles for your overlay style [empty] |
These commands are used in any channel, the ToadOverlay has at least read/write permissions for and also has the Toad bot used in it. They use the "_"-prefix.
Command | Short/Alternative version | Parameters | Description / Examples |
_setup-overlay | _setup | NONE | Sets up your overlay and sends you the URL to the created one. |
_delete-overlay | _delete | NONE | USER-PING | Delete your overlay or the one of the pinged user (Deletion of another's overlay only works, if you have the "KICK-MEMBERS" permission on the server) _delete @Rollo |
_reset-scores | _reset | NONE | Resets the scores displayed on the overlay back to zero. (Basically a useless command, because it all depends on the points from Toad bot and starting a new war through Toad resets the points anyway) |
_setmkc-home | _home | MKC-ID | MKC-URL | Gets the data from the given mkc team profile and sets it as the home team. _home 1324 |
_setmkc-guest | _guest | MKC-ID | MKC-URL | Gets the data from the given mkc team profile and sets it as the guest team. _guest 1324 |
_setlogo-home | _hlogo | IMAGE | URL | NONE | Upload an image with the command as text, or use an URL to your logo. Leaving any sort of parameter empty just removes the image URL. |
_setlogo-guest | _glogo | IMAGE | URL | NONE | Upload an image with the command as text, or use an URL to your logo. Leaving any sort of parameter empty just removes the image URL. |
_setname-home | _hname | TEXT | Just pass the name of the team as text. _hname Project HIVE |
_setname-guest | _gname | TEXT | Just pass the name of the team as text. _gname Project HIVE |
_settag-home | _htag | TEXT | Just pass the tag of the team as text. _htag HVE |
_settag-guest | _gtag | TEXT | Just pass the tag of the team as text. _gtag HVE |
These commands are used in any channel, the ToadOverlay has at least read/write permissions for ("MANAGE MESSAGES" for scheduling command and "EMBED FILES" (I think...) for tracktable). They use the "_"-prefix.
Command | Short/Alternative version | Parameters | Description / Examples |
_schedulewar | _war | NONE | TIMES | Schedules matches as per default values or given times _war 20 _war 8pm 9pm 10pm |
_schedulewar setdefault | _war setdefault | TIMES | Sets the default times for the `_war` command _war setdefault 7pm 8pm 9pm 10pm |
_schedulewar settimeout | _war settimeout | NUMBER | Sets the time in hours, each schedule for the current channel should be valid _war settimeout 24 |
_fc SW-1234-5678-9012 _fc @Rollo 1234-5678-9012 | |||
_tracktable | _track | MK TRACK | Prints the tracktable image of the given MK8DX track _track wp _track dWW |
Closing comments
If there are any questions, that I haven't already answered, feel free to just ask here (if it's important for everyone) or just DM me on Discord (rollo_dev).I will try to answer your questions as soon as possible.
For the obligatory self advertisement:
And if you're into code, you can check out the whole source for the bot on GitHub:
Last edited: