[REL] Better UI

Discussion in 'Other' started by Cselt, Dec 30, 2020.

Tags:
  1. Cselt

    Cselt Member

    Joined:
    Jan 12, 2012
    Messages:
    83
    Likes Received:
    363
    Hi guys,

    as a passionate sim racer and Front-end developer I'm really happy that my loved sim racing game started to use web technologies.
    Now that the new UI is using Angular-js (unfortunately not Angular 2+ :( ) it's possible to make changes.
    I started to play with it a little bit and added a few new features and bug fixes.

    This is not an official implementation, just a workaround, so keep in mind. Unfortunately I don't know how to add officially mods to the new UI. Documentation for that would be very welcomed :)

    Features / bug fixes:
    • add remember password feature to favorite multiplayer servers
    • fix too big tiles on garage screen
    • add left and right arrow navigation to the main screen
    • fix z-index issue with "exit game" button
    • add left and right arrow navigation to the race screen
    • add left and right arrow navigation to the garage screen
    • highlight selected opponent filter
    • add permanent chat window below camera view
    • highlight current track in setup popup
    • disable opacity change animation
    • remember selected multiplayer server filters
    • add countdown timer to lap limited multiplayer race events
    • exit button in navbar
    How to install:
    1. Download the installer from the latest release
    2. Run the installer
    3. Start rFactor 2 & enjoy

    You can find the latest version here: https://github.com/Cselt/rf2-better-ui/releases

    Feel free to give it a try and let me know what do you miss the most from the new UI.

    If you like my work and you would like to support me, buy me a coffee / beer :)

    https://www.paypal.com/donate?hosted_button_id=FMYT6S758CDUN

    Exit button in navbar:
    [​IMG]

    Add countdown timer to lap limited multiplayer race events
    [​IMG]

    Permanent chat window:
    [​IMG]

    Remember password:
    [​IMG]

    Highlight current track in setup popup
    [​IMG]

    Highlight selected opponent filter:
    [​IMG]

    Garage view after:
    [​IMG]
     

    Attached Files:

    Last edited: Feb 5, 2021
  2. ThomasJohansen

    ThomasJohansen Registered

    Joined:
    Dec 27, 2019
    Messages:
    362
    Likes Received:
    889
    you should be on the UI bug fix payroll at s397 :)
     
  3. r00b Driver

    r00b Driver Registered

    Joined:
    Feb 7, 2020
    Messages:
    62
    Likes Received:
    31
    Thank you!
    gonna give it a try now :)

    EDIT:
    Holy crap that's soo much better!
    :):););):):)
     
    henri4, McFlex and Cselt like this.
  4. SmellySkidmark

    SmellySkidmark Registered

    Joined:
    Jan 11, 2012
    Messages:
    443
    Likes Received:
    150
    This great work, can I put in a request for a change in the layout?
    I would like the Summary, Fuel, Gears, Tires, excetera, all of those buttons put into list mode on the left side of the screen.
    Is that possible?

    SS
     
    Last edited: Dec 30, 2020
  5. r00b Driver

    r00b Driver Registered

    Joined:
    Feb 7, 2020
    Messages:
    62
    Likes Received:
    31
    Hey, if you're taking requests, is there any chance you could sort out the stupid scrollbars?
    (Move mouse away from scrollbar it stops moving then when you get near it again it jumps around!)
     
    mister dog, henri4 and atomed like this.
  6. John R Denman

    John R Denman Registered

    Joined:
    Mar 18, 2018
    Messages:
    416
    Likes Received:
    468
    Another long road of shortcuts.
    The fastest way to move the UI forward is to layout the panels with a Functional Spec tied to each panel. That's work no one seems to want to do but it would put the UI back on track.
     
  7. Goanna

    Goanna Registered

    Joined:
    Jan 19, 2012
    Messages:
    1,058
    Likes Received:
    736
    Tried this, looks good, unfortunately when trying to save a setup rF2 would lockup...went back to original and can save without lockups.
     
  8. Cselt

    Cselt Member

    Joined:
    Jan 12, 2012
    Messages:
    83
    Likes Received:
    363
    We have arrows to navigate on both side of the page, that would look odd if I would add buttons to the left side.
     
  9. Cselt

    Cselt Member

    Joined:
    Jan 12, 2012
    Messages:
    83
    Likes Received:
    363
    I checked and looks like the webview implementation they use has some issues with scroll bars (works fine with Chrome).
    Go to the settings page and you'll see it. The scrollbar by default is gray. If you hover over it becomes white. Then if you click on it: black.

    Now if you click on the scrollbar and move your mouse outside of the scrollbar and release mouse button it still thinks it's pressed (it's black).
    Next time you move around the scrollbar will start to scroll, because it's pressed.

    Unfortunately I can't see any easy solution for that. Make sure you release your mouse button while you're hovering the scrollbar.
     
  10. Cselt

    Cselt Member

    Joined:
    Jan 12, 2012
    Messages:
    83
    Likes Received:
    363
    Hmm interesting, I gave it a try and worked fine for me, I was able to load / save setups. Would you mind giving it another try?
     
  11. SmellySkidmark

    SmellySkidmark Registered

    Joined:
    Jan 11, 2012
    Messages:
    443
    Likes Received:
    150
    That would make the scroll buttons obsolete and it would make it easier to see what the suspension setting are without having to scroll down to see the rear of the car settings. IMO

    SS
     
  12. atomed

    atomed Registered

    Joined:
    Jul 9, 2019
    Messages:
    711
    Likes Received:
    540
    +10, hate that.
     
  13. bobbie424242

    bobbie424242 Registered

    Joined:
    Oct 17, 2017
    Messages:
    217
    Likes Received:
    314
    Any possibility to disable all animations: fades and slides ?
     
    Woodee and Mauro like this.
  14. Goanna

    Goanna Registered

    Joined:
    Jan 19, 2012
    Messages:
    1,058
    Likes Received:
    736
    Will do, report back in an hour or so.
     
  15. r00b Driver

    r00b Driver Registered

    Joined:
    Feb 7, 2020
    Messages:
    62
    Likes Received:
    31
    Thanks, and yeah, I've been trying to do that but it's just habit, y'know?!

    Anyway, thanks for looking!
     
    Cselt likes this.
  16. Goanna

    Goanna Registered

    Joined:
    Jan 19, 2012
    Messages:
    1,058
    Likes Received:
    736
    Musta just been a glitch first time around, all worked as advertised this time :BigThumbsUp:
     
    atomed, Corti and Cselt like this.
  17. Timothy Goya

    Timothy Goya Registered

    Joined:
    Jan 20, 2019
    Messages:
    20
    Likes Received:
    4
    Wait, it's using AngularJS? Why'd you use a deprecated framework?
     
  18. atomed

    atomed Registered

    Joined:
    Jul 9, 2019
    Messages:
    711
    Likes Received:
    540
    Maybe it's enough and provides a good balance between resources consumed and results obtained. Deprecated systems are often less prone to attacks and vulnerability explorations than current ones, since interest is always higher on active environments
     
    Timothy Goya likes this.
  19. St54KeV

    St54KeV Registered

    Joined:
    Jun 5, 2012
    Messages:
    166
    Likes Received:
    43
    It's sooo simple
     
  20. FuNK!

    FuNK! Registered

    Joined:
    May 26, 2013
    Messages:
    549
    Likes Received:
    381
    Great start already, looking forward to what you will be able to achieve in the future! One wish/request would be to fix the highlight of selected and active car or class filters in the opponents settings ;)
     
    atomed likes this.

Share This Page