The first race of the season is behind us and it was a success! Right after the race I was looking at things to improve, to make the website even better. The last couple of weeks I got the time to look at these things and made some improvements to the website and live timing. It’s time for a new blog post!
Live timing
After the first race at Sebring, I’ve got a request from somebody. He would like to be able to select certain classes in live timing. I said to him: “I’ll see what I can do, but I can’t promise anything.”
Last weekend I had time to think about this matter and to think about a solution.
With jQuery it is really simple to show and hide things at once based on a class. That was the easy part.
Next I had to give the table row (tr) of each class the right html class, so I could select them with jQuery. First I needed to make sure the right row gets the right html class. Nick Thissen wrote a piece of code (convert.js) where the car class ID get converted to the right class name. In my example, ID: 0 will become the P class.
function showClass(driver){
var classid = driver['carclassid'];
if(classid == 0){
var color = '#074e9b';
var name = 'P';
}
if(classid == 200){
var color = '#e56a02';
var name = 'GT'
}
if(classid == 100){
var color = '#000000';
var name = 'GTC';
}
return '' + name +'';
}
As you can see at the bottom, the name will be displayed in a span. I’ve added a class to the span, so I could identify the classes.
The next step was to select the row of the table and add a the right html class to it. Thanks to the html class in the span above I could select all rows of one car class with one line of code:
$('.carClassP').parents('tr').addClass('rowP');
In normal words the code says: Find the table row of each object called ‘.carClassP’ and add the html class ‘rowP’ to it. So now all rows of the P class have the html class rowP. Then I did the same for GT and GTC. That’s the second step done.
The final step was to make a button and combine the two steps above, so when the button is pressed the corresponding class will be hidden or shown. For the classes I did not use show() or hide(), but I used toggle() instead. Toggle combines show and hide and it works just like a light switch. I gave the button an html ID so I could select it with jQuery and wrote this code:
$('#toggleP').click(function(){
$('.rowP').toggle();
});
When the button is pressed it will show or hide all rows with the html class ‘rowP’.
I also made a button “Show all” so all classes are back on screen with one press of a button. Here I did use show() instead of toggle().
$('#showAll').click(function(){
$('.rowP').show();
$('.rowGT').show();
$('.rowGTC').show();
});
That’s it. Check out the new feature on the live timing page.
Entry list
In the last blog post I wrote how I used Google Spreadsheet as the source for our entry list and standings. This worked really nice, but there was one problem. Safari and Opera did not support this method due to some CORS error. Safari did not allow to load the JSON file from Google, so I had to search for a alternative method. Good news, I’ve finally found one: publish and export the worksheet as a CSV and have a PHP file converts this CSV data to JSON on the same server as the website. So now the JSON file is loaded from “correct” server and does also work in Safari and Opera. Now all browsers are supported and it’s possible to check the entry list and standings with every browser.
The results of the race will also be added to the website, but I’m still thinking on how to put it on the website.
These two things are the biggest changes the last couple of weeks. But it won’t stop here. There are always things to improve and make the NEO website (and whole experience) better each time.
Hopefully you like these blog posts and if you have any questions about web development, feel free to contact me on Twitter or send me a PM on iRacing.
Until next time,
Niel