A display link for OBS/Vmix or just for preview can be found at the bottom of the Control panel page. Paste this link in the OBS Browser source input and you’re ready to go.
Adding the control panel as an OBS dock is simple: Docks=>Custom Browser Docks menu. Please use Browser/OBS switch to conform the control panel view to the OBS styling. Alternatively, you can control your animation from your computer/phone Chrome browser.
All graphics are also compatible with vMix, although you can't add the control panel to vMix interface.
Animation in details
Three templates available - horisontal bar charts, pies charts, comparison graph. Use "select your graphic" dropdown in the control panel to pick the one you need
Horizontal bar charts
With this animation, you can illustrate a story with the percentage data for up to four subjects.
You can choose how many items you show. Just keep the percentage at 0 in the control panel for the unwanted item and it'll be hidden.
What you can customise:
Of course the percent.
Headline and items names/description
Pie charts set
This one is a kit of three pie charts. You can youse all three of one/two.
To exclude a pie chart from the sceene just keep the relevant percentage at 0.
Headline and items description
Up, down or no arrow
Pie charts colours
This one is useful to compare the shares of two items.
Pretty straightforward one.
You can customise:
Headline and description
To avoid clashing between the graphics we apply play in/out rules so if you play the graphic in while another one is onscreen, the existing one will be automatically played out first.
Please feel free to add your comments/suggestions to the discussion board.
As the next step we're looking at the option of uploading your own images to use with the animation templates.
You can add the control panel as an OBS dock via Docks=>Custom Browser Docks menu. Use Browser/OBS switch to conform the control panel view to the OBS styling. Alternatively, you can control your animation from your computer or phone Chrome browser.
These graphics are also compatible with vMix.
Animation in details
This animation is designed to stay on screen during the whole game showing the score and live timing. In this graphic you can customise:
The teams’ names. It’s advised to use short three characters long names.
Game start time in HH:MM format. That will start the time count. For the second half add a break time (15 mins usually) to the actual game start time
This is a graphic to illustrate some event in a game - a goal scored or yellow/red card received for example.
Team one name
Team one score or a number of cards
Team two names
Team two score/number of cards
A player’s name who scored or got a card
Team to which this player belongs (selection of team1/team2)
The event name. What actually happened - GOAL, RED CARD etc.
You can also use this graphic to remind your viewers about some stats of the game. If you skip the player’s name field in the control panel form you can just tell what’s the stats in a certain game event.
The name speaks for itself here. This one is designed to show the subs in the match.
You can specify:
Name of a player coming out
Going in player’s name
Is it team one or team two. This will display the correct colour.
There’s some play in / playout logic implemented: if there’s a graphic on-screen and you play in the next one, the current one automatically animates out. So the animations will not clash with each other.
We hope you’ll find it useful.
And if you have your design that you want to turn into customisable web graphics, please get in touch via the discussion board. We can turn your After Effects artwork into web-based animation.
As the next step, we plan to introduce some infographics animation - bar graphs, line charts, etc.