teslams
Version:
Utilities for the Tesla Model S
295 lines (286 loc) • 9.49 kB
HTML
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tesla Energy Chart</title>
<script language="javascript" type="text/javascript" src="jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.time.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.threshold.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script language="javascript" type="text/javascript" src="lib.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="shared.css" />
<script language="javascript" type="text/javascript" src="url.min.js"></script>
<script type="text/javascript">
$(function() {
var lang, system;
var d1, d2, d3, d4, d5, d6, d7, data, options, eschart, socData, socOptions, socchart, chargechart;
var previousPointVA, previousPointSOC;
parseDates($.url("?from"), $.url("?to"));
system = MAGIC_DISPLAY_SYSTEM;
if ($.url("?metric") === "true")
system = "metric";
else if ($.url("?metric") === "false")
system = "imperial";
if ($.url("?lang"))
lang = $.url("?lang").toLowerCase();
else
lang = "en";
var params = "&lang=" + lang;
if (system === "metric")
params += "&metric=true";
$("title").html(conv("label", document.title, lang));
$('#startTimeLabel').html(conv("label", "Start time", lang));
$('#endTimeLabel').html(conv("label", "End time", lang));
$("div#container h2").html(conv("label", $("div#container h2").text(), lang));
for (var i = 1; i <= 6; i++)
$("span#"+i).html(conv("label", $("span#"+i).text(), lang));
$("span#7").html(conv(system, "speed_long", lang));
$("#frompicker").val(datepickers.fromQ);
$("#topicker").val(datepickers.toQ);
datepickers('energy', params);
$("#maplink").attr("href", "map?from=" + datepickers.fromQ + "&to=" + datepickers.toQ + params);
$("#statslink").attr("href", "stats?from=" + datepickers.fromQ + "&to=" + datepickers.toQ + params);
$("#energylink").attr("href", "energy?from=" + datepickers.fromQ + "&to=" + datepickers.toQ + params);
$("#triplink").attr("href", "trip");
d1 = [MAGIC_ENERGY];
d2 = [MAGIC_SPEED];
var min_spd = conv(system, "speed", "conversion")(MAGIC_MIN_SPD);
var max_spd = conv(system, "speed", "conversion")(MAGIC_MAX_SPD);
if (system === "metric") {
for (var i = 0; i < d2.length; i++)
d2[i][1] *= 1.609;
}
data = [{
data: d1,
bars: { show: true,
barWidth: 250,
fill: 0.9 },
label: conv("label", "energy", lang) + " (kW)",
color: "#D07F27",
threshold: { below: 0, color: "#008000" }
},{
data: d2,
lines: { show: true },
label: conv("label", "speed", lang) + " (" + conv(system, "speed", lang) + ")",
color: "rgba(10,159,217,0.4)",
yaxis: 2
}];
options = {
yaxes: [{
min: MAGIC_MIN_ENG,
max: MAGIC_MAX_ENG,
font: {color: "#D07F27"},
ticks: function (axis) {
var ticks = [], y;
var bottomy = Math.floor(axis.min / 10) * 10;
for (y = bottomy; y < 0; y += 10)
ticks.push(y);
for (y = 50; y < axis.max; y += 50)
ticks.push(y);
return ticks;
}},
{
min: min_spd,
max: max_spd,
position: 'right',
alignTicksWithAxis: 1,
font: { color: "#0A9FD9"},
tickFormatter: function (val, axis) {
if (val >= 0)
return val.toFixed(0);
else
return "";
}},{
show: false,
position: 'right',
labelWidth: 20,
reserveSpace: true
}],
xaxes: [{
mode: "time",
timezone: "browser"
}]
};
eschart = $("#eschart");
$.plot(eschart, data, options);
// now the volt/amp chart
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
d5 = [MAGIC_AMP];
d6 = [MAGIC_VOLT];
d7 = [MAGIC_POWER];
previousPointVA = null;
chargechart = $("#chargechart");
chargechart.bind("plothover", function (event, pos, item) {
var x, whenS, v, valueS, mins;
if (item) {
if (previousPointVA != item.dataIndex) {
previousPointVA = item.dataIndex;
$("#tooltip").remove();
x = item.datapoint[0];
x = new Date(x);
mins = '0' + x.getMinutes();
if (lang === "de")
whenS = x.getDate() + "." + (x.getMonth()+1) + '. ' + x.getHours() + ':' + mins.substr(mins.length - 2);
else
whenS = (x.getMonth()+1) + '/' + x.getDate() + ' ' + x.getHours() + ':' + mins.substr(mins.length - 2);
v = d6[item.dataIndex][1], a = d5[item.dataIndex][1], kw = d7[item.dataIndex][1];
valueS = v + 'V / ' + a + 'A ~ ' + kw.toFixed(1) + 'kW';
showTooltip(item.pageX, item.pageY, valueS + " " + conv("label", "at", lang) + " " + whenS);
}
} else {
$("#tooltip").remove();
previousPointVA = null;
}
});
data = [{
data: d5,
label: conv("label", "current", lang) + " (A)",
color: "#808080",
yaxis: 1
},{
data: d6,
label: conv("label", "voltage", lang) + " (V)",
color: "#D07F27",
yaxis: 2
},{
data: d7,
label: conv("label", "power", lang) + " (kW)",
color: "#F02F27",
yaxis: 3
}];
options = {
grid: { hoverable: true },
yaxes: [{
font: { color: "#808080" }
},{
font: { color: "#D07F27" },
position: 'right'
},{
font: { color: "#F02F27" },
labelWidth: 20,
position: 'right'
}],
xaxes: [{
mode: "time",
timezone: "browser"
}]
};
$.plot(chargechart, data, options);
// finally the SOC / range chart
function getRange(ts) {
for (var i = 0; i < d4.length; i++)
if (d4[i][0] >= ts)
return d4[i][1];
return d4[d4.length - 1][1];
}
function getSOC(ts) {
for (var i = 0; i < d3.length; i++)
if (d3[i] && d3[i][0] >= ts)
return d3[i][1];
return d3[d3.length - 1][1];
}
socchart = $("#socchart");
previousPointSOC = null;
d3 = [MAGIC_SOC];
d4 = [MAGIC_RANGE];
if (system === "metric") {
for (var i = 0; i < d4.length; i++)
d4[i][1] *= 1.609;
}
socchart.bind("plothover", function (event, pos, item) {
var x, whenS, whm, valueS, soc, range, mins;
if (item) {
if (previousPointSOC != item.dataIndex) {
previousPointSOC = item.dataIndex;
$("#tooltip").remove();
x = new Date(+item.datapoint[0]);
soc = getSOC(item.datapoint[0]);
range = getRange(item.datapoint[0]);
mins = '0' + x.getMinutes();
if (lang === "de")
whenS = x.getDate() + "." + (x.getMonth()+1) + '. ' + x.getHours() + ':' + mins.substr(mins.length - 2);
else
whenS = (x.getMonth()+1) + '/' + x.getDate() + ' ' + x.getHours() + ':' + mins.substr(mins.length - 2);
whm = soc * MAGIC_CAPACITY / range * 10;
valueS = soc + '% / ' + range.toFixed(1) + conv(system, "distance", lang) + " (~" + whm.toFixed(1) +
conv(system, "energy_per_distance", lang) + ")";
showTooltip(item.pageX, item.pageY, valueS + " " + conv("label", "at", lang) + " " + whenS);
}
} else {
$("#tooltip").remove();
previousPointSOC = null;
}
});
socData = [{
data: d3,
lines: { show: true,
fill: 0.9 },
label: conv("label", "SOC", lang) + " (%)",
color: "#008000",
fillColor: { colors: [{ opacity: 0.8 }, { opacity: 0.1 }] },
threshold: [{below: 101, color: "#c02020"},{below: 91, color: "#008000"}, {below: 10, color: "#FF2020"}]
},{
data: d4,
lines: { show: true },
label: conv("label", "rated range", lang) + " (" + conv(system, "distance", lang)+ ")",
color: "#2020C0",
yaxis: 2
}];
socOptions = {
grid: { hoverable: true },
yaxes: [{
max: 119,
font: { color: "#008000" }
},{
position: 'right',
font: { color: "#2020C0" },
min: 0
},{
show: false,
position: 'right',
labelWidth: 20,
reserveSpace: true
}],
xaxis: { mode: "time",
timezone: "browser"}
};
$.plot(socchart, socData, socOptions);
});
</script>
</head>
<body>
MAGIC_NAV
<div id="container">
<h2>Tesla Energy Chart</h2>
<div id="dates">
<label id="startTimeLabel">Start time</label><input id="frompicker" type="text">
<label id="endTimeLabel">End time</label><input id="topicker" type="text">
</div>
<div id="content">
<center><div class="container">
<div id="eschart" style="height:450px; width:90%"></div>
<div id="explanation" style="width:70%"><span id="1">Energy and speed plot, starting</span> MAGIC_START.
<span id="2">Total energy expended</span> MAGIC_CUMUL_E, <span id="3">total energy regen</span> MAGIC_CUMUL_R.</div>
<div id="chargechart" style="height:450px; width:90%;"></div>
<div id="explanation2" style="width:70%"><span id="6">Voltage and current while charging.</span></div>
<div id="maxima" style="width:70%"><span id="4">Maximum charge power:</span> MAGIC_MAX_KW kW (MAGIC_MAX_VOLT V / MAGIC_MAX_AMP A or ~ MAGIC_MAX_MPH <span id="7">miles/hour</span>)</div>
<div id="socchart" style="height:300px; width:90%"></div>
<div id="explanation3" style="width:70%"><span id="5">SOC and rated range</span></div>
</div><center>
</div>
</div>
</body>
</html>