Redesign The Effects Plugins

[RebeccaDeField]

It has been requested by some here that all of the Effects Plugins are redesigned to fit with the new theme. There are a lot of plugins and some people have already started collaborating with me on this. Bellow, I have listed all of the elements and design standards that will be needed to design matching plugins that look consistent. I think it's important that if someone would like to contribute a design for one of the plugins that they say so in the comments bellow so that two people don't redesign the same plugin.

FONTS The font that I am using is Orbitron Bold in ALL CAPS with 1.50 tracking in 11px. The font (and preferably all elements) have an 8px space around them. For best results, export your final SVG as a Cairo .png (I prefer to use the Save A Copy function here).

If the Cairo .png leaves some of the elements looking a bit to crisp, you can always export the text with Cairo and the background with Inkscape. Use the "Color to Alpha" option in GIMP to cut out the bg and then place it on the background. This is only necessary if you are creating a more complex graphic.

BACKGROUND Let's try to keep backgrounds that are going to be flush with the Title Bars the same as the "Plugin BG" background in my source files.

GRADIENTS Please note that your eyes follow the direction that a gradient is facing. For example, the gradient that I used in the LFO controller was linear so that your eyes would be drawn from the title down to the content of the plugin. If the gradient pointing at an odd angle, the plugin will be a bit less intuitive for the user. Gradients should be subtle when possible. This is not exactly a rule, but because many prefer flat design and many others don't I try to keep it somewhere in between.

KNOBS The knobs were designed to look slightly transparent in the center, but they actually a solid color. This is just the green with an overlay of the background color to give it the same transparent look, while making sure that the knobs are perfectly visible in all parts of the program.

BUTTONS You will find various buttons in my .SVG source files. Please reference the SENDS buttons. I usually just create pixel perfect text from scratch because it doesn't take me very much time but if you want to use a font, just make sure that you are using good hinting when you export. Inactive buttons are lighter with white text, active buttons are darker with green text. Again, you should easily be able to resize the buttons in my source files so don't worry about creating that from scratch.

SLIDERS Please see the Faders Knobs in my source files for a reference.

OTHER BACKGROUNDS Although I strive for simplicity, it may be necessary to group certain elements in some cases. For this, please reference my "Plugin Box" graphic in my source files. This was designed for a specific element, but it is using the same gradients and style elements you would want to use if you wanted to box in a section up.

I think that covers all of the elements will be needed in the plugins. Please let me know if I missed anything or if you have any questions.

This issue is for the effects plugins only. If someone wants to redesign instrument plugins I think that can be another discussion for another time. :)

LIST OF EFFECT PLUGINS

• [X] Peak Controller (#2816)
• [x] Spectrum Analyzer (#2971)
• [x] Multitap Echo (#3008)
• [x] Stereo Matrix (#2989)
• [x] BassBooster (#2988)
• [x] Crossover Equalizer (#2994)
• [x] Amplifier (#2985)
• [x] Flanger (#3007)
• [x] Delay (#3120)
• [x] Waveshaper Effect (#3097)
• [x] Dynamics Processor (#3327)
• [x] Equalizer (#3030)
• [x] Bitcrush (#3575)
• [x] Dual Filter (#3484)

Note: you can replace @mentions with PR # once ready.

Plugins before:

@Umcaruje @mikobuntu @BaraMGB @IvanMaldonado

[BaraMGB]

👍

https://github.com/LMMS/lmms/pull/2816

[Umcaruje]

@RebeccaDeField could you turn this into a meta issue, by adding a checklist so we keep track of all the plugins that get redesigned.

[RebeccaDeField]

@Umcaruje Done :smile:

For some updates to the plugins and LFO controller BG please refer to this PR.

[RebeccaDeField]

I redesigned the Spectrum Analyzer. I will post a screenshot when I get the chance.

[RebeccaDeField]

So I placed the updated files in plugins/spectrumanalyzer yet I am still not seeing my updated design when I load it. I found the original files here. Am I not using the right folder or missing somerhing here? Thought it also might be a computer/file permissions issue.

[BaraMGB]

Unfortunately you have to make the whole compile procedure again if you change a plugin graphic. I guess cmake has to reference the new files. @tresf is there a faster way for this?

[Umcaruje]

is there a faster way for this?

in your build folder navigate to the plugins folder and find your plugin an open its folder. Delete the embedded_resources.h file and recompile. Takes around 2 seconds for me.

[RebeccaDeField]

@Umcaruje Now I understand the importance of your earlier comment about this. Thank you for the tip, I will let you know how it goes.

[mikobuntu]

This will give me something to work on today. The Carla plug-in ( Linux only at the moment I believe ) needs updating to be more in-line with the rest of the plugins.

[RebeccaDeField]

@mikobuntu Looking forward to seeing the updated design. If you have any design related questions at all, feel free to let me know.

[RebeccaDeField]

@Mentioning some talented contributors that might be interested in redesigning more plugins... @diizy @IvanMaldonado @Umcaruje @BaraMGB

[IvanMaldonado]

Do we want the plugins to have an independent design like pro tools or fruity loops? or do we want them to follow a unique design like Logic pro X?

I vote for different designs and colours for different plugins, I worked on a mockup some time ago for Organic (#2404) and I could do more designs for some of the plugins mentioned but I need opinions on how do we want them to look.

[tresf]

Historically, effect plugins generally remain relatively standard themed/consistent whereas the instrument plugins are still allowed to stand out. There are exceptions of course, the Equalizer is a GUI of it's own.

[BaraMGB]

@RebeccaDeField I suggest we work together one plugin after another. I could imagine there has to be a lot of rearranging of the layout, too. If I have a mock up, I can do that. After that, we only have to change the background artwork. What do you think?

[RebeccaDeField]

What do you think?

@BaraMGB Sounds great.

[RebeccaDeField]

@LocoMatt Is working on a redesign for the waveshaper. Just want to give people a heads up here so that two people don't accidentally work on the same plugin :+1:

[Umcaruje]

I'm going to redesign the Amplifier, the Bass Booster, and the Stereophonic Matrix (probably)

[Umcaruje]

I'll be tackling the Crossover EQ next, and probably the multittap echo after that.

[RebeccaDeField]

@LocoMatt is also be on the bitcrush and dynamics processor.

[RebeccaDeField]

@LocoMatt also might also help with the Equalizer but it needs a lot of design and coding work so that will probably be a team effort.

[BaraMGB]

Any suggestions for the LFO controller?

[BaraMGB]

Okay, I take the EQ plugin. I'm familiar with the code.

[RebeccaDeField]

@BaraMGB Could you remove some of the space on the top and bottom to match the sides?

[jasp00]

Is the classic theme being broken with these changes? Should the positions and sizes be moved to the style sheet?

[jasp00]

The classic theme looks fine.

[RebeccaDeField]

The classic theme looks fine.

@jasp00 Glad to hear that.

[RebeccaDeField]

This is progressing very nicely! The only redesigns that have yet to be claimed are:

• Delay

(Edit: @simonvanderveldt is working on the Dual Filter)

@LocoMatt I just wanted to follow up with the plugins designs that you volunteered your time to create:

• Waveshaper Effect
• Bitcrush
• Dynamics Processor

If you could, I would really appreciate it if you posted some screenshots or WIP designs here so that contributors can give feedback, assistance and help out wherever needed.

Thank you!

[simonvanderveldt]

Current WIP for Dual Filter

Note that the styling of the whole widget is done using CSS, no pixmaps or anything.

I'm going to move the Led/Checkbox and make the dropdowns smaller to make the whole window smaller, also have to cleanup the code. Will create a PR once I'm done doing those three things.

[tresf]

I'm going to move the Led/Checkbox

From a consistency perspective, perhaps...

[BaraMGB]

LEDs should be labeled. But looks good! :+1:

[BaraMGB]

Dual Filter : I've just read on discord that the LEDs turns of the sound at all if both are off. I'm unsure if this a behavier we want. My feeling is that the LEDs bypass the filter. But perhaps we can add a "No filter" entry in the combobox for bypassing and get rid of the LEDs?

@Umcaruje @simonvanderveldt

[simonvanderveldt]

@tresf @BaraMGB How about this? I wasn't able to position the LedCheckBox using CSS, so had to resort to using move. Might've missed something though.

@BaraMGB @Umcaruje

I've just read on discord that the LEDs turns of the sound at all if both are off. I'm unsure if this a behavier we want. My feeling is that the LEDs bypass the filter. But perhaps we can add a "No filter" entry in the combobox for bypassing and get rid of the LEDs?

For me the current behavior doesn't make sense either, turning the filters off should imho result in a bypass. I focused what I did solely on the redesign/looks of the Dual Filter. Is it OK to address how it works in another PR/issue? That way we can finalize the redesign stuff (hopefully) a bit sooner :)

[Umcaruje]

The LED's should be moved one pixel to the right, like in the pic.

[simonvanderveldt]

The LED's should be moved one pixel to the right, like in the pic.

That's funny, I aligned them the same as the LEDs in the effect "instruments" in the effects chain :P What to do?

[RebeccaDeField]

@simonvanderveldt Can you fix the spacing on both LEDs so that the alignment can be both correct and consistent? If not, is there someone that would know how?

From what I can tell, the element that you are using to box up the effects is missing a border to be consistent with the rest of the plugins, but it is hard for me to tell for sure from your screenshot. Would you be willing to check the "Plugin Box" element in my source files to make sure it matches? You've done a really great job on this design so far. :+1: :smile:

[simonvanderveldt]

@simonvanderveldt Can you fix the spacing on both LEDs so that the alignment can be both correct and consistent? If not, is there someone that would know how?

I'll have another look if I really am using the same distance/offset. If that's the case and if it's important someone should decide what the correct distance/offset should be and I can incorporate that no problem.

From what I can tell, the element that you are using to box up the effects is missing a border to be consistent with the rest of the plugins, but it is hard for me to tell for sure from your screenshot. Would you be willing to check the "Plugin Box" element in my source files to make sure it matches? You've done a really great job on this design so far. 👍 😄

I'll re-check that and create a PR afterwards. Thanks! :)

[RebeccaDeField]

I think I might have some time to take on the Delay plugin, but not sure. What kind of layout changes do we need to make, if any?

I'm assuming that we will also want to make the same label changes to the knobs that we did for the Flanger.

@Umcaruje @BaraMGB

[RebeccaDeField]

Update: @simonvanderveldt paved the way for a great redesign with the Dual Filter Plugin (thank you!) but they are currently unavailable to recreate it in the format we are using. See details here #3093. If anyone is willing or available to take that on, it would be highly appreciated.

@m-xbutterfly Thank you for your aweesome work on the Waveshaper plugin. I don't believe it would take much to reuse that design for the Dynamics Processor, so I wanted to know if you might be interested in working on that plugin as well. If you are not available for that right now or have other things to work on, I completely understand. :)

I am still working on the Delay design. The Bitcrush plugin is also available if anyone wants to claim that design.

[m-xbutterfly]

Not a problem @RebeccaDeField. Can I play around with the dynamics processor for a couple days and then get back to you? In the meantime if anyone claims it that would also be fine with me.

I could recreate the dual filter plugin though. That shouldn't take very long.

[RebeccaDeField]

Can I play around with the dynamics processor for a couple days and then get back to you?

@m-xbutterfly absolutely and thank you.

[zonkmachine]

This is some seriously good stuff but I don't think this issue should block rc2, we haven't released anything in some nine months... :snail: Maybe merge the one's that are not completely finished but still good looking and then sneak back in a month or two and fix them up?

[RebeccaDeField]

@m-xbutterfly I just wanted to give you a heads up that I am taking on the Dynamics Processor design. Thank you very much for your work on the waveshaper which will make this very easy for me.

[m-xbutterfly]

Not a problem @RebeccaDeField. I tried to play around with the dynamics processor design but I didn't really get anything good.

That seemed cluttered to me, and I didn't like the way the stereomode switches turned out. If you want me to send you anything from that though let me know.

[RebeccaDeField]

If you want me to send you anything from that though let me know.

@m-xbutterfly It would be fantastic if you could send over what you have so far (more specifically dynamics_processor_control_dialog.cpp file) I think I have a good plan for those switches :)

[m-xbutterfly]

@RebeccaDeField Here's what I got.

[BaraMGB]

Equalizer done. What else?

[RebeccaDeField]

@BaraMGB At the moment, @Umcaruje has volunteered to finish on the Dual Filter Plugin and @Kitty-Dyson is working with me on the Bitcrush plugin so unless someone becomes unavailable there are no plugins that haven't already been claimed or completed :blush:

[RebeccaDeField]

Almost done recreating the Dual Filter :)

We want to pull the last couple of plugin designs into the 1.2-stable branch instead of master, correct?

[tresf]

We want to pull the last couple of plugin designs into the 1.2-stable branch instead of master, correct?

Correct

[RebeccaDeField]

@Kitty-Dyson I just wanted to follow up with you on the bitcrush plugin. If you need any assistance at all, please don't hesitate to ask.