1 /** 2 * Constructs a new TrafficLight. 3 * @class Represents a traffic light widget which creates a graphical traffic light in WSO2Vis. 4 * @param {canvas} canvas the name of the HTML element (ex: div) where the graphical traffic light should be drawn. 5 * @constructor 6 */ 7 wso2vis.ctrls.TrafficLight = function(canvas) { 8 this.attr = []; 9 10 this.divEl(canvas); 11 12 /* @private */ 13 this.lights = []; 14 this.back = []; 15 16 this.stat = []; 17 this.stat["top"] = false; 18 this.stat["middle"] = false; 19 this.stat["bottom"] = false; 20 21 this.color = []; 22 this.color["top_on"] = "r#f00-#f00-#89070D"; 23 this.color["top_off"] = "r#900-#560101-#350305"; 24 this.color["middle_on"] = "r#FFD52E-#FFEB14-#9E4500"; 25 this.color["middle_off"] = "r#BD5F00-#6B2F00-#473A00"; 26 this.color["bottom_on"] = "r#0f0-#0e0-#07890D"; 27 this.color["bottom_off"] = "r#090-#015601-#033505"; 28 29 this.radius(35) 30 .xspace(15) 31 .yspace(20) 32 .gap(10) 33 .paper(null); 34 35 this.dia = this.radius()*2; 36 this.backh = (this.dia*3)+(this.gap()*2)+(this.yspace()*2); 37 this.backw = this.dia+(this.xspace()*2); 38 39 this.startX = this.radius() + this.xspace(); 40 this.startY = this.radius() + this.yspace(); 41 }; 42 43 wso2vis.ctrls.TrafficLight.prototype.property = function(name) { 44 /* 45 * Define the setter-getter globally 46 */ 47 wso2vis.ctrls.TrafficLight.prototype[name] = function(v) { 48 if (arguments.length) { 49 this.attr[name] = v; 50 return this; 51 } 52 return this.attr[name]; 53 }; 54 55 return this; 56 }; 57 58 wso2vis.ctrls.TrafficLight.prototype 59 .property("title") 60 .property("divEl") 61 .property("radius") 62 .property("gap") 63 .property("paper") 64 .property("xspace") 65 .property("yspace"); 66 67 wso2vis.ctrls.TrafficLight.prototype.load = function (p) { 68 69 if( (p != null) && (p != undefined) && (p != "") ) { 70 this.paper(p); 71 } 72 else { 73 this.paper(Raphael(this.divEl())); 74 } 75 76 /* Init */ 77 this.paper().clear(); 78 this.back[0] = this.paper().rect(0, 0, this.backw, this.backh, 8).attr({"stroke-width": 1, stroke: "#000", fill: "#ccc"}); 79 this.back[1] = this.paper().rect(5, 5, this.backw-10, this.backh-10, 8).attr({stroke: "none", fill: "#000"}); 80 81 //Lights 82 this.lights["top"] = this.paper().circle(this.startX, this.startY, this.radius()).attr({fill: this.color["top_off"], stroke: "#333"}); 83 this.lights["middle"] = this.paper().circle(this.startX, (this.startY + this.dia + this.gap()), this.radius()).attr({fill: this.color["middle_off"], stroke: "#333"}); 84 this.lights["bottom"] = this.paper().circle(this.startX, this.startY + (this.dia*2) + (this.gap()*2), this.radius()).attr({fill: this.color["bottom_off"], stroke: "#333"}); 85 86 }; 87 88 wso2vis.ctrls.TrafficLight.prototype.on = function (light) { 89 this.lights[light].animate({fill: this.color[light+"_on"]}, 100); 90 this.stat[light] = true; 91 }; 92 93 wso2vis.ctrls.TrafficLight.prototype.off = function (light) { 94 this.lights[light].animate({fill: this.color[light+"_off"]}, 100); 95 this.stat[light] = false; 96 }; 97 98 wso2vis.ctrls.TrafficLight.prototype.toggle = function (light) { 99 if( this.stat[light] ) { 100 this.off(light); 101 } 102 else { 103 this.on(light); 104 } 105 }; 106 107 wso2vis.ctrls.TrafficLight.prototype.horizontal = function () { 108 /** 109 * Horizontal Layout 110 **/ 111 this.back[0].attr({width: this.backh, height: this.backw}); 112 this.back[1].attr({width: this.backh-10, height: this.backw-10}); 113 114 this.lights["top"].attr({cx: this.startY, cy: this.startX}); 115 this.lights["middle"].attr({cx: this.startY + this.dia + this.gap(), cy: this.startX}); 116 this.lights["bottom"].attr({cx: this.startY + (this.dia*2) + (this.gap()*2), cy: this.startX}); 117 }; 118 119 wso2vis.ctrls.TrafficLight.prototype.vertical = function () { 120 /** 121 * Vertical Layout 122 **/ 123 this.back[0].attr({width: this.backw, height: this.backh}); 124 this.back[1].attr({width: this.backw-10, height: this.backh-10}); 125 126 this.lights["top"].attr({cx: this.startX, cy: this.startY}); 127 this.lights["middle"].attr({cx: this.startX, cy: this.startY + this.dia + this.gap()}); 128 this.lights["bottom"].attr({cx: this.startX, cy: this.startY + (this.dia*2) + (this.gap()*2)}); 129 }; 130 131