2. Using Prod Toolkit
All overlays are scaled to 1920x1080, and expect a background.
No additional CSS is required - please remove the default CSS in OBS browser sources, this messes up colors and placement of overlays.
If you are hosting your toolkit instance publically, we recommend enabling authentication. This limits access to browsers/browser sources/Observer Tools with a valid key configured.
For initial access, the admin key is displayed in the console when the toolkit is started; handing out this Key is not recommended as it does not expire and cannot be removed.
We recommend creating unique Keys for every User / Program connecting to your toolkit.
Keys can be managed in the Api Keys menu. Newly configured keys should work immediately. When removing keys, a restart of the toolkit is required to fully clear any open sessions.
To create browser sources with authentication enabled, just add the key to the link as a query parameter, e.g. http://localhost:3003/pages/op-module-league-in-game/gfx/ingame.html?apikey=RCVPT-123ABCD-123ABCD-123ABCD-123ABCD
To configure an observer tool with an API key, open the settings, and add the key to the server-api-key config.
This module creates dynamically updateable lower thirds for casters and analysts based on your theme.
To configure lower thirds, add your casters/analysts by setting name, social platform and social handle and clicking add:
Assign Casters and Analysts to their respective set of lower thirds
The Swop button switches the left and right lower thirds.
Example with lower thirds and matchup set in -Teams:
This module is used to set the current matchup and automatically generate overlays for ingame, breaks and caster cams.
Scores are automatically shown/hidden based on the selected format. Setting a winner (calculated based on score and format) will hightlight the winning team.
Team names scale automatically to fit the screen, names longer than ~40 letters will not fit properly.
You can directly configure a matchup with the respective team information (names (max ~40 characters), team tags (max 3 characters), team logos, team colors, and standing). Alternatively, you can create team entries in the database to load saved teams when setting the matchup.
Currently, team logos and standing don't show up in any overlays, this is still WIP.
Setting a color other than black (#FFFFFF) will override the theme color.
Saving a matchup automatically generates overlay for caster cams, ingame and adds the matchup to the match history for the break screen.
Swop switches blue and red side.
Unset clears the current matchup from all overlays (not from matchup history).
Clear Matches clears full history of matchups.
Shows team names, tags, and score for caster cams / similar screens (example in caster module above)
Ingame overlay for the top scoreboard, scores are only shown when the format is set to something other than best of 1:
History of all saved matchups including scores for break screens (or similar). Examples with bo5, bo3 and bo1, the winner is automatically highlighted based on the configured score.
API Key required.
Used to track game status and manually set the game for runes and postgame stats.
This also displays the connection status for all data sources used by the toolkit to verify all data is present and up to date.
When spectating the game with all modules synced in the observer tool, the game ID should be set automatically, and postgame stats should load once the game is over. If this fails, you can manually set the game ID either by searching for a player (by summoner name) currently in the game or entering the game ID if the game is already over.
Observer Tool required (Champselect module synced and Client in the game lobby)
This module displays a custom champ select overlay, similar to the one used by LEC (implementation of P&B UI)
Note that this overlay does not include team names itself, we recommend integrating the talk overlay from rcv-teams.
The overlay is completely transparent until champion select starts:
OBS sometimes keeps the last games' champ select cached, reloading the browser source and/or clearing the browser source cache before showing the overlay fixes this.
API Key required
This module is used to display runes during spectator delay (requires the game to be live and set in LoL Game State module).
Each step shows a lane/role matchup, going from top to support (if players are not sorted accordingly in champ select, this might end up being confusing).
You can toggle show/hide to see the raw data to verify the stats are correct for this lobby.
Observer Tool required (Ingame modules synced and client spectating the game). Note that some ingame data is obtained by memory reading. Since memory offsets change with every patch, some functionality (scoreboard, gold and XP leaderboards) may not work on patch days. Offsets are usually updated within a day or so.
This module shows ingame information, including:
- full custom scoreboard
- LEC-Style animations for level ups and item buys
- downed inhibitors
- platings taken
- objective kills
- power plays (baron only)
- gold and XP leaderboards
Some of the event triggers are known to act up. Usually, these issues can be fixed by relaunching the League spectator client.
Inhibitor timers, platings, and leaderboards need to be shown/hidden manually using the control buttons (or action links).
The scoreboard currently cannot display icons for dragons killed, and is only covering the ingame scoreboard to keep dragons visible.
Configuring the scoreboard:
The scoreboard can be configured to only display certain things:
If the scoreboard is not set to active, the ingame overlay will not display any scoreboards and the ingame overlay from the teams module can be used to display team names instead.
Configuring Item Buys and Level Ups: Select which item types and levels you want to pop up in the overlay. Ctrl+Click or Shift+Click to select multiple.
The objectives pop up either on the left or the right side of the screen, depending on the team.
Configuring objective kills:
The plating tracker shows the platings taken as well as total gold value of platings. Note that the tracker cannot handle skips in game time, if you scroll around, platings might be missed or counted multiple times.
The inhibitor timers aren't shown or hidden automatically.
Shows a custom killfeed, useful for customisation:
The power play timers are currently a work in progress and will not display when ingame.
API key required, requires game set in LoL Game State, pick order needs an observer tool synced during champ select
This module shows pick and ban order and postgame stats similar to the LCK.
This overlay shows a general overview of stats, matchup is from the teams module.
This overlay shows item builds and can be toggled to show a fullscreen damage stats graph
This overlay shows a fullscreen version of the gold graph from All in one.
This overlay shows the pick and ban order. This only works if an observer tool was synced during champ select.
- Go to https://dev.twitch.tv/console/apps or open up the link found in the settings section of the twitch module page
- Register a new application
- Give it some name
- add 'http://localhost:3003/pages/op-module-twitch' as OAuth Redirect URLs
- as Category select Broadcaster Suite
- Create!
- Copy your app's Client ID and paste it into the Twitch App ID field
- Save settings
- Click on the button 'Authorize with Twitch'. Important is, that you have to log in to the twitch account you want the predictions to be created for
- After authorizing you to enter your channel name in the settings
- Finally save the settings again
- Setup your teams in the modules-teams
- Click on 'Start Prediction'
- To show or hide the prediction on stream use the respective buttons
- After the game is finished, use the dropdown next to 'Resolve Prediction' to select the winner
- Hit 'Resolve Prediction'
This module is used to execute functions in vMix via the built-in API (https://www.vmix.com/help25/index.htm?DeveloperAPI.html) from the prod tool. At the moment it is in early development but later on, will be more advanced.
- Activate the vMix API in the settings
- Setup the IP and Port for the machine on which vMix is running
- Add a listener which will be used to execute the function from the prod tool
- Add the function you want to execute in vMix, for reference you can look at https://www.vmix.com/help25/index.htm?DeveloperAPI.html or https://github.com/jensstigaard/vmix-function-list
- Add the function and use the listener to call it from the prod tool (how-to will be following soon)