Design: Graph Editor Curve Display #104867

New Issue

Christoph Lendenfeld · 2023-02-17T12:16:21+01:00

2023-02-17 12:16:21 +01:00

There are a few issues with the display of curves in the Graph Editor mentioned in the Paper Cuts devtalk thread. However while technically simple to change the drawing, it needs to stay consistent and clear, which is why this Design task exists.

Issues

Locked Curve keyframes look like they are active
Curves are drawn in the same thickness even outside the range they can be edited in https://blender.community/c/rightclickselect/rhdbbc/?sorting=hot#
Location/Rotation/Scale curves are not distuingishable at first glance https://devtalk.blender.org/t/animation-editors-paper-cuts/27263/27?u=christophlendenfeld

Current State

Normal

Disabled

Locked

Proposed Solution

Locked curves have crosses instead of keyframes to indicate that they can't be selected. #106052
Locked curves are always drawn as if they were unselected since you can do nothing with them even though they are selected.#106052
Increase the dash length and spacing to reduce visual noise #106052
Add preferences to modify the colors of FCurves based on their type. Will default to the current standard to not confuse existing users.

There are a few issues with the display of curves in the Graph Editor mentioned in the Paper Cuts devtalk thread. However while technically simple to change the drawing, it needs to stay consistent and clear, which is why this Design task exists. **Issues** * Locked Curve keyframes look like they are active * Curves are drawn in the same thickness even outside the range they can be edited in https://blender.community/c/rightclickselect/rhdbbc/?sorting=hot# * Location/Rotation/Scale curves are not distuingishable at first glance https://devtalk.blender.org/t/animation-editors-paper-cuts/27263/27?u=christophlendenfeld ## Current State Normal ![image](/attachments/d60a7c4f-eb0b-4562-85d6-9460bf9aaeaa) Disabled ![image](/attachments/b65a7d9e-7fe0-4f76-a850-2f1b712613c2) Locked ![image](/attachments/105bc202-b1b8-490e-a35f-0cdc8e23e383) ## Proposed Solution * Locked curves have crosses instead of keyframes to indicate that they can't be selected. [#106052](https://projects.blender.org/blender/blender/pulls/106052) * Locked curves are always drawn as if they were unselected since you can do nothing with them even though they are selected.[#106052](https://projects.blender.org/blender/blender/pulls/106052) * Increase the dash length and spacing to reduce visual noise [#106052](https://projects.blender.org/blender/blender/pulls/106052) * Add preferences to modify the colors of FCurves based on their type. Will default to the current standard to not confuse existing users. ![image](https://projects.blender.org/attachments/547cd123-d122-4ca1-adcc-bbcd7be300f2)

image.png

19 KiB

image.png

20 KiB

image.png

17 KiB

fcurve_style.jpg

72 KiB

👍 2

Christoph Lendenfeld added the

labels 2023-02-17 12:16:21 +01:00

Christoph Lendenfeld changed title from ~~Animation: Graph Editor Curve Display~~ to Design: Graph Editor Curve Display

2023-02-17 12:18:26 +01:00

Christoph Lendenfeld referenced this issue

2023-02-17 12:25:52 +01:00

WIP: Animation: remove drawing of locked Keyframe vertices #104561

Christoph Lendenfeld referenced this issue

2023-02-17 12:44:39 +01:00

Animation Editors Paper Cuts #103855

slwk1d commented

2023-02-17 13:11:30 +01:00

As previously said by others, locked curves should keep vertices visible, but not highlighted as selected, so black as unselected.

I wouldn't change the curve locked visualization, let's keep the dashed line for it, instead of giving it another meaning (curve type).
For curve types (Loc, rot, scale) I would definetely go for user themable colors.

* As previously said by others, locked curves should keep vertices visible, but not highlighted as selected, so black as unselected. ![2222.png](/attachments/f86eddb6-5db1-4600-873f-514c5811e016) I wouldn't change the curve locked visualization, let's keep the dashed line for it, instead of giving it another meaning (curve type). * For curve types (Loc, rot, scale) I would definetely go for user themable colors. ![col-1.png](attachments/dcaea6cc-72c4-4783-83d8-31d62fef34c2) ![col-2.png](/attachments/908cd5cc-3710-4062-8cd4-47ae161acf2b)

2222.png

10 KiB

col-1.png

108 KiB

col-2.png

101 KiB

👍 2 ❤️ 1

Lumpengnom commented

2023-02-17 13:46:33 +01:00

Hey, Nice to see a design task for this:

What do you think about the following proposal. Perhaps the type of dashes can be used to create visual associations with what the curve is responsible for:

Location: Just a normal line you can move on. Like a road
Rotation: Dots on a line. The dots represent the pivot you rotate objects around
Scale: Long dashes. Represents an object scaaaaaaaled up on a single axis.
Custom: Dots plus Dashes. This curve can represent multiple different kinds of things therefore it is represented by multiple different types of lines:

The dots would have to be visually different enough from keyframes of course.

Hey, Nice to see a design task for this: What do you think about the following proposal. Perhaps the type of dashes can be used to create visual associations with what the curve is responsible for: - Location: Just a normal line you can move on. Like a road - Rotation: Dots on a line. The dots represent the pivot you rotate objects around - Scale: Long dashes. Represents an object scaaaaaaaled up on a single axis. - Custom: Dots plus Dashes. This curve can represent multiple different kinds of things therefore it is represented by multiple different types of lines: The dots would have to be visually different enough from keyframes of course. ![Blender_GraphEditor4.png](/attachments/ecd35ef5-4b72-4ded-aefa-3839b136534b)

Blender_GraphEditor4.png

54 KiB

😕 1

slwk1d commented

2023-02-17 15:06:29 +01:00

Perhaps the type of dashes can be used to create visual associations with what the curve is responsible for

I'm afraid it would be too much of a visual clutter, and instead of helping the user identifying them, it would be too disorienting. Having such a strong visual difference between curves, to me doesn't convey the difference between location or rotation etc., but more that an effect (a modifier, a lock) was applied to them.
Also,in your image we only see 4 curves, but try to multiply them for a scenario with multiple characters/objects animated at the same time, with various parameters animated, and maybe also curve modifiers.

The dots would have to be visually different enough from keyframes

Another reason why I'd avoid this solution.

> Perhaps the type of dashes can be used to create visual associations with what the curve is responsible for I'm afraid it would be too much of a visual clutter, and instead of helping the user identifying them, it would be too disorienting. Having such a strong visual difference between curves, to me doesn't convey the difference between location or rotation etc., but more that an effect (a modifier, a lock) was applied to them. Also,in your image we only see 4 curves, but try to multiply them for a scenario with multiple characters/objects animated at the same time, with various parameters animated, and maybe also curve modifiers. > The dots would have to be visually different enough from keyframes Another reason why I'd avoid this solution.

Christoph Lendenfeld commented

2023-02-24 17:26:31 +01:00

@Slowwkidd I've updated my proposal

Locked curves have crosses instead of keyframes to indicate that they can't be selected.
Locked curves are always drawn as if they were unselected since you can do nothing with them even though they are selected.
Increase the dash length and spacing to reduce visual noise
Add preferences to modify the colors of FCurves based on their type. Will default to the current standard to not confuse existing users.

@Lumpengnom That looks a bit too noisy for me. I think allowing users to control the FCurve color based on channel type is better.

Random idea but maybe the solution to your problem is a hotkey operator that hides FCurves based on their type. E.g. you'd press a button to only see Translation curves

@Slowwkidd I've updated my proposal * Locked curves have crosses instead of keyframes to indicate that they can't be selected. * Locked curves are always drawn as if they were unselected since you can do nothing with them even though they are selected. * Increase the dash length and spacing to reduce visual noise * Add preferences to modify the colors of FCurves based on their type. Will default to the current standard to not confuse existing users. @Lumpengnom That looks a bit too noisy for me. I think allowing users to control the FCurve color based on channel type is better. Random idea but maybe the solution to your problem is a hotkey operator that hides FCurves based on their type. E.g. you'd press a button to only see Translation curves

❤️ 1

Lumpengnom commented

2023-02-28 08:56:57 +01:00

A hotkey that hides or isolates default sets sounds pretty useful.

Regarding the dashed lines being noisy:
Yes, you are right. I tried to reduce the noise by scaling down the size of the dots and dashes. It is of course still more noisy than flat lines. But do you think that it is also more noisy than a multiple curves with different colors? I am not so sure.

A hotkey that hides or isolates default sets sounds pretty useful. Regarding the dashed lines being noisy: Yes, you are right. I tried to reduce the noise by scaling down the size of the dots and dashes. It is of course still more noisy than flat lines. But do you think that it is also more noisy than a multiple curves with different colors? I am not so sure. ![Blender_GraphEditor6.png](/attachments/d7c825bc-3589-41e3-8767-da300dbb4aac)

Blender_GraphEditor6.png

43 KiB

👎 2

Lumpengnom commented

2023-02-28 09:15:04 +01:00

Here is a test with a typical Graph Editor for an object with animated Loc/Rot/Scale. Personally I think that the dashed and dotted lines are better than a multi color setup because you don't have to remember which color is responsible for which axis.
Nevertheless, I think a multi color setup is fine, too.
Here a comparison:

Here is a test with a typical Graph Editor for an object with animated Loc/Rot/Scale. Personally I think that the dashed and dotted lines are better than a multi color setup because you don't have to remember which color is responsible for which axis. Nevertheless, I think a multi color setup is fine, too. Here a comparison: ![](https://projects.blender.org/attachments/2462e1a0-d493-4116-93c1-a95a09f01041) ![](https://projects.blender.org/attachments/1beccf21-d0fa-41e9-b110-39466b467531)

Blender_GraphEditor8.png

84 KiB

Blender_GraphEditor8_MultiColor.png

82 KiB

😕 1 👀 1

Christoph Lendenfeld commented

2023-03-01 11:06:32 +01:00

@Lumpengnom I really like your updated design. In fact I think you are right, it's even clearer to read than too many colors.

For the scale lines, instead of dots I'd keep it dashed, but increase the spacing of the dashes. On first glance that's what the dots look like anyway.

@Lumpengnom I really like your updated design. In fact I think you are right, it's even clearer to read than too many colors. For the scale lines, instead of dots I'd keep it dashed, but increase the spacing of the dashes. On first glance that's what the dots look like anyway.

Lumpengnom commented

2023-03-01 11:22:05 +01:00

Ok, cool.
The dots are meant to be the rotation. The dots are supposed to give a visual cue because you rotate around a pivot.
The dashed lines are for scale. They are supposed to give a visual cue because if you non-uniformly scale something it gets stretched just like a dashed line.

Not sure if theses types of visual cues are necessary as I am not a UI-designer.

Here is an updated Design with dashed instead of dots and larger gaps:

Ok, cool. The dots are meant to be the rotation. The dots are supposed to give a visual cue because you rotate around a pivot. The dashed lines are for scale. They are supposed to give a visual cue because if you non-uniformly scale something it gets stretched just like a dashed line. Not sure if theses types of visual cues are necessary as I am not a UI-designer. Here is an updated Design with dashed instead of dots and larger gaps: ![Blender_GraphEditor9.png](/attachments/e797a20c-48d4-47cd-85e8-08a6737c4443)

Blender_GraphEditor9.png

82 KiB

slwk1d commented

2023-03-01 11:58:10 +01:00

Even with the updated design, I still think that with all these different kind of visualization, it would take more effort for the user to learn which one is what, being less immediate than color. Also because with color, it's the user who chooses it, teaching himself how to differentiate the types with the colors that finds more suitable.
Again, this to me looks more like a particular effect or modifier was applied to curves.

Plus, now how you could tell the difference from locked curves?
It creates even more confusion because they all look like dashed lines, and users would have to squint their eyes to tell they are not locked, but a type of curve. It gives another meaning to dashed curves regardless of how differentated they are, bringing way more conflict to what is trying to solve.

Even with the updated design, I still think that with all these different kind of visualization, it would take more effort for the user to learn which one is what, being less immediate than color. Also because with color, it's the user who chooses it, teaching himself how to differentiate the types with the colors that finds more suitable. Again, this to me looks more like a particular effect or modifier was applied to curves. Plus, now how you could tell the difference from locked curves? It creates even more confusion because they all look like dashed lines, and users would have to squint their eyes to tell they are not locked, but a type of curve. It gives another meaning to dashed curves regardless of how differentated they are, bringing way more conflict to what is trying to solve.

👍 2

Lumpengnom commented

2023-03-01 12:13:05 +01:00

Locked curves: Locked curves have no solid line as background whereas the other ones do.

👎 1

slwk1d commented

2023-03-01 12:58:42 +01:00

True, they have a solid background, but in my opinion is still similar enough to potentially disorientate because it's almost like locked.

Also, how would they look if they were also locked?

The 2 appearances would be mixed together, creating a third type of look?
The locked appearance would ovverride and disable the appearance of the curve type?

In case of the second option, we wouldn't be able to tell the curve type if it's locked, which kinda defies the purpose of telling the curve types at a glance.

P.S.
I hope I'm not sounding too pushy or like I'm ruining your proposal, we clearly both want to improve the curves design, I'm just trying to consider all the options and make a point with what I think it's best.

True, they have a solid background, but in my opinion is still similar enough to potentially disorientate because *it's almost like locked*. Also, how would they look if they were *also* locked? * The 2 appearances would be mixed together, creating a third type of look? * The locked appearance would ovverride and disable the appearance of the curve type? In case of the second option, we wouldn't be able to tell the curve type if it's locked, which kinda defies the purpose of telling the curve types at a glance. P.S. I hope I'm not sounding too pushy or like I'm ruining your proposal, we clearly both want to improve the curves design, I'm just trying to consider all the options and make a point with what I think it's best.

👍 1

Juan Gabriel commented

2023-03-01 16:38:12 +01:00

Hey, Nice to see a design task for this:

What do you think about the following proposal. Perhaps the type of dashes can be used to create visual associations with what the curve is responsible for:

Location: Just a normal line you can move on. Like a road

Rotation: Dots on a line. The dots represent the pivot you rotate objects around

Scale: Long dashes. Represents an object scaaaaaaaled up on a single axis.

Custom: Dots plus Dashes. This curve can represent multiple different kinds of things therefore it is represented by multiple different types of lines:

The dots would have to be visually different enough from keyframes of course.

I think this is a bit confusing, the colors are much clearer and the option in preferences is the best way for this.

> Hey, Nice to see a design task for this: > > What do you think about the following proposal. Perhaps the type of dashes can be used to create visual associations with what the curve is responsible for: > > - Location: Just a normal line you can move on. Like a road > - Rotation: Dots on a line. The dots represent the pivot you rotate objects around > - Scale: Long dashes. Represents an object scaaaaaaaled up on a single axis. > - Custom: Dots plus Dashes. This curve can represent multiple different kinds of things therefore it is represented by multiple different types of lines: > > The dots would have to be visually different enough from keyframes of course. > > ![Blender_GraphEditor4.png](/attachments/ecd35ef5-4b72-4ded-aefa-3839b136534b) I think this is a bit confusing, the colors are much clearer and the option in preferences is the best way for this.

👍 1

Christoph Lendenfeld referenced this issue

2023-03-23 17:36:56 +01:00

Animation: Improve drawing of locked FCurves #106052

Christoph Lendenfeld commented

2023-03-23 17:42:46 +01:00

changes to locked curves have been implemented in this PR #106052

Moving the color options to the preferences will be a second patch

changes to locked curves have been implemented in this PR [#106052](https://projects.blender.org/blender/blender/pulls/106052) Moving the color options to the preferences will be a second patch

🎉 1

Christoph Lendenfeld referenced this issue from a commit

2023-07-07 15:05:59 +02:00

Animation: Improve drawing of locked FCurves

Christoph Lendenfeld referenced this issue

2023-07-07 15:54:32 +02:00

Animation: Improve drawing of locked FCurves #106052

Sign in to join this conversation.