dial_multi_range.html revision 7a44817b47c1678ddaf633b1dbd535bc8a96ea75
0N/A<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
381N/A<html>
0N/A<head>
0N/A<title>Dial: Show Range Cases</title>
0N/A
0N/A<!-- Source File and Seed for YUI3-->
0N/A<link rel="stylesheet" type="text/css" href="/build/cssreset/reset-min.css">
0N/A<link type="text/css" rel="stylesheet" href="/build/cssfonts/fonts-min.css">
0N/A
0N/A<script src="/build/yui/yui.js"></script>
0N/A
0N/A<style>
0N/Abody{
0N/A margin-top:30px;
0N/A}
0N/A.yui3-dial,
0N/A.pics li {
0N/A margin-left:10px;
0N/A}
0N/A.steps{
0N/A margin:20px;
0N/A}
0N/A.angle-lines {
0N/A position:absolute;
0N/A left:100px;
0N/A top:100px;
0N/A border:solid 1px #abc;
0N/A}
0N/A.angle-lines li{
0N/A position:absolute;
0N/A bottom:0px;
0N/A left:-2px;
0N/A width:4px;
0N/A height: 0px;
0N/A border-top:solid 50px #0f0;
16N/A}
0N/A.angle-lines li.max{
0N/A border-top-color:#f00;
0N/A}
0N/A.angle-lines li.range{
0N/A border-top-color: #458042;
0N/A border-top-width: 8px;
0N/A height: 90px;
0N/A left: -11px;
0N/A top: -50px;
0N/A width: 20px;
0N/A opacity:0.5;
0N/A}
0N/A.min-max-label{
0N/A position:absolute;
0N/A top:-16px;
1365N/A left:0px;
0N/A}
0N/A.pics img{
0N/A
0N/A}
0N/A.hd{
0N/A font-size:150%;
0N/A margin: 1.5em;
0N/A}
0N/A.width-container{
0N/A width:1100px;
0N/A /*border:solid 1px #f00;*/
0N/A}
0N/A.pics li{
0N/A position:relative;
0N/A display:inline-block;
0N/A width:200px;
0N/A height:200px;
0N/A /*border:solid 1px #f00;*/
0N/A margin-top:20px;
0N/A}
0N/A.pics li div{
0N/A position:absolute;
0N/A bottom:-74px;
0N/A height:30px;
0N/A}
0N/A.pics .num {
0N/A position:absolute;
0N/A bottom:-24px;
0N/A height:30px;
0N/A font-size:373%;
0N/A width:100%;
0N/A text-align:center;
0N/A}
0N/Aem {font-weight:bold;}
0N/A</style>
0N/A</head>
0N/A
0N/A<body class="yui3-skin-sam">
0N/A<div class="hd">Test on Dials with different value ranges</div>
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A <div class="width-container">
0N/A <span id="dial_container1"></span>
0N/A <span id="dial_container2"></span>
0N/A <span id="dial_container3"></span>
0N/A <span id="dial_container4"></span>
0N/A <span id="dial_container5"></span>
0N/A <ul class="pics">
0N/A <li><img src="assets/images/clock.png" width="200" height="200"/><div>Range is one revolution</div><div class="num">1</div></li>
0N/A <li><img src="assets/images/wrapper.png" width="200" height="200"/><div>Range wraps around the dial one or more times</div><div class="num">2</div></li>
0N/A <li><img src="assets/images/needle.png" width="200" height="200"/><div>Range is < one revolution. The wrap point is in the range</div><div class="num">3</div></li>
0N/A <li><img src="assets/images/gas.png" width="200" height="200"/><div>Range is < one revolution. No wrap point in either the range nor out of range section</div><div class="num">4</div></li>
517N/A <li><img src="assets/images/ship.png" width="200" height="200"/><div>Range is < one revolution. wrap point found in out of range section</div><div class="num">5</div></li>
0N/A </ul>
0N/A </div>
0N/A</body>
1365N/A</html>
1365N/A<script>
1365N/AYUI({lang:'en', filter:'raw'}).use("dial", function(Y) {
0N/A
0N/A
517N/A
0N/A function drawMinMaxLines(dialObj){
0N/A // return;
0N/A var min = dialObj.get('min'),
0N/A max = dialObj.get('max'),
0N/A range = max - min,
517N/A rangeDashNum = range / 5,
0N/A angMax, angMin, thisVal = min, angThis, newUl, newLi, label;
0N/A
0N/A newUl = Y.Node.create('<ul class="angle-lines"></ul>')
0N/A dialObj._ringNode.append(newUl);
0N/A
0N/A for(var i = 1; i < rangeDashNum; i++){
517N/A thisVal = min + ((range / rangeDashNum) * i);
0N/A angThis = dialObj._getAngleFromValue(thisVal);
0N/A newLi = Y.Node.create('<li class="range" style="-moz-transform: rotate(' + angThis + 'deg); -moz-transform-origin: center center;"></li>');
0N/A newUl.append(newLi);
0N/A
0N/A }
0N/A angMin = dialObj._getAngleFromValue(dialObj.get('min'));
1365N/A newLi = Y.Node.create('<li class="min" style="-moz-transform: rotate(' + angMin + 'deg); -moz-transform-origin: bottom center;"></li>');
1365N/A newUl.append(newLi);
1365N/A
1365N/A angMax = dialObj._getAngleFromValue(dialObj.get('max'));
1365N/A newLi = Y.Node.create('<li class="max" style="-moz-transform: rotate(' + angMax + 'deg); -moz-transform-origin: bottom center;"></li>');
1365N/A newUl.append(newLi);
1365N/A
1365N/A
1365N/A label = Y.Node.create('<div class="min-max-label">min: ' + dialObj.get('min') + '<br>max: ' + dialObj.get('max') + '</div>');
1365N/A dialObj._ringNode.append(label);
1365N/A }
1365N/A
1365N/Avar dial_00 = new Y.Dial({
1365N/A min:0,
1365N/A max:100,
1365N/A stepsPerRevolution:100,
1365N/A value: 0,
1365N/A diameter: 200,
1365N/A decimalPlaces:0
1365N/A });
1365N/A dial_00.render("#dial_container1");
1365N/A drawMinMaxLines(dial_00);
1365N/A
1365N/Avar dial_01 = new Y.Dial({
1365N/A min:0,
1365N/A max:200,
1365N/A stepsPerRevolution:100,
1365N/A value: 93,
1365N/A diameter: 200,
1365N/A decimalPlaces:0
1365N/A });
1365N/A dial_01.render("#dial_container2");
1365N/A drawMinMaxLines(dial_01);
1365N/A
1365N/Avar dial_02 = new Y.Dial({
1365N/A min:-40,
1365N/A max:40,
1365N/A// min:60,
1365N/A// max:140,
1365N/A stepsPerRevolution:100,
1365N/A value: 10,
1365N/A// value: 100,
1365N/A diameter: 200,
1365N/A decimalPlaces:0
1365N/A });
1365N/A dial_02.render("#dial_container3");
1365N/A drawMinMaxLines(dial_02);
1365N/A
1365N/Avar dial_03 = new Y.Dial({
1365N/A min:0,
1365N/A max:20,
1365N/A stepsPerRevolution:100,
1365N/A value: 10,
1365N/A diameter: 200,
1365N/A decimalPlaces:0
1365N/A });
1365N/A dial_03.render("#dial_container4");
1365N/A drawMinMaxLines(dial_03);
1365N/A
1365N/A//////////////////////////////////////////////////////////////////
1365N/Avar dial_04 = new Y.Dial({
1365N/A min:5,
1365N/A max:80,
1365N/A stepsPerRevolution:100,
1365N/A value: 60,
1365N/A diameter: 200,
1365N/A decimalPlaces:0
1365N/A });
1365N/A dial_04.render("#dial_container5");
1365N/A drawMinMaxLines(dial_04);
1365N/A//////////////////////////////////////////////////////////////////
1365N/A//var dial_05 = new Y.Dial({
1365N/A// min:-25,
1365N/A// max:75,
1365N/A// stepsPerRevolution:100,
1365N/A// value: 6,
1365N/A// diameter: 200,
1365N/A// decimalPlaces:0
1365N/A// });
1365N/A// dial_05.render("#dial_container5");
1365N/A// drawMinMaxLines(dial_05);
1365N/A/*
1365N/Avar dial_05 = new Y.Dial({
1365N/A min:170,
1365N/A max:200,
1365N/A stepsPerRevolution:100,
1365N/A value: 180,
1365N/A diameter: 200,
1365N/A decimalPlaces:0
1365N/A });
1365N/A dial_05.render("#dial_container");
1365N/A drawMinMaxLines(dial_05);
1365N/A
1365N/Avar dial_06 = new Y.Dial({
1365N/A min:0,
1365N/A max:70,
1365N/A stepsPerRevolution:100,
0N/A value: 20,
0N/A diameter: 200,
0N/A decimalPlaces:0
0N/A });
0N/A dial_06.render("#dial_container");
0N/A drawMinMaxLines(dial_06);
0N/A///////////////////////////////////////////////////////
0N/A*/
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A
0N/A});
0N/A</script>
0N/A