From 57b7c8f91db3382b7e9b743acc8cb7155d7a2f5e Mon Sep 17 00:00:00 2001 From: Marcel Hild Date: Fri, 12 Jan 2024 19:19:50 +0100 Subject: [PATCH 1/5] Add lap time and driver name to lap options in session.html --- components/paddock/paddock/templates/session.html | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/components/paddock/paddock/templates/session.html b/components/paddock/paddock/templates/session.html index e219ca5d..6743578e 100644 --- a/components/paddock/paddock/templates/session.html +++ b/components/paddock/paddock/templates/session.html @@ -12,7 +12,9 @@

Session View

Lap 1 @@ -21,10 +23,15 @@

Session View

From 7f0a73db13c8fa12f688b9b8e3dafe4b41c5a7e6 Mon Sep 17 00:00:00 2001 From: Marcel Hild Date: Sat, 13 Jan 2024 11:38:25 +0100 Subject: [PATCH 2/5] Fix resampling issue and comment out unused code --- components/paddock/api/telemetry_loader.py | 1 + components/paddock/paddock/assets/session.js | 109 ++++++------------ .../paddock/paddock/templates/session.html | 12 +- 3 files changed, 44 insertions(+), 78 deletions(-) diff --git a/components/paddock/api/telemetry_loader.py b/components/paddock/api/telemetry_loader.py index 0368a6aa..7dfbbf9e 100644 --- a/components/paddock/api/telemetry_loader.py +++ b/components/paddock/api/telemetry_loader.py @@ -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) diff --git a/components/paddock/paddock/assets/session.js b/components/paddock/paddock/assets/session.js index 9fad3206..9999ac53 100644 --- a/components/paddock/paddock/assets/session.js +++ b/components/paddock/paddock/assets/session.js @@ -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 = []; @@ -25,16 +25,16 @@ document.addEventListener('DOMContentLoaded', function() { const session_id = path_parts.pop(); // Create empty plots - var layout = { + const layout = { height: 200, // Shorter height to make the graph similar to the one in the screenshot xaxis: { - // title: 'Distance/Time', + // title: 'Distance/Time', showgrid: true, zeroline: false, gridcolor: '#E2E2E2' }, yaxis: { - // title: 'Speed (km/h)', + // title: 'km/h', showline: false, gridcolor: '#E2E2E2' }, @@ -49,23 +49,33 @@ document.addEventListener('DOMContentLoaded', function() { plot_bgcolor: '#ffffff' }; - Plotly.newPlot(speedGraphDiv, [], layout); - Plotly.newPlot(throttleGraphDiv, [], layout); + // make a deep copy of the layout + speed_layout = JSON.parse(JSON.stringify(layout)); + speed_layout.yaxis.title = 'km/h'; + Plotly.newPlot(speedGraphDiv, [], speed_layout); + + // make a deep copy of the layout + throttle_layout = JSON.parse(JSON.stringify(layout)); + throttle_layout.yaxis.title = 'throttle'; + + // Plotly.newPlot(throttleGraphDiv, [], throttle_layout, {displayModeBar: false}); + Plotly.newPlot(throttleGraphDiv, [], throttle_layout); // 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, @@ -162,8 +172,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], @@ -192,50 +202,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); }); @@ -428,10 +394,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) { @@ -474,17 +439,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; + // } } diff --git a/components/paddock/paddock/templates/session.html b/components/paddock/paddock/templates/session.html index 6743578e..0b088658 100644 --- a/components/paddock/paddock/templates/session.html +++ b/components/paddock/paddock/templates/session.html @@ -43,24 +43,24 @@

Session View

-
+ +
-
+ +
From 7170beea1fb42c4ed6d22f21b5eed71d513d2f4a Mon Sep 17 00:00:00 2001 From: Marcel Hild Date: Sat, 13 Jan 2024 11:39:25 +0100 Subject: [PATCH 3/5] Refactor session.html template --- .../paddock/paddock/templates/session.html | 65 +++++++++---------- 1 file changed, 32 insertions(+), 33 deletions(-) diff --git a/components/paddock/paddock/templates/session.html b/components/paddock/paddock/templates/session.html index 0b088658..62997879 100644 --- a/components/paddock/paddock/templates/session.html +++ b/components/paddock/paddock/templates/session.html @@ -12,9 +12,9 @@

Session View

Lap 1
@@ -23,46 +23,45 @@

Session View

+ +
+
+
-
-
-
-
-
-
- -
-
+
+
+ +
+
-
- -
-
+
+
+ +
+
From 1f4a77b5027bfecc572e87a3e55348bd9475b102 Mon Sep 17 00:00:00 2001 From: Marcel Hild Date: Sun, 14 Jan 2024 10:46:35 +0100 Subject: [PATCH 4/5] Update graph layout in session.js --- components/paddock/paddock/assets/session.js | 29 ++++++++++---------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/components/paddock/paddock/assets/session.js b/components/paddock/paddock/assets/session.js index 9999ac53..3c0afe05 100644 --- a/components/paddock/paddock/assets/session.js +++ b/components/paddock/paddock/assets/session.js @@ -25,13 +25,14 @@ document.addEventListener('DOMContentLoaded', function() { const session_id = path_parts.pop(); // Create empty plots - const 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', showgrid: true, zeroline: false, - gridcolor: '#E2E2E2' + gridcolor: '#E2E2E2', + side: 'top' // Add this line to position x-axis at the top }, yaxis: { // title: 'km/h', @@ -40,26 +41,26 @@ document.addEventListener('DOMContentLoaded', function() { }, 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 - speed_layout = JSON.parse(JSON.stringify(layout)); - speed_layout.yaxis.title = 'km/h'; - Plotly.newPlot(speedGraphDiv, [], speed_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); // make a deep copy of the layout - throttle_layout = JSON.parse(JSON.stringify(layout)); - throttle_layout.yaxis.title = 'throttle'; + layout = JSON.parse(JSON.stringify(layout_base)); + layout.yaxis.title = 'throttle'; - // Plotly.newPlot(throttleGraphDiv, [], throttle_layout, {displayModeBar: false}); - Plotly.newPlot(throttleGraphDiv, [], throttle_layout); + Plotly.newPlot(throttleGraphDiv, [], layout, {displayModeBar: false}); // the map layout is the same, but without coordinates mapLayout = { From b8051f5964b01288a995edb8eb05df09fa276810 Mon Sep 17 00:00:00 2001 From: Marcel Hild Date: Sun, 14 Jan 2024 10:46:46 +0100 Subject: [PATCH 5/5] Update margin values in session.js --- components/paddock/paddock/assets/session.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/paddock/paddock/assets/session.js b/components/paddock/paddock/assets/session.js index 3c0afe05..64f5774d 100644 --- a/components/paddock/paddock/assets/session.js +++ b/components/paddock/paddock/assets/session.js @@ -79,10 +79,10 @@ document.addEventListener('DOMContentLoaded', function() { visible: false }, margin: { - l: 50, - r: 50, - b: 50, - t: 50, + l: 20, + r: 20, + b: 20, + t: 20, pad: 4 }, paper_bgcolor: '#ffffff',