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.
300 lines
10 KiB
300 lines
10 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>Circular Gauge Sample</title> |
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
|
<link rel="stylesheet" type="text/css" href="../../../dijit/themes/claro/claro.css"> |
|
</head> |
|
<script type="text/javascript"> |
|
var djConfig = { |
|
parseOnLoad: true, |
|
isDebug: true |
|
} |
|
</script> |
|
<script type="text/javascript" src="../../../dojo/dojo.js"> |
|
</script> |
|
<script type="text/javascript"> |
|
dojo.require("dijit.dijit"); // optimize: load dijit layer |
|
dojo.require("dijit.layout.BorderContainer"); |
|
dojo.require("dijit.layout.ContentPane"); |
|
dojo.require("dijit.ColorPalette"); |
|
|
|
dojo.require('dijit.form.Button'); |
|
dojo.require('dijit.form.CheckBox'); |
|
dojo.require("dijit.form.ComboBox"); |
|
dojo.require("dijit.form.HorizontalSlider"); |
|
dojo.require("dijit.TitlePane"); |
|
|
|
dojo.require('dojox.gauges.GlossyCircularGauge'); |
|
dojo.require('dojox.gauges.GlossySemiCircularGauge'); |
|
dojo.require("dojo.parser"); |
|
|
|
dojo.addOnLoad(sample); |
|
|
|
|
|
|
|
var glossyCircular = null; |
|
var glossyCircular2 = null; |
|
|
|
function sample(){ |
|
|
|
// create an glossy Circular Gauge |
|
glossyCircular = new dojox.gauges.GlossyCircularGauge({ |
|
background: [255, 255, 255, 0], |
|
title: 'Value', |
|
id: "glossyGauge", |
|
width: 300, |
|
height: 300 |
|
}, dojo.byId("CircularGauge")); |
|
glossyCircular.startup(); |
|
|
|
// create an glossy semi Circular Gauge |
|
glossyCircular2 = new dojox.gauges.GlossySemiCircularGauge({ |
|
title: 'Value', |
|
background: [255, 255, 255, 0], |
|
id: "glossyGauge2", |
|
width: 300, |
|
height: 300 |
|
}, dojo.byId("SemiCircularGauge")); |
|
glossyCircular2.startup(); |
|
|
|
} |
|
|
|
function changeOrientation(orientation){ |
|
var t = glossyCircular.startAngle; |
|
glossyCircular.startAngle = glossyCircular.endAngle; |
|
glossyCircular.endAngle = t; |
|
glossyCircular.set('orientation', orientation); |
|
|
|
t = glossyCircular2.startAngle; |
|
glossyCircular2.startAngle = glossyCircular2.endAngle; |
|
glossyCircular2.endAngle = t; |
|
glossyCircular2.set('orientation', orientation); |
|
} |
|
|
|
function changeGaugeColor(v){ |
|
glossyCircular.set('color', v); |
|
glossyCircular2.set('color', v) |
|
} |
|
|
|
function changeNeedleColor(v){ |
|
glossyCircular.set('needleColor', v); |
|
glossyCircular2.set('needleColor', v) |
|
} |
|
|
|
function changeMinorTicksColor(v){ |
|
glossyCircular.set('minorTicksColor', v); |
|
glossyCircular2.set('minorTicksColor', v) |
|
} |
|
|
|
function changeMajorTicksColor(v){ |
|
glossyCircular.set('majorTicksColor', v); |
|
glossyCircular2.set('majorTicksColor', v) |
|
} |
|
|
|
function changeTextIndicatorColor(v){ |
|
glossyCircular.set('textIndicatorColor', v); |
|
glossyCircular2.set('textIndicatorColor', v) |
|
} |
|
</script> |
|
<body class="claro"> |
|
<table width="100%" border="0"> |
|
<tr> |
|
<td width="450px"> |
|
<div id="CircularGauge"> |
|
</div> |
|
<div id="SemiCircularGauge"> |
|
</div> |
|
</td> |
|
<td> |
|
<table border="0"> |
|
<tr> |
|
<td> |
|
Title |
|
</td> |
|
<td> |
|
<input type="text" value="Value" dojoType="dijit.form.TextBox" trim="true" onChange="glossyCircular.set('title',this.value);glossyCircular2.set('title',this.value)"> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Clockwise orientation |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.CheckBox' checked onChange="changeOrientation(this.checked?'clockwise':'cclockwise')" /> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Minimum |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="glossyCircular.set('min',Math.round(this.value));glossyCircular2.set('min',Math.round(this.value))" value="0" minimum="0" maximum="200" discreteValues="200" showButtons="false" style="width: 200px; height: 20px"/> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Maximum |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="glossyCircular.set('max',Math.round(this.value));glossyCircular2.set('max',Math.round(this.value))" value="100" minimum="0" maximum="200" discreteValues="200" showButtons="false" style="width: 200px; height: 20px"/> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Gauge Color |
|
</td> |
|
<td> |
|
<div id='gaugeColorPicker' dojoType='dijit.ColorPalette' onChange="changeGaugeColor" palette="3x4"/> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Needle Color |
|
</td> |
|
<td> |
|
<div id='needleColorPicker' dojoType='dijit.ColorPalette' onChange='changeNeedleColor' palette="3x4"/> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Text Indicator Color |
|
</td> |
|
<td> |
|
<div id='textColorPicker' dojoType='dijit.ColorPalette' onChange='changeTextIndicatorColor' palette="3x4"/> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Scale font |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.Button' onClick="glossyCircular.set('font','italic normal normal 18pt serif');glossyCircular2.set('font','italic normal normal 18pt serif')"> |
|
Sample #1 |
|
</div> |
|
<div dojoType='dijit.form.Button' onClick="glossyCircular.set('font','normal normal bold 12pt serif');glossyCircular2.set('font','normal normal bold 12pt serif')"> |
|
Sample #2 |
|
</div> |
|
<div dojoType='dijit.form.Button' onClick="glossyCircular.set('font','normal normal normal 10pt serif');glossyCircular2.set('font','normal normal normal 10pt serif')"> |
|
Default |
|
</div> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Text Indicator font |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.Button' onClick="glossyCircular.set('textIndicatorFont','normal small-caps bold 12pt Arial');glossyCircular2.set('textIndicatorFont','normal small-caps bold 12pt Arial')"> |
|
Sample #1 |
|
</div> |
|
<div dojoType='dijit.form.Button' onClick="glossyCircular.set('textIndicatorFont','italic normal normal 30pt Arial');glossyCircular2.set('textIndicatorFont','italic normal normal 30pt Arial')"> |
|
Sample #2 |
|
</div> |
|
<div dojoType='dijit.form.Button' onClick="glossyCircular.set('textIndicatorFont','normal normal normal 20pt Arial,sans-serif');glossyCircular2.set('textIndicatorFont','normal normal normal 20pt Arial,sans-serif')"> |
|
Default |
|
</div> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Display text indicator |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.CheckBox' checked onChange="glossyCircular.set('textIndicatorVisible',this.checked);glossyCircular2.set('textIndicatorVisible',this.checked)" /> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Allow interaction |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.CheckBox' checked onChange="glossyCircular.set('noChange',!this.checked);glossyCircular2.set('noChange',!this.checked)" /> |
|
</td> |
|
</tr> |
|
<tr> |
|
<table border="0" width="100%"> |
|
<tr align="left"> |
|
<td title="Major Ticks"> |
|
<table> |
|
<tr> |
|
<td> |
|
Major Ticks interval |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="glossyCircular.set('majorTicksInterval',this.value);glossyCircular2.set('majorTicksInterval',this.value)" value="10" minimum="1" maximum="100" discreteValues="100" showButtons="false" style="width: 200px; height: 20px"/> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Major Ticks length |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="glossyCircular.setMajorTicksLength(this.value);glossyCircular2.setMajorTicksLength(this.value)" value="5" minimum="1" maximum="15" discreteValues="1" showButtons="false" style="width: 200px; height: 20px"/> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Major Ticks Color |
|
</td> |
|
<td> |
|
<div dojoType='dijit.ColorPalette' onChange="changeMajorTicksColor" palette="3x4"/> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Label placement inside |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.CheckBox' checked onChange="glossyCircular.set('majorTicksLabelPlacement',this.checked?'inside':'outside');glossyCircular2.set('majorTicksLabelPlacement',this.checked?'inside':'outside')" /> |
|
</td> |
|
</tr> |
|
</table> |
|
</td> |
|
<td title="Minor Ticks"> |
|
<table> |
|
<!-- |
|
<tr> |
|
<td> |
|
Minor Ticks offset |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="glossyCircular.setMinorTicksOffset(this.value)" value="130" minimum="0" maximum="200" showButtons="false" style="width: 200px; height: 20px"/> |
|
</td> |
|
</tr> |
|
--> |
|
<tr> |
|
<td> |
|
Minor Ticks interval |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="glossyCircular.set('minorTicksInterval',this.value);glossyCircular2.set('minorTicksInterval',this.value)" value="10" minimum="1" maximum="100" discreteValues="100" showButtons="false" style="width: 200px; height: 20px"/> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Minor Ticks length |
|
</td> |
|
<td> |
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="glossyCircular.setMinorTicksLength(this.value);glossyCircular2.setMinorTicksLength(this.value)" value="5" minimum="1" maximum="15" discreteValues="1" showButtons="false" style="width: 200px; height: 20px"/> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td> |
|
Minor Ticks Color |
|
</td> |
|
<td> |
|
<div dojoType='dijit.ColorPalette' onChange="changeMinorTicksColor" palette="3x4"/> |
|
</td> |
|
</tr> |
|
</table> |
|
</td> |
|
</tr> |
|
</table> |
|
</tr> |
|
</table> |
|
</td> |
|
</tr> |
|
</table> |
|
</body> |
|
</html> |