aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/gauge.html
diff options
context:
space:
mode:
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.html158
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>