Transformation Matrix or not?

[CMDR_Evolution]

Hello everyone,

I have a touchscreen desktop with buttons on an image of a spaceship cockpit, using rainmeter with transparent bar meters to open different applications.

It's worked perfectly for many years and now, I'm overhauling it all for a new pc.

Some of the on screen buttons are slightly angled and so of course, the rainmeter bars are slightly misaligned.

For functional bars, I'm assuming my only option is the transformation matrix?

I've read the guide quite a few times but I'm struggling to know what I need to do, sorry.
https://docs.rainmeter.net/tips/transformation-matrix-guide/

Can I check / ask please:

• For the different shaped rectangular bars, will the meters need to be configured separately due to different dimensions, or would one transformation matrix apply an angle to anything needed? (if copied to multiple different sized meters)

• The guide mentions a, b, c, d values for stretch / skew for x and y relating to sine and cosine. It says a calculator will be needed for sin and cos. I know calculators have those buttons but I have no idea how to use the meter dimensions to get what's required. Do I just put the pixel numbers in for either x or y, press the sin or cos button, then use that or something else? I Googled it and found loads of trigonometry stuff unrelated to rectangles or how to work out dimensions to be fransformed.

If you can help clear up my confusion, I'd appreciate it so much! Sorry if any of what I've said is totally stupid, I feel like an idiot for my lack of understanding.

Alternatively, could something easier be used for clickable angled bars instead of transformation matrix, like rotator meter or anything else?

I haven't got code to share at the moment as I don't know where to start. Just trying to find the easiest option or whether to just leave it as is.

Many thanks,

[SilverAzide]

Since no one can see what you are talking about, it's a little difficult to give you a meaningful response. But what I can tell you is that, since you are asking about "angled buttons" etc., using TransformationMatrix is going to present some difficulties. The biggest issue is that the "clickable area" on the meter is determined before the TransformationMatrix is applied. So you will end up with buttons where the clickable area doesn't match up with what you see. TransformationMatrix is great for scaling things, but once you start skewing and rotating things, it can get a little nightmarish.

What you could use instead are Shape meters. You can make things into any shape you want, including things that look angled/skewed but aren't, so you don't have to worry about mouse issues.

[CMDR_Evolution]

Since no one can see what you are talking about, it's a little difficult to give you a meaningful response. But what I can tell you is that, since you are asking about "angled buttons" etc., using TransformationMatrix is going to present some difficulties. The biggest issue is that the "clickable area" on the meter is determined before the TransformationMatrix is applied. So you will end up with buttons where the clickable area doesn't match up with what you see. TransformationMatrix is great for scaling things, but once you start skewing and rotating things, it can get a little nightmarish.

Ah, thank you SilverAzide. I'm not at the PC at the moment and know this isn't what you need, but here's a visual example of some of the bars from 4 years ago:


To confirm what you said please: so the transformation matrix isn't what I need. In effect, by using that, the clickable area would still be the standard rectangle and transformation matrix would simply adjust any visual aspects (like above in blue) which I keep hidden anyway. So there's no point in doing that at all?

What you could use instead are Shape meters. You can make things into any shape you want, including things that look angled/skewed but aren't, so you don't have to worry about mouse issues.

Oh wow, thank you! That sounds ideal. Lastly to check, the shape meters would adjust the clickable area as well?

If that's the case, I saw the sticky thread about that and will have a good read through.

[SilverAzide]

"Yes" to all your questions!

Keep in mind that Rainmeter won't "see" transparent areas of images/shapes for the purposes of mouse clicks, so by using transparent backgrounds and adding/removing sections of shapes, you can make a sorts of oddly-shaped regions clickable (circles, donuts, parallelograms, etc.).

TranformationMatrix's best use-case (for me anyway), is to make skins that are scalable in size. This does mean you need to make extra efforts on the mouse regions, like creating near-transparent image meters that overlay the shape and will react to clicks.

[balala]

• The guide mentions a, b, c, d values for stretch / skew for x and y relating to sine and cosine. It says a calculator will be needed for sin and cos. I know calculators have those buttons but I have no idea how to use the meter dimensions to get what's required. Do I just put the pixel numbers in for either x or y, press the sin or cos button, then use that or something else? I Googled it and found loads of trigonometry stuff unrelated to rectangles or how to work out dimensions to be fransformed.

Sorry I'm a little bit late in this discussion, but being about TransformationMatrix, I couldn't resist not to intervene.
I understand you're not too interested in TransformationMatrix anymore, due to what SilverAzide described and he practically is perfectly right, the TransormationMatrix moves only the visual elements of the meter you're applying it to, the clickable area of the meter doesn't change when applying the option. But if in any other case you'd like to apply it anyway, you have to know that you don't have to manually make all those trigonometrical calculations. After all you're sitting in front of a computer, why not to let it to make all calculations for you?
Let's say you want to rotate the meter by 30 degrees, anticlockwise. Theoretically you should calculate Sin30 and Cos30 and use the got values into the TransformationMatrix option. But the Calc measures of Rainmeter have both, trigonometrical functions as well as a function to convert degrees into radians. So instead of calculating manually the Sin and Cos values, you could use for instance the Sin(Rad(30)) and (Cos(Rad(30))) functions accordingly.
Let's take a look to an example. In the code below, I defined the rotation angle (30 degrees). The yellow rectangle rotates around its own center. You can see this point as a black dot (created by the [MeterRotCenter] meter). Click the yellow rectangle, in order to rotate it back on to it's not-rotated position (if it's rotated) or rotate it (if it's not):

Code: Select all

[Rainmeter]
Update=-1
SkinWidth=120
SkinHeight=70
BackgroundMode=2
SolidColor=220,220,220,80

[Variables]
Angle=30

[MeterTM]
Meter=Image
X=20
Y=20
W=80
H=30
SolidColor=255,240,0
DynamicVariables=1
TransformationMatrix=(Cos(Rad(#Angle#)));(-Sin(Rad(#Angle#)));(Sin(Rad(#Angle#)));(Cos(Rad(#Angle#)));(([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)-([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Cos(Rad(#Angle#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Sin(Rad(#Angle#)));(([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)+([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*Sin(Rad(#Angle#))-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*Cos(Rad(#Angle#)))
LeftMouseUpAction=[!SetVariable Angle "(30-#Angle#)"][!UpdateMeter "MeterTM"][!Redraw]

[MeterRotCenter]
Meter=Image
X=([MeterTM:X]+[MeterTM:W]/2-1)
Y=([MeterTM:Y]+[MeterTM:H]/2-1)
W=3
H=3
SolidColor=0,0,0
DynamicVariables=1

If you remove the SkinWidth and SkinHeight options of the [Rainmeter] section, you can see another disadvanteg: in such a case you get the rotated meter cut off. Parts which are going outside of the unrotated meter are cut. To avoid this, you have to set a size for the skin (throught the previously mentioned SkinWidth and SkinHeight options).
As you can see there are ways to get Rainmeter to make the required calculations for you. It's not even too hard, but yes, a little calculation skill is needed.
Since I simply love this powerful option, with all its disadvantages, I'd be happy to help you (or anyone) with it, if needed, anytime later.

[balala]

So you will end up with buttons where the clickable area doesn't match up with what you see. TransformationMatrix is great for scaling things, but once you start skewing and rotating things, it can get a little nightmarish.

Agree if there are click defined (only due to what have you described previously), but if there are not, rotating things is extremely easy. Calculations are done, just have to apply them.

[CMDR_Evolution]

That's very informative. Thank you so much everyone! You've been so helpful, I appreciate it.

As I need the buttons / bars / areas to be clickable (pressable on a touchscreen) like they are now and based on what SilverAzide mentioned earlier, I think I'll create some small png images with the exact shapes coloured in and with transparent backgrounds.

Then when I replace the bar meters (in the image I shared earlier), they should just work for the intended area?

I looked into it online and think the new plan should hopefully work. I'll have all day to work on it tomorrow

[balala]

As I need the buttons / bars / areas to be clickable (pressable on a touchscreen) like they are now and based on what SilverAzide mentioned earlier, I think I'll create some small png images with the exact shapes coloured in and with transparent backgrounds.

Yep, TransformationMatrix has its own disadvantages (as described earlier), which you can't get over. Unfortunately...

Then when I replace the bar meters (in the image I shared earlier), they should just work for the intended area?

I looked into it online and think the new plan should hopefully work. I'll have all day to work on it tomorrow

Yep, it probably should work, but an Image meter, even with a well created image, has another disadvantage: you can't modify it later, just by redrawing the image. A Shape meter could help, because you don't have to crate any resource for it, it's just pure Rainmeter code.
But obviously what should and can be used, depends on your intention. Please let us know if you have some specific question.

[CMDR_Evolution]

Yep, it probably should work, but an Image meter, even with a well created image, has another disadvantage: you can't modify it later, just by redrawing the image. A Shape meter could help, because you don't have to crate any resource for it, it's just pure Rainmeter code.
But obviously what should and can be used, depends on your intention. Please let us know if you have some specific question.

Yeah, thank you Balala. I had a good look through the shape meter sticky thread and online but I think it'd take a little while to wrap my little brain round it lol. Although I'd prefer to have it controlled with code, making some images seems like an easy workaround to get it sorted.

Thank you

[balala]

Although I'd prefer to have it controlled with code, making some images seems like an easy workaround to get it sorted.

Definitely. Anyway, feel free to come back anytime, if questions arise.