The broadcast package for twitch.tv/resir014.
- Flightsim Telemetry
- Clock extension (time stored in replicant)
- Setup nodecg-io + StreamElements extension
- StreamElements alerts
- Universal Overlay (merged BottomBar™ + background screen)
- Intermission overlays + timesignal settings
You will need:
Follow this guide to install and run NodeCG locally.
In summary:
# Install nodecg + dependencies
npm install --global nodecg-cli
mkdir nodecg
cd nodecg
nodecg setup
On your root NodeCG bundle, install the bundle via the NodeCG CLI
# Install bundle
cd bundles
git clone https://github.com/resir014/nodecg-resir014-stream-overlays.git
# Install bundle's dependencies
cd nodecg-resir014-stream-overlays
yarn
# Build for production
yarn build
On one terminal window, run a local server for development.
yarn watch
On another terminal window, navigate to the NodeCG root folder, and start the server.
# Run nodecg locally
nodecg start
The Webpack config is set up so you can easily create multiple dashboard/graphics files and will be bundled separately.
As long as you follow these naming conventions, all files are automatically generated in the main dashboard
/graphics
folders.
my-bundle/
├─ package.json
├─ webpack.config.js
└─ src/
├─ dashboard/
│ ├─ [name].dashboard.html
│ ├─ [name].dashboard.tsx
│ └─ [name].dashboard.css
└─ graphics/
├─ [name].graphics.html
├─ [name].graphics.tsx
└─ [name].graphics.css
Then, you can manually add these into your bundle config on the package.json
file.
{
"nodecg": {
"dashboardPanels": [
{
"name": "index",
"title": "Index",
"width": 6,
"file": "index.html",
"headerColor": "#68717b"
},
{
"name": "second",
"title": "Second Panel",
"width": 4,
"file": "second.html",
"headerColor": "#0070f3"
}
],
"graphics": [
{
"file": "index.html",
"width": 1920,
"height": 1080
},
{
"file": "other-graphic.html",
"width": 1920,
"height": 1080
}
]
}
}