muse-sequencer / muse

MusE is a digital audio workstation with support for both Audio and MIDI
https://muse-sequencer.github.io/
Other
644 stars 69 forks source link

MusE GUI redesign based on KDE Light Breeze Theme #557

Closed budislav closed 3 years ago

budislav commented 7 years ago

Based on #556 I made a redesign of MusE mixer. It fits perfectly with light kde breeze theme.

Comparing to original design this is the changelog:

It would be good if we can set .svg for icons so it look better on retina. One thing I redesigned but I am sure it should never bee in mixer at all, those instrument and note settings in track channel. They should be in track info but not in mixer.

mixermuseold3

Reaper10 commented 7 years ago

will this help muse to come to win/mac?

budislav commented 7 years ago

@Reaper10 This can help MusE to get unique and beautiful user-friendly UI. This means more people will use MusE than before, more interest into development.. In one word more happy faces :)

I don't know if there is a plan for win/mac versions personally I think one software firstly should work and look perfect on one OS in this case Linux. Than you can think about porting to other OS but only if everything works perfect on one OS. I don't see a need for porting on other OS from many reasons but that is not the question here.

This is all about usability and beauty.

terminator356 commented 7 years ago

On Tuesday, January 24, 2017 1:39:16 PM EST Budislav wrote:

Based on #556 I made a redesign of MusE mixer. It fits perfectly with light kde breeze theme.

Personally I don't like Breeze as default desktop theme. We went from beautiful full Oxygen icons to... black indistinguishable outlines? Very bad. Looks like a child's effort. I thought it was broken at first ;-)

I like your picture, it is a clean design.

I need to point out some things...

Since we last spoke I added a 'live' colour dialog in Settings: Appearance. Changes take effect immediately so it's fun to play with. Colours can be saved and reloaded. I encourage users to contribute new palettes.

Besides all the colour, font and other tweaks in Appearance, users can also make stylesheets for completely different looks. We have three available now: 'Dark' 'Light' and 'Ardour'. For maximum control however, you sort of have to know what the 'object names' of all the gui elements are that you wish to design. Also need to know all the published properties of all controls. And not every control has all properties published (yet). It's in the code, but we should publish all known identifiers, but that is rather difficult to track every control.

The OOM team made that one of their first priorities so that they could make a very nice stylesheet.

Still, I encourage users to try stylesheets before diving into code changes. Ask us if you need to access some gui control and want to know its properties.

Comparing to original design this is the changelog:

  • [x] Channel color is above the title, because one day that color will represent track color in arranger and it would be editable so there can be contrast problems if choose dark color.

(Those colours are editable as well as track colour, in Appearance.)

  • [x] Removed shadow from all buttons and all buttons are 18px high. Roundness on them is only 1px. - [x] All buttons have same look.

  • [x] Font is 11pt everywhere except level meters (8pt). Used font is Noto sans.

Do you mean just for your picture, or do you mean always fixed at 11pt? Can't really accept that. Fonts are adjustable in MusE. Shouldn't be a problem. The mixer uses Font #2 in Appearance. Users would just set 11pt and Noto in Appearance. Some users may not have Noto font available. Or they may like another font. That's why we have these font settings in Appearance.

Thus, buttons and controls will CHANGE size according to chosen font. Thus, we might (or might not) also want scalable SVG icons (see below).

  • [x] Routing buttons are moved bellow. Their icons also removed so they look more readable and they have dropdown arrow.

I moved them to the top because they are THE most important thing a user needs to access on the strip. Like Ardour. They make sense on top because they indicate signal flow in and out of the strip. Still, before they were way down on the bottom, so the middle is still an improvement.

Here's what I am planning next, it is another reason I put them on top:

I want to add 'cables' drawings between all the route buttons. Users can quickly turn it on and off for a "bird's eye" view of the ENTIRE routing situation. To quickly spot trouble. Thus THIN strips are also of benefit here.

The 'cables' will 'droop' down, so it is best if the route buttons are at the top. (Otherwise I must draw outside of the window, on the desktop.)

  • [x] Redesigned monitoring, 1/2 channel, record icons.

Looks nice. Hm, no 'letters' here? Breaking your own rule? Icons AND letters ;-) See what I mean? Let's be consistent, he he... Icons icons icons...

  • [x] Buttons with warnings have different red color.

  • [x] Effects are placed in racks. Double click on empty space to load.

Careful with that one. Empty positions need to be clearly shown.

  • [x] Sliders are also 18px high very clean flat design.

Understand why I put the numbers INSIDE the sliders: I work on LARGE projects with MANY audio and midi tracks each with multiple 'takes', as well as multiple synths and so on.

I absolutely need THIN mixer strips. As many strips at once as will fit on the screen. I don't want to have to scroll all over the place.

I managed to get that strip size DOWN to about 45 pixels wide (default) !

At first I didn't even put a slider thumb knob - just the slider bar and the numbers. It looked and worked cool, but someone requested I put back the thumb knob. (Technically we don't even need a slider thumb. It can be disabled easily in code. When it is disabled, the thumb is a single dark line. Imagine the thumb is NOT there and you can see it still works fine.)

Why did I put the numbers in the sliders and not in the meters? Well, meters are constantly being redrawn when they are active. They are highly optimized for fast drawing. When there are dozens of meters all going at once, this matters! Thus, putting numbers in the meters would slow them down.

But, I am still planning to do it. I will try to make it fast.

  • [x] Mute and solo buttons have only letter instead of icons (more readable like in other DAW's).

See, one thing about that is, we talked about this already, what if in some country 'mute' and 'solo' start with the SAME letter? Then you might have 'S' and 'S', or 'M' and 'M', or 'A' and 'A' for example. Leave them at 'S' and 'M' always? What would that mean to someone in another country, especially a beginner? I personally prefer icons. But you knew that already, he he...

  • [x] Faders have new 3d look (to highlight from other ui elements)
  • [x] Level meters are simple and beautiful
  • [x] Every UI element have its proper position and size, it is pixel perfect so nothing looks blurry.
  • [x] Every channel are divided by line (same size and color as frame), also selected channel look more better. They are all same width.

Clean.

Remember our adjustable fonts and colours though. This is one reason I drew the slider text with a shadow. It is prepared for virtually any colour combination. Not just slider bar and text, but background as well, which can change with Qt Style or a stylesheet (try our Ardour stylesheet for example). The sliders have several different variations on text drawing. For example text can be 'split' black and white depending on slider position, just like a real Qt slider (a Progress Slider for example). I have set it to 'shadowed text' for now, since that was virtually the only setting that worked with all colours.

Also, it took some effort to /purposely/ draw text aliased so that it could be readable at small sizes. You can see the aliased text in the slider. There is an Appearance Setting for when the aliased text begins to take effect. It can also be turned off. Try it.

  • [x] Removed "db" from volume/gain info
  • [x] Removed absolutely unnecessary "power on/off" button (we have mute).

Wait. Understand how MusE works. Off is necessary because it completely turns the track off, which means NO audio processing of any kind which saves CPU cycles. Off also prevents accidental gui control movement by disabling all the controls on a strip. Mute does still processes audio (for things like reverb 'tails' and so on). Mute is designed for rapid response for users who need to flip it on and off rapidly for signal comparisons. Off is NOT designed for rapid response.

So 'off' must come back and the db reading has to go back where it was, or somewhere else unfortunately.

It would be good if we can set .svg for icons so it look better on retina.

Yup. For our own custom icons we need some svg for sure. But look through the code (icons.cpp) and you'll see that we do use system icons where one is appropriate. MusE developer Orcan installed a system where we can easily choose. Sure, call it an unholy mix, but at least we haven't had to design our own 'file' icons and so on. It works, so we can get on with our coding ;-)

One thing I redesigned but I am sure it should never bee in mixer at all, those instrument and note settings in track channel. They should be in track info but not in mixer.

Well, there is no choice now. The new midi strip is REPLACING the old Track Info panel. Track Info is just there now in case anyone is having trouble with midi strip. Track Info panel will GO soon. Thus, I needed to squeeze all of that stuff onto the midi strip.

Your idea with the two tabs 'Instr' and 'Note' is great :-)

I should do that. As you can see, it was a challenge where to put all that stuff.

Kick me later if I haven't done something like this.

See, the thing is, with the adjustable strip size splitter (which I see you have discovered) the space to the right was awfully bare, so I decided to make use of it by putting those controls there. Really I put a lot of effort into that. I had to go through several different scenarios and attempts before realizing what worked and what didn't. Meh, I'm still not happy with some of it, but what else could I do?

Be aware that the 'rack' areas (top, right, and pan area) containing the knobs/sliders were COMPLETELY redesigned, to be modular. I will be allowing users to put their own controls up there. When I get around to it.

And finally, there are some very good reasons why I switched back to knobs by default. Horizontal sliders may seem ideal, but unfortunately once you sit down and actually design them, you realize there are problems. Believe me, I tried. Knobs rule, in the majority of cases, but not all.

Remember, anyone is welcome to fork MusE and try their own redesign. Then they can request that we pull the changes later.

Thanks. Tim.

mixermuseold3

budislav commented 7 years ago

Personally I don't like Breeze as default desktop theme. We went from beautiful full Oxygen icons to... black indistinguishable outlines? Very bad. Looks like a child's effort. I thought it was broken at first ;-)

Hmm, well I am not a big fan of everything but it is clean and fresh. Those black indistinguishable outlines as you call make sense on modern desktop. Those icons are mono and minimal from good reasons. Look at google online document editor. They can be light depends on background. We should borrow the best ideas and practices :) I see you are not fun of those icons but I think that is a habit.

We don't need icons in menu bar. But I will come to this later. If you can, please set new breeze icons on default.

I like your picture, it is a clean design.

I am glad!

Since we last spoke I added a 'live' colour dialog in Settings: Appearance. Changes take effect immediately so it's fun to play with. Colours can be saved and reloaded. I encourage users to contribute new palettes.

I will try it definitely. The best thing is if user can make his own theme.

Besides all the colour, font and other tweaks in Appearance, users can also make stylesheets for completely different looks. We have three available now: 'Dark' 'Light' and 'Ardour'.

That is great but only if we can change every color to make new theme. I don't like Arodur look and will not use that theme ever. I think MusE need his own theme and this.

For maximum control however, you sort of have to know what the 'object names' of all the gui elements are that you wish to design. Also need to know all the published properties of all controls. And not every control has all properties published (yet). It's in the code, but we should publish all known identifiers, but that is rather difficult to track every control.

It would be great if it works live without need to click on apply every time so user can quickly learn what each color is for.

Still, I encourage users to try stylesheets before diving into code changes. Ask us if you need to access some gui control and want to know its properties.

I am not good with code, my speciality is UI/UX design so I vote for live theme editor :)

(Those colours are editable as well as track colour, in Appearance.) We need to change every track color, not only color based on track type. Every other DAW have this, we really need it. So there is quick way to change track color with right click or to have one color box in every track. And in the mixer like in my design you can click on that color and change it. If you choose for example dark red for track, that would not be good for black title and we dont want to change title color. So this color should be above title. Ableton Live have title on color and that is a problem. I don't follow bad examples, only best :) Remember usability at first.

Do you mean just for your picture, or do you mean always fixed at 11pt? Can't really accept that. Fonts are adjustable in MusE.

I mean we need default theme to be perfect and I found that size perfect not to small and not to big. I compared it with other DAWs. It need to be readable by default. And users off course can change it in settings that is great 👍

Shouldn't be a problem. The mixer uses Font #2 in Appearance. Users would just set 11pt and Noto in Appearance.

Yes , but I am trying to make it good by default theme.

Some users may not have Noto font available. Or they may like another font. That's why we have these font settings in Appearance.

You can put Noto as default so it is there when they install MusE. That is the most modern simple, and expensive open source font on the world for all languages. It would be default on Android because it is perfect UI font for screens. And we MusE is all on screen :) Trust me, nobody would want to change it. You don't like Noto? It is good if we can use good stuff.

Thus, buttons and controls will CHANGE size according to chosen font.

👍 Well this should be changed so it is default size 18 px and 11pt for text. I don't know how Linux MusE render this but in my software it is we need to compare those sizes with design. So when you change font it should change buttons size normally.

Thus, we might (or might not) also want scalable SVG icons (see below).

I think we need .svg but this is technical side I will not messing around this :)

I moved them to the top because they are THE most important thing a user needs to access on the strip. Like Ardour. They make sense on top because they indicate signal flow in and out of the strip. Still, before they were way down on the bottom, so the middle is still an improvement.

I put them under effect rack because I think Effects should be on the top. Not because Logic and other DAW's make this but because it have a sense if one day we can drag and drop those effects from some browser. It would be easier for user to see it on the top plus it have resizable height frame. This is not important if you insist it can be on the top but I am looking into future :)

Here's what I am planning next, it is another reason I put them on top:

I want to add 'cables' drawings between all the route buttons. Users can quickly turn it on and off for a "bird's eye" view of the ENTIRE routing situation. To quickly spot trouble.

This is cool 👍 Fl studio have this cables. I am not big fan of them because if you have a lot of strips you need to scroll to see the end of cable so it is not so use-friendly but it can be really helpful. Yes it should be on the top probably, I don't know we should see this in action first.

Thus THIN strips are also of benefit here.

All strips needs to be the same width. And we should think about this value. I measure Logic, ableton, .. mixer strips are wider and we need a space for effect names and other things, we can't make thinner strips really.

The 'cables' will 'droop' down, so it is best if the route buttons are at the top. (Otherwise I must draw outside of the window, on the desktop.)

No problem.

Looks nice. Hm, no 'letters' here? Breaking your own rule? Icons AND letters ;-) See what I mean? Let's be consistent, he he... Icons icons icons...

You need to know something my friend, I am not born yesterday :) It is hard to explain every change. I know it's sometimes difficult to accept but someone here need to trust me, this is my profession.. We can't have only icons or only text. The best thing is to compare it with other DAW's. Commercial DAW's have teams of designers and UX experts. They are spending a lot of money to test their UX on users. All of those solutions are tested things. We need to follow the best (tested) practice.

  • [x] Buttons with warnings have different red color.
    • [x] Effects are placed in racks. Double click on empty space to load. Careful with that one. Empty positions need to be clearly shown.

Sure. That's why our effect rack have black outline. And for warning color I spent more than 8 minutes on this. I am here to fix UI not to make a bigger problem :)

Understand why I put the numbers INSIDE the sliders:

I work on LARGE projects with MANY audio and midi tracks each with multiple 'takes', as well as multiple synths and so on.

I absolutely need THIN mixer strips. As many strips at once as will fit on the screen. I don't want to have to scroll all over the place.

Just to be clear when you say strips, you mean on one track width in mixer or sliders? If you talking about track width. I understand your need, but you need to understand some standards. We can't have the thinnest strips from all DAW's there. We have a lot of things in those strips and we need clear space between all elements. If you mean on slider width I don't have a problem with thin if there is space for text and numbers. Studio one, REAPER, Live, new Fl studio and others have possibility to make track width thinner. We should make something like that! Responsive mixer design so when you resize strip it will change his look.

I managed to get that strip size DOWN to about 45 pixels wide (default) !

If you talking aboit this slider It is 68px by default for two channels and 55px for one by default. I made 69px for every track type.

At first I didn't even put a slider thumb knob - just the slider bar and the numbers. It looked and worked cool, but someone requested I put back the thumb knob.

You should stop listen conservative users. I know they would like to go back in 80's and live there me too, but only because of music :) Sliders should be on by default, that have a sense so if user don't like it he can bring the knobs. New things covered old, not the opposite.

(Technically we don't even need a slider thumb. It can be disabled easily in code. When it is disabled, the thumb is a single dark line. Imagine the thumb is NOT there and you can see it still works fine.)

This slider thumb is not the problem at all. He is necessary here. You can see in new design how it can be clear.

Why did I put the numbers in the sliders and not in the meters? Well, meters are constantly being redrawn when they are active. They are highly optimized for fast drawing. When there are dozens of meters all going at once, this matters! Thus, putting numbers in the meters would slow them down.

But, I am still planning to do it. I will try to make it fast.

I m not sure I am following this. I made those numbers beside of meters and sliders not in them?

See, one thing about that is, we talked about this already, what if in some country 'mute' and 'solo' start with the SAME letter? Then you might have 'S' and 'S', or 'M' and 'M', or 'A' and 'A' for example. Leave them at 'S' and 'M' always? What would that mean to someone in another country, especially a beginner? I personally prefer icons. But you knew that already, he he...

In music production mute and solo is there for all language for the all time. Everybody knows what is m and s and that should never been translated and I don't think there are someone who don't know that. Just look at every DAW on the Earth. Everyone have s and m for those buttons. Literally every. You can set in settings to turn on those icons. Bu on default they should be letters.

Remember our adjustable fonts and colours though. This is one reason I drew the slider text with a shadow. It is prepared for virtually any colour combination. Not just slider bar and text, but background as well, which can change

This is awesome but I prefer clean design. Please make clean like in my design and give user option to turn this shadow on if he change colors. That font is without antaliasing. Antialiasing should be turned on by default.

with Qt Style or a stylesheet (try our Ardour stylesheet for example). The sliders have several different variations on text drawing.

I will

For example text can be 'split' black and white depending on slider position, just like a real Qt slider (a Progress Slider for example).

This is awesome option. Total control on sliders.

I have set it to 'shadowed text' for now, since that was virtually the only setting that worked with all colours.

Right color choose can omit the shadow so if we make a nice theme this shadow should be optional.

Also, it took some effort to /purposely/ draw text aliased so that it could be readable at small sizes. You can see the aliased text in the slider. There is an Appearance Setting for when the aliased text begins to take effect. It can also be turned off. Try it.

This is also cool but can this look nice on default like native buttons with text? On the screenshot you can see that on default antialiasing is off. i tried to turn it on but that gives me some strange results, blurry and not readable.

Wait. Understand how MusE works. Off is necessary because it completely turns the track off, which means NO audio processing of any kind which saves CPU cycles.

Ok this have a sense.

Off also prevents accidental gui control movement by disabling all the controls on a strip.

If we have back this is not a problem if someone move control accidentally.

Mute does still processes audio (for things like reverb 'tails' and so on). Mute is designed for rapid response for users who need to flip it on and off rapidly for signal comparisons. Off is NOT designed for rapid response.

But why I don't see that in every other popular DAW? Can you tell me which DAW have that in mixer? There is a space for that under mute. It is totally useless for me. I learned on mute, on every other DAW. But if it must be there no problem. I like in ableton live mute button is a channel number. That have a sense and more use.

So 'off' must come back and the db reading has to go back where it was, or somewhere else unfortunately.

But dB don't need to be there. Everyone knows it is in dB but if user don't know, he can hover with mouse and he will see it, once for all time. There is no reason to see "dB" in every track in mixer all the time. That field can be wider but that will break alignment with mute button bellow. I don't see this in Logic, Sonar X, Ableton Live, REAPERa and other mixers.

Well, there is no choice now. The new midi strip is REPLACING the old Track Info panel. Track Info is just there now in case anyone is having trouble with midi strip. Track Info panel will GO soon. Thus, I needed to squeeze all of that stuff onto the midi strip.

I want to help you with this track info I already started working on, but I am not sure I understand you now. Track Info panel will go? That left side panel in aranger will be removed? I loved this panel beside mixer like in Bitwig Studio, Cubase, logic and other DAWs. but It should never been in arranger. It should be beside him like in other DAWs so it is always visible like in my proposal I made two years ago http://budislavtvp.deviantart.com/art/MusE-Sequencer-UI-UX-Design-Concept-657764784 You can't put this options in mixer. This does not have anything with mixing.

Your idea with the two tabs 'Instr' and 'Note' is great :-)

Thanks :) But it should not bee in mixer so if we have it in new track info it can look different.

I should do that. As you can see, it was a challenge where to put all that stuff.

Yes but it looks tight and there is no solution for that.

See, the thing is, with the adjustable strip size splitter (which I see you have discovered) the space to the right was awfully bare, so I decided to make use of it by putting those controls there.

I accidentally discovered that on Ubuntu when you resize track non midi track strip there is an empty box. I like how studio one used this space but we don't have something to put there like them. And if you have more than 3 strips like that it is totally confusion.

Really I put a lot of effort into that. I had to go through several different scenarios and attempts before realizing what worked and what didn't. Meh, I'm still not happy with some of it, but what else could I do?

Well those things are not documented yet and I don't even know how that working. I still have a that problem with jack. I would like someone help me with that so I can have a sound in MusE and see everything in action.

Be aware that the 'rack' areas (top, right, and pan area) containing the knobs/sliders were COMPLETELY redesigned, to be modular. I will be allowing users to put their own controls up there. When I get around to it.

What do you mean I don't get this?

And finally, there are some very good reasons why I switched back to knobs by default. Horizontal sliders may seem ideal, but unfortunately once you sit down and actually design them, you realize there are problems. Believe me, I tried. Knobs rule, in the majority of cases, but not all.

I believe you if there are problems with coding and sure this is not easy but if we talk about usability they are not better then knobs on that place. They can be lower height not to much but I don't want usability to suffer.

Remember, anyone is welcome to fork MusE and try their own redesign. Then they can request that we pull the changes later.

That is nice but I am not programmer. If I am believe me I would already made one DAW 🗡 I can help on this way.

budislav commented 7 years ago

@terminator356 I made some changes:

muse_mixer_new

budislav commented 7 years ago

@Reaper10 I am not sure I understand what are you saying?

ViktorNova commented 7 years ago

This looks GREAT!!! Excellent work. I really hope this gets merged in and MusE starts going in this direction. The old XPM-based layout looks very 90s

Reaper10 commented 6 years ago

I would love to see the tracks window two

Reaper10 commented 6 years ago

a mew gui deign to help Muse stick out from all the other free daws out there may help two

davidhealey commented 6 years ago

Has this been implemented yet?

github-actions[bot] commented 3 years ago

This issue is stale because it has been open one year with no activity. Remove Stale label or comment or it will be closed in 30 days.

kybos commented 3 years ago

With the customizing possibilities in MusE 4, it should be possible for everyone to create a theme very similar to the examples above (Breeze-like), just using style sheets and the colors dialog in MusE itself. I personally prefer dark themes (easier on the eyes), so the new themes bundled in MusE 4 are on the dark side.