SPX Scoreboard
A premium sports extension for SPX Graphics
PLEASE NOTE: Scoreboard extension requires SPX version 1.0.11 or newer.
This article has been written for SPX Scoreboard version 1.1.0 but is mostly valid for earlier versions also.
Purpose of the extension
A sports scoreboard extension for SPX for team vs team sports.
The extension can be used as-is or it can work as a reference and inspiration when developing similar additional functionality to SPX Graphics workflows.
Please remember: this extension may not cover all possible situations under the sun. For complete and custom-made solutions with your specifications, please contact SPX Creative Services.
The extension consists of two parts:
- plugin and extension which are installed in ASSETS/plugin/scoreboard -folder. A plugin file adds a 'Scoreboard' launch button to the user interface of SPX which opens the extension user interface "popup" for controlling the playout of the scoreboard graphics
- templates are HTML graphics used via CasparCG or other HTML-capable playout systems. Scoreboard comes with template files that can be used as-is or can be modified for custom designs and functionality. Starting from version 1.1.0 the Extension has a dropdown menu for changing the template on-the-fly. See section settings.js for more info.
The user interface of Scoreboard can be optimized for different sports by changing the clock type (countdown or count up), enabling or disabling the hour display, and the score increase/decrease buttons can be customized.
The user interface can be scaled up or down by changing the width of the window and its default size and on-screen position can be set in settings.js.
Since the Scoreboard extension runs independently it does not require any rundowns to be open or any templates to be triggered from the rundowns. This also enables remote control workflows using a phone or physical controller, such as Stream Deck. See API commands.
The Scoreboard plugin works "independently" in its own (popup) window, meaning the graphic template does not need to be added to a rundown or it does not matter which project or rundown is opened in the SPX user interface.
The plugin window size and default position can be set in settings.js.
The plugin is very easy to use and the user interface should be self-explanatory. See section settings.js for options.
The clock timer runs within the Scoreboard window and its last state is kept in memory along with team names and score values. If the window is reloaded it will return back to its previous state. Please keep in mind the clock does not run while the plugin window is closed.
Extra functionalities can be added or removed just by modifying the settings.js -file. Extra values are not persistent and are always reset when play is executed.
Using Scoreboard on a mobile device
Note, this is an experimental, non-supported use case. But fun nevertheless 😎
It is possible to control Scoreboard using a mobile phone. The user interface is not developed especially for this but a modern smartphone with a modern web browser can load up all user interface elements and can control the SPX server and thus control the playout of Scoreboard templates. This requires the phone is in the same wifi/network with the server and have access to the SPX server: port/URL.
Installation
SPX templates or extensions from the SPX Store are usually available as zip files for manual installation and as an executable installer for Windows machines. The SPX Scoreboard product contains both a plugin file and several example scoreboard graphic templates. See knowledgebase articles on installing templates and installing plugins.
settings.js
âš REMEMBER to make backup copies of original files before making any changes.
settings.js file in the root folder of the SPX Scoreboard extension is designed to be modified as needed.
Open the settings.js file in a text editor to make changes to the plugin functionality.
After making changes to settings.js please reload the Scoreboard extension (Ctrl + R) and play the template IN again.
| SETTING | DESCRIPTION |
|---|---|
| popup | Window size and position as top, left, width and height values in pixels |
| play/stopButtonText | Texts in playout control buttons. Default values are IN and OUT. |
| playoutSettings.server | Name reference of the target CasparCG server (if used). Typical value is "OVERLAY" |
| playoutSettings.channel | Playout channel of the CasparCG server (if used) |
| playoutSettings.layer | The SPX layer to use for playout (a number between 1..20) |
| templates | A list (an array) of templates (consisting of the "name" that is shown in the UI and "file" that is the relative path within the ASSETS folder of SPX) |
| clock.count | "up" or "down" values control how the timer works |
| clock.hours | "true" or "false" (should hours be shown in the graphics) |
| teams | A list (array) of names for home and away team dropdowns |
| allowNegativeDisplay | The default value of `false` prevent negative numbers in the score (minimum value is 0) but `true` allows negative score values. |
| scoreButtons | An array of objects that specifies how many score buttons are in each team's score button areas. `buttonText` parameter sets the text shown on the button face and `scoreValueChange` defines how the score value changes when clicked. Change can be positive (green button color) or negative (red button color). Button sizes adjust automatically to cover the whole horizontal space. By default, there are 4 buttons (-1, +1, +2, +5), but these can be added or removed as needed. |
| extras | An (optional) array of objects for additional dropdown controls with a push button to send a command to the template. With extras, new functionality can be added to the plugin and templates. Required parameters are the "title" for the name of the extra, "templatefunctioncall" is the function name implemented into the graphic template and "options" object array which will be the text of the dropdown, and the "value" of each which will be passed as an argument to the target javascript function in the template. See original source files for examples and inspiration. |
Customization
âš REMEMBER to make backup copies of the original files before making any changes.
The scoreboard solution consists of three parts that need to work in tandem:
- Scoreboard UI
- settings.js
- the template
For displaying some additional information, a javascript function and related HTML markup must be developed in the template source code, which needs to be exposed to the user interface with a settings.js file for the operator to be able to execute that function. Text strings for functions are defined in the extras of settings.js for each function separately.
Please see the HTML, CSS, and Javascript source code for options, comments, and additional developer information.
Templates
The Scoreboard extension comes with the following templates with varying designs and functionality.
All templates can be started (IN animation), and stopped (OUT animation) and can display team names, scores, and the clock.Â
"Bug" template
Bug (SPX_Scoreboard_bug.html) is the default graphic, a small bug at the top-left corner of the screen. Additional functions:
- The team icons Template supports the use of small images (PNG 100x100px) in img/bug_teams -folder. The name of the team is automatically parsed as the image file name. Teamname "dogs" corresponds to an image file img/bug_teams/teambg_dogs.png. (Space in the team name is replaced with an underscore). When team name is changed an animation is triggered to highlight the team change. The name of the team is drawn on top of the icon as text.
- Period number -extra function When a period option is selected and triggered (with SET button click) a periodDisplay() function is called in the template with a string value as its parameter. The value is drawn into an animated small zone in the top-right corner of the bug and the clock moves to the left "making space" for it. When "period" is taken out (with the "-" option) the clock moves back to the center position.
- Penalty -extra function When a penalty option is selected and triggered (with SET button click) a footerTextDisplay() function is called in the template with a string value as its parameter. The value is drawn into an animated text block below the bug. The penalty can be taken out (with the "-" option). Text strings are defined in the extras of settings.js, the value is a text string with two fields, delimited with a pipe character (|). The first item is a "color name" which the template function recognizes and sets a style class accordingly. The second item of the string will be shown in the text block.
- Sponsor -extra function When a sponsor option is selected and triggered (with SET button click) a updateSponsorLogo() function is called in the template with a string value as its parameter. The value is used to load an image (206x140px PNG) as an overlay covering the bug for a pre-defined duration (5 seconds by default). Sponsor string "beer" corresponds to an image file img/bugsponsor_beer.png.
Most of the CSS styling of the Bug template is defined within the HTML source file.
"Strap" template
Strap (SPX_Scoreboard_strap.html) is a thin strap at the top of the screen. Additional functions:
- Sponsor -extra function When a sponsor option is selected and triggered (with SET button click) a updateSponsorLogo() function is called in the template with a string value as its parameter. The value is used to load an image (1920x200px PNG) as a background covering the full area. Sponsor string "beer" corresponds to an image file img/strapback_beer.png. The image can be removed with the "-" option.
- Scoreboard Style -extra function This extra is commented out in settings.js for practice purposes. When the extra is enabled, it will expose a new control in the Scoreboard UI for choosing either a 'full' or 'clock' Strap style which will trigger scoreboardStyle() template function which animates the strap's width accordingly.
The template uses a customize.css stylesheet file for various color and font settings which are exposed as css variables. The names of the variables are descriptive and self-explanatory. By increasing the edge-margin-top variable, for instance, the graphic can be pushed to the bottom of the frame, as opposed to the top with the default margin of 0px.
All texts are using a CSS text-shadow (by default) to introduce a "neon glow" around texts.
"Cards" template
Cards (SPX_Scoreboard_cards.html) is a simple example/starter file for creating a fullscreen Scoreboard for venue screens. Besides basic functionality, it does not have any extra features implemented.
"Blanco" template
Blanco (SPX_Scoreboard_blanco.html) is a barebones starter file for developing custom solutions, only providing basic, core functions to IN and OUT animations.
Font and color change
- place a new font file in the fonts subfolder
- link font file to the template by modifying CSS font file links