Initial commit
This commit is contained in:
commit
a6f48c3e1a
10 changed files with 760 additions and 0 deletions
124
img/16x9.css
Normal file
124
img/16x9.css
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
#backdrop_4x3 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#backdrop_16x9 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratname {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratpronouns {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratspeaker {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game {
|
||||||
|
font-size: 24px;
|
||||||
|
left: 70px;
|
||||||
|
width: 450px;
|
||||||
|
bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scientist {
|
||||||
|
font-size: 24px;
|
||||||
|
right: 70px;
|
||||||
|
width: 450px;
|
||||||
|
bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timer {
|
||||||
|
font-size: 38px;
|
||||||
|
left: 472px;
|
||||||
|
width: 336px;
|
||||||
|
top: 666px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat0name {
|
||||||
|
left: 458px;
|
||||||
|
bottom: 665px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat0pronouns {
|
||||||
|
left: 458px;
|
||||||
|
top: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat0speaker {
|
||||||
|
left: 25px;
|
||||||
|
top: 5px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat1name {
|
||||||
|
left: 620px;
|
||||||
|
bottom: 581px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat1pronouns {
|
||||||
|
left: 620px;
|
||||||
|
top: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat1speaker {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
right: 25px;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat2name {
|
||||||
|
left: 458px;
|
||||||
|
bottom: 145px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat2pronouns {
|
||||||
|
left: 458px;
|
||||||
|
top: 576px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat2speaker {
|
||||||
|
left: 25px;
|
||||||
|
bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat3name {
|
||||||
|
left: 620px;
|
||||||
|
bottom: 59px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat3pronouns {
|
||||||
|
left: 620px;
|
||||||
|
top: 662px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat3speaker {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
right: 25px;
|
||||||
|
bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#embed0 {
|
||||||
|
left: 70px;
|
||||||
|
top: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#embed1 {
|
||||||
|
left: 651px;
|
||||||
|
top: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#embed2 {
|
||||||
|
left: 70px;
|
||||||
|
top: 345px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#embed3 {
|
||||||
|
left: 651px;
|
||||||
|
top: 345px;
|
||||||
|
}
|
||||||
BIN
img/16x9.png
Normal file
BIN
img/16x9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
128
img/4x3.css
Normal file
128
img/4x3.css
Normal file
|
|
@ -0,0 +1,128 @@
|
||||||
|
#backdrop_4x3 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#backdrop_16x9 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratname {
|
||||||
|
width: 200px;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratpronouns {
|
||||||
|
width: 200px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratspeaker {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game {
|
||||||
|
font-size: 24px;
|
||||||
|
left: 460px;
|
||||||
|
width: 360px;
|
||||||
|
bottom: 480px;
|
||||||
|
vertical-align: bottom;
|
||||||
|
line-height: 0.96em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scientist {
|
||||||
|
font-size: 16px;
|
||||||
|
left: 490px;
|
||||||
|
width: 300px;
|
||||||
|
top: 315px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timer {
|
||||||
|
font-size: 68px;
|
||||||
|
left: 472px;
|
||||||
|
width: 336px;
|
||||||
|
top: 232px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat0name {
|
||||||
|
left: 458px;
|
||||||
|
bottom: 665px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat0pronouns {
|
||||||
|
left: 458px;
|
||||||
|
top: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat0speaker {
|
||||||
|
left: 459px;
|
||||||
|
top: 329px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat1name {
|
||||||
|
left: 620px;
|
||||||
|
bottom: 581px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat1pronouns {
|
||||||
|
left: 620px;
|
||||||
|
top: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat1speaker {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
left: 790px;
|
||||||
|
top: 329px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat2name {
|
||||||
|
left: 458px;
|
||||||
|
bottom: 145px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat2pronouns {
|
||||||
|
left: 458px;
|
||||||
|
top: 576px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat2speaker {
|
||||||
|
left: 459px;
|
||||||
|
top: 359px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat3name {
|
||||||
|
left: 620px;
|
||||||
|
bottom: 59px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat3pronouns {
|
||||||
|
left: 620px;
|
||||||
|
top: 662px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rat3speaker {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
left: 790px;
|
||||||
|
top: 359px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#embed0 {
|
||||||
|
left: 22px;
|
||||||
|
top: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#embed1 {
|
||||||
|
left: 835px;
|
||||||
|
top: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#embed2 {
|
||||||
|
left: 22px;
|
||||||
|
top: 382px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#embed3 {
|
||||||
|
left: 835px;
|
||||||
|
top: 382px;
|
||||||
|
}
|
||||||
BIN
img/4x3.png
Normal file
BIN
img/4x3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
BIN
img/RobotoMono-Regular.ttf
Normal file
BIN
img/RobotoMono-Regular.ttf
Normal file
Binary file not shown.
118
img/main.css
Normal file
118
img/main.css
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto Mono Regular';
|
||||||
|
src: url('RobotoMono-Regular.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
background: #222;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratname {
|
||||||
|
z-index: 1;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Roboto Mono Regular';
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratpronouns {
|
||||||
|
z-index: 1;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Roboto Mono Regular';
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ratspeaker {
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.embed {
|
||||||
|
z-index: 0;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game {
|
||||||
|
z-index: 1;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Roboto Mono Regular';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scientist {
|
||||||
|
z-index: 1;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Roboto Mono Regular';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timer {
|
||||||
|
z-index: 1;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Roboto Mono Regular';
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backdrop {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
pointer-events: none;
|
||||||
|
display: block;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#livedisplay {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls td {
|
||||||
|
border: 1px solid;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls h3 {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls p {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls label {
|
||||||
|
display: table-cell;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls input, button {
|
||||||
|
display: table-cell;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
BIN
img/speaker.png
Normal file
BIN
img/speaker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 718 B |
160
js/live.js
Normal file
160
js/live.js
Normal file
|
|
@ -0,0 +1,160 @@
|
||||||
|
// Dimensions of each embed, used when initializing the embeds
|
||||||
|
embed_height = 315;
|
||||||
|
embed_width = 560;
|
||||||
|
|
||||||
|
// Twitch player embed objects go here so we can address the four embeds
|
||||||
|
// with embeds[0] .. embeds[3]
|
||||||
|
embeds = [];
|
||||||
|
|
||||||
|
// Toggles between 4x3 and 16x9 overlays by shuffling CSS stylesheets
|
||||||
|
// The boolean argument is pretty much "is this widescreen?"
|
||||||
|
function set_state(widescreen) {
|
||||||
|
css_normal = document.getElementById('css_4x3');
|
||||||
|
css_wide = document.getElementById('css_16x9');
|
||||||
|
if (widescreen) {
|
||||||
|
css_normal.disabled = true;
|
||||||
|
css_wide.disabled = false;
|
||||||
|
} else {
|
||||||
|
css_normal.disabled = false;
|
||||||
|
css_wide.disabled = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update everything
|
||||||
|
function update_all() {
|
||||||
|
update_globals();
|
||||||
|
update_embed(0);
|
||||||
|
update_embed(1);
|
||||||
|
update_embed(2);
|
||||||
|
update_embed(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update all global textual elements
|
||||||
|
function update_globals() {
|
||||||
|
change_game_name();
|
||||||
|
change_scientist();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update individual textual elements in the overlay
|
||||||
|
function change_game_name() {
|
||||||
|
game_name = document.getElementById('gamename_text').value;
|
||||||
|
e = document.getElementById('game');
|
||||||
|
e.innerHTML = game_name;
|
||||||
|
}
|
||||||
|
|
||||||
|
function change_scientist() {
|
||||||
|
scientist = document.getElementById('scientist_text').value;
|
||||||
|
e = document.getElementById('scientist');
|
||||||
|
e.innerHTML = "Lead Scientist: " + scientist;
|
||||||
|
}
|
||||||
|
|
||||||
|
function update_embed(embed_num) {
|
||||||
|
change_embed_channel(embed_num);
|
||||||
|
n = document.getElementById('rat' + embed_num + 'name');
|
||||||
|
p = document.getElementById('rat' + embed_num + 'pronouns');
|
||||||
|
|
||||||
|
n.innerHTML = document.getElementById('embed' + embed_num + '_name').value;
|
||||||
|
p.innerHTML = document.getElementById('embed' + embed_num + '_pronouns').value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Instruct a given embed to change what channel it's streaming
|
||||||
|
function change_embed_channel(embed_num) {
|
||||||
|
channel_name = document.getElementById('embed' + embed_num + '_stream').value;
|
||||||
|
|
||||||
|
if (channel_name == '' || channel_name == null) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
e = document.getElementById('embed' + embed_num);
|
||||||
|
e.style.display = 'block';
|
||||||
|
|
||||||
|
embeds[embed_num].setChannel(channel_name);
|
||||||
|
embeds[embed_num].play();
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is a fast call to immediately halt a stream. It's used as an
|
||||||
|
// emergency "something bad is happening" button, and can just be used to
|
||||||
|
// hide one of the embeds if a player isn't available.
|
||||||
|
// This is overkill: it hides the DOM element, then forces an error to make
|
||||||
|
// the player crash. This is restorable by using change_embed_channel()
|
||||||
|
function dump_stream(embed_num) {
|
||||||
|
// Hide the element entirely
|
||||||
|
document.getElementById('embed' + embed_num).style.display = 'none';
|
||||||
|
|
||||||
|
// Pass an invalid channel to the player so it errors out
|
||||||
|
// This is gross but it stops all activity for certain
|
||||||
|
embeds[embed_num].setChannel();
|
||||||
|
}
|
||||||
|
|
||||||
|
// A pretty brute force way to make sure one, and only one, embed is playing
|
||||||
|
// audio. We mute all four embeds then immediately unmute the provided one.
|
||||||
|
// We also juggle display styling for speaker elements so only the audio source
|
||||||
|
// has a speaker displayed next to it
|
||||||
|
function focus_audio(embed_num) {
|
||||||
|
embeds.forEach(e => e.setMuted(true));
|
||||||
|
embeds[embed_num].setMuted(false);
|
||||||
|
|
||||||
|
speakers = document.querySelectorAll('.ratspeaker');
|
||||||
|
speakers.forEach(e => e.style.display = 'none');
|
||||||
|
|
||||||
|
e = document.getElementById('rat' + embed_num + 'speaker')
|
||||||
|
e.style.display = 'block';
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is the primary setup function that runs when the DOM is loaded
|
||||||
|
// At the moment all it does is set up embeds
|
||||||
|
function setup() {
|
||||||
|
// Setup Embeds
|
||||||
|
// These start with JST as the channel because some channel needs to be
|
||||||
|
// provided. We simply disable autoplay so we don't get four JSTs.
|
||||||
|
// When we switch embed channels, part of that function forces playing
|
||||||
|
// to start
|
||||||
|
embeds.push(new Twitch.Embed('embed0', {
|
||||||
|
height: embed_height,
|
||||||
|
width: embed_width,
|
||||||
|
autoplay: false,
|
||||||
|
muted: false,
|
||||||
|
layout: 'video',
|
||||||
|
controls: false,
|
||||||
|
channel: 'jank_science_theater',
|
||||||
|
parent: ['voidfox.com']
|
||||||
|
}));
|
||||||
|
|
||||||
|
embeds.push(new Twitch.Embed('embed1', {
|
||||||
|
height: embed_height,
|
||||||
|
width: embed_width,
|
||||||
|
autoplay: false,
|
||||||
|
muted: true,
|
||||||
|
layout: 'video',
|
||||||
|
controls: false,
|
||||||
|
channel: 'jank_science_theater',
|
||||||
|
parent: ['voidfox.com']
|
||||||
|
}));
|
||||||
|
|
||||||
|
embeds.push(new Twitch.Embed('embed2', {
|
||||||
|
height: embed_height,
|
||||||
|
width: embed_width,
|
||||||
|
autoplay: false,
|
||||||
|
muted: true,
|
||||||
|
layout: 'video',
|
||||||
|
controls: false,
|
||||||
|
channel: 'jank_science_theater',
|
||||||
|
parent: ['voidfox.com']
|
||||||
|
}));
|
||||||
|
|
||||||
|
embeds.push(new Twitch.Embed('embed3', {
|
||||||
|
height: embed_height,
|
||||||
|
width: embed_width,
|
||||||
|
autoplay: false,
|
||||||
|
muted: true,
|
||||||
|
layout: 'video',
|
||||||
|
controls: false,
|
||||||
|
channel: 'jank_science_theater',
|
||||||
|
parent: ['voidfox.com']
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Try to start volume at a known level
|
||||||
|
embeds.forEach(e => e.setVolume(1.0));
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', setup);
|
||||||
62
js/timer.js
Normal file
62
js/timer.js
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
// Timekeeping info for the timer
|
||||||
|
timer_start = 0;
|
||||||
|
timer_sec = 0;
|
||||||
|
|
||||||
|
// Runs once a second to maintain the timer
|
||||||
|
// Tablutes how long it's been, subtracts that from timer length, then
|
||||||
|
// updates the HTML element representing the timer
|
||||||
|
function timer_tick() {
|
||||||
|
// Don't do anything if a timer isn't running
|
||||||
|
if (!timer_start) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Take how long it's been since we started the timer and subtract that
|
||||||
|
// from the timer duration to get how long is remaining
|
||||||
|
remain = timer_sec - ((Date.now() - timer_start) / 1000);
|
||||||
|
|
||||||
|
// Stop at 0
|
||||||
|
if (remain < 0) {remain = 0;}
|
||||||
|
|
||||||
|
// Update the element
|
||||||
|
document.getElementById('timer').innerHTML = seconds_to_string(remain);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Utility function to convert seconds to H:MM:SS
|
||||||
|
function seconds_to_string(seconds) {
|
||||||
|
hours = Math.floor(seconds / 3600);
|
||||||
|
minutes = Math.floor((seconds % 3600) / 60);
|
||||||
|
seconds = Math.floor(seconds % 60);
|
||||||
|
|
||||||
|
return String(hours) + ":" +
|
||||||
|
String(minutes).padStart(2, '0') + ":" +
|
||||||
|
String(seconds).padStart(2, '0')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tabluates how many seconds we want on the timer, stores that info, and
|
||||||
|
// stops a currently running timer
|
||||||
|
function reset_timer() {
|
||||||
|
hours = parseInt(document.getElementById('timer_h').value);
|
||||||
|
minutes = parseInt(document.getElementById('timer_m').value);
|
||||||
|
seconds = parseInt(document.getElementById('timer_s').value);
|
||||||
|
|
||||||
|
total = (minutes * 60) + (hours * 3600) + seconds;
|
||||||
|
|
||||||
|
document.getElementById('timer').innerHTML = seconds_to_string(total);
|
||||||
|
|
||||||
|
timer_start = 0;
|
||||||
|
timer_sec = total;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Starts the timer by setting 'now' as the timer start time
|
||||||
|
function start_timer() {
|
||||||
|
timer_start = Date.now()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Destroys the timer start time to halt the timer
|
||||||
|
function stop_timer() {
|
||||||
|
timer_start = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start timer interval
|
||||||
|
setInterval(timer_tick, 1000)
|
||||||
168
live.html
Normal file
168
live.html
Normal file
|
|
@ -0,0 +1,168 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src='https://player.twitch.tv/js/embed/v1.js'></script>
|
||||||
|
<script src='js/live.js'></script>
|
||||||
|
<script src='js/timer.js'></script>
|
||||||
|
<link rel='stylesheet' type='text/css' href='img/main.css' />
|
||||||
|
<link id='css_4x3' rel='stylesheet' type='text/css' href='img/4x3.css' />
|
||||||
|
<link id='css_16x9' rel='stylesheet' type='text/css' href='img/16x9.css' disabled />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='livedisplay'>
|
||||||
|
<img class='backdrop' id='backdrop_4x3' src='img/4x3.png' />
|
||||||
|
<img class='backdrop' id='backdrop_16x9' src='img/16x9.png' />
|
||||||
|
<div id='game'>Game Name</div>
|
||||||
|
<div class='ratname' id='rat0name'>Labrat 1</div>
|
||||||
|
<div class='ratname' id='rat1name'>Labrat 2</div>
|
||||||
|
<div class='ratname' id='rat2name'>Labrat 3</div>
|
||||||
|
<div class='ratname' id='rat3name'>Labrat 4</div>
|
||||||
|
<div class='ratpronouns' id='rat0pronouns'>they/them</div>
|
||||||
|
<div class='ratpronouns' id='rat1pronouns'>they/them</div>
|
||||||
|
<div class='ratpronouns' id='rat2pronouns'>they/them</div>
|
||||||
|
<div class='ratpronouns' id='rat3pronouns'>they/them</div>
|
||||||
|
<img class='ratspeaker' id='rat0speaker' src='img/speaker.png' />
|
||||||
|
<img class='ratspeaker' id='rat1speaker' src='img/speaker.png' />
|
||||||
|
<img class='ratspeaker' id='rat2speaker' src='img/speaker.png' />
|
||||||
|
<img class='ratspeaker' id='rat3speaker' src='img/speaker.png' />
|
||||||
|
<div id='scientist'>Lead Scientist:</div>
|
||||||
|
<div id='timer'>0:00:00</div>
|
||||||
|
<div class='embed' id='embed0'></div>
|
||||||
|
<div class='embed' id='embed1'></div>
|
||||||
|
<div class='embed' id='embed2'></div>
|
||||||
|
<div class='embed' id='embed3'></div>
|
||||||
|
</div>
|
||||||
|
<div class='controls'>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<!-- Global Controls -->
|
||||||
|
Overlay:
|
||||||
|
<button type='button' name='go_4x3' onclick='set_state(false);'>4x3</button>
|
||||||
|
<button type='button' name='go_16x0' onclick='set_state(true);'>16x9</button>
|
||||||
|
<td>
|
||||||
|
<h3>Global Settings</h3>
|
||||||
|
<p>
|
||||||
|
<label for='gamename_text'>Game Name</label>
|
||||||
|
<input id='gamename_text' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for='scientist_text'>Scientist</label>
|
||||||
|
<input id='scientist_text' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label></label>
|
||||||
|
<button type='button' name='update_global' onclick='update_globals();'>Update</button>
|
||||||
|
<button type='button' name='update_all' onclick='update_all();'>Update All</button>
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
<!-- Timer Controls -->
|
||||||
|
<td>
|
||||||
|
<h3>Timer Controls</h3>
|
||||||
|
<p>
|
||||||
|
<input type='number' id='timer_h' min=0 max=99 size=2 value=1 /> H
|
||||||
|
<input type='number' id='timer_m' min=0 max=59 size=2 value=0 /> M
|
||||||
|
<input type='number' id='timer_s' min=0 max=59 size=2 value=0 /> S
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<button type='button' name='timer_reset' onclick='reset_timer();'>Reset</button>
|
||||||
|
<button type='button' name='timer_start' onclick='start_timer();'>Start</button>
|
||||||
|
<button type='button' name='timer_reset' onclick='stop_timer();'>Stop</button>
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<!-- Top Left Control -->
|
||||||
|
<td>
|
||||||
|
<h3>Top-Left Stream</h3>
|
||||||
|
<p>
|
||||||
|
<label for='embed0_stream'>Twitch Stream</label>
|
||||||
|
<input id='embed0_stream' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for='embed0_name'>Labrat Name</label>
|
||||||
|
<input id='embed0_name' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for='embed0_pronouns'>Labrat Pronouns</label>
|
||||||
|
<input id='embed0_pronouns' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label></label>
|
||||||
|
<button type='button' name='update' onclick='update_embed(0);'>Update</button>
|
||||||
|
<button type='button' name='dump' onclick='dump_stream(0);'>Dump</button>
|
||||||
|
<button type='button' name='focus' onclick='focus_audio(0);'>Audio</button>
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
<!-- Top Right Control -->
|
||||||
|
<td>
|
||||||
|
<h3>Top-Right Stream</h3>
|
||||||
|
<p>
|
||||||
|
<label for='embed1_stream'>Twitch Stream</label>
|
||||||
|
<input id='embed1_stream' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for='embed1_name'>Labrat Name</label>
|
||||||
|
<input id='embed1_name' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for='embed1_pronouns'>Labrat Pronouns</label>
|
||||||
|
<input id='embed1_pronouns' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label></label>
|
||||||
|
<button type='button' name='update' onclick='update_embed(1);'>Update</button>
|
||||||
|
<button type='button' name='dump' onclick='dump_stream(1);'>Dump</button>
|
||||||
|
<button type='button' name='focus' onclick='focus_audio(1);'>Audio</button>
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<!-- Bottom Left Control -->
|
||||||
|
<td>
|
||||||
|
<h3>Bottom-Left Stream</h3>
|
||||||
|
<p>
|
||||||
|
<label for='embed2_stream'>Twitch Stream</label>
|
||||||
|
<input id='embed2_stream' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for='embed2_name'>Labrat Name</label>
|
||||||
|
<input id='embed2_name' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for='embed2_pronouns'>Labrat Pronouns</label>
|
||||||
|
<input id='embed2_pronouns' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label></label>
|
||||||
|
<button type='button' name='update' onclick='update_embed(2);'>Update</button>
|
||||||
|
<button type='button' name='dump' onclick='dump_stream(2);'>Dump</button>
|
||||||
|
<button type='button' name='focus' onclick='focus_audio(2);'>Audio</button>
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
<!-- Bottom Right Control -->
|
||||||
|
<td>
|
||||||
|
<h3>Bottom-Right Stream</h3>
|
||||||
|
<p>
|
||||||
|
<label for='embed3_stream'>Twitch Stream</label>
|
||||||
|
<input id='embed3_stream' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for='embed3_name'>Labrat Name</label>
|
||||||
|
<input id='embed3_name' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for='embed3_pronouns'>Labrat Pronouns</label>
|
||||||
|
<input id='embed3_pronouns' type='text' />
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label></label>
|
||||||
|
<button type='button' name='update' onclick='update_embed(3);'>Update</button>
|
||||||
|
<button type='button' name='dump' onclick='dump_stream(3);'>Dump</button>
|
||||||
|
<button type='button' name='focus' onclick='focus_audio(3);'>Audio</button>
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue