How to create a new Overlay?

[ernzo]

Sorry for the noob question,
but I couldn't find a clear example/explanation about the topic on the Walter Guide/Reference..

But just as an example..

-Let's say I want to create a new Overlay that surrounds the Selection display/area..

(afaik) This is the Selection display code:
set trans.sel h>84 [2 40 220 18 0 0 0 0] w<1000 [trans.status 19 trans.status 16 0 0 0 0] [811 10 220 17 1 0 1 0]




-First I've edited the rtconfig.txt file to enable overlays:
use_overlays 1


-Then I've created a pixel perfect overlay to surround the Selection display,
it's a new file called "trans_sel_ol.png"

(Sorry I cannot show you the overlay or I will spoil the Surprise if/when the Theme is finished!)

Since the new overlay should begin 19 pixels before the selection display,
I've set its starting point at 792:

front trans_sel_ol w<1000 [792 10 256 47 0 0 0 0]


The 10 is just temporary,
first I need to see the actual overlay and then I will adjust it..

I don't need it to be attached to any borders for now, so the rest is 0's


-I've tried with the "set" and "front" commands, and with no command,
but no matter what I don't see anything appearing over the transport area..

So..
What would be the correct command/way to Draw this new Overlay around the Selection display?

Thx

.

[lucas_LCS]

Originally Posted by ernzo

front trans_sel_ol w<1000 [792 10 256 47 0 0 0 0]

try changing it to:
front trans.sel w<1000 [792 10 256 47 0 0 0 0]

NOTES:
---------
- The set command is used for the actual button or label, so it will ignore a command for an overlay.
- The set command format uses a period instead of an underscore for the button or label name.
- Overlays need to be the exact same size as the original image if pink lines are not employed to define the actual button area.

::

[ernzo]

Thanks for the prompt reply Lucas!

So close, yet so far indeed!

I haven't managed to make it work yet..
But I'm gonna try all the options and see what happens,
maybe I'll be more lucky tomorrow when my brain is working a little bit more..


-One thing I did tho, and it's Rename the overlay file to: "trans_seldeco_ol.png"

Whith the code:
front trans.seldeco w<1000 [792 10 256 47 0 0 0 0]

Just to make sure it's not creating any confusion/conflict with the actual "trans.sel" commands of the original file.

But yeah, no luck for now!

[lucas_LCS]

is there a trans_seldeco.png file?
I'm not familiar with that transport image or button.
overlay image files work in conjuction with existing button images and the commands for those images.
We are unable to add images with new names and use the set command to position them.

You would need to create an overlay for an existing button or nearby button and possibly use pink links to define areas outside the button itself.

::

[ernzo]

Originally Posted by lucas_LCS

is there a trans_seldeco.png file?
I'm not familiar with that transport image or button.

Oh, of course not!
It's a new decoration overlay I wanted to add to the theme..

Originally Posted by lucas_LCS

overlay image files work in conjuction with existing button images and the commands for those images.
We are unable to add images with new names and use the set command to position them.

Darn it, I see.. I didn't knew that!
It makes sense then that the Walter Guide didn't include instructions/examples for adding new stuff..

But it's very unfortunate, because that narrows the options to create themes with elaborate decorations considerably..

Originally Posted by lucas_LCS

You would need to create an overlay for an existing button or nearby button and possibly use pink links to define areas outside the button itself.

Hmm..
I will need to think what are the options/best strategy for decorating then.

Maybe it's possible to create a pixel-perfect Transport overlay or background, that covers the whole thing in my native resolution? (1366)

.

[lucas_LCS]

transport_group_bg.png is the background for Selection, Rate and Time Signature.

transport_bpm.png and transport_bpm_bg.png are the files for the BPM backgrounds

transport_status_bg.png and transport_status_bg_err.png are the backgrounds for the clock/status.

Edit those file.
Use the pink lines to define what stays unstretched and what gets stretched.

You should read the SDKs provided in Forum Stickie #3 for creating a theme.

::

[ernzo]

Thanks for the info!
It's always good to have an Expert explanation of which files represent what on the different GUI elements.


Yes I knew about the pink/yellow lines, the areas and so forth,
I've read the Walter Guide..

But since it all seemed very strange I didn't want to Complicate myself and possibly mess-up the actual elements,
and thought about simply overlaying decorations over the transport area would be a more direct/simple approach..

But yeah, alas it's now clear it's not really possible/easy to do what I wanted with just new Overlays.


-However, to answer myself..

It seems it's actually possible to create a Transport Background that includes all the Decorations in itself,
as this is what themes like "ProTools 2020" by revsfmc/Albert seem to be doing:

https://stash.reaper.fm/theme/2572/Pro%20Tools%202020


I've actually added/edited the "transport_bg.png" from this "ProTools 2020" theme,
erasing the stuff and adding the decoration I wanted for the Selection area..

And well the result is not functional yet, but I can see the new decoration,
so it's just a matter of finding the proper Alignment/Scaling and so on..


And this also solves the other doubts I had about creating a textured Background for the Transport/other areas.

This approach will ofc create a more Static type of Theme,
but it's a good solution for what I have in mind..

.

[lucas_LCS]

Originally Posted by ernzo

It seems it's actually possible to create a Transport Background that includes all the Decorations in itself...
------------
...This approach will ofc create a more Static type of Theme,
but it's a good solution for what I have in mind..

.

Yes, it definitely works, but I would encourage you to take a few minutes to generate the yellow lines in the transport_group_bg.png.
attached below is a simple border example I created in less than 5 minutes in GIMP.

Do the same for the other fields I listed earlier to try getting what you want this way.
It will make the transport far more flexible and be worth the effort.

::

[ernzo]

I've been taking a look into it and well..

-I'm not really sure if it's possible to do one single Overlay for the entire Selection display,
as it seems it's comprised/made of 3 or 4 separate areas..

I want to do a decoration that surrounds it all, but it's an Elaborate Decoration,
not a homogeneous Lighting Effect or whatever, so it cannot be interrupted/cloned/stretched 3/more times as the actual Selection Background appears to be.

It needs to be one single element drawn around the entire Selection display.


-Besides I think the Walter Guide is in serious need of an Update,
it seems to be based on the V3 era approach, which is good..
But there's probably been very considerable advancements/evolution of the whole thing/concept since then.

Just a regular V4 Theme like Default_Analog_1.8 (which I'm using as the basis) seems to be doing more elaborated/different stuff,
which is not covered on the Guide.

I imagine V5/V6 also extended/advanced the whole "language",
so where's all this documented/exemplified?


Also, there's no proper Examples of how things need to be Coded.

For instance it talks about the Overlays, and the Pink/Yellow lines, yes,
but it doesn't give one single practical example of how the thing must be done,
nor a single line of example Code.
(besides the basic Square ofc, but even then the Coding side is not explained)


Should the Yellow lines always be a complete regular uninterrupted/closed shape?
Or they can be used as partial barriers that the program will recognize and interpret?

What happens if I want to create an overlay around the Record button?
Shall I create a full Yellow "Circle" to surround the actual button, and then draw the overlay around it?

Or are we limited to Square/Rectangular shapes?

Must it be pixel-perfect,
or can it be made in a higher resolution that reaper will recognize and resize as desired?

Should I leave one empty pixel between the the Yellow line and the actual drawing?
Or I can draw immediately after it?

Is it possible to extend Overlays indefinitely,
or is there a limit of the size/area they can occupy around the button/element?

Why are Pink/Yellow lines sometimes shown/not working if I use the exact "255-0-255"/255-255-0" colors?
It often happens that I draw Pink lines covering the whole Top X axis line, and Left Y Axis line,
but even tho the Pink color is the good one, Reaper shows those lines..

None of this is explained/exemplified on the Guide, there's no graphical/code examples,
and that makes it hard to guess how the whole thing is supposed to work..


-Also there's no explanation of how compound elements like the Selection area, Global Autos, or Status display really work..

And it's hard to tell by the Code because they seem to be cast as monolithic elements.
Are this elements hard-coded inside of Reaper?

For instance, how can I resize the Status display?

This is the actual code, but it doesn't seem to be very modifiable at all.

set trans_status_width + trans_others_width * [-1] + [trans.automode{w}] [trans_border{x}]
set trans.status h>84 [2 64 1037 19 0 0 1 1] + + + [trans.automode{x}] [trans.automode{w}] [trans_border{x}] w<1000 [0 1 trans_status_width{x} 18] [0 1 trans_status_width{x} 34]
set trans.status.margin w<1000 h<85 [5 1 5 0] [7 1 7 0] [7 1 7 0]

How can I shrink the Status Display and reduce its width?
(besides reducing the margins..)


-Btw..
I've found that to draw an Overlay the code must include the "ol" suffix, just as the png file does:
front trans.rec.ol

.

[White Tie]

I completely understand what you're going through, you are not the first. I really, really need you to hear this one thing, and believe me about it: You are not struggling with understanding WALTER/theming, which is very simple. You are struggling with understanding the code and practices of an existing theme, which is very complex. Analog Default is, I believe, a re-skin of the Default 4 theme ...that's a complicated theme.

It sounds like you're trying to do overlay hacking. Awesome. But please recognise that is an activity where we misuse theming functionality to do things it was never designed to do, as a way of extending our capabilities. In practical terms you'd never want to do that from the selection boxes, because they don't have discrete images, they reuse the same image.

What I would ask is for you to take maybe an hour, no more, to really look at Reaper naked. Make a blank text file, rename it myTheme.ReaperTheme. That is now a fully functional Reaper theme. No really! Make a blank folder, name it something and use the theme tweaker to make it your theme resource folder. In it put a blank text file, call it rtconfig.txt. Your theme is now a fully functioning and fully featured Reaper theme. From there you can add one thing, see what it does.

Load up that theme. What you'll see is Reaper, naked. Everything we do in theming is an alteration of that, no more no less. If you want to learn how overlays work, do it there. And then take that knowledge and apply it in the theme you are working on, and if things don't behave the same way you'll know for sure that its an interaction with the theme code that is messing you up. This is exactly what I do if I'm trying to work out something super complicated.

Originally Posted by ernzo

But there's probably been very considerable advancements/evolution of the whole thing/concept since then ... Just a regular V4 Theme like Analog_Default_1.8 (which I'm using as the basis) seems to be doing much more elaborated/different stuff, which is not covered on the Guide ... I imagine V5/V6 also extended/advanced the whole "language", so where's all this documented/exemplified?

No, its all the same.

Originally Posted by ernzo

For instance it talks about the Overlays, and the Pink/Yellow lines, yes,
but it doesn't give one single practical example of how the thing must be
Done, nor a single line of example Code.
(besides the basic Square ofc, but even then the Coding side is not explained)

That's because overlays pre-date WALTER; they don't use any code at all. If you make one, and you've enabled them globally, they just show up.

Originally Posted by ernzo

Should the Yellow lines always be a complete regular uninterrupted/closed shape?
Or they can be used as partial barriers that the program will recognize and interpret?

What happens if I want to create an overlay around the Record button?
Shall I create a full Yellow "Circle" to surround the actual button, and then draw the overlay around it?

Or are we limited to Square/Rectangular shapes?

Must it be pixel-perfect,
or can it be made in a higher resolution that reaper will recognize and resize accordingly?

Should I leave one empty pixel between the the Yellow line and the actual drawing?
Or I can draw immediately after it?

Is it possible to extend Overlays indefinitely,
or is there a limit of the size/area they can occupy around the button/element?

Can I just check that you have seen this: Reaper Theming with Pink Bits ?

Originally Posted by ernzo

Why are Pink/Yellow lines sometimes shown/not working if I use the exact "255-0-255"/255-255-0" colors?

Its very easy to just slightly cock up the colours, or have them not completely reach the corners, or if a program applies colour space correction.

Originally Posted by ernzo

-Also there's no explanation of how compound elements like the Selection area, Global Autos, or Status display really work..

And it's hard to tell by the Code because they seem to be cast as monolithic elements.
Are this elements hard-coded inside of Reaper?

For instance, how can I resize the Status display?

This is the actual code, but it doesn't seem to be very modifiable at all.

set trans_status_width + trans_others_width * [-1] + [trans.automode{w}] [trans_border{x}]
set trans.status h>84 [2 64 1037 19 0 0 1 1] + + + [trans.automode{x}] [trans.automode{w}] [trans_border{x}] w<1000 [0 1 trans_status_width{x} 18] [0 1 trans_status_width{x} 34]
set trans.status.margin w<1000 h<85 [5 1 5 0] [7 1 7 0] [7 1 7 0]

How can I shrink the Status Display and reduce its width?
(besides reducing the margins..)

This is all specific to the theme, not to do with how WALTER itself works. The WALTER of the default 4 theme is quite messy, sorry, but it was the first WALTER theme I, or anyone else for that matter, ever wrote. FWIW, trans_status_width is not a thing. trans_others_width is not a thing. They are just variables I invented to drive whatever layout thing I was doing there.

[ernzo]

Originally Posted by White Tie

What I would ask is for you to take maybe an hour, no more, to really look at Reaper naked...
Load up that theme. What you'll see is Reaper, naked. Everything we do in theming is an alteration of that, no more no less. If you want to learn how overlays work, do it there. And then take that knowledge and apply it in the theme you are working on, and if things don't behave the same way you'll know for sure that its an interaction with the theme code that is messing you up. This is exactly what I do if I'm trying to work out something super complicated.

OK Fair enough!

I'll take a good look under the skirt when I have some time,
and see if it lights the bulb somehow..

Originally Posted by White Tie

No, its all the same.

Awesome,
then this proves how Wickedly Smart you are when it comes to coding walter!

Originally Posted by White Tie

That's because overlays pre-date WALTER; they don't use any code at all. If you make one, and you've enabled them globally, they just show up.

I think in future revisions of Walter/Reaper, it would be good to Liberate the whole Overlays thing,
and include the option to freely add overlays to a theme, without being necessarily linked to any other button/element of the GUI.

I think this would ease the development of very Decorated themes considerably!

Originally Posted by White Tie

Can I just check that you have seen this: Reaper Theming with Pink Bits?

Yes I knew this guide,
the Graphical side of it is very well explained indeed..

It doesn't dwell too much into the Yellow lines side of things, or on irregular shaped objects..
But the Pink lines are indeed well explained.

However what it really misses is the Coding side of it..
It talks about the nomenclature of files and so on,
but it could improve if it gave some Code examples, specially on the Yellow lines and Overlays.

Originally Posted by White Tie

Its very easy to just slightly cock up the colours, or have them not completely reach the corners, or if a program applies colour space correction.

Hmm.. that's strange indeed.

I've got Photoshop 5, and I use it for the advanced/magic stuff,
like say context-aware filling, puppet-warp etc..

But for this type of pixely stuff I much prefer using the good old Paint Shop Pro 9,
it's just more handy and inmediate, what can I say!

However I wonder if PSP9 isn't messing with the Pinks somehow..
I really make sure the Pink lines are 100% solid, of the right color, and reach the edges.. then I save as PNG with unoptimized palette.

But no matter what, the lines always show up,
except if I'm resaving a previosuly existing/working image that hasn't been resized.

Originally Posted by White Tie

This is all specific to the theme, not to do with how WALTER itself works. The WALTER of the default 4 theme is quite messy, sorry, but it was the first WALTER theme I, or anyone else for that matter, ever wrote. FWIW, trans_status_width is not a thing. trans_others_width is not a thing. They are just variables I invented to drive whatever layout thing I was doing there.

Well I wouldn't say it's messy,
except for some nomenclature inconsistencies.. :P

But yeah, some of this "compound" elements are indeed a bit abstract to guess how they really work on the fly..

Maybe I will understand it more after looking at the Empty theme.

[White Tie]

Originally Posted by ernzo

I think in future revisions of Walter/Reaper, it would be good to Liberate the whole Overlays thing,
and include the option to freely add overlays to a theme, without being necessarily linked to any other button/element of the GUI.

That would be a major departure to the way Reaper deals with theming. Much as we would all prefer to set our own menu of graphical ingredients, everything in a Reaper theme is a modification of precisely the elements you see when Reaper is naked, no more and no less. Well, sort of less because you can hide things. You never know, but I'm sorry to say I think it would be highly unlikely.

Originally Posted by ernzo

irregular shaped objects..

Not sure what you mean by that; all image files are rectangles, so it only deals in rectangles. You can have a picture of whatever crazy shape you like, but its going to be inside the bounds a rectangular image file, right?

Originally Posted by ernzo

However what it really misses is the Coding side of it..
It talks about the nomenclature of files and so on,
but it could improve if it gave some Code examples, specially on the Yellow lines and Overlays.

There are no code examples because there is no code. There's no code that you need, there's no code you can optionally add, nothing. Overlays come from the Reaper v3 era, WALTER was invented for Reaper v4.

You WALTER the location of an element. If the theme has overlays enabled and that element has a corresponding '_ol' image, Reaper draws the overlay over the element. And that's it.

Originally Posted by ernzo

But no matter what, the lines always show up,
except if I'm resaving a previosuly existing/working image that hasn't been resized.

That would suggest that perhaps when your program opens a file, if it doesn't find an embedded color profile in the image file then it applies its own one. If you can find some way to disable all color management in its settings, that would be worth a try.

[lucas_LCS]

It looks like making the border in the Transport_BG is your best bet at this point.
Just use pink lines to define it as a non-collapsing/compacting area.

I think it's important at this point to state some things clearly:

OVERLAYS:
------------------
Overlays only work with button images.
They will not work with labels or background images.
EXAMPLE:
tcp_mute.png would be paired with tcp_mute_ol.png
The automation button in the transport, global_trim.png would be paired with global_trim_ol.png
and so forth.
If you make an 'OL' image for a label or background it will be ignored by Reaper since it's not a valid image.


Yellow Lines:
----------------
1:Yellow lines are only valid on label and background images.
If you use yellow lines in a button or a button overlay image, Reaper will think the yellow and pink lines are part of the image it is supposed to display.

2: Yellow lines define areas outside of the 'active' part of the image.
This means that if you use yellow lines on the mcp_bg.png, tcp_bg.png, transport_bg.png you will not see the area defined by the yellow lines because it will be outside of the visible layout area.


Pink Lines:
--------------
1: Pink lines in a button, label or background image define areas that are not to be stretched, compacted or collapsed, but the entire image being displayed is 'active'.

2: Pink lines in a button overlay define the 'non-active' areas of the image.

there are some visual examples of this in the SDK.


Coding:
------------
1: When creating WALTER code in the RTconfig, the .png is dropped and any underscores in the image name need to be changed to periods.
EXAMPLE:
tcp_mute.png is written as tcp.mute

2: There is no need or reason to write code specific to the overlay image.
The overlay will autmatically follow the button image it is related to.

::