Overlayed Save
stream overlays that broadcasters can see 🎬🔴
overlayed 🎬🔴
Overlayed is a tool that enables streamers to see their overlays atop their desktop. I built it to interact more seamlessly with my viewers. If you want to interact in faster, more interesting ways it may be built for you too. ❤️
Table of contents
Installation
Currently, This project is in Alpha status. As such, the only way to install is to clone this repository, and Build it.
Configuration
Note: Most folks will use our shiny new editor ✨
To open the settings editor, click the Overlayed icon in your taskbar, and choose "Settings".
Technical details
Overlayed uses electron-settings under the hood, which saves settings to different locations based on your operating system.
| Windows | Mac | Linux |
|---|---|---|
%APPDATA%/overlayed/Settings |
~/Library/Application\ Support/Overlayed/Settings |
$XDG_CONFIG_HOME/Overlayed/Settings |
| or | ||
~/.config/Overlayed/Settings |
Learn more in the electron-settings FAQ.
Screen Layout
Overlayed can be configured to overlay above a portion of your screen, which can be great if you don't share your entire display when streaming.
To configure the screen layout, modify the following settings:
{
"overlayed": {
"window": {
"x": 780,
"y": 0,
"width": 1920,
"height": 1080
}
}
}
-
x- the left-most side of the overlay region -
y- the top-most side of the overlay region -
width- the total width of the overlay region -
height- the total height of the overlay region
Built-In Overlays
Overlayed ships with some built-in overlays. These live in this directory and are now configurable! You can find more information below.
Custom Overlays
Overlayed supports loading custom plugins from your home directory. To add custom overlays, create a folder in your home directory named .overlayed and a folder for each plugin inside that parent folder. For example:
home/
.overlayed/
TestPlugin/
package.json
TestPlugin.js
OtherPlugin/
package.json
OtherPlugin.js
All plugins, including custom plugins, are now configurable by adding an object to the configuration file containing the plugin config, indexed by the plugin name. For instance: { "clock": { "locale": "en-US" } }
Contributing
This project loves new contributors, but it is maintained as a side project. If you feel you aren't getting traction, please be patient!
Core
To contribute to the core of the project (namely, this repository) you'll need the following things:
Then clone this repository and execute the following commands from the directory in which you cloned into (likely overlayed):
npm install
npm run build
npm start
These will (in order): install dependencies, build the project, start the application. Please note that this project uses typescript to build files into the dist/ folder. As such, the dist/ folder should not be modified by engineers, nor should it be included in PRs.
Building an Overlay
A more detailed walkthrough is coming soon! ✨
- Create a new directory
.overlayedin your home directory - Create a new directory under
.overlayedfor your overlay, likeMyOverlay - Run
npm initor manually create apackage.jsonfile - Ensure
package.jsoncontainsname,version, andmain - Ensure main points to a
.jsfile that has a default export (ormodule.exports.default = YourClass) - Profit! Overlayed will attempt to load your plugin on start
For example:
TestOverlay.js:
export default class TestOverlay extends React.Component {
render() {
return <h1>Hello World</h1>
}
}
package.json:
{
"name": "test-overlay",
"version": "0.0.1",
"main": "TestOverlay.js"
}
License
MIT
Open Source Agenda Badge
