Skip to content

Commit

Permalink
Merge pull request #526 from durandom/main
Browse files Browse the repository at this point in the history 
session view improvements
  • Loading branch information
@durandom
durandom authored Jan 14, 2024
2 parents 0870f8c + b8051f5 commit 6f3160e
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 107 deletions.
1 change: 1 addition & 0 deletions components/paddock/api/telemetry_loader.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ def process_dataframe(self, df):
# FIXME this resampling is based on just one lap
analyzer = Analyzer()
df = analyzer.resample(df, columns=columns, freq=1)

# change CurrentLap to int
# df["CurrentLap"] = df["CurrentLap"].astype(int)

Expand Down
128 changes: 47 additions & 81 deletions components/paddock/paddock/assets/session.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ document.addEventListener('DOMContentLoaded', function() {
var lap1index = 0;
var lap2index = 0;
const mapDiv = document.getElementById('map');
const speedValue1 = document.getElementById('speed-value-1');
const speedValue2 = document.getElementById('speed-value-2');
// const speedValue1 = document.getElementById('speed-value-1');
// const speedValue2 = document.getElementById('speed-value-2');

// Initial Telemetry Data
let telemetry = [];
Expand All @@ -25,53 +25,64 @@ document.addEventListener('DOMContentLoaded', function() {
const session_id = path_parts.pop();

// Create empty plots
var layout = {
height: 200, // Shorter height to make the graph similar to the one in the screenshot
const layout_base = {
height: 100,
xaxis: {
// title: 'Distance/Time',
// title: 'Distance/Time',
showgrid: true,
zeroline: false,
gridcolor: '#E2E2E2'
gridcolor: '#E2E2E2',
side: 'top' // Add this line to position x-axis at the top
},
yaxis: {
// title: 'Speed (km/h)',
// title: 'km/h',
showline: false,
gridcolor: '#E2E2E2'
},
margin: {
l: 50,
r: 50,
b: 50,
t: 50,
r: 0,
b: 10,
t: 5,
pad: 4
},
paper_bgcolor: '#ffffff',
plot_bgcolor: '#ffffff'
};

// make a deep copy of the layout
var layout = JSON.parse(JSON.stringify(layout_base));
layout.yaxis.title = 'km/h';
layout.margin.t = 50;
layout.height += 50;
Plotly.newPlot(speedGraphDiv, [], layout);
Plotly.newPlot(throttleGraphDiv, [], layout);

// make a deep copy of the layout
layout = JSON.parse(JSON.stringify(layout_base));
layout.yaxis.title = 'throttle';

Plotly.newPlot(throttleGraphDiv, [], layout, {displayModeBar: false});

// the map layout is the same, but without coordinates
mapLayout = {
// height and width are the same
height: '100%',
xaxis: {
showgrid: true,
showgrid: false,
showline: false,
zeroline: false,
gridcolor: '#E2E2E2',
aspectratio: '1:1'
visible: false
},
yaxis: {
showgrid: false,
showline: false,
gridcolor: '#E2E2E2',
aspectratio: '1:1'
zeroline: false,
visible: false
},
margin: {
l: 50,
r: 50,
b: 50,
t: 50,
l: 20,
r: 20,
b: 20,
t: 20,
pad: 4
},
paper_bgcolor: '#ffffff',
Expand Down Expand Up @@ -162,8 +173,8 @@ document.addEventListener('DOMContentLoaded', function() {

const telemetryData = data.data.map(item => ({
DistanceRoundTrack: item[distanceIndex],
SpeedMs: item[speedIndex],
Throttle: item[throttleIndex],
SpeedMs: Math.round(item[speedIndex] * 3.6),
Throttle: Math.round(item[throttleIndex] * 100),
CurrentLap: parseInt(item[lapIndex]),
WorldPositionX: item[worldPositionXIndex],
WorldPositionY: item[worldPositionYIndex],
Expand Down Expand Up @@ -192,50 +203,6 @@ document.addEventListener('DOMContentLoaded', function() {
telemetry[lap] = telemetryData.filter(item => item.CurrentLap === lap);
});

// laps.forEach((lap, index) => {
// d = telemetry[lap];
// speedTrace = {
// x: d.map(t => t.DistanceRoundTrack),
// y: d.map(t => t.SpeedMs),
// mode: 'lines',
// name: 'Lap ' + lap,
// line: {
// // dash: 'dash', // Dashed line for the data points
// // color: 'blue'
// }
// // 'marker.color': 'red',

// };
// Plotly.addTraces(speedGraphDiv, speedTrace);

// throttleTrace = {
// x: d.map(t => t.DistanceRoundTrack),
// y: d.map(t => t.Throttle),
// mode: 'lines',
// name: 'Lap ' + lap,
// 'marker.color': 'red',
// };
// Plotly.addTraces(throttleGraphDiv, throttleTrace);

// if (mapDataAvailable && index === 0) {
// // Extract WorldPositionX and WorldPositionY from telemetry
// const xValues = d.map(d => d.WorldPositionX);
// const yValues = d.map(d => d.WorldPositionY);

// // Create a 2D scatter plot with Plotly
// const trace = {
// x: xValues,
// y: yValues,
// yaw: d.map(d => d.Yaw),
// pitch: d.map(d => d.Pitch),
// roll: d.map(d => d.Roll),
// mode: 'lines',
// line: {},
// };
// Plotly.addTraces(mapDiv, trace);
// }
// });

lap = lapSelector1.value;
showLap(lap);
});
Expand Down Expand Up @@ -428,10 +395,9 @@ document.addEventListener('DOMContentLoaded', function() {
// get the first trace from the speed graph
trace = speedGraphDiv.data[lap1index];
// get the y value of the closest point to the selected distance
// const yValue = trace.y[trace.x.indexOf(distance)];
const yValue = trace.y[point.pointIndex];
// const yValue = trace.y[point.pointIndex];
// set the speedValue1 to the y value
speedValue1.innerHTML = yValue;
// speedValue1.innerHTML = yValue;

// highlight the closest point on the map
if (mapDataAvailable) {
Expand Down Expand Up @@ -474,17 +440,17 @@ document.addEventListener('DOMContentLoaded', function() {
});
}
}
if (point.curveNumber === lap2index) {
// set speedValue1 to the speed at the selected distance
// get the closest telemetry item to the selected distance
// get the first trace from the speed graph
const trace = speedGraphDiv.data[lap2index];
// get the y value of the closest point to the selected distance
// const yValue = trace.y[trace.x.indexOf(distance)];
const yValue = trace.y[point.pointIndex];
// set the speedValue1 to the y value
speedValue2.innerHTML = yValue;
}
// if (point.curveNumber === lap2index) {
// // set speedValue1 to the speed at the selected distance
// // get the closest telemetry item to the selected distance
// // get the first trace from the speed graph
// const trace = speedGraphDiv.data[lap2index];
// // get the y value of the closest point to the selected distance
// // const yValue = trace.y[trace.x.indexOf(distance)];
// const yValue = trace.y[point.pointIndex];
// // set the speedValue1 to the y value
// speedValue2.innerHTML = yValue;
// }

}

Expand Down
58 changes: 32 additions & 26 deletions components/paddock/paddock/templates/session.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ <h1>Session View</h1>
<small id="lapHelp" class="form-text text-muted">Lap 1</small>
<select class="form-select form-select-sm" id="lap-selector-1">
{% for lap in session.laps.all %}
<option value="{{lap.number}}" {% if lap_number == lap.number %}selected{% endif %}>{{ lap.number }}</option>
<option value="{{lap.number}}" {% if lap_number == lap.number %}selected{% endif %}>
{{ lap.number }} - {{ lap.time|floatformat:3 }}
</option>
{% endfor %}
</select>
</div>
Expand All @@ -21,41 +23,45 @@ <h1>Session View</h1>
<select class="form-select form-select-sm" id="lap-selector-2">
<option value="none">none</option>
{% for lap in session.laps.all %}
<option value="{{lap.number}}" {% if lap_number == lap.number %}selected{% endif %}>{{ lap.number }}</option>
<option value="{{lap.number}}">
{{ lap.number }} - {{ lap.time|floatformat:3 }}
</option>
{% endfor %}
{% for lap in compare_laps %}
<option value="{{lap.id}}">({{ lap.id }})</option>
<option value="{{lap.id}}">
{{ lap.number }} - {{ lap.time|floatformat:3 }}
- {{ lap.session.driver.name }}
</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="map"></div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="map"></div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-2 telemetry-box">
<div class="lap-info">
<div class="lap">LAP1 <span id="speed-value-1" class="lap-telemetry">192</span> km/h</div>
<div class="lap">LAP2 <span id="speed-value-2" class="lap-telemetry">184</span> km/h</div>
</div>
</div>
<div class="col-sm-8">
<div id="speed-graph"></div>
<div class="col-sm-8">
<div class="row">
<!-- <div class="col-sm-2 telemetry-box">
<div class="lap-info">
<div class="lap">LAP1 <span id="speed-value-1" class="lap-telemetry">192</span> km/h</div>
<div class="lap">LAP2 <span id="speed-value-2" class="lap-telemetry">184</span> km/h</div>
</div>
</div> -->
<div class="col-sm-12">
<div id="speed-graph"></div>
</div>
<div class="row">
<div class="col-sm-2 telemetry-box">
<div class="lap-info">
<div class="lap">LAP1 <span class="lap-telemetry">80</span>%</div>
<div class="lap">LAP2 <span class="lap-telemetry">75</span>%</div>
</div>
</div>
<div class="col-sm-8">
<div id="throttle-graph"></div>
</div>
<div class="row">
<!-- <div class="col-sm-2 telemetry-box">
<div class="lap-info">
<div class="lap">LAP1 <span class="lap-telemetry">80</span>%</div>
<div class="lap">LAP2 <span class="lap-telemetry">75</span>%</div>
</div>
</div> -->
<div class="col-sm-12">
<div id="throttle-graph"></div>
</div>
</div>
</div>
Expand Down

0 comments on commit 6f3160e

Please sign in to comment.