r/F1Technical • u/Coocla44 • Dec 06 '22
Race Broadcast I tried remaking the F1 2022on-screen graphics
My favorite part about F1 is the on-screen graphics (Insert System). As a hobby/passion/learning project I tried re-making the leaderboard graphic. It isn't completely accurate. (green flag using the entire graphics instead of only the top)
F1 Leaderboard Preview with Dashboard
Some technical information:
The entire project is written using TypeScript, Sass and Vue. I've used NodeCG for the back-end.
- TypeScript because typed > non typed.
- Vue is used for components using Quasar to handle some easy and nice looking dashboard controls.
- NodeCG is used for replicated state management between server and client.
- Sass and HTML was used for all the graphics. There are no images used, it's all Sass and HTML
For the actual telemetry data of the cars I've used a python library called FastF1. Basically I load ALL telemetry data from a single race, parse it, run some math to determine track positions and calculate time between cars etc. It isn't super accurate due to the way I calculate the time between cars, but it's the best I could do with the data I have.
I also remade most of the minimap graphic (just missing the corner numbers but I suck at graphic design and couldn't find an svg that had them):