Versions Compared

Old Version 8

changes.mady.by.user Unknown User (studio397-rubenca)

Saved on

compared with

New Version Current

changes.mady.by.user Unknown User (studio397-rubenca)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

As mentioned before, you can visit the control panel by visiting http://localhost:5397/overlays/controlpanel.html. Alternatively if you want to control another PC you can replace "localhost" with the IP address of the PC. If you access the control panel from PC in your local network, no further setup is needed. If you are accessing a PC from an external network, the 5397 port is required to be opened for TCP traffic.

Using the

...

Live Timing page

The overlay is rendered inside the full screen monitor of rFactor 2 if you the new UI*. If you require the overlay to be displayed outside of rFactor 2, you can visit the overlay by visiting live timing page is a simplified version of the control panel with a few customizable features. You can access it with any web browser by going to:

http://localhost:5397/overlays/overlays.htmllivetiming.html

NOTE: It is not recommended to open this page up publicly as is, because this would give anyone access to your IP address and broadcast control panel. If you want to render the overlay externally and from another PC you can replace "localhost" with the IP address of the PC. If you render the overlay from a PC in your local network, no further setup is needed. If you are accessing a PC from an external network, the 5397 port is required to be opened for TCP traffic.others to be able to view this page, you should consider streaming the page over something like YouTube or Twitch, or look into a proxy server in order to keep your IP address and control panel guarded.

Using the Overlay

The overlay page is a single page that houses all the overlay elements. You can access it with any web browser by going to:

http://localhost:5397/overlays/controlpanel.html

Showing the overlay inside rFactor 2

The overlays can be rendered on top in the full screen monitor. This option is disabled by default and can be toggled on through the control panel
*known issue: having the overlay enabled ingame inside of rFactor 2 might introduce some stutter for some users. Try experimenting with adding the overlay in your streaming software and disabling it ingame trough the control panel keeping the overlay disabled inside of rFactor 2 if you experience this.

In-game

Go to any camera view and select full screen mode. Now you will see the overlays as you enable them via the control panel.

...

Showing the overlay in a browser (recommended)

Go to this URL:

http://localhost:5397/overlays/overlays.html

It This will show a page with a transparent background that you can integrate into your broadcast tool (or view in a browser, but that's less useful in general).. 

Showing the overlay in a browser on another device

Rendering the overlay on another device inside your local network you can replace "localhost" with the local IP address of the device.

If you want to render the overlay outside of your local network you will need to use the public IP address of the device. Additionally you will need to open up the 5397 port for TCP traffic. 

Customizing the overlay

You can customize the overlay an various ways. Custom overlays are found in the "Overlaysoverlays" folder inside your rFactor 2 installation. Before creating your first custom overlay, you need to create that folder yourself. The first step of customizing your overlay is unpacking the the default_december_2022.zip inside the "overlays" folder and renaming it from "default" to something like your league name or series name. If no "overlays" folder exists in your rFactor 2 install folder, you can create one. The structure should be "your rFactor 2 install folder/overlays/YourOverlayName". Inside this folder you will find some files and additional folders where you can place various assets:


The config.json

The "config.json" is the hearth of the customization of the overlay. This is the place where you add series names, logo's, class colors and various settings for various overlay elements. Keep in mind that the markup of this file needs to stay as is, so keep an eye out for the comma's and brackets. Using a text editor with json support like Sublime Text will show you any markup mistakes you make.

...

  • By default the overlay starts in "mixed" mode. This means that all cars in the session are shown in their overall order. Leagues that run multi class races can also choose to have the overlay start in multi class mode by setting "startInMulticlassMode" to true.
  • At the top is various information about your series. Series name, series round number, track name, track location and season name can all be filled out here. Event date is filled in automatically so can be left empty.
  • In the colors section you can define a base color that is used for some of the general slides. Furthermore you can define a color per car class.
  • The In the banner, the scrolling interval defines how long each "page" of drivers should stay in the banner.
  • In the broll section you can define a background video that will loop in the background. This is great to show something behind the intro slides or on its own when rFactor 2 is in a loading screen. You can toggle the b-roll manually and also have it toggle automatically when enabling specific elements. The video you define here goes in the "videos" folder.
  • In the countdown section you can define the length and the shown logos of the countdown slide. Additionally the countdown will also display the series logo which is setup in the "images" section further below. Additionally you can add a unique countdown video in case you want it to be different from the general broll video or default series color. The images and video you define here go in the "images" folder and video goes in the "videos" folders.
  • The event slide will generate some data by default. You can also choose to override this with any data you like in the event slide section
  • The extended battle box will always look forwards from the driver in focus first and when it can't find any drivers in front within the determined max gap, it will look backwards. You can limit the amount of drivers shown and the maximum gap they can have to each other here.
  • The Although the standings system is a work in progress, the technical parts already work. In . The full screen version of the standings will show the top 10 for now and requires you to manually enter data. For the in race season standings portion you can define how many drivers should be shownshow customize the amount of shown driver. Also see "the standings.json file" further below.
  • In the intro slide section you will be able to define the names of your broadcast crew.
  • The race update box automatically shows you all sorts of data throughout the race sessions. Use the values here to define the length and interval of this box. For the "hashtags" data see the "socialMedia" further below.
  • In the schedule slide you can define the title shown in the schedule slide.  Also You can also toggle the prepend round number option. Setting this to true will add "ROUND 1" text in front of your round names. To define the names and dates, see "the schedule.json file" further below.
  • In the tower section you can define how many drivers should be are shown. The "multiClassRowCount" defines how many drivers are shown when using the multiclass variant of the tower. In the "scrollingListConfig" you can set the tower up to show a static amount of drivers with a further set of rows that scroll trough the field and define the interval of the scroll in milliseconds.
  • The Attack Mode section is a subsection of the tower section. Here you can define the amount of seconds that should be displayed towards the end of the Attack Mode animation in the tower.
  • The video slide can be used to show trailers and partner videos. The files defined here It will always show all videos in the defined order. Video files go in the "videos" folder.
  • The pitstop timers appear automatically during a race . Here you when a driver performs a pitstop. You can define which of the two timers should be enabled during a pitstop.
  • in In the ads section you can define the logos to be shown in the tower and various other pages. When you need more than 2 logo's, you can add additional logo's inside the the "rightCyclingAds" section and define how long each logo should stay on screen.
  • In the images section you define the main series logo. This is used in slides like the event slide and the countdown slide. This image goes in the "images" folder
  • In the social media section you can define the "hashtags" that appear in the race update box. These are simple text fields, so if you want to display something else than a hashtag, like a website, you can put that here too.
  • In the live timing section you can define how the live timing page should present it's data. See the "custom_livetiming.css" file further below for customizing the look of the live timing page.
  • In the tires section you can define the letter and color for each of the compounds per car class. The overlay can show a maximum of 2 letters, so a soft could be S and a super soft could be SS. In order for the overlay to pick up the correct compound, you will need to put the correct compound names in at the top of each compound section. Those compound names can be found in the car setup screen.


The images folder

Images and logo's assigned in the "config.json" go in the images folder.

...

The vehicle_info_override.json file

Leagues who seek to further customized the data used for drivers and teams can do so hereHere you can customize the driver and team related data. If for example a drivers has entered the server with an incorrect drivername, or driver name you can correct it here. Or if you would like to for example enter all the driver names that are driving for a specific team , you can enter it all here. In the control panel you can then toggle between the data shown in the various elements such as the driver box. Matching this with the drivers and teams on track is done on two levelsinto the description. First we need to match vehicles. This is done by entering the name of the VEH file that you've put in your mod. Secondly we can match each driver or team that is driving with this team by entering their actual names or the team name found in the VEH fils. From there you can override the various data found in the example filethe VEH file name. When running a league we advice to use simple VEH naming, such as GT_PRO_01 etc. Within the brackets we then need to either match with a driver name or team name. From here there is a host of data that we can override.


Overriding livery images

You can override or add livery images to the overlay by naming these files according to the name of the VEH filethe same as the VEH file names. You can use above vehiclethe vehicle_info_override.json to add a prefix to this name in case you need to make an image's name more unique. These images go into the images/car folder.

...

You can add team logo's to the overlay by naming these files according to the same as team name names that is are defined in either the VEH file , or in above the vehicle_info_override.json. These images go into the images/team folder.

...

If you want to add completely customized visuals to the entire overlay then the custom.css file is for you! This file overrides all the CSS that is embedded in the default overlay. Want to change fonts, colors, sizes of the elements or go all out? This is where you can add new CSS code to achieve your new look. Adding custom CSS requires some CSS knowledge so this is somewhat of an advanced step in customizing the livestream overlay.


The custom_livetiming.css file

If you want to add completely customized visuals to the live timing page as well, you can have a look at the custom_livetiming.css file! This file overrides all the CSS that is embedded in the default live timing page. The same principles apply as above.


Selecting and using your custom overlay

...

The overlay can control multiple rFactor 2 clients. for when doing PIP or when a production requires rFactor 2 to be broadcast in different signals (for example having one client render at 1080p 60 fps and another at 720p 50 fps). In the "overlays-config.json" file inside the userdata/player folder in your rFactor 2 installation you can enter IP addresses and ports of the target rFactor 2 clients. You will see these IP addresses in the control penal. By clicking and ctrl-clicking them you can toggle which clients should listen to the control panel.

Code Block
{
  "customConfig": "MyCoolOverlay",
  "clients": [
    {
      "ip": "192.168.1.100",
      "port": 5397
    }
  ]
}

rFactor 2 tips to optimize broadcast quality

  • Limit your rF2 framerate to your target signal framerate to ensure a smooth viewing experience.
  • In the player.json (found in /UserData/player) set the "Active Sleep Time" parameter to -1. This will ensure your framerate does not drop down while clicking outside of rFactor 2 (on the control panel for example).
  • In the player.json set the "Pause If Focus Lost" to false. This will keep rFactor 2 going while clicking outside of rFactor 2 in single player, which makes testing and building overlays a smoother process.
  • Making broadcast clients unthrottled will result in more accurate vehicle movement. You can activate this on each client by adding the unthrottled prefix in front of each client. By default this is "_", so if each client is called "broadcast1",  "broadcast2" etc. you can name those "_broadcast1", "_broadcast2" etc.