Old 04-06-2019, 11:28 AM   #1
Human being with feelings
Join Date: Aug 2018
Posts: 314
Default MXM Scalable theme

Here is!
The first, the only, and likely the last... fully scalable theme for Reaper5

Current version: V1.2

You can chose between 2 packaging formats. Read below for details

Please note, Theme is defaulted to 150% of scale. You can set setup other scales editing two constants in rtconfig.txt. Read below for details.

How to install:

There are two versions of the package. Both offer the same theme
1. unpackaged - resources are unzipped, allowing scale tuning without unzipping ReaperThemeZip. It contains one subdirectory and 5 ReaperTheme files referring to this directory
2. packaged - MxM_Scalable_150 theme is provided as ReaperThemeZip, other 4 theme files are ReaperTheme ones, which refers to ReaperThemeZip.

In both cases you download zip files which must be unzipped into your theme location.

So what's the difference?

Packaged version way is more efficient, significantly improving theme load time.
But to scale and size of volume sliders, you have to edit rtconfig file.
I recommend to use TotalCommander which provides ability to edit files directly from ReaperThemeZip. Just select the ReaperThemeZip file, hold CTRL+SHIFT and press PAGE_DOWN or double click a mouse.
After editing the file, and closing the editor, TotalCommander will ask to update file in the archive. Done.
Unfortunately I don't know if there is similar easy way to edit content of ReaperThemeZip on Mac without unpacking the file.
Anyway, you can always download unpackaged version.

First Run
  1. Make sure you have HDPI mode set to "Aware" in Preferences / Advanced UI settings
  2. Setup default layouts in Options/Layouts. Initial defaults doesn't apply scaling to volthumbs.
  3. Setup proper scale and volthumb sizes (see below) in rtconfig

How to change scale:
  1. Load one of available MxM_Scalable themes (I suggest to start from 150, because it matches rtconfig default values. Those themes are prefixed by 100, 125, 150, 175 and 200. Those themes differs only by defined font sizes but uses the same resources (images). Numbers indicates scales fonts should feet the best. It's possible to change theme later not affecting the rest scale settings.
  2. set global_config value in rtconfig.txt file to desired value. Value 2.0 might be good for high density displays (ie Retina). Values ranging from 1.25 to 2.0 are suggested for big 4K monitors (42" and bigger) also depending on distance between eyes and the screen.
  3. Match size of volume fader thumbs. Chose the most biggest available size, but smaller or equal than scale. For example select 125 size for 1.35, or 150 size for 1.5 scale.
  4. If needed, change a theme to another MxM_Scalable which better fits selected scale.
To apply changes done in points #2 and #3 you have to reload the theme. Do do that, select it again in Options/Themes

Please note, screenshots are taken from my 4K monitor. Appearance my differ visually on other systems with different HiDPI settings (especially 200% on Retina display).
Link to galery (imgur): https://imgur.com/a/dv33JgE

Screenshot 125%

Screenshot 150%

Screenshot 175%

Screenshot 200%

New MCP folder icons to help with nesting

Please note, toolbar icons and item icons are prepared in fixed size: toolbar: 200%, icons 150%. I consider it acceptable for expected GUI scales. Read below for reasons.

Last edited by MaXyM; 08-02-2019 at 02:12 AM.
MaXyM is offline   Reply With Quote
Old 04-06-2019, 11:46 AM   #2
Human being with feelings
Join Date: Aug 2018
Posts: 314

Why such effort

In spite of all contradictions, suggestions, warnings... I've done that because I just needed that.

I'm a user of 42" 4K monitor, and simply I found no theme being useful. Standard themes provides too small GUI elements. Retina (aka 200%) themes turn my big monitor into common fullHD monitor just stretched to fit big display.

To avoid further misunderstanding, here are therms and their meanings I use in this article:
Normal monitor - usually FullHD, 22-28" monitor with standard density display (TN, IPS etc)
4K monitor in the meaning of big monitor with pixel density compared to normal (22-30") monitors. Usually those are 42-52" monitors with doubled number of pixels in both axes comparing to FullHD (it's like 4 FullHD monitors arranged into 2x2 matrix)
Retina - standard sized monitors (let's say up to 28") with high density displays

I suspect there are more and more users of 4K and Retina monitors. Reaper support for those devices are still experimental. Current state of the support and documentation is, lets say, incomplete. It forces theme designers to decide which monitors their theme will be dedicated for. In result there are hundreds beautiful/useful themes for either standard monitors or retinas, being unusable for other at the same time. It might be even more painful for 4K monitor users, because none of those themes, gives expected user experience on their devices. It's because those are dedicated for so called 100% or 200% scale.

I, as a programmer (for recent 20 years I'm more programmer than musician), decided to check out if there is an option. To answer a question how is it possible that application which seems to support highDPI, struggles to provide scalable themes.

And besides ready-to-use theme I'm providing answers. Limitations of Reaper which makes creating scalable themes harder. I could hope in devs providing fixes, but recently there are rumours about v6 and new theming engine... However because those rumours are around since 2 years ago... I would stick with v5 theming engine, asking developers for fixes and improvements.

Here we go...
Scaling incompatibilities

Global_scale / UI scale
Scaling can be set either in preferences or in rtconfig theme file. Once set in rtconfig, value set in Preferences is ignored. It's pity, because editing theme files (incl. unziping/zipping) is not what end user is starving for. In fact it would be better to make possible to override value set in theme by Preferences. It would allow to change the scale freely by a user... Of course, after fixing the UI scale, which today requires restart of the application to apply.

Some elements not scaled at all
Those elements are:
  • volthumbs,
  • fxparams/fxlist arrows
  • item icons (in arrange window)
  • toolbox icons
It's one of most painful aspect, but at least it doesn't break the theme apart... see below.
Personally I don't know why some elements are being scaled why others not. Speaking about volhumbs I would suspect it's dictated by image quality degradation. Then why the rest of theme can be scaled incl. small buttons? Even with quality loss, it would be better than nothing. Maybe allowing multiple images for different ranges of scale is the way?

pink/yellow marked areas not scaled

It has been discussed recently in various threads. It remains obvious to me, that pink/yellow areas must be scaled (at least as one of possible alternatives). Please remember, scaling doesn't break a functionality of pink/yellow. Scaling changes pixel density, it doesn't change layout of the theme.

But going deeper I admit there are two possible cases:
1. we want to increase pixel density of whole image (theme) because of monitor technology (ie Retina) requires it. In this case it's more than obvious that every displayed pixel must be multiplied to match device resolution
2. we want bigger elements (because of bigger monitor) but want some parts (often borders) to not change their size. It's fair argument. It might work for border lines well even today. However it will not work (today) if such areas affects fixed position of other elements which are scalable. Ie, you cannot use area marked by yellow line to measure distance, because the layout will break, once the scale change.
Probably, in future, both options will be available. In current state, I consider it as a bug or oversight (ie, making it scalable at beginning wouldn't have hurt existed themes)

font sizes not scaled
Nothing to comment.

About MxM_Scalable theme
The theme is based on JanneV2Tinted theme by Janne83. All thanks to this author for all initial work, gfx assets, rtconfig etc.
My goal was to make this theme work for all scales from 100 to 200% being easily scalable.
At first I've got rid of yellow/ping areas which brakes layout.
Then repainted most of gfx assets including knobs, buttons, icons.
At the end I was trying to achieve the easiest way of switching between scales.
Initially i was thinking about rely on UI scale settings in prefs. it would allow me to pack the theme into ReaperThemeZip. Unfortunately I had to figure out how to provide various sizes of volthumbs. I was thinking about scripts (ie .bat/bash) or layouts dedicated for specific scale. Nothing worked flawlessly. Finally I succeeded using Walter macro to provide needed scale of volthumbs. In result, to achieve final appearance of the theme, a user has to enter 2 values in rtconfig and select appropriate theme. Not as easy as I want but it works.

Maybe this theme/article will encourage you to push developers to fill gaps, making fully scalable themes real thing. We need that.

x fixed
+ added
- removed
o changed

based on JaneV2Tinted
- got rid of pink/yellow lines in many textures as not applicable and/or incompatible with global_scale
x fixes to items positions (centering, aligning etc)
x fixed midi editor buttons aspect ratio (quizzed in original theme)
x fixed knob volume presence in TCP and MCP (FX return layout)
o  all icons for MCP/TCP/toolbar incl knob stacks repainted to 200% scale
o changed colouring of sends to be the same as inserts
o recoloured arrange window background
o dimmed tinting of inserts/sends background
o optimized redundancy of images (by using subdirectories) 
+ assigned transport status font to Walter1
+ added volthumbs for several scales incl walter code to support it
+ added icons for latch preview
+ new layouts:
       transport: centered layouts (normal and small)
       master MCP: volume knob
       MCP: group (without volume meters)
       additional volume fader colors for existing themes
+ added ReaperThemes dedicated for different scales, differs by font sizes

Last edited by MaXyM; 08-02-2019 at 02:04 AM.
MaXyM is offline   Reply With Quote
Old 04-06-2019, 12:50 PM   #3
Human being with feelings
Join Date: Aug 2018
Posts: 314

Future of scalable themes

We are hearing from time to time about Reaper6 and new theming engine. Yes, vector system supported by bitmaps would be super cool. But since those rumours are heard for long time, I don't believe new system will be ready in days.

Also, it's almost impossible that new major version of Reaper will not support old themes. This is what version tag is designed for. Considering long life for v5 themes I would encourage developers to make changes which allow flexible scaling of v5 themes.

I already mentioned it, but going to repeat it again:
1. yellow/pink marked areas - regardless various opinions, it's objectively show stopper for scaled themes. Scaling themes (changing pixel density in fact) will be never possible if some parts of the theme rely on unscalable object location/size.

For example if you make background for track idx using pink lines (very frequent usecase), this field will never change the size during scaling, while fonts will change the size, other elements will move etc. If such background is 10px tall for 100% theme, it must be 20px tall on Retina display. etc etc.

Once working, it will have no negative impact on existing 100% themes. It might have impact on some 200% depending on if the issue has been for this theme exploited improperly. Considering total number of 200% themes, only single occurrences might require fix. Or even none, considering all 200% themes has global_scale set to 2.0

2. volume fader thumbs must be scaled. It's not show stopper but major issue

3. toolbar icons, item icons, fxparams/fxlist arrows should be scalable. Minor issue though.

4. font sizes should be scaled obviously too. As a temporary workaround, I would see ability to set global_scale from ReaperTheme file. It would allow to link font sizes setup with particular scaling ratio.

5. Preferences / UI scale shouldn't require Reaper restart. And it should override settings in rtconfig. This way a user will be able to adapt Reaper appearance to own needs without need of digging in themes.

Please consider this article as friendly suggestions to what has to be done to enable all themes to all users. Changes are mainly in developers hands, it's true. But it's obvious they won't do anything unless specific needs will be voiced by theme creators

With regads

Last edited by MaXyM; 08-01-2019 at 01:09 PM.
MaXyM is offline   Reply With Quote
Old 04-07-2019, 06:52 PM   #4
Human being with feelings
hopi's Avatar
Join Date: Oct 2008
Location: Right Hear
Posts: 15,103

thanks for making this.... just what we needed!

I did a couple minor mods to the mcp bg sel and tcp bg sel png's
only because I like to brightly defined border around those panels... because I've been fooled more than once about what trk's are or are not selected...
did the same sort of thing on the env sel png...
all that works fine

Also, since I wanted to send these to someone, I edited the rt config for each of the sizes, 1, 1.25, 1.50, etc. and made xxxx.ReaperThemeZip's of them all....
Sure a little extra HS space but makes it easy to switch sizes on the fly...

VERY KEWL work! And I thank you again.
...should be fixed for the next build... http://tinyurl.com/cr7o7yl
hopi is offline   Reply With Quote
Old 04-12-2019, 06:20 AM   #5
Human being with feelings
Join Date: Nov 2012
Posts: 3

Thank you!
Phillipoque is offline   Reply With Quote
Old 06-22-2019, 01:35 PM   #6
Mr. Green
Human being with feelings
Join Date: Jul 2010
Posts: 334

I've been working on my own theme attempting to solve the same problem as you (nothing looks right on a big 4k screen), but I struggled with the positioning and sizing of things. I hope you don't mind if I attempt to "merge" them together. :-)
Mr. Green is offline   Reply With Quote
Old 06-22-2019, 11:52 PM   #7
Human being with feelings
ANDYZ's Avatar
Join Date: Aug 2018
Posts: 16

Thank you for your work and suggestions
ANDYZ is offline   Reply With Quote
Old 06-23-2019, 02:20 AM   #8
Human being with feelings
Join Date: Aug 2018
Posts: 314

Hello guys
I'm glad you found my work helpful and inspiring. Of course you are free to modify it to your own needs.

with regards.
MaXyM is offline   Reply With Quote
Old 07-02-2019, 03:07 PM   #9
Human being with feelings
Join Date: Apr 2015
Posts: 15

Woah, this is amazing!!! Thank you very much for your work!
I was tired of having a not sharp theme on a Retina display and this solves this and also is a great looking theme!
KuulArt is offline   Reply With Quote
Old 07-15-2019, 10:08 AM   #10
Human being with feelings
Join Date: Aug 2018
Posts: 314

After a few weeks of almost continuous work I'm proud to share updated theme.

Please note, some solutions I applied to the theme are here because of my personal challenges or attempts to prove something or just I found it just useful. I admit that some things might be questionable. I still have a hope the theme will fit needs of some of you.

Most changes are not visible on the first glance. Besides obvious fixes like missing hires assets for small transport, A lot of work was about playing with pixels, aligning elements and reorganizing assets in Photoshop files in the meantime.

The most visible changes:
1. added visual cue to MCP folders. Now it should be more obvious that tracks located on the right side of compacted folder don't belongs to it. You can see it on animated GIF below.
2. added "Folder meter" MCP layout. It's an attempt of filling a gap of often requested feature: folder which behaves like a group. (read below for more info)
3. added Return FX narrow layout
4. added envcp assets and envcp layout - remember to select this layout to get scaled sliders
5. changed colour of time selection/loop
6. changed design of sendlist getting rid of horizontal meters. Unfortunately there is vertical thin line, representing 0dB change, which probably cannot be removed because is hardcoded.
7. more visible/brighter selected MCP/TCP panels
8. changed appearance of buttons when hovering over them
9. alternative packaging

Group Folder
1. Create Folder track, children and "Folder meter" track (on the left of the folder track)
2. Let children tracks to be routed to parent (folder)
3. Create VCA group, with master being folder track, and slaves being children tracks. No need to include Mute/Solo/etc into group. Folder tracks does the job on its own
4. Route folder track to "Folder meter" track in Pre-FX mode.

I usually route all (children) tracks to some buses. But you can use folder in classic way, remembering that it MUST be routed out in "Pre-FX mode" (so no direct routing to master possible). If you want to apply some effects on such folder, apply them to Folder meter track, and then route Folder meter to output.

The case is, that Folder track uses volume slider to affect group VCA and its own volume. This way volume changes are doubled. That's why signal must be routed out of it first.

Alternative packaging
This time theme is provided in two versions:
1. unpackaged (one directory and 5 ReaperTheme files refering to this directory)
2. packaged MxM_Scalable_150 theme is provided as ReaperThemeZip, other 4 theme files are ReaperTheme ones, which refers to ReaperThemeZip. All those files are ZIPed for download convenience though

Just to remind: theme files differs in font sizes only. Scale and volume sliders have to be configured by setting two values in in rtconfig file.

Second way is more efficient, siginificantly improving theme load time.
But as you know, to change size of volume sliders, you have to edit rtconfig file.
I recomment to use TotalCommander which provides ability to edit files directly from ReaperThemeZip. Just select the file, hold CTRL+SHIFT and press Enter or click a mouse.
After editing the file, and closing the editor, TotalCommander will ask to update file in the archive. Done.
Unfortunatelty I don't know if there is similar easy way to edit content of ReaperThemeZip on Mac without unpacking the file.
Anyway, you can always download unpackaged version.

Remember, in order to apply scaled theme, you have to change layout of MCP, TCP, MASTER, ENVCP and TRANSPORT from default.

150% scale theme. Click the image for full size

x fixed
+ added
- removed
o changed/updated

+ MCP track number color dependend on background
+ new MCP layouts: 
  * FX return narrow
  * Folder meter - to compose a "group folder"
+ ENVCP value slider scalable - needs to select "Default scalable" layout
+ ENVCP value knob hires asset matching a theme design, also removed white background
+ TOOLBAR: added hires assets for toolbar_midi_step
+ TCP: added hires assets for
  * track_recarm_auto_norec
  * track_recarm_norec
+ track controls window buttons in hi-res
+ All buttons slighlty changing appearance while hovering over them
o redesigned sendlist items (horizontal meter removed)
o ENVCP panels re-layouted to lineup with TCP better
o MCP folder icons redesigned - now compacted folder shows that folder begins and ends on this item.
  Note, if "clickable folder icon" option is disabled, the icon doesn't change it's appearance while hovering above it.
o TCP folder icons redrawn into hires assets
o changes to arrange widow grid colours, inc. time selection
o MCP/TCP - brighten selected panels to make them more distinct
o updated meter M/S/D icons for better visibility (unfortunately those icons are not scaled by Reaper)
o TCP updated volume sliders to better fit its background
o MCP volume sliders - updated sizes, positioning to maximize background fill.
o minor changes in font sizes for small scales
- TCP removed inputlabel button from meters (except from Big Meter one) as it occluded meter too much. It still reacts on mouse showing context menu
x TCP panels fixes 
  * big meter: meter size to better fill a panel, fixed folder icons
x MCP panels fixes
  * a lot aligning/positioning issues
  * fixed sizes of gfx assets to assure better scaling and visual consistency between scales
x TRANSPORT: fixed selection box in transport
x TRANSPORT: added missing hires assets for "Small" layouts
x TCP: removed unneeded assets from "narr" subdirectory
x TCP: added missing 150% volthumbs to "altm" subdirectory
x MCP: added missing 150% volthumbs to "narr" subdirectory
x MCP volume sliders - fixed the last pixel column cut

Last edited by MaXyM; 07-15-2019 at 10:24 AM.
MaXyM is offline   Reply With Quote
Old 07-15-2019, 05:10 PM   #11
Human being with feelings
EpicSounds's Avatar
Join Date: Jul 2009
Posts: 5,549

Thanks for your hard work on this. It looks very nice
REAPER Video Tutorials, Tips & Tricks and more at The REAPER Blog
EpicSounds is online now   Reply With Quote
Old 07-15-2019, 11:47 PM   #12
Human being with feelings
+NRG's Avatar
Join Date: Aug 2014
Posts: 560

I've always loved Jan's themes! You have been very thorough / methodical with your changes and experimentation! Nice work!
“Where words fail, music speaks”
+NRG is offline   Reply With Quote
Old 08-01-2019, 02:21 PM   #13
Human being with feelings
Join Date: Aug 2018
Posts: 314

I uploaded new version of the theme 1.2
(download links in the first post)

This version focuses on:
- fx params to make them more coherent with the theme
- TCP master, which was left untouched till now
- fixes in rearranging TCP layout when changing its size

Beside of these, there is bunch of fixes (full log below)

In addition to the theme, I've created my the first script. I derived the code from one of Lokasenna scripts (thank you).

The script is intended to automate creation of VCA folders. Currently it only adds Folder meter track, route audio in Pre-FX mode, and apply theme layouts. in future it should create folder for selected tracks and setup VCA groups.

There is short demonstration:

o Renamed Master Knob layout to Knob Master.
o improved look of fx params, to make them more coherent with the theme
o replaced PAN WIDTH knob by regular pan one. it makes appearance of all pan modes more consistent
o replaced IO button (found in media-explorer) with hi-res asset
o slightly improved outside border of pan knobs to make them more distinct over a background
o MCP set vol.label margin smaller to ensure more space for values
o TCP volthumbs horizontally flipped to match envcp ones. Still not what I wanted to do (lighting from the top to match MCP trims)
x TCP MASTER: give love to this layout
x MCP: fixed routing buttons for some layouts
x ENVCP: fixed hiding value labels when changing height
x TCP: fixed cropped 1px from the bottom of vol slider
x TCP: fxparams overlaped other controls under some conditions in "horizontal meter" layout
x TCP: folder icons overlaped trackidx. Was considering hiding trackidx, but finally I moved it away from icon.
x TCP: volume sliders - fixed bottom pixel cut
x TCP: fixed apearance of fxin and recinput  
x TCP: fixed aligning edges of various elements
x MCP centered pan label value in some layouts
x MCP fixed width of pan/width label in some layouts
x fixed appearance of Layout default layouts in MCP/TCP. Now appears the same as Default scalable (except of volthumbs)
x fixed volbg (MCP/TCP/ENVCP) to match defined size (avoid unneeded scaling)
- removed mcp_*knob images reaper can use their tcp assets
- removed unneeded tcp_volthumb images from group directory
- removed unneeded envcp_volthumb images from altm/ and default/colour directories
MaXyM is offline   Reply With Quote

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT -7. The time now is 01:23 AM.

Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, vBulletin Solutions Inc.