https://github.com/rewindrl/updater
A simple JavaScript overlay updater that maps Google Sheets values to HTML overlay elements. Originally written for Rewind Gaming, a Rocket League tournament organisation, but open source as of the organisation's closure in late 2019.
https://github.com/rewindrl/updater
broadcasting esports game-streaming google-sheets overlay overlays
Last synced: 11 months ago
JSON representation
A simple JavaScript overlay updater that maps Google Sheets values to HTML overlay elements. Originally written for Rewind Gaming, a Rocket League tournament organisation, but open source as of the organisation's closure in late 2019.
- Host: GitHub
- URL: https://github.com/rewindrl/updater
- Owner: rewindrl
- License: gpl-3.0
- Created: 2019-09-08T21:06:00.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-18T18:34:47.000Z (over 3 years ago)
- Last Synced: 2025-06-13T03:04:27.214Z (about 1 year ago)
- Topics: broadcasting, esports, game-streaming, google-sheets, overlay, overlays
- Language: TypeScript
- Homepage:
- Size: 74.2 KB
- Stars: 14
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Updater.js
This repository contains code designed to be used in a broadcast situation, and provides a simple framework to allow a broadcast moderator to control overlays using a Google Sheet. It was created for [Rewind Gaming](https://twitter.com/RewindRL) by [Barnaby 'bucketman' Collins](https://twitter.com/bucketman21). Versions of this program have been used in overlays for several tournaments including:
It is designed to be included inside a set of HTML overlays to be imported into broadcasting software such as OBS, and runs entirely on the client side. An earlier version of this program was used by Rewind Gaming for all of our large events, and it has proven reliable.
When using this system, the main latency bottleneck is Google's servers propagating new values to the API. Generally I've found that updates take 2-10 seconds to reach overlays, which is very much satisfactory for most broadcast needs.
Note: for more advanced users, this updater is configurable with your own overlay updating operations. More information on this is available at [Customisation.md](Customisation.md).
## A note on Google API versions
This branch now contains the version of Updater.js for Google Sheets API v4. If you are looking for the previous version, which doesn't require an API key but uses a deprecated API version, that can be found on the [`APIv3` branch](https://github.com/rewindrl/updater/tree/APIv3).
## Basic Implementation
To use Updater.js, simply import it into an overlay page in a `` tag and define a new `GraphicsUpdater` object. It doesn't require JQuery so can just be included as a standalone file.
For example:
```html
<!DOCTYPE html>
<html>
<head>
<!-- stuff -->
</head>
<body>
<span id="team-name"></span>
<img id="team-photo">
<!-- JAVASCRIPT STUFF -->
<!-- Import Updater -->
<script src="Updater.js">
// Define settings to use
const settings = {
'string': {
'H1': 'team-name'
},
"image": {
'H2': 'team-photo'
}
};
// Define spreadsheet to use
const spreadsheetID = '0B-klwLEjaXWcZHR5SmJJWEwtYnc';
// Select worksheet
const worksheetName = 'Sheet1';
// Specify the API key to use
// (this is just a random string, it won't work okay)
const apiKey = "4fBv9O3L9rR0SeLf6P1l5I679D08s4zP5xX4iZc";
// Update the overlay every 3 seconds
const updateInterval = 3000;
// Pass those values into a new GraphicsUpdater object
// The code will deal with it from here
const u = new GraphicsUpdater(settings, spreadsheetID, worksheetName, apiKey, updateInterval);