ToadOverlay - An extension bot to Toad for streamers and more

Users Who Are Viewing This Thread (Total: 1, Members: 0, Guests: 1)

Rollo

keeps rolling
Site Supporter
A streaming overlay for competitive Mario Kart streamers
overlay_sample.gif

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:
  1. 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.
  2. 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.
  3. 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.
  4. 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?")
  5. 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)
  1. Go to the team registry from this site and search for your own team
  2. Copy the URL to your team or note the id (the number at the end of the URL).
  3. Go to the discord channel you have executed the `_setup` command in and use one of the following commands:
  4. Wait a few seconds, until the bot fetches all necessary data from the profile.
  5. 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...
Set the guest team (your enemies and also for each channel separately)
  1. 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:

Command
Short version
Parameter Type
Description
_setlogo-home_hlogoIMAGE/URL/EMPTYUpload 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_glogoIMAGE/URL/EMPTYUpload 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_hnameTEXTJust pass the name of the team as text

Example: _hname Project HIVE
_setname-guest_gnameTEXTJust pass the name of the team as text

Example: _gname Project HIVE
_settag-home_htagTEXTJust pass the tag used as text

Example: _htag HVE
_settag-guest_gtagTEXTJust 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:
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:


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 :TheTman:)​
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
scheduling_sample.png
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:
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.
scheduling_defaults.png
scheduling_parameters_24.png
scheduling_parameters_12.png
You can use any time you want as a parameter, e.g.: 12:24pm, 23:59, etc...

scheduling_parameters_oddtimes.png

  • ✅ -> 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)
Roughly 30 minutes after a player reacted with "Can" or "Can Sub" and the player changes his reaction to "Can't", they get diplayed as "Dropped", because that's exactly what they did.

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)
scheduling_setdefault.png

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
scheduling_timeout.png

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.

Friendcode management
Discontinued
Set your own 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.​
  • Examples: (Not my real fc, look it up, if you absolutely need it)​
    • _fc @Rollo SW-1236-7354-2346​
    • _fc 5363-1238-2345 @Rollo
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)

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
gethelphelpNONEGet some help regarding commands and overlay editing
setimageimgURLSets the background image for your overlay

img [https://toad.darkstormgames.de/images/default.png]
sethtmlhtmlHTML code excluding the body tagsSets the HTML for your overlay

html [empty]
setstylestyleCSS styles excluding the style tagsSets 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_setupNONESets up your overlay and sends you the URL to the created one.
_delete-overlay_deleteNONE | USER-PINGDelete 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_resetNONEResets 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_homeMKC-ID | MKC-URLGets the data from the given mkc team profile and sets it as the home team.

_home 1324
_setmkc-guest_guestMKC-ID | MKC-URLGets the data from the given mkc team profile and sets it as the guest team.

_guest 1324
_setlogo-home_hlogoIMAGE | URL | NONEUpload 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_glogoIMAGE | URL | NONEUpload 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_hnameTEXTJust pass the name of the team as text.

_hname Project HIVE
_setname-guest_gnameTEXTJust pass the name of the team as text.

_gname Project HIVE
_settag-home_htagTEXTJust pass the tag of the team as text.

_htag HVE
_settag-guest_gtagTEXTJust 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_warNONE | TIMESSchedules matches as per default values or given times

_war 20
_war 8pm 9pm 10pm
_schedulewar setdefault_war setdefaultTIMESSets the default times for the `_war` command

_war setdefault 7pm 8pm 9pm 10pm
_schedulewar settimeout_war settimeoutNUMBERSets the time in hours, each schedule for the current channel should be valid

_war settimeout 24
_friendcode_fcNONE | FC | USER-PINGGets or sets friendcodes for your server to display

_fc SW-1234-5678-9012
_fc @Rollo 1234-5678-9012
_tracktable_trackMK TRACKPrints 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:

Rollo

keeps rolling
Site Supporter
Ok, damn... noticed a critical bug right after posting this introduction/tutorial, but it should be fixed now...
 

Rollo

keeps rolling
Site Supporter
Some helpful scripts, in case you customize the overlay with HTML/CSS
I'll just use this whole thread to update things and maybe post some tips and tricks from time to time (if I have any).

And here I have two nice and short scripts, you can just paste into your edited HTML-code, if you need them.
HTML:
html [<div id="container">
    <!-- Your other html stuff here -->
</div>
<script>
    function sign() {
        var diff = document.getElementById("difference").innerHTML;
        if (!diff.includes("-") && !diff.includes("+")) {
            document.getElementById("difference").innerHTML = "+" + diff;
        }
    }
    setInterval(() => { sign(); }, 5);
</script>]

HTML:
html [<div id="container">
    <!-- Your other html stuff here -->
</div>
<script>
    function sign() {
        var diff = document.getElementById("difference").innerHTML;
        if (diff.includes("-")) {
            document.getElementById("difference").innerHTML = diff.replace("-", "");
        }
    }
    setInterval(() => { sign(); }, 5);
</script>]

Futhermore, if any of you have built a nice overlay you want to share, please do so, by posting your HTML/CSS with maybe a screenshot for reference in this thread for others to copy :TheWman:
 
Last edited:

Anthony

Member
Site Supporter
Founding Member
Some helpful scripts, in case you customize the overlay with HTML/CSS
I'll just use this whole thread to update things and maybe post some tips and tricks from time to time (if I have any).

And here I have two nice and short scripts, you can just paste into your edited HTML-code, if you need them.
HTML:
<script>
    function sign() {
        var diff = document.getElementById("difference").innerHTML;
        if (!diff.includes("-") && !diff.includes("+")) {
            document.getElementById("difference").innerHTML = "+" + diff;
        }
    }
    setInterval(() => { sign(); }, 5);
</script>

HTML:
<script>
    function sign() {
        var diff = document.getElementById("difference").innerHTML;
        if (diff.includes("-")) {
            document.getElementById("difference").innerHTML = diff.replace("-", "");
        }
    }
    setInterval(() => { sign(); }, 5);
</script>

Futhermore, if any of you have built a nice overlay you want to share, please do so, by posting your HTML/CSS with maybe a screenshot for reference in this thread for others to copy :TheWman:
I can't find a way to set the new script through ToadOverlay. Either I'm overlooking something or the ability to update script isn't supported yet?
 

Rollo

keeps rolling
Site Supporter
I can't find a way to set the new script through ToadOverlay. Either I'm overlooking something or the ability to update script isn't supported yet?

Ah yeah, I've looked into this and I think I haven't explained it enough :whistle:

Scripts like these two should be posted directly to the HTML, for example a little something like this:
HTML:
html [<div id="container">
        <img id="bg" class="opacity-75" src="http://toad.darkstormgames.de/images/default.png" >
        <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>
<script>
    function sign() {
        var diff = document.getElementById("difference").innerHTML;
        if (!diff.includes("-") && !diff.includes("+")) {
            document.getElementById("difference").innerHTML = "+" + diff;
        }
    }
    setInterval(() => { sign(); }, 5);
</script>]

As you can see, the script is directly embedded into the HTML-code and I just double checked, that this does indeed work like it should :)(y)

And for the last line of the script (`setInterval(() => { sign(); }, 5);`), just play around with the number at the end, so the difference on your overlay doesn't jump around too much, but with 5 milliseconds it should show the sign relatively stable :unsure:
 
Last edited:

Anthony

Member
Site Supporter
Founding Member
Ah yeah, I've looked into this and I think I haven't explained it enough :whistle:

Scripts like these two should be posted directly to the HTML, for example a little something like this:
HTML:
html [<div id="container">
        <img id="bg" class="opacity-75" src="http://toad.darkstormgames.de/images/default.png" >
        <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>
<script>
    function sign() {
        var diff = document.getElementById("difference").innerHTML;
        if (!diff.includes("-") && !diff.includes("+")) {
            document.getElementById("difference").innerHTML = "+" + diff;
        }
    }
    setInterval(() => { sign(); }, 5);
</script>]

As you can see, the script is directly embedded into the HTML-code and I just double checked, that this does indeed work like it should :)(y)

And for the last line of the script (`setInterval(() => { sign(); }, 5);`), just play around with the number at the end, so the difference on your overlay doesn't jump around too much, but with 5 milliseconds it should show the sign relatively stable :unsure:
Legend - thanks for clearing it up. With the +/-, it does jump a fair bit, but weirdly enough, it's only for the +. No bother, though.

This is my current setup. Gonna make some small tweaks to have it completely match the coin and lap counters (the boxes in the overlay are a little too big), but the layout itself I'm really happy with!
unknown.png


EDIT: Here are the HTML/CSS codes I used (slightly fixed compared to the above pic). The font you'll need to install is called DS-Digital (DS-DIGIT.TTF):
HTML:
<div id="container">
    <img id="bg" class="opacity" src="https://i.imgur.com/UDDe7G5.png" >
    <div id="difference" class="central-position opacity"></div>
 
    <div id="home-current" class="central-position opacity"></div>
    <div id="home-tag" class="central-position opacity"></div>
 
    <div id="guest-current" class="central-position opacity"></div>
    <div id="guest-tag" class="central-position opacity"></div>
</div>
<script>
    function sign() {
        var diff = document.getElementById("difference").innerHTML;
        if (!diff.includes("-") && !diff.includes("+")) {
            document.getElementById("difference").innerHTML = "+" + diff;
        }
    }
    setInterval(() => { sign(); }, 5.5);
</script>
CSS:
@font-face {
    font-family: DS-Digital;
    src:local("C:\Windows\Fonts\DS-DIGIT.TTF");
}
#container {
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin-left:0;
    margin-right:0;
    color:white;
    font-size:54px;
    width: 642px;
    font-weight: bold;
    font-family: system-ui;
}
#difference {
    top:94px;
    right:39px;
    text-align:rtl;
    font-family:DS-Digital;
    font-size:70px;
}
#home-current {
    top:9px;
    right:337px;
    text-align:rtl;
    font-family:DS-Digital;
    font-size:70px;
}
#home-tag {
    top:3px;
    left:25px;
}
#guest-current {
    top:9px;
    right:22px;
    text-align:rtl;
    font-family:DS-Digital;
    font-size:70px;
}
#guest-tag {
    top:3px;
    left:342px;
}
.central-position {
    position:absolute;
}
.opacity {
    opacity:1.00;
}
For the font location, I understand that it might be different for everyone. So make sure that's double-checked before running!
 
Last edited:

MegaJkeezy

Member
Legend - thanks for clearing it up. With the +/-, it does jump a fair bit, but weirdly enough, it's only for the +. No bother, though.

This is my current setup. Gonna make some small tweaks to have it completely match the coin and lap counters (the boxes in the overlay are a little too big), but the layout itself I'm really happy with!
unknown.png
hey do you have the code of what you did because that looks clean af
 

Rollo

keeps rolling
Site Supporter
Okayokay, the bot has been updated to a new version and as expected, there were quite a few bugs and errors...

By now I have (hopefully) fixed most of them, but if anything doesn't work, please let me know, so I can weed out the rest before the next MKU starts :unsure:
 

Rollo

keeps rolling
Site Supporter
Exciting news :TheWman:

I played around with some stuff, because discord.js updated their application a while back and I have added a way to change the home and guest team, without the need to go to the registry of this site anymore.
I'll update the tutorial later, because I really need some sleep, but you can now do the whole search with the slash-commands `/guest` and `/home`, by just clicking around :sneaky: (You need to allow users to use these, by checking the "Use Application Commands" permission for both the bot and the role(s) of your members)

There are some limitations, because of Discord's API, but everything works just fine.

And ignore the bot's name, this is just the one I use for debugging...
setdata_interaction.png


Also, whenever I'm restarting the bot, there is a chance, that slash commands aren't working for up to an hour...
This is just the update period set by discord and there is no good way around it, so in the case that slash commands aren't working for you, just use the regular command, or wait a bit.
 

chrod64

Member
MKU Staff
Site Supporter
Edited my post to include the codes. Let me know if you run into any issues 🙏
Do you still have the version where background image is as dark as the coin/lap counter? The one in the imgur link looks like this for me:
eIvLKyO.png
 

Anthony

Member
Site Supporter
Founding Member
Legend - thanks for clearing it up. With the +/-, it does jump a fair bit, but weirdly enough, it's only for the +. No bother, though.

This is my current setup. Gonna make some small tweaks to have it completely match the coin and lap counters (the boxes in the overlay are a little too big), but the layout itself I'm really happy with!
unknown.png


EDIT: Here are the HTML/CSS codes I used (slightly fixed compared to the above pic). The font you'll need to install is called DS-Digital (DS-DIGIT.TTF):
HTML:
<div id="container">
    <img id="bg" class="opacity" src="https://i.imgur.com/UDDe7G5.png" >
    <div id="difference" class="central-position opacity"></div>
 
    <div id="home-current" class="central-position opacity"></div>
    <div id="home-tag" class="central-position opacity"></div>
 
    <div id="guest-current" class="central-position opacity"></div>
    <div id="guest-tag" class="central-position opacity"></div>
</div>
<script>
    function sign() {
        var diff = document.getElementById("difference").innerHTML;
        if (!diff.includes("-") && !diff.includes("+")) {
            document.getElementById("difference").innerHTML = "+" + diff;
        }
    }
    setInterval(() => { sign(); }, 5.5);
</script>
CSS:
@font-face {
    font-family: DS-Digital;
    src:local("C:\Windows\Fonts\DS-DIGIT.TTF");
}
#container {
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin-left:0;
    margin-right:0;
    color:white;
    font-size:54px;
    width: 642px;
    font-weight: bold;
    font-family: system-ui;
}
#difference {
    top:94px;
    right:39px;
    text-align:rtl;
    font-family:DS-Digital;
    font-size:70px;
}
#home-current {
    top:9px;
    right:337px;
    text-align:rtl;
    font-family:DS-Digital;
    font-size:70px;
}
#home-tag {
    top:3px;
    left:25px;
}
#guest-current {
    top:9px;
    right:22px;
    text-align:rtl;
    font-family:DS-Digital;
    font-size:70px;
}
#guest-tag {
    top:3px;
    left:342px;
}
.central-position {
    position:absolute;
}
.opacity {
    opacity:1.00;
}
For the font location, I understand that it might be different for everyone. So make sure that's double-checked before running!
Edited the above so there's no need to worry about positioning the scoreboard correctly (be sure to set it to 1920x1080 when setting up the browser source) - you'll still need the DS-Digital font, so don't forget that!
a6mITpT.png

f4u7d2z.png

Code:
sethtml [<div id="container">
            <img id="bg" class="opacity" src="https://i.imgur.com/fe6w4FQ.png" >
            <div id="difference" class="central-position opacity"></div>
        
            <div id="home-current" class="central-position opacity"></div>
            <div id="home-tag" class="central-position opacity"></div>
        
            <div id="guest-current" class="central-position opacity"></div>
            <div id="guest-tag" class="central-position opacity"></div>
        </div>
        <script>
            function sign() {
                var diff = document.getElementById("difference").innerHTML;
                if (!diff.includes("-") && !diff.includes("+")) {
                    document.getElementById("difference").innerHTML = "+" + diff;
                }
            }
            setInterval(() => { sign(); }, 5.5);
        <script>]

Code:
setstyle [@font-face {
                font-family: DS-Digital;
                src:local("C:\Windows\Fonts\DS-DIGIT.TTF");
            }
            #container {
                position:absolute;
                top:0;
                left:0;
                right:0;
                margin-left:0;
                margin-right:0;
                color:white;
                font-size:54px;
                width: 1920px;
                font-weight: bold;
                font-family: system-ui;
            }
            #difference {
                top:970px;
                right:1250px;
                text-align:rtl;
                font-family:DS-Digital;
                font-size:70px;
            }
            #home-current {
                top:887px;
                right:1547px;
                text-align:rtl;
                font-family:DS-Digital;
                font-size:70px;
            }
            #home-tag {
                top:882px;
                left:90px;
            }
            #guest-current {
                top:887px;
                right:1233px;
                text-align:rtl;
                font-family:DS-Digital;
                font-size:70px;
            }
            #guest-tag {
                top:882px;
                left:406px;
            }
            .central-position {
                position:absolute;
            }
            .opacity {
                opacity:1.00;
            }]
NOTE: There's an issue with the appearance in OBS version 27.1.3, but I found 27.0.0 works perfectly, so make sure you have that version installed :)
 

Outer

Member
MKU Staff
200L Staff
Exciting news :TheWman:

I played around with some stuff, because discord.js updated their application a while back and I have added a way to change the home and guest team, without the need to go to the registry of this site anymore.
I'll update the tutorial later, because I really need some sleep, but you can now do the whole search with the slash-commands `/guest` and `/home`, by just clicking around :sneaky: (You need to allow users to use these, by checking the "Use Application Commands" permission for both the bot and the role(s) of your members)

There are some limitations, because of Discord's API, but everything works just fine.

And ignore the bot's name, this is just the one I use for debugging...
setdata_interaction.png


Also, whenever I'm restarting the bot, there is a chance, that slash commands aren't working for up to an hour...
This is just the update period set by discord and there is no good way around it, so in the case that slash commands aren't working for you, just use the regular command, or wait a bit.
This finally work? I can't make it work and i dont know why xD

Is only curiosity sorry jaja
 

Anthony

Member
Site Supporter
Founding Member
Would there be any way of updating the bot to support the ToadBot's slash outputs? Can't seem to reset the scores from a previous match to start a new one with ToadOverlay. Thanks!
 

Outer

Member
MKU Staff
200L Staff
It's only for me, or anyone is having problems with the bot, after Toad Bot of Scoreboard had been update?

I can't use any of the commands, both _ & / commands work with this.
 

Rollo

keeps rolling
Site Supporter
Yeah, seems to be some weird stuff happening, rn...

I've tested around for a bit on multiple servers and everything should work just as it did before (With all those weird little bugs which I should've fixed a long while ago... => If you can't find someone's fc with "_fc name", try "_fc undefined" :censored:).
The score-reset on /startwar... has been broken, but it should be fixed now.

ToadOverlay uses no Slash-Commands (except for /guest and /home, both of which should be working) and until I'm motivated enough to change it (which is a lot of work), this will not change.
The bot has the MessageContent-Intent approved from Discord, because it needs to read message data from Toad either way.

If something really does not work, I would really appreciate as much information as possible on what is not working.


And a small disclaimer to round everything up:
I'm not the programmer of Toad-Bot itself. Toad has switched to slash-commands entirely, so it will not accept an underscore ( _ ) as a prefix, but ToadOverlay still mainly uses the underscore for commands.


Last but not least:
I'm sorry for the late reply. I'm not active in MK right now, so I only check on this thread occasionally...
If something is happening that might be rather urgent, please message me on Discord (Rollo#7568) so that I will notice that something is wrong :unsure:
 
Last edited:

Rollo

keeps rolling
Site Supporter
This finally work? I can't make it work and i dont know why xD

Is only curiosity sorry jaja

And for this it might be your best bet to check the permissions on both members and the bot.
I'm not sure how this affects bots, but at least users need to have the "Use Application Commands"-permission (the bottommost permission in the Advanced permissions options for channels, etc.
If only users having this permission does not do the trick, try giving the bot the same permission to execute application commands.

But it should work, if Toad is working, so I'm not entirely sure :unsure:
 

Anthony

Member
Site Supporter
Founding Member
Can confirm the extra setting toggle was enough to make it compatible again. Not sure how I missed that, but thanks heaps for the response!
 

Gouste

New member
Edited the above so there's no need to worry about positioning the scoreboard correctly (be sure to set it to 1920x1080 when setting up the browser source) - you'll still need the DS-Digital font, so don't forget that!
a6mITpT.png

f4u7d2z.png

Code:
sethtml [<div id="container">
            <img id="bg" class="opacity" src="https://i.imgur.com/fe6w4FQ.png" >
            <div id="difference" class="central-position opacity"></div>
       
            <div id="home-current" class="central-position opacity"></div>
            <div id="home-tag" class="central-position opacity"></div>
       
            <div id="guest-current" class="central-position opacity"></div>
            <div id="guest-tag" class="central-position opacity"></div>
        </div>
        <script>
            function sign() {
                var diff = document.getElementById("difference").innerHTML;
                if (!diff.includes("-") && !diff.includes("+")) {
                    document.getElementById("difference").innerHTML = "+" + diff;
                }
            }
            setInterval(() => { sign(); }, 5.5);
        <script>]

Code:
setstyle [@font-face {
                font-family: DS-Digital;
                src:local("C:\Windows\Fonts\DS-DIGIT.TTF");
            }
            #container {
                position:absolute;
                top:0;
                left:0;
                right:0;
                margin-left:0;
                margin-right:0;
                color:white;
                font-size:54px;
                width: 1920px;
                font-weight: bold;
                font-family: system-ui;
            }
            #difference {
                top:970px;
                right:1250px;
                text-align:rtl;
                font-family:DS-Digital;
                font-size:70px;
            }
            #home-current {
                top:887px;
                right:1547px;
                text-align:rtl;
                font-family:DS-Digital;
                font-size:70px;
            }
            #home-tag {
                top:882px;
                left:90px;
            }
            #guest-current {
                top:887px;
                right:1233px;
                text-align:rtl;
                font-family:DS-Digital;
                font-size:70px;
            }
            #guest-tag {
                top:882px;
                left:406px;
            }
            .central-position {
                position:absolute;
            }
            .opacity {
                opacity:1.00;
            }]
NOTE: There's an issue with the appearance in OBS version 27.1.3, but I found 27.0.0 works perfectly, so make sure you have that version installed :)
Thanks a lot to posted the exact code to send to the bot ^^
 

Fritixx

Member
Site Supporter
Hello! I was using your bot for all my wars during the last month. And randomly, yesterday, it broke and I can't get the ToadOverlay bot to show the score of a race. I can still update the name of the guest team and the home team but the score won't update. Even if the Toad bot works fine.
Am I the only one who got this problem ?
 
Top