VSE: Timeline strip visual design updates #118581

Merged

Aras Pranckevicius merged 24 commits from aras_p/blender:vse_strip_design into main 2024-04-24 12:37:48 +02:00

Conversation 28 Commits 24 Files Changed 12 +285 -134

Aras Pranckevicius commented 2024-02-21 20:37:53 +01:00

Member

Copy Link

Design updates as per #118288:

• Label text color update
• Strip border is darker background color, selected/active state is additional outline around the strip
• Muted strips are mostly gray, and their thumbnails are faded
• Overlapping strips should not be semitransparent anymore
• Locked stripes only in content area
• Missing data blocks
• Updates to meta strips w/ missing data blocks
• Missing media (i.e. integrate #116869) -- I think it's better to land that as separate PR

Not done from the design task:

• "Drawing an icon might not be enough when the strips are too narrow to fit, so we could also draw an indicator over the time topbar" -- feels like not trivial to implement nicely.
• "Additionally, we could add new Select operators to find the problematic strips more easily" -- feels like best done separately.

"Outside of VSE" things I had to do in this PR:

• UI_view2d_text_cache alpha color was being ignored, and text was always drawn at full opacity. The only other place I can
  find that draws a semi-transparent text was nla_draw.cc that tries to render non-soloed track texts. So now they should
  be properly semi-transparent, unlike previously.
• I added UI_icon_draw_mono_rect for drawing icons in VSE timeline space. Existing icon drawing functions assume that coordinate
  space is "square" aspect ratio, which is very much not the case in the timeline.

Dark theme, before:

Dark theme, now:

Light theme, before:

Light theme, now:

Design updates as per #118288: - [x] Label text color update - [x] ~~Strip border is darker background color, selected/active state is additional outline around the strip~~ - [x] Muted strips are mostly gray, and their thumbnails are faded - [x] Overlapping strips should _not_ be semitransparent anymore - [x] Locked stripes only in content area - [x] Missing data blocks - [x] Updates to meta strips w/ missing data blocks - [x] Missing media (i.e. integrate #116869) -- I think it's better to land that as separate PR **Not done** from the design task: - "Drawing an icon might not be enough when the strips are too narrow to fit, so we could also draw an indicator over the time topbar" -- feels like not trivial to implement nicely. - "Additionally, we could add new Select operators to find the problematic strips more easily" -- feels like best done separately. "Outside of VSE" things I had to do in this PR: - `UI_view2d_text_cache` alpha color was being ignored, and text was always drawn at full opacity. The only other place I can find that draws a semi-transparent text was `nla_draw.cc` that tries to render non-soloed track texts. So now they should be properly semi-transparent, unlike previously. - I added `UI_icon_draw_mono_rect` for drawing icons in VSE timeline space. Existing icon drawing functions assume that coordinate space is "square" aspect ratio, which is very much not the case in the timeline. Dark theme, before:  Dark theme, now:  Light theme, before:  Light theme, now: 

missing-dark-before.png

583 KiB

missing-dark-now.png

579 KiB

missing-light-now.png

568 KiB

missing-light-before.png

574 KiB

❤️ 5 🎉 5 🚀 1

Aras Pranckevicius added 5 commits 2024-02-21 20:38:01 +01:00

b24c96c72e UI: Fix UI_view2d_text_cache alpha being ignored ...

Looks like it was ignored "since forever" (at least for 14 years).
Not many places besides VSE use it, the only other place is
nla_draw.cc that tries to render non-soloed track texts with
reduced opacity.

06385c35be VSE: some const-correctness

2cbccb3de1 VSE: tweaks to strip drawing ...

- Text color adjustments
- Strip border/outline adjustments

a629c0e50f VSE: tweaks to strip drawing ...

- Muted strip background color is almost gray
- Muted strip thumbnails are semitransparent

ec7fca10f5 VSE: tweaks to strip drawing ...

- Locked stripes in the "content" area only, not in the title bar

Aras Pranckevicius added 2 commits 2024-02-22 18:57:42 +01:00

ee30fc1f4e Merge branch 'main' into vse_strip_design

31e3d02a11 Merge branch 'main' into vse_strip_design

Aras Pranckevicius added 1 commit 2024-02-26 16:53:09 +01:00

5bcd49126d Merge branch 'main' into vse_strip_design

Aras Pranckevicius added 1 commit 2024-02-26 20:47:36 +01:00

6eeaae3696 VSE: tweaks to strip drawing ...

- Remove transparency on strip overlap

Aras Pranckevicius added 1 commit 2024-02-29 12:19:21 +01:00

a0dd601fa9 Merge branch 'main' into vse_strip_design

Aras Pranckevicius added 2 commits 2024-03-01 09:39:49 +01:00

c8518ad039 VSE: draw "missing" icon for strips with missing data blocks

9b60970ef0 Merge branch 'main' into vse_strip_design

Aras Pranckevicius added 1 commit 2024-03-04 12:42:44 +01:00

2414eb4d10 VSE: tweak display of meta strips with missing data ...

- For all meta strips, display their child rects inside the content
  area
- Display child strips with missing data blocks in red tint.
- If any children are missing data, display title bar of meta
  strip with red tint.

Aras Pranckevicius added 1 commit 2024-03-04 12:43:47 +01:00

2055ddffe3 Merge branch 'main' into vse_strip_design

Aras Pranckevicius commented 2024-03-04 13:01:25 +01:00

Author

Member

Copy Link

@blender-bot build

@blender-bot build

Aras Pranckevicius changed title from WIP: VSE: Timeline strip visual design updates to VSE: Timeline strip visual design updates 2024-03-04 13:24:46 +01:00

Pablo Vazquez commented 2024-03-04 15:01:40 +01:00

Member

Copy Link

This is so great! I love how you can tell much more even with headers turned off now, before/after:

A big part of it is thanks to the borders which are colored based on tag or type. Which when I first saw them they felt too thin (also didn't seem to change when setting lines to be thick in the Preferences), but I got used to it.

One bit that feels a bit off is when two adjacent strips are selected, that we can still see the orange line underneath, is that a limitation of this new system? Otherwise clipping that part out and giving priority to the white line (or drawing the active strip on top of the orange line) could work.

Other than that it's awesome, thanks for working on it!

This is so great! I love how you can tell much more even with headers turned off now, before/after:   A big part of it is thanks to the borders which are colored based on tag or type. Which when I first saw them they felt too thin (also didn't seem to change when setting lines to be thick in the Preferences), but I got used to it. One bit that feels a bit off is when two adjacent strips are selected, that we can still see the orange line underneath, is that a limitation of this new system? Otherwise clipping that part out and giving priority to the white line (or drawing the active strip on top of the orange line) could work.  Other than that it's awesome, thanks for working on it!

image.png

237 KiB

image.png

3.0 KiB

image.png

233 KiB

Sergey Sharybin added this to the Video Sequencer project 2024-03-04 15:34:36 +01:00

Aras Pranckevicius commented 2024-03-04 15:35:28 +01:00

Author

Member

Copy Link

One bit that feels a bit off is when two adjacent strips are selected, that we can still see the orange line underneath, is that a limitation of this new system? Otherwise clipping that part out and giving priority to the white line (or drawing the active strip on top of the orange line) could work.

It's not a "new system", it's just that previously the "borders" were never drawn outside of the strip rectangle. Now they are (just 2px outside), but if strips are right next to each other, you do get this overlap, since one border eats 2px into the other strip, and vice versa. That could be fixed/improved somehow, with some more complex code -- like detecting when strips are right next to each other, and then for that side, make the border line not go beyond the strip, or something. But that would be somewhat more complex -- right now each strip is drawn without any knowledge of any others, whereas for this they would need to gain awareness of "what is right next to me".

> One bit that feels a bit off is when two adjacent strips are selected, that we can still see the orange line underneath, is that a limitation of this new system? Otherwise clipping that part out and giving priority to the white line (or drawing the active strip on top of the orange line) could work. It's not a "new system", it's just that previously the "borders" were never drawn outside of the strip rectangle. Now they are (just 2px outside), but if strips are right next to each other, you do get this overlap, since one border eats 2px into the other strip, and vice versa. That could be fixed/improved somehow, with some more complex code -- like detecting when strips are right next to each other, and then for that side, make the border line not go beyond the strip, or something. But that would be somewhat more complex -- right now each strip is drawn without any knowledge of any others, whereas for this they would need to gain awareness of "what is right next to me".

Sebastian Parborg commented 2024-03-04 15:43:47 +01:00

Member

Copy Link

I think it is harder to see which strip(s) are selected now with the colored borders.
Before it was kinda easy to spot as the selected ones were the only strips with a visible border.

Now when every strip has a border color I feel like my eyes have to dart around quite a bit more to detect which strips are selected as the other border also is grabbing my attention.

It feels a bit like the "random color" mode for wire frames.
IE before:

After:

A bit exaggerated of course, but I hope you get my point.

I think it is harder to see which strip(s) are selected now with the colored borders. Before it was kinda easy to spot as the selected ones were the only strips with a visible border. Now when every strip has a border color I feel like my eyes have to dart around quite a bit more to detect which strips are selected as the other border also is grabbing my attention. It feels a bit like the "random color" mode for wire frames. IE before:  After:  A bit exaggerated of course, but I hope you get my point.

image.png

174 KiB

image.png

164 KiB

👍 1

Aras Pranckevicius commented 2024-03-04 15:52:48 +01:00

Author

Member

Copy Link

@ZedDB yeah that's a good point. @pablovazquez any ideas how to make "what is selected" more visible? Like maybe the "selected" outline should be thicker line, or something else? or the "regular border color" should be more desaturated and/or darker?

@ZedDB yeah that's a good point. @pablovazquez any ideas how to make "what is selected" more visible? Like maybe the "selected" outline should be thicker line, or something else? or the "regular border color" should be more desaturated and/or darker?

Thomas Dinges commented 2024-03-04 16:30:39 +01:00

Owner

Copy Link

@blender-bot package

@blender-bot package

Blender Bot commented 2024-03-04 16:30:43 +01:00

Member

Copy Link

Package build started. Download here when ready.

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

tintwotin commented 2024-03-04 19:58:01 +01:00

First-time contributor

Copy Link

One of the very difficult things in VSE drawing is that elements two pixels wide will be drawn as one or two pixels wide. 1 px will be 0 or 1 wide. So, the outline outside the strips causes several problems:

The 2 px distance to the outline can't stay at ex. narrow channel height:

With little, or no distance between channels, it becomes very hard to see if a strip surrounded by selected strips is selected or not:

I agree with @ZedDB there are some challenges in making the selected strips stand out. Outlines vs. outlines (if the user colors the strip white, it'll look like the strip is selected, even if it is not), Also, having all texts white is diffusing the attention on the selected strip(previously, only the active strip had white text).

From the chat:

Btw. just a few notes from when A. Monti and I did the current VSE strip design. As the most saturated parts, gets the most attention, we tried to only give full saturation to active and selected elements such as outlines, the text when it was selected, trim numbers, and selected handles, everything else has a lower saturation. Effect strips have the lowest saturation (using all distinguishable colors in that saturation level) and source strips has a bit higher saturation level. So, in other words, you can drive the focus of the user with the saturation levels. And if everything all over gets max saturation, it'll leave the users with a more unfocused experience.

One of the very difficult things in VSE drawing is that elements two pixels wide will be drawn as one or two pixels wide. 1 px will be 0 or 1 wide. So, the outline outside the strips causes several problems:  The 2 px distance to the outline can't stay at ex. narrow channel height:  With little, or no distance between channels, it becomes very hard to see if a strip surrounded by selected strips is selected or not:  I agree with @ZedDB there are some challenges in making the selected strips stand out. Outlines vs. outlines (if the user colors the strip white, it'll look like the strip is selected, even if it is not), Also, having all texts white is diffusing the attention on the selected strip(previously, only the active strip had white text). From the chat: > Btw. just a few notes from when A. Monti and I did the current VSE strip design. As the most saturated parts, gets the most attention, we tried to only give full saturation to active and selected elements such as outlines, the text when it was selected, trim numbers, and selected handles, everything else has a lower saturation. Effect strips have the lowest saturation (using all distinguishable colors in that saturation level) and source strips has a bit higher saturation level. So, in other words, you can drive the focus of the user with the saturation levels. And if everything all over gets max saturation, it'll leave the users with a more unfocused experience.

image.png

5.8 KiB

image.png

29 KiB

image.png

16 KiB

image.png

18 KiB

image.png

98 KiB

Aras Pranckevicius commented 2024-03-05 08:58:41 +01:00

Author

Member

Copy Link

@pablovazquez I checked what other video editing software does wrt selected strip outlines, and basically: no one seems to do them "outside the strip boundaries". It is very common for the whole "strip border" to be way wider than 1px. Some tuck in the whole preview/content area by that, i.e. the border region is never showing the preview. Some display preview right up to the edge, but when a strip is selected, there's N pixels worth of selection outline that is drawn over whatever preview is rendered.

Maybe something like that would work? e.g. along the lines of:

• Any preview/content/waveform keeps, say, 5px region near the edges unmodified, perhaps slightly darkened/desaturated. That region displays strip type/color background.
• Selected/active strips display, say, 2px or 3px outline over that region. So you get bright/clear selection outline, but also several pixels worth of strip type indication.

@pablovazquez I checked what other video editing software does wrt selected strip outlines, and basically: no one seems to do them "outside the strip boundaries". It is very common for the whole "strip border" to be way wider than 1px. Some tuck in the whole preview/content area by that, i.e. the border region is never showing the preview. Some display preview right up to the edge, but when a strip is selected, there's N pixels worth of selection outline that is drawn over whatever preview is rendered. Maybe something like that would work? e.g. along the lines of: - Any preview/content/waveform keeps, say, 5px region near the edges unmodified, perhaps slightly darkened/desaturated. That region displays strip type/color background. - Selected/active strips display, say, 2px or 3px outline over that region. So you get bright/clear selection outline, but also several pixels worth of strip type indication.

👍 2

Pablo Vazquez commented 2024-03-12 12:22:00 +01:00

Member

Copy Link

@aras_p Indeed it seems that lines outside the bounds can be problematic. Thanks for trying it out though, sometimes something looks okay as mockups but not as good irl.

Maybe something like that would work? e.g. along the lines of:

• Any preview/content/waveform keeps, say, 5px region near the edges unmodified, perhaps slightly darkened/desaturated. That region displays strip type/color background.
• Selected/active strips display, say, 2px or 3px outline over that region. So you get bright/clear selection outline, but also several pixels worth of strip type indication.

Sounds good! The only downside is that waveform/preview will be slightly smaller but that's okay as trade-off for better readability.

So basically a border inline that gets either the strip type/color, or the active/selected status. I think it is still important to keep the 1px darker outline for contrast.

Made a quick mockup:

Selected plus active:

Close-up:

What do you think?

PS: It look so much better with rounded corners :D

@aras_p Indeed it seems that lines outside the bounds can be problematic. Thanks for trying it out though, sometimes something looks okay as mockups but not as good irl. > Maybe something like that would work? e.g. along the lines of: > - Any preview/content/waveform keeps, say, 5px region near the edges unmodified, perhaps slightly darkened/desaturated. That region displays strip type/color background. > - Selected/active strips display, say, 2px or 3px outline over that region. So you get bright/clear selection outline, but also several pixels worth of strip type indication. Sounds good! The only downside is that waveform/preview will be slightly smaller but that's okay as trade-off for better readability. So basically a border inline that gets either the strip type/color, or the active/selected status. I think it is still important to keep the 1px darker outline for contrast. Made a quick mockup:  Selected plus active:  Close-up:  What do you think? PS: It look **so** much better with rounded corners :D

image.png

173 KiB

image.png

796 KiB

image.png

154 KiB

image.png

330 KiB

❤️ 2

Aras Pranckevicius added 2 commits 2024-03-13 20:11:19 +01:00

ba5d413e2a Tweak strip outline/border drawing ...

- Selected/active outline is no longer outside the strip,
- Instead the regular "border" is 4px wide, and selected outline
  is 2x inside that, with 1px of border visible around.
- Make the border more desaturated (halfway between original color
  and black) so it does not "jump out" so much esp for colored
  strips.
- Fix thumbnails drawing sometimes "leaking out" 1px outside of the
  strip right side.

585f3408b4 Merge branch 'main' into vse_strip_design

Aras Pranckevicius added 1 commit 2024-03-13 20:22:58 +01:00

52623b8918 Take bottom border into account when drawing meta contents

Aras Pranckevicius commented 2024-03-13 20:27:35 +01:00

Author

Member

Copy Link

@pablovazquez ok, implemented this:

• strip border is 4px wide,
• when selected or active, the selection outline is 2px within the border (i.e. there's 1px of border around the selected outline on each side).
• made strip border be somewhat more desaturated than before, so that it does not "jump into your face" as much, particularly for color strips.

No rounded corders for now though, as that would require writing a whole new shader. Some other day.

@pablovazquez ok, implemented this: - strip border is 4px wide, - when selected or active, the selection outline is 2px within the border (i.e. there's 1px of border around the selected outline on each side). - made strip border be somewhat more desaturated than before, so that it does not "jump into your face" as much, particularly for color strips. No rounded corders for now though, as that would require writing a whole new shader. Some other day.  

missing-dark-now2.png

878 KiB

missing-light-now2.png

848 KiB

Nika Kutsniashvili commented 2024-03-13 20:34:54 +01:00

Contributor

Copy Link

It's impossible to see which strips are selected and active in above images, unless you take your time with it. And you're not taking into consideration that different themes are using different colors for active/selected. It's gonna look like rainbow in many cases.

All strips should have same colored outline so that active and selected colors are visible at the first glance. Different color for each is super impractical. Have never seen that in any editing software.

It's impossible to see which strips are selected and active in above images, unless you take your time with it. And you're not taking into consideration that different themes are using different colors for active/selected. It's gonna look like rainbow in many cases. All strips should have same colored outline so that active and selected colors are visible at the first glance. Different color for each is super impractical. Have never seen that in any editing software.

Sebastian Parborg commented 2024-03-15 15:48:57 +01:00

Member

Copy Link

I also feel like it is harder to spot what is selected at a glance now.
So I tried to experiment to see what happened if I tweaked certain things in the new design a bit.

Here is the new style without any changes:

Here it is if I change the unselect outlines to pure black:

Even if I darken the outlines I still don't think it is easy to spot the select strips in my peripheral vision. So I tried to see if it would improve by copying the "select object" text color scheme for the outliner:

And an example if I combine both dark outlines with the text:

I personally feel like the highlighted text grabs my attention the most. Especially for the active strip since it is hard to tell otherwise which strips are selected because the text appears the same-ish on all strips without it. (My eyes are usally drawn to the center of the strip, not the outline around it)

For the dark outlines, I think it makes the view a lot less busy and focused. Perhaps it doesn't help too much with helping me spot the selected strips. But I feel like it brings down the visual clutter a lot.

I also feel like it is harder to spot what is selected at a glance now. So I tried to experiment to see what happened if I tweaked certain things in the new design a bit. Here is the new style without any changes:  Here it is if I change the unselect outlines to pure black:  Even if I darken the outlines I still don't think it is easy to spot the select strips in my peripheral vision. So I tried to see if it would improve by copying the "select object" text color scheme for the outliner:   And an example if I combine both dark outlines with the text:  I personally feel like the highlighted text grabs my attention the most. Especially for the active strip since it is hard to tell otherwise which strips are selected because the text appears the same-ish on all strips without it. (My eyes are usally drawn to the center of the strip, not the outline around it) For the dark outlines, I think it makes the view a lot less busy and focused. Perhaps it doesn't help too much with helping me spot the selected strips. But I feel like it brings down the visual clutter a lot.

image.png

674 KiB

image.png

7.4 KiB

image.png

673 KiB

image.png

673 KiB

image.png

672 KiB

👍 1

Aras Pranckevicius added 2 commits 2024-03-17 14:58:43 +01:00

d75fb464ee More tweaks to outlines/text look

fa492e79f7 Merge branch 'main' into vse_strip_design

Aras Pranckevicius commented 2024-03-17 15:09:33 +01:00

Author

Member

Copy Link

@ZedDB @pablovazquez alright, since the whole "change border color" thing seems to be controversial, I have reverted that. So it is back to being dark 1px border for unselected strips, and 2px border for selected/active, using colors from the theme. For text labels, I went with something towards Sebastian's suggestion, where selected/active text labels also use colors from the theme (however slightly brighter, as the default orange-text is a bit hard to read).

Dark and light theme, before:

Dark and light theme, now:

@ZedDB @pablovazquez alright, since the whole "change border color" thing seems to be controversial, I have reverted that. So it is back to being dark 1px border for unselected strips, and 2px border for selected/active, using colors from the theme. For text labels, I went with something towards Sebastian's suggestion, where selected/active text labels also use colors from the theme (however slightly brighter, as the default orange-text is a bit hard to read). Dark and light theme, before:   Dark and light theme, now:  

crop-missing-light-before.png

556 KiB

crop-missing-dark-now.png

554 KiB

crop-missing-light-now.png

546 KiB

crop-missing-dark-before.png

560 KiB

❤️ 1

Francesco Siddi commented 2024-03-26 11:19:52 +01:00

Member

Copy Link

@blender-bot package

@blender-bot package

Blender Bot commented 2024-03-26 11:19:56 +01:00

Member

Copy Link

Package build started. Download here when ready.

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

Brecht Van Lommel commented 2024-03-26 12:26:06 +01:00

Owner

Copy Link

@blender-bot package macos-arm64

@blender-bot package macos-arm64

Blender Bot commented 2024-03-26 12:26:09 +01:00

Member

Copy Link

Package build started. Download here when ready.

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

Aras Pranckevicius requested review from Richard Antalik 2024-03-26 15:35:55 +01:00

Richard Antalik approved these changes 2024-03-26 22:12:22 +01:00

tintwotin commented 2024-03-31 06:21:14 +02:00

First-time contributor

Copy Link

A note on the saturation levels: #118288 (comment)

A note on the saturation levels: https://projects.blender.org/blender/blender/issues/118288#issuecomment-1148552

Aras Pranckevicius added 1 commit 2024-04-16 05:58:28 +02:00

7eaaf6ec3b Merge branch 'main' into vse_strip_design

Sergey Sharybin commented 2024-04-16 11:54:10 +02:00

Owner

Copy Link

@pablovazquez @fsiddi Can you give final go/no-go here?

@pablovazquez @fsiddi Can you give final go/no-go here?

Pablo Vazquez commented 2024-04-22 19:44:00 +02:00

Member

Copy Link

Just compiled the latest version.

Text labels

The orange text for selected strips doesn't work, I wouldn't do that. It doesn't really solve the issue and it is inconsistent with the rest of Blender.

The main issue is that the Active Strip theme property in the theme by default is actually gray (0.8 value) not completely white, so even while fully opaque it still doesn't look as bright when active. We should make this change in the theme.

Another change to do theme-wise is to adjust the value of the Strip Colors. They were simply copied over from Collections Colors, they work fine there because they're used only for the collection icon and hierarchy line in the Outliner. In the VSE we have text over and it's hard to read.

If we ship with better colors it'll help. However, users can still make it unreadable (that's on them though). One way to mitigate this a bit would be to introduce label drop shadows. Something we do everywhere already. Every widget label and more recently attribute previews in the viewport.

Outlines

So it is back to being dark 1px border for unselected strips, and 2px border for selected/active, using colors from the theme.

Great! One more thing we could do to improve contrast for active/selected strips, is an additional 1px black inner border before the 2px white/orange.

Which also helps contrast when the strip color matches the active/selected theme colors.

---

To sum up:

1. Remove orange color for selected strips.
2. Add drop shadow to labels.
3. Add black (or TH_BACK might work? I should test this) inner border to active/selected strips.
4. Update theme for active strips to be fully white and more readable strip colors ( I can do this myself in a separate task).

Just compiled the latest version. ### Text labels The orange text for selected strips doesn't work, I wouldn't do that. It doesn't really solve the issue and it is inconsistent with the rest of Blender. The main issue is that the `Active Strip` theme property in the theme by default is actually gray (`0.8` value) not completely white, so even while fully opaque it still doesn't look as bright when active. We should make this change in the theme. <video src="/attachments/5bda9e07-483e-4ec9-9c3f-81020dd8e6f5" title="vse_active_strip_default_theme.mov" controls></video> Another change to do theme-wise is to adjust the value of the Strip Colors. They were simply copied over from Collections Colors, they work fine there because they're used only for the collection icon and hierarchy line in the Outliner. In the VSE we have text over and it's hard to read.  If we ship with better colors it'll help. However, users can still make it unreadable (that's on them though). One way to mitigate this a bit would be to introduce label drop shadows. Something we do everywhere already. Every widget label and more recently attribute previews in the viewport.  ### Outlines > So it is back to being dark 1px border for unselected strips, and 2px border for selected/active, using colors from the theme. Great! One more thing we could do to improve contrast for active/selected strips, is an additional 1px black inner border before the 2px white/orange.   Which also helps contrast when the strip color matches the active/selected theme colors.  ---- To sum up: 1. Remove orange color for selected strips. 2. Add drop shadow to labels. 3. Add black (or `TH_BACK` might work? I should test this) inner border to active/selected strips. 4. Update theme for active strips to be fully white and more readable strip colors ( I can do this myself in a separate task).

image.png

34 KiB

image.png

12 KiB

image.png

88 KiB

image.png

32 KiB

image.png

6.2 KiB

vse_active_strip_default_theme.mov

1.6 MiB

❤️ 1

Aras Pranckevicius added 2 commits 2024-04-24 09:45:41 +02:00

7211719762 Merge branch 'main' into vse_strip_design

a49d83ec9c VSE: tweak strip text colors based on feedback

Aras Pranckevicius added 1 commit 2024-04-24 10:00:58 +02:00

0522597409 VSE: draw texts with drop shadow, darker inset for selected strip outline

Aras Pranckevicius commented 2024-04-24 10:04:42 +02:00

Author

Member

Copy Link

@pablovazquez alright, implemented your suggestions (except the "more readable strip colors in the theme" bit, since I don't know what colors to pick -- but I did update the theme entry for active strip to be white).

@pablovazquez alright, implemented your suggestions (except the "more readable strip colors in the theme" bit, since I don't know what colors to pick -- but I did update the theme entry for active strip to be white).  

Screenshot 2024-04-24 at 11.03.04.png

610 KiB

Screenshot 2024-04-24 at 11.02.56.png

619 KiB

❤️ 1

Sebastian Parborg commented 2024-04-24 11:49:15 +02:00

Member

Copy Link

Those changes looks good to me! 👍

Those changes looks good to me! 👍

tintwotin commented 2024-04-24 12:06:50 +02:00

First-time contributor

Copy Link

Very nice with the drop shadow on the texts! So much better. I have only a few questions left:

Was it tested to make the selection outlines 2px wide, so they'll stand out more? IMO, they need all the attention they can get.

Was there found a solution on how to identify the active unselected strip? And also when the texts are un-displayed?

IIRC, the reason for the outline white/orange headroom was because originally, when dragging/transforming the outlines would light up even further, but that might have been removed by now, and if not, it properly should if the white outline is full white now.

Checking: The orange outline still changes color:

Very nice with the drop shadow on the texts! So much better. I have only a few questions left: Was it tested to make the selection outlines 2px wide, so they'll stand out more? IMO, they need all the attention they can get. Was there found a solution on how to identify the active unselected strip? And also when the texts are un-displayed? IIRC, the reason for the outline white/orange headroom was because originally, when dragging/transforming the outlines would light up even further, but that might have been removed by now, and if not, it properly should if the white outline is full white now. Checking: The orange outline still changes color: 

outline_when_drag.gif

69 KiB

Pablo Vazquez commented 2024-04-24 12:29:09 +02:00

Member

Copy Link

Thanks Aras! Looking so much better. The theme needs adjusting which should be a separate task, no need to delay this even further.

Was it tested to make the selection outlines 2px wide, so they'll stand out more?

I think they are already 2px, or you mean 2x?

also when the texts are un-displayed?

Good point. Perhaps the active-and-selected strip could have this wider outline, while active-but-not-selected has the current outline width. I'll try to test this locally, no need to bother Aras with such a small cosmetic change that might not even make it (rather focus on more important things like rounded corners :D )

IIRC, the reason for the outline white/orange headroom was because originally, when dragging/transforming the outlines would light up even further, but that might have been removed by now, and if not, it properly should if the white outline is full white now.

There is only one strip with a white outline anyway, no need to extra highlight it to indicate it's been transformed, it's pretty obvious already you're staring at it. The other items light up bright orange as usual:

Thanks Aras! Looking so much better. The theme needs adjusting which should be a separate task, no need to delay this even further. > Was it tested to make the selection outlines 2px wide, so they'll stand out more? I think they are already 2px, or you mean 2x? > also when the texts are un-displayed? Good point. Perhaps the active-and-selected strip could have this wider outline, while active-but-not-selected has the current outline width. I'll try to test this locally, no need to bother Aras with such a small cosmetic change that might not even make it (rather focus on more important things like rounded corners :D ) > IIRC, the reason for the outline white/orange headroom was because originally, when dragging/transforming the outlines would light up even further, but that might have been removed by now, and if not, it properly should if the white outline is full white now. There is only one strip with a white outline anyway, no need to extra highlight it to indicate it's been transformed, it's pretty obvious already you're staring at it. The other items light up bright orange as usual: <video src="/attachments/7a8e9002-ea3e-47b0-beb6-c3b0c7193183" title="Screen Recording 2024-04-24 at 12.20.05.mov" controls></video>

Screen Recording 2024-04-24 at 12.20.05.mov

2.6 MiB

Aras Pranckevicius added 1 commit 2024-04-24 12:29:49 +02:00

21ca21b865 Merge branch 'main' into vse_strip_design

Aras Pranckevicius commented 2024-04-24 12:32:38 +02:00

Author

Member

Copy Link

I'd rather push the current state as-is, since this iteration seems to not have major usability issues, and get back to finishing up the "display missing media" part of the whole effort. It's been two months on this PR alone already :) Various tweaks to colors, outline widths, etc. can be done separately.

I'd rather push the current state as-is, since this iteration seems to not have major usability issues, and get back to finishing up the "display missing media" part of the whole effort. It's been two months on this PR alone already :) Various tweaks to colors, outline widths, etc. can be done separately.

👍 2

Aras Pranckevicius merged commit c64050ecd2 into main 2024-04-24 12:37:48 +02:00

Aras Pranckevicius referenced this issue from a commit 2024-04-24 12:37:49 +02:00

VSE: Timeline strip visual design updates

Aras Pranckevicius deleted branch vse_strip_design 2024-04-24 12:37:51 +02:00

tintwotin commented 2024-04-24 12:42:39 +02:00

First-time contributor

Copy Link

I think they are already 2px, or you mean 2x?

On the 2px outlines, I guess it's hard to see, but what if they're double as wide as they are now?

while active-but-not-selected has the current outline width.

The outline indicates that the strip can be transformed, and the active strip can't be transformed, when it isn't selected(+outline), but it's properties can still be changed in the sidebar:

These shared pixels are less than optimal, but I guess we'll have to live with that.

@pablovazquez In your mockups, you had a separating line between the text area and the content area of the strip like the color strips has, is this something you want implemented on all strip types?

> I think they are already 2px, or you mean 2x? On the 2px outlines, I guess it's hard to see, but what if they're double as wide as they are now? > while active-but-not-selected has the current outline width. The outline indicates that the strip can be transformed, and the active strip can't be transformed, when it isn't selected(+outline), but it's properties can still be changed in the sidebar:  These shared pixels are less than optimal, but I guess we'll have to live with that.  @pablovazquez In your mockups, you had a separating line between the text area and the content area of the strip like the color strips has, is this something you want implemented on all strip types?

active_vs_outline.gif

333 KiB

image.png

38 KiB

Pablo Vazquez commented 2024-04-24 16:33:43 +02:00

Member

Copy Link

The outline indicates that the strip can be transformed, and the active strip can't be transformed, when it isn't selected(+outline), but it's properties can still be changed in the sidebar:

I've made a PR !121029 trying to cover this case. It's basically the same thin black outline we have on unselected strips, but whiteish.

We can continue discussion in that PR.

@pablovazquez In your mockups, you had a separating line between the text area and the content area of the strip like the color strips has, is this something you want implemented on all strip types?

I think it'd help in some cases but it also adds a bit of visual clutter. We could experiment with a subtle version of it.

On the 2px outlines, I guess it's hard to see, but what if they're double as wide as they are now?

We can discuss all this over the chat perhaps or on another design task. I've looked at the code for making that other PR and it's fairly easy to play with outline width to test things.

I think this PR and related task can be left alone for now.

Thanks Aras for the work and (most importantly) patience!

> The outline indicates that the strip can be transformed, and the active strip can't be transformed, when it isn't selected(+outline), but it's properties can still be changed in the sidebar: I've made a PR !121029 trying to cover this case. It's basically the same thin black outline we have on unselected strips, but whiteish. We can continue discussion in that PR. > @pablovazquez In your mockups, you had a separating line between the text area and the content area of the strip like the color strips has, is this something you want implemented on all strip types? I think it'd help in some cases but it also adds a bit of visual clutter. We could experiment with a subtle version of it. > On the 2px outlines, I guess it's hard to see, but what if they're double as wide as they are now? We can discuss all this over the chat perhaps or on another design task. I've looked at the code for making that other PR and it's fairly easy to play with outline width to test things. I think this PR and related task can be left alone for now. Thanks Aras for the work and (most importantly) patience!

Aras Pranckevicius referenced this issue from a commit 2024-04-29 19:45:38 +02:00

VSE: Revert strip text color to white

Sign in to join this conversation.

Reviewers

No reviewers

Richard Antalik

Labels

Clear labels   

Interest

Alembic

  

Interest

Animation & Rigging

  

Interest

Asset Browser

  

Interest

Asset Browser Project Overview

  

Interest

Audio

  

Interest

Automated Testing

  

Interest

Blender Asset Bundle

  

Interest

BlendFile

  

Interest

Collada

  

Interest

Compatibility

This issue affects/is about backward or forward compatibility

  

Interest

Compositing

  

Interest

Core

  

Interest

Cycles

  

Interest

Dependency Graph

  

Interest

Development Management

  

Interest

EEVEE

  

Interest

EEVEE & Viewport

  

Interest

Freestyle

  

Interest

Geometry Nodes

  

Interest

Grease Pencil

  

Interest

ID Management

  

Interest

Images & Movies

  

Interest

Import Export

  

Interest

Line Art

  

Interest

Masking

  

Interest

Metal

  

Interest

Modeling

  

Interest

Modifiers

  

Interest

Motion Tracking

  

Interest

Nodes & Physics

  

Interest

OpenGL

  

Interest

Overlay

  

Interest

Overrides

  

Interest

Performance

  

Interest

Physics

  

Interest

Pipeline, Assets & IO

  

Interest

Platforms, Builds & Tests

  

Interest

Python API

  

Interest

Render & Cycles

  

Interest

Render Pipeline

  

Interest

Sculpt, Paint & Texture

  

Interest

Text Editor

  

Interest

Translations

  

Interest

Triaging

  

Interest

Undo

  

Interest

USD

  

Interest

User Interface

  

Interest

UV Editing

  

Interest

VFX & Video

  

Interest

Video Sequencer

  

Interest

Virtual Reality

  

Interest

Vulkan

  

Interest

Wayland

Issues relating to Wayland windowing support.

  

Interest

Workbench

  

Interest: X11

Issues relating to Xorg/X11 support.

  

Legacy

Blender 2.8 Project

  

Legacy

Milestone 1: Basic, Local Asset Browser

  

Legacy

OpenGL Error

  

Meta

Good First Issue

  

Meta

Papercut

  

Meta

Retrospective

  

Meta

Security

Issues relating to security: https://wiki.blender.org/wiki/Process/Vulnerability_Reports

  

Module

Animation & Rigging

  

Module

Core

  

Module

Development Management

  

Module

EEVEE & Viewport

  

Module

Grease Pencil

  

Module

Modeling

  

Module

Nodes & Physics

  

Module

Pipeline, Assets & IO

  

Module

Platforms, Builds & Tests

  

Module

Python API

  

Module

Render & Cycles

  

Module

Sculpt, Paint & Texture

  

Module

Triaging

  

Module

User Interface

  

Module

VFX & Video

  

Platform

FreeBSD

  

Platform

Linux

  

Platform

macOS

  

Platform

Windows

  

Priority

High

  

Priority

Low

  

Priority

Normal

  

Priority

Unbreak Now!

  

Status

Archived

  

Status

Confirmed

  

Status

Duplicate

  

Status

Needs Info from Developers

  

Status

Needs Information from User

  

Status

Needs Triage

  

Status

Resolved

  

Type

Bug

  

Type

Design

  

Type

Known Issue

  

Type

Patch

  

Type

Report

  

Type

To Do

No Label

Interest

Alembic

Interest

Animation & Rigging

Interest

Asset Browser

Interest

Asset Browser Project Overview

Interest

Audio

Interest

Automated Testing

Interest

Blender Asset Bundle

Interest

BlendFile

Interest

Collada

Interest

Compatibility

Interest

Compositing

Interest

Core

Interest

Cycles

Interest

Dependency Graph

Interest

Development Management

Interest

EEVEE

Interest

EEVEE & Viewport

Interest

Freestyle

Interest

Geometry Nodes

Interest

Grease Pencil

Interest

ID Management

Interest

Images & Movies

Interest

Import Export

Interest

Line Art

Interest

Masking

Interest

Metal

Interest

Modeling

Interest

Modifiers

Interest

Motion Tracking

Interest

Nodes & Physics

Interest

OpenGL

Interest

Overlay

Interest

Overrides

Interest

Performance

Interest

Physics

Interest

Pipeline, Assets & IO

Interest

Platforms, Builds & Tests

Interest

Python API

Interest

Render & Cycles

Interest

Render Pipeline

Interest

Sculpt, Paint & Texture

Interest

Text Editor

Interest

Translations

Interest

Triaging

Interest

Undo

Interest

USD

Interest

User Interface

Interest

UV Editing

Interest

VFX & Video

Interest

Video Sequencer

Interest

Virtual Reality

Interest

Vulkan

Interest

Wayland

Interest

Workbench

Interest: X11

Legacy

Blender 2.8 Project

Legacy

Milestone 1: Basic, Local Asset Browser

Legacy

OpenGL Error

Meta

Good First Issue

Meta

Papercut

Meta

Retrospective

Meta

Security

Module

Animation & Rigging

Module

Core

Module

Development Management

Module

EEVEE & Viewport

Module

Grease Pencil

Module

Modeling

Module

Nodes & Physics

Module

Pipeline, Assets & IO

Module

Platforms, Builds & Tests

Module

Python API

Module

Render & Cycles

Module

Sculpt, Paint & Texture

Module

Triaging

Module

User Interface

Module

VFX & Video

Platform

FreeBSD

Platform

Linux

Platform

macOS

Platform

Windows

Priority

High

Priority

Low

Priority

Normal

Priority

Unbreak Now!

Status

Archived

Status

Confirmed

Status

Duplicate

Status

Needs Info from Developers

Status

Needs Information from User

Status

Needs Triage

Status

Resolved

Type

Bug

Type

Design

Type

Known Issue

Type

Patch

Type

Report

Type

To Do

Milestone

Clear milestone

No items

No Milestone

Projects

Clear projects

No project

Video Sequencer

Assignees

Clear assignees

No Assignees

11 Participants

Notifications

Subscribe

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: blender/blender#118581

No description provided.