slowlydev / f1-dash

A real-time F1 dashboard
https://f1-dash.com
GNU General Public License v3.0
412 stars 39 forks source link

[Feature Request]: More Car Data #45

Closed Cubik65536 closed 1 month ago

Cubik65536 commented 7 months ago

Hi,

Is it possible to show other car data (RPM, gear, speed, throttle, and break) alongside the DRS indicator (like what MultiViewer is doing)? I think it would be a nice feature.

Looking forward to it, @Cubik65536

slowlydev commented 7 months ago

Hey @Cubik65536, Yes its definitely possible, its even somewhat in the current API. But I decided not to add it to the current dashboard because it seemed buggy and too much information.

I believe the "buggy" part is because we get multiple values for rpm, gear, speed. And we currently only use one value (the latest one) but It seems that does not work correctly. I think it needs some kind of logic to use all values and switch between them.

Cubik65536 commented 7 months ago

Hey @Cubik65536, Yes its definitely possible, its even somewhat in the current API. But I decided not to add it to the current dashboard because it seemed buggy and too much information.

I believe the "buggy" part is because we get multiple values for rpm, gear, speed. And we currently only use one value (the latest one) but It seems that does not work correctly. I think it needs some kind of logic to use all values and switch between them.

Can you provide further explanations with "multiple values"? I may be able to help with the backend logics a bit, but I'm just not good on designing and developing frontend UI 🤣

slowlydev commented 7 months ago

Hey @Cubik65536, Yes its definitely possible, its even somewhat in the current API. But I decided not to add it to the current dashboard because it seemed buggy and too much information. I believe the "buggy" part is because we get multiple values for rpm, gear, speed. And we currently only use one value (the latest one) but It seems that does not work correctly. I think it needs some kind of logic to use all values and switch between them.

Can you provide further explanations with "multiple values"? I may be able to help with the backend logics a bit, but I'm just not good on designing and developing frontend UI 🤣

Yeah sure and no worries! Here is where we currently set the rpm etc. https://github.com/Slowlydev/f1-dash/blob/07a9f2dec87b33bb622348b96e1e4c344a62c61f/data/src/translators.ts#L302-L306C7

With "multiple values" I mean we get CarData in batches and not single updates for every change. There needs to be some logic to handle that. Either in frontend or backend.

I recommend u look what happens with the values called "CarData" or "CarData.z" that's where we get RPM, Gear, Speed and more from.

slowlydev commented 7 months ago

I also already wrote some components for Speed, RPM and Gear I think.

Cubik65536 commented 7 months ago

Hey @Cubik65536, Yes its definitely possible, its even somewhat in the current API. But I decided not to add it to the current dashboard because it seemed buggy and too much information. I believe the "buggy" part is because we get multiple values for rpm, gear, speed. And we currently only use one value (the latest one) but It seems that does not work correctly. I think it needs some kind of logic to use all values and switch between them.

Can you provide further explanations with "multiple values"? I may be able to help with the backend logics a bit, but I'm just not good on designing and developing frontend UI 🤣

Yeah sure and no worries! Here is where we currently set the rpm etc. 07a9f2d/data/src/translators.ts#L302-L306C7

With "multiple values" I mean we get CarData in batches and not single updates for every change. There needs to be some logic to handle that. Either in frontend or backend.

I recommend u look what happens with the values called "CarData" or "CarData.z" that's where we get RPM, Gear, Speed and more from.

I can use data-simulator and let the backend connect to it to see how these values changes right?

slowlydev commented 7 months ago

Hey @Cubik65536, Yes its definitely possible, its even somewhat in the current API. But I decided not to add it to the current dashboard because it seemed buggy and too much information. I believe the "buggy" part is because we get multiple values for rpm, gear, speed. And we currently only use one value (the latest one) but It seems that does not work correctly. I think it needs some kind of logic to use all values and switch between them.

Can you provide further explanations with "multiple values"? I may be able to help with the backend logics a bit, but I'm just not good on designing and developing frontend UI 🤣

Yeah sure and no worries! Here is where we currently set the rpm etc. 07a9f2d/data/src/translators.ts#L302-L306C7 With "multiple values" I mean we get CarData in batches and not single updates for every change. There needs to be some logic to handle that. Either in frontend or backend. I recommend u look what happens with the values called "CarData" or "CarData.z" that's where we get RPM, Gear, Speed and more from.

I can use data-simulator and let the backend connect to it to see how these values changes right?

Yes exactly, here's a txt to use with data-simulator https://we.tl/t-fCXbUqKd9m

Cubik65536 commented 7 months ago

Hey @Cubik65536, Yes its definitely possible, its even somewhat in the current API. But I decided not to add it to the current dashboard because it seemed buggy and too much information. I believe the "buggy" part is because we get multiple values for rpm, gear, speed. And we currently only use one value (the latest one) but It seems that does not work correctly. I think it needs some kind of logic to use all values and switch between them.

Can you provide further explanations with "multiple values"? I may be able to help with the backend logics a bit, but I'm just not good on designing and developing frontend UI 🤣

Yeah sure and no worries! Here is where we currently set the rpm etc. 07a9f2d/data/src/translators.ts#L302-L306C7 With "multiple values" I mean we get CarData in batches and not single updates for every change. There needs to be some logic to handle that. Either in frontend or backend. I recommend u look what happens with the values called "CarData" or "CarData.z" that's where we get RPM, Gear, Speed and more from.

I can use data-simulator and let the backend connect to it to see how these values changes right?

Yes exactly, here's a txt to use with data-simulator we.tl/t-fCXbUqKd9m

Ok thanks, I'll try to look into this when I got some time.

AdriCardenas commented 4 months ago

I've been watching the live timing a bit. I don't know the current state of the api to get the current and maximum speed. It would be good data to compare between different cars. Also I think that the mini sectors are too big. Aditionally the "overall best" mini sector should be more purple, look like blue right now.

slowlydev commented 4 months ago

Thanks for the feedback and issue u created!

I don't know the current state of the api to get the current and maximum speed.

Currently, we can get the current speed. But instead of a single value, we get 10 per update from F1 and I just use the first one. Which his not great.

It would be good data to compare between different cars.

Definitely! Its planned but as I have been rewriting the backend and then also the frontend I did not have enough time for it.

About other design related things, I am currently working on V2 and UI Design will change too and feel free play with colors and open a pull request :)

Cubik65536 commented 4 months ago

Thanks for the feedback and issue u created!

I don't know the current state of the api to get the current and maximum speed.

Currently, we can get the current speed. But instead of a single value, we get 10 per update from F1 and I just use the first one. Which his not great.

It would be good data to compare between different cars.

Definitely! Its planned but as I have been rewriting the backend and then also the frontend I did not have enough time for it.

About other design related things, I am currently working on V2 and UI Design will change too and feel free play with colors and open a pull request :)

What does a single batch of data consist of? Is it just a batch of data from 10 different time between the current and the last update?

slowlydev commented 4 months ago

Yes u basically got it, for every car data update, we get a string. We can then decompress it and we get an array. In that array every item has a timestamp and the values of the car at the time of the timestamp.

And currently we only use the last one, which could make the data inconsistent as seen here:

https://github.com/Slowlydev/f1-dash/blob/07a9f2dec87b33bb622348b96e1e4c344a62c61f/data/src/translators.ts#L200

Here we parse the string from f1:

https://github.com/Slowlydev/f1-dash/blob/07a9f2dec87b33bb622348b96e1e4c344a62c61f/data/src/handler.ts#L22

From this line downwards are the types for the decompressed data.

https://github.com/Slowlydev/f1-dash/blob/07a9f2dec87b33bb622348b96e1e4c344a62c61f/data/src/f1-types/formula1.type.ts#L322

To manually inflate the string you could use this tool:

https://jgraph.github.io/drawio-tools/tools/convert.html

I will provide a example for the decompressed data we get once I can get on my laptop 😄

slowlydev commented 4 months ago

@Cubik65536 sorry for the long wait...

This string of CarData:

7ZbNagIxEMffJWeV+U52r9I3aC8tPUgRWigeWm/iu9fdeLAQ1zgIKu5ldgn5M5OZyW+yCU+r9c/X8je0b5vwsv4IbSAgniJOyZ6RWmlasVk01ijpNUzCfPGz270J2Jn552K1Wn73CxBamATqLfdWeqv5v/tst/0Gl44LOtZGeynyoFbO94mdDsEZLHqzg45Qs9C8Z0wFoYBU1bKUHwHFCr9UagS2lHJB07DjUjdURextBYqloxrbgRYPtAiHavb2g5TiVQCr0Ko6z2re7MZSkmo8Jkd+dsKddIhaDbEq8s1Ry2K+IEgjtS5LLVU/tYzc1NJk90QtILgKtaimOg9OrTgjYQW5PWop70czjtS6KLWQaqZ5mVqIJ7QD1BKSXNB4D9RiNbkGtTA1I7VOU0tJxCjeGrVQY6bW8GQeoXUutGA/DTzQgubYQ+D/TT6CLcgXsiPfHWBL+CrYgubEc/ZhsPW+/QM=

Would result in this decompressed json:

{
  "Entries": [
    {
      "Utc": "2023-11-26T12:49:46.7635748Z",
      "Cars": {
        "1": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "2": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "3": {
          "Channels": { "0": 3595, "2": 13, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "4": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "10": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "11": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "14": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "16": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "18": {
          "Channels": { "0": 4040, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "20": {
          "Channels": { "0": 4051, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "22": {
          "Channels": { "0": 3688, "2": 18, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "23": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "24": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "27": {
          "Channels": { "0": 4636, "2": 0, "3": 1, "4": 0, "5": 100, "45": 1 }
        },
        "31": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "44": {
          "Channels": { "0": 5006, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "55": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "63": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "77": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "81": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        }
      }
    },
    {
      "Utc": "2023-11-26T12:49:46.9235513Z",
      "Cars": {
        "1": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "2": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "3": {
          "Channels": { "0": 3671, "2": 12, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "4": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "10": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "11": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "14": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "16": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "18": {
          "Channels": { "0": 4055, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "20": {
          "Channels": { "0": 4062, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "22": {
          "Channels": { "0": 3586, "2": 18, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "23": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "24": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "27": {
          "Channels": { "0": 4020, "2": 0, "3": 1, "4": 0, "5": 100, "45": 1 }
        },
        "31": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "44": {
          "Channels": { "0": 5025, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "55": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "63": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "77": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "81": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        }
      }
    },
    {
      "Utc": "2023-11-26T12:49:47.2435043Z",
      "Cars": {
        "1": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "2": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "3": {
          "Channels": { "0": 3538, "2": 11, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "4": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "10": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "11": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "14": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "16": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "18": {
          "Channels": { "0": 4126, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "20": {
          "Channels": { "0": 4116, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "22": {
          "Channels": { "0": 3424, "2": 17, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "23": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "24": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "27": {
          "Channels": { "0": 3564, "2": 0, "3": 1, "4": 0, "5": 100, "45": 1 }
        },
        "31": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "44": {
          "Channels": { "0": 5189, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "55": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "63": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "77": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "81": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        }
      }
    },
    {
      "Utc": "2023-11-26T12:49:47.5244627Z",
      "Cars": {
        "1": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "2": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "3": {
          "Channels": { "0": 1578, "2": 8, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "4": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "10": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "11": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "14": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "16": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "18": {
          "Channels": { "0": 4038, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "20": {
          "Channels": { "0": 4095, "2": 0, "3": 0, "4": 0, "5": 100, "45": 1 }
        },
        "22": {
          "Channels": { "0": 3409, "2": 16, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "23": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "24": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "27": {
          "Channels": { "0": 3434, "2": 0, "3": 1, "4": 0, "5": 100, "45": 1 }
        },
        "31": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "44": {
          "Channels": { "0": 5092, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "55": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "63": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 0 }
        },
        "77": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        },
        "81": {
          "Channels": { "0": 0, "2": 0, "3": 0, "4": 0, "5": 0, "45": 1 }
        }
      }
    }
  ]
}

Where the Channel numbers would correlate to these fields

0 - RPM 2 - Speed in km/h 3 - Gear 4 - Throttle from 0-100 as an integer 5 - Breaks,, either 0 or 1 45 - DRS, either 0 or 1

Cubik65536 commented 4 months ago

I see... so there are 3 sets of data from 3 different time in each update...

I would still use the latest though, because anyway the point of using dash is to see the current state isn't it?

slowlydev commented 4 months ago

Okay yeah, I just thought it would look smoother when using all data. But we can try it only using the latest values for now 😄

Cubik65536 commented 4 months ago

Okay yeah, I just thought it would look smoother when using all data. But we can try it only using the latest values for now 😄

Well, maybe don't make the front end data jump while updating and plug in some transitional data will make it better? I don't think using other data in a single update would make the thing "smoother" though... Or maybe we can display sequentially the data from each time? (as long as the time between two data update allows that...)

slowlydev commented 4 months ago

Yeah I think animations for the value changes definitely would make it look better. I wanted to try the sequential sometime ago but failed, it feels really complex.

slowlydev commented 3 months ago

Hey there I am currently working on v2 and looking at the CarData. And I am not sure how I should display it. I made some components a while, quickly thrown together it looks like this:

image

(please ignore the uneven spacing...)

In Figma I threw this together:

image

But I am not a 100% happy with neither of them, so do you have any Idea on how to show it?

Cubik65536 commented 3 months ago

Hey there I am currently working on v2 and looking at the CarData. And I am not sure how I should display it. I made some components a while, quickly thrown together it looks like this:

image

(please ignore the uneven spacing...)

In Figma I threw this together:

image

But I am not a 100% happy with neither of them, so do you have any Idea on how to show it?

First I'd prefer it to be in front of DRS indicator... and I think the second one looks good actually! Anything that you feel weird about?