Web tool to make notes of the car's behaviour at Spa

Discussion in 'Third Party Content' started by AlexNordic, Apr 1, 2018.

  1. AlexNordic

    AlexNordic Registered

    Joined:
    Feb 25, 2018
    Messages:
    56
    Likes Received:
    11
    Hi all,

    The other day I was trying a new car at Spa and the setup was so all over the place for my taste, that I had trouble remembering exactly what happened on each corner. So I did a simple website to take notes of the car's behaviour on each corner, entry/mid/exit.

    https://nordicdesign.github.io/car-track-notes/

    Just uses the device session storage so there's no need to sign up to save the data. But the data will be transient. You can refresh the tab, but it will likely gone in a few hours, or if you open it on another tab/device.

    It works better on a tablet, but doable on phones too.
    Let me know if the tool is useful for you too.

    Notes
    • On older tablets like my iPad 3 you have to tap a bit longer for the sidebar to open. I reckon it's a hardware thing as it works well on newer ones
    • Why just Spa? Because that's what I use as test track. But feel free to grab the code and modify it to use a different one!
     
  2. ceecee

    ceecee Registered

    Joined:
    Jan 10, 2012
    Messages:
    691
    Likes Received:
    286
    Very nice AlexNordic, how do we go about adding other tracks (F1 season in our case !)
    Sorry for what must be a mundane question for you but I am a techie but not much of a codie :(
     
  3. AlexNordic

    AlexNordic Registered

    Joined:
    Feb 25, 2018
    Messages:
    56
    Likes Received:
    11
    No worries, I knew it'd be the case :D
    I did as a proof of concept so didn't prepare it well to expand, as well I'm not a developer, just a designer.

    The short(ish) answer would be:
    • clone/download the repo
    • duplicate index.html to whatever track you want (e.g. catalunya.html)
      • Use gulp if you know what it is. If not, ignore that and just modify the "docs" folder
    • find a SVG map of the track
    • replace the line <img src="images/put_your_SVG_image_here.svg" usemap="#image-map">
    • Use a tool like https://www.image-map.net/ so generate all the circles on the turns you want to track (or rectangles, or polygons), making sure you use the turn number on the TITLE attribute. E.g. turn one should have title="1")
    • Copy and replace the AREA lines (29 to 44)
    • Publish it wherever you want, or run it locally on your computer
    That... should do it :) Does it make some sense?

    EDIT: I've changed the JS so it reads the number of areas on the image map automatically, regardless of your track having 3 or 100 corners. Just remember to map every single one or you won't get the right summary at the end!
     
    Last edited: Apr 1, 2018
    Daytona 675 likes this.
  4. ceecee

    ceecee Registered

    Joined:
    Jan 10, 2012
    Messages:
    691
    Likes Received:
    286
    Thanks ! Will give it a try after my Motec lessons !
    Will be handy for us to have on the notebook alongside the game PC.
    Did a quick wiki crawl and found there were a couple of GP circuits with more than 20 corners (and was quite surprised !).
    Singapore 23 corners
    Yas Marina 21
    Baku, COTA 20
     
  5. Daniele Vidimari

    Daniele Vidimari Registered

    Joined:
    Apr 20, 2016
    Messages:
    659
    Likes Received:
    593
    Interesting tool :) A question: If i publish it in my website, are the data shared? Or do each user have his own?
     
  6. AlexNordic

    AlexNordic Registered

    Joined:
    Feb 25, 2018
    Messages:
    56
    Likes Received:
    11
    Each device (iPad, computer, etc) has its own data, as I'm just using sessionStorage. There are no accounts, no connections to any backend, nothing. Everything is stored in the session on your browser, and will be gone once you close the tab.

    If you want those notes more permanent (maybe so you can continue the following day), do not close the browser's tab (can't say for sure if the session will stay alive, but worth trying), or take a screenshot / write it down on a piece of paper!

    From w3schools:
    The sessionStorage property allows to save key/value pairs in a web browser.
    The sessionStorage object stores data for only one session (the data is deleted when the browser tab is closed).
     
  7. Daniele Vidimari

    Daniele Vidimari Registered

    Joined:
    Apr 20, 2016
    Messages:
    659
    Likes Received:
    593
    Thanks :)

    Meanwhile https://www.racesimulatoritaly.it/car-track-notes-master/docs/catalunya.html

    I'll add some info like: here you should reach 280+ km/h!
    Would be cool also something like a "real-time setup guide", for example, i suffer oversteer in that corner, and the tool say to me "try to soften up the rear ARB"!
     
    AlexNordic likes this.
  8. AlexNordic

    AlexNordic Registered

    Joined:
    Feb 25, 2018
    Messages:
    56
    Likes Received:
    11
    Awesome!!
    Do you mind if I add it to the original repo, including your name of course? I'll add a way to navigate between tracks so people can keep adding new ones.

    Regarding the corners, I'll tweak the JS file so it gets a variable on the html page, so it can be changed for tracks with more that 20 corners.
     
  9. Daniele Vidimari

    Daniele Vidimari Registered

    Joined:
    Apr 20, 2016
    Messages:
    659
    Likes Received:
    593
    No problem of course! I'll try to do something in the next days, this could be a really cool tool for setup newbies! :)
     
  10. AlexNordic

    AlexNordic Registered

    Joined:
    Feb 25, 2018
    Messages:
    56
    Likes Received:
    11
    Changed the code in main.js so it now reads automatically the number of areas in the image map. Just map every single corner, and it will go through each one of them when generating the summary.
     
    ceecee likes this.
  11. AlexNordic

    AlexNordic Registered

    Joined:
    Feb 25, 2018
    Messages:
    56
    Likes Received:
    11
    And a few more tweaks, same URL: https://nordicdesign.github.io/car-track-notes/
    • Added Catalunya thanks to Krusti
    • Added a menu to navigate between tracks
    • Information is now saved using localStorage, that means it's permanent on the device. No more information lost when closing the tab
    • You can clear just the track you're browsing or all tracks
    • To add a new track there's an additional step, modify the variable at end of the html.
      • E.g. where it says var track = 'spa'; change that to the track name (no whitespaces please)
     
    Daniele Vidimari likes this.
  12. ceecee

    ceecee Registered

    Joined:
    Jan 10, 2012
    Messages:
    691
    Likes Received:
    286
    Alex, now that is really cool ! :D
    Had a look on adding tracks but need to do a quick course in coding I think !
     
  13. davehenrie

    davehenrie Registered

    Joined:
    Jul 6, 2016
    Messages:
    7,454
    Likes Received:
    4,369
    I can see where this is going, not only will I have my Crew Chief 4.++ yelling at me...."Aw C'mon Dave this is not why we came here" soon I'll have a setup guide asking why are you so slow down the straight..... :) keep at it guys...
     

Share This Page