Skip to content

Commit 7251b14

Browse files
rkdarstrkdarst
committed
Add instructor tablet view + other instructor usability fixups
1 parent 22c1dc6 commit 7251b14

File tree

7 files changed

+144
-25
lines changed

7 files changed

+144
-25
lines changed

‎web/control.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -773,7 +773,7 @@ async function init_timers() {
773773
async function timer_set(id, endtime, duration) {
774774
console.log('timer_set', id, endtime)
775775
// Start a countdown timer
776-
input = document.querySelector('input#'+id)
776+
input = document.querySelector('input.timer#'+id)
777777
input.style.backgroundColor = null
778778
// token is a way to tell when a new timer has been set. If token is different, stop ticking.
779779
input.token = Math.random()
@@ -782,7 +782,7 @@ async function timer_set(id, endtime, duration) {
782782
async function timer_tick(id, endtime, duration, token) {
783783
// If we have been updated, just exit - a new handler will have been registered
784784
//console.log('tick', Date(), id, endtime, input.endtime, duration, token)
785-
input = document.querySelector('input#'+id)
785+
input = document.querySelector('input.timer#'+id) // This only gets one timer box.
786786
if (input.token != token) {
787787
console.log(`timer ${id} has been reset`)
788788
return

‎web/director.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,9 +212,8 @@
212212
</tr>
213213
</table>
214214

215+
<a class="index-href" href="">Index</a>,
215216
<a class="preview-href" href="">Preview</a>,
216-
<a class="small-href" href="">Small panel</a>,
217-
<a class="annunciators-href" href="">Annunciator panel only</a>,
218217
<button class="popout" title="Pop out this window without tabs/menus" onclick="window.open(window.location.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out window</button>
219218

220219
<script>

‎web/index.html‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,32 +27,36 @@
2727
</div>
2828

2929
<ul>
30-
<li>For instructiors
30+
<li>For instructiors ("pop out" gives you small browser window). Recommended: one of the first two options.
3131
<ul>
32-
<li><a class="annunciators-href" href="">Annunciator panel lights only.</a>
32+
<li><a class="annunciators-href" href="">Annunciator panel lights only</a>. (Live/Warn/Time/Notes/Question/etc.)
3333
<button class="popout annunciators-href" onclick="window.open(event.target.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out</button>
3434
</li>
35-
<li><a class="small-href" href="">Small panel for instructors</a>
36-
<button class="popout small-href" onclick="window.open(event.target.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out</button>
35+
<li><a class="tablet-instructors-href" href="">Phone/tablet view for instructors</a>.
36+
<button class="popout tablet-instructors-href" onclick="window.open(event.target.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out</button>
37+
<button onClick='qrdiv = document.querySelector("#url-qr-code img") ; if (qrdiv) {qrdiv.remove()} else { new QRCode("url-qr-code", replace_url_path(window.location.href, "tablet-instructors"))}'>Show QR code for phone/tablet view.</button>
3738
</li>
38-
<li><a class="preview-href" href="">Real-time scene preview</a>
39+
<li><a class="preview-href" href="">Real-time scene preview</a>.
3940
<button class="popout preview-href" onclick="window.open(event.target.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out</button>
4041
</li>
4142
</ul>
4243
</li>
4344
<li>For directors/broadcasters/etc.
4445
<ul>
45-
<li><a class="director-href" href="">Big control panel for directors.</a>
46+
<li><a class="director-href" href="">Big control panel</a>.
4647
<button class="popout director-href" onclick="window.open(event.target.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out</button>
4748
</li>
48-
<li><a class="tablet-href" href="">Phone/tablet view for directors.</a>
49+
<li><a class="tablet-href" href="">Phone/tablet view</a>.
4950
<button class="popout tablet-href" onclick="window.open(event.target.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out</button>
5051
<button onClick='qrdiv = document.querySelector("#url-qr-code img") ; if (qrdiv) {qrdiv.remove()} else { new QRCode("url-qr-code", replace_url_path(window.location.href, "tablet"))}'>Show QR code for phone/tablet view.</button>
51-
<div style="margin: 1em" id="url-qr-code"></div>
5252
</li>
53-
</ul>
53+
<li><a class="small-href" href="">Small panel for instructors</a> (who want more control)
54+
<button class="popout small-href" onclick="window.open(event.target.href, 'popupWindow', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');">Pop out</button>
55+
</li>
56+
</ul>
5457
</li>
5558
</ul>
59+
<div style="margin: 1em" id="url-qr-code"></div>
5660

5761
<p>Arguments are given via URL fragments (not query arguments): <code>#url=wss://localhost:4455&password=XXXXX</code></p>
5862

‎web/small.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,10 +88,8 @@
8888
</table>
8989

9090

91-
91+
<a class="index-href" href="">Index</a>,
9292
<a class="preview-href" href="">Preview</a>,
93-
<a class="director-href" href="">Director view</a>,
94-
<a class="annunciators-href" href="">Annunciator panel only</a>,
9593
<button class="popout" title="Pop out this window without tabs/menus" onclick="window.open(window.location.href, 'popupWindow', 'width=700,height=300,menubar=no,toolbar=no,location=no,status=no');">Pop out window</button>
9694

9795
<script>

‎web/tablet-instructors.html‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<title>OBS CR control (tablet)</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<!-- boostrap -->
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
8+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
9+
<!-- Core code -->
10+
<script src="https://cdn.jsdelivr.net/npm/obs-websocket-js"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
12+
<script src="util.js"></script>
13+
<script src="control.js"></script>
14+
<script type="module">
15+
</script>
16+
<style>
17+
.centered {display: flex ; justify-content: center; }
18+
.centeredV {display: flex ; align-items: center; }
19+
</style>
20+
</head>
21+
<body>
22+
23+
<div class="ssl-warning" style="display:none; color: maroon">
24+
You are currently using HTTPS. Unfortunately if the OBS
25+
websocket isn't using SSL, then a SSL webpage can't connect to
26+
it. (From SSL webpages, browsers only allow SSL websocket
27+
connections). Thus, you need to turn SSL off. Please try changing the
28+
URL to 'http' instead of 'https' which might require telling
29+
your browser to not force SSL for this page (try clicking lock or
30+
shield icons by the URL bar). This message will disappear if
31+
you successfully connect to a wss:// (websocket+SSL) URL.
32+
</div>
33+
34+
<div class="audio-warning" style="display:none; color: maroon">
35+
Audio playback has failed. Do you need to allow it on this page?
36+
Or try clicking the "enable audio" button.
37+
</div>
38+
39+
<div class="enable-audio" style="color: maroon">
40+
<button class="enable-audio-button">Enable audio</button>
41+
Click this button once to play some sound, to enable audio in this browser.
42+
Browsers won't play sound unless you interact first, to avoid sites spamming
43+
sound without your request.
44+
</div>
45+
46+
<!--<div class="status">Status is updated here</div>-->
47+
<!--<span class="synced" syncwith="scene">Scene</span>-->
48+
<!--<span class="synced" syncwith="ss_resolution">Resolution</span>-->
49+
50+
<div id="main" style="height: 100%; display: grid; grid-template-columns: 9fr 1fr; background-color: white"> <!-- main (contains panel/sidebar) -->
51+
<div style="display: grid; grid-template-rows: .5fr 4.5fr"> <!-- main panel -->
52+
<div style="display: grid; grid-template-columns: repeat(10, 1fr); border: .5ex black solid"> <!-- top indicators -->
53+
<div class="live centered centeredV" title="When red, (audio, camera gallery, or screenshare) may be being broadcasted">Live</div>
54+
<button class="indicator" id="warning">Warn</button>
55+
<button class="indicator" id="caution">Caution</button>
56+
<button class="indicator" id="time">Time</button>
57+
<button class="indicator" id="notes">Notes</button>
58+
<button class="indicator" id="question">Question</button>
59+
<button class="indicator" id="chat">Chat</button>
60+
<button class="indicator" id="slower">Slower</button>
61+
<button class="indicator" id="faster">Faster</button>
62+
<input size="6" id="A" class="timer" style="text-align: center" title="Timer. Set the duration with formats MM[:SS][/DD] (time remaining) or @[HH:]MM[/DD] (end time), where DD is planned duration in minutes. It starts changing color 75% of the way through.">
63+
</div>
64+
<div style="display: grid; grid-template-columns: 1fr 2fr 2fr 1fr"> <!-- under indicators-->
65+
<div style="display:grid;"> <!-- first column-->
66+
<div>
67+
<div>Time:</div>
68+
<div class="time centered" title="Current time"></div>
69+
</div>
70+
<div>
71+
<div>Scene:</div>
72+
<span class="synced centered" syncwith="scene">Scene</span>
73+
</div>
74+
<div>
75+
<div>Playfile timer:</div>
76+
<span class="playfile timer centered" title="Timer for ongoing playback">-</span>
77+
</div>
78+
<div class="reconnect-button" style="display: none">
79+
<button class="centered" onclick="obs_init()">Reconnect</button>
80+
</div>
81+
<div style="font-size: 75%;">
82+
<div>Status:</div>
83+
<span class="status">Status</span>
84+
</div>
85+
<button onclick="fullscreen_toggle()" style="font-size: 75%;">Full screen & wakelock</button>
86+
</div>
87+
88+
<div style="display: grid; grid-template-rows: 1fr 1fr 1fr 1fr">
89+
</div>
90+
<div style="display: grid; grid-template-rows: 1fr 1fr 1fr 1fr">
91+
<div></div>
92+
<button class="quick-break" title="Cut audio/gallery and swich scene to Notes.">Break</button>
93+
<div>Click "break" above to cut audio, hide instructor picture, and switch to Notes. The Director normally does this but if desired you can too.</div>
94+
</div>
95+
<div style="display: grid; grid-template-rows: 1fr 1fr 1fr 1fr">
96+
</div>
97+
98+
</div>
99+
</div>
100+
</div>
101+
102+
103+
<table border="1">
104+
105+
<div>
106+
<input type="checkbox" class="no-local-sound" title="No local sound? Enable if broadcaster to prevent sound loops.">No local sound</input>
107+
</div>
108+
109+
<a class="index-href" href="">Index</a>,
110+
<a class="preview-href" href="">Preview</a>,
111+
<button class="popout" title="Pop out this window without tabs/menus" onclick="window.open(window.location.href, 'popupWindow', 'width=700,height=300,menubar=no,toolbar=no,location=no,status=no');">Pop out window</button>
112+
113+
<script>
114+
init_all()
115+
</script>
116+
117+
<body>
118+
</html>

‎web/tablet.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -207,14 +207,14 @@
207207
<input type="checkbox" class="no-local-sound" title="No local sound? Enable if broadcaster to prevent sound loops.">No local sound</input>
208208
</div>
209209

210-
<a class="preview-href" href="">Preview</a>,
211-
<a class="director-href" href="">Director view</a>,
212-
<a class="annunciators-href" href="">Annunciator panel only</a>,
213-
<button class="popout" title="Pop out this window without tabs/menus" onclick="window.open(window.location.href, 'popupWindow', 'width=700,height=300,menubar=no,toolbar=no,location=no,status=no');">Pop out window</button>
214-
215-
<script>
216-
init_all()
217-
</script>
210+
<a class="index-href" href="">Index</a>,
211+
<a class="preview-href" href="">Preview</a>,
212+
<a class="director-href" href="">Director view</a>,
213+
<button class="popout" title="Pop out this window without tabs/menus" onclick="window.open(window.location.href, 'popupWindow', 'width=700,height=300,menubar=no,toolbar=no,location=no,status=no');">Pop out window</button>
214+
215+
<script>
216+
init_all()
217+
</script>
218218

219219
<body>
220220
</html>

‎web/util.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ function replace_url_path(href, page) {
5757
function init_rellinks() {
5858
// For each <a> element with classname PAGE-href, replace link target path with PAGE.html
5959
purl = new URL(window.location.href);
60-
for (page of ["preview", "index", "control", "small", "director", "annunciators", "tablet"]) {
60+
for (page of ["preview", "index", "control", "small", "director", "annunciators", "tablet", "tablet-instructors"]) {
6161
purl.pathname = purl.pathname.replace(/\/[^\/]*?$/, `/${page}.html`)
6262
forEach(`.${page}-href`, x => {x.href = purl.toString()});
6363
}

0 commit comments

Comments
 (0)