Implementing the scoreboard overlay feature

UPDATE: This article is now obsolete. Please read the following article to get our new scoreboard overlay feature. 

For this guide I will be using the free and open source software for video recording and live streaming Open Broadcaster Software (OBS). You can download it to your own computer from their site, connect it to whatever camera you have, and start streaming/recording really quickly. It connects to Facebook Live and Youtube as well as others for broadcasting your content to your audience.

Another popular program called Xsplit have the same feature for adding a overlay, so you can probably follow this guide to set it up there too without much difficulty. Xsplit is not free though.

So, make yourself familiar with the basics of the streaming software of your choice (I won't cover how to setup a camera here, please google it if you don't already know). When it is time to add the scoreboard overlay, follow these steps to get it into OBS:

Setup a tournament

The scoreboard is connected to a match. This means that in order to get a scoreboard, you need to set up a tournament, and you need to have edit access to that tournament. If you are reading this, you should already know how to do that. Go create a tournament, add players, and do the draw. 

Please read this article on the new scoreboard overlay feature. 

Find the match menu

In tournament edit mode, click on the matchnumber to bring up the match menu. One of the menu options will be "View scoreboard for streaming". Click that and you will see a webpage with a scoreboard (and nothing more). This is the scoreboard you will now bring into OBS. Copy the URL of that page.

Please read this article on the new scoreboard overlay feature. 

Open OBS

In OBS, there is a "Sources" section with a plus sign at the bottom to add new sources for the selected view. Clicking the plus sign will bring up multiple source types to choose from. Choose "Browser source" from the list, and you will get a dialog box in which to enter a URL (paste the URL you copied in the previous step here). You will also have other options, most notably the width and height. You will have to set these too, as the default settings for those are not what we want for our scoreboard.

Set the width to 1479 and the height to 89. This is the actual width and height (in pixels) of the scoreboard as we designed it. Click OK and you should see the scoreboard inside a red square on your video. Drag it around to position it where you want.

Please read this article on the new scoreboard overlay feature. 

Auto update

The scoreboard-overlay will automatically update as the match results change during the match. It has a slight delay of 10 seconds, so if you update the match score, it can take up to 10 seconds before the overlay displays the same score (usually shorter though).

That's it. When it is time to stream another match, you will have to open the browser source dialogue and enter the new match URL.

What match information is shown?

The scoreboard-overlay shows the following information:

• Participant names
• Participant nationality (flag)
• Score A and B
• Race to 
• Discipline
• Table number
• Round information (round 1, or quarter final, semi final, etc)

UPDATE: Please read this article on the new scoreboard overlay feature which show even more information.

Advanced features

If you are familiar with HTML and CSS you can turn off unwanted information above by setting appropriate CSS styles in the browser source dialogue box. You will have to inspect the DOM tree of the scoreboard-overlay HTML document to find the correct CSS selectors, but that's a simple task for those who know what to look for.

You can also use this method to style elements in your own personal style. Change colors, fonts, show/hide info all you want, but please remember that at any time the page can change to whatever default we set and you might have to update your code at that time. This will not happen very often, but you should keep it in mind if you decide to play around with the styles.