All Collections
Viz Flowics
Graphics Control API
Integrating Google Sheets data using the Graphics Control API - Scorebug graphics
Integrating Google Sheets data using the Graphics Control API - Scorebug graphics
Updated over a week ago

The Graphics Control API allows you to directly synchronize data from a Google Sheet. Also, you will be able to control the transitions of overlays in a Graphics Package output.

In this article you will find the steps to create your own sheet with buttons to control a scorebug using a script and the remote API.

1. Make your own copy of the spreadsheet

Go to this spreadheet and copy it.

This will also copy the buttons and a script.

To use the buttons in the spreadsheet you should provide all the permisions asked by the Google

2. Create your Scorebug Graphics

Bear in mind the elements that you will be controlling from the google sheet are:

  • Team names: Home and Away

  • Scores: Home and Away team

  • Match period: 1st and 2nd half

The above must be Text elements and they shloud not be connected to a data connector or a dynamic list.

Note: All the elements that compose your scorebug must be contained in the same overlay.

Your Tree could be something like this:

3. Generate your Graphics token

Learn how to generate your token here.

4. Generate an API identifier

Generate an API identifier for each of the text elements you are going to remotly control. To do so, follow the steps from the image below:

(1) Select the Text element

(2) On the Inspector, activate the Show on Remote Control toggle to enable the Control API ID field and add an identifier for the element.


5. Getting the Overlay ID

To add a Custom ID to an overlay:

(1) Select the overlay.

(2) In the inspector on the right side, click # No ID, and add the ID.


6. Completing the script

To access the script go to Extensions >> Apps Script

then you need to replace:

  • Your token graphics, in the lines 29, 60, 84, 113, 140

  • Control API ID, in the lines 41, 45, 69, 123, 127, 146

  • Overlay ID in the lines 41, 45, 69, 86, 123, 127, 146

Now you are ready to run the code.

Understanding the script

KEY

DESCRIPTION

API Url

Is the variable that contains the URL of the endpoint.

SpreadsheetApp.getActiveSpreadsheet()
.getSheetByName("Name of your Sheet" ).getRange(cell1).getValue()

This function allows you to read the value assigned to a specific cell from the Sheet that you declare.

SpreadsheetApp.getActiveSpreadsheet()
.getSheetByName("Name of your Sheet" ).getRange(cell2).setValue()

This function allows you to set a value to a specific cell from the Sheet that you declare.

Data

Is the variable that will read the values from the cells of the Google Sheet.

Options

Is the variable that defines the options used by the URLFetchApp command.

contentType

String the content type (defaults to 'application/x-www-form-urlencoded').

method

String the HTTP method for the request: get, delete, patch, post, or put.

payload

String the payload (that is, the POST body) for the request. Certain HTTP methods (for example, GET) do not accept a payload. It can be a string, a byte array, a blob, or a JavaScript object

fetch(url, params)

Makes a request to fetch a URL using optional advanced parameters. This works over HTTP as well as HTTPS.

Replace Graphics Token

It is the identifier of your graphic package.

Overlay ID

It is the identifier of the overlay.

Control API ID (Away-Home-Time)

It is the identifier that you have chosen for each element.

Your text

The content you want to add to each text element.

Sample video

Did this answer your question?