-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbattery.html
106 lines (91 loc) · 3.43 KB
/
battery.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<DIV id="myDiv"></DIV>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
// Target Div, Title, NUmber of battery charge bars, % charged
batteryCharge("#myDiv", "D3 Battery",5,60);
function batteryCharge( target, title, chargeSegments, chargePct)
{
var bodyRad = 8;
var bodyArc = 10;
var bodyH = 120;
var bodyW = 20; // This is the distance from battery edge to cap edge
var bodyColor = "#999999";
var capRad = 5;
var capArc = 5;
var capH = 10;
var capW = 30;
var textH = 20;
var x = 0;
var y = capArc + capH + bodyArc;
//var chargeSegments = 5;
//var chargePct = 40;
var chargePadX = 8;
var chargePadY = 8;
var chargeRad = 5;
var chargeArc = 1;
var chargeColorOff = "#444444";
var chargeColorOn = "#00B0FF";
var chargeH = ( bodyH + ( 2 * bodyArc ) - ( ( chargeSegments + 1 ) * chargePadY ) - ( chargeSegments * 2 * chargeArc ) ) / chargeSegments;
var chargeW = ( 2 * bodyArc ) + ( 2 * capArc) + ( 2 * bodyW ) + capW - ( 2 * chargePadX ) ;
var chargeX = x + chargePadX;
var chargeYStart = y + bodyH + bodyArc - chargePadY - chargeArc;
var svgW = ( 2 * bodyArc ) + ( 2 * capArc ) + ( 2 * bodyW) + capW;
var svgH = bodyH + ( 2 * bodyArc ) + capH + capArc + textH;
var svg = d3.select(target).append("svg")
.attr("width", svgW)
.attr("height",svgH + 4);
var d = "M" + x + "," + y;
// Top section of body
d += " a" + bodyRad + "," + bodyRad + " 0 0,1 " + bodyArc + "," + -bodyArc;
d += " l" + bodyW + ",0";
// Draw the Cap
d += " l0," + -capH;
d += " a" + capRad + "," + capRad + " 0 0,1 " + capArc + "," + -capArc;
d += " l" + capW + ",0";
d += " a" + capRad + "," + capRad + " 0 0,1 " + capArc + "," + capArc;
d += " l0," + capH;
// Complete top section of body
d += " l" + bodyW + ",0";
d += " a" + bodyRad + "," + bodyRad + " 0 0,1 " + bodyArc + "," + bodyArc;
// Main body
d += " l0," + bodyH;
d += " a" + bodyRad + "," + bodyRad + " 0 0,1 " + -bodyArc + "," + bodyArc;
d += " l" + -( ( bodyW * 2 ) + ( capArc * 2) + capW ) + ",0";
d += " a" + bodyRad + "," + bodyRad + " 0 0,1 " + -bodyArc + "," + -bodyArc;
// Draw the battery
svg.append("path") // attach a path
.style("stroke", bodyColor ) // colour the line
.style("fill", bodyColor) // remove any fill colour
.attr("d",d);
// Now charge the battery
for ( i=1; i <= chargeSegments ; i++ ) {
var chargeY = chargeYStart - ( ( i - 1 ) * ( ( chargeH + ( 2 * chargeArc ) + chargePadY )));
// Start on the bottom edge of the left hand vertical
var d = "M" + chargeX + "," + chargeY;
d += " l0," + -chargeH;
d += " a" + chargeRad + "," + chargeRad + " 0 0,1 " + chargeArc + "," + -chargeArc;
d += " l" + chargeW + ",0";
d += " a" + chargeRad + "," + chargeRad + " 0 0,1 " + chargeArc + "," + chargeArc;
d += " l0," + chargeH;
d += " a" + chargeRad + "," + chargeRad + " 0 0,1 " + -chargeArc + "," + chargeArc;
d += " l" + -chargeW + ",0";
d += " a" + chargeRad + "," + chargeRad + " 0 0,1 " + -chargeArc + "," + -chargeArc;
var chargeColor = chargeColorOn;
var pct = ( i / chargeSegments ) * 100;
if ( pct > chargePct ) {
chargeColor = chargeColorOff;
}
svg.append("path") // attach a path
.style("stroke", chargeColor ) // colour the line
.style("fill", chargeColor ) // remove any fill colour
.attr("d",d);
}
svg.append("text")
.text(title)
.style("font-size",textH)
.style("fill", "#222222")
.style("text-anchor","middle")
.attr("x",svgW / 2)
.attr("y",svgH);
}
</script>