--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<style>
+html, body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ font-family: sans;
+ background-color: black;
+ color: white;
+}
+
+x-boxleft, x-boxright {
+ display: block;
+ padding: 0.2em;
+ margin: 0.1em;
+ border: none;
+}
+x-boxleft { float:left; }
+x-boxright { float:right; }
+.clear { clear:both; }
+
+.cont {
+ border: solid 2px grey;
+ min-width:13em;
+ /*
+ width:15em;
+ min-width:15em;
+ height:22em;
+ min-height:22em;
+ */
+}
+
+.aright { text-align: right; }
+.aleft { text-align: left; }
+.ajust { text-align: justify; }
+
+.big { font-size: 8em; }
+.medium { font-size: 4em; }
+.small { font-size: 2em; }
+.tiny { font-size: 1.2em; }
+
+.warn1 { color:#fd0; }
+.warn2 { color:#f20; }
+.setval { color:#0af; }
+
+</style>
+</head>
+<body>
+
+<x-boxleft id="speedo" class="cont">
+ <x-boxright class="clear"><span class="big" id="speed">--</span><span class="tiny"> km/h</span></x-boxright>
+ <x-boxright class="clear"><span class="medium setval" id="cctrl">-</span><span class="tiny"> km/h</span></x-boxright>
+ <x-boxleft class="clear"><span class="small setval" id="gear">x</span><span class="tiny"> </span></x-boxleft>
+ <x-boxright><span class="small" id="rpm">0</span><span class="tiny"> rpm</span></x-boxright>
+ <x-boxright class="clear"><span class="small" id="odometer">-</span><span class="tiny"> km</span></x-boxright>
+</x-boxleft>
+
+<x-boxleft id="range" class="cont">
+ <x-boxright class="clear"><span class="medium" id="fuel">-</span><span class="tiny"> l</span></x-boxright>
+ <x-boxright class="clear"><span class="medium" id="fuel_range">-</span><span class="tiny"> km</span></x-boxright>
+ <x-boxright class="clear"><span class="small" id="fuel_avg">-</span><span class="tiny"> l/100km</span></x-boxright>
+</x-boxleft>
+
+<x-boxleft id="odo" class="cont">
+ <x-boxright class="clear"><span class="small" id="nav_dist">-</span><span class="tiny"> km</span></x-boxright>
+ <x-boxright class="clear"><span class="small" id="nav_eta">-</span><span class="tiny"> eta</span></x-boxright>
+ <x-boxright class="clear"><span class="small" id="nav_slimit">-</span><span class="tiny"> km/h</span></x-boxright>
+</x-boxleft>
+
+<script>
+
+function dgear(x) {
+ if ( x > 0 ) return 'A' + x;
+ if ( x < 0 ) return 'R' + Math.abs(x);
+ return 'N';
+}
+
+function pad2( x ) {
+ return x > 9 ? x : '0' + x;
+}
+
+function s2hms(s) {
+ return pad2( Math.floor(s / 3600) ) + ':'
+ + pad2( Math.floor(s % 3600 / 60) ) + ':'
+ + pad2( Math.floor(s % 60 ) );
+}
+
+function s2hm(s) {
+ return pad2( Math.floor(s / 3600) ) + ':'
+ + pad2( Math.floor(s % 3600 / 60) );
+}
+
+function loadDoc() {
+ xhttp.onreadystatechange = function() {
+ if (this.readyState == 4 && this.status == 200) {
+ var e;
+ var tele = JSON.parse(this.responseText);
+
+ e = document.getElementById("speed");
+ e.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");
+ }
+ else if ( tele.nav_slimit > 0 && tele.speed > tele.nav_slimit * 1.005 ) {
+ e.classList.remove("warn2");
+ e.classList.add("warn1");
+ }
+ else {
+ e.classList.remove("warn1");
+ e.classList.remove("warn2");
+ }
+ document.getElementById("cctrl").innerHTML = Math.round(tele.cctrl * 3.6);
+ document.getElementById("gear").innerHTML = dgear(tele.gear_disp);
+ document.getElementById("rpm").innerHTML = Math.round(tele.rpm);
+ document.getElementById("odometer").innerHTML = Math.round(tele.odometer);
+
+ e = document.getElementById("fuel");
+ e.innerHTML = Math.round(tele.fuel);
+ if ( tele.fuel_warn )
+ e.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);
+ document.getElementById("nav_slimit").innerHTML = Math.round(tele.nav_slimit * 3.6);
+
+ }
+ };
+ xhttp.open("GET", "/json", true);
+ xhttp.send();
+}
+var xhttp = new XMLHttpRequest();
+loadDoc();
+window.setInterval(loadDoc, 500);
+</script>
+
+</body>
+</html>
projects / ets2_tele.git / commitdiff