diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/gauge.html')
-rw-r--r-- | contexts/data/lib/closure-library/closure/goog/demos/gauge.html | 158 |
1 files changed, 0 insertions, 158 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/gauge.html b/contexts/data/lib/closure-library/closure/goog/demos/gauge.html deleted file mode 100644 index cc7ac08..0000000 --- a/contexts/data/lib/closure-library/closure/goog/demos/gauge.html +++ /dev/null @@ -1,158 +0,0 @@ -<!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> |