RaceLab overlays in a single web page

Disclaimer: I am no web designer nor developer. I am an amateur, who is happy to create some small stuff. If you find some errors on the description or the code below, or you have some improvements, feel free to inform me via Discord or email.

In order, to be able to show the most interesting overlays in Oculus I created a single borderless webpage, which can be pinned into Oculus. The webpage is a single HTML and a CSS file.

The basic structure of the HTML is like:

<div id="OverlayRelative">

<object type="text/html" width=100% height=100% data="http://localhost:8080/ui/#/overlays/relative">

</object>

</div>

The CSS will position and configure each box, like:

#OverlayRelative {

position: absolute; /* Sit on top of the page content */

width: 600; /* Full width (cover the whole page) */

height: 220; /* Full height (cover the whole page) */

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(0,0,0,0); /* Black background with opacity */

z-index: 2; /* Specify a stack order in case you're using a different order for other elements */

cursor: pointer; /* Add a pointer on hover */

border-style: dotted;

border-color: blue;

border-width: 1;

}

The result wil look like:

In order to have it in a borderless window you need to run a command line, like:

"C:\Program Files (x86)\Google\Chrome\Application\chrome_proxy.exe" --profile-directory=Default --app="C:\Users\User\Google Drive\Downloads\iRacing.html"

Note: You must change to the actual location of the html file.

My 3 files can be downloaded from here: https://drive.google.com/open?id=1iDMkUEzDo5DxOioiRypPeli7qCqtHbvG

The zip includes the HTML, the CSS and the Shortcut.