Skip to content

Instantly share code, notes, and snippets.

@neilmiddleton

neilmiddleton/P1_dashboard.html

Last active June 18, 2019 19:35
Show Gist options
  • Save neilmiddleton/fde997d0130af68367559ea274487f86 to your computer and use it in GitHub Desktop.
Save neilmiddleton/fde997d0130af68367559ea274487f86 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
P1_dashboard.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JRT Dashboard</title>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<meta name = "viewport" content = "width = device-width, shrink-to-fit=no, initial-scale = 1, maximum-scale=1, user-scalable=no, minimal-ui">
<!--<meta name="viewport" content="width=device-width, minimal-ui">-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="icon" type="image/png" href="timing.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!--<script type="text/javascript">
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
</script>-->
<link rel="stylesheet" type="text/css" href="css/dashboard.css">
<script>
if( !/Android|webOS|iPhone|iPad/i.test(navigator.userAgent) ) {
document.writeln('<style type="text/css"> .ligneH:hover { background-color:rgba(136,136,136,0.5); z-index:5;} </style>')
}
</script>
<script src="js/couleurs.js"></script>
<script src="js/local%20ip.js"></script>
<script src="js/internet%20ip.js"></script>
<script src="js/ws_ports.js"></script>
<script src="js/jquery-2.1.4.js"></script>
<!-- Pour rendre compatible le code avec electron -->
<script>
try {
$ = jQuery = module.exports;
// If you want module.exports to be empty, uncomment:
// module.exports = {};
} catch(e) {}
</script>
<script src="js/version.js"></script>
<!--<script src="http://joel-real-timing.com/js/version.js"></script>-->
<script>w = []; // Ne pas toucher ! - Don't touch !</script>
<script src="js/var_default_options.js"></script>
<script src="js/config.js"></script>
<!--<script src="img/logo_pct.txt"></script>-->
<script src="js/var_init_dashboard.js"></script>
<script src="config/dashboard_config.txt"></script>
<script src="config/dashboard_advanced.txt"></script>
<script src="js/switch_disp.js"></script>
<script src="js/init_websocket_dashboard.js"></script>
<script src="js/clubid.js" charset="UTF-8"></script>
<script src="js/Reformat.js"></script>
<script src="js/lic_class_color.js"></script>
<script src="js/func_options.js"></script>
<script src="js/animations.js"></script>
<script src="js/deltas_and_gapcolor_dashboard.js"></script>
<script src="js/responsive_dashboard.js"></script>
<script src="js/update_dashboard.js"></script>
<script src="js/dashboard.js"></script>
<!--<script src="js/ShowHideData.js"></script>-->
<script>
function update_datas(text) {
if (text != -1) {
text_header_= text.split("?");
text_header = text_header_[0];
}
else {
text_header = ""
}
if (text != -1 && text_header != "-2" && text_header != "-3" && text != "") {
donnees_new = JSON.parse(text);
for (nom in var_sent_every_second) {
if (donnees_new[nom] != undefined) {
save_donnees_new[nom] = donnees_new[nom];
} else {
donnees_new[nom] = save_donnees_new[nom];
}
}
if (donnees_new.trackname != undefined)
trackname_new = donnees_new.trackname;
else
trackname_new = trackname;
if (trackname_new != trackname && trackname == "init") {
responsive_dim();
}
if ((trackname_new == trackname) && (donnees_new.styp == type_session) && (donnees_new.sname == name_session) && (donnees_new.sn == sessionnum) && (donnees_new.sid == sessionid)) { // If we are still in the same session, we don't delete the old datas
$.extend(true, donnees, donnees_new); // Merge donnees_new into donnees, recursively
if (donnees_new.nb != nb_drivers) { // Si le nombre de pilotes a changé il faudra recalculer le SOF
sof_displayed = 0;
nb_drivers = donnees_new.nb;
}
} else {
donnees_defined = 1;
sof_displayed = 0;
sessionnum = donnees_new.sn;
sessionid = donnees_new.sid;
type_session = donnees_new.styp;
name_session = donnees_new.sname;
donnees = JSON.parse(text);
if (broadcast == 0) {
ws.send("31");
} else if (broadcast == 1) {
ws3.send("31");
}
setting_ = {};
document.getElementById("wj").innerHTML = "--"
}
if (donnees_new.nb != undefined) {
nb_drivers = donnees_new.nb;
}
if (donnees.carname != undefined) {
// On met en kg les voitures qui utilisent kg comme la fw31 ou la hpd
if (donnees.carname in car_in_kg) {
disp_kg_livre = 1
} else {
disp_kg_livre = 0
}
}
if (trackname_new != undefined)
trackname = trackname_new;
donnees_reform = {};
var data = donnees;
$.extend(true, donnees_reform, donnees);
if (data.ers != undefined) {
$('#battery_level').height(data.ers * 4.1);
}
if (data.mgul != undefined) {
$('#deploy_level').height(data.mgul * 4.1);
}
if (data.tracktemp != undefined) {
$('#tracktemp').text(data.tracktemp.toFixed(1));
}
//} else if (text == "-3") {
} else if (text_header == "-3") {
trackname = "none"; // utile pour savoir qu'il faudra recharger la page si c'est la première fois qu'on charge un circuit
}
// On calcule les coefficient d'essence en fonction des options
if (disp_kg_livre == 1) {
if (donnees.u == 1) { // systeme metric
coef_fuel = 0.75
} else {
coef_fuel = 1 / (0.45359237 / 0.75 / 3.78541178); // 1 Ga = 3.78541178 L 1 livre = 0.45359237 kg
}
} else {
coef_fuel = 1;
}
if (donnees.d != undefined) {
// Put here the data updates
update_dashboard();
}
if (text_header == "-3" || text_header == "-2") {
// On met au moins l'heure à jour
document.getElementById("time").innerHTML = str_heure();
send_config = JSON.parse(text_header_[1]);
} else {
send_config = donnees_new.s_c;
}
// Changement de configuration
if (send_config != undefined && broadcast <= 1 && text != -1) {
if ("tstamp" in send_config) {
if (send_config_tstamp != send_config.tstamp && send_config != "") {
send_config_tstamp = send_config.tstamp;
//console.log(send_config);
change_config(send_config);
}
}
}
}
</script>
<style>
#battery {
width: 37px;
height: 410px;
position: absolute;
left: 0;
top: 0;
}
#battery_level {
width: 38px;
position: absolute;
left: 0;
bottom: 2px;
background-color: orange;
}
#deploy {
width: 37px;
height: 410px;
position: absolute;
right: 2px;
top: 0;
}
#deploy_level {
width: 38px;
position: absolute;
right: 2px;
bottom: 2px;
background-color: blue;
}
.segment {
height: 40px;
width: 100%;
border: 1px solid white;
}
#tracktemp {
color: white;
font-size: 30px;
position: absolute;
left: 125px;
top: 310px;
}
#tracktemp_h {
border: 1px solid white;
position: absolute;
width: 140px;
height: 35px;
color: white;
bottom: 65px;
left: 50px;
padding: 5px;
font-size: 10px;
}
#labels {
position: absolute;
top: 27px;
left: 6px;
color: gray;
display: flex;
font-size: 10px;
}
.incidents {
left: 71px;
position: relative;
}
.realtime {
left: 149px;
position: relative;
}
.rtime {
left: 310px;
position: relative;
}
.sof {
left: 378px;
position: relative;
}
#me_last {
background-color: inherit;
color: white !important;
border: 1px solid white;
padding: 10px;
}
</style>
</head>
<body>
<div id="page">
<div id="expired">Try version expired or pro version not activated yet !</div>
<div id="drag">&nbsp</div>
<div id="shift">&nbsp</div>
<div id="shift_bg">&nbsp</div>
<div id='labels'>
<div class="incidents">INCIDENTS</div>
<div class="realtime">REAL TIME</div>
<div class="rtime">TIME REMAIN</div>
<div class="sof">SOF</div>
</div>
<div id="weather"></div>
<div id="rpm" onclick="display_rpm()"></div>
<div id="battery_level"></div>
<div id="battery">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div id="deploy_level"></div>
<div id="deploy">
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
<div class="segment"></div>
</div>
<div id='tracktemp_h'>Track (C)</div>
<div id='tracktemp'></div>
<div id="display_rpmshift" onclick="display_rpm()"></div>
<div id="gear" onclick="display_rpm()"></div>
<div id="speed"></div>
<div id="timeremain"></div>
<div id="tank_h">Tank</div>
<div id="estlaps_h">Est. Laps</div>
<div id="lapsremain_h">Laps Remaining</div>
<div id="fuelneed_h">Fuel to add</div>
<div id="tank"></div>
<div id="estlaps"></div>
<div id ="estlaps_bg0">&nbsp</div>
<div id ="estlaps_bg1">&nbsp</div>
<div id="lapsremain"></div>
<div id = "lapsremain_bg0">&nbsp</div>
<div id = "lapsremain_bg1">&nbsp</div>
<div id = "lapsremain_bg2">&nbsp</div>
<div onclick = "if(broadcast==0) ws.send('refuel')" id="fuelneed"></div>
<div id = "fuelneed_bg0">&nbsp</div>
<div id = "fuelneed_bg1">&nbsp</div>
<div id="conso"></div>
<div id="nbpits"></div>
<div id="oil"></div>
<div id="water"></div>
<div id="pre_pos"></div>
<div id="pre_cpos"></div>
<div id="me_pos"></div>
<div id="me_cpos"></div>
<div id="post_pos"></div>
<div id="post_cpos"></div>
<div id="pre_pos_cont">&nbsp</div>
<div id="pre_cpos_cont">&nbsp</div>
<div id="me_pos_cont">&nbsp</div>
<div id="me_cpos_cont">&nbsp</div>
<div id="post_pos_cont">&nbsp</div>
<div id="post_cpos_cont">&nbsp</div>
<div id="pre_gain">&nbsp</div>
<div id="me_gain">&nbsp</div>
<div id="post_gain">&nbsp</div>
<div id="pre_cgain">&nbsp</div>
<div id="me_cgain">&nbsp</div>
<div id="post_cgain">&nbsp</div>
<div id="pre_best"></div>
<div id="me_best"></div>
<div id="post_best"></div>
<div id="pre_last"></div>
<div id="me_last"></div>
<div id="post_last"></div>
<div id="pre_rel"></div>
<div id="post_rel"></div>
<div id="pre_stint"></div>
<div id="me_stint"></div>
<div id="post_stint"></div>
<div id="me_lc"></div>
<div id="pre_name"></div>
<div id="post_name"></div>
<div id="delta_best_h">BEST</div>
<div id="delta_best"></div>
<div id="delta_last_h">LAST</div>
<div id="delta_last"></div>
<div id="delta_avg_h">AVG</div>
<div id="delta_avg"></div>
<div id="delta_tot"></div>
<div id="bb"></div>
<div id="tc">&nbsp</div>
<div id="tc2">&nbsp</div>
<div id="ffb"></div>
<div id="b_cont">&nbsp<div id="b">&nbsp</div></div>
<div id="t_cont">&nbsp<div id="t">&nbsp</div></div>
<div id="ffbpct_cont">&nbsp<div id="ffbpct">&nbsp</div></div>
<div id="delta_pre"><canvas id="canvas_pre">pre</canvas></div>
<div id="delta_post"><canvas id="canvas_post">post</canvas></div>
<div id="deltaB_pre"><canvas id="canvasB_pre">pre</canvas></div>
<div id="deltaB_post"><canvas id="canvasB_post">post</canvas></div>
<div id="compass" onclick="location.reload();"><canvas id="canvas_compass">compass</canvas></div>
<div id="mgua">A</div>
<div id="mguf">F</div>
<div id="ers">ers</div>
<div id="ersco">ersco</div>
<div id="ers_margin">ers_margin</div>
<div id="ers_margin_min_bar">&nbsp;<div id="ers_margin_min_bar_"></div></div>
<div id="mgu_margin_max_bar">&nbsp;<div id="mgu_margin_max_bar_"></div></div>
<div id="ers_margin_free_bar">&nbsp;<div id="ers_margin_free_bar_"></div></div>
<div id="mgul">mgul</div>
<div id="mgu">mgu</div>
<div id="regen_lap">regen_lap</div>
<div id="regen_turn">regen_turn</div>
<div id="drs">DRS</div>
<div id="fullscreen">&nbsp;Full<br>Screen</div>
<div id="pitbar8">&nbsp;</div>
<div id="pitbar16">&nbsp;</div>
<div id="pitbar32">&nbsp;</div>
<div id="pitbar64">&nbsp;</div>
<div id="target_conso">target_conso</div>
<div id="fuel_end">fuel_end</div>
<div id="time">time</div>
<div id="perfs">
<span style='font-size:60%;line-height: 50%;'>&nbsp;Distance :</span> <span id="perfs_dist">--</span><br>
<span style='font-size:60%;line-height: 50%;'>&nbsp;0-100km/h :</span> <span id="perfs_100kmh"></span> <span id="perfs_100kmh_dist" style='font-size:60%;line-height: 50%;'>--</span><br>
<span style='font-size:60%;line-height: 50%;'>&nbsp;0-400m :</span> <span id="perfs_400m"></span> <span id="perfs_400m_speed" style='font-size:60%;line-height: 50%;'>--</span><br>
<span style='font-size:60%;line-height: 50%;'>&nbsp;0-1000m :</span> <span id="perfs_1000m"></span> <span id="perfs_1000m_speed" style='font-size:60%;line-height: 50%;'>--</span>
</div>
<div id="rpm_leds">&nbsp;
<div id="led1">&nbsp;</div>
<div id="led2">&nbsp;</div>
<div id="led3">&nbsp;</div>
<div id="led4">&nbsp;</div>
<div id="led5">&nbsp;</div>
<div id="led6">&nbsp;</div>
<div id="led7">&nbsp;</div>
<div id="led8">&nbsp;</div>
<div id="led9">&nbsp;</div>
<div id="led10">&nbsp;</div>
<div id="led11">&nbsp;</div>
<div id="led12">&nbsp;</div>
</div>
<div id="brake2">&nbsp;<div id="brake2_"></div></div>
<div id="throttle2">&nbsp;<div id="throttle2_"></div></div>
<div id="ffb2">&nbsp;<div id="ffb2_"></div></div>
<div id="brake2_text">BRAKE</div>
<div id="throttle2_text">THROTTLE</div>
<div id="ffb2_text">FFB</div>
<div id="sof">SOF</div>
<div id="inc">INC</div>
<div id="nextpittimelost">-- s</div>
<div id="ers_bar">&nbsp;<div id="ers_bar_"></div></div>
<div id="regen_gain">--</div>
<div id="fuel_mixture">--</div>
<div id="eng_pw">--</div>
<div id="peak_bb">--</div>
<div id="diff_preload">--</div>
<div id="diff_entry">--</div>
<div id="fuelneed1"></div>
<div id = "fuelneed1_bg0">&nbsp</div>
<div id = "fuelneed1_bg1">&nbsp</div>
<div id="fuelneed5"></div>
<div id = "fuelneed5_bg0">&nbsp</div>
<div id = "fuelneed5_bg1">&nbsp</div>
<div id="conso1">--</div>
<div id="conso5">--</div>
<div id="points">--</div>
<div id="wj">--</div>
<div id="abs">--</div>
<div id="arb_f">--</div>
<div id="arb_r">--</div>
<div id="refuel_min">--</div>
<div id="refuel_avg">--</div>
<div id="refuel_avg_now">--</div>
<div id="time_of_day">--</div>
<div id="traffic">--</div>
<div id="traffic_pit">--</div>
<div id="setting_changed_name">--</div>
<div id="setting_changed_value">--</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment