UI Improvements from Community (was Dark Theme)

[Eurikon]

Hi guys, thanks for this wonderful modules set for VCV. Do you think it would be possible to add a dark theme that can be selected by right click context menu? There is a post on VCV community forum where a user already created a fairly usable theme, by editing the SurgeStyle.hpp Maybe you could use that?

Thanks Latif

[baconpaul]

Can you point me at the community post?

Happy to add a menu and do the switch sure and also happy for that user to send us a pull request which I’d be happy to merge!

I need to update the modules anyway with the 1.6.3 release of surge (the modules still use the 1.6.2 engine) so now is a good time to do this.

[Eurikon]

Thanks for your quick reply. It is this post by user Troubledmind: https://community.vcvrack.com/t/lets-see-your-custom-module-skins/5028/81

I think he did a local build. He did send me the hpp, but i was not able to build it locally for windows. And would rather see it implemented in the official build as choice switch.

Also if you could make the light grey area's a bit darker it would be nicer. I'll send him a link to this conversation. Thanks for working on this module set!

[baconpaul]

No problem

Yeah if it is just switchable color palettes it is super easy. Just have them hop here with their diffs and I can add it as a switch.

[baconpaul]

So here's my plan of attack since it seems there's both real demand for this and there's a real willingness of people to chip in with color schemes and corrections!

1. SurgeStyle is useful but designed wrongly in that it has methods like 'color_t surgeOrange' rather color_t surgeFooterBackground() so

   1. rename all the surge to xurge and break the code
   2. one by one add proper logical names to surgeStyle which for now call the xurge fns
   3. Push

2. Next step is to read those colors from a separate file. Pretty obvious how to do that.

3. Next step is to have more than one of those files and a menu

4. Final step is for that file to contain the name of the SVG assets as well

And then we will be recolorable at least

I'll try and get 1 done very soon so VCV community user TroubledMind (don't know the GitHub ID yet) can get working. Maybe today. Will see.

[baconpaul]

Oh and also factor those button bank colors into the style sheet too

[baconpaul]

The first step of this is done.

[baconpaul]

Community user David Rodriguez also gave super thoughtful feedback on shadows on our knob classes.

https://community.vcvrack.com/t/a-couple-of-words-about-light/6429

I'm going to implement those also but wanted to sort of roll it all into one issue since I know assets will be part of the skinnability too. So adding that to this issue.

[spectromas]

Hey everyone, TroubledMind here. First of all, the changes are excellent, this makes it so much easier! I was thinking of suggesting a system like that but assumed it would be a lot of work.

So I've had a go and think it's heading in the right direction. Any thoughts or suggestions?

I have put the changes in a fork https://github.com/spectromas/surge-rack

[baconpaul]

Hey @spectromas and welcome to the surge team! And thank you for jumping in to contribute. It's appreciated!

I like your dark mode a lot. A few comments

1. I do miss the really prominent highlight of the IO regions (the blue sections) which seems - well - less prominent. It was sort of a purposeful design choice that those IO and Clock regions were distinct from the control modifiers so perhaps something there? Maybe a deep orange or such?

2. A bit less, but still distinctly, I miss the border on the param areas. They seem less 'segregated'. The design thinking there was that since Surge is a super digital synth in every way, if you were to bring it to euro-rack it would be full of high def VFDs which were inset into the panel, hence the orange border we chose. Not sure what color would work for that but it's a comment

3. On the knobs, with that conversation I'm having with David over on community (linked above) the assets are going to change a little to be a rotating background; a fixed shadow layer on top of that; and then a rotating foreground (which will basically just be the pointer). I have that code underway but not in place, so I wouldn't spend too much time on the SVG assets yet.

4. Similarly I'm going to replace the logo blue with whatever logo color you specify automatically for the logo at the top.

5. My guess is a file-based approach is doable this week looking at my schedule which will make experimentation even easier. (That's the steps 2 and 3 above). Some nuances of sharing a style sheet and stuff but nothing terribly difficult.

Thanks again for the work here! Super cool.

[Eurikon]

Awesome work guys, this is going to look sooooo nice! Thanks all!

[spectromas]

@baconpaul cool, good points. I'm starting to think that the IO panels might be best left blue, I haven't managed to come up with another colour that fits if it is to be prominent. I tried some oranges but I think it looked a bit much with all the other orange.

2) I completely missed those. Tried with orange but it looked a bit garish (again probably too much). Does the one below make them pop a bit more?

3) Fair enough, what I've done on the knobs isn't drastic so no worries if that is lost.

4) Great, I like the blue but a lighter one would be good with this skin

I think I've unintentionally made it even darker overall, too much?

[baconpaul]

I like the super dark. It makes me think perhaps the blue could be more like a steel blue (heavily grayed) for the IO regions and therefore be a bit lighter. Maybe something in the #9999AA range to start gradienting down a bit. that sort of thing - so gray-blue to pop a bit against. Also there’s the highlight outline which could really segregate it

I think if we are going dark we should go dark! For the labels though the contrast has gone super low (not the value but the label of the value). Perhaps add a bit of saturation there in the orange dimension (the core surge orange is #ff9000 but we dialed it down a bit for rack).

And super stuff! Like I said I’ll look for some dev time to move this to files read at runtime in the next couple of days. There’s a bug or two in the current master also I want to fix but will be good to do a refreshed release. And maybe I’ll finish off those last few generic panels also. Oh and update the vocoder with the new parameters - I have to do that. I’ll add a separate issue for that tho.

[spectromas]

Yeah I agree about the blue, I didn't want it too contrasting but is it too dark like that.

Do you mean, for example, the Bass, Treble, Width etc in CONDITION? Or Rate, Magnitude, Phase etc in LFO? I'll try some orange, I'm very wary of adding too much colour as I think the only problem with the original is that it's a bit jarring and perhaps garish (although it is true to the original). Maybe a subtle dark orange would mix well with a lighter white value.

Do you mean that the svg files will need to be edited rather than the source file once you move it over and that I should wait until then? I'm really glad to see that this project is active and in Rack, I used to love Surge as a vst many years ago.

Is it fully ported to Rack now? It would be cool to create a pre-patched template that recreated the full synth as much as possible.

[spectromas]

Ah ok

[baconpaul]

That's looking really great I think!

I just pushed to master (for the small knob, not the rooster) a 3-layer approach to keep the shadow in the right spot when you rotate. If you pull head you will see there's three images

surgeKnobRotateBG surgeKnobOverlay surgeKnobRotateFG

the draw of the knob draws those three stacked on top of each other, but only rotates the BG and FG image, not the overlay

And the changes are that the RotateBG is flat (no shadow), the overlay contains a shadow/highlight layer, and the FG contains the pointer rectangle only.

As an animated gif (with palette compression obviously) that fixes David's problem with the rotating shadows, which was indeed annoying. I'll doo the RoosterKnob the same way soon enough.

I'm not coding much this afternoon but my next step is to add the external files. Started that going now.

[baconpaul]

Is it fully ported to Rack now? It would be cool to create a pre-patched template that recreated the full synth as much as possible.

the answer to this is

1. The filters are not ported. The biquad is but the full chain is not
2. It's hard to create the full synth since surge works at block level and rack works at sample level; so things like making the FM routing work are really hard. See the discussion in the start of the manual for why this ends up being a bit un-racky.
3. The SurgePatchPlayer is the full synth but with the block diagram hidden

So you can do a lot of surge with a module but you can't do everything the VST can. But you can also do lots of things the VST can't.

I would love to ship some sample rack patches with the synth though. That would be super!

[baconpaul]

So @spectromas I just pushed step 2 of my plan. If you pull master or grab the zip from the releases page when the build is done in 15 minutes or so you will see a file called "res/skins/classic-skin.xml" which contains all the colors

My intent is to make it so that we can have multiple ones of these. Right now if you change it you need to restart - but not recompile. I'll add a "reload current skin" menu item also soon.

You can see the file also has a blank assets section. That's coming soon.

[baconpaul]

Oh and the builds are done so https://github.com/surge-synthesizer/surge-rack/releases has the nightly with a skin file.

[baconpaul]

OK so I'm just pushing now the ability to have multiple .xml files in the res/skins directory which become menu items. Still a lot to do (like retain the choice, remove that .xml and support the SVG assets) but this animated gif shows you the two skins I have now.

[baconpaul]

So if you want to add a dark mode you can just create "Dark.xml" which is a copy from "Miami.xml" and then go ahead and edit. If it is in res/skins when rack starts up it will show up in the menu. And if you toggle back and forth it will read and apply the latest. (I'm going to add SVG asset redirection shortly so you may also want to wait on that until it is in place).

[baconpaul]

OK I also parameterized the three SVGs which constitute the small knob (underlay rotating; shadow; and overlay rotating). Will do Rooster knob soon enough. I'm more or less done for the day now though.

[spectromas]

Wow that's incredible, can't believe you just did all that so quickly. No compiling each time is certainly going to be less tedious so thanks for that! I'll have a play around and let you know.

[baconpaul]

No problem!

If you just copy Classic.xml to Dark.xml and restart rack once you should be good

I want to add a "reload current skin" menu item bit haven't yet so to reload at runtime now just toggle out to classic then back to yours.

It's not that forgiving if you get the file wrong but it does show some warnings in some circumstances.

Have fun!

[baconpaul]

Oh also: I think I will ship that miami skin as well as the dark skin, just for fun!

[baconpaul]

oh and last thing I haven't stress test things like swap skins quickly or remove a module while swapping skin and stuff. That's all in the todo list in my head but if you do manage to crash it a trace would be lovely if you get one!

[baconpaul]

Just got the rooster knob split and parameterized also. Pushing to master shortly.

I think that's it for things which are controllable. I suppose I could make it so you can swap out the TTF file. I'm not going to make the SurgeLogo parameterized - I want to keep it as the logo and will just change its color at runtime.

Let me know how it goes!

[spectromas]

Nice, definitely leave that Miami skin in there, it's pretty sexy!

[baconpaul]

Ha! I am just pushing the code to use panelTitle for the logo at the top also (basically recolor the SVG at paint time).

At this point I think everything is parameterized by the file except the font. I suppose I could use alternate ttf files also but the spacing may not work. Let me play with that.

The other big thing I have is to remember this preference between sessions. I spoke with Andrew about a rack-y way to do that so let me figure out if I can get that in place.

[baconpaul]

OK just pushing a change to remember the skin you picked, so once you swap all sessions from thereunto out have it forever. Basically skin is sticky. I want to clean up the code a bit but it's good enough to get in hands today

The other thing I realized i need to do is make it so the color of the toggle orange switch is parameterized. Easy enough but have to do it.

[baconpaul]

OK I'm done with dev until Weds. Should be enough for you to get most of your dark theme done here. Like I said just the orange switches to go I think.

I added a pure grayscale theme (which I called "NewYork") to test that I got all the spots, which is how I found the problem areas still. As well as the orange switches there's the gradients in the WTOSC and Patch scrolling section which need a start/end color and to interpolate in the spec.

[Eurikon]

Awesome work!

[spectromas]

This is impressive, lots of lovely changes.

[baconpaul]

Thanks! Our slack showed this message had some svg problems - did you solve them and edit? Good stuff!

My weds filled up so I will next turn to this probably Thursday or maybe tonight to get the 3 other colors we need in place (swirchhandle and scroll endpoints) - also some code cleanup but that shouldn’t impact you. If you get extra skins feel free to just toss them in as a pull request

I will probably also add an ultra High contrast skin too. Neat feature - thanks to you both for prodding me to do it properly!

[baconpaul]

OK doing a push which adds 3 more colors for the switch handles and for the scroll regions. The switch handle one works fine. The scroll region one does not invalidate properly when you change styles. I know why and have to fix it. Also the 3 position switch used in the ADSR isn't orange in classic and so also isn't color switched in skin. Those two bugs and I think the code to do as many color schemes as we want is done!

[baconpaul]

And those last two bugs are now fixed. At head the software is as skin-able as it's going to get. Go to town making some other modes in addition to the 3 I included. Look forward to seeing them!

Have one or two other bits of dev to go before I push a new version out on the plugin manager so we have a couple of weeks.

Best

[spectromas]

I thought I had solved the problem so I removed it but again today I'm getting the same thing. For some reason inkscape shows something different than what Rack draws and my file manager previews. I don't know what's happening, is inkscape not saving properly or something?

[tank-trax]

is there a way to put in gradients, overlays and/or background images?

[baconpaul]

@spectromas the plugin reads from the documents/rack/plugins-v1 directory so if you are editing in source are you copying? The lot shows the document name being loaded with full path. Also rack caches svg by filename so if you change a file in place you need to restart rack to see the change

@tank-trax there are gradients in the style and all the endpoints are exposed - but the two big panel sections are constant color. I could change the Bg to have an endpoint and draw a gradient if it does (and same for footer). Svg backgrounds nope.

[spectromas]

I was doing all those things and it was working for a while but I think the file must have become corrupt or something, I started again with a fresh copy of the svg and it seems to be ok for now.

[baconpaul]

Hmm ok well I’m just using the standard rack svg draw code but svg is a big spec so maybe there’s some feature which is breaking it? If you end up with an act exhibiting the behavior again why not make a copy and attach it here and I can peek?

[Eurikon]

Not sure if you mentioned this already or not @baconpaul , will it be possible to set a theme as default and forget about it? For example when we set Submarine to dark theme, it becomes the default and also the browser images become the dark version as default.

[baconpaul]

@Eurikon it already does that. Added it on Tuesday night. Grab the latest release and you should see that behavior!

[baconpaul]

(The browser images have some caching so may need a session restart to pick up the new default theme)

[Eurikon]

Ah ok thanks mate! I will try the new build Friday on my free day. Cheers :)

[spectromas]

Ok so things seem to be back to normal for me. I've been struggling for colours for the I/O section and tried some online palettes from what I've already got but I'm not convinced by the results, maybe a simple greyish is would be best? I'm not sure I like using the gradient, I can't come up with a good solid colour. @Eurikon do you have any suggestions? Other than that I would be glad to hear some feedback.

I did notice that there are lines drawn on the EQ that I don't know where the colours are coming from.

[baconpaul]

Lines on the eq are the panel separator style color

I like that skin!

[baconpaul]

https://github.com/surge-synthesizer/surge-rack/blob/4689a79f966aecdc2614329cd60e9af061cab56b/res/skins/Classic.xml#L11 There’s the color

[spectromas]

Nice, thanks!

Ok perfect

[baconpaul]

Great

You should check the WTOSC module also since that uses the fade endpoints for the text scroll region. That’s another new color I added.

I like this skin a lot!

[tank-trax]

Looks great. When will it be added? :-)