Updated
This commit is contained in:
Éric Lemoine
@@ -0,0 +1,554 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user