Skip to content
Browse files

very rough outline for legend support

  • Loading branch information...
1 parent 6d462a7 commit 1484bedb49dc9b93fdeb9843b9b634314fa5ad51 @benlemasurier committed Oct 18, 2010
Showing with 50 additions and 5 deletions.
  1. +15 −2 example/blode.html
  2. +6 −0 example/css/blode.css
  3. +29 −3 example/js/blode_graph.js
View
17 example/blode.html
@@ -11,12 +11,25 @@
<script language="javascript">
window.onload = function() {
window.graph = new BlodeGraph("visualization");
+
+ $('legend').observe('click', function() {
+ if(window.graph.show_legend) {
+ window.graph.show_legend = false;
+ $('legend').innerHTML = "show legend";
+ } else {
+ window.graph.show_legend = true;
+ $('legend').innerHTML = "hide legend";
+ }
+ });
};
</script>
</head>
<body>
<h1>hits are pretties</h1>
- <div id="visualization">
- </div>
+ <p id="visualization">
+ </p>
+ <p id="controls">
+ <a id="legend" onclick="return(false);">show legend</a>
+ </p>
</body>
</html>
View
6 example/css/blode.css
@@ -13,7 +13,13 @@ h1 {
#visualization {
background-color: #333;
+ margin-top: 0;
width: 100%;
height: 300px;
}
+#controls {
+ cursor: pointer;
+ font-size: 10px;
+ color: #666;
+}
View
32 example/js/blode_graph.js
@@ -7,6 +7,7 @@ var BlodeGraph = Class.create({
this._tick = 100; // 100ms
this._log_buffer = [];
this._socket = new BlodeSocket().listen('localhost', '8008');
+ this.show_legend = false;
// color scheme
this._bg_color = new Color('35', '91', '121', 100); // blue
@@ -28,6 +29,12 @@ var BlodeGraph = Class.create({
window.setInterval(function() {
// render foreground every "tick"
this.render_foreground();
+
+ // render legend
+ if(this.show_legend)
+ this.render_legend(this.max_value_in_log(this._log_buffer));
+ else
+ this.hide_legend();
// insert a new (blank) buffer into the "current" tick
this._log_buffer.unshift(new Array());
@@ -114,7 +121,6 @@ var BlodeGraph = Class.create({
// draw scaled "bar" levels and render the scaled legend
scaled = this.scale_log_buffer(this._log_buffer.slice());
- this.render_legend(this.max_value_in_log(this._log_buffer));
for(i = 0, j = scaled.length; i < j; i++) {
x -= this._bar_width;
y = (context.canvas.height - scaled[i]) || context.canvas.height;
@@ -147,11 +153,31 @@ var BlodeGraph = Class.create({
context.textBaseline = "top";
context.textAlign = "end";
- // draw bar backgrounds
+ // hits legend
+ context.translate(10, context.canvas.getHeight() / 2);
+ context.rotate(-90 * (Math.PI / 180));
+ context.fillText("HITS", 0, 0);
+ context.rotate(90 * (Math.PI / 180));
+ context.translate(-10, -(context.canvas.getHeight() / 2));
+
+ // scale values
context.fillText(max, 25, 10);
context.fillText(0, 25, context.canvas.getHeight() - 20);
- // console.log(context.measureText(max).width);
+ // time legend
+ // time legend background
+ context.fillStyle = "rgba(0, 0, 0, 0.7)";
+
+ // left side of legend
+ context.fillRect(30, context.canvas.getHeight() - 30, context.canvas.getWidth(), 30);
+
+ context.textAlign = "center";
+ context.fillStyle = "rgba(" + this._legend_color.toString() + ")";
+ context.fillText("TIME (" + this._tick + "ms)", context.canvas.getWidth() / 2, context.canvas.getHeight() - 20);
+ },
+
+ hide_legend: function() {
+ this._legend.getContext('2d').clearRect(0, 0, this._legend.width, this._legend.height);
},
scale_log_buffer: function(log_buffer) {

0 comments on commit 1484bed

Please sign in to comment.
Something went wrong with that request. Please try again.