More usability tweaks

This commit is contained in:
Neale Pickett 2011-12-02 18:55:47 -06:00
parent f4c6764f37
commit 0a92c71ed0
12 changed files with 180 additions and 377 deletions

View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- Presentation Timer 2011 Neale Pickett --> <!-- Presentation Timer 2011 Neale Pickett -->
<!-- Placed in the public domain. --> <!-- Placed in the public domain. -->
<!-- Time-stamp: "2011-11-23 15:50:46 neale" --> <!-- Time-stamp: "2011-12-02 17:36:14 neale" -->
<html> <html>
<head> <head>
<title>LADD Roller Derby Scoreboard</title> <title>LADD Roller Derby Scoreboard</title>
@ -11,7 +11,6 @@
</head> </head>
<body> <body>
<h1>LADD Roller Derby Scoreboard</h1> <h1>LADD Roller Derby Scoreboard</h1>
<img src="sb3.png" alt="Running scoreboard">
<p> <p>
This is the scoreboard used by This is the scoreboard used by
@ -19,30 +18,6 @@
in bouts and scrimmages. in bouts and scrimmages.
</p> </p>
<h1>Features</h1>
<ul>
<li>
Easy mouse-driven (with hotkeys) setup and operation
</li>
<li>
Looks <em>good</em>, with colors tuned for high-visibility
with projectors
</li>
<li>
Appearance can be customized in HTML and CSS
</li>
<li>
Runs in any modern web browser—even smartphones and
tablets
</li>
<li>
Ships with <a href="logos.html">an ever-expanding set of
team logos</a>
</li>
<li>Uses WFTDA timing</li>
</ul>
<h1>Try it!</h1>
<script type="text/javascript" src="logos.js"></script> <script type="text/javascript" src="logos.js"></script>
<script type="text/javascript" src="scoreboard.js"></script> <script type="text/javascript" src="scoreboard.js"></script>
<table id="scoreboard"> <table id="scoreboard">
@ -86,11 +61,37 @@
keybindings) keybindings)
</p> </p>
<h1>Features</h1>
<ul>
<li>
Easy mouse-driven (with hotkeys) setup and operation
</li>
<li>
Looks <em>good</em>, with colors tuned for high-visibility
with projectors
</li>
<li>
Appearance can be customized in HTML and CSS
</li>
<li>
Runs in any modern web browser—even smartphones and
tablets
</li>
<li>
Ships with <a href="logos.html">an ever-expanding set of
team logos</a>
</li>
<li>Uses WFTDA timing</li>
</ul>
<h1>Try it!</h1>
<p> <p>
The scoreboard is implemented in pure HTML5 and JavaScript. The The scoreboard is implemented in pure HTML5 and JavaScript. The
box above is a <em>running scoreboard</em>. If the box works, you box above is a <em>running scoreboard</em>. If the box works, you
can run this scoreboard without installing anything else. Try can run this scoreboard without installing anything else. Try
clicking on team names, then the Jam Timer, to get things started. clicking on team logos, then the Jam Timer, to get things started.
</p> </p>
<h1>Documentation</h1> <h1>Documentation</h1>

BIN
sb1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
sb2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

BIN
sb3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
sb4.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
sb5.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 217 KiB

After

Width:  |  Height:  |  Size: 47 KiB

View File

@ -1,7 +1,7 @@
/* /*
* LADD Roller Derby Scoreboard * LADD Roller Derby Scoreboard
* Copyright © 2011 Neale Pickett <neale@woozle.org> * Copyright © 2011 Neale Pickett <neale@woozle.org>
* Time-stamp: <2011-11-23 20:01:35 neale> * Time-stamp: <2011-12-02 16:58:09 neale>
* *
* This program is free software: you can redistribute it and/or modify * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by * it under the terms of the GNU General Public License as published by
@ -24,13 +24,13 @@
/* State names */ /* State names */
var STARTUP = 0; var SETUP = 0;
var JAM = 1; var JAM = 1;
var ROTATE = 2; var ROTATE = 2;
var TIMEOUT = 3; var TIMEOUT = 3;
var BREAK = 4; var BREAK = 4;
var state = STARTUP; var state = SETUP;
// Create a timer on [element]. // Create a timer on [element].
// If [tenths] is true, show tenths of a second. // If [tenths] is true, show tenths of a second.
@ -200,21 +200,18 @@ function handle(event) {
switch (e.id) { switch (e.id) {
case "name-a": case "name-a":
case "name-b": case "name-b":
if (state == STARTUP) { if (state == SETUP) {
if (event.ctrlKey) {
var tn = prompt("Enter team " + team + " name", e.innerHTML); var tn = prompt("Enter team " + team + " name", e.innerHTML);
if (tn) { if (tn) {
e.innerHTML = tn; e.innerHTML = tn;
} }
} else {
logo_rotate(team, event.shiftKey?-1:1);
}
} }
break; break;
case "logo-a": case "logo-a":
case "logo-b": case "logo-b":
if (state == STARTUP) { if (state == SETUP) {
if (event.ctrlKey) { if (event.ctrlKey || event.altKey) {
var u = prompt("Enter URL to team " + team + " logo"); var u = prompt("Enter URL to team " + team + " logo");
if (u) { if (u) {
@ -223,10 +220,12 @@ function handle(event) {
} else { } else {
logo_rotate(team, event.shiftKey?-1:1); logo_rotate(team, event.shiftKey?-1:1);
} }
} else {
score(team, -1);
} }
break; break;
case "period": case "period":
if ((state == STARTUP) || (state == TIMEOUT)) { if ((state == SETUP) || (state == TIMEOUT)) {
var r = prompt("Enter new time for period clock", e.innerHTML); var r = prompt("Enter new time for period clock", e.innerHTML);
if (! r) return; if (! r) return;
@ -261,7 +260,7 @@ function handle(event) {
break; break;
case "score-a": case "score-a":
case "score-b": case "score-b":
if (event.ctrlKey) { if ((state == SETUP) || (event.ctrlKey)) {
var s = prompt("Enter score for team " + team, e.innerHTML); var s = prompt("Enter score for team " + team, e.innerHTML);
if (s) { if (s) {
e.innerHTML = s; e.innerHTML = s;
@ -330,6 +329,7 @@ function start() {
e("score-b").innerHTML = localStorage.rdsb_score_b || 0; e("score-b").innerHTML = localStorage.rdsb_score_b || 0;
period = localStorage.rdsb_period || 1; period = localStorage.rdsb_period || 1;
e("periodtext").innerHTML = "Period " + period; e("periodtext").innerHTML = "Period " + period;
e("jamtext").innerHTML = "Setup";
c = Number(localStorage.rdsb_period_clock || 1800000); c = Number(localStorage.rdsb_period_clock || 1800000);
startTimer(p); startTimer(p);

BIN
skate.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

223
skate.svg
View File

@ -1,223 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg2"
version="1.1"
inkscape:version="0.48.1 r9760"
width="303.56534"
height="303.50037"
sodipodi:docname="skate.svg"
inkscape:export-filename="/home/neale/src/scoreboard/skate.png"
inkscape:export-xdpi="169.39999"
inkscape:export-ydpi="169.39999">
<metadata
id="metadata8">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs6" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="697"
inkscape:window-height="1005"
id="namedview4"
showgrid="false"
inkscape:object-paths="false"
inkscape:object-nodes="false"
inkscape:zoom="0.98994949"
inkscape:cx="288.95066"
inkscape:cy="86.996206"
inkscape:window-x="0"
inkscape:window-y="15"
inkscape:window-maximized="0"
inkscape:current-layer="svg2"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<path
sodipodi:type="arc"
style="fill:#008080;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path3927"
sodipodi:cx="57.326157"
sodipodi:cy="56.714455"
sodipodi:rx="72.478447"
sodipodi:ry="72.478447"
d="m 129.8046,56.714455 a 72.478447,72.478447 0 1 1 -144.95689,0 72.478447,72.478447 0 1 1 144.95689,0 z"
transform="matrix(2.0796598,0,0,2.0796598,32.559674,33.794472)"
inkscape:export-filename="/home/neale/src/scoreboard/path3929.png"
inkscape:export-xdpi="59.299999"
inkscape:export-ydpi="59.299999" />
<g
id="g3883"
transform="matrix(2.0796598,0,0,2.0796598,141.5373,47.186908)"
inkscape:export-filename="/home/neale/src/scoreboard/path3929.png"
inkscape:export-xdpi="59.299999"
inkscape:export-ydpi="59.299999">
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path3885"
d="m 32.922831,60.690256 6.529024,0.144477 c 8.845631,2.909445 11.470011,24.53145 -4.455024,25.7112"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
transform="translate(-31.181031,-9.1652675)"
sodipodi:type="arc"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path3887"
sodipodi:cx="63.392857"
sodipodi:cy="83.035713"
sodipodi:rx="9.8214283"
sodipodi:ry="13.214286"
d="m 73.214285,83.035713 c 0,7.298049 -4.397203,13.214286 -9.821428,13.214286 -5.424225,0 -9.821429,-5.916237 -9.821429,-13.214286 0,-7.298048 4.397204,-13.214286 9.821429,-13.214286 5.424225,0 9.821428,5.916238 9.821428,13.214286 z" />
</g>
<g
id="g3810"
transform="matrix(2.0796598,0,0,2.0796598,39.912372,35.89525)"
inkscape:export-filename="/home/neale/src/scoreboard/path3929.png"
inkscape:export-xdpi="59.299999"
inkscape:export-ydpi="59.299999">
<path
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 32.922831,60.690256 6.529024,0.144477 c 8.845631,2.909445 11.470011,24.53145 -4.455024,25.7112"
id="path3804"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<path
d="m 73.214285,83.035713 c 0,7.298049 -4.397203,13.214286 -9.821428,13.214286 -5.424225,0 -9.821429,-5.916237 -9.821429,-13.214286 0,-7.298048 4.397204,-13.214286 9.821429,-13.214286 5.424225,0 9.821428,5.916238 9.821428,13.214286 z"
sodipodi:ry="13.214286"
sodipodi:rx="9.8214283"
sodipodi:cy="83.035713"
sodipodi:cx="63.392857"
id="path3806"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
sodipodi:type="arc"
transform="translate(-31.181031,-9.1652675)" />
</g>
<path
style="fill:#878787;fill-opacity:1;stroke:#000000;stroke-width:2.0796597px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 249.73915,158.29178 -2.9749,16.86641 c 0,0 3.94005,-0.85426 7.42733,-0.37138 3.48734,0.48289 8.71358,4.88008 8.54148,9.65557 -0.17218,4.77547 -18.34047,18.11257 -23.02479,17.82566 -4.68436,-0.28693 -10.65501,-5.07993 -11.14103,-9.2842 -0.48602,-4.20428 4.4564,-8.1701 4.4564,-8.1701 l -22.65343,-6.31325 -7.056,16.34019 -6.31324,-3.71369 4.08503,-18.56838 -11.88376,-0.37137 -5.94189,12.99786 -34.5372,-12.62649 -29.70943,0.37137 c 0,0 0.0704,37.58074 -16.71155,33.79445 -16.781903,-3.78627 1.48547,-38.62224 1.48547,-38.62224 l -10.769661,-3.71367 -4.827788,5.94188 -8.541455,-0.37137 -6.89186,-21.84343"
id="path2997"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cczzzzccccccccczccccc"
inkscape:export-filename="/home/neale/src/scoreboard/path3929.png"
inkscape:export-xdpi="59.299999"
inkscape:export-ydpi="59.299999" />
<g
id="g3792"
transform="matrix(2.0796598,0,0,2.0796598,39.912372,35.89525)"
inkscape:export-filename="/home/neale/src/scoreboard/path3929.png"
inkscape:export-xdpi="59.299999"
inkscape:export-ydpi="59.299999">
<path
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 65.041209,69.426025 11.07471,0.144477 c 8.214286,3.035714 12.606433,26.425486 -9.00071,25.7112"
id="path3786"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<path
d="m 73.214285,83.035713 c 0,7.298049 -4.397203,13.214286 -9.821428,13.214286 -5.424225,0 -9.821429,-5.916237 -9.821429,-13.214286 0,-7.298048 4.397204,-13.214286 9.821429,-13.214286 5.424225,0 9.821428,5.916238 9.821428,13.214286 z"
sodipodi:ry="13.214286"
sodipodi:rx="9.8214283"
sodipodi:cy="83.035713"
sodipodi:cx="63.392857"
id="path3788"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
sodipodi:type="arc"
transform="translate(0.937347,-0.429498)" />
</g>
<g
id="g3796"
transform="matrix(2.0796598,0,0,2.0796598,-68.898392,25.868319)"
inkscape:export-filename="/home/neale/src/scoreboard/path3929.png"
inkscape:export-xdpi="59.299999"
inkscape:export-ydpi="59.299999">
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path3798"
d="m 65.041209,69.426025 11.07471,0.144477 c 8.214286,3.035714 12.606433,26.425486 -9.00071,25.7112"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
transform="translate(0.937347,-0.429498)"
sodipodi:type="arc"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path3800"
sodipodi:cx="63.392857"
sodipodi:cy="83.035713"
sodipodi:rx="9.8214283"
sodipodi:ry="13.214286"
d="m 73.214285,83.035713 c 0,7.298049 -4.397203,13.214286 -9.821428,13.214286 -5.424225,0 -9.821429,-5.916237 -9.821429,-13.214286 0,-7.298048 4.397204,-13.214286 9.821429,-13.214286 5.424225,0 9.821428,5.916238 9.821428,13.214286 z" />
</g>
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path3814"
d="m 69.224636,135.9029 c 0,0 -0.829261,15.47657 -0.08293,18.45866 10.383488,2.44396 54.219704,-0.74272 54.219704,-0.74272 30.45217,15.22609 123.29413,8.91285 140.00568,1.11411 0,-4.82778 -2.45896,-6.26819 -4.13012,-7.38232"
style="fill:#020202;fill-opacity:1;stroke:#000000;stroke-width:2.0796597px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
inkscape:export-filename="/home/neale/src/scoreboard/path3929.png"
inkscape:export-xdpi="59.299999"
inkscape:export-ydpi="59.299999" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.0796597px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 71.478641,73.403403 c -7.554791,8.849115 -9.910432,44.060807 -6.801116,65.727567 41.232025,6.60901 140.041015,27.85743 194.559405,8.21966 -0.3643,-14.1232 -2.63144,-24.92669 -30.66969,-26.04078 -62.0591,-14.51889 -79.74702,-50.302302 -77.73784,-61.729441 0,0 -12.43084,-0.853762 -20.04388,-2.52492 -13.55493,8.541467 -47.237426,17.276335 -59.306879,16.347914 z"
id="path2989"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc"
inkscape:export-filename="/home/neale/src/scoreboard/path3929.png"
inkscape:export-xdpi="59.299999"
inkscape:export-ydpi="59.299999" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.0796597px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 125.27419,84.64548 c 40.1773,42.54065 83.59829,51.36979 103.29305,36.66437 0,0 -4.58612,-6.75997 -8.17009,-8.1701 -3.22749,-1.26985 -7.44012,2.18196 -10.3983,0.37139 -1.74771,-1.06971 -0.87127,-4.46982 -2.59958,-5.57054 -2.61032,-1.66241 -6.61693,1.56943 -9.2842,0 -2.19688,-1.29265 -1.48519,-5.44722 -3.71367,-6.68463 -2.16721,-1.20334 -5.35921,1.738 -7.42737,0.37138 -2.09122,-1.38186 -0.47778,-5.721521 -2.59957,-7.055993 -2.21048,-1.390265 -5.56932,2.102464 -7.79871,0.742733 -2.27651,-1.38844 -0.98504,-5.647902 -2.97096,-7.427343 -1.72232,-1.543252 -5.28522,-0.01584 -6.68462,-1.856843 -2.62178,-3.449325 0,-12.997874 0,-12.997874"
id="path2999"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccaaaaaaaaaac"
inkscape:export-filename="/home/neale/src/scoreboard/path3929.png"
inkscape:export-xdpi="59.299999"
inkscape:export-ydpi="59.299999" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.0796597px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 151.87978,56.691854 15.04039,16.340176 c 0,0 -49.48334,34.18152 -57.94487,24.089098 -8.46151,-10.092404 42.90448,-40.429274 42.90448,-40.429274 z"
id="path3881"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cczc"
inkscape:export-filename="/home/neale/src/scoreboard/path3929.png"
inkscape:export-xdpi="59.299999"
inkscape:export-ydpi="59.299999" />
<path
transform="matrix(2.0796598,0,0,2.0796598,32.559674,33.794472)"
d="m 129.8046,56.714455 a 72.478447,72.478447 0 1 1 -144.95689,0 72.478447,72.478447 0 1 1 144.95689,0 z"
sodipodi:ry="72.478447"
sodipodi:rx="72.478447"
sodipodi:cy="56.714455"
sodipodi:cx="57.326157"
id="path3929"
style="fill:none;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
sodipodi:type="arc"
inkscape:export-xdpi="59.299999"
inkscape:export-ydpi="59.299999" />
</svg>

Before

Width:  |  Height:  |  Size: 12 KiB

View File

@ -16,16 +16,13 @@ h1 {
h2 { h2 {
font-family: sans-serif; font-family: sans-serif;
} }
dt {
font-size: 120%;
font-weight: bold;
}
a { a {
color: yellow; color: yellow;
} }
img {
float: right;
max-width: 100%;
}
#scoreboard img {
float: none;
}
#scoreboard { #scoreboard {
font-size: 3em; font-size: 3em;
font-family: Most Wazted, fantasy; font-family: Most Wazted, fantasy;

View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- Presentation Timer 2011 Neale Pickett --> <!-- Presentation Timer 2011 Neale Pickett -->
<!-- Placed in the public domain. --> <!-- Placed in the public domain. -->
<!-- Time-stamp: "2011-11-17 12:17:57 neale" --> <!-- Time-stamp: "2011-12-02 17:29:58 neale" -->
<html> <html>
<head> <head>
<title>Using the LADD Roller Derby Scoreboard</title> <title>Using the LADD Roller Derby Scoreboard</title>
@ -11,148 +11,176 @@
<body> <body>
<h1>Using the LADD Roller Derby Scoreboard</h1> <h1>Using the LADD Roller Derby Scoreboard</h1>
<img src="scoreboard-explained.png" alt="Annotated scoreboard"> <img src="scoreboard-explained.png" alt="Annotated scoreboard"
style="border: solid black 2px;">
<h1>Quick Guide for the Impatient</h1> <h1>Quick Guide for the Impatient</h1>
<ul> <ul>
<li> <li>
When the period clock is gray, you can click on almost When the state indicator reads "Setup", you can click on almost
anything to change it. anything to change it.
</li> </li>
<li> <li>
Press Space Bar or "J", or click the jam timer, to begin a jam. Reload the page (click "Reload" or press F5) to get back to
setup mode, without losing scores or period clock time.
</li> </li>
<li> <li>
Press "A" to give a point to team A, or "B" to give a point to Click the jam timer or press Space Bar to start and end the jam.
team B.
</li> </li>
<li> <li>
Press "Shift+A" to deduct a point from team A, or "Shift+B" to Click a score or press "A" or "B" to add a point. Hold down
deduct a point from team B". Shift (Shift-click or capital "A" or "B") to take one away.
</li> </li>
<li> <li>
Press Space Bar, "R", or "L"; or click the jam timer, to end a Click a team logo to deduct a point.
jam.
</li> </li>
<li> <li>
Press "T" or click the period clock for a timeout. This turns Click the period clock or press "T" to enter a timeout.
the period clock gray: you can adjust elements (period clock, </li>
scores, etc.) during timeouts by clicking them. <li>
During timeout, click the period clock to edit the time it
shows.
</li>
<li>
Click the period indicator to change periods.
</li> </li>
</ul> </ul>
<h1>Setup Mode</h1>
<h1>Getting Started</h1>
<img src="sb1.png" alt="Scoreboard startup">
<p> <p>
When you first load the scoreboard, it will reset to some default When in Setup mode (state indicator reads "Setup" and period
values. You can begin using it right away if you like, but you clock time is gray), you can click things to change them.
will probably want to change the team names and logos first.
Until you start the first jam, and during timeouts, almost
everything on the screen can be edited by clicking it.
</p>
<h2>Set up team names and logos</h2>
<img src="sb2.png" alt="Scoreboard with team names">
<p>
Click on a team name to change it, then click a team logo to
provide a URL for that team. You can copy and paste the URL of
any image you find on the Internet, but it's probably best to
download images to your hard drive so that your scoreboard doesn't
depend on an Internet connection to operate.
</p>
<h2>Adjust period clock and period number</h2>
<p>
The period clock defaults to 30:00 the first time the scoreboard
loads, but will use whatever value it last had from then on. If
you want to set the period clock to something else, click it and
type in the new time.
</p> </p>
<p> <p>
You can also click the period indicator to change from Period 1 to Clicking the jam clock in setup mode starts the clocks and begins
Period 2. game mode.
</p> </p>
<h2>Adjust team scores</h2> <dl>
<p> <dt>Team Names and Logos</dt>
Clicking on a team's score brings up a dialog box to adjust their
score.
</p>
<h2>Put the scoreboard on the projector</h2> <dd>
<p> <p>
When everything is set up the way you want it, drag the browser The scoreboard comes pre-set with a list of team names and logos,
window to whatever screen is being projected, and make the browser including two generic logos. I would love to include your team's
full-screen (usually the F11 key, or in the View menu). logo: send it
</p> to <a href="mailto:neale&#64;woozle.org">neale&#64;woozle.org</a>.
<h1>Running a bout</h1>
<img src="sb3.png" alt="Scoreboard with team names">
<p>
The scoreboard was designed to be easy to operate with the
keyboard: you can just hit space bar most of the time, with "T"
for timeouts, use "A" and "B" to award points, and "Shift-A" and
"Shift-B" to deduct points.
</p>
<h2>Starting a jam</h2>
<p>
When the ref signals the start of the first jam (one short
whistle), start the jam timer by clicking on it, or typing Space
Bar or "J". You're off! The state indicator will show "Jam" and
the jam timer will count down from 2 minutes.
</p>
<h2>Awarding or deducting points</h2>
<p>
To award points to teams, click on the team's score or type "A" or
"B". You can award points during a jam or between jams.
</p> </p>
<p> <p>
To deduct points, click on the team's name or logo, or type Click a team's name to change it from the name associated with the
"Shift-A" or "Shift-B". Points can be deducted during a jam or logo. When you change the logo, this name will be overwritten.
between jams.
</p>
<h2>Ending a jam</h2>
<img src="sb4.png" alt="Scoreboard between jams">
<p>
When the ref signals the end of the jam (four short whistles),
click the jam timer again, or type Space Bar, "R", or "L". The
state indicator will show "Rotation" and the jam timer will count
down from 30 seconds.
</p>
<h2>Timeouts</h2>
<img src="sb5.png" alt="Scoreboard during timeout">
<p>
For any timeout, be it a team timeout or official timeout, click
the period clock or type "T". This changes the state indicator to
"Timeout", pauses the period clock, and makes the jam timer track
how long the timeout has lasted by counting up from 0.
</p> </p>
<p> <p>
Team timeouts are only supposed to last one minute. It's the Click a team's logo to cycle through this list. Holding down
referee's responsibility to signal the start of the next jam, and shift goes backwards through the list. Changing the logo changes
the period clock shouldn't start counting down again until this the name, even if you set the name by hand.
happens.
</p> </p>
<h1>Making changes during a bout</h1>
<p> <p>
If you need to adjust the period clock or make major adujustments <strong>Advanced:</strong> Hold down Ctrl or Alt while
to team scores, you must first enter a timeout by clicking the clicking a logo to specify a URL to a team logo. This
period clock or typing "T". When in timeout, the procedure for unfortunately only works on certain browsers, in certain
making changes things is the same as during setup. platforms.
</p> </p>
</dd>
<dt>Period clock</dt>
<dd>
<p>
You can set the period clock to any time you like by clicking on
it.
</p>
</dd>
<dt>Period number</dt>
<dd>
<p>
Click the period number to change it between 1 and 2.
</p>
</dd>
</dl>
<h1>Game Mode</h1>
<p>
When the first jam whistle sounds, click the jam clock or hit
space bar to begin the jam. This locks the team names and logos
into place and starts the game.
</p>
<dl>
<dt>Starting and stopping Jams</dt>
<dd>
<p>
Press the space bar or click the jam clock to start and stop
2-minute jams. When stopped, the jam clock automatically resets
to 30s for rotation.
</p>
</dd>
<dt>Timeouts</dt>
<dd>
<p>
Press "T" or click the period clock to move to a timeout. This
freezes the period clock and makes the jam clock count up from
0:00.
</p>
<p>
Press space bar or click the jam clock to end the timeout and
begin a jam.
</p>
</dd>
<dt>Adjusting the period clock</dt>
<dd>
<p>
During a timeout, click the period clock to set a new period clock
time.
</p>
</dd>
</dl>
<h1>Other actions</h1>
<dl>
<dt>Halftime timer</dt>
<dd>
<p>
If you'd like to display how long is left in a halftime,
switch to timeout mode, click the period clock, and enter the
halftime duration on the period clock. Then click the jam
clock to start the period clock counting down.
</p>
<p>
It's okay to let the jam clock run down to 0:00.
</p>
</dd>
<dt>Move to setup mode</dt>
<dd>
<p>
For the second bout of a double-header, you'll want to reset
team logos and names. Refresh the page by clicking the button
in your web browser or hitting F5, to move into Setup mode.
</p>
</dd>
</dl>
<h1>If the browser exits</h1> <h1>If the browser exits</h1>
<p> <p>