Page MenuHome

UI: Freestyle UI Upgrade
ClosedPublic

Authored by Iyad Ahmed (iyadahmed2001) on Feb 22 2021, 11:30 PM.
Tokens
"Love" token, awarded by asmitty."Love" token, awarded by hitrpr."Like" token, awarded by DaveDeer."Like" token, awarded by PratikPB2123."Love" token, awarded by antoniov."Love" token, awarded by DonWippo."Love" token, awarded by Stig."Love" token, awarded by kosirm."Love" token, awarded by Draise."Like" token, awarded by rpserge."Like" token, awarded by Fracture128."Love" token, awarded by catisioo."Love" token, awarded by DrkCrb."Love" token, awarded by GEMelo."Like" token, awarded by pragma37."Like" token, awarded by Pipeliner."Love" token, awarded by elbruswaters."Love" token, awarded by lone_noel."Like" token, awarded by activemotionpictures."Love" token, awarded by noender."Love" token, awarded by Andrea_Monzini."Love" token, awarded by iyadahmed2001.

Details

Summary

Suggested and funded by BNPR, this patch aims to update the long not-updated Freestyle UI

Why do the UI upgrade:

  • Freestyle UI doesn't match the rest of Blender UI, it was neglected for a long time
  • The current UI makes Freestyle workflows tedious and distracting

Highlights:

BeforeAfter
Freestyle View Layer Panel Parameter Editor
Freestyle View Layer Panel Python Scripting
Lineset
Face Marks
Collection
Freestyle Strokes
Strokes sorting, selection and dashed line^^
Freestyle Color
Freestyle Alpha
Thickness
Options become vertical when space is small___
  • Line Set Panel, Line Style selected under, similar to particle settings, sub panels for sub settings

  • Line style breadcrumb, making sure that editing line style setting always on the correct line style

  • Multiple line style panels to be open at the same time, this allows faster complex line style creation

Video:
https://youtu.be/qaXhuJW_c9U

Workflow video (older revision): https://youtu.be/IqbjIq_A800

Doc patch (WIP): https://github.com/bnpr/FreestyleUIUpgrade/blob/main/freestyle-ui-upgrade-docs.diff

Diff Detail

Repository
rB Blender

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Iyad Ahmed (iyadahmed2001) edited the summary of this revision. (Show Details)

Make modifier panels look more like geometry modifiers

Add "Freestyle" prefix to Freestyle Linestyle Panels

Use column for Blend Mode and Influence in modifiers

Added "Mapping" Label
made invert show only if mapping is linear (before all was in one row)

Iyad Ahmed (iyadahmed2001) edited the summary of this revision. (Show Details)

Remove colon from "Selection By" label

I still feel uncomfortable accepting this having never actually used Freestyle. The UI looks much better to me though, and by looking at the screenshots I only see these two small things:


Here you can omit "Value" from the second line. This is standard elsewhere this sort of aligned button is used.


This can look the same as above. Looks like maybe you forgot to do that when turning property split on.

This patch fixes the alignment issues in the Line set Panel, while it is a hack (empty panel) I think this is much better looking than using the custom UI spacing

1diff --git a/release/scripts/startup/bl_ui/properties_freestyle.py b/release/scripts/startup/bl_ui/properties_freestyle.py
2index 9191c355c5e..6438acc0aea 100644
3--- a/release/scripts/startup/bl_ui/properties_freestyle.py
4+++ b/release/scripts/startup/bl_ui/properties_freestyle.py
5@@ -301,10 +301,26 @@ class VIEWLAYER_PT_freestyle_lineset(ViewLayerFreestyleEditorButtonsPanel, Panel
6 layout.template_ID(lineset, "linestyle",
7 new="scene.freestyle_linestyle_new")
8
9- layout.label(text="Selection By")
10- row = layout.row(align=True)
11- row.separator(factor=4.0)
12- row.prop(lineset, "select_by_image_border", text="Image Border")
13+ layout.separator()
14+ layout.label(text="Select by:")
15+
16+
17+class VIEWLAYER_PT_freestyle_lineset_image_border(ViewLayerFreestyleLineStyle, Panel):
18+ bl_label = "Image Border"
19+ bl_parent_id = "VIEWLAYER_PT_freestyle_lineset"
20+ COMPAT_ENGINES = {'BLENDER_RENDER', 'BLENDER_EEVEE', 'BLENDER_WORKBENCH'}
21+
22+ def draw_header(self, context):
23+ layout = self.layout
24+
25+ view_layer = context.view_layer
26+ freestyle = view_layer.freestyle_settings
27+ lineset = freestyle.linesets.active
28+
29+ layout.prop(lineset, "select_by_image_border", text="")
30+
31+ def draw(_self, _context):
32+ pass
33
34
35 # Freestyle Lineset Sub Panels
36@@ -1308,6 +1324,7 @@ classes = (
37 VIEWLAYER_PT_freestyle_edge_detection_options,
38 VIEWLAYER_PT_freestyle_style_modules,
39 VIEWLAYER_PT_freestyle_lineset,
40+ VIEWLAYER_PT_freestyle_lineset_image_border,
41 VIEWLAYER_PT_freestyle_lineset_visibilty,
42 VIEWLAYER_PT_freestyle_lineset_edgetype,
43 VIEWLAYER_PT_freestyle_lineset_facemarks,

Aaron Carlisle (Blendify) requested changes to this revision.Aug 10 2021, 5:32 AM

I think this is very close and will land in 3.0 a couple of comments, might take a deeper look in the morning.

source/blender/makesdna/DNA_freestyle_types.h
43–45

Renumbering these could lead to issues, best to just skip over a number.

/* FREESTYLE_ADVANCED_OPTIONS_FLAG = 1 << 4, */ /* UNUSED */

This revision now requires changes to proceed.Aug 10 2021, 5:32 AM

I still feel uncomfortable accepting this having never actually used Freestyle. The UI looks much better to me though, and by looking at the screenshots I only see these two small things:


Here you can omit "Value" from the second line. This is standard elsewhere this sort of aligned button is used.


This can look the same as above. Looks like maybe you forgot to do that when turning property split on.

agree will unify the style of these as you said

This patch fixes the alignment issues in the Line set Panel, while it is a hack (empty panel) I think this is much better looking than using the custom UI spacing

1diff --git a/release/scripts/startup/bl_ui/properties_freestyle.py b/release/scripts/startup/bl_ui/properties_freestyle.py
2index 9191c355c5e..6438acc0aea 100644
3--- a/release/scripts/startup/bl_ui/properties_freestyle.py
4+++ b/release/scripts/startup/bl_ui/properties_freestyle.py
5@@ -301,10 +301,26 @@ class VIEWLAYER_PT_freestyle_lineset(ViewLayerFreestyleEditorButtonsPanel, Panel
6 layout.template_ID(lineset, "linestyle",
7 new="scene.freestyle_linestyle_new")
8
9- layout.label(text="Selection By")
10- row = layout.row(align=True)
11- row.separator(factor=4.0)
12- row.prop(lineset, "select_by_image_border", text="Image Border")
13+ layout.separator()
14+ layout.label(text="Select by:")
15+
16+
17+class VIEWLAYER_PT_freestyle_lineset_image_border(ViewLayerFreestyleLineStyle, Panel):
18+ bl_label = "Image Border"
19+ bl_parent_id = "VIEWLAYER_PT_freestyle_lineset"
20+ COMPAT_ENGINES = {'BLENDER_RENDER', 'BLENDER_EEVEE', 'BLENDER_WORKBENCH'}
21+
22+ def draw_header(self, context):
23+ layout = self.layout
24+
25+ view_layer = context.view_layer
26+ freestyle = view_layer.freestyle_settings
27+ lineset = freestyle.linesets.active
28+
29+ layout.prop(lineset, "select_by_image_border", text="")
30+
31+ def draw(_self, _context):
32+ pass
33
34
35 # Freestyle Lineset Sub Panels
36@@ -1308,6 +1324,7 @@ classes = (
37 VIEWLAYER_PT_freestyle_edge_detection_options,
38 VIEWLAYER_PT_freestyle_style_modules,
39 VIEWLAYER_PT_freestyle_lineset,
40+ VIEWLAYER_PT_freestyle_lineset_image_border,
41 VIEWLAYER_PT_freestyle_lineset_visibilty,
42 VIEWLAYER_PT_freestyle_lineset_edgetype,
43 VIEWLAYER_PT_freestyle_lineset_facemarks,

great!, i applied the patch, but yeah still the collapse button is a problem, should I add a new panel option "HIDE_COLLAPSE"?

I think this is very close and will land in 3.0 a couple of comments, might take a deeper look in the morning.

Awesome!.

I see, did the change will upload soon

This patch fixes the alignment issues in the Line set Panel, while it is a hack (empty panel) I think this is much better looking than using the custom UI spacing

1diff --git a/release/scripts/startup/bl_ui/properties_freestyle.py b/release/scripts/startup/bl_ui/properties_freestyle.py
2index 9191c355c5e..6438acc0aea 100644
3--- a/release/scripts/startup/bl_ui/properties_freestyle.py
4+++ b/release/scripts/startup/bl_ui/properties_freestyle.py
5@@ -301,10 +301,26 @@ class VIEWLAYER_PT_freestyle_lineset(ViewLayerFreestyleEditorButtonsPanel, Panel
6 layout.template_ID(lineset, "linestyle",
7 new="scene.freestyle_linestyle_new")
8
9- layout.label(text="Selection By")
10- row = layout.row(align=True)
11- row.separator(factor=4.0)
12- row.prop(lineset, "select_by_image_border", text="Image Border")
13+ layout.separator()
14+ layout.label(text="Select by:")
15+
16+
17+class VIEWLAYER_PT_freestyle_lineset_image_border(ViewLayerFreestyleLineStyle, Panel):
18+ bl_label = "Image Border"
19+ bl_parent_id = "VIEWLAYER_PT_freestyle_lineset"
20+ COMPAT_ENGINES = {'BLENDER_RENDER', 'BLENDER_EEVEE', 'BLENDER_WORKBENCH'}
21+
22+ def draw_header(self, context):
23+ layout = self.layout
24+
25+ view_layer = context.view_layer
26+ freestyle = view_layer.freestyle_settings
27+ lineset = freestyle.linesets.active
28+
29+ layout.prop(lineset, "select_by_image_border", text="")
30+
31+ def draw(_self, _context):
32+ pass
33
34
35 # Freestyle Lineset Sub Panels
36@@ -1308,6 +1324,7 @@ classes = (
37 VIEWLAYER_PT_freestyle_edge_detection_options,
38 VIEWLAYER_PT_freestyle_style_modules,
39 VIEWLAYER_PT_freestyle_lineset,
40+ VIEWLAYER_PT_freestyle_lineset_image_border,
41 VIEWLAYER_PT_freestyle_lineset_visibilty,
42 VIEWLAYER_PT_freestyle_lineset_edgetype,
43 VIEWLAYER_PT_freestyle_lineset_facemarks,

great!, i applied the patch, but yeah still the collapse button is a problem, should I add a new panel option "HIDE_COLLAPSE"?

great!, i applied the patch, but yeah still the collapse button is a problem, should I add a new panel option "HIDE_COLLAPSE"?

Yes, I was unaware of this option.

One other thing that I noticed:

source/blender/freestyle/intern/blender_interface/FRS_freestyle.cpp
441–442

DEFAULT_SPHERE_RADIUS and DEFAULT_DKR_EPSILON are both unused now and can be removed from the codebase.

great!, i applied the patch, but yeah still the collapse button is a problem, should I add a new panel option "HIDE_COLLAPSE"?

Yes, I was unaware of this option.

One other thing that I noticed:

ah sorry the option doesn't exist yet I coded it in.

ok will remove them now

Ah okay, can you submit that as a separate patch to not clutter up this patch.

Ah okay, can you submit that as a separate patch to not clutter up this patch.

Okay 👌

Ah okay, can you submit that as a separate patch to not clutter up this patch.

Done ✅, https://developer.blender.org/D12185, should be approved I think before we can use option here

Iyad Ahmed (iyadahmed2001) marked 2 inline comments as done.

Changes Done

Aaron Carlisle (Blendify) added 1 blocking reviewer(s): Julian Eisel (Severin).

Looks good but based on how large of a change this patch is, I think one more review is warranted.

I think it is better,

make image border non panel

@Pablo Vazquez (pablovazquez) what do you say about the Select by options (see picture just above)? In D12185: Add option to hide collapse button for panels you suggested a different solution.
I don't see a great solution to this, so I think we'll have to accept some trade-off.

Also, should Chain Count be called Chain Segment Count?

Besides that I don't see any bigger issue.

@Pablo Vazquez (pablovazquez) what do you say about the Select by options (see picture just above)? In D12185: Add option to hide collapse button for panels you suggested a different solution.
I don't see a great solution to this, so I think we'll have to accept some trade-off.

Also, should Chain Count be called Chain Segment Count?

Besides that I don't see any bigger issue.

I think yeah it is a tradeoff and the solution Pablo suggested is better imo because it is simple and doesn’t add special code

On chain count I asked Light from BNPR:
“ Chain segment count is wrong actually, feels like cutting lines into segments
Chain count is correct”

Chain count was the original name too so I guess it can stay

@Pablo Vazquez (pablovazquez) what do you say about the Select by options (see picture just above)? In D12185: Add option to hide collapse button for panels you suggested a different solution.
I don't see a great solution to this, so I think we'll have to accept some trade-off.

Also, should Chain Count be called Chain Segment Count?

Besides that I don't see any bigger issue.

I think yeah it is a tradeoff and the solution Pablo suggested is better imo because it is simple and doesn’t add special code

Chain count was the original name so I guess it can stay

Yes, Chain Count is the precise term here.

I think yeah it is a tradeoff and the solution Pablo suggested is better imo because it is simple and doesn’t add special code

I'm not sure if what this patch does is what Pablo suggested. E.g. instead of having the checkboxes in the panel headers you could have a list of checkboxes and the panels separately (e.g. grayed out if the relevant checkbox is disabled). I'll let @Pablo Vazquez (pablovazquez) decide, I don't have a strong opinion.

I think yeah it is a tradeoff and the solution Pablo suggested is better imo because it is simple and doesn’t add special code

I'm not sure if what this patch does is what Pablo suggested. E.g. instead of having the checkboxes in the panel headers you could have a list of checkboxes and the panels separately (e.g. grayed out if the relevant checkbox is disabled). I'll let @Pablo Vazquez (pablovazquez) decide, I don't have a strong opinion.

Hmm not sure if separating panels from checkboxes is used heavily in Blender, it is unlikely Pablo meant that

@Julian Eisel (Severin), quote from @Pablo Vazquez (pablovazquez) DM
"Hey! this is looking much better now! (the Select By)
the only thing left in this panel I would say is to unify Visibility with it's range. No need to have 1 subpanel with only 1 setting. Or will it ever show more settings in that subpanel?"

"where it says Bounds it'd say Visibility, and where it says Box it'd say Visible (from the dropdown)"

I tired so but it creates more problems

screenshot from local work not in patch

important thing is select by as is now is good

@Julian Eisel (Severin) can we get this approved?, Pablo sees no issue in the checkbox layout

Julian Eisel (Severin) requested changes to this revision.Sep 6 2021, 2:13 PM

I talked with Pablo, we agree that this is ready now. Just requesting one little code cleanup and one error fix.

The responsive is_narrow behavior is not an existing pattern. But it's not intrusive and behaves quite nice IMO, so I'm fine with it. It would be easy to support this on the C level I think and have it as a general feature that way.

release/scripts/startup/bl_ui/properties_freestyle.py
56–57

This same logic is repeated 6 times. Better put it in a function.

This also doesn't work well when zooming the UI with Ctrl+Middle-mouse. You can probably use layout.scale_x for this.

This revision now requires changes to proceed.Sep 6 2021, 2:13 PM

I talked with Pablo, we agree that this is ready now. Just requesting one little code cleanup and one error fix.

The responsive is_narrow behavior is not an existing pattern. But it's not intrusive and behaves quite nice IMO, so I'm fine with it. It would be easy to support this on the C level I think and have it as a general feature that way.

very great, will work on it right away

Brecht Van Lommel (brecht) added inline comments.
release/scripts/startup/bl_ui/properties_freestyle.py
56

Do not use system.dpi, it is deprecated and does not include all the factors that determine the size of UI widgets, which means this will not work correctly on some systems.

system.ui_scale instead should be used instead.

I talked with Pablo, we agree that this is ready now. Just requesting one little code cleanup and one error fix.

The responsive is_narrow behavior is not an existing pattern. But it's not intrusive and behaves quite nice IMO, so I'm fine with it. It would be easy to support this on the C level I think and have it as a general feature that way.

scale_x and y gives 0 all time

Iyad Ahmed (iyadahmed2001) updated this revision to Diff 41523.EditedSep 6 2021, 9:05 PM
Iyad Ahmed (iyadahmed2001) marked 2 inline comments as done.

Replace custom flow layout with native grid_flow

native grid_flow has two issues currently, or maybe I'm missing something

  • it doesn't work well when its parent layout has use_property_split to True
  • button text is aligned to left
Julian Eisel (Severin) requested changes to this revision.Sep 9 2021, 12:55 PM

This new responsive layout logic kicks in much earlier than the previous version. In fact, for me the enums spawn multiple rows now by default for me. I much preferred the previous one, this new one is too aggressive in my opinion.
But I also don't see a decent way to handle this from Python that works with zooming.

To move forward I'd say lets see if we want this as a general layout feature, so I created D12440: UI: Spread expanded enums over rows if space is narrow. And then we either do it properly everywhere, or not at all.
Meanwhile, you can remove the responsive layout for this patch, so we can accept it for merging.

This revision now requires changes to proceed.Sep 9 2021, 12:55 PM

This new responsive layout logic kicks in much earlier than the previous version. In fact, for me the enums spawn multiple rows now by default for me. I much preferred the previous one, this new one is too aggressive in my opinion.
But I also don't see a decent way to handle this from Python that works with zooming.

To move forward I'd say lets see if we want this as a general layout feature, so I created D12440: UI: Spread expanded enums over rows if space is narrow. And then we either do it properly everywhere, or not at all.
Meanwhile, you can remove the responsive layout for this patch, so we can accept it for merging.

Ok will do so

Remove responsive row/columns

This revision is now accepted and ready to land.Sep 13 2021, 11:54 AM
This revision was automatically updated to reflect the committed changes.