Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

session view improvements #526

Merged
merged 5 commits into from
Jan 14, 2024
Merged

session view improvements #526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
57b7c8f
Add lap time and driver name to lap options in session.html
durandom Jan 12, 2024
7f0a73d
Fix resampling issue and comment out unused code
durandom Jan 13, 2024
7170bee
Refactor session.html template
durandom Jan 13, 2024
1f4a77b
Update graph layout in session.js
durandom Jan 14, 2024
b8051f5
Update margin values in session.js
durandom Jan 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions components/paddock/api/telemetry_loader.py
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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