UI Improvements / Vertical UI Proposition

A forum for research and development of the user interface of FreeCAD

Moderator: agryson

User avatar
Petrikas
Posts: 63
Joined: Sat Dec 05, 2020 8:05 pm

UI Improvements / Vertical UI Proposition

Postby Petrikas » Wed May 19, 2021 1:34 pm

Hello all,
I've been working on FreeCAD Linkstage3 Vertical UI for 4K screens for quite a while now (https://forum.freecadweb.org/viewtopic.php?f=8&t=55779) , I've been on a quest to make FreeCAD's interface less hostile and maximise the viewport's real-estate.

I have pushed it to a state where it may no longer limited to FreeCAD Linkstage3, nor 4K screens.
I personally use a laptop at 1920x1200 and a 4K external screen, therefore I really needed both resolutions to work on-the-fly.

4K screens can use 48px icon size, while 1080p screens can use 24px.

This is the current result (4K screens):
sc 2021-05-19 14_13_51.jpg
sc 2021-05-19 14_13_51.jpg (1001.79 KiB) Viewed 2280 times

And 1080p screen:
sc 2021-05-19 13_55_32.jpg
sc 2021-05-19 13_55_32.jpg (423.74 KiB) Viewed 2280 times
Improvements include - Improved tooltips, Aligned icons, new 'dropdown' indicator, locking/unlocking toolbars.
These improvements are all possible today, but right now it's a bit 'hacked together'.

Tooltips
Problem: For some reason, tooltips, by default only include the description of the tool, but not the name. And the same description is also reflected in the status bad (disabled in my screenshots, as I don't find there's any useful information for the amount of space it takes on the screen)

Solution: Include the tool's name in the tooltip in bold. Tool description can be placed below.
Currently achieved with this hacky macro:

Code: Select all

from PySide2 import QtCore, QtGui, QtWidgets
 
mw = Gui.getMainWindow()
 
class NewToolTips(QtCore.QObject):
    # Find Toolbars
    for tb in mw.findChildren(QtWidgets.QToolBar):
        # Find Toolbar Buttons
        for x in tb.findChildren(QtWidgets.QToolButton):
            # Tool Name
            TTTitle = f"<b><p style=\"font-size:20px\">{x.text()}</p></b>"
            # Tool description
            TTTooltip = f"<p style=\"font-size:16px\">{x.toolTip()}</p>"
            # Build the Tooltip
            ntt = (f"{TTTitle}{TTTooltip}")
            # Set the Tooltip
            x.setToolTip(ntt)
 
    # Run indefinitely        
    def run():
        for x in mw.findChildren(QtWidgets.QToolBar):
            NewToolTips(x)
 
NewToolTips.run()
Aligning icons in a grid
Problem: Currently, if you set your toolbars to the side, you will have a mess of a pile of Icons that are vertically and horizontally misaligned. This is generally bad UI design, and it feels awful. However, we must work within the QT limitations.

Solutions: First of all, we need an ability to lock/unlock toolbars (in order to hide the handles for moving toolbars, as they offset the toolbar). This, to my knowledge, is not currently user accessible.

Janky macro for turning on/off toolbar Locking:

Code: Select all

from PySide2 import QtCore, QtGui, QtWidgets
import FreeCAD as App
import FreeCADGui as Gui

mw = Gui.getMainWindow()

for k in App.ParamGet("User parameter:BaseApp/Workbenches").GetString("Enabled").split(','):
    if k != "":
        Gui.activateWorkbench(k)
        tbs = mw.findChildren(QtWidgets.QToolBar)
        for t in tbs:
            if t.isMovable():
                t.setMovable(False) 
Secondly, we need to hide separators. While they are good practice, but currently they do more bad than good.
Separation is achieved with more contrasting icons (similarly to 'additive' and 'subtractive' tools)

Code: Select all

QToolBar::separator:vertical { height:0px; }
Thirdly, we need to align the icons nicely in a vertical column. This require a new 'dropdown' icon for extended tools. A simple triangle on the left, overlayed on top of the icon does wonders. (Similar to other tool-based software packages, like Photoshop, etc.)

Code: Select all

QToolBar > QToolButton::menu-arrow {
    background-image: url(qss:images_dark-light/expand_arrow.svg);
    background-position: center center;
    background-repeat: none;
    subcontrol-origin: padding;
    subcontrol-position: bottom left;
    height: 10px;
}
Tab bar / workbenches
Problem: While I personally use pie-menus for workbench selection, I switched because I found it very tedious to sift through the workbench dropdown and selecting the correct workbench. The dropdown selector prevents you from building muscle-memory and selecting workbench quickly. It also takes 2 clicks to switch the workbench. When using a vertical UI, the dropdown menu takes a full line across the screen, which is not practical

Solution: This one is pretty simple. Installing the Tab Bar addon from the addon manager. Solves all the the issues listed above and ties in nicely with the document tabs at the bottom.

So far that's all I got. There are a lot of things that I would still like to improve, but that's going to be me working on the stylesheet. I'd really love to see some of my suggestions implemented, as I do not have the coding knowledge needed to implement these changes into FreeCAD's code. All I can do now is make a janky add-on.

Hope you guys find this useful, let me know your thoughts.
Last edited by Petrikas on Sun Jun 13, 2021 8:21 pm, edited 3 times in total.
carlopav
Posts: 1786
Joined: Mon Dec 31, 2018 1:49 pm
Location: Venice, Italy

Re: UI Improvements / Vertical UI Proposition

Postby carlopav » Wed May 19, 2021 2:34 pm

Petrikas wrote: Wed May 19, 2021 1:34 pm Improvements include - Improved tooltips, Aligned icons, new 'dropdown' indicator, locking/unlocking toolbars.
Nice work, I'd love to see Improved tooltips, new 'dropdown' indicator, locking/unlocking toolbars make their way into master...
follow my experiments on BIM modelling for architecture design
User avatar
Kunda1
Posts: 10626
Joined: Thu Jan 05, 2017 9:03 pm

Re: UI Improvements / Vertical UI Proposition

Postby Kunda1 » Wed May 19, 2021 7:36 pm

This is great. This is something that can get all of our creative juices flowing. So first off just wanted to say thank you so much. The next question is do you mind sharing What other UI/UX targets you'd like to achieve but don't have the knowledge at the moment to do so? This way others in the community could jump in to collaborate.

I find it quite convenient for all of us that you fall into both camps of requiring a high DPI 4K resolution solution along with the 1080p resolution solution. This seems like it would be a common setup for other professionals like yourself. We could potentially fix more high DPI resolution issues that are still pending.

All in all great contributions so far. Thanks again for sharing and being a part of this community :D
Alone you go faster. Together we go farther
Please mark thread [Solved]
Want to contribute back to FC? Checkout:
#lowhangingfruit | Use the Source, Luke. | How to Help FreeCAD | How to report FC bugs and features
User avatar
Petrikas
Posts: 63
Joined: Sat Dec 05, 2020 8:05 pm

Re: UI Improvements / Vertical UI Proposition

Postby Petrikas » Wed May 19, 2021 9:15 pm

Kunda1 wrote: Wed May 19, 2021 7:36 pm This is great. This is something that can get all of our creative juices flowing. So first off just wanted to say thank you so much. The next question is do you mind sharing What other UI/UX targets you'd like to achieve but don't have the knowledge at the moment to do so? This way others in the community could jump in to collaborate.

I find it quite convenient for all of us that you fall into both camps of requiring a high DPI 4K resolution solution along with the 1080p resolution solution. This seems like it would be a common setup for other professionals like yourself. We could potentially fix more high DPI resolution issues that are still pending.

All in all great contributions so far. Thanks again for sharing and being a part of this community :D
Thanks for the kind words, I'm very happy to be at least a tiny bit useful.
What other UI/UX targets you'd like to achieve but don't have the knowledge at the moment to do so?
There were a few painpoints I wanted to tackle, however, good people around here have already tackled them in a much better way.

- Populating colours/settings with the stylesheets (https://forum.freecadweb.org/viewtopic. ... 1&start=50)
- Transparent tree / task / output and python console are taken care of by RealThunder in Linkstage3 (I strongly recommend this to be pushed into the main branch)
- There's a weird issue, where the user can't change the Sketcher grid colour. Currently, it's very harsh (too light) for darker backgrounds and creates a very strong contrast. I think that colour property needs to be exposed. (I couldn't find where it was set)
- Start page needs work (I'm planning on making a mockup and posting some suggestions here)

Other than that, I think we're at a breaking point where we won't scare off new users. People familiar with Tool-based software, like Photoshop or Blender will now know where to look and what to do.

There are a few nit-picks that raise some questions (such as redundant tools in Part Design workbench Pad/Pocket; Additive/Subtractive tools, that really need to be a single tool, etc.), but for now, if we could tackle these user-experience-breaking points, I'll be more than happy.

I understand that we are working within QT limitations, but I think it's possible to get it to a point where people feel at home.

When Blender moved from 2.7x to 2.8x, the devs brought a lot of UI improvements (such as tabbed workspace, tool buttons on the side of the screen, etc), and the response was overwhelmingly positive, that invited an onslaught of new users giving it a go and staying. I'm not saying that Blender is a good example of a good UI, it isn't. It's just that the UI changes they made had a huge impact.

After all, I'm going to spend a lot of time doing work with FreeCAD myself. I think we can have a distraction-free, smooth, modern interface that focuses on the job rather than being filled with empty gray windows 95-like space, only letting us work in a small square in the centre.

I am fairly satisfied with where the Vertical UI is now. It needs some tweaks UI design-wise (like correct paddings, margins, etc. Small tweaks that make it "smooth"), but right now, I think I've reached the limits of my imagination and UI/UX knowledge. If we could get lock/unlock toolbars and advanced tooltips in the main branch, I would be very happy, as I could continue on working on the stylesheet only. I think with Vertical UI it looks modern, familiar and looks like a design tool (the D in CAD!). As a designer myself, I find that the UI is one of the most important things for those long long modelling sessions. Getting annoyed by misaligned icons and 'dumb' wasted space is not a good for mental health, haha.

Industry professionals / hardcore modellers work in full-screen with hotkeys and pie-menus only. It's all muscle memory. You concentrate on the object, mouse and keyboard becomes your hands. While I am pushing myself in that direction, I am not trying to push the interface that way. I am only trying to optimise it to a point where I don't need to put mental effort trying to do tasks I do hundreds of times per session (looking at you, workbench dropdown!).

I think my UI proposition could keep the old users happy (as nothing really changed, the exact same toolbars are just rotated 90 degrees, so visually it should still be familiar) and attract a handful of new users as well, as we get rid of redundant bars, hidden menus, etc.

This is not a rant, I hope it didn't come off that way. I absolutely love FreeCAD and I am absolutely in awe that you guys pushed it this far. I'm just surprised that such a great tool is hidden behind a slightly messy UI, and I'm very eager and enthusiastic to help (if possible) and use my skill/knowledge in design to push it a bit further.

I still can't believe it's only v0.20 and it's THAT GOOD.
I sometimes make FreeCAD Tutorials | Let's improve FreeCAD's UI!
User avatar
Kunda1
Posts: 10626
Joined: Thu Jan 05, 2017 9:03 pm

Re: UI Improvements / Vertical UI Proposition

Postby Kunda1 » Thu May 20, 2021 1:42 am

Just CCing some folks that would be interested in this:
realthunder wrote: pinged by pinger macro
turn211 wrote: pinged by pinger macro
openBrain wrote: pinged by pinger macro
yorik wrote: pinged by pinger macro
Alone you go faster. Together we go farther
Please mark thread [Solved]
Want to contribute back to FC? Checkout:
#lowhangingfruit | Use the Source, Luke. | How to Help FreeCAD | How to report FC bugs and features
User avatar
M4x
Posts: 528
Joined: Sat Mar 11, 2017 9:23 am
Location: Germany

Re: UI Improvements / Vertical UI Proposition

Postby M4x » Thu May 20, 2021 6:01 am

Looks very exciting! Thank you :D
User avatar
Petrikas
Posts: 63
Joined: Sat Dec 05, 2020 8:05 pm

Re: UI Improvements / Vertical UI Proposition

Postby Petrikas » Thu May 20, 2021 1:33 pm

Just a note - we should avoid hard-coded hotkey hints in the UI, it's very disorienting.
sc 2021-05-20 16_29_45.jpg
sc 2021-05-20 16_29_45.jpg (17.3 KiB) Viewed 1885 times
I sometimes make FreeCAD Tutorials | Let's improve FreeCAD's UI!
User avatar
Kunda1
Posts: 10626
Joined: Thu Jan 05, 2017 9:03 pm

Re: UI Improvements / Vertical UI Proposition

Postby Kunda1 » Thu May 20, 2021 1:44 pm

Petrikas wrote: Thu May 20, 2021 1:33 pm Just a note - we should avoid hard-coded hotkey hints in the UI, it's very disorienting.
We need to open a ticket for this. It's going to need some code changes i fear, which suck since it will probably reset all the current completed translations for all the tooltips :(
Alone you go faster. Together we go farther
Please mark thread [Solved]
Want to contribute back to FC? Checkout:
#lowhangingfruit | Use the Source, Luke. | How to Help FreeCAD | How to report FC bugs and features
User avatar
Petrikas
Posts: 63
Joined: Sat Dec 05, 2020 8:05 pm

Re: UI Improvements / Vertical UI Proposition

Postby Petrikas » Thu May 20, 2021 2:00 pm

Kunda1 wrote: Thu May 20, 2021 1:44 pm
Petrikas wrote: Thu May 20, 2021 1:33 pm Just a note - we should avoid hard-coded hotkey hints in the UI, it's very disorienting.
We need to open a ticket for this. It's going to need some code changes i fear, which suck since it will probably reset all the current completed translations for all the tooltips :(
While the hints themselves are very useful, they become an annoyance when some of the hotkeys are changed by the user.
The tooltip should definitely pull the hotkey that's in the parameters.
I will open a ticket. It's not urgent by any means, but it definitely needs to be addressed.
I sometimes make FreeCAD Tutorials | Let's improve FreeCAD's UI!
obelisk79
Posts: 89
Joined: Thu Sep 24, 2020 9:01 pm

Re: UI Improvements / Vertical UI Proposition

Postby obelisk79 » Thu May 20, 2021 2:57 pm

Thank you for your work, and contribution!