From 03c6d4e17b5aa2f82a01a19e5552e583cdfa111a Mon Sep 17 00:00:00 2001 From: Neale Pickett Date: Wed, 8 Sep 2010 21:51:48 -0600 Subject: [PATCH] Add usability feature to scoreboard (highlighting on hover) --- src/scoreboard | 159 +++++++++++++++++++++++++--------------------- www/plot.js | 66 ------------------- www/scoreboard.js | 103 ++++++++++++++++++++++++++++++ 3 files changed, 191 insertions(+), 137 deletions(-) delete mode 100644 www/plot.js create mode 100644 www/scoreboard.js diff --git a/src/scoreboard b/src/scoreboard index dab44c8..cfa9b72 100755 --- a/src/scoreboard +++ b/src/scoreboard @@ -1,5 +1,11 @@ #! /usr/bin/awk -f +## +## +## I'm not happy with how this code looks. I've +## +## + function qsort(A, left, right, i, last) { if (left >= right) return @@ -23,6 +29,20 @@ function escape(s) { return s } +function print_bar(cat, team, n, d) { + printf("
\n" \ + " %s: %.2f\n" \ + "
", + team, + 100 * n / d, + team, + team, + cat, escape(names_by_team[team]), n) +} + function output( t, c) { for (t in teams) { score = 0; @@ -56,7 +76,7 @@ BEGIN { colors[8] = "8db6cd" ncolors = 9 - # Every 2.5 minutes + # New point at least every 2.5 minutes interval = 150 tslen = 0 @@ -94,45 +114,6 @@ BEGIN { close(fn) } - # Get team names - - width = lasttime - start - print "" - print "" - print " " - print " foo" - print " " - print " " - print " " - print " " - print " " - print " " - print "

Scoreboard

" - print " " - print " " - # Sort categories ncats = 0 for (cat in points_by_cat) { @@ -140,19 +121,6 @@ BEGIN { } qsort(cats, 0, ncats-1) - # Print out category names - for (i = 0; i < ncats; i += 1) { - cat = cats[i] - points = points_by_cat[cat] - if (0 == points) continue - printf("\n", cat, points) - } - print " " - - print " " - print "
Overall%s (%d)
" - print "
    " - # Create a sorted list of scores nteams = 0 for (team in teams) { @@ -160,21 +128,77 @@ BEGIN { } qsort(scores, 0, nteams-1) + + # Now we can start writing the document + print "" + print "" + print " " + print " Scoreboard" + print " " + print " " + + # Provide raw data for the chart + print " " + + # Set up team colors + print " " + + print " " + print " " + print "

    Scoreboard

    " + print "

    " + print " " + print " " + print " " + + # Print out category names + for (i = 0; i < ncats; i += 1) { + cat = cats[i] + points = points_by_cat[cat] + if (0 == points) continue + printf("\n", cat, points) + } + + print " " + print " " + # Print out teams, ranked by score - bottom = nteams - 10 - if (bottom < 0) bottom = 0 - for (i = nteams-1; i >= bottom; i -= 1) { + print " " + + # Print out scores within each category for (i = 0; i < ncats; i += 1) { cat = cats[i] points = points_by_cat[cat] @@ -187,23 +211,17 @@ BEGIN { for (team in teams) { l[n++] = points_by_cat_team[cat, team]; } - qsort(l, 0, n) + qsort(l, 0, n-1) # Print out teams, ranked by points - for (j = n; j > 0; j -= 1) { + for (j = 0; j < n; j += 1) { if (l[j] == l[j-1]) continue; if (0 == l[j]) break; for (team in teams) { points = points_by_cat_team[cat, team] if (l[j] == points) { name = names_by_team[team] - printf("
    \n", - team, - 100 * points / points_by_cat[cat], - colors_by_team[team]) - printf(" %s: %d\n", - cat, escape(name), points) - printf("
    \n") + print_bar(cat, team, points, points_by_cat[cat]) } } } @@ -211,10 +229,9 @@ BEGIN { print "" } print " " + print "
    Overall%s (%d)
    " + for (i = 0; i < nteams; i += 1) { if (scores[i] == scores[i-1]) continue; for (team in teams) { if (scores[i] == scores_by_team_time[team, lasttime]) { name = names_by_team[team] - printf("
  1. %s (%.2f)
    2. \n", - team, escape(name), scores[i]) + print_bar("total", team, scores[i], ncats) } } } - print " " print "
    " - - - print " " + print " " print " " print "" } diff --git a/www/plot.js b/www/plot.js deleted file mode 100644 index bda72a9..0000000 --- a/www/plot.js +++ /dev/null @@ -1,66 +0,0 @@ -function dbg(o) { - e = document.getElementById("debug"); - e.innerHTML = o; -} - -function torgba(color, alpha) { - var r = parseInt(color.substring(1,3), 16); - var g = parseInt(color.substring(3,5), 16); - var b = parseInt(color.substring(5,7), 16); - - return "rgba(" + r + "," + g + "," + b + "," + alpha + ")"; -} - -function plot(id, width, height, lines) { - var canvas = document.getElementById(id); - var ctx = canvas.getContext('2d'); - - // We'll let the canvas do all the tricksy math - var xscale = canvas.width/width; - var yscale = canvas.height/height; - var nlines = lines.length; - - function moveTo(x, y) { - ctx.moveTo(Math.round(x * xscale), Math.round((height - y) * yscale)); - } - function lineTo(x, y) { - ctx.lineTo(Math.round(x * xscale), Math.round((height - y) * yscale)); - } - - function draw(line) { - var color = line[0]; - var values = line[1]; - var lasty = 0; - - ctx.strokeStyle = torgba(color, 0.99); - ctx.lineWidth = 2; - ctx.beginPath(); - moveTo(values[0][0], 0); - for (i in values) { - var x = values[i][0]; - var y = values[i][1]; - lineTo(x, lasty); - lineTo(x, y); - lasty = y; - } - lineTo(width, lasty); - ctx.stroke(); - } - - - var cur = 0; - - function update() { - var line = lines[cur]; - - draw(line); - cur = (cur + 1) % nlines; - - if (cur > 0) { - setTimeout(update, 66); - } - } - - - update() -} diff --git a/www/scoreboard.js b/www/scoreboard.js new file mode 100644 index 0000000..a32f3ce --- /dev/null +++ b/www/scoreboard.js @@ -0,0 +1,103 @@ +function dbg(o) { + e = document.getElementById("debug"); + e.innerHTML = o; +} + +function torgba(color, alpha) { + var r = parseInt(color.substring(1,3), 16); + var g = parseInt(color.substring(3,5), 16); + var b = parseInt(color.substring(5,7), 16); + + return "rgba(" + r + "," + g + "," + b + "," + alpha + ")"; +} + +function Chart(id, width, height, lines) { + var canvas = document.getElementById(id); + var ctx = canvas.getContext('2d'); + + // We'll let the canvas do all the tricksy math + var xscale = canvas.width/width; + var yscale = canvas.height/height; + var nlines = lines.length; + + function moveTo(x, y) { + ctx.moveTo(Math.round(x * xscale), Math.round((height - y) * yscale)); + } + function lineTo(x, y) { + ctx.lineTo(Math.round(x * xscale), Math.round((height - y) * yscale)); + } + + function draw(color, values) { + var lasty = 0; + + ctx.strokeStyle = torgba(color, 0.99); + ctx.lineWidth = 4; + ctx.beginPath(); + moveTo(values[0][0], 0); + for (i in values) { + var x = values[i][0]; + var y = values[i][1]; + lineTo(x, lasty); + lineTo(x, y); + lasty = y; + } + lineTo(width, lasty); + ctx.stroke(); + } + + this.highlight = function(id, color) { + var line = lines[id]; + if (! color) color = line[0]; + + draw(color, line[1]); + } + + for (id in lines) { + var line = lines[id]; + + draw(line[0], line[1]); + } + +} + +var thechart; + +function plot(id, width, height, lines) { + thechart = new Chart(id, width, height, lines); +} + +function getElementsByClass( searchClass, domNode, tagName) { + if (domNode == null) domNode = document; + if (tagName == null) tagName = '*'; + var el = new Array(); + var tags = domNode.getElementsByTagName(tagName); + var tcl = " "+searchClass+" "; + for(i=0,j=0; i