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() | This function allows you to read the value assigned to a specific cell from the Sheet that you declare. |
SpreadsheetApp.getActiveSpreadsheet() | 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