555 lines
13 KiB
HTML
555 lines
13 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Analog Gauge Widget</title>
|
|
<style>
|
|
@import "../_Gauge.css";
|
|
@import "../../../dojo/resources/dojo.css";
|
|
@import "../../../dijit/themes/tundra/tundra.css";
|
|
</style>
|
|
<script type="text/javascript">
|
|
djConfig = {
|
|
parseOnLoad: true,
|
|
isDebug: true
|
|
};
|
|
</script>
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" dojoConfig="parseOnLoad: true"></script>
|
|
<script language="JavaScript" type="text/javascript">
|
|
dojo.require('dojox.gauges.AnalogGauge');
|
|
dojo.require('dojox.gauges.AnalogArcIndicator');
|
|
dojo.require('dojox.gauges.AnalogNeedleIndicator');
|
|
dojo.require('dojox.gauges.AnalogArrowIndicator');
|
|
dojo.require('dijit.form.Button');
|
|
dojo.require('dojo.parser');
|
|
dojo.ready(init);
|
|
|
|
var gauge, valueIndicator, targetIndicator, handle;
|
|
var ranges1 = [ {low:5, high:10, hover:'5 - 10'},
|
|
{low:10, high:20, hover:'10 - 20'},
|
|
{low:20, high:30, hover:'20 - 30'},
|
|
{low:30, high:40, hover:'30 - 40'},
|
|
{low:40, high:50, hover:'40 - 50'},
|
|
{low:50, high:60, hover:'50 - 60'},
|
|
{low:60, high:70, hover:'60 - 70'},
|
|
{low:70, high:75, hover:'70 - 75'}
|
|
];
|
|
var ranges2 = [ {low:5, high:10, hover:'5 - 10'},
|
|
{low:10, high:20, hover:'10 - 20'},
|
|
{low:20, high:30, hover:'20 - 30'},
|
|
{low:30, high:40, hover:'30 - 40'},
|
|
{low:40, high:50, hover:'40 - 50'},
|
|
{low:50, high:60, hover:'50 - 60'},
|
|
{low:60, high:70, hover:'60 - 70'},
|
|
{low:70, high:75, hover:'70 - 75'}
|
|
];
|
|
|
|
function init() {
|
|
gauge = dojo.byId("defaultGauge");
|
|
gauge = new dojox.gauges.AnalogGauge({
|
|
id: "defaultGauge",
|
|
width: 350,
|
|
height: 200,
|
|
cx: 175,
|
|
cy: 175,
|
|
radius: 125,
|
|
ranges: ranges1,
|
|
minorTicks: {
|
|
offset: 125,
|
|
interval: 2.5,
|
|
length: 5,
|
|
color: 'gray'
|
|
},
|
|
majorTicks: {
|
|
offset: 125,
|
|
interval: 5,
|
|
length: 10
|
|
},
|
|
indicators: [
|
|
new dojox.gauges.AnalogArrowIndicator({
|
|
value:17,
|
|
width: 3,
|
|
hover:'Value: 17',
|
|
title: 'Value'
|
|
}),
|
|
new dojox.gauges.AnalogLineIndicator({
|
|
value:6,
|
|
color:'#D00000',
|
|
width: 3,
|
|
hover:'Target: 6',
|
|
title: 'Target'
|
|
})
|
|
]
|
|
}, gauge);
|
|
gauge.startup();
|
|
var g = gauge;
|
|
var int = 10;
|
|
dojo.connect(dijit.byId('changeTicks'), 'onClick', function(){
|
|
var o = g.majorTicks;
|
|
o.interval = ++int;
|
|
g.setMajorTicks(o);
|
|
});
|
|
|
|
/* Entirely programmatic gauge (ranges, ticks, indicators, etc.) */
|
|
var fill = {
|
|
'type': 'linear',
|
|
'x1': 0,
|
|
'x2': 0,
|
|
'y2': 0,
|
|
'y1': gauge.height,
|
|
'colors': [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}]
|
|
};
|
|
gauge = dojo.byId("programmaticGauge");
|
|
gauge = new dojox.gauges.AnalogGauge({
|
|
id: "programmaticGauge",
|
|
width: 350,
|
|
height: 200,
|
|
cx: 175,
|
|
cy: 175,
|
|
radius: 125,
|
|
background: fill,
|
|
image: {
|
|
url: "images/gaugeOverlay.png",
|
|
width: 280,
|
|
height: 155,
|
|
x: 35,
|
|
y: 38,
|
|
overlay: true
|
|
},
|
|
useRangeStyles: 8
|
|
}, gauge);
|
|
gauge.startup();
|
|
gauge.addRanges(ranges2);
|
|
gauge.setMajorTicks({
|
|
length: 5,
|
|
interval: 5,
|
|
offset: 125,
|
|
font: {family: "Arial", style: "italic", variant: 'small-caps', weight: 'bold', size: "18px"}
|
|
});
|
|
valueIndicator = new dojox.gauges.AnalogArrowIndicator({
|
|
value:17,
|
|
width: 3,
|
|
hover:'Value: 17',
|
|
title: 'Value',
|
|
easing: dojo.fx.easing.bounceOut
|
|
});
|
|
gauge.addIndicator(valueIndicator);
|
|
targetIndicator = new dojox.gauges.AnalogLineIndicator({
|
|
value:6,
|
|
color:'#D00000',
|
|
width: 3,
|
|
hover:'Target: 6',
|
|
title: 'Target',
|
|
// Can use string to indicate easing function (just like in de
|
|
easing: 'dojo.fx.easing.linear'
|
|
});
|
|
gauge.addIndicator(targetIndicator);
|
|
handle = setInterval((function(t, v){
|
|
return (function(){
|
|
t.update(Math.floor(Math.random() * 70) + 5);
|
|
v.update(Math.floor(Math.random() * 70) + 5);
|
|
});
|
|
})(valueIndicator, targetIndicator), 3000);
|
|
dojo.connect(dijit.byId('stop'), 'onClick', function(){
|
|
clearInterval(handle);
|
|
});
|
|
|
|
gauge = dojo.byId("speedometer");
|
|
gauge = new dojox.gauges.AnalogGauge({
|
|
id: "speedometer",
|
|
width:270,
|
|
height: 230,
|
|
cx: 135,
|
|
cy: 135,
|
|
radius: 125,
|
|
image: {
|
|
url: "images/flare.png",
|
|
width: 112,
|
|
height: 116,
|
|
x: 140,
|
|
y: 40,
|
|
overlay: true
|
|
},
|
|
startAngle: -135,
|
|
endAngle: 135,
|
|
useRangeStyles: 8,
|
|
ranges: [{low:0, high:180, color: 'black'}],
|
|
majorTicks: {
|
|
offset: 85,
|
|
length: 10,
|
|
interval: 20,
|
|
color: 'gray'
|
|
},
|
|
minorTicks: {
|
|
offset: 85,
|
|
length: 5,
|
|
interval: 5,
|
|
color: 'gray'
|
|
},
|
|
indicators: [new dojox.gauges.AnalogNeedleIndicator({
|
|
value:0,
|
|
width: 3,
|
|
length: 100,
|
|
hover:'Value: 0',
|
|
title: 'Value',
|
|
color: 'red'
|
|
})]
|
|
}, gauge);
|
|
gauge.startup();
|
|
|
|
gauge = dojo.byId("tachometer");
|
|
gauge = new dojox.gauges.AnalogGauge({
|
|
id: "tachometer",
|
|
width:270,
|
|
height: 230,
|
|
cx: 135,
|
|
cy: 135,
|
|
radius: 125,
|
|
image: {
|
|
url: "images/flare.png",
|
|
width: 112,
|
|
height: 116,
|
|
x: 140,
|
|
y: 40,
|
|
overlay: true
|
|
},
|
|
startAngle: -135,
|
|
endAngle: 135,
|
|
useRangeStyles: 8,
|
|
ranges: [{low:0, high:9000, color: 'black'}],
|
|
majorTicks: {
|
|
offset: 75,
|
|
length: 10,
|
|
color: 'gray',
|
|
interval: 1000
|
|
},
|
|
minorTicks: {
|
|
offset: 75,
|
|
length: 5,
|
|
color: 'gray',
|
|
interval: 500
|
|
},
|
|
indicators: [new dojox.gauges.AnalogNeedleIndicator({
|
|
value:0,
|
|
width: 3,
|
|
length: 100,
|
|
hover:'Value: 0',
|
|
title: 'Value',
|
|
color: 'red'
|
|
})]
|
|
}, gauge);
|
|
gauge.startup();
|
|
|
|
// Used for a gradient arc indicator below:
|
|
var fill = {
|
|
'type': 'linear',
|
|
'x1': 50,
|
|
'y1': 50,
|
|
'x2': 550,
|
|
'y2': 550,
|
|
'colors': [{offset: 0, color: 'black'}, {offset: 0.5, color: 'black'}, {offset: 0.75, color: 'yellow'}, {offset: 1, color: 'red'}]
|
|
};
|
|
gauge = dojo.byId("arctest");
|
|
gauge = new dojox.gauges.AnalogGauge({
|
|
id: "arctest",
|
|
width: 650,
|
|
height: 550,
|
|
radius: 300,
|
|
cx: 320,
|
|
cy: 310,
|
|
startAngle: -135,
|
|
endAngle: 135,
|
|
ranges: [
|
|
{low: 0, high: 100, color: 'black'},
|
|
{low: 100, high: 200, color: 'black'}
|
|
],
|
|
minorTicks: {
|
|
offset: 235,
|
|
interval: 5,
|
|
length: 5,
|
|
color: 'gray'
|
|
},
|
|
majorTicks: {
|
|
offset: 235,
|
|
interval: 10,
|
|
length: 10,
|
|
color: 'gray'
|
|
},
|
|
indicators: [new dojox.gauges.AnalogArcIndicator({
|
|
value: 200,
|
|
width: 20,
|
|
offset: 280,
|
|
color: fill,
|
|
noChange: true,
|
|
hideValue: true
|
|
}),
|
|
new dojox.gauges.AnalogArcIndicator({
|
|
value: 80,
|
|
width: 10,
|
|
offset: 280,
|
|
hover:'Arc: 80',
|
|
title: 'Arc',
|
|
color: 'blue'
|
|
}),
|
|
new dojox.gauges.AnalogLineIndicator({
|
|
value:6,
|
|
color:'#D00000',
|
|
width: 8,
|
|
hover:'Target: 6',
|
|
title: 'Target',
|
|
// Can use string to indicate easing function (just like in declarative version)
|
|
easing: 'dojo.fx.easing.linear'
|
|
}),
|
|
new dojox.gauges.AnalogArrowIndicator({
|
|
value: 20,
|
|
width: 8,
|
|
length: 300,
|
|
hover:'Arrow: 20',
|
|
title: 'Arrow',
|
|
color: 'red',
|
|
easing: dojo.fx.easing.bounceOut
|
|
}),
|
|
new dojox.gauges.AnalogNeedleIndicator({
|
|
value: 100,
|
|
width: 8,
|
|
length: 300,
|
|
hover: 'Needle: 100',
|
|
title: 'Needle',
|
|
color: 'red'
|
|
})
|
|
]
|
|
}, gauge);
|
|
gauge.startup();
|
|
|
|
var fill = {
|
|
'type': 'linear',
|
|
'x1': 0,
|
|
'x2': 0,
|
|
'y2': 0,
|
|
'y1': gauge.height,
|
|
'colors': [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}]
|
|
};
|
|
gauge.setBackground(fill);
|
|
}
|
|
dojo.addOnUnload(function(){
|
|
clearInterval(handle);
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body class="tundra">
|
|
<h1>Analog Gauge Widget</h1>
|
|
<h2>Default Colored Gauge</h2>
|
|
<div id="defaultGauge"></div>
|
|
<button dojoType="dijit.form.Button" id="changeTicks">Change Ticks</button>
|
|
<h2>CSS Themed Ranges, Image Overlay, Gradient Background, Updating to Random Values on 3s Timer</h2>
|
|
<div id="programmaticGauge"></div>
|
|
<button dojoType="dijit.form.Button" id="stop">Stop Timer</button>
|
|
<div style="float: left;">
|
|
<h2>Speedometer</h2>
|
|
<div id="speedometer"></div>
|
|
</div>
|
|
<div style="float: left;">
|
|
<h2>Tachometer</h2>
|
|
<div id="tachometer"></div>
|
|
</div>
|
|
<div style="clear: both;">
|
|
<h2>Various Indicators Test</h2>
|
|
<div id="arctest"></div>
|
|
</div>
|
|
<h2>Declarative, Gradient Ranges, Gradient Background, No Indicator Boxes</h2>
|
|
<div dojoType="dojox.gauges.AnalogGauge"
|
|
id="declarativeGauge"
|
|
width="270"
|
|
height="265"
|
|
cx="110"
|
|
cy="150"
|
|
radius="125"
|
|
startAngle="-45"
|
|
endAngle="135"
|
|
useRangeStyles="0"
|
|
hideValues="true"
|
|
majorTicks="{length: 5, offset: 125, interval: 5}"
|
|
background="{
|
|
'type': 'linear',
|
|
'x1': 0,
|
|
'y1': 265,
|
|
'x2': 0,
|
|
'y2': 0,
|
|
'colors': [{offset: 0, color: '#ECECEC'}, {offset: 1, color: 'white'}]
|
|
}">
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="5"
|
|
high="10"
|
|
hover="5 - 10"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#606060'}, {offset: 1, color: '#707070'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range1"
|
|
low="10"
|
|
high="20"
|
|
hover="10 - 20"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#707070'}, {offset: 1, color: '#808080'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range2"
|
|
low="20"
|
|
high="30"
|
|
hover="20 - 30"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#808080'}, {offset: 1, color: '#909090'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range3"
|
|
low="30"
|
|
high="40"
|
|
hover="30 - 40"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#909090'}, {offset: 1, color: '#A0A0A0'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range4"
|
|
low="40"
|
|
high="50"
|
|
hover="40 - 50"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#A0A0A0'}, {offset: 1, color: '#B0B0B0'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range5"
|
|
low="50"
|
|
high="60"
|
|
hover="50 - 60"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#B0B0B0'}, {offset: 1, color: '#C0C0C0'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range6"
|
|
low="60"
|
|
high="70"
|
|
hover="60 - 70"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#D0D0D0'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
id="range7"
|
|
low="70"
|
|
high="75"
|
|
hover="70 - 75"
|
|
color="{
|
|
'type': 'linear',
|
|
'colors': [{offset: 0, color:'#D0D0D0'}, {offset: 1, color: '#E0E0E0'}]
|
|
}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.AnalogLineIndicator"
|
|
id="target"
|
|
value="6"
|
|
color="#D00000"
|
|
width="3"
|
|
hover="Target: 6"
|
|
title="Target">
|
|
</div>
|
|
<div dojoType="dojox.gauges.AnalogArrowIndicator"
|
|
id="value"
|
|
value="17"
|
|
type="arrow"
|
|
length="135"
|
|
width="3"
|
|
hover="Value: 17"
|
|
title="Value">
|
|
</div>
|
|
</div>
|
|
<h2>Declarative, (Ugly) Colored Ranges, No Numbers, No Indicator Boxes</h2>
|
|
<div dojoType="dojox.gauges.AnalogGauge"
|
|
id="declarativeGauge2"
|
|
width="270"
|
|
height="270"
|
|
cx="135"
|
|
cy="135"
|
|
radius="125"
|
|
startAngle="-90"
|
|
endAngle="270"
|
|
useRangeStyles="0"
|
|
hideValues="true"
|
|
background="{color: 'green'}">
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="5"
|
|
high="10"
|
|
hover="5 - 10"
|
|
color="{color: 'red'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="10"
|
|
high="20"
|
|
hover="10 - 20"
|
|
color="{color: '#FFA500'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="20"
|
|
high="30"
|
|
hover="20 - 30"
|
|
color="{color: 'yellow'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="30"
|
|
high="40"
|
|
hover="30 - 40"
|
|
color="{color: '#7FFF00'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="40"
|
|
high="50"
|
|
hover="40 - 50"
|
|
color="{color: '#00FFFF'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="50"
|
|
high="60"
|
|
hover="50 - 60"
|
|
color="{color: 'blue'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="60"
|
|
high="70"
|
|
hover="60 - 70"
|
|
color="{color: '#191970'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.Range"
|
|
low="70"
|
|
high="75"
|
|
hover="70 - 75"
|
|
color="{color: 'purple'}">
|
|
</div>
|
|
<div dojoType="dojox.gauges.AnalogLineIndicator"
|
|
value="6"
|
|
color="#D00000"
|
|
width="3"
|
|
hover="Target: 6"
|
|
title="Target">
|
|
</div>
|
|
<div dojoType="dojox.gauges.AnalogArrowIndicator"
|
|
value="55"
|
|
length="135"
|
|
width="3"
|
|
hover="Value: 55"
|
|
title="Value">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|