ABSA Cape Epic Uses CasparCG


#1

The Absa Cape Epic is the most televised mountain bike race in the world and the only eight-day mountain bike stage race classed as hors catégorie by the Union Cycliste Internationale (UCI). This official UCI status makes it a highlight on the professional racer’s calendar. Based in South Africa and mainly streamed live to YouTube (https://www.youtube.com/user/absacapeepic/) and Facebook

We build a custom graphics package for TV for the event this year, using the power of CasparCG, it’s HTML templates and a web based control panel, data was pulled in real time from both the rider database as well as the timing system which allowed us to create split boards and rider profiles on the fly.

Some of the graphics we had


#2

Brilliant work - thanks for sharing.

What was your workflow on building up the HTML templates? What software did you use here?

Cheers
Chumby


#3

We designed all the animations in adobe after effects, then exported them with lottie so they were html embed-able animations. From there it was just an html page with some javascript running to update the text, colours and flags based on the data coming in.

This method while a bit of a pain having to deal with lottie it’s IMO the easiest way to create amazing looking animations and once you have a workflow it’s not too difficult


#4

Would you be able to share one of these templates as an example?


#5

Any updates here, Mikie? Looks like an interesting project.

Cheers
Chumby


#6

Hi guys,

Download link has a zip which has a lowerthirds folder which is the actual template and the a scripts folder which was just some things I shared between all the templates.

There’s a var debug = “true” in the utils.js which will make the animation run if you open index.html in chrome. If you’re running it from caspar then just set this to false. I have the template setup for 1920 x 1080 so you might need to scroll the chrome window to see it. It’ll show on the bottom left.

The findElementLocations method was just a helper method that gave me the target location of each text field so I can pass the correct data into the correct place. On some of the results boards there were 30 odd text fields so this sped things up.

Images can be swapped out dynamically too. I don’t do it in the attached example but the code below should give you an idea of how it works. Just something I learnt the hard way, bodymovin does an optimization where if you share a image file in AE it only exports and references it once which means you can’t update them individually later. So when you have 20 country flags make sure they different flags in AE so you can change them independently.

const imageElements = container.getElementsByTagName("image");
for (let i = 0; i < imageElements.length; i++) {
  const element = imageElements[i];
  if (~element.getAttribute("href").search("images/img_1.png")) {
    element.setAttribute("href", "../flags/" +
      rider1CountryCode + ".png");
  }
}

I used xml which was a real pain just because the way I parsed the xml into variables was tedious. Ideally use json and everything else should work the same.

In the bodymovin initialization I have “animationData: test” - That test refers to a variable name in the data.js file. Bodymovin actually exports the animation as a json data file but because you can’t load a json file into an html without hosting the file. Cors blocks it. I had to copy the json into a js file and assign it to a variable. That was annoying though because every time I updated in AE and exported I had to remember to copy the json over. Possible we should update the internal casparcg chromium config flags to allow cors which would simplify this. The other option is to have all your templates hosted and then call them by url instead of template name but for me that adds overhead and a point of failure.

Overall I think this is the way forward for me. It allows for super complex animations which were pretty simple to create in AE compared to any html way. You can also run part of an animation. “animation.playSegments([00, 60], true);” which allows you to animate something in and then animate it out again. Bodymovin has it’s quirks and it’s api needs some expanding to allow for more custom things but once you learn to work with it, it becomes real powerful.

If you have any questions or want to jump on a Skype call to go through any of the other templates just drop me a message

https://megaupload.nz/SbA2E3b8n7/caspartemplate_zip


#7

Thank you for sharing your template. Alas I can not download it, as Chrome tells me, that it is something harmful. Do you have any other way to share your file? WeTransfer?


#8

That’ll expire in 7 days but hopefully works for now!


#9

Thanks a lot. :slight_smile: