I decided to combine a few of my favorite things for my own personal project: coding, streaming, and pool - this resulted in the drive to create an OBS Plugin to track 'matches' when I stream pool.
Where To Start?
Well I could start from the nothing, but if I am being honest I am a fan of FOSS so decided to see what's out there and build on it with any specifics needs that I had personally. This approach brought me to https://github.com/ngholson/g4ScoreBoard, a scoreboard solution displaying player names, additional game info, hotkey functionality, and the ability to use a shot-clock. The developer hasn't touched there code in a couple of years, but they also provided a secondary plugin for 'ball-tracking', displaying which balls have been potted.
I used the plugin for a few days and determine what I would like to see changed, enhanced, and improved. I made a list of my objectives:
- Cleaner, 'more modern', interface - in my eyes
- Preview of color schemes for player background
- Simplified game and race information
- Ability to toggle features on and off
- Simplified logo and sponsor images/slideshow
- Player tracking (or track who's breaking)
- Animation for winning a rack (frame/match/game)
- Integrated ball tracker - rather than a separate plugin
- Ability to compact the control interface, to help free up real estate
- Ability to move the overlay independents
- Ability to run multiple instances (have two tables tracked in a single stream)
The solution which I forked was built n CSS, HTML, and JavaScript. My knowledge of HTML and CSS was a little dated, but it was simple enough to refresh, I was completely new to JavaScript - but I'm familiar with C++, so it wasn't a huge leap to understand especially with the assistance of AI.
First Things First...
To increase motivation and inspire myself to meet my goals, I started with the simple stuff... UI enhancements. It was rewarding to see my changes implemented and working. I decided to change font to something a little more readable and the gradients to be previewed in the control panel.
In turn I also changed the styling on the overlay (the actual UI displayed on stream, versus the control panel which modifies the data) so that it had a 'modern' and 'clean' look to it.
With a couple of small wins in my belt I decided to make some more advanced changes, elements for wage/race info was changed to only race information and modified to reside between player scores, and information about the game was centralized and positioned at the top of the frame.
These changes were a little more involved, as it incorporated CSS modifications related to positioning when race info was or was not displayed, I tired working with what I had and finally found a solution - I should note, I really should learn more about CSS positioning, flex and similar as there may be more efficient was to apprach the problem,
Improving Real-estate
As I progressed with my changes, I was using more of the space in the control interface, I decided that I wanted to use toggle to hide or display configuration option (later I would make sections collapsible). My intention was to allow users to hide features/function that he would not use...it would be nice if I had implemented flex regions so that the CSS would collapse appropriately when certain functions were disabled, but my first pass at addressing this merely hid the configuration options.
Due to my implementation I ended up moving a lot of the original features around to put them into appropriate sections (as I saw it), which ultimately aided when I implemented my functionality to collapse sections - but I am not there yet.
Reimaging Player Logos and Slideshow Functionality
The original solution used player logos that were...maybe not the best placed relative to what you typically see within a pool/snooker broadcast, and they also used Salotto images and had slideshow functionlaity. It alll seemed busy and confused, so I simplified it to allow player logos (potentially country flags) as well as a simplified implementation of the slideshow functionality (centered within the screen) for sponsorship potential.
My refined implementation allowed the user to select the images for player, but not show then without checking a box... allowing the interface to be configured before going live. Similarly, the slideshow settings allowed for three specific images to be displayed, central to the screen and in a continuing rotation - again, with a toggle to disable and enabled.
Who's Next!?
One of the problems I always have when I am playing, is tracking who's break it is - specifically when using alternate break. Likewise, most broadcasts indicate which player is at the table, so I decided to implement log for a player toggle, to indicate who is playing, or who is/has broke the rack. As you can tell from previous images, this function was made toggleable, because some people will want to use it, other will not care.
Similar to the race info (and the extension... and the clock info... and the player logos) all of this took some tweaking for positioning reasons, but the end result was crisp!
2D Meets 3D!
At this point I was fairly happy with the solution, and decided to do some fun stuff... so took to learning some basic blender skills. My goal was to create a 3D animation that would initiate when a player won a rack (and if someone hammered the button while it was playing, no other instances would be instantiated), this evolved to be based on the game type being played (8-ball, 9-ball, 10-ball, default, or none) - nothing is ever simple, and there is always opportunity to improve user experience.
I started with a nine-ball and then moved on from there, it could be improved... it needs a little roughness and diffusion in the lights, but it's solid.
Integrated Ball Tracker
As I mentioned at the top of the post, this work was based don another user, that user had another plugin for implementing a ball tracker... and with my new found knowledge of blender, I decided to create my own and implement it my plugin. Much like the animation, the ball tracker was dependent on the game type, in addition to the fact that a user could move i's position I wanted to also provide orientation options, verical or horizontal. And there you have it... a slick integrated ball tracker specific to game type, that could be toggle on or off when in or out of use.
Space, the final frontier!
As I continued adding features and functionality I returned to the issue of space, using CSS I was able to collapse various sections of my UI... which meant revisiting how I grouped features and functions, and then evolving them to be categorized into collapsible units. This was achieved use the 'details' function within CSS, allowing me to define every group as open initially, and allowing the user to collapse as needed.
Continuing along this route, I determined that it might be nice for a user to move the elements around, maybe they want the score at the top and info at the bottom. Again leveraging CSS I implemented a solution using the draggable control e.g., $("#scoreBoardDiv").draggable();
Every enhancement I made in my journey increased my confidence and continued my desire to keep learning.
User Feedback
At this point, I had been releasing my plugin on OBS Forum and over 300 people had downloaded it - it doesn't mean they are using it, but it did mean they saw some potential in it. While many people had downloaded it I had no feedback, until eventually Speed0469 reached out and indicated he was having some issue on his twitch stream, he was finding limitations when trying to use the same solution multiple times on an OBS stream.
After a little bit of investigation, and assistance from AI, I implemented a query function in my URL, so that when a browser or control panel was configured with a specific instance parameter, I created unique variables and allowed for unlimited instances to be displayed on a single stream!
The End?
At this point, there is nothing on my bucket list to complete... but I am always open to feedback! If you found my journey interesting, or want to know more... leave a comment, or check out my GitHub for additional information and the actual code - https://github.com/iainsmacleod/CueSport-Scoreboard or check the wiki