UI: Red Auto Keying Button #105574

Harley Acheson · 2023-03-08T23:41:27+01:00

Harley Acheson commented

2023-03-08 23:41:27 +01:00

Changing the icons used for auto keying to be more noticeable.

This patch replaces the single icon used for the auto-keying button with a pair for off and on. The "on" version using the color red to better simulate a "record" button in use. The "off" state uses an unfilled circle because that seems to better indicate off.

The color itself can be changed in the theme, so it can be set back to white (or anything else) if desired:

It is my hope that with this stronger indication we can remove the current warning message shown at the top-right, which displays awkwardly overlapping the navigation widget:

Changing the icons used for auto keying to be more noticeable. --- This patch replaces the single icon used for the auto-keying button with a pair for off and on. The "on" version using the color red to better simulate a "record" button in use. The "off" state uses an unfilled circle because that seems to better indicate off. ![RecordButton6.gif](/attachments/fa7e382e-daf7-4dbe-9fd8-be722104096d) The color itself can be changed in the theme, so it can be set back to white (or anything else) if desired: ![image](/attachments/c0999d76-3278-4ea6-b98f-f46c935e207f) It is my hope that with this stronger indication we can **remove** the current warning message shown at the top-right, which displays awkwardly overlapping the navigation widget: ![KeyingWarning.png](/attachments/25d1733e-c5a1-47c0-9520-f348b9f9fbaf)

RecordButton6.gif

46 KiB

image.png

59 KiB

KeyingWarning.png

18 KiB

RecordButton.gif

54 KiB

RecordColor.png

38 KiB

👍 3 ❤️ 9

Abhinav Chennubhotla referenced this pull request

2023-03-09 13:14:05 +01:00

WIP: Fix #97049: Auto-keyframe Status Message Overlaps Navigation Gizmo #105565

Brad Clark commented

2023-03-10 20:25:12 +01:00

I like "red" is record, that is kind of a universal "recording is going on" indicator.
The only change would be to keep the white outline so you don't change size just red fill.

I like "red" is record, that is kind of a universal "recording is going on" indicator. The only change would be to keep the white outline so you don't change size just red fill.

Harley Acheson commented

2023-03-10 20:39:36 +01:00

I like "red" is record, that is kind of a universal "recording is going on" indicator.

I do too. But there is a chance that the perception of it could differ by age with older people seeing it as normal because of audio and video recorders, while younger people could just see it as an "error" color.

Some red-green colorblindness could also alter this perception. Usually for them we push the color toward yellow into orange. Which could make sense for all since that is more of a warning color. Or maybe a bright orange-yellow?

The only change would be to keep the white outline so you don't change size just red fill.

The icons are created and stored as monochrome, just shades of white. But we are able to recolor these at will, so showing them as white on the dark theme while black on the light theme. So we can make it any color as long as it is one hue, not multiple at a time.

The change of size though is because I am just using our "radio button off" icon here, which isn't quite the right size. If this is something we like then we'd have to create a new icon in the set specifically for "record off"

> I like "red" is record, that is kind of a universal "recording is going on" indicator. I do too. But there is a **chance** that the perception of it could differ by age with older people seeing it as normal because of audio and video recorders, while younger people could just see it as an "error" color. Some red-green colorblindness could also alter this perception. Usually for them we push the color toward yellow into orange. Which could make sense for all since that is more of a warning color. Or maybe a bright orange-yellow? > The only change would be to keep the white outline so you don't change size just red fill. The icons are created and stored as monochrome, just shades of white. But we are able to recolor these at will, so showing them as white on the dark theme while black on the light theme. So we can make it any color as long as it is one hue, not multiple at a time. The change of size though is because I am just using our "radio button off" icon here, which isn't quite the right size. If this is something we like then we'd have to create a new icon in the set specifically for "record off"

Sybren A. Stüvel commented

2023-03-30 16:18:46 +02:00

I do too. But there is a chance that the perception of it could differ by age with older people seeing it as normal because of audio and video recorders, while younger people could just see it as an "error" color.

Audacity also has a 'red dot' recording button, and so does Reaper. These are always red, though, and not just when they are enabled.

Some red-green colorblindness could also alter this perception. Usually for them we push the color toward yellow into orange. Which could make sense for all since that is more of a warning color. Or maybe a bright orange-yellow?

I think either of these would work:

The current proposal, where the background colour changes, coupled with a lightness increase of that background.
An alternative, where the dot is always red, but rather dark/dim when it is disabled, and bright when it is enabled.

In both cases the red colour is not the only thing that conveys the information, so it should be fine for colourblind people.

The icons are created and stored as monochrome, just shades of white. But we are able to recolor these at will, so showing them as white on the dark theme while black on the light theme. So we can make it any color as long as it is one hue, not multiple at a time.

That's a shame.

The change of size though is because I am just using our "radio button off" icon here, which isn't quite the right size. If this is something we like then we'd have to create a new icon in the set specifically for "record off"

👍

> I do too. But there is a **chance** that the perception of it could differ by age with older people seeing it as normal because of audio and video recorders, while younger people could just see it as an "error" color. [Audacity](https://www.audacityteam.org/) also has a 'red dot' recording button, and so does [Reaper](https://www.reaper.fm/). These are always red, though, and not just when they are enabled. > Some red-green colorblindness could also alter this perception. Usually for them we push the color toward yellow into orange. Which could make sense for all since that is more of a warning color. Or maybe a bright orange-yellow? I think either of these would work: - The current proposal, where the background colour changes, coupled with a lightness increase of that background. - An alternative, where the dot is always red, but rather dark/dim when it is disabled, and bright when it is enabled. In both cases the red colour is not the only thing that conveys the information, so it should be fine for colourblind people. > The icons are created and stored as monochrome, just shades of white. But we are able to recolor these at will, so showing them as white on the dark theme while black on the light theme. So we can make it any color as long as it is one hue, not multiple at a time. That's a shame. > The change of size though is because I am just using our "radio button off" icon here, which isn't quite the right size. If this is something we like then we'd have to create a new icon in the set specifically for "record off" :+1:

Sybren A. Stüvel added this to the Animation & Rigging project 2023-03-30 16:18:56 +02:00

Sybren A. Stüvel added the

Module

Animation & Rigging

label 2023-03-30 16:19:00 +02:00

Harley Acheson force-pushed RecordRed from 24514f2d5e to 73aab156d3

2023-03-30 22:11:01 +02:00

Compare

Harley Acheson commented

2023-03-30 22:24:22 +02:00

@dr.sybren - That's a shame.

My comment about that was a bit wrong-ish. All our current icons are white so that we can re-color them for display. So we can turn that white source icon into one that is black or blue or green.

But... it works just fine if the source icon image has colors, even multiple colors or gradients, etc. Just doing so would not allow us to recolor it later. Of course that does not matter in this case. So the icons in this PR have both a white ring and a red interior. And it looks just fine in both dark and light themes.

> @dr.sybren - That's a shame. My comment about that was a bit wrong-ish. All our current icons are white so that we can re-color them for display. So we can turn that white source icon into one that is black or blue or green. But... it works just fine if the source icon image has colors, even multiple colors or gradients, etc. Just doing so would not allow us to recolor it later. Of course that does not matter in this case. So the icons in this PR have both a white ring and a red interior. And it looks just fine in both dark and light themes.

👍 1

Harley Acheson commented

2023-03-31 00:44:44 +02:00

@blender-bot package

Blender Bot commented

2023-03-31 00:44:54 +02:00

Package build started. Download here when ready.

Package build started. [Download here](https://builder.blender.org/download/patch/PR105574) when ready.

Harley Acheson commented

2023-03-31 03:51:00 +02:00

Currently (not in PR yet) have a "disabled" state here that I quite like:

Currently (not in PR yet) have a "disabled" state here that I quite like: ![RecordButton3.gif](/attachments/ff793c88-09fb-494a-a47d-3fabe286eed7)

RecordButton3.gif

45 KiB

Brad Clark commented

2023-03-31 05:14:15 +02:00

My worry with it being that grey/faded it looks like it can't be clicked vs. off, if you have the white circle the same brightness as the play buttons, full white then it doesn't look disabled/unclickable maybe.

Because if you compare the drop down arrow next to it, it is the same light grey and it is disabled... unclickable.

My worry with it being that grey/faded it looks like it can't be clicked vs. off, if you have the white circle the same brightness as the play buttons, full white then it doesn't look disabled/unclickable maybe. Because if you compare the drop down arrow next to it, it is the same light grey and it is disabled... unclickable.

👍 1

Brad Clark closed this pull request

2023-03-31 05:14:16 +02:00

Brad Clark commented

2023-03-31 05:14:39 +02:00

well.. clicked the wrong comment

Brad Clark reopened this pull request

2023-03-31 05:14:39 +02:00

Harley Acheson commented

2023-03-31 05:18:02 +02:00

it looks like it can't be clicked vs. off...

Good point. I'll keep playing.

> it looks like it can't be clicked vs. off... Good point. I'll keep playing.

Harley Acheson commented

2023-03-31 05:26:30 +02:00

![RecordButton4.gif](/attachments/27c220f7-6def-4b5b-8bd0-27fba3918786)

RecordButton4.gif

42 KiB

❤️ 1

Harley Acheson force-pushed RecordRed from 77480c4ee3 to 0772dda353

2023-04-01 23:12:45 +02:00

Compare

Harley Acheson commented

2023-04-01 23:22:03 +02:00

Some users will have a tough time with the red indication and blue background. So I updated the the icons to use only a single color, but you can set the color in the theme. That way anyone who hates the red can set it to white or yellow or anything else. I updated the original comment and the images there.

Ivan Cappiello commented

2023-04-02 12:11:50 +02:00

My worry with it being that grey/faded it looks like it can't be clicked vs. off, if you have the white circle the same brightness as the play buttons, full white then it doesn't look disabled/unclickable maybe.

Because if you compare the drop down arrow next to it, it is the same light grey and it is disabled... unclickable.

we coukd maybe consider it as the other play forward, play backward, pause buttons.
~~they don't have a pressed blue state.~~
in that case we can use the white circle for disabled autokey, and white circle and red fill for auto key on.

edit:
i was wrong, they have pressed blue state. What i was looking at is the play button which changes from play to pause but doesn't stay in pressed blue state.

> My worry with it being that grey/faded it looks like it can't be clicked vs. off, if you have the white circle the same brightness as the play buttons, full white then it doesn't look disabled/unclickable maybe. > > Because if you compare the drop down arrow next to it, it is the same light grey and it is disabled... unclickable. > we coukd maybe consider it as the other play forward, play backward, pause buttons. ~~they don't have a pressed blue state.~~ in that case we can use the white circle for disabled autokey, and white circle and red fill for auto key on. edit: i was wrong, they have pressed blue state. What i was looking at is the play button which changes from play to pause but doesn't stay in pressed blue state.

Harley Acheson commented

2023-04-02 21:12:09 +02:00

I updated the animated gif capture in the first comment. Now using icons that exactly match the design language of other icons that have an on and off state:

I updated the animated gif capture in the first comment. Now using icons that exactly match the design language of other icons that have an on and off state: ![image](/attachments/4031315d-3155-4532-8ad9-e93680d0f459)

image.png

26 KiB

Sybren A. Stüvel commented

2023-04-07 11:57:06 +02:00

I like the button in your last comment 👍

I like the button in [your last comment]( https://projects.blender.org/blender/blender/pulls/105574#issuecomment-911723) :+1:

Brad Clark commented

2023-05-17 22:45:20 +02:00

I guess this wasn't finalized in any of the meetings, what is left to do?

Harley Acheson commented

2023-05-18 20:42:56 +02:00

@BClark - I guess this wasn't finalized in any of the meetings, what is left to do?

I think the last version is pretty nice (in the first comment), and allows users or theme designers to change the color if needed.

The next step should really be your module deciding if this is wanted or not. If yes I can then see what UI module thinks.

> @BClark - I guess this wasn't finalized in any of the meetings, what is left to do? I _think_ the last version is pretty nice (in the first comment), and allows users or theme designers to change the color if needed. The next step should really be your module deciding if this is wanted or not. If yes I can then see what UI module thinks.

❤️ 1

Brad Clark commented

2023-07-18 01:40:47 +02:00

Yes having has this just mess me up once again when working, I really do want to see with a quick glance at the UI that I am in "record" mode with auto key on.

Nathan Vegdahl commented

2023-07-18 13:46:56 +02:00

I'm in favor of this.

Also, the auto-key button was already red pre-2.80:

So in some ways this is just going back to how it was originally supposed to be. (Although it was always red, not just when toggled on.)

I suspect the reason it was changed in 2.80 was to make the UI stylistically consistent. But I think this is a clear case where clarity trumps style. Moreover, this patch still IMO keeps things stylistically consistent while in some ways being even more clear than pre-2.80, by making the button only colored when auto-key is turned on.

I'm in favor of this. Also, the auto-key button was already red pre-2.80: ![blender_2.79_autokey_button.png](/attachments/49c8f724-59a0-4a45-867b-7bd435e31f27) So in some ways this is just going back to how it was originally supposed to be. (Although it was *always* red, not just when toggled on.) I suspect the reason it was changed in 2.80 was to make the UI stylistically consistent. But I think this is a clear case where clarity trumps style. Moreover, this patch still IMO keeps things stylistically consistent while in some ways being even *more* clear than pre-2.80, by making the button only colored when auto-key is turned on.

blender_2.79_autokey_button.png

11 KiB

Sybren A. Stüvel commented

2023-07-21 10:26:11 +02:00

This was discussed in this week's Animation & Rigging module meeting. The outcomes:

OK for the button design. @nathanvegdahl is happy with the blue background, which works well with his red-green colour blindness.
Uncertainty about the issue of the notification in the 3D Viewport overlapping with the navigation widget. This PR description has a screenshot of this issue, but no info about whether this is actually addressed as well in this PR. Now that I read through things again, I realise that this is actually handled in #105565. Might be worth it to link that from the PR description.

This was discussed in [this week's Animation & Rigging module meeting](https://devtalk.blender.org/t/2023-07-18-animation-rigging-module-meeting/30352). The outcomes: - OK for the button design. @nathanvegdahl is happy with the blue background, which works well with his red-green colour blindness. - Uncertainty about the issue of the notification in the 3D Viewport overlapping with the navigation widget. This PR description has a screenshot of this issue, but no info about whether this is actually addressed as well in this PR. Now that I read through things again, I realise that this is actually handled in #105565. Might be worth it to link that from the PR description.

Harley Acheson force-pushed RecordRed from 7b115721c5 to a4538f308b

2023-07-21 21:09:04 +02:00

Compare

Harley Acheson changed title from ~~WIP: Evaluate Red Auto Keying Button~~ to UI: Red Auto Keying Button

2023-07-21 21:09:59 +02:00

Harley Acheson requested review from Pablo Vazquez 2023-07-21 21:14:40 +02:00

Harley Acheson commented

2023-07-21 21:17:06 +02:00

@pablovazquez - This change is wanted by the Animation and Rigging module. Can you see any problems with doing so? Pre-2.8 did have a red "record" button and it was part of the plan post 2.8 to do so as well but never got done.

Dmitry commented

2023-07-31 18:35:44 +02:00

First-time contributor

The red color could be too strong and distracting, at least the shade of it in the example that was shown
The current implementation with blue color is simple and elegant for my taste.

The red color could be too strong and distracting, at least the shade of it in the example that was shown The current implementation with blue color is simple and elegant for my taste.

Brad Clark commented

2023-07-31 22:13:18 +02:00

@Rockbard it should be strong and very visible as it is both a warning that it is on and a universal "recording" color that lets you know you are going to set keys.

👍 3

johan tri handoyo commented

2023-08-02 10:36:36 +02:00

First-time contributor

Just an idea, how about we bring the classic camera recording sign which is blinking red dot when turned on? I think it will be more obvious to identify than Auto-keyframe status message.

Pablo Vazquez commented

2023-11-02 12:40:26 +01:00

@Harley could you please update this patch? The first gif shows the icon in one way and in the second image looks larger. Not sure which one is the latest. Thanks!

Harley Acheson force-pushed RecordRed from a4538f308b to 90badb06f3

2023-11-15 22:02:15 +01:00

Compare

Harley Acheson commented

2023-11-15 22:03:42 +01:00

@pablovazquez - could you please update this patch? The first gif shows the icon in one way and in the second image looks larger. Not sure which one is the latest. Thanks!

No problem. I updated the patch and replaced both images in the first comment.

> @pablovazquez - could you please update this patch? The first gif shows the icon in one way and in the second image looks larger. Not sure which one is the latest. Thanks! No problem. I updated the patch and replaced both images in the first comment.

This pull request has changes conflicting with the target branch.

release/datafiles/blender_icons.svg

View command line instructions.

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u RecordRed:Harley-RecordRed

git checkout Harley-RecordRed

Sign in to join this conversation.

No reviewers

No Label

Download

What's New

Blender Studio

Manual

Developers Blog

Documentation

Benchmark

Blender Conference

Development Fund

One-time Donations

UI: Red Auto Keying Button #105574

Checkout