LateNight :: 3D facelift

[ronso0]

this is an attempt to make LateNight a little more exiting and consistent by picking up the 3D style of knobs & buttons and apply some 3D borders to GUI containers, as well as making sub controls appear more 'embedded'.
(basically a continuation of what I unconsciously started when fixing the Mic/Aux rack in #2212 )

Still needs some polishing, but it's ready to test.
What do you think?

before

now (continously updated)

[ywwg]

I think this is a promising direction. The panels feel more separated and don't run together as much. I don't want to make it too skeumorphic, though. Neither Traktor or Rekordbox have much depth to them and the depth cues mean there's less space for GUI elements. I don't love the indented slashes too much... is it time to get rid of the slashes? I notice traktor has more depth to the knobs, maybe the controls is a better place to put a little depth?

[ronso0]

The reason for me to work on this is that the controls do have enough depth already which IMO is kind of extinguished by the flat containers.
The depth cues actually only need a minimum of space, 1/2 library line for me due to expanded Fx units. In this state it's more the bigger margins (which can still be tweaked) like in between FX| |Samplers and Samplers| |Mic/Aux that make it appear consuming more space.

The slashes can be optimised (smaller grid maybe?). I tried with plain colors and it looked boring.
I think some kind of texture is nice there, any ideas?

[ronso0]

The more I check old / new LateNight side by side at 100%, the more I dislike the old version...

[ronso0]

@ywwg please check the updated screenshot, it shows another texture for the embedded panels

[ywwg]

I think you're right that this is a good direction to make LateNight more modern.

What if we reduce the contrast of the 3d shaded borders by 50%? In other words, making the brighter side a little less bright and the shadow side a little less dark.

I think the texture is good! I think it could be more prominent, even.

[ronso0]

The border contrast is already much lower than before, I'm afraid that if we lower it even more we end up with yet another flat Mixxx skin. And I always try to keep in mind that Mixxx is also shown on low-contrast screens or in difficult lighting..
The inner and outer borders are set at the top of style.qss, please try what you have in mind.

[ywwg]

As the original author of the LateNight theme and someone who has used it exclusively to play out for ~8 years, I am well aware of the kinds of conditions it needs to work under. So I apologize if I'm overly sensitive to changes to my baby :)

I played around with the values a bit, what do you think? I don't know if I like the "embedded" look so I tried reversing it.

[ronso0]

As the original author of the LateNight theme and someone who has used it exclusively to play out for ~8 years, I am well aware of the kinds of conditions it needs to work under. So I apologize if I'm overly sensitive to changes to my baby :)

No offense :) It's just that I designed Tango, and then looked at it on a friend's brandnew FHD IPS panel and was kinda shocked how sharp itlokked and how 'high' the contrasts could actually be perceived.

I go along with the relaxed outer borders, a subtle change that preserves the 3D appearance.

The elevated subregions I don't like to be honest. Apart from being a 180° turn from the original design, they stand out (up :) too much for my feeling.
In your screenshot the deck transport controls for example appear standing out way more than the mixer knobs, which is irritating IMO. Stumbling block is the first association that comes to mind ;)

With real gear (like a DJ mixer) which we're trying to reference here it's rather the opposite like it was before: main controls & informational elements (channel controls, VU meters) are on the top level and additional controls like FX are somehow separated and/or recessed.

[ywwg]

ok I think it's fair to keep the controls "inside" more. The values I used are:
{ background-color: #1e1e1e; border-top: 1px solid #333; border-left: 1px solid #333; border-bottom: 1px solid #0a0a0a; border-right: 1px solid #0a0a0a; border-radius: 2px; }

[ywwg]

I want to make sure we preserve some of the differences between the skins, but I admit that we get a lot of bad feedback about LateNight looking "old" and "90s". Personally I like the retro look!

[ronso0]

Yeah, my motivation is to make it neo-retro :)

• preserve the LateNight essence
• replace the 90s legacy with timeless aesthetics

I'd say -with the current state of this PR- the "90s" look mostly stems from the yellow text labels and the somewhat oldschool fader scales that look like they're domed which is kind of clashing with the underlying plain surfaces. So there's room for improvement there as well.

[ywwg]

I've never liked the faders! They are so wide and not pretty. I'm a little more partial to yellow because it looks like my favorite high-end graphics applications, but I would be interested to see what it looks like with whiter (but still somewhat yellow?) text.

In general I don't know what people mean by "90s" so I'm glad you have some ideas for counteracting that

[ronso0]

I already played with the fader and knob design earlier but always ran into a rendering issue that might be related to the error I just posted in Zulip
One way around that would be to go back to PNGs for that, sized so that they still look sharp when Mixxx is scaled x2 or bigger.

[ywwg]

agree that SVG is the way to go. I posted some thoughts in zulip

[ronso0]

Ok, thanks.

Don't get me wrong: I'm not about to drop the yellow labels. This way there's a distinction between labels and button, and effect name, BPM, artist and so on are easy to spot.

[ywwg]

ok cool I think we are on the same page. I really appreciate all the work you've done to keep LateNight up to date! it could have easily been left adrift and had to be removed by now

[ronso0]

new faders?

and new crossfader buttons, new VU meters, adapted button borders

this is fun, once some legacy constraints are dropped.. :)

[ywwg]

I don't mind the new green color, but maybe the saturation / lightness could be toned down a little so it doesn't stand out so much?

One thing to note is that the red/green split will not be visible to colorblind users. And in general, looking at the skin in grayscale is a good way to see which colors are too close together. If your operating system has a black and white display testing mode, it might help to turn that on to see what it looks like, and adjust some of the colors to improve the color contrast.

[ronso0]

okay.
if I load a screenshot of the previous LateNight version in https://www.color-blindness.com/coblis-color-blindness-simulator/ with "Green-Blind/Deuteranopia" selected (the most common color blindness IIRC) I end with this:

what stands out the most are the Fx buttons (styled like vinyl and GUI toggle buttons), SplitCue and MicDuck, and the MIXXX logo of course ;)

new LateNight with less contrast in Fx buttons and reverting SplitCue and MicDuck to yellow-orange the simulation looks like this:

[ronso0]

regarding your recent comments, this is my current proposal:

• darker green for Fx
• back to yellow-orange for Ducking and SplitCue
• traditional red for transport and Pfl buttons
  

I'd defintely keep the 'green' for Fx related elements, as I don't want a skin to look like Deere where basically any toggle is blue and where there's no hint about its importance. Otoh I see @Be-ing 's point that we shouldn't end up with a 'cocktail skin' where the variety of colors basically results in the same situation.
It's always tricky to set color rules for certain GUI categories because we need to bent those rules here & there to get a solution that fits most use cases and screens as elements of category (Fx, EQ, transport controls, ...)

• appear in different skin regions: dark or light background, standing alone, or being surrounded by other buttons or indicators
• have different importance/impact: MicDuck affects Master, SplitCue otoh is a one-time setting that can be forgotten once it's set, decks' Fx buttons vs. Fx main toggles etc.
  Not to mention we all sit in front of different screens and the color blindness topic we touched earlier but didn't thoroughly work out back then.

So if there aren't any significant objections I vote to merge this soonish and open follow-up PRs to further improve the color scheme.

[Holzhaus]

Really nice. However there are some font inconsistencies. For example the "Split Cue" button label uses a different font compared to the "Disable Auto DJ" button label (the latter looks much better/less 90s-like in my opinion).

[Holzhaus]

@ronso0 In the screenshot in your latest comment, the green color of the square FX enable button looks different than the green FX unit assignment buttons.

Sorry, didn't have time to test it out on my computer myself yet.

[ywwg]

I like it! the slightly less bright green is good, and the orange is more consistent. Thanks for testing in colorblind mode :)

[ronso0]

@Holzhaus About Fx enable vs. Fx routing: actually it made sense somehow that the 'direct action' buttons are brighter, but now I realize that it was just the icons for 'active' and 'active pressed' state were swapped.. Will fix it.

The pixel font is unique to LateNight and I didn't intend to drop, and as explained earlier I didn't yet find a suitable pixel font (or let's say a font with hard edges and character) as replacement that I could reliably align to screen pixels. I'd say we should tackle this in a future PR and live with the inconsistency for now, instead of hastily switching to a somehow boring button font like Ubuntu, OpenSans or Roboto or whatever is used everywhere else.

[Holzhaus]

Some screenshots on a 4K display. LGTM.

With 2 decks:

With 4 decks:

[ywwg]

thank you for keeping the retro pixel font <3

[ronso0]

ToDo

• check if spinnies can be improved
• optimize / clean up SVGs
• update preview picture for Preferences > Skin

[ronso0]

This is ready to merge.

if any there are only small bugs left I guess. please test anyway.

[Be-ing]

The effects routing buttons in the microphones are little squished on my screen:

[ronso0]

The effects routing buttons in the microphones are little squished on my screen:

yeah, that stems from the wide Mic Ducking button I guess.
I'll check if using DUCK AUTO MAN as labels makes a difference.

a more elegant solution would be to show Mic and Aux decks only there's actually a device connected. if they're not connected only show the "MicN" label and a gear button that opens Pref > Hardware and points to the respective page/slot. That would suffice and also clean up the GUI a lot.
(because showing no unconfigured Mic/Aux deck at all (Tango) also feels wrong somehow..)

[ronso0]

I'll check if using DUCK AUTO MAN as labels makes a difference.

yes, it does. the Fx buttons are still squished but at least the "1" is visible now, too.

[Be-ing]

Still not fixed:

a more elegant solution would be to show Mic and Aux decks only there's actually a device connected.

The skins should still be able to show them all if all are configured.

[ronso0]

Fx routing buttons fixed.

Anything else?

[Be-ing]

Good work, thank you!

[ywwg]

I'm really happy with this change! Recently the old skin came up on a different branch and I went "waaughhhh". Do we have a plan for the next release? I'd like to tease the reskin on social media if we think we can do it by the end of the year, or for our usual christmas release :)

[ronso0]

I'm really happy with this change! Recently the old skin came up on a different branch and I went "waaughhhh".

Ha, me too!
I still have a few ideas, though: improve overall contrast, collapse unconfigured Mic decks, maybe replace brownish waveform background, order Aux decks left to right...