4 <meta http-equiv="content-type" value="text/html; charset=utf-8" />
5 <meta charset="utf-8" />
6 <!-- <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> -->
7 <link href="fonts/lato.css" rel="stylesheet">
10 -webkit-box-sizing: border-box;
11 Box-Sizing: border-box;
12 -webkit-backface-visibility: hidden;
13 -webkit-transition: translate3d(0,0,0);
20 background: transparent;
22 -webkit-font-smoothing: antialiased !important;
25 font-family: 'Lato', sans-serif;
35 border-collapse: collapse;
37 border: 3px solid black;
41 border: 3px solid #008;
43 .team1color, .team2color {
67 /* Clock, to the right of score */
73 border-collapse: collapse;
75 border: 3px solid black;
78 border: 3px solid #008;
85 -webkit-transform:translateX(-200%);
87 .clockbug-animate-in {
88 -webkit-animation: from-left 1s ease;
90 .clockbug-animate-out {
91 -webkit-animation: to-left 1s ease;
92 -webkit-transform:translateX(-200%);
95 /* Comment, below score */
101 border-collapse: collapse;
103 border: 3px solid black;
106 border: 3px solid #008;
114 -webkit-transform:translateY(-40px);
116 .commentbug-animate-in {
117 -webkit-animation: from-top 0.5s ease;
119 .commentbug-animate-out {
120 -webkit-animation: to-top 0.5s ease;
121 -webkit-transform:translateY(-40px);
125 .lowerthird-headline {
130 border-collapse: collapse;
132 border: 2px solid #ccc;
136 /*background: linear-gradient(to right, #ccc, #fff 15px); */
137 background-image: url(lowerthird-bg.png);
139 /* padding-top: 20px; */
141 .lowerthird-headline-hidden {
146 .lowerthird-headline-animate-in {
147 -webkit-animation: scale-out 1.0s;
149 .lowerthird-headline-animate-out {
150 -webkit-animation: scale-in 1.0s;
152 .lowerthird-headline-content {
156 .lowerthird-headline-content-hidden {
157 clip: rect(0px,0px,200px,0px);
159 .lowerthird-headline-content-animate-in {
160 -webkit-animation: wipe-out 2.0s ease;
162 .lowerthird-headline-content-animate-out {
163 -webkit-animation: wipe-in 2.0s ease;
164 clip: rect(0px,0px,200px,0px);
166 .lowerthird-subheading {
173 border-collapse: collapse;
175 border: 1px solid black;
177 align-items: center; */
178 /*background: linear-gradient(to right, #44c, #33a 15px); */
179 background-image: url(lowerthird-bg2.png);
181 .lowerthird-subheading-hidden {
182 clip: rect(0px,0px,200px,0px);
184 .lowerthird-subheading-animate-in {
185 -webkit-animation: scale-out-small 1.6s ease;
187 .lowerthird-subheading-animate-out {
188 -webkit-animation: scale-in-small 1.6s ease;
192 .lowerthird-subheading-content {
196 .lowerthird-subheading-content-hidden {
200 .lowerthird-subheading-content-animate-in {
201 -webkit-animation: wipe-out 2.2s ease;
203 .lowerthird-subheading-content-animate-out {
204 -webkit-animation: wipe-in 2.2s ease;
205 clip: rect(0px,0px,200px,0px);
208 /* these are hidden when actually run in casparcg */
224 @-webkit-keyframes from-left {
226 -webkit-transform:translateX(-200%);
229 -webkit-transform:translateX(0);
232 @-webkit-keyframes to-left {
234 -webkit-transform:translateX(0);
237 -webkit-transform:translateX(-200%);
240 @-webkit-keyframes from-top {
242 -webkit-transform:translateY(-40px);
245 -webkit-transform:translateY(0);
248 @-webkit-keyframes to-top {
250 -webkit-transform:translateY(0);
253 -webkit-transform:translateY(-40px);
257 @-webkit-keyframes scale-out {
265 @-webkit-keyframes scale-in {
268 border: 2px solid #ccc;
272 border: 2px solid #ccc;
275 @-webkit-keyframes scale-out-small {
285 border: 1px solid black;
291 @-webkit-keyframes scale-in-small {
294 border: 1px solid black;
298 border: 1px solid black;
308 @-webkit-keyframes wipe-out {
310 clip: rect(0px,0px,200px,0px);
313 clip: rect(0px,0px,200px,0px);
316 clip: rect(0px,1050px,200px,0px);
319 @-webkit-keyframes wipe-in {
321 clip: rect(0px,1050px,200px,0px);
323 20% { /* Not symmetrical! */
324 clip: rect(0px,0px,200px,0px);
327 clip: rect(0px,0px,200px,0px);
333 <div id="area"></div>
334 <table class="scorebug">
336 <td class="team1color" id="team1color"></td>
337 <td class="team1" id="team1">PCL</td>
338 <td class="score" id="score">17 – 11</td>
339 <td class="team2" id="team2">NMBUI</td>
340 <td class="team2color" id="team2color"></td>
343 <table class="clockbug clockbug-hidden" id="clockbug">
345 <td class="clock" id="clock">25:00</td>
348 <table class="commentbug commentbug-hidden" id="commentbug">
350 <td class="comment" id="comment">Pagacap: First to 9 points</td>
353 <div class="lowerthird-headline lowerthird-headline-hidden" id="lowerthird-headline"><div class="lowerthird-headline-content lowerthird-headline-content-hidden" id="lowerthird-headline-content">
354 John Doe<br>Ola Nordmann
356 <div class="lowerthird-subheading lowerthird-subheading-hidden" id="lowerthird-subheading"><div class="lowerthird-subheading-content lowerthird-subheading-content-hidden" id="lowerthird-subheading-content">
357 Commentators, Trøndisk 2016
359 <div id="manualcontrols">
361 <a href="javascript:startclock()">start clock</a>
362 <a href="javascript:stopclock()">stop clock</a>
363 <a href="javascript:setclock(25*60)">reset clock</a>
364 <a href="javascript:showclock()">show clock</a>
365 <a href="javascript:hideclock()">hide clock</a>
368 <a href="javascript:goalA()">goal team A</a>
369 <a href="javascript:goalB()">goal team B</a>
370 <a href="javascript:ungoalA()">ungoal team A</a>
371 <a href="javascript:ungoalB()">ungoal team B</a>
372 <a href="javascript:resetscore()">reset score</a>
375 <a href="javascript:showcomment()">show comment</a>
376 <a href="javascript:hidecomment()">hide comment</a>
379 <a href="javascript:showlowerthird()">show lower third</a>
380 <a href="javascript:hidelowerthird()">hide lower third</a>
385 var clock_running = false;
386 var clock_visible = false;
387 var comment_visible = false;
388 var lowerthird_visible = false;
389 var clock_left = 25 * 60;
397 document.getElementById('team1').innerHTML = state['team1'];
398 document.getElementById('team2').innerHTML = state['team2'];
403 document.getElementById('team1color').style.backgroundColor = state['team1color'];
404 document.getElementById('team2color').style.backgroundColor = state['team2color'];
409 scoreA = state['score1'];
410 scoreB = state['score2'];
414 function startclock()
416 if (!clock_running) {
417 clock_origin = Date.now();
418 clock_running = true;
425 if (!clock_running) return;
426 clock_left = time_left();
427 clock_origin = Date.now();
428 clock_running = false;
431 function setclock(amount)
434 clock_origin = Date.now();
438 function setclockfromstate()
440 var amount = parseInt(state['clock_min']) * 60 + parseInt(state['clock_sec']);
446 if (clock_visible) return;
447 var clockbug = document.getElementById('clockbug');
448 clockbug.className = 'clockbug clockbug-animate-in';
449 clock_visible = true;
454 if (!clock_visible) return;
455 var clockbug = document.getElementById('clockbug');
456 clockbug.className = 'clockbug clockbug-animate-out';
457 clock_visible = false;
460 function setcomment()
462 document.getElementById('comment').innerHTML = state['comment'];
465 function showcomment()
467 if (comment_visible) return;
468 var commentbug = document.getElementById('commentbug');
469 commentbug.className = 'commentbug commentbug-animate-in';
470 comment_visible = true;
473 function hidecomment()
475 if (!comment_visible) return;
476 var commentbug = document.getElementById('commentbug');
477 commentbug.className = 'commentbug commentbug-animate-out';
478 comment_visible = false;
481 function showlowerthird()
483 if (lowerthird_visible) return;
485 // With no flexbox, this is how it has to be...
486 var f = document.getElementById('lowerthird-headline');
487 var g = document.getElementById('lowerthird-headline-content');
488 f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
490 f = document.getElementById('lowerthird-subheading');
491 g = document.getElementById('lowerthird-subheading-content');
492 f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
494 document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
495 document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
496 document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
497 document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
498 lowerthird_visible = true;
501 function setandshowlowerthird()
503 document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
504 document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
508 function hidelowerthird()
510 if (!lowerthird_visible) return;
511 document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
512 document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
513 document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
514 document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
515 lowerthird_visible = false;
520 var elapsed = (Date.now() - clock_origin) * 1e-3;
521 if (elapsed > clock_left) return 0;
522 return Math.ceil(clock_left - elapsed);
525 function update_clock()
527 var left = time_left();
528 var min = Math.floor(left / 60);
531 if (sec < 10) sec = "0" + sec;
532 document.getElementById('clock').innerHTML = min + ":" + sec;
549 if (scoreA > 0) --scoreA;
555 if (scoreB > 0) --scoreB;
559 function resetscore()
565 function update_score()
567 document.getElementById('score').innerHTML = scoreA + " – " + scoreB;
570 /* called by caspar only */
573 document.getElementById('manualcontrols').style.display = 'none';
574 document.getElementById('area').style.display = 'none';
576 // Old CEF workaround
577 document.getElementById('lowerthird-subheading').style.top = '638px';
582 console.log('[[[' + v + ']]]');
583 var j = JSON.parse(v);
584 for(var key in j) state[key] = j[key];
587 setInterval(function() {