Skip to content

Commit 00f893a

Browse files
rkdarstrkdarst
committed
web: make index a landing page, move director view to director.html
1 parent 0c79bd3 commit 00f893a

File tree

5 files changed

+181
-145
lines changed

5 files changed

+181
-145
lines changed

‎web/director.html

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<title>OBS CR control</title>
4+
<meta charset="UTF-8">
5+
<script src="https://cdn.jsdelivr.net/npm/obs-websocket-js"></script>
6+
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
7+
<script src="util.js"></script>
8+
<script src="control.js"></script>
9+
<script type="module">
10+
</script>
11+
</head>
12+
<body>
13+
14+
<div class="ssl-warning" style="display:none; color: maroon">
15+
You are currently using HTTPS. Unfortunately OBS probably isn't
16+
using SSL and browsers only allow SSL websocket connections from
17+
SSL pages, so you need to turn SSL off. Please try changing the
18+
URL to 'http' instead of 'https' which might require telling
19+
your browser to not force SSL for this page (firefox: click
20+
around the page icon).
21+
</div>
22+
23+
<div class="audio-warning" style="display:none; color: maroon">
24+
Audio playback has failed. Do you need to allow it on this page?
25+
Or try clicking the "enable audio" button.
26+
</div>
27+
28+
<div class="enable-audio">
29+
Click this button once to play some sound, to enable audio in this browser.
30+
Browsers won't play sound unless you interact first, to avoid sites spamming
31+
sound without your request.
32+
<button class="enable-audio-button">Enable audio</button>
33+
</div>
34+
35+
<div class="status">Status is updated here</div>
36+
<!--<span class="synced" syncwith="scene">Scene</span>-->
37+
<!--<span class="synced" syncwith="ss_resolution">Resolution</span>-->
38+
39+
40+
<table border="1">
41+
<tr><th title="Synced indicators. Used for non-verbal instructor communication.">Indicators:</th>
42+
<td class="live" title="When red, (audio, camera gallery, or screenshare) may be being broadcasted">Live</td>
43+
<td><button class="indicator" id="warning">Warn</button></td>
44+
<td><button class="indicator" id="caution">Caution</button></td>
45+
<td><button class="indicator" id="time">Time</button></td>
46+
<td><button class="indicator" id="notes">Notes</button></td>
47+
<td><button class="indicator" id="question">Question</button></td>
48+
<td><button class="indicator" id="chat">Chat</button></td>
49+
<td><button class="indicator" id="slower">Slower</button></td>
50+
<td><button class="indicator" id="faster">Faster</button></td>
51+
<td><span class="time" title="Current time"></span></td>
52+
</tr>
53+
</table>
54+
55+
<table border="1">
56+
<tr>
57+
<th title="Quick actions to take you to or from a break.">Quick actions:</th>
58+
<td><button class="quick-break" title="Cut audio/gallery and swich scene to Notes.">Break</button></td>
59+
<td>Back from break:</td>
60+
<td><button class="quick-back" title="Do the jump back from the break. The following fields control how you go back. There is a three second countdown to return.">Back to →</button></td>
61+
<td><select class="quick-back-scene synced" syncwith="quickback-quickback-a-value" title="Which scene to return to."></select></td>
62+
<td><input class="quick-back-audio-brcd synced" type="checkbox" syncwith="checkbutton-quick_brcd-value" title="If true, un-mute the broadcaster also.">Brcd Audio?</input></td>
63+
<td><input class="quick-back-jingle synced" type="checkbox" syncwith="checkbutton-quick_jingle-value" title="If true, play a short jingle when returning.">Jingle?</input></td>
64+
</tr>
65+
</table>
66+
67+
<table border="1">
68+
<tr>
69+
<th title="Select a scene. The current scene is highlighted. You might want to use presets instead, which also configures the screenshare size.">Scene selection</th>
70+
<td><button class="scene" id="Title" livecolor="orange">Title</button></td>
71+
<td><button class="scene" id="Gallery">Gallery</button></td>
72+
<td><button class="scene" id="Screenshare">SS Portrait</button></td>
73+
<td><button class="scene" id="ScreenshareCrop">SS Crop</button></td>
74+
<td><button class="scene" id="ScreenshareLandscape">SS Landscape</button></td>
75+
<td><button class="scene" id="BroadcasterScreen">BrdScr</button></td>
76+
<td><button class="scene" id="Notes" livecolor="orange">Notes</button></td>
77+
<td><button class="scene" id="Empty" livecolor="orange">Empty</button></td>
78+
</tr>
79+
</table>
80+
81+
<table border="1">
82+
<tr>
83+
<th rowspan="3" title="Presets allow you to give a name to a {scene, resolution} combination and jump directly there. Recommended to make scenes configured for each instructor. Note they still have to screenshare on Zoom.">Scene presets:</th>
84+
<td><button class="preset-go" id="preset-a">Go</button></td>
85+
<td><input class="preset-label synced" id="preset-a" type="text" syncwith="preset-preset-a-label" value="A" size="10"></td>
86+
<td><select class="preset-sbox synced" id="preset-a" syncwith="preset-preset-a-sbox"></select></td>
87+
<td><select class="preset-rbox synced" id="preset-a" syncwith="preset-preset-a-rbox"></select></td>
88+
<td>&nbsp&nbsp</td>
89+
<td><button class="preset-go" id="preset-b">Go</button></td>
90+
<td><input class="preset-label synced" id="preset-b" type="text" syncwith="preset-preset-b-label" value="B" size="10"></td>
91+
<td><select class="preset-sbox synced" id="preset-b" syncwith="preset-preset-b-sbox"></select></td>
92+
<td><select class="preset-rbox synced" id="preset-b" syncwith="preset-preset-b-rbox"></select></td>
93+
</tr>
94+
<tr>
95+
<td><button class="preset-go" id="preset-c">Go</button></td>
96+
<td><input class="preset-label synced" id="preset-c" type="text" syncwith="preset-preset-c-label" value="C" size="10"></td>
97+
<td><select class="preset-sbox synced" id="preset-c" syncwith="preset-preset-c-sbox"></select></td>
98+
<td><select class="preset-rbox synced" id="preset-c" syncwith="preset-preset-c-rbox"></select></td>
99+
<td></td>
100+
<td><button class="preset-go" id="preset-d">Go</button></td>
101+
<td><input class="preset-label synced" id="preset-d" type="text" syncwith="preset-preset-d-label" value="D" size="10"></td>
102+
<td><select class="preset-sbox synced" id="preset-d" syncwith="preset-preset-d-sbox"></select></td>
103+
<td><select class="preset-rbox synced" id="preset-d" syncwith="preset-preset-d-rbox"></select></td>
104+
</tr>
105+
<tr>
106+
<td><button class="preset-go" id="preset-e">Go</button></td>
107+
<td><input class="preset-label synced" id="preset-e" type="text" syncwith="preset-preset-e-label" value="E" size="10"></td>
108+
<td><select class="preset-sbox synced" id="preset-e" syncwith="preset-preset-e-sbox"></select></td>
109+
<td><select class="preset-rbox synced" id="preset-e" syncwith="preset-preset-e-rbox"></select></td>
110+
<td></td>
111+
<td><button class="preset-go" id="preset-f">Go</button></td>
112+
<td><input class="preset-label synced" id="preset-f" type="text" syncwith="preset-preset-f-label" value="F" size="10"></td>
113+
<td><select class="preset-sbox synced" id="preset-f" syncwith="preset-preset-f-sbox"></select></td>
114+
<td><select class="preset-rbox synced" id="preset-f" syncwith="preset-preset-f-rbox"></select></td>
115+
</tr>
116+
</table>
117+
118+
<table border="1">
119+
<tr>
120+
<th>Audio:</th>
121+
<td><button class="mute" id="BroadcasterMic" title="If red, the broadcaster computer is unmuted in OBS">Brcd</button></td>
122+
<td><button class="mute" id="Instructors" title="If red, the instructor Zoom share is unmuted in OBS">Instr</button></td>
123+
<td><input class="volume" id="Instructors" type="range" min="-2" max="0" step="0.05" title="Instructor volume control."></td>
124+
<td><span class="volume-dB" id="Instructors" title="Instructor volume gain"></span></td>
125+
</tr>
126+
</table>
127+
<table border="1">
128+
<tr>
129+
<th title="The current size of the gallery of instructors inserted into the various scenes.">Gallery size:</th>
130+
<td colspan="4"><input class="gallerysize" type="range" min="0" max="1" step="0.01" title="Gallery size slider. If zero, the gallery is not visible."></td>
131+
<td><span class="gallerysize-state"></span></td>
132+
</tr>
133+
<tr>
134+
<th title="This resized the gallery to be appropriate for various numbers of instructors.">Gallery crop:</th>
135+
<td><button class="gallerycrop" id="n0">None</button></td>
136+
<td><button class="gallerycrop" id="n1">n=1</button></td>
137+
<td><button class="gallerycrop" id="n2">n=2</button></td>
138+
<td><button class="gallerycrop" id="n3">n=3-4</button></td>
139+
<td><button class="gallerycrop" id="n5">n=5-6</button></td>
140+
</tr>
141+
</table>
142+
<table border="1">
143+
<tr>
144+
<th title="These buttons control other audio that can be played. This goes through a separate input from the instructors: they instructors don't hear it, and muting instructors doesn't affect this.">Jingle:</th>
145+
<td class="playfile timer" title="Timer for ongoing playback">-</td>
146+
<td><button class="playfile short">short</button></td>
147+
<td><button class="playfile long" >long</button></td>
148+
<td><button class="playfile stop" title="Stop the playback">StopPlay</button></td>
149+
</tr>
150+
</table>
151+
<table border="p">
152+
<tr>
153+
<th title="These scroll the notes on the broadcaster computer up and down. The broadcaster has to enable this, and sometimes it doesn't work and the notes window needs to be clicked.">Notes scroll:</th>
154+
<td><button class="scrollnotes up" >Up </button></td>
155+
<td><button class="scrollnotes down">Down</button></td>
156+
<td><button class="scrollnotes pgup">PgUp</button></td>
157+
<td><button class="scrollnotes pgdn">PgDn</button></td>
158+
<td><button class="scrollnotes end" >End </button></td>
159+
</tr>
160+
</table>
161+
162+
<a class="preview-href" href="">Real-time scene preview</a>
163+
<a class="small-href" href="">Short panel for instructors</a>
164+
<button onclick="window.open(window.location.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out window</a>
165+
166+
<script>
167+
init_all()
168+
</script>
169+
170+
<body>
171+
</html>

0 commit comments

Comments
 (0)