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.
199 lines
7.6 KiB
199 lines
7.6 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>Dojo Gauge Test</title> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/themes/claro/claro.css"; |
|
@import "style.css"; |
|
</style> |
|
<script type="text/javascript"> |
|
var djConfig = { |
|
parseOnLoad: true, |
|
async: true |
|
} |
|
</script> |
|
<script type="text/javascript" src="../../../dojo/dojo.js"> |
|
</script> |
|
<script type="text/javascript"> |
|
require(["dojo/on", "dojo/_base/kernel", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojox/dgauges/components/default/CircularLinearGauge", "dojox/dgauges/components/default/SemiCircularLinearGauge", "dojox/dgauges/CircularRangeIndicator", "dijit/form/Button"]); |
|
</script> |
|
</head> |
|
<body class="claro"> |
|
<div data-dojo-type="dijit.layout.BorderContainer" gutters="true" liveSplitters="true" id="borderContainer"> |
|
<div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa;" splitter="true" region="center"> |
|
<div id="g1" data-dojo-type="dojox.dgauges.components.default.CircularLinearGauge"> |
|
</div> |
|
</div> |
|
<div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; width:800px" splitter="true" region="right"> |
|
<div id="g2" data-dojo-type="dojox.dgauges.components.default.SemiCircularLinearGauge"> |
|
</div> |
|
</div> |
|
<div data-dojo-type="dijit.layout.ContentPane" splitter="true" region="top" style="height:30;"> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Set 15 |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
registry.byId("g1").set("value", 15); |
|
registry.byId("g2").set("value", 15); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Alert current values |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
alert(registry.byId("g1").get("value") + " and " + registry.byId("g2").get("value")); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Change Scale Props. |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
var gauge = registry.byId("g1"); |
|
gauge.getElement("scale").set("startAngle", 0); |
|
gauge.getElement("scale").set("endAngle", 180); |
|
gauge.getElement("scale").set("orientation", "cclockwise"); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Change tick stroke |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
var gauge = registry.byId("g1"); |
|
gauge.getElement("scale").set("tickStroke", {color:"#999999", width:1}); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Change Scaler Props. |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
var gauge = registry.byId("g1"); |
|
gauge.getElement("scale").scaler.set("minorTicksEnabled", false); |
|
gauge.getElement("scale").scaler.set("minimum", 50); |
|
gauge.getElement("scale").scaler.set("maximum", 250); |
|
gauge.getElement("scale").scaler.set("majorTickInterval", 20); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Add range indicator |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
var gauge = registry.byId("g1"); |
|
var ri = new dojox.dgauges.CircularRangeIndicator(); |
|
ri.set("start", 60); |
|
ri.set("value", 100); |
|
ri.set("radius", 60); |
|
gauge.getElement("scale").addIndicator("ri", ri, false); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Change needle |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
var gauge = registry.byId("g1"); |
|
gauge.getElement("scale").getIndicator("indicator").set("indicatorShapeFunc", |
|
function(group, indicator){ |
|
return group.createPolyline([0, -5, indicator.scale.radius - 2, 0, 0, 5, 0, -5]).setStroke({ |
|
color: "#333333", |
|
width: 0.25}).setFill([0, 0, 220]); |
|
}); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Remove needle |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
var gauge = registry.byId("g1"); |
|
gauge.getElement("scale").removeIndicator("indicator"); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Listen for events |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
var gauge = registry.byId("g1"); |
|
gauge.on("startEditing", function(event){console.log(event.indicator.value);}); |
|
gauge.on("endEditing", function(event){console.log(event.indicator.value);}); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
No interaction |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
var gauge = registry.byId("g1"); |
|
gauge.getElement("scale").getIndicator("indicator").set("interactionMode", "none"); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Indicator interaction |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
var gauge = registry.byId("g1"); |
|
gauge.getElement("scale").getIndicator("indicator").set("interactionMode", "mouse"); |
|
gauge.getElement("scale").getIndicator("indicator").set("interactionArea", "indicator"); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Gauge interaction |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
var gauge = registry.byId("g1"); |
|
gauge.getElement("scale").getIndicator("indicator").set("interactionMode", "mouse"); |
|
gauge.getElement("scale").getIndicator("indicator").set("interactionArea", "gauge"); |
|
} |
|
); |
|
</script> |
|
</button> |
|
<button data-dojo-type="dijit.form.Button" type="button"> |
|
Change background colors |
|
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt"> |
|
require(["dijit/registry"], |
|
function(registry) { |
|
var gauge = registry.byId("g1"); |
|
gauge.set("borderColor", "#FF7800"); |
|
gauge.set("fillColor", "#FFFF00"); |
|
gauge = registry.byId("g2"); |
|
gauge.set("borderColor", "#FF7800"); |
|
gauge.set("fillColor", "#FFFF00"); |
|
} |
|
); |
|
</script> |
|
</button> |
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|