R3E Reality - Multiplayer Broadcast Overlay

Discussion in 'Community Workshop' started by Scout, Nov 27, 2018.

  1. [RWB] FxUK

    [RWB] FxUK Member

    Joined:
    Dec 2, 2018
    Ratings:
    +24 / 0
    I've kinda worked around it, still using your suggestion of default active, I just moved the compare info widget to the top. It still hides when not relevant.

    This was a random public server, just to test
    moveditCapture.PNG
     
    • Like Like x 2
  2. Nemenems

    Nemenems Member

    Joined:
    Mar 28, 2017
    Ratings:
    +5 / 0
    Here is an example of my work on overlay for my team (Team GTR3).
    I added the flags in the ranking, the name of the circuit next to the flag of the country. I also added the categories in the info drivers.
    Thanks Scout for your beautiful Overlay !

    [​IMG]
     
    • Like Like x 3
  3. Scout

    Scout Well-Known Member Beta tester

    Joined:
    Sep 3, 2018
    Ratings:
    +152 / 0
    In keeping with the recent announcement, I thought it would be a nice idea to also feature an ADAC GT Masters theme with colors influenced from the real life series.

    WIP ADAC GT Masters Theme Preview
    upload_2019-1-26_13-4-49.png

    Tye Compound Indicators
    The tyre compound indicators will also be changed to match better with all series of cars (not just F1). The tyre compound indicator will also replace the manufacturer logo when a class with a tyre choice is being used to make the UI more compact (and be readable when a driver name is very long).

    upload_2019-1-26_13-7-0.png

    There are some other small things added too. Update will probably come with the next game update or whenever I have time.​
     
    • Like Like x 4
    Last edited: Jan 26, 2019
  4. Greg Metcalf

    Greg Metcalf New Member

    Joined:
    Mar 5, 2016
    Ratings:
    +1 / 0
    I prefer the alternative control :) .....thanks again for your continued work on this.
     
    • Agree Agree x 1
  5. Thomas Bienert

    Thomas Bienert Member

    Joined:
    Nov 22, 2015
    Ratings:
    +9 / 0
    Hey Scout yesterday I remembered an huge problem with the overlay xD Could you change the tower so we can show 34 cars on track? I think 34 cars are maximum per race, or?

    Btw how hard is it to develop an liveticker which is at the bottom of the screen? No sure if you know the iracing overlay. Having a scrolling liveticker in endurance races looks little bit nicer. Having a tower with 34 drivers takes so much %-screen.
     
  6. Greg Metcalf

    Greg Metcalf New Member

    Joined:
    Mar 5, 2016
    Ratings:
    +1 / 0
    You could always scale it down?
     
    • Agree Agree x 1
  7. Greg Metcalf

    Greg Metcalf New Member

    Joined:
    Mar 5, 2016
    Ratings:
    +1 / 0
    Personally I would prefer the bars and text half the size
     
  8. Scout

    Scout Well-Known Member Beta tester

    Joined:
    Sep 3, 2018
    Ratings:
    +152 / 0
    Version 1.6.1
    Small update adding references to the new track (Most) and the ADAC GT Masters 2018 class. New tyre compound icons have also been added along with an ADAC GT Masters inspired theme.

    Tyre Compound Indicators
    upload_2019-1-30_11-47-47.png
    upload_2019-1-30_11-47-55.png

    ADAC GT Masters Theme
    upload_2019-1-30_11-48-44.png
    upload_2019-1-30_11-50-13.png
    upload_2019-1-30_11-49-15.png

    Version 1.6.1 Changelog

    [Bug Fix] Prevented an error being thrown if no local description exists for a track.
    [Feature] Add new tyre compound indicators.
    [Feature] Small UI updates to themes with new variable definitions for some UI components.
    [Feature] Added Most Autodrome asset references.
    [Feature] Added ADAC GT Masters 2018 class colours.
    [Feature] Added ADAC GT Masters Theme.
    [Feature] Show laps behind on the race results screen.

    Download link is in the original post.
     
    • Like Like x 1
    • Love it! Love it! x 1
  9. Nemenems

    Nemenems Member

    Joined:
    Mar 28, 2017
    Ratings:
    +5 / 0
    Great job as always !
     
    • Agree Agree x 1
    • Love it! Love it! x 1
  10. Nemenems

    Nemenems Member

    Joined:
    Mar 28, 2017
    Ratings:
    +5 / 0
    How to move the car brand to the left?
    How to enlarge the space where the names of the drivers are noted in the ranking at the top left of the screen?

    Thank you for the answer.

    Very good work Scout

    [​IMG]
     
  11. Scout

    Scout Well-Known Member Beta tester

    Joined:
    Sep 3, 2018
    Ratings:
    +152 / 0
    For the standings you need to adjust the width property of the name container - this might be defined in the JSX file rather than the LESS file since its dynamic for if you are using short/full names.

    For the bottom widget, its looks like you have customized it, so I'm not sure what code was added to be able to say.
     
    • Like Like x 1
  12. Nemenems

    Nemenems Member

    Joined:
    Mar 28, 2017
    Ratings:
    +5 / 0
    I add class in code

    Code:
        .positionContainer, .flag-container, .driverInfoDetails, .class, .tyre, .manufacturer, .vehicle {
            vertical-align: top;
            display: inline-block;
            height: 4em;
            line-height: 3.25em;
        }
        .best-time, .positionInClass {
            vertical-align: top;
            display: inline-block;
        }
        .top {
            position: relative;
            left: -1.2em;
            height: 1.75em;
            bottom: -0.25em;
            .best-time {
                transform: skew(-10deg);
                line-height: 0.5em;
                background: @DriverInfoBestTimeBackground;
                padding: 0.5em 0.5em;
                color: @DriverInfoBestTimeText;
                width: 6em;
                z-index: 0;
                margin-bottom: 0px;
                height: 1.5em;
            }
            .positionInClass {
                transform: skew(-15deg);
                line-height: 0.5em;
                background: @DriverInfoPositionClassBackground;
                padding: 0.5em 0.5em;
                color: @DriverInfoPositionClassText;
                width: 3em;
                z-index: 0;
                margin-bottom: 0px;
                height: 1.5em;
            }
            .fastest {
                color: white;
                background: @DriverInfoGlobalBestSplitBackground;
            }
        }
        .main {
        .positionContainer {
            background: @DriverInfoPositionBackground;
            color: @DriverInfoPositionText;
            width: 5em;
            padding-left: 0.7em;
            text-align: center;
            padding-right: 0.75em;
            line-height: 3.7em;
            border-top-left-radius: 1em;
            border-bottom-left-radius: 1em;
            border-bottom: 0.1em solid @DriverInfoPositionBorder;
            .position {
                font-size: @fontSize * 3;
            }
        }
        .driverInfoDetails {
            background: @DriverInfoNameBackground;
            text-transform: uppercase;
            padding: 0px 1em;
            min-width: 23em;
            border-bottom: 0.1em solid @DriverInfoNameBorder;
            .name {
                line-height: 2em;
                color: @DriverInfoNameText;
                font-size: @fontSize * 1.3;
            }
            .team {
                font-size: @fontSize * 0.95;
                line-height: 0.7em;
                position: relative;
                color: @DriverInfoTeamNameText;
                text-transform: uppercase;
            }
        }
        .vehicle {
            width: 1.75em;
            position: relative;
            left: -12.5em;
            img {
                position: absolute;
                top: -4em;
                left: 1.5em;
                height: 5.5em;
            }
        }
        .class {
            background: @DriverInfoManufacturerBackground;
            width: 4em;
            position: relative;
            border-bottom: 0.1em solid @DriverInfoManufacturerBorder;
            img {
                position: absolute;
                top: 0.5em;
                left: 0.5em;
                height: 3em;
            }
        }
        .tyre {
            background: @DriverInfoTyreBackground;
            width: 4em;
            position: relative;
            border-top-right-radius: 1em;
            border-bottom-right-radius: 1em;
            border-bottom: 0.1em solid @DriverInfoTyreBorder;
            img {
                position: absolute;
                top: 0.5em;
                left: 0.5em;
                height: 3em;
            }
        }   
        .manufacturer {
            background: @DriverInfoManufacturerBackground;
            width: 4em;
            position: relative;
            border-top-right-radius: 1em;
            border-bottom-right-radius: 1em;
            border-bottom: 0.1em solid @DriverInfoManufacturerBorder;
            img {
                position: absolute;
                top: 0.5em;
                left: 0.5em;
                height: 3em;
            }
        }
        .flag-container {
            width: 3em;
            position: relative;
            background: @DriverInfoFlagBackground;
            border-bottom: 0.1em solid @DriverInfoFlagBorder;
            transform: skew(-10deg);
            margin: 0;
            .flag {
                background: @backgroundDark;
                position: absolute;
                display: block;
                left: -0.4em;
                width: 4.5em;
                height: 4em;
                filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.9));
            }
        }
    }
    }
     
  13. Scout

    Scout Well-Known Member Beta tester

    Joined:
    Sep 3, 2018
    Ratings:
    +152 / 0
    That's likely caused by the 'relative' position of the tyre indicator. A relative position item will always consume space, even when not displayed. In the base overlay this empty space overlaps the name widget (since the class icon is not there), so its not seen, so you might have to do something similar with the manufacturer component and maybe the tyre indicator too by positioning them more to the left.
     
    • Like Like x 1
  14. Nemenems

    Nemenems Member

    Joined:
    Mar 28, 2017
    Ratings:
    +5 / 0
    Ok thanks ! Scout
     
  15. Wutzmann

    Wutzmann Member

    Joined:
    Jan 11, 2016
    Ratings:
    +9 / 0
    Hey Scout, like your Overlay!

    But the Theme Switcher dont work for me!
     
  16. NL-Jos

    NL-Jos Well-Known Member

    Joined:
    Jun 5, 2015
    Ratings:
    +155 / 0
    It wil be great if it could use as ovelay on you own screen without streaming (if you know what i mean)
    Jus as only to see on you own screen, even if you use cockpit view
    As a sort ap, including the results tabel at the end
     
  17. DarkPT

    DarkPT New Member

    Joined:
    Feb 10, 2019
    Ratings:
    +0 / 0
    I do not know how it works pls send me a reply or even better make a video doing your self
     
    Last edited: Feb 10, 2019
  18. Wutzmann

    Wutzmann Member

    Joined:
    Jan 11, 2016
    Ratings:
    +9 / 0
    • Agree Agree x 1
  19. Scout

    Scout Well-Known Member Beta tester

    Joined:
    Sep 3, 2018
    Ratings:
    +152 / 0
    Hello, took a short break for a while on this, but have added some new small things for the next future version. Should be a couple of new themes, new widgets, less noisy steward alerts and lots of additions to the new broadcast control table UI with useful info. I'll share some preview screenshots soon.
     
    • Like Like x 6
    • Informative Informative x 1
  20. Greg Metcalf

    Greg Metcalf New Member

    Joined:
    Mar 5, 2016
    Ratings:
    +1 / 0
    @Scout using 1080p height when using the alternate broadcast controller, if there are more than 26 or 27 drivers it moves to a second column which makes it very difficult to use. is it possible to have smaller rows and text to stay in one column? ideally to fit 36 driver names in one column. not sure how this would look on a tablet but it would sure help for monitor use.

    thanks again for your continued work on this