Andreas Hocevar
159 lines
4.5 KiB
HTML
159 lines
4.5 KiB
HTML
<!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>
|