typescript-closure-tools
Version:
Command-line tools to convert closure-style JSDoc annotations to typescript, and to convert typescript sources to closure externs files
159 lines (137 loc) • 4.63 kB
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>