You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
554 lines
12 KiB
554 lines
12 KiB
<!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>
|
|
|