Skip to content

Commit

Permalink
Add speed gauge and vario (hidden by default)
Browse files Browse the repository at this point in the history
  • Loading branch information
@01ive
01ive committed Aug 13, 2024
1 parent 51fe80b commit 4eb16b7
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 1 deletion.
69 changes: 68 additions & 1 deletion common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,13 @@ function update_position(position_index) {
cursor.setLatLng(latlng);
// Update info
display_stats(paragliding_stats[position_index]);
// Update speed
gauge_data[0].value = paragliding_stats[position_index].speed;
Plotly.update('speed_gauge', gauge_data[0]);
// Update vario
vario_data[0].value = paragliding_stats[position_index].vertical_speed;
vario_data[0].delta.reference = paragliding_stats[(position_index==0 ? 0 : position_index-1)].vertical_speed;
Plotly.update('vario', vario_data[0]);
// Update elevation
let updt = {color: 'red'};
elevation_graph.layout.shapes[0].x0=paragliding_stats[position_index].distance_total;
Expand Down Expand Up @@ -204,6 +211,57 @@ function update_globals_infos(flight) {
/* =========================================================================================================== */
/* ======================================== User Interface parameters ======================================== */
/* =========================================================================================================== */
// Speed gauge
let gauge_data = [
{
domain: { x: [0, 1], y: [0, 1] },
value: 0,
title: { text: "Speed km/h", font: {size: 14} },
type: "indicator",
mode: "gauge+number",
gauge: {
axis: { range: [null, 60, 10] }
}
}
];
let gauge_layout = { width: 150, height: 150,
margin: {
autoexpand: true,
b: 0,
l: 25,
pad: 500,
r: 25,
t: 0
},
paper_bgcolor:"rgba(0, 0, 0, 0)",
plot_bgcolor:"rgba(0, 0, 0, 0)",
};
// Vario digital display
let vario_data = [
{
title: { text: "Vario", font: { size: 14 } },
type: "indicator",
mode: "number+delta",
value: 300,
number: { suffix: " m/s", font: { size: 20 } },
delta: { position: "down", reference: 320, font: { size: 20 } },
domain: { x: [0, 1], y: [0, 1] }
}
];
let vario_layout = {
width: 120,
height: 120,
margin: {
autoexpand: 0,
b: 0,
l: 25,
pad: 500,
r: 25,
t: 0
},
paper_bgcolor:"rgba(0, 0, 0, 0)",
plot_bgcolor:"rgba(0, 0, 0, 0)",
};
// Create map layers
var GeoportailFrance_plan = L.tileLayer('https://wxs.ign.fr/{apikey}/geoportail/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE={style}&TILEMATRIXSET=PM&FORMAT={format}&LAYER=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}', {
attribution: '<a target="_blank" href="https://www.geoportail.gouv.fr/">Geoportail France</a>',
Expand Down Expand Up @@ -298,14 +356,19 @@ function refresh_map(flight) {
document.getElementById('title').style.visibility = 'unset';
document.getElementById('elevation').style.visibility = 'unset';
document.getElementById('point_info').style.visibility = 'unset';
document.getElementById('speed_gauge').style.visibility = 'hidden';
document.getElementById('vario').style.visibility = 'hidden';
document.getElementById('zoom_control').style.visibility = 'unset';
document.getElementById('layer_control').style.visibility = 'unset';
document.getElementById('control_buttons').style.visibility = 'unset';
document.getElementById('visibility_button').style.visibility = 'unset';
document.getElementById('play_stop_button').style.visibility = 'unset';
document.getElementById('speed_button').style.visibility = 'unset';


// Uncheck hidden objects
document.getElementById('chkbx_speed_gauge').checked = false;
document.getElementById('chkbx_vario').checked = false;

// Create events for key press
window.addEventListener("keypress", (k) => key_commands(k));

Expand Down Expand Up @@ -429,4 +492,8 @@ function refresh_map(flight) {
elevation_graph.on('plotly_hover', function(data){
update_position(data.points[0].pointIndex);
});
// Create speed graph
Plotly.newPlot('speed_gauge', gauge_data, gauge_layout, { displayModeBar: false });
// Create Vario
Plotly.newPlot('vario', vario_data, vario_layout, { displayModeBar: false });
}
15 changes: 15 additions & 0 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,21 @@
visibility: hidden;
}

#speed_gauge {
position: absolute;
bottom: 20vh;
z-index: 5;
cursor: move;
}

#vario {
position: absolute;
bottom: 20vh;
right: 0;
z-index: 5;
cursor: move;
}

#point_info {
position: absolute;
bottom: 0;
Expand Down
4 changes: 4 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,17 @@
<label><input type="checkbox" id="chkbx_title" value="title" checked onclick='visibility_checkbox_action(this);'>Global infos</label><br>
<label><input type="checkbox" id="chkbx_elevation" value="elevation" checked onclick='visibility_checkbox_action(this);'>Elevation</label><br>
<label><input type="checkbox" id="chkbx_text" value="point_info" checked onclick='visibility_checkbox_action(this);'>Global infos</label><br>
<label><input type="checkbox" id="chkbx_speed_gauge" value="speed_gauge" checked onclick='visibility_checkbox_action(this);'>Speed gauge</label><br>
<label><input type="checkbox" id="chkbx_vario" value="vario" checked onclick='visibility_checkbox_action(this);'>Variometer</label><br>
<label><input type="checkbox" id="chkbx_zoom_control" value="zoom_control" checked onclick='visibility_checkbox_action(this);'>Zoom control</label><br>
<label><input type="checkbox" id="chkbx_layer_control" value="layer_control" checked onclick='visibility_checkbox_action(this);'>Map layer control</label><br>
<label><input type="checkbox" id="chkbx_control_buttons" value="control_buttons" checked onclick='visibility_checkbox_action(this);'>Control buttons</label><br>
</div>
</div>
<div id="map"></div>
<div id="elevation" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)"></div>
<div id="speed_gauge" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)"></div>
<div id="vario" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)"></div>
<div id="point_info" draggable="true" ondragstart="dragstart(this)" ondragend="dragend(this)">
<div>duration&nbsp;</div><div id="point_info_time">__:__:__</div>
<div>elevation (gps)&nbsp;</div><div id="point_info_elevation_gps">----</div>
Expand Down

0 comments on commit 4eb16b7

Please sign in to comment.