MP Spectator Web Overlay

Discussion in 'Community Workshop' started by mape, Jul 7, 2015.

Thread Status:
Not open for further replies.
  1. Tarik Userli

    Tarik Userli Well-Known Member

    Joined:
    Mar 7, 2015
    Ratings:
    +576 / 0
    I have changed the name color from yellow to silver and turn down the size.

    Code:
    .driverInfoGenericCompareGeneric() {
        left: 0;
        right: 0;
        text-align: center;
        font-family: Oswald;
        color: #fff;
        .onCreation(-webkit-transform, translate(0, 120px), translate(0, 0), 0.5s);
        .inner {
            white-space: nowrap;
            width: auto;
            height: 55px;
            display: inline-block;
            position: relative;
        }
        .extra-info {
            position: absolute;
            top: 115%;
            left: 122px;
            z-index: -1;
            margin-top: -5px;
            ul {
                margin: 0;
                padding: 0;
                li {
                    font-family: Hel;
                    font-size: 20px;
                    float: left;
                    background: #000;
                    padding: 7px 10px;
                    margin-right: 10px;
                    .gradient(#fff, lighten(#000, 20%), lighten(#000, 10%));
                    border-radius: 0 0 10px 10px;
                    color: #fff;
                    height: 20px;
                    position: relative;
                    -webkit-transform: translate(0, -40px);
                    -webkit-transition: -webkit-transform 0.5s;
                    &.active {
                        -webkit-transform: translate(0, 0);
                    }
                    &.finished {
                        color: rgba(200, 0, 0, 1);
    
                        &.personal-best {
                            color: lighten(green, 30%);
                        }
                        &.global-best {
                            color: lighten(blue, 30%);
                        }
                    }
                }
            }
        }
        .position, .name, .manufacturer, .flag-container {
            background: url(/focusedDriver/generic/bg.png);
            vertical-align: top;
            display: inline-block;
            height: 60px;
            line-height: 75px;
    
        }
        .position {
            width: 61px;
            font-size: 32px;
            text-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            text-align: center;
            padding-left: 10px;
            line-height: 70px;
            &:after {
                content: '.';
            }
        }
        .name {
            background: url(/focusedDriver/generic/name-repeat.png);
            font-size: 32px;
            padding: 0 25px;
            min-width: 370px;
            color: #cccccc;
            line-height: 70px;
        }
        .manufacturer {
            background-position: -442px 0;
            width: 82px;
            position: relative;
            img {
                position: absolute;
                top: 10px;
                left: 25px;
                height: 40px;
            }
        }
        .drs {
            display: none;
        }
        .flag-container {
            width: 55px;
            height: 55px;
            background-position: -55px 0;
            position: relative;
            .flag {
                width: 61px;
                height: 55px;
                background: #000;
                position: absolute;
                top: 5px;
                left: 0px;
            }
            &:after {
                display: block;
                content: '';
                width: 55px;
                height: 55px;
                background: #000;
                position: absolute;
                top: 5px;
                left: 0px;
                background: url(/focusedDriver/generic/bg.png) no-repeat -66px -5px;
            }
        }
    }
    
    .generic .compare-race {
        .onCreation(-webkit-transform, scale(0), scale(0), 0.2s);
        .onCreation(opacity, 0, 1, 0.2s);
        position: fixed;
        bottom: 68px;
        height: 60px;
        left: 0;
        right: 0;
        text-align: bottom;
       
        .delta {
            font-family: Hel;
            font-size: 50px;
            text-transform: uppercase;
            .gradient(#000, #111111, #2e2d2d);
            border-radius: 5px;
            border: 1px solid #333;
            color: #fff;
            padding: 20px 30px;
            display: inline-block;
            display: inline-block;
            position: relative;
    
            .inner {
                position: absolute !important;
                top: 10px;
                &.first {
                    left: auto;
                    right: 100%;
                    margin-right: 20px;
                }
                &.second {
                    right:  auto;
                    left: 100%;
                    margin-left: 20px;
                }
            }
        }
        .inner {
            .driverInfoGenericCompareGeneric;
            position: absolute !important;
        }
    }
     

    Attached Files:

  2. Gerson Malty

    Gerson Malty Active Member

    Joined:
    Jul 13, 2015
    Ratings:
    +28 / 0
    Hello, passing here to share the first Race of our championship league! DTM92 @ Laguna.

    Every Wednsday nights this Brazilians guys give us this show! Awesome job Sector3 and @mape!
     
    • Like Like x 3
    Last edited: Sep 17, 2015
  3. MeMotS

    MeMotS Well-Known Member

    Joined:
    Jan 30, 2015
    Ratings:
    +1,034 / 0
  4. Sascha Brandenburg

    Sascha Brandenburg Well-Known Member

    Joined:
    Feb 17, 2015
    Ratings:
    +56 / 0
    Can u tell me on which Map u get these Error ? Looks like that the Map isnt avialable :D
     
  5. MeMotS

    MeMotS Well-Known Member

    Joined:
    Jan 30, 2015
    Ratings:
    +1,034 / 0
    This was on Suzuka west , but same happened at Bathurst
     
  6. Ronny Fiebig

    Ronny Fiebig New Member

    Joined:
    Jul 14, 2015
    Ratings:
    +2 / 0
    I try to scale down the whole UI to 720p. But neither webkit-transform: scale nor transform: scale works. I tried to edit the relevant position and size information. Driver Information and current standings works fine but the race and quali result looks odd.

    Which is the best way to scale the whole UI?
     
  7. Tarik Userli

    Tarik Userli Well-Known Member

    Joined:
    Mar 7, 2015
    Ratings:
    +576 / 0
    I have edit every single box
     
  8. Tarik Userli

    Tarik Userli Well-Known Member

    Joined:
    Mar 7, 2015
    Ratings:
    +576 / 0
    @mape @Mikael Hermansson

    I have a question about the overlay Images.
    We have a bg.png and a name-repeat.png the last one repeat it self how long the Name is and the 1st one starts at the placenumber and ends at the manufacture Image.

    So thats my question it is possible to delete the Name-repeat section and use only the bg.png as the File and use a static width. So it's better to customize your overlay.
     
  9. m.bohlken

    m.bohlken Well-Known Member

    Joined:
    Jan 29, 2015
    Ratings:
    +972 / 0
    I have another Question regarding the Auto-Director.
    Yesterday I've noticed a driver with a bad ping. The Auto-Director often switches to him and than back to another driver. Would it be possible to add a feature to exclude drivers from Auto-Director?

    Regarding to that - I've noticed that message at Red Bull Ring and Slovakia-Ring
     
  10. Tarik Userli

    Tarik Userli Well-Known Member

    Joined:
    Mar 7, 2015
    Ratings:
    +576 / 0
  11. J-F Chardon

    J-F Chardon Sector3 Producer Developer

    Joined:
    Jan 15, 2015
    Ratings:
    +4,366 / 0
    @mape is the best to answer that. But have you tried? I am sure there is a way to achieve what you are after.
     
    • Informative Informative x 1
  12. Tarik Userli

    Tarik Userli Well-Known Member

    Joined:
    Mar 7, 2015
    Ratings:
    +576 / 0
    Im not rly fit in that section of coding so I need few helping hands :(
     
  13. m.bohlken

    m.bohlken Well-Known Member

    Joined:
    Jan 29, 2015
    Ratings:
    +972 / 0
    If I get it right, the name-repeat.png has an attribute min-width set to 370px. Maybe you can delete that line an insert set a fixed width. For example
    width: 500px
     
  14. Tim Cannon

    Tim Cannon Well-Known Member

    Joined:
    Feb 5, 2015
    Ratings:
    +252 / 0
    when 2 or more broadcasters point both their game clients to one server to see the same view, do the broadcasters have to use auto director to see the same thing? or can 1 person control the camera that all broadcasters see?
     
  15. Stonehard

    Stonehard New Member

    Joined:
    Jul 3, 2015
    Ratings:
    +2 / 0
    I guess we have to download new Overlay to get these last updates. Is there a "early-release-r3e-example-overlay-v010" or etc. someplace to download then?
     
  16. touno71

    touno71 New Member

    Joined:
    Sep 15, 2015
    Ratings:
    +4 / 0
    Hello everybody ,I have a problem, i would like change the length of the driver name in the "current standings" banner in the left (it have only 3 letters and it's too shorter for some names)
    But i don't know how to make it.
    Is there someone to explain me please ? :(
     
    Last edited: Dec 7, 2015
  17. touno71

    touno71 New Member

    Joined:
    Sep 15, 2015
    Ratings:
    +4 / 0
    I have found How to put more than 3 letters but what i want is to have the name like in the raceresult widget.

    Ex: if my name in raceroom is "Jim touno GTR3-Fr", actually the currentstandings widget show only " GTR"
    I would like this: "J.Touno GTR3-Fr"
    Mate or anyone else can you help me please, i don't know what i have to change ?
     
    Last edited: Dec 8, 2015
  18. touno71

    touno71 New Member

    Joined:
    Sep 15, 2015
    Ratings:
    +4 / 0
    Thank you i have found alone :nomouth:
     
  19. Tim Cannon

    Tim Cannon Well-Known Member

    Joined:
    Feb 5, 2015
    Ratings:
    +252 / 0
    yes, quite disappointing. apparently nobody is interested in helping in this thread anymore. those of us that came late to the party are on our own :(
     
  20. m.bohlken

    m.bohlken Well-Known Member

    Joined:
    Jan 29, 2015
    Ratings:
    +972 / 0
    Maybe the spectator-overlay is a temporary victim for pushing some new features... In the RD-Interview it was mentioned that the front-end-integration of some new features is a bottle-neck ATM.
     
Thread Status:
Not open for further replies.