dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
555 lines (546 loc) • 12.7 kB
HTML
<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>