x-bar {
- display: block;
+ display: none;
clear: both;
width: 100%;
padding: 0.2em;
margin: 0.1em;
border: none;
font-size: 150%;
- visibility: hidden;
}
.pause {
background-color:#fd0;
</x-boxleft>
</x-boxleft>
-<x-bar class="pause" id="pause"> GAME PAUSED </x-bar>
+<x-bar class="pause" id="pausebar">Paused</x-bar>
<x-bar class="error" id="errbar"></x-bar>
</x-page>
function loadDoc() {
xhttp.onreadystatechange = function() {
+ var speed = document.getElementById("speed");
+ var ccgtrl = document.getElementById("cctrl");
+ var gear = document.getElementById("gear");
+ var rpm = document.getElementById("rpm");
+ var odometer = document.getElementById("odometer");
+ var fuel = document.getElementById("fuel");
+ var fuel_range = document.getElementById("fuel_range");
+ var fuel_avg = document.getElementById("fuel_avg");
+ var nav_dist = document.getElementById("nav_dist");
+ var nav_eta = document.getElementById("nav_eta");
+ var nav_slimit = document.getElementById("nav_slimit");
+ var nav_slimitsign = document.getElementById("nav_slimitsign")
+
var errbar = document.getElementById("errbar");
+ var pausebar = document.getElementById("pausebar");
+
if (this.readyState == 4 && this.status == 200) {
- var e;
var tele = JSON.parse(this.responseText);
- errbar.style.visibility = "hidden";
-
- e = document.getElementById("speed");
- e.innerHTML = Math.round(tele.speed * 3.6);
+ speed.innerHTML = Math.round(tele.speed * 3.6);
if ( tele.nav_slimit > 0 && tele.speed > tele.nav_slimit * 1.075 ) {
- e.classList.remove("warn1");
- e.classList.add("warn2");
+ speed.classList.remove("warn1");
+ speed.classList.add("warn2");
}
else if ( tele.nav_slimit > 0 && tele.speed > tele.nav_slimit * 1.005 ) {
- e.classList.remove("warn2");
- e.classList.add("warn1");
+ speed.classList.remove("warn2");
+ speed.classList.add("warn1");
}
else {
- e.classList.remove("warn1");
- e.classList.remove("warn2");
+ speed.classList.remove("warn1");
+ speed.classList.remove("warn2");
}
- document.getElementById("cctrl").innerHTML = Math.round(tele.cctrl * 3.6);
- e = document.getElementById("gear");
- e.innerHTML = dgear(tele.gear_disp, tele.shifter);
+ cctrl.innerHTML = Math.round(tele.cctrl * 3.6);
+
+ gear.innerHTML = dgear(tele.gear_disp, tele.shifter);
if ( tele.clutch_eff > 0 )
- e.classList.add("hilite");
+ gear.classList.add("hilite");
else
- e.classList.remove("hilite");
+ gear.classList.remove("hilite");
- document.getElementById("rpm").innerHTML = Math.round(tele.rpm);
- document.getElementById("odometer").innerHTML = Math.round(tele.odometer);
+ rpm.innerHTML = Math.round(tele.rpm);
+ odometer.innerHTML = Math.round(tele.odometer);
- e = document.getElementById("fuel");
- e.innerHTML = Math.round(tele.fuel);
+ fuel.innerHTML = Math.round(tele.fuel);
if ( tele.fuel_warn )
- e.classList.add("warn1");
+ fuel.classList.add("warn1");
else
- e.classList.remove("warn1");
- document.getElementById("fuel_range").innerHTML = Math.round(tele.fuel_range);
- document.getElementById("fuel_avg").innerHTML = Math.round(tele.fuel_avg * 1000) / 10;
-
- document.getElementById("nav_dist").innerHTML = Math.round(tele.nav_dist / 1000);
- document.getElementById("nav_eta").innerHTML = s2hm(tele.nav_eta);
- if (tele.nav_slimit > 0 ) {
- document.getElementById("nav_slimit").innerHTML = Math.round(tele.nav_slimit * 3.6);
- document.getElementById("nav_slimitsign").style.visibility = "visible";
+ fuel.classList.remove("warn1");
+
+ fuel_range.innerHTML = Math.round(tele.fuel_range);
+
+ fuel_avg.innerHTML = Math.round(tele.fuel_avg * 1000) / 10;
+
+ nav_dist.innerHTML = Math.round(tele.nav_dist / 1000);
+
+ nav_eta.innerHTML = s2hm(tele.nav_eta);
+
+ if ( tele.nav_slimit > 0 ) {
+ nav_slimit.innerHTML = Math.round(tele.nav_slimit * 3.6);
+ nav_slimitsign.style.visibility = "visible";
}
else
- document.getElementById("nav_slimitsign").style.visibility = "hidden";
+ nav_slimitsign.style.visibility = "hidden";
- document.getElementById("pause").style.visibility = tele.paused ? "visible" : "hidden";
+ pausebar.style.display = tele.paused ? "block" : "none";
+ errbar.style.display = "none";
}
else if (this.readyState == 4) {
+ pausebar.style.display = "none";
+ errbar.style.display = "block";
if ( this.status )
errbar.innerHTML = "Status: " + this.status + "<br>" + this.responseText;
else
- errbar.innerHTML = "No response from server.";
- errbar.style.visibility = "visible";
+ errbar.innerHTML = "Connection error";
}
};
xhttp.open("GET", "/json", true);