This is a control panel and graphic that allows TFTV stream producers to display match logs at the end of matches. The majority of competitive TF2 game servers have the logstf plugin (and additional stats plugins) installed that uploads match logs to Logs.TF. The producer takes the logs.tf URL of the match and enters it into the dashboard which will pull all the log info into NodeCG and parse it into a readable format to display on stream. The graphic takes into account the varying plugin versions and will only display the info that was available. There are two different sets of logs that are displayed - the main log, and the medic stats log.

Logs.TF Graphic

I designed and developed the NodeCG overlay used for the Beat Overwatch and Quake Invitational Tournament. The overlay consists of game specific dashboards as well as a master schedule editor and a master 8 team bracket editor.

Overwatch and Quake Brackets

The bracket is designed to allow the NodeCG operator to edit and display a 8 team, double elimination bracket. In the dashboard, the operator can enter teams, logos, scores, game statuses and present that info to the stream. The bracket has an auto-complete feature that will fill in the next matches in the upper and lower bracket based on which team was declared the winner. The bracket is designed in such a way that a individual stream graphics can be made for specific games while utilizing the same master dashboard.

Overwatch Upper Bracket

Overwatch Upper Bracket to Lower Bracket

Quake Bracket

Schedule

The schedule is designed to allow the NodeCG operator to add a dynamic amount of events or load from a predefined config file. The file can hold multiple different schedules such as a schedule for an entire tournament, or specific days. The operator can select any schedule and prepopulate the dashboard with these events. The events then can be edited as the tournament progresses. Like the bracket, the schedule is designed in such a way to allow different graphics to be used for different events and can be controlled by a master dashboard.

Overwatch Scoreboard

The scoreboard allows the NodeCG operator to enter the team information into the dashboard and update the onstream graphic as needed. The scoreboard has the ability to switch sides as well as set the game mode for standard or attack/defend. The graphic has been updated for 2018.

PickEM is a Map Veto app that allows two captains to ban and pick maps for a match series. It was used during the ESA Rewind II TF2 Tournament in February 2018. The app has three parts; an Admin UI, a Captain UI and a browser source stream graphic that can be used for live streams. The app can be customized for any selection of maps, draft orders and teams via a config file. In the config file, you can specify as many types of series and their respective orders as needed. For Rewind, there was a Best of 1, Best of 3, Best of 5 and a two map round robin series.

Admin UI

The Admin UI consists of a draft creation form and a master draft list that shows all the past and current drafts. The form consists of a quick select to populate the captain information from the config file and also the ability to add captain and team information manually if needed. Admins can choose the type of draft using the radio buttons. Once a draft is generated, a unique captain page and stream graphic is created.

Captain UI

The Captain UI allows both captains to ban and pick maps as well as choose sides depending on the draft type selected. Captains log into the system and can only access their respective drafts. Captains can see what has been previously picked or banned. When a map or map side is chosen, the stream graphic is updated accordingly.

Stream Graphic

The stream graphic is the view that is shown on stream through a Browser Source plugin. Currently this graphic works in OBS and CasperCG. The graphic is easily customizable using html, css and js.

Scoreboard

The NodeCG scoreboard used during TeamFortress.TV casts was specifically created for the Insomnia58 tournament in August 2016. After the tournament, TFTV revamped its online broadcast package to include the scoreboard going forward in all of their casts.

Below is a breakdown and overview of the TFTV scoreboard that is used almost daily during the competitive season.

Map Pick Ban

The NodeCG Map Pick/Ban bundle was created for the Teamfortress.tv coverage of Dreamhack Winter 2015. The NodeCG bundle allows for the graphics operator to control the pick ban system for online and LAN tournaments. When a map is picked or banned by the teams, the on-stream graphic is updated accordingly. The system is meant to be controlled via a web interface created by shdpuppet. The picks and bans can be manually controlled or overridden at any time by the NodeCG operator.

Dota Fortress Captain UI

Tip of the Hats is a charity broadcast benefitting Camp One Step programs. I have had the privilege of volunteering at this amazing event for the past three years. In 2017 I was tasked with creating a captain UI for an extremely popular, but super complex segment called Dota Fortress. This segment requires two captains to pick and ban their heroes (famous competitive tf2 players) similar to how you pick hereos in dota. Previously, the producer had to manually pick and ban the players in the NodeCG dashboard based on audio feedback from the captains. This was not an optimal way of controlling this segment.

The Captain UI consists of two NodeCG dashboards that can be displayed on a tablet for each captain. Each captain has their own pick/ban screen that allows them to individually pick or ban the players. The on-stream graphic is updated automatically. While the new Captain UI removes the responsibility from the NodeCG operator, the operator can still override picks or bans if needed.

Here is a screenshot of the Blu Captains UI interface. The interface is responsive and will work on any size tablet. When a captain picks or bans a player, the graphic is updated on-stream.

Here is the segment in action. Both Captains have a tablet with their own interfaces.

Insight Overlay

This NodeCG scoreboard overlay was created for Insight’s coverage of the 2016 iBUYPOWER Overwatch Summer Invitational. The bundle allowed the NodeCG operator to enter the team information (names and logos) into the dashboard and update it on-stream as needed. The overlay allowed for the operator to easily switch the teams depending on if they were attacking or defending. The overlay also originally accommodated for the different variations of the in game Overwatch UI which has long been fixed.

This overlay was incorporated into the TotH 2017 NodeCG overlay and was used during the Overwatch Showmatches. The overlay also has been used in the Overwatch Beat Invitational and was refined in May 2018 to include attack/defend info.

Here is a quick demo of the overlay.

A PUG site

PugChamp is a Draft-Organized pickup game service created for the competitive tf2 community. It is currently the largest open-source, community-driven TF2 pickup game and matchmaking system for competitive players. I co-developed and designed this project with my friend tsc. It was a very large undertaking that forced me to learn a lot about working with a new stack that I had never worked with before. We are hoping to take the lessons learned while developing the first iteration of PugChamp, and build a better system in the future.

These are some of the first NodeCG bundles that I ever created. They have not been updated since version 0.5 and I like to think I have come along way since then. They were created for evlTV, a casting organization that was focused on TF2 Highlander and Ultiduo casts.

EVL Roster Rundowns

TF2 has a few different competitive game modes that call for different team roster overlays that can accommodate the varying team sizes such as 9v9 and ultiduo. These bundles allow the NodeCG operator to enter player names in the dashboard and toggle the roster overlay on-stream when needed.

EVL Pause

During Highlander matches, you were always guaranteed at least one pause during a live stream; it happened so frequently that I decided to create a small bundle that the NodeCG operator could toggle to show that the game was paused, and how long since the pause. It’s main goal was to advise new viewers to the stream what was currently happening.

EVL Countdown

A simple countdown timer that would give the “Time until Live” countdown before casts.

EVL Jukebox Ticker

A NodeCG bundle that displays a ticker with information pulled from EVL’s Jukebox system to show latest match, scores and game updates during large tournaments. During large tournaments, there would be multiple matches on going and this bundle provided a seamless way to update viewers on statuses of other games.