dial_multi_range.html revision 7a44817b47c1678ddaf633b1dbd535bc8a96ea75
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff<!-- Source File and Seed for YUI3-->
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff<link rel="stylesheet" type="text/css" href="/build/cssreset/reset-min.css">
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff<link type="text/css" rel="stylesheet" href="/build/cssfonts/fonts-min.css">
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff margin-top:30px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff margin-left:10px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff margin:20px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff.angle-lines {
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff position:absolute;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff border:solid 1px #abc;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff.angle-lines li{
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff position:absolute;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff height: 0px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff border-top:solid 50px #0f0;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff border-top-color:#f00;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff border-top-color: #458042;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff border-top-width: 8px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff height: 90px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff left: -11px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff width: 20px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff opacity:0.5;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff.min-max-label{
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff position:absolute;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff font-size:150%;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff margin: 1.5em;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff.width-container{
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff width:1100px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff /*border:solid 1px #f00;*/
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff position:relative;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff display:inline-block;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff width:200px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff height:200px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff /*border:solid 1px #f00;*/
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff margin-top:20px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff.pics li div{
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff position:absolute;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff bottom:-74px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff height:30px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff position:absolute;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff bottom:-24px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff height:30px;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff font-size:373%;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff text-align:center;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniffem {font-weight:bold;}
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff<div class="hd">Test on Dials with different value ranges</div>
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff <li><img src="assets/images/clock.png" width="200" height="200"/><div>Range is one revolution</div><div class="num">1</div></li>
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff <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>
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff <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>
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff <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>
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff <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>
62280f8683de7078a1eb123153c33822cd3bca37Jeff ConniffYUI({lang:'en', filter:'raw'}).use("dial", function(Y) {
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff function drawMinMaxLines(dialObj){
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff var min = dialObj.get('min'),
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff range = max - min,
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff rangeDashNum = range / 5,
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff angMax, angMin, thisVal = min, angThis, newUl, newLi, label;
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff newUl = Y.Node.create('<ul class="angle-lines"></ul>')
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff newLi = Y.Node.create('<li class="range" style="-moz-transform: rotate(' + angThis + 'deg); -moz-transform-origin: center center;"></li>');
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff angMin = dialObj._getAngleFromValue(dialObj.get('min'));
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff newLi = Y.Node.create('<li class="min" style="-moz-transform: rotate(' + angMin + 'deg); -moz-transform-origin: bottom center;"></li>');
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff angMax = dialObj._getAngleFromValue(dialObj.get('max'));
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff newLi = Y.Node.create('<li class="max" style="-moz-transform: rotate(' + angMax + 'deg); -moz-transform-origin: bottom center;"></li>');
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff label = Y.Node.create('<div class="min-max-label">min: ' + dialObj.get('min') + '<br>max: ' + dialObj.get('max') + '</div>');
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff//////////////////////////////////////////////////////////////////
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff//////////////////////////////////////////////////////////////////
62280f8683de7078a1eb123153c33822cd3bca37Jeff Conniff///////////////////////////////////////////////////////