Overlay – Update 961 – Driver helmets and photo styles

Overlay has been updated to 961

• Driver helmets have been added to the Driver Details Component: https://www.sdk-gaming.co.uk/knowledge-base/driver-details-component/
• Opaque class has been added to driver photos when photo has no transparent pixels.

This update has been automatically applied to your overlay. After following the below instructions you do not see the changes applied in your overlay, then in OBS use the “Refresh Cache” option and in Live HUD use the “Reload” button.

Driver helmets

• The Driver Details Component’s photo feature has been extended to display driver helmets. 4 display modes are available:
  • Hide – Photo and helmet are both hidden.
  • Helmet – Helmet is displayed and photo is hidden.
  • Photo – Photo is displayed if available and hidden if not available, helmet is hidden.
  • Photo > H – Photo is displayed if available, helmet is displayed only if photo is not available.
• The Driver Details Component can be updated to this latest version in iRacing Live Timing – F3 Settings / Remote control / Outdated components

2 kinds of helmet skins can be displayed:

• Trading paints image skins or helmet_123456.tga image skins found in the iRacing\paint folder. This only displays in the overlay when a room connection is used and the paint folder is specified in the OBS Browser Source’s URL field. The URL would be the below with your room name and folder path entered:

https://livetiming.sdk-gaming.co.uk/f1-overlay.html?room=YOUR_ROOM&iracingfolder=c:\\users\\YOUR_USER\\documents\\iRacing

• Helmet skins based on iRacing class, helmet style and colours set in the iRacing member site or iRacing UI. These skins are dynamically rendered by iRacing and therefore are always available to the overlay, they are displayed only if custom image skins are not available.

Opaque Photo Styling

A new opaque CSS class has been added to Driver details Component’s driver photos having no transparent pixels to allow specific styling:

• In this example, opaque images are displayed in a circle:

.overlay>.driver-details>.data-wrapper>.photo-wrapper>.photo.opaque {
    border-radius: 50%;
}

• Photo with transparent pixels are not affected with the above code:

• Styles can also be applied to photos with transparent pixels:

.overlay>.driver-details>.data-wrapper>.photo-wrapper>.photo:not(.opaque) {
    border-radius: 10%;
}