AtmosphericX - OBS Studio (GUIDE)

THIS DOCUMENT IS A WORK IN PROGRESS

Note: This document is currently a work in progress and may not contain all the necessary information. It is recommended to check back later for updates or refer to the official documentation for more details. Feel free to ask in the Discord if you have any questions or need assistance with the configuration.

AtmosphericX - OBS Studio Guide

What is OBS Studio? (Open Broadcaster Software)

---

OBS Studio is a free and open-source application designed for video recording and live streaming. It enables users to capture real-time video and audio from multiple sources, such as webcams, microphones, and desktop applications. With its robust features and customizable settings, OBS Studio is widely adopted by content creators, gamers, and professionals for producing high-quality content and broadcasts. If you wish to download OBS Studio, you can find it on the official website: OBS Studio Download.

How to Use OBS Studio with AtmosphericX

---

AtmosphericX can be be used in conjunction with OBS Studio with the use of web browser sources. This allows you to display the project widgets (See: AtmosphericX Widgets) directly in your OBS Studio scenes. Here’s how to set it up:

Installing the Default Theme

To install the default theme for AtmosphericX, start by accessing the dashboard of your AtmosphericX instance. Navigate to the URL (e.g., http://<host>:<port>) and open the menu by clicking the hamburger icon in the top-left corner. From there, expand the Resources section and select General Support.

Next, download the Source Clone Plugin from the OBS Studio Resources. This plugin is essential for cloning sources, allowing you to create unique instances of the same widget without needing multiple browser sources. Follow the installation instructions provided with the plugin, and restart OBS Studio once the installation is complete.

Afterward, download the latest template for AtmosphericX. During the download process, you’ll encounter a text input field—leave the default value unless you need to redirect to a different domain or address. Once the download is complete, you’ll find a .json file in your downloads folder.

To import the template into OBS Studio, open the application and navigate to Scene Collection > Import. Select the downloaded .json file and click Import. Finally, activate the imported scene collection by going to Scene Collection and selecting the newly imported collection. The template widgets will now be visible, ready for customization to suit your preferences.

Creating Your Own Theme

Creating a custom theme for AtmosphericX can be a rewarding experience, but it requires some understanding of widgets, endpoints, APIs, and other components. Once you become familiar with the process, you can design your own unique themes. To get started, follow the structure below for your theme files and folders:

your-atmosphericx-theme-name/
├── assets/         # Contains images, icons, and other assets used in the theme
├── configure.sh    # Script to configure theme settings
├── README.txt      # Instructions for installing and using the theme
├── theme.original  # Base theme file to be converted into a .json format

---

Exporting Your Theme

After completing your theme layout, you can export it by navigating to Scene Collection > Export in OBS Studio. This will generate a .json file that you can share with others. Ensure you include the README.txt file with detailed instructions for installation and usage.

---

Customizing Widgets

To modify widgets, edit the variable.css file located at storage/www/assets/styles/variables.css. This file allows you to adjust colors, fonts, and other styles used by AtmosphericX and its widgets. If you make changes to variable.css, include your customized version in the assets/ folder of your theme. This ensures others can use your theme without altering the original file.

---

Configuration Script

Below is an example of a shell script (configure.sh) to configure your theme settings:

#!/bin/sh

file="theme.original"
tmpfile="theme.json"
echo "Enter the endpoint URL for your project (e.g., http://localhost:80):"
read replace_str

if [ ! -f "$file" ]; then
    echo "File \"$file\" not found."
    exit 1
fi

cp "$file" "$tmpfile"
sed "s|http://localhost:80|$replace_str|g" "$file" > "$tmpfile"
echo "Created $tmpfile with the new endpoint URL."
echo "Press any key to continue..."
read -n 1 -s

This script prompts you to enter the endpoint URL for your project, replaces the default URL in the theme.original file, and generates a new theme.json file.

---

Example README File

Below is an example of a README.txt file for your theme:

[Name]:         Simple AtmosphericX Design
[Created By]:   KiyoWx (k3yomi)
[Recommended]:  AtmosphericX v7.1.2+
[Requirements]: OBS Studio, AtmosphericX v7.1.2+, Mapbox API Key (Optional)
[Widgets Used]: - Random Alert Features (Name, Locations, Description)
                - Notification Widget
                - Top Alerts (Formerly Notice)
                - Location Service (Rtirl, Spotter Network)
                - Header Widget
                - Date & Time Widget
                - Watchdog (Tor/Svr)
                - Dynamic Color Widget
                - SPC Widget
                - Mapbox (API Key Required)
                - Default Alert Box
[Instructions]: 1. Run the `configure.sh` script and follow the prompts to configure settings.
                2. Import the `theme.json` file into OBS Studio via Scene Collections.
                3. Set the background image to `overlay-background.png` for widget borders.
                4. Customize the overlay as desired.
                5. You're all set!