| <!DOCTYPE HTML> |
| <html> |
| <!-- |
| Copyright 2010 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
| <head> |
| <title>goog.ui.Gauge</title> |
| <link rel="stylesheet" href="css/demo.css"> |
| <style> |
| .type { font-size:14px; font-weight:bold; font-family:arial; background-color:#f7f7f7; text-align:center } |
| </style> |
| <script src="../base.js"></script> |
| <script> |
| goog.require('goog.dom'); |
| goog.require('goog.graphics'); |
| goog.require('goog.graphics.Font'); |
| goog.require('goog.graphics.LinearGradient'); |
| goog.require('goog.graphics.SolidFill'); |
| goog.require('goog.graphics.Stroke'); |
| goog.require('goog.ui.Gauge'); |
| goog.require('goog.ui.GaugeTheme'); |
| </script> |
| <script> |
| |
| var CustomGaugeTheme = function() { |
| } |
| goog.inherits(CustomGaugeTheme, goog.ui.GaugeTheme); |
| |
| CustomGaugeTheme.prototype.getInternalBorderFill = function(cx, cy, r) { |
| return new goog.graphics.SolidFill("#8080ff"); |
| } |
| |
| CustomGaugeTheme.prototype.getExternalBorderFill = function(cx, cy, r) { |
| return new goog.graphics.SolidFill("#8080c0"); |
| } |
| |
| CustomGaugeTheme.prototype.getInternalBorderStroke = function() { |
| return new goog.graphics.Stroke(2, "#ffff00"); |
| } |
| |
| CustomGaugeTheme.prototype.getMajorTickStroke = function() { |
| return new goog.graphics.Stroke(2, "#ffffff"); |
| } |
| |
| CustomGaugeTheme.prototype.getHingeStroke = function() { |
| return new goog.graphics.Stroke(1, "#00a000"); |
| } |
| |
| CustomGaugeTheme.prototype.getHingeFill = function(cx, cy, r) { |
| return new goog.graphics.SolidFill("#00c000"); |
| } |
| |
| CustomGaugeTheme.prototype.getNeedleStroke = function() { |
| return new goog.graphics.Stroke(1, "#008040"); |
| } |
| |
| CustomGaugeTheme.prototype.getNeedleFill = function(cx, cy, r) { |
| return new goog.graphics.SolidFill("#008040", 0.7); |
| } |
| |
| |
| var interactiveGauge; |
| |
| function setupGauges() { |
| var gauge = new goog.ui.Gauge(120, 120); |
| gauge.setValue(33); |
| gauge.render(document.getElementById('basic')); |
| |
| var gauge = new goog.ui.Gauge(200, 200); |
| gauge.addBackgroundColor(50, 60, goog.ui.Gauge.RED); |
| gauge.addBackgroundColor(35, 50, goog.ui.Gauge.YELLOW); |
| gauge.addBackgroundColor(15, 25, goog.ui.Gauge.GREEN); |
| gauge.setMinimum(15); |
| gauge.setMaximum(60); |
| gauge.setTicks(3, 6); |
| gauge.setValue(40); |
| gauge.setTitleBottom("RPM"); |
| gauge.render(document.getElementById('colors')); |
| |
| |
| interactiveGauge = new goog.ui.Gauge(300, 200); |
| interactiveGauge.addBackgroundColor(0, 30, goog.ui.Gauge.RED); |
| interactiveGauge.addBackgroundColor(75, 90, goog.ui.Gauge.YELLOW); |
| interactiveGauge.addBackgroundColor(90, 100, goog.ui.Gauge.RED); |
| interactiveGauge.setTitleTop("CPU Utilization"); |
| interactiveGauge.setTicks(5, 2); |
| interactiveGauge.setMajorTickLabels(['Idle', '20%', '40%', '60%', '80%', 'Argh']); |
| setValue(); |
| interactiveGauge.render(document.getElementById('interactive')); |
| |
| var gauge = new goog.ui.Gauge(200, 200); |
| gauge.setMinimum(-30); |
| gauge.setMaximum(30); |
| gauge.setTicks(10, 0); |
| gauge.setValue(20); |
| var theme = new CustomGaugeTheme(); |
| gauge.setTheme(theme); |
| gauge.render(document.getElementById('customcolors')); |
| |
| } |
| |
| function setValue() { |
| var sv = document.getElementById("v1").value |
| var v = parseInt(sv, 10); |
| if (isNaN(v)) { |
| v = 0; |
| } |
| interactiveGauge.setValue(v, v + "%"); |
| } |
| </script> |
| |
| </head> |
| |
| <body> |
| <h1>goog.ui.Gauge</h1> |
| <h2>Note: This component requires vector graphics support</h2> |
| <table border="1"> |
| <tr valign="top"> |
| <td class="type"> |
| Basic |
| </td> |
| <td class="type"> |
| Background colors, title. custom ticks |
| </td> |
| <td class="type"> |
| Value change, formatted value, tick labels |
| </td> |
| <td class="type"> |
| Custom colors |
| </td> |
| </tr> |
| <tr> |
| <td style="width: 120px"> |
| <span id="basic"></span> |
| </td> |
| <td style="width: 200px"> |
| <span id="colors"></span> |
| </td> |
| <td style="width: 300px"> |
| <span id="interactive"></span> |
| <center> |
| <input type="text" size="3" value="22" id="v1" /> |
| <input type="button" onclick="setValue()" value="Set" /> |
| </center> |
| </td> |
| <td style="width: 200px"> |
| <span id="customcolors"></span> |
| </td> |
| </tr> |
| </table> |
| <script> |
| setupGauges(); |
| </script> |
| </body> |
| </html> |
