Light Strip Pro lets you personalize your lighting by creating custom scenes with JavaScript. This guide will walk you through creating and testing your scenes using existing templates and integrating them with Stream Deck.
Table of contents
- Getting started with custom scenes
- How to use existing JavaScript scenes
- How to create, test, and preview a JavaScript scene
- How to send your JavaScript scene to Light Strip Pro
- Can I use Stream Deck with custom scenes
- Known limitations
- Troubleshooting
Getting started with custom scenes
Creating custom scenes for Light Strip Pro requires some knowledge of JavaScript.
Download the tools
Start by downloading and extracting the JavaScript Scenes Builder ZIP file, which includes all the tools and documentation you'll need.
Readme
Read through README.md in the downloaded ZIP to get an overview of the JavaScript scene format.
💻 Download here.
How to use existing JavaScript scenes
You can use pre-made JavaScript scene files from Control Center as templates. These are located in thedefault-scenes subfolder of the downloaded ZIP. Alternatively, they can be found in Control Center installation directories:
-
Windows:
%ProgramFiles%\Elgato\ControlCenter\Scenes -
macOS:
/Applications/Elgato Control Center.app/Contents/Resources/javascript-scenes
How to create, test, and preview a JavaScript scene
Open the builder
Open the javascript-scenes-builder.html file in your browser.
Upload or paste code
Upload your JavaScript scene file or paste your code in the text field. You can also upload one of the existing Elgato-created scene files.
Run and preview
Click on "Run scene code" to see a preview. Configure your scene parameters (colors, speed, etc.) and get a live preview.
Debug
If an error occurs, use the JavaScript developer tools console in your browser to debug. Edit your code directly in the editor field and download the code as a file once you are done.
How to send your JavaScript scene to Light Strip Pro
Using a browser
1) Open your browser with Cross-Origin Resource Sharing (CORS) temporarily disabled. For Chromium browsers, add command-line parameters --disable-web-security --user-data-dir="...".
2) Open the javascript-scenes-builder.html file, upload your JavaScript scene file, and click on "Run scene code".
3) Enter the IP address of your Light Strip Pro in the "Send to Light Strip Pro" field and click "Send to Light Strip Pro". Find the IP address in the Control Center accessory settings.
Using Control Center
1) Exit Control Center app/process completely.
2) Copy Scene File: Copy your JavaScript scene file to the appropriate directory:
-
Windows:
%ProgramFiles%\Elgato\ControlCenter\Scenes -
macOS:
~/Library/Application Support/Elgato Control Center/Scenes - iOS: Connect your iPhone/iPad to your Mac, go to the Files tab in Finder, and drag and drop your file into the Control Center row.
3) Start the Control Center app again, find your Light Strip Pro, open the "Scenes" tab in the accessory settings, click on the "+" button, and select your scene. Click "Activate".
Known limitations
Scene sharing
JavaScript scenes are not shared automatically between your Control Center installations on different devices. Manually copy your JavaScript scene file to all your devices to use the scenes.
Android support
Android does not support custom scenes.
Can I use Stream Deck with custom scenes?
Yes, you can toggle your custom scenes using Stream Deck once they are activated in Control Center.
Troubleshooting
Browser
Check the JavaScript developer tools console for errors. Retry sending while the Network tab is opened to check the network request.
Control Center
Check the logfile of Control Center for further information. For debugging, using the HTML scene builder is recommended.
If any assistance is needed, feel free to contact us through the widget at the right.