API data to CasparCG template

General
1

I need some help here. Got a website with some data that updates live. I would like to take this data to update a html template in Caspar. How can i make this happen?

2

By programming it.

If you do not give all details, you will not get a useful answer. We are very bad at reading your mind.

3

Of course, first time i post here. Got some more details here.

Here is a example API link like the ones i am going to use: https://vmix.hockeyettan.se/api/pregame/over/777266

The idea here is to transfer this “real time data” to a Scoreboard template inside Caspar. The Link will update every game with a new ID.

The template is already done and i have been using Scoreboard OCR before.

The problem here is that i am not that good at programing but know some basics. Would like to know were to start.

4

This comes from ScoreboardOCR? Or only the data for scores an period etc?

Do I understand that right: The data is for one match and does not change during the game, right? So you only need to set that on play of the template and afterwards ScoreboardOCR updates the scores etc.

I would use my CasparCGAddIn (works only on Excel for Windows) and use a “PowerQuery” to get the data from the API endpoint. This let you shape the data in a form, that you can send it to the template, like you would do normally, without any programming. Put fields for the clock, score and period also in Excel (initialize them to 0 or first period), so that the template displays correct data when played for the first time, Then let ScoreboardOCR update the clock(s), scores and period during the match. You can use Excel as a normal Caspar client with that AddIn.

5

I’m working to make a Rest Api gateway for Caspar Cg, it’s not fully complete but I can provide my repo. It’s write in asp.net core.

Here the branch with the API dust63/StartDust.CasparCG.net at feature/rest-api (github.com)

6

Here is RCC template which fetches data from API link.

Here is the js code

// Function to fetch data from the API
function fetchandDisplayData() {
  fetch('https://vmix.hockeyettan.se/api/pregame/over/777210')
    .then((response) => response.json())
    .then((data) => {
      // Assuming the data is in JSON format
      // You can access specific properties from the data object here
      console.log(data[0]);

      displayData(data);
    })
    .catch((error) => {
      console.error('Error fetching data:', error);
    });
}

// Function to display data in the HTML page
function displayData(data) {
  updateimage('ccg_AwayLogo', data[0]['AwayLogo.Source']);
  updateimage('ccg_HomeLogo', data[0]['HomeLogo.Source']);

  updatestring('ccg_AwayName', data[0]['AwayName.Text']);
  updatestring('ccg_HomeName', data[0]['HomeName.Text']);

  updatestring('ccg_AwayScore', data[0]['AwayScore.Text']);
  updatestring('ccg_HomeScore', data[0]['HomeScore.Text']);

  updatestring('ccg_Time', data[0]['Time.Text'].split('|')[0].split('{')[1]);
}

// Fetch data when the page loads
document.addEventListener('DOMContentLoaded', function () {
  fetchandDisplayData();
  setInterval(() => {
    fetchandDisplayData();
  }, 1000);
});
1 Like
7

That is actually very helpful Vimlesh, thank you for that, i can learn a lot from this!!

1 Like