diff --git a/website/awfy.js b/website/awfy.js index 7192129..45cdeec 100644 --- a/website/awfy.js +++ b/website/awfy.js @@ -5,6 +5,7 @@ var AWFY = { }; AWFY.refreshTime = 1000 * 60 * 5; AWFY.machineId = 0; AWFY.refresh = true; +AWFY.hasLegend = false; AWFY.panes = []; AWFY.queryParams = { }; AWFY.drawLegend = function () { @@ -70,6 +71,12 @@ AWFY.compute = function (xhr) { display.draw(); } + // Draw the legend if needed. + if (!this.hasLegend) { + Display.drawLegend(); + this.hasLegend = true; + } + if (this.refresh) window.setTimeout(this.query.bind(this), this.refreshTime); } diff --git a/website/frontpage.js b/website/frontpage.js index 7e54acd..b1c5218 100644 --- a/website/frontpage.js +++ b/website/frontpage.js @@ -366,3 +366,16 @@ Display.prototype.onHover = function (event, pos, item) { this.hovering.drawBasic(); } +Display.drawLegend = function () +{ + var legend = $("#legend"); + + for (var modename in AWFYMaster.modes) { + var mode = AWFYMaster.modes[modename]; + var vendor = AWFYMaster.vendors[mode.vendor_id]; + var item = $('
'); + item.text(vendor.browser + ' (' + mode.name + ')'); + item.appendTo(legend); + } +} + diff --git a/website/style.css b/website/style.css index ad43c0b..a77c4f5 100644 --- a/website/style.css +++ b/website/style.css @@ -31,6 +31,7 @@ h1 { .tooltip { -moz-border-radius:.35em; -webkit-border-radius:.35em; + border-radius: .35em; background-color:#000; color:#FFF; display:none; @@ -63,3 +64,20 @@ h1 { display: inline-block; } +#legend { + text-align: left; + padding-top: 360px; + margin-left: -20px; + display: inline; + position: absolute; + left: 0; + list-style-type: none; +} + +#legend li { + border-left: 1.2em solid #FFF; + margin-right: 2em; + padding-left: .3em; + margin-bottom: .2em; + font-size: 1.2em; +} diff --git a/website/tooltip.js b/website/tooltip.js index c878761..94657f2 100644 --- a/website/tooltip.js +++ b/website/tooltip.js @@ -86,7 +86,8 @@ ToolTip.prototype.attachLine = function (color) { // Now overlay a line from the point to the tooltip, ya. var ns = "http://www.w3.org/2000/svg"; - var svg = $(document.createElementNS(ns, 'svg')); + var svgElt = document.createElementNS(ns, 'svg'); + var svg = $(svgElt); svg.css({ position: 'absolute', left: 0, top: 0, @@ -102,7 +103,8 @@ ToolTip.prototype.attachLine = function (color) { line.setAttribute('stroke-width', 2); $(line).appendTo(svg); - svg.height($('window').height()); + svgElt.setAttribute('width', '100%'); + svgElt.setAttribute('height', '100%'); svg.appendTo('body'); this.svg = svg; this.line = line;