make horizontal links vertical

[balala]

So now, what if i wanted to make it look like this / https://imgur.com/QFmP49X how would one go about doing that? Is that much more difficult? Thanks again for all the help.

it could be achieved by the TransformationMatrix option for the meter, but I am not sure how to do. I leave it to balala who is the "TransformationMatrix wizard"!!

Many thanks mak_kawa for the trust.
I missed yesterday the DrRoboculous's above post and read it just now. In meantime eclectic-tech has posted an explanation about the disadvantage of using a TransformationMatrix option:

** NOTE: that rotated text does not change the mouse active area, so clicks will only work on the very center of the rotated text
See more about rotating text in this post by jsmorley

DrRoboculous, if you are still interested in using TransformationMatrix, please let me know, to assist you on writing it.
Sorry for have been late...

[Yincognito]

Ok, so here is an alternative that solves the mouse active area issue [...]
The code is based on what eclectic-tech posted earlier. This basically adds some Shape meters having the same visual positions and dimensions as the String meters and uses these shapes to receive the mouse actions instead of the String meters. Bear in mind that this will only work for 90 degrees rotated strings, as this was the "last assignment". It can be made to work for whatever angle is set in the [Variables] section, but I have no idea if there is an interest for this scenario from the OP or anyone else, so I skipped doing this for the moment.

The interest in this thread is probably lost by now and folks already use the solutions that have serious limitations, but just in case somebody else stumbles on this trying to do something similar, here is a solution that improves over my previous one and will:
- detect the mouse on the whole text extent, no limitations imposed on mouse actions because of the rotation
- work with any rotation angle, not just 90 degrees like my previous solution (adaptations of the formulas here were used)
- work with any scale and text, avoiding the need to modify images or code on new values given to the text on the "buttons"

The code (based on my previous one, with small alterations):

Code: Select all

[Rainmeter]
Update=-1
Author=Connect-R, modified by mak_kawa, balala, eclectic-tech and Yincognito.
BackgroundMode=2
SolidColor=0,0,0,1
DynamicWindowSize=1
AccurateText=1
MouseScrollUpAction=[!SetVariable Scale "(#Scale#+#ScrollMouseIncrement#)"][!WriteKeyValue Variables Scale "(#Scale#+#ScrollMouseIncrement#)"][!Refresh] 
MouseScrollDownAction=[!SetVariable Scale "(#Scale#-#ScrollMouseIncrement# < 0.2 ? 0.2 : #Scale#-#ScrollMouseIncrement#)"][!WriteKeyValue Variables Scale "(#Scale#-#ScrollMouseIncrement# < 0.2 ? 0.2 : #Scale#-#ScrollMouseIncrement#)"][!Refresh]

[Variables]
@include=#@#Variables.inc
@include2=#@#Language\#Language#.inc
Scale=0.35

; 0 for vertical | 150 for horizontal
HSpacing=0
; 150 for vertical | 0 for horizontal
VSpacing=150
; 90 for vertical | 0 for horizontal
AngleD=45

MouseOverSize=25
MouseLeaveSize=20
ScrollMouseIncrement=0.01

;-------------------------------------------------------------
;-------------------------------------------------------------

;HERE BELOW, YOU CAN CHANGE LINK NAMES AND PATHS.	

Name1=Google
Link1=chrome.exe

Name2=Facebook
Link2=https://facebook.com/

Name3=Twitter
Link3=https://twitter.com/

Name4=YouTube
Link4=https://www.youtube.com/

Name5=Behance
Link5=https://www.behance.net/

Name6=Gmail
Link6=https://mail.google.com/mail/

Name7=Deviantart
Link7=https://www.deviantart.com/popular-24-hours/

;-------------------------------------------------------------
[ButtonStyle]
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#MouseLeaveSize#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
AntiAlias=1
Angle=(Rad(#AngleD#))

[LinkStyle]
X=0r
Y=0r
AntiAlias=1
Shape=Path Frame | StrokeWidth 0 | Stroke Color 255,0,0,255 | Fill Color 0,0,0,1
Frame=((0-[Meter#CURRENTSECTION#Button:W]/2)*Cos(Rad(#AngleD#))-(0-0)*Sin(Rad(#AngleD#))),((0-[Meter#CURRENTSECTION#Button:W]/2)*Sin(Rad(#AngleD#))+(0-0)*Cos(Rad(#AngleD#))) | LineTo (([Meter#CURRENTSECTION#Button:W]-[Meter#CURRENTSECTION#Button:W]/2)*Cos(Rad(#AngleD#))-(0-0)*Sin(Rad(#AngleD#))),(([Meter#CURRENTSECTION#Button:W]-[Meter#CURRENTSECTION#Button:W]/2)*Sin(Rad(#AngleD#))+(0-0)*Cos(Rad(#AngleD#))) | LineTo (([Meter#CURRENTSECTION#Button:W]-[Meter#CURRENTSECTION#Button:W]/2)*Cos(Rad(#AngleD#))-([Meter#CURRENTSECTION#Button:H]-0)*Sin(Rad(#AngleD#))),(([Meter#CURRENTSECTION#Button:W]-[Meter#CURRENTSECTION#Button:W]/2)*Sin(Rad(#AngleD#))+([Meter#CURRENTSECTION#Button:H]-0)*Cos(Rad(#AngleD#))) | LineTo ((0-[Meter#CURRENTSECTION#Button:W]/2)*Cos(Rad(#AngleD#))-([Meter#CURRENTSECTION#Button:H]-0)*Sin(Rad(#AngleD#))),((0-[Meter#CURRENTSECTION#Button:W]/2)*Sin(Rad(#AngleD#))+([Meter#CURRENTSECTION#Button:H]-0)*Cos(Rad(#AngleD#))) | ClosePath 1
MouseOverAction=[!SetOption Meter#CURRENTSECTION#Button FontSize (#MouseOverSize#*#Scale#)][!UpdateMeterGroup #CURRENTSECTION#Group][!Redraw]
MouseLeaveAction=[!SetOption Meter#CURRENTSECTION#Button FontSize (#MouseLeaveSize#*#Scale#)][!UpdateMeterGroup #CURRENTSECTION#Group][!Redraw]
DynamicVariables=1

;-------------------------------------------------------------
[MeterLink1Button]
Group=Link1Group
Meter=String
MeterStyle=ButtonStyle
X=(140*#Scale#)
Y=(60*#Scale#)
Text="#Name1#"
LeftMouseUpAction=["#Link1#"]

[Link1]
Group=Link1Group
Meter=Shape
Meter=Image
MeterStyle=LinkStyle

[MeterLink2Button]
Group=Link2Group
Meter=String
MeterStyle=ButtonStyle
Text="#Name2#"
LeftMouseUpAction=["#Link2#"]

[Link2]
Group=Link2Group
Meter=Shape
MeterStyle=LinkStyle

[MeterLink3Button]
Group=Link3Group
Meter=String
MeterStyle=ButtonStyle
Text="#Name3#"
LeftMouseUpAction=["#Link3#"]

[Link3]
Group=Link3Group
Meter=Shape
MeterStyle=LinkStyle

[MeterLink4Button]
Group=Link4Group
Meter=String
MeterStyle=ButtonStyle
Text="#Name4#"
LeftMouseUpAction=["#Link4#"]

[Link4]
Group=Link4Group
Meter=Shape
MeterStyle=LinkStyle

[MeterLink5Button]
Group=Link5Group
Meter=String
MeterStyle=ButtonStyle
Text="#Name5#"
LeftMouseUpAction=["#Link5#"]

[Link5]
Group=Link5Group
Meter=Shape
MeterStyle=LinkStyle

[MeterLink6Button]
Group=Link6Group
Meter=String
MeterStyle=ButtonStyle
Text="#Name6#"
LeftMouseUpAction=["#Link6#"]

[Link6]
Group=Link6Group
Meter=Shape
MeterStyle=LinkStyle

[MeterLink7Button]
Group=Link7Group
Meter=String
MeterStyle=ButtonStyle
Text="#Name7#"
LeftMouseUpAction=["#Link7#"]

[Link7]
Group=Link7Group
Meter=Shape
MeterStyle=LinkStyle

Preview (I let the frame of the rectangle around the String meters visible here, to better see how mouse actions are detected all over it):

ezgif.com-optimize.gif

The formulas in the Path Shape from [LinkStyle] might seem difficult to grasp, but like I said, they are just adaptations of the (x',y') coordinates of a (x,y) point rotated around an origin point (aka a center of rotation), i.e.

In the formulas, there are parts like (0-[Meter#CURRENTSECTION#Button:W]/2) and such, basically subtractions that are being multiplied by the sinus or the cosinus of the rotation angle. In these parts, the number being subtracted is the coordinate of the origin point (aka the center of rotation, or the anchor in this case, which is (W/2,0) where W is the width of the string meter, when the string meter has its StringAlign=Center or CenterTop, see the manual here and jsmorley's post here), and the number being subtracted from is the coordinate of the rectangle's corner when the (0,0) point is the top left corner of the rectangle (the rectangle then becomes a path between (0,0),(W,0),(W,H) and (0,H) aka the top left, top right, bottom right and bottom left corners).

P.S. The rotation of the rectangular "frames" of the String meters is done entirely using Sin() and Cos(), no TransformationMatrix or other Rainmeter methods, precisely because as both eclectic-tech and balala have mentioned, they cause serious limitations and issues regarding mouse detection on the rotated meter, while the good old sinus/cosinus method does not.

[brax64]

The interest in this thread is probably lost by now and folks already use the solutions that have serious limitations, but just in case somebody else stumbles on this trying to do something similar, here is a solution ...
...

Brilliant!

[Yincognito]

Brilliant!

Thanks - just to be aware of it, if the alignment of text is changed, the numbers being subtracted in the formulas should be modified accordingly (the numbers being subtracted from always stay the same though), because the center of rotation changes as well based on where the anchor is, in the String meters' Angle option, like stated in the manual and jsmorley's post I linked to above. For example, for StringAlign=Center (or better said, CenterTop), those numbers are Width/2 for the X axis and 0 for the Y one, but for StringAlign=Right (or better said, RightTop) the numbers are Width for the X axis and 0 for the Y one - this would translate to [Meter#CURRENTSECTION#Button:W] and 0 in this specific scenario. I guess that part could have been automated as well if another variable holding the string alignment was introduced in the code. I didn't want to make the formulas longer than they already were though, so I left it as it was - after all, most of the times folks would want those texts centered because it looks better, so that's that.

[eclectic-tech]

Excellent addition Yincognito ; the use of a background meter is the only way to overcome the mouse detection issue with rotated strings.

One thing I would change is the placement of the first meter to reduce the "dead space" around the meters in different orientations, making it easier to place the skin close to the screen edges.

Something like this gets you pretty close:

Code: Select all

[MeterLink1Button]
Group=Link1Group
Meter=String
MeterStyle=ButtonStyle
X=(100-#AngleD#*#Scale#)
Y=(#AngleD#*#Scale#)
Text="#Name1#"
LeftMouseUpAction=["#Link1#"]

This will change the X and Y values based on the defined text angle.

[Yincognito]

Excellent addition Yincognito ; the use of a background meter is the only way to overcome the mouse detection issue with rotated strings.

One thing I would change is the placement of the first meter to reduce the "dead space" around the meters in different orientations, making it easier to place the skin close to the screen edges.

Something like this gets you pretty close:

Code: Select all

[MeterLink1Button]
Group=Link1Group
Meter=String
MeterStyle=ButtonStyle
X=(100-#AngleD#*#Scale#)
Y=(#AngleD#*#Scale#)
Text="#Name1#"
LeftMouseUpAction=["#Link1#"]

This will change the X and Y values based on the defined text angle.

Yes, indeed, this could be even further adjusted for sure (I don't like dead spaces either). I thought of applying a Sin() and Cos() formula for the HSpacing and VSpacing as well before posting the code earlier, to make that spacing exactly what was needed based on the angle of rotation, but then realized that letting those as they were improved flexibility a bit, as you could make things like:

Line Of 45 Degrees Strings.jpg

without being constrained by the values calculated by some formulas. This latter part doesn't refer to your reduction of dead space on the sides of all the meters (on which I agree, I would even make it less, LOL), but to my envisioned space reduction between individual meters.

[DrRoboculous]

Wow,you guys are magic workers. Thanks again for all your help, everybody!