PDA

View Full Version : Streamer's Help: Standings & Relative & Inputs Overlay v0.1.4



TonyR
14-02-2016, 10:23
Hello Guys!

I have been working on a little javascript based website widget to easily put "Standings" data and an iRacing like "Relative" screen into your stream or simply have it running in your browser on a second screen/second PC.

It's using Lars Rosenquist's CREST API tool which saves you from the trouble of setting up a server and reading out the Shared Memory.
http://forum.projectcarsgame.com/showthread.php?30696-CREST-a-k-a-Cars-REST-API

http://i.imgur.com/knz4SqJ.png

What it can do:
- display standings of all participants in a race + gaps between the positions
- display a relative screen that shows the cars around you and color codes them if they are a lap down or up
- fully customizable because it only consists of Javascript and CSS
- display pedal and steering inputs (Changed with v0.1.1)

What it can't do (mainly because of the use of Shared Memory):
- display lap times
- display the corresponding class to a driver

What can you easily adjust without coding knowledge? In timings.html or relative.html:
- const maxDistSeconds = 20; // Default 20s: when an opponent is further away than this it won't be shown
- const maxOpponents = 2; // Default 2: When at 2 it displays 3 opponents in front of you and 3 opponents behind you
- const fakeAvSpeed = 44.44; // Default 44.44 m/s =160 kph (Average Speed of an GT3 car on an average track), used to calculate seconds from meters
- const refreshInterval = 200; // Default 200 milliseconds. how often the relative refreshes

How to install:
1. Download and run Lars' CREST Api Server (Left one, CREST2 is for pCars 2): https://cars-rest-api.com/#downloads
2. Download the widget: https://onedrive.live.com/redir?resid=CC4DAC000ED7B9CE!663628&authkey=!AJyhY2KZ9-8hPAM&ithint=file%2czip
3.a Open one of the websites and have fun displaying it locally on your PC or on a second PC*
3.b If you want to stream: Add one or both of the websites as a BrowserSource in OBS**
4. Start pCars
5. Profit!

* If you want to display the widgets on another PC (or tablet) you need to edit the REST URL in the respective html file from "http://localhost:8080/[...]" to the IP of your gaming PC, for example "http://192.168.0.XXX:8080/[...]". How to find out your IP >> (http://www.helpfulpctools.com/HowToCheckYourLocalIP.php)

** Best to use this version prepacked with the Browser plugin: https://github.com/jp9000/obs-studio/releases/download/0.13.1/OBS-Studio-0.13.1-With-Browser-Installer.exe
Or you install the PlugIn manually: https://obsproject.com/forum/resources/browser-plugin.115/

Since this is the first version of that little tool it can still contain errors. Tell me what you think and also if you find errors not listed below.
Known errors:
- unicode character do not seem to be shown correctly˛
- might not work with Internet Explorer and Microsoft Edge

MOD: Replace Steam Nicknames with a list of predefined names/real names:
Explanation: http://forum.projectcarsgame.com/showthread.php?44995-Streamer-s-Help-Standings-amp-Relative-amp-Inputs-Overlay-v0-1-4&p=1285924&viewfull=1#post1285924
Download: https://onedrive.live.com/redir?resid=CC4DAC000ED7B9CE!876738&authkey=!AN27gqLIeEbtOQg&ithint=file%2czip

˛the mod also helps to circumvent the missing characters problem, as you can replace the faulty name with the actual one


https://www.youtube.com/watch?v=CK2ZjvztOkk

Thanks for your time! Maybe it's useful to one or another.
Best Regards, Tony

Changelog:


v0.1.4 (16.05.2016): - bug fix for some refreshing issue (big thanks to Ashnoom for this!)
v0.1.3 (20.02.2016): - Added rolling standings (moving_standings.html)
- Added position changes during the race compared to quali (can be omitted by a simple display:none in the css class td.colPosChange
v0.1.2 (18.02.2016): - Changed purpose of Gap display in timings.html for non-race sessions (now total laps).
- Removed lapping/lapped color codes from relative.html in non-race session.
- Added correct track length parameter to relative (before it was calculated)
- Corrected viewed participant in relative when just standing around in non-race sessions
v0.1.1 (15.02.2016): - Added Pedal and Steering inputs as an extra widget


More Screenshots:
http://i.imgur.com/L9x4nCL.png
http://i.imgur.com/wXUfrvu.png
http://i.imgur.com/VCd2L3k.png
http://i.imgur.com/0DGMOYD.png

Download link: https://onedrive.live.com/redir?resid=CC4DAC000ED7B9CE!663628&authkey=!AJyhY2KZ9-8hPAM&ithint=file%2czip & CREST tool https://cars-rest-api.com/#downloads

Shadowoff
14-02-2016, 11:56
....

Hey,
I downloaded your mod and started Lars CREST API server, but when I open any of the html. files, a new tab opens (I think this is normal), but there only stays "loading" and nothing is happening...
Did I made something wrong?

M4MKey
14-02-2016, 11:57
This can be very nice. I just need a way to make it visible in front of my main screen. On top of the windowed game. Does anyone know a good software to do that ?

TonyR
14-02-2016, 12:06
Hey,
I downloaded your mod and started Lars CREST API server, but when I open any of the html. files, a new tab opens (I think this is normal), but there only stays "loading" and nothing is happening...
Did I made something wrong?

Did you start a race session? It only shows data when there is a session going on.

Edit: I just noticed that it doesn't work with Internet Explorer or Microsoft Edge, for some reason.
However it works without a problem with Chrome, Opera, Firefox

Shadowoff
14-02-2016, 12:38
...doesn't work with Internet Explorer or Microsoft Edge, for some reason.
However it works without a problem with Chrome, Opera, Firefox

Thats the problem I think, I use Microsoft Edge

Lars Rosenquist
14-02-2016, 14:59
Might be a CORS issue. Some browsers are very picky when it comes to this, others less so.

TonyR
15-02-2016, 00:47
Changelog:
v0.1.1 (15.02.2016): Added Pedal and Steering inputs as an extra widget

http://i.imgur.com/knz4SqJ.png
http://i.imgur.com/L9x4nCL.png

TonyR
15-02-2016, 11:53
This can be very nice. I just need a way to make it visible in front of my main screen. On top of the windowed game. Does anyone know a good software to do that ?

I was thinking about that yesterday and also googling a little bit but I couldn't really find something.

However it MUST be possible to do what you need here. The OBS browser plugin uses the Chrome browser engine internally and it's able to display websites without borders and stuff as well so the solution is definitely out there, but how to find it!? :D

fresquito
15-02-2016, 16:05
Hi and thanks for this.

I can't seem to make it run properly.

In the instructions I'm missing a lot of information. Like, I download the widget and what do I do with it? Should I use Crest1 or 2? I'm a little lost here.

I can get the site to get the info, but it's shown without any format.

TonyR
15-02-2016, 16:21
In the instructions I'm missing a lot of information. Like, I download the widget and what do I do with it? Should I use Crest1 or 2? I'm a little lost here.

Crest 1, Crest 2 is for pCars 2 AFAIK :)


I can get the site to get the info, but it's shown without any format.

What do you mean with that? When you start timings.html for example, it doesn't show anything?

M4MKey
15-02-2016, 16:36
I was thinking about that yesterday and also googling a little bit but I couldn't really find something.

However it MUST be possible to do what you need here. The OBS browser plugin uses the Chrome browser engine internally and it's able to display websites without borders and stuff as well so the solution is definitely out there, but how to find it!? :D

Yup... searched a little bit more but can't really find something useful. This would make your app way more useful for players ( and not only streamers ). No offense btw, amazing work on this ! :)

fresquito
15-02-2016, 17:06
Crest 1, Crest 2 is for pCars 2 AFAIK :)

What do you mean with that? When you start timings.html for example, it doesn't show anything?
Okay, so I need to open one of the websites of the widget. That clears everything up.

You've made my day, sir. Thanks a lot.

Stocky
16-02-2016, 01:36
Can this run real time during a race, or is this for streaming only?

I'd love to have the standings & all positions on the screen, during a race.

TonyR
16-02-2016, 02:24
Can this run real time during a race, or is this for streaming only?

I'd love to have the standings & all positions on the screen, during a race.

It's running in your web browser, so you need a second monitor or second PC to show it real time if you don't want to use it for streaming.

As M4M said before, it would be nice to also run it on your main monitor on top of the game but right now there is no solution known yet.

TonyR
16-02-2016, 19:33
Yup... searched a little bit more but can't really find something useful. This would make your app way more useful for players ( and not only streamers ). No offense btw, amazing work on this ! :)

Good News!
Especially for you M4M, I got it working the way you wanted it. On top of a Project CARS in windowed mode (btw. is there any way to remove the title bar of pCars when in windowed mode?)

It works but needs some testing and stuff, maybe I can release it tomorrow.

http://i.imgur.com/sHyP0eh.png

M4MKey
16-02-2016, 22:30
That's nice news... Now tell me it doesn't interfere with injectors like SweetFX or Reshade and I jump to the ceiling ! :p

About using the game borderless... Try "Windowed Borderless Gaming". It works for any application btw. I'm using it since months :) works great ^^

TonyR
17-02-2016, 00:22
That's nice news... Now tell me it doesn't interfere with injectors like SweetFX or Reshade and I jump to the ceiling ! :p

About using the game borderless... Try "Windowed Borderless Gaming". It works for any application btw. I'm using it since months :) works great ^^

It doesn't inject anything (I don't even have a clue how to do that :D ) so it shouldn't interfere with anything. It just adds a window which is "always on top" so it only works if the game is in windowed mode.

Here's a video showing how it works:

https://www.youtube.com/watch?v=oBPFueCL4IY

And here's a download link (I won't put it into the initial post yet, I'm waiting until someone tested it and confirms it's working for them as well).
If you wonder about the size of the package, that's because a whole Chromium browser comes with it, however you only need to extract the Zip and start "BorderlessBrowser.exe" and choose one of the html files I provide in Post #1 within the tool, it's as easy as that.

https://onedrive.live.com/redir?resid=CC4DAC000ED7B9CE!674430&authkey=!AOc-1rN5oFf4EmM&ithint=file%2czip

t0daY
17-02-2016, 01:43
That's nice news... Now tell me it doesn't interfere with injectors like SweetFX or Reshade and I jump to the ceiling ! :p

About using the game borderless... Try "Windowed Borderless Gaming". It works for any application btw. I'm using it since months :) works great ^^

Dont you lose fps while in borderless windowed mode? Had till now only bad experience with borderless windowed mode.

Anyway great work Tony, going to use to 100%! :)

OBigO
17-02-2016, 04:35
Been looking for something like this since pcars came out! I used https://github.com/Codeusa/Borderless-Gaming/releases to make it borderless and it worked like a charm!

Would it be possible to put a lap count somewhere so I can get rid of the pcars hud?

Thanks Tony!

M4MKey
17-02-2016, 07:59
It doesn't inject anything (I don't even have a clue how to do that :D ) so it shouldn't interfere with anything. It just adds a window which is "always on top" so it only works if the game is in windowed mode.

And here's a download link (I won't put it into the initial post yet, I'm waiting until someone tested it and confirms it's working for them as well).
If you wonder about the size of the package, that's because a whole Chromium browser comes with it, however you only need to extract the Zip and start "BorderlessBrowser.exe" and choose one of the html files I provide in Post #1 within the tool, it's as easy as that.

https://onedrive.live.com/redir?resid=CC4DAC000ED7B9CE!674430&authkey=!AOc-1rN5oFf4EmM&ithint=file%2czip

Nice :) Will try tonight when I'll be at home :)

M4MKey
17-02-2016, 18:49
Hmmm. this is working until I click on my game window and it goes behind. It seems to work for other apps. Maybe Windowed borderless is doing something here ^^'

Also, the window created by this tool is bigger than what is written inside o_o.

OBigO
17-02-2016, 19:08
Try using the borderless gaming link I posted.

inthebagbud
17-02-2016, 19:13
Added to pcars resources page http://forum.projectcarsgame.com/showthread.php?38864-Forum-Resources-for-Pcars

TonyR
17-02-2016, 22:40
Hmmm. this is working until I click on my game window and it goes behind. It seems to work for other apps. Maybe Windowed borderless is doing something here ^^'

Also, the window created by this tool is bigger than what is written inside o_o.

Okay, that's odd. So probably it doesn't like the windowed borderless tool. Does it work when you are just trying normal windowed?

Can you send me a screenshot what you mean with the 2nd thought?

TonyR
18-02-2016, 02:25
New version v0.1.2 (18.02.2016) (only minor changes)

Changelog:
- Changed purpose of Gap display in timings.html for non-race sessions (now total laps).
- Removed lapping/lapped color codes from relative.html in non-race session.
- Added correct track length parameter to relative (before it was calculated)
- Corrected viewed participant in relative when just standing around in non-race sessions

BulletEyeDK
19-02-2016, 10:08
Hi Tony, this looks awesome, great work ;)

A few questions:

1. is it PC only ? (shared memory)
2. will it work with replays ?

TonyR
19-02-2016, 15:25
1. is it PC only ? (shared memory)
2. will it work with replays ?

1. Yes, for now. Lars said he wants to integrate UDP into his tool so that would make it usable for me as well and I can extend to consoles and have the additional information.

2. It does work, kind of. Unfortunately the data is very faulty in your average replay so the "inputs.html" is the only really useful feature there. See here (positions and relative put out wrong data after a few laps, I don't know the reason):


https://www.youtube.com/watch?v=T06FKlOo2uI&t=4

TonyR
19-02-2016, 23:39
Changelog:
v0.1.3 (20.02.2016):
- Added rolling standings (moving_standings.html) (see at 0:57 in the video, on top)
- Added position changes during the race compared to quali (can be omitted by a simple display:none in the css class td.colPosChange

http://i.imgur.com/TejpYY5.png
https://www.youtube.com/watch?v=l_zUimLl7Us

OBigO
20-02-2016, 03:23
Hey Tony! Would it be possible to make an alternative standings where the gaps are cumulative and only updated after each sector?

I was thinking something like:

01 Driver Name - Lap No.
02 Driver Name - +x.x (Appears after each sector is finished and stays for ~5 secs)
03 Driver Name - +x.x (Same as above but time difference from 1st, instead of difference from 2nd)

Just a suggestion not sure if it's even possible! Am really enjoying it as is though! Thanks a lot!

BulletEyeDK
20-02-2016, 09:22
Hi Tony, thanks for the further info, im hoping for UDP support as you explained :)

TonyR
20-02-2016, 17:17
Hey Tony! Would it be possible to make an alternative standings where the gaps are cumulative and only updated after each sector?

I was thinking something like:

01 Driver Name - Lap No.
02 Driver Name - +x.x (Appears after each sector is finished and stays for ~5 secs)
03 Driver Name - +x.x (Same as above but time difference from 1st, instead of difference from 2nd)

Just a suggestion not sure if it's even possible! Am really enjoying it as is though! Thanks a lot!

Having the gap to the leader is possible, in fact I had it like that before but i thought it's more useful to have the gaps to the one in front, maybe I add a switch.
Unfortunately I don't have data about sector times in Shared Memory so it's not possible to have gaps on sectors.

OBigO
20-02-2016, 18:54
Ah ok. I thought seeing as you have the relative standings it would make more sense to have cumulative time difference. No biggy just means I've got to do a bit of maths to find out how far i'm off the leader ;)

OBigO
20-02-2016, 18:56
Main thing for me would be to add which lap number we are on so that I don't need to have the hud showing.

Pamellaaa
22-02-2016, 11:11
Awesome work Tony, I was using this in yesterdays race and the relative was a big big help to know when people were lapping and how much time I had, I will have a play with running it as an overlay to the main game soon as that would be the ideal.

One thing from yesterday, I used the relative in one window and it was faultless but in another browser window (and another browser actually - Vivaldi) I had the standings, this was working but only partially as I could only ever see the top 3 and not the rest of the field, this might have been a browser issue and I will continue to test to see if I can isolate the issue any further.

SlowBloke
22-02-2016, 12:22
Thank you Tony!! This will help a LOT in upcoming races to be more informed on whats coming up ahead and behind (ie be more prepared to be lapped for me usually :)) - top top stuff !

luti1976
22-02-2016, 12:43
great job tony, you can put the best time on the track?

TonyR
23-02-2016, 07:34
great job tony, you can put the best time on the track?

I can but I want to wait until I have this information for every participant which I'll get with UDP support in CREST, hopefully very soon.

Ramiboo
23-02-2016, 13:48
Hey TonyR!!!!!

Have you tried to use Overwolf to bring your browser screens into the game and not just in the broadcast?

TonyR
23-02-2016, 15:33
Hey TonyR!!!!!

Have you tried to use Overwolf to bring your browser screens into the game and not just in the broadcast?

Hey Rami! No, is this possible? How?

I only wrote this little tool to make it work with windowed mode: http://forum.projectcarsgame.com/showthread.php?44995-Streamer-s-Help-Standings-amp-Relative-amp-Inputs-Overlay-v0-1-3&p=1235522&viewfull=1#post1235522

Ramiboo
23-02-2016, 16:06
I found this on the overwolf website. I'll try to read through it and see if what you've done can be turned into an app in Overwolf. Would be a cool way of bringing it onto the screen. I don't use overwolf at the moment as I've got a second screen, and I've got to know most people's voices on TS so don't think I need an overlay telling me who is speaking, but I know overwolf can do quite a bit more including overlay a browser so I would think it could be pretty good for your app.

http://developers.overwolf.com/documentation/#3rd-part-game-apis

I've no programming skills so it might make more sense to you...

I did hear a couple of people moaning about overwolf in the past though, but I'm not sure why.... anyone????

Pamellaaa
23-02-2016, 16:19
I did hear a couple of people moaning about overwolf in the past though, but I'm not sure why.... anyone????

For me its because it sometimes decides that it no longer has a TS overlay and has no settings related to one and no amount of resetting or re-installing it can convince it otherwise, I have had it happen two or three times on different windows installs and never found a solution, I always get bored after looking for a couple of hours and simply resort to TS notifier.

TonyR
24-02-2016, 03:02
I found this on the overwolf website. I'll try to read through it and see if what you've done can be turned into an app in Overwolf. Would be a cool way of bringing it onto the screen. I don't use overwolf at the moment as I've got a second screen, and I've got to know most people's voices on TS so don't think I need an overlay telling me who is speaking, but I know overwolf can do quite a bit more including overlay a browser so I would think it could be pretty good for your app.

http://developers.overwolf.com/documentation/#3rd-part-game-apis

I've no programming skills so it might make more sense to you...

I did hear a couple of people moaning about overwolf in the past though, but I'm not sure why.... anyone????

I looked into it now and I have to say that is a really nice find Ramiboo, thanks!

Overwolf Apps seem to work with HTML/Javascript so it shouldn't be too much work to port it for the App.

When I get some time I will see if I can do something with that information :)

Ramiboo
24-02-2016, 09:35
I looked into it now and I have to say that is a really nice find Ramiboo, thanks!

Overwolf Apps seem to work with HTML/Javascript so it shouldn't be too much work to port it for the App.

When I get some time I will see if I can do something with that information :)

Hmm, well, if you get time have a look, however, I installed overwolf last night to have a look at how well it ran. I'm running windows 10 and maybe that was my issue, but it didn't work that well for pCars!! The dock was the problem. It wouldn't activate until I hit the Cntl+Tab shortcut, and when it did, I'd then loose keyboard and mouse control until I Cntl+Tab'ed to hide the dock again. Even then the esc key wouldn't work until I Alt+Tab'ed away from the game and back again.

There are lots of videos and reports that overwolf is working very well for lots of people, so I'll raise a thread with them to see if I can get some help to make it a bit more stable.

As you say, it all looks HTML/Javascript, so could be an easy port. However, your thread here doesn't want to get inundated with overwolf support questions....

t0daY
24-02-2016, 09:41
Hmm, well, if you get time have a look, however, I installed overwolf last night to have a look at how well it ran. I'm running windows 10 and maybe that was my issue, but it didn't work that well for pCars!! The dock was the problem. It wouldn't activate until I hit the Cntl+Tab shortcut, and when it did, I'd then loose keyboard and mouse control until I Cntl+Tab'ed to hide the dock again. Even then the esc key wouldn't work until I Alt+Tab'ed away from the game and back again.

There are lots of videos and reports that overwolf is working very well for lots of people, so I'll raise a thread with them to see if I can get some help to make it a bit more stable.

As you say, it all looks HTML/Javascript, so could be an easy port. However, your thread here doesn't want to get inundated with overwolf support questions....

For me Overwolf is also not working very well. Crashes all the time, sometimes it would show the teamspeak overlay sometimes not. Also I think it make the game itself more unstable, but thats just my personal opinion^^

billzkid
26-02-2016, 11:37
I also had the same feeling. When using overwolf, pcars crashed 3 times in online games. After uninstalling it, it hasn't happened yet.

TonyR
26-02-2016, 13:39
There is sometimes an issue with the Standings (timings.html).

For some reason sometimes it doesn't show all participants in a lobby after you have been in another lobby before.
I will investigate this error. For now to prevent this happening, just refresh the html (F5 in your browser or Disabling/Re-Enabling the Browser Source in OBS).
Sorry for inconvenience.

Speeddmon91
06-03-2016, 15:26
Hi Tony,
first of all really appreciate the time and effect you put into this app and now onto the point of me posting is the anyway to get the standing to show fastest lap when in qualifying instead of lap counter

TonyR
06-03-2016, 22:18
Hi Tony,
first of all really appreciate the time and effect you put into this app and now onto the point of me posting is the anyway to get the standing to show fastest lap when in qualifying instead of lap counter

Unfortunately I only get lap timing for the own car and not for others with Shared Memory.
It will get UDP support somewhen in the future then I will add those features ;)

F1_Racer68
07-03-2016, 21:50
Tony,

I really like what you have done here, and for me locally it is working very well during a race.

What I would like to do however is to have the elements (moving_standings.html, timing.html and perhaps relative.html) integrated into my league's website to provide a form of timing and scoring page for use by both racers and "spectators". What guidance can you give on making this happen? I am particularly interested in the arrangement of the elements into a single HTML page.

The CREST API will run on my local PC and the website will point to that local PC as well (both are on the same LAN segment and IP subnet). This part I have figured out. It's mostly the creation of the web page itself that I am struggling with.

TonyR
08-03-2016, 12:46
Tony,

I really like what you have done here, and for me locally it is working very well during a race.

What I would like to do however is to have the elements (moving_standings.html, timing.html and perhaps relative.html) integrated into my league's website to provide a form of timing and scoring page for use by both racers and "spectators". What guidance can you give on making this happen? I am particularly interested in the arrangement of the elements into a single HTML page.

The CREST API will run on my local PC and the website will point to that local PC as well (both are on the same LAN segment and IP subnet). This part I have figured out. It's mostly the creation of the web page itself that I am struggling with.

Hey mate!

If I understand you correctly you want others to see your standings from another PC outside of your network, right?
That's most probably not possible as it's Javascript based which runs client side so everyone who wants to see it needs to be in your LAN (as CREST only works in LAN).

Throwing Standings and Relative into one file is btw no problem you can just put the two files together like that:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="UTF-8"/>
</head>
<body>



<table>
<tr></tr>
<tr><td>
<h1 id="head">Standings</h1>
<table id="standings">
<tr>
<td>Loading...</td>
</tr>
</table>
</td>

<td>
<h1 id="head">Relative</h1>
<table id="relative">
<tr>
<td>Loading...</td>
</tr>
</table>
</td></tr>
</table>
<script type="text/javascript" charset="utf-8" src="jquery-2.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" >

///////////////////////////////////////////////////////
//// ////
//// Made by Tony Richter, 20.02.2016, v0.1.3 ////
//// ////
///////////////////////////////////////////////////////

const refreshInterval = 2000; // Default 2000 milliseconds. how often the standing refreshes
const fakeAvSpeed = 44.44; // Default 44.44 m/s =160 kph (Average Speed of an GT3 car on an average track)

var oldPdata;
var qualiResults = new Array();

function getFakeSecondsFromDistance(d1, d2)
{
return ((d1-d2)/fakeAvSpeed).toFixed(1); // It's fake because we don't take into account car speeds but only a preset average speed (applies when using const fakeAvSpeed)
}
function SortByRacePosition(a, b){
var aPos = a.mRacePosition;
var bPos = b.mRacePosition;
return ((aPos < bPos) ? -1 : ((aPos > bPos) ? 1 : 0));
}

function refreshStandings(){

$.getJSON('http://localhost:8080/crest/v1/api?participants=true&gameStates=true', function(data) {

$("#standings tr").remove(); $("#head").hide();

if (!data || data.gameStates.mGameState < 2) return;
$("#head").show();

var pData = data.participants.mParticipantInfo; //for easier access

var isRace = data.gameStates.mSessionState == 5;

var PlayerIndex = data.participants.mViewedParticipantIndex;
PlayerIndex = data.participants.mParticipantInfo[PlayerIndex].mRacePosition-1; //PlayerIndex after sorting

pData.sort(SortByRacePosition); // Important, sorting to raceposition as it's often not sorted

if (isRace && data.gameStates.mRaceState == 1)
for (var i=0; i<pData.length; i++) qualiResults[pData[i].mName] = i;

for (var i=0; i<pData.length; i++)
{
var row = $("<tr/>");

$("#standings").append(row);

//// Position ////
var posTD = $("<td class='position'/>");

if (i==PlayerIndex)
{
row.addClass("driver");
posTD.addClass("driver");
}

if (pData[i].mRacePosition<10) // adding leading zero for better visuals
posTD.append("0"+pData[i].mRacePosition);
else
posTD.append(pData[i].mRacePosition);

row.append(posTD);

//// Position Change ////
if (isRace && qualiResults)
{
var change = qualiResults[pData[i].mName]-pData[i].mRacePosition+1;
var changeTD;
if (change == 0) changeTD = $("<td class='colPosChange'></td>");
if (change > 0) changeTD = $("<td class='colPosChange gainedPos'>+"+change+"</td>");
if (change < 0) changeTD = $("<td class='colPosChange lostPos'>"+change+"</td>");
row.append(changeTD);
}

//// Name ////
row.append($("<td class='colName'/>").append(pData[i].mName));

if (isRace)
{
if (i>0) // showing the gaps between two drivers
{
var dist = getFakeSecondsFromDistance(pData[i-1].mCurrentLapDistance,pData[i].mCurrentLapDistance);
var lapDiff = pData[i-1].mCurrentLap-pData[i].mCurrentLap;

if (lapDiff!=0) // if there is one or more laps difference. fires up while crossing s/f. See more sophisticated apporach in relative if you don't want that
dist = lapDiff + "L";

} else var dist=pData[0].mCurrentLap+"L";
} else dist = pData[i].mLapsCompleted + "L";

row.append($("<td class='colGap'/>").append(dist));

////// Test for Position Change /////
if (oldPdata)
{
// gained position
if (i+1<=oldPdata.length-1 && pData[i].mName == oldPdata[i+1].mName)
row.addClass("gainedPos");

// lost position
if (i>0 && pData[i].mName == oldPdata[i-1].mName)
row.addClass("lostPos");
}



}

oldPdata = pData;
});
}

setInterval(refreshStandings, refreshInterval);

</script>


<script language="javascript" type="text/javascript" src="jquery-2.2.0.min.js"></script>
<script language="javascript" type="text/javascript">

///////////////////////////////////////////////////////
//// ////
//// Made by Tony Richter, 20.02.2016, v0.1.3 ////
//// ////
///////////////////////////////////////////////////////

const maxDistSeconds = 40; // Default 40s: when an opponent is further away than this it won't be shown
const maxOpponents = 2; // Default 2: When at 2 it displays 3 opponents in front of you and 3 opponents behind you
var carSpeed = 44.44; // Use that or average speed for fake seconds => see in getFakeSecondsFromDistance below
const refreshIntervalRelative = 200; // Default 200 milliseconds. how often the relative refreshes

var maxLapDist = 0; //used to determine track length


function SortByDistance(a, b) // Sorting function, to sort the array of participant data after distances on track
{
var aPos = a.mCurrentLapDistance;
var bPos = b.mCurrentLapDistance;
return ((aPos < bPos) ? -1 : ((aPos > bPos) ? 1 : 0));
}

function refreshRelative(){
$.getJSON('http://localhost:8080/crest/v1/api?participants=true&eventInformation=true&carState=true&gameStates=true', function(data)
{

$("#relative tr").remove(); $("#head").hide();

if (!data || data.gameStates.mGameState < 2) return;

var isRace = data.gameStates.mSessionState == 5;

carSpeed = data.carState.mSpeed;
if (carSpeed <1 && data.gameStates.mRaceState<2) return; //if sitting in the garage don't display anything
if (carSpeed==0) carSpeed=0.001; //because it will be divisor and we don't want to destroy the world.

$("#head").show();

var pData = data.participants.mParticipantInfo; // easier access to the data
var DriverData = pData[data.participants.mViewedParticipantIndex]; //only used to get the driver index after sorting
var DriverIndex = 0;
maxLapDist = data.eventInformation.mTrackLength;

pData.sort(SortByDistance);

for (var i=0; i<pData.length; i++)
{
if (pData[i].mName == DriverData.mName) DriverIndex=i; //there you go, new driverIndex found
}

////// Getting yourself, the driver
var pos = pData[DriverIndex].mRacePosition<10?"0"+pData[DriverIndex].mRacePosition:pData[DriverIndex].mRacePosition;
$("#relative").append($("<tr class='driver'><td class='position driver'>"+pos+"</td><td class='colNameR'>"+
pData[DriverIndex].mName+"</td><td class='colGap'></td></tr>"));

/////// Getting guys in front of us
var i=DriverIndex+1;
var j=0;
var distAdd = 0; // when over s/f line need to add maximum distance
while (j<=maxOpponents)
{
if (i>=pData.length) {i=0; distAdd=maxLapDist;}

var pos = pData[i].mRacePosition<10?"0"+pData[i].mRacePosition:pData[i].mRacePosition;
var secs = getFakeSecondsFromDistance(pData[i].mCurrentLapDistance+distAdd,pData[DriverIndex].mCurrentLapDistance);
if (secs < maxDistSeconds)
{
if (secs >= 60) secs="1m";
var row = $("<tr/>");
row.append("<td class='position'>"+pos+"</td><td class='colNameR'>"+pData[i].mName+"</td><td class='colGap'>"+secs+"</td>");
if (isRace && pData[i].mRacePosition<pData[DriverIndex].mRacePosition && pData[i].mCurrentLap>pData[DriverIndex].mCurrentLap &&
!(pData[i].mCurrentLap==pData[DriverIndex].mCurrentLap+1 && pData[i].mCurrentLapDistance<pData[DriverIndex].mCurrentLapDistance))
row.addClass("lapping");
if (isRace && pData[i].mRacePosition>pData[DriverIndex].mRacePosition)
row.addClass("lapped");
$("#relative tbody").prepend(row);
} else $("#relative tbody").prepend($("<tr><td class='position'></td><td class='colNameR'></td><td class='colGap'></td></tr>"));
i+=1;
j++;
}

//////// Getting the guys behind us
var i=DriverIndex-1;
var j=0;
var distAdd = 0;
while (j<=maxOpponents)
{
if (i<0) {i=pData.length-1; distAdd=maxLapDist;}

var pos = pData[i].mRacePosition<10?"0"+pData[i].mRacePosition:pData[i].mRacePosition;
var secs = getFakeSecondsFromDistance(pData[i].mCurrentLapDistance,pData[DriverIndex].mCurrentLapDistance+distAdd);
if (secs > -maxDistSeconds)
{
if (secs <= -60) secs="-1m";
var row = $("<tr/>");
row.append("<td class='position'>"+pos+"</td><td class='colNameR'>"+pData[i].mName+"</td><td class='colGap'>"+secs+"</td>");
if (isRace && pData[i].mRacePosition<pData[DriverIndex].mRacePosition)
row.addClass("lapping");
if (isRace && pData[i].mRacePosition>pData[DriverIndex].mRacePosition && pData[i].mCurrentLap<pData[DriverIndex].mCurrentLap &&
!(pData[i].mCurrentLap+1==pData[DriverIndex].mCurrentLap && pData[i].mCurrentLapDistance>pData[DriverIndex].mCurrentLapDistance))
row.addClass("lapped");
$("#relative tbody").append(row);
} else $("#relative tbody").append($("<tr><td class='position'></td><td class='colNameR'></td><td class='colGap'></td></tr>"));
i-=1;
j++;
}

});
}

setInterval(refreshRelative, refreshIntervalRelative);

</script>
</body>
</html>
But you probably need to fiddle around with the CSS a little bit to make it pretty.

Having normal standings and moving standings on one page is a bit problematic as I would need to test it because they use the same code basically.

F1_Racer68
08-03-2016, 13:51
Thanks Tony.

That explains why I couldn't see data on my phone from my website yet my local pc was seeing it from the website (phone was accessing from outside of LAN).

Oh well.... At least I will have the info for myself during the races. Advantage me! ��

Kevin Leaune
10-03-2016, 01:25
Hi Tony!

Congratulations for your work !

Is that what you think do a console version in the coming weeks ?

TonyR
10-03-2016, 14:03
Hi Tony!

Congratulations for your work !

Is that what you think do a console version in the coming weeks ?

Hey Kevin,

when Lars finds some time to implement UDP into the CREST tool it will immediately be possible to use the existant script for consoles as well and I will also add the missing features that will be available then.

However I can't give you a date when this will happen ;)

Best Regards,
Tony

Kevin Leaune
10-03-2016, 16:44
Great !

If you need help with the design please do not hesitate :)

I am willing to help you even for tests

hagar147
13-03-2016, 20:37
Hi Tony,

As a long-term subscriber to your YouTube channel I just had to try your tool and I must say I am amazed! Below you can find a short video in which I have tested the tool and it works like a charm.


https://www.youtube.com/watch?v=fRZEbroZZOE

I am a bit reluctant to race in windowed mode so I look forward to a solution of getting the overlays visible when playing full screen.

Keep up the excellent work!

falcon2081
14-03-2016, 05:33
For those with the Overwolf problems. You need to make Overwolf inject the hook in "safe mode". Solves the TS overlay issues. This is very easily done and all it requires is you editing a file. You know where to find me so let me know. :)

NoBrakes
15-03-2016, 08:34
Thanks a lot for this tool. I tried it yesterday alltogether with OBS Studio and did my first test runs with live streaming plus an overlay and it worked like charme!

If only SMS would spend a little more effort on its shared data and the multiplayer functions we could get something like this in R3E (https://forum.sector3studios.com/index.php?threads/spectator-broadcast-guide.3046/) someday - but your tool together with crest and OBS is alone one step closer to a better league racing experience :victorious:

IGCtci
09-05-2016, 17:30
Hey Tony, and the other guys on this thread. As the other have said great work on this widget. However, I am having a couple of problems.

1. The I can't seem to get the borderless browser to work with Windows 10. Just does noting when I try to launch it. Anyone else having/solved this problem.
2. I am currently running the widget in Chrome, but can't get the windows to stay on top of Pcars. I have tried the AutoHotKey method, but again no luck so far. Anyone got any info on how to achieve this with other browsers. (btw my game is in windows mode)

Thanks in advance

TonyR
09-05-2016, 21:18
Hey Tony, and the other guys on this thread. As the other have said great work on this widget. However, I am having a couple of problems.

1. The I can't seem to get the borderless browser to work with Windows 10. Just does noting when I try to launch it. Anyone else having/solved this problem.
2. I am currently running the widget in Chrome, but can't get the windows to stay on top of Pcars. I have tried the AutoHotKey method, but again no luck so far. Anyone got any info on how to achieve this with other browsers. (btw my game is in windows mode)

Thanks in advance

Hey mate!

1. It's still working for me here, so I can't really say what the problem is. Maybe you can try to redownload it and make sure to extract all the files into one folder.
2. Yeah, that's the problem with normal windows. That's why I wrote that little too which doesn't seem to work for you :/

I just tried it again and it's still working nicely. It needs .Net Framework 4.5 so if that's not installed the problem could lie there.

IGCtci
10-05-2016, 03:44
Hey mate!

1. It's still working for me here, so I can't really say what the problem is. Maybe you can try to redownload it and make sure to extract all the files into one folder.
2. Yeah, that's the problem with normal windows. That's why I wrote that little too which doesn't seem to work for you :/

I just tried it again and it's still working nicely. It needs .Net Framework 4.5 so if that's not installed the problem could lie there.

Thanks as always for the quick response and advice. I will check everything again and redownload the files. I have now solved point 2. and got it working with other browsers, but they are not transparent, so block everything underneath them. The border less browser solution you have found is for sure the best.

Lynx2000
10-05-2016, 15:07
absolutely great!

Does anyone know how to remove the word standings above the moving standings bar? as does not fit into my overlay at the moment.

Thx in advance

Stefan

Ashnoom
10-05-2016, 19:54
I've altered both the relative.html and timings.html to work correctly when switching sessions with more members than the previous session.
I've also fixed the timings.html to allow for more than one position change per person per update
I've also added a combined.html which combines the relative and timings in one website for those who find it useful

232930

IGCtci
12-05-2016, 20:02
Hi Guys,

First a question. I would like to add a few other items for display through this overlay method, such as gear, speed, some telemetry, etc. Could someone help with this? I am happy to modify the html files myself, but just need some help with finding right PCars shared memory values.

Ok, not the main reason for this post. So I have not been able to get the Borderless Browser to work on my Windows 10 machine, it just hangs when I try to run the .exe file. So I got busy looking for a workaround and this is what I have come up with.

Firstly, I launch the html files in chrome, opening chrome as an app, so no tabs, address line, buttons, etc. You can do a similar thing with firefox if you prefer.
http://superuser.com/questions/33548/starting-google-chrome-in-application-mode

Then I use AutoHotKey to force the window to stay on top.
https://autohotkey.com/

Then because the window is not transparent I use a free tool called ‘See Through Windows’ to make the window transparent, so you can see project cars underneath it.
http://www.mobzystems.com/tools/seethroughwindows/

This is far less elegant than TonyR’s method, but for anyone else having trouble with the Borderless Browser, this might also work for you.

I have only just discovered all of this so am still testing, and have writen a simple .bat file to do all most of these steps in one click. AutoHotKey could also be used to automate the whole process.

Finally, the beauty of the AutoHotkey and the See Through Windows tool is that you can now overlay any window on any windowed gaming screen, so for example, if you use PCar Profiler, you can now overlay any of the gauges or other information right there in front of you. This should work for any windowed full screen app you are running, so video in video, live website feeds over any live race you’re watching, etc, etc.

Hope this works for you too!

TonyR
16-05-2016, 20:05
absolutely great!

Does anyone know how to remove the word standings above the moving standings bar? as does not fit into my overlay at the moment.

Thx in advance

Stefan

Hey Stefan!
You can change the css file or add a css rule to OBS.
I would recommend the first. Search for "h1" css rule in the file (should be near the top) and add the property "display: none;" to it:)


I've altered both the relative.html and timings.html to work correctly when switching sessions with more members than the previous session.
I've also fixed the timings.html to allow for more than one position change per person per update
I've also added a combined.html which combines the relative and timings in one website for those who find it useful

232930

Ashnoom, thank you veeery much for your work in this!

In case anyone else missed it, there was a bug where sometimes the whole script needed reloading because it wasn't refreshing correctly.
I will update the first post with the script and you should redownload the html files (https://onedrive.live.com/redir?resid=CC4DAC000ED7B9CE!663628&authkey=!AJyhY2KZ9-8hPAM&ithint=file%2czip) to get the bug fix.


Hi Guys,

First a question. I would like to add a few other items for display through this overlay method, such as gear, speed, some telemetry, etc. Could someone help with this? I am happy to modify the html files myself, but just need some help with finding right PCars shared memory values.


When the Javascript part of the equation is no problem with this, you only need to go to Lars' CREST homepage (link in first post). He describes what information is available and how to display it.
Basically you get a JSON with all Shared Mem data.
You get the plain data with "http://localhost:8080/crest/v1/api" but you can also add arguments to only get certain data like this "http://localhost:8080/crest/v1/api?participants=true".
The titles of the data are the same as in SharedMem I think, else you find it out easily with the general link.

F1_Racer68
30-05-2016, 23:11
TonyR and Ashnoom,

I just wanted to thank you both for the latest updates. The new script worked like a charm during my last league race on Saturday night. It didn't make me any faster, or help me get that elusive podium yet, but at least it kept me accurately informed. :D

Now about that podium finish....... (15 of 16 races completed, no podium, leading Championship..... go figure....)

GidrogeN
06-06-2016, 13:04
Is it possible to automatically change the nicknames of players from Steam in Standings table in their real names prepared in advance?

TonyR
06-06-2016, 20:54
Is it possible to automatically change the nicknames of players from Steam in Standings table in their real names prepared in advance?

Well, no automatic feature that allows that. Someone would have to write it in Javascript. But it would probably be quite easy and I would include it to the 1st post if anyone wanted to do it.

Dmitry Afanasyev
07-06-2016, 16:09
Someone would have to write it in Javascript. But it would probably be quite easy and I would include it to the 1st post if anyone wanted to do it.
This is my easy solution: 234217

Maybe not the best but it works. I've put only modified files. If you need to replace your nickname with your real name then just open realnames.js and replace some strings.
For example PreDefinedNames["Steam nickname"] = "Real Name" should look like PreDefinedNames["TonyR"] = "Tony Richter"

TonyR
07-06-2016, 17:07
This is my easy solution: 234217

Maybe not the best but it works. I've put only modified files. If you need to replace your nickname with your real name then just open realnames.js and replace some strings.
For example PreDefinedNames["Steam nickname"] = "Real Name" should look like PreDefinedNames["TonyR"] = "Tony Richter"

Thank you very much Dmitry, works like a charm, I'll add it as a mod to the first post.

That btw also allows to replace names in your league that have special unicode characters in their user names that are shown as the "question mark in a square (https://en.wikipedia.org/wiki/Specials_(Unicode_block))" or cases where the names are not shown at all because of said special characters.

It could look like that:

var PreDefinedNames = new Array();
PreDefinedNames["TonyR"] = "Tony Richter";
PreDefinedNames[""] = "Abra Cadabra";
PreDefinedNames["Zsolt Bencz�di"] = "Zsolt Benczédi";
PreDefinedNames["Steam nickname"] = "Real Name";
(sorry Zsolt ;) )

Of course that's only a dirty circumvention of that problem, if anyone knows what's wrong with it, you can also tell me. I tried to fix it for hours by using different encodings of my files and in the Code with no result.

bigj_pcars
23-11-2016, 13:53
many thx tonyR!!!!

i modified your inputs.html so it displays the actual gear.
(all downloads at the bottom of this post)
now i use only your overlays, so depending on the car, i at least need this information :)

i found a little tool, that makes every windowed game or app borderless:
WindowedBorderlessGaming by Gameplay Crush (http://westechsolutions.net/sites/WindowedBorderlessGaming/home)

works for me

thx again m8 ;)

Edit:
- i modified the relative.html too:
now more drivers, driven lap count and the local time are displayed
+ your position in the list can change, depending if you climb to the top or fall to the bottom of the grid
- also made a laptimes.html: displays the best-, current-, fastest- and last-lap
- for all this i needed to change the style.css, too

download all files from dropbox: bigj_mod_for_tonyR_overlay.zip (https://www.dropbox.com/s/1sf9nx7decumy8f/bigj_mod_for_tonyR_overlay.zip?dl=0)

thx tonyR once more ;)

PS: my system got laggy since using the overlays and i had to turn off crewchief
after some experimenting i set the refresh rate in all html files to 250ms
=> lagg is down to a minimum and i can use crewchief at the same time again

Edit:
i found the reason why some charecters arent displayed properly:
the charset seems to be ascii with values from 0-127
every charecter u would expect with a value higher than 127 has a negativ value
i made an openGL version of the overlays in c++ and used the switch statement to remap and display every single character
hope it helps ;)

tonaz
03-10-2017, 12:05
Hi Tony, this app is amazing, almost the exact thing i was looking for.
Got 2 questions, is it posible to display more than the first decimal digit in the gap time? now it shows 0.3. How to show 0.351 ?
It doesnt show gaps in qulifying session, or am i wrong?
thanks again

EDIT: Well, i see you are inactive since more than one year. Sorry for that. Bye!