[REL] Better UI

Cselt

Cselt

Member
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 (integrated to the official build)
  • 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
  • reimplemented setups popup with search option
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:
quit_popup.png


Add countdown timer to lap limited multiplayer race events
countdown.png


Permanent chat window:
permanent-chat.png


Remember password:
remember_password.gif


Highlight current track in setup popup
save_setup.png


Highlight selected opponent filter:
opponent_filter.gif


Garage view after:
garage_after.png


Setups popup:
setups_popup.jpg
 

Attachments

  • garage_after.png
    garage_after.png
    624.6 KB · Views: 708
  • garage_before.png
    garage_before.png
    617.6 KB · Views: 716
Last edited:
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:
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.
 
Tried this, looks good, unfortunately when trying to save a setup rF2 would lockup...went back to original and can save without lockups.
 
SmellySkidmark said:
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
Click to expand...

We have arrows to navigate on both side of the page, that would look odd if I would add buttons to the left side.
 
r00b Driver said:
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!)
Click to expand...

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.
 
Goanna said:
Tried this, looks good, unfortunately when trying to save a setup rF2 would lockup...went back to original and can save without lockups.
Click to expand...

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?
 
Cselt said:
We have arrows to navigate on both side of the page, that would look odd if I would add buttons to the left side.
Click to expand...
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
 
Cselt said:
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.
Click to expand...
Thanks, and yeah, I've been trying to do that but it's just habit, y'know?!

Anyway, thanks for looking!
 
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
 
Cselt said:
Feel free to give it a try and let me know what do you miss the most from the new UI.
Click to expand...
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 ;)
 
You must log in or register to reply here.
Back
Top