2024-01-07 10:01:59 +11:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>Tesla Charge Control</title>
|
2024-01-07 10:33:32 +11:00
|
|
|
<link id="favicon" rel="icon"
|
|
|
|
|
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⏳</text></svg>">
|
2024-01-07 10:01:59 +11:00
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
const api_url = window.location.protocol + "//" + window.location.hostname + ":" + window.location.port;
|
|
|
|
|
|
2024-01-07 11:21:33 +11:00
|
|
|
refresh_interval = register();
|
|
|
|
|
|
|
|
|
|
refresh();
|
|
|
|
|
document.addEventListener("visibilitychange", () => {
|
|
|
|
|
if (document.hidden) {
|
|
|
|
|
clearInterval(refresh_interval);
|
|
|
|
|
} else {
|
|
|
|
|
refresh();
|
|
|
|
|
refresh_interval = register();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2024-01-07 10:33:32 +11:00
|
|
|
function register() {
|
2024-01-07 11:21:33 +11:00
|
|
|
return setInterval(refresh, 10000);
|
2024-01-07 10:33:32 +11:00
|
|
|
}
|
|
|
|
|
|
2024-01-07 10:01:59 +11:00
|
|
|
function flash() {
|
|
|
|
|
fetch(api_url + "/flash", { method: "POST" })
|
|
|
|
|
.then((response) => console.log(response));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function refresh() {
|
2024-01-07 10:33:32 +11:00
|
|
|
let favicon = document.getElementById("favicon");
|
|
|
|
|
|
|
|
|
|
favicon.setAttribute("href", "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>" + "⏳" + "</text></svg>");
|
2024-01-07 10:01:59 +11:00
|
|
|
fetch(api_url + "/charge-state")
|
|
|
|
|
.then((response) => response.json())
|
|
|
|
|
.then((json) => update_charge_state(json));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function update_charge_state(charge_state) {
|
2024-01-07 10:33:32 +11:00
|
|
|
let favicon = document.getElementById("favicon");
|
|
|
|
|
|
|
|
|
|
favicon.setAttribute("href", "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>" + get_emoji(charge_state) + "</text></svg>");
|
|
|
|
|
|
|
|
|
|
|
2024-01-07 10:01:59 +11:00
|
|
|
var info_div = document.getElementById("info");
|
|
|
|
|
while (info_div.childElementCount > 0) { info_div.removeChild(info_div.firstChild) }
|
2024-01-07 10:33:32 +11:00
|
|
|
|
|
|
|
|
var arr = ["Battery " + charge_state.battery_level + "%", "Range: " + (charge_state.battery_range * 1.60934).toFixed(1) + "km", "Charging at " + charge_state.charge_rate.toFixed(1) + " amps", "Charging until battery at " + charge_state.charge_limit_soc + "%",
|
|
|
|
|
];
|
2024-01-07 10:01:59 +11:00
|
|
|
for (line in arr) {
|
|
|
|
|
el = document.createElement('p');
|
|
|
|
|
el.appendChild(document.createTextNode(arr[line]));
|
|
|
|
|
info_div.appendChild(el)
|
|
|
|
|
}
|
2024-01-07 10:33:32 +11:00
|
|
|
|
|
|
|
|
|
|
|
|
|
el = document.createElement('p');
|
|
|
|
|
el.appendChild(document.createTextNode("Full charge state:"));
|
|
|
|
|
|
|
|
|
|
state_json = document.createElement('pre');
|
|
|
|
|
state_json.appendChild(document.createTextNode(JSON.stringify(charge_state, null, '\t')));
|
|
|
|
|
el.appendChild(state_json);
|
|
|
|
|
info_div.appendChild(el);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function get_emoji(charge_state) {
|
|
|
|
|
if (charge_state.charge_rate > 0) {
|
|
|
|
|
return "🔌";
|
|
|
|
|
} else if (charge_state.battery_level < 60) {
|
|
|
|
|
return "🪫"
|
|
|
|
|
} else return "🔋";
|
2024-01-07 10:01:59 +11:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
2024-01-07 11:21:33 +11:00
|
|
|
<body></body>
|
2024-01-07 10:01:59 +11:00
|
|
|
<button onclick="flash()">flash</button>
|
2024-01-07 10:33:32 +11:00
|
|
|
<div id="info"></div>
|
2024-01-07 10:01:59 +11:00
|
|
|
|
|
|
|
|
</html>
|
