sf2 redesign - attempt 2

[Rossmaxx]

Fixes #6454 and replaces #6473.

This is how it looks. Ready for style review

[LmmsBot]

:robot: Hey, I'm @LmmsBot from github.com/lmms/bot and I made downloads for this pull request, click me to make them magically appear! :tophat:

Windows

• Windows 32-bit: lmms-1.3.0-alpha.1.220+g8e0dba2e8-mingw-win32.exe (build link)
• Windows 64-bit: lmms-1.3.0-alpha.1.220+g8e0dba2e8-mingw-win64.exe (build link)

Linux

• Linux (AppImage): lmms-1.3.0-alpha.1.220+g8e0dba2e8-linux-x86_64.AppImage (build link)

:robot:

{"platform_name_to_artifacts": {"Windows": [{"artifact": {"title": {"title": "32-bit", "platform_name": "Windows"}, "link": {"link": "https://output.circle-artifacts.com/output/job/f90f2c6a-0c1c-42c7-98d3-ad4dd5272a24/artifacts/0/lmms-1.3.0-alpha.1.220+g8e0dba2e8-mingw-win32.exe"}}, "build_link": "https://circleci.com/gh/LMMS/lmms/17923?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link"}, {"artifact": {"title": {"title": "64-bit", "platform_name": "Windows"}, "link": {"link": "https://output.circle-artifacts.com/output/job/446895cb-1118-400a-958f-5c6c79f93588/artifacts/0/lmms-1.3.0-alpha.1.220+g8e0dba2e8-mingw-win64.exe"}}, "build_link": "https://circleci.com/gh/LMMS/lmms/17919?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link"}], "Linux": [{"artifact": {"title": {"title": "(AppImage)", "platform_name": "Linux"}, "link": {"link": "https://output.circle-artifacts.com/output/job/df5f90d8-0489-4279-a639-71775ac374c8/artifacts/0/lmms-1.3.0-alpha.1.220+g8e0dba2e8-linux-x86_64.AppImage"}}, "build_link": "https://circleci.com/gh/LMMS/lmms/17921?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link"}]}, "commit_sha": "905a60f7a816951ce870192576a2bf4cd58576fb"}

[yohannd1]

Some small critiques: Other than that, it looks good! I just now wonder about the background - I personally like it but should it also be updated to follow the general design style that LMMS seems to be going towards? By "this design" I mean stuff like the design in the Equalizer plugin:

[Rossmaxx]

some small critiques:

The image

I felt like doing that but was not sure. I'll give it a shot.

should it also be updated to follow the general design style that LMMS seems to be going towards?

I tried but the background i did in the old pr was not good so just reverted it. Anyway I'll try again once i get more ideas.

[Monospace-V]

I'm actually quite a fan of the pinks in SF2. I feel like where orange-white:3o and warm brown: mallets, similarly phenolphthalein pinks: SF2 player. As far as I understand, the only problems are the fact that bank and patch number is unreadable:

and maybe how the pink is too bright in the folder-browse icon:

I think this can be easily remedied by making a new folder icon if needed, and changing bank/patch selection.

Looking at all other instruments, TripleOscillator: Orange-white, white dials on main instrument plugin settings. sfxr: black and multicoloured, multicoloured dials. organic: grey and green, dials are green (and violet/dark pink for harm to differentiate) OpulenZ- peacock colour, whatever it's called; dials are white SID- pale yellow, dials are some white

While I feel there's nothing wrong with the fact SF2 player is themed pink, as it can be a rather good looking colour if used well, (I can't fix the icon, but presumably someone can.)

If you're going to make some parts of it green, then make all of it greenish, including the SF2 icon on the plugin sidebar and the text on top of the plugin. Having it green (whether to fit in with everything else or make it unique as an instrument) doesn't look good alongside pinks, and could be slightly visually unappealing.

Edit: I'm not very happy with the redesign of the plugin itself to a new, very green look. It appears this is now an entire redesign (for reasons I don't entirely understand), but at least the one problem of unreadability will get fixed? The art appears a lot less comfortable within its style than old, but eh. If you're going to do that may as well change 3o's design too to make it look green and black. What makes the instruments unique visually is their GUI, I like to believe.

[Rossmaxx]

It appears this is now an entire redesign (for reasons I don't entirely understand)

i decided to redesign the entire thing because changing the lcds to green feels off. i can't change the lcds to pink either cause the pink one is broken.

The art appears a lot less comfortable within its style than old

fixed along with the other design flaws

[Monospace-V]

Then can I implore you to pick a different pink for LCDs instead of turning the entire plugin UI green?

The SF2 player design is similar to the design of some other LMMS plugins in terms of the partially 3d grey analogue knobby style. Notice how the shadows and lights fall, the apparent depth. Your design looks like only the GIG player. SF2 player. Notice how the interface looks solid, and how there are ridges and raised surfaces. This will be our reference.

AudioFileProcessor, look at the box which contains the sample waveform- to be specific, its lower and right edges.

Kicker. The interface speaks for itself.

Mallets. Visibly 3d around the edges of the interface box within the interface.

Monstro. The split between the tabs on the top and the instrument controls is a little jarring, being 2d and 3d respectively.

Organic. Again, distinctly 3d analogue look to it, with the screws and lighting.

GIG Player. 2d, plain because nobody else has looked at it in decades (who uses GIG files anymore?), inconsistent with the theming of every instrument having an at least unique if not 3d UI, but passable- again only because nobody uses GIG files.

VeSTige. Look at the box which contains the name of the VST.

(It should be noted that I'm probably biased towards the current appearance of the plugins as they are, though. I'm wont to complain about any new designs, especially ones that look so fundamentally different from the previous UI, the UI of other plugins, and my idealized good appearance of a UI. Maybe this could look better in app? I'll download and check.)

What application do you use for the UI design, OP?

[Rossmaxx]

What application do you use for the UI design, OP?

good ol' gimp.

The SF2 player design is similar to the design of some other LMMS plugins in terms of the partially 3d grey analogue knobby style.

I agree but the for the new ui, I am looking at lost robot's compressor for inspiration.

Then can I implore you to pick a different pink for LCDs instead of turning the entire plugin UI green?

I asked the dev channels about the possibility before I started the work. The colour is not plain hex codes, instead the lcd num boxes use something called pixmaps which are not modifiable easily.

It should be noted that I'm probably biased towards the current appearance of the plugins as they are, though. I'm wont to complain about any new designs, especially ones that look so fundamentally different from the previous UI, the UI of other plugins, and my idealized good appearance of a UI.

well, we all have our own tastes.

[Rossmaxx]

@YohananDiamond what'd you think of the new design?

[yohannd1]

Overall it looks nice, but here are some more nitpicks: Also, is it possible to use the modern-style knobs? I think they would look nice here and they're already being used on LB302 & BitInvader, for example.

[Rossmaxx]

Also, is it possible to use the modern-style knobs?

I asked the devs in the server. Waiting for a response.

The background colour looks weird

I noticed that one but not really sure on what to replace it with. Your suggestion looks good. Will try to do that one.

Sf2 looks like sfz

That's accidental but it looks good so i think it's fine.

Black background on the file button

I don't think it will create any issues so no need to change that one. Will change if any problems come up

Blurry text.

It's because of gimp pixelating the text on low resolutions. Haven't found any workarounds yet

Thanks yohana diamond for your suggestions

[yohannd1]

No problem!

That's accidental but it looks good so i think it's fine.

I pointed it out because there's another format similar to sf2 called sfz, and it's not supported by LMMS (at least directly), so I think it would cause some confusion.

I don't think it will create any issues so no need to change that one. Will change if any problems come up

I meant that the button right below has a gray background while this one has a black, and I found it kinda confusing

[Rossmaxx]

Also, is it possible to use the modern-style knobs?

done

Sf2 looks like sfz

also done but it is not shown in the image.

The background colour looks weird

fixed waiting for style reviews from others.

[yohannd1]

Looks fine now! Though the open button background issue keeps on and maybe the knob could be slightly smaller (see comparison in the image) Also, what if we made a background to put on where it's currently green? Something also green-ish but with some level of detail to make the plugin look more unique (which is a thing that I think it lost after redesigning it) I'm gonna think about it and maybe I can come up with something soon, then I'll send it here

[RiedleroD]

I haven't got time to contribute rn, but imo a PCB design could fit the green well.

[Rossmaxx]

I haven't got time to contribute rn, but imo a PCB design could fit the green well.

Noted. Will try when i get time. edit : done

[Rossmaxx]

@YohananDiamond @RiedleroD looks good? any more suggestions.

[RiedleroD]

just a few tiny things. could you send me the gimp project file for that? I'll try to improve upon your design if that's ok.

[Rossmaxx]

Do you have discord? please dm me rossmaxx#9915. Also, i flattened the image before export so you won't be able to do much other than drawing new stuff. edit : tried uploading the project file here but github doesn't support uploading .xcf files

[yohannd1]

Just checked it out and I think the idea looks good but it still needs some polishing.

• Again on the knobs: I noticed they aren't aligned with the text (I think this just involves offseting them horizontally a little bit more).
• The background is nice but I think some more lines would make things more vivid. These new lines could be a little bit closer to the background color so they don't catch the user's attention too much.
• Aliasing: too much on the button texts, too little on the big texts & the circles. I don't really know how to fix this properly, but here are some suggestions:
  • Make the yellow circles thicker and maybe enable antialiasing;
  • Make it so the button texts are not bold;
  • Enable antialiasing on the "SF2" text; but I think you can put antialiasing without fear on the circles and, for the fonts, also put antialiasing but, on the smaller ones

[Rossmaxx]

The blurry text has been fixed. I installed and used inkscape for that

[Rossmaxx]

closing this cause i don't got time to get it finished.