Bryce/OBS_controller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init upload

Browse Source 
Mostly working
** OBS WS **
- UI isn't connecting
- bot is connecting
This commit is contained in:
bryce
2025-07-22 10:50:27 +12:00
commit 0254a30685
4 changed files with 1110 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
index.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OBS Remote Control</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome for easily accessible icons if you prefer, or just use custom SVGs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<h1>OBS Remote Control</h1>
<!-- Connection Dialog and Status -->
<div class="connection-status">
<span id="status-light" class="status-light red"></span>
<span id="status-text">Disconnected</span>
<button id="connect-dialog-button">Connection Settings</button>
</div>
<div id="connection-dialog" class="dialog">
<h2>Connection Settings</h2>
<label for="obs-ip">OBS IP Address:</label>
<input type="text" id="obs-ip" value="127.0.0.1"><br>
<label for="obs-port">Port:</label>
<input type="number" id="obs-port" value="4444"><br>
<label for="obs-password">Password:</label>
<input type="password" id="obs-password"><br>
<button id="connect-button">Connect</button>
<button id="close-dialog-button">Close</button>
</div>
<!-- Scene Swapping -->
<div class="section">
<h2>Scene Transitions</h2>
<div class="button-grid">
<button class="transition-button" data-transition="fade" data-duration="300">Swap (Fade @300ms)</button>
<button class="transition-button" data-transition="fade" data-duration="500">Swap (Fade @500ms)</button>
<button class="transition-button" data-transition="stinger" data-stinger-name="Stinger 1">Swap (Stinger 1)</button>
<button class="transition-button" data-transition="stinger" data-stinger-name="Stinger 2">Swap (Stinger 2)</button>
<button class="transition-button" data-transition="Move" data-duration="500">Swap (Move)</button>
<button class="transition-button" data-transition="Cut" data-duration="0">Swap (Cut)</button>
</div>
</div>
<!-- Scene Chooser (Studio Mode Only) - MOVED HERE -->
<div class="section">
<h2>Scene Chooser (Preview)</h2>
<div id="scene-thumbnails" class="scene-thumbnails-grid">
<!-- Thumbnails will be loaded here by JavaScript -->
</div>
</div>
<!-- Volume Sliders and Mute Buttons (Audio Control) -->
<div class="section">
<h2>Audio Control</h2>
<div class="audio-controls-grid" id="audio-controls-grid">
<!-- Audio sources will be dynamically added here by JavaScript -->
</div>
</div>
<!-- Mute/Unmute Groups - RESTRUCTURED -->
<div class="section">
<h2>Mute Groups</h2>
<div class="mute-groups-grid">
<button id="toggle-all-mics" class="group-mute-toggle" data-group="mics">
<!-- SVG will be injected by JS -->
<span>Mics</span>
</button>
<button id="toggle-non-mics" class="group-mute-toggle" data-group="non-mics">
<!-- SVG will be injected by JS -->
<span>Other Audio</span>
</button>
</div>
</div>
</div>
<script src="obs-websocket.js"></script>
<script src="script.js"></script>
</body>
</html>