@m-xbutterfly I really like what you've done here.

A couple of ideas...

• ^^^ Can you change the blue in your grid to green like this.
• Can you make the dB and reset/smooth buttons match the LFO or Send buttons in my source files?

Sorry for accidentally closing this. Was trying to add a comment on my phone and I clicked the wrong button. Reopened :)

@m-xbutterfly Are you going to be redesigning the Dynamics Processor as well?

This is what I had for the grid so far.

and the buttons:

I'm wondering if I have to add any of this to the artwork repo? I'm not exactly sure how that's structured and where these would go?

As of now I'm not working on the dynamics processor.

@m-xbutterfly Thanks for the update!

I'm thinking that a folder will be created for people to add their sources for the new plugin designs. I am planning on making a pr with a bit more organization for the new theme in the artwork repo so I'll let you once that is done.

I'll leave the Dynamics Processor open for now so if you want to take that on, please update me on the plugins thread, and if not no problem :)

What do you think of this?

The smooth button is active.

@m-xbutterfly this looks very nice to me.

Would you be open to dimming the green down in the grid and changing the light blue slanted line to a brighter contrastng green?

Thank you for collaborating with me on this :)

Oh it's no problem at all. I just work a lot so I might be slow to make these changes.

Anyways I tried a couple different greens for the slanted blue line.

I'm not sure if either of these work (I prefer the second one). I'm trying to pick colors from elsewhere in the project (or change the hue from the old one) to be consistent.

I also dimmed down the green a bit, and changed the background to gray. I just took those colors from your example.

Also just so you see it now here's what it looks like with the cursor down. Do you want me to change the color?

The "-1dB" and the "+1dB" string should be aligned.

@m-xbutterfly Quick mockup idea:

I tweaked the hue of the green in the diagonal line to #55cc91 and changed the cursor grid to #707c91.

What do you think?

@RebeccaDeField Your mockup looks good to me... a method that I usually use is swinging my laptop around at different angles to view new graphics, and this is really noticeable from almost any angle.
Perhaps we need a comparison to a few Plugins to see that this PR will work well with everything else?
Maybe there should be a rule of strict colour/hues etc to make sure that everything in uniform.

Strict colour/hues etc to make sure that everything in uniform.

I have a color palette in my source files. As long as people only alter the lightness and not change the hue or saturation, it will fit well within the theme.

Perhaps we need a comparison to a few Plugins

I have a guide written up here to insure that all of the plugins can match nicely. Right now I am collaborating all of the plugins to make sure they follow the style guide.

Your mockup looks good to me

Glad to hear it :)

@BaraMGB

The button text is center aligned. I can left align everything if you'd like, but this preview:

shows +1 dB and -1 aligned. Let me know if everything should be left-aligned or centered to the buttons.

@RebeccaDeField

So the cursor grid to #707c91 is done, but the problem is that LMMS seems to change the color of the green line from what it is set in the source. So setting to #55cc91 (in the source) will make the actual line color #51a980 like so:

The source code needs to be set to #5afda9 to get the line color to be #55cc91. I'm not sure why, but I'm going to look through the code now and try to find out (I tried setting opacity to 255 in several files). In the mean time do you want the source set to #55cc91 or do you want the result to be roughly #55cc91?

Do you want the result to be roughly #55cc91?

Yes, roughly the same shade will do fine.

Is this a screenshot? This looks great to me :)

On another note, you might want to consider tweaking the pressed buttons so that they are a bit more consistent with the other plugins. You can also find the svg for this in the source files.

Great work :)

Here's a few options. I wasn't really sure which one was best:

I also tried to use the orbitron font which is used pretty heavily in the svg files but it didn't end up looking good imo. The option is still there though:

That is a screenshot btw. Here it is with the cursor grid:

Let me know if there's anything else you want me to tweak. Thanks.

@m-xbutterfly Are you using Inkscape to design this? If so, you might want to make sure that you're exporting the buttons using the Cairo option, as this will insure that the text is crisp. You can do this by saving a copy of the button and selecting the Cairo option in the list.

I mostly use Orbitron for bolder headings, so I agree with you that it does not translate as well for small buttons.

In terms of alignment, I would like to ask @BaraMGB what his preference is, since he added a comment about it.

I would like to see the alignment of the "+1dB" and the "-1dB" string on the right. So the most chars are aligned horizontal. The problem here is that the width of the "-" char is smaller than the width of the "+" char. So it looks odd to me.

The problem here is that the width of the "-" char is smaller than the width of the "+" char.

@BaraMGB @m-xbutterfly I believe this can be easily accomplished by turning the text to path and widening the minus symbol.

Here they are right aligned.

@BaraMGB What if I used a fixed-width font like monospace?

The "+" and "-" are still not perfectly aligned but they used up the same space so it looks much nicer imo.

Thanks for the advice @RebeccaDeField. I've been using export PNG image because that saves it with a transparent background. I don't think that has a cairo option though. Using "save as.." and the cairo options saves it with a white background but it's really easy to remove. Both of those previews are using the cairo option.

EDIT: I just read your comment about widening the path. I can try it but it's hard to figure how the svg in inkscape translates to a png.

I have the text on different layers and this is what it looks like when both the -1dB and +1dB layers are visible.

@m-xbutterfly I would suggest lining up white layer so that "1dB" lines up perfectly with the right edge of the green "1dB" text you are seeing underneath that layer. Then convert the text to path and extend the the minus character to come to the left edge of the plus character underneath. I hope this makes sense.

If you are having some difficulties and would like me to play around with the svg, I would be more than willing to :)

Here are the svg files. I made it so I could just hide/show different layers and then save the button as a png. I'm more of a programmer than designer so I'd appreciate the help.

I'm more of a designer than a programmer. Good team, right?

I tweaked the text and buttons a bit and I think as long as they are exported with Cairo, it should look as you intended and have the alignment that Bara wanted. ⤵️

Buttons.zip

Feel free to make any edits that you might want to the file I attached :)

👍

Here's the preview with the reset key pressed down.

I'd be happy to change anything else. If not I already pushed the changes.
Edit: In the midst of changing the buttons I somehow changed the width from 48 to 46. I hope that's not a problem. The code is updated accordingly.

I agree with @Spekular, but otherwise the plugin design looks good to me 👍

Sorry about taking so long. I'll have more time this weekend to work on this.

How does that look? The way it was before, the knobs were the same distance from the border as the buttons. I have the knobs (plus the text) vertically aligned with the controls background. I moved them a few pixels to the left.

How do you feel about the controls background being slightly wider than the graph? It's 3 pixels on either side, so the graph is centered to it. I'm not sure if it's a problem.

BTW, thanks for your help @RebeccaDeField with those buttons.

How do you feel about the controls background being slightly wider than the graph?

I don't have a problem with it per se, but is there a specific reason why it's wider?

I do feel like the knobs need a bit more space, just to feel balanced. I had a few ideas so I asked for opinions on Discord, and these were the two favorites.

These are just mockups, so not perfect, but I hope that it communicates the concept well enough.

BTW, thanks for your help @RebeccaDeField with those buttons.

Absolutely. :)

I don't know why it's wider actually. I didn't create an svg file so all I have is a png I made in gimp.

The knobs are a little closer together. The reason is that multitap echo seems to have the widest distance between knobs and that's only 50px. I didn't want to go more than that. I also noticed that the background was moved a couple of pixels to the left so it looks assymetric, but I fixed that too. Is that preview ok?

@m-xbutterfly That looks great to me 👍

I'm fine with that.

Is the SMOOTH text written with a different font or a different font size? It doesn't quite fit withRESET

@Umcaruje Only difference is that I modified the M slightly because it was looking strange when exported with Cairo. Maybe we should just use a different font altogether. What do you think about this?

EDIT: On second thought, I don't think this text is legible enough. It will be easier for me to make the text from-scratch than to find a font with the right licencing that looks good at 6px.

@m-xbutterfly @Umcaruje Okay, what do you guys think about this?

Please click on images for full resolution :)

Here's a preview of those.

The custom text looks awesome. It's actually using less space but it's no less legible. I personally really think that's the way to go. The only thing is we probably need the +/-1 dB buttons made from scratch too right?

My only worry about using custom font is that it would be hard to make new buttons that way. The only other plugin that I know of using buttons is the dynamics processor and it uses all the same buttons so it wouldn't be a problem for now.

@m-xbutterfly Sorry, I forgot to mention that I changed the buttons to be 1px taller. I think the buttons are being scaled in your design, so they're not quite as crisp as in my comment.

My only worry about using custom font is that it would be hard to make new buttons that way.

I think that custom text should only be used in cases where the text is extremely small and especially hard to read. I created the text for the sends buttons, and other areas that needed to be very legible in a small space that could neither be jagged (like a typical pixel-font) or blurry. I'm not sure if this will cause problems in the future, but if someone knows another way to accomplish this with 6px I think it would be a good idea.

@m-xbutterfly Please see attachment bellow. Now that the text is pixel-perfect, you can just use the regular Inkscape export dialog. Thank you for your patience on this :)

Buttons2.zip

How is this?

Should I move the buttons and checkbox up a little?

@m-xbutterfly I like the 2nd option, where you centered the buttons and check box.

@Umcaruje Are the buttons looking good to you in place?

The buttons look good and consistent to me 👍

@m-xbutterfly If there are no objections after I test the PR, I will merge this 👍

Looks good to me. 👍